沒有解決這些細節問題你都不能叫網頁設計師

11月 23, 2019

網頁設計是公司越來越重視的一點，提高網頁設計質量是網頁設計師的必修課程，把握住細節是提高網頁設計的關鍵點。那如何把握網頁設計細節呢？ 1、網頁設計圖標的統一風格

圖標統一性： a、風格統一：線條性、塊狀圖標、手繪圖標、扁平圖標、擬物圖標等（同時線條圖標線條粗細一致） b、色彩上統一：圖標可以採用相同顏色配色；如果是不同顏色配色方式在視覺上要做到色調統一。 c、視覺上大小統一

2、弱化網頁設計點綴元素 網頁設計中，點綴元素很多都是起到視覺修飾作用，所以在視覺表達時要弱化它們的存在，很多初學者會忽略點綴元素的弱化調節。

（弱化分割線）上圖可以看出，第一張未弱化分割線的網頁設計會讓頁面比較擁擠，也讓用戶無法第一時間獲取重要信息。第二張弱化分割線之後，讓頁面更簡潔，也能襯托分類菜單。因此，網頁設計中我們要弱化輔助線條及其他點綴元素。 3、讓網頁設計頁面更簡潔

頁面簡潔但不單調是我們的目標效果，但是很多網頁設計師慣用不必要元素過度修飾。合理點綴修飾讓設計更活，過多裝飾讓網頁設計更做作，慎用修飾。

簡潔的網頁設計更快速直接的向用戶傳達重要信息，不囉嗦不累贅不雜亂。上圖可以看出，第一張添加過多修飾元素，會讓頁面更花，有畫蛇添足感覺第二張頁面會更加簡潔。 4、圖片視覺平衡

網頁設計中人物或產品圖是常用的元素，在使用人物圖像時，保持視覺平衡和協調，所以要控制視平線方向的一致

圖片不平衡時用戶會花時間去主動尋求平衡，會給用戶閱讀帶來「難點」，平衡設計是設計師所需要掌握的設計點。上圖第一張視覺平衡未統一，感覺很生硬，三張圖片搭配不協調。第二張統一視覺平衡讓頁面更統一。 5、網頁設計色彩合理使用 一般介面中使用2-3種顏色，更多顏色難以把控，也會讓用戶眼花繚亂，無法找到重點信息。其中主色選取更為重要。定主色方法：品牌色（logo顏色）、圖片色、情感色。定輔色方法：同色系配色、同色調配色等

6、提高圖片質量 影響圖片質量原因有： a、素材不清楚：可以去高清素材網搜高清圖（例如大作網、花瓣網、500px、Pixabay、Pexels等） b、圖不乾淨（有白邊或鋸齒）：不能懶得只用魔術棒摳圖（鋼筆通道才是摳圖利器） c、圖片使用變形：很多人為了符合比例就暴力壓縮圖片（找合適圖片，也可適當修剪） d、未適當修飾圖片（如調色、裁剪等）等原因。

7、網頁設計按鈕使用的合理性 按鈕是網頁設計重要組成元素，合理設計按鈕能提高用戶體驗（如不可點擊的按鈕設置成灰色）；其次按鈕的統一性（如按鈕的圓角度和風格）。按鈕的幾種狀態：普通可點擊狀態、不可點擊狀態（設置灰色）、點擊後狀態、聚焦狀態（點擊未鬆手）、划過狀態。

8、文字的極差關係處理 文字的極差關係能夠直接反應出文字的層級，突出重點文字內容；並且讓整個網頁設計不累贅，更有設計感。極差關係可以從文字的大小、字體、顏色、是否加粗、傾斜、大小寫、間距、圖形結合等手法來解決

9、信息閱讀符合用戶習慣 不同的設計方式可能讓用戶有不同的體驗感，正確的設計方式複合用戶習慣，減少用戶成本也是網頁設計主題之一；反之會讓用戶感覺很彆扭，不習慣。比如我們閱讀習慣是從上到下，從左到右，從重點到普通的順序去閱讀，所以在做設計時你的重點可以從用戶閱讀習慣開始。例如下圖的交互點顏色設計。