新手UI设计师入门基础——设计规范篇

大峰_Design

沈阳/UI设计师/4年前/15925浏览

版权

新手UI设计师入门基础——设计规范篇

大峰_Design

本篇为一篇UI设计师设计基础规范的文章，对知识点的一个梳理。

大家好，时隔两年再提笔，感怀之言颇多。遭遇了转正前解聘的无良企业，也面对过996加班却拖欠工资的老赖老板。二线城市的行业情况，风雨如晦。

前不久，听说一个让人血压飙升的消息，某个设计群里竟然有人将一张海报的设计费压低至15元！如此信奉极致剥削法则的老板，周扒皮见了说内行，葛朗台听了也低头。

难道设计师在资本面前真的这么卑微和廉价吗？

鲁迅先生说过，今日我等若冷眼旁观，他日祸临己身,则无人为我摇旗呐喊。

思及此，我决定再次提笔，将自己这几年的经验梳理、归纳、总结，为所有新入行的设计师们提供一份入行新手攻略。

本文与功名利禄毫不相关，只是希望以己绵薄之力，让行业新人设计之路的前期走的更平稳一些。

01 手机规格规范

Ios系统和安卓系统都提供了一些固定的官方组件规范。遵循其官方组件规范，可以极大提高设计和开发效率，同时降低用户的学习成本。其中最常见的规范化组件包括顶部的状态栏、导航栏、底部标签栏和工具栏。

Iphone的app界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域。

状态栏

ios 是 20pt, 安卓是24dp。

导航栏

ios 是 44pt&88px, 安卓是56dp。

标签栏

ios 的高度是 49pt&88px, 安卓标签栏的高度是48dp。

工具栏

工具栏的高度是 44pt&88px,安卓是 48dp 。

ios 中最小点击区域是 88px，因为苹果在纵向尺寸上把 22px 作为一个基础单元，物理尺寸最小空间的高度为 22乘4等于88px，为手指触摸最小的高度。因此导航栏、标签栏、列表、搜索栏和按钮的高度都是 88px，导航栏和标签栏图标为 44px，元素与元素之间的最小间距是 22px。

02 色彩设计规范

我们通过颜色—联想到景象—从而产生情绪，因为色彩本身是没有情感的，我们之所以能感受到色彩的情感，是因为长期生活照一个色彩环境中，积累了许多视觉经验，这些经验与某种色彩刺激呼应时，就会激发某种情绪。

这样的色彩的运用在ui设计中由衷的体现如在电商app中大面积运用的红色（天猫、拼多多、京东）办公工具类软件运用的蓝色（钉钉、支付宝、企查查）。

在确定主颜色之后如何运用色彩呢？以 Ant Design 为例，设计师需要根据调色板上的色值来进行设计稿的制作，而程序员在缺乏设计稿的时候也可以直接在调色板上取色。一般来说在进行设计稿制作的时候，直接使用 Ant Design 的一种基本色彩或与基本色彩相近的颜色作为主色，主色的渐变色可以用于组件的特殊状态，如 hover/active 状态。

