網頁設計的要與不要

 設計網站時，設計得讓人喜歡看也喜歡用無疑是高境界，做起來當然很不容易，不過看看下面這些“要”與“不要”或許能給你一些啟發。
‘要’

1. 保持界面的統一性

       UX的一大原則就是維持整個界面的流暢體驗。網站所有頁面的風格和觀感應該保持一致：導航條、配色、字體、書寫風格都需要考慮到這一點。

       Tips： 一致性是把雙刃劍，如果一開始設計沒打下好基礎，之后再想統一反而會得不償失，因此易用性的優先級要比一致性更高。

2. 設計易用的導航結構

       導航是用戶易用性的基石，良好的導航結構對用戶能找到他們需要的內容非常關鍵

Tips:

       克制高層級導航的內容：首層導航不要超過7個菜單，同時再輔以合理的二級導航

       導航菜單需要清晰的命名： 使用用戶熟悉的詞匯來命名U

       優化用戶抵達目標的層級： 用戶多點三次就能訪問到目標頁面

       網站頁底也有導航條：用戶習慣于在頁底看到導航和聯系信息

3. 調整已訪問的鏈接顏色

       如果用戶點過的鏈接沒有變色，也許會造成重復訪問，因此顏色的變化可以讓用戶意識到上一步的位置，來更好決定下一次點擊哪個鏈接。

4. 更方便用戶快速瀏覽

       如今的用戶看網站，快速掃一下是常態，發現到感興趣的內容才會停下了細細閱讀，因此設計好合理的視覺樣式能讓用戶快速瀏覽起來更爽，包括幫助用戶設置好聚焦點。

Tips:

       避免大段文字： 對內容合理分割，通過主標題，子標題有序分類。

       給予核心要素更多視覺權重： 例如行動召喚按鈕就需要讓用戶一眼就能看到，通過尺寸和顏色的變化來實現這一點。

       遵循視覺習慣： 用戶一般是從上到下，從左到右瀏覽，因此F型或者Z型的設計更符合用戶的流量習慣。

       網格化設計： 網格化設計也能提供用戶更好的瀏覽體驗

5. 用心對待內容

       內容和設計一樣重要，因此即使網站設計得再華麗精美，如果沒有優質內容也是金玉其外敗絮其中，設計師的目標是讓內容和設計有機地結合起來。

Tips:

       確保網站上的內容相關性

       避免使用專業術語.

6. 檢查網站錯誤

以下問題需要仔細檢查：

       檢測死鏈接. 404頁面會讓用戶感到困惑

       檢查錯別字

       檢查多媒體內容：確保圖片和視頻能正常加載

7. 減少選項

       選擇用戶，用戶反而會越困惑從而不采取任何行動。因此選項越少越好。Facebook采用分步驟的設計來減少選項

8. 提醒用戶向下翻動屏幕

       用戶往下翻得越多，就會在網站上停留更久，也就給了網站做內容更多呈現給用戶的機會。然而，用戶只會在認為內容有趣的情況下才會滾屏。

       Tip: 頁面上方的內容需要給用戶帶來期待，高質量的內容自然會促使用戶繼續瀏覽。

9. 按鈕上的標簽需要明確告知用戶下一步進度

       按鈕上的提示越明確，用戶會覺得越放心。而類似“提交”這樣的字眼無法讓用戶知曉，點擊按鈕之后到底會發生什么。下面第一個是反例，第二個就表達的很清楚

10. 設計要順其自然

       如果一個元素看起來像鏈接或按鈕，但是卻沒法點擊，往往也會迷惑用戶

11. 響應式設計

       如今用瀏覽器的設備中有超過50億臺移動設備，因此確保用戶用不同大小的屏幕訪問頁面時都能獲得良好體驗至關重要。

