網(wǎng)站設(shè)計中哪些細節(jié)最容易被忽視？

時間：2024-02-15 22:55:02 | 來源：網(wǎng)站運營

時間：2024-02-15 22:55:02 來源：網(wǎng)站運營

網(wǎng)站設(shè)計中哪些細節(jié)最容易被忽視？：對于一個網(wǎng)站來說，最重要的自然是用戶體驗。從我看來，用戶體驗其實就是一對細節(jié)的集合。只有我們這些細節(jié)強迫癥患者，才格外追求這個。

所謂用戶體驗：一句話就是——讓用戶用著舒服

如果讓我想“讓用戶用著舒服”的第一點，就是“讓用戶感覺著舒服”。可是這一點就是常常被忽視的細節(jié)。下面我列舉出一些讓用戶用著舒服的要素。很多是自己在開發(fā)中感受到的，可能并不完整。

UI設(shè)計維持同一風(fēng)格。具體來說就是，網(wǎng)站的界面元素在整個網(wǎng)站中具有一致性。比如說“按鈕”，這個非常重要的界面元素。登錄界面的“登錄”“注冊”，發(fā)帖界面的“回帖”“發(fā)布”，還有“確認訂單”。可以看出它們是具有相似的功能的——submit。那么它們在外觀上就要保持一致。

UI一致可以讓用戶憑著自己的直覺找到所需的功能，減少用戶的網(wǎng)站使用學(xué)習(xí)成本。

功能收放有度。我的意思是指在網(wǎng)站首頁和網(wǎng)站的其他位置中，功能按鈕的折疊和展示情況。有些不常用的按鈕一般不需要展示，而是折疊到某個菜單中。而將常用的功能直接設(shè)為鏈接或按鈕。這點在制作導(dǎo)航條的時候特別重要（因為導(dǎo)航條會出現(xiàn)在每一個頁面上）。這個不僅與網(wǎng)頁編程，而且與網(wǎng)頁內(nèi)容設(shè)計關(guān)系也很大。比如導(dǎo)航欄一般推薦放置3~4個一級導(dǎo)航，如果你有十多個分類，建議再分到幾個更大的分類里。導(dǎo)航欄排十多個鏈接并不是很好看的。

不要讓同一元素多次出現(xiàn)在頁面上，尤其是這一元素很顯眼的時候。比如某網(wǎng)站有很多欄目，首頁是這些欄目內(nèi)容的推薦，網(wǎng)頁上充斥著大量的“查看更多>>”按鈕，（每個欄目都有一個，邊上有個排行榜又來一個。一個網(wǎng)頁上十二三個大按鈕還都長得一樣，看多了就感覺惡心了。）而且按鈕元素還非常大。給人感覺特別不好。

網(wǎng)站要簡潔，把你復(fù)雜的功能隱藏起來，等用戶需要的時候再出來。而不是平鋪在頁面上，不管用不用都在那。這才是設(shè)計。

確定頁面層疊順序。（寫到這里我發(fā)現(xiàn)這點確實容易被忽略。于是單獨出一條來寫）如果你的網(wǎng)頁需要多個層，上面的層有可能會覆蓋到下面，這時候要特別小心設(shè)置z-index值。不要造成遮擋的問題。比如我就見過某網(wǎng)站彈出對話框，一層透明圖片層把按鈕蓋住了，于是完全無法操作對話框按鈕。好吧，這是比較大的bug，還有一些小細節(jié)，比如某最近改版了的彈幕視頻網(wǎng)站，它的“返回頂部”按鈕蓋在了評論區(qū)域迷你播放器的上面。于是視頻部分被遮擋。果殼以前也出現(xiàn)過類似問題。當(dāng)編輯器過長的時候，比如我這樣的一篇長回答。編輯器的頂部工具欄會被固定在頁面頂部。這是個非常好的照顧用戶的設(shè)計。然而果殼當(dāng)時出了個bug，他們忘記了上面的導(dǎo)航欄，于是編輯器工具欄蓋在了導(dǎo)航欄的上面。

精心布置廣告位和推薦位。網(wǎng)站的用戶總是不喜歡廣告的，但是畢竟廣告是網(wǎng)站的收入主要來源。現(xiàn)在網(wǎng)頁廣告屏蔽軟件也比較多，如果廣告太難看/影響操作，就難逃被用戶屏蔽了。廣告位/推薦位放置最重要的是顯眼。比顯眼更重要的是不能影響用戶的使用。沒有人喜歡右下角彈出廣告。

廣告最好占據(jù)頁面的一個固定的位置，不要放在浮動層，千萬不要彈窗。廣告顯示的時候不要影響用戶的操作，比如以前的網(wǎng)易、騰訊（網(wǎng)易騰訊這么大，我就黑一黑吧，不說某網(wǎng)站了）廣告，會把整個網(wǎng)頁的header部分向下壓，而且有個動畫。更郁悶的是，動畫是在載入后才播放的。于是就會出現(xiàn)——我正要點擊某個鏈接，廣告出來了，廣告的位置占據(jù)了我原來鼠標(biāo)的位置，我點到廣告了。這種廣告會遭致用戶反感，不是大網(wǎng)站或流氓網(wǎng)站千萬不要這么干，會把自己搞死的。

