iOS7 APP界面設(shè)計(jì)教程第一章《為iOS7的規(guī)范而設(shè)計(jì)》及統(tǒng)一設(shè)計(jì)規(guī)范整理
iOS7系統(tǒng)界面和按鈕平面化突顯,內(nèi)置應(yīng)用圖標(biāo)、解鎖畫(huà)面、主屏幕、通知中心等界面更多地采用極簡(jiǎn)元素和新的調(diào)色方案,蘋(píng)果核心復(fù)雜立體的真實(shí)“擬物”風(fēng)格完全已被削弱,包括之前的皮革、陰影、木質(zhì)等設(shè)計(jì)元素也進(jìn)行了大大弱化,系統(tǒng)界面更簡(jiǎn)單、更干凈了。
為iOS7的規(guī)范而設(shè)計(jì)
遵從:新UI更好的幫助用戶(hù)理解內(nèi)容并與之互動(dòng),但卻不會(huì)分散用戶(hù)對(duì)內(nèi)容本身的注意力。
清晰:各種大小的文字易讀,圖標(biāo)醒目,去除了多余的修飾,重點(diǎn)突出,很好地突顯了設(shè)計(jì)理念。
深度:視覺(jué)層次和生動(dòng)的交互動(dòng)作賦予UI新的活力,不但幫助用戶(hù)更好的理解新UI的操作并讓用戶(hù)在使用過(guò)程中感到驚喜。
如何入手設(shè)計(jì)呢?必須按照以下的方式進(jìn)行:
首先,去除了UI元素讓app的核心功能呈現(xiàn)的更加直接并強(qiáng)調(diào)其相關(guān)性。
其次,直接使用iOS7的系統(tǒng)主題讓其成為app的UI,這樣能給用戶(hù)統(tǒng)一的視覺(jué)感受。
縱觀全局,以?xún)?nèi)容和功能為核心來(lái)指導(dǎo)設(shè)計(jì),從前的設(shè)計(jì)模式可以先放到一邊。
APP界面設(shè)計(jì)統(tǒng)一設(shè)計(jì)規(guī)范:
APP界面設(shè)計(jì)規(guī)范指導(dǎo)APP設(shè)計(jì)過(guò)程中的設(shè)計(jì)標(biāo)準(zhǔn)。根據(jù)統(tǒng)一的設(shè)計(jì)標(biāo)準(zhǔn),使得整個(gè)APP在視覺(jué)上統(tǒng)一。提高用戶(hù)對(duì)APP的產(chǎn)品認(rèn)知和操作便捷性。
APP界面設(shè)計(jì)統(tǒng)一規(guī)范的重要性:
統(tǒng)一的標(biāo)準(zhǔn),一、便于在設(shè)計(jì)過(guò)程中的團(tuán)隊(duì)合作,二、提高用戶(hù)對(duì)APP的產(chǎn)品認(rèn)知和操作便捷性。
APP界面設(shè)計(jì)統(tǒng)一規(guī)范大概內(nèi)容:
1.遵循統(tǒng)一的準(zhǔn)則,確定標(biāo)準(zhǔn)并遵循;
2.顏色使用恰當(dāng),遵循對(duì)比原則:色彩標(biāo)準(zhǔn)、色彩對(duì)比,突出內(nèi)容、顯示測(cè)試;
3.光標(biāo)、圖標(biāo)和指示圖片、地圖等:統(tǒng)一的構(gòu)圖布局,色調(diào)、對(duì)比度、色階和風(fēng)格;
4.Font:中文采用宋體,英文采用Microsoft Sans Serif。大小:MSS字體8磅,宋體小五號(hào)字(9磅)五號(hào)字體(10磅);
5.文字表達(dá):在提示信息、幫助文檔中的。用詞、修飾及標(biāo)點(diǎn)符號(hào)等等;
6.控件風(fēng)格、布局;
7.布局的順序:從左到右,從上到下;
8.快捷鍵、彈出菜單;
9.用戶(hù)交互:按鈕狀態(tài)、彈出窗口位置、執(zhí)行動(dòng)作提示信息(視覺(jué)和聽(tīng)覺(jué),甚至的觸覺(jué)的);
10.聯(lián)機(jī)幫助:HELP文檔。
下面是針對(duì)iOS7 APP界面設(shè)計(jì)的一些人機(jī)交互方面的總結(jié):
1、以?xún)?nèi)容為核心
2、充分利用整個(gè)屏幕。無(wú)需使用邊框、底圖等等多余的UI元素,讓內(nèi)容擴(kuò)展到屏幕邊緣。
3、盡量減少視覺(jué)修飾和擬物化設(shè)計(jì)的使用。
UI面板、漸變和陰影有時(shí)會(huì)讓UI元素顯得很厚重,致使搶了內(nèi)容的風(fēng)頭。應(yīng)該以?xún)?nèi)容為核心,讓UI成為內(nèi)容的支撐。
4、嘗試使用半透明底板。半透明的底板可以讓用戶(hù)看到后面的內(nèi)容,在某些場(chǎng)景下起到了上下文提示的作用,另一個(gè)角度上來(lái)說(shuō),也讓用戶(hù)(比以前)看到了更多內(nèi)容。
5、保證清晰度。 ??保證清晰度是另一個(gè)方法,以確保你的app中內(nèi)容始終是核心。
6、大量留白。空白讓重要內(nèi)容和功能顯得更加醒目。此外,空白可以傳達(dá)一種平靜和安寧的視覺(jué)感受,它可以使一個(gè)app看起來(lái)更加聚焦和高效。
7、讓顏色簡(jiǎn)化UI。一個(gè)主題色——比如在記事本中使用的黃色——讓重要區(qū)域更加醒目并巧妙地表示交互性。這同時(shí)也給了一個(gè)app一個(gè)統(tǒng)一的視覺(jué)主題。
8、通過(guò)使用系統(tǒng)字體確保易讀性。iOS7的系統(tǒng)字體自動(dòng)調(diào)整行間距和行的高度,使閱讀時(shí)文本清晰易讀,無(wú)論用戶(hù)選擇何種大小的字號(hào)都表現(xiàn)良好。
9、使用無(wú)邊框的按鈕。按鈕名稱(chēng)、箭頭以及系統(tǒng)顏色向用戶(hù)展示了交互元素,這些內(nèi)容替代了原先的帶有形狀的按鈕。聯(lián)系人界面使用了系統(tǒng)色藍(lán)色箭頭文字展示了按鈕的導(dǎo)航性。
10、用深度來(lái)體現(xiàn)層次。?iOS7經(jīng)常在不同的層級(jí)上展現(xiàn)內(nèi)容,用以表達(dá)分組和位置,并幫助用戶(hù)了解在屏幕上的對(duì)象之間的關(guān)系。
全站高品質(zhì)素材免費(fèi)下載!