UI设计规范详解！麓言信息

建立合适的UI设计规范，对提升用户体验有很大帮助。这篇文章讲述了设计规范的定义和来由，并说明了在文字、色彩、阴影、圆角、布局、栅格、图标、文案和组件等方面的详细设计规范，推荐对UI设计感兴趣的同学阅读。  
UI设计规范详解！  
  一、设计规范综述  
  作为一个B端产品，为了应对公司快速迭代开拓市场和一部分购买者的定制化需求，与此同时还要保障产品间的用户体验一致性，近年来设计规范这一解决方案不断升温，如Salesforce，antdesign等纷纷推出了自己的设计规范。  
  设计规范是以下的定义：设计规范由设计原则、设计语言和组件库构成，在设计原则的指导下使用设计语言和组件库创建体验一致的用户界面。  
  设计原则：即整个设计规范所要遵循的全局规则，为设计提供方向指导。  
  设计语言：包括色彩，文字、图标等。  
  组件库：分为基础组件（按钮，下拉列表等）及业务组件（商品模块）。  
  在做设计语言和组件库时，有一个基本原则是，少即是多(lessismore)，用尽可能少的样式来实现设计目标，例如按钮提供三种尺寸即可，在适应不同场景需求的同时保证体验的一致性；另一方面，保持克制的设计规范可以进一步减少设计师的决策时间，提高设计效率。  
  原子设计系统的五个层次  
  原子设计包含五个同时工作的阶段，以更慎重和更具层次的方式创建界面设计规范。  
  原子：原子是构成界面的最小元素，例如颜色、文本、图标、线条。它们在在界面这个维度上不能再被细分。例如图标，本身是可以继续细分的，但是对于界面而言，图标细分得到的元素是没有任何意义的。  
  ‌分子：原子按照一定的规律组合就构成了分子，它们拥有独特的功能，例如下拉列表，步进器等。  
  ‌组织：在界面中组织体现为由分子原子组成的模块，例如数据概览的卡片。  
  ‌模板：在界面中，模板的体现是原型图，是页面的基本形态，可以让我们快速试错，搭建出一个功能良好的整体。  
  ‌页面：在模板的基础上将占位符更换为真实内容，并进行视觉优化即为页面。  
  为什么需要设计规范  
  设计层面：解决用户体验一致性，减少设计成本，提高设计效率，使得设计师可以快速承接新需求。沉淀设计资产，使得设计更加持续地输出价值，减少一次性设计，同时使设计师从样式中解放出来，站在更高的层面上来思考业务与体验。  
  开发层面：与设计规范同步形成研发资产，避免重复造轮子，保证代码质量，降低维护和拓展的成本。  
  测试层面：避免重复的无意义走查。之前遇到过一个深色模式的需求，尽管只换了颜色，但是测试仍然把所有组件都测试了一遍，加上重复的设计、开发量，导致原本一个很简单的需求，居然花费了12人天的工作量。  
  产品层面：提高产品迭代与优化效率，降低试错成本。  
  协作层面：降低不同设计师之间以及设计师与开发工程师之间的沟通成本。  
  为什么要自己做设计规范  
  这个时候可以会有小伙伴问，目前市面上有这么多的第三方设计规范，例如antdesign，element，有必要自己重复造轮子做一遍吗？答案是非常有必要。原因如下：  
  第一，B端自身的业务性决定了市场上没有万能的设计规范，那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范，在此基础上进行修改，效率很低，适配的复杂度和重新开发相差无几。  
  第二，大家都在使用第三方设计规范时，产品的同质化便不可避免。为了避免这种情况发生，我们必须要从设计语言开始，设计自己的规范。  
  那些大厂的成熟的组件库该如何用呢？我认为应该把它当成一个字典，有不会的地方，可以去参考人家的成熟的解决方案。