網(wǎng)頁的title標(biāo)簽和網(wǎng)站的語義化。HTML的title屬性是最容易被人忽略的屬性之一，然而它非！常！有！用！title的作用非常簡單，就是在鼠標(biāo)停留在上方一小會之后彈出一個工具提示。有的時候為了UI的設(shè)計，有些文字的按鈕就用一個圖形代替了。當(dāng)你的圖形設(shè)計比較抽象的時候——用戶怎么知道你那個圖標(biāo)代表什么意思。這個時候title的作用就出現(xiàn)了。title還有一個作用是處理...元素。所謂...元素是指元素內(nèi)容過長，以至于顯示了“...”來表示這后面還有更多的東西。這種元素一定要加上title標(biāo)簽表示全部的內(nèi)容。這樣可以在用戶鼠標(biāo)懸停在“...”上一小會后，顯示出全部的內(nèi)容。

圖片的alt屬性也同理?？偸俏沂峭扑]圖片一定要有alt屬性。以及其他的一些語義網(wǎng)需要注意的地方。比如用<h>系列標(biāo)簽來寫標(biāo)題，用<section>標(biāo)簽包裹住文章內(nèi)容，用<footer>來表示網(wǎng)站底部，在<email>標(biāo)簽中寫Email地址等。而不是一味的用div，div，div。。雖然div很重要（這里提一句，如果你的網(wǎng)站還在滿篇用table，tr，td，而不是div，你最好去重新找一個前端），但是用各種語義網(wǎng)元素可以幫助其他的程序閱讀你的網(wǎng)頁，并知道它們是干什么的。這樣方便在移動平臺等地方更好的顯示你的網(wǎng)頁，也方便搜索引擎對你網(wǎng)頁的內(nèi)容進行抓取。

減少不必要跳轉(zhuǎn)。有的時候你的網(wǎng)站可能需要處理一些信息而沒有顯示的網(wǎng)頁，有些網(wǎng)站會用一個跳轉(zhuǎn)頁來解決。比如登錄的時候，會先跳到一個空白頁來設(shè)置登錄狀態(tài)，修改數(shù)據(jù)庫等操作，然后再將用戶定位到登錄完成頁。不過跳轉(zhuǎn)頁的最大缺點就是會增加等待時間。而且容易導(dǎo)致操作失?。ㄓ脩粼谶@里刷新）。某外賣網(wǎng)站的支付功能在支付成功的時候，從到銀行支付成功頁點回到商戶網(wǎng)站，會跳到一個支付完成頁，然后跳到支付正在處理頁，然后又是一個支付成功頁，最后跳到訂單成功頁。我看著我的瀏覽器跳來跳去都覺得好難受啊。

后臺可以用curl收發(fā)某些消息，也可以在最初的跳轉(zhuǎn)頁帶上更多的參數(shù)，直接讓結(jié)果頁中的sql語句處理全部內(nèi)容。

背景、邊框和底紋。有的時候這些背景，邊框和底紋會直接的對用戶造成使用上的影響。首先彈出對話框一定要有非透明背景。邊框和底紋可以為用戶標(biāo)識操作區(qū)域。哪些區(qū)域是推薦修改的，哪些是無關(guān)緊要的之類的東西。如果提供給用戶選擇的是幾個大區(qū)域，那么用不同的邊框來標(biāo)識出用戶的選擇也是很重要的。

在保證UI設(shè)計風(fēng)格的基礎(chǔ)上，不要為了達到某一視覺效果來修改網(wǎng)頁。有些網(wǎng)頁為了達到某些UI上的要求，比如是間距的特殊要求來用一些空元素。實際上這些空元素對于HTML來說，就是垃圾代碼。這種情況下盡量用CSS達到某些要求，如果實在達不到，不應(yīng)該強求。我一直是認為UI設(shè)計不應(yīng)該要求前端設(shè)計100%還原。垃圾代碼不僅影響網(wǎng)頁運行，還可能導(dǎo)致一些奇怪的bug。

