如何让界面内容的优化有层次_网页设计教程

推荐：活动网站设计点评之LG显示器
http://www.lg.com.cn/mnt/event/200707/sale0809/广告制作：博圣云峰http://www.boosen.com广告背景：国际知名显示器品牌——LG于06年推出的锐比(DFC)技

　　所谓产品其实最终展现在用户面前的只是界面而已，所谓界面绝大多数时候只包括两个部分：图片、文字。
重视界面上的每一个像素和每一个文字是UED的基本素质，关于如何设计好界面上的文字（一般在UED里面我们把这个职位叫做“内容优化”）我以前写过创业团队的界面文字优化和用户在每个情景中的角色感，这一期的话题中其他伙伴也说到了很多。

　　这个话题讨论到这里，已经让很多人意识到了界面上文字的重要性：界面的文字就似乎一个人的谈吐，文字给用户的感觉不单单只是一个“信息”的传达，他还关乎用户对于产品的情感印象和“产品气质”的理解。

　　那么，我应该说点什么呢？在今天写这个话题之前我就一直在思考：能否系统化的把“内容优化”像“体验”一样分层次的理解？

　　首先，界面上的文字应该做到：清楚而准确的向用户传达信息。
其实这是内容优化的最基本要求，本应该是所有产品都可以做到的。但往往是越熟练的人越轻易在这里出现问题。常见表现：过份的向非专业用户展示专业词汇、信息提示本身误导了用户。

　　比如，某视频网站忽然蹦出来一个“bps超出，链接失败。”（查了资料我才明白bps大概是每秒链接数的意思）
　　比如，有些网站用户没有注册也去登录的时候反馈提示为“密码错误”。其实直接提示没有此用户，然后给个链接“注册此用户”你会发现转化率相当高，注册量有了用户也方便了。

　　接下来，界面上的文字应该便于用户阅读并快速理解其含义。
　　最常见的问题表现是：语言过于罗嗦、信息排列混乱。

　　比如，某门户网站在注册blog的时，“您的登录名”旁边这么写辅助说明：“4-16个字符（包括4、16），英文小写、汉字、数字、下划线，不支持空格，不支持全角英文，不支持纯数字，不能使用下划线开头和结尾。”。（大致推算了一下，一个IQ小于200的普通用户假如认真读完并完整理解这句话的意思需要近1分钟时间）
　　比如，另一门户的blog和他旗下的校友录网站，东边一个下划线、西边一个icon加文字、南边一个按钮加文字、北边一个红色、中间还有一个红色加粗。我进去之后真不知道什么地方可以点什么地方不可以点，什么地方能点什么地方不能点…
　　再比如，某电子邮件服务在注册的时候这样排列：“用户名:___、密码:___、密码强度：[][][]、重复密码：___”。吓的我还以为可以自定义密码强度。。。

　　然后，整个产品不同位置的文字应该统一。大家都讲普通话，不能一会中国话一会外国文。
　　这是一个最简单的问题，却是大部分网站都未能避免的问题。（非凡是在中文网站，大概是因为中文说法太多了）
　　比如，作一个IM软件，一开始是“添加好友”，接下来“联系人列表”，然后又是“不在线的朋友”；一开始是“注册用户名”、然后是“登录ID”、还有“您的账户”、“治理帐号”…

　　最后，界面上的文字应该具备该产品需要传达给用户的气质。

　　这里往往碰到的是怎么做的问题：怎么确定产品要表达什么样的气质？怎么确定什么样的语言风格才算是表达了这样的气质？
在稍微大型的企业我们一般有很多种方法可以做到，比如找很多用户让他们说出他们需要的、比如通过情绪板、比如通过颜色分析等等。
　　但在创业公司我一般建议大家实用一点：
　　1、N个很了解产品定位的人坐到一起，每人一个贴纸写下来一个你认为可以描述该产品的句子或者事物；
　　2、把所有人的描述拿出来大家讨论，把每一个用二维分析的方式摆出来，最终得到一个大家都认可的结果就是这个产品应该表达的气质；
　　3、每人N个贴纸，根据刚才得到的结果，结合自己产品的环境写下来你认为要表达这种气质需要什么样风格的语言；
　　4、用第2点中同样的方法得到一个统一的结果，（比如：严厉、简练、..）
　　5、安排一个专门的人写一份简单的指南，描述这个结果具体执行时一些需要注重的常见问题和原则。（比如：既定事实不再重复、不用反问语句提问用户、即时说明文字不得超过20字、…）

　　还有，文字的视觉设计应该完整的融入整个产品视觉中。
　　很多视觉设计师喜欢把文字融入到界面的造型中去，得到非常棒的视觉效果，这个很值得学习。
　　从最基础来说，我们的文字在界面上和图形一样应该有主次有深浅，关于这个部分潇潇同学已经有了很好的表述，我只补充一个例子：

　　图片网站本身应该表现的是“图”，文字只是其辅助信息。
　　flickr在个人首页里每个图片下面都有四行的文字，但我从未感觉到他碍眼或者多余，因为flickr用的是很柔和的粉红和几乎可以让我第一视觉点忽视掉的灰色；
　　而yupoo在个人首页里每个图片下面只有三行文字，可每一个我都觉得他们扎眼，因为yupoo用了重灰色粗体、绿色粗体、重灰色、绿色四种表现方式，而且字体都还不一样。

　　再有，尽量让文字自身可以起到“推销”产品的作用，而且”推销”的不只是产品气质。
　　文字其实可以像图形设计一样在情感上给用户以触动，从而积极的达到对于产品的“推销”。
　　比如，很多人已经把“注册”改成了“立即注册”、“马上注册”；
　　比如，baidu.com的“更多”页面最上面以前是“推荐使用”后来改成了“试试看”，虽然只是少了一个字，但给用户的感受和尝试欲望马上就很不一样；
　　比如，某电子商务网站会在注册要完成那里说：“太好了，你还需一步就能成为我们的注册会员”
　　比如，…

　　ps：
　　关于内容优化，《交互设计》和《Designing web usability》两本书都简单的提到了一些类似“准确传达信息、不要罗嗦、不要多余、文字要统一、要符合产品风格”的话，但说的都很浅，而且言语中能察觉到作者并未想深入表达，或者他们本身也确实没有很深入的研究。

　　界面上的文字看似是一个很细小的东西，实际上他蕴藏着很多的价值并且在潜移默化为产品带来好的或者不好的利益。中国人说“察言观色”，我想“言语”的表达对于中国用户的触动应该会更加的明显。国外现在也还没有在内容优化上非常全面和深入理论知识，可能也是因为他们的语言并没有中国这样博大精深（或者说“多变”）。
所以，研究和发挥好“界面上的文字”对于产品的价值也许更适合也更值得在中国做。这里有不小的空白的空间，值得我们发挥。
共勉。

分享：如何布局电子商务网站
电子商务网站的布局类别繁多，按栏位分有两栏式、三栏式、多栏式，按对齐方式分有居中对齐、左对齐，按照宽度分也有宽屏和非宽屏之分。如此之多的布局，那电子