讀iOS人機(jī)界面準(zhǔn)則(iOS7 版)筆記

? ? ? ?近日讀了郎啟旭翻譯的《iOS人機(jī)界面準(zhǔn)則》奴饮,首先對(duì)其翻譯表示感謝篇梭。個(gè)人感覺(jué)從產(chǎn)品設(shè)計(jì)和具體開發(fā)上還是有很多內(nèi)容可以借鑒弓坞,去掉我認(rèn)為的常識(shí)部分和目前對(duì)我而言不是特別重要的部分蜒简,整理摘抄部分筆記如下蚤氏,一來(lái)可以用作記錄,二來(lái)可以和大家分享一下扰她。

一兽掰、依從(Deference)。

1徒役、用戶界面(UI)應(yīng)當(dāng)有助于用戶理解內(nèi)容并與之互動(dòng)孽尽,而非對(duì)抗。

2忧勿、充分利用整塊屏幕杉女。重新考量對(duì)插圖和視覺(jué)框架的使用瞻讽,可以考慮 讓內(nèi)容擴(kuò)展到屏幕邊緣⊙妫「天氣」就是一個(gè)很好的范例:漂亮的全 屏界面非常直觀地呈現(xiàn)出某個(gè)地點(diǎn)當(dāng)前天氣的關(guān)鍵信息速勇,而且還有 多余空間可以顯示每個(gè)小時(shí)的天氣數(shù)據(jù)。

天氣



3坎拐、重新考量模擬現(xiàn)實(shí)的視覺(jué)表現(xiàn)烦磁。浮雕、漸變和陰影效果有時(shí)會(huì)讓界 面元素變得沉重哼勇,進(jìn)而喧賓奪主都伪。相反,要突出內(nèi)容并讓界面扮演 一個(gè)輔助性的角色积担。

地圖

4陨晶、使用系統(tǒng)字體以確保易讀性。iOS 7 的系統(tǒng)字體能夠自動(dòng)調(diào)整字間 距和行高磅轻, 這會(huì)讓文本內(nèi)容易于閱讀珍逸, 且在任意字號(hào)下都顯示良 好。無(wú)論你是使用系統(tǒng)字體還是自定義字體聋溜,請(qǐng)確保使用「動(dòng)態(tài)字 體」(Dynamic Type)谆膳,這樣在用戶選擇不同的字號(hào)時(shí)你的 app 可以作出響應(yīng)。

二撮躁、啟動(dòng)和停止

1漱病、避免要求用戶提供設(shè)置信息,代之以:

關(guān)注 80% 用戶的需求把曼。這樣杨帽,大部分用戶不需要進(jìn)行任何設(shè)置,因?yàn)槟愕?app 已經(jīng)按他們期望的方式設(shè)置好 了嗤军。如果有一些功能只有極少數(shù)用戶可能需要或者大部分用戶只會(huì)用一次注盈,請(qǐng)拋棄這樣的功能。

盡可能通過(guò)其他方式獲取信息叙赚。如果你可以使用任何內(nèi)置程序或設(shè)備中用戶所提供的信息老客,那就從系統(tǒng)中獲取 這些信息,而不要讓用戶再輸一次震叮。

如果你確實(shí)需要提供設(shè)置信息胧砰,請(qǐng)讓人們?cè)谀愕?app 中輸入。然后苇瓣,盡快存儲(chǔ)這些信息(例如尉间,在你 app 的 設(shè)置中)。這樣一來(lái),在有可能體驗(yàn)到你 app 的樂(lè)趣前人們不會(huì)被迫切換到 iOS 的「設(shè)置」中了哲嘲。如果人們 將來(lái)需要修改這些信息贪薪,可以在任何時(shí)間前往 app 的設(shè)置頁(yè)面進(jìn)行修改。

盡可能將登錄延后眠副。最好在用戶沒(méi)有登錄時(shí)就可以通過(guò)導(dǎo)航來(lái)瀏覽你的 app 并使用部分功能古掏。用戶在在可以做點(diǎn)有 用的事情前通常已經(jīng)從那些強(qiáng)制他們登錄的 app 中離開了。

一般來(lái)說(shuō)侦啸,以設(shè)備的默認(rèn)方向啟動(dòng)。在 iPhone 上丧枪,其默認(rèn)方向是豎屏光涂;在 iPad 上,則是設(shè)備當(dāng)前的方向拧烦。如果你 的 app 只支持橫屏忘闻,你應(yīng)該始終以橫屏方式啟動(dòng),然后讓用戶在需要時(shí)旋轉(zhuǎn)設(shè)備恋博。

2齐佳、iOS 應(yīng)用永遠(yuǎn)不會(huì)顯示一個(gè)「關(guān)閉」或「退出」選項(xiàng)。人們退出一個(gè) app 的方式就是切換到另一個(gè) app债沮、返回主屏 幕或者讓設(shè)備進(jìn)入睡眠模式炼吴。

當(dāng)人們從你的 app 切換離開,iOS 的多任務(wù)處理會(huì)將其掛到后臺(tái)疫衩,并切換到新 app 的界面中硅蹦。為了應(yīng)對(duì)這種情況, 你應(yīng)當(dāng):

