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那你的设计岂不是要让人嗤之以鼻了？

　　除了使用环境的硬件差异还有一点就是色彩设置的差异（甚至有时候是显卡太差导致的）那种只支持增强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上。同样的AppleJava乃至Nokia他们都有相应的长篇累牍的API文档和开发规范。那么这里又不得不提到了ExtExt的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的必需品——包括图标在内。

　　再来看看CSSCSS是什么？最早它是出现在印刷业当中的后来才被引入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和ULCSS文件如天书一般洋洋洒洒数十kb。

　　因此结构与表现分离是一个思想上的自然演变过程。我看到今天有那么多的设计师以此为准则、以此为规范不禁感慨WebUI不是那样的安卓优化大师官方网站WebUI不是那样的Table无罪。当你因为无法用DIV+CSS实现某种布局转而引入大量的JS或干脆换个设计的时候这么做值得么？

　　总结一下CSS无疑给了WebUI设计师更大的发展空间它是WebUI设计师的一把利剑当然它同样也是一把双刃剑。过份依赖CSS只会让你的设计越来越简洁、越来越无趣这就是CSS下的迷失。图片不是罪如果你不想自己的灵感一点点的枯竭那么重新拾起图片吧你会发现设计原来可以更美的（参见Vista相关网站设计可以更美的）。这里再小小的提一下Ext虽然它自带主题的支持但是它真能够做到让设计师随心所欲么？想随心所欲又要付出多大的代价呢？