想要成為設計專家,先掌握這5個提升審美的視覺方法
好的設計往往能夠根據產品的性格和特征來量身打造,而做到這一點卻很難,文章為大家分享了5個關于提升視覺設計的方法,希望能對你有所幫助。
對視覺美感而言,其實是有規律、有方法可循的。從美感的定義,資深設計師跟初級設計師,最大的不同點在于,初級設計師在調整美感時,需要花大量時間摸索、嘗試,而資深設計師,有自己獨特的一套理念跟方法。
這也是為何同樣一個設計,初級設計師需要花大量時間去摸索,探索怎么樣調整能讓自己的設計更為美觀。而資深設計師,隨便調調,往往都能調出很好看、很高級的視覺風格,這主要由于他們手里掌握著各類扎實的方法,對” 美 “的套路有深刻的理解。
所以今天,就圍繞“美感”,給大家分享分享,如何在視覺層面,用一些小技巧快速設計傳遞出具備“高級感”的視覺感受。
本文大綱:
- 注意力吸引是美的第一步
- 設計感的節奏如何體現
- 頁面的重心如何均衡
- 顏色干凈高級的秘籍
- 系統設計一致性考量
01 注意力吸引美
實際上,營造一個美而高級的頁面,是需要在第一時間內,有一個重點能快速抓住觀眾的眼球,對觀眾的注意力進行吸引。這樣觀眾才能對你的頁面產生興趣,從而引發瀏覽的動機,如果連基礎的重點都沒有,那么頁面則會顯得很碎,缺乏主體,這樣的頁面便是非常乏味的,難以下咽。
那么要想抓住用戶注意力,頁面的重點可以通過哪些元素來營造?
1. 醒目突出的標題
在UI設計或者海報設計中,標題往往起著點睛的作用。一方面它能很好的給予用戶頁面的定位,告訴用戶當前所處位置,其次又能很好的抓住用戶眼球,提升用戶的瀏覽動機。
所以在Dribbble中,那些令人賞心悅目的概念稿,往往標題就是非常突出醒目的。如果你發現你的頁面元素都很碎,看起來非常亂沒有主體,那么不妨,試試把標題字號的大小做到更大,顏色做到更黑。
總之明顯的主體在設計中相當重要,好看與否都與其強關聯。這個主體可以是圖,也可以是文字。不過通常,文字的優先級需要比圖更重要,因為信息的核心傳遞往往更依賴文字。
2. 精致的插圖
其次,除了將標題調整更醒目外,一個精致的插圖,往往能引起共鳴,更為快速的抓住用戶注意力,如果你的頁面里,全是文字信息非常枯燥,那么不妨多花點時間,繪制一幅精致的插圖。
02 節奏的變化
節奏的變化,是建立頁面秩序的關鍵,一個高級感的頁面,往往內容都是非常有秩序的排列組合,信息的歸類分組非常明確。從秩序來看,有哪些小方法,能幫助我們快速建立思路?
1. 按照信息重要度,對信息進行分層
首先,需要按照頁面信息,按照優先度進行分層,比如非常重要的、重要的、一般的、不重要的,先把這些因子進行羅列,找到信息的差異,然后對信息進行分組。
一般非常重要的信息,往往是交易數字,或者是行動點,這塊需要重點做強化。二級類別的信息,可以是標題,或者是用戶&業務想重點傳達的文本或者插圖,這塊可以自行做判斷。
2. 信息層級不要超過5種
其次需要注意的是,分組分的太多,也會造成頁面秩序的混亂,所以頁面的信息層級,最好不要超過5種。那么其對應的字號,也不應該超過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 協議
這不是gai哥的文章嗎?
為什么放的圖都是英文的,中文的就出不來“高級感”了?
因為受崇洋媚外的舊主義影響
無邊框線條, 用色塊來進行結構排版的設計風格看著真舒服~