給用戶明確的反饋。當(dāng)你在做一個操作的時候，可能背后的javascript要執(zhí)行很長的時間。這個時候你必須明確告訴用戶你正在處理一些東西。最常用的方法是將鼠標(biāo)光標(biāo)切換成wait模式，還有在網(wǎng)頁上顯示一個小圈圈的動態(tài)圖。如果你用Ajax登錄，那么在點擊登錄按鈕之后應(yīng)該顯示一個“登錄中”的提示。如果你的表單驗證出錯，你應(yīng)該用紅色指示出錯誤的那一項，并告知錯誤原因。 有些網(wǎng)站會讓那個框閃一閃，甚至直接把輸入焦點重定位過去（這在你的表單很長時非常管用）。用ajax載入的東西，默認文本應(yīng)該設(shè)置為“正在載入”，而不是用一個空div?？傊褪亲層脩糁肋@張網(wǎng)頁正在做什么，這樣雖然不能減少用戶等待時間，但是可以給用戶一個心理安慰，告訴它們：我正在忙著處理你的數(shù)據(jù)。而不要讓你的網(wǎng)站表現(xiàn)的像是失去響應(yīng)一樣。

合并css和javascript來保證不用每次載入。一個網(wǎng)站通常都采用的相同的UI，那么你每張網(wǎng)頁的CSS可能非常相似，當(dāng)然也會有一些不同的地方。這個時候你應(yīng)該合并它們，即使有一些內(nèi)容在當(dāng)前頁面上用不到。一個網(wǎng)頁更應(yīng)該避免載入多個css?，F(xiàn)在的瀏覽器都可以自動緩存文件，有些服務(wù)器也支持發(fā)送HTTP 304 Not Modified狀態(tài)，告訴瀏覽器使用它緩存中的信息。如果整個網(wǎng)站使用相同的css和javascript文件，那么它們都只需要在主頁載入的時候載入一次。在網(wǎng)站中的其他頁面間切換的時候，瀏覽器會在緩存中取出css和javascript而不是重新請求服務(wù)器。這樣可以節(jié)省服務(wù)器帶寬，也可以讓網(wǎng)站載入速度更快。

務(wù)必不要忘了支持鍵盤操作和觸摸操作。鍵盤永遠是交互的最重要的接口之一，在你的網(wǎng)站中請不要忘了鍵盤的使用。最常見的是支持回車提交表單，比如登錄的時候，大多數(shù)人更習(xí)慣輸入完賬號密碼后按回車來登錄，可惜的是，網(wǎng)頁并不會自動幫你做這件事，你需要自己去處理回車事件。移動互聯(lián)網(wǎng)發(fā)展迅速，你的網(wǎng)頁可能大多數(shù)人都是在手機上看的。如果你的網(wǎng)頁是響應(yīng)式設(shè)計，你很可能需要處理一些觸摸事件來讓這個頁面在手機上更好用。

明確的后退鏈接。如果你的網(wǎng)頁內(nèi)容比較多，那么用戶可能會深陷到一個很深的目錄結(jié)構(gòu)里，比如子欄目的子欄目，當(dāng)他們想回來的時候并不容易。提供一個后退到高級目錄的鏈接（注意不是瀏覽器的后退鏈接，因為用戶可能從子欄目的一個文章跳到另一個文章。）就可以有效的提高用戶體驗。如果允許，提供一個面包屑導(dǎo)航欄明顯更好。如果你的網(wǎng)站有導(dǎo)航條，那么確保有一個“首頁”鏈接。方便用戶在網(wǎng)站各個欄目間跳轉(zhuǎn)可以讓用戶更舒服。

永遠不要相信來自瀏覽器的任何消息。你的用戶可能在表單里亂打?；蛘吆鷣y修改你地址欄上的參數(shù)。就算是你用javascript檢查過了，或者post提交表單，這個世界上仍然有Web-Sniffer等類似的工具可以讓用戶把信息提交到服務(wù)器。所以服務(wù)器一定要對用戶輸入和網(wǎng)址參數(shù)再過濾一次。

但是這并不代表你可以不在網(wǎng)頁上用javascript驗證表單，對表單采用javascript驗證可以讓用戶不必提交就知道自己發(fā)生了什么錯誤，這也是一種良好的用戶體驗。

網(wǎng)址要好看。網(wǎng)站不同欄目的區(qū)分是URL的不同，URL可以區(qū)分目錄，傳遞參數(shù)。建議編寫URL路由來統(tǒng)一目錄和參數(shù)。舉個栗子，這個題目的URL是

http://www.zhihu.com/quesiton/25535246。這個URL就很漂亮。如果這個URL是這樣：

http://www.zhihu.com/quesiton.cgi?quesid=25535246。這一種URL就沒有上面的好看了。更不用說有些網(wǎng)站的URL是這樣的：

http://www.zhihu.com/question.cgi?quesid=25535246&userid=03913583&lastquesid=13931538&jump=Cjdfapfjf3n2rqraeSFA8f2f283ewjjfsfj==。。。。。。在URL上盡量用斜線分隔，讓你的參數(shù)看起來像目錄一樣，減少不必要的參數(shù)傳遞，讓它們都到session或是cookie里去。網(wǎng)址好看便于用戶分享你的鏈接，用戶也更愿意去收藏你的網(wǎng)站。

嗯，我想說的就是這些。

版權(quán)許可聲明：

CC BY-NC-SA 3.0