Tips:

       核心信息易被發現： 移動端用戶更想獲取具體信息，例如聯系方式和商品價格，確保這些信息不會被忽略

       根據屏幕調整元素尺寸. 移動端用戶用手指敲擊屏幕，所以類似按鈕這些元素需要增加尺寸，更方便被點擊。Since mobile users scroll and tap with their fingers, you may need to increase the size of interactive elements, such as buttons.

12. 設計測試

       再好的設計也需要來自用戶的反饋，如果能找到幾個客觀用戶，仔細和他們聊聊，聽聽他們的反饋，看看他們是怎么用網站的，會給你不少的啟發。
‘不要’

1. 別讓用戶等著頁面加載

       加載時間和用戶體驗密不可分，根據數據分析，47%的用戶認為頁面需要在兩秒類加載完成，時間越久，用戶流失概率越高，因此不管是頁面還是APP，速度都是需要仔細考量的因素。

Tips:

       加載時避免空白頁面：用一些有趣的內容來留住用戶，例如加載進度提示條

       優化圖片：. 圖片尤其是大的背景圖需要更多時間加載，不妨試試優化圖片。

       評估當前加載速度：Google的工具PageSpeed Insights 不僅可以診斷網速，還可以給到合理的優化建議

2. 不用對內部鏈接設置新窗口打開

       用戶對內鏈和外鏈有著不同的預期，內部鏈接好在當前標簽打開，用戶可以使用后退按鈕返回。如果一定要打開新窗口，也需要在打開前預先給到提示，例如“在新窗口打開鏈接”

3. 字體切勿使用太多

       的確有著好多好看的字體，但是同一個網站用了太多字體會迷惑用戶，甚至會惹惱用戶。

       常見的做法是不要使用超過3種不同字體，也不要超過3種字體尺寸

4. 切勿濫用顏色

       同字體一樣，顏色的使用也要十分克制，要注意顏色互相間的平衡，而顏色過多，平衡就越難達到.

       Tip: 想想你打算喚醒用戶哪些情緒，有助于你挑選合適的配色方案。例如如果是銷售藥品，過于活潑亮麗的色彩就不太合適

5. 別過早彈出浮層/彈窗

       很多網站剛一進首頁，就迫不及待整個大彈窗，雖然有時難以避免，但至少請不要在用戶還沒讀清楚內容前就彈好嗎?

       Tip: 控制彈窗的節奏，在要求用戶做什么之前，得先證明你自己的價值。

6. 別使用不可靠的照片

       使用真人照片更容易吸引用戶，人的大腦更容易注意到人臉，當我們看到人臉，下意識里會有想和他們交談溝通的愿望。然而很多網站過度使用了真人照片，反而會傷害用戶體驗

7. 別讓促銷喧賓奪主

       頁面上廣告過多的話，用戶就不得不看廣告，終導致跳失率大幅上升。因為用戶潛意識里對一切像廣告的內容都選擇性忽略

8. 別使用背景音樂或默認播放視頻

       原因就是突如其來的音樂或視頻，往往會與用戶場景沖突。例如：在工作時，在公共場合，旁邊有人睡覺等等。

       Tip: 把控制權交還給用戶，音樂默認設置靜音，但是用戶可以自主條件音量，選擇播放或暫停按鈕。

9. 不要劫持滾屏

       所謂劫持滾屏，就是和正常瀏覽器的翻頁滾屏效果不同，用戶會因為失去控制感而覺得惱怒

10. 別使用水平翻頁

       有些設計師喜歡標新立異，使用水平翻頁。不幸的是，用戶對此的評價都很差，因為和正常的使用習慣完全不一樣，結果就是用戶都不會閱讀水平翻頁后的內容

11. 不要為了美觀而喪失易用性

       美觀始終是要讓位于易用的。舉個例子，用淺色的背景和文字，會讓用戶讀起來很費勁。Google也犯過類似的錯誤

       Tip: 可以用工具檢查對比度 Color Contrast Checker

12. 使用閃閃發光的文字