白癜风治疗最好的药 https://m-mip.39.net/disease/mipso_5629059.html

UI设计师必须掌握的设计规范有哪些？

没有规矩，不成方圆。UI设计也不例外，具有设计规范，系统建议的规范可以让我们设计具有统一性，界面视觉更美观。

想要高效顺畅地完成设计任务，就必须遵守UI设计的规范。

今天带来的这些规范，可是成为优秀UI设计师必须知道的“纯干货”，还能让大家深刻了解UI设计规范的本质是什么。

图标规范

很多设计师以为UI设计就是设计图标。虽然事实并非如此，但图标的设计在整个UI设计中是比较基础的一个环节。

图标与品牌标志一样，在设计时都需要做适当的减法，应该尽量用简约的线条去表达其含义，应该尽量避免出现线条结构过于复杂的设计。

而且整体的图标都需要保持风格一致，例如图标的线条粗细、边角弧度、图标高度宽度比例、风格等等。

特别是对于新人，所以大家一起来看看图标设计的规范吧：

1

像素对齐

需要严格的做到像素对齐，尤其是在做较小尺寸的图标时，如果不严格的遵循像素对齐，那最终的显示效果就会出现问题。

2

多用布尔运算

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

让你的图标更加规范

对图形结构理解更加深刻

后期更改形状更加方便

3

独特的风格

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

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

4

视觉大小统一

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

在如今的APP设计环境当中，一些APP设计大牛都一直强调，设计师要为有品牌意识。

那么，在图标的设计中，我们也必须强调“品牌性”，简单的说就是把品牌中的抽象的概念变成具象化的图形，把品牌主副色调应用到图标设计中。

同时建议大家每个星期完成一个主题的作品，提升自己的平面设计能力。

标注规范

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

标注主要是以下四种不同属性的内容：尺寸、文字、间距、颜色。

在进行标注时，首先去除导航栏和标签栏，因为这些控件通用性非常强，需要单独拿出来进行统一标注，这里我们只对内容区来进行标注示例。

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（popup弹出）

icon（图标）

selected（选中）

disabled（不可点击）

default（默认）

pressed（按下）

back（返回）

edit（编辑）

content（内容）

交互规范

以下几点交互常识：

简化操作：能一步完成的交互就不要分两步。

用户习惯：大部分用户都有固化思维，我们作为设计师应该尊重数据，尊重用户选择。

减少干扰：减少界面元素的不确定因素，方便用户快速找到自己想要的。

快速响应：加快用户读取的响应速度，能够避免从远程取数据的，就尽量避免。

界面友好：除了根据需求提供视觉解决方案以外，在设计的过程中适当地加入一些小细节使交互界面更加友好是设计师的职责所在。

图片处理规范

1

图片统一性

1）图片色调色温需统一，例如一个婴儿产品的首页，整体需要搭配暖色调的图片，这样看上去整体才比较统一舒服。

2）图片比例需统一，例如一个卖货的产品详情页，在同一屏的栏目中（页面）所出现的产品或者人物，比例就需要有一个统一的大小比例，这样看上去才比较统一舒服。

2

图片细节处理

1）图片精度不够（这里所说的精度不是说DPI分辨率需要哦，那是做高精度印刷输出时才需要的。

而在电脑及手机上的图片DPI分辨率为72即可，另外输出图片时需适当压缩一下图片的大小）、杂色太多可以使用PS内置的CR滤镜处理。

2）图片尺寸建议统一为偶数值，方便前端技术人员开发。

3）图片边缘避免与白色背景融合，可以在边缘位置加色。

4）为了配合标题字体，图片可以局部调亮或调暗。

动效规范

无论是现在经常看到的企业/品牌H5宣传页面、移动端启动页，还是曾经红极一时的首页动画，都需要用到动效效果。

会做点动效会给我们加分不少，尤其是做一些加载动画，这是我们经常会遇到的需求。

