企业级Web应用用户界面设计杂谈 (2)

第二章：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和手机用户的需要，这也成为我们在设计风格定位和技术选型上的一个制约条件。