智能家居app界面設(shè)計(jì)

智能家居APP界面設(shè)計(jì)引言關(guān)于設(shè)計(jì)指南目的與準(zhǔn)那么：統(tǒng)一頁(yè)面視覺(jué)設(shè)計(jì)語(yǔ)匯，標(biāo)準(zhǔn)頁(yè)面交互方式，建立標(biāo)準(zhǔn)化的操作法那么，提升App頁(yè)面的可視化效果以及易用性，提供整體流暢的高品質(zhì)用戶體驗(yàn)。用途：1〕作為設(shè)計(jì)師設(shè)計(jì)新的設(shè)備頁(yè)面時(shí)的參考手冊(cè)；2〕作為合作客戶自行設(shè)計(jì)設(shè)備控制頁(yè)面時(shí)的設(shè)計(jì)標(biāo)準(zhǔn)，以便良好地對(duì)接現(xiàn)有的App頁(yè)面，符合用戶的使用習(xí)慣；3〕作為協(xié)作團(tuán)隊(duì)實(shí)現(xiàn)頁(yè)面時(shí)的幫助文檔。實(shí)例app的頁(yè)面主界面采用扁平化的設(shè)計(jì)風(fēng)格為主，在按鈕的處理上參加一些輕擬物的細(xì)節(jié)。1.根本準(zhǔn)那么設(shè)備頁(yè)面設(shè)計(jì)，頁(yè)面基準(zhǔn)750*1334，參照iOS的適配方式對(duì)640*1136，640*960，1242*2208*進(jìn)行適配。1.1.色彩主色#06A4F0/RGB〔6,164,240〕使用范圍導(dǎo)航欄，底部標(biāo)簽欄，列表頁(yè)圖標(biāo)。輔色#F56735/RGB〔245,103,53〕使用范圍按鈕圖標(biāo)的工作狀態(tài)突出顯示的內(nèi)容。前景色#FFF/RGB〔255,255,255〕使用范圍列表類內(nèi)容的背景色。背景色#F5F5F8/RGB〔245,245,248〕使用范圍一般類的背景，設(shè)備控制頁(yè)面的常用背景。注：原那么上單個(gè)頁(yè)面內(nèi)應(yīng)少于四種色彩，色彩較多時(shí)，盡可能保證主色與輔色的使用處于較大比例，嚴(yán)格控制非標(biāo)準(zhǔn)的色彩的使用量。不同元素之間，形成足夠的色相以及明度的反差，保證顯示內(nèi)容的可見(jiàn)性，如當(dāng)白色字體遇到明度較高的背景時(shí)，可以采用灰色背景襯托。1.2字體1.3分隔元素2設(shè)計(jì)原那么2.1布局顯示內(nèi)容與操控內(nèi)容別離顯示內(nèi)容位于控制頁(yè)面上部，顯示設(shè)備最主要的狀態(tài)包括：設(shè)備當(dāng)前開(kāi)/關(guān),無(wú)開(kāi)關(guān)狀態(tài)的設(shè)備的顯示當(dāng)前在線；定時(shí)預(yù)約；顯示預(yù)約已啟用延時(shí)操作；顯示延時(shí)操作的生效時(shí)間模式；檔位；功能；信息圖式突出顯示方式，或者大字號(hào)加粗字體顯示，如：溫度，濕度，各種需要重點(diǎn)顯示的數(shù)字。主要功能/常用功能放置在功能控制區(qū)開(kāi)關(guān)按鈕通常處于視覺(jué)的主導(dǎo)地位，在設(shè)備按鍵數(shù)量非常少的情況下，適當(dāng)放大開(kāi)關(guān)的尺寸，減少圖面的空曠感，模式選擇按鈕可以做成點(diǎn)擊切換式，或者全部列出〔突出不同模式之間的互斥關(guān)系〕;按鈕尺寸大小以及間距分布應(yīng)合理，滿足可用性要求：在retina屏幕上，可操作面長(zhǎng)寬不低于88px,相鄰按鈕的間距不低于90px。模塊化設(shè)計(jì)，將低頻次使用功能形成組件非常用功能/通用模塊化功能，在設(shè)備頁(yè)面底部標(biāo)簽欄形式放置，模塊化組件與主頁(yè)面自由切換，將預(yù)約，歷史曲線，或者比擬詳細(xì)的參數(shù)設(shè)置，以及外鏈功能，放入底部標(biāo)簽欄；2.2圖標(biāo)圖標(biāo)的設(shè)計(jì)設(shè)備圖標(biāo)需形象化設(shè)備的特征，適當(dāng)加以抽象和變形，設(shè)計(jì)語(yǔ)義表達(dá)清晰而凝練，操作類圖標(biāo)突出操作動(dòng)作本身以及動(dòng)作產(chǎn)生的結(jié)果，建議將實(shí)物和抽象的符號(hào)相結(jié)合，必要時(shí)可以在圖形中輔以字母，準(zhǔn)確傳達(dá)操作內(nèi)容，并保證與相似圖標(biāo)同時(shí)出現(xiàn)時(shí)能夠有效區(qū)分，不造成歧義；設(shè)備圖標(biāo)與操作圖標(biāo)，應(yīng)保證與現(xiàn)有的圖標(biāo)庫(kù)內(nèi)的圖標(biāo)風(fēng)格和諧統(tǒng)一；包括圖標(biāo)的線與色塊的比例，圖標(biāo)的線條風(fēng)格不沖突；保持接近1：1的寬高比，本身形態(tài)長(zhǎng)寬比例比擬大時(shí)，可以采用輔助形狀補(bǔ)充；對(duì)于單色圖標(biāo)，優(yōu)先采用iconfont的字體文件〔SVG〕輸出，在出現(xiàn)圖標(biāo)顏色雙色及以上時(shí)，采用切圖的形式，也可以將切圖與web組件相結(jié)合的方式。圖例3常用組件開(kāi)關(guān)多種尺寸，按構(gòu)圖需要以及功能重要度進(jìn)行縮放；按鈕圖標(biāo)按鈕式按鈕狀態(tài):啟用，未啟用，按下，失效；調(diào)節(jié)控件旋鈕式無(wú)極調(diào)節(jié)式步進(jìn)調(diào)