提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
图标设计思路及风格
在移动应用中,图标通常分为两种:一种是应用图标,也就是我们在手机主屏幕上看到的图标,或者是从 App Store 下载安装时看到的图标,点击它可以进入到移动应用中;还有一种是功能图标,它存在于移动应用界面中,起到表意功能、取代文字或者辅助文字的作用,例如搜索栏中的放大镜图标,即使不用文字信息表示,用户也能知道它代表搜索功能。
应用图标的设计流程:
1、寻找隐喻
先把设计的应用功能列出来,通过关键词进行头脑风暴,看看可以联想到哪些物品,拿公司的 “iLight Lite” 项目举例,这是一款智能灯 App,我会想到“台灯”“智能语音控制”“灯泡”“五彩灯”等。
2、抽象图形
“iLight Lite”主打灯效和语音控制两个功能,通过这两个功能我抽象出了灯泡和语音控制多个灯效的场景,组合成了一个新的图形,艺术来缘于生活,设计师在设计过程中可以从生活中提取原素材,这样会让用户倍感亲切。
3、竞品分析
App 图标的图形由于是符合大多数人心理隐哈的,因此又带来一个雷同现象,大量同类 App 的图标设计非常近似,灯泡是灯的典型代表,为了避免设计撞车,我们应该先去看看同行的设计是什么样子的,通过筛选分析,调整图形的设计细节,做到与同行有所区别。
4、确认风格
在确定了 App 的基准图形后,下一步就是确定标准色,我们可以根据 App 的类型选择合适的颜色,目前图标设计主流是扁平化风格,大部分 App 图标以单色图形为主,这样降低了设计的难度却增加了图形设计的难度,因为做出简单而受欢迎的图形是一件颇有难度的事情。设计好图标后最好将其放在同类别 App 图标中,去审视自己设计的图标是否能够抓住用户的眼球,如不够有吸引力或者区分度,可以考虑增加图标的层次感和质感。
5、调整细节
iLight Lite 设计了多个方案,在这就例举四个方案吧,在颜色上的调整2、3、4,图形上的调整1,整个图形偏竖长方形,由于应用图标是方形轮廓,缩小后显得细长比例不饱满,最后调整成方形这样整体图标都很和谐。单独的图形设计需要更多的设计考量,要经过大量的推敲,设计调整。
6、场景测试
一个图标设计完成后,由于手机会使用多个分辨率,因此还需要相应的系统规范适配多个分辨率的图标,图标的应用环境有很多种,手机的背景色也不相同,有深色有浅色,我们要想保证图标在各个场景下都有良好的识别性,就应该把图标在多种场景中进行测试。
通过图标的设计流程我总结出几点应用图标的设计原则:
1、图标应具有可识别性。
2、图标差异性。
3、延续产品界面。
4、突出品牌。
5、多场景测试。
图标的风格
总结市场上应用图标类型大概分类:
iLight Lite 的应用图标是扁平化风格,增加了轻微质感和叠加效果。跟应用的多控功能很好的结合起来。
笼统来说,大体可以概括为拟物化风格和扁平化风格。
拟物化风格:拟物化设计是模拟现实物品的造型和质感,通过高光、纹理、材质、阴影等效果对现实物品进行适当程度地变形和夸张的描绘再现。拟物化要求设计师必须具备较高的绘画能力,在快节奏及互联网的进步下,现在拟物化风格已经没有以前那么火热了。
扁平化风格:简单来说扁平化设计就是抛弃高光、透视、纹理、渐变、阴影等能造成真实立体效果的元素,通过抽象、简化、符号化的设计元素来表现,这一风格能呈现给用户最直接和最简洁的内容,减少用户的视觉负担,使用户更加专注于内容本身。是目前的主流设计风格。扁平化图标设计在视觉表现上分为纯平面。微质感、长投影、轻折叠、有厚度和插画风,下面通过收藏图标来表现下这6种类型。
功能性图标
它的作用是替代文字或者辅助文字来指引用户快速导航,例如在导航栏左边指向左的箭头图标我们就知道它是返回。
功能图标从外观形状上划分,通常分为:面形图标、线形图标和扁平线形图标,根据实际需要绘制不同的风格类型。
iLight Lite 的功能型图标是线形图标,因为在衍生的相似应用时线形图标不会显得突兀,而且线形图标也能很清楚简洁的展示它的功能。
总结
不管是明确指向的图标还是抽象化的隐喻图标,它们在 App 中都有重大的意义,向用户传递某种信息,图标比文字更具有易识别性和美感及个性,有更有情感化,一组漂亮的图标能让应用变得更加精致。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册