提升UI設計細節的方法

  • A+
所屬分類:經驗思維

本文來源: 老狼(公眾號: 應謀鬼計), 共 3485 字

今天我們來聊一聊設計細節,從視覺設計的角度,總結了一些提升設計細節的方法。希望對于一些設計師有所幫助。個人見解,如有雷同,純屬巧合。

提升UI設計細節的方法

開門見山,那么我們可以從哪些地方提升設計的細節呢?本“武林秘籍”一共為“九式”。雖然是設計的一些基本功,但容易被忽略。掌握好這些,在平時設計中,多加勤練,多思考,你的設計就會更加細致~

提升UI設計細節的方法

一切藝術都具有形式美;美的基本因子由“形”、“色”、“質”組成。設計也是一樣。首先我要講的是設計中的“形”,同時我個人認為“形”是圖形設計中最重要的一個因子,“形”的設計好壞對于一個作品起著至關重要的作用。

這里所說的“形”可以理解為圖形的輪廓、稿、造型等。

提升UI設計細節的方法

“形”的控制在設計過程中需要反復思考和推敲,比如圖標設計中的對其“識別性”的要求和 設計中常用的“尺規幾何做圖法”都是對“形”細節的嚴格把控。在插畫設計中,人物或物質形態的造型和節奏感也很重要。

“形”要準確,也要有“個性”。

提升UI設計細節的方法

打個比方,我們要畫一個圓角矩形,一般都會在矩形的基礎上直接倒個圓角。很普通對不對?是否可以針對這個圓角打磨更多的細節呢。

提升UI設計細節的方法

我們可以再給這個矩形進行處理或者換另一種畫法,讓他具有一些膨脹感或更加飽滿,變得那么“不普通”。這樣的圓角矩形是不是更耐看了點呢。(別小看了這圓角矩形,蘋果圖標的圓角矩形還注冊了專利呢)

提升UI設計細節的方法

這是一組多年前OPPO手機主題大賽的參賽作品,過了那么多年,依然很喜歡。

提升UI設計細節的方法

有了“形”,我們再來講講“色”。

經常有“甲方爸爸”說“這個顏色有點丑額!換個顏色。”其實我認為,沒有一個顏色是丑的顏色。排除一些個人感受和喜好外,造成這樣“丑”的局面多半是因為色彩搭配和色彩關系之間出了問題。

提升UI設計細節的方法

雖然網上有很多色彩搭配工具,但是最好的工具是設計師的“感覺”,也可以說是設計師長期的積累和訓練的一種能力。色彩搭配有方法可尋,但也不是完全固定的,就比如我們常說的“紅配綠”也可以很高級。

提升UI設計細節的方法

我們試著給剛才的圓角矩形添加個顏色,可以是純色,也可以是漸變色。但需要注意的是在做漸變的時候,需要注意明度、飽和度以及冷暖的變化,使得顏色過渡自然。

提升UI設計細節的方法

這是一組通過色彩漸變表現小動物結構的圖形作品。基本是通過控制色彩的幾個常用要素:色相、飽和度、明度來實現的。

提升UI設計細節的方法

設計可創造虛擬抽象,也可還原真實。除了“形”,“色”,設計中“質”的表達也很重要。比如最早的擬物風格圖標的流行到現在的極簡化風格。這里要說的是,由繁到簡并不是“去質”,“無質”也是一種“質”的表現形式。

提升UI設計細節的方法

很喜歡以前錘子手機的圖標,盡可能的還原真實,有豐富的細節,可以盯著看好久。扁平化的流行也讓UI設計師的門檻變得越來越低,對于繪畫的要求也沒有那么高了。

提升UI設計細節的方法

一般“添質”有兩種方法:添加紋理(材質)和添加光影質感。但是并不是一昧地追求“裝飾”,避免過度設計。

提升UI設計細節的方法

這是我比較喜歡的兩位站酷的設計師的作品,喜歡的同學可以去看下。(本來想放自己作品的,還是大佬的作品更具說服力吧)

提升UI設計細節的方法

提升UI設計細節的方法

剛講了三個基本要素“形”“色”“質”中提升細節的一些要點。

我們總結一下:

塑“形”:形要準確,也要有個性。“形”是第一位的,在做設計時“形”的打磨需要更多的時間,“形”需要美感,也需要“個性”。

控“色”:明度冷暖,過渡自然。色彩能給人帶來更強的視覺沖擊,記住沒有一個顏色是“丑”的,處理好顏色的色相、明度、飽和度,以及顏色之前的關系。

添“質”:賦予質感,注意光影。“質”是錦上添花。一般方法以“添加紋理”和“添加光影”為主。“無質”也是“質”的一種表現形式哦。

提升UI設計細節的方法

接下來我們講一講“留白”。正所謂“此處無物勝有物”,“留白”是設計中常用的手法,這里說說的“白”并不是白色或空無一物的意思;留白可以讓你的主題更突出,畫面更有空間感和通透感。

提升UI設計細節的方法

那如何留白呢~~我們先來看張圖,一個黑色小圓球,放在一堆集合圖形中。你能快速的定位到小圓球嗎?人的視覺焦點是分散的,甚至會被他身邊的幾何圖形影響,始終沒辦法聚焦,看到的是一堆凌亂的圖形。

提升UI設計細節的方法

在我們平時設計過程中一樣,設計是應該是克制的,需要做好“減法”。我們可以通過“減法”來更加突出小圓球的視覺位置。

1:“減少干擾”:我們可以把小圓球身邊的雜亂的圖形弱化。

2:“去除”:把不相干的幾何圖形元素去掉。

提升UI設計細節的方法

