视觉设计的一些方法 - UCD大社区

图片投射方法在会员官网视觉风格调研中的运用

hiseven — 2009-06-09 20:58:12

图片投射是一种定性分析技术，源于心理测量中用于人格评估的投射技术（Projection Technology）。投射是指人们把自己的态度、愿望、情绪等不自觉地反映在外界事物上的一种心理现象。所谓投射技术是指通过分析人们对于外界事物的反应，而去研究产生这种反应的内在的态度、愿望和情绪等内在心理活动。

在图片投射中，所采用的投射工具是一系列图片，分析人们对这些图片的反应，帮助获得人们内心想法。

在市场研究中运用图片投射技术，主要有以下几个方面优点：

（1）形式比较新鲜活泼，敏感度较低，便于营造有趣轻松的氛围，使被访者处于放松状态，更容易表达出内心想法；

（2）图像是感性的、直觉的加工，不同于言语理性的、逻辑的加工。图片投射将被访者从理性思维中拉开，更深入地挖掘其情感及喜好；

（3）对于一些受教育程度不高或习惯图像思维的被访者，图片可以突破言语表达障碍，辅助思维并传递他们的想法。

图片投射方法在最初可以很好的指导品牌的设计，在会员官网的视觉风格调研中，主要就是通过这种方法了解目标用户对于会员官网所要传达的“尊贵”“活泼”“独特”“安全”的理解，提取满足QQ会员品牌特点的视觉元素和QQ会员用户“色彩”、“质感”偏好关键点。

具体的操作步骤及注意事项

在市场研究中运用图片投射技术要清楚认识到：图片只是帮助被访者思维和表达的工具。这点将指导如何准备图片、如何组织被访者选图片、如何挖掘被访者所选图片背后含义。

（1）精心准备合适的投射图片

图片投射方法的目的是通过一系列图片来帮助用户挖掘和表达内心的想法，因此选择合适的图片将直接影响测试的结果。图片的选择需要紧紧围绕测试目的。

用于投射的图片材料可以分为结构化图片和非结构化图片。结构化图片具有相对严密的维度，每张图片背后都代表较为清晰的定义；非结构化图片的组织相对松散，图片的含义也相对模糊。

例如在对“尊贵”的投射中，我们准备了两个图库，一个是有实物场景的结构化图库，包含具体的实物、场景等，一个是抽象的非结构化的图库，包含色彩、质感等元素的图片等。

图1 实物场景的结构化的图片

图2 抽象的非结构化的图片

（2）测试形式及选图规则的告知

一般我们会采用焦点小组的形式来进行图片投射的测试，一时因为这种方式快捷简便，节省调研时间，可以快速得到多个样本。另一方面，小组的互动形式比较新鲜活泼，敏感度较低，便于营造有趣轻松的氛围，使被访者处于放松状态，更容易表达出内心想法。

图片投射对于大多数被访者来说形式比较新颖，可能对如何挑选图片充满困惑和不解。正如在游戏开始之前没有解释规则游戏将无法进行一样，没向被访者解释选图目的规则就匆匆让被访者开始选图，效果肯定不会好，甚至全部乱套。所以在选图之前，一定要花时间向所有被访者清晰解释整个游戏规则。这里就需要一个经验丰富的主持人来引导用户，例如开场可以有一小段的自我介绍，轻松气氛，让大家彼此熟悉。有的时候为了消除被访者顾虑，告诉被访者“可能每个人对图片的理解是不一样的，这都没关系，请选择代表你自己感觉的就可以”之类的话。

图3 访谈现场&调研花絮

（3）挖掘被访者所选图片的含义

选择哪张图片从某种程度上说并不重要，最重要的是被访者如何对所选的图片进行描述解释，这时往往需要主持人运用追问、反问、挑战、澄清等主持技巧不断激发、推动被访者，挖掘被访者内心想法。

注意追问的深入。主持人需要不断询问被访者，去探究选择图片背后的原因：“为什么你会选择这张图片？能否和大家分享一下你的想法？”如果被访者的回答仅仅对图片中一些显而易见的表面进行描述时，例如“我选择这张皇冠的图片”，主持人需要及时追问：“为什么选择皇冠代表你对尊贵的感觉？为什么你把尊贵和皇冠联系起来？”对于那些认为挑选不出合适图片的被访者，主持人也可以询问他对“尊贵”直接感觉。

注意差异的挖掘。注意挖掘被访者之间的观点差异，一百个人心中有一百个哈雷姆特，同一张图片对于不同被访者可能会有不同的解释，如果好几位被访者同时选择一张图片代表他们各自对某个品牌的感觉，注意询问他们选择这张图片的原因是否一样。对于品牌形象的图片投射来说，还要注意挖掘品牌之间的品牌形象差异，如果被访者选择了同一张图片代表不同品牌的品牌形象，注意询问品牌形象是否有所差异。例如被访者选择一张纯黑色的图片代表凯迪拉克和雷克萨斯，经过主持人追问才区别开凯迪拉克是“尊贵深沉”的黑色，雷克萨斯是“豪华显贵”的黑色。

图4 最尊贵挑选率 13/20 无男女、年龄差异

图5女性挑选最不尊贵女性挑选率4/8，总挑选率4/20 无年龄差异

（4）后期结果分析及报告

记录下多场的用户的图片选择结果，进行定性的分析。抽取符合尊贵、活泼、独特、安全、时尚的关键性视觉元素，和符合QQ会员喜好的色彩、质感等能指导设计的元素。这个阶段需要有用户研究人员和经验丰富的图形设计师共同参与。

相关话题：视觉设计的一些方法源地址：http://webteam.tencent.com/?p=938

網頁配色工具

家儒 — 2009-05-17 23:22:17

設計網頁時最頭痛的往往是風格的定形、顏色的選擇。花數個小時在配色上對我來說是司空見慣的事情。所幸網路上有不少配色工具和配色收集網站，絕對可以在配色的時候幫你一把。本文精選了幾個最實用而又具特式的工具，方便日後查找。

Colorotate

與眾不同的顏色選擇工具，將顏色以 3d 的關係呈現出來。用戶可以調整光源角度／強度／對比度等等，而且還可以匯出成 Adobe Swatch Exchange (ASE) 檔案。

http://www.colorotate.org/

Color scheme designer 3

一個很專業的配色工具。它的前身是 color scheme generator 1 ＆ 2。除了從光譜上選擇顏色外，還可以選擇顏色的飽和度／色調，制作不同格調的網站時必能太派用場。

http://colorschemedesigner.com/

Adobe Kuler

相比其他配色工具，Adobe Kuler 更像是一個配色管理／分享工具。用戶可以上傳自己的配色，或者瀏覽他人的配色並評分。因為有 Adobe 的加持，Kuler 還有 AIR 版本及 Photoshop extension。

http://kuler.adobe.com/

ColourLover

很知名的一個配色愛好者社區。除了收集配色外，還收集 patterns。可以匯出成各種格式，包括Photoshop/ AI/ GIMP 等等。

http://www.colourlovers.com/

Contrast-A

這個比較傳統一點

http://www.dasplankton.de/ContrastA/

白色在网页设计中的使用：贴士和趋势

小单 — 2009-04-25 23:39:35

原文作者：desizntech
原文链接：Use of White in Web Design: Tips and Trends
译者：小单

当你想到白色的时候什么会跑进你的脑海中？白色是最简洁，优雅与和平的颜色。白色被广泛应用于博客，网上证券，电子商务和其他各种网站的网页设计中。白色可以被用在字体颜色，背景颜色，链接，图片等等。如果你认为白色网站不那么吸引读者，那么事实你会感到惊讶。一些设计优秀的网站也在页面上使用白色。在这篇文章中你会找到怎么样在网站中使用白色的灵感与建议。

Minimal Beautiful Sites 美丽的最小化网站

简单的最小化网站可以使浏览的人愉快。当你创建一个白色背景的网站时，保持它简单整齐。它的美就自然而然的显现出来。一些大公司和网站也使用白色作为网站的背景色，像flickr, iStockphoto, Makeuseof, Apple。虽然接下来的大多数网站是最小化的，但是他们可以表明怎么样使用白色表达潜在的内容和网站本身。

Buffalo-Web Design & E-commerce

Jeff Doe

Rustin Jessen

Sushi & Robots

Qindex Web Design Magazine

Using Illustration with White 使用白色图解

手写，图解，卡通人物，和油渍是新的网页设计趋势。网页设计和美术设计师通过插画和艺术作品来表现他们的创造力。这里有一个简单的例子用#FFFFFF：当一个画家开始下笔的时候，画布是白色的，又或者一个插图画家也是从一张空白的纸开始画一个人物。最后的作品都很漂亮。白色藏在一切美好事物的下面，并是一切美好事物的基础。接下来的网站展示了在插图和绘画时创造性的使用白色，让我们可以看到白色的艺术性和创造性的一面。

Things That Are Brown

Using White to Brighten up Other Colors用白色使其他颜色明亮起来

你如果认为简单的素色网站跟五彩缤纷的网站一样令人兴奋地化，你就错了。记住，白色能让别的清淡明亮的颜色显示出他们的深度，强度和丰度。像红色，蓝色，淡绿，粉色恶这样明亮的颜色看上去更容易被关注和更令人开心。因此，如果你正计划混合其他的颜色在连接，按钮，菜单中，请明智的使用颜色，而不是让它们看起来一团糟。这里有一些网站，用白色和其他颜色混合，使网站变的吸引人。

Tim Jarvis- A Base Reference

Hello Lucky

Final Words最后的话

简单扼要的给出一些使用白色在网站中的小贴士

用清淡和明亮的颜色作为链接
尝试最小化你的网站
确保内容很容易跟随
不要跟广告混成一团，如果你决定包括广告而且用同样的背景颜色
不要用小号字
创造性

设计良好网页的4项原则

猫哥 — 2009-04-23 22:30:43

原文作者：Andrew Houle
原文链接：4 Principles of Good Design for Websites
译者：猫哥

我最喜欢的设计书籍之一就是《Robin Williams Design Workshop》.它深入实际的设计理论，并且包含许多极棒的设计实例。其中一个值得关注的地方就是4项主要的设计原则，它们已经在设计中为我所用。这4项原则就是：反差, 重复, 排列, 和分类。

本文将讨论这4项与web设计相关的原则。只要在脑海中牢牢记住了这4项原则，你就一定可以设计出更加整洁漂亮的网页。

1.反差效果

好的反差效果设计可以给用户一个极好的第一印象。如果用户的眼睛没有焦点，注意力就会在处处是相同尺寸的元素和排版界面中迷失。设计师需要设计出很明显的突出视觉元素来引导用户的体验。你可以通过选择图片、颜色和字体等来形成良好的反差效果。

图片反差

当需要在很多小元素后面展示一个大尺寸的插图时，这种方法很有效。嗯，我的意思就是，比如：

The Invoice Machine

这个网页利用一张大图片来吸引用户的注意。而同时网页很自然的单色又让很少的蓝色应用有了更好的效果。

Instabox

当你眼睛看到这个页面的时候，首先你会注意到什么？最有可能的就是盒子上面的那个星星了。跟 The Invoice Machine 一样，它们都是通过用一张大图片和很少的颜色来制造一个视觉焦点。

颜色反差

恰到好处地使用少量颜色，是网页中另一种制造视觉反差的有效方法。可以在网页的头部和文本拷贝中使用不同的颜色，也可以在一张图片或插图的颜色里面应用。

Fatburgr

这个网站是极出色的一个所有设计原则的应用实例。关于颜色反差我们来看看它大大的黄色头部和小小的淡灰文字。排列、图片反差、重复和分类这几个原则做得都很彻底。

I Love Typography

一个用来展示排版的网站如果在它自己的页首就为我们展示了一个极好的排版效果，那让人觉得多惊奇啊！我喜欢他们所用的字体，也喜欢他们良好的青色和深灰色搭配。

字体反差

如果你想通过字体来产生反差效果，就应该避免使用2个很相像的字体外观和大小。很相像的字体会造成混淆，并让设计变得模糊。不过把字体大小弄得很不一样就会非常有效果，或者是把字体最细和最粗的版本拼合到一起也同样有效。同样的，如果你将两种外形差别明显的两种字体排在一块，就会对它们带来的视觉冲击效果感到惊奇。把一个 san serif 字体和一个手写字体放在一起就是一个例子。

Fixie Consulting

哇噻，我真的非常喜欢这个网站上使用的排版和颜色。注意看他们标语的大小和笔画。页面上洒水效果和少量蓝色的使用，都让我非常欣赏。

2.重复原则

跟web设计相比，重复原则在书本设计中应用得更加普遍，不过它在两者之间都是一样有效的。重复的设计元素可以使页面显得很连贯，还能提升品牌。在web设计中，可以很好地达到这个目的的一个方式是在网页的头部和脚部重复放元素。看看下面这些例子吧。

Ten24 Media

Ten24 Media 在头部和脚部都使用了很有创意的插画。

Silverback

这个网站绝对是超赞的！我绝对可以在前面“反差原则”部分就可以把它作为一个好例子亮出来的，可它在“重复原则”部分也是一个好例子，因为它的界面风格和品牌部分都很明显地应用了这个原则。仔细看它用香蕉来当做列表前面的图标，还有头部、脚部的森林插画。

3.排列原则

你的网站外观设计得很业余还是很专业，排列原则在其中扮演了一个很复杂的角色。最近我很主张在设计网页时使用格栏。这么做可以让你的设计很干净，也可以提供一个很好的设计框架。如果你有兴趣想学习更多关于格栏设计的知识，去看看我最近的文章吧（在这王婆卖瓜，自卖自夸一下），Design A Fresh Blog Theme On The 960 Grid.

Black Estate Vineyard

这个网站在960 Grid website上有展示。它的版面排列很连贯也很引人注目。我很欣赏它将主要内容整齐地排在左边的做法，尽管有些大级别的头部破坏了这个规则并排到了左侧边栏里面。对留空的大量使用和字体反差大小的使用都非常不错。

A List Apart

A List Apart中使用的可视格栏非常有特色。里面的栏目设计良好，把所有包含内容都变得易于阅读。研究表明过宽的栏目会造成严重的阅读困难。在跟随那么宽的栏目中的文字时，你的眼睛会变得很累。 A List Apart

4.分类原则

最后一个原则是分类。只有在将相关元素分组，将无关元素分开的时候才会用到这个原则。假如你将所有东西都分到同一块文本块中，绝对会摧毁用户的体验。这就是为什么使用头部标签和适当的留空是那么的重要。

Envato

这个网站漂亮地将内容规整地组织到三个主要分类下，这些内容的定义既清晰又规整。

Paradigm Reborn

这个网站结构良好。头部既整洁又简单明了。空白留的很好，内容分开放得很有逻辑。

最终思想

当你脑中时刻惦记着这4个基本原则时，你会发现你的设计有了不可思议的改进。当然肯定还有许许多多别的东西也需要考虑，但是以反差、重复、排列和分类作为基础你的设计会取得长足进步。

到你了

加入到讨论中吧。你对这些设计原则有什么看法？能否分享别的一些东西？

像懒人一样去设计

凉风 — 2009-04-21 13:10:15

设计是简单的如果你知道要放的东西该放到哪。

曾经在某个电子杂志里看到一篇关于如何在平面设计中偷懒的文章，引发了我的一些思考，在平面设计中有这么多可以偷懒的方法，那在网页设计中是不是也有一些捷径可以探索？当然作为一个刚刚踏入网页设计领域的新兵来说，这样的标题对我来说显得有点“大逆不道”，但如果不写下去，又觉得可惜。于是，文章也就写下去了……

如果你刚打算从其他专业转到网页设计这个领域，那这篇文章是为你而写的，如果不是，那就当鉴赏一下精彩的图片吧。

如果准备好了？那就开始回归正题吧！……

世界上第一台电脑ENIAC的诞生是为什么？也许是那些研究员厌倦了周而复始的计算任务，想偷懒一下，所以造出了计算机以代替他们的机械劳动。网络出现是为了什么？也许是为了更好的接收外界最新鲜最劲爆的资讯，也许是为了能跟远方的亲朋通过网络来交流，也许是为了放松一下工作中紧绷的神经，也许是想足不出户就能得到天下万物，也许只是想知道自己不知道的问题。而这些也许都是因为人们太懒了，懒得去买报纸，看电视，懒得去跟朋友见面，懒得去运动放松，懒得去市场购物，懒得去查阅《十万个为什么》、《百科全书》。而网络的出现弥补了这些需求。难怪人越来越懒了……

偷懒对于设计师是奢侈的，但是这不能阻止我们偷懒，因为用户都这么懒，我们不懒怎么能知道他们的需求（有些牵强的理由）然而我不是鼓励我们与老板做“非暴力不抵抗”运动，而是要让我们的工作更加有效率，这样就可以多享受几天准时下班啦！

下面将要介绍的正是我为偷懒所做的努力。

一．网页模板化

网页设计有先天的制约因素，硬件制造商只给我们生产了前后滚轮的鼠标，很少见过横向滚动的鼠标，所以我们的页面一般是长条状的，然后在浏览器右侧给我们按了个滚动条就算吧我们忽悠过去了，而我们却还用得不亦悦乎。而页面的大小又要跟着主流显示器的分辨率而确定。难怪有人称我们是戴着脚镣的舞蹈家，我更原意称我们是顶着饭碗的舞蹈家，伺候不好这饭碗，摔了可就没饭吃。所以，舞要跳，饭要吃。后来我学聪明了，从来都只做1280px以内的页面，这样你好，我好，大家好。

定好页面的大小后是不是迫不及待要爆发小宇宙了？爆发前，最好先确定好交互原型，因为设计师跟战士一个德性，打仗的时候不是有“一鼓作气，再而衰，三而竭”嘛，一但设计出一个“页面”（暂且称页面）发现脱离了交互原型，那返工可是既累又打击自尊的行为。

在设计页面前我想跟大家分享一本“设计圣经”里的几句话“我们精心准备的页面在用户看来更像是‘以每小时100公里的速度驶过的广告牌’所以我们需要建立清楚的视觉层次，把页面划分为明确定义的区域”，把一些可以固定的模块都做模板化处理，对于有延续性的设计（如：绿钻有礼、绿钻音乐会）这样只要进行一次模块设计，后期可以不用经过设计环节，节约了大量的设计、制作、开发资源，也使得页面整洁，条理清晰。这样让我能在非模板区花更多的时间让页面变得更加精彩，多争取 “几秒”用户的时间。

看来我对偷懒所做的工作初见成效了！

二．视觉规范化

“规范”一词最早被我接触应该是《小学生行为规范》的时候，从小我们都知道要爱祖国爱人民，为什么？因为他让我们的社会安详和谐，因为检查官懒得去解决这些小CASE，所以从娃娃抓起，从小培养我们做一个规范的好公民。

咱们设计界也有规范，大型企业品牌都有自己的一套VI系统，这些都是对于品牌所做的规范，规范能让一些原则问题得到解决，网页设计里的一些门户级页面特别需要注意的是规范，这样能让页面统一，比如网页设计里的间距，小到几个像素（虽然网页就这么点像素）也都要实行规范，规范做好了，就像一个人的仪表，端庄就会得到青睐，我们应该不会习惯一脚穿皮鞋一脚穿拖鞋走在大街上吧？所以为了不XX用户的眼球，我们需要做这些规范，要知道这些规范可是一劳永逸的美差呀，规范做好了，即使下回不是由我来操刀，其他设计师也能根据它来修改页面，免去了沟通成本，我还可以抽点时间打个小盹。

三．随时保存您的风格

这玩意儿太重要了，别看一些页面设计得多好看，那全是站在“巨人”的肩膀上的啊。PHOTOSHOP（这里不敢简写PS，因为它我差点过不了毕业论文）强大的图形编辑功能是不言而喻的，但是其中一些自定义保存的部分据我观察不是十分受到关注，Photoshop中的批处理、action、预设管理器那可是偷懒的“利器”啊。发现一个好的样式、色彩或者配色可千万别忘了保存，这些为工作提供了巨大的便利，如果为找不到合适的样式而发愁，不如寻找一套样式，然后在这基础上修改，我经常这么干。这样更加节约您的宝贵时间，让你将偷懒进行到底……

四．善用填充图

设计活动页面就像在设计一张海报，需要给人丰富的视觉感受才能打动用户，然而比较偷懒的做法就是添加填充图，填充图就是以一个单一的小元素平铺成一个大的画面，设计填充图是一件有趣的事情，就几个像素的摆放能影响整个画面的效果，连续的图形在我看来会给人真实的材质感，让画面不再单调，使用恰当会让网页平面化，提升用户的视觉感受，这也是服装巨头们乐此不彼的手段，大家如果有兴趣可以设计不同的填充图。如果连这步都懒得去做的话，那还是去搜一下填充图制作网站吧，因为我懒得贴链接了。

五．做立体效果

大学里老师总是跟我说“平面要不平那才有意思”我并不是要我们去把电脑屏幕给弄得跟哈哈镜一样。其实我们可以玩一些视错觉游戏，最近3D电影不是很流行么，我倒是期待有一天我们的广大网友能够戴着立体眼镜浏览网页，那是多大的欣慰啊……看来有点犯困才会想这么远，还是现实点，既然不能强迫用户去买立体眼镜那我们就直接做带点立体的设计吧，图个新鲜，网络嘛就图个新鲜。然而问题又来了，想做立体的东西但是苦于软件水平有限怎么办，那我就再向各位介绍一把PS的好兄弟Illustrator吧！Illustrator有一个滤镜可以实现3D效果，任意拖拽，任意透视角度，任意光源，总之太多任意了，加个贴图功能就是一个MINI 3DMAX拉！设置好参数然后导入PHOTOSHOP经过“大肆”渲染就可以上厅堂啦。立体设计使画面丰富，让人浮想联翩，方法挺简单，想偷懒的同学都尝试下吧！

总结了自己这么多偷懒的办法，也希望对大家有点帮助，想偷点懒，早点结束这篇文章，祝看到这行的同学身体健康！万事如意！感谢！

相关话题：视觉设计的一些方法源地址：http://webteam.tencent.com/?p=956

浅谈购物类网站如何保持视觉设计的一致性

夏墨 — 2009-03-26 22:53:24

在设计中保持一致性（uniformity）是网页设计中一个重要的组成部分，它能使你的设计有效地传达信息而不会导致用户迷惑或焦虑。保证一致性的一个有效方法是撰写正式的“设计风格标准”文档，也就是俗称的视觉规范。这一文档规定了一个产品或系列产品的图形用户界面设计中都必须遵守的设计准则。遵守这些准则将视觉元素保持大小一致的尺寸，有助于你的需要的时候更容易地将这些元素组合成一个新的设计。
由于网站有时候是被临时或各自独立建立起来的，它们的视觉设计的一致性已经被折腾得千疮百孔了，一般有以下两个问题：
（1）内部一致性的问题。也就是说，在网站的两个不同的地方反映了不同的设计方法。
（2）外部一致性的问题。这是说，在同一个公司的不同产品中反映出不同的设计方法。
在这里我们主要探讨这个主题的一个方面，即购物类网站中同一个产品或主题页面的内部一致性的问题。解决“内部一致性”的问题是建立在对网站框架的深刻理解上的。首先确定有可能在网站的各个界面、导航、信息设计等不同环境中可能反复出现的设计元素，然后试着独立的设计这些元素，然后将整个设计方案应用到整个网站中去，在需要的时候再进行适当的调整。
但这仅仅是第一步，你会发现即使做到了这一点，这个页面仍旧可能凌乱无比，我们可以先看看这个例子：

wow.alipay.com/overseas

这是哇！支付宝海外购频道最新上线的首页，导航、按钮及其他设计元素都已经过统一规范，我的任务是再将它休整的整齐一些。
鉴于韩国购物网站及设计业一发不可收拾的发展史，我搜寻了各大韩国购物网站，我们来看看他们是怎么做到的：

整齐划一的广告位

Mall.epost.go.kr

Kosney.co.kr

storyshop.kr

同一主题的视觉统一

Mall.epost.go.kr

storyshop.kr

制作精良的商品图片

dcx

于是我将海外购这一页面的所有图片广告全部替换，从一开始找类似尺寸的广告到最后自己做，便产生了这一结果：

收集意见，有没有觉得整齐一些？

相关话题：视觉设计的一些方法源地址：http://ued.alipay.com/?p=1002

“模板化” — 限制还是激发

牛来了 — 2009-03-25 07:57:00

“模板化”——这也许是视觉设计师通常最不愿意听到的概念，先入为主的会产生“批量生产”、“体力活儿”、“限制思维”等概念，总之都比较负面。但为什么在这里要讲这个问题，不仅仅是站在视觉设计的角度，更多的是从产品整体包装营运进行考虑的。产品通过“模板化”的运用，让整体形象和用户体验都能较好的保持一致。那么，留给设计师的只有机械的执行么？不，即使模板化，也要有我们独特的见解，就拿会员项目近期发生的一次尝试说起吧。

模板化专区，这个由来已久的概念先行于会员的游戏专区。在此不得不提一下之前的游戏专区。会员游戏专区主要是为QQ会员身份的用户提供一些“优先体验”、“游戏试玩”、“礼包发放”等功能，根据不同的游戏有不同的特权体验。之前都是不同的游戏专区设计不同的交互和视觉，加上重构的周期大概是4-5个工作日，再加上程序和测试，视觉设计师接到需求到产品上线，至少是一周多的时间。

最早提出模板化概念，大概有这么几个原因：

1：需要让用户在视觉上感觉更整体化，更专区化。之前不同的风格，更容易让用户觉得像某某活动，少了专区的感觉。
2：优化整个项目周期。模板化专区后，交互固定了，视觉设计师只需基于基本框架再根据不同游戏替换不同风格的质感和色彩，节约了重新创意时间。

但是这种想法刚诞生的时候，大家并不是都特别赞同，主要有这些顾虑：

1：“游戏”这个题材，本身是跳跃的，活泼的，它有自己的个性，自己的风格，千篇一律的模板化设计，会不会使用户审美疲劳，失去对该游戏的好奇心。
2：模板化后能节约到更多的也许只是交互的工作量，视觉设计师为了尽量追求全新的视觉体验，肯定要在质感和细节上下很多功夫，这样一来，制作的同事也要重新切图，时间到底能节约多少？

不过，带着这些疑问，我们还是进行了初步的尝试。

首先是“QQ飞车”这个项目，摆在我们面前有两个问题是值得考虑的：

第一，要让页面视觉统一，突出专区概念，那我们专区和专区之间一定要有相似性，这样才能让用户印象根深蒂固。
第二，要突出游戏特色，让每个游戏和游戏之间有足够的视觉冲击力吸引用户，那设计一定不能千篇一律，要有变化，有特点。这两条猛的一看好像刚好矛盾，我们只有找寻一个平衡点，尽可能两边都满足到。

对于每个游戏有不同风格，不同质感，这是无可厚非的，那要形成统一，除了基本交互一样，还想到要定义一个专区的统一元素，那就是游戏专区的logo，但后来由于感觉单独的logo形式比较喧宾夺主，就换成插卡形式。淡化了它在形式上的表现，但依然达到了统一元素的作用。

第一个专区顺利上线了，视觉设计和重构加一起也是一周左右的时间，还看不出时间优化上的成效，第二个专区的需求很快到来，由于有了前期的模板，原本3天左右的视觉设计时间，只用了1天就搞定交给重构，虽然质感，色彩都有很大变化，但由于基本框架不用动，时间还是大大节省了。

目前”模板化专区”已试运行了1个多月，这里随机采访了两位参与过此项目的设计师。

设计师1：妖精

在“会员游戏专区”还没实行模版化的时候，几乎每次的设计需求都要花上一天的时间与产品讨论交互稿，然后收集资料完善交互。由于产品经理想法天马行空，很多时候也不能完整的表现在交互上，造成视觉设计稿完成后，还需要反复修改很多次，这样需求制作时间就延长了，也影响到之后的一系列制作上线时间。

今年2月，游戏专区开始对制作一套专门的模版行探讨和研究，如何把会员自己特有的想法和既有各个游戏的类型做融合。这是一个可以肯定和坚持的路线，即提高各环节工作效率、又满足各种用户，何乐而不为？模板交互的产生，经过了很多讨论和修改，让专区的表现更加准确，更加完美。现在游戏专区有了自己的模板。

第一：
模板作为提高效率的有效工具，设计师只要根据每个游戏的风格类型再与模版相结合。让我们把时间花到精致细节，优化质感上。模板化并没有抑制设计师对视觉的想法，它让设计师必须去想怎么让不同的游戏网页设计能和模板相融合，而不至于产生千篇一律相同的网页，反而对设计师的要求更高了。

【丝路英雄模板 & 穿越火线模板】

第二:
更好的团队合作。
在模板的产生后，产品与设计师思想上的融合沟通的时间大大节省了。产品能最快提供到所有需要的资料和内容，设计师也能用半天的时间把设计稿完成，大家可以减少很多不必要的错误，提升产品质量和工作效率。在重构的时候，模板化的代码配合，更是能体验到它的好处，废弃代码越来越少，互相之间也难以阅读问题也没有了。

最后，说说个人对模板化在会员活动中的未来发展想法。会员有许多不同活动的页面，生活的、游戏的、功能特权的。怎么让用户看到这些页面第一反映就知道这是会员的活动？如何让会员不同活动有着统一的联系和关联，成为会员的一大特征？模板化就了一个必然的思考。它能让同一种类型的活动用另一种新的形式在用户面前展现，而有不缺一种“系列”的感觉。这样对会员以后发展更多特权活动带来了有利的设计支持。它能节省设计，重构，开发的时间。提高设计师的思考能力，也能让每个活动有另一种的创新有序的设计和执行。

我们必须清楚活动内在的共同之处，然后做好交互设计，不断优化模板，这样才能更好的做好会员活动模板化道路。其实目前，会员在不同的活动中都逐渐实行这样的方法。在优先体验的特权活动中，就采用了模板化的设计模式。在看不同优先体验内容的活动中，既能看到它们的特权特性的展示，又能让人觉得这是一套统一的特权体验，而且在不断更新新的内容。

设计师2：三可

模板化之前，对游戏专区的定位依旧是当成常规活动来做，风格多样。这样的好处是能够充分展现各游戏的风格氛围。然而也少不了很多弊端：原则上一个游戏专区的视觉设计需要2天左右，包括首页和子页。但设计稿难免会有修改，除了单纯视觉上的修改外，再加上产品本身存在很大的不可控因素，产品经理的传达会存在误差等等，这些都会导致页面内容的反复导致设计稿的反复。如华夏页面一个模块的内容就如此反复。

如此一来，一个专区的实际视觉设计周期会达到3-4天。

模板化之后，最大的感受就是从起初的反复修改到如今的基本上一天之内就能把稿子定下来。大大提高了工作效率。也使得各个游戏专区更加统一。拿穿越火线游戏专区来说，之前没模板花的时间是3.5，其中除首页外还有3个子页面。由于交互内容的不断变更而导致的内容区域板块调整，首页总共出了4个版本，如图所示。

【四稿对比图】

然而新专区完成所有页面只用了1天，工作效率大大提高。音速专区，基本上产品经理只用发一个需求文件就可以。修改也从起初的大调到微调。

游戏专区的模板化对于设计师来说可能少了一些个人的发挥空间，然而从产品整体的设计风格上来说得到了统一。也减少了后期重构和开发的投入，大大节约了成本。从视觉设计上来讲，一个模板类的东西，会对视觉的展现会有一定的约束性，每个游戏的风格不同，用一样的模块表现不同的游戏除了样式上的变化就没有更多的设计发挥空间，比如说一些不规则模块等比较自由的设计排版，模板化会让页面陷入死板的僵局。但模板化对产品本身带来的好处是显而易见的，也是游戏专区化的趋势。

现在看来，模板化专区，的确是一劳永逸的办法。相信我们会慢慢的完善。

对于模板化专区的未来，也许不只是运用在游戏专区，以后生活专区，某某频道专区都有可能涉及，所以在“模板”的定义要更加的灵活，我们可以进行更详细的分类，还是拿游戏专区来说，现在都是统一交互不同设计，以后也许我们根据游戏类别来进行交互的改动，比如rpg的是一种交互，射击的又是一种交互，尽可能给用户带来统一性的同时创造更大的视觉冲击力。

那么，对于“模板化”概念的意义是毋须质疑的，视觉设计师作为整个环节中的一部分，也起着举足轻重的作用，我们不会是单纯的视觉执行者，更负有项目推动，产品完善的重要使命。

相关话题：视觉设计的一些方法源地址：http://webteam.tencent.com/?p=828

The Non-Designer’s Design Book

noreply@blogger.com (Datou) — 2009-02-16 07:48:00

非设计师的设计书，官方译名为《写给大家看的设计书》，主要讲排版方面的设计，包括名片、信封、新闻简报、宣传册、广告、网站等等，当然也适用于Word文档或者PPT文档。

这本书解答我的三个问题：

1、排版的诀窍是什么？
答：亲密性、对齐、重复、对比。

亲密性，彼此相关的项应当靠近，归组在一起。如果多个项之间存在很紧的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构。

对齐，任何东西都不能在页面（并非特指网页）上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。

重复，让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小、图片，等等。这样一来，既能增加条理性，还可以加强统一性。

对比，基本思想是要避免也页面上的元素太过相似。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。要让页面引人注目，对比通常是最重要的一个因素，正是它能使读者首先看这个页面。

2、色轮到底是怎么回事？
答：首先在相隔120%的地方放入三原色，然后在两两颜色混合得到的颜色放在它们的中间，继续混合，就得到了色轮，这个色轮中的颜色都是色调，向每个色调添加黑色或者白色，就得到了调色盘。

有了色轮之后，就可以找出互补色、三色组、分裂互补三色组、类似色等颜色组合。

3、英文字体是怎么分类的？
答：英文字体大致可以分为6类，还有一些字体无法归到分类中。

1、Oldstyle，基于手写体创建，有截线（小写字母的截线是倾斜的），所有曲线比划都有比较缓和的粗细过渡，强调线为对角线。

2、Modern，18世纪中出现了更光滑的纸张和更复杂的印刷术，Modern字体不再遵循手写笔迹，截线很细是水平的，笔划有强烈的粗细过渡，强调线是完全垂直的。

