簡化UI複雜度的基本步驟

發表於2016-07-16

我們常常致力於減少複雜程度,用以改善顧客的體驗。安全風險是攸關致命危害,且與時效息息相關的議題,所以談到設計我們的資安產品介面,我們花非常多時間規劃其資訊構架。目標是儘可能讓客戶用最簡單的方式接受清楚又透明的資訊。

你可能聽過「諮詢,就在你的指尖」這個口號,然後思考自己設計的介面至少要點選幾次才可以找到正在搜尋的諮詢。多少次點選是太多?幾次是太少?除非你誠心將使用者放在心上,專注思考,要不然 UI 設計是無意義的。

屠龍之旅

當我在設計一個頁面時,發現讓使用者達到目標的所需資訊的微妙平衡。頁面上有太多東西,讓使用者困惑;太少東西則會造成多餘的互動。為了解決這兩難的問題,我在整個設計決策過程將使用者擺在中心。

2016715201

讓我們想像一下:你的產品是一本書,而使用者是故事的主角。在膾炙人口的故事裡,你的主角必需克服挑戰,到達惡龍所在的塔。路途上他們得獲取正確的知識與經驗,才可以使出最後一擊。身為設計師的責任就是從旁準備、引導我們的英雄走過這趟旅程。

就跟大多數的故事一樣,會分成很多章節。每個章節代表重要的進展或事件,也是我們如何建造使用者經驗的樑柱。章節裡要放使用者必需花上大量時間或注意力的內容,以我們ThisData來說,這些就是儀表板 (dashboard)、檢查日誌 (audit log) 和事件細節⋯等等。

2016715202

把整趟體驗切為「章節」讓我們可以更清楚知道每個章節代表的意義。「儀表板」章節讓主角獲取概要;「檢查日誌」讓主角找到正確的路;而「事件細節」提供成功屠龍所需的祕密。

準備好主角的故事,藉此打造適當的章節,這可以幫助將你的想法形成框架,以及從使用者的角度建立章節。

我們在閱讀或聆聽故事的時候,總是沈浸其中,迫不及待地想知道接下來會發生什麼事情,每個章節緊密連線。這就是設計你自己的產品時,應該設定為目標的質量。

版面佈局範本(佈局)

一旦章節就定位,充分了解資料會以哪種形式呈現後,再選擇版面佈局模板。它是清單,還是圖表?它得放使用者的頭像照片嗎?它得要用表單嗎?你對這些基本問題的回答,會深深地影響決策樹(decision tree)。

2016715203

那麼,版面佈局模板是什麼?這是重複的資訊構架,可以不管情境為何,用在不同的畫面和頁面。相似資料型別的頁面,就共享一個版面佈局模板。App裡面建立版面一致性的好處是:使用者不用重複學習介面(如何操作),不被困惑和干擾中斷,真正專注在章節的目標。請嘗試將內容分類,至多不超過3–4種佈局模板。

內容分層

你可能已經很熟悉 Google 的Material Design哲學,如果還沒有的話,我強烈推薦你去看看!Material Design的理念提到,將所有介面上的元素都當成圖層,依照重要程度安排群組。像是導航條這樣的靜態內容就是最頂層級,而動態、互動的內容是最低的。

2016715204

群組對比化

長得差不多的圖層會混在一起,引起分心。必需正確地讓每個圖層在同一個風格有明顯區別,這能避免圖層都混在一起,凸顯讓使用者專注的內容。

2016715205

設計小UI元素

像是標籤、標記等等小UI元素通常是補充性質的,只能在它們針對於內容有正面貢獻的時候使用,請不要落入濫用它們的陷井,最好在有必要強調重要元素的時候使用。

2016715206

請不要為了使用顏色而使用,讓調色盤精巧細緻。試著先依照情境使用顏色,例如:「綠色很好,紅色是不好的」等。

結語

現在我們已經有正確的流程觀念了,之後我會分享在Sketch或Photoshop使用,屬於實際操作的技巧,幫助您在工作流程上更有效率!

相關文章