設(shè)計(jì)大量?jī)?nèi)容的頁(yè)面時(shí)，該注意哪些 UI 設(shè)計(jì)準(zhǔn)則？

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

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

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

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

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

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

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

分享標(biāo)題：設(shè)計(jì)大量?jī)?nèi)容的頁(yè)面時(shí)，該注意哪些 UI 設(shè)計(jì)準(zhǔn)則？
本文來(lái)源：http://muchs.cn/news26/143576.html

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

廣告

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