通過清晰的視覺層次提升您的用戶體驗

已發表: 2022-03-11

自從互聯網是一個遙遠的幻想以來，視覺層次的概念就已應用於設計，它在現代產品設計中與平面廣告的頂峰一樣重要。

視覺層次決定了人們在頁面上獲取和處理信息的順序，無論它是數字的還是印刷的。這是創建最佳用戶體驗的重要組成部分。

簡而言之，清晰的視覺層次感引導人們走向重要的內容或行動。在平面廣告中，這將是標語，而在數字產品中，它可能是品牌信息或主要的號召性用語。

這是一種非常有用的方式，可以創造有序和有目的的客戶體驗，同時提高實現戰略成果的機會。

以下是用戶體驗設計師可以採取的幾個步驟，以在數字產品中實現清晰的視覺層次感，並將客戶體驗提升到一個新的水平。

定義用戶體驗和品牌目標

使用多種方法，許多產品團隊已經在為他們產品的每個部分定義用戶體驗目標。

通過滿足 SMART 方法的標準（特定、可衡量、可操作、相關、可移動）來塑造用戶體驗目標的定義是一種流行的方法。這裡有一篇很好的文章。

同樣重要的是品牌目標。這些從品牌和商業角度反映了企業的總體目標。汽車服務登陸頁面的品牌目標示例如下：a) 將品牌打造為優質服務，b) 鼓勵汽車搜索。

記錄客戶旅程各個階段的用戶體驗和品牌目標的最簡單和最有效的方法是舉辦協作視覺層次研討會。

使用諸如 Milanote 甚至 Sketch 之類的大畫布協作工具，按大致時間順序佈置原型屏幕。邀請關鍵從業者參加在線或實體會議，確保從用戶體驗和品牌角度都有代表。

然後，屏幕共享（或插入顯示器），並開始註釋！

這啟動了為客戶體驗的每個部分確定用戶體驗和品牌目標的過程，並啟動了一個可以在整個設計過程的其餘部分中使用的戰略工作流程。

現在用戶體驗和品牌目標已經到位，是時候為每個動作或內容定義適當的視覺層次結構，並將其記錄下來以供後續設計工作參考。

首先，需要一個分類法。最好使用 1 到 3 的等級——1 是最重要的，3 是最不重要的。

使用前面介紹的廣泛畫布格式，開始協作註釋原型佈局。

在這個例子中，有一個用戶體驗目標“我想更多地了解這個品牌的服務，以確定它是否符合我的預算、需求和偏好。” 品牌目標是 a) 將品牌打造為優質服務，以及 b) 鼓勵汽車搜索。

有鑑於此，品牌信息“從 500 多輛汽車中找到您的理想汽車”的層次結構為 1，隨附的表格和 CTA 也是如此。

儘管它對總體客戶體驗很重要，但實際的徽標（和導航）已被指定為 2，因為它在滿足用戶體驗和品牌目標方面發揮的作用並不大。

支持內容被標記為 3，這可能看起來違反直覺。然而，它堅持開始形成的敘述流程，以品牌信息和“開始”功能為主要重點，然後是標識和導航來建立服務的優質身份和結構，然後是支持內容讓客戶放心，提供背景信息並激勵客戶。

隨著設計師習慣於考慮視覺層次，很容易開始欣賞它所揭示的敘述可能性，為用戶界面和他們講述的故事增添真正的深度。

現在目標和視覺層次排名已經確定，可以創建將它們帶入生活的視覺語言。讓我們假設已經有一個設計系統（如果沒有，這應該首先完成！）並且已經設計了一系列 UI 元素。

首先要開始的是構圖——必要模板的佈局。考慮高排名元素應該出現在哪裡（如前所述，它並不總是最值得期待的）。可能需要多種變化來滿足一系列場景。為確保項目後期沒有任何遺漏，設計師現在應該花時間創建它們。

在設計過程的後期，設計系統文檔中可以包含一些示例模型，以及 UI 模式的實時符號（因此從事該項目的設計師擁有最新版本）。

一旦確定了構圖的廣泛概念，就可以開始創建 UI 元素的變體。

以不起眼的頁眉為例。在這個來自人力資源諮詢公司最近項目的示例中，設計系統中有三個變體，以適應不同等級的視覺層次。

設計人員可以使用其 UI 的構建塊對此進行擴展。例如，在最近一個流行的招聘應用程序項目中，深度被用來區分內容面板——深度越大，視覺層次越高。

視覺層次幾乎可以設計到品牌視覺語言的每個元素中：構圖、排版、深度、圖像、圖像和語調。設計越深入，客戶體驗就越有凝聚力和重點。

將可視化層次結構工作流程融入設計過程可顯著改善用戶體驗。它通過為設計師提供一種為不同類型的內容分配等級的方法來實現這一點，從而使用戶界面不僅感覺有序和直觀，而且還可以實現核心品牌目標。

清晰的視覺層次不僅可以提升您的用戶體驗，還可以設置可持續的工作流程，為設計過程提供戰略重點——這在現代產品設計環境中是必不可少的。

• • •