浅谈设计师必看的图标和ICON设计指南(3)

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

uimaker
UI设计师 / 江苏 南京

来源:未知   作者:印迹时光

关键词

4.1 iOS应用图标

iOS6及之前的版本,应用图标的圆角半径都可以通过1/4圆绘制出来,即绘制标准的圆角矩形即可,主屏幕应用图标为114*114px,使用20px圆角半径,App store应用图标为512*512px,使用90px圆角半径等。从iOS7开始,主屏幕应用图标调整为120*120px,并且不再是标准的圆角矩形,而是某种连续曲线,接近于26-27px圆角半径。

浅谈设计师必看的图标和ICON设计指南

我们把两个圆角曲线放大重叠后进行对比,其中灰色线框为标准圆角矩形绘制的圆角,红色为iOS平滑圆角,它与圆角矩形拥有相同的对角线锚点,区别在于其曲线稍微向中心收紧。

浅谈设计师必看的图标和ICON设计指南

事实上,我们很难在Retina屏幕上区分这么席位的差别,因此设计师在绘制iOS应用图标时不必过分纠结它的圆角,直接绘制成直角矩形交给开发同学即可,如果应用图标需用于展示,可以绘制120*120px圆角矩形、27px圆角半径代替。

4.2 安卓应用图标

安卓应用图标同样需要很多尺寸,主流需求是1024px、512px、144px、96px、72px、48px六种。设计师提供给程序员的同样是直角矩形,最好的ui网站,然后程序员通过代码进行切割使其变成圆角图标。

4.3 iOS应用图标设计流程

在我之前的设计作品中,有个“影记”的摄影社区APP,本篇我们就以此为产品案例抛砖引玉来学习一个iOS应用图标的绘制过程。

4.3.1 寻找隐喻

隐喻是在彼类事物的暗示之下感知、体验、想象、理解、谈论此类事物的心理行为、语言行为和文化行为,即人们看到某样东西或听到某件事情能够马上在大脑中形成联想。例如说到摄影,马上就能想到相机、快门、闪光灯、暗房等。然后通过这些联想词,去找一些气质相符的图片制作情绪版,通过情绪版可以感受到产品的调性,然后从中提取一些形状和色彩作为产品图标的主要造型。

浅谈设计师必看的图标和ICON设计指南

4.3.2 竞品分析

应用市场各类产品不胜其数,在同类应用中存在大量相似的应用图标设计,如何保持应用图标的唯一识别性非常重要。唯一识别性不单单指图形与其他应用有所差异,避免创意撞车,让用户在脑中形成思维模式,它还指图形表意是否清晰,是否符合用户的心里预期。

浅谈设计师必看的图标和ICON设计指南

4.3.3 提取关键词

根据收集的图片,创建情绪版,结合自己的产品提取关键词,然后就知道在接下来的设计中应该突出什么。我们从“影记”中可提取首字母“Y”,相机中的“快门”“信号灯”“开关机”,并依次将关键词描绘成下列图形。

浅谈设计师必看的图标和ICON设计指南

4.3.4 抽象图形

确立了首字母“Y”、“快门/开关机”和“信号灯”作为应用图标的主图形,接下来将绘制好的3个图形相结合,即完成初步设想。

浅谈设计师必看的图标和ICON设计指南

4.3.5 图标栅格线

使用iOS应用图标栅格线作为设计一句有助于建立和谐的图标绘制比例,并与iOS系统保持统一,下图为iOS系统天气应用使用了图标栅格线。将图形放置在图标栅格上调整大小并注意图形与其比例协调。

浅谈设计师必看的图标和ICON设计指南

4.3.6 丰富细节

通过上面图形组合已基本完成应用图标的设计,接下来我们还应从颜色、质感、背板等着手丰富图形的细节,建立起应用的产品气质。“影记”作为摄影师分享佳作平台,摄影师们用的器材颜色大多以黑色为主,因此酷酷的黑色更适合作为应用的主色。然后,白色的信号灯过于普通,使用相机本身发出的橘红色灯光作为信号灯的颜色,使其更加具有动感和活力。整体像「消息气泡」的造型暗示可以在这里进行摄影交流。

浅谈设计师必看的图标和ICON设计指南

4.3.7 多场景测试

将120*120px应用图标设计稿放大至1024*1024px,交付开发提交至App Store上架,正确的图标设计稿应是直角矩形,iOS会自动应用一个圆角遮罩将图标的4个角遮住,假如图标设计稿自带圆角,就有可能露出图标透明区域。

浅谈设计师必看的图标和ICON设计指南

△ 注:上图非实际大小,仅表明不同分辨率下的比例关系

此外,应用图标还会以不同的分辨率出现在不同场景中,例如在iPhone 8plus上需@3x的图,即将120px的图标放大至1.5倍;而在iPhone7的设置页需要58px的图,就需要将120px的图缩小。将大图缩小成小图时,一些细节就会丢失,使画面变得模糊,因此设计师应对小尺寸图标进行席位调整,去除不必要的装饰元素,以确保应用图标在小分辨率应用场景下也能保持清晰的识别度。

