SAAS系统设计语言升级总结
---------------------
为啥优化升级SAAS系统？
1. 不一致：正如每个生长中的产品那样，在过去的时间许多功能迭代和用户体验调整，积累了大量不一致和临时样式设计；
2. 主观性和观点：起初由于产品方向些许模糊，缺乏合适的设计语言系统，在设计时会有许多主观意见和观点。这就是为什么花了很多时间来验证设计。作为设计师目标是消除所有这些主观性，使设计和设计过程保持一致和高效；
3. 用户体验：同样，尽管氧育SAAS中已经看到了部分功能的一些改进，但由于视觉设计信息优先级的处理和交互逻辑的不清晰，用户对产品产生了误导；
制定设计原则
（只有通过建立一些接地原则，才能通过设计体现产品的目的。）
1. 产品结构优化： 功能模块精简，非核心功能隐藏。制定优化流程。
2. 功能清晰度： 用户需要知道是什么，如何使用，能否帮助自己减轻工作负担，预测使用它时会发生什么，避免不必要的交互误区。
3. 减少操作层级以及路径：增强产品功能可用性，以交互引导用户完成操作任务，降低学习成本。在元素之间保持一致的方法，增加预测元素行为的可能性。
4. 统一设计标签：保证用户操作意识记忆，为他们提供一套精简的相关选项和统一性的标签。
技术沟通
1.在框架之上构建
此次技术开发基于semantic-ui框架，所以在设计之前，设计师要熟悉该ui框架不同样式，以及改动程度，因为有时候设计师天马行空，对于开发时间和成本都不划算。所以设计师有时要在产品需求、技术呈现、视觉美观找到一个平衡点。
2.注入原子设计流程
模块化设计，基于semantic-ui的原子设计方法强调创建和设计UI的基本元素，然后在整个系统程序中重复使用。
采用原子设计过程的主要原因：
1. 模块化性质组合；
2. 支持敏捷流程，可以在设计时同时将组件发送给开发团队，缩短产品开发周期；
3. 提供平台，屏幕大小，都可以创建美观且易于访问的内容；
4. 同时考虑部分和整体，增强产品视觉统一基调。
设置基本原子
（颜色、网格/间距）
1.颜色
颜色对用户来说是最直观也是最快捷的感受，不合适的颜色可能让用户对产品产生意外错误认知。此次色彩方案通过引入明亮的色彩和渐变，希望在设置用户的情绪，增强直观交互，提高可读性和易读性时改变这种感知。
从广义上讲，产品调色板包含以下颜色：
原色 - 适用于可操作的物品；
强调颜色 - 用于不同的可操作项目集，例如导出，查看会员ID等，以区别于其它信息；
中性色 - 适用于描述性文本；
灰色阴影 - 实现图形卡片 - 基础关系和层次结构；
扩展颜色调色板- 用于插图；
渐变集 - 在必要时添加视觉重量。
从这些颜色的色调和阴影中，生成了渐变色调。扩展调色板主要用于我们的插图系统，用于处理不同的UI状态，例如错误和成功状态等。
2.用户界面网格/间距
为什么我们使用网格？
1. 用户扫描阅读以快速找到他们正在寻找的信息。也通过简单的结构、形状来区分内容。网格有助于生成这样一种简单的结构/形状，从而实现界面的可读性和可扫描性。
2. 它还可以帮助开发人员轻松地在Web上管理响应断点，节省开发时间。
间距和行高是界面上的两个一样的属性，可以严重影响UI的视觉组成。很多时候我们在80px或100px之间进行挑选以实现视觉构图。如果没有系统的约束，过多的数量的间距值会导致整个界面视觉混乱不一致。
间距系统：
我们都希望我们的尺寸值简单且易于记忆。基本字体大小值是16px，为什么16px，而不是任何其他字体大小？16px是指定基本变量和常规段落的默认字体大小。所以，只需要操纵一个变量值改变整个间距系统。
设置原子、分子
在整个过程中，我们确保每个原子和分子都通过以下参数。
1. 无障碍；
2. 通过类型，颜色和大小的可视层次结构；
3. 通过颜色，形状和阴影保持图形 - 层次关系。
原子：
这些是用户界面的基本基本块，由颜色，排版和基本形状组成。
例如：按钮，输入字段等；
分子：
分子是使用一组原子共同构成的原子构建的。结合起来，这些抽象的原子有了目的性。这些原子可移植，可重组，可以放在任何需要的功能组合。
例如卡片，列表等；
设计系统的优点
设计：
1. 在提出新的功能需求时，处理速度快；
2. 便于管理，设计新界面只需托用现成的组件进行组合。
技术：
1. 开发人员可以快速实现功能。CSS同时具有非常模块化的特点；
2. 任何组件都可以随时更改/添加/删除，而不会影响产品。平台的灵活性得到了增强。
总结
模块化和系统化的界面设计方法，有助于设计和开发过程简化，保持产品的一致性。也让设计师有更充分的时间专注于解决美观问题，从视觉角度进行设计决策。
此外，界面的可预测性随着设计语言系统的模块化结构而变得更好，又降低了用户的学习成本。
