如何设计风格统一的图标

前言:图标是决定一个APP风格的重要构成元素,要设计一款讲究的APP,成为一个讲究的设计师。掌握如何设计一套统一风格的icon是基本要求。

APP中的图标的类型多种多样,最常出现的有:面形图标,线形图标,扁平描线图标。文章主要讲这3种图标。图标的形式没有绝对的对错,只要在当下是合适就是最好的。设计圈有点像时尚界,有些反复,时不时会流行复古,时不时又流行现代……

一. 面形图标

面形图标的视觉占比大,有比较强的视觉表达力,通常用在应用中的主要入口。最新的苹果iOS 11底部标签栏就使用了面形图标。那么面型图标的风格要如何统一呢?

在APP界面中,面型图标通常有两种使用方法:正形和反白。我将分别讲下这两种使用情况下,如何进行统一。

1.正形

上图是面形图标的正形使用,要统一风格,要注意的是:a. 面的面积  ;b.负形的面积;c. 线条的统一;d. 形的统一。可以从形的形状,圆角进行统一

示例中的icon,在面的形上也进行了统一,全部用了圆形进行布尔运算,这种统一在需要画大量功能性icon时,并不是必要条件。满足以上3个条件,基本就可以做一套风格统一的面形icon了。

2.反白

上图是面形图标的反白使用,反白使用时,除了正形图标的3个注意点,还需注意图标和背板的尺寸比例,比例并没有严格的规定,但是建议用0.618黄金比例。注意点如下:a. 面的面积;b. 负形的面积;c. 线条的统一;d. 形的构成统一。比如:圆角统一;e. 背板和图标的比例

二. 线形图标

线形图标比较轻量化,减少视觉干扰,让用户集中在产品核心功能上。在iOS11以前,iOS原生应用的导航栏,标签栏,工具栏全部采用了2px线框的图标设计。

线形图标的使用也有两种:正形和反白。大海不建议线形图标的反白使用,因为从设计逻辑上讲,背板结合线形图标是互相矛盾的。

正形

上图中线形图标,要统一风格,有以下几点:a. 线的形状;b. 闭合区域的大小;c. 线的粗细;d. 线的断点。

三. 扁平描线图标

扁平描线图标其实是面形和线形的结合,一开始这种设计形式,主要用来做复杂度比较高的插画,后来逐渐在标签栏,首页功能入口这些位置开始应用。这类图标相对于纯面形,纯线形来说,风格明显,个性化程度更强。有一款APP叫“想去”,它的分类图标就用了扁平描线图标,有兴趣的同学可以去看下。

扁平描线图标,统一风格,除了要注意线形图标设计以外,要注意填色区域的大小。

还要注意:a. 线的形状;b. 线的粗细;c. 线的断点;d. 填色区域的大小,颜色。

基础已经讲完了,当你掌握了统一图标风格的基本方法以后,就可以开始创新,有自己APP特色的图标了。

实例1:大海最近设计了一个江湖气息的APP,标签栏图标,在线的断点处做特色处理,两个弯弯的拐角云纹。

如下图:

实例2:大海做的一个APP的概念版改版,启动图标用了轻拟物的风格,对应首页的功能入口也沿用同一种设计风格。

结语

图标设计有专业的参考网格,按照参考网格设计可以很大程度的使图标大小更为统一,但是大海建议千万不要太拘泥于网格,视觉统一最重要,参考网格是帮助设计的工具,不要被它所限制。理论结合实践,实践的过程中不断的自我总结,才能不断的成长。

注:文中的设计示例ICON,来自大海自己的设计

大O设计(公众号)

作者:大海

(0)

相关推荐

  • 从iOS 11看怎样设计APP图标

    苹果WWDC2017开发者大会已经尘埃落定,除了新产品的发布,iOS 11也正式亮相.新系统中,地图.App Store.时钟.相机.联系人等等原生应用都换了新的图标.此次图标的变化势必也会激发下一个 ...

  • 图标设计的六步指南

    小编:@沪江UED图标的优秀之处表现在最基础的3个特征:基本框架.一致性和识别性. 除此之外细节的注重也是重点.以下有6个步骤可以协助你做出统一的图标系列哦. 图标和矢量素材网站(比如我所在的Icon ...

  • 让Win7图标风格一致化

    Windows 7超级任务栏的出现让用户把视线更多转移到屏幕下方,只是每天看着那些花花绿绿的程序图标,也许你会有这样一种念头:如果把它们改成统一的风格,会不会很看起来酷呢?比方说类似下图中所展示的,这 ...

  • 做一套统一的ICON(分分钟学会)

    做一套风格一致,色彩统一的图标确实不容易,那么对于新手来说,更是难把握,今天来学习这个教程,让你从此找到方法. ICON视觉统一法则: 色彩统一法则 形状统一法则 光源之感统一法则 作者:用户体验部

  • N Style图标制作教程(源文件psd下载)

    今天小编给大家带来一个卡通风格的和微扁平风格的图标教程.粉嫩嫩的小兔子萌萌哒!大家按照教程做好这两个图标后呢,也可以尝试着去发现生活中一些更加有趣的元素,加入到我们的这个风格的图标中,做出一套风格统一 ...

  • 百度卫士和360哪个好?百度卫士和360安全卫士区别对比评测

    百度卫士的功能集合了电脑加速、系统清理、木马查杀、漏洞修复和软件管理功能。360安全卫士主要功能有电脑体检——对电脑进行详细的检查;查杀木马;修复漏洞;系统修复;电脑清理;优化加速;功能大全——提供几 ...

  • 百度卫士与360哪个好

    界面:百度卫士的界面采用类似Windows 8的设计风格:大图标、大标题字体,给人视觉上一种清新的感觉。视觉上也感觉愉悦。百度卫士托盘图标个人感觉印象不好。 360安全卫士的界面卫士界面统一设置为健康 ...

  • 2016年网页插画设计趋势

    说插画已经彻底接管了网页设计似乎有点过,但是技术发展和用户需求使得网页插画在世界范围内流行起来,一点都不为过.从全屏式页面当中的首页Banner图到视差滚动式页面中的微妙动画,你会发现插画在这些设计作 ...

  • 全世界传统行业——钢铁公司官网欣赏

    @AnyForWeb_UED:公司官网是直接面向用户的一个窗口,能在用户印象中发挥很大作用,对公司来说是一个重要的展示平台.好的网站自然能给用户一个好印象,甚至能帮公司增值. 很多传统行业目前正在面临 ...