UI设计成长笔记 No.7

UI

本期目录

设计技巧


ONE / 设计技巧


1.1 图标绘制小技巧汇总版


1

目前主流的 icon 表现方式
1

2

功能图标
不可点击的展示图标 建议尺寸 24x24 px 32x32 px
可点击的按钮图标 常见尺寸48x48 px 64x64 px

3

画图标之前一定要选定参考线
1
通常我们把这个1024x1024 的图标缩放到48x48

4

构图不能太满,画面四周要有留白,一般情况下不要让设计图进入留白区域。其中红色区域就是要预留出来的部分,是留白范围,所以我们实际上要在里面的黑框绘画。
1

5

如果圆形和方形采用同样的尺寸,由于方形所占比例比较大,在视觉上方形会比圆形显得大。为了达到视觉上的平衡,需要缩小方形尺寸。
即圆形图标可贴辅助框边缘放置,方形图标略小于辅助框位置。
1

6

不规则图标需要对参考线进行调整,以方便大家确定图标范围。
斜角45度的图标绘制时,先在水平或纵向的矩形中绘制好图案,再旋转45度即可。
类似于 定位 剪刀 旋转后,有小部分进入留白区域,属于正常现象。
1

7

线的属性
线性图标线条宽度越小,可展示的细节越丰富,但随着细节的增加,图标的直观表现力则越弱。
tip:1px描边图标的圆弧位置会出现生硬的锯齿现象。
线性图标线条宽度越大,可展示的细节越小,但图标的直观表现力会提高,如果把面性图标看作线性图标的终极形态,拿在直观表现上,面形图标的直观表现力要优于线性图标。

8

国外设计师 Aubrey Johnson 通过25000 个图标识别试验表明 实心图标更符合大众审美,且识别速度更快。

9

线的属性主要包含厚度、对齐、端点、角点四个方面。

10

ps 和 sketch 关于描边线的控制项是一样的,但最终实现效果却有部分差异。
1
2
3
4

11

精致的要素
清晰
慎用对齐方式
图标尺寸

12

面 > 线
由于线的不稳定在绘制规则的非闭合图标,建议采用面来实现。

13

图标
一般线条为2px,也有加强版的3px。

14

各种图片格式对透明的支持程度以及浏览器兼容性见下表
1

15

矢量工具 和 像素对齐
对齐了像素的图形有着更清晰锐利的效果。

PS内的设置帮助我们对齐像素
我们可以在PS里通过一些设置方便地对齐像素,以CS6为例。
1.将网格线设置为以像素为单位的,方便我们随时查看是否对齐像素。顺便提一句,网格显示/隐藏的快捷键ctrl+’。
首选项 – 参考线、网格和切片 – 根据自己需要设置网格大小,单位选择像素。
2.使用矢量工具时,勾选对齐边缘,绘制的图形会自动对齐像素
选择矢量工具(钢笔、形状工具) – 顶部工具栏里找到对齐边缘 – 勾选
3.设置变换矢量图形时自动对齐像素。缩放、变换矢量图形时也可以自动对齐了,注意这个是CS6才有的功能。
首选项 – 常规 – 勾选将矢量工具变换与像素网格对齐

16

像素对齐并不是绝对的
个人观点:是否要像素对齐应该是根据想要的效果和图形复杂程度决定的。

17

从Ai复制到Ps怎样保留可编辑性
从Ai复制矢量图形到Ps时,应当选择粘贴为形状图层,这样就可以在Ps内继续编辑图形,用形状选择工具将锚点一一调整以对齐像素。

18

镜像工具

19

关键轮廓线

20

绘制的时候可以用网格来做

21

斜线的角度尽量选择 30度 45度 60度

22

所有的线条规则要保持一致
描边粗细
端点和边角是直角还是圆角
透视角度
尺寸保持一致

23

命名也需要定义规则
图标进行分类管理,便于索引。大致分为四类:方向性图标、提示建议性图标、通用图标、品牌标识。

源自:

UI中国 | 海边来的设计师
UI中国 | 海边来的设计师
威易网 | 百度MUX
知乎



1.2 12个超快速图标绘制

1
2
3
4
5
6
7
8
9
10
11
12

源自:

设计达人



想有更多交流欢迎添加本人微信:Cymaizi

1



comments powered by Disqus