charies_蔡

网站设计之美

charies_蔡_ — Sun, 16 Mar 2008 06:54:46 +0800

blueben原创，charies转载，转载请注明作者与出处，谢谢！

前言

标题有点大的，确切点说这里讨论的是“大型综合网站的设计之美”，区别于个人站点和一些SHOW类型的公司站点。
话题是前2天提到的关于站点设计的“美”的问题想到的。究竟对一个较大的综合性网站来说，如何的设计表现才算是得体、到位？如何才能算得上是一个“美”的站点？

本文分3个部分：
首先大致分析下各方面对设计（部门）的诉求是什么；
然后再回头看看，对于这些诉求，究竟什么才是“美”，和我们原本想象的有没有差别；
最后，结合目前实际，给出几条粗浅的见解，如何成就网站设计之美；

对美的需求
OK，设计之美，什么是设计之美呢？还是先从各方面对美的诉求开始简单看一下吧

·商业设计服务于商业目标
在所有的诉求之前，有一条商业设计基本定律，即一切商业设计服务于商业目标的诉求。这是最基本也是最核心的。但是说起来简单，理解执行彻底却不是那么容易。有的时候，对于一些问题，我们如果冷静下，回到初始状态来仔细想一想，我们为什么要（给一个站点/项目）做设计，就能得到答案了。

·内容之美
请问有多少访问GOOGLE的用户是为了欣赏它的美丽的？百度呢？FACEBOOK？SOHU？SINA？恐怕即使有也仅是很少的特别用户，例如设计师。这类站点吸引人的地方并不是它们的设计，它们不因为美而闻名。它们因为功能而受欢迎，因为新鲜的内容而受关注。这也是基本定律之一。没有人会仅仅为了吸收美丽的版面设计而常来TAOBAO或者口碑，用户来是因为站点满足了他们某方面的需求。当然，也存在那种很大程度上依赖外观来吸引人的产品，APPLE是一个神话，但那种创新的勇气和魄力绝对不是一般其他公司所能比的。

·视觉与情感
对访问者来说，在使用产品或者满足其需求的同时，如果能操作更简单、流程更顺利、视觉感受到的东西和当时内容表现的情感能相互烘托，而带来某种额外的满足或者心情的愉悦，那么，也可以看作是对美的一种潜在需求。

·效率之美
这点是从公司运行的层面来看的，即保证有限资源在流程中不成为项目的瓶颈，用最少的资源达到较优的效果。时间管理的培训中曾提到，往往花20%的时间就能完成80%的事情，而剩下的20%的事情，却要用80%的时间来完成。效率之美，在于它的过程，不影响整体流程进度、节省资源，同时也就能有更多的精力投入到更需要的、更重要的地方去（例如用户体验研究）。

什么是美
简单的（很可能是还不够全面的）了解了一下各个方面对美的诉求，让我们再回头看看，对一个大型综合类站点来说，究竟什么才是设计之美。

·简单or繁复
这个有点TO BE OR NOT TO BE的味道，简单呢？还是繁复？貌似很难回答。当把这个问题带到一个实际项目中去的时候，就更难客观把握。OK，我们刚刚了解过美的诉求，现在不妨带入这里看一下。第一条，不管简单还是繁复，应当以商业需求为目的。恩，不过貌似并没有解决问题，再看。第2条，需要显现出（这里没有使用“突出”这个词，因为这个动词往往被理解为“用设计上的着重表现手法使其明显”）内容和功能，并不一定要设计得很复杂，只要内容和功能能显现并被正确使用和理解就好了。再看第 3条，在不影响内容和功能使用的基础上，能额外的带给用户情感的愉悦。最后，要开发、维护成本低。

看起来有矛盾的地方，但是基本还是很清楚的：
1、最基本的，站点的表现（叫设计也好，叫修饰也好），应该以能条理清晰的展现内容、准确无误的引导使用功能为准。
如果太过简陋，条理不清晰，糊在一起，则设计不够；如果设计成分，如标题栏背景、装饰图片等吸引了注意力，影响了对内容本身的注意，则设计太过。

