恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
APP图标设计流程及方法(上)
0.0°
2016-09-17 原创文章 教程 举报 14517 96 118 2

用户通过点击图标来启动应用

APP图标,就是放置在主屏幕上的应用图标,用户通过点击图标来启动应用,下图即为iPhone内置的应用图标,应用图标类似于平面设计中的品牌logo,是整个应用品牌的重要组成部分。用户在看到图标的时候便建立起对应用的第一印象,并以此来判断应用的品质、作用及可靠性,所以应用需要一个漂亮的,具有吸引力的图标,这样用户才能将其留在主屏幕上。

应用图标应具备以下六个特点,以保证手机界面图标排列统一有序,又不失观赏性。

Image title

(一)流程篇


一、寻找隐喻


我们可以把要设计的应用的功能点罗列出来,然后通过关键词进行头脑风暴,看看可以联想到哪些物品,如“休息”这个关键词,可以想到下面的图形


Image title


如联想到了沙发和床,因为他们都有休息的功能,这种真实世界与虚拟世界之间的映射关系叫做隐喻,每一个工作和学习的环境都不一样的,导致对于某个词的隐喻理解也有所不同。如经常喝咖啡的人,认为工作忙碌,来一杯香醇的咖啡就是休息。

当然应用是为大多数人制作的,所以要挑选最被大多数人接受的事物来抽象图形。除非你的应用是为某个群体设计的个性应用。


二、抽象图形


“谁叫我起床”是一款真人语音社交闹钟应用,这个应用主打两个功能点,分别是闹钟和真人语音,通过两个功能点,我们直接抽象了闹钟图形和语言图形,组合成了新的图形,这个图形具有独特性。抽象图形要求设计师利用各种信息进行分类归纳,形成明确的目的。设计师在设计的过程中,可以从生活里提取原素材,这样会让用户倍感亲切。

Image title


图形的抽象必须控制,图形太复杂或者太简单,识别度都会降低,如下图。当人物形象过于写实,甚至接近照片时,就会显的非常复杂且太过具象。当人物形象过于简单,甚至只能看到圆形轮廓的时候,就已经看不出什么了,太过抽象。太过具象和太过抽象的图形识别性都非常低。总而言之,应用设计成果不仅是一件纯粹的艺术品,而且还是一件满足物质需要的功能性产品,他的艺术形象一般依赖于产品的外形而不是产品的全部特征,因此在图形抽象设计过程中要符合产品的设计规律,考虑适合多重客观条件。

Image title

三、竞品分析


APP图标的图形由于是符合大多数人心理隐喻的,因此又带来了一个雷同现象,大量同类APP的图标设计非常相近。下图是几款常用的通信类应用,绝大多数都使用了气泡图形,如微信、易信、陌陌、和米聊等。显而易见的是,气泡代表了言语的传达。一个APP图标首先要保证有其独特性。现在每天都诞生大量的应用,为了避免设计撞车,我们应该先去看看同行的设计是什么样的,通过筛选分析,调整图形的设计细节,做到与同行有所区别。

Image title

四、确定风格


在确定了APP的基准图形后,下一步就是确定标准色。我们可以根据APP的类型选择合适的颜色。当然,当你不知道使用什么颜色的时候,蓝色是最稳妥的选择。目前图标设计主流是扁平化风格,如下图所示,大部分APP图标以单色图形为主,从技法上来说,这样降低了设计的难度,但却增加了图形设计的难度。因为做出一款简单简单且受欢迎的图形是一件颇有难度的事情。

Image title

我们在APP  store里面搜索教育培训类应用会发现很多相似的图标,上图。这里面哪些图标会吸引用户的眼球呢?我们会发现,那些有设计层次感,和特定质感的精致图标会吸引用户注意。所以设计好图标后,将其放在同类APP图表中,是绅士自己设计的图标是否能够抓住用户的眼球。(如果扁平化的风格不能有足够的吸引力,或者区分度,可以考虑增加图标的层次感和质感


五、调整细节


在扁平化风格盛行的今天,单独的图形设计需要更多的设计考量,需要经过大量的推敲,设计调整。


六、场景测试


一个图标设计完成后,由于手机会使用多个分辨率,因此还需要相应的系统规范适配多个分辨率的图标。

图标的应用环境有很多种,有的在APP srore上使用,有的在手机上使用。手机的背景色也各不相同,有深色系的,也有浅色系的。我们要保证图标在各个场景下都有良好的识别性,因此在图标上线前,设计师需要在多种图标的应用场景中进行测试。


(二)方法篇(提纲)


一、正负形组合

二、折叠图形

三、局部提取

四、线性图标

五、透明渐变

六、色块拼接

七、图形复用

八、背景组合


方法篇部分,下篇文章详细讲解。

                                                  有收获记得点赞+关注

                                                                 V

更新:2016-09-17

收藏

96人已收藏

轩辕_君

资深UI设计师

  • 23

    作品

  • 287

    粉丝

  • 16

    关注

  • 字体习作
  • APP-我的
  • 时间~君
  • Weather(附PSD)

    猜你喜欢

      2016-09-17 原创文章 教程 举报 14517 96 118 2

      APP图标设计流程及方法(上)

      0.0°

      你确定要举报APP图标设计流程及方法(上)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年08月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      118
      96
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录