随着互联网的发展，各互联网公司的产品也变得越来越成熟，58本地版也在不断的更新迭代。58本地版的业务线越来越多，也做的越来越深入，在这个时间段，designer迫切需要一份设计规范来帮助我们对产品提效。这个项目从去年开始，我们通过与各位同事不断沟通迭代，于今年搭建了一份58本地版APP的设计规范。借此机会一起探讨下2020年最新ui设计规范有哪些以及如何高质量建立一套完整高质量的规范。
01
-
2020年最新ui设计规范有哪些？
一、轴
轴在UI设计中是最基本、最常见的概念，也是用来组织界面结构的重要核心。简单说来，轴是在设计的时候组织一系列元素的假象线，在下面的设计图中，轴以虚线的方式被标注出来。
1、对齐
轴最常见于对称元素的使用，当元素被布置成轴对称的布局的时候，会给人有序感。就像生活中绝大多数的事情一样，我们更倾向于享受有序的的东西，它们令人感觉平稳、舒适、平易近人。最简单的一个例子就是iTunes 程序中的专辑列表的设计，所有的专辑列表在界面的左侧保持对齐，围绕虚线轴轴对称。
2、强化
虽然轴是一条假想的线，但是如果周围的元素的边缘控制得足够整齐，这跳线会在视觉中变得更加“明显”的。最好的例子是城市中的路灯构成了道路两旁建筑物之间的轴，如果一边有建筑一边没有，那么这种轴线的感觉不会那么强烈。
从产品设计的角度上来看，Twitter 的时间线设计就是一个很好的案例，左侧的头像和右侧的推文共同塑造出缝隙中轴线的感觉。
3、运动
当我们碰到某先线条的时候，视觉会很自然地沿着这些方向运动，就如同我们站在街上，会自觉地沿着街道的两头走动。两个端点决定了线，界定了开始和结束的地方，线，或者说轴线的存在会引导和提示运动的方向。
SoundCloud中，音轨沿着一条既定的水平轴线运动，随着音乐的播放，音轨自然地自左向右匀速运动。
4、连续性
如果终点是不确定的，那么你通常会沿着轴线的方向浏览/运动，直到你找到感兴趣的东西，或者感到厌倦并关闭应用。在建筑学中，未清楚界定的终点非常少见，因为建筑的修建通常没法永远持续下去，但是UI设计则不一样，无限地滚动下去是无比受欢迎的设计手法。
Pinterest的APP中就是这样做的，持续不断的图片沿着中轴线的方向持续不断地滚动下去，只要你有兴趣一直观看下去。
二、对称
当元素被均匀地放置在轴线的两侧之时，他们构成了对称的关系。当元素被精准地在轴线两侧一一对应之时，它们就形成了完美对称。
1、平衡
对称令整个设计更加平衡。当元素与控件在轴线两侧处于相同位置之时，会给人以协调和谐的设计感。当我们在规划街道两侧的房屋建设的时候，如果左右两侧都是5间大小一致的房子，当你走在街上的时候这种平衡的设计会令人非常舒适，这是平衡给人的感受。
Rdio的APP设计就遵循着这样的设计规则，屏幕两侧的控件是相同的规格，这类布局很适宜阅读，用户会自觉地自上到下，从左向右查看。
2、不对称
如果轴线两侧的控件布置不再是一一对应尺寸相近，那就是不对称的设计。不对称的设计会给人明显的失衡感，可能会令人不舒服，但是也能造就残缺美，当然这要看你具体怎么做。
虽然Pinteret 的APP设计在整体上是沿着中轴线对称的（宽度一致），但是两边的界面控件并非是对称的，它们的高度并不一致，位置也是错落的。稍微一点的落差都会被眼睛捕捉到，而这样的差异让用户无法准确地左右顺序阅读。不对称设计打破了设计的平衡性和舒适性，但是也可以缓解了规律性设计带来的视觉疲劳。
三、层级
当某个元素出现在比其他元素更重要的位置的时候，层级就出现了。
1、尺寸
如果一个设计元素在尺寸上比其他的控件更大，就会区分出层级。毫无疑问，我们查看某个设计的时候，通常会被最大的元素吸引到。如果一个建筑物有5个出窗户，其中一个是其他四个的两倍大，我们的注意力自然而然会被吸引过去。
通过尺寸来区分文章列表层级的典型就是稍后读应用Pocket。顶部的轮播文章拥有更大的图片，它的位置和尺寸会令我们一眼注意到。
2、形状
如果一个控件在形状和形态上同其他的不一样，也可以让它独立出一个层级。不规则的设计同样会令人侧目。建筑物的正面拥有五个相同的窗户和一闪大门，你会立刻注意到门的独特之处。
在Instagram的个人信息页中，圆形的个人头像在方形的图片中别具一格，非常抓人眼球。它会让人意识到，这个独特的东西，更为重要。
3、位置
位置的存在同样能彰显层级的不一样。在圆圈之内，中心位置的东西比边缘部分的看起来更重要。位于轴线顶端的控件会显得比其他部分的优先级更高。
以设计应用Path的设计为例，时间轴顶点处的用户头像就明显比时间轴上的其他部分更重要，而这个地方正好展示的也是用户头像。
四、韵律
UI设计和建筑设计同样有着韵律之美，重复的模式会营造出独特的节奏之美。
1、模式
理解韵律最直接的方式就是听歌。音乐拥有节奏感，绝大多数的音乐遵循着相同的节拍，节拍就是音乐模式的一部分。
这方面最典型的APP是Airbnb，APP列表中每一间房子都占据一个模块，模块中有着大小相同的图片，价格、位置和房东信息和图片的相对位置一定，且排版匀称舒服，两个模块之间的间距也相同，当你浏览的时候，熟悉的节奏会让你清楚地知道上哪看关键信息。
2、间断
当节奏被间隔打断的时候，会形成不同的层级。听歌的时候，均匀的节奏被其他的音乐元素打断的时候，你会意识到这是比较特别的部分。
在Twitter的APP中，推文和推文保持着相同的样式，均匀的节奏，但是其中的“推荐用户”一项有着不同的样式，它插入到推文列表中，打破了整个信息流的节奏，凸显出不同的层级，会很快抓住你的注意力。
02
-
我们为什么要建立设计规范
·各业务线独立
各业务线因属性不同，且由不同的设计师来分别负责，各业务线之间页面存在风格差异较大的问题。
不同的业务线
·组件化思维不强
在项目中，会出现大量重复的组件，但因业务线相对独立，设计师在设计过程中不能互通有无，会出现不同样式的同一功能组件。
不同的底部bar
·无历史文件管理
产品在不断的迭代过程中，产生了大量的冗余文件。当我们设计一个新需求时，往往会发现某个组件有多个版本，不知道哪个才是最新版本。设计师设计出一个优秀的新组件时，也没有办法推广到平台。
版本更迭
·开发效率低
开发工程师团队因没有规范指导，缺少一些组件库，导致多个组件样式单独开发，造成了大量的重复开发。且当我们想要改动某个组件时，同功能的组件无法统一更改。
版本更迭
·协作效率低
设计师与设计师之间，开发工程师与开发工程师之间，设计师与开发工程师之间，因缺少设计规范，缺少组件库，沟通效率很低，走查成本却很高。
低效协作
这些问题在业务前期可能影响并不大，但对于一个不断发展的产品来说却很严重。产品体量会越变越大，涉及到的页面也会越来越多，“千里之堤，毁于蚁穴”，不加以解决将会累积成越来越大的问题。因此我们需要一份规范帮我们厘清现有产品，找到产品的DNA，让产品能够更清晰有序的持续进化。
03
-
设计规范的前期准备
·确认当前适合建立设计规范
设计规范是产品发展到一定阶段的产物。比较简单的产品结构暂不需要它，因为作用不大；体量太大的产品因页面复杂又比较难以执行。而设计规范的建立需要大量的人力物力，所以需要大家一起来确认现阶段是不是适合搭建设计规范。
会议沟通
·设计规范的收集整理
在规范搭建前期，我们需要去收集一些现有优秀产品的设计规范，了解一份优秀的设计规范包含哪些内容。其次，我们也需要进行思考什么样的规范更适合自己的团队使用，怎样使得规范更加易用。
优秀应用设计规范收集
·对现产品进行分析
总结各页面共有的元素并加以整理，明确现有产品的设计风格，找出更具基础性的元素来制定设计规范。并且这些元素能够构成产品约80%的基础场景，确保产品基础体验的统一。
现产品分析
04
-
开始搭建设计规范
·确认产品设计风格
首先我们要确认产品的设计风格，找出它独有的特点。设计风格往往体现在比如icon的风格，文字排版的风格，设计组件的风格等。
首页icon风格
·梳理规范内容，进行整理分类
我们需要对形成设计基础体验的元素进行整理分类，将他们一一列出。一般情况下，这些元素能够覆盖产品80%的基础场景。
规范分类
·制定设计规范模板
制定规范的规范：规范也是一个小型产品，想要一份清晰易读的规范，我们要对规范本身进行规范。比如我们需要有规范的封面与名称，规范的使用情况说明等。
规范封面及说明页
规范的排版样式：我们对规范的排版样式也需要进行规范。标题的样式，内容的样式，说明的样式等。比如为了方便大家理解制定规范的思路，我在很多页面左侧展示设计视觉样式，右侧展示布局与标注来提升它的易读性，无论是设计还是开发都能够很好的理解规范的组成。
规范排版
·细化规范场景
在实际使用过程中，许多基础组件会产生很多的延伸扩展，在这里我们也建议将这些扩展逐步更新到规范中去。当别的业务也需要这样的样式时，可以很方便地理解布局并拖拽使用。
顶部栏状态细化
05
-
推进设计规范落地
·设计规范组件化
设计源文件的组件化：设计规范要方便设计师使用，需要将源文件整理为组件，在大家需要使用的时候复用即可。在这里我们推荐大家使用一些好用的第三方工具，我们选择使用了蓝湖设计规范云，整个app的设计规范几乎全部分类上传。设计师可以拖拽使用，也可以共同维护，可随时对规范文件进行更新。
设计源文件组件
开发组件库的建立：搭建完成设计规范后，我们找到开发工程师团队，与他们进行合作。这样避免了开发工程师团队的重复开发，提升了设计师的走查效率，也提升了项目的可维护性。比如我们刚刚完成的字体组件的开发，解决了字体间距的控制问题，后期经过验证后将会进行全面推广。
开发组件库
·制定规范的上传、更新、使用、审核规范
设计规范是一个团队的共识，所以后续需要我们大家一起来维护它。我们将会两周进行一次规范沟通会，收集大家对规范的意见和建议，加强大家的共识。规范同产品一样，也是需要不断进化来适应时代的发展，为了确保规范的可控性和可持续性，我们后续将会推出规范的上传、更新、使用、审核规范。
共同维护
06
-
设计规范可能出现的弊端
计规范对于团队的好处上文已经讲得很详细，这里就不再赘述。除此之外对个人来说，通过整理搭建设计规范，也能够锻炼分类整理，总结归纳以及推动项目落地的项目管理能力。但是设计规范也可能会出现以下弊端：
·过于严格，宽容度不够
规范的作用是辅助产品，不是主导产品，我们需要给创新留出空间，好的创新也会反过来推动规范更新，不要让规范成为创新的枷锁。
·落地难，执行难
设计规范搭建出来后，只有使用它才能体现它的价值。设计规范需要多人参与使用，还需要开发团队进行配合开发组件，因此在推进的过程中也会面临许多障碍。
·更新迭代难
一定要建立定期回收建议并迭代规范的制度，规范需要不断迭代进化，如果规范不能更新，在后期就会成为阻碍产品发展的绊脚石。
综上所述，希望大家都能够根据自己团队的情况，搭建出一份高质量的设计规范。发挥设计规范的优势，解决设计规范的弊端，让我们的产品变得更好。
