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

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