盡快并盡可能頻繁地在合理范圍內(nèi)存儲(chǔ)用戶數(shù)據(jù)闷煤。這樣做是因?yàn)樘幱诤笈_(tái)的 app 隨時(shí)都有可能被退出或結(jié)束童芹。

當(dāng) app 停止時(shí),盡可能最多地保存當(dāng)前狀態(tài)的細(xì)節(jié)鲤拿。這樣的話假褪,當(dāng)人們切換回來(lái)時(shí)就不會(huì)失去之前所處的情 境。例如近顷,如果你的 app 有顯示? ? ?可滾動(dòng)的數(shù)據(jù)生音,那在停止時(shí)要保存當(dāng)前所處的滾動(dòng)位置。你可以前往「State Preservation and Restoration」了解更多關(guān)于高效重建和恢復(fù) app 狀態(tài)的方式幕庐。

3久锥、永遠(yuǎn)不要以程序化的方式自動(dòng)退出一個(gè) iOS app;

4异剥、如果所有的功能都不可用瑟由,就向用戶展示一個(gè)界面去描述問(wèn)題并建 議用戶如何糾正。這能給用戶一種反饋,讓他們覺(jué)得你的 app 并 沒(méi)有出錯(cuò)歹苦。這也會(huì)賦予用戶以控制感青伤,讓他們來(lái)決定是采取糾正措 施并繼續(xù)使用你的 app,還是切換到另一個(gè) app殴瘦。

所有功能不可用反饋

如果只有部分功能不可用狠角,那在用戶用到這些功能時(shí)提供解釋界面 或者提示。這樣的話蚪腋,人們還可以使用 app 的其他功能丰歌。如果你 決定使用警告框,請(qǐng)確保只在用戶嘗試使用不可用的功能時(shí)展示屉凯。

局部功能不可用提示

三立帖、布局

1、給每個(gè)交互元素以足夠的間距悠砚,以便用戶對(duì)內(nèi)容和控件進(jìn)行操作晓勇。可點(diǎn)擊控件的點(diǎn)擊區(qū)域不小于 44 x 44 點(diǎn)灌旧。

交互元素尺寸

2绑咱、將重要內(nèi)容和功能放到更重要的位置,以便用戶可以更容易地關(guān)注主要任務(wù)枢泰。一些可行的方法是描融,將主要元素放置在 屏幕的上半部分,并靠近屏幕左側(cè)(基于從左至右的閱讀習(xí)慣)宗苍;

3稼稿、盡可能避免在界面中出現(xiàn)不一致的樣式。通常來(lái)說(shuō)讳窟,擁有相似功能的元素看上去也應(yīng)該很像让歼。用戶常常會(huì)認(rèn)為那些他 們所看到的不一致背后必定富有深意,然后花時(shí)間去理解它們丽啡。

四谋右、導(dǎo)航

1、永遠(yuǎn)要讓用戶知道自己正處于應(yīng)用中的什么位置补箍,并清楚如何去往他的下一個(gè)目標(biāo)改执。

五、品牌化

1坑雅、不要擠占人們所在意的內(nèi)容的空間辈挂。

2、不要在整個(gè) app 中處處展現(xiàn)你的標(biāo)識(shí)裹粤。

六终蒂、顏色和字體

1、如果你要?jiǎng)?chuàng)建多種自定義顏色,請(qǐng)確保它們?cè)谝黄饡?huì)協(xié)調(diào)拇泣。

2噪叙、注意在不同情境下的顏色對(duì)比。例如霉翔,如果在導(dǎo)航欄背景和條欄按鈕標(biāo)題之間沒(méi)有足夠的對(duì)比睁蕾,用戶會(huì)很難看到這些 按鈕。一個(gè)經(jīng)驗(yàn)法則是债朵,需要區(qū)分的顏色之間的對(duì)比度至少要達(dá)到 50%子眶。在設(shè)備上查看顏色對(duì)比以測(cè)試效果,這要 在不同的光線情況中進(jìn)行序芦,包括晴天的戶外壹店。

建議:一種發(fā)現(xiàn)需要更高對(duì)比度的區(qū)域的方式是,降低 UI 的飽和度并以灰度模式查看其顯示效果芝加。如果你在交互和 非交互元素或灰度版本的背景之間很難發(fā)現(xiàn)區(qū)別,你可能需要增加這些元素之間的對(duì)比射窒。

3藏杖、當(dāng)你自定義條欄的顏色時(shí),要將半透明的條欄和 app 內(nèi)容考慮進(jìn)去脉顿。如果你需要?jiǎng)?chuàng)建一個(gè)條欄顏色以匹配特定顏 色蝌麸,例如當(dāng)前品牌中的一個(gè)顏色,你可能需要試驗(yàn)許多顏色才能得到你想要的效果艾疟。條欄的外觀同時(shí)受到 iOS 內(nèi)置的 半透明效果和條欄背后的 app 內(nèi)容的影響来吩。

4、要考慮色盲人群蔽莱。大多數(shù)色盲用戶很難區(qū)分紅色和綠色弟疆。測(cè)試你的 app,確保你沒(méi)有在任何地方將紅色和綠色作為區(qū) 分兩種狀態(tài)或值的唯一方式(一些圖像編輯軟件有這樣的工具可以幫助你驗(yàn)證色盲的情況)盗冷。通常怠苔,使用不止一種方 式去表示元素的交互性是一個(gè)不錯(cuò)的想法。

