股票杠杆一般几倍-最近好的股票推荐有哪些公司-【东方资本】,配资的含义,线下配资平台地址怎么填的,2025年有望翻十倍的股票

請輸入關(guān)鍵字
您需要AI互聯(lián)網(wǎng)
顧問提供專業(yè)咨詢
AI人工智能 · VR · AR · 智慧博物館 · 智慧公園 · 景區(qū) · 文創(chuàng) · 動畫 · 游戲 · 年度運(yùn)營
大模型定制 · WEB3 · 元宇宙 · 區(qū)塊鏈 · 高端網(wǎng)站建設(shè) · 小程序 · APP · 微信 · H5 · 電商
設(shè)計(jì)大量內(nèi)容的頁面時(shí)，該注意哪些 UI 設(shè)計(jì)準(zhǔn)則？
2017.03.31

UI，用戶界面，使用者介面


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


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

　　UI，用戶界面，使用者介面

　　1. 清晰的資訊層（Hierarchy of Information）

　　當(dāng)使用者初訪網(wǎng)站，設(shè)計(jì)者必須要讓他們清楚知道 “應(yīng)該要先看哪邊”？另外，研究結(jié)果指出：平均一個(gè)頁面的瀏覽時(shí)間低于一分鐘。所以你必須讓使用者輕易地找到他們所想找的（所想看的內(nèi)容）。

　　首先，他們需要知道眼前這頁面是他所要的，這部分可以靠 header 或?qū)Ш搅衼硖崾尽＝又麄円残枰肋@些頁面間的組織與這些頁面可如何被操作。基本上，最好能讓使用者藉由掃視（scan）就能大致了解這些資訊，而不需要仔細(xì)閱讀內(nèi)容。

　　當(dāng)設(shè)計(jì)完你的頁面架構(gòu)后，還必須知道一件事情：就是閱讀的 Ｆ模式。意指使用者會由左至右、由上而下的掃視，而呈現(xiàn)出 Ｆ型的視覺動線圖。因此，最重要的資訊應(yīng)該要安排于最上方與左側(cè)。

　　UI，用戶界面，使用者介面

　　2. 什么是使用者在那當(dāng)下想要看到的？

　　透過研究、調(diào)查網(wǎng)頁上的使用者們，當(dāng)下最急迫想執(zhí)行的動作是什么？而這些調(diào)查后的資訊也能幫助你組織其頁面的內(nèi)容，并優(yōu)先提供與使用者最有關(guān)的內(nèi)容。這個(gè)簡單的方法可讓使用者更輕易、快速地完成任務(wù)。譬如說，在 email 系統(tǒng)中，讓 “撰寫" 這個(gè)使用者最需要的核心功能總是出現(xiàn)且明顯被看到，盡管使用者處于閱讀其他的信件頁面。

　　3. 隱藏更多細(xì)節(jié)

　　在靜態(tài)頁面上展示所有的細(xì)節(jié)將會顯得擁擠雜亂，所以先提供使用者足夠的資訊就好，再設(shè)計(jì)讓使用者進(jìn)一步了解資訊的機(jī)制。

　　UI，用戶界面，使用者介面

　　有幾個(gè)方法：

　　使用 “小提示" 來顯示更多細(xì)節(jié)或說明。

　　隱蔽過長的文字內(nèi)容，可判斷內(nèi)容的重要程度，以 ‘…’ 取代。

　　提供檢索或篩選機(jī)制，若還有提供檢索建議和自動推薦的功能，就更具效率了。

　　4. 明顯的導(dǎo)航（Navigation）

　　一個(gè)網(wǎng)站應(yīng)該要讓使用者 “總是" 知道他們在網(wǎng)站中的位置、某頁面怎么連過去、怎么回到首頁 … 等。我們可以透過一些簡單的視覺手法，讓導(dǎo)航這件事變得更具體。例如：使用者點(diǎn)選了一個(gè)新頁面，而這個(gè)頁面由左側(cè)滑入，就知道這個(gè)頁面取代了原本的，成為你現(xiàn)在正在瀏覽的頁面。此外，Google 推出的 Material Design 利用了 “紙" 的特性（實(shí)體及空間感），讓導(dǎo)航與層變得更具體且具邏輯性。

　　只要一展開導(dǎo)航列，其呈現(xiàn)的項(xiàng)目能讓使用者有足夠的資訊來判斷所對應(yīng)的內(nèi)容，且讓網(wǎng)站的導(dǎo)航列清楚易見，使用者便能更快且輕松的理解你的網(wǎng)站。

　　UI，用戶界面，使用者介面

　　5. 讓可操作的元素顯而易見

　　若某個(gè)元素（文字、icon、圖片）可被點(diǎn)擊或編輯，應(yīng)該不需再解釋它，只需透過 “視覺上” 的差異來提供線索即可。如按鈕要讓它看起來可被點(diǎn)擊，并做出狀態(tài)上的差異（如游標(biāo)覆蓋）。

　　在編輯內(nèi)容時(shí)，使用者也應(yīng)該獲得這些內(nèi)容狀態(tài)的視覺回饋。例如：當(dāng)他們在填寫表格時(shí)，可讓他們注意到輸入的內(nèi)容是否符合規(guī)范？是否有錯(cuò)誤？或是已被修改過？ （清楚的狀態(tài)回饋）。

　　6. 預(yù)防錯(cuò)誤發(fā)生

　　UI，用戶界面，使用者介面

　　身為設(shè)計(jì)師，我們要避免使用者犯下一些錯(cuò)誤。例如：雖然 icon 能表示一些功能或資訊，但如果 icon 不能直覺地被辨識，使用它就是弊大于利。此時(shí)，若在游標(biāo)覆蓋 icon 時(shí)出現(xiàn)小提示，將可避免使用者錯(cuò)誤點(diǎn)擊。再者，相較于只使用 icon，"描述性" 的文字更能傳遞動作訊息，所以更應(yīng)該被使用。例如，跳出視窗上的按鈕文字表示 “存檔" 或 “好"，哪個(gè)較能讓使用者知道系統(tǒng) “將" 進(jìn)行何項(xiàng)行為？當(dāng)然是前者。

　　假使我們知道使用者可能會犯錯(cuò)，就可以在流程中打斷他們，透過預(yù)防錯(cuò)誤的彈出視窗再次確認(rèn)他們的行為及告知后果，這個(gè)方式同樣適用于可能會因?yàn)椴豢赡娑斐蓚Φ男袨樯稀＠纾偃缡褂谜呦胍獎h除一份與其他人分享的檔案，系統(tǒng)應(yīng)該要提醒他，刪除檔案可能會影響其他人。
看過此文章的人也看過
讓決策變的簡單
好的開始是成功的一半