好的設計往往能夠根據産品的性格和特征來量身打造，而做到這一點卻很難，文章為大家分享了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 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部