IOS9 規(guī)范筆記(理論)

設(shè)計原則


遵從(Deference):UI應(yīng)該有助于用戶更好地理解內(nèi)容并與之交互,并且不會分散用戶對內(nèi)容本身的注意力

清晰(Clarity):各種尺寸的文字清晰易讀揉燃;圖標(biāo)應(yīng)該精確醒目炊汤,去除多余的修飾抢腐,突出重點迈倍,以功能驅(qū)動設(shè)計啼染。

深度(Depth):視覺的層次感和生動的交互動畫會賦予UI新的活力迹鹅,有助于用戶更好地理解并讓用戶在使用過程中感到愉悅斜棚。

無論你是重新設(shè)計現(xiàn)有的應(yīng)用打肝,還是重新開發(fā)一個新應(yīng)用粗梭,請基于下列方法進行設(shè)計考慮:

首先滞乙,去除掉UI元素讓應(yīng)用的核心功能突顯出來斩启,并明確之間的相關(guān)性兔簇。

然后垄琐,使用iOS的主題來定義UI并進行用戶體驗設(shè)計狸窘。完善細(xì)節(jié)設(shè)計翻擒,以及適當(dāng)合理的修飾陋气。

最后巩趁,保證你設(shè)計的UI可以適配各種設(shè)備和各種操作模式,使得用戶在不同場景下都可以享受你的應(yīng)用褒脯。

總結(jié):凸顯內(nèi)容和功能

? ? ? ? 功能驅(qū)動設(shè)計(設(shè)計跟隨內(nèi)容番川,讓用戶界面成為內(nèi)容的支撐)

? ? ? ? 細(xì)節(jié)優(yōu)化提升體驗颁督。



設(shè)計方法


用半透明UI元素樣式來暗示背后的內(nèi)容。半透明的控件元素(比如控制中心)可以提供了上下文的使用場景吠裆,幫助用戶看到更多可用的內(nèi)容试疙,并可以起到短暫的提示作用祝旷。

使用大量留白怀跛。留白可以使重要的內(nèi)容和功能更加醒目储耐、更易理解。留白還可以傳達一種平靜和安寧的心理感受晦攒,它可以使一個應(yīng)用看起來更加聚焦和高效脯颜。

充分利用整個屏幕栋操。

讓顏色簡化UI矾芙,使用一個主題色。

用層次來進行交流葱绒,在不同的視圖層級上展現(xiàn)內(nèi)容地淀,用以表達層次結(jié)構(gòu)和位置帮毁,這樣可以幫助用戶了解屏幕上對象之間的關(guān)系作箍。

使用布局來溝通.?布局包含的不僅僅是一個應(yīng)用屏幕上的UI元素外觀荧止。你的布局跃巡,應(yīng)該告訴用戶什么是最重要的素邪,他們的選擇是什么,以及事物是如何關(guān)聯(lián)起來的猪半。

? ? ? ? ? ? ·遵循從左到右的習(xí)慣

? ? ? ? ? ? ? ?·使用不同的視覺化重量和平衡來告訴用戶當(dāng)前屏顯元素的主次關(guān)系兔朦。(大小對比,顏色對比...)



對齊/尺寸


使用對齊來讓閱讀更舒緩磨确,讓分組和層次之間更有秩序沽甥。對齊讓應(yīng)用看起來整潔而有序乏奥,也讓用戶在滑動整屏內(nèi)容時更容易定位和專注于重要信息摆舟。不同信息組的縮進與對齊讓它們之間的關(guān)聯(lián)更清晰,也讓用戶更容易找到某個控件邓了。

確保用戶在內(nèi)容處于默認(rèn)尺寸時便可清楚明白它的主要內(nèi)容與含義恨诱。例如,用戶應(yīng)當(dāng)無需水平滾動就能看到重要的文本骗炉,或不用放大就可以看到主體圖像照宝。

準(zhǔn)備好改變字體大小。用戶期望大多數(shù)應(yīng)用都可以響應(yīng)他們在iOS的設(shè)置中設(shè)定的字體大小痕鳍。為了適應(yīng)一些文本大小的變化硫豆,你也許需要調(diào)整布局;想要得到更多文本顯示相關(guān)的信息笼呆,請查閱下文“顏色與字體”中相關(guān)的內(nèi)容熊响。

盡量避免UI上不一致的表現(xiàn)。在一般情況下诗赌,有著相似功能的控件看起來也應(yīng)該類似汗茄。用戶常常認(rèn)為他們看到的不同總有原因,而且他們傾向于花時間去嘗試(譯者按:因此為了避免用戶做無用的嘗試铭若,建議類似的功能外觀都保持一樣洪碳。)

給每個互動的元素充足的空間递览,從而讓用戶容易操作這些內(nèi)容和控件。常用的點按類控件的大小是44 x 44點(points)瞳腌。



布局


