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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
移动端基础组件|图标 icon
2.1°
2022-11-14 | 原创文章 / 经验/观点 / | 举报 | 396 2 1 0

什么是icon?


什么是icon

icon翻译为图标,是信息的图像表达方式。在设计页面的时候使用icon有很多优点,icon可以将某个功能进行直观的视觉表达,减少用户的认知成本。在早期的实验中,人们发现大脑处理图片的速度比处理文字的快60000倍。早期的icon都是拟物风格,用户很容易将这些图标和生活用品一一对应,具有强识别性。

icon的应用场景

在app上图标的应用无处不在,常见的应用场景有三大类,分别是:应用图标  、 功能性图标、装饰性图标。

图片

icon的设计风格

扁平风格(面性、线性、渐变风格)、2.5D风格、3D风格、拟物、轻拟物。

图片

如何搭建icon的设计规范

 当一个项目中有很多地方都需要用到图标时,就需要制定一个图标的设计规范。图标规范要包含几点:

  • 1.视觉统一性,即端点一致、角度一致、描边一致(描边不要使用居中描边)
  • 2.对齐像素点,尽量避免小数点
  • 3.能准确传达信息
  • 4.与品牌的基调一致


icon栅格如何绘制

在网上重新看了一遍关于iOS栅格绘制的方法,发现根号2、三分法和黄金分割的计算还是没有看明白,还是用一些技巧,使用以前网易设计师推荐的栅格画法。假设现在要画一个30pt的图标,那么30pt是这个图标的点击范围,在中间画一个24pt的矩形作为这个图标的视觉范围。那么,如果提取一个缩进值,缩进值=icon视觉区域*10%。

注意:所禁止取整数、偶数,举例如果是4.4就取4,取最近的一个值

正方形:视觉区域减去缩进值就得到了正方形icon的尺寸

横向长方形:宽度为视觉区域的最大值,高度=视觉区域-2*缩进值

纵向长方形:高度为视觉区域最大值,宽度=视觉区域-2倍缩进值

圆形:视觉区域就是圆形尺寸哪怕依旧做好了栅格规范,在绘制图标的时候也要适当关掉栅格,用肉眼对比一下图标整体的大小,尤其在在绘制异形图标的时候,物体对齐并不意味着是视觉对齐,这时就需要根据实际的情况进行调整。

图片

如何交付?

可以通过图片格式或svg格式交付,如果是svg格式交付需要注意的是:

1.svg不支持颜色填充

2.保留点击区域的位置,点击区域为一个透明矩形

3.svg格式要将描边转化为闭合图像,在Ai中这一步叫做转曲


分享结束,希望以后能在项目中有意义地使用icon~



Powered by Froala Editor

创建于:2022-11-14

收藏

2人已收藏

ArtMonologue

一个普通的设计师

  • 4

    作品

  • 0

    粉丝

  • 4

    关注

  • 移动端的那些导航组件(二)
  • 移动端的那些导航组件(一)
  • 移动端基础组件|按钮 Button
相关标签
经验ui设计

    猜你喜欢

      2022-11-14 | 原创文章 / 经验/观点 / | 举报 | 396 2 1 0

      移动端基础组件|图标 icon

      2.1°

      你确定要举报移动端基础组件|图标 icon

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2022年11月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      2
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录