webapp设计注意事项

色彩设计

　　美学相关的知识(色彩构成、平面构成等等)我就再也不赘述了，相信从事此类行业的人员无人不知无人不晓了。这里简要说说WebApp设计中，色彩以及构图的特别之处吧。

　　首先是色彩。从事过广告和印刷业设计工做的人员应该都接触过一种东西，那就是标准色板。颜色是什么?你所看到的未必就是真的，反言之，真的你未必会看获得，呵呵，说的有些抽象了。仍是举个实际例子吧，#f0f0f0这个很浅的灰色，目前80%的客户都已经升级到LCD显示器了，而大部分LCD显示器是没法正确显示这个的，即便显示了，各款显示器也会有很大的差别，为何会这样?源于LCD的面板类型，LCD面板大概分为如下几种类型：NT、VA、IPS。VA和IPS面板的显示能力均可与CRT媲美了，虽然价格比较高，但其超大的可视角度(178)和彻底的色彩还原，实为设计师们抛弃CRT的一剂强心剂(固然，大多数专业的图形设计师，这辈子都没法舍弃钻石珑CRT，呵呵，不同就是不同)。而NT面板占当前市场的绝大部分，缘由就是它响应速度快，造价低廉。22寸的LCD只卖20**不到，不用看都知道其采用的必定是造价低廉的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设计师绝对不该该把本身主要的精力放在视觉设计上，这不只会让你迷失方向，也会让大家的产品迷失方向。

构图和视觉风格设计

　　咱们只讨论如下三类常见的应用，至于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库。

　　17xuee给你总结一下，桌面应用的常见布局，就是：多为框架结构，由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和手机用户的须要，这也成为咱们在设计风格定位和技术选型上的一个制约条件。

图标、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设计不可或缺的关键一步。只有真正从用户业务的角度出发，合理的定位交互风格和技术架构，才有可能作出真正符合用户习惯和需求的界面。设计师真正须要驾驭的不是技术而是设计自己。所以，在这里，我想说：永远不要在技术面前迷失了方向。是设计去选择技术，而不该该让技术来决定设计。