UI设计师必须掌握哪些设计规范？
没有规则，没有标准。 UI设计也不例外。 它有设计规范。 系统推荐的规格可以让我们的设计统一，让界面在视觉上更加美观。
想要高效、顺利的完成设计任务，就必须遵守UI设计的规范。
今天带来的规范是成为一名优秀的UI设计师必须知道的“纯粹的东西”，也可以让大家深刻理解UI设计规范的本质。
图标规格
很多设计师认为UI设计就是设计图标。 虽然事实并非如此，但图标设计是整个UI设计中比较基础的一个环节。
图标和品牌标志一样，在设计时需要适当删减。 应使用简单的线条来表达其含义，避免线条结构过于复杂的设计。
而且，整体图标需要保持一致的风格，比如图标的线条粗细、边角曲率、图标高宽比、风格等。
特别是对于新手来说，我们先来看看图标设计的规范：
像素对齐
需要严格实现像素对齐，尤其是在制作较小尺寸的图标时。 如果不严格遵循像素对齐，最终的显示效果就会出现问题。
使用布尔运算
制作图标时，能用基本图形进行布尔运算的时候尽量不要使用笔。 这样做的好处如下：
独特的风格
在制作一系列图标的时候，一定要在前期给图标设定一个风格和原则，让它看起来独一无二。
这里值得一提的是，我们在制作线性图标时，一定要保证笔画粗细一致，圆角一致。 如果不遵循这些基本规则，就没有风格上的统一和创新。
视觉尺寸均匀性
在设计图标时，我们会使用网格辅助线来帮助我们更加严格和谨慎，但我们一定不要被辅助线所困，学会灵活使用它们，保持视觉尺寸的统一。
在当今的APP设计环境下，一些APP设计专家一直强调设计师必须具备品牌意识。
那么，在图标的设计中，我们还必须强调“品牌化”，简单来说就是将品牌中的抽象概念转化为具体的图形，将品牌的主次色运用到图标设计中。
同时建议大家每周完成一个主题作品，以提高自己的平面设计能力。
标签规格
如何整理和理清注释的思路——用结构化思维，把大问题拆成小问题，一一解决！
注释主要是以下四种不同属性的内容：大小、文本、间距和颜色。
注释的时候游戏ui切图命名规范，先把导航栏和标签栏去掉，因为这些控件用途很广，需要单独拿出来统一注释。 这里我们仅以注释内容区域为例。
尺寸
我们需要标注页面上需要告知尺寸的内容，比如图标、图片、头像等。标注尺寸时需要注意的是：
有圆角的地方，需要标注圆角的半径。
对于一些控件，比如按钮、列表，一定要随时问自己是否有特殊状态，比如按下状态、无效状态、选中状态等，如果不注明，会议就不会出现这些默认效果。
一般情况下，图片的大小需要按比例告诉，而不是一个固定的大小，这样开发才能更好的适应。 常用的画面比例有4:3、16:9等。
很多没有经验的设计者不明白适配的原理，所以很容易给一些控件一个固定的尺寸。 如果标记按钮的宽度和高度。
开发人员会将按钮大写。 一旦屏幕（白色区域）变宽，按钮仍然是固定大小，这会影响视觉效果。
因此，正确的标注方法是给按钮两侧留出间距，让整个按钮的宽度自适应（当然高度必须固定），这样无论遇到什么分辨率大小，视觉效果都一样效果和可扩展性都可以保持极强。
单词
对于文字来说，需要标注文字的大小、字体、颜色、透明度、行高等。 当然，你也可以和开发沟通删除一些内容。
文本标注需要注意的事项： 文本有一个非常特殊的属性。 在某些场景下，文本是动态的，所以这个时候，你需要考虑清楚极端的情况。
表面上我们可以清楚地标注出标题文字的大小和颜色，但是如果标题文字太多怎么办？
因此，有必要对限制情况给出规范，例如最多显示的字符数。 如果字符超过限制，将按点进行处理。
间距
有些人可能认为间距和大小有些相似，但实际上它们有很大不同。 我们可以这样理解：size描述了容器的大小，而spacing描述了容器之间的距离。 间距比较简单，只要标记清晰就不会有太大问题。
颜色
需要着色的内容包括分割线颜色、背景颜色、按钮颜色等。 颜色标注注意事项： 请记住，文本的颜色已经分类到文本属性中。 无需重复注释。 这个想法必须保持清晰。
命名约定
很多UI设计师都没有“命名”的概念。 他们随意地用没有特定含义的字母来命名页面。 不是很好。
因为统一规范的命名对于我们自己的文件组织有很大的帮助，以后修改文件和图层更加方便快捷，规范的命名也让我们更加专业。
而且，如果命名不统一，团队成员很难达成共识，交接任务时需要很大的学习成本。
更重要的是，标准化的命名可以大大节省程序开发的时间和成本，减少很多不必要的沟通和重复绘图的概率。
程序员可以直接使用我们的切片，无需更改切片的名称。 稍后我们更改切片图像。 只要切片名称不变，开发者无需查看就可以直接替换。
所有名称均为小写英文字母
程序员的代码中只有小写英文字母。 如果你给的名字都是中文的，那么他们肯定会改变它们，所以最基本的规则是名字中全部使用小写英文字母。
有些人可能觉得写这么多英文太麻烦，但实际上，为了提高自己的专业能力，这种标准化的命名方式是必须要经历的过程。 当你习惯了这种命名方式时，你的成就感就会自然而然地油然而生。 出生。
命名格式
一个大的项目会被分成很多模块，每个模块又会由不同的设计师独立完成。 也会有人专门管理常用的组件，比如tabbar、navbar等，这种情况下会分为两种切入：一。 一种是常见类型的切割图，另一种是各个模块特有的切割图。
常见切片命名格式：
component_category_function_status@2x.png
示例：tabbar_icon_home_default@2x.png（对应中文：tabbar_icon_home_default@2x.png）
模块特定图命名规则：
module_category_function_status@2x.png
示例：mail_icon_search_pressed@2x.png（对应中文为：mail_icon_search_default@2x.png）
我们的原则是明确表达切片的具体内容，不出现重复的名称。 （注意名称不能包含空格）
常用英语单词
如果所有名字都写成全名，名字就会很长，所以我们可以缩写一些常用的英文单词，以减少工作成本和开发代码资源。
至于如何缩写，任何缩写规则都可以接受，只要整个团队能够达成共识并输出缩写列表即可。
以下列出了一些命名时常用的英文单词：
bg（背景背景）
nav（navbar导航栏）
tab（标签栏标签栏）
btn（按钮按钮）
img（图像图片）
del（删除删除）
msg（消息提示信息）
pop（弹出）
图标
已选择
已禁用（不可点击）
默认（默认）
按下
返回（返回）
编辑
内容
交互规范
以下关于交互的常识：
简化操作：一步即可完成的交互，不要采用两步。
用户习惯：大多数用户都有固定的思维。 作为设计师，我们应该尊重数据和用户的选择。
减少干扰：减少界面元素中的不确定因素，让用户更容易快速找到自己想要的内容。
快速响应：加快用户读取的响应速度，尽可能避免从远程位置取数据。
友好的界面：除了根据需要提供视觉解决方案外，设计师有责任在设计过程中适当添加一些小细节，使交互界面更加友好。
图像处理规格
图片统一
1）画面的色调、色温需要统一。 例如，婴儿用品的首页需要搭配暖色调的图片，这样整体看起来更加统一舒适。
2）图片比例需要统一。 例如，在销售商品的商品详情页上，同屏的栏目（页面）中出现的商品或人物需要有统一的尺寸比例，这样看起来更加统一、舒适。
图像细节处理
1）图像精度不够（这里所说的精度并不是指高精度打印输出所需的DPI分辨率需要为300。
电脑和手机上图片的DPI分辨率为72。另外，输出图片时需要适当压缩图片大小）。 如果噪声太大，可以使用PS内置的CR滤波器。
2）建议图片大小统一为均匀值，方便前端技术人员开发。
3）避免图片边缘与白色背景混合，给边缘添加颜色。
4）为了配合标题字体，可以将图片部分调亮或调暗。
动画规格
无论是企业/品牌H5宣传页面、移动启动页面，还是我们现在经常看到的一度红极一时的首页动画，都需要用到动效。
能够做一些动画会给我们很多加分，尤其是做一些加载动画，这是我们经常遇到的需求。
在做动效时，我们需要注意以下几点：
1）无论你的动画多么漂亮、多么引人注目，如果成本太高或太复杂，它就无法实现。 因此3D交通工具，我们必须遵循简单实用的原则来设计，切勿过度设计。
2）任何交互引起的状态都需要考虑正常状态和异常状态。
以加载动画为例，我们需要考虑加载成功的反馈和加载失败的反馈，并在输出规范中注明。
3）动态效果使用的工具：可以使用PS制作一些动态表情，使用AE制作一些加载动画，使用Flinto、Principle等进行页面之间的交互效果。
如果你正在学习UI设计，连配色都不知道怎么办？
请看下面：
色彩的使用必须有理论支持
颜色的数量逐渐增加
色彩搭配一定要和谐
颜色不必那么精确
1.色彩的使用必须有理论支持
关于色彩搭配的基本理论，比如互补色、邻近色、对比色等，还有红色代表激情、蓝色代表科技、绿色代表健康等，这些都是我们必须掌握的。 如果不清楚，请点击百度。
这里我想强调的是，我们每次使用颜色之前，都要思考一下为什么要这样使用。 你的理论基础是什么？ 这是一个优秀设计师的基本思维习惯。
举个简单的例子，如果我们是一个品牌的视觉延伸，那么品牌颜色就是蓝色：
当我们需要搭配品牌色彩时，我们可以从很多方面入手，比如品牌基调、目标群体等。
假设我们的目标群体是：时尚前卫的年轻人。 那么我们可以大胆地使用对比色——红色：
利用对比色的视觉冲击力，凸显年轻前卫的品牌基调，赢得目标群体的喜爱。
这个简单的例子就是告诉大家，你还是要看看理论，让你的理论支持你的执行力，这样你才能有足够的信心。
当然，至于颜色好看不好看，那就是另一个层面（执行力）的问题了，我们稍后再说！
2.慢慢增加颜色数量
前两天，群里有个朋友发了一张临摹练习图。 因为他的练习图，我想写一篇关于配色的文章：
在这里，我要说一下色彩搭配的问题。 在前面的知识点中，我已经强调了理论的重要性，理论可以支撑我们的执行力！
来，我们看一下这个练习的原图：
他对色彩的运用进行了很好的研究。 主要颜色有绿、红、黄三种。 绿色和红色是互补色，红色和黄色是相邻色。 三种深浅不同的绿色使画面丰富多样。 混乱。
我们看一下练习草稿：
这么小的插画，用了13种颜色，没有任何规则。 从这个练习中可以看出，这位朋友整个思维很混乱，不知道如何使用颜色！
在这种情况下，不要贪心。 您可以从两种主要颜色开始。 例如，充分利用相邻的颜色，红色和黄色：
当你真正能控制的时候，慢慢增加颜色的数量，比如添加一些点缀色——天上蓝色，地上灰色：
记住，练习配色时不要着急。 从少量颜色开始，慢慢增加！
3、色彩搭配一定要和谐
怎样才能让颜色看起来和谐呢？
我个人认为关键之一是饱和度和亮度应该看起来足够相似。 如果您想要低饱和度，请对所有颜色使用低饱和度。 例如，上面的建筑插图都使用低饱和度颜色：
假设我们此时将背景的红色改为高饱和度，就会是这样的：
根本就没有办法看到啊！
不过，要让色彩搭配看起来和谐，除了理论支持外，确实还需要一定的色彩感觉。 如果色感太差，那就多练习（记住，慢慢来掌握颜色的数量）。 敏锐的色感也是可能的。 慢慢培养吧！
4.颜色不需要那么正确
对于我们这些配色新手来说，一开始不敢用太多的颜色，而且配色的种类也比较简单。 如果这个时候我们还想色彩鲜艳，我们可以把颜色调得不那么正（比如真红、真蓝），尤其是带有渐变的颜色。 时间，例如：
让我们画一个蓝色渐变。 如果色调全部相同，只是改变亮度，就会像左边这样。 但如果您使用两种色调，请减少浅蓝色的积极性并添加一点绿色。 ，效果看起来会饱满很多。
下图是我用这种配色技巧制作的一个小作品：
像这样两种色调之间的渐变是常用的配色技巧，大家可以尝试一下。 UI设计师的工作领域包括移动应用产品设计、游戏软件、多媒体制作、广告设计和工业设计。
医疗、军事、科技、交通、通讯、商业流通等领域都有广阔的发展空间，这是其具有吸引力的主要原因之一。
当然，UI设计师的薪资普遍高于平面设计师，这也是吸引人们加入这个团队的重要因素。
本文包括如何选择配色方案/合适的配色工具/如何使用颜色来提高可读性/色盲用户的配色等几个部分。
涵盖了UI配色的大部分知识点，并附有大量示例。 强烈推荐阅读。 从重要性来看，色彩元素在APP应用中的作用仅次于功能性。
人类与计算机的交互主要基于与图形用户界面元素的交互，而颜色在这种交互中起着关键作用。
帮助用户查看、理解APP内容，与正确的元素进行交互，理解操作。 每个APP都会有一个配色方案，并在主要区域使用其基色。
由于可能的颜色组合有无数种，人们在设计新应用程序时通常很难决定一个好的配色方案。
下面我们将讨论应用程序中与颜色相关的重要知识点，我们还将学习如何为您的应用程序选择颜色和对比度以增强可用性。
如何选择有效的配色方案
创建配色方案时需要考虑很多因素，包括您的品牌颜色及其在您所在地区的特殊含义。
有多少种颜色？
保持简单的颜色组合有助于改善用户体验。 干净的配色方案不会让人不知所措，而且会让你的内容更容易理解。
相反，在太多地方使用太多颜色很容易搞乱设计。
多伦多大学对人们如何使用 Adobe Color CC 的研究表明，大多数人更喜欢依赖仅 2-3 种颜色的简单颜色组合。
如何创建场景
那么，如何选择这2-3种颜色呢？色轮可以帮助我们
十二色环图表是创建配色方案的重要工具。
有许多预设的配色方案可以使配色变得更容易，特别是对于初学者来说。
单色配色
单色方案是最容易创建的配色方案，因为每种颜色都取自相同的基色。
单色的颜色很好地结合在一起，创造出和谐的效果。
单色是单一颜色系统的组合。 它调整颜色的深度、明度或饱和度，形成明暗的层次关系。
单色方案非常直观，尤其是蓝色或绿色。
△ 正如你所看到的，这个配色看起来干净简单。
相似颜色
类似配色方案是选择彼此不冲突的相关颜色； 一种颜色用作主色，而其他颜色则用于丰富方案。
△ 类似配色方案是由十二色轮图中相邻的三种颜色创建的。
这个方案相对容易使用，技巧是选择哪种颜色作为主色会脱颖而出。
例如，基于手势的任务管理应用程序 Clear 使用相似的颜色来直观地确定任务的优先级。
△ Clear 中的默认配色方案让人想起热点热图，其中更紧急的项目以亮红色显示。
Calm 是一款冥想应用程序，使用相似的蓝色和绿色来帮助用户感到放松和平静。
△平静用相似的颜色来营造整体氛围。
互补色
互补色是相反的颜色。
△ 互补色是色轮上两种相反的颜色。
它们具有对比性游戏ui切图命名规范，可以用来吸引观众的注意力。 使用互补色方案时开发学习，选择主色并使用其互补色作为强调色非常重要。
例如，当人眼看到不同深浅绿色的物体时，会看到一点红色。
△ 使用互补色是让你的内容脱颖而出的最简单方法。
但您必须谨慎使用互补色，以防止您的内容在视觉上显得不和谐。
定制配色方案
创建自己的配色方案并不像许多人想象的那么复杂。 在一堆中性色中添加明亮的主色是最简单的方法，也是视觉上最引人注目的解决方案。
△ 在灰度设计中添加一点色彩很容易吸引眼球。 白色背景、灰色文本和蓝色高光是 Dropbox 的配色方案。
Adobe ColorCC 让您的生活更轻松
Adobe Color CC（以前称为 Kuler）使选择颜色变得非常容易。 只需点击几下鼠标，调色板上的每种颜色都可以单独修改或选择作为基色。
△ 支持导出各颜色的代码（包括十六进制）。
△ 调色板可以保存并直接添加到库中。 此外，社区还提供了许多现成的配色方案。
对比应用
通常，用户界面上的颜色对象或区域不会单独出现，而是与另一个颜色对象或区域相邻或重叠以创建对比效果。
对比可以使一种颜色与另一种颜色区分开。 使用得当，它可以通过清晰划分屏幕上的元素来缓解眼睛疲劳并集中用户的注意力。
△ 对比度高时，颜色容易相互分离，但对比度低时，则难以分离。
对比度和文字易读性
设计师通常喜欢使用低对比度来使事物看起来美观和谐。 然而，漂亮的外观并不意味着良好的易读性。
当您在文本中使用颜色时，您需要注意，将两种非对比色放在一起可能会使您的内容难以阅读。
尤其是手机，用户经常在室外或者光线充足的地方。 此时，用户将因屏幕反光而根本看不到内容。
△ 这行文字从背景颜色上很难辨别。
为了确保界面对比度在合理的范围内，您只需检查对比度即可。 对比度反映一种颜色与另一种颜色的差异（通常写为 1:1 或 21:1）。
两个数字之间的比率差异越大，颜色之间的相对亮度差异就越大。 W3C 建议正文和图像文本使用以下对比度：
较小文本与背景之间的对比度应至少为 5:1
较大文本（14pt 粗体/18pt 正常或以上）与背景之间的对比度应至少为 3:1。
此建议还可以帮助视力不佳、色盲或视力恶化的用户查看和阅读屏幕上的文本。
△ 这行文字符合色彩对比建议，在背景颜色的衬托下清晰易读。
图标或其他关键元素也应使用上面推荐的对比度。
△ 左：图标不符合颜色对比度建议。 右图：图标遵循颜色对比建议，并且与背景清晰可辨。
有几种免费工具可以针对您选择的调色板的对比度提供有意义的反馈。
WebAIM 的颜色对比度检查器可以让您测试选定的颜色。
对比度和用户焦点
除了创建易于阅读的文本之外，对比度还可以吸引用户对屏幕上特定元素的注意力。
一般来说，高对比度是重要内容或关键元素的最佳选择。 因此，如果您希望用户看到或点击某些内容，请使其独一无二！
例如，用户更有可能点击与背景形成强烈对比的号召性用语按钮。
△ 对比度使红色区域看起来与屏幕的其他部分不同。
专为色盲用户群体设计
您有没有想过您的APP的用户中会有视障人士？
当人们谈论色盲时，他们通常指的是无法感知某些颜色。 大约 8% 的男性和 0.5% 的女性患有某种程度的色盲。 其中最常见的是红绿色盲。
△ 与正常人看到的颜色相同和红绿色盲（黑色和绿色缺陷）
因为色盲有多种表现形式，如红绿色盲、蓝黄色盲、单色色盲等。 因此，使用各种视觉提示来连接应用程序的重要状态非常重要。
切勿仅依靠颜色来指示系统状态。 相反，使用笔划、指示符、图案、纹理或文本等元素来描述操作和内容。
Avocode 允许您直观地比较设计的修订版。
此外，Photoshop 有非常有用的工具来帮助模拟色盲。 此功能使设计人员可以看到色盲用户看到的界面是什么样子。
△ Airbnb APP登录页面
最后总结
色彩运用技巧的提高是一个不断努力和积累的过程。 如果您想学习如何创建美观、实用的配色方案，则需要练习、决心和大量的用户测试。
希望以上分享的内容能够对您有所帮助。 如果您觉得不错，可以转发到微信朋友圈，让更多人学习。 共勉！
继续阅读热门文章↓↓↓↓
