网页设计,界面设计,原型设计的相关问题

本文主要是简单描述了网页设计,界面设计,原型设计的相关问题，提供一些小编认知的非官方建议，给大家参考。

一、界面设计

人性化的界面设计应该猜测用户的行为，就跟好的秘书应该猜测老板的心理一样。说是猜测，实际上是根据大量用户行为数据总结的解决方案。

1.猜测（实际上是总结）用户的行为，允许快速地操作

（1）chrome的标签栏VSfirefox

我使用Chrome作为默认浏览器的重要理由有两个都和其标签栏有关：一个是标签栏在顶部更加符合Fittz定律，另一个就是Chrome关闭多个标签的方式十分优雅。从一排标签的中间一个开始关闭时，左右的标签都会自动变换宽度，让关闭按钮跳到鼠标所在的位置。这对于经常打开数十个标签的用户是非常有帮助的。Chrome的设计，是基于“用户关闭一个tab的时候，很可能他还有其他的tab需要关闭”这个对用户行为的猜测来进行的。在firefox里面，关闭多个tab就变得很痛苦，在标签较多的情况下，每一次关闭都需要细微移动鼠标一段距离，这种精细肌肉运动是很容易让用户变累的。

（2）Foursquare的加好友

每次同意/不同意一个好友申请之后，这个申请向左侧滑动消失，同时下方的好友申请向上滑动，正好把同意/不同意按钮送到用户鼠标下，只需原地点击一次即可再次完成操作，省去了移动鼠标的时间，爽！相比之下，twitter在twitter里follow多个你的follower的操作就麻烦一些。Foursqaure的设计，是基于“用户批准一个好友申请时，很可能他会继续批准下一个好友申请”这个对用户行为的猜测来进行的。当然以上的对比取决于对用户操作习惯的理解。例如，有多大比例的用户会确认绝大多数的好友请求？对于我这个通过所有4sq好友请求的用户来说，这样是很方便的，但是对于 @yuancheng 这样有选择通过的人来说，foursquare的功能就可能造成误操作，特别是在网速比较慢的情况下，这个Ajax效果可能不够流畅，导致误点击。所以产品设计是具有其contextual性质的。不过从另一个方面来说，只要能提供方便的unfriend功能，我认为偶尔的误操作也是可以接受的。

（3）搜索引擎打开首页就自动把焦点放到输入框，提交按钮响应回车。

这个例子基本上所有的搜索引擎都是基于“用户来我这里最可能的是输入关键词进行搜索”来设计的。但是Google的Fade界面把这个猜测发挥到了极致，我相信Google敢于这么做，一是有大量的数据去支持，二也是因为Google足够出名，大部分用户都知道在Google的首页上其实还是有别的内容的吧。

2. 猜测用户的行为，引入特殊的flow。

当用户反复地做某事的时候，程序应该有足够的智能（或者说产品设计师有足够的考虑）去猜测用户想做什么。

例子：QQ邮箱里面短时间多次点击“收信“按钮（似乎是3次），可以看到右侧出现一个对话框。想象一下用户正在等待收某份邮件，反复地点“收信“按钮，然后这个对话框恰到好处的出现的情景吧。

untitled-2

相比之下，我就希望校内能猜一下：

untitled-3

在每次确认好友申请的时候都会出现这个选择分组的对话框，但是这个对话框在功能上是可选的。当需要接受很多好友申请的时候，操作相当繁琐。其实如果在这里当用户数次添加好友时都不创建任何新分组的话，可以考虑添加一个“以后不显示该对话框“的选项嘛。

总结：最偷懒的产品设计是什么都问用户如何进行（甚至还是以一个又一个javascript 对话框的形式），每一个猜测，或是根据数据，或是根据产品设计师的直觉，而猜测的结果，也应当是根据用户的反馈来进行调整修正。例如以上例子中的QQ邮箱案例，最初是有两个并排的link“报告问题”和“我知道了”，想必是这个“我知道了”在这个场景下变得有点莫名其妙，所以之后的设计将报告问题放入上下文，而把“我知道了“独立出来，作为“以后不再显示“的另一含义。

