01 BS_交互设计方案及UI规范 0807.pdf

BS_交互设计方案及UI规范 2018-06-31 泰华智慧-研发管理部 UI组 Parsing 分析 现代 Modern 典型界面 Typical interface 高格调 High style 地图 Map 轻量化 High-end 布局 增删改查 其他 Layout ` Vocational Others 效率 Efficiency 公司通用BS系统 ，我们从整体布局、地图、增删改查、登录界面等方面出发 ，拟定交互及视觉设计原则。 参与形式 目前一般是产品经理在OA提交UI工单 ，交付原型图到UI组进行效果图设计 ，设计过程中会与研发及需求进行 详细沟通讨论 ，效果图定稿以后 ，UI会提供界面图标切图以及界面UI参考文档 （html格式 ），以供开发同事 使用。 （随着任务管理系统的逐步完善，参与形式或将有所调整，如有调整会及时告知大家） 规范由来 依据谷歌推出的MD规范 ，结合公司产品特点 ，定义的一套 UI交互及视觉规范。目的一是为了保证多成员参与 的项 目保持视觉一致性 ，减少设计出错率 ，保证用户层对产品的体验一致性 ，塑造品牌调性 ；二是提炼可复用 组件 ，搭建组件库 ，提高产品开发效率。 视觉定位 简洁明快的互联网风格 目录 01 02 03 04 05 整体布局 强地图与弱地图 增删改查 ／弹窗 登录界面 典型界面库 Ø 统览 Ø 强地图时 Ø 默认模糊检索 Ø 交互规范 Ø List列表 Ø 顶部区域 Ø 弱地图时 Ø 高级复杂检索 Ø UI规范 Ø 表单 Ø 左侧菜单 Ø 列表及其操作按钮 Ø 地图 Ø 主内容区 Ø 弹窗出现场景 Ø 流程 Ø 跳转应用场景 1.1整体布局--统览 1.1整体布局--统览 交互原则 整体布局分为顶部区域 ，左侧菜单 ，主内容区三大部分。 交互原则 ，整体的布局主要考虑用户的网页浏览习惯采用最 常见也是最简约的上下结构。 顶部导航区 ：包含logo与系统名称 ，子系统模块及系统常用 功能快捷入口图标。 顶部导航条下方区域为左右布局 ：左侧菜单 +右侧内容区 图1 左侧为当前子系统的菜单栏 ，根据用户的功能需求最多可支 持到三级。 右