設計師和開發(fā)人員在構建網(wǎng)站時,需要考慮很多事情,從視覺外觀到功能設計。為了簡化這個過程,我們準備了這個指南。限于篇幅限制,將這一指南分為三部分,此為第一部分內(nèi)容。
本文將重點介紹創(chuàng)建出色用戶體驗的主要原則、方法和具有啟發(fā)性的案例;從用戶體驗地圖等整體結構開始,到單個頁面的設計;還將介紹網(wǎng)頁設計中其他重要的方面,例如移動端適配和測試。
目錄(加粗部分為本文內(nèi)容)
一、設計用戶體驗地圖
二、頁面設計
三、移動端適配
四、無障礙設計
五、測試
六、開發(fā)交接
七、總結
一、設計用戶體驗地圖1.1 信息架構
人們經(jīng)常將網(wǎng)站上的內(nèi)容列表作為“信息架構”。不對, 雖然它是信息架構的一部分,但它們只是其中的一個方面。信息架構是以一種清晰和合乎邏輯的方式組織信息。信息架構有一個明確的目的:幫助用戶瀏覽一組復雜的信息。好的信息架構會創(chuàng)建一個符合用戶期望的層次結構。但良好的內(nèi)容層級和直觀的導航并不容易,需要通過用戶研究和測試才能實現(xiàn)。
有很多方法可以研究用戶需求。通常情況下,信息架構師會采用用戶訪談或卡片分類的方式來獲知用戶的期望,或者找出潛在用戶是如何進行信息分類。信息架構師還需要了解可用性測試的結果網(wǎng)頁 沒有提交按鈕,以便查看是否能夠高效導航。
卡片分類是一種簡單的方法,可以根據(jù)用戶信息找出內(nèi)容分類的最佳方式。信息架構師喜歡卡片分類的原因之一就是能清晰地得到架構模式。(Image : )
對用戶訪談的結果進行分類,然后檢驗卡片分類是否滿足用戶的心理模型。UX還會使用“Tree ”的方法來檢驗它的作用。信息架構要在設計具體頁面之前完成。
Tree 是一種確定用戶是否能夠通過所提議的信息結構解決需求的可靠方法。(Image : Group)
1.2 全局導航
導航是可用性的基石。如果用戶在網(wǎng)站迷失了方向,那你的網(wǎng)站內(nèi)容有多好也無用。因此網(wǎng)站的導航應該遵循幾個原則:
在設計導航時需要考慮的一些事情:
1.3 鏈接和導航選項
鏈接和導航選項是導航過程中的關鍵因素,直接影響用戶的體驗。遵循這些交互元素的規(guī)則:
1.4 瀏覽器的返回鍵
“后退”按鈕可能是瀏覽器中使用率第二高的按鍵(在輸入地址之后)。確?!昂笸恕卑粹o按用戶期望運行。當用戶訪問頁面上的鏈接,然后單擊“后退”按鈕時,他們希望返回到原始頁面上的退出位置。避免點擊“后退”將用戶帶到原始頁面的頂部,而不是在頁面關閉的地方。如此一來,用戶需要滾動他們已經(jīng)看過的內(nèi)容,用戶會因為沒有合適的“返回位置”功能而感到失望。
1.5 面包屑式
面包屑式導航是一組上下文鏈接,可以輔助網(wǎng)站導航。這是一個次要導航方案網(wǎng)頁 沒有提交按鈕,通常顯示用戶在網(wǎng)站上的位置。
雖然這個元素不需要很多解釋,但有幾件事值得一提:
對于上面的類別,面包屑導航區(qū)分不同的層級是比較難的。
1.6 搜索
有些用戶來到一個網(wǎng)站尋找某個特定的內(nèi)容。他們不會想使用導航選項。他們希望在搜索框中輸入文本,提交他們的搜索請求,然后找到他們要找的頁面內(nèi)容。
在設計搜索框時要考慮到這些基本規(guī)則: