聊聊IOS人機介面指南中的三個關鍵詞

來源:互聯網
上載者:User

   翻了下這幾年的iOS人機介面指南,開篇始終是遵從(Deference),清晰(Clarity),深度(Depth)這三個關鍵字,從iOS7到iOS9從未變過。在iOS>中UI作為內容的支撐,始終服務於內容,就像喬幫主說的“設計不只是看上去的樣子和感覺,設計的關鍵在於它如何發揮作用。”

  一、遵從 (Deference)

  設計為內容服務,UI作為內容的支撐,可以協助使用者更好地理解內容並與之互動,且不會分散使用者對內容本身的注意力。以內容為中心被反覆強調,而平時設計師卻常常會因為過度追求美感而忽視這一點。

  如何使設計遵從內容,並突出內容:

  利用整個螢幕。

  減少視覺修飾與擬物化設計的使用。漸層和陰影有時會使UI變得厚重,影響使用者對內容的關注。

  使用半透明底板。半透明能使使用者看到更多的內容,起到短暫的提示作用。

  保證應用清晰度。

  二、清晰 (Clarity)

  清晰在這裡可以理解為:文字清晰易讀,表徵圖精確醒目,去除多餘修飾,突出重點,以功能驅動設計。

  如何提升應用清晰度:

  大量留白。留白使內容和功能醒目,並傳達出一種寧靜安詳的視覺感受,更好的讓使用者聚焦和高效互動。

  用顏色簡化UI。突出重點並暗示互動性。

  使用系統字型確保易讀性。

  使用無邊框的按鈕。在內容地區中無邊框按鈕用文案、顏色及操作指引標題來傳達按鈕功能,啟用態時高亮;在預設狀態下所有bar上的按鈕都是無邊框的。

  正確使用標準UI元素:

  - 儘可能使用UIkit提供的標準UI元素,多使用標準元素而非自訂元素。

  - 嚴格遵循每個UI元素的設計規範,當你應用中UI元素的外觀與功能都是使用者所熟悉的,他們可以很容易的根據先前的經驗使用它,進而更好的使用你的應用。

  - 避免不同版本iOS裡的UI元素混用。

  - 避免創造自訂UI元素來表現標準互動行為。

  - 避免用系統內建的按鈕和元素傳達其他含義。

  - 在沈浸式體驗的應用中,創造全新的自訂UI是合理的,比如H5頁面和各種遊戲類APP。

  使使用者集中注意在主要任務上:

  -使用布局來溝通。用布局告訴使用者什麼是最重要的 ,如何選擇,以及事物之間的關聯。

  - 螢幕上半部分放置主要內容。遵循使用者從左至右的習慣,並從靠左側的螢幕開始。

  - 使用視覺元素的大小和平衡向使用者展示相關屏顯的重要內容。大控制項比小控制項更容易在出現時被注意和點擊。使用對齊來讓閱讀更舒適,讓分組和層次之間更有秩序。對齊會讓應用整潔有序,也會讓使用者在專註螢幕時篩選重要訊息。不同 資訊組的縮排與對齊讓它們之間的關聯更清晰,也會讓使用者更容易的找到某個控制項。

  - 確保預設尺寸下重要內容的顯示。例如:使用者無需水平滾動就能看到重要的文本,或不用放大就可以看到主體映像。

  - 盡量避免UI上不一致的表現。有著相似功能的控制項看起來應該相似,使用者認為他們看到的不同總是有原因的,而且他們傾向於花時間嘗試。

  - 給每個互動元素留足空間,讓使用者輕鬆的操作。常用的點按類控制項的大小是44X44。

  三、深度 (Depth)

  視覺的層次感和生動的互動動畫會讓UI看起來更有活力,有助於使用者更好地理解並提升使用者的愉悅感。

  如何提升互動性和反饋體驗:

  使用者熟悉的標準手勢避免賦予不同的行為,除非是遊戲。

  避免建立和標準手勢功能相似的手勢操作。

  使用者已經習慣標準手勢操作,沒有必要讓使用者學習達到同樣效果的不同操作。

  複雜手勢可以作為完成某項任務的捷徑,但不是唯一的方式。

  使用者很懶,提供給使用者完成某操作的方式盡量簡單、直接,即使這種方法需要額外的動作。簡單地手勢會讓使用者集中於當前的體驗和內容,而不是操作本身。

  除非是遊戲,否則避免定義新手勢

  在特定的環境中,可以考慮使用多指操作。雖然複雜的操作不一定適用於所有應用,但對使用者會花大量時間使用的應用來說可以豐富體驗,例如遊戲。

  使用有助於理解的反饋:

  - 儘可能將狀態或其他的反饋資訊整合到UI中。最好讓使用者在不進行操作或不跳出當前內容下,獲得需要的資訊。例如,郵箱應用將當前的狀態顯示工具條上,這樣就不影響當前內容。

  -避免顯示不必要的提醒對話方塊。對話方塊是一種很強的反饋機制,只能在傳遞非常重要也是理論上可行的資訊時才需要使用它,如果使用者常看到很多不是重要訊息的對話方塊,他們很快就會忽略所有對話方塊提醒。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.