網頁 UI 設計模型探析

網頁 UI 設計模型探析

來自專欄 產品阿蘭

任何關於 UI 設計的討論， 終將會回到 UI 模型的探討。我們見過的大大小小的網站，都符合 UI 設計模型。網頁技術發展到現在，有很多基礎功能都大同小異（如「登錄」、「註冊」），設計模式找出了相同的部分，進行要點總結，設計師進行交互設計時參考設計模型進行工作，可以避免在一些基礎的問題上犯錯誤。UI 模型起源於解決普遍性問題，如果越多的人使用，作用就越大。

模型剖析：

模型認知：掌握了 UI 設計模型就獲取了設計的捷徑

它是一個省時省力，並且相當實用的討巧方法。

常見的用戶界面模型舉例：

漢堡包按鈕（The Hamburger menu）：富有爭議，近來收到一些質疑。但是它用處廣泛，好處是對移動端適配友好。

麵包屑（Breadcrumbs）：在層級導航時，會讓用戶內心感覺安全。

賬號註冊（Account registration）：為了給用戶提供服務而獲取用戶信息的一種方式，樣式從簡到繁都有。

連續滾動（Continuous scroll）：解決內容太多無法在一個頁面完成的問題，適用於講述視覺故事。

可用性（availability）：在線狀態

FAQ：常問問題

「從上至下」 vs「 從下至上」設計方法：常用「從下至上」方法設計，將界面分解為各個組件，這樣常常會導致我們無法從整體把握設計。用戶通常會由上至下，用自己的常識和經驗對網站進行交互。因此，網站交互需要和用戶期望一致。外部一致（和競爭對手或其他網站一致）毫無必要，重要的是內部一致。這也是設計模型解決的問題。

破壞模型的風險：最大的風險是會自絕於用戶。當我們希望打破模型的時候，問自己三個問題：

為什麼要破壞模型？

我們是否創造了一個更好的模型？

用戶能夠快速掌握新模型嗎？

打破模型的方法：用戶進行每一次交互都會希望獲得反饋。我們可以做的是在用戶沒有反饋意圖的時候，給用戶一個意外的反饋。

原型對測試模型的作用：原型之所以如此重要的原因是，用戶無法清晰表達他們需要什麼。測試模型的最好辦法是建立原型然後找人進行測試，以下是提高現有模型的方法：

找出設計問題：進行用戶訪談，用戶調查等；

研究現有的設計模型：查看其他app或者網站是如何解決的；

將設計原型化：以現有的設計為基礎，或徹底重新設計，你的假設需要不受之前設計的束縛；

至少找 5 個用戶測試；

總結測試結果並進行迭代測試；

設計流程

不同層級的 UI 模型：

設計一致性：保持設計一致性是為了網站更好的邏輯體驗，確保內容外部一致。保證一致性有難度，因此需要創建一個 Style Guide（具體方法後面會寫）。

設計策略：用策略模型（模型流）幫助用戶在網站完成任務流。例如，側邊欄和漢堡包菜單都是模型流 - 他們只是幫助用戶在網站交互的兩種方式。

設計情境：只適用於部分網站，如電商網站。亞馬遜在下訂單時候的分步設計，並不是憑空發明出來的，而是依據現實情境設計得到的。

本篇理論較多，下一篇開始切入具體模型，並結合案例進行講解。

推薦閱讀：