相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

APP图标设计规范介绍

笔画发布于:2016-1-8 11:16 |原作者: 李洋|
笔画
山西省 太原市 
发私信 + 关注
简介: 产品图标网格已经形成了一致的标准,且建立了一套明确的图形元素定位规则。这种标准化带来了灵活,而连贯的系统。以上已经是全尺寸比例高宽网格图可以右击另存作为参考图使用网格关键线的形状关键线的形状是网格的基 ...

版权申明:本文原创作者李洋,感谢李洋的原创经验分享!

产品图标网格已经形成了一致的标准,且建立了一套明确的图形元素定位规则。这种标准化带来了灵活,而连贯的系统。

8cbc568e12136ac725bb5c9cb0ed.jpg

以上已经是全尺寸比例高宽网格图可以右击另存作为参考图使用

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/

网格

7714568e124532f8754c80c4cb1d.jpg

关键线的形状

关键线的形状是网格的基础。利用这些核心形状做为向导,即可使整个相关产品的图标保持一致的视觉比例。

ee59568e126132f8754c8029e81d.jpg

方形

高&宽: 152

00ce568e12f232f8754c80caab55.jpg

圆形

直径: 176

1f44568e134d6ac725bb5ce589e7.jpg

竖直矩形

高:176 宽:128

9185568e13b032f8754c8033a009.jpg

水平矩形

高:128 宽:176

DP 单位网格

设备上的启动器以 48dp 的尺寸显示产品图标 (边缘 1dp),所以当你创建图标时,请使用 48dp 的尺寸,必要时可将其放大 400% 到 192 x 192 dp (边缘变位 4dp)。

保持这样的放缩比即可在尺寸在缩小时保持边缘的锋利和对齐的正确性。

04f6568e13e66ac725bb5c344945.jpg

1:1 单元网格

2673568e141432f8754c80d01d94.jpg

4:1 单元网格

几何

我们为这几种特定的关键线制定了预设规则:圆形线、方形线、矩形线、正交线和对角线。这个通用且简洁的元素调板形成的目的是统一产品图标和规范它们在网格上的布置。

 c397568e12af6ac725bb5c2a1f6c.jpg


为什么要这样设计?以上右图著名的视觉错觉案例可以例证:

一样长的线段不同的视觉表现产生不一样的视觉感知,矩形的视觉感知面积相对大,所以相对网格线居中定格最小部分来设计来达到各种其他形状样式的图标统一感。

1234下一页
10

好评
8

差评

刚表态过的朋友 (18 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • Azeal

  • 任小陌

笔画
山西省 太原市 
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计