5仪糖、考慮選擇一個(gè)主題色以顯示交互性和狀態(tài)柑司。內(nèi)置 app 中的主題色包括「標(biāo)簽」的黃色和「日歷」的紅色。如果你要 定義一個(gè)主題色以顯示交互性和狀態(tài)锅劝,確保你的 app 中的其他顏色不會(huì)與之沖突攒驰。

6、避免在交互和非交互元素中使用相同的顏色故爵。顏色是用戶界面元素顯示其交互性的一種方式玻粪。如果交互和非交互元素 用一樣的顏色,那么用戶會(huì)很難知道他們點(diǎn)的是哪里。

7奶段、顏色增進(jìn)溝通饥瓷,但并不總是你所希望的方式。每個(gè)人看到的顏色都不同痹籍,而且在許多文化中人們對(duì)顏色的含義如何對(duì) 應(yīng)也有所不同呢铆。花點(diǎn)時(shí)間去了解你所使用的顏色在其他國(guó)家和文化中可能會(huì)被如何解讀蹲缠。你需要盡可能確保 app 中 的顏色傳達(dá)著合適的信息棺克。

8、大部分情況下线定,不要讓顏色干擾用戶娜谊。除非顏色是你的 app 主旨中不可或缺的部分,否則它通常應(yīng)僅是一種恰到好 處的升華斤讥。

9纱皆、在響應(yīng)文字大小的變化時(shí),優(yōu)先讓內(nèi)容變化芭商。對(duì)用戶來(lái)說(shuō)派草,不是所 有內(nèi)容都同等重要。當(dāng)用戶選擇一個(gè)更大的文字大小時(shí)铛楣,他們想讓 他們所在意的內(nèi)容易于閱讀近迁;他們一般并不希望頁(yè)面中的每一個(gè)字 都變大。

? ? 例如簸州,當(dāng)用戶在「輔助功能」中選擇了一個(gè)更大的文字大小鉴竭,「郵 件」中的收件人和消息正文以大號(hào)文字顯示,但一些不太重要的文 本——例如時(shí)間和發(fā)件人——還是以較小大小顯示岸浑。

郵件

七搏存、應(yīng)用圖標(biāo)

1、應(yīng)用圖標(biāo)是產(chǎn)品品牌的重要組成部分矢洲。要將設(shè)計(jì)圖標(biāo)看成是向用戶講述產(chǎn)品故事以及構(gòu)建情感聯(lián)系的機(jī)會(huì)祭埂。

2、優(yōu)秀的應(yīng)用圖標(biāo)都是獨(dú)特兵钮、簡(jiǎn)潔蛆橡、動(dòng)人和令人難忘的。

3掘譬、應(yīng)用圖標(biāo)在不同尺寸不同背景上都要顯示良好泰演。

八、條欄圖標(biāo)

1葱轩、為幫助你決定在導(dǎo)航欄或工具欄中是使用文本還是圖標(biāo)睦焕,你可以算算同一時(shí)間有多少圖標(biāo)在屏幕上可見藐握。屏幕上出現(xiàn) 過(guò)多的圖標(biāo)會(huì)讓 app 看上去很復(fù)雜。另外要注意垃喊,這一決定可能因 iPhone app 和 iPad app 而有所不同猾普,因?yàn)?iPad app 往往在條欄文字上有更多空間

九、術(shù)語(yǔ)和措辭

1本谜、確保你所使用的術(shù)語(yǔ)能被用戶理解初家。

2、使用輕松友好的語(yǔ)氣乌助,但不要過(guò)分親密溜在。要避免語(yǔ)氣生硬或過(guò)于正式,但也不要過(guò)于虛情假意或曲意逢迎他托。要記住掖肋, 用戶可能會(huì)頻繁看到你的 UI 中的文字,起初看似精妙的表達(dá)看多了也許會(huì)變得令人生厭赏参。

3志笼、像報(bào)紙編輯那樣思考,找出那些冗余和不必要的字詞把篓。如果你界面中的文本簡(jiǎn)短而直接籽腕,用戶便能迅速輕松地理解。 找出那些最重要的信息纸俭,簡(jiǎn)明地表述并突出顯示,這樣一來(lái)人們就不用在一大堆文字中尋找他們要找的信息或下一步 要做什么了南窗。

4揍很、盡量少使用全部大寫的詞語(yǔ)。偶爾使用全部大寫的詞語(yǔ)有助于吸引人們的注意力万伤,但當(dāng)整段文字都是大寫時(shí)窒悔, 它會(huì)變得難以閱讀,看上去像是在對(duì)用戶大吼大叫敌买。

十简珠、設(shè)計(jì)原則

1、美學(xué)完整性

美學(xué)完整性不是用來(lái)衡量 app 的藝術(shù)表現(xiàn)或風(fēng)格特征虹钮,而是指 app 的外觀與行為是否與其功能相襯一致聋庵。

2、一致性