3、Slab serif，随着工业革命，广告出现了，为了能在远距离看清，Slab serif的笔划几乎没有粗细过渡，截线很粗是水平的，强调线是垂直的（后面两个特征与Modern字体很像，因为最初广告经常用Modern字体）。

4、Sans serif，sans在法语中是没有的意思，所以这类字体是没有截线的。它的笔划没有粗细过渡，因此，也没有强调线。

5、Script，看上去像是书法笔或者书法刷手写的字体就是Script类字体。这类字体还可以细分为连笔手写体、不连笔手写体、手工书写的手写体、模仿传统书法风格的手写体，等等。

6、Decorative，如果一本书通篇都使用某种字体，让人一翻开就有打人的冲动，那么这就是Decorative类字体。对这类字体的使用要有限制。

这些似乎都是很基础的概念，但正如作者所说，生活中有很多普遍存在但是你却视而不见的东西，一旦能够说出它的名字，就会很容易注意到它。你就有掌握它，拥有它，使它在你的控制中。

现在新的问题是，现在我对英文字体的了解比中文字体要多得多（汗），中文字体入门文章求推。

视觉设计时不应产生新信息

chouyu — 2009-02-15 10:33:33

纯粹的对视觉效果的追求是有价值的。

原始人带骨制的项链，为的是看上去很美。在身上弄纹身，显然也不是拿自己的皮肤当记事本用。（现代人中，michael scofield是个例外。）

现代人新修缮的前门大街。这条大街的北段，基本上是依照原有建筑翻新的，可以理解为新古典主义吧。南段则是新建的房子，由于没有明确的参照，设计师可以自由发挥，这给饱学了现代主义理念的设计师提供了机会，设计了很据现代主义的房子—无装饰的，平顶，方方正正的（也许可以节约建筑成本，至少在现代主义兴起的阶段是这样考虑的）。作为一条传统商业街上的建筑，使用了与周围大杂院一致的灰色，门窗上适当使用了一些传统元素。大概应该算是后现代主义吧。

前门大街南段

前门大街北段

由南至北走过来，明显能感觉出，南段显得更为冷漠，没人气，虽然最高只有两层楼，但走在其中还是会觉得压抑。与北段相比，同样是作为商业街，南段显得缺少亲切感，没有繁华闹市的氛围。当然这差异和在营业的店铺数量也多少有些关系。（前门大街重修后，正在招商，很多铺面都还没有商家入住，北段入住率更高些。）现代主义、后现代主义对追求纯粹的视觉效果“不感冒”，这使得这类风格的建筑视觉效果上相对单调、枯燥。

google的产品是清晰、简单的，它的设计是不特意追求视觉美感的。

adobe.com网站信息传达清晰、明确，同时通过视觉设计使网站看上去科技、有品味、有现代感、有… 在保证了信息传达准确性、高效的基础上使浏览者得到更好的体验。

对美的视觉效果的追求是人本能的需要。

然而，由追求视觉美感所引发出的一些问题又使得我们不得不提出一些要求、建议、原则来限制那些不恰当的视觉设计。

以下是我们已有的一些观点：
● 避免使用纯粹装饰性的图标。

● 链接应该用蓝色，非链接不要用蓝色。

● 不要使用英文作为装饰性元素。

……

这些纷繁的观点是不是可以再概括？
可以这样概括：
为了追求视觉效果的设计过程中，不应产生新的信息。

图标不可避免的会传达信息，无论是画个小旗子还是整个小房子，都会代表特定的含义，传达了特定的信息，所以我们之前说到，不要使用装饰性的图标，要用图标就是用图标表示特定的含义，比如，“添加”使用一个加号，“关闭”使用一个叉子…

蓝色在网页上通常表示链接，这个惯例使得蓝色也传达了特定的信息。那么，文字颜色不可以滥用蓝色。

英文也是文，虽然看着不如中文明白。对于绝大多数比较年轻的中国人，多少都懂些英文，在中文标题旁边加上英文译文，翻译的不准确反而会让用户误解，即使翻译的正确也是在增大信息量，显然没必要一个标题写两边吧~
这样说来，如果用大家都看不懂的阿拉伯文之类的放在中文标题下做装饰或许倒更好些，全当是个花边儿了…

“是否传达这个信息”应该是有计划的、理性的，而不应该是在设计视觉效果的过程中high着决定的。不应该在追求视觉效果的过程中产生新信息。

（本文转载自腾讯ISD交互设计组月报第九期）

相关话题：视觉设计的一些方法源地址：http://www.chouyu.com.cn/?p=227

10个有用的技术改进你的用户界面设计

Dmitry Fadeyev — 2009-02-14 20:36:46

原文：10 Useful Techniques To Improve Your User Interface Designs

作者：Dmitry Fadeyev

翻译：UCD翻译小组，Torry

校对：Sophie, Jarod, Angela

网页设计最重要的组成部分是界面设计。创造美观而具有功能性的界面包含多种技巧。以下是我自己收集的，我认为你会在工作中发现派上用场的10个技巧。它们和任何特定主题无关，而更偏向于我自己的项目里常使用的技术。没什么其它问题的话，我们就开始吧。

1. 填充链接区

链接（或是锚）默认都是内置元素，也就意味着它们可点的区域仅仅是文字的宽高。这个可点击的区域，或是你可以点击进该链接目的地的空间，可以极大提高可用性。我们可以通过增加填充，另外在有些情况下，也可以把链接转换成快状的元素。有个内置与填充链接的例子，它们可点的区域被高亮过了以示区别：

很明显，可点击的区域越大，点击该链接就更容易，因为错过它的机会就少了。把链接转换成块状元素使文本区涵盖整个容器的宽，除非宽被另外定义了。这样，把链接放到侧栏里是很理想的。我们可以通过下列的代码来实现它：

view plaincopy to clipboardprint?

a {
display: block;
padding: 6px;
}

确保也要给链接增加一个完好的填充，因为把一个链接转换成区域只影响其表现和宽度；增加填充可以确保该链接够高，而且有喘息的空间。

2. 排版按钮

对每一个细节的注重可以区分一个产品伟大还是平凡。例如，按钮和标签这样的界面元素每天会被你的用户多次点击，所以适当的给它们排版是有收获的；我所谓的排版是指把这些标签排列一下。以下有些我偶尔注意到的，误用标签的例子：

第一眼看到它们还行，但是注意那些文字被放的太高了，这是因为使用小写字母作为垂直居中对齐文字的导向，像这样：

无论怎样，如果我们使用大写字母和上格的小写字母（t、d、f、h、k、l）平衡就倒向了上面，使得标签看起来在按钮上太高了。在那种情况下，我们应该把大写字母的高度作为一个标尺-如果大多数字母是小写，就把它略标高一些。我的意思是像这样：

这样使整个按钮有一个更平衡的外观。这样的小润色大大有利于使你的界面更有光彩且易用。

3. 使用对比来管理焦点

类似的，你也可以使用元素间的对比来管理你的用户的注意力。有一个例子关于发布头条和其下面的一些发布者、发布日期的元信息：

所有的文字都被设成黑色。让我们通过把文字设为很浅的灰色阴影来减小元信息（日期和作者名字）和背景的对比。

此处最强烈的对比元素是标题，所以它在字面上跳到我们眼前。其他的元素消逝到背景里。在此，我已经选择作者作为第二重要的元素，而日期是最不重要的。这些字在大小和风格上也有所区分，但是对比的强度可以非常有力。让我们把日期，作者和标题的重要性顺序调换一下：

你可以看到这对转换焦点是多么有效：现在是日期跳到你的眼前，而标题消逝了。这项技术对于信息量很大的网站来讲非常方便，例如博客，论坛和社会关系网，在这些地方你需要使大量信息易于被看到的同时，也显示大量附加内容，例如日期。把多余的隐掉使访问者易于把他们的注意力集中到最重要的文字上。

4. 使用颜色来管理注意力

颜色也可以被有效的被用来把访问者的注意力集中到重要的，或是可行的元素上。例如，在美国总统大选的时候，很多候选人的网站把捐赠的按钮做成红色。红色是一种非常鲜艳而且有力的颜色，所以它吸引注意力，而且当网站的主色是蓝色或是其他冷色调的时候它显得更加突出。

形如红，黄和桔色这些暖色调本身很鲜艳，所以很容易吸引眼球。当和蓝，绿这些冷色对比的时候，它们也会“膨胀”。这意味着一个蓝背景上的橙色按钮看上去是向外流，并占据了前面的座位。相反，一个橙色背景上的蓝按钮像是向内的对比，更愿意作为背景。下面的图示说明了这一点：

以下是一些有效使用颜色来引导用户注意力到重要元素的网站范例：

Function 有个“我们正在招聘”的链接在它们的工作页面。为了确保这个链接不被忽略，设计师给它设置了一个从深色背景的页眉突出出来的红色的背景，有效的抓住了注意力。

Causecast 使用颜色非常有效。4个粉红色元素跳到你眼前：logo，反馈链接，捐赠链接和网站描述信息。

想要网站上的“关于”抓住访问者的注意力？把背景设成黄色。想要使“加入”按钮突出？把它设成橙色。但是要确保不要强调过多的元素，如果你这样做了，它们会在彼此的映衬下迷失掉。

5. 空白表示了关系

界面上最富有争议性的元素之一是各个元素之间的空白。如果你对于这种空白还不熟悉，它的意思其实是：一个界面元素与另一个之间的空间，它可以是一个按钮，一个导航条，文章正文，一个标题或者其它。我们可以通过制造这种空白来表示特定元素，或是元素组合之间的关系。

因此，例如我们把标题放得接近文章正文，表示该标题与文字相关。然后文字被放到距离其它元素很远的地方，使之更具有可读性。下面是一个空白处可以被改进的例子：

文字看起来很好而且当然是可读的，但是由于标题上下两部分的空间是一样的，它们并没有清楚的把每一部分文字分割开来。我们可以通过增加每一段之间的空白来和略微缩小段落行距来改进这一点。

这样的结果是更加明确的界定了区块；我们可以容易的分辨哪个标题对映哪段文字，而且可以清晰的看到分隔的段落。好的设计师常常斜视一下或者从远处扫一眼他们的作品，这样让他们从整体上来看被空白间隔开来的区块元素。如果你不能清楚的看到这些组合，你可能需要调整一下你的空白。

6. 字间距

网页设计对于版式设计师来讲是非常局限的。虽然这里只有一些安全网络字体，而且你也做不了太多把来定义它们的样式时，牢记我们依然有一些层面上的控制权是值得的。“径”是一个在排版上用来描述字间距调整的名词。使用CSS里的“letter-spacing”属性，我们有能力做到这一点。

如果按限制和品位来使用，这个属性将会有效改进你标题的样子。我不鼓励把字间距用在主体文字上，因为默认的间距已经提供了适宜小字号的最佳可读性。

以下是一个使用字间距的范例：

下面是上述案例使用的CSS代码：

view plaincopy to clipboardprint?

h1 {
font-family: Helvetica;
font-size: 27px;
}
h2 {
font-family: Helvetica;
font-size: 27px;
letter-spacing: -1px;
}
h3 {
font-family: Georgia;
font-size: 24px;
letter-spacing: 3px;
font-variant: small-caps;
font-weight: normal;
}

这个效果会在你想要做一个更美观或是更原汁原味的标题时派上用场。在此，我只使用了几个像素的字间距，但已经使字体的风格发生了大变化。

7. 自动聚焦到输入框

