iOS7 APP界面設(shè)計教程第一章《為iOS7的規(guī)范而設(shè)計》及統(tǒng)一設(shè)計規(guī)范整理

iOS7系統(tǒng)界面和按鈕平面化突顯,內(nèi)置應(yīng)用圖標、解鎖畫面、主屏幕、通知中心等界面更多地采用極簡元素和新的調(diào)色方案,蘋果核心復(fù)雜立體的真實“擬物”風格完全已被削弱,包括之前的皮革、陰影、木質(zhì)等設(shè)計元素也進行了大大弱化,系統(tǒng)界面更簡單、更干凈了。

為iOS7的規(guī)范而設(shè)計

遵從:新UI更好的幫助用戶理解內(nèi)容并與之互動,但卻不會分散用戶對內(nèi)容本身的注意力。

清晰:各種大小的文字易讀,圖標醒目,去除了多余的修飾,重點突出,很好地突顯了設(shè)計理念。

深度:視覺層次和生動的交互動作賦予UI新的活力,不但幫助用戶更好的理解新UI的操作并讓用戶在使用過程中感到驚喜。

如何入手設(shè)計呢?必須按照以下的方式進行:

首先,去除了UI元素讓app的核心功能呈現(xiàn)的更加直接并強調(diào)其相關(guān)性。

其次,直接使用iOS7的系統(tǒng)主題讓其成為app的UI,這樣能給用戶統(tǒng)一的視覺感受。

縱觀全局,以內(nèi)容和功能為核心來指導(dǎo)設(shè)計,從前的設(shè)計模式可以先放到一邊。

APP界面設(shè)計統(tǒng)一設(shè)計規(guī)范:

APP界面設(shè)計規(guī)范指導(dǎo)APP設(shè)計過程中的設(shè)計標準。根據(jù)統(tǒng)一的設(shè)計標準,使得整個APP在視覺上統(tǒng)一。提高用戶對APP的產(chǎn)品認知和操作便捷性。

APP界面設(shè)計統(tǒng)一規(guī)范的重要性:

統(tǒng)一的標準,一、便于在設(shè)計過程中的團隊合作,二、提高用戶對APP的產(chǎn)品認知和操作便捷性。

APP界面設(shè)計統(tǒng)一規(guī)范大概內(nèi)容:

1.遵循統(tǒng)一的準則,確定標準并遵循;

2.顏色使用恰當,遵循對比原則:色彩標準、色彩對比,突出內(nèi)容、顯示測試;

3.光標、圖標和指示圖片、地圖等:統(tǒng)一的構(gòu)圖布局,色調(diào)、對比度、色階和風格;

4.Font:中文采用宋體,英文采用Microsoft Sans Serif。大小:MSS字體8磅,宋體小五號字(9磅)五號字體(10磅);

5.文字表達:在提示信息、幫助文檔中的。用詞、修飾及標點符號等等;

6.控件風格、布局;

7.布局的順序:從左到右,從上到下;

8.快捷鍵、彈出菜單;

9.用戶交互:按鈕狀態(tài)、彈出窗口位置、執(zhí)行動作提示信息(視覺和聽覺,甚至的觸覺的);

10.聯(lián)機幫助:HELP文檔。

ios7-redesigned-icons-psd css-ios7-icons

下面是針對iOS7 APP界面設(shè)計的一些人機交互方面的總結(jié):

1、以內(nèi)容為核心

2、充分利用整個屏幕。無需使用邊框、底圖等等多余的UI元素,讓內(nèi)容擴展到屏幕邊緣。

3、盡量減少視覺修飾和擬物化設(shè)計的使用。

UI面板、漸變和陰影有時會讓UI元素顯得很厚重,致使搶了內(nèi)容的風頭。應(yīng)該以內(nèi)容為核心,讓UI成為內(nèi)容的支撐。

4、嘗試使用半透明底板。半透明的底板可以讓用戶看到后面的內(nèi)容,在某些場景下起到了上下文提示的作用,另一個角度上來說,也讓用戶(比以前)看到了更多內(nèi)容。

5、保證清晰度。 ??保證清晰度是另一個方法,以確保你的app中內(nèi)容始終是核心。

6、大量留白。空白讓重要內(nèi)容和功能顯得更加醒目。此外,空白可以傳達一種平靜和安寧的視覺感受,它可以使一個app看起來更加聚焦和高效。

7、讓顏色簡化UI。一個主題色——比如在記事本中使用的黃色——讓重要區(qū)域更加醒目并巧妙地表示交互性。這同時也給了一個app一個統(tǒng)一的視覺主題。

8、通過使用系統(tǒng)字體確保易讀性。iOS7的系統(tǒng)字體自動調(diào)整行間距和行的高度,使閱讀時文本清晰易讀,無論用戶選擇何種大小的字號都表現(xiàn)良好。

9、使用無邊框的按鈕。按鈕名稱、箭頭以及系統(tǒng)顏色向用戶展示了交互元素,這些內(nèi)容替代了原先的帶有形狀的按鈕。聯(lián)系人界面使用了系統(tǒng)色藍色箭頭文字展示了按鈕的導(dǎo)航性。

10、用深度來體現(xiàn)層次。?iOS7經(jīng)常在不同的層級上展現(xiàn)內(nèi)容,用以表達分組和位置,并幫助用戶了解在屏幕上的對象之間的關(guān)系。

 

每天更新,
全站高品質(zhì)素材免費下載!