「翻譯」網(wǎng)頁(yè)設(shè)計(jì)中的「Do」&「Don’t」

時(shí)間：2023-09-27 03:12:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-27 03:12:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

「翻譯」網(wǎng)頁(yè)設(shè)計(jì)中的「Do」&「Don’t」：

一直以來(lái)，網(wǎng)頁(yè)設(shè)計(jì)都是件棘手的事。當(dāng)你在設(shè)計(jì)時(shí)要考慮的東西太多了。為了簡(jiǎn)化這個(gè)任務(wù)，我準(zhǔn)備了個(gè)網(wǎng)頁(yè)設(shè)計(jì)師進(jìn)行設(shè)計(jì)時(shí)需要考慮的「Do」和「Don‘t」原則列表。不要怕，都是些簡(jiǎn)單的原則。

下面我們開始?。ㄗg者：哎呀，翻譯完已經(jīng)七夕啦?。?br>

閱讀信息：

• 文章出處：Medium - UX Planet
• 閱讀時(shí)間：8 分鐘
• 流量預(yù)估：2.4 MB

作者信息：

• 姓名：Nick Babich
• 介紹：I’m a software developer, tech enthusiast and UI/UX lover.
• 聯(lián)系方式：Twitter | Facebook

1、在不同設(shè)備上提供相似的體驗(yàn)：

用戶會(huì)使用許多不同類型的設(shè)備訪問(wèn)你的網(wǎng)站：他們會(huì)在臺(tái)式機(jī)或筆記本電腦，平板，手機(jī)，音樂(lè)播放器甚至手表上訪問(wèn)。體驗(yàn)設(shè)計(jì)的很大一部分是確保用戶無(wú)論通過(guò)什么方式訪問(wèn)你的網(wǎng)站，都能得到相似的體驗(yàn)，而不會(huì)因設(shè)備而異。

如果用戶在手機(jī)上訪問(wèn)你的網(wǎng)站，他們應(yīng)該能夠毫不費(fèi)力地找到需要的東西，就像他們?cè)诩依锏呐_(tái)式機(jī)上訪問(wèn)你的網(wǎng)站一樣。

2、設(shè)計(jì)清晰易用的導(dǎo)航：

好的導(dǎo)航是可用性的基石。請(qǐng)記住，**無(wú)論你的網(wǎng)站有多好，用戶迷路的話就一文不值。**你網(wǎng)站上的導(dǎo)航應(yīng)該是：

• 簡(jiǎn)單：每個(gè)網(wǎng)站都應(yīng)該有最簡(jiǎn)單的結(jié)構(gòu)
• 清晰：導(dǎo)航選項(xiàng)對(duì)訪客而言必須不言而喻
• 一致：主頁(yè)和每個(gè)頁(yè)面上的導(dǎo)航系統(tǒng)都應(yīng)該一致

設(shè)計(jì)你的導(dǎo)航系統(tǒng)，讓用戶在盡可能少的點(diǎn)擊下達(dá)到他們想去的頁(yè)面，同時(shí)仍易于找到他們需要去的頁(yè)面。

3、更改訪問(wèn)過(guò)的鏈接的顏色：

鏈接是導(dǎo)航過(guò)程中的關(guān)鍵因素。當(dāng)訪問(wèn)過(guò)的鏈接不改變顏色時(shí)，用戶可能在無(wú)意中重復(fù)訪問(wèn)相同的頁(yè)面。

知曉自己之前和現(xiàn)在的位置使得用戶更易于決定下面去哪。

知道自己去過(guò)哪些頁(yè)面，可以讓用戶免于在無(wú)意中一遍又一遍地訪問(wèn)相同界面之苦。

4、輕松快速掃描頁(yè)面：

當(dāng)用戶訪問(wèn)你的網(wǎng)頁(yè)呢時(shí)，他們更有可能快速掃描屏幕，而不是閱讀所有內(nèi)容。因此，如果用戶想要查找什么內(nèi)容或完成一個(gè)任務(wù)，他們會(huì)在發(fā)現(xiàn)目標(biāo)前持續(xù)掃描。而你作為設(shè)計(jì)師，可以通過(guò)設(shè)計(jì)好的視覺層次結(jié)構(gòu)來(lái)幫助他們。視覺層次是指以信息權(quán)重高低（例如，他們的眼睛應(yīng)該先看何處，再看何處）來(lái)排列或呈現(xiàn)網(wǎng)頁(yè)上的元素。

將網(wǎng)站 logo，登錄框，導(dǎo)航系統(tǒng)或其他重要的內(nèi)容作為視覺焦點(diǎn)，以便用戶一眼看見。

Basecamp 采用的 Z 字視覺層級(jí)。

5、仔細(xì)檢查所有鏈接：

