家庭数字中心-设计篇(十七)如何保持一致的风格元素

15 阅读1分钟

经过不断的调整和试错,最终确定了以下的统一风格。

全局的、页面级别的、局部组件的,从影响范围来划分,大概有这3种。

全局

字体、皮肤颜色、侧边栏、是否全屏铺满。

页面

如家庭成员页面,分为如下几个部分,顶部标题、查询条件、按钮区域、列表区域(卡片、表格)、卡片、分页,都是统一的风格。

在各个列表页面,如用药记录、就诊记录等都是如此的。

如顶部区域中,都是图标+菜单名字+说明图标+卡片/列表视图切换图标,右侧是操作按钮。

查询条件,默认都是一行,多余的查询条件会收缩起来。查询区域按钮区域,都是默认靠右,有重置、搜索按钮。

列表区域,有卡片/列表,每一张卡片,和表格列表都是统一的风格。

在这种表单中,所有表单元素也是相同的风格,顶部按钮返回、保存,所有页面都保持一致。

统计页面有图表/表格2种方式展示,用户可以自由切换,默认显示图表,如运动记录统计,

局部组件

菜单文字旁边图标、图表下载按钮、底部版权、时间范围输入框、上传文件组件、家庭成员头像信息、列表中的卡片等总结保持同一种风格,有迹可循。