氦氪HEKR设计指南

v1.0.0 by hekr.me设计团队

Hekr UED 设计指南索引引言 1.基本准则 2.设计原则 3.常用组件 4.信息提示框 5.设计范例

引言

关于设计指南 目的与准则：统一页面视觉设计语汇，规范页面交互方式，建立标准化的操作法则，提升App页面的可视化效果以及易用性，提供整体流畅的高品质用户体验。

用途： 1）作为设计师设计新的设备页面时的参考手册； 2）作为合作客户自行设计设备控制页面时的设计规范，以便良好地对接现有的App页面，符合用户的使用习惯； 3）作为协作团队实现页面时的帮助文档。

实例Hekr App2.0的页面 主界面

菜单页

采用扁平化的设计风格为主，在按钮的处理上加入一些轻拟物的细节。

1.基本准则

设备页面设计， 页面基准 7501334，参照iOS的适配方式对6401136 ，640960，12422208*进行适配。

1.1.色彩

主色 #06A4F0 / RGB （6,164,240）

使用范围导航栏，底部标签栏，列表页图标。

辅色 #F56735 / RGB （245,103,53）

使用范围按钮图标的工作状态突出显示的内容。

前景色#FFF /RGB （255,255,255）

使用范围列表类内容的背景色。

背景色#F5F5F8 /RGB （245,245,248）

使用范围一般类的背景，设备控制页面的常用背景。

注：原则上单个页面内应少于四种色彩，色彩较多时，尽可能保证主色与辅色的使用处于较大比例，严格控制非标准的色彩的使用量。不同元素之间，形成足够的色相以及明度的反差，保证显示内容的可见性，如当白色字体遇到明度较高的背景时，可以采用灰色背景衬托。

1.2字体

1.3 分隔元素

2设计原则

2.1布局

2.1.1显示内容与操控内容分离

显示内容位于控制页面上部，显示设备最主要的状态包括：

设备当前开/关, 无开关状态的设备的显示当前在线；定时预约；显示预约已启用延时操作；显示延时操作的生效时间模式；档位；功能；

信息图式突出显示方式，或者大字号加粗字体显示，如：温度，湿度，各种需要重点显示的数字。

2.1.2主要功能/常用功能放置在功能控制区

开关按钮通常处于视觉的主导地位，在设备按键数量非常少的情况下，适当放大开关的尺寸，减少图面的空旷感，模式选择按钮可以做成点击切换式，或者全部列出（突出不同模式之间的互斥关系）; 按钮尺寸大小以及间距分布应合理，满足可用性要求：在retina屏幕上，可操作面长宽不低于88px , 相邻按钮的间距不低于90px。