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设计不可或缺的要害一步。只有真正从用户业务的角度登程,正当的定位交互格调和技术架构,才有可能做出真正合乎用户习气和需要的界面。设计师真正需求驾驭的不是技术而是设计自身。因而,在这里,我想说:永远不要在技术背后迷失了方向。是设计去抉择技术,而不应该让技术来决议设计。