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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
图标设计思路及风格
0.0°
2018-06-14 原创文章 设计趋势 举报 8592 19 27 0

图标设计思路及风格


在移动应用中,图标通常分为两种:一种是应用图标,也就是我们在手机主屏幕上看到的图标,或者是从 App Store 下载安装时看到的图标,点击它可以进入到移动应用中;还有一种是功能图标,它存在于移动应用界面中,起到表意功能、取代文字或者辅助文字的作用,例如搜索栏中的放大镜图标,即使不用文字信息表示,用户也能知道它代表搜索功能。


应用图标的设计流程:


1、寻找隐喻

先把设计的应用功能列出来,通过关键词进行头脑风暴,看看可以联想到哪些物品,拿公司的 “iLight Lite” 项目举例,这是一款智能灯 App,我会想到“台灯”“智能语音控制”“灯泡”“五彩灯”等。

Image title

2、抽象图形

“iLight Lite”主打灯效和语音控制两个功能,通过这两个功能我抽象出了灯泡和语音控制多个灯效的场景,组合成了一个新的图形,艺术来缘于生活,设计师在设计过程中可以从生活中提取原素材,这样会让用户倍感亲切。

Image title

3、竞品分析

App 图标的图形由于是符合大多数人心理隐哈的,因此又带来一个雷同现象,大量同类 App 的图标设计非常近似,灯泡是灯的典型代表,为了避免设计撞车,我们应该先去看看同行的设计是什么样子的,通过筛选分析,调整图形的设计细节,做到与同行有所区别。

Image title

4、确认风格

在确定了 App 的基准图形后,下一步就是确定标准色,我们可以根据 App 的类型选择合适的颜色,目前图标设计主流是扁平化风格,大部分 App 图标以单色图形为主,这样降低了设计的难度却增加了图形设计的难度,因为做出简单而受欢迎的图形是一件颇有难度的事情。设计好图标后最好将其放在同类别 App 图标中,去审视自己设计的图标是否能够抓住用户的眼球,如不够有吸引力或者区分度,可以考虑增加图标的层次感和质感。

Image title

5、调整细节

iLight Lite 设计了多个方案,在这就例举四个方案吧,在颜色上的调整2、3、4,图形上的调整1,整个图形偏竖长方形,由于应用图标是方形轮廓,缩小后显得细长比例不饱满,最后调整成方形这样整体图标都很和谐。单独的图形设计需要更多的设计考量,要经过大量的推敲,设计调整。

Image title


6、场景测试

一个图标设计完成后,由于手机会使用多个分辨率,因此还需要相应的系统规范适配多个分辨率的图标,图标的应用环境有很多种,手机的背景色也不相同,有深色有浅色,我们要想保证图标在各个场景下都有良好的识别性,就应该把图标在多种场景中进行测试。

Image title



通过图标的设计流程我总结出几点应用图标的设计原则:

1、图标应具有可识别性。

2、图标差异性。

3、延续产品界面。

4、突出品牌。

5、多场景测试。



图标的风格


总结市场上应用图标类型大概分类:Image title

iLight Lite 的应用图标是扁平化风格,增加了轻微质感和叠加效果。跟应用的多控功能很好的结合起来。


笼统来说,大体可以概括为拟物化风格扁平化风格


拟物化风格:拟物化设计是模拟现实物品的造型和质感,通过高光、纹理、材质、阴影等效果对现实物品进行适当程度地变形和夸张的描绘再现。拟物化要求设计师必须具备较高的绘画能力,在快节奏及互联网的进步下,现在拟物化风格已经没有以前那么火热了。


扁平化风格:简单来说扁平化设计就是抛弃高光、透视、纹理、渐变、阴影等能造成真实立体效果的元素,通过抽象、简化、符号化的设计元素来表现,这一风格能呈现给用户最直接和最简洁的内容,减少用户的视觉负担,使用户更加专注于内容本身。是目前的主流设计风格。扁平化图标设计在视觉表现上分为纯平面。微质感、长投影、轻折叠、有厚度和插画风,下面通过收藏图标来表现下这6种类型。

Image title

功能性图标

它的作用是替代文字或者辅助文字来指引用户快速导航,例如在导航栏左边指向左的箭头图标我们就知道它是返回。

功能图标从外观形状上划分,通常分为:面形图标、线形图标和扁平线形图标,根据实际需要绘制不同的风格类型。

Image title


iLight Lite 的功能型图标是线形图标,因为在衍生的相似应用时线形图标不会显得突兀,而且线形图标也能很清楚简洁的展示它的功能。



总结

不管是明确指向的图标还是抽象化的隐喻图标,它们在 App 中都有重大的意义,向用户传递某种信息,图标比文字更具有易识别性和美感及个性,有更有情感化,一组漂亮的图标能让应用变得更加精致。



更新:2018-06-14

收藏

19人已收藏

  • 93

    作品

  • 40

    粉丝

  • 19

    关注

  • 钉钉和飞书使用体验分享
  • 每周分享 07 期--- 唤醒词
  • 每周分享 06 期--- 消息推送
  • 每周分享 05 期--- 蓝牙

    猜你喜欢

      2018-06-14 原创文章 设计趋势 举报 8592 19 27 0

      图标设计思路及风格

      0.0°

      你确定要举报图标设计思路及风格

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年06月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      27
      19
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录