智能家居app界面设计.docx

: .
智能家居APP界面设计引言关于设计指南目的与准如此：统一页面视觉设计语汇，规X页面交互方式，建立标: .
智能家居APP界面设计引言关于设计指南目的与准如此：统一页面视觉设计语汇，规X页面交互方式，建立标准化的操作法如此，提升App页面的可视化效果以与易用性，提供整体流畅的高品质用户体验。
用途：1〕作为设计师设计新的设备页面时的参考手册；2〕作为合作客户自行设计设备控制页面时的设计规X,以便良好地对接现有的App页面，符合用户的使用习惯；3〕作为协作团队实现页面时的帮助文档。
实例app的页面主界面
•wjdSELLT100%.
三■我的设备+我的设留队恣m连接■在线4台6台(。■咕出1采用扁平化的设计风格为主，在按钮的处理上参加一些轻拟物的细节。
设备页面设计，页面基准750*1334,参照iOS的适配方式对640*1136,640*960,1242*2208*进展适配。
主色#06A4F0/RGB〔6,164,240〕使用X围导航栏，底部标签栏，列表页图标。
辅色#F56735/RGB〔245,103,53〕使用X围按钮图标的工作状态突出显示的内容。
前景色#FFF/RGB〔255,255,255〕使用X围内表类内容的背景色。
背景色#F5F5F8/RGB〔245,245,248〕使用X围一般类的背景，设备控制页面的常用背景。
注：原如此上单个页面内应少于四种色彩，色彩较多时，尽可能保证主色与辅色的使用处于较大比例，严格控制非标准的色彩的使用量。不同元素之间，形成足够的色相以与明度的反差，保证显示内容的可见性，如当白色字体遇到明度较高的背景时，可以采用灰色背景衬托。
标题#fff36px加粗个人中心
名称
正文hO
颜色代码
#fff
字号
30px
使用场景效果
状态导示
插座客厅
■#505052
30px
正文内容
冷风机
■#787879
30px
辅助显示
已连接
■#06o4f0
30px
强调显示
情景模式
二1#c8c8c830px
提示文字/失效文字
正文hl
.#06a4f0
60px
强调显示
3
60px
数字指数|
26°C
正文h2
■#06a4f0
48px
强调显示
3
正文h3
■#787879
24px
说明性文字
设备
正文h4
■#06a4f0
22px
底部标签栏
延时操作

分隔线lpx#06d4f0
Ipxffelelel
导航按键背景A背景#000透明度20%2设计原如此显示内容位于控制页面上部，显示设备最主要的状态包括：
设备当前开/关，无开关状态的设备的显示当前在线；定时预约；显示预约已启用延时操作；显示延时操作的生效时间模式；档位；功能；信息图式突出显示方式，或者大字号加粗字体显示，如：温度，湿度，各种需要重点显示的数字。
开关按钮通常处于视觉