很多企業總會有這樣的疑惑，明明我的網頁設計和其他網站看上去相差無幾，為什麼總覺得差了點什麼，總覺得沒有別人好看?

說實話，網頁設計這種東西，好看與否不在於整體上的布局差異，往往都是小細節影響全局展現，哪怕是1px的改變，整個UI設計就會有不一樣的感覺。那麼，UI設計時需要注意哪些細節?

UI設計時需要注意哪些細節?

UI設計需注意的細節一：排版設計

網頁設計技巧

關於排版設計，我們大多時候都會聯想到界面的文字內容布局。在文字選擇上，網站應該盡量避免選用2種以上的字體及風格樣式，容易影響界面中各內容中的層級，給用戶帶來信息上的混亂。

接下來，我們從文字的其他細節來入手研究：

1.文字間距

文字間距，就是文字之間的間距，不同字間距能給用戶展現出不一樣的視覺感受，例如字間距過大，缺乏閱讀的連貫性，但同時會讓界面的透氣感更強，更加舒適;字間距過小，會增強文字中信息連接性，但會缺乏文字的獨立性，也會影響界面的易讀性。

一般內文字間距設定在-20~10pt的視覺效果更佳，不過具體還需根據文字字體、粗細、大小以及行距來決定，例如：

◆ 文字越大，字距越小;文字越小，字距越大。

◇ 字體越細，字距越小;字體越寬，字距越大。

◆ 行距越大，字距也越大;行距越小，字距也越小

◇ 要注意英文字母間的間距，由於各個字母佔據的空間大小不一，大小寫字母佔據的空間大小也各不一樣，字體變化影響較大，合理字間距的變化會更多。

2.文字行距和行高

行距和行高兩者有着緊密而不可分割的關係，很多人經常會將行距和行高混淆，其實行距就是文字間行與行的間距，行高則是文字底部到頂部，則文字的大小。

一般來說，如果字體的行高為10px，行距為2px(即行高的0.2倍)，那麼會顯得界面內容太擠，不容易閱讀;相反，如果行距設置為行高的2倍，又會顯得界面內容過於鬆散，不夠緊湊;因此，行距設定為行高的0.5-1倍，這樣閱讀起來會更加舒暢輕鬆。

3.文字對齊

文字的對齊一般分為：左對齊、居中對齊和右對齊。

如果UI設計中存在大量文字，盡量避免出現多種對齊方式，否則會顯得界面很凌亂，毫無規律可言。

通常，網頁設計最常用到且最容易操作的就是左對齊。文字排版採用左對齊的方式排會顯得整個界面非常規整、簡潔，在視覺上也十分舒服。

如果你對排版設計已經非常嫻熟，也可以選擇居中對齊，將整段文字看作一個整體，再進行布局，同樣可以保持界面的統一性和協調性。

* 界面進行對齊布局時需注意，很多看似隨意擺放的文字，其實都會與其他元素之間存在某種對齊關係，千萬別真的以為它們脫離了頁面布局規則而「隨意擺放」。

4.文字對比

對比會幫助文字布局製造焦點，更具有吸引力，同時避免用戶混淆了界面內容的層級。常見的對比包括大小對比、顏色對比、疏密對比、虛實對比，以及粗細對比等。

製造對比效果時，一定要大膽強烈，不要拿28px的文字和29px的文字進行對比，大小太過相似，無法突出焦點。現在很多網頁設計都流行大標題，因此不妨將標題適當增大，增加與正文的對比。

另外，除非標題或裝飾性文字，否則不要使用特殊字體，要確保內容清晰易讀，尤其是一大段文字，盡量使用基礎字體，這樣才會方便用戶閱讀。

UI設計需注意的細節二：極簡主義

網頁設計技巧

雖然最近極簡主義一直引起爭議，但仍然無損它在設計師和用戶心中的地位，而且很多大牌企業網站仍然看到它的身影。

1.只保留必要元素

極簡主義的核心很簡單就是「少即是多」，在網頁設計中，要做到少即是多，只要保留界面中的必要元素，使用最少量的信息來表達界面意圖即可。

界面上的不必要元素越少，重要元素的關注度就越高，同時還能提高用戶和界面之間的溝通效率，增強界面傳達有效信號給用戶的能力，從而提高UI設計的易用性和使用效率。

2.主要高於次要

進行UI設計時要注意「盡量減少用戶的記憶負擔」，如果界面操作不符合大眾的操作習慣，會增加用戶的陌生甚至慌亂感，從而拒絕再次使用網頁。

因此，為了讓用戶的記憶負擔最小化，界面必須呈現強烈的視覺層次，盡量突出界面的主要內容，不要讓其他次要內容喧賓奪主，方便用戶尋找目標。

3.別忽略情感化設計

極簡主義所展現的並不是冰冷無情感，而是在追求形式簡單的基礎上重視用戶體驗。

所以在UI設計中，我們需要運用極少的元素，創造更優質的視覺效果和更有效的信息傳遞，設計出極具情感化的網頁。

UI設計需注意的細節三：配色方案

網頁設計技巧

配色在網頁設計中是不可或缺，同時也是老生常談的理論。

1.以最簡單的顏色作為網站的基調

網站基調可以是無數種顏色，但如果你對色彩把控不是很有把握，建議選用最簡單的顏色作為網站基調，這樣可以提高內容的可讀性，同時將圖片突出在最前方。

2.只選擇一種顏色突出顯示

頁面顏色越多，頁面就越難控制，因此網頁以簡單色彩為基調的前提下，最好只選擇一種鮮艷顏色作為強調色，這樣會更為合適。

3.如有疑問，請使用藍色

如果你不懂如何選擇強調色，不妨使用藍色。藍色是一種彈性比較大的顏色，可以和很多顏色搭配;同時藍色不容易出錯，所以可以放心大膽使用。

網頁要設計得好，但從大局入手是不足夠的，只有注重細節，才會讓網站脫穎而出，給用戶留下深刻印象。