依專案的不同，在設(shè)計上需要考量的項目也有所不同。當(dāng)我們接到需要呈現(xiàn)大量內(nèi)容的產(chǎn)品設(shè)計任務(wù)時（如新聞、入口網(wǎng)站），該思考哪些要點(diǎn)呢？另外，使用者會不會因為大量內(nèi)容而造成使用上的困擾？

為何要談設(shè)計準(zhǔn)則 ？如果網(wǎng)頁上有太多區(qū)塊或細(xì)節(jié)，使用者相當(dāng)容易迷失方向。以下提供幾項設(shè)計準(zhǔn)則 ，可讓繁雜的資訊更容易理解并與讀者（使用者）互動。

1. 清晰的資訊層（Hierarchy of Information）
當(dāng)使用者初訪網(wǎng)站，設(shè)計者必須要讓他們清楚知道 “應(yīng)該要先看哪邊”？另外，研究結(jié)果指出：平均一個頁面的瀏覽時間低于一分鐘。所以你必須讓使用者輕易地找到他們所想找的（所想看的內(nèi)容）。
首先，他們需要知道眼前這頁面是他所要的，這部分可以靠 header 或?qū)Ш搅衼硖崾尽＝又麄円残枰肋@些頁面間的組織與這些頁面可如何被操作。基本上，最好能讓使用者藉由掃視（scan）就能大致了解這些資訊，而不需要仔細(xì)閱讀內(nèi)容。
當(dāng)設(shè)計完你的頁面架構(gòu)后，還必須知道一件事情：就是閱讀的 Ｆ模式。意指使用者會由左至右、由上而下的掃視，而呈現(xiàn)出 Ｆ型的視覺動線圖。因此，最重要的資訊應(yīng)該要安排于最上方與左側(cè)。

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

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

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

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

分享標(biāo)題：設(shè)計大量內(nèi)容的頁面時，該注意哪些 UI 設(shè)計準(zhǔn)則？
本文來源：http://m.newbst.com/news26/143576.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站設(shè)計公司、App開發(fā)、App設(shè)計、微信公眾號、網(wǎng)站維護(hù)

廣告

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