應(yīng)該讓用戶時刻清楚自己當(dāng)前在應(yīng)用中所處的位置绞铃,及如何前往目的頁面。無論使用哪種適合你的應(yīng)用結(jié)構(gòu)的導(dǎo)航嫂侍,最重要的是用戶訪問內(nèi)容的路徑要有邏輯儿捧、可預(yù)期和易于追溯。

使用導(dǎo)航欄(Navigation Bar)幫助用戶輕松訪問分層內(nèi)容挑宠。導(dǎo)航欄的標(biāo)題可以顯示用戶當(dāng)前所處的層級菲盾,而后退按鈕可以回到上一層級。

使用標(biāo)簽欄(Tab Bar)顯示同類型的內(nèi)容或功能各淀。標(biāo)簽欄很適合于扁平信息結(jié)構(gòu)懒鉴,可以讓用戶在分類之間隨意切換,而不用在意當(dāng)前所處的位置碎浇。



使用交互性元素吸引點擊


為了暗示交互性临谱,設(shè)計時會使用很多線索,包括點擊的反饋南捂、顏色吴裤、位置旧找、上下文溺健、表意明確的圖標(biāo)標(biāo)簽等。并不需要過于修飾元素來向用戶展示可交互性钮蛛。

一個關(guān)鍵的顏色可以給用戶提供很強的視覺指引鞭缭,尤其是沒有冗余的其它顏色時。為了對比魏颓,使用藍(lán)色來標(biāo)記可交互的元素岭辣,同時能提供統(tǒng)一的、易識別的視覺風(fēng)格甸饱。

在內(nèi)容區(qū)域沦童,必要時可以給按鈕添加邊界或背景。位于欄(Bar)叹话、動作列表(Action Sheet)和?警告框(Alert)中的按鈕可以不需要邊界偷遗,因為用戶知道在這種區(qū)域中大多數(shù)選項是可交互的。但是在內(nèi)容區(qū)域驼壶,有必要使用邊界或背景將按鈕從其他內(nèi)容中區(qū)分出來氏豌。例如,音樂热凹,時鐘泵喘,照片泪电,App Store在一些特別的場景中使用這種按鈕。




標(biāo)準(zhǔn)手勢



反饋有助于理解


反饋幫助用戶了解應(yīng)用當(dāng)前在做什么纪铺,發(fā)現(xiàn)接下來可以做什么以及理解他們動作產(chǎn)生的結(jié)果相速。UIKit的操作和視圖提供了很多反饋類型。

盡可能將狀態(tài)或其他的反饋信息整合到UI中鲜锚。用戶不進行操作或不跳出當(dāng)前內(nèi)容就能獲得需要的信息是最好的和蚪。例如,郵箱將當(dāng)前的狀態(tài)顯示在不影響當(dāng)前內(nèi)容的?工具欄上烹棉。

避免顯示不必要的提醒對話框攒霹。對話框是很強的反饋機制,只有在傳遞非常重要浆洗,且可操作的信息時才需要使用它催束。如果用戶常看到很多沒有重要信息的對話框伏社,他們很快就會忽略所有對話框提醒抠刺。想要了解更多信息



顏色與字體


在iOS系統(tǒng)中,顏色會用于表明交互摘昌,傳遞活性以及提供視覺連續(xù)性速妖。內(nèi)置的應(yīng)用程序選擇使用那些看起來更具個性的、純粹聪黎、干凈的顏色罕容,并輔以或亮或暗的背景組合。

如果你要創(chuàng)建多樣的自定義顏色稿饰,要確保它們能夠和諧共存锦秒。例如,如果你的應(yīng)用的基本風(fēng)格是柔和的色調(diào)喉镰,你就應(yīng)該創(chuàng)建一個協(xié)調(diào)的柔和色調(diào)的色板用于整個應(yīng)用旅择。

注意在不同情境下的顏色對比。例如侣姆,如果在導(dǎo)航欄的背景與欄按鈕標(biāo)題之間沒有足夠的對比生真,按鈕就會很難被用戶看到。一個快速但不嚴(yán)謹(jǐn)?shù)姆椒ㄊ峭ㄟ^將設(shè)備置于不同的光照環(huán)境之中(包括晴朗的室外)來測試設(shè)備上的顏色是否具有足夠的對比度捺宗。

雖然在設(shè)備上查看你的應(yīng)用能夠在一定程度上幫助你找到需要調(diào)整的地方柱蟀,但這仍代替不了能產(chǎn)生可靠結(jié)果的更科學(xué)客觀的方法。這種方法涉及到判定前景色和背景色的亮度值是否符合一定的比率偿凭。這個比率值可以通過在線對比度計算器或者根據(jù)WCAG2.0標(biāo)準(zhǔn)中提供的公式自己計算獲得产弹。你應(yīng)用中理想的顏色對比度應(yīng)該是4.5:1或更高。