选取一个主色作为 5 号色,将主色与纯白色(#fff)混合，主色与纯白色之间分成 100 份， 20/40/60/80 的位置分别分割，得到 4/3/2/1 号色;

将主色与纯黑色(#000)混合，主色与纯黑色之间分成 100 份， 20/40/60/80 的位置分别分割，得到 6/7/8/9 号色;

通过以上方式得到一条完整渐变色板，在选更加深一号的6号色为按钮色3号不可触摸色，7号色为按下色增加整体的连贯性。

中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理地选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 13 个颜色。

03 文字排版设计规范

通过合理使用不同的字重、字号和颜色来强调界面中的重要信息，选用字体时需要注意字体保证更高效、清晰等特点。

尽可能使用单种字体使得整体界面保持干净和整体性，且在字体使用时要保证满足无障碍阅读的最低标准。

字体

苹果系统中默认的字体是：苹方字体，其中数字字体比较好的字体可以用：Dinner 字体。安卓系统默认的中文字体是：思源黑体。英文字体是：Roboto 字体。

字体的颜色和粗细也大有讲究，标题等文字就是粗体，一些说明文字等就是浅色非加粗体。常常用文字的粗细体来区分重要信息和次要信息，进行信息层级的划分。字体颜色很少采用纯黑色，一般用的是深灰色和浅灰色。

行高

行高会影响阅读的体验，英文的基本行高通常是字号的1.2倍左右；中文的基本行高通常是字号的1.45～1.5倍左右。

字号

Headline 1 36px 40pxMedium 导航栏标题，重要标题

Headline 2 32px Medium 主层级标题、二级标题

Headline 3 28px Medium 三级标题、次级标题

Paragraph1 28px Regular 文本内容，控件文字

Paragraph2 24px Regular 大部分内容，辅助文字

Paragraph3 22px Regular 部分特殊辅助文字说明文字

注：说明文字一般不会小于22，再小就将影响文字的阅读性。

在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。

04 UI设计中的排版

由于列跟水槽的宽度是以网格作为基本单位来增加或者减小，所以栅格化的重要一步就是需要先定义好栅格的原子单位“网格”的大小。

我们也可以利用相同网格法来制定产品中的间距，建立相同的间距为一个单位的网格，使用单位的倍数来定义模块的间距与元素的尺寸。

App通常不会超过6列，以750*1624为例，如果边距为40、间距为20，划分成6列，则每列为95，较ios最小点击范围（88px）大一点，如果划分为7列，则每列为78，这么小的尺寸将会影响用户的点击操作。

八倍间距的应用

目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被8整除，使用8作为最小原子足够普适。可以确保不同布局之间的视觉一致性，同时可以灵活的适配多种尺寸的设计。以8为单位符合“偶数原则”。偶数原则可以在页面缩放中最大程度的避免类似于0.5、0.75、1.25等次像素的出现，从而使页面各类元素在大多数场景下都能有比较精致的细节表现。

在网格系统中应该更加注重的是间距，而间距要遵循网格系统（例如使用 4、8、16、24、32 等和 8 具有规律的数字）同时在产品中的各类元素也要遵循这类原则（例如图标大小、组件大小等）。所以布局的水平和垂直节奏和各个组件的节奏会相互重叠，整体的设计将更加完整。

那么假设我们以8为基准的去延展系统间距，得到如下间距系统：

8、16、24、32、40、48、56、64、72、80、88、96、192等，这里都是8的倍数或能被 8 整除。

开发工程师使用的前端开源组件库比如Metronic、Antdesign等也是基于8的原子单位来设计，因此如果设计师也使用以8为基本单位的栅格系统，开发与设计师相互对接就会更加方便，开发实现页面时也能更高品质的去还原我们的设计。

包括设计中的提示选项也可以用8为单位的栅格系统为基础原则去设计。

UI页面布局的格式塔原理

格式塔心理学诞生于1912年，是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。

创始人提出的5项基本原则：简单、接近、相似、连续、封闭。

其中相似原则指的是在某一方面相似的各部分趋于组成整体，强调内容。而接近强调位置。人们通常把那些明显具有共同特性（如形状、运动、方向、颜色等）的事物组合在一起。

由上图可见，当用户看到这个这个页面的时候，会自觉的把上面5个icon看作一个整体，因为他们的颜色形状都是相同的；文字颜色与字体大小相同会被自然的看作成为一个相同的功能，如同样的红色都是价格，同样的黑色都是商品名称；相同的汽车图片直接清洗的都可以归类为同列表商品。具体的结构可以在2020年我写的《UI界面设计常见的布局构图》可以查看

https://www.zcool.com.cn/article/ZMTIwNzA2OA==.html

05 UI设计中的图标原则

在一个APP中会有许多多的图标，他们根据产品需要被设计成不同的尺寸，不同的颜色，不同的风格，有的出现在导航栏中，有的出现在标签栏中，有的则出现在界面内容中。因此我们要花心思来设计如何让图标设计在APP中得到更好的运用。

为了保持图标元素的平衡，尺寸大小需要保持一致，通常我们会建立基础网格尺寸进行图标的绘制，常见的网格尺寸有 16、24、36、48、64、128、512、1024，这些网格尺寸并非固定，也会根据设计中的特殊尺寸而变化。

当一个界面完全由文本构成时，用户被迫阅读每个文字来找到自己想要的信息。而引入图标后，降低了用户的认知负荷，帮助用户更快导航，提高用户使用产品的效率。另外一方面、设计精致风格统一的图标提高界面的美观度的同时，也为用户带来了连贯一致的使用体验。

作为一款完整独立的app设计，需要保证整个设计的完整性与独特性，因为这个是给新手设计师写的文章，在这里着重以完整性进行讲解。

所谓整个app的完整性原则，需要保证整个设计整体系统的完整，统一的用色规范、统一的圆角角度、统一的icon形状、统一的icon的粗细与视觉大小。

线性图标主要是通过线条描边勾勒出来的图形，在界面中的尺寸普遍偏小，其线条不能过于复杂，否则将会影响辨识度，看似不多的简单线条搭配不同的色彩，则有很大的调整空间。

同样绘制图标时不宜过于纤细，否则用户难以识别，对图标的局部进行填充同一的颜色，行程统一的色彩联系，通常是提取品牌色。

扁平风格图标主要是由形状的描边、填充进行各种组合搭配来表达不同的含义，并通过不同的色彩体现出不同的视觉效果，最常见配色有以下几种：

单色：简洁、清晰视觉效果，常见于基础功能图标。例如：B端功能入口，移动端个人中心、二/三级页面的工具栏等，也有很多app的金刚区利用底色块衬托反白的图标。

双色：是很常见的功能性图标，至少由两个以上的元素组成，在单色的基础上加以色彩点缀，让本身就不是很突出的元素不再单调，如果融入品牌色，能提升整个界面品牌调性，适用场景跟单色图标相比则范围更广。

多色：至少由三种或以上的形状、颜色组合而成，常用于金刚区、产品分类列表、定制化菜单等。

线面结合：图标既有线段或轮廓、又有填充的色块，相比纯线/面性单一样式的图标则细节更加丰富，如果把控到位，会有更好的视觉效果及信息传达的效率，也不失趣味性。

在这里给大家推荐几个我常用的图标库，在来不及画图标时，可以先用这些迅速建立起一个图标组件库。之后有时间了再慢慢更新为自己的图标。

Iconfont：国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。特点是图标非常丰富。

Remixicon：Remix Icon 是一套面向设计师和开发者的开源图标库。质量很高，图标风格定义为中性风格，以便适用于各种用户群体和风格的项目。与拼凑混搭的图标库不同，Remix Icon 的每一枚图标都是按照统一标准进行设计的，确保每一枚图标在拥有完美像素对齐的基础上风格一致且简洁易懂。

IconPark： IconPark图标库是一个通过技术驱动矢量图标样式的开源图标库，可以实现根据单一SVG源文件变换出多种主题，具备丰富的分类、更轻量的代码和更灵活的使用场景；致力于构建高质量、统一化、可定义的图标资源，让大多数人都能够选择适合自己的风格图标。

06 UI设计中的图片原则

在UI设计中，配图的好坏将直接影响着界面的品质及用户的视觉体验。纵观如今高质量的界面设计，具有设计感的配图不仅是吸引用户的重要元素，能比原本平淡无奇的文字界面更让人产生点击欲望，还能体现出设计师的品味、以及相关方面的专业性。

保证使用的图片的质量与完整性

高质量的图片、完整的图片、来确保整个app的基础保障，在ui设计中使用模糊的图片，大大加深整个用户使用的调性，整体显得不专业。

在选用符合的图片的同时还需要保证整个图片的整体，保持风格整体的统一性。图片以实用性为准，如果一味的追求漂亮、好看，最终可能形色各异造成视觉的不统一，严重影响用户体验。设计师在选图时需要对风格精准把控或后续稍加处理，以形成统一的视觉。大体上可以从构图位置、视图角度、背景风格、色彩饱和度、等方向去调整。