loading请求处理中...

详细解读图标设计!UI图标设计原则

2022-04-13 10:22:00 阅读 9264次 标签: 设计 作者: yipinweike01

  导语:详细解读图标设计!UI图标设计原则

  详细解读图标设计!

  图标创意

  其实图标创意阶段前还有一个重要的步骤 -- 创意准备。根据设计师所要做的项目需求,确定ICON图标的风格样式,这一步骤在界面设计过程中,可用图标风格评测的方法来确定所绘制的图标是什么样的风格路线,这也是项目前期对用户研究的内容,有潜力的公司会制订“用户角色”,用来指导界面视觉风格方向、界面内容建构和交互设计等。

  当设计师从客户那里接到设计任务后,应怎样开始设计图标呢?首先要看懂界面的需求,并对每个功能图标的定义要非常清楚,否则设计的结果将导致用户难以理解,这个也是图标设计所关心的可用性问题。

  但视觉审美和可用性有时候存在着矛盾,设计师们不能走极端,只顾及可用性而忽视设计美观的一面,也不能太追求设计上美的需求而忽略了这是一个功能性很强的界面图标,最好是能在这两者之间取得平衡。

  理解功能需求后,设计师要收集很多关于“关键词语—联想图形”之间能转化的元素,用生活中的物或其他视觉产品来代替所要表达的功能信息或操作提示。例如:音乐,我们会想到音符、光盘、音乐播放机、耳机等。但到底选择什么来表达呢?原则上是越贴近用户的心理模型最好,用大家常见的视觉元素来表达所要传达的信息。

  草图绘制

  草图绘制阶段就是将设计师的创意绘制出来,检验视觉关系,也就是在视觉方面多在草图上推敲,以提高效率,避免在渲染完成后再来修改而造成不必要的浪费。首先要确定图标透视,即关系到一套方案中的每个图标的透视方向,这是在图标设计一致性方面的基本要求,透视统一,然后一步步地进行细节添加。

  L图标视觉分析

  图标要表达一定的含义就往往须组合不同的形态,借助单个形态所传达的内在信息,拼合在一起去传达另外一种信息。例如:在设计“导航”功能图标时,设计师第一反应是与卫星有关,但就以单个卫星的外形来传达导航的含义恐怕不够,于是再联想与导航有关的信息图示,如“坐标”“旗帜”“陆地”等。再经过设计师以视觉平衡原理合理地布置它们之间的主次、空间关系。

  需要注意的是,不可随便使用其与要表达功能相关的图形或物体,要经过精心的挑选,最好是大家熟悉、易记的物或形,毕竟目的是要帮助用户更形象地理解程序的内在功能含义,以易记、易懂为前提。也不能借助过多的图形来表达图标含义,因为过于复杂反而影响用户的理解。

  草图渲染阶段

  在前面的流程完成后,设计师设计的草图已经很清楚地表达了自己的想法,并且也能与功能信息密切地吻合,那就需要使用 PS、 AI等软件进行绘制,这要看个人的习惯,以及对软件的熟悉程度。

  扁平化图标设计

  ①常规扁平式

  特点:纯色、剪影图形。

  优点:简洁清新、识别性良好、色彩明朗、设计感强烈。

  ②渐变折痕式

  特点:纯色、折痕、轻渐变。

  优点:比常规扁平化丰富,有轻微空间感、色彩明朗,视觉统一性好。

  ③轻质感式

  特点:简单层次、轻投影、轻渐变。

  优点:简洁、明朗,有一定的精致感,有简单的层次,内容丰富。

  ④长投影式

  特点:层次、投影。

  优点:色彩对比度大,有明显而单纯的投影,有鲜明的层次感和空间感,视觉冲击力强。

  ⑤轻厚度式

  特点:厚度、细节、轻投影。

  优点:有明显的厚度,既有明显的立体感,有厚重感和细节感,但相对于复杂统一性没有。

  所谓立体图标,就是在图标的设计中运用了空间透视、投影效果、浮雕效果、色彩渐变效果等,使图标本身看上去具有视觉上的立体效果的图标设计。立体指的是具有长宽高空间因素,平面图标的立体表现和设计师绘画中的立体感表现是一致的,相比起简洁的扁平化图标而言,立体的图标具有以下一些显而易见的独特优势。

  ①三维立体,视觉震撼。

  ②形象生动、易于识别。

  ③个性多样、美感十足。

  ④新颖别致、独具一格。

  立体图标赋予了图标本身更高的艺术性,也使得图标本身拥有了得天独厚的视觉传达优势。立体图标拥有强烈的空间感、立体感和视觉冲击力,图标在显示屏中会更加的真实灵动、触手可及,同时对用户而言,也增加了图形的趣味性并引起用户的点击欲。

  UI图标设计原则

  图标设计原则是指做设计时要遵守的必要准则。在进行图标设计时,设计原则可以帮助设计师快速地进行设计定位。下面对应用型图标设计原则和功能型图标设计原则进行详细讲解。

  应用型图标设计原则

  ①可识别性。识别性是图标设计的首要原则,是指设计的图标能准确地表达出所代表的隐喻,能让用户第一眼识别出它所代表的含义,从中获得相关信息。

  ②差异性。在设计图标时,必须在突出产品核心功能的同时表现出差异性,避免同质化,力求给用户留下深刻的印象。

  ③使用栅格线。在设计图标时,使用栅格线作为设计依据,可让图标与系统保持和谐统一,更好地彼此匹配。

  功能型图标设计原则

  ①表意准确。功能型图标设计的第一原则是表意准确,要让用户看到一个图标的第一时间理解它所代表含义。功能型图标在应用界面起到指示、提醒、概括和表述的作用。

  ②轮廓清晰。轮廓清晰是指形状边缘棱角分明,没有发虛的像素。在 Photoshop软件中,设置常规选项中选择“将矢量工具和像素网格对齐”复选框。这样在进行绘制时形状会自动对齐像素网格不会形成发虚的像素。以及在绘制图标时尽量使用45角,这样的斜线是最清晰的。

  ③使用图标网格。绘制图标时应随时使用48×48像素的图标网格作为绘制依据,它能有效帮助设计师掌握构图布局。图标网格将图标的绘制区域划分为若干份等大小的网格,并建立了关键线形状、绘制区(46像素)和禁绘区(2像素),让绘制图标更科学、准确和快速。

  绘制图标分为两种情况:一是规则的,可在46×46像素的图标网格区域绘制;二是不规则的,如异形的五角星它会有一些尖角在禁绘区内。

  需要注意的是,绘制图标并不是一味地要严格遵守图标网格去进行绘制,其实也要保持视差平衡。视差平衡是讲两个物体同样大的尺寸,但是其中的一个物体看起来明显要大于另一物体,此时需要将其中一物体进行缩小,在视觉上看起来平衡。

  ④一致性。致性指的是造型规则、圆角尺寸、线框粗细、样式、细节特征等的统一,让图标的外观整体一致

设计公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

留言( 展开评论

快速发任务

价格是多少?怎样找到合适的人才?

官方顾问免费为您解答

 
相关任务
DESIGN TASK 更多
找一位展厅空间设计师

¥100 已有1人投标

公司logo设计

¥600 已有3人投标

衣柜定制结构图设计

¥100 已有0人投标

美式游乐园风格的logo设计

¥300 已有1人投标

LED商标设计

¥100 已有6人投标

JHM 图形LOGO设计

¥500 已有34人投标

商标创意设计

¥3000 已有9人投标