做动效时，我们需要注意以下几点：

1）不论你的动画有多好看、多吸引眼球，如果成本太高或者过于复杂都是无法落地的，所以我们要遵循简单实用的原则来进行设计，千万不要过度设计。

2）任何交互动作所导致的状态都需要考虑正常状态与异常状态。

拿加载动画来说，我们需要考虑加载成功的反馈与加载失败的反馈，并将之注明在输出规范中。

3）动效使用的工具：可以PS做一些动态表情，用AE做一些加载动画，页面之间的交互动效可以使用Flinto、Principle等。

如果你在学UI设计，连配色都不会怎么行？

请看如下：

用色要有理论支撑

配色的数量慢慢加

配色一定要和谐

颜色可以不用那么正

1.用色要有理论支撑

关于配色的基础理论，例如互补色呀、相邻色呀、对比色等等，再比如红色代表热情、蓝色代表科技、绿色代表健康等等，这些都是我们必须掌握的，如果不太不清楚的百度一下。我这里想和大家强调的是，在我们每次用色之前，一定要想想为什么要这么用，你的理论依据是什么？这是一个优秀设计师基本的思考习惯。

举个简单的例子，如果我们为一个品牌的视觉延展，品牌色是蓝色：

当我们需要去给这个品牌色搭配色彩的时候，我们可以从很多方面入手，例如品牌调性、目标人群等等。

假设我们的目标人群是：时尚、前卫的年轻人。那我们就可以大胆的使用对比色——红色：

用对比色的视觉冲击力来突出年轻、前卫的品牌调性，博得目标人群的喜爱。举这个简答的例子就是告诉大家，理论还是要看一看，让你的理论支撑你的执行，这样你就可以有足够的信心。

当然，至于配出来的颜色好不好看，那就是另外一个层面（执行力）的事了，我们后面再说！

2.配色数量慢慢加

上两天群里的一个朋友发了一张临摹的练习图，我想写配色的文章也是因为他的这张练习图：

这里，我再说下关于配色的问题，上个知识点，我已经强调过了理论的重要性，可以支撑我们的执行！

来，我们看看这个练习的原图：

他的用色是非常有研究的，一共有三种主要色相，绿色、红色、黄色，绿色与红色是互补色，红色与黄色是邻近色，三种不同深浅的绿色使画面变得丰富又不杂乱。

而我们看下练习稿：

这么一个小小的插图，竟然用了13种颜色，并且没有任何规律，从这个练习可以看出这位朋友的整个思维都是乱的，并不知道到底该怎么用色！

在这种情况下，千万不要贪心，可以先从两种主色开始搭配，例如，先用好邻近色，红色和黄色：

当真的能驾驭好之后，再来慢慢添加颜色的数量，例如加些点缀色——天空的蓝色、地面的灰色：

千万记住，练习配色不要急，先从少数量的颜色开始练起，慢慢增加！

3.配色一定要和谐如何让配色看着和谐？

我个人觉得有一个点很关键就是：饱和度、明度看起来要足够相似，要低饱和就所有的颜色都用低饱和，例如上面建筑的插图使用的都是低饱和的颜色：

假设这时候我们把背景的红换个高饱和度就会是下面这个样子：

根本没办法看！

不过让配色看着和谐，除了需要理论支撑以外，确实还是需要一定的色彩感觉，如果色感太差，那就多练吧（记住，颜色数量慢慢来哦），敏锐的色感也是可以慢慢培养的！

4.颜色可以不用那么正

对于我们配色新手来说，刚开始颜色不敢用太多，配色种类比较单一，这时候还想出彩的话，我们就可以让颜色不要那么正（比如正红、正蓝），尤其是拉渐变的时候，举个例子：

我们拉个蓝色的渐变，如果色相都是一样的，只是改变明度的变化，那就是左面这样的，但如果你用两种色相，让浅色的蓝不那么正，而是加入一点点绿，效果看起来就会丰满很多。

