当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 网页设计风格是不是越简单越好?

心得技巧
设计作品参考:有创意的美观大方的简历设计
产品设计:产品三要素三角模型
手机移动平台的UI界面设计:减少空间占用
B2C网站产品设计实例:简单的广告设计
设计理论:杂志的目录设计
用户体验设计:良好的站内搜索设计指导
设计作品参考:很具想象力的标志LOGO设计
用户体验:简单的用户研究的分析和总结
WEBJX收集11个优秀的在线表单服务网站
邮件设计与网页设计的巨大差别
优秀的交互设计应该是最愉悦的满足用户的需求
谈新版豆瓣首页交互设计:复杂网站的标签系统
GOOGLE用户体验设计师谈Google的十大设计原则
腾讯QQ产品经理谈互联网产品经理的素质
网页设计参考:50个激发你设计灵感的网站实例
WEBJX收集27个流行且别致的网站header设计实例
50个鼓舞人心的设计惊艳的iphone应用网站
淘宝网系统的前端安全规范
混乱的URL编码
WEBJX收集10个非常不错的旅游行业网站设计

心得技巧 中的 网页设计风格是不是越简单越好?


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-27   浏览: 108 ::
收藏到网摘: n/a

原文地址:
http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm

我使用“ Web 2.0设计”来形容目前占主导优势的网页设计风格, 很多人用这个词来形容:

  1. 网络经济的复苏
  2. 网站和用户之间更高水平的交互
  3. 或一种社会想象,由新型的网上社区和社会网络而形成

Web2.0 式网页先睹为快

如果您没有足够的资源创建自己的2.0式的网站,TemplateMonster 刚发布的web2.0模版频道可以帮到你。当然,购买的模版不一定能完美的契合你的目标,但是为用户定制的设计也常常不能保证。

简介

我将带你过一下目前优秀的网页设计特征,仔细分析最突出的特色,讲解每个点优秀的原因,并向你展示如何将他们使用在你自己的网站上。

如果让我用一个词来总结web2.0,那将是“简单”,那我们就从这开始说起。

我是简单的极力支持者,我认为它是网页设计未来的方向。目前简单、大胆、优雅的网页设计用少来传递更多:

  1. 通过引导用户视线只浏览少量但精心选择的视觉元素,使设计师能直接瞄准网站的目标
  2. 它们用更少的语言来表达更多信息,同时精心选择的图片设计去创造看的欲望
  3. 它们认为,我们能猜测用户期望从网站得到什么

一、简单

网页设计比起以前风格更简单,这是一件好事。

2.0风格设计代表着聚焦、干净和简单,但那并不代表着要极简主义,我们应该用少量但必需的元素去达到我们的目标; 有个原则是我一直坚持的:假如解决某个问题有两种方案,那么更简单的就是更好的。

这里有一些例子,注意他们把不必要的元素都剔除了,也许每个页面都可以有更多的元素,但是那样能使页面变得更强大吗?

结果你会感觉不由自主地去看主体内容,你发现自己与页面的元素互动正是设计师所希望的,而且你并不介意这种简单,同时又达到了你的目的。

为什么简单更好

  • 网站和每个页面都有目标;
  • 用户的注意点是有限的资源;
  • 帮助用户找到他们想要的(或让用户注意我们希望他们看的内容)是设计师的职责;
  • 屏幕上的元素吸引眼球,元素越多,用户去关注的各种不同的事情就越多,同时他去关注重要内容的几率就下降了;
  • 所以我们需要很确定的交流方式,也需要把信息噪音减少到最少,那代表着我们要找到一个尽可能少用元素的解决方案,那就是节约元素即简单。

何时/如何让你的设计简单

  1. 何时 始终如此
  2. 如何做 有两个方面能让你成功做到简单
    • 在不影响效果的情况下,去掉多余的元素
    • 能达到同样效果的可行方案中,选择更简单的

看起来达到完美的结果,不是没有东西可再添加,而是没有任何东西可被去除的时候,每当你设计的时候,有意识的把去除多余的视觉元素作为准则。

不要把注意力特别集中在和页面目标相关性比较小的区域,因为用户视线在关注这些时会分散在主要内容和导航的注意力。利用视觉细节如线条、文字、形状和颜色去传达信息,而不仅仅是为了装饰。

这里有个设计的例子,由于不够简单而深受其害:

Yaxay 的界面用了很多像素,但是大多数都是修饰性的,一部分是页面的背景。相对少的像素被用来让用户找到或理解信息或被站点吸引。

想想这个页面看上去东西可真多啊,但是能使真正的导航、内容和交互特征清晰的元素实在太少了。

爱德华•托佛特用“数据墨水”(如可以传递信息的细节)和“非数据墨水”(如只是修饰的细节)来形容这一现象。

托佛特的衡量信息设计(图形,图表,演示等)有效性的一种标准是数据墨水和非数据墨水的使用比例,数据墨水使用的比例越高,设计的有效性可能就越高。

以Yaxay第二幅的细节图为例,它有太多被称为“繁忙”的元素,比如大量的边缘、色调、颜色变化、形状、线条……很多要看的元素,但是在这个细节真正有用的是:

  1. 网站的logo
  2. 导航按钮上的标签文字:art gallery

剩余的其他“繁忙”元素:背景上的形状、界面上的斜线、网格、渐变……所有这些噪音都是非数据墨水,因为它们都不能传达信息。

我并不反对网站设计的丰富、复杂或美感性

简单的意思:无论采用什么方式,只要是为了让信息传达更顺利的元素是越多越好,当然,通常你要传达的不是硬数据,而是软数据;

硬数据:指事实,如新闻、股票价格、列车时间或你银行账户的存款……

软数据:涉及信息传达的质量,如公司给人的第一印象,服务提供者是否亲切,一种产品是否适合你……这些都是同样重要的。

无论你要传达的是硬数据还是软数据,你都应该有意识并谨慎的使用元素数量。

以下图为例:

Alex Dukal的站点很丰富、有趣、吸引人,它用了一系列视觉技巧来引起你注意,让你感觉有趣,对Alex的工作给你一种温暖的感觉。但是它也是简单的,因为它谨慎而敏感的使用像素、墨水或繁忙元素,它并非是没必要的,而是节俭而丰富的。

无论怎么说,当你使用墨水、像素时要明智的选择,用它来传达首要的信息,同时,问问自己用少量的元素能否有效的传达信息,如果可以,就这样做。[未完待续……]

第一次翻译专业性文章,有不得到之处欢迎指正