充分發揮留白的作用,體現其內在價值,才能在突出主題、提升內容美感的同時,給觀者創造一個較為輕松、愉快的氛圍。

這是蘋果官網的截圖,大家感受下,其實畫面主要是文字,產品圖,沒有過多的裝飾,但是“浴霸”讓你過目難忘~

提升UI設計細節的方法

留白同時還能延展想象和視覺空間感,具有一定的藝術性。我國的水墨畫也常常有留白的應用。

說了這么多,不要產生一個誤區:留白是萬能的!其實并不是所有的都需要大面積的留白,比如:有氣氛類的活動、節日、功能性很強的頁面等等。靈活運用才是王道。

提升UI設計細節的方法

我們在設計中經常會提到“層次”,那“層次”如何而來呢?

一般情況,“層次”需要通過建立元素或內容之間的秩序,比如層級關系、主次關系、顏色關系、位置關系等等。設計常用的方法:“對比”,即強調和弱化,元素間形成關系差;“歸納”:對相近元素的整理和不同元素的區分。

提升UI設計細節的方法

對于文字排版而言,比如說報紙或雜志一般都會有明確的層次:標題(一級)、副標題(二級)、正文(三級),這是很典型的三級排列。不同的層次可以更好地向讀者展示哪些是重要信息。

提升UI設計細節的方法

這是一份分享的培訓通知,左邊經過一定的內容提取,去除了一些沒必要的內容,整理文章內容,建立元素之間的次序,突出分享主題,會不會更加吸引你呢。

提升UI設計細節的方法

“對齊”是指對于頁面的各元素之間建立排列次序;元素排列要有規律。就像大家平常收拾房間一樣,各個物件擺放整齊。我覺得這是一個設計師最基本的要求之一,但常常被一些設計師所忽略。在設計過程中,組織和建立元素間的排列次序關系非常重要。

提升UI設計細節的方法

一般設計工具中都有一些自動對齊工具,常用的對齊方式有“左對齊”、“居中對齊”、“右對齊”等。

請時刻檢查我們的對齊!請時刻檢查我們的對齊!請時刻檢查我們的對齊!

提升UI設計細節的方法

找了一些電影海報,大家感受下這三種對齊方式的在排版設計中的魅力。當然,在建立良好的次序的前提下,有時候也會有多種對齊方式混合使用的情況。

提升UI設計細節的方法

但是我們要小心,有時候在某種情況下,自動對齊并不適用。比如一些文字、符號對齊和一些特殊圖形上。需要用過視覺比重或其他的一些方法手動調整。

思考題:上面的播放按鈕,三角形與圓形的對齊方式,大家覺得哪種方式更優呢~~

提升UI設計細節的方法

關于“字體”的使用一直是我們設計師的痛,一是涉及到版權問題,很多商用的字體需要授權;二是“默認字體”尤其是中英文數字標點等一起的時候,會出現一些意外的情況。

提升UI設計細節的方法

這是Sketch里蘋方字體打的一段文字,數字和中文字、標點符號之間有明顯的問題。

提升UI設計細節的方法

這個時候,我們需要人工介入,對數字和標點符號進行調整,從而保證整體的平衡(如圖)。

提升UI設計細節的方法

作為一個設計師,同時也需要一點點“造字”的能力,為了營造一些畫面的氣氛,尤其是運營設計中主題字體設計可以很大幅度提升活動質量。造字雖然涉及到時間成本,會花費一定的時間和精力,但從效果和質量上來看,還是很有必要的。

提升UI設計細節的方法

設計師們離不開圖片素材。圖片素材一般通過一些素材網站上挑選,也可以自行拍攝。但是網上找的或者自己拍攝的都會有一些問題,這個時候修圖的能力就非常重要了。

提升UI設計細節的方法

如果用到一些食物圖片素材,務必選擇一些質量較好的圖片或者攝影圖片。右圖是不是讓你更有食欲呢。

提升UI設計細節的方法

設計師不僅要學會精選圖片,更要學會如何精修圖片。左圖是修圖前,左圖是修圖后。一般對于產品精修上會更加注重細節的打磨。修圖后的啤酒是不是讓你更想來一杯呢~~

提升UI設計細節的方法

細節的打磨不光是局部的打磨,最終會回到整體的把控上。

提升UI設計細節的方法

我們來看一組頭像排列的案例,乍看沒什么問題,但是仔細看會發現,每個頭像的人物的比例關系和視線都不太統一,我們還可以做的更好。

提升UI設計細節的方法

我們來看下優化后的效果,每個頭像的人物的比例關系和視線基本統一。

統一意味著協調一致,元素間的大小、重量、間距、方向、對齊、色彩、形狀、布局、風格等同樣也要遵循一定的次序和規律。

提升UI設計細節的方法

我們再來看一組圖片,左圖給人的感覺比較雜亂,羽毛和球體跟產品本身不夠明顯,顏色上也比較突兀,所以會給人一種不夠聚焦產品甚至雜亂的感覺。

右圖在形態、色彩、屬性等方面的統一化處理,加強了每個單獨視覺元素之間的呼應,使得畫面更整體舒適!

提升UI設計細節的方法

前面主要講了“形、色、質”在細節打磨上的重要性,接著講到了版式設計中常用的一些細節的處理方法:“留白”、“層次”、“對齊”,最后提了幾點注意事項:拒絕“默認字體”、“精選圖片”、“統一原則”等。

一句話總結下下今天分享的內容:設計細節的把控就是要注重各個元素包括圖形、構圖、色彩、文字等之間的關系,使其和諧統一。

?
  • 版權聲明:本文源自 老狼(公眾號: 應謀鬼計), 共 3485 字。
  • 轉載請注明,本文鏈接:提升UI設計細節的方法

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: