浅谈UI设计系统-培养系统化设计思维

UI设计中系统化的设计思维是非常重要的，它关系到个人能否理解和把控项目的全局、团队合作时项目能否高效推进以及后续能否全局统一性地进行迭代优化。

站在公司的角度来看，当有新的设计师加入公司时，项目的设计系统文档便是新任设计师的“字典”，可以帮助新任设计师快速了解产品的设计体系并进入工作状态。

文章将UI设计系统拆分出八个基本要点，从各个要点逐个分析，同时也是我在工作中对于这些要点的总结和感悟，希望能分享给大家。

01 单位

互联网设计的基础单位是像素，单位px。分辨率=像素/英寸，常见的分辨率72ppi的意思是一英寸的长度下包含72个像素，300ppi即是一英寸的长度下包含300个像素。

我们都知道一英寸的物理长度是固定的，而一英寸可以包含不同的像素数量，因此像素是没有固定的物理大小的，一个像素可以有宇宙那么大，也可以像针尖一样小。

既然像素没有实际大小，那么用来作为工作中的尺寸单位就会发生很多问题。

案例：你的领导说做一个40像素的图标，你画完之后却发现画得太大了，这就是因为领导指的其实是在2倍图的尺寸（750*1334px）下的40px，而你却在375*667px的1倍图画板上画得这个40px的图标，图标的尺寸自然就大了一倍。

那么如何避免发生这类问题呢？这里就要引出我们的重点单位——逻辑像素，单位pt。逻辑像素的大小等于一倍图下物理像素大小，即在一倍图的中，1pt=1px；而二倍图的中，1pt=2px；三倍图的中，1pt=3px。

此处用iPhone11和iPhone11pro max举例，iPhone11的倍率是2倍，尺寸是1792 x 828px；iPhone11pro max的倍率是3倍，尺寸是2688 x 1242px。由此可见他们的逻辑像素都是414 x 896pt，因此我们只需要在一倍图414 x 896pt的尺寸中进行设计，再乘以相应的倍率即可。

02 尺寸适配

为了保证最终的成品与设计稿的UI相符，实现精准的落地效果，设计师还需要考虑各机型尺寸的适配问题。项目初期考虑到时间和人力成本，通常需要一稿适配多个终端，所以在设计前选择一个合适的画板尺寸就显得尤为关键了。

选择设计尺寸需要分析主流机型的尺寸分布情况，应当选择使用人群居多、尺寸大小居中的尺寸设计，再用这一尺寸去适配其他机型。

苹果目前的屏幕尺寸数量相较于安卓较少，目前iOS居中的屏幕尺寸依然是750*1334px，向下可以适配640x1136px，向上可以适配1242x2208px和828x1792px／1125x2436px；该尺寸的画板同样可以适配安卓阵营，常见的安卓手机屏幕尺寸有720*1280px，1080*1920px，1440*2560px等。

综上可以得出在设计时选择逻辑像素为375*667pt的画板进行设计，可向上向下适配iOS和安卓的多种机型，实现一稿适配多平台。

注意：在适配iPhoneX一类全面屏机型时需要注意屏幕安全区域，需在上方预留44pt，下方预留34pt；对于单屏显示的界面（引导页，启动页闪屏等）需要重新布局设计。

03 布局

在界面设计前需要先确定全局的左右边距，确保产品所有页面的内容区域一致；建立全局的页面栅格系统，使界面的布局更有逻辑性，页面更加条理，画面更加平衡。

1.全局左右边距：指页面内容到屏幕边缘的距离，整个产品的界面都应该以相同的边距进行规范以达到页面整体视觉效果的统一，可根据实际的产品气质采用不同的全局页边距。

2.栅格系统：一种规范的页面布局方法，在界面元素众多时使用栅格系统可以使界面更有调理和秩序。其中网页端通常使用12列栅格，移动端通常使用6列栅格。每个栅格包含“列”和“水槽”，列用来承载内容，水槽则不能填充内容，栅格中的列越多灵活性就越大，但同时复杂性也更高，所以列数并不是越多越好。很多时候需要将多个栅格合并成一个组合区域使用，组合区域内的水槽可以承载信息。

公式：内容宽度=（列+水槽）X栅格数-水槽

3.常用模度：下图出自Ant design的一组可以用于UI布局空间决策的数组，他们都保持了 8 倍数的原则、具备动态的韵律感。经过验证，可以在一定程度上帮助我们更快更好的实现布局空间上的设计决策。

04 字体

GUI图形界面设计即承载和传达信息，字体是承载信息的关键，所以制定字体规范显得尤其重要。

01 字体选择

• SF UI display：苹果英文/数字字体

• Pingfang SC：苹果中文字体（苹方简）

• Hiragino Sans GB：苹果备用中文字体（冬青黑体）

• Noto Sans CJK SC：安卓中文字体

• Roboto：安卓英文字体

• Arial：苹果和windows系统中都有的无衬线英文字体

  
  

由于英文字体中大多不包含中文，且大多数中文字体中的英文和数字的部分都不是特别美观，我们可以先进行英文字体的声明，这样不会影响到中文字体的选择，因此优先使用最优秀的英文字体，中文字体声明则紧随其次。如下示例：font-family: "SF UI display", "Pingfang SC”

02 字号

移动端界面设计为近距离阅读，眼睛距离屏幕大约20-30cm，受限于屏幕尺寸，可参考iOS规范的最小字号不能小于11pt。长文本阅读时建议适当增大字号，利于用户长时间沉浸式的文字阅读，减轻阅读压力。

03 颜色

字体颜色的使用同样需要有所规范，控制一套产品中的字体颜色数量，需要在设计前制定主标题、副标题、长文本、暗提示等字体颜色规范，确保整个项目字体颜色的一致性。

