分享

WEB色彩设计——橙色系

 清观 2022-04-05

多会在奢侈品网站上看到流金 溢彩,但用在餐饮业

设计中还是 独树一帜的。

界面布局

导航清晰,功能性强。进入首页 随着画笔渲染出童

话小屋后,网 站导航竟然由下自上展开的。此 时你

马上就可以拿起电话或者 网上订餐。(图 3-1)

首页广告窗口的活动画面,可以 让你迅速找到美食、

优惠券或者 活动,而省去了研究导航的时 间。(图 3-1)

进入童话小屋,每页传递的信息 不仅是美食,网站召

唤的食客好 像是一些永远不愿长大的孩子, 在每页里

你都会发现那么多童 年的元素,玩具、画笔、糖果还 

有憨憨胖胖的批萨厨师(图 3-1、 图 3-2、图 3-3、图 3-4、图 3-5、)。 

此外,在等页面打开时,还可以

顺便看看关于匹萨的故事,这也 是必胜客独具匠心的地方,

美食 的最高境界在于它的文化。

建站技术

引导页一个梦幻的 Flash 把你领 进这间美食小木屋,整个网站传 

达着富媒体时代技术的发达和 成熟的信息,你可以很快打开音频

视频,即使你从不看电视,也 可以从网站上看到最新最酷的 必胜

客广告。

这个网站主要是用 Flash 和表格 制作的,小版块放置得精制整 齐。

此外,网站上还包括了一个用 ASP 数据库制作的用户交互平台——

必胜客会员俱乐部,你可 以在里面下载最新的必胜客广 告和精美的

壁纸等等,最吸引人 的当然是办美食打折卡了,而完 成这一切你只

需和必胜客网站 做一个小小的互动而已。

(图 3-4)

这个网站橙色和暗红色的组合 给人一种非同一般的尊贵感(图 3-14、图 3-15、图 3-16),是那 种诱惑落寞的豪华,仿佛作着灵 魂最深处的展现,希望有人能够 听到它内心的声音。

同时,页面橙色与黄色相配是种 很舒服的过渡(图 3-16、图 3-17),由繁荣骄傲过渡到柔和 温暖,毕竟楼盘再有个性也要回 归到家的温馨感觉。

橙色一般让人联想到金色的秋 天,丰硕的果实,是一种富足、 快乐而幸福的颜色,橙色是最适 合家的感觉的颜色。橙色稍稍混 入黑色,会变成一种稳重、含蓄 又明快的颜色,这样的配色会让 人有回味的余地。

界面布局

整个网站重点突出(图 3-13、 图 3-16、图 3-17),在页面导 航或需要读者留意的地方都作 了追光处理,让人很容易就找到 探索这座城堡的途径。

这个网站的导航比较独特(图 3-14、图 3-15),它放在了不太 显眼的页面左下侧,像一座小楼 似的矗立在那里,但设计者考虑 到导航位置与其他网页的不同, 特意在进入页面时在菜单栏

(MENU)加了一个特效,这样你 不注意导航栏都难。

此外,主页面加了弗莱明戈大摆 裙的部分或全部暗和这个楼盘 的主题(图 3-14、图 3-15、图 3-16),传达出“这里是一个弗 莱明戈的世界”的信息。

建站技术

这个网站运用了 Flash 的技术建 站,Flash 技术比较适合建设此 类内容量少但又需要绚丽产品 展示的网站。

同时,橙色也是是自然的颜色, 喜欢橙色的人通常都非常热爱 大自然并且渴望与自然浑然一 体,他们喜欢户外活动,在户外 运动会让他们感觉到重生的力 量。

页面的橙色与白色搭配(图 3-21),在厚重的橙色笼罩下, 让人的视觉稍稍休息了一下,心 情也明快了起来。

界面布局

网站涵盖内容多但不杂乱,页面 左侧的中国结与右侧的深橙色 内容栏相映衬(图 3-21、图 3-22、图 3-23),平衡了整个页 面,也突出了重点。