很多网络应用和网站使用表单这一特性。它们可能是搜索表单或者是输入表单邀请你去提交一些东西。如果这个表单是你的应用或是网站的核心特性，你可能会考虑在载入网站的时候，自动把用户的鼠标指针聚焦到输入框上。这样会提高效率因为用户可以不用点击便直接输入。这方面一个很好的例子是谷歌和维基百科的站点。

以上是维基百科上的，搜索框已经被高亮，准备好来接收文字。

自动聚焦到输入框，你需要一点儿JavaScript。有很多的解决方法，你所需要的那种方法依赖于你想达到的功能。这么做最简单的方法可以是把一些下列的东西加到你的BODY标签后面。

网站的视觉设计

dinghou — 2008-08-15 03:41:06

自己从工艺品设计到平面设计到网络设计，虽然设计原则不离其宗，但经验下来的心得告诉自己，设计媒介的变化带来很多媒介自身的特殊性，下面总结下网站视觉设计的一些要点，有他人经验，也有自己的心得：
1—logo：基本logo特征，符合logo设计基础（平面设计通用）显示器效果：清晰度，最小尺寸（因显示器分辨率而带来的，等同线下平面设计的印刷效果）
2—文字：内容等级决定字体、字号大小、粗细；状态决定颜色（默认或者根据网站特殊统一）
3—广告、内容图片：尺寸样式的定位，同一页面的和谐性，图片的优化，位置的节奏，大小对比。
4—icon：品牌性，表达准确合理，设计手法（依据品牌性），一致性，作用：吸引，醒目，方便识别、理解、操作、记忆。
5—可点击（button)：区别（不可点击），根据人的生活经验：厚度，可按，质感（实体联想），色彩（品牌性、统一性、对比性）；统一的样式大小（依据里面文字的内边距统一）
6—背景图片：氛围效果营造，同产品的统一性，优化（品质大小，色彩信息，实现方案），
7—图文排版：主图次文，图文节奏，空隙，模块化。
8—当前状态：放大（形状），变色（反色、对比色、明度纯度区别色），链进链出后指定内容提示。
9—交互控件：样式合理准确性（人对系统默认的认知和生活常规认知），状态（视觉表现样式和动作过程优化），创意。
10—loading:内容关联性（loading前后的内容关联），无聊等待的乐趣，体积、面积优化，创意。
11—用户反馈_ 成功、出错、提示、无结果：文案（明确、合理、人性化、创意），图形（明确、醒目、色彩的心理认知准确度）。
12—动画效果：过程合理（模拟真实环境的合理化），连续，节奏感，用户日常动作表现，音效配合，创意。
13—首尾设计：首（品牌宣传、自身特点、明确内容、气氛表达、创意。尾：呼应、节奏（与首），创意。
14—适应屏设计（全屏设计）：最大最小屏幕的考虑（文字、图片的位置、折行效果）
15—固定尺寸的栅格设计：合理的单元格（考虑黄金分割），单元格面积节奏，边距统一性
16—demo设计样稿：对内容最多最少的考虑。
17—页面：品牌性，基调元素一致性，复用性，节奏感、面积感，视觉第一吸引，引导浏览，点线面关系，素描原理（运用素描的基本规律来做页面）。
18—阅读：背景对阅读（视力）的舒适度，内容与背景的对比舒适度。

其实还有很多设计的点比如交互设计，比如代码设计，我们可以展示给用户看到的这些综上所述，构成了用户体验设计的一个大过程，自己在做的很多时候其实也不是都能估计到每个点的，总结出来以帮助随时审视！

如何把CRAP准则用到你的用户界面里

Torry — 2008-12-16 17:31:25

原文：How to make your user interface CRAP

作者：Ashley Towers

翻译：UCD翻译小组，Torry

校对：Angela

图形设计有4个投之四海皆准的基本准则：对比、重复、对齐和近似。它们可以指导你完成引人注目的设计，而我认为它们在设计用户界面时也很（而且必须）受用。这篇文章将告诉你如何去用。不管怎样，我喜欢这个缩写！（crap原意是排泄物，作者有调侃的意思。本文题目直译也很orz，所以换了个文雅点的说法--译者著）

对比

在设计的时候要避免看起来类似（与相似定义不同）；如果两个元素不完全一样那就该好好的区分一下。别让你的标题用12pt的Arial然后正文用10pt的Arial--它们看起来太过类似而没有区别了。你可以用很多办法来制造对比效果，比如：

不同的字体
不同的字号
颜色和背景
边框
不同的对齐方式
空白

我们的眼睛喜欢对比，它帮助我们把所面对的信息进行优先级的区分和分类。那么我们该怎么把对比运用到改善可用性上呢？

强调主要的交互

使用对比来强调最常见或最可能的界面交互并且减少次级选择的分量。

图1

图1是一个很好的对比运用。通过减轻Cancel（取消）行为的视觉分量，重心被放到了OK（确认）按钮上了。这样使得取消按钮不那么突出从而不太容易因为匆忙而误点。

Highlight Important Notices 高亮重要提示

对比可以被用来高亮标注需要引起注意的重要提示。例如，当显示一项错误信息时，即刻的突出是很重要的，不然用户可能没看见他们出了个错误，继而以为是什么地方坏掉了。

图2

图2是使用Ruby On Rails编写网络应用时默认的错误信息显示。这个鲜艳的红盒子跳离出其他的页面让用户毫不怀疑他们需要在继续之前修正一些东西。表格内含有错误的区域也被勾了红框从而增加了与其他可接受区域的对比。

将有关联的元素分组

对比也可以用于将相关元素组合起来，而达到与其他元素区分开的目的。

图3

图3是WordPress里的发布控制。注意是如何运用背景颜色的对比把一串存储、发布和删除文章的动作组合起来的。为WordPress的界面设计师使用对比来减少“删除文章”的视觉分量加分！

重复

重复视觉元素应贯穿整个设计。重复为原本可能会被视成独立的事物创造了一致和整齐。在可用性概念中，重复就是最基本的“保持一致性”。如果你在一个地方使用某种交互来达到特定的目的，确保你重复运用到别的地方以保持内部的一致。如果你的系统里没有做到内部一致，会给人整个项目是拼接到一起且没有一个清晰的引导规则的印象。所以确保开发系统中不同部分的团队成员保持联系，或者指派某个人负责维持所有界面的一致性是很重要的。

一致性可以改善产品的可学习性。人们非常善于认识他们已经见过的事物，而且会有信心地预计他们的行为会导致的结果。利用这一点，应用他们已知的事物，能帮助他们加速对整个系统的学习。

一致性并不局限于你的产品之内。重复已有的惯例能达到外部的一致。例如如果你正在写一个Mac应用，这是在利用现有技术而且在遵循那个平台的惯例。

谷歌网页搜索

谷歌地图搜索

谷歌产品搜索

这些谷歌系列产品中的搜索的界面保持一致可以让用户倚靠他们已有的、“如何使用该系统，它会如何反应”的知识。

对齐

对齐可能是4个准则里最显而易见的了；即按照水平或者垂直的边线（或中轴线）放置元素。设计里任何一个元素都不该被随机的放置在页面里，它应该和页面其他元素有所联系从而创造出一种统一和凝聚的感觉。

对齐可被用作贯穿设计中的一项基本原则；比如安排从表格中的区域到每列元素的摆放顺序。用户会很自然的垂直向下浏览表格，但如果他们碰到在水平方向有不止一个元素时，他们会先水平浏览再继续垂直前进。

概括起来，除非你把注意力引到一个特别的元素上（通过加强空间上的对比），务必使你页面的元素为了保证一个清晰的阅读顺序而保持整齐的对齐方式。

图4

图4是火狐浏览器3里打印的对话框。注意这些左边一溜下来的标签是如何右对齐到中间那列冒号，以及控制项是如何左对齐的。这样创建了标签和相应控制项的一种联系。那列冒号引导眼睛垂直向下浏览界面，而当多个控制项出现在同一行时，将引导你的眼睛进行水平方向的浏览。

近似

相关的项目应该彼此接近。将相关控制项排成一组能让界面更清晰。对于彼此距离较远的项目来讲，靠在一起的控制项会被视为更相关。因为相关的项目可以创造出一个单独的视觉单元，所以你的界面会被看成是多组单元拼在一起，而不是一个满当当的、含有大量独立项目的页面。

图5

图5是iTunes界面的左侧栏。播放控制被组合在一起可以视为一个独立的视觉单元。媒体库、商店还有播放列表这些元素以三个不同的组包含了它们各自的子元素，但是它们看起来和彼此很类似使得这个工具条可以被视为一个相互关联的整体。

对比、重复、对齐和相似是改善界面外观和可用性的美好而简单的方法。所以下一次当你设计一个用户界面的时候，找找你能让它更CRAP的方法！

10个改善UI设计的技术

sofish — 2008-12-18 20:50:25

在设计成品中，UI设计越来越显得重要。而现实中有很多可以让一个网页设计既漂亮又功能化的技术，这里，原作者介绍了10种他经常用在自己设计的产品中的技术。如果你想拥有更好的UI，让我们一起继续。

1. 填充链接块

链接（或锚点）都是默认的内联元素，这就意味着，只有在它本身的跨度上才有可点击性。如下图所示（蓝色部分为可点击区域，一图是TechCrunch的，二图是Smash Magazine的）：

显示，Smashing Magazine的链接可点击性要比TechCrunch强。这可以增大点击的正确率和点击率。而如果你想这么做，只要用以下的代码即可:

a {
display: block;
padding: 6px;
}

当然，要提醒一下的是，请确保运用Padding是恰当的，IE有可能让Padding没能正常实现其真正的样式。有效避免Padding出现问题的方法是尽量让它们与没有padding或Margin的容器接触，而常用的方法是，给padding的元素加上一个 border。

2. 按钮文章的排版

别小看这个问题，这可能是区分一个产品好与坏的一个细节。好的设计者会做到视觉平衡。让我们来看看下面的例子：

第一眼看起来还好，但看越觉得不对。你会觉得按钮上的文字好像偏上了。因为大写字母我小写字母混大一起时，有一些是需要向上顶，或向下的（中文方块字就不会了，很好！）我想表达的是：

那么，我们需要怎么做呢？如果我们不想全部都是大字字母的话，可以按照下面的方法。让他们都在同一个水平的空间内，而且是向下沉的，这样做，可以现好地平衡视觉效果，让人看起来文字正好在中间：

3. 使用对比来突出焦点

我想，我自己常用这个方法。因为这即安全又环保（囧），让我们来看看下面这个吧：

看完上面的，让我们来对比一下下面的文字，有什么区别呢? 很明显，我们把焦点放在大标题上。

不过，需要注意的是，你要突出的是标题，而不是一些比较将要的东西，所以，把焦点用对，向下面这个，并不适合：

4. 使用颜色来突出焦点

颜色通常可以引起用户的注意，而你可以用突出的颜色来展示你想要展示的结果，就像下面一样：

不过，就像上面我们在说标题的焦点一样。你最好把颜色选对。做比较好的搭配，并确保要突出的内容出现在上方，而不是有被压着的感觉，就像下面这两个实例：

Function 把HEADER区域中的 "We’re Hiring" 的链接突出来，像你现在所看到的，会没有顾忌地把注意力投过去。从而使这个链接不会被遗忘，另外，让我们来看看下一个：

Causecast 刚把重要的东西都放在粉红色的背景下，比如Feedback，LOGO，DONATE等。

不过，切记，不要随便让一个页面充满颜色，这样会失去焦点；不要运用太另类的搭配，这可能引起反感。适当利用，懂得我们的目的是要突出所需展示的内容，而不是在颜色本身。

5. 用空行来表示关系