2、在完成以上最基本的诉求之后，可以适当的点睛之笔来满足视觉和情感上的诉求。但是忌多忌滥忌喧兵夺主忌为了设计而设计。
一个页面，在1-2处以精致的图标或者小创意为着色点，可以极尽发挥，生动有趣、酷眩动人，不影响其他内容的理解和阅读，又让整个页面生动活泼、不失风味。但是千万不能说为了这里要好看，所以就生硬的找几个地方浓墨重彩。相反，修饰应该都是带有目的性的，为什么要修饰它，为什么要这么修饰，都是有讲究的。

3、有的时候，商业需求需要做一些特殊的调整，例如活动和专题类，或者一些需要强烈引导的地方，可以做适当的调整。但是要注意适度。
活动和专题是最简单直接的商业需求，对设计往往有特殊的不同要求，这里就是需要设计大力泼洒的地方，可以和主站有所不同。这时候就不应拘束，要放开手脚以取得特殊需求下的效果最大化。收就要收的严实、彻底、无缝可钻，放也要放的彻底、自如，这样才相得益彰。

4、优化流程和规范，提高适用和复用性，一方面满足了整站风格统一的需求，另外也满足了效率的诉求。

另外，无意中发现，上面说的几点貌似和现在的2。0设计风格相吻合，也许正是“理论联系实际”？~：）

·比美更美——体验与交互设计
设计之美，终究也只是“看起来很美”，比美更“美”的，是过程之美、交互之美。
就像人一样，外表只是表面，交互和体验就像一个人的言谈举止、待人接物。比外表更能打动人的，是内心。哪怕如上面所说，站点的设计成分减少到足够少，甚至简陋的少（像GOOGLE？）但是每一个链接、每一个点击、每一步操作都是经过缜密思考，让用户握着鼠标都觉得软绵绵的，心里飘然的柔软起来，那也是一种深刻的印象，就如同一个人的声音和气味，能给你更多的愉悦一样。那不是不能做到的，只是需要大量的努力罢了。

如何成就网站设计之美
上面说了什么是美，那么结合目前的情况，如何实现呢？

·在一切开始之前
      中文在准确性上确实稍微欠缺，这条如果叫before all就更确切了。一方面，是在谈其他的之前，另一方面，它是基础，最重要的。
      其实很简单一句话，一个臭鸡蛋，即使画上再漂亮的外壳，也依然是一个臭鸡蛋。
      很多时候，设计都是从信息结构和页面框架圈定了之后开始的，而在做信息结构的时候，由于没有去考虑所谓“和谐、统一、美”的问题，往往就把设计圈在一个尴尬的境地。
      在做设计之前，请完善站点的信息结构吧！出色的信息结构即使不加任何设计，也绝对很漂亮。一个糟糕的信息结构（商业需求会要求糟糕的信息结构吗？它为什么会存在呢？）即使用浓重的设计加以改善和弥补，也一定是会漏洞百出、矛盾不断的。所以，虽然设计是用来解决问题的，但是它不是狗皮膏药，哪里都管的。遇到什么矛盾的东西都想通过设计来处理的方法是简单粗暴的。遇到这类问题的时候，除了看看设计上能否优化之外，信息结构方面是否已经优化清晰了呢？是否是因为信息结构的矛盾而导致了设计的问题？而就经验来看，信息结构的矛盾，往往都会带来逻辑上的漏洞，也就是说，线上产品的使用逻辑和线下积累的同类操作的逻辑是不同甚至抵触的。这对用户认知和体验的影响可想而知。
      总之，它很重要，请不要把它和设计割裂开。