二、原型设计

根据Standish Group的“Chaos Chronicles Report ”，大约 66% 的软件开发项目不是失败，就是超出预算、超出项目时间，或是交付缩水的功能。

项目失败或亏损的前三大原因为：

（1）缺乏使用者的参与（2）需求或规格不完整（3）需求或规格变更

一些需求管理工具或者上百页的文档已经不合时宜，不能作为我们跟客户讨论交流的介质和核心。所以我们需要制作原型，用来提高与客户沟通的效率、让客户参与到设计中来并且帮助他们找到核心需求。

传说哥经常说，使用工具是人和动物的根本区别。有很多工具可以帮助我们完成原型设计：纸和笔是最简单也是最常见的原型设计工具。与客户、与同事沟通的过程中，不用打断思路，随手拿起纸和笔，就能表达出我们的心中所想。很撇托、很强大……

原型需要帮我达到的目标有两个：（1）提高与客户沟通的效率，降低迭代周期（2）引导客户参与设计，找到他们的核心需求

刚才介绍的原型制作的工具大多都能实现第一个目标，但是这些工具的输出物通常是一张png图片，对客户来说，它也就是一张图片而已，大多数客户很难透过这张图片去思考其中的逻辑。这个时候我们的主角Axure RP就该出场了。

通常我们将原型设计分为两个阶段，“低保真原型”和“高保真原型设计”。“低保真原型”的作用是跟客户确认产品的需求和业务逻辑，所以低保真原型通常会很简陋，甚至我们会故意做的很简陋，比如我们会使用一些手绘风格的控件库，这样可以避免客户提出一些不合时宜的问题“高保真原型”会高度仿真产品的最终形态，是用于给客户验收的最终产物，另一方面也可以作为产品开发的标准。当我们启动一个用户体验设计项目的时候，我们第一项工作并不是原型设计，在之前还需要很多准备工作：在现场跟客户讨论，了解产品的业务逻辑，有条件的话还会对产品的直接用户进行一些访谈，了解用户的日常工作。紧接着回到公司内部，针对产品的信息架构进行团队头脑风暴，然后项目经理会整理出信息架构的脑图，脑图会作为成果物交给客户确认……在这一系列的准备工作之后，我们才会开始制作产品的原型。

按照我个人的习惯，在低保真设计之前我会用纸笔画一些草图，然后再根据草图制作原型。这样做的好处是，我能够最快的表达并验证自己的想法。

三、网页设计

关于传统节日315发的 Showcase Of Web Design In China: From Imitation To Innovation这篇采访，看到评论中有很多打了鸡血的中国同行，有两个问题我想请诸位搞清楚。第一，文中所引用列子不是因为作品多么出色，而是最能传达文章想表现的意思（具体什么意思自己想）；第二，采访的几位设计师也不能完全代表中国同行，网页设计是个技术活，在不同层面有更深造诣的大有人在。

另外想起段花絮，在回答有关“中国网页设计有什么特点？”问题时，我脑子跟过电似的快速搜索，死活就想不起来咱中国网页设计有什么特点，正好符合一句话“最大特点就是没有特点。”因为中国网页设计普遍很烂，烂得五花八门、烂的五毒俱全，不以抄袭为耻，反以借鉴为荣，所以没法归纳总结。同时，也说明目前的现状不成熟，没什么值得称道的东西。

这个问题可以拉回到2005年11月，臭鱼总结的“长、闪、挤、花”四字特点一时传为佳话，得到各界人士的点头认可。可喜的是，到目前为止快过去5年了，除了“长”好像更长外，“闪、挤、花”都得到了一定程度改善。注意，原文写的是“网站首页”特点，而不是“网站”特点，很多转载、借鉴、抄袭不小心就把标题给省略了，首页只是网站的门面。

元素不等于风格

聊到本来 Smashing Magazine 准备写一篇亚洲设计，结果发现话题扯的太大，没法深入下去，于是才决定把中国、韩国、日本等几个国家独立出来。确实，虽然都属于整个东方文化的体系，但中文、韩文、日文三种网站却风格迥异，尤其日韩网站都有很鲜明的特征。比如韩国网站普遍用色大胆，Flash动画和图片利用率极高，手绘风格随处可见。而日本网站普遍清新淡雅，有着日本文化特有“灰蒙蒙”的感觉，偶尔使用像素和卡通风格。

