校精灵Saas系统设计规范v1.0.pdfVIP

目 录 Fairy Design 规范规定 设计价值观 布局篇 适配和删格布局 框架 组件篇 切换组件 输入框 选择器 日期选择 开关 备选项 按钮选择 上传 搜索 表格 翻页 步骤 Popup Tooltip Popover 提示 标记 视觉篇 颜色 字体 按钮 页面示例 （持续更新 ） 本文档使用 看云 构建 - 2 - Fairy Design Fairy Design 介绍 校精灵的Saas后台操作系统是一个庞大而复杂的to B网站 ，交互频繁 ，信息繁多 ，并且时常需要变动和拓展 ，需 要设计和开发能够快速的作出相应。所以在产品设计初期 ，需要对系统的整体框架和信息做好规划和预设 ，并指 导产品、交互、设计、前端各个环节的工作原则。 版本 v1.0 更新时间 2018年7月9日 设计人员 视觉规范 ：Yolin 框架、交互规范、规范文档 ：Yannik 本文档使用 看云 构建 - 3 - Fairy Design 设计资源 我们提供了完善的设计原则、视觉规范、交互规范、设计实例和设计资源文件 （Sketch文档 ），来规范老员工的 设计风格并让新员工快速熟悉业务 ，更快融入工作中。 UI kit下载 链接 https///s/12Tfdfb5j3aGrlT7QBQfMfg 密码 3idd 本文档使用 看云 构建 - 4 - 规范规定 规范规定 规范规定 规范文档建立过程中 ，我们经过深度的思考和多方的确认 ，至少能够确定在短期内 ，按照规范设计是为最优的方 式 （随着时间的迁移 ，规范也应该跟随技术、市场做相应的更新 ）所以设计团队成员需要严格遵守设计规范的规 定 ，否则会根据情节严重性处以相应的处罚 ： 1. 设计方案确认时 ，不按照规范 ，若必要充分条件支持设计 ，则处以3元红包罚款 （以红包形式发在群 里 ）。 2. 若不按照规范的设计方案最终由前端开发完成 ，则处以10元红包罚款 （以红包形式发给开发 ），并重新 设计。 本文档使用 看云 构建 - 5 - 设计价值观 设计价值观 设计价值观 设计价值观为校精灵的设计者提供评价设计好坏的内在标准 ，并提供有效的设计实践所遵循的规则。同时 ， 它启示并激发了设计原则和设计模式 ，为具体的设计问题提供向导和一般解决方案。 轻量感 Saas后台系统本身信息就很繁多 ，所以在设计上我们要通过亲密性原则、对齐原则、重复原则等让界面看起来清 爽 ，让用户在处理任务时候有轻松愉悦的感受。例如去除繁杂的样式 ，简化组件样式 ，减少大面积的色块 ，适当 留白让页面有呼吸感 ，若要使用动效 ，应该要是快速的、轻盈的。让用户在长时间使用后台系统时专注于业务数 据本身 ，而非页面设计 ，这样能降低使用的疲劳感。 掌控感 对于校精灵Saas后台系统 ，掌控任务的是用户 ，而不是系统。用户在进行点击、跳转等交互操作时 ，要给予用户 明确的反馈 ，让用户能够知道现在操作的状态、反应和结果等。例如适当增加简单的入场动画让用户知道刚刚的 操作发生了什么 ，按钮点击后的样式 ，交互成功、失败、无效等状态的提示 ，都应该是明确、直观的 ，让用户时 刻保持对系统的掌控感。 信任感 一个专业并且稳定的产品能够给用户带来信任、可靠的感觉 ，这是一种感受 ，例如文案、操作流程的统一性 ，让 本文档使用 看云 构建