設計網站需要注意哪些細節,哪些最容易被忽視?

對於一個網站來說,最重要的自然是使用者體驗。從這來看,使用者體驗其實就是總細節的集合。

所謂使用者體驗:一句話就是——讓使用者有良好的網站瀏覽體驗
如果想“讓使用者用著舒服”的這點,就是“讓使用者操作介面舒服順暢”。
可是這一點就是常常被忽視的細節。

下面列舉出一些讓使用者用介面舒服順暢的要點。很多是開發者們在開發中感受到的,可能並不完整。

一.UI設計維持同一風格
具體來說就是,網站的介面元素在整個網站中具有一致性。比如說“按鈕”,這個非常重要的界面元素。登錄界面的“登錄”“註冊”,發文界面的“回文”“發布”,還有“確認訂單”。登錄界面的“登錄”“註冊”,發文介面的“貼文”“發布”,還有“確認訂單”。可以看出它們是具有相似的功能的——submit。那麼它們在外觀上就要保持一致。

UI一致可以讓用戶憑著自己的直覺找到所需的功能,減少用戶的網站使用學習成本。

二.選單&按鈕功能收放有條理
是指在網站首頁和網站的其他位置中,功能按鈕的折疊和展示情況。
有些不常用的按鈕一般不需要顯示出來,而是折疊到某個選單中。而將常用的功能直接設為連接或按鈕。這點在製作選單列表的時候特別重要(因為選單列會出現在每一個頁面上)。這個不僅與網頁編程,而且與網頁內容設計關係也很大。

比如選單列一般推薦放置三~四個主選單大類別,如果你有十多個分類,建議再分到幾個更大的分類項裡。選單列排十多個連接並排並不是很好看。

不要讓同一元素多次出現在頁面上,尤其是此元素很顯眼的時候。比如某網站有很多欄目,首頁是這些欄目內容的推薦,網頁上充斥著大量的“查看更多>>”按鈕,(每個欄目都有一個,邊上有個排行榜又來一個。一個網頁上十二三個大按鈕還都長得一樣,看多了就感覺眼花撩亂。)而且按鈕元素還非常大。給人感覺設計不良。

網站要簡潔,把複雜的功能隱藏起來,等使用者需要的時候再自行點選出來。而不是平鋪在頁面上,不管用不用到都在攤在那。這才是設計。

三.確定頁面層疊(先後)順序(這點確實容易被忽略。)
如果設計的網頁需要多個層,上面的層有可能會覆蓋到下面,這時候要特別小心設置z-index值。不要造成遮擋的問題。比如曾見過某網站彈出對話框,一層透明圖片層把按鈕蓋住了,就完全無法操作對話框按鈕。這是比較大的bug,還有一些小細節,比如某個改版了的視頻網站,它的“返回頂部”按鈕蓋在了評論區域迷你播放器的上面。於是視訊部分被遮擋。
果殼以前也出現過類似問題。當編輯器過長,編輯器的頂部工具列會被固定在頁面頂部,這是個非常好的使用者設計,但當時出了個bug,改版設計忘記了上面的選單列,於是編輯器工具列蓋在了選單列的上面。

四.精心佈置廣告位和推薦位
網站使用者大多不喜歡廣告,但廣告是網站的收入主要來源。現在網頁廣告遮罩軟件也比較多,如果廣告頻繁出現/影響操作,就難逃被用戶遮蓋或離開。
廣告位/推薦位放置最重要的是顯眼。比顯眼更重要的是不能影響使用者使用。沒有人喜歡右下角彈出廣告。廣告最好佔據頁面的一個固定的位置,不要放在浮動層,千萬不要彈窗。廣告顯示時不要影響使用者的操作,比如以前的網路電商、遊戲廣告,會把整個網頁的header部分向下壓,而且有個動畫。更詭異的是,動畫是在撥放後才載入的。

