好的設計往往能夠根據產品的性格和特征來量身打造，而做到這一點卻很難，文章為大家分享了5個關于提升視覺設計的方法，希望能對你有所幫助。

對視覺美感而言，其實是有規律、有方法可循的。從美感的定義，資深設計師跟初級設計師，最大的不同點在于，初級設計師在調整美感時，需要花大量時間摸索、嘗試，而資深設計師，有自己獨特的一套理念跟方法。

這也是為何同樣一個設計，初級設計師需要花大量時間去摸索，探索怎么樣調整能讓自己的設計更為美觀。而資深設計師，隨便調調，往往都能調出很好看、很高級的視覺風格，這主要由于他們手里掌握著各類扎實的方法，對” 美 “的套路有深刻的理解。

所以今天，就圍繞“美感”，給大家分享分享，如何在視覺層面，用一些小技巧快速設計傳遞出具備“高級感”的視覺感受。

本文大綱：

1. 注意力吸引是美的第一步
2. 設計感的節奏如何體現
3. 頁面的重心如何均衡
4. 顏色干凈高級的秘籍
5. 系統設計一致性考量

01 注意力吸引美

實際上，營造一個美而高級的頁面，是需要在第一時間內，有一個重點能快速抓住觀眾的眼球，對觀眾的注意力進行吸引。這樣觀眾才能對你的頁面產生興趣，從而引發瀏覽的動機，如果連基礎的重點都沒有，那么頁面則會顯得很碎，缺乏主體，這樣的頁面便是非常乏味的，難以下咽。

那么要想抓住用戶注意力，頁面的重點可以通過哪些元素來營造？

1. 醒目突出的標題

在UI設計或者海報設計中，標題往往起著點睛的作用。一方面它能很好的給予用戶頁面的定位，告訴用戶當前所處位置，其次又能很好的抓住用戶眼球，提升用戶的瀏覽動機。

所以在Dribbble中，那些令人賞心悅目的概念稿，往往標題就是非常突出醒目的。如果你發現你的頁面元素都很碎，看起來非常亂沒有主體，那么不妨，試試把標題字號的大小做到更大，顏色做到更黑。

總之明顯的主體在設計中相當重要，好看與否都與其強關聯。這個主體可以是圖，也可以是文字。不過通常，文字的優先級需要比圖更重要，因為信息的核心傳遞往往更依賴文字。

2. 精致的插圖

其次，除了將標題調整更醒目外，一個精致的插圖，往往能引起共鳴，更為快速的抓住用戶注意力，如果你的頁面里，全是文字信息非?？菰?，那么不妨多花點時間，繪制一幅精致的插圖。

02 節奏的變化

節奏的變化，是建立頁面秩序的關鍵，一個高級感的頁面，往往內容都是非常有秩序的排列組合，信息的歸類分組非常明確。從秩序來看，有哪些小方法，能幫助我們快速建立思路？

1. 按照信息重要度，對信息進行分層

首先，需要按照頁面信息，按照優先度進行分層，比如非常重要的、重要的、一般的、不重要的，先把這些因子進行羅列，找到信息的差異，然后對信息進行分組。

一般非常重要的信息，往往是交易數字，或者是行動點，這塊需要重點做強化。二級類別的信息，可以是標題，或者是用戶&業務想重點傳達的文本或者插圖，這塊可以自行做判斷。

2. 信息層級不要超過5種

其次需要注意的是，分組分的太多，也會造成頁面秩序的混亂，所以頁面的信息層級，最好不要超過5種。那么其對應的字號，也不應該超過5種，這里可以使用規范，進行相應的約束。

包括不知道大家有沒有發現，其實在我的公眾號里，我也使用了五種信息層級，大家可以對比這五個樣式。

1. 重點標題大字號
2. 小標題中等字號
3. 正文正常字體字號
4. 輔助標題小字號
5. 最弱信息字號

之所以分這五種樣式，一方面是為了更好地傳達信息之間的層級關系，其次，也是為了增添文章的美感，增添閱讀的享受感。比如下面這個案例，其實在信息之間的層級關系就較為清晰，不但具有美感，閱讀的時候還清晰易懂。

03 頁面的重心

光有秩序感，這還不夠，頁面如果沒有重心，也會缺乏空間層次，經不起美的推敲，所以在將信息的結構確認后，還可以嘗試進行以下一些操作。

1. 在點、線結構中，適當增加面

在合適的位置，可以嘗試增加色塊&實色填充，拉開頁面的空間層次，這樣既能很好的凸顯頁面的重要信息，同時又不顯得單調。比如這樣

又或者這樣

2. 調整重心的平衡

如果增加了重心后，發現頁面失去了平衡，重心靠左或者是靠右，這樣可以調整頁面其它模塊組件的強弱層次，如果重心偏左，那么可以把右下角的信息加重處理。如果重心偏右，則可以把左邊的信息加重處理。

04 顏色的把控

顏色的用法，也需要非常合理，如果盲目的添加顏色，也會讓頁面變的更為低俗，所以在顏色上面，可以遵循下面兩種方式。

1. 正常情況頁面主色不要超過3種

頁面的顏色越多，實際上檔次越上不去，仔細看那些非常有高級感的設計，它們的配色，大多數都不會超過3種，顏色越少，高級感越強。

這個跟在海報設計中的配色講究，其實是一樣的，顏色數量與高級感成反比。

2. 定義顏色的明度區間

但所有信息層級用一個色值，其實也不太合適，所以較好的解決辦法，是將顏色的明度，同樣也定義成為5種。比如100%明度、80明度%、60明度、40%明度、20%明度，在不同的信息層級上，使用不同的信息明度。

當然，有的時候透明度會出現一些顏色顯臟的情況，所以適當改變一下色相，用鄰近色代替也是OK的。

05 系統一致性

最后一點需要注意的是，如果定義清楚了一個頁面的規則，那么同樣，這個頁面的規則，需要與其它的頁面規則保持一致性。所以這個時候，往往得拉通來看，各個頁面的視覺語言，視覺邏輯規則，是否一致。如果不一致怎么調整比較合適，這些都需要考慮。

從一致性方面，也可以從兩點方面來考慮，做細化：

1. 信息分類的一致

各個頁面的分類邏輯，是否一致，包括重點標題、小標題、正文、輔助標題、最弱信息的規則是否一致。

2. 視覺語言的一致

視覺語言包括顏色、字號、間距、樣式，這些也都需要考慮統一。

比如下面這套：

最后補充

PS：掌握了方法還不夠，只有結合方法，進行動手練習，才是進步成長最快的！所以看完本篇文章后，不妨開始動手進行練習，把這些方法牢牢掌握。

其次，平時工作中，也可以多積累，多總結，形成自己的方法論，一方面能提升自己的專業能力，二方面，還能提升自己的影響力！

最后，歡迎大家擴散此文

作者：UX小學，微信：uxd686

本文由 @UX小學 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議