一致性可以讓用戶將 app 中的某部分界面的經(jīng)驗(yàn)和技巧復(fù)用到其他地方芙粱,或者從一個(gè) app 復(fù)用到另一個(gè) app祭玉。一致 性的 app 不是對(duì)其他 app 的簡(jiǎn)單復(fù)制,也不是風(fēng)格上的一成不變春畔,相反脱货,它關(guān)注用戶所習(xí)慣的方式和標(biāo)準(zhǔn)岛都,并提供 一個(gè)具有內(nèi)在一致性的體驗(yàn)。

要判斷一個(gè) iOS app 是否符合一致性原則振峻,可以通過(guò)以下幾個(gè)問(wèn)題來(lái)考量:

App 是否和 iOS 標(biāo)準(zhǔn)保持一致臼疫?它是否正確地使用了系統(tǒng)控件、視圖和圖標(biāo)扣孟?是否以用戶所期望的方式利用了 設(shè)備的特性烫堤?

App 自身是否具有內(nèi)部一致性?文本內(nèi)容是否使用了統(tǒng)一的用辭和風(fēng)格哈打?同樣的圖標(biāo)是不是通常意味著相同的 意思塔逃?當(dāng)用戶在不同的位置執(zhí)行同一個(gè)操作時(shí)是否符合其預(yù)期?自定義的界面元素外觀和其行為是否保持一 致料仗?

App 是否在合理范圍內(nèi)與之前的版本保持一致湾盗?術(shù)語(yǔ)和含義是不是仍然相同?基本概念和主要功能是否基本不 變立轧?

十一格粪、為任務(wù)量身定制

優(yōu)秀的 iOS app 能夠在易于使用和目的清晰之間平衡用戶界面的自定義。要達(dá)到這個(gè)平衡氛改,一定要在設(shè)計(jì)過(guò)程中盡 早去考慮個(gè)性化定制帐萎。

定制要行之有據(jù)。理想情況下胜卤,定制的 UI 會(huì)輔助用戶想要完成的任務(wù)疆导,并提升其體驗(yàn)。你需要盡可能讓你 app 的任 務(wù)去驅(qū)動(dòng)你定制設(shè)計(jì)的決策葛躏。

盡可能避免增加用戶的認(rèn)知負(fù)擔(dān)澈段。用戶熟悉標(biāo)準(zhǔn) UI 元素的外觀和行為,所以不需要停下來(lái)去思考如何使用它們舰攒。但 當(dāng)他們面對(duì)那些和標(biāo)準(zhǔn) UI 外觀和行為完全不一樣的元素時(shí)败富,先前的經(jīng)驗(yàn)毫無(wú)用處。除非你獨(dú)特的元素可以讓任務(wù)執(zhí) 行更容易摩窃,否則用戶可能不會(huì)喜歡被迫去學(xué)習(xí)新的流程兽叮,而這些流程又不會(huì)在其他 app 中用到。

保持內(nèi)部一致性猾愿。你的 UI 自定義得越多鹦聪,在你的 app 中這些自定義元素的外觀和行為保持一致就更為重要。如果用 戶需要花時(shí)間去學(xué)習(xí)如何使用你所創(chuàng)建的不熟悉控件蒂秘,那他們會(huì)希望可以依賴這些經(jīng)驗(yàn)混跡整個(gè)應(yīng)用椎麦。

始終為內(nèi)容服務(wù)。由于這些標(biāo)準(zhǔn)元素是如此常見材彪,所以它們不會(huì)和內(nèi)容有任何的不和諧观挎。當(dāng)你在自定義界面時(shí)琴儿,要確 保其不會(huì)蓋過(guò)人們所關(guān)注的內(nèi)容。例如嘁捷,如果你的 app 可以讓人看視頻造成,你可能需要選擇設(shè)計(jì)一個(gè)自定義的播放控 件。但是無(wú)論是使用自定義還是標(biāo)準(zhǔn)的播放控件雄嚣,更重要的是控件是否在視頻開始后隱藏并輕點(diǎn)時(shí)重新浮現(xiàn)晒屎。

重新設(shè)計(jì)標(biāo)準(zhǔn)控件前要三思。如果你正在計(jì)劃重新設(shè)計(jì)一個(gè)標(biāo)準(zhǔn)控件缓升,要確保你的新設(shè)計(jì)提供了和標(biāo)準(zhǔn)控件一樣多的 信息鼓鲁。例如,如果你設(shè)計(jì)的開關(guān)控件不能表現(xiàn)出兩個(gè)相反的狀態(tài)港谊,用戶可能不會(huì)意識(shí)到這是一個(gè)兩態(tài)控件骇吭。

務(wù)必對(duì)自定義的 UI 元素進(jìn)行充分的用戶測(cè)試。在測(cè)試期間歧寺,仔細(xì)觀察用戶是否能夠準(zhǔn)確了解你界面元素的作用燥狰,以 及他們是否可以輕易地與之交互。例如斜筐,你設(shè)計(jì)了一個(gè)點(diǎn)擊區(qū)域小于 44*44 點(diǎn)的控件龙致,那用戶在點(diǎn)擊時(shí)就會(huì)碰到麻 煩∏炅矗或者目代,如果你創(chuàng)建了一個(gè)會(huì)對(duì)輕掃和輕點(diǎn)產(chǎn)生不同響應(yīng)的視圖,那么確保這個(gè)視圖所提供的功能是值得人們和它 互動(dòng)時(shí)耗費(fèi)的注意力的嗤练。