以前翻过不少帖子推荐的“中式网站”，总结起来有两个特点：动画扎眼，元素堆砌。所谓动画扎眼，几乎所有作品都是Flash完成，我看以“秀”目地居多而不是传达信息。所谓元素堆砌，几乎所有作品对“中式风格”的理解都停留在某些元素身上，比如书法国画、朱砂印章、丝绸竹简等等。我就纳闷了，难道表现风格非得以这种繁复的图形加上炫目的互动和好多个loading来完成么？我想“中式风格”的网站不应该是滴几滴墨、整几条龙这么简单。有着明显特征的韩式风格网站，好像也没见在页面上企图用“紫菜包饭、大长今”来表现，对吧？

Web Design is 95% Typography 提到的观点认为“网页设计95%都是排版。”我理解原文有两层意思，其一排版是页面效果的决定性因素，其二几乎完全否定了视觉设计的重要性。这个定论正确与否，我认为要看前提，如果狭义理解“web design”为信息设计，排版占95%没错；如果广义考虑“web design”的用户体验，排版占95%不对。我仔细研究过不同语言的web页面好作品，发现真的好设计即使去掉颜色、图形修饰也不会差。如果抛开视觉表现，确实排版模式都差不多，技巧无非就那么几种，如对齐、留白、黄金分割之类。但是，各页面最终呈现的效果，却是“视觉设计”在主导，如同前文所述日文、韩文网站给我的印象。搞清楚这个问题，也许我们在创新中文网页设计时才能有更好的思路。

风格不等于设计

这个问题思考再三，我觉得突破口还是在文字字符上。本来很好的英文界面，翻译为中文后就成了二流货色，难道真是“中文”有表现上的天生缺陷？难道我们老祖宗千百年总结而成的书法艺术到了数字时代完全行不通？参考Angela在2006年9月小论中英文网站的设计差异所总结的观点：中文的行间距太小；中文缺乏一种起伏的节奏；中文的自动回行有重大缺陷。

除此之外，因为适用的字体、字号、字形太少，相互组合搭配的效果较单一，所以很容易造成web页面的层次感不够，表现力欠缺。具体分三块阐述：

字体，能够在浏览器里正常显示的中文字体就那么几个，当定义了系统里没有字体时，浏览器一律按照默认的“宋体”显示。此缺点从操作系统根本上被限制，无法与英文文字的效果对比抗衡。

字号，英文大部分字体从8px到22px都有不错的美感。中文为了保证“方正”的造型，通常仅使用双数字号，比如最常用的12px和14px（用不用px单位的问题这里不讨论，少数字体的13px效果还行），因为这两种字号看起来最自然、协调。再往上16px,18px,20px也还行，但13px,17px类似的单数字号，可以看到效果明显的锯齿和失重感。

字形，英文有斜体效果，HTML和CSS里都有专用语句进行定义。但是中文使用斜体的效果很不理想（中文字号够大的斜体效果会好一些），也许当初某些人定规范的时候，完全没有考虑非罗马文字国家的感受。比如学术论文的参考条目，好像国际规定必须用斜体。

2006年8月我讨论过网页不需要漂亮这个极具争论性的话题，到现在为止，我困惑的还是对“中文”的理解，和对“中文”的设计。每次我看到中文被混搭(Mix and Match)到欧美风格模板、日韩风格模板网站上时，都会再反思这个问题。中文是中国网页设计的灵魂，我想事实应该如此。说了这么多问题和不是，有没有没办法解决？答案是有办法。中国网页设计师尝试近十年，积累了不少经验教训。大环境近来国际标准组织的推动，加上“微软雅黑”字体的革命性进步，以及本土公司企业的重视，我相信中国网页设计将逐渐、真正形成自己的特点。

>>>>>>>>>>>>>点击咨询<<<<<<<<<<<<<

网页设计,界面设计,原型设计