如何快速成为优秀的UI设计师

 

2)      多用布尔运算

 

在做图标的时候，能用基本图形进行布尔运算的时候，尽量不要使用钢笔，这样做的好处有如下几点：

· 让你的图标更加规范

· 对图形结构理解更加深刻

· 后期更改形状更加方便

 

3)      独特的风格

 

在做系列图标的时候，一定要在前期给图标设定一个风格及原则，使之看起来与众不同。

在这里值得一提就是，我们在做线性图标时，一定要保证描边粗细相同、圆角相同，如果这些基础的规则都没有遵循，那也就谈不上风格的统一、创新了。

 

4)      视觉大小统一

 

在进行图标设计的时候，我们会使用栅格辅助线来帮助我们更加严格谨慎，但一定不要被辅助线困住，学会灵活运用，保持视觉上的大小统一。

 

我在《优秀平面设计师养成记》中一直强调，设计师要为有品牌意识。那么，在图标的设计中，我们也必须强调“品牌性”，简单的说就是把品牌中的抽象的概念变成具象化的图形，把品牌主副色调应用到图标设计中。大家可以参加我在“种梦”订阅号举办的《种梦人每周一练》活动，每个星期完成一个主题的作品，提升自己的平面设计能力。

 

【标注】

 

如何把标注的思路整理清晰——结构化思维进行拆解，将大问题拆解成小问题，逐一击破！

 

标注主要是以下四种不同属性的内容：尺寸、文字、间距、颜色。在进行标注时， 首先去除导航栏和标签栏，因为这些控件通用性非常强，需要单独拿出来进行统一标注，这里我们只对内容区来进行标注示例。更多精彩内容请关注我的订阅号：种梦。

 

1)      尺寸

 

我们要将页面上有所需要告知尺寸的内容进行标注，例如图标、图片、头像等等。 关于尺寸维度的标注我们需要注意的是：

 

· 有圆角的地方，需要将圆角半径标出。

· 对于一些控件，如button、列表，一定要随时问自己有没有特殊状态，如按压状态、无效状态、选中状态等等，如果你不标明，开会就会默认没有这些效果。

· 一般情况下，图片的尺寸是需要告诉比例的，而不是固定的大小，这样开发才能更好的适配，常用的图片比例有4：3、16：9等。

· 很多没有经验的设计师不理解适配的原理，所以很容易将一些控件给出固定的尺寸大小，如果你将这个按钮的宽度和高度都标注出来，开发就会将这个按钮的大小写死，一旦遇到屏幕（白色区域）较宽的时候，按钮还是固定大小，就会影响视觉效果。所以正确的标注方法是给出按钮两边的间距，让整个按钮的宽度自适应（当然高度还是要固定的）,这样不论遇到哪种分辨率的尺寸，都能够保持相同的视觉效果，扩展性极强。

 

2)      文字

 

文字，需要标注文字的大小、字体、颜色、透明度、行高等等，当然也可以和开发进行沟通，对一些内容进行删减。 关于文字的标注需要注意的事项：文字有一个很特殊的属性，就在某些场景下，文字是动态的，所以这个时候，就需要将极限情况考虑清楚。

 

表面上我们将标题文字的大小、颜色这些内容标注清楚就可以了，但是如果标题文字过多的时候该怎么处理呢？所以必须要给出一个极限情况的规范，比如最多显示多少个字符，字符超过极限值就用打点的方式处理。

 

3)      间距

 

有人可能会觉得间距和尺寸有些相似，但其实它们有着很大的不同，我们可以这样理解：尺寸是形容容器的大小，而间距是形容容器之间的距离。间距相对比较简单，只要标注清晰就不会有太大问题。

 

4)      颜色

 

需要标注颜色的内容有分割线颜色、背景色、按钮颜色等等。关于颜色的标注需要注意的事项： 切记文字的颜色已经归类到文字属性里面，不用重复标注，思路一定要保持清晰。

 

【命名】

 

很多UI设计师对于“命名”是没什么概念的，他们都是随随便便地用一些没有特定意思的字母去给页面命名，我觉得这是不好的。因为我觉得，统一的、规范的命名对我们自己的文件整理有很大的帮助，后期修改文件、图层的时候更加方便快捷，而且规范的命名也显得我们自身比较专业。而且，如果如果命名不统一，团队之间的成员很难达成共识，任务交接时需要很大的学习成本。

 

而更重要的是，有规范的命名可以极大的节省程序开发的时间成本，减少很多不必要的沟通与重复切图的概率，程序员完全可以直接使用的我们切片而不更改切片的名称，后期我们更换切图，只要切片名称不变，开发看都不用看直接替换就可以了。

 

1)      所有命名全部为小写英文字母

 

在程序员的代码里只有小写的英文字母，如果你给出的命名全是中文的，那么他们是一定会更改的，所以命名全部用小写的英文字母是最基本的规则。有些人会觉得写这么多英文太麻烦，但其实为了自己专业能力的提高，这种规范的命名方式是必须要经历的过程，当你习惯了这样的命名方式后，你的成就感会油然而生。

 

2)      命名格式

 

一个大型项目会分很多模块，每个模块由不同的设计师来独立完成，还有人会专门管理公共的组件，如tabbar、navbar等等，这种情况下就会分为两种切图，一种是通用类型的切图，还有一种就是各个模块特有的切图。

 

通用切片命名格式：

组件_类别_功能_状态@2x.png

举例：tabbar_icon_home_default@2x.png（对应中文：标签栏_图标_主页_默认@2x.png）

模块特有切图命名规则：

模块_类别_功能_状态@2x.png

举例：mail_icon_search_pressed@2x.png（对应的中文为：邮件_图标_搜索_ 默认@2x.png）

我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称。（要注意，命名中不能含有空格）

 

3)      常用英文单词表

 

如果所有命名都写为全称，名字就会特别长，所以我们可以将一些常用的英文单词进行缩写，减少工作成本与开发代码资源。至于怎么缩写，只要整个团队能够达成共识并且输出一份缩写清单，任何缩写规则都是可以的。

 

下面提供一些命名时常用的英文单词列表：

bg（backgrond 背景）

nav（navbar 导航栏）

tab（tabbar 标签栏）

btn（button 按钮）

img（image 图片）

del（delete 删除）

msg（message 提示信息）

pop（pop up 弹出）

icon（图标）

 2/3   首页 上一页 1 2 3 下一页 尾页