也許你是個新手UI設計師，也許你是個有著豐富開發經驗的開發者，但是有需求讓自己設計的網頁和UI看起來更像那麼一回事，至少看起來不是一個外行的手筆。那麼今天這篇文章應該能夠幫到你。
在UI的設計過程中，有很多技巧並不需要很深厚的設計知識，但是它們能讓你的UI和網頁介面看起來有明顯的提升。改進設計這件事情，經驗和技巧往往能讓人少走彎路。閒話少敘，下面我們具體看看。
這是一個簡單的示例，有色彩填充的按鈕、幽靈按鈕（無色彩填充、有邊框）以及無邊框無填充按鈕來區分。而在少數情況下，對於系統有重要影響的、破壞性的或者限制性的按鈕，也應該突出顯示，但是可以使用紅色來進行強調和警告。這個時候，相對的「非負面」的按鈕則被視作為重要性較低的操作：
尤其是在構建文字內容的視覺層級的時候，可用到的屬性很多，只使用大小差異來構建就顯得過於單一了。在很多時候，可以藉助色彩、字重、明暗來進行區分。我們可以讓更重要的文字更大、字型更粗、色彩更加鮮明，或者使用更深的黑色來呈現。
綜合地使用這些屬性來構建視覺層級。
3、用留白來隔離元素
兩個元素互不相關，如果想將它們分隔開來，使用分割線似乎是一件理所當然的事情？當然可以，但是這種方式真的是非常過時且笨拙的一種呈現方式。你需要的是更好、更優雅、更貼合當下的一種呈現方式。不是簡單地使用分割線，而是使用留白，或者說負空間來間隔就可以了。分割線在很大程度上是醜陋且難以駕馭的視覺噪音，相對而言留白則好了很多。
想要凸顯一些元素，並不一定需要依靠描邊。使用陰影則可以起到同樣的效果，單獨使用則會顯得更加整潔。描邊+陰影則會顯得過於雜亂。使用相對不那麼具有侵略性的小陰影無疑讓效果更加輕鬆，看起來也不會突兀。
如果覺得內容區塊過於單調，可以根據你的目的來強化這一區塊的視覺屬性。在內容區的一邊加上色條能夠在提升視覺屬性的同時，賦予這一區塊內容以情緒。色條可以是單色的，也可以是漸變的，這取決於你想傳達什麼樣的視覺體驗。這個色條還可以具備良好的功能性。當然，這很大程度是用在相對比較素的頁面上的，如果頁面本身已經很花哨了，就不太用得上。
比如使用紅色和綠色來標識不同的狀態，也可以用色條來標識出被觸發的 Tab 或者控制元件。
其實，同樣是為了進行區分內容區塊和層級，這個方法同樣優雅而快速，幾乎可以算是毫不費力的一種設計技巧。
為了區分兩個不同區塊的元素，簡單地使用不同的背景來進行區分也可以，本質上，它採用的類似卡片式設計的思路——用不同的卡片來歸類內容。相對而言，使用有差異但是不那麼顯著的不同色塊來作為背景，在保證整體整潔的同時，起到了區分的作用。
誰不喜歡漂亮的字型呢？當然都喜歡，但是字型的功用其實各不相同。從呈現正文的強可讀性文字，到裝飾性極強的視覺化字型，各種不同的字型需要應對不同的功能。
簡單看看幾種不同型別的字型：
1. 襯線字型：Serif 本身就是襯線的意思，這樣的字型字元的末尾通常是會有小的裝飾性的襯線。襯線除了裝飾性以外，還能強化字型的可讀性。
常見的襯線字型：Georgia，Times New Roman，Cambria。
2. 非襯線字型：也就是 Sans-Serif 字型，它相對而言更加現代，襯線被去掉之後，線條感更強，更加乾淨，也更加貼合數字時代的一些顯示需求。
常見的非襯線字型：Helvetica，Montserrat，Gotham。
人們通常會認為，襯線字型更加適宜長時間閱讀，它也更多地運用在印刷品上。然而襯線字型的襯線和邊角大多更加銳利，在一定程度上會被視作為視覺噪音。在螢幕解析度尚且達不到要求的時代，襯線字型的顯示問題很大。當然，如今螢幕解析度提高起來之後，這個問題幾乎不存在了，只是在小字號和低解析度和小螢幕上，依然存在這個問題。
3. 手寫字型：手寫字型通常被認為是手寫風格的字型，在呈現的時候，常常會有連寫的筆畫，更貼近傳統的書寫字型所呈現出來的效果。手寫字型更加隨意和有趣。
常見的手寫字型包括：Alex Brush，Great Vibes，Sofia。
4. 展示性字型：展示性字型是一個功能導向型的分類，通常指的是用來作為標題展示、用於海報、徽章等地方的字型，它們表現力更強，視覺特徵更突出，直言不諱地說就是為了吸引使用者的注意力。
常見的展示性字型包括：Algerian，Curlz，Gigi，Umbra。
在網頁設計中，絕大多數情況下都只會使用襯線字型和非襯線字型兩種，在英文網站當中，通常會採用一種襯線字型+一種非襯線字型的搭配方式。注意，如果有不同粗細和字重的字型，使用同一字型族中字型為好。在中文當中，開源且可以免費商用的「思源黑體」和「思源宋體」是一個設計中非常常見的選擇。在進行視覺設計的時候，我堅持使用2種字型，極少會使用3種字型，後者最多會在強調視覺的商業或者藝術性專案當中使用，比如 Banner 和海報。
結語
真心希望這樣的小技巧能夠幫你做出好的視覺設計，很多時候，設計是靈活的，是基於感知的，有方法可供遵循的，尤其當你仔細觀察一些現有的好設計，會發現有很多這樣的小技巧。
也許你是個新手UI設計師，也許你是個有著豐富開發經驗的開發者，但是有需求讓自己設計的網頁和UI看起來更像那麼一回事，至少看起來不是一個外行的手筆。那麼今天這篇文章應該能夠幫到你。
在UI的設計過程中，有很多技巧並不需要很深厚的設計知識，但是它們能讓你的UI和網頁介面看起來有明顯的提升。改進設計這件事情，經驗和技巧往往能讓人少走彎路。閒話少敘，下面我們具體看看。
這是一個簡單的示例，有色彩填充的按鈕、幽靈按鈕（無色彩填充、有邊框）以及無邊框無填充按鈕來區分。而在少數情況下，對於系統有重要影響的、破壞性的或者限制性的按鈕，也應該突出顯示，但是可以使用紅色來進行強調和警告。這個時候，相對的「非負面」的按鈕則被視作為重要性較低的操作：
2、用字重和明暗來區分層級尤其是在構建文字內容的視覺層級的時候，可用到的屬性很多，只使用大小差異來構建就顯得過於單一了。在很多時候，可以藉助色彩、字重、明暗來進行區分。我們可以讓更重要的文字更大、字型更粗、色彩更加鮮明，或者使用更深的黑色來呈現。
綜合地使用這些屬性來構建視覺層級。
3、用留白來隔離元素
兩個元素互不相關，如果想將它們分隔開來，使用分割線似乎是一件理所當然的事情？當然可以，但是這種方式真的是非常過時且笨拙的一種呈現方式。你需要的是更好、更優雅、更貼合當下的一種呈現方式。不是簡單地使用分割線，而是使用留白，或者說負空間來間隔就可以了。分割線在很大程度上是醜陋且難以駕馭的視覺噪音，相對而言留白則好了很多。
4、用陰影替代邊框想要凸顯一些元素，並不一定需要依靠描邊。使用陰影則可以起到同樣的效果，單獨使用則會顯得更加整潔。描邊+陰影則會顯得過於雜亂。使用相對不那麼具有侵略性的小陰影無疑讓效果更加輕鬆，看起來也不會突兀。
5、用色條提升視覺調性如果覺得內容區塊過於單調，可以根據你的目的來強化這一區塊的視覺屬性。在內容區的一邊加上色條能夠在提升視覺屬性的同時，賦予這一區塊內容以情緒。色條可以是單色的，也可以是漸變的，這取決於你想傳達什麼樣的視覺體驗。這個色條還可以具備良好的功能性。當然，這很大程度是用在相對比較素的頁面上的，如果頁面本身已經很花哨了，就不太用得上。
比如使用紅色和綠色來標識不同的狀態，也可以用色條來標識出被觸發的 Tab 或者控制元件。
6、用背景色區分割槽塊其實，同樣是為了進行區分內容區塊和層級，這個方法同樣優雅而快速，幾乎可以算是毫不費力的一種設計技巧。
為了區分兩個不同區塊的元素，簡單地使用不同的背景來進行區分也可以，本質上，它採用的類似卡片式設計的思路——用不同的卡片來歸類內容。相對而言，使用有差異但是不那麼顯著的不同色塊來作為背景，在保證整體整潔的同時，起到了區分的作用。
7、「字」盡其用誰不喜歡漂亮的字型呢？當然都喜歡，但是字型的功用其實各不相同。從呈現正文的強可讀性文字，到裝飾性極強的視覺化字型，各種不同的字型需要應對不同的功能。
簡單看看幾種不同型別的字型：
1. 襯線字型：Serif 本身就是襯線的意思，這樣的字型字元的末尾通常是會有小的裝飾性的襯線。襯線除了裝飾性以外，還能強化字型的可讀性。
常見的襯線字型：Georgia，Times New Roman，Cambria。
2. 非襯線字型：也就是 Sans-Serif 字型，它相對而言更加現代，襯線被去掉之後，線條感更強，更加乾淨，也更加貼合數字時代的一些顯示需求。
常見的非襯線字型：Helvetica，Montserrat，Gotham。
人們通常會認為，襯線字型更加適宜長時間閱讀，它也更多地運用在印刷品上。然而襯線字型的襯線和邊角大多更加銳利，在一定程度上會被視作為視覺噪音。在螢幕解析度尚且達不到要求的時代，襯線字型的顯示問題很大。當然，如今螢幕解析度提高起來之後，這個問題幾乎不存在了，只是在小字號和低解析度和小螢幕上，依然存在這個問題。
3. 手寫字型：手寫字型通常被認為是手寫風格的字型，在呈現的時候，常常會有連寫的筆畫，更貼近傳統的書寫字型所呈現出來的效果。手寫字型更加隨意和有趣。
常見的手寫字型包括：Alex Brush，Great Vibes，Sofia。
4. 展示性字型：展示性字型是一個功能導向型的分類，通常指的是用來作為標題展示、用於海報、徽章等地方的字型，它們表現力更強，視覺特徵更突出，直言不諱地說就是為了吸引使用者的注意力。
常見的展示性字型包括：Algerian，Curlz，Gigi，Umbra。
在網頁設計中，絕大多數情況下都只會使用襯線字型和非襯線字型兩種，在英文網站當中，通常會採用一種襯線字型+一種非襯線字型的搭配方式。注意，如果有不同粗細和字重的字型，使用同一字型族中字型為好。在中文當中，開源且可以免費商用的「思源黑體」和「思源宋體」是一個設計中非常常見的選擇。在進行視覺設計的時候，我堅持使用2種字型，極少會使用3種字型，後者最多會在強調視覺的商業或者藝術性專案當中使用，比如 Banner 和海報。
結語
真心希望這樣的小技巧能夠幫你做出好的視覺設計，很多時候，設計是靈活的，是基於感知的，有方法可供遵循的，尤其當你仔細觀察一些現有的好設計，會發現有很多這樣的小技巧。