这个说起来好像有点让人摸不着究竟能体现出什么关系来。其实，你只要看看平时我们看书的时候，通常每一个章节或者某个段落都可能用空白来隔开，表示他们属于各种的内容，就是这个意思，下面让我们来看一个例。这个排得很漂亮吧：

对，确实很漂亮。不过，在标题与段落之间，他们的间隔都一样，容易让人产生不知道这个标题是属于那一段的感觉。而我们能做得更好，比如像下面一样显示，让人一目了然。

继续昨天没有介绍完的文章，10个改善UI设计的技术(1)总算是写完了，译介，一边译，一边介绍，并掺入自己在这方面的经验，当然，自己也学到了更多的UI设计的态度。等结语再说吧，现在，我们先来看看接下来的5个技术：

6. 字距

大家都知道用行距来控制段内文字的显示，特别是中文排版，行距显得非常重要。不过，很多人忽略了字距。可能是因为这个英文与中文有点不同，英文在标题中运用字距能显示更好的效果，不过，在中文标题中个人建议按默认排法，因为默认排法一般是最优的显示方式。字距对于中文排版相对来说并不是很重要，而相比行距则是你知道的。英文的一般用在标题上，并不建议在一般文本中运用，原因是一般情况下，默认的可读性比较强，让我们来看看下面的例子吧：

如果你想控制一下标题，看看下面的CSS代码:

h1 {
font-family: Helvetica;
font-size: 27px;
}
h2 {
font-family: Helvetica;
font-size: 27px;
letter-spacing: -1px;
}
h3 {
font-family: Georgia;
font-size: 24px;
letter-spacing: 3px;
font-variant: small-caps;
font-weight: normal;
}

像你知道的，某些东西可能不需要改变，但改变即使是1px大小，也会让整个设计的整体感觉非常不同。而你能做到的就是，多做细节的调整。你会发现更多意料外的惊喜。

7. 自动把焦点落在INPUT（输入框）上

有没有发现，有很多网站，你一进去，不用点鼠标，光标就会定在输入框中，特别是在某些需要登陆后操作的网站?就像维基百科，就是这样，如下：

为了让焦点显示在INPUT上，你可能需要一些Javascript来实现，而你可以用到的最简洁的代码如下所示

form_name.form_field.focus()">

而你的html代码需要是这样的：

form_name" action="#">
form_field" size="20" />

这样的话，每次进入这个页面的时候，name="form_field" 的INPUT将会被自动选中，作为第一个输入的焦点。

不这，这个最简单的JS还是有点小问题。如果你的读者习惯用退格键来返回前一个页面，这里，在你的页面将不起作用。因为焦点在INPUT上，这时退格键只是删除文本内容，而不会回到上一个页面。不过，所幸的是，如果你特别在意这个问题，请访问这里， Harmen’s的脚本可以让用户在INPUT中没有本文的状态下回到前一页。

8. 自定义INPUT的样式

默认未必不好，不过，最好的是自定义一个与整体一样的样式，让你的设计更让用户赏心悦目，而你需要做的是，给INPUT加个ID或者CLASS，然后在CSS中定义它，比如我是这样定义的：

CSS代码如下：

input {
border: 2px solid #888;
padding: 4px;
font-size: 1em;
background-color: #F8F8F8;
}

而更有趣的是":focus"值（这东西不会在IE6下显示）看看这个是怎么定义的：

CSS代码如下：

input:focus {
border-color: #000;
background-color: #FFFE9D;
}

这里有一个问题，当你使用INPUT背景的时候，在OSX（APPLE）会有一个默认的效果，自动给你加个INPUT:FOCUS的样式，如下显示：

为了更进一步优化，我们来解决它，方法如下，你只要把它定义为outline:none就行了，事情总是如此简单^,^…，代码如下：

input:focus {
outline: none;
}

这时，这个我们不希望有的蓝框就会消失掉:

9. 光标移过

是不是不想让某些东西重复，让版面看起来更舒服? 但这些东西都是必须的，怎么办? 来吧，看看下面的例子，你就会明白如何做了:

上面是Twitter的效果，当鼠标上放的时候，会显示收藏和回复两个图标。如果让每一行都显示这个的话，版面似乎会很杂乱，那么来吧，这还能成为一个吸引人的功能呢。而你需要做的是把代码这样写：

.message .controls { display: none; }
.message:hover .controls { display: block;

当鼠标经过".message"的

时，".controls" 的

将会显示出来。不过，这在IE6下显示（万恶的IE6），你需要做的是，在标签内加上如下代码：

.message .controls { display: block; }

让我们来看看Jinwen是怎么运用到博客上去的：让回复留言的按钮动态点

10. 把动词用在便条上

一般情况下，当有某些提示的时候，我们选择弹出一个提示便条，写着"Yes," "No" 或者 "Cancel,"让用户来选择。看起来好像理所当然这样做没错。来吧，让我们来比较一下WINXP和OSX的做法：

很明显，在看WIN的时候，我们很有可能需要看提示语，然后再点击。OSX上面，因为有"SAVE"让我们知道是要保存某些东西，所以，基本上都不用去看提示语说的是什么，从而保证效率提升。更好的UI设计?

总结一下：

作者写了一大堆，自己看完之后也觉得学习到不少。虽然自己也会用，但在看的过程和介绍的过程中自己也会去思考作者为什么会这么写，为什么要用这个，这个过程更加深了自己在UI设计方面的理解。而你呢? 如果用一句话来表达的话，我会对你说，"做自己的用户，并时刻为自己着想"。

远观页面评估视觉设计

笑炊 — 2008-12-22 20:44:04

我发现，当你做Web设计──或者其他任何涉及到排版和界面设计──的项目时，眯着眼睛，或者从一定距离的远处检查你的设计效果会很有帮助。你需要做的，就是眯着眼睛，或者走得远一点，直到你观察到的内容开始变得模糊。
当内容页面变得模糊一片时，你就能看到页面上的空白部分是如何把它们隔离成各个小方块和小组的。现在，你无法看清页面正文，你看到的是各个文本组，以及一些你排版时划分的小方块。
好了...，这就是你想看到的。如果你只看到混沌一片，就表明页面各元素之间的空白没有起到应有的效果。

下面我们通过举例来阐述这一点。这是一个页面空白运用得不好的网站（Listmixer )：

如果你努力地眯起眼睛直到内容开始模糊，我们将看到这样的效果：

两大块文本区域。说明过多的文本内容被堆到了一块儿。理想情况是，你希望把页面分割成不同的小方块，以方便没耐心的用户快速浏览。当需要阅读太多东西时，
这类用户往往是第一个放弃并选择离开的用户。
下面是一个在Opera浏览器下，较好地利用页面空白的例子：

如果我们眯着眼看：

文本区域被清晰地切分成为若干互相独立的小方块。这里的空白有效地分割了内容块，并分给每一个小方块足够的伸展空间。

有时候，这种方法也可以用于审视一个页面视觉上的美观度──观察设计所传达出的整体感觉。当你的设计在CSS样式库或其它博客文章中以缩略图的形式展示出来的时候，它可能被缩小到很小的尺寸，内容也变得模糊。那个时候它看起来怎么样？当视觉设计变得很模糊时，是否依然会保持其独特的样式、形状、色彩主题？

远观你的设计同样可以让你站在新用户的角度考虑问题。他们尚未阅读文本，并不清楚网站的各个各小方块是什么，文本写的是什么，——他们只看到由各种元素组成的一个大页面。

然后呢，他们将首先关注什么？什么会吸引注意力？我找到了上面这种方法，让你了解到，是什么元素在这个页面突出，以及页面空白如何更好地起到隔离各个小
方块的作用。

一名视觉设计师对于网站设计的思考

袁青林 — 2008-12-24 00:09:36

目前，网络上有关网页制作的各种教程已经相当多，可以方便地学习到最新的技术和技巧。可是，有关网页的设计,比如设计灵感的实现，风格的确定，发展策略，技术的筛选等文章却比较少。于是针对于此，我们这次分享会就请视觉设计师袁青林来为大家介绍一下网页设计的经验，主要就页面布局的平衡性方面，来和大家交流一下。如果您有好的建议和心得，也可以留言，互相交流探讨，在此先道一声谢谢，之后开始我们的网页设计之旅。

网页版面与报纸版面设计

网站设计就象传统的报刊杂志一样，我们通常都是把网页看作一张报纸，或者一本杂志来进行排版布局。但是印刷和网络是不一样的。

传统的布局排版并不适于网络，因为传统的印刷布局，几乎想要什么样的平面效果都能很好的达到，但在网络上设计就很困难，尽管很多的效果都能通过一些Javascript或是高级的CSS技巧来实现，但结果是使用你的源代码很臃肿，网页载入很慢。

而同样的，网络上的很多排版布局也不同传统的印刷打印，毕竞这是两个相隔时间很长的事物。但是，在最近的几年中，我们发现越来越多的报纸开始使用网页设计布局排版，比如大量的页面留白和基于网络的设计。同时，我们也可以借鉴传统报纸的排版布局来获取新鲜的网页创意设计灵感。

el economista (madrid, spain)
经济学家报马德里，西班牙
el economista 使用一个很传统，含蓄，独特的报纸版面和公告，在印刷上面突出比较重要的文章。图片信息支持的内容和标题，四周都是大量的空白，我们可以看到这个版面设计很有网页的风格。

下面我们通过几个简单的例子，从四个方面来看版面布局的平衡性，分别是留白、颜色、文字和节奏

留白

这是某房产广告设计，可以看到很好的运用了留白

颜色

色彩的平衡性

文字

文字排版的平衡

节奏

节奏表现手段从支配行为上可以概括为速度（快、慢），力量（轻、重），从排版上可归纳为集中与分散。节奏表现手段的运用所唤起的直接效果可以大致概括为紧张、松弛、宁静、躁动。

如果在绘画实践中对一根线条或是一笔颜色在速度上的使用造成快慢差异，其画面结果可以直接导致视觉及心理上的紧张与松弛感。同理，在网站设计中，针对点、线、面等元素，以集中或分散的排列差异变化将导致视觉及心理上的宁静与躁动。

好啦，本期分享内容就到这里，下面提供袁大师的精彩ppt给大家下载

网站设计的思考.ppt

相关话题：视觉设计的一些方法源地址：http://www.bitpm.cn/?p=236

9个信息设计要诀让你成为更牛的网页设计师

Torry — 2008-12-24 18:19:01

作者: Collis
译者：UCD翻译小组， Torry ；
校审：Angela
原文地址：http://psdtuts.com/articles/9-information-design-tips-to-make-you-a-better-web-designer/

这可能是网页设计里最不吸引人的部分，但是信息设计绝非最不重要。定位和吸收信息是最精华的网络任务，它远远超过了购买、娱乐和交流这些自身已包括了相当一部分信息设计的项目。用户如何发现然后利用信息本身受到信息如何架构并展现的影响。因此每一个网页设计师应该把自己装备合格并被告知如何去做到这一点。

作者: Collis

大家好！我开始在这个网上写教程是因为几年前通过阅读Photoshop教程，我走上了设计的道路。我希望这个站点可以帮助并激励其他人！你们可以在Twitter上找到我！

网页设计三部曲系列

这篇文章是网页设计三部曲系列中的一部分，以下是其他文章的链接（目前已发布的）

1 - 有条不紊

信息设计是一个网站越大则越复杂的问题。但即使是一个小网站也会因为有条不紊，循序渐进的发现应该怎样组织网站的内容而获益。以下有些简单的步骤你可能愿意尝试：