十二榛了、iCloud

1、尊重用戶的 iCloud 空間潭苞。

iCloud 是用戶花錢購(gòu)買的有限資源累贤,牢記這一點(diǎn)很重要响逢。你應(yīng)當(dāng)使用 iCloud 去存儲(chǔ)那些 用戶生成和知悉的信息, 避免用其去存儲(chǔ) app 資源或者你能夠重新生成的內(nèi)容士聪。

2遮婶、確定哪些類型的信息會(huì)存儲(chǔ)在 iCloud 中蝗碎。

除存儲(chǔ)用戶生成的文檔和其他內(nèi)容之外,你也可以存儲(chǔ)少量的數(shù)據(jù)旗扑,例如 用戶在程序中的狀態(tài)或偏好設(shè)置蹦骑。存儲(chǔ)這類信息你需要使用 iCloud key-value storage。例如臀防,如果用戶使用你的 應(yīng)用閱讀一本雜志眠菇,你可能要用 iCloud key-value storage 去存儲(chǔ)他們翻過(guò)的上一頁(yè)边败,以便當(dāng)他們?cè)谄渌O(shè)備中再 次打開這本雜志時(shí)可以從中斷的地方繼續(xù)閱讀。

3捎废、如果你使用 iCloud key-value storage 去存儲(chǔ)偏好設(shè)置笑窜,確認(rèn)其是用戶希望在他所有設(shè)備上生效的設(shè)置。

例如登疗,一 些設(shè)置在家里比在工作環(huán)境中更有用排截。在某些情況下,比起在用戶的 iCloud 賬戶中存儲(chǔ)偏好設(shè)置辐益,放到你 app 的服 務(wù)器上會(huì)更有意義断傲,這樣,無(wú)論 iCloud 是否啟用智政,這些設(shè)置都能生效认罩。

4、確保你的程序在 iCloud 不可用時(shí)的行為合理女仰。

例如猜年,如果用戶退出了 iCloud 賬戶,你應(yīng)用不能使用 iCloud疾忍;或進(jìn) 入飛行模式乔外, iCloud 變得不可用。在這些情況下一罩,用戶執(zhí)行了一個(gè)切斷讀取 iCloud 的操作杨幼,所以你的程序不需要 告訴他們這一點(diǎn)。然而聂渊,在這些用戶做出的改變?cè)谄渌O(shè)備上不可見時(shí)差购,可以適當(dāng)?shù)馗嬖V用戶,直至 iCloud 恢復(fù)訪 問(wèn)汉嗽。

5欲逃、避免給用戶一個(gè)創(chuàng)建「本地」文件的選項(xiàng)。

無(wú)論你的程序是否支持 iCloud饼暑,你都不應(yīng)當(dāng)鼓勵(lì)用戶去關(guān)注設(shè)備專用的文 件系統(tǒng)稳析。相反,你要讓用戶關(guān)注他們的內(nèi)容在 iCloud 中的普遍可用性弓叛。

6彰居、適時(shí)地自動(dòng)更新內(nèi)容。

最好是用戶不必做出任何操作就能在你的應(yīng)用種讀取最新內(nèi)容撰筷。然而陈惰,你也需要在尊重用戶設(shè) 備空間和帶寬限制與這樣的體驗(yàn)之間把握平衡。如果你的用戶使用大體積文檔毕籽,可以適當(dāng)?shù)刈屗麄兛刂剖欠駨?iCloud 下載更新抬闯。如果你需要這樣做井辆,設(shè)計(jì)一種方式以顯示文檔在 iCloud 上可用的新版本。當(dāng)用戶選擇更新文檔時(shí)画髓,如果 下載耗時(shí)超過(guò)幾秒掘剪,務(wù)必提供適當(dāng)?shù)姆答仭?/p>

7、向用戶警告刪除文檔的后果奈虾。

當(dāng)用戶在一個(gè)支持 iCloud 的 app 中刪除文檔時(shí)夺谁,文檔會(huì)從用戶的 iCloud 賬戶和其他 所有設(shè)備中移除。在你執(zhí)行刪除之前肉微,恰當(dāng)?shù)淖龇ㄊ钦故疽粋€(gè)警告框描述其后果并獲得確認(rèn)匾鸥。

十三、編輯菜單

1碉纳、為確保你 app 的編輯菜單行為符合用戶期望勿负,你應(yīng)當(dāng):

顯示與當(dāng)前情境相符的命令。例如劳曹,如果什么都沒(méi)選中奴愉,菜單就不應(yīng)包含「復(fù)制」或「粘貼」,因?yàn)檫@些命令只在選 中區(qū)域中生效铁孵。同樣锭硼,如果選中了一些東西,菜單里就不應(yīng)包含「選擇」蜕劝。如果你要在一個(gè)自定義視圖中支持編輯菜 單檀头,要確保菜單中顯示的命令和當(dāng)前情境相符。

讓菜單和你的界面布局相適應(yīng)岖沛。iOS 在插入點(diǎn)或選中區(qū)域的上方或下方(取決于可用空間)顯示編輯菜單暑始,并在此顯 示菜單指針,以便用戶可以看到菜單命令是如何與內(nèi)容聯(lián)系起來(lái)的婴削。如果需要廊镜,你可以在菜單出現(xiàn)前由程序決定好位 置,避免 UI 的重要部分被遮擋唉俗。

