設計大量內容的頁面時,該注意哪些 UI 設計準則?

2022-02-06    分類: 網站建設



依專案的不同,在設計上需要考量的項目也有所不同。當我們接到需要呈現大量內容的產品設計任務時(如新聞、入口網站),該思考哪些要點呢?另外,使用者會不會因為大量內容而造成使用上的困擾?


為何要談設計準則 ?如果網頁上有太多區(qū)塊或細節(jié),使用者相當容易迷失方向。以下提供幾項設計準則 ,可讓繁雜的資訊更容易理解并與讀者(使用者)互動。


1. 清晰的資訊層(Hierarchy of Information)
當使用者初訪網站,設計者必須要讓他們清楚知道 “應該要先看哪邊”?另外,研究結果指出:平均一個頁面的瀏覽時間低于一分鐘。所以你必須讓使用者輕易地找到他們所想找的(所想看的內容)。
首先,他們需要知道眼前這頁面是他所要的,這部分可以靠 header 或導航列來提示。接著,他們也需要知道這些頁面間的組織與這些頁面可如何被操作。基本上,最好能讓使用者藉由掃視(scan)就能大致了解這些資訊,而不需要仔細閱讀內容。
當設計完你的頁面架構后,還必須知道一件事情:就是閱讀的 F模式。意指使用者會由左至右、由上而下的掃視,而呈現出 F型的視覺動線圖。因此,最重要的資訊應該要安排于最上方與左側。


2. 什么是使用者在那當下想要看到的?
透過研究、調查網頁上的使用者們,當下最急迫想執(zhí)行的動作是什么?而這些調查后的資訊也能幫助你組織其頁面的內容,并優(yōu)先提供與使用者最有關的內容。這個簡單的方法可讓使用者更輕易、快速地完成任務。譬如說,在 email 系統(tǒng)中,讓 “撰寫" 這個使用者最需要的核心功能總是出現且明顯被看到,盡管使用者處于閱讀其他的信件頁面。
3. 隱藏更多細節(jié)
在靜態(tài)頁面上展示所有的細節(jié)將會顯得擁擠雜亂,所以先提供使用者足夠的資訊就好,再設計讓使用者進一步了解資訊的機制。


有幾個方法:
使用 “小提示" 來顯示更多細節(jié)或說明。
隱蔽過長的文字內容,可判斷內容的重要程度,以 ‘…’ 取代。
提供檢索或篩選機制,若還有提供檢索建議和自動推薦的功能,就更具效率了。
4. 明顯的導航(Navigation)
一個網站應該要讓使用者 “總是" 知道他們在網站中的位置、某頁面怎么連過去、怎么回到首頁 … 等。我們可以透過一些簡單的視覺手法,讓導航這件事變得更具體。例如:使用者點選了一個新頁面,而這個頁面由左側滑入,就知道這個頁面取代了原本的,成為你現在正在瀏覽的頁面。此外,Google 推出的 Material Design 利用了 “紙" 的特性(實體及空間感),讓導航與層變得更具體且具邏輯性。
只要一展開導航列,其呈現的項目能讓使用者有足夠的資訊來判斷所對應的內容,且讓網站的導航列清楚易見,使用者便能更快且輕松的理解你的網站。


5. 讓可操作的元素顯而易見
若某個元素(文字、icon、圖片)可被點擊或編輯,應該不需再解釋它,只需透過 “視覺上” 的差異來提供線索即可。如按鈕要讓它看起來可被點擊,并做出狀態(tài)上的差異(如游標覆蓋)。
在編輯內容時,使用者也應該獲得這些內容狀態(tài)的視覺回饋。例如:當他們在填寫表格時,可讓他們注意到輸入的內容是否符合規(guī)范?是否有錯誤?或是已被修改過? (清楚的狀態(tài)回饋)。
6. 預防錯誤發(fā)生


身為設計師,我們要避免使用者犯下一些錯誤。例如:雖然 icon 能表示一些功能或資訊,但如果 icon 不能直覺地被辨識,使用它就是弊大于利。此時,若在游標覆蓋 icon 時出現小提示,將可避免使用者錯誤點擊。再者,相較于只使用 icon,"描述性" 的文字更能傳遞動作訊息,所以更應該被使用。例如,跳出視窗上的按鈕文字表示 “存檔" 或 “好",哪個較能讓使用者知道系統(tǒng) “將" 進行何項行為?當然是前者。
假使我們知道使用者可能會犯錯,就可以在流程中打斷他們,透過預防錯誤的彈出視窗再次確認他們的行為及告知后果,這個方式同樣適用于可能會因為不可逆而造成傷害的行為上。例如,假如使用者想要刪除一份與其他人分享的檔案,系統(tǒng)應該要提醒他,刪除檔案可能會影響其他人。

當前題目:設計大量內容的頁面時,該注意哪些 UI 設計準則?
瀏覽地址:http://bm7419.com/news/143576.html

成都網站建設公司_創(chuàng)新互聯,為您提供網站收錄、云服務器、做網站網站制作、靜態(tài)網站定制網站

廣告

聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯

h5響應式網站建設