在iOS的三大基本設(shè)計原則，清晰、遵從、深度中，無外乎都強調(diào)設(shè)計的合理性，這三個詞也是本文的關(guān)鍵。

“我們觀看世界的視角與感受世界的方法可能有千萬種，只要能夠下意識地將這些角度和感受方法運用到日常生活中，就是設(shè)計?！痹性照f的這句話聽起來很容易，但是深入實踐起來，卻發(fā)現(xiàn)自己掌握的不過冰山一角而已。

在iOS的三大基本設(shè)計原則，清晰、遵從、深度中，無外乎都強調(diào)設(shè)計的合理性，這三個詞也是本文的關(guān)鍵。

清晰Clarity -視黨展

所謂清晰就是在整個系統(tǒng)中，文字在每一個尺寸都要是清晰易讀的，圖標精確而清晰，裝飾精巧而適合，使得用戶更易理解功能。負空間、顏色、字體、圖形和界面元素巧妙突出重要內(nèi)容并傳達交互性。

設(shè)計要點1:顏色

UI設(shè)計早期是比較推崇高級灰的，因為早期的UI設(shè)計師多是從平面設(shè)計轉(zhuǎn)過來的。但是這種高級灰的顏色會使得我們的界面顯得不是特別的清晰，這就違背了IOS設(shè)計原則之一的清晰(如左圖)。

所以為了保證色彩的辨識度，盡量多用-些高純度的顏色(如右圖)，我們應(yīng)該盡量避免過多低純度顏色在界面設(shè)計中的使用。同時，也要關(guān)注色盲人群的體驗。

（注意:高級灰不是灰色，是指純度不高的顏色。肉黃、青蘋果、粉色、春日青、粉紅這些顏色錦楚離級灰色?；疑矊儆诟呒壔业囊环N，所以高級灰并不單指灰色-種。）

設(shè)計要點2:排版

對任何信息進行排布的時候，首先必須要掌握的是對齊/重復(fù)/親密/對比，此乃貫穿設(shè)計的四大原則。

正如左圖當中，①同一模塊下文字與文字之間沒有遵循對齊原則，文字大小不統(tǒng)一;②按鈕與按鈕、按鈕與信息模塊親密關(guān)系不夠清晰;所以總體給人排版比較混亂的感覺，用戶體驗較差。

再看右圖，①圖標風(fēng)格顏色統(tǒng)- - .，遵循重復(fù)原則;②同-種類功能入口集中排布遵循親密原則;③此模塊為此頁面最重要的模塊，全部信息采用居中對齊，與其他模塊形成對比突出重點，同時遵循對齊原則;④此模塊下文字全部左對齊，遵循對齊原則。

遵從Deference-交互層

遵從指的是整個頁面的交互，用一句話來表述就是:從哪里來回哪里去。流暢的動畫和清晰美觀的界面可以幫助人們了解和與內(nèi)容交互，而不應(yīng)該(因為太過花哨)干擾到用戶的使用。內(nèi)容通常充滿整個屏幕，而半透明和模糊常常暗示有更多內(nèi)容。

比如ios自帶的一些轉(zhuǎn)場交互，以設(shè)置頁面為例，點擊設(shè)置圖標的一瞬間，會有一個由小及大的動畫效果，讓用戶清楚的知道自己點開的是設(shè)置頁面。

點擊通知，通知頁面從右側(cè)向左劃入，遵循從哪里來回哪里去的原則，返回的時候又從左向右滑回去。

深度Depth-結(jié)構(gòu)層

使用不同的視覺層級和真實的運動效果來傳達層次的感覺，賦予界面活力，并促進用戶的理解。讓用戶通過觸摸和探索來發(fā)現(xiàn)程序的功能不僅會使用戶產(chǎn)生喜悅感、更方便了解功能，還能使用戶關(guān)注到額外內(nèi)容。在對內(nèi)容進行導(dǎo)航時，層級的轉(zhuǎn)場效果提供一種有深度的感覺。

如下圖:一個界面大體可以分為主任務(wù)層(最高層級)、底板層(中間層級)、背景層(最低層級)

如圖：有小提琴照片的為產(chǎn)品頁面的主元素，白色為其底版色。深色頁面在小提琴的頁面之下，從而可以實現(xiàn)小提琴頁面可以蓋住深色頁面的交互效果。凸顯產(chǎn)品在z軸層級的層次區(qū)分。

總結(jié):

視覺層-清晰:從文本到圖標都應(yīng)該是<清晰>易讀的，巧妙地突出重點且表達不同的可交互性(入口在哪)。

交互層-遵從:去<遵從>清晰流暢的動態(tài)效果易于用戶理解內(nèi)容并進行交互(我正去向去哪)。

結(jié)構(gòu)層-深度:從視覺上的動態(tài)效果讓用戶理解結(jié)構(gòu)層的<深度>，從始至終掌握當前所在位置(我現(xiàn)在在哪)。

當然IOS的三大規(guī)范不同的人也會有不同的理解，歡迎提出寶貴意見。

原文鏈接：https://www.ui.cn/detail/457822.html