你可能想要增加某些文字的權(quán)重,來幫助用戶可視化你的內(nèi)容的層次結(jié)構(gòu)痰哨,或者把用戶的注意力吸引到特定的詞或短語胶果。另外,你可以通過增加較小文字的權(quán)重和減小較大文字的權(quán)重斤斧,在多個不同字號的早抠、相鄰的標(biāo)簽中建立視覺凝聚。字體權(quán)重在內(nèi)容的整體風(fēng)格和表達中有重要影響撬讽,因此你可以選擇特定的權(quán)重來達到設(shè)計目的蕊连。

文本尺寸的響應(yīng)式變化需要優(yōu)先考慮內(nèi)容。并不是所有的內(nèi)容對于用戶都是同等重要的游昼。當(dāng)用戶選擇更大的文本尺寸時甘苍,他們是想要使他們關(guān)注的內(nèi)容更容易閱讀;他們并不總是想要屏幕上的每個單詞都更大烘豌。

例如载庭,當(dāng)用戶選擇具備更大易用性的文本尺寸時,郵件將會以更大的尺寸顯示郵件的主題和內(nèi)容廊佩,而對于那些沒那么重要的信息——如時間和收件人——則采用較小的尺寸囚聚。

確保一個自定義字體在不同尺寸下的所有類型都具備可讀性。實現(xiàn)這一效果的方法之一是效仿在不同的文本尺寸下iOS系統(tǒng)呈現(xiàn)字體樣式的一些方法标锄。例如:

·文本永遠(yuǎn)都不應(yīng)該小于11點(points)顽铸,即使是用戶選擇極小的文本尺寸。相較而言料皇,內(nèi)容樣式使用17點的字號作為 ? ? 大尺寸谓松,這也是默認(rèn)的文本字號。

·通常來說瓶蝴,字號與行距值在每一檔的文本尺寸設(shè)置中差別為1點毒返。唯一例外的是兩種標(biāo)題的樣式,它們在極小舷手、小和 ? 中尺寸的設(shè)置中均使用相同的字號、行距和字距劲绪。

·在最小的三種文本尺寸中男窟,字間距相對較大;而在最大的三中文本尺寸中贾富,字間距相對緊湊歉眷。

·標(biāo)題和內(nèi)容的樣式使用相同的字體尺寸,同時颤枪,為了區(qū)分標(biāo)題與內(nèi)容樣式汗捡,標(biāo)題樣式使用更重的值。

·導(dǎo)航控制欄的文本使用相同的字號,而內(nèi)容文本的樣式則使用大尺寸的設(shè)置(值為17點)扇住。

·文本總是使用常規(guī)或者中重春缕,一般不適用輕或者加粗。


圖標(biāo)和圖形



每個應(yīng)用都需要一個漂亮的圖標(biāo)艘蹋。用戶常常會在看到應(yīng)用圖標(biāo)的時候便建立起對應(yīng)用的第一印象锄贼,并以此評判應(yīng)用的品質(zhì)、作用以及可靠性女阀。

·應(yīng)用圖標(biāo)是整個應(yīng)用品牌的重要組成部分宅荤。將圖標(biāo)設(shè)計當(dāng)成一個講述應(yīng)用背后的故事,以及與用戶建立情感連接的 ? ? 機會浸策。

·最好的應(yīng)用圖標(biāo)是獨特的冯键,整潔的,打動人心的庸汗,讓人印象深刻的琼了。

·一個好的應(yīng)用圖標(biāo)應(yīng)該在不同的背景以及不同的規(guī)格下都同樣美觀。為了豐富大尺寸圖標(biāo)的質(zhì)感而添加的細(xì)節(jié)有可能 ? 讓圖標(biāo)在小尺寸時變得不清晰夫晌。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末雕薪,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子晓淀,更是在濱河造成了極大的恐慌所袁,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件凶掰,死亡現(xiàn)場離奇詭異燥爷,居然都是意外死亡,警方通過查閱死者的電腦和手機懦窘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門前翎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人畅涂,你說我怎么就攤上這事港华。” “怎么了午衰?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵立宜,是天一觀的道長。 經(jīng)常有香客問我臊岸,道長橙数,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任帅戒,我火速辦了婚禮灯帮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己钟哥,他們只是感情好迎献,可當(dāng)我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著瞪醋,像睡著了一般忿晕。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上银受,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天践盼,我揣著相機與錄音,去河邊找鬼宾巍。 笑死咕幻,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的顶霞。 我是一名探鬼主播肄程,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼选浑!你這毒婦竟也來了蓝厌?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤古徒,失蹤者是張志新(化名)和其女友劉穎拓提,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體隧膘,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡代态,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了疹吃。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蹦疑。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖萨驶,靈堂內(nèi)的尸體忽然破棺而出歉摧,到底是詐尸還是另有隱情,我是刑警寧澤篡撵,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布判莉,位于F島的核電站,受9級特大地震影響育谬,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜帮哈,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一膛檀、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦咖刃、人聲如沸泳炉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽花鹅。三九已至,卻和暖如春枫浙,著一層夾襖步出監(jiān)牢的瞬間刨肃,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工箩帚, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留真友,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓紧帕,卻偏偏與公主長得像盔然,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子是嗜,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容