快捷搜索:  汽车  科技

安卓图标边框:全面解析 助力设计出更优质的应用图标

安卓图标边框:全面解析 助力设计出更优质的应用图标确定了大致的设计方向,就去找同行业、同类型或相似的应用图标分析其形状、配色、组合类型等,取长补短,这也是避免同质化非常重要的一个环节,帮助自己在后续设计出具备差异化的应用图标做铺垫。通过产品属性、功能或特点进行思维发散,例如:夏天,我们会想到空调、海滩、冰淇淋、比基尼、裙子(女性)、夜空等一系列相关联的事和物,搜集起来并做好整理归类,确定大致的设计方向。在保证识别度清晰的前提下,将两个或以上的元素相互重叠、交叉在一起,能形成前后左右的层级关系,制造空间感,同时也能将多个图形关联在一起,避免图标元素零散或单调,让整体性更强,丰富用户视觉感知。正负形也是常见的表现手法之一,利用正图为底,通过减去底层挖空的方式突出(错觉)负形,将产品特征、属性及服务多途径的传达给用户,可谓是“一石二鸟”。正负形图标能将信息传播最大化,且设计感十足,好的正负形图标能给用户形成独特的记忆点,但设计时需要注意正、负衔

3. 分割

将应用图标中的主体图形分割,赋予不同的颜色、样式等,明确层级划分,可提升图标的美感。例如:将色块分割成不同的比例、形状,就能组合成一个完整的熊猫图形(百度搜“熊猫剪影”图片)。

如果适合使用0.168黄金比例分割就再好不过了,这是被公认为最具美感的比例。

安卓图标边框:全面解析 助力设计出更优质的应用图标(1)

4. 重复

将相同或相近的图形以某种规律连续性的排列,相比单调的图形,会更加饱满。重复性的表现手法以大小、色彩、位置、形状等作为出发点进行有序的排列,最终形成一种规律、整齐的节奏和艺术感。

需要注意的是基础图形不能过于复杂,一定是有规律的重复,否则会让图形变的混乱,无法形成整体。

安卓图标边框:全面解析 助力设计出更优质的应用图标(2)

5. 重叠

在保证识别度清晰的前提下,将两个或以上的元素相互重叠、交叉在一起,能形成前后左右的层级关系,制造空间感,同时也能将多个图形关联在一起,避免图标元素零散或单调,让整体性更强,丰富用户视觉感知。

安卓图标边框:全面解析 助力设计出更优质的应用图标(3)

6. 正负形

正负形也是常见的表现手法之一,利用正图为底,通过减去底层挖空的方式突出(错觉)负形,将产品特征、属性及服务多途径的传达给用户,可谓是“一石二鸟”。

正负形图标能将信息传播最大化,且设计感十足,好的正负形图标能给用户形成独特的记忆点,但设计时需要注意正、负衔接的顺畅度,否则无法清晰的传播信息。

安卓图标边框:全面解析 助力设计出更优质的应用图标(4)

六、应用图标设计流程

1. 发散思维、寻找隐喻

通过产品属性、功能或特点进行思维发散,例如:夏天,我们会想到空调、海滩、冰淇淋、比基尼、裙子(女性)、夜空等一系列相关联的事和物,搜集起来并做好整理归类,确定大致的设计方向。

2. 分析竞品、避免同质化

确定了大致的设计方向,就去找同行业、同类型或相似的应用图标分析其形状、配色、组合类型等,取长补短,这也是避免同质化非常重要的一个环节,帮助自己在后续设计出具备差异化的应用图标做铺垫。

3. 提取关键词

可以从产品名称或功能属性方面找出产品最想传达的核心信息,并提炼出关键词。切记,关键词不可脱离带水、表意不明确,一定要够精炼、能表达出核心内容。关键词在精不在多,如果太多,需要通过层层递进,筛选出“一主三辅”,要知道这关系着后续应用图标传达信息的精准度。

4. 图标绘制

将上一步得到的关键词转化成抽象图形,进行视觉化提炼,这时应用图标的雏形已经形成,再结合前面所提到的图形分类、表现手法以及注意事项等,进入图标绘制流程。关于图标设计规范及原则,在之前的《图标篇 | 图标设计必备的基础知识!》文章中有详细说明,这里不做阐述。

5. 细节处理

基本图形绘制完成后,通过添加点缀、辅助图形、背景处理等方式丰富图标细节,进行精细化处理,使其更精致,具备高识别度及品质感。

6. 适用性测试

分别通过移动端应用商店列表、应用详情、设置中应用列表、桌面以及WEB商店等,对不同位置的大小、不同的桌面背景进行虚拟测试,以确保在不同场景中都能被用户高度识别,如果这些问题等着被用户发现,很可能给产品带来不利的影响。

7. 输出切图

需要对iOS和Android系统各输出一套图标,iOS只需一个1024px的切图便能适配所有,且无需设定圆角。Android则需要多套切图规范,如512px、198px、144px、96px、72px、48px,圆角半径以512px为基准设定为90px(参考值)。

这些固定的尺寸规范并不在技术能力范畴,如果实在不清楚,需要用时就“百度一下”一大把,或直接找开发人员拿尺寸都不是难事。

安卓图标边框:全面解析 助力设计出更优质的应用图标(5)

猜您喜欢: