交互

分解IOS設(shè)計(jì)的三大原則——清晰、遵從、深度

6097

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

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

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

清晰Clarity -視黨展

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

設(shè)計(jì)要點(diǎn)1:顏色

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

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

（注意:高級灰不是灰色，是指純度不高的顏色。肉黃、青蘋果、粉色、春日青、粉紅這些顏色錦楚離級灰色。灰色也屬于高級灰的一種，所以高級灰并不單指灰色-種。）

設(shè)計(jì)要點(diǎn)2:排版

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

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

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

遵從Deference-交互層

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

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

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

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

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

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