yoguz
查看yoguz的博客
| 金钱 | : 18255 |
| Level | : 0 |
| 发帖数 | : 1564 |
| 最后登陆 | : 2019/10/24 |
| 注册时间 | : 2004/12/13 |
|
 Marshadow UI Design 沉思录
一
UI（User Interface，用户界面）设计并不是什么新鲜概念，几乎是从计算机诞生那天就已经存在了，不过最初不叫做UI，而叫做人机界面Man-Machine Interface，是由人机对话演变而来。主要的研究方向就是方便、实用的软件界面设计。随着计算机的普及和图形处理能力的加强，操作系统和软件的界面已经由原来的字符界面变为现在的图形界面，故此对软件界面的研究又增加了美学要求，名称也成为用户界面，覆盖范围由原来的应用软件扩展到多媒体、网页等几乎所有与计算机相关的方面，这些产品可以统一称为交互性产品。
在上个世纪末，美观曾经一度成为评定用户界面好坏的唯一标准，在这个时期，各种奇特的界面层出不穷，其中以网站尤甚。Java和Flash技术普及后，网站的界面设计更是千奇百怪，无奇不有，至今记忆犹新的是当时登陆许多网站要等上5分钟等它的开始动画下载完毕再花上一分钟观看，之后才能看到它的内容，非常夸张。
然而，不管是软件、多媒体光盘还是网页，它们的界面最根本的功能毕竟是给人“用”的而不是“看”的。很多页面效果做的一流，又酷又炫，只是在这些站点中寻找需要的信息无异于玩一场解谜游戏，要用上好一会功夫，花费许多脑细胞才行。许多站点更是根本就没有什么内容，不过是放了几段小广告在里面，简单做一个框架而已，根本没什么实际内容，为了补充，放了一大堆他们认为特“炫”的效果在内。偶尔一次两次还比较有耐心去研究这些站点，时间长了，见到这类站点，第一个想法就是关闭这个页面。至此，这个站点收到的效果和当初的设计者意图（吸引使用者的眼球）背道而驰了。
那么，什么才是好的UI设计呢？根据这一段时间的阅读资料和研究，我的看法如下：
1.简洁直接。所有的交互性产品，不管是软件、多媒体还是网站，这应该是设计时应当考虑的第一要素。不要弄任何玄虚，直接切入主题可以让用户尽快上手，把功能隐藏在花哨的界面中让用户花费力气去寻找是最不可取的（除非是一个复活节彩蛋）。最好是第一眼就能够看明白界面的大体布局，哪一部分是什么功能。一个这样的界面也许不会让用户记忆深刻或兴趣十足，但一旦用户真正使用了，就一定可以让他愿意长期使用。违反这个原则是网站和多媒体产品设计人员最易犯的错误。
2.简单易用。有人觉得这一点似乎和上一点重复，其实不然，直接不一定就简单，论坛上经常有人争论3ds max和Maya孰优孰劣，功能上暂且不谈，单从界面功能划分上来讲，二者几乎没有两样，上方菜单、图标工具栏，中心视图工作区，下方状态栏、时间线、右侧参数调节区，细节虽有不同，但划分大体一致，单从这一点上来讲，二者谈不上什么哪个易用的比较，然而事实上，Maya在大场景管理方面比max优秀的多，灵活的视图切换也令max望尘莫及，但Maya相对于Max来说，虽然它也有单位设置，从它的参数调节栏中却根本不体现，操作方式虽然有利于视觉效果的调节，却并不利于数值精度，仅有的几种坐标方式并不足以建立科学精确的建筑模型，在建筑等对数值要求比较严格的领域根本难以体现它的优势，如果不是Max的NURBS功能十分差的话，Maya在工业设计领域也难以有什么发言权，这是它不及Max的地方。看到这里，相信大家已经明白了，上一点中讲述的是视觉，这一点则重点考虑功能。一个交互性产品在制作之前必然会经过需求分析这一步，它们指出了这个产品应该实现什么样的功能，而这些功能如何实现可以让用户更容易的操作使用它们则是产品设计师应该终点考虑的问题。
3.美观大方。我在上文中曾经指出交互性产品设计中美观并不是第一要素，然而这并不表示不需要考虑美观，相反，一个功能良好的交互性产品再拥有一个美观大方的界面，会是如何吸引人，这点是不难理解的。在美术修饰方面，需要注意的问题如下：首先，不要大面积使用太艳丽的颜色，大块过于艳丽的颜色在电脑屏幕上看久了会非常刺眼，特别是那些要经常使用的界面更要注意这一点。其次，要注意这些美工元素的装饰性和功能性，换句话说，它们是装饰，目的是为了突出功能，避免喧宾夺主。
以上三点是最重要的，最后还要提醒的一点是注意界面功能的区域划分，不要让界面功能太散乱。我见过一些界面设计中，功能是随意摆放的，整个界面根本无法分区，把相似的功能放在同一个区域，这点无论在什么样的交互性产品中，都是非常重要的，它们也比较利于用户的快速掌握。
二
面向用户的界面设计
在讲述本章之前，我想先讲一个故事，是关于环艺设计的，在美国迪斯尼乐园建成之时，乐园的道路设计一直是设计师们最头疼的问题，在长达几年的设计和施工中，一直没能作出让人满意的路线设计。直到乐园建成，只差道路铺设之时，依然没有找到让人满意的方案。而三个月后就要开放，时间非查过那紧张的，就在乐园建成的几天后，负责整个乐园设计的主设计师脑中突然灵光一现，通知甲方将整个乐园撒上草籽提前开放。一年后，草坪上被众多的游人踩出了一条条错落有致的小径，于是，施工人员很快沿着这些自然形成的小径铺好道路。这个道路设计后来获得了最佳园林设计奖。
当然，我们进行界面设计的时候不能提前开放，更无法让用户自己去“踩”出道路。那么，我讲述这则故事的原因是什么呢？答案非常简单，一个好的界面设计，往往要在研究用户群体的使用习惯方面下非常大的功夫。在应用软件界面设计中，你要了解你的用户最常用、最频繁使用的功能是什么；多媒体设计中，你要了解你的用户最习惯通过什么样的途径去浏览观看你的产品；而对于网站用户，则应该了解你的用户对站点中的什么内容最关心、最感兴趣，他们习惯于按照什么样的顺序去浏览这些内容。了解这些可能会花费很大则些努力，但你会发现这些努力非常有价值。这就是面向用户的设计。
最初接触面向用户的设计这一概念是在New Riders出版社出版的《回归设计——制作优秀的网站》一书中，书的作者总结了多位世界级UI设计大师的观点，提出了面向用户的设计这一概念，强调理解站点用户的需求是商业网站的最终目标，强调站点的可用性和有效性。在这里，我们不妨对这个理论作一个延伸，对面向用户的界面设计做出这样一个定义：以用户群体的习惯为基础，遵循用户群体的习惯对交互性产品的用户界面进行设计的方法（User-Centered Interfaction Design，简称UCID）。而为了设计可用有效的用户界面而针对用户习惯进行的分析研究称为面向用户的设计分析（User-Centered Design Analysis，简称UCDA）。
那么，根据这条理论，我们可以得出用户界面设计的一般流程：
用户群定位 ==> 内容功能整理 ==> UCDA ==> 进行界面设计 ==> 用户界面测试 ==> 提交使用 ==> 用户界面维护
下面，我们对这些步骤进行逐一的分析
1.用户群定位。用户群定位也可以说是市场定位，任何一个交互性产品必然有一定的用户群，用户群是普通老百姓，还是公务员，或是科研人员，或是其他人群等等，没有任何交互性产品适合所有人（包括软件产品中最基本的操作系统），也不要指望任何用户都可以习惯你的交互性产品。在进行设计之前，你必须对你所设计的产品将要面对什么样的用户群有深入的了解，这点尤其重要！
2.内容功能整理。你所设计的产品中提供了那些信息，包含什么功能？哪些是重点推介的功能，那些是常用的功能，哪些是重点宣传的信息，那些是经常变更用户经常需要了解的信息？你必须对这些了如指掌，不了解这些内容，便难以在分析和设计的时候作出最好的判断。
3.UCDA。了解了用户群定位和产品的功能和内容，就可以开始进行设计分析了。在这一步里，你要列出一个提纲，在这个提纲中列举用户可能的思维习惯、关注重点、产品重点的功能和信息，然后画一张图表，详细说明使用或浏览它们的步骤，在哪些步骤中应当突出什么内容，要注意尽量使这些步骤简单易懂。
4.进行界面设计。有了上面画出的提纲和图表，现在你可以正式开始设计你的界面了。遵照上面的分析，先粗略的分好区，将各个功能放置进去，再逐个进行美术处理，使应该突出的功能和内容更加醒目突出，对容易造成用户混淆的地方进行区分。到了这里，你的界面设计基本上也就算完成一半了，之后再对它进行一些修饰，美化功能并进一步突出主体。就可以进行下一步的工作了。
5.用户界面测试。虽然你现在已经有了一个似乎比较完善的用户界面，但也许你会注意到上面我说的话，它事实上只完成了一半。现在，你需要找更多人来看你的界面并尝试模拟使用它，这些人最好就是最终用户群体的一部分，当然，很多商业化产品是不允许这么干的，所以大多数情况下还是要由你的同事来协助你测试它。
6.提交使用。这里说使用实在是为时过早，但我找不出别的词来形容，在你的用户界面完成测试之后，如果你的工作有一个拥有决定权的上级，那么你需要征得他的同意，确定无误后就可以将界面交付给下一个开发环节了，如果你是在一个团队中工作，开发的任务由别人完成，你需要把这个界面提交给他们，如果开发的工作也是由你来做，那么现在你就可以动手开发了。当然，别忘了备份你的界面，将来或许会用到它。
7.用户界面维护。“什么，界面还需要维护吗？”当然，你为你的界面设计工作付出了大量的心血，值得肯定，但这个界面并不一定真的完全适合最终用户，或许你还需要在最后的使用中完善它，完善后的界面很可能是以升级或改版的形式出现；况且不管怎么说，用户界面设计工作都一定是存在于一个项目之中，是项目的一部分，一旦项目的需求发生变更，项目中的某些工作就要改动甚至重做，如果是功能上大的变动，就极有可能影响用户界面设计，这时也需要你对用户界面进行维护。相信我，无论如何要备份好你的界面，不会有错的。
|
![[鍜界値鍚冧粈涔堣嵂]姣忓ぉ娉�2琚嬶紝鍧氭寔30澶╋紝鍜界値濂藉鍒�](http://www.shuyancha.com/images/syc.jpg)