另外需注意字体颜色与背景的对比度，对比度太低的情况下会影响对文字信息的识别。

04 字重

基于稳定、克制的原则。通常情况中文字体只使用regular 以及 medium 的两种字体重量。英文或数字字体加粗的情况下可以采用 semibold 的字体重量。

05 行间距

行间距可以设置在120-145之间，最佳行距为1.38倍；长文本的行间距可设置得稍大，行间距约为字体大小的150%到170%之间。

06 每行字数

合理的行长使用户在行间跳转时感到非常轻松和愉快，反之则会使阅读成为一种负担，在移动端的长文本设计中一般每行20字左右比较适宜。

每行字数过多

每行字数合适

 05 色彩

UI设计中的色彩大致可以分为品牌色、功能色和中性色三种类型，在制定规范时也可以按这三大类分别管理，保证使用的颜色可追溯

01 品牌色：品牌色是体现产品特性和传播理念最直观的视觉元素之一，使用品牌色作为UI界面的产品主色能使产品的视觉风格更加与品牌形象贴合。建议在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。参考界面：美团，饿了么。

02 功能色：功能色代表了明确的信息和状态，建议在一套产品的UI体系中，相同的功能在颜色的选择上需要保持一致，不要有过多的自定义颜色干扰用户对于功能的认知。功能色常用在：按钮、标签、价格、通知等位置。

03 中性色：主要被大量的应用在界面的字体颜色部分，此外界面背景色、边框、分割线、等场景中也非常常见，同样在色彩的选择上需要保持一致。

06 切图命名

规范的命名可以减少开发的时间成本，也方便管理项目的切图库。需要在设计前制定并严格实行切图命名规范制度。

• 所有命名均为英文小写字母/数字且不能含有空格

• 通用切图命名格式：页面_控件_类别_功能_状态@倍率.png（例：home_tab_icon_mine_def@2x.png）

注：sketch导出切图后会自动给该文件加上倍率和文件名的后缀，所以我们在命名切图时写到“_状态”即可。

07 组件

组件的使用是界面设计中的关健，在工作中灵活使用组件化设计不仅能够大大提高设计师自身的工作效率，开发们也能利用既有的组件在多场景下进行复用，同时也使用户能获得一致的交互与视觉的体验。

案例：需求是一个视频瀑布流信息页面（如左图），一屏中经常包含许多个视频卡片，每个卡片中有视频封面、标题、作者名、浏览量等信息。当你设计完成后领导提出修改意见：标题字体再大些，浏览图标换成线性图标。这时如果你没有使用组件化设计，标题字体和浏览图标都需要一个一个都去修改；如果你使用了组件化设计，只要组件中改完这两点，每个视频卡片就会自动同步你的修改部分，大大节省了工作时间。

建立组件库：在项目开始设计前需要先建立一个基础的组件库，包括导航栏、按钮、弹窗、列表表单等全局偏功能性组件。建立基础组件库的时间不宜太长，大约0.5-1天的时间即可，因为脱离实际界面创建的组件如果过于详细的话很可能不能全应用上，容易耽误项目的进度。

基础组件库建立好了以后就可以正式开始界面设计了，此时如果新的界面需要创建新的组件时，再将其补充到组件库内即可，如此一来在项目完成时也就有了一份该项目的全套组件库了。注意在应用组件时不应受限于现有的设计样式，应该在设计的过程中不断优化组件库。

组件命名：sketch中将组件命名以“/”分隔的话，组件便会在symbol中自动分类按层级显示，建议组件命名顺序为：页面/功能/描述/状态，例如：订单详情/按钮/主级/默认

08 交互动效

在设计产品时，交互动效能加强用户认知且增加活力，提升产品的可用性。动效设计时应遵循功能性、物理性、趣味性三大原则。

01 功能性：让用户跟着你的交互流程走的同时不会落后。人的大脑和眼睛会快速注意到移动的目标。动效可以帮助眼睛注意到新的目标出现或者一个目标的隐藏，帮助人们定位并建立视觉关系。（作品来自Drbbble Yellow.Y）

02 物理性：动效设计还需要考虑到重力、惯性和速度，生活中一个物体的不可能突然运动或静止。遵循物理性能使动效显得很真实，用户会觉得更加自然，更助于快速形成使用习惯，因为这些动效都是熟悉并可预知的。（来自Material Design设计指南）

03 趣味性：是用户意料之外增加的惊喜，感知产品的生命力，让一些常规的操作变得更加有趣活泼，情感化的设计增强用户体检。（作品来自Drbbble GXing）

了解了动效的三大原则后，我们可以分别从以下几种场景结合实际项目需求着手动效设计：

1. 对用户手势的及时响应：即交互设计原则中的操作后有反馈，告诉用户刚刚的操作的完成情况，例：水波反馈、页面至底弹力提示；

2. 暗示即将展现的界面或动作，例：进度条动效、loading；

3. 反映元素之间的层级和空间关系，例：抽屉导航动效、弹出气泡、弹窗；

4. 界面切换的过渡动画：体现页面之间的层级关系，页面之间的过渡动画需要有较强的逻辑性，从哪里进入就从哪里离开；

5. 情感化设计，增加产品的活力与趣味性，例：loading、404、下拉刷新。

注意：

• 设计目的：动效设计的首要目的是帮助用户理解产品的功能，应当基于稳定、克制的原则，不宜因过分追求视觉表现而喧宾夺主；

• 时长：动效时长需要控制在300ms（0.3s）左右，小于150ms的动画用户会没有感知，大于500ms的动画时间则会显得迟钝；

• 自然缓动：遵循自然界的惯性定律能让用户体验更加舒服，避免线性运动的动效；