下图是我利用这个配色技法制作的一个小作品：

像这样两种色相之间的渐变，是常用的配色技法，大家可以多多尝试。UI设计师在移动应用产品设计、游戏软件、多媒体制作、广告设计、工业设计医疗、军事、科技、交通、通讯、商业流通领域都有广阔的发展空间，这是它吸引人的一个主要原因。当然UI设计师的薪资也比平面设计的普遍要高一些，更是吸引人加入这个队伍的重要要素。本文包括如何选择配色方案/适合上手的配色工具/如何利用色彩提高可读性/为色盲用户配色等多个小节。涵盖了大部分UI配色的知识点，同时附有大量实例，强烈推荐阅读。就重要性而言，在APP应用中色彩元素扮演的角色仅次于功能。人与计算机的互动主要基于与图形用户界面元素的交互，而色彩在该交互中起着关键作用。它可以帮助用户查看和理解APP内容，与正确的元素互动，并了解操作。每个APP都会有一套配色方案，并在主要区域使用其基础色彩。正因为有无数种色彩组合的可能，在设计一个新的APP时，人们往往很难决定一个效果好的配色方案。

下面我们将讨论在APP中与色彩相关的重要知识点，同时我们还将学习如何为你的APP选择色彩与对比度，来增强可用性。

如何选择有效的配色方案

在创建配色方案时，需要考虑很多因素，包括品牌色彩及色彩在你所在区域的特殊意义。

有多少色彩？

保持色彩组合简洁有助于改善用户体验。一个简洁的配色方案不会使人眼花缭乱，并且使你的内容更容易被理解。相反，在太多的地方有太多的色彩很容易搞砸设计。多伦多大学关于人们如何使用AdobeColorCC的研究显示大多数人更倾向于仅依赖2-3种色彩的简单色彩组合。

如何创建方案

那么，你如何选择这2-3种色彩？色环可以帮助我们

十二色环图是创建配色方案的重要工具。有许多预设的配色方案可以使配色更容易，特别是对于初学者来说。

单色配色

单色方案是最易于创建的配色方案，因为每种色彩取自相同的基色。

单色的色彩可以很好地结合在一起，产生和谐的效果。

单色是单一色系的搭配，它在色彩的深浅、明暗或饱和度上有所调整而形成明暗的层次关系。

单色方案是非常容易被视觉感受到的，特别是蓝色或绿色。

△正如你看到的，这个配色方案看起来干净简洁。

相近色

相近色的配色方案是选取相互不冲突的的相关色彩;一种色彩用作主色，而其它色彩用于丰富该方案。

△相近色配色方案是由在十二色环图中相邻的三种色彩创建的。这个方案相对容易使用，其诀窍是选择哪种颜色作为主调色来突出。

例如，Clear，一款手势操作任务管理APP，它使用相近的色彩，从视觉上区分任务的优先级。

△Clear中的默认配色方案让人联想到热点热图，其中较紧迫的项目以明亮的红色显示。

Calm，一款冥想APP，使用相近的色彩蓝绿色彩，帮助用户感到轻松和平和。

△Calm使用相近的色彩来塑造整体的氛围。

补色搭配

互补色是对立的色彩。

△互补色是色环上两个正对立的颜色。它们对比强烈，可以用来吸引观众的注意力。当使用互补色方案时，重要的是选择主色并且使用其互补色用于强调。

例如，当人眼看到一块不同色调的绿色物体时，一点红色就会很突出。

△使用互补色是让内容脱颖而出的最简单方法。但是你必须谨慎使用互补色，以防止你的内容在视觉上显得不和谐。

自定义配色方案

创建自己的配色方案不像许多人想象的那么复杂。最简单的方法就是将一个明亮的主色添加到一堆中性色中，这也是一个最能引起视觉冲击的方案。