导航一目了然,深粉色的底色使 人马上就能找到他们所关心的 栏目。

同时,页面也很注意整体布局风 格的统一,如“新闻热点”栏目 后凹的感觉整好与环形大屏幕 呼应(图 3-21),“写真与视频” (图 3-22)和“军霞随笔”(图 3-23)的表格结构也与页面和谐 统一。

建站技术

整个网站的建设是基于 Flash 和表格的运用。

这个网站的 Flash 效果做得非 常细致,如按钮上的流光效果和 环形大屏幕有韵律的照片反白 效果(图 3-21)。

表格技术的运用使得页面规范 整齐,同时也避免了纯 Flash 网站的打开页面速度慢的问题。

3.5 蜗牛游戏网站(Snail Game)

界面布局 

整个网站界面以图布局,甚至导 航栏也隐藏在图里,如果没有提示,恐怕还真得找一阵儿。(图 3-32、图 3-33)

游戏二级页面的布局十分简单, 像一个屏幕一样,你只需下拉菜 单就能找到你所需要的信息(图 3-34、图 3-35),但这样的布局 并没有使你有空旷感。

建站技术

这个网站基于 Flash 建站。

比较别致的地方就是它的导航 栏的设计(图 3-31、图 3-32), 你可以选择滚动鼠标的滑动轮 来实现栏目的变换,同时随着栏 目的变换,页面上的人物也相应 变换,这真的很有趣。

橙色赋予整个网站生命,在一片 桔色海洋里你看到了这款与众不 同的C2,黑色的汽车图像被背景 橙色映衬的格外突出,你也会感 到整个网站欢快活泼的气氛。(图 3-37、图 3-38)

此时,橙色向明黄色过渡并不是 那种舒服的温馨感觉,而是极其 跳跃动感的炫色,仿佛网站里的 车随时就要启程出发(图 3-39、 图 3-40)。

此外,淡灰色的运用稍稍冷却了 页面里感性的感觉,它向人们 传达着科技和安全的感觉(图 3-39、图 3-40)。

界面布局

整个网站主题鲜明,占页面主体 部分的就是那辆车,点选在页面 底部导航栏, 会在页面上方出现 子导航,这样栏目就比较清晰了。

值得一􏰀的是,在“动感我型” 栏目中,页面分别以三个字母 V——活力、S——运动和 T——时 尚来切合这个栏目的主题,让人 一下就记住了 C2 与众不同的特质 (图 3-39、图 3-40)。

建站技术

整个网站主要基于 Flash 和表格技术建站。

首页用表格制作,同时用了很少 的 CSS 语言调整版式,􏰀高了页 面打开速度(图 3-37)。

内部页面全都运用Flash技术,很 多特效做得十分完美,此外汽车 功能可以通过点选来了解,快速 方便。

界面布局

整个界面所要传达的信息非常多,但都被合理的安排在一幅页 面里,并没有让人感觉杂乱,这 就是设计者的功力所在吧。在很 多元素重叠的页面中,设计者用 一道彩虹牵连起它们,在页面中 形成了一个稳定的倒三角布局, 同时,也为页面适度的留白,让 眼睛有了呼吸的空间(图 3-57、 图 3-58、图 3-59)。

页面的下面的左右角都可以带 你探索网站,左下角方便了一些 “速读网页者”,你只需看一眼 按钮,就可以知道这条路的方 向。右下角的转盘导航适合那些 “按部就班”的读者,他们需要 充分了解导航信息,小小导航也 体现着人性化设计理念啊(图 3-55、图 3-56)。

建站技术

这个网站运用了 Flash 、 Div+CSS 技术建站。

Flash 主要体现在每页的介绍画 面,它像电影一样带你参观香港 并了解这款打印机的性能。

此外,整个网站还运用了一些简 单的 Div+CSS 来确定网页的布 局和样式。

(图 3-64)

亲自玩上一次。

表格(table)主要用来定位网站 中各种栏目,使页面更加规则、整齐。

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多