支持兩種呼出菜單的手勢(shì)嗤朴。盡管觸碰并按住的手勢(shì)是用戶呼出編輯菜單最主要的方式,但他們也會(huì)在文本視圖中雙擊 一個(gè)單詞去選中它互躬,同時(shí)呼出菜單播赁。如果你要在自定義視圖中支持菜單颂郎,確保能響應(yīng)這兩種手勢(shì)吼渡。此外,你可以定義 用戶雙擊時(shí)默認(rèn)選中的對(duì)象乓序。

避免在界面中放置一個(gè)在編輯菜單中已經(jīng)存在的命令按鈕寺酪。例如坎背,比起提供一個(gè)「復(fù)制」按鈕,讓用戶使用編輯菜單 執(zhí)行復(fù)制操作會(huì)更好寄雀,因?yàn)橛脩魰?huì)想為什么在你的 app 中會(huì)有兩種方式去做同樣的事情得滤。

如果對(duì)用戶有益,考慮支持選中靜態(tài)文本盒犹。例如懂更,用戶可能想要復(fù)制一張圖片的標(biāo)題,但他們不見得想復(fù)制條欄標(biāo)題 標(biāo)簽或頁(yè)面標(biāo)題急膀,例如「賬戶」沮协。在文本視圖中,應(yīng)當(dāng)默認(rèn)選中一個(gè)詞卓嫂。

不要讓按鈕標(biāo)題可以選中慷暂。一個(gè)可選中的按鈕標(biāo)題會(huì)讓用戶很難在不觸發(fā)按鈕的情況下呼出編輯菜單。一般來(lái)說(shuō)晨雳,像 按鈕這樣的元素都不應(yīng)該被選中行瑞。

支持復(fù)制和粘貼的同時(shí),支持撤銷和重做餐禁。在用戶改變想法時(shí)血久,他們通常期望可以

2、如果你需要自定義編輯菜單項(xiàng)坠宴,遵循以下這些準(zhǔn)則:

自定義項(xiàng)目列在所有系統(tǒng)項(xiàng)目之后洋魂。不要在系統(tǒng)項(xiàng)目中插入你自定義制的項(xiàng)目。

保持合理的自定義菜單項(xiàng)目數(shù)喜鼓。不要用太多的選擇讓你的用戶崩潰副砍。

為你自定義的菜單項(xiàng)選用簡(jiǎn)單明了的名字,并確保其準(zhǔn)確描述了該命令的作用庄岖。

十四豁翎、撤銷和重做

用戶通過(guò)搖晃設(shè)備可以發(fā)起「撤銷」操作,這會(huì)顯示一個(gè)警告框來(lái)讓用戶:

撤銷他們剛剛輸入的內(nèi)容

重做之前未完成的輸入

取消撤銷操作

通過(guò)定義以下內(nèi)容隅忿,在你的 app 中以更通用的方式支持撤銷操作:

用戶可以撤銷或重做的操作

什么時(shí)候你的 app 應(yīng)當(dāng)把一個(gè)搖晃事件看成是搖一搖撤銷手勢(shì)

要支持多少步的撤銷

如需了解如何在代碼中執(zhí)行這一行為心剥,請(qǐng)參閱「Undo Architecture」。如果你要在你的 app 中支持撤銷和重做背桐, 遵循以下準(zhǔn)則以提供好的用戶體驗(yàn):

用簡(jiǎn)短的描述性短語(yǔ)告知用戶正在撤銷或重做的具體內(nèi)容优烧。iOS 會(huì)自動(dòng)在撤銷警告框的按鈕標(biāo)題上顯示「撤銷」和 「重做」(字詞后包含一個(gè)空格),但你需要用一兩個(gè)詞來(lái)描述用戶可以撤銷或重做的行為链峭。例如畦娄,你可能會(huì)有「刪 除姓名」或「修改地址」這樣的文本,那使用諸如「撤銷刪除姓名」或「重做修改地址」這樣的按鈕標(biāo)題。(注意在 警告框中的「取消」按鈕不可以被修改或者移除熙卡。)

避免使用過(guò)長(zhǎng)的文本杖刷。過(guò)長(zhǎng)的按鈕標(biāo)題會(huì)被截?cái)嗖⑶易層脩綦y于理解。由于這是一個(gè)按鈕標(biāo)題文本驳癌,使用標(biāo)題大寫樣 式并且不要增加標(biāo)點(diǎn)滑燃。

避免讓搖晃手勢(shì)過(guò)于復(fù)雜。雖然你可以在代碼中設(shè)置何時(shí)你的 app 會(huì)將一次搖晃事件識(shí)別為搖一搖撤銷颓鲜,但如果用 戶還可以用搖晃執(zhí)行一個(gè)完全不同的操作表窘,這很可能會(huì)讓用戶迷惑。分析用戶在你的 app 中的交互行為甜滨,避免造成 用戶不能準(zhǔn)確預(yù)測(cè)搖一搖手勢(shì)的效果蚊丐。