·一个点or每个点
上面其实已经稍微提及了这个问题。一个点or每个点。这个是我在看某个类似门户的页面的时候想到的问题。我看着那页面问自己，WHAT‘S THE POINT？WHAT DO U WANT TO SAY？呱啦呱啦呱啦呱啦~~~~它一直在说，但是SORRY，我真的不知道你在说什么。你满屏都是文字，每个标题栏颜色都很显眼，这很好理解，但是我该从哪里开始呢？哪里才是重点呢？下面的图可能能帮你理解我的意思

·给我内容！
让我看到我要的内容！让我顺畅的使用我要的功能！别遮蔽它们，别让它们陷在一堆浓重又无关的装饰图片里面找不着，被让他们的颜色那么刺眼，别让什么你认为很重要的东西打扰我，即使你有一堆我根本不想听的理由。而且，别让我思考，这2个看起来一样的东西到底该点哪一个，也别让我琢磨你那一句话里的那么多深刻含义！

·规范与开放
此规范非彼规范。并不是站点风格规范的问题。
规范，对一些我们无法控制和预知的内容，在信息结构的时候就要准备好相应的规范规则。尽量减少后期的维护成本，也避免人为犯错的几率。
另一方面，也现实中的情况一样，对于一些无法掌控的东西，宜疏不宜堵，如果我们无法改变世界，那就改变我们吧。改变我们的信息组织方式，更加开放灵活，不再那么呆板刻薄，无论10个中文字也好、100个中文也好、100个英文也好，都能显示的很好，那么撑开啊，变形啊，截断啊，隐藏啊，这些麻烦都不再存在。

例如：以前网页很多都是框架限定好的，局限性很大。但是BLOG呢，很自由，你爱写多长写多长，都不会出现变形，多长都可以接受，省去了很多麻烦。

·执行
最后，也是很重要的一点。无论如何，站点的统一、整齐都是最重要的。
所以无论用哪种方式、哪种风格，一定要能拍板，彻底的的执行，统一才有可能实现。现行方案即使有不足的地方，后期的修改需要经过大家讨论通过后再进行。如果一直等待一个完美方案的出现，那恐怕是永远也只有等着了。

浅陋的见解，希望能抛砖引玉！欢迎补充与交流！：）
联系我：blue.ben[at]163.com；MSN:blueben@sohu.com;Blog:www.blueben.cn

blueben原创，charies转载，转载请注明作者与出处，谢谢！

我的网络生活

charies_蔡_ — Mon, 03 Mar 2008 13:10:25 +0800

我的豆瓣

http://www.douban.com/people/charies

我的饭否

http://fanfou.com/charies_cai

我的yupoo

http://charies.yupoo.com

我的抓虾

http://www.zhuaxia.com/u/emh1YUA0NDI4OTRAeGlh@ZHUAXIA

我的吐司

http://www.tucia.com/personal.php?stamp=1199988200

你是我的眼

charies_蔡_ — Sun, 06 Jan 2008 05:34:05 +0800

歌手：萧煌奇专辑：你是我的眼

歌词：
如果我能看得见

就能轻易的分辨白天黑夜

就能准确的在人群中

牵住你的手

如果我能看得见

就能驾车带你到处遨游

就能惊喜的从背后

给你一个拥抱

如果我能看得见

生命也许完全不同

可能我想要的我喜欢的我爱的

都不一样

眼前的黑不是黑

你说的白是什么白

人们说的天空蓝

是我记忆中那团白云背后的蓝天

我望向你的脸

却只能看见一片虚无

是不是上帝在我眼前遮住了帘

忘了掀开

你是我的眼

带我领略四季的变换

你是我的眼

带我穿越拥挤的人潮

你是我的眼

带我阅读浩瀚的书海

因为你是我的眼

让我看见这世界

就在我眼前

不是只有UE部门才能\才应该做UE设计(转作者:白鸦)

charies_蔡_ — Thu, 27 Dec 2007 03:03:41 +0800

作者:白鸦
原文地址:http://uicom.net/blog/?p=514

