|
2010 年 Web 设计风 （上）
作者: its
|
发布: 2010/5/6 (7:05)
|
阅读: 59716
|
评论: 2
|
静态地址
|
内容源码
Web 设计是个变幻无常的行业，如今已经成为一个包含了美学体验，功能丰富的富媒体，事实上，当今的 Web 正处在黄金时代，我们拥有强大的新工具，唾手可得的丰富资源，庞大的设计社区，以及主流浏览器对 Web 标准的普遍支持。如今的 Web 风潮云涌，令人目不暇接。本文讲述了2010年最新 Web 设计风，这是第一部分。
1. 愉悦的设计
Web 设计师的工作是有效的传递思想，引导用户完成他们的任务并赢得他们的信任，我们有很多方法实现这些，如视觉之美，之惊奇，之愉悦，之难忘。令人过目不忘的设计会在你的品牌和用户之间建立起坚固的，可靠的情感纽带。
Brizk design studio 拥有令人目眩的设计，精美的动画，漂亮的字体和干净的布局，将鼠标放到底部的小鸟上时，会浮显出 Twitter 消息。
以下的这些示例站点，尽管名不经传，但它们在努力表达一些东西，试图融入我们的感受，它们拥有美丽的外观，而更重要的是，让人过目难忘。
Bounty Bev ： Bounty Bev 是一家软饮料公司，这是一个单页式网站，该站的设计简单，清晰，充满个性。
Analog.coop ： Analog 为访问者带来很个性化体验，根据的 IP 显示你地理位置，并告诉你他们的工作人员中有谁离你最近（不过，根据测试，这个消息似乎并没有什么实际价值，不管访问者来自何地，离他们最近的似乎永远是 Alan 和 Jon - 译者）。整站的设计还是充满了乐趣感。
Forrst ： 漂亮的设计，吸引人的视觉元素，富有创意的导航系统。
Billy Tamplin ： 这是 Billy Tamplin 的博客，记录他生活与工作中的小小得意与荣誉。设计简单，漂亮。
MIX ： 这是一个开发与设计社区博客，吸引人的动画与引人注目的效果，设计上保持了视觉上的一贯性，整体注重内容和个人感触。
Blue Sky Resumes : 一个代写简历的小团队，Header 部分的 Flash 动画很好地暗合了公司的名字，值得注意的是，在这段动画加载之前，Header 部分是以简单的图形填补动画加载前的空白的，这种渐进式体验非常体贴。
Mailchimp : 小猴子视觉表征随处可见，使用 ASCII 字符动画显示最新动态。
快捷键导航
现代的 Web，越来越拥有桌面应用的特质，借助 JavaScript，传统的 Web 站点变得更富有交互性，键盘快捷键导航开始流行，其中最著名的例子是照片共享站点 Flickr 和 FFFFound。快捷键导航曾一度是 Flash 站点的专利，现在越来越多出现在基于 CSS 的站点，Google Reader 是一个最典型的例子，还有更多站点也做得非常好。
They Make Apps ： 几个月前，他们有一个键盘导航模式，使用箭头在内容之间穿梭，回车键展示细节内容，Escape 键返回主页面。但不知何故，键盘导航功能现在已经去掉了。
Image source
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 : 使用左右箭头键导航。
Picnic Extraterrestre : 一个非常不同的设计，模仿图文电视风格，所有导航内容都可以通过数字键实现。
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 : 一个冷静的，简洁的设计
延伸阅读
本文国际来源：Smashing Magazine The Current State of Web Design: Trends 2010 （原文作者：Vitaly Friedman）
中文编译来源：锐商企业CMS 网站内容管理系统 官方网站
| 
团队博客