將撤銷重做和用戶當(dāng)下的情境清晰明確地聯(lián)系起來(lái), 而非之前的情境艳吠。 仔細(xì)考量那些允許被撤銷或被重做的行為場(chǎng) 景麦备。通常來(lái)說(shuō),用戶期望他們的改變和操作可以立即生效昭娩。

十五凛篙、狀態(tài)欄

1、不要?jiǎng)?chuàng)建自定義狀態(tài)欄栏渺。用戶會(huì)依賴于系統(tǒng)狀態(tài)欄的一致性呛梆。就算你可能會(huì)在 app 中隱藏狀態(tài)欄,但也不適宜在其 出現(xiàn)的地方使用自定義的 UI磕诊。

2填物、防止讓滾動(dòng)內(nèi)容透過(guò)狀態(tài)欄顯示。

3霎终、避免在狀態(tài)欄背后放置干擾性內(nèi)容滞磺。特別是,你不能讓用戶誤認(rèn)為輕點(diǎn)狀態(tài)欄可以獲取內(nèi)容或觸發(fā)你 的 app 中的控 件莱褒。

4击困、隱藏狀態(tài)欄時(shí)要慎重考慮。由于狀態(tài)欄是透明的广凸,所以你通常不需要隱藏它阅茶。始終隱藏狀態(tài)欄,意味著用戶必須從你 的 app 中切換出去才能看到當(dāng)前時(shí)間谅海,或者知道是否有 Wi-Fi 連接脸哀。

5、在用戶全屏觀看多媒體內(nèi)容時(shí)扭吁,考慮隱藏狀態(tài)欄——和其他所有界面元素撞蜂。如果你這樣做了白筹,請(qǐng)確保用戶再輕點(diǎn)一次 即可恢復(fù)狀態(tài)欄(和其他所有界面元素)。如果沒(méi)有非常充分的理由谅摄,則要避免重新定義一個(gè)手勢(shì)來(lái)喚起狀態(tài)欄,因 為用戶會(huì)很難發(fā)現(xiàn)并記住這樣一個(gè)手勢(shì)系馆。

6送漠、選擇一個(gè)和你的 app 相協(xié)調(diào)的狀態(tài)欄顏色。默認(rèn)樣式以白底黑字顯示由蘑,適合用在淺色內(nèi)容的 app 的頂部闽寡。而黑底白 字的狀態(tài)欄則適合放在深色內(nèi)容的 app 頂部。

7尼酿、適當(dāng)?shù)臅r(shí)候爷狈,顯示網(wǎng)絡(luò)活動(dòng)指示器。網(wǎng)絡(luò)活動(dòng)指示器可以出現(xiàn)在狀態(tài)欄中裳擎,以向用戶顯示長(zhǎng)時(shí)間的網(wǎng)絡(luò)接入狀態(tài)涎永。

十六、導(dǎo)航欄

1鹿响、避免用過(guò)多的控件將導(dǎo)航欄擠滿羡微,即使看上去還有大量空間。

2惶我、確保在文字按鈕之間有足夠的間隔妈倔。

十七、標(biāo)簽欄

1绸贡、在 iPhone 上盯蝴,同時(shí)顯示不超過(guò) 5 個(gè)標(biāo)簽(如果有更多標(biāo)簽,標(biāo)簽欄會(huì)顯示其中 4 個(gè)并增加一個(gè)「更多」標(biāo) 簽听怕,再將其他的標(biāo)簽以列表形式收納在其中)

十八捧挺、選擇器

1、一般來(lái)說(shuō)尿瞭,當(dāng)用戶對(duì)整組數(shù)值都很熟悉時(shí)松忍,可以使用選擇器。

2筷厘、盡可能將選擇器內(nèi)嵌到內(nèi)容中顯示鸣峭。最好避免讓用戶在使用選擇器時(shí)需要進(jìn)入另一個(gè)視圖。

3酥艳、如果你需要展示大量數(shù)值摊溶,考慮使用表格視圖而不是選擇器。

十九充石、分段控件

1莫换、確保每個(gè)分段都容易點(diǎn)擊。為了保證每個(gè)分段都有 44 x 44 點(diǎn)的舒適點(diǎn)擊區(qū)域,請(qǐng)控制分段數(shù)量拉岁。在 iPhone 上坷剧, 分段控件應(yīng)等于或少于 5 個(gè)分段。

2喊暖、盡可能保證每個(gè)分段的內(nèi)容長(zhǎng)度一致惫企。由于分段控件中所有分段的寬度都相同,當(dāng)有些分段被內(nèi)容填滿而有些又沒(méi)有 時(shí)會(huì)看起來(lái)不太美觀陵叽。

3狞尔、避免在單個(gè)分段混合放置文本和圖像。

二十巩掺、警告框

1偏序、不要刻意避免使用負(fù)面措辭。 用戶理解大多數(shù)警告框都是為了告訴他們發(fā)生的問(wèn)題胖替, 或者對(duì)危險(xiǎn)情況作出警告研儒。 因 此,負(fù)面但直接的措辭效果會(huì)好于正面但委婉的措辭独令。

2殉摔、盡可能避免使用「你」、「你的」记焊、「我」和「我的」逸月。有時(shí)候,這些直接指向人的文本可能會(huì)引起歧義遍膜,甚至可能 會(huì)被理解成侮辱或傲慢碗硬。