浅谈设计师必看的图标和ICON设计指南

浅谈设计师必看的图标和ICON设计指南

APP中的功能图标

除了产品图标,还有一种图标被称为功能(或系统)图标,功能图标指的是担负一定功能和含义的图形,一般来说需要像文字一般地被人迅速理解,所以表达方式上不适合特别复杂,如微信底部四个系统图标就使用了比较简洁的线性风格。

功能图标在UI设计中占据非常重要的作用,几乎存在于每一个应用界面中,无论是在导航栏、工具栏或标签栏,还是在首页、详情页或个人中心页,都随处可见功能图标的身影。功能图标具有明确的表意功能,其作用在于替代文字或辅助文字来指引用户进行快速导航,它具有图形化的符号,比文字更加直观,符合普罗大众的认知习惯,有助于用户形成记忆思维,提高应用的易用性。同时设计精致、风格统一的功能图标提升了产品视觉效果,不但给用户带来视觉上的愉悦感,还带来了良好一致的使用体验。

浅谈设计师必看的图标和ICON设计指南

在 @1x 一倍图设计模式下,以 24px 为网格基准的话,常使用的图标粗细有:1px 、1.5px、2px、3px,1.5的粗细常用于高倍屏,如近几年旗舰机的手机屏幕或者 retina电脑屏,否则像素渲染会比较模糊。

5.1 图标栅格

图标栅格被用来促进图标的一致性,以及为图形元素的定位建立一组清晰的规范。这种标准化的规范造就了一个灵活但有条理的系统,令所有的设计保持协调、一致和美学的视觉特征。

5.1.1 像素栅格

基于像素划分的像素栅格是最基础的栅格系统。在绘制图标时,我们总是希望将对象对齐到每一个像素,特别是直线。因为像素对齐不仅仅可以更好地渲染,还能让图标更加整洁、舒服。下图展示了Sketch 中像素对齐和没对齐图标之间的差异:

浅谈设计师必看的图标和ICON设计指南

左:像素不对齐 右:像素对齐

可以在绘制图标之前就先设置好栅格,在Sketch和Figma中都有相似的设置。

浅谈设计师必看的图标和ICON设计指南

Material Design官网给出了图标的辅助网格,为设计师绘制小图标提供一致的标准。图标网格通常包含三部分内容:活动区域,修饰区域,关键线形状。我们以此为例进行介绍。

浅谈设计师必看的图标和ICON设计指南

活动区域:是指图标主要内容的绘制区域,通常而言图标图形的主体都在该区域内。

修饰区域:是指用于承载部分图标的一些出格图形,某些视觉占比较小的图形可以延伸到修饰区域,但不能超出网格范围。

关键线形状:关键线形状是网格的基础。有4种关键线形状,利用这些核心形状作为向导,你可以在产品图标的设计中保持一致的视觉比例。

浅谈设计师必看的图标和ICON设计指南

如 Material Deisgn 的图标网格中,活动区域宽度为 20dp,UI设计如何,修饰区域宽度为 2dp,4 种关键形状分别对齐于 20pd和 18dp 和 16dp的边缘,对齐于像素。

浅谈设计师必看的图标和ICON设计指南

上图为基于网格和关键线形状绘制图标的示例:如左侧「剪切板」图标,整体核心图形部分以网格中的正方矩形为模板,顶部的挂钩图形视觉面积较小,部分内容伸入修饰区域。右侧「相机」图标以长方矩形为模板。

5.1.2 视觉栅格

除了像素栅格,还有视觉栅格。视觉栅格可以帮助我们找出图标的中心在哪里,以及人眼能感知到它有多大。圆形和弧形物体看起来会比正方形更小。因此我们应该在绘制图标时设定一个固定大小的容器,这样它们在导出时就都是相同的尺寸了。添加内边距可以让图标在视觉上看起来更加平衡,避免以后开发时还需要重新调整。

浅谈设计师必看的图标和ICON设计指南

5.1.3 视觉重量

绘制图标不光要满足物理上大小统一,还要实现视觉上大小统一。设计师要懂得调节图标大小以避开视觉上的觉错。

UI界面的图标通常可以近似的看做以下的基本格式之一:横向矩形,纵向矩形,对角矩形,圆形,三角形,正方形。如果把它们做成高斯模糊效果,你就会发现它们具有相同的视觉重量,因为它们变成或多或少相同的斑点效果。

浅谈设计师必看的图标和ICON设计指南

根据图标形状,将它们放在相应的框架中。你就会发现,方形图标比三角形或细长图标更紧凑。

浅谈设计师必看的图标和ICON设计指南

浅谈设计师必看的图标和ICON设计指南

 收藏