一、交互稿尺寸

据统计，使用中台系统的用户的主流分辨率主要为 1920、1440 和 1366，个别系统还存在 1280 的显示设备。
统一的画板尺寸：
前台画板尺寸为 1920（可依据需求重新设置尺寸）；
中后台设计团队统一的画板尺寸为 1440（可依据需求重新设置尺寸）。

二、栅格化

1、网格单位

通过网格体系来实现视觉体系的秩序。网格的基数为 8，不仅符合偶数的思路同时能够匹配多数主流的显示设备。通过建立网格的思考方式，还能帮助设计者快速实现布局空间的设计决策同时也能简化设计到开发的沟通损耗。
**

2、栅格

采用 24 栅格体系。以上下布局的结构为例，对内容区域进行 24 栅格的划分设置，如下图所示。为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。

image.png

  1. 清晰的定义动态布局范围
  2. 尽量保持偶数思维
  3. 关键数据的交付（Gutter、Column）
  4. 区块的定义要从 column 开始到 column 结束

3、适配方案

1）、上下布局的适配方案
常被用于上下布局的设计方案中，做法是对两边留白区域进行最小值的定义，当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。
上下布局.png

2）、左右布局的适配方案
常被用于左右布局的设计方案中，常见的做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。
左右布局.png

4、常用模度

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

image.png

image.png

是启发，而非限制
Ant Design 在布局空间上的成果并非要限制设计产出，更多的在于引导设计者如何做到『更好』。8 倍数的双数组通过排列组合的方式可以形成千变万化种可能性，但在无限的可能性之中依然存在着『只是简单的套用数据组合』同『看起来很精妙』的差别。

三、组件库

《组件库方案》

四、页面设计-页面布局

1、尺寸

前台
不做适应，固定尺寸：1920px，内容区域1200px；image.png

做适应，栅格化尺寸：1920px，内容区域1440px；

中后台
1440px，内容区域栅格化1152px；

header
默认为64px；
间距规则
适用于720-1499，1500及以上布局间距为20，大空白间距在此基础 ＋12
image.png

常用间距（布局／模块）：20
image.png

文字模块与模块间距 S8
image.png

信息与元件／组件间距S10
image.png

2、弹窗

市面上目前流行的最小的屏幕是1024×768，因此只要保证在这个尺寸放得下，其他尺寸也肯定没有问题。
弹框的宽度一般不会太宽，1000px通常是足够有余的。高度的话，以Windows为例，去掉系统底部功能条的高度及浏览器的高度后，可以得出:
image.png

768px – 约60~100px(浏览器高度) – 40px(系统底部工具栏高度) = 约620px

弹框高度控制在620px以内。

由于屏幕的尺寸愈来愈大，有时候为了在大屏幕下有更好的视觉表现，对于一些较复杂的弹框，可以选择做2种尺寸适配。

Marvel的新建项目弹框中

  1. 在大屏幕下，弹框尺寸为640px(宽)x760px(高);
  2. 在小屏幕下，选项及Icon则会缩小，弹框尺寸变成了640px(宽)x620px(高)

InVision的升级弹框中

  1. 在大屏幕下，列表的行距比较宽松，弹框尺寸为1100px(宽)x800px(高);
  2. 在小屏幕下，列表的高度则减小，弹框尺寸为1100px(宽)x630px(高)。

五、页面设计-字体

1、字体家族

  1. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
  2.   'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
  3.   'Segoe UI Emoji', 'Segoe UI Symbol';

2、主字体

我们基于电脑显示器阅读距离（50 cm）以及最佳阅读角度（0.3）对 Ant Design 的主字体进行了一次升级，从原先的 12 上升至 14，以保证在多数常用显示器上的用户阅读效率最佳。
image.png

3、字阶与行高

字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。
image.png
Ant Design 的 10 个不同尺寸的字体以及与之相对应的行高。
image.png