於是就出現使用者正要點擊連結時,廣告跳出來,廣告的位置佔據了原來鼠標的點擊位置,於是點到廣告(多半是故意)。這種廣告會遭致使用者反感,不是大網站或流氓網站千萬不要這麼做,會把網站本身人氣度給搞死。

五.網頁的title標籤和網站的語義化
HTML的title屬性是最容易被人忽略的屬性之一,然而它非!常!有!用!title的作用非常簡單,就是在鼠標停留在上方一小會之後彈出一個工具提示。
有的時候為了UI的設計,有些文字的按鈕就用一個圖形代替了。當你的圖形設計比較抽象的時候——用戶怎會知道那個圖標代表什麼意思。這個時候title的作用就出現了。title還有一個作用是處理...(多行文時)元素。所謂...元素是指元素內容過長,以至於顯示了“...”來表示這後面還有更多的文章和細節。這種元素一定要加上title標籤表示全部的內容。這樣可以在使用者鼠標懸停在“...”上一小會後,顯示出全部的內容。

圖片的alt屬性也同理。推薦圖片一定要有alt屬性。以及其他的一些語義網需要注意的地方。比如用系列標籤來寫標題,用

section標籤包裹住文章內容,用footer標籤來表示網站底部,在標籤中寫Email地址等。而不是一直重複使用者div,div,div。雖然div很重要(這裡提一句,如果網站本身還在滿篇用table,tr,td,而不是div,最好去重新找一個前端),但是用各種語義網元素可以幫助其他的程序設計閱讀你的網頁,並知道它們是做什麼的。這樣方便在轉移網站到
地點更好顯示你的網頁,也方便搜索引擎對你網頁的內容進行解析讀取(通用簡潔)。

六.減少不必要跳轉。
有的時候你的網站可能需要處理一些資訊而沒有顯示的網頁,有些網站會用一個跳頁來解決。比如登錄的時候,會先跳到一個空白頁來設置登錄狀態,修改數據庫等操作,然後再將使用者定位到登錄完成頁。不過跳轉頁的最大缺點就是會增加等待時間。而且容易導致操作失敗(使用者等太久會在這裡刷新)。看著自己使用的瀏覽器短時間內跳頁來跳頁去都覺得不舒服。
後台可以用curl收發某些消息,也可以在最初的跳轉頁帶上更多的參數,直接讓結果頁中的sql語句處理全部內容。

七.背景、邊框和底紋。
有的時候這些背景,邊框和底紋會直接的對使用者造成使用的影響。首先彈出對話框一定要有非透明背景。邊框和底紋可以為用戶標識操作區域。哪些區域是推薦修改的,哪些是無關緊要的之類的東西。如果提供給使用者選擇的是幾個大區域,那麼用不同的邊框來標識出使用者的選擇也是很重要的。
在保證UI設計風格的基礎上,不要為了達到某一視覺效果來修改網頁。有些網頁為了達到某些UI上的要求,比如是間距的特殊要求來用一些空元素。實際上這些[ 空元素 ]對於HTML來說,就是 [ 垃圾編寫程序碼 ]。這種情況下盡量用CSS達到某些要求,如果實在達不到,不應該強求。
認為UI設計者不應該要求前端設計 [ 100% ] 還原切版出UI設計上的所有東西(非同種軟體兩者設計者編寫程序條件不同 有差異點)。垃圾編寫碼不僅影響網頁運行,還可能導致一些奇怪的 [ bug。] (非通用程序編寫)

八.給使用者明確的反饋
當使用者在做一個操作的時候,可能背後的javascript要執行很長的時間。這個時候必須明確告訴使用者介面正在處理一些東西。最常用的方法是將鼠標光標切換成wait模式,還有在網頁上顯示一個小圈圈的動態圖。如果你用Ajax登錄,那麼在點擊登錄按鈕之後應該顯示一個“登錄中”的提示。如果表單驗證出錯,應該用紅色指示出錯誤的那一項,並告知錯誤原因。

