ICON设计的6个最基本的原则

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:zcool   作者:小行星2012

关键词

1.定义准确形象



icon也是一种交互模块,只不过通常以分割突出界面和互动的形式来呈现的。其中以交互式为主要运用手段。而icon对于一般起是充当指示、提醒、概括、表述等作用,所以在icon定义的时候一定要准确,非但不能模糊反而比logo的定义还要清晰。

比如:新建,添加,删除,搜索等都要遵循简洁通用这个一个基本的原则。否则用户辨识度上会导致操作成本上升的结果。通常也会造成阅读和操作的障碍。


如图:查看有3种图形来定义。


那么,第一种是放大镜,这个通常我们可以用在系统设置上,由于传统原因,我们会约定俗成的把它和相关设置放在一起。第二种,由于社交化的催生,肢体语言可以概括出生动的图形,首先我们想到的是眼睛。第三种查看是阅读类情况,APP应用居多,这个就可以用书本的轮廓来进行定义。


这三种情况是根据情况来设定,如果互换势必会带来定义不准的问题。




2.造型完整简明


造型是icon设计的筋骨,就好象一个人是健康的还是有缺陷的。一个icon有没有美感很大程度就取决于造型是否优美和谐。


在基本外形里,通常是矩形或圆形,我们会给予它们不同的设计感觉来定义它们能表达什么。

如:在大幅空白的区域,圆形icon会更适合留白排版。当大幅文字段落或执行按钮的时候,矩形icon会更合适排版。

    

3.表达符合的行为习惯



在表达定义的时候,首页要符合一般使用的行为习惯,UI本身的意义就在于附加到“功能”上的一个表现层,具备最直接的操作和交互的功能。我们首先不要着重华丽和精妙上面,为了icon而做icon。而往往一些产品部门相关的人员并不会在乎华丽和精美。功能性是最重要的因素。而个性色彩比较浓的游戏类或教育类界面,一般都配有文字或归属感比较强的元素来进行设计。


4.风格表现统一



风格是一种具备独有特点的形态,具备差异化的思路和个性。在UI中通过表现不那么特立独行也是因为行为习惯问题,这也解释了想微软、苹果、谷歌可以颠覆设计原则的原因,通常一个公司或一个组织没办法去改变设计规则。

这通常取决于先入为主和影响力所决定的。现在的UI界面中的icon更称得上风格化,而非百花齐放,林林种种。我们在定义和风格上只能限制于目前的标准框架来设计,而应用设计的灵魂就在于“功能”,所有应用设计都要依附和顺从于这样的一个标准里。

引申一点,就是要融入到整个的产品设计中,这包括用户体验和协助工程师把功能完整起来。

使得不因视觉原因而达不到产品设计的预期。


风格的统一包括:造型的轮廓粗细的统一,颜色色调与调和的统一,材质与纹理(肌理)的统一;当然也包括用词的风格,比如:我的文件夹或者这个文件夹,是有许多区别的。


当我们设计icon时,可以使用一些栅格来完成结构,结构就是造型是否准确的基础。先有自由的设计思路,在进行栅格或者所谓的几何化的规范,最终完成设计。



5.排版循序与位置的调整



完成基本的icon设计后,还有根据UI界面布局来进行调整icon在整个布局中的位置。这个相当重要,而对于有经验的工作人员来说,一般icon的造型,复杂程度,基本外型都会进行调整;如简单相对复杂,圆形一列中会有重叠元素,也可以会有矩形来调和。对比调和后使得icon更加易读和方便识别。切忌糊涂一片,错乱反复。


但icon在重要或突出功能的位置上,必须首先进行调整造型和位置,因为在一般UI界面里靠上的位置或者特定位置的功能相对固定,不能简单的删除更改。否则整个功能方向就会失调,使得网站或APP像另外一个方向去发展,得不偿失。


6.使用配色的协调



给icon添加颜色是解决视觉冲击力的一种表现手段。一般赋予icon什么样的个性和使得突出重点,一般都会添加颜色。在添加颜色时首先我们可以用感觉来进行设计,思路对想法可以就行了。


这时在整体界面中一般有背景色和主导色,那么一般我们选择的icon颜色要侧重于点缀色或者着重色,而其他不太重要的icon颜色尽量选择中性的颜色,想低纯度的蓝色,因为在UI界面设计中,蓝色几乎和黑白灰并称万用色。有时候UI界面或icon整体偏暖和冷就是因为补色没有运用好。导致很刺激人的感官,这里有个小技巧,就是运用补色。


补色通俗点说就是把三原色补齐,重点:不是要补充纯度高明度高的其他三原色,这个还是要看具体的环境和条件,且不要下死定义,形而上学。

 


P.S:由于时间关系,以后配图说明。


 收藏