1、最近有不少非UE设计的朋友（多是IT企业的职业经理人）找我聊天，意在咨询一些关于UE部门建设和产品UE设计的一些情况。言谈之中经常可以听到这样一句话：
我们公司的设计部门很弱人手也比较少，所以我们的产品在设计方面比较差，也根本没有什么很好的易用性，现在这方面的人才很难找呀…

2、于是我不断的给他们反驳回去：我不完全赞成你们的说法。产品设计差易用性差确实跟设计人员有关系，而且有直接的关系；但并不是说所有的责任都在于你们的设计部门弱！ 一个产品的UE设计工作不只是UE部门要做，不是只有设计部门才能去做UE设计。你们的PM和RD甚至包括客服部门一样应该承担产品设计不好的责任，也有义务一起去改进!

3、我们经常看到不少优秀的产品设计出来，但这些优秀的产品设计的背后不一定都有一个很庞大的专业设计部门。
zhuaxia、douban、甚至一两年以前的baidu、google他们都没有什么像样的UED部门，但他们的用户体验做的非常好。

4、(杭州的时候）在计算机世界报专访中我这样说过：
可用性应该只能算是一个新的词或者新的工种，并非是一个新的理念或概念。
实际上在很早以前我们一开始做网站设计、产品设计的时候就在搞可用性相关的工作，只是那个时候我们没有专门安排一个职位或者部门叫做‘可用性工程师’而已！
不是只有叫做‘可用性工程师’的人才能去做可用性，也不是只有‘可用性工程师’才应该去做可用性。
我们有很多的PM、软件工程师在可用性方面都具备着很强的能力，比如baidu的绝大部分PM基本上都可以拉出来做一个很好的交互设计师，因为他们具备着很强的交互设计能力。
所以我们现在其实是在把工作做的更精细、更符合用户而已，而非“提出了一个新的概念”。

5、在这个要求高质量无缝协作的年代。无论是什么部门或什么角色在主导项目，沟通永远都应该是第一位的。
各个角色之间的共同语言是沟通的基础，RD（技术）不应该只懂代码、PM(产品经理)不应该只懂产品和市场、UE也不应该只懂用户体验…
一个好的团队应该是项目补充的。UE更多是站在用户角度、PM是市场和企业品牌体系的角度、RD是技术；三个角色的协作非常重要，互相的共同语言和思路需要协调一致。
每个角色在自己的角度上一定还需要具备其他角色的能力，不然一定会出问题。
大家是冲着一个目标的团队,要做的是互相帮助着冲向目标. 而绝非各自完成任务!

6、一个团队就像一个联合国，在联合国的大会上如果每个国家的代表都只会自己国家的语言，这个会就不可能开成功！

7、所以，我认为：一个产品的用户体验设计应该：有UE部门主导、多个部门一起努力。

8、
在说“我们不只是美工”的同时一样要意识到“程序员也不只是写代码的”！

如何做出符合标准的网页那? part5

charies_蔡_ — Mon, 10 Dec 2007 07:26:35 +0800

1.Background-position背景图片位置控制

Eg: (1)background-position:30% 20px;

(2)background-position:left bottom; /*left top bottom right center五个值供选择*/

2.背景缩写规则

Background:背景色背景图片背景平铺模式背景滚动模式背景定位

3.基于背景控制的导航优化

通过改变background-position:0px -26px; 的值实现导航交互作用

对a / a:hover / 分别进行设置

Father & Son 爵士钢琴--脑袋不知不觉的跟着摇摆你信不?

charies_蔡_ — Mon, 10 Dec 2007 03:01:57 +0800

如果你玩过vos 或者劲乐团的话你的手会不受控制哦~ ^_^

Ron Artis & Ron Artis II
Perform a improv jazz duet on piano.
Stevon Artis is playing the drums
Victor Artis is on the bass.
This is an example of how Dad teaches his children.
Dad is displaying how to release your emotions through
dynamics and phrasing.
@ The Artis Family Theater.
来源:http://www.youtube.com
源播放地址:http://www.youtube.com/watch?v=OJKQ3dP_hb0

网友"我是一只小灰兔,吱吱~~"对 UE的看法满有趣的~

charies_蔡_ — Sun, 09 Dec 2007 10:37:40 +0800

“用户体验”是理念，不是一个职位。
　　学习用户体验，应该是要以实际工作出发，分析自己身上善长什么，兴趣什么，去挑选适合自己的职位，以此朝这个方向垂直发展。在横向职位上，也可以涉猎相关知识，以使自己知识面达到一个宽度。
　　
　　捡一些个人认为现阶段较实用的方向，泛泛而谈，观点较为片面，仅供大家讨论或参考适合自己的方向：
　　
　　1、用户研究 User Researcher
　　主要是定量数据分析（如，调查、系统访问日志等），定性的用户访谈、用户观察、可用性测试等
　　
　　
　　2、信息架构 Information Architecture
　　这个俺不善长...事实上IA部分在国内大多数公司通常由PM完成。
　　相关：http://www.uigarden.net/forums/archive/index.php?t-351.html
　　
　　3、交互设计 Interaction Design
　　比较“实用”，事实上，国内很多公司的PM都是在兼做“交互设计”，包括一些产品策划人员如此。（当然，不要被我误导，事实上PM不只是做交互设计）
　　简单地说，交互设计的目标是引导用户顺利地完成任务。
　　这方面的书可以看《交互设计之路》，也是本不错的入门书之一。
　　
　　4、视觉设计 Visual Design
　　不要认为做GUI的，就不是“UE”，就不是用户体验。好好追求我们设计的最高境界吧，如果你热爱设计的话，一样可以做到最好，你的设计，有可能影响用户对网站的情绪呢，比如电子商务类，风格影响用户对网站的信赖感。
　　所以，坚信只要我们有了用户体验的心，就不再是傻傻地只追求视觉的特立独行而为难用户……嘻嘻~~
　　
　　5、前端架构 (Front-End Architects)?
　　同楼上一样，前端架构的“技术体验”也至关重要。
　　只要记住，技术的最终目的是为用户服务，而不是为了羡耀自己的代码多诡异。
　　比如，浏览器上的体验，多思考为什么要WEB标准等等，初学者“容易为了DIV而CSS”。
　　又比如，面向的用户群机器配置环境是怎样的，应采用怎样的技术？或者脚本的CPU占用率会不会让客户机器假死等？你的程序算法应该优化至最优等等等，一切都是为了让用户能轻松地浏览。
　　最差的技术体验：迅XX雷网站、E骡网站，每次打开页面，都让我的FF浏览器几近假死……俺P4 1.6CPU超到2.11的 -__-!
　　当然，成熟的前端架构师考虑的不仅是这些了，如渐流行的RIA，我们考虑什么样的方案适合我们的用户等等。
　　
　　6、可用性测试 Usability Testing
　　这个再补充一下，先说一点个人经验体会，有测试比没有测试好，比产品人员在办公室自己YY好。而且，这也是一个可以说服其它别人相信产品“有某些问题”的方法之一。
　　网上有很多文章有谈，但事实上公司条件可能有限，所以，结合自己的实际情况，灵活一些作测试。
　　
　　
　　总结：
　　我们都是UEr，没有谁比谁更“UE”。挑一个适合自己的方向去研究吧，学习的方法就是Google一下。

FireYupoo

charies_蔡_ — Sat, 08 Dec 2007 12:16:50 +0800

fireyupoo by nowa 是一款firefox插件,可以抓取网页中的图片直接上传到你yupoo相册中,非常方便.
概括的说，很简单，就是保存网页上您喜欢的图片到您的Yupoo帐号，包括背景图片。

浏览网页时，可以在喜欢的图片上点击右键，然后选取菜单“保存图片到Yupoo”，即可直接将图片在后台上传到您的Yupoo。
支持背景图片
可以获取图片描述信息作为Description
目前还不能进行多个图片同时保存，您需要等一个图片上传好后再传下一个。

点击进入

如何做出符合标准的网页那? part4

charies_蔡_ — Sat, 08 Dec 2007 11:49:09 +0800

导航基本形式: 1.横向导航 2. 纵向导航 3.下拉及多级弹出式菜单
1.航向导航:作为门户网站的设计而言,主导航一般采用航向导航.

(图01)当鼠标移动到每个频道时,此频道变换背景颜色,字体颜色.
知识点:

导航用 ul li 标签架构.利用浮动
float 改变li的排列方向
用display:block将连接对象将文本改变为块状对象
通过设置a:hover 来实现背景颜色的替换

(图02)把背景颜色用图片来替换,让样式更加的丰富.
知识点:

通过background-image用图片替代01图中的颜色

2.纵向导航:所谓纵向导航就是指把网站导航放置在网页左边或者右边的,从上至下排列的一种导航形式.

知识点:

用h1和h2来架构纵向导航,h1,h2,h3本身就具有用于对文本进行层级划分意思.

3.下拉及多级菜单弹出模式:网站设计中常用导航形式.充分利用页面现有空间隐藏或者显示更多的内容.

(图03)横向下拉

(图04)纵向下拉
知识点:

用ul li嵌套架构
设置display:none来隐藏下方ul列表
纵向下拉中利用position的relative , absolute连个属性对父子 ul进行位置的设定

中岛美雪 Nakajima Miyuki - 骑在银龙背上

charies_蔡_ — Sat, 08 Dec 2007 03:59:40 +0800

日本传奇歌手 / 歌后 - 中岛美雪，中島みゆき， Nakajima Miyuki
- 骑在银龙背上 (Riding the back of the silver dragon)。 This
is the song used in the ending theme for "Dr. Koto's Clinic",
a medical drama.

林芯仪一首好听的台语歌

charies_蔡_ — Sat, 08 Dec 2007 03:14:01 +0800

这首歌是07.12.7 超级星光大道踢馆赛挑战者林芯仪带来的一首台语
歌曲虽然最后差一分挑战失败但是这首歌她诠释的还是相当完美
的.

如何做出标准的网叶那?part3

charies_蔡_ — Wed, 05 Dec 2007 04:36:58 +0800

重点: 布局版式 / 盒模型 / 浮动 / 绝对定位,相对定位

布局版式:

一列固定宽度
一列宽度自适应宽度百分比 eg:width:80%;
一列固定宽度居中嵌套
二列固定宽度浮动
二列宽度自适应
二列右列宽度自适应
二列固定宽度剧中
三列浮动中间列宽度自适应两侧绝对定位 eg:position:absolute

盒模型:

盒模型的宽高由width height padding内边距 margin外边距 border变宽决定
上下margin叠加问题(空白边叠加)----解决方法用flaot
左右margin加倍(ie6)----解决display:inline

浮动float:

打破默认的按照文档流的显示规则,而按照我们的布局要求进行显示 float:right left none
浮动的清理clear:left right both

绝对定位,相对定位,深度定位:

绝对定位主要通过设置对象的position:absolute top right top bottom
深度定位z-index:1 以z-index的数值大小为准,大值对象的层级位于小值对象之上
相对定位position:relative

如何做出符合标准的网页那? part2

charies_蔡_ — Mon, 03 Dec 2007 01:56:27 +0800

web标准有关代码的规范。了解这些规范可以帮助你少走弯路,尽快通过代码校验。

1.所有的标记都必须要有一个相应的结束标记

以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和< /li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个 "/"来关闭它。例如:

2.所有标签的元素和属性的名字都必须使用小写

与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。

3.所有的XML标记都必须合理嵌套

同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：

必须修改为：

就是说，一层一层的嵌套必须是严格对称。

4.所有的属性必须用引号""括起来

在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如:

<height=80>

必须修改为：

<height="80">

特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：

<alt="say'hello'">

5.把所有<和&特殊符号用编码表示

任何小于号（<），不是标签的一部分，都必须被编码为& l t ;
任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
任何与号（&），不是实体的一部分的，都必须被编码为& a m p;

注：以上字符之间无空格。

6.给所有属性赋一个值

XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：

必须修改为：

7.不要在注释内容中使“--”

“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的:

用等号或者空格替换内部的虚线。

以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。

0215177d

如何做出符合标准的网页那?part1

charies_蔡_ — Sun, 02 Dec 2007 05:17:44 +0800

第一天

1. 选择 DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.网站名称

3.定义语言编码

4.调用样式表

页面内嵌法：就是将样式表直接写在页面代码的head区。类似这样：

外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

5.收藏夹小图标

如果你将本站加入收藏夹，可以看到在收藏夹网址之前的IE图标变成了本站特别的图标

。要实现这样效果很简单，首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌入head区：

6.head中的其他设置

代码如下，替换成你自己站点的内容就可以：

允许搜索机器人搜索站内所有链接。如果你想某些页面不被搜索，推荐采用robots.txt方法

设置站点作者信息

设置站点版权信息

站点的简要介绍(推荐)

站点的关键词(推荐)

淘宝UE团队的设计流程

charies_蔡_ — Fri, 30 Nov 2007 13:45:06 +0800

Step 1：原型（Prototype）

设计的第一个阶段，我们称之为原型设计，主要是设计产品的功能、用户流程、信息架构、交互细节、页面元素等等。如果你觉得听上去这些概念都比较悬的话，我就用大白话来说：原型设计，就是完全不管产品长得好不好看，只把它要做的事情和怎么做这些事情想清楚，把它怎么和用户交互想清楚，而且把所有这些都画出来，让人可以直观地看到。

至于怎么画出来，那就随你了。用纸笔画，用白板水笔画，用Photoshop画，用Visio画，或者像我们一样用Axure画，都可以。只要把上面提到的这些都事无巨细地表达出来。

在原型的交付物（Delivery，也就是某个阶段的产出物）中，最重要也最常见的就是线框图（Wire Frame），这玩意儿不用多解释了，看下面这张图就明白：

在画线框图的时候，要把握好细节的刻画程度。有些东西只要画个框就行了，而有些东西需要把文案都设计好。以免你的老板或是需求方揪住角落里的广告banner该有多大这种问题与你纠缠不休，而忽视了最重要的页面主体部分。

此外，还要牢记：原型就是用来让人改的。它存在的价值就体现在被修改了几次，被更新了几次，以及它的下一步被少改了几次。

Step 2：模型（Mock-up）

在原型被大家接受之后，就该关心产品长得好不好看了。我们以“模型”这个词来统称该步骤的交付物。和原型相比，它关注于产品的视觉设计，包括色彩、风格、图标、插图等等。

要清楚的是，这不是一步由“美工”来“美化”的工作。视觉设计师需要对原型设计有深刻的理解，对交互设计和尚未进行的HTML/CSS/JS的 Code都要有充分的了解。如果不能从全局的角度来做视觉设计，则只能是做做把水晶效果改成金属效果这样的“自娱自乐”，而对产品本身没有任何有价值的帮助。如果原型说：“在这个页面上，A比B重要。”，那他的脑子里就要有十七八种可以表现“A比B重要”的视觉语言可供选择。这是对设计模型的视觉设计师的基本要求。

更高一些的要求，才是视觉设计的“原始功能”。“倒底是选水晶效果还是金属效果？”，“这个按钮选什么颜色好？”等等。这一类的思考和选择，应着眼于产品的气质、品牌等等，在各种产品间保持一定的统一，在用户心里打下视觉的烙印。其实要做到这一点是很难的，特别是还要满足上一点的要求。一般来说，如果能90%的把交互设计的成果和品牌形象表达出来，已经是很好的结果了。从我自己来说，就常常很郁闷不能用好的视觉语言来表达自己在原型设计中的想法，总是做完模型就打个七折:(

更更高的要求，有些问题用交互设计是很难解决的，这时就需要一个有创造能力的视觉师，可以从视觉设计的角度来创造性地解决问题（一时还没想出好的例子，想出来再补上）。

总的来说，模型设计是件非常困难的事情。它的工具是感性的，但设计过程又要求非常理性，必须在各种约束条件中解决问题。而目前能从较高的角度来来看“视觉设计”的人还不多，大多还停留在“效果”、“风格”等表面议题上。个人以为在“Web标准”和“用户体验”之后，视觉设计是Web设计专业化运动的第三波，市场的需求已经存在，只差有人推动一下。

模型的设计一般来说都是用Photoshop了，下是是个例子（与原型的例子对应）：

Step 3：演示版（Demo）

这步我就不多说了，Demo就是按照原型和模型用xHTML/CSS/JavaScript等等前端技术实现出来，以便后端的开发工程师可以接手编码。这个过程让小马、正淳专门起个新帖来详细介绍吧。只提一点，前端开发在有些公司是不放在设计团队的，而我们认为前端开发从很大程度上来说是对用户体验的提升和保证，开发只是它的一个手段和形式。所以就把这块工作一直留在我们团队，现在看起来这样很棒：）

把上述原型、模型转为xHTML/CSS之后就是这个页面了：

http://favorite.taobao.com/collect_list——-g,nrxwy2lumhgozsvz2cq3tk6w64-.htm

Step 0.5/1.5/2.5/3.5

居然还有半个半个的步骤？是的，这是我们的用户研究过程。在各个阶段的前后，我们会根据具体情况选择是否投入精力到用户研究上。用户研究的形式也很自由：给会员打个电话，旺旺上随便找人聊聊，到公司来做可用性测试，到会员家中访谈……怎么方便怎么实用就怎么做。我们还没有精力放在太多的“学术”性质的理论研究上，对研究方法也是不拘一格，“能抓老鼠”就行。关键的关键，研究的结果如何表现到产品上，如何吸收单个用户的意见来服务所有用户。

在这一点上，我们做得还很不够，积累也很薄，需要向同行们多多学习，也请大家多多指点。

最后……

关于流程，要注意：

设计流程的目标，在于保证“无论谁来做这个产品的设计，都能达到80分”；
“100分”的完美作品，很有可能没有遵循流程，而是天才地融合了创新、传承和执行力的作品；
“流程”这种东西，只有与环境相匹配才能带来正面的作用。

以上是我们UED团队目前的设计流程，也许你也发现了，它和大多数公司的设计流程是差不多的。我们也在不断地修改和发展这个体系，有不足的地方也请大家多指教。如果你借鉴了我们的流程，在工作中发现有什么问题，也请回来告诉我们，谢谢大家！

charies_蔡

网站设计之美

我的网络生活

你是我的眼

不是只有UE部门才能\才应该做UE设计(转 作者:白鸦)

如何做出符合标准的网页那? part5

Father & Son 爵士钢琴--脑袋不知不觉的跟着摇摆 你信不?

网友"我是一只小灰兔,吱吱~~"对 UE的看法 满有趣的~

FireYupoo

如何做出符合标准的网页那? part4

中岛美雪 Nakajima Miyuki - 骑在银龙背上

林芯仪 一首好听的台语歌

如何做出标准的网叶那?part3

如何做出符合标准的网页那? part2

如何做出符合标准的网页那?part1

第一天

淘宝UE团队的设计流程

Step 1：原型（Prototype）

Step 2：模型（Mock-up）

Step 3：演示版（Demo）

Step 0.5/1.5/2.5/3.5

最后……

不是只有UE部门才能\才应该做UE设计(转作者:白鸦)

Father & Son 爵士钢琴--脑袋不知不觉的跟着摇摆你信不?

网友"我是一只小灰兔,吱吱~~"对 UE的看法满有趣的~

林芯仪一首好听的台语歌