當(dāng)用戶點(diǎn)擊站點(diǎn)上的鏈接并看見「404錯(cuò)誤」頁(yè)面時(shí)，他會(huì)很容易變得失落。當(dāng)用戶正在搜索內(nèi)容時(shí)，他希望每個(gè)鏈接都可以帶他去鏈接所指的地方，而不是「404錯(cuò)誤」或者不想去地方。

6、確保可點(diǎn)擊的元素識(shí)別度高：

網(wǎng)頁(yè)上元素的外觀暗示了用戶如何和它交互?？雌饋?lái)像是鏈接或按鈕的視覺元素，但不可點(diǎn)擊（即不是鏈接的含下劃線的文字）可能會(huì)使用戶迷惑。用戶需要知道頁(yè)面的哪些區(qū)域是靜態(tài)內(nèi)容，而哪些區(qū)域是可點(diǎn)擊的（或是可用手指敲擊的）。

讓可點(diǎn)擊的元素顯而易見

Menagerie Climb：橙色的框是一個(gè)按鈕嗎？答案是：不。形狀和標(biāo)簽使這歌元素看起來(lái)像按鈕，但它并不是。

1、別讓你的用戶在內(nèi)容加載時(shí)干等：

網(wǎng)頁(yè)用戶非常缺失注意力和耐心。根據(jù)NNGroup研究：

10秒是用戶將注意力集中在一個(gè)任務(wù)上的極限時(shí)間

當(dāng)用戶必須等待網(wǎng)站加載時(shí)，如果加載速度不夠快，他們將變得沮喪，并可能離開。即使是最精美的加載動(dòng)效，如果時(shí)間過(guò)長(zhǎng)，也可能迫使用戶離開。

加載動(dòng)效 by Ramotion

2、別在新標(biāo)簽中打開鏈接：

這種粗魯?shù)男袨闀?huì)使返回鍵無(wú)效，而返回鍵是用戶返回到上一個(gè)頁(yè)面的習(xí)慣方式。

3、別讓亂花迷人眼：

促銷和廣告可以讓他們旁邊的內(nèi)容失色，并阻礙用戶達(dá)成自己的目的。不要說(shuō)任何看起來(lái)像廣告的東西都會(huì)被被用戶習(xí)慣性忽略（這種現(xiàn)象被稱為廣告失明）。

通常，任何看起來(lái)像廣告的東西都被用戶習(xí)慣性忽略（這種現(xiàn)象被稱為廣告失明）

4、不要綁架滾軸：

綁架滾軸是設(shè)計(jì)師或開發(fā)者控制滾動(dòng)條滾動(dòng)幅度，使在其網(wǎng)站上看上去不同。可以包括動(dòng)畫效果，固定滾動(dòng)點(diǎn)，甚至重新設(shè)計(jì)的滾動(dòng)條本身。綁架滾軸是許多最煩人的事情之一，因?yàn)樗鼜挠脩羰种袚寠Z了操控權(quán)。當(dāng)你設(shè)計(jì)網(wǎng)站或用戶界面時(shí)，想讓用戶通過(guò)網(wǎng)站或應(yīng)用程序控制自己的瀏覽節(jié)奏。

5、不要帶著聲音自動(dòng)播放視頻：

自動(dòng)播放視頻，音樂(lè)或聲音會(huì)嚇到用戶。這些元素應(yīng)謹(jǐn)慎使用，只有在適合并符合預(yù)期的情況下才能使用。

Facebook 的視頻設(shè)置為自動(dòng)播放，但不會(huì)出現(xiàn)聲音，除非用戶以某種方式表明他們正在觀看視頻（例如通過(guò)與視頻進(jìn)行互動(dòng)）。

6、為了美視覺效果犧牲可用性：

網(wǎng)頁(yè)或用戶界面的設(shè)計(jì)不應(yīng)干擾用戶在屏幕上獲取內(nèi)容。避免在背景上制造視覺噪音，妨礙網(wǎng)站的可讀性的糟糕配色，或?qū)Ρ榷炔蛔愕念伾ɡ缦旅娴睦樱?br>
低對(duì)比度的配色根本看不清文字

7、使用閃爍的文字和廣告：

閃爍的內(nèi)容可能會(huì)觸發(fā)某些過(guò)敏用戶的癲癇發(fā)作。它不僅會(huì)引起癲癇，而且對(duì)于一般用戶來(lái)說(shuō)也令人討厭并導(dǎo)致分心。

避免閃爍的內(nèi)容！




其他文章

• 插件：CRAFT | Sketch Material | WeSketch | Runner | Paddy | Diya
• 技法：Library | Colored Text | Symbol | Shared Text | Resizing | 流程圖 | 文檔 | 表格
• 工具：InVison Studio | Nucleo | Feedly
• 案例：Swarm | YouTube | Uber | Oscar | Atlassian | Adobe | Adobe

感謝閱讀，祝大家七夕快樂(lè)