1. 理解网站的内容、流程和目的
  整理一堆你根本不知道是什么的东西是很难的。所以你的第一个任务是扫一遍网站的内容、流程和目的。一个网站的内容是指文字、图像、视频和其他你为吸引人光顾你的站点而放上去的东西。一个网站的流程是指用户和网站完成交互所需要的任务和工作流。而站点的目标指的是客户和用户的目标。
  
  所以对于一个简单的餐厅范例，你可能发现你已经有了1-20页左右的文字，你知道用户会试图完成一些任务例如预定席位。你可能也知道了用户在这个站点的目标是弄清楚这个餐厅有什么菜，餐厅在哪儿和是否还有空位，然后可能会预定席位。最后，客户的目标可能是满足用户，同时也让他们看到一些他们经营的特色产品。
2. 确定优先级和寻找用户路径
  一旦你牢牢把握了进入网站是怎么回事，你可以开始确定信息的优先级，然后弄明白用户是如何游览网站的。他们会以什么路径去完成他们的目标？哪些页面是最重要的？哪些应该在一开始就被看到而哪些只是补充信息？
  
  即使是一个像餐厅网站那样简单的例子，也有很多方法去设置信息。例如你可能把今日特色菜品直接放到主页上，或者你可能把它们放到预定的流程里，或者你可能把它们放到菜单里。类似的，你会发现针对不同客户的目标，你也可能为页面内容设置不同的优先级。也许客户告诉你这家餐馆很难找到，所以你需要把如何找到该餐馆做成单独的一页并设置成较高的优先级。
3. 整理信息
  理解进入网站后是怎么回事，而且清楚的掌握了不同元素之间的关系、用户会想要怎样和它们打交道，还有每个模块不同的优先级以后，你现在可以整理一下网站的信息。这种整理不仅包含给页面分类──例如弄明白“关于公司”适合放在“关于”标签下──而且还包含对你已经放置的内容提出疑问和重新安排。有时候你可能发觉合并多个页面、打破一个长段落、把一些文字变成更简单的图表演示或是其他的重新安排会更好。
  
  开发一个网站地图或计划来分级排列这些信息。虽然网站地图通常只是一些说明页面的框框，你可以在所有解释站点是如何设置的专门信息上花点心思，包括首页的快速链接，不同部分可能的联系，还有用户访问网站地图的可能途径。

重新组织以后有很多关于市场的信息，现在我们觉得维基是一个最有效的管理方式。

2 - 跳出框来思考

复杂度合理的站点可以用很多种方法重新组织安排。我曾经无数次组织重构过一个网站：FlashDen . 我都记不清有多少次我盯着菜单看，然后把它重新排列。在一些例子里我们只是把页面放到不同的小组和集合中，那样它们看起来更有逻辑，而在其他方面我们引进更多跳出限制的想法。

例如，几个月前这个菜单变得过于复杂，所以我们去掉了一堆更“蓬松”的菜单项，然后建立了一个博客来存放如今看来充斥着菜单的竞争对手、新闻、子站点链接和其他页面。现在我们发现有很多我称之为“流浪者”──菜单里没有主页──的页面。从信息设计的角度来说，流浪者是可怕的──即便是我都不记得如何找到他们。这次的解决方案是建立一个维基系统，把最上层的内容顶到最前面的菜单上，然后使用维基自带的搜索、标记和分类功能来放置深层的信息。

我在FlashDen的经历的关键一点，是信息的组织并不一定就意味着要把它放到菜单、次级菜单。你会发现一些信息不该放到站点上，或者它需要一个子站点，或者你该做点儿别的什么。通过FlashDen，我有了一个从三年前至今我依然在寻找的、新的组织方法和解决方案的优势。

作为一个高效率的信息设计师，找到最佳方案经常需要跳出那些框框来思考。当然我说"跳出框来思考"比做起来容易多了！有时候我们甚至被看不到的框给限制了。前些时候我听说了一个试验：把一堆跳蚤放到一个玻璃盒子里，一段时间内它们只能跳那么高。当把容器移走时，这些虫子依然只跳限制的高度那么高，它们甚至没有意识到他们可以逃走了，如果它们想逃的话。

所以你该如何克服你看不见的框子？简单！你需要那些没有被和你相同问题限制住的人的帮助。对于复杂的信息设计来，我会经常询问其他人关于组织的想法，只告诉他们大概的问题而不是站在我的位置上。必须承认的是，一个程序员的想法或是一个用户的观点经常能让你惊喜，因为他们的看法和你自己完全不同，而且不被同一类的思想所阻碍。

如果谁有一个超大网站，那就是Chevron 。你会怎样组织所有的信息呢？

3 - 保持你的结构平衡

当你在从事大量信息的组合时，会出现一个显而易见的问题：你的导航该做多深或是多广。深度即分类和子类一共有多少层，广度则是指每一层有多少项。技巧就是去找到平衡。如果单独一个层有太多项──特别是顶层，你就是在冒让用户感到困惑的险。另外如果一个用户必须点击很多层才能进入，你则是在冒失去他们的险。

一个很好的规则是保持每一层的选项数在4-8左右。如果你在顶层有8项，每一个有8层子分类，你就有足够的空间给512个页面的网站了。当然事情很少自动的平衡这么好。所以再次的，你需要注意你不能厚此薄彼。例如一个有100多页网页的站点，如果你把联系放到顶级的某个地方，有可能不会达到8个子类和8个子子类。更可能的是联系会成为一个很简单的部分──即使是对一个复杂的站点来说。

反过来说如果你不把类似联系的东西放到顶层，你可能会有一个更平衡的信息层次，无论如何这将会使如何找到联系信息变的更加困难，所以你还是在冒险，使重要的用户任务完不成。对这个专门问题，一个简单的解决方案可能是增加“快速链接”，在首页的某处你给用户一些选项来跳过通常导航所示深层的结构。

在NETTUS我们决定放置案例和源程序按钮来方便用户的习惯。

4 - 针对扫描、快速阅读和跳过的设计

我不知道你是怎样，但我确实很少完整的阅读一个网页。不管是看说明、条例和条件还是一些平常的文字，大多数情况下我都是扫描、快速阅读和跳过。假设我不是唯一一个这样做的人，那么把页面设计的易于以这种吸收信息的形式就是说的通的了。

别把重要信息捆绑在一堆文字里──应该强调它。别最后给用户一整段话──把它们用标题、副标题、项目符号、图标或是其他什么分开！想想用户会怎样使用你的站点然后把它设计的易于他们使用。

一个很好的为用户消费而设计的实例是我们的姊妹站点NETTUTS ，一个你们大多数人知道的、发布网络开发主题教程的站点。现在我们注意到，早先NETTUTS上的大部分人第一次会把教程从右扫到尾，试图寻找到一个例子的链接或是源程序代码，然后他们可以决定到底这个教程是不是值得首先阅读。一旦我们意识到这一点，增加特别的例子和源程序按钮然后把它们一致放到教程的顶部是一件很容易的事。这个简单的调整，符合我们迎合用户消费模式的设计，而且给我们带来了很多良好反馈。

PatternTap 是一个寻找创意、阅读他人的设计文章和文字信息的好地方

5 - 设计需要被读到的文字

我不确定我是否正在变老，或者仅仅是因为我把所有的时间花在屏幕前而变得挑剔，但最近当我的确常常为展示给我不吸引我去读的文字而困扰。站点设计的目的通常是去转交信息，而它们大多是书面文字，所以应该优先把精力集中在它的展示上。

使用过小的字号、文字和背景色之间的低对比度，或是在深色背景上用很细的文字，这些都是我们（多数情况下是我）都该引以为耻的设计之罪。但是除此之外，有其他方法可以使你设计出真正让访问者去阅读的文字。以这种设计为目标，使用标题、副标题、边界、引用文字和其他吸引眼球的技术布局，让用户关注文字并来吸引他们看下去。

一个指导用户逛遍全站的简单例子-ThemeForest的4个步骤指南

6 - 引导用户通过并通读页面。

之前我提过用户路径──即用户可能遍历一个站点的路径集合。里面的很多路径会和用户行为有关，但是规划一下，你可以选择引导用户通读单个页面，并且通过多个页面。一旦你知道了特定的路径，你可以通过视觉的引领和链接来帮他们沿着那条路径走下去。

例如FlashDen,当新用户访问时，我们的目的是带着他们注册、寻找文件、打款然后把这些文件买下来。所以我们在首页上先给他们一个4个步骤过程的说明。在我们的下一步的重新设计中，我希望让这条让网站得以运作的核心路线更加明显。注意在这条路径里我没有用4个页面来描述，而是用4个任务。例如找到文件可以包含用户浏览一打页面，但这是一个独立的任务。用户路径并不需要成为通过页面的集合，它们可以仅仅包括一些集合任务！

Steve Krug 的极有价值的书！

7 - 别把事情搞太复杂

简单相对于复杂更利于用户应该是不言而喻的。然而把设计搞的过于复杂实在太容易了。我知道我常常把事情做的看起来更复杂了，因为我在页面上使用了更多视觉元素（坏Collis，坏Collis！）。另外一宗过度复杂的罪过是在按钮上使用不需要的文字然后要求去行动。Steven Krug 在他杰出的著作别让我思考中给了一个例子，一个虚拟就业网站使用了如下的按钮：

工作机会
空缺职位
工作机会令拉玛

其中一个很清楚，一个还算明显，还有一个──天知道是什么。

信息可以用文字之外的方法展示！

8 - 信息可视化

作为设计者，我们比其他人更明白良好视觉的价值。并且有很多把数据、概念、信息表格化或是可视化的机会。本文就是以一个界面设计、信息设计和美学设计的关联，这样一个基本图表开的头，你一定会过目不忘。这些图片不仅分割了文字，而且它们会令我们记得更清楚，同时也给了你一个让页面更生动的机会。

DoshDosh 关于信息可视化、表格和作者所谓的信息图表有一篇有趣的文章非常值得一看，即使它只是看到精彩生动的例子。

感谢Analytics，分析的路径和目标从未像现在这样简单。

9 - 分析你的信息设计

信息设计属于很难一次成功的事情。所以一旦你建立了一个站点，你应该分析它看看人们如何使用和接受那些信息、他们是如何行动的，还有你该改进设计的哪些地方。

这方面Google Analytics是一个很棒的工具。例如我早先提到的用户路径，Analytics使用Goals功能让你可以通过页面跟踪这些路径。你建立一系列页面以后，Analytics会报告用户在每一个点上访问（以及外部的点击）它的百分比。

其他你能用的分析功能还有搜索项目跟踪，可以让你看见用户在搜索你的网站时的搜索范围。知道用户在找什么可以告诉你哪些信息是更实际有用的！

简谈衡量界面视觉设计的方法

草菇 — 2008-11-17 22:00:55

我们经常会遇到视觉界面设计无法衡量好坏的问题，其实简单来总结一下，可以从以下6个大方面来判断：

一.视觉有否正确传达出产品/交互意图

视觉界面设计，不是单纯的图形设计，而是整个产品设计中的一个步骤，要在理解和遵循产品概念的基础上，

参照目标群体心理模型和交互意图进行视觉设计，并且视觉设计要达到用户愉悦的目的。

二.布局

用户所接触到的网站/产品的界面，是一个平面，我们通过信息结构组织，主次内容归纳和区分，通过布局，

给用户浏览阅读的线索。

*版面布局（栅格系统 网页浏览模式）

—-以规范的栅格系统部署的界面，信息呈现清晰易读；对前端开发更具规范与灵活性。

—-网页浏览模式如“F”型模式，等，能帮助了解用户浏览和关注度特征，用依据来做视觉设计。

*层次感

