[转]企业级Web应用用户界面设计杂谈

第一章：UI浅论 问题：什么是UI，什么又是UI设计师？ 在我的职业生涯中，听到的最多的字眼就是“美化一下”。可以说，在2004年以前，是很少有人听过UI这个词的。那么，什么是UI呢？可能会有人说“User-interface, 用户界面”，哦，原来是界面——画面——用户能看到的东西。确实如此么？不，UI除了用户界面，还有更深层次的含义，那就是“人机接口”，界面是用户和计算机系统交互的桥梁和纽带，不止我们看到的是界面，鼠标、键盘、Mic、显示器，甚至计算机的Power开关，界面无所不在，没有了界面，你不止是无法去看，而是无法去用。那么，UI的深层次含义是什么？对，UI的深层次含义就是“交互”，是“使用”，而不是“看”。这个观念很重要，同时也带出了“UI设计师”这一职位的真正含义：UI设计师绝不是美工（或者说绝不是仅仅做“美化”工作而已），UI设计师是一个技术岗位而非艺术岗位，如果考察一名UI设计师的能力素质模型，那么他应该同时具备4个维度的能力： 1、沟通和文档撰写能力：如果说UI是人与机器交互的桥梁和纽带，那么UI设计师就是软件设计开发人员和最终用户时间交互的桥梁和纽带，如果UI设计师不能具备很好的沟通和理解能力，不能撰写出优秀的指导性原则和规范，那么，他将无法体现出自己对于开发人员和客户的双重价值，也无法完成他的本职工作。 2、过硬的技术能力：你可以不会写Java，但你绝对不可以不清楚Java是什么，他能够实现什么。即使你不能写代码，但你起码要懂得如何去“实现”。举个例子，你要做一个Grid控件，首先，你应该清楚，到底有哪几种数据格式，以及其存储方式：既可以通过HTML的Mark来获取数据，亦可以通过JSON对象或Array，又或者是XML甚至于字符串。其次，你要知道在Server端实现和在Client端实现到底哪个更适合当前的环境。这些都要依靠过硬对技术和丰富的经验，不懂技术的UI设计师，既做不出合理的设计，也不可能和开发人员做到有效的沟通。简言之，UI设计师起码要精通主流的表现层开发技术（如果是做Web表现层，一般需要精通HTML、CSS、Javascript、XML技术，甚至JSP、Java也要达到工作层），对于市面主流的设计模式，技术路线以及开源框架都要有足够的了解。可以说，UI设计师在技术素质能力方面，要尽可能的朝着“表现层架构师”的方向去努力。 3、图形设计能力和原型开发：UI设计师一生中从事的最多的工作应该就是图形和原型设计，那么，首先说说什么是原型设计。原型法是迭代式开发中设计阶段常用的手段，原型设计应该贯穿需求、概要设计和详细设计这三个阶段。开发原型的目的是，把设计转为用户可以看懂的“界面语言”，同时也对开发人员起到一定的指导作用（甚至可以作为开发的一部分）。用户界面原型更显示的价值体现就是，它可以帮助软件设计人员提早发现设计各个阶段的缺陷，在开发前解决这些潜在的问题，大幅降低软件开发的风险和成本。这与传统的瀑布式开发有了本质的区别，目前国内大多数公司仍然采用的是瀑布式开发方式，并且将UI设计放在开发阶段的后期来进行。这不仅使UI设计师无法充分发挥自己所长，只能做做“美化工作”亡羊补牢，更使得开发出的产品往往存在致命的设计缺陷而无法满足客户需求。所以，各公司中的“美工”是软件开发方法的落后和不完善早就的，而非“美工”或UI设计师这个职业本身。我们再来说一下图形设计能力，其实，UI设计师只是个泛称，在UI设计行业内部，还大致分为以下几种角色：可用性和交互设计师、视觉企划、用户体验研究人员、图形用户界面设计师等。大家通常理解的UI设计师，其实是GUI设计师（例如国内的Rokey，他就是一名非常优秀的GUI设计师，目前供职于Microsoft），GUI设计师的主要工作就是视觉定位以及创作。稍后的章节会详细介绍GUI设计师的职责以及日常工作。如果UI设计师不具备过硬的图形创作能力，那么，他根本无法表达他心目中的美，也就无从谈起“交流”了。图形设计能力，是每一名UI设计师最初具备的，最基础的能力。也是最能够衡量一名UI设计师能力水平的部分。 4、人因学理论和认知心理学：这个概念虽然有些大，但却是每一名UI设计师在事业稳固后毕生都要努力去探索的领域、可以说，设计的根本就是“人”，做人本的界面，自然需要了解人，了解人的行为。例如，你不可能设计这样一个界面，在同一时间同一个界面上的不同位置显示两条重要的提示信息——因为，人，在同一时间的关注点只能由一个，这是生理决定的，而不是某个人的主观臆断。再举个例子，为什么Windows每次一次版本升级或多或少都会找到以前的影子，你可能会说，这是Microsoft的设计风格。不，那不是风格，而是一种习惯，以前是Microsoft的习惯，现在，你用了Windows，那么，你也有了这种习惯。Apple和Microsoft的操作系统孰优孰劣？答案是，随你喜欢。是啊，多么简单的一个道理——喜欢，喜欢是一种习惯，你又如何能笃定你认为的“正确”的设计恰好是人们所喜欢的呢？这里可以稍带提一下Extjs，Ext的风格，简言之，就是桌面应用的传统交互风格（WMIP），而Web的风格是什么？如果要我来说，我更倾向于Web是一本翻开的杂志，一片展现设计师才华的热土，为什么这样说呢？因为Web的不确定和开放性。以我的经验而言，WebUI设计，是所有软件UI设计领域中最困难的，也是限制最多的（往往这些限制还存在不确定性），一名优秀的WebUI设计师，即使转而做桌面程序UI设计或移动设备界面设计，也是相对比较容易成功的。因此，作为WebUI设计师，排斥桌面UI风格是可以理解的，正是源自于他的习惯，他的“喜欢”。后面的章节会详细的阐述有关于人因学和人本界面相关的理论，在此就不赘述了。 那么，至此，大家应该大概了解了UI和UI设计师这两个名字的内在含义。关于“美工”的问题，也应该有了自己的结论，我就不再做解释了。再说一个题外话：UI设计师在我目前供职的公司的职位体系中是比较高的技术职位，相当于高级软件工程师，需要有3年以上行业经验方能胜任;而资深UI设计师是与软件设计师平级的，他们共同的上层职位是架构师。这跟某些公司所招收的“美工”是有很大区别的。 第二章：UI设计基础——图形设计 1、色彩设计： 美学相关的知识（色彩构成、平面构成等等）我就不再赘述了，相信从事此类行业的人员无人不知无人不晓了。这里简要说说WebApp设计中，色彩以及构图的特别之处吧。 首先是色彩。从事过广告和印刷业设计工作的人员应该都接触过一种东西，那就是标准色板。颜色是什么？你所看到的未必就是真的，反言之，真的你未必会看得到，呵呵，说的有些抽象了。还是举个实际例子吧，#f0f0f0这个很浅的灰色，目前80%的客户都已经升级到LCD显示器了，而大部分LCD显示器是无法正确显示这个的，即使显示了，各款显示器也会有很大的差异，为什么会这样？源于LCD的面板类型，LCD面板大概分为以下几种类型：NT、VA、IPS。VA和IPS面板的显示能力都可与CRT媲美了，虽然价格比较高，但其超大的可视角度（178）和完全的色彩还原，实为设计师们抛弃CRT的一剂强心剂（当然，大多数专业的图形设计师，这辈子都无法舍弃钻石珑CRT，呵呵，不一样就是不一样）。而NT面板占当前市场的绝大部分，原因就是它响应速度快，造价低廉。22寸的LCD只卖2000元不到，不用看都知道其采用的一定是造价低廉的NT面板，NT面板由于其固有的技术限制，其显示能力仅仅是16.2M色（目前的16.7M色NT面板应该是采用震荡模拟的方式实现的），颜色是设计师的命根子，缺颜色，就意味着你苦心打造的设计很可能到了客户那里完全走了样。我曾见过很多界面，选用的都是这些浅浅的灰色，看起来倒是很淡雅，但是，你真的考虑到了用户实际工作环境么？假如他用的恰好是一款不怎么出彩的廉价LCD，那你的设计岂不是要让人嗤之以鼻了？综上所述，首先，设计师必须保证自己的设计有很好的易曲性——在各种复杂环境下都要保证“可用”且不出现严重的视觉干扰。你需要至少在CRT和NT面板的LCD上检查自己设计，看看是否有因为缺色而导致的布局异常和视觉干扰，在这里，我不得不BS一下Microsoft的live mail，在缺色的NT面板下，完全走了样，既看不出边框，也没有了底色，这绝对是失败的视觉设计，相比之下，Yahoo!mail的设计就要好上百倍了（包括二者的Portal也同样如此）。 除了使用环境的硬件差异，还有一点就是色彩设置的差异（甚至有时候是显卡太差导致的），那种只支持增强16位色的PCI插口显卡基本已经绝种了，要知道，那可是奔腾MMX时代的经典之作。目前最底端的显卡，也支持至少24位真彩色了，而支持32位色的显卡更是遍地都是。但是，仍然有人在不知情（“不会”使用电脑的软件用户真不占少数）的情况下使用了16位增强色的设置，带来的后果呢，自然是难看的等高线和恶心的色彩搭配。 综上所述，因为WebUI的受众十分广泛且不确定，而由于技术架构的特点，我们不能也不想对最终用户要求什么（如果要求人家装这改那的，还不如做个Setup来得实际）。因此，充分保证你的设计的易曲性，是每一名WebUI设计师在作视觉设计时首先应该把握好的一个尺度。桌面应用由于其硬件环境的可控性，是可以超前和华丽的，但是，Web设计，尤其是基于Web的企业级应用的用户界面设计，就必须要让自己随时保持清醒的头脑。看看Javaeye的界面，它很朴素但很美观，我相信，没有人会对他特别的喜欢或者特别的厌恶，如果搞一个投票，相信80%的人都会表示接受，而另外20%的人应该会表示无所谓。这就是UI视觉设计中追求的80/20原则，我们不需要特别华丽的外观，只要80%以上的人满意。这里再提一下Ext，扪心自问，有多少人是被他的外观吸引的呢？外观的喜好会让人产生强烈的先入为主的观念，这也正是为什么大多数应用软件都喜欢在外观上求突破做概念的原因了（好多软件版本升级最大的改进便是外观）。但是，行业软件绝对不是以外观的华丽来取胜的，或者说，当前国内市场上，行业软件尚未达到那种只能在外观上寻求突破的高度。因此，作为应用软件领域的UI设计师，你可以去做做概念，吸引一下人们的眼球，来获取一席之地。但行业软件的UI设计师绝对不应该把自己主要的精力放在视觉设计上，这不仅会让你迷失方向，也会让你们的产品迷失方向。 2、构图和视觉风格设计： 我们只讨论以下三类常见的应用，至于3D界面和虚拟现实暂不讨论了，它们是：Web应用、桌面应用、移动设备。 首先我们来看一下桌面应用，可以这样说，操作系统是桌面用户界面设计的领头军，换言之，UI设计师在进行桌面UI设计时，首先应该考虑的就是操作系统环境。而往往，某个特定软件环境下的桌面应用，UI也是有诸多限制的，这个限制，就是系统固有的交互风格设定。举例来说，我们经常会在看到某一软件界面后这样说“哇，还是Mac风格的好看！”“这个是用.Net开发的吧”“Swing做的破东西太难看了，还贼慢”，为什么会出现这样的情况呢？因为，大多数情况下，我们在某个操作系统环境下进行软件的设计与开发，其组件和控件必然会不可避免的使用操作系统自身提供的UI API，也就是说，无论你做什么样的软件，都需要遵从相关操作系统用户界面的开发规范。Windows有个Offcial Reference，在MSDN上。同样的，Apple，Java乃至Nokia，他们都有相应的长篇累牍的API文档和开发规范。那么，这里又不得不提到了Ext，Ext的API文档是什么？呵呵，它与以上这些操作系统的GUI规范无异，它的API文档就是它的开发规范。所以，我曾经这样讲“Ext再怎么折腾，也是Ext”，现在各位应该真正了解我的意思了吧。Ext在我看来，已经不是Web UI了，我更倾向于把它归结为桌面UI的Windows系列内。桌面UI有个最基本的衡量标准WIMP（window、icon、menu、pointer），很明显的，Ext是桌面UI风格。而它的交互方式和Windows如出一辙，因此，我把它定位为基于浏览器的、Windows风格的桌面UI库。 总结一下，桌面应用的常见布局，就是：多为框架结构，由Grid、Toolbar、Menu、Form、Icon等控件构成。 再来看一下Web应用，我曾不止一次的提到这样一个观点，那就是，Web是自由且开放的。正因为其开放性，才有了今天的Ext、Ajax以及Thin Client和Rich Client之争。Web设计到底应该是怎样的？这个没有定论，因为Web是大家的Web，存在即合理。Web设计，最应该考虑的就是“设计的上下文”，在一个完全开放的平台上进行设计，就如同在一张白纸上作画。最大的限制不是技术，而是设计师本身。只有设计师能够决定自己的设计究竟该如何去做，同样，也只有他的能力会限制自己的设计。结合上下文关系，如果你开发的是Web mail程序，对于多年使用Outlook已经形成根深蒂固的使用习惯的用户来说，你要如何做这样的界面设计？开发一个全新的无人触及的新奇东东么？不，那背离了设计的人本本质，所以，满足用户最简单的办法就是，在Web上设计开发一个与Outlook风格和外观类似的应用，让用户完全没有压力，在熟悉地环境下高效的开展自己的工作。那么，如果你要开发的是一个新闻发布系统，自然就要符合用户对于Web的既定认识和习惯，把应用设计得如同报纸、杂志一般，并且提供良好的内容分类和搜索，以期让用户很容易的找到自己想要的资源，在最短的时间内获取更多有价值的信息（RSS和Portal都是因此而产生的）。再比如，你要设计开发的是一款信息管理系统，那么，很可能高效方便的增删改功能和强大的报表、查询系统，才是UI设计首先需要考虑的（桌面风格的UI很适合做此类应用）。又或者，你要开发一个体现出业务流程性的庞大复杂的行业应用，那么，体现出行业解决方案的高度概念性和软件对于业务流程的规范和指导作用，这是在设计UI时主要需要考虑的。而所有这些，在Web上统统可以实现，这要归功于Ajax，归功于全世界的开发者和设计师的共同努力。 总结一下，Web界面的常用布局——如果说到传统，那么，自然是平板式的文本流（Web在设计之初就是为了研究人员之间文档的共享和查看）。但是，Web发展到今天，我真的不知道该如何去总结它的布局风格了。只能说，常见的有：Banner-navi-content布局（多见于网站和多数Web应用），左右框架式布局（常见于基于内容和数据维护的Web应用）、Portal布局（企业Portal或门户）等等。 最后，说一下移动设备的用户界面。典型的就是手机上的应用软件，颜色和尺寸以及图形处理性能是其最主要的限制。基本上，在各个平台上开发应用程序，都要遵从平台的开发指南和规范，而风格大致也都是与操作系统本身一致的，再此不作赘述了。其实，之所以单独提一下移动设备，是因为某些行业软件还需要考虑PDA和手机用户的需要，这也成为我们在设计风格定位和技术选型上的一个制约条件。 3、图标、CSS、结构与表现分离： 图标按其创作风格，大致可分为两种：矢量图标和像素图标。在没有Alpha通道的几年前，图标几乎都是像素风格的，生硬而简洁（例如windows2000的图标），但是十分耐看。近年来，随着Alpha通道逐渐普及，图标开始变得越来越绚丽（主要归功于Apple），越来越写实，设计师们为了创造出更加绚丽的图标，逐渐改用矢量设计软件来进行创作。WindowsXP风格的图标就是矢量图标。绘制图标几乎成了所有UI设计师的看家本事，也是衡量一名UI设计师在GUI设计方面能力水平的标尺。方寸之地方显英雄本色，呵呵。那么，图标除了好看以外，还有别的什么功能么？其实，图标在图形用户界面的主要作用是辅助识别，每个人在成长过程中，最先认识事物是通过对其轮廓的识别，而不是靠文字。因此，图标多会采用最为简洁的方式表现出事物的功能和特点：比如，突起的东西表示它应该是可以点击的，小信封表示这是一封邮件，放大镜表示这里是搜索。一直以来，图标都在尽可能的贴近实际，但是，并不是所有的Web上的事物都可以找到现实中的存在。学习能力是人类与生俱来的一种能力，初遇Web的人类开始不断的学习和了解这个世界，他们知道了什么是鼠标指针，什么叫光标，什么是链接，什么又是滚动条。正是人类不断的认知，促成了习惯，也就形成了如今的各类用户界面风格。最早的Web是没有图标的，或者说，在Web上，图标的概念和桌面UI完全不同。WebUI中，图标的作用往往是辅助说明，而非“点击”，这与桌面UI中图标的功能大相径庭。因此，大家可以仔细看一下，大部分传统的WebUI中，是绝对不会出现可以点击的图标的（论坛的表情符号除外。。）。WebUI更习惯以文本的方式来展示信息，以带有下划线的文本来表示此处是链接可点击。 综上所述，WebUI中的图标和桌面应用的图标有着固有的本质区别，因此，照搬桌面UI的设计往往会将用户引入错误的习惯当中，使用户想当然的认为WebUI就应该那样去做，这对Web是不公平的，对WebUI设计更是极大的讽刺。要知道，Toolbar和Menu根本就不是WebUI的必需品——包括图标在内。 再来看看CSS，CSS是什么？最早，它是出现在印刷业当中的，后来才被引入Web，用来对文档格式化。提到CSS，就不得不提到结构与表现分离。说到这个，可能有人就会想到了，网站的裸奔节，呵呵。对于结构与表现到底怎么个分离法，我相信各位都有自己的见解。我对此的理解是，Web不仅仅是CSS+HTML，还有各种服务器端技术呢。其实，与其让HTML和CSS做到结构与表现分离倒不如让开发人员在编码的时候，做到结构与表现分离。我并不是结构与表现分离这种思想的坚决拥护者，我会在必要的时候用Table去做布局，即使HTML代码增多了，那又如何，我换来的是良好的兼容性，再也不用特别去关注各个浏览器在CSS解析和渲染上的微小差异，这么做值得。只要通过某种方式，让开发人员只需要书写简单的Tag就可以开发页面，谁还会去关注HTML和CSS的结构与表现分离呢？当然，tag的封装不止是这么一个原因而已，稍后的章节我会详细论述。 每一个UI设计师，都是从处理图片开始职业生涯的，慢慢的，他们发现，为什么每一次自己的设计都会让开发人员眉头紧锁说无法实现或十分困难呢？技术到底是怎样的呢？后来，UI设计师们学会了HTML，哦~ 原来HTML是这样地，他们的设计开始变得更加实际了，他们不仅能够处理和设计图片，同时也能够为开发人员提供必要的HTML支持了。再后来，他们发现，为什么自己的设计加载速度总是那么的慢，而别人的设计加载起来这么快呢？后来，他们慢慢懂得了切图，懂得了CSS。后来的后来，他们不仅懂得HTML和CSS，而且还能够考虑到性能和兼容性，并开始注意编码的艺术，知道了什么叫做设计模式，什么叫做抽象和封装。至此，他们才真正的把自己提升到了WebUI设计师的高度。他们发现自己越来越懒，宁可通过CSS复杂的编码来实现一个特效，也不愿去花时间绘制一个图片（比如阴影）。他们写的代码越来越少，CSS越来越多，慢慢的，结构与表现分离了，HTML变成了通篇的DIV和UL，CSS文件如天书一般洋洋洒洒数十kb。因此，结构与表现分离是一个思想上的自然演变过程。我看到今天，有那么多的设计师以此为准则、以此为规范，不禁感慨，WebUI不是那样的，Table无罪。当你因为无法用DIV+CSS实现某种布局转而引入大量的JS或干脆换个设计的时候，这么做值得么？ 总结一下，CSS无疑给了WebUI设计师更大的发展空间，它是WebUI设计师的一把利剑，当然它同样也是一把双刃剑。过份依赖CSS只会让你的设计越来越简洁、越来越无趣，这就是CSS下的迷失。图片不是罪，如果你不想自己的灵感一点点的枯竭，那么，重新拾起图片吧，你会发现设计原来可以更美的（参见Vista相关网站，设计可以更美的）。这里再小小的提一下Ext，虽然它自带主题的支持，但是，它真能够做到让设计师随心所欲么？想随心所欲又要付出多大的代价呢？ 本章结论，WebUI的图形设计，其自由度是由交互风格和技术架构双重作用决定的。限制了交互风格和技术架构，就等于限制了图形设计风格，也就相当于限制了UI设计师的发挥。因此，让UI设计师来选择和决定交互风格和技术架构是UI设计不可或缺的关键一步。只有真正从用户业务的角度出发，合理的定位交互风格和技术架构，才有可能做出真正符合用户习惯和需求的界面。设计师真正需要驾驭的不是技术而是设计本身。因此，在这里，我想说：永远不要在技术面前迷失了方向。是设计去选择技术，而不应该让技术来决定设计。 第三章： UI设计基础——可用性和交互设计 Temp: “您需要什么样的界面？”大多数用户对此的回答几乎都是“大气点儿”、“漂亮点儿”、“用着方便”，这时候你会怎么去做？这是你想要的答案么？这时候，“美工”往往都会收到这样的任务——做几套效果图给用户选一个，要做的细一点儿，跟最终实现的效果一样。这应该是国内大部分软件公司都会优先采用的做法，那么，这真的就正确么？答案是否定的。首先，对于某种特定场合的应用来说，并不是只有一套界面最合适，界面这东西，就不存在完美一说，尤其是受众来自不同年龄层次和社会层次的情况下。而，往往客户方代表只有少数几个人，有决定权的更是仅有一人而已。他的决定，往往只代表他的主观想法，作为UI设计师，做出多套图形设计效果图让“他”来选择，这本身就是非常不负责任的。我们常戏称自己为搞“大众艺术”的，原因就是，我们的设计要符合大多数人的喜好和习惯，而不是特定的某个人，来宣扬他的个性。那么，说了这么多，正确的做法应该是什么呢？首先，UI设计师应该运用自己的行业经验，为用户确立一个最保守的交互风格设计。那么，什么又是交互风格设计呢？简言之，桌面应用和Web应用就是两种交互风格，针对不同用户和不同应用，首先应该为他确定的就是交互风格，这往往可以通过简单的图形就足以概括。比如，在纸张或白板上描绘一个草图，再创建若干典型用例，图解给用户，看看是否符合用户的业务习惯和使用场景。这就是“概念设计阶段”，你可以选用的道具有很多：Flash、PPT、白板、纸张、甚至与笔和墨水瓶，充分发挥你的想象力和沟通能力，我们要的就是最终沟通的结果，只有交互方式确立了，你才可以真正的开始设计（这时候你会发现，那种刚听到需求就开始做效果的做法是多么的冒险）。 //TODO //帖子应该会很长，暂时我只能想到哪儿说到哪儿了，呵呵，大家不要着急，我会不断补充的。关于原型，一说就止不住了。。。应该把原型设计相关的内容放在后面的章节来详细讲解。 先把目录留下，免得写乱了。。 第一章： UI浅论 —— 主要讲解一下UI这个行业的相关知识。 第二章： UI设计基础 图形设计 —— 这部分主要讲UI设计中图形设计方面相关的内容。 第三章： UI设计基础 可用性和交互设计 —— 这一部分的内容不会写很多，因为实在是涉及面太广了。 第四章： 企业级Web应用用户界面设计与开发简介 —— 着重阐述其与网站等小型应用在设计和开发上的不同之处，及其限制和特点。 第五章： 企业级开发之原型法和封装 —— 讲解原型设计，同时也会讲到封装的方方面面，我看到有人说，大家对Tag很抵触，我希望，您如果恰好从事的是企业级开发，千万不要有这样的想法。 第六章： UI设计方法学之争 —— 在这一章节，我会讲解一下主流的以用户为中心的设计、目标导向的设计等UI设计方法学相关理论，并且提出自己关于现阶段，国内企业级Web应用UI设计方法的定义和理解。 第七章：尾声 —— 我对于未来的一些展望，以及我对已经开始UI设计工作以及想要从事UI设计工作的朋友们的一些建议。