有些網站會讓那個框閃一閃,甚至直接把輸入焦點重定位過去(這在表單很長時非常管用)。用ajax載入的東西,默認文本應該設置為“正在載入”,而不是用一個空div。總之就是讓用戶知道這網頁正在做什麼,這樣雖然不能減少等待時間,但是可以給使用者一個答案,告訴它們:網頁正在忙著處理資訊。不要讓網站表現的像是失去回應或當機一樣。

九.合併css和javascript來保證不用每次載入。
一個網站通常都採用的相同的UI,那麼每頁網頁的CSS可能非常相似,當然也會有一些不同的地方。這個時候你應該合併它們,即使有一些內容在當前頁面上用不到。一個網頁更應該避免載入多個css。

現在的瀏覽器都可以自動緩存文件,有些服務器也支持發送HTTP 304 Not Modified狀態,告訴瀏覽器使用它緩存中的信息。如果整個網站使用相同的css和javascript文件,那麼它們都只需要在主頁載入的時候載入一次。在網站中的其他頁面間切換的時候,瀏覽器會在緩存中取出css和javascript而不是重新請求服務器。

這樣可以節省服務器帶寬,也可以讓網站載入速度更快。

十.不要忘了支援鍵盤操作和觸控操作。
鍵盤永遠是互動的最重要的接口之一,在網站中請不要忘了鍵盤的使用。
最常見的是支援回覆提交表單,比如登錄的時候,大多數人更習慣輸入完帳號密碼後按ENTER來登錄,可惜的是,網頁並不會自動幫你做這件事,你需要自己去點選登入按鈕介面。資訊互聯網發展迅速,網頁可能在大多數人都是在手機上看的。如果你的網頁是響應式(RWD)設計,你很可能需要處理一些觸控介面來讓這頁面在手機上更好用。

十一.明確的回上一步(頁)連結
如果你的網頁內容比較多,那麼用戶可能會深陷到一個很深的目錄結構裡,比如子欄目的子欄目,當瀏覽完想回來的時候並不容易。提供一個後退到上一層目錄的連結(注意不是瀏覽器的後退連結,因為用戶可能從子欄目的一個文章跳到另一個文章。)可以有效的提高使用者體驗。

如果可能的話,提供麵包屑選單列越明顯更好。如果網站有選單列表,那麼確保有一個回“首頁”連結。方便使用者在網站各個欄目間跳轉可以讓使用者有更好的網頁介面使用體驗。

十二.永遠不要相信來自瀏覽器的任何消息
使用者可能在表單裡亂打。或者胡亂修改地址欄上的參數。就算是用javascript檢查過了,或者post提交表單,這個世界上仍然有Web-Sniffer等類似的工具可以讓使用者把信息提交到服務器。所以服務器一定要對使用者輸入和網址參數再過濾一次。
但是這並不代表可以不在網頁上用javascript驗證表單,對表單採用javascript驗證可以讓用戶不必提交就知道表單發生了什麼錯誤,這也是一種良好的用戶體驗。

十三.網址要好看
網站不同欄目的區分是URL的不同,URL可以區分目錄,傳遞參數。建議編寫URL路由來統一目錄和參數。舉個例子,這個題目的URL是https://www.actdte.com/quesn/1045 這個URL就很漂亮。如果這個URL是這樣:的區分是URL的不同,URL可以區分目錄,傳遞參數。建議編寫URL路由來統一目錄和參數。舉個例子,這個題目的URL是actdte.com/quesn.cgi? 這一種URL就沒有上面的好看了。更不用說有些網站的URL是這樣的actdte.com/quesn.cgi? 在URL上盡量用斜線分隔,讓參數看起來像目錄一樣,減少不必要的參數傳遞,讓它們都到session或是cookie裡去。網址好看便於使用者分享網站連結,用戶使用者也更願意去收藏您的網站。

Comments are closed.