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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
UI设计教程-如何设计风格统一的图标
0.0°
2019-03-21 好文转载 经验/观点 原作者: ps学习部落 举报 1896 1 3 0

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


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


一. 面形图标

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

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


1.正形

Image title


上图是面形图标的正形使用,要统一风格,要注意的是:

a. 面的面积

b.负形的面积

c. 线条的统一

d. 形的统一。可以从形的形状,圆角进行统一

Image title


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

2.反白

Image title


上图是面形图标的反白使用,反白使用时,除了正形图标的3个注意点,还需注意图标和背板的尺寸比例,比例并没有严格的规定,但是建议用0.618黄金比例。

注意点如下:

a. 面的面积

b. 负形的面积

c. 线条的统一

d. 形的构成统一。比如:圆角统一

e. 背板和图标的比例

二.线形图标

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

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

正形

Image title


上图中线形图标,要统一风格,有以下几点:

a. 线的形状

b. 闭合区域的大小

c. 线的粗细

d. 线的断点

Image title


三.扁平描线图标

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

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

Image title


a. 线的形状

b.线的粗细

c. 线的断点

d. 填色区域的大小,颜色

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

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

Image title


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



更新:2019-03-21

收藏

1人已收藏

  • 6

    作品

  • 0

    粉丝

  • 0

    关注

  • 教程·手绘(UI设计) | 手机图标UI设计手绘方法
  • 插画在UI设计中火起来的10个理由
  • UI设计教程系列一:UI设计是做什么的
  • 超实用新手教程!零基础如何自学UI设计?
相关标签
ui经验分享

    猜你喜欢

      2019-03-21 好文转载 经验/观点 原作者: ps学习部落 举报 1896 1 3 0

      UI设计教程-如何设计风格统一的图标

      0.0°

      你确定要举报UI设计教程-如何设计风格统一的图标

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2019年03月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      1
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录