—-视觉界面设计犹如美妙的歌曲一样，需要节奏和韵律感，通过层次来营造。

*留白/间距

—-有助于减少用户的认知负荷，使界面富有呼吸透气感。同时增强界面层次的结构与划分，是界面精致度

体现的重要元素。

三.信噪比（SRN）

简易浅显来说，是视觉界面上有效信息与干扰信息之比。

信噪比越高，有效信息越突出。

四.风格

风格是通过一系列视觉元素表现出来的，能体现品牌和产品情感化感受的视觉语言。

同个网站/产品/界面的视觉风格要一致，可以通过视觉规范，DPL，淘斯基等来进行规范。

五.色彩运用

*色彩经济

—-在同个网站/产品/界面的视觉设计中，建议主色不超过3种，以保证颜色及其赋予的值能被有效识别和理解。

*色彩赋值

—-把色彩看成资源，严谨赋予他合适的值，并保证统一的运用。

六.字体设计

同一界面中的字体及样式不超过3种，赋予每种字体样式值。

字体的对比度要清晰，便于阅读。

解决问题的方法肯定是越多越好，希望大家有更好更多的设计方法一起交流共享！~

相关话题：视觉设计的一些方法源地址：http://www.flowercauli.com/?p=5

浅谈视觉设计的准确性

奇遇 — 2008-07-26 23:03:27

在我们的生活中，只要你睁开眼睛就能看到各种各样的视觉。不同的视觉能给你不同的视觉暗示，同样能给你不同的心理感受。视觉这个话题太泛了，大自然中无所不在，我们接下来主要谈谈在软件设计中视觉表达的准确性。

一、找对你的感觉。
视觉设计首先要考虑的就是整体的感觉，即视觉设计的风格。视觉设计的风格是否准确关系着设计的成败。一个大家闺秀你不能把她打扮的象个婊子，当然这是对人的感觉；那么一个产品的视觉设计也同样需要一个对的定位，最终以合适的视觉表现出来。我们不妨以几种聊天软件来做个的比较，从中窥视一点设计定位的视觉意味。看下面一组图：

（从左至右为图一、图二、图三）

图一： QQ的视觉定位是以青少年为主的，所以它的视觉设计才采用了比较明亮活泼的色彩。
图二、图三：msn和TM的视觉定位是以办公室工作人员为定位，所以它的视觉使用比较稳定和平静的色彩。

令我感到失望的是，新版的TM2008给我的第一感觉象QQ,不知道这是否违背了原来的视觉定位？现在的TM2008让我感觉不如直接用QQ算了！我还是觉的原来TM更适合办公室使用，我不喜欢在办公室用QQ，所以我个人排斥了TM2008。TM2008如下图：

——图四
通过上面的图四我们可以看出，设计中竟然还有很多原本属于QQ的视觉元素，我个人不认为这是个成功的定位。

二、视觉结构和层级关系。
页面表现的层级关系和结构是用视觉的形式表现出来的，比如包含关系及业务的先后顺序的表现。让用户通过视觉就能够直接的明白应该先看什么，后看什么，元素时间是什么关系等等。就地取材，让我们来看下面的两张图：

——图五
wordpress博客的后台管理界面，我们可以看到清晰的从属关系：管理–>文章–>文章内的修改区域。

——图六
图六中，vista系统的界面：三个区域的层级关系一目了然，“1”区域要高出“2”区域，“2”区域要比“3”区域的颜色深，这样整体的从属关系就很明显：

——图七

当然我只是说明层级关系需要视觉表达，其中有很多的细节因素就不再次赘述了。

二、是什么就是什么，图形达意尽量明确。
视觉元素在软件中都代表着一定的含义，什么样子代表什么都有其特定的视觉暗示，如果不是游戏，我们应该尽量避免和用户捉迷藏。例如应该用页签来表现的从属关系，我们不应该简单的做几个链接，这样会表达不清楚各部分关系。除此类的布局因素之外，图标的表达是软件视觉中的一大块，好的图形表达可以帮助用户直观感受功能，缩短操作时间，提高效率；不过表达不好可就麻烦了，用户可能要歪着脑袋想半天！

——图八
在图八中，箭头所指之处为刷新图标，上面那个刷新图为原来图标，下面的刷新图标是我做个假设。对于一个新手，下面那张图的刷新图标和后退图标显得太象了，意思区别不是太明确，会造成误解。就准确性而言，上面那个刷新图标更让我容易接受。我承认我这样假设有点扣小节，我的本意是为了说明图形表达准确性。

三、明确你的视觉状态
在软件里，软件视觉的状态主要用来表现对用户的行为反馈，在计算机pc环境里的软件，主要针对鼠标和键盘操作，理想状态是：用户的每个操作行为都应该有相应的视觉反馈，比如有没有选中，操作有没有成功等。仅按鼠标操作的状态分就有默认、鼠标指向、鼠标按下、鼠标点击四种状态，准确的反馈可以让用户流畅的感觉自己的操作；关于鼠标和键盘的状态，大家在操作系统的时候注意一下，就可以看到各种操作的对应关系，而我们平时是不太注意的，因为它默默的达到了设计的目的。站在是否可用的角度分有：可用状态、不可用状态.

——图九，本图为两种不同状态的视觉比较，不可用状态的灰色让我不再去点击。
状态的准确性可以可以避免用户误用不可用的操作而产生麻烦和浪费时间，这种情况我们可以通过一个视觉反馈轨迹图来看看操作的情况。

——图十
图十是我在为一个产品做用户测试的时候，所得到的反馈图：在没有选择文件的时候，移动文件是不可用的，视觉处理的时候却是可以点击的，再加上视觉顺序的不合理，大多数的用户总是直接点击“移动文件”，犯下错误之后才去选择文件，途中的虚线部分表示犯错之后又才去选择文件，重新来过。

四、请用准确的视觉来辅助信息反馈
信息反馈一般有一下五种情况：成功、失败、询问、警告、错误异常，我们用来对应的视觉辅助图要力求表现每种情况的准确含义，比如我见过有的软件用一个惊讶的表情来表示警告，但往往被误以为是询问或者出现了异常。一般的视觉表现如下图：

——图十一
图十一是我们在做gui设计时做的，基本按照通用的符号。

当然，为了增加趣味性，我们可以允许任意表现形式或表情的存在，前提是你的表达要准确，不要有歧义，否则使用者的第一反映可能不是你要表现的，由于理解的歧义所带来的损失和挫折感会让用户感到厌恶。通过搜索找到一些图，组合起来对比一下：

——图十二
图十二中的第一张是我搜索到的错误表现图，想必大家都见过，如果你犯错的时候出现了，你会想到什么？第三张图的淘气鬼脸图，我以为我成功了；第四张图的表现让我以为是在警告。只有第二张图让我意识到我失败了，并且有趣味性。可见趣味性和准确性并不矛盾，我们在设计趣味性的同时，别忽略设计的准确性。

相关话题：视觉设计的一些方法源地址：http://ucdchina.com/blog/?p=296

科学与艺术兼顾的有效网页视觉设计

Moond — 2008-07-26 23:02:20

总的来说视觉设计是一个很大的范畴，囊括了我们身边很多产品的再创作设计，比如工业产品设计，广告设计，新媒体设计，服饰设计，还有我们这里要讨论的网页视觉设计。

上面是来自澳洲Hiser Group的网页视觉设计元素归纳图示，他把网页中可能涉及的视觉设计分成了屏幕布局，图形用户界面和品牌形象三个模块。但是根据考虑角度的不同，我个人觉得应该稍微调整一下，可以把网页视觉设计简单分为两个类型：基于科学考虑的功能性图形设计和基于视觉艺术考虑的视觉冲击设计。

理性

基于科学考虑的功能性图形设计也就是我们经常讨论的GUI，它主要服务于系统化平台的交互系统，协助、指导用户顺利完成期望的任务流程，一般我们接触到的视觉设计元素包括：

图片按钮；
导航设计；
Banner动画或静态设计；
表单样式设计；
表格、数据、文字表现设计；
logo设计
以及图形化不强的页面文字排版、空白布局设计

上图是来自Rokey的Verycd 设计原型

也是因为这种类型的设计附属与功能和需求，所以可以说它偏理性考虑，更何况经过长期的运用开发，人们已经总结出不少经历实践验证的理论原则，可供我们后人参考。所以这类型的设计核心是以UCD为指导思想，设计偏重实用性和有效性，设计目的是促成交互操作的顺利完成，并获得满意的任务反馈。

以前零碎的和一些朋友讨论过类似的话题，感兴趣的可以查看一下：“容易被点击的按钮调查”和“设计友善的表单”

感性、个性

再说说基于视觉艺术考虑的视觉冲击设计，这类型的设计自由空间大，没有太多理论约束，更多体现出个性元素的概念，其多运用于概念产品、时尚产品、游戏娱乐等独立站点或个人Portfolio Gallery站点里。

上图是来自http://www.rhythmoflines.co.uk/

尽管我们不断推崇务实的简约设计概念，但是另类的创新艺术表现还是不时的冲击着我们不断变化的行业趋势。这类设计的好处在于：

容易创新出新型的交互设计模式；
增加产品自身的品牌价值，也就是我们所说的“化腐朽为神奇”
深刻的视觉冲击，有利于品牌形象的传播；
具有艺术收藏性，树立流派典范；
激励不同类型的设计尝试；

不过如果从实用性来考虑，它可能也会存在下面的不利之处：

生存周期相对较短，也就是高投入未必能带来长期利用率；
浏览文件大，需要更多下载时间，如果平衡的不好，很容易起到负面效果；
兼容性考虑不够，比如插件要求，分辨率要求等；
目标群体的局限性；

总的来说，根据具体运用和项目的商业策略的不同，我们在设计管理上也应该做相应的平衡，是提高有效的视觉传达？还是个性品牌的冲击？这就如同我们在科学与艺术直接需要平衡点一样。

最后想补充一个话题，记得之前白鸦曾疑惑为什么现在有很多GUI都想转行做UI或ID(interaction design)，而忽视视觉设计的价值？我觉得这里面有下面几个原因：

市场恶性竞争，促使视觉审美下降，从而导致创意制作的贬值。所以，除去个别优秀的视觉设计师，处于中间或下层的设计师很容易失去自我价值的鼓舞而放弃自己的初衷，希望能够寻觅一个新的行业方向。而根据现在的市场需求，UI、ID应该是一个比如容易切入的方向，毕竟通过理论的补充，可以在很短时间内有效的提高设计师自身的设计理念而适应新的行业需求。
还有一个原因也是上面提到的市场需求决定了设计师对可用性和用户体验的关注，目前大多数设计师都服务于综合性媒体的网络公司，这样也就局限了他们创意设计的需求，取而代之的更多是对实用性，高效性的页面设计要求，所以学习相关的理论知识以适应公司发展需求是非常容易理解的，
最后就是设计师本身的自我定位，据我所知，国内目前并没有一个很好的针对网页视觉设计或用户中心设计的专业培训，所以，入行的设计师未必都有很好教育背景，大多都是因为兴趣爱好或市场需求而不断调整自己在整个行业中的角色，就业的需求，再加上诸如UCDCHINA理论资源的不断涌入，让很多本就不成熟或说对自己职业方向不明确的设计师，看到新的适合空间，所以这样的转行也是完全可以理解的。

其实无论什么类型的设计师，热衷于自己所服务的人群，能从中获得职业成就，并得到人群的认可就应该算一种成功了。设计的好处就在于能让我们身边的生活更“美好”。

相关话题：视觉设计的一些方法源地址：http://ucdchina.com/blog/?p=302