iOS人機(jī)界面指南 ISUX原創(chuàng)翻譯

1、iOS 人機(jī)界面指南 ISUX 原創(chuàng)翻譯(上目錄為 iOS7而設(shè)計(jì) . 2 以內(nèi)容為核心 . . 3 保證清晰度 . 6 用深度來體現(xiàn)層次 . 9 iOS 應(yīng)用解析 . . 13 起始與停止 . 16 即時啟動 . 16 時刻準(zhǔn)備好停止 . . 19 布局 . 20 導(dǎo)航 . 21 模態(tài)對話 . 21 交互性和反饋 . . 23 反饋能幫助用戶理解 . 26 輸入信息過程需要簡易 . 27 術(shù)語和措辭 . 28 動畫 . 29 排版和顏色 . 30 排版必須保持清晰 . 30 顏色可以增強(qiáng)溝通性 . 31圖標(biāo)和圖形 . 32 App 圖標(biāo) . 32 其他圖標(biāo) . . 32 圖形 . 33為 i

2、OS7而設(shè)計(jì)iOS7 的革新關(guān)鍵詞如下:遵從 :新 UI 更好的幫助用戶理解內(nèi)容并與之互動,但卻不會分散用戶對內(nèi)容本身的注 意力清晰 :各種大小的文字易讀,圖標(biāo)醒目,去除了多余的修飾,重點(diǎn)突出,很好地突顯了 設(shè)計(jì)理念深度 :視覺層次和生動的交互動作賦予 UI 新的活力,不但幫助用戶更好的理解新 UI 的操作并讓用戶在使用過程中感到驚喜無論你是重新設(shè)計(jì)一個現(xiàn)有的 app 或是重新開發(fā)一個, 嘗試一下蘋果重新設(shè)計(jì)系統(tǒng)內(nèi)置 app 的方式:首先,去除了 UI 元素讓 app 的核心功能呈現(xiàn)的更加直接并強(qiáng)調(diào)其相關(guān)性。其次, 直接使用 iOS7的系統(tǒng)主題讓其成為 app 的 UI , 這樣能給用戶統(tǒng)一的

3、視覺感受。 縱觀全局,以內(nèi)容和功能為核心來指導(dǎo)設(shè)計(jì),從前的設(shè)計(jì)模式可以先放到一邊。以內(nèi)容為核心雖然明快美觀的 UI 和流暢的動態(tài)效果是 iOS7體驗(yàn)的亮點(diǎn),但內(nèi)容始終是 iOS7的核心。 這里有一些方法,以確保您的設(shè)計(jì)能夠提升您的 app 功能體驗(yàn)并關(guān)注內(nèi)容本身。 充分利用整個屏幕。 無需使用邊框、底圖等等多余的 UI 元素,讓內(nèi)容擴(kuò)展到屏幕邊緣。 天氣 app 是最好的例子:漂亮的天氣圖片充滿全屏,告知用戶天氣情況,同時也很好的呈 現(xiàn)了如每個時段氣溫等等的其他重要信息。 盡量減少視覺修飾和擬物化設(shè)計(jì)的使用。 UI 面板、 漸變和陰影有時會讓 UI 元素顯得很厚重, 致使搶了內(nèi)容的風(fēng)頭。應(yīng)該以

4、內(nèi)容為核心,讓 UI 成為內(nèi)容的支撐。 嘗試使用半透明底板。 半透明的底板可以讓用戶看到后面的內(nèi)容, 在某些場景下起到了上下 文提示的作用,另一個角度上來說,也讓用戶(比以前看到了更多內(nèi)容。保證清晰度保證清晰度是另一個方法,以確保你的 app 中內(nèi)容始終是核心。以下是幾種方法,讓最重要的內(nèi)容和功能清晰,易于交互。 大量留白。 空白讓重要內(nèi)容和功能顯得更加醒目。 此外, 空白可以傳達(dá)一種平靜和安寧的視 覺感受,它可以使一個 app 看起來更加聚焦和高效。 讓顏色簡化 UI 。 一個主題色比如在記事本中使用的黃色讓重要區(qū)域更加醒目并巧 妙地表示交互性。這同時也給了一個 app 一個統(tǒng)一的視覺主題。

5、通過使用系統(tǒng)字體確保易讀性。 iOS7的系統(tǒng)字體自動調(diào)整行間距和行的高度,使閱讀時文 本清晰易讀,無論用戶選擇何種大小的字號都表現(xiàn)良好。 使用無邊框的按鈕。 按鈕名稱、 箭頭以及系統(tǒng)顏色向用戶展示了交互元素, 這些內(nèi)容替代了 原先的帶有形狀的按鈕。聯(lián)系人界面使用了系統(tǒng)色藍(lán)色箭頭文字展示了按鈕的導(dǎo)航性。用深度來體現(xiàn)層次iOS7經(jīng)常在不同的層級上展現(xiàn)內(nèi)容,用以表達(dá)分組和位置,并幫助用戶了解在屏幕上的對 象之間的關(guān)系。 通過使用一個在主屏幕上方的半透明背景浮層來區(qū)分文件夾和其余部分的內(nèi)容。 用戶在使用備忘錄里的某個條目時, 其他的條目呈現(xiàn)在屏幕底部的其他分層上, 這樣用戶可 以通過滑動展開所有分類條

6、目(譯者按:算是一種提示手段 。日歷有較深的層級, ,當(dāng)他們在翻閱年、月、日的時候,以及增強(qiáng)的交互動畫給用戶一種層 級縱深感(循序切換的層次,從年到月到日 。在滾動年份視圖時,用戶可以即時看到今天 的日期以及其他日歷任務(wù)。 當(dāng)用戶處于月份視圖時,點(diǎn)擊年份視圖按鈕,月份會縮小至年份視圖中的所處位置。 類似的過度出現(xiàn)在月份和日期視圖的切換時,當(dāng)用戶選擇某個日期時,月份視圖向外擴(kuò)展, 顯示出日期視圖。iOS 應(yīng)用解析幾乎所有的 iOS app都應(yīng)用了 UIKit framework中定義的組件。了解這些組件的名字,作 用和構(gòu)成能夠幫助你設(shè)計(jì) app 過程中做出更好的決定。 UI 組件大致分成以下 4

7、種大類:Bars :包含了導(dǎo)航信息,告訴用戶他們所在的位置并包含了一些能幫助用戶瀏覽或啟動某 些操作的控制按鈕。內(nèi)容視圖:包含了 app 的主體內(nèi)容以及某些操作行為, 比如滾動、 插入、 刪除、 排序等等。 控制按鈕:展示信息或者控制動作。臨時視圖(對話窗口 :短時間出現(xiàn),給用戶重要信息或者額外的選擇或者其他功能。除了定義 UI 組件, UIKit 也定義對象實(shí)現(xiàn)的功能,例如手勢識別,繪圖,輔助功能,打印 支持。 從編程的角度說, UI 組件被認(rèn)為是不同類別的視圖,因?yàn)樗麄儚?UIView 得到繼承。視圖 能繪制屏幕內(nèi)容并且知道用戶何時觸摸了屏幕。要在 app 中管理一組或者一系列的視圖, 通

8、常需要使用一個視圖控制器, 它能協(xié)調(diào)視圖的顯示內(nèi)容, 實(shí)現(xiàn)與用戶交互的功能并能在不 同屏幕內(nèi)容之間切換。下面是一個例子,關(guān)于視圖與視圖控制器如何結(jié)合并呈現(xiàn) iOS app的 UI 。 雖然開發(fā)者認(rèn)為真正起到作用的是視圖和視圖控制器,但一般用戶感知到的 iOSapp 是不 同屏幕內(nèi)容的集合。從這個角度來看,在 app里,屏幕內(nèi)容一般對應(yīng)于一個獨(dú)特的視覺狀態(tài)或者模式。起始與停止即時啟動有種說法是用戶往往不會花超過一兩分鐘去審視一個新應(yīng)用, 當(dāng)你將軟件從打開到啟動這段 時間壓縮得很短, 并且同時在載入過程中呈現(xiàn)一些對用戶有幫助的內(nèi)容, 你會激發(fā)用戶的興 趣并給所有用戶一個驚喜。重要:不要在安裝過程結(jié)

9、束后告訴用戶需要重啟設(shè)備之類的。 重啟需要時間并且會讓人覺得 你的應(yīng)用看上去不可靠而且很難使用。 如果你的應(yīng)用將使用存儲空間, 或者不重啟機(jī)器就無 法流暢運(yùn)行,你必須聲明這些問題。盡可能避免使用閃屏或者其他啟動體驗(yàn)。 用戶能夠在啟動后立即開始使用軟件是最好不過 的。 避免讓用戶做過多設(shè)置。 而應(yīng)該如此: 聚焦在滿 80%的用戶需求上。 這樣主體用戶群就無需設(shè)置各種選項(xiàng), 因?yàn)槟愕?app 已經(jīng)默認(rèn)處于他們想要的狀態(tài)。 如果有些功能有少部分用戶想要, 換句話說大部分人不需 要的話,就別管它了。 盡可能用其他方式獲取更多(用戶信息。 如果你能得到用戶在內(nèi)置軟件或硬件設(shè)置中提供的信息,直接從系統(tǒng)中獲

10、取它們,而不需要再次讓用戶輸入。 如果你必須獲取設(shè)置信息, 在你的應(yīng)用中直接向用戶詢問, 然后盡快保存這些設(shè)定(這段講的是權(quán)限許可,如能否訪問照片或者日歷或地理位置信息等等 。 這樣用戶就無需 強(qiáng)制跳出 app 進(jìn)入系統(tǒng)設(shè)置頁面了。如果用戶需要更改設(shè)置,他們可以在任何時候進(jìn) 入 app 的設(shè)置選項(xiàng)進(jìn)行修改。盡可能讓用戶晚一些再登錄。 讓用戶在無需登錄的情況下就能盡量多的瀏覽內(nèi)容并使用部分 功能是最理想的狀態(tài), 。 如果用戶在熟悉你的 app 之前就被強(qiáng)迫需要登錄, 那么啟動流程就 會變得拖沓繁瑣。一般來說,按照屏幕默認(rèn)的定向方式啟動你的 app 。 對于 iPhone ,豎向是設(shè)備默認(rèn)定向,

11、而 iPad 則是設(shè)備當(dāng)前所處的方向。 如果你的 app 只能在橫向模式運(yùn)行, 那么就始終以橫向 狀態(tài)啟動,讓用戶在他們自己需要時改變設(shè)備方向。最好讓橫屏 app 支持兩種模式的橫屏,即 home 鍵處于左右兩側(cè)的狀態(tài)。如果設(shè)備當(dāng)前已 經(jīng)處于橫向狀態(tài),那么就按照當(dāng)前狀態(tài)啟動 app ,除非你有充分的理由不這么做。其他情 況時,可以考慮按 home 鍵處于右側(cè)的方式啟動 app (譯者按:大部分人習(xí)慣使用右手 ?？梢詼?zhǔn)備一張與 app 首頁看上去一樣的閃屏 , iOS 會在啟動 app 時調(diào)用這張圖,這樣可以 讓用戶覺得啟動速度很快,降低對等待時間的感知度。如果可能,不要讓用戶在初次啟動應(yīng)用時閱

12、讀免責(zé)聲明或者確認(rèn)用戶協(xié)議。 你可以直接在 app store 展示這些內(nèi)容,使用戶在下載前就有所了解;雖然這個辦法能最大地減少麻煩, 但也不是一直可行。如果在某些情況下你必須展示這些內(nèi)容,要確保它們與 UI 保持統(tǒng)一并在產(chǎn)品功能與用戶體驗(yàn)之間達(dá)成平衡。在應(yīng)用重啟后,需要恢復(fù)到用戶退出使用時的狀態(tài),讓他們可以從中斷之處繼續(xù)使用。 無 需讓用戶記住是如何達(dá)到此種退出狀態(tài)的。時刻準(zhǔn)備好停止iOS app無需關(guān)閉或退出選項(xiàng)。當(dāng)用戶切換 app 或回到主屏幕或者將他們的設(shè)備調(diào)至睡眠 模式的時候,其實(shí)就是停止了當(dāng)前 app 的使用。當(dāng)用戶切換 app 時, iOS 的多任務(wù)系統(tǒng)將其放置到后臺并將新 ap

13、p 的 UI 替換上來。在這 種情況下,你必須做到以下幾點(diǎn):隨時并盡快保存用戶信息 ,因?yàn)樵诤笈_的應(yīng)用隨時有可能被終止或退出。當(dāng)程序停止的時候盡可能在細(xì)節(jié)層面保存當(dāng)前狀態(tài), 使用戶可以在回到應(yīng)用時能從中斷之 處繼續(xù)使用。例如,在使用可滾動的數(shù)據(jù)列表時,退出后保存列表所在的位置。不要強(qiáng)制讓 app 退出 ,因?yàn)檫@樣會讓用戶誤以為是 crash 。如果有問題產(chǎn)生,需要告訴用 戶具體狀況以及如何解決。以下有兩個建議,取決于出現(xiàn)的問題有多嚴(yán)重而酌情使用:使用吸引注意的屏幕內(nèi)容描述出現(xiàn)的問題并給出建議的方案。 如此可讓用戶了解到 app 本身沒有問題, 并將主動權(quán)交給用戶, 讓他們決定是解決問題并繼續(xù)使

14、用還是切換到其 他應(yīng)用。如果只是某些 app 功能無法使用,可以在用戶使用這些功能時彈出一個對話窗口告訴他們當(dāng)前的情況。 只有在用戶使用的功能確實(shí)無法工作時再繼續(xù)彈出警告提示。 布局布局遠(yuǎn)比 UI 組件的樣式重要。 布局能讓你向用戶展示什么是最重要的, 他們是如何選擇的, 內(nèi)容是如何相關(guān)的。 取決于 app 運(yùn)行的設(shè)備以及設(shè)備的方向布局可能會有所不同。讓用戶盡可能容易地獄內(nèi)容交互并控制好每個控件的間距。 需要點(diǎn)擊的控件大小至少要有 44x44像素。通過平衡重要內(nèi)容或者功能,讓用戶專注于主要任務(wù)之上。 將重要的組件放置于屏幕上半 部分是最常用的方法之一同時也要遵循從左到右的原則放置在靠左側(cè)的屏幕

15、上。利用視覺重心和平衡向用戶展示屏幕元素之間的相對重要性。 大型部件以及那些看起 來比較重的更加吸引眼球并且讓人感覺比小的部件重要些。一般來說,避免你的 UI 不一致。 盡可能地讓有相似功能的組件有相似的外觀。人們經(jīng)常認(rèn) 為不一致一定有某些原因,并嘗試花時間去搞清楚(這樣其實(shí)是浪費(fèi)用戶的時間 。確保默認(rèn)大小的內(nèi)容(文字、圖片用戶能夠看清楚。 比方說,不要讓用戶滾動屏幕來閱 讀(屏幕以外的部分文本或者無需通過放大操作來看清圖像。導(dǎo)航用戶很少察覺到一個程序中的導(dǎo)航體驗(yàn)除非它不符合他們的期望。 放置導(dǎo)航到一個能夠支撐 你的 app 整體結(jié)構(gòu)和目的卻又不過分引起用戶注意的狀態(tài)。廣義來說,有三種主要類型

16、的導(dǎo)航,每種導(dǎo)航都有其適應(yīng)的 app 結(jié)構(gòu):分層、扁平、內(nèi)容 或經(jīng)驗(yàn)驅(qū)動。在某些情況下,幾種導(dǎo)航形式可以出現(xiàn)在同一個 app 里并且各司其職。無論 你的 app 適合使用哪一種導(dǎo)航結(jié)構(gòu),最重要的是用戶所體驗(yàn)的內(nèi)容必須被有邏輯的、可預(yù) 測并易于遵循的呈現(xiàn)在你的 app 中。用戶需要始終很清楚他們在哪兒,并且如何到他們想 去的地方。模態(tài)對話模態(tài)視圖是一個優(yōu)缺點(diǎn)并存的模式, 承載某些連貫操作或內(nèi)容, 可以給用戶在不脫離主任務(wù) 的情況下完成某些任務(wù)或獲取某些信息; 但是這些操作都是臨時的, 以防止用戶此時與應(yīng)用 程序其余的功能發(fā)生交互。在理想狀態(tài)下,用戶可以與 iOSapp 發(fā)生非線性的交互,所以模態(tài)

17、視圖下最好的做法是最 大程度的減小模態(tài)操作的數(shù)量。大體上說,當(dāng)以下情況出現(xiàn)的時候,考慮使用模態(tài)對話:必須引起用戶關(guān)注的時候某個任務(wù)必須被完成, 或者明確被放棄, 以避免在模棱兩可的狀態(tài)下遺漏用戶信息 (操 作 。保持模態(tài)任務(wù)簡單,簡短并且高度聚焦。 你肯定不希望用戶像使用一個 mini app那樣使用 一個模態(tài)視圖。 如果一個模態(tài)對話中的子任務(wù)太復(fù)雜, 用戶會從暫停的主任務(wù)上迷失。 創(chuàng)造 一個包含一系列視圖的模態(tài)任務(wù)時要特別注意這一點(diǎn)。 如果一個模態(tài)任務(wù)必須在獨(dú)立視圖包 含子任務(wù),務(wù)必給用戶一個獨(dú)立、清晰的導(dǎo)航路徑,并避免迂回?？偸翘峁┮粋€顯眼并安全的方法用以退出模態(tài)任務(wù)(cancel 按鈕

18、。一個包含一系列視圖的任務(wù),必須讓用戶明白不同步驟中“完成”按鈕的作用。 保證對話框提供的信息都是必要的并是可操作的。 對話框是打斷用戶預(yù)期的,并且需要點(diǎn) 擊才會消失, 所以讓對話框所提示的信息必須是值得中斷用戶操作的, 這對于用戶體驗(yàn)來說 很重要。尊重用戶關(guān)于接收推送通知的選擇。 在設(shè)置界面,用戶可以設(shè)置 app 是否接收推送。必須 遵循用戶的設(shè)置,否則會觸怒用戶導(dǎo)致關(guān)閉所有推送通知。交互性和反饋標(biāo)準(zhǔn)手勢讓用戶感到舒適手勢操作拉近了設(shè)備與用戶之間的距離并提高他們的直接操縱感。在 app 中經(jīng)常使用的統(tǒng) 一手勢操作如下: 避免使用與常規(guī)手勢操作含義不同的動作。避免創(chuàng)造與常規(guī)手勢功能雷同的新手勢

19、。避免讓用戶用復(fù)雜手勢完成某種任務(wù)。 手勢操作務(wù)必保持簡單,直接。避免創(chuàng)造新的手勢,除了在游戲中。對于 iPad 來說,嘗試使用多指手勢。 iPad 較大的屏幕給多指操作帶來空間。雖然并不是 每款 app 都需要復(fù)雜手勢操作, 但復(fù)雜手勢可以豐富用戶體驗(yàn), 比如多人同樂的游戲等等。反饋能幫助用戶理解iOS 用戶習(xí)慣于得到反饋 ,幫助他們知道 app 正在做什么,下一步可以做什么,并了解他 們的操作結(jié)果。盡可能地將狀態(tài)或其他相關(guān)的反饋信息集成到 UI 上。例如,將郵件的更新 狀態(tài)顯示在工具欄上:避免不必要的對話框。對話框?qū)儆趶?qiáng)提示機(jī)制,但應(yīng)僅用于傳遞重要和有預(yù)期的操作信息。 如果用戶看到太多的對

20、話框, 沒有包含太重要的信息, 那么用戶很快就學(xué)會忽略所有對話框 提示。 輸入信息過程需要簡易(在手持設(shè)備上用戶利用觸摸軟鍵盤輸入信息很花時間和精力。如果你的 app 因?yàn)樵谳?入前出現(xiàn)一堆冗余操作,用戶會感到崩潰。讓用戶更容易的做出選擇。 使用選擇器或表格視圖替代輸入操作可以讓用戶的使用體驗(yàn)更好。盡可能利用 iOS 獲取信息。 用戶儲存了很多信息在他們的設(shè)備中。開發(fā)者可以自由使用用 戶已經(jīng)在系統(tǒng)中輸入的信息,比如聯(lián)系人,日歷信息等(當(dāng)然要獲得用戶的許可 。在輸入和回報(bào)上做出平衡。 (在輸入后 給出反饋或回報(bào), 讓用戶感覺到他們的行為有價值。 術(shù)語和措辭App 中呈現(xiàn)的每一個詞都是與用戶的一次

21、對話,利用這個機(jī)會讓用戶在使用過程中感到舒 適。使用術(shù)語時確保用戶能理解。 針對用戶群確定使用何種短語, 例如一些技術(shù)術(shù)語某些高端用 戶能理解,但是普通用戶就不太熟悉?？梢允褂梅钦降挠押谜Z氣,避免太正式又不能太虛假或低三下四 。請記住,用戶在使用 過程中會反復(fù)閱讀文本,所以有些起初看上去很乖巧的語句多看幾次就有可能讓人厭煩。 當(dāng)你的 UI 文本簡短直接,用戶可以快速輕松地理解。 像新聞編輯一般遣詞造句,確定最重 要的信息,并強(qiáng)調(diào)顯示,這樣人們就不用看大段文字就知道下一步該怎么做。給按鈕短標(biāo)簽或者易于理解的圖標(biāo),用戶可以一目了然的知道該做什么。描述時間的時候注意要準(zhǔn)確。 “今天” 、 “明天”

22、這樣的詞聽上去是比較友好,但是有的時候 會讓人混淆,比如你不清楚用戶所在的環(huán)境(時區(qū)不同 。潛在用戶在逛 APP Store時, app 描述就是最好的溝通機(jī)會。 除了描述 app 的品質(zhì), 你還 需要做以下事情:修正所有的拼寫、 語法和標(biāo)點(diǎn)符號錯誤。 雖然這些小錯誤不影響使用, 但是會給人帶來 負(fù)面印象。盡量少地使用全大寫的詞匯。 雖然有時大寫單詞可以吸引人們注意, 但是全大寫的段落 不適合閱讀,而且有一直朝用戶扯著嗓子吼叫的感覺。可以描述 bug 修復(fù)情況。 如果您的 app 新版包含用戶一直期待的 bug 修復(fù), 那在你的軟件描述中提到這一點(diǎn)就是個很好的做法。動畫美妙優(yōu)雅的動畫貫穿于 i

23、OS 的用戶界面,讓 app 使用體驗(yàn)更加動感和引人注目。微妙和恰 當(dāng)?shù)膭赢嬁梢?表示狀態(tài)增強(qiáng)直接操作的意圖幫助人們可視化操作的結(jié)果。添加動畫的時候需要謹(jǐn)慎,尤其是在 app 不提供沉浸式體驗(yàn)的時候。 app 使用過程中,如 果在執(zhí)行主要任務(wù)時,過分的、無明顯作用的動畫往往會分散用戶注意力,也影響 app 的 性能表現(xiàn)。使用與系統(tǒng)內(nèi)置 app 一致的動態(tài)表現(xiàn)。用戶比較熟悉內(nèi)置應(yīng)用的動畫表現(xiàn),恰到好處。事 實(shí)上, 用戶往往把視圖之間的切換、 方向變化時的響應(yīng)、 物理感應(yīng)的滾動等這些效果看做 iOS 帶來的使用體驗(yàn),除了那些沉浸式 app 比如游戲某些動畫可以與系統(tǒng)內(nèi)置動畫相 媲美。 (譯者按:其

24、實(shí)就是建議開發(fā)者使用系統(tǒng)原生動畫效果 在 app 中使用的動畫效果要統(tǒng)一。如同其他類型的訂制,使用統(tǒng)一的自定義動畫很重要, 這可以讓用戶在使用不同的 app 時累計(jì)經(jīng)驗(yàn)。在大多數(shù)情況下, 將自定義動畫盡量做的真實(shí)一點(diǎn)是沒問題的。 人們往往愿意接受外觀上的 藝術(shù)創(chuàng)意,但違反物理定律的動畫體驗(yàn)也會讓人崩潰。排版和顏色排版必須保持清晰清晰是排版第一要務(wù)。如果用戶無法閱讀文字內(nèi)容,再漂亮的文字設(shè)計(jì)都沒有意義。 在你的 app 中只使用一種字體。不同字體混合使用會讓你的 app 看起來零散拖沓。顏色可以增強(qiáng)溝通性嘗試定義 key color 。內(nèi)置軟件使用了 key color 比如備忘錄中的黃色用來表

25、明交 互和元素狀態(tài)。顏色有代表性但人們對顏色的感知并不都相同。 不同文化和個體對顏色都有不同理解, 這值 得花時間去鉆研,以免使用的顏色在不同國家和文化中產(chǎn)生禁忌。在大部分情況下,不要讓顏色分散用戶的注意力。除非顏色在你的 app 里扮演著必不可少 的角色,顏色常常在不經(jīng)意間帶來增強(qiáng)效果。 圖標(biāo)和圖形App 圖標(biāo)每個 app 都需要一個漂亮的圖標(biāo)。 每個人對圖標(biāo)都有先入為主的印象, 關(guān)系到 app 的品質(zhì)、 目的和可靠性。 有幾點(diǎn)關(guān)于圖標(biāo)的指引務(wù)必記住: app 圖標(biāo)是 app 品牌形象很重要的部分。讓圖標(biāo)的設(shè)計(jì)成為一個機(jī)會,給用戶講設(shè)計(jì)背后的故事,并建立情感鏈接。 最好的應(yīng)用程序圖標(biāo)應(yīng)該是獨(dú)

26、一無二的,整潔的,打動人心的。 一個好的 app 圖標(biāo)在每種尺寸和不同背景下看起來都應(yīng)該合適。細(xì)節(jié)設(shè)計(jì)在大尺寸下能豐富圖標(biāo), 但可能在小尺寸時會讓圖標(biāo)顯得渾濁 (譯者按:暗示圖標(biāo)圖形設(shè)計(jì)需要簡 潔 。其他圖標(biāo)iOS提供了許多代表了常見任務(wù)和操作的小圖標(biāo),常被用在分頁欄、工具欄和導(dǎo)航欄上。建議使用容易被用戶理解的內(nèi)置圖標(biāo)。 當(dāng)然, 可以使用自定義圖標(biāo), 如果需要表達(dá)自定義的 操作或者內(nèi)容。設(shè)計(jì)這些小的線型圖標(biāo)與 app 圖標(biāo)有很大區(qū)別。圖形iOS 應(yīng)用大多是圖形豐富的。無論顯示用戶照片還是提供自定義的圖片,都有一些應(yīng)該遵 循的準(zhǔn)則:支持 Retina 顯示屏。 請確保提供兩種規(guī)格的圖片資源。顯示

27、照片或圖片時不要超過原始尺寸的 100%,如果你不想在 app 中看到拉伸變形的圖形 的話。讓用戶來選擇他們是否要放大或者縮小圖片。不要使用帶有蘋果符號和版權(quán)的圖片。 這些圖形和版權(quán)產(chǎn)品的設(shè)計(jì)經(jīng)常被修改。(未完待續(xù),控件和視圖解析部分將在“ iOS 人機(jī)界面指南翻譯下”中呈現(xiàn)品牌品牌塑造不止是展示一個品牌的顏色或者 logo 。理想情況下,為你的 app 創(chuàng)造獨(dú)特的外觀 和感覺并帶給用戶難忘的體驗(yàn),進(jìn)而打造出特有的品牌形象。當(dāng)你需要在應(yīng)用中展示已有的品牌形象時,請記住下面的要點(diǎn):巧妙自然(非強(qiáng)迫式地融入品牌的顏色或圖形。 人們使用你的 app 解決問題或者娛樂; 他們并不想感覺像被迫看一個廣告

28、似的看到你的品牌宣傳。最好的體驗(yàn)是,讓你的 app 自 己說話:比如 iOS7通過品牌關(guān)鍵色來表現(xiàn) app 的互動性和選擇狀態(tài)。避免侵占主要內(nèi)容的空間(用于展示品牌信息 。 例如,在屏幕上方展示一個用于承載品牌 形象的信息欄, 這樣做反而占用了內(nèi)容顯示的空間。 考慮使用其他低干擾的方式來宣傳品牌, 例如巧妙地定制背景圖片(譯者按:常見的方式是將品牌 logo 以淡淡的水印形式呈現(xiàn)在背 景上 。重要:對于以上的要點(diǎn)來說, app 圖標(biāo)是例外,它應(yīng)該完全聚焦在品牌塑造上。因?yàn)橛脩?經(jīng)?？吹?app 圖標(biāo),更應(yīng)該花時間來設(shè)計(jì)它,從而讓其在具備品牌辨識度的基礎(chǔ)上更加吸 引眼球。與 iOS 的整合使用標(biāo)

29、準(zhǔn) UI 元素盡可能用 UIkit 提供的標(biāo)準(zhǔn) UI 元素。當(dāng)你使用標(biāo)準(zhǔn)而非自定義元素時,你和你的用戶都將 受益:標(biāo)準(zhǔn) UI 元素會自動更新,如果 iOS 有了重新設(shè)計(jì)而自定義元素就不會被升級。 使用標(biāo)準(zhǔn)元素對于用戶來說沒有學(xué)習(xí)成本。為了充分利用標(biāo)準(zhǔn) UI 元素的有點(diǎn),以下幾點(diǎn)比較關(guān)鍵:遵循每個 UI 元素的設(shè)計(jì)規(guī)范。大體來說,請避免創(chuàng)造自定義 UI 元素用于表現(xiàn)標(biāo)準(zhǔn)交互行為。不要用系統(tǒng)自帶的按鈕和圖標(biāo)表達(dá)其他含義。如果你的 app 是沉浸式體驗(yàn), 那么創(chuàng)造完全自定義的 UI 才有足夠的意義。 因?yàn)槟阍趧?chuàng) 造一個統(tǒng)一的體驗(yàn)環(huán)境,讓用戶在其中能夠有所期待并探索如何控制 app 。對切換設(shè)備方向的

30、響應(yīng)人們通常希望在各種方向都能使用 iOS 設(shè)備, 所以在轉(zhuǎn)換方向時時設(shè)備應(yīng)該有合適的響應(yīng)。 不管設(shè)備處于什么方向,請聚焦于主要內(nèi)容,這是最重要的。 人們需要在使用 app 的過程 中與其關(guān)心的內(nèi)容交互。 如果主體內(nèi)容隨著設(shè)備方向改變而丟失聚焦, 那么用戶就會感到迷 茫并覺得丟失了對 app 的控制權(quán)。通常,要讓 app 能夠在不同屏幕方向下正常運(yùn)作 。人們期望設(shè)備在不同方向時都能正常使 用 app ,能滿足這一點(diǎn)是最好的。 iPad 用戶常常期望在當(dāng)前把持設(shè)備的方向(正常使用 app ,但某些 app 只能在橫屏下使用。如果確實(shí)是這樣,請注意以下幾點(diǎn):按默認(rèn)支持的方向啟動 app ,忽略設(shè)備

31、當(dāng)前朝向。避免在 UI 中告知用戶需要調(diào)轉(zhuǎn)設(shè)備方向。橫屏或豎屏模式時,支持水平調(diào)轉(zhuǎn)設(shè)備。 例如:在橫屏 app 中,無論 home 鍵在左或 右, app 都能正常使用,即支持設(shè)備調(diào)轉(zhuǎn) 180度, app 會自行響應(yīng)。如果你的 app 將方向變化當(dāng)做一種交互的手段,那你可以將方向響應(yīng)針對 app 進(jìn)行特殊處 理。比如某些方向響應(yīng)的游戲通過改變設(shè)備方向來移動游戲中的物件,那此時 app 就無法 響應(yīng)改變設(shè)備方向原本應(yīng)有的變化。 這種情況下, 可以讓用戶在進(jìn)入主線任務(wù)前選擇改變設(shè)備方向；一旦開始主線任務(wù)，則按用戶此前選擇的方向?yàn)榛鶞?zhǔn)進(jìn)行響應(yīng)。 在 iPhone 上，預(yù)測用戶什么時候會需要旋轉(zhuǎn)屏幕方

32、向。比如在用戶瀏覽時，旋轉(zhuǎn)方向是為 了看到更多內(nèi)容。如果此時 app 僅僅放大內(nèi)容尺寸，你無法達(dá)到用戶的預(yù)期，應(yīng)該要重新 調(diào)整內(nèi)容布局，行間距等等直到更多內(nèi)容能夠很好的被呈現(xiàn)在屏幕上。 在 iPad 上，盡量支持所有方向來達(dá)到用戶期望。iPad 的大屏幕（能呈現(xiàn)更多內(nèi)容）減輕 了用戶在“看到更多”這方面的需求。iPad 也很少被用戶認(rèn)為有默認(rèn)方向，如果可以，盡 量滿足在任何把持方向下都能正常讓用戶與你的 app 進(jìn)行互動。遵循以下幾點(diǎn)規(guī)范： l 考慮改變顯示輔助信息或功能的方式。以 iPad 內(nèi)置的郵件為例，賬戶和郵箱屬于次要 信息（選中的郵件是主要內(nèi)容） 。在橫屏?xí)r，賬戶和郵箱被放在左側(cè)面板中，而豎屏?xí)r 出現(xiàn)在彈出面板上。 在某些游戲中，不同方向下的 UI 也許需要重繪，從而在邊界上留下額外空間，這種情 況下可以在這些地方展示游戲中的輔助信息或?qū)ο蟆?l 避免無意義的布局變化。 盡可能在不同方向下提供一致的體驗(yàn)， 從而讓用戶在旋轉(zhuǎn)屏幕 時維持他們的操作習(xí)慣。如果你的 iPad app 在橫屏?xí)r以網(wǎng)格形式展現(xiàn)圖片，在豎屏?xí)r 就完全沒必要改成列表式。 l 避免重新