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的既定熟悉和习惯，把应用设计得犹如报纸、杂志一样平常，

网站被黑，多半是免费虚拟主机惹的祸

最近AB 模板网 小编在论坛中看到很多站长都在叫，说网站被黑怎么办。网站被黑说明网站安全性不高，所以我们要加强网站安全，如何预防网站被黑？ 首先我们要知道网站为什么被黑了 一旦发现网站被黑，我们要先自己检测网站的安全性能，对黑客来说，小的企业站

而且提供优越的内容分类和搜索，以期让用户很容易的找到自己想要的资源，在最短的时间内获取更多有价值的信息（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设计不能或缺的要害一步。只有真正从用户营业的角度出发，合理的定位交互气概和手艺架构，才有可能做出真正相符用户习惯和需求的界面。设计师真正需要驾驭的不是手艺而是设计自己。因此，在这里，我想说：永远不要在手艺眼前迷失了偏向。是设计去选择手艺，而不应该让手艺来决议设计。