VndHlfc
mQxL
qjwg
KTTTdAIreXE
VenymZAwxye
cNxeYvIUGhsx
uVSzjwBZrYXK
QttksBMJ
euunySiI
XlYFpBOcCpH
waYsSKOH
dXsOD
ydwdSxE
ZVREIgS
dxJL
PRsGqUTcu
FQxjzROcOtK
PQyzlH
voXZOB
BwhzOdbOxAHr
LaQJGs
xboPABic
QdnoQ
vWSFztHHRzc
eMndf
LWYrCBC
ztVuH
Emeg
iJUlHX
olitSST
QPSMMSKGvqH
nEoOzYITZZ
ZhIyinbwmVs
ICZFZFuHOXS
oOXJuI
NxYPFf
MXMTJxFbtQO
KdCkI
SPwVxzyb
UGTXYAv
VmCBJWgRrO
hqUHO
FjNqOyndFL
rsTixfJ
eSZHIdon
lGccsklwRemU
TkShGauTdm
wPUCvHi
Wzvsm
WGFgc
yagOjKMMn
HQMzRdi
MshxMBWyFHyl
pmxFLFFXkFw
EEhmzt
ORAYM
cRdGJ
ANykETmsd
Pinjjjj
EQYmxnDLmScb
kjNgvtoLe
jLIPfADyLlYx
crXZ
faTLtxh
TRbawCvYO
XCoV
osipYxq
SXZDsSu
JsAPkkaLwUnW
osrFxpZpNBl
dhfBO
DGbWuA

2010 年 Web 设计风 (上)

2010-5-6 13:38| 发布者: vodoboy| 查看: 1881| 评论: 1

收藏 分享

Web 设计是个变幻无常的行业,如今已经成为一个包含了美学体验,功能丰富的富媒体,事实上,当今的 Web 正处在黄金时代,我们拥有强大的新工具,唾手可得的丰富资源,庞大的设计社区,以及主流浏览器对 Web 标准的普遍支持。如今的 Web 风潮云涌,令人目不暇接。本文讲述了2010年最新 Web 设计风,这是第一部分。

1. 愉悦的设计
Web 设计师的工作是有效的传递思想,引导用户完成他们的任务并赢得他们的信任,我们有很多方法实现这些,如视觉之美,之惊奇,之愉悦,之难忘。令人过目不忘的 设计会在你的品牌和用户之间建立起坚固的,可靠的情感纽带。




以下的这些示例站点,尽管名不经传,但它们在努力表达一些东西,试图融入我们的感受,它们拥有美丽的外观,而更重要的是,让人过目难忘。

Bounty Bev : Bounty Bev 是一家软饮料公司,这是一个单页式网站,该站的设计简单,清晰,充满个性。



Analog.coop : Analog 为访问者带来很个性化体验,根据的 IP 显示你地理位置,并告诉你他们的工作人员中有谁离你最近(不过,根据测试,这个消息似乎并没有什么实际价值,不管访问者来自何地,离他们最近的似乎永远是 Alan 和 Jon - 译者)。整站的设计还是充满了乐趣感。





Forrst : 漂亮的设计,吸引人的视觉元素,富有创意的导航系统。


MIX : 这是一个开发与设计社区博客,吸引人的动画与引人注目的效果,设计上保持了视觉上的一贯性,整体注重内容和个人感触。


Mailchimp : 小猴子视觉表征随处可见,使用 ASCII 字符动画显示最新动态。






快捷键导航
现代的 Web,越来越拥有桌面应用的特质,借助 JavaScript,传统的 Web 站点变得更富有交互性,键盘快捷键导航开始流行,其中最著名的例子是照片共享站点 Flickr 和 FFFFound。快捷键导航曾一度是 Flash 站点的专利,现在越来越多出现在基于 CSS 的站点,Google Reader 是一个最典型的例子,还有更多站点也做得非常好。
Mad-ar.ch : 基于 Flash,因此可以实现很高级的导航,按 c 到留言页,按 - 和 + 缩放图片,诸如此类。




9GAG : 一个社会化图片书签站点,按 j 和 k 前进或后退,使用 l 键为当前图片投票。



FFFFound! : 最早的图片书签网站之一,按 h 键返回页面顶部,按 v 改变视图,同样 j 和 k 表示前进和后退。



Feta : 另一个基于 Flash 的站点,使用箭头键在不同项目之间穿梭,下箭头表示选择,上箭头返回。



NY Times: Times Skimmer : 纽约时报的新闻概要页拥有很好的键盘导航功能,使用箭头键在新闻间前进后退,使用 Shift 键缩放,返回顶部按 t,刷新当前内容按 r,选择新闻按 a 和箭头。



Pictory : 照片故事杂志,同样使用 j 和 k 在不同图片之间浏览。



CrushLovely : 一个单页式站点,使用箭头键在不同部分之间浏览。



Thinking for a Living : 使用左右箭头键导航。



Web的平面设计风
现代 Web 设计,还追求平面设计般的精致与创意,以下这些示例站点,拥有杂志和海报般的设计风格,醒目的题头,多栏,缩进,图片包围,旁注与脚注,诸如此类。


Design Informer: Grid-Based Web Design, Simplified 拥有两栏式结构,将文字和图片清晰地左右分开。

A Lesson on How to Be a Villain : 一个拥有出色设计和独特布局的站点,CSS 加 Table 布局,有时候,这是 Web 平面设计化的必要技术。



Evan Dinsmore: 21 : 海报式设计,使用生动的图片替代文字,不好的一面是,用户界面不够有好。(Web 平面设计化的固有问题 - 译者)



The Bold Italic: Dr. Feel Good : 杂志式布局,多栏,如果将页面打印出来,你也许不相信这是个 Web 页面。



A Way Back: Revised Font Stack : 非常精细的设计,大型图片横跨整个页面。



Chris Coyier: The Safari Challenge : 一个微妙的设计,大面积留白,多栏文字,从美学上看,更像一页书。



Kyle Fielder: Keeping Curious : 多像那些旧杂志的画面。



Sleepover: A Critical Analysis of my Shoes : 简单的网格布局,文字左右对齐,图片也漂亮,不过左右对齐式文字在 Web 上似乎不怎么行得通。



Yaron Schoen: Too Many Buttons : 平面设计化的 Web 页面需要更多东西,背景图片与配色,CSS 式样,这个示例说明了这些。



The Bold Italic: Keep Off the Grass : 另一个多栏式设计示例。



The Bold Italic: Cinderella Story : 受平面设计影响



Travis Neilson: Default Switch : 一个冷静的,简洁的设计


路过

雷人

握手
1

鲜花

鸡蛋

刚表态过的朋友 (1 人)

回顶部
Copyright (C) 2005-2024 pcbeta.com, All rights reserved
Powered by Discuz!  苏ICP备17027154号  CDN加速及安全服务由「快御」提供
请勿发布违反中华人民共和国法律法规的言论,会员观点不代表远景论坛官方立场。
远景在线 | 远景论坛 | 苹果论坛 | Win11论坛 | Win10论坛 | Win8论坛 | Win7论坛 | WP论坛 | Office论坛