網(wǎng)頁 UI 設(shè)計模型探析

時間：2023-09-29 07:48:01 | 來源：網(wǎng)站運營

時間：2023-09-29 07:48:01 來源：網(wǎng)站運營

網(wǎng)頁 UI 設(shè)計模型探析：任何關(guān)于 UI 設(shè)計的討論， 終將會回到 UI 模型的探討。我們見過的大大小小的網(wǎng)站，都符合 UI 設(shè)計模型。網(wǎng)頁技術(shù)發(fā)展到現(xiàn)在，有很多基礎(chǔ)功能都大同小異（如“登錄”、“注冊”），設(shè)計模式找出了相同的部分，進行要點總結(jié)，設(shè)計師進行交互設(shè)計時參考設(shè)計模型進行工作，可以避免在一些基礎(chǔ)的問題上犯錯誤。UI 模型起源于解決普遍性問題，如果越多的人使用，作用就越大。


模型剖析：

模型認知：掌握了 UI 設(shè)計模型就獲取了設(shè)計的捷徑
它是一個省時省力，并且相當(dāng)實用的討巧方法。

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

漢堡包按鈕（The Hamburger menu）：富有爭議，近來收到一些質(zhì)疑。但是它用處廣泛，好處是對移動端適配友好。
面包屑（Breadcrumbs）：在層級導(dǎo)航時，會讓用戶內(nèi)心感覺安全。
賬號注冊（Account registration）：為了給用戶提供服務(wù)而獲取用戶信息的一種方式，樣式從簡到繁都有。
連續(xù)滾動（Continuous scroll）：解決內(nèi)容太多無法在一個頁面完成的問題，適用于講述視覺故事。
可用性（availability）：在線狀態(tài)
FAQ：常問問題

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

破壞模型的風(fēng)險：最大的風(fēng)險是會自絕于用戶。當(dāng)我們希望打破模型的時候，問自己三個問題：

為什么要破壞模型？
我們是否創(chuàng)造了一個更好的模型？
用戶能夠快速掌握新模型嗎？

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

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

找出設(shè)計問題：進行用戶訪談，用戶調(diào)查等；
研究現(xiàn)有的設(shè)計模型：查看其他app或者網(wǎng)站是如何解決的；
將設(shè)計原型化：以現(xiàn)有的設(shè)計為基礎(chǔ)，或徹底重新設(shè)計，你的假設(shè)需要不受之前設(shè)計的束縛；
至少找 5 個用戶測試；
總結(jié)測試結(jié)果并進行迭代測試；

設(shè)計流程



不同層級的 UI 模型：

設(shè)計一致性：保持設(shè)計一致性是為了網(wǎng)站更好的邏輯體驗，確保內(nèi)容外部一致。保證一致性有難度，因此需要創(chuàng)建一個 Style Guide（具體方法后面會寫）。
設(shè)計策略：用策略模型（模型流）幫助用戶在網(wǎng)站完成任務(wù)流。例如，側(cè)邊欄和漢堡包菜單都是模型流 - 他們只是幫助用戶在網(wǎng)站交互的兩種方式。
設(shè)計情境：只適用于部分網(wǎng)站，如電商網(wǎng)站。亞馬遜在下訂單時候的分步設(shè)計，并不是憑空發(fā)明出來的，而是依據(jù)現(xiàn)實情境設(shè)計得到的。

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