建议在一个系统设计中（展示型页面除外），字阶的选择尽量控制在 3-5 种之间，保持克制的原则。

4、字重

字重的选择同样基于秩序、稳定、克制的原则。多数情况下，只出现 regular 以及 medium 的两种字体重量，分别对应代码中的 400 和 500。在英文字体加粗的情况下会采用 semibold 的字体重量，对应代码中的 600。
css代码中，400 等同于 normal，700 等同于 bold。
image.pngimage.pngimage.png

5、字体颜色

文本颜色如果和背景颜色太接近就会难以阅读。考虑到无障碍设计的需求，我们参考了 WCAG 的标准，将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。
image.png

建议

字体系统的构建，是『动态秩序之美』的第一步。在实际的设计中，我们还有三点建议：
建立体系化的设计思路：在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。

少即是多：在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。

尝试让字体像音符一样跳跃：在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小，会令字阶之间产生一种微妙的韵律感。

六、配色方案

1、配色方案

颜色是指UI界面设计中使用的色彩体系，品牌色、中立色、功能色三部分色彩，用于规范化的创建反应品牌或风格的颜色主题。

品牌色
代表品牌对外形象及VI识别，品牌色的数量根据品牌特性制定，可以1个也可以多个，用于主Button、主搜、价格、ICON等需要突出品牌特征的地方在业务中经常使用的颜色。对其进行编号，垂直、水平可拓展。

Material Design里的颜色灵感来源于环境中柔和的色调，深色阴影和明亮高光，谷歌提供了500种颜色参考作为你app里的主色调。

01） 基色：
是指app中出现最频繁的颜色，在没有辅助色的情况下也可以用它来强调元素；要创建元素间的对比，可以用主色较亮或较暗的色调，有助于界面之间（例如状态栏和工具栏）的划分。

02） 辅助色：
二级色，用来强调UI界面中关键的部分，它可以是主色的互补色或也可以是相似色，但不同于主色的明暗色调；也不一定是彩色的，他应该与周围的颜色形成对比，作为一个强调来谨慎使用。（是否使用辅助色是可选的，但没有必要通过主色的明暗色调遍去强调元素）
大的UI区域和元素应该用主色调，辅助色用于强调较小的区域（如果没有辅助色，你可以用基色代替来用于这些区域）：浮动按钮、开关用辅助色来强调；次要按钮或复选框被选中状态、手机图标、系统栏可以用基色；工具栏用更深的基色；很少出现的元素（例如警报），应该和其它元素区分开来并且不要用基色。

03） 辅助色最好用于以下元素：

  1. 按钮、浮动操作按钮和按钮文本；
  2. 文本字段、游标和文本选择；
  3. 进度条；
  4. 选择控件、按钮和滑块；
  5. 链接；
  6. 标题

辅助色的谨慎使用：
对某些特定文本（例如连接文本或标题等较短文本）使用辅助色，但不要用于正文（即便基色和辅助色都是明亮的）。
在不同背景颜色下也可用不同深浅的辅助色来表现出对比。

中立色
灰或饱和度低的颜色（如蓝灰）用于界面设计中字体、背景、边框、分割线、ICON、中立插图等。

功能色
功能色为UI设计中的特殊场景色，如成功、出错、失败、提醒等，专色专用。

2、自定义配色

image.png

color tool

3、颜色库

color.adobe.com
color-hex.com
colordrop.io
brandcolors.net

七、交互流程

使用whale kit的Interact Logic工具进行交互流程的制作。

在交互页面的基础上，进行交互流程的设计。

交互流程的核心是交互流程，交互流程中的复制页面、排版是耗时且重复劳动，使用交互流程工具在建立交互流程中可以快速的复制已经设计好的页面，并按照规范排列好。

image.png

画箭头插件， Sketch-Connection-Flow-Arrows。

由于Web页面尺寸比较大，可以考虑采用虚拟页面展示，如下：
image.png

八、交互约定

《交互约定》

九、交付形式

image.png

image.png