3、避免在警告文本中描述點(diǎn)擊哪個(gè)按鈕從而導(dǎo)致文本過(guò)長(zhǎng)瓢颅。

4恩尾、合適地放置按鈕:

如果按鈕不會(huì)造成破壞性后果,而這又是用戶最有可能的操作挽懦,那么它應(yīng)當(dāng)在雙按鈕警告框的右邊翰意。取消按鈕 則應(yīng)該放在左邊。

如果按鈕會(huì)造成破壞性后果信柿,而這又是用戶最有可能的操作冀偶,那么它應(yīng)該放在雙按鈕警告框的左邊。取消按鈕 則應(yīng)該放在右邊渔嚷。

注意:在警告框顯示時(shí)點(diǎn)按「主屏幕」按鈕进鸠,應(yīng)如預(yù)期的那樣退出此 ——即,警告框被取消且操作沒(méi)有被執(zhí)行形病。

二十一客年、應(yīng)用圖標(biāo)

1霞幅、使用用戶會(huì)很容易識(shí)別的通用圖像。

通常來(lái)說(shuō)量瓜,避免關(guān)注一個(gè)元素次要或晦澀的方面司恳。例如,「郵件」的應(yīng)用圖標(biāo)用 了一個(gè)信封绍傲,而非一個(gè)鄉(xiāng)村風(fēng)格的郵筒扔傅、郵包或郵局符號(hào)。

2唧取、擁抱簡(jiǎn)潔。

尤其是要避免在你的圖標(biāo)中塞入大量不同的圖形划提。尋找一個(gè)可以代表你 app 實(shí)質(zhì)的單一元素枫弟,以一種簡(jiǎn) 單、獨(dú)特的形狀傳達(dá)出來(lái)鹏往,并謹(jǐn)慎地增加細(xì)節(jié)淡诗。如果圖標(biāo)的內(nèi)容或形狀過(guò)于復(fù)雜,細(xì)節(jié)便會(huì)成為干擾伊履,還可能在更小 尺寸時(shí)模糊不清韩容。

建議:要測(cè)試你的應(yīng)用圖標(biāo)在小尺寸時(shí)的顯示效果,將其放到「主屏幕」頁(yè)面的一個(gè)文件夾中唐瀑。最好再移動(dòng)一些應(yīng)用 圖標(biāo)到文件夾中群凶,看是否你的圖標(biāo)顯示良好并仍然能清晰辨識(shí)。

3哄辣、如果你想要描繪現(xiàn)實(shí)物體请梢,那就準(zhǔn)確呈現(xiàn)。描繪現(xiàn)實(shí)物體的圖標(biāo)力穗,應(yīng)準(zhǔn)確復(fù)制其特點(diǎn)毅弧,如布紋、玻璃当窗、紙張和金屬够坐, 并能傳達(dá)出物體的重量和觸感。

4崖面、確保圖標(biāo)在各種背景中顯示良好元咙。 不要只在淺色或深色背景上測(cè)試你的圖標(biāo), 因?yàn)槟悴荒茴A(yù)測(cè)用戶會(huì)選擇怎樣的壁 紙巫员。


最后再次感謝郎啟旭的翻譯蛾坯,截取他的聯(lián)系方式給他宣傳一下,如果感興趣的可以關(guān)注一下疏遏。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末脉课,一起剝皮案震驚了整個(gè)濱河市救军,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌倘零,老刑警劉巖唱遭,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異呈驶,居然都是意外死亡拷泽,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門袖瞻,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)司致,“玉大人,你說(shuō)我怎么就攤上這事聋迎≈茫” “怎么了?”我有些...
    開封第一講書人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵霉晕,是天一觀的道長(zhǎng)庭再。 經(jīng)常有香客問(wèn)我,道長(zhǎng)牺堰,這世上最難降的妖魔是什么拄轻? 我笑而不...
    開封第一講書人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮伟葫,結(jié)果婚禮上恨搓,老公的妹妹穿的比我還像新娘。我一直安慰自己筏养,他們只是感情好奶卓,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著撼玄,像睡著了一般夺姑。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上掌猛,一...
    開封第一講書人閱讀 52,821評(píng)論 1 314
  • 那天盏浙,我揣著相機(jī)與錄音,去河邊找鬼荔茬。 笑死废膘,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的慕蔚。 我是一名探鬼主播丐黄,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼孔飒!你這毒婦竟也來(lái)了灌闺?” 一聲冷哼從身側(cè)響起艰争,我...
    開封第一講書人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎桂对,沒(méi)想到半個(gè)月后甩卓,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蕉斜,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年逾柿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宅此。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡机错,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出父腕,到底是詐尸還是另有隱情弱匪,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布侣诵,位于F島的核電站痢法,受9級(jí)特大地震影響狱窘,放射性物質(zhì)發(fā)生泄漏杜顺。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一蘸炸、第九天 我趴在偏房一處隱蔽的房頂上張望躬络。 院中可真熱鬧,春花似錦搭儒、人聲如沸穷当。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)馁菜。三九已至,卻和暖如春铃岔,著一層夾襖步出監(jiān)牢的瞬間汪疮,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工毁习, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留智嚷,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓纺且,卻偏偏與公主長(zhǎng)得像盏道,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子载碌,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

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