△向灰度设计中添加一种色彩可以很轻易地吸引眼球。白底加灰色文本，点缀以蓝色高亮，就是Dropbox的配色方案。

AdobeColorCC让你的生活更简单

AdobeColorCC，以前称为Kuler，能让选择色彩变得非常容易。只需点击几下鼠标，调色板上的每种色彩都可以单独修改或选择为基础色彩。

△每种色彩下都支持导出代码（包括十六进制）。

△调色板可以保存并直接添加到库中。此外，社区提供了许多现成的配色方案。

对比度的应用通常用户界面上的色彩对象或区域是不会单独出现的，而是比邻或重叠在在另一个色彩对象或区域上，从形成对比效果。

对比能使一种色彩与另一种色彩想分离。正确使用它，可以缓解眼睛疲劳，并通过清晰划分屏幕上的元素来聚焦用户的注意力。

△高对比时色彩容易彼此分开，低对比则不易分开。

对比度和文本易读性设计师经常喜欢使用低对比以使事物看起来美观，和谐。然而，美观并不意味着有好的易读性。当你在文本中使用色彩时，你需要知道把两种对比不明显的颜色放在一起会导致你的内容难以阅读。

特别是在手机端，用户会经常处于户外或者光线较为充足的地方，这时用户会因为屏幕反光根本看不到内容。

△这行文本难以从其背景色彩中辨认出来。为了确保界面对比度处于一个合理的范围内，你只需要检查下对比度。对比度体现了一种色彩如何区别于另一种色彩（通常写为1：1或21：1）。比率中的两个数之间的差越大，色彩之间的相对亮度的差越大。W3C建议对正文和图像文本使用以下对比度：

较小的文本与背景的对比度最少要达到5：1

较大的文本(14pt粗体／18pt正常或以上)与背景的对比度要达到3：1以上。

这条建议也可以帮助低视力，色盲或视力恶化的用户看到并阅读屏幕上的文字。

△这行文本符合色彩对比度建议，从背景色彩中清晰可辨。

图标或其他关键元素也应使用上述推荐的对比度。

△左：图标不符合色彩对比度建议。右：图标遵循色彩对比度建议，从背景中清晰可辨。有几个免费工具可对你所选调色板的对比度提供有意义的反馈。

WebAIM’sColorContrastChecker是其中一个，它可以让你测试已经选择的色彩。

对比度和用户焦点除了建立易读的文本之外，对比度还可以引起用户对屏幕上的特定元素的注意。一般来说，高对比度是重要内容或关键元素的最佳选择。所以如果你想让用户看到或点击什么东西，可以使其与众不同！

举例来说，用户更可能点击与背景对比强烈的具有号召性的按钮。

△对比度使得红色区域看起来不同于屏幕的其他部分。

针对色盲用户群体的设计

你有没有想过你的APP使用人群中会有视力障碍者？

当人们谈论色盲时，他们通常指的是不能感知某些色彩。大约8％的男性和0.5％的女性患有不同程度的色盲。其中最常见的是红绿色盲。

△正常人和红绿色盲看到的相同色彩（黑色和绿色缺陷）因为色盲有多重表现形式，例如红绿色盲，蓝黄色盲和单色色盲。所以运用多样的视觉线索来连接你APP的重要状态是很重要的。绝不要仅仅依靠色彩来表示系统状态。相反，应使用元素（如笔画，指示符，图案，纹理或文本）来描述操作和内容。Avocode允许你可视化比较设计的修订版本。

此外，Photoshop有非常实用的工具来帮助模拟色盲。这个功能让设计师可以看到在色盲用户的眼中你的界面是什么样子的。

△AirbnbAPP登录页面

最后总结

提升色彩使用技能是一个不断努力和积累的过程。如果你想学习如何创建美观，使用的配色方案，需要的是实践、决心和大量用户测试。

希望以上分享的内容能对你有所帮助，觉得不错可以转发到