成人亚洲综合,日韩高清一区二区三区五区七区,三级网址日本,亚洲激情成人,av成人在线电影,亚洲免费成人在线,超清首页国产亚洲丝袜

從平庸到卓越!5個(gè)幫你快速提高設(shè)計(jì)稿質(zhì)感的實(shí)用方法

作者:
2016-05-06
2743

為什么別人的作品看上去很有質(zhì)感,細(xì)節(jié)到位,自己的就平淡無奇,談不上滿意。問題到底出在哪?如何給設(shè)計(jì)作品最后”定妝”,讓最終的設(shè)計(jì)脫穎而出?下面這5條經(jīng)驗(yàn)之談(層次、色彩、陰影、字體、氛圍)能幫你搞定這個(gè)問題。

最后一公里?最后一公里!

最后一公里「Last Kilometer」這個(gè)概念,最早是拿來形容公共交通末梢的問題。后來各個(gè)行業(yè)都開始用,就逐漸引申為完成一件事最后且關(guān)鍵性的一步。(通常很棘手,但如果解決得當(dāng)就能為整件事形成完美的閉環(huán))而在設(shè)計(jì)領(lǐng)域里,大熊認(rèn)為這「最后一公里」的問題,恰恰就落在最終項(xiàng)目的呈現(xiàn)上。

你可曾想過這么一個(gè)問題:自己設(shè)計(jì)書看的不少,”設(shè)計(jì)大牛”的文章一篇不落,工作幾年經(jīng)手的項(xiàng)目不說多有難度,至少數(shù)量上也很足夠了,照理說”設(shè)計(jì)經(jīng)驗(yàn)”很豐富??蔀槭裁垂?dribbble、behance、FWA 時(shí),總能明顯感覺到,明明風(fēng)格相近,別人的作品看上去很有質(zhì)感,細(xì)節(jié)到位,自己的就平淡無奇,談不上滿意。問題到底出在哪?

不光是剛?cè)腴T的設(shè)計(jì)師會(huì)有這樣的困惑,就連”身經(jīng)百戰(zhàn)”的資深設(shè)計(jì)師,也會(huì)面臨類似的瓶頸,只是深度不同。

所以,如何settle、如何給設(shè)計(jì)作品最后”定妝”,讓最終的設(shè)計(jì)脫穎而出?

下面這5條經(jīng)驗(yàn)之談能幫你搞定這個(gè)問題。

一、層次

層次分平面和縱深。任何一個(gè)設(shè)計(jì)師,都應(yīng)該充分意識(shí)到,有節(jié)奏的層次變化,能在用戶內(nèi)心產(chǎn)生微妙的化學(xué)反應(yīng)。

我們來舉個(gè)栗子。

這是一個(gè)簡單的底圖+文字(背景是卡塔爾航空),沒有任何特別之處。然而卻問題多多,不趕緊補(bǔ)救一下,根本拿不出手。首當(dāng)其沖的是平面版式的層次,全部內(nèi)容堆到一起,丟失視覺重心;其次是畫面沒有縱深感,稍作停留就覺得乏味。

33dx20160505

「Before」

理一下思路,我們可以從這幾個(gè)地方入手:

  • 一級(jí)標(biāo)題、二級(jí)標(biāo)題、正文的強(qiáng)弱層次區(qū)分開;

  • 沿著左側(cè)的機(jī)翼割裂方形框,形成縱深感;

來看看效果:

32dx20160505

「After」

看出區(qū)別了嗎。按照剛才的思路稍作修改,是不是立刻煥然一新。

原理很簡單:

通過后期將畫面中的元素突出或弱化,人為的制造出視覺差,大大增強(qiáng)畫面的立體感。

31dx20160505

「畫面元素在人眼中呈現(xiàn)的先后次序」

在設(shè)計(jì)中多多運(yùn)用這樣的技巧,給自己的設(shè)計(jì)制造富有節(jié)奏的層次感,結(jié)果可能就大有不同。

是為「設(shè)計(jì)最后一公里」之層次。

二、色彩

大熊在轉(zhuǎn)行做設(shè)計(jì)前,是一個(gè)土木工程師。項(xiàng)目里密密麻麻的CAD走線大紅大綠,沒有眼瞎已經(jīng)是僥幸。連大熊這樣的渣渣都能通過后期不斷練習(xí),勉強(qiáng)在設(shè)計(jì)中把顏色基本用對(duì),你們就更不用說了。所以,色彩一定要花功夫調(diào)整,否則可能原本不錯(cuò)的設(shè)計(jì)稿因?yàn)轭伾玫牟粔颉罢保捅豢蓱z的打入冷宮。

我們來看這幅圖:

30dx20160505

毫無疑問,肯定是后者更舒服?可是凡事要多問為什么,我們把畫面的顏色提取出來看看:

29dx20160505

左側(cè)的色樣超過10種,右側(cè)的色樣不過3種。

28dx20160505

永遠(yuǎn)記住,在絕大多數(shù)沒有把握的情況下,要嚴(yán)格控制畫面中顏色的數(shù)量,否則很容易擦槍走火。

再來看另外一個(gè)栗子:

27dx20160505

同樣的,大熊將顏色提取出來,對(duì)應(yīng)至色輪:

26dx20160505

發(fā)現(xiàn)癥結(jié)所在了嗎?

25dx20160505

什么樣的產(chǎn)品,就運(yùn)用什么樣的顏色組合。

24dx20160505

大熊在設(shè)計(jì)選色上,自己總結(jié)了4種辦法,效率非常高(也曾在公司內(nèi)分享過):

  • 近似色

  • 互補(bǔ)色

  • 同色系

  • 自然(圖片中)尋找

拿近似色來說,有現(xiàn)成的工具比如 Adobe Color,以及 Apple 設(shè)計(jì)師也在用的Color Schemer Studio 2 幫忙,在色輪上取正負(fù)30°的顏色,通常就是非常好的近似色組合。

23dx20160505

「Adobe Color」

22dx20160505

「Color Schemer Studio」

我們將上圖Color Schemer取的顏色來一次現(xiàn)場配色,是不是毫無違和感:

21dx20160505

「蒙特里安構(gòu)成派的作品風(fēng)格,按近似色重新組合」

再說互補(bǔ)色,色輪上對(duì)應(yīng)的兩個(gè)顏色就是視覺沖擊最強(qiáng)的顏色組合。

20dx20160505

但是千萬不要拿來就要,先敲定一個(gè)主色和若干輔色:

19dx20160505

再確定色塊的比例:

18dx20160505

「比較常用的做法」

接著說同色系,這個(gè)比較簡單,通過加深或減淡基本色,就可以定義一組可用的顏色出來:

17dx2016050516dx2016050515dx20160505

大熊基本上是選定一種顏色后,分別疊加20%透明度的白色和20%透明度的黑色,得到了想要的同類色組合。

最后說說從自然中取色,拿一張大表姐的照片舉例,放入Adobe Color 自動(dòng)識(shí)別出圖片中的主要顏色:

14dx20160505

「Adobe Color 識(shí)別顏色」

根據(jù)這幾個(gè)顏色以及主輔色的比例,我們可以在短短幾分鐘就完成一個(gè)可用的版式設(shè)計(jì):

13dx20160505

「這里稍微提升了畫面的亮度和飽和度」

如果在設(shè)計(jì)中發(fā)現(xiàn)作品不合心意,沒準(zhǔn)問題就出在顏色上。

上述4個(gè)技巧在任何場景下都可以靈活運(yùn)用,這下知道該怎么做了吧。

三、陰影

幾乎是GUI界面設(shè)計(jì)誕生的那一刻起,陰影的運(yùn)用就無處不在。

20世紀(jì)末的應(yīng)用界面基本上都長這樣:

wszn20160505

「Windows 2000 Pro預(yù)覽版」

可以看到,界面設(shè)計(jì)有高光有陰影有漸變。在當(dāng)時(shí)GUI設(shè)計(jì)是一個(gè)新興的行業(yè),大家都沒有可參考的對(duì)象,傳統(tǒng)的平面印刷設(shè)計(jì)很難拿來借鑒,同時(shí)又受制于制圖軟件特性限制,也就有了如上圖的結(jié)果。

后來設(shè)計(jì)工具不斷迭代,手法也越來越多,特別是iPhone OS(是的那會(huì)還不叫iOS)出世后,擬物設(shè)計(jì)「Skeuomorph」風(fēng)靡整個(gè)設(shè)計(jì)圈,在iOS 6的時(shí)候達(dá)到了頂峰。幾乎所有設(shè)計(jì)師都在拼命畫ICON,花費(fèi)大量的時(shí)間在界面中的投影、反射、紋理、高光上,誰的設(shè)計(jì)能讓人更想”舔”一口,誰就贏了:

11dx20160505

「被無數(shù)設(shè)計(jì)師臨摹的圖表界面,設(shè)計(jì)師 Mike 的作品」

iOS 7 推行扁平化設(shè)計(jì)后,當(dāng)時(shí)的設(shè)計(jì)圈就炸開了鍋?!高@么多年辛苦練習(xí)的設(shè)計(jì)技巧,說拋棄就拋棄?」于是他們還是想到了陰影。你要說2014年最流行的設(shè)計(jì)風(fēng)格是什么,毫無疑問是漸變「Gradient」+長投影「Long shadow」:

10dx20160505

「典型的長投影設(shè)計(jì)」

如果你還有印象的話,一定記得當(dāng)時(shí)Appstore只要上推薦榜的應(yīng)用,一大半都是這種風(fēng)格。

藝術(shù)源于生活,長投影在生活中也隨處可見:

9dx20160505

「羅德島藝術(shù)設(shè)計(jì)學(xué)院——藝術(shù)博物館外立面的長投影」

緊接著設(shè)計(jì)師們就看膩了長投影,開始轉(zhuǎn)向紙片化的設(shè)計(jì),另加上大范圍的薄陰影烘托質(zhì)感。風(fēng)格依舊是扁平的,只是大家在探索的過程中往里面加入了很多新的元素,變著法子做出不一樣的感覺。

8dx20160505

「泰國設(shè)計(jì)師 buatoom 設(shè)計(jì)的廣告banner」

為了更好的理解在這二十年里的設(shè)計(jì)風(fēng)格演變,大熊畫了下面的圖來管中窺豹:

7dx20160505

「陰影在設(shè)計(jì)中運(yùn)用的演變」

大熊想說的是,對(duì)潮流不要抗拒,新的設(shè)計(jì)風(fēng)格興起一定有它的時(shí)代背景。(比如扁平化的設(shè)計(jì)將設(shè)計(jì)師從無止盡的像素堆疊中解放出來,從更實(shí)用的角度去做設(shè)計(jì),讓精力回歸到最基本的交互和使用體驗(yàn)上。)然而也要時(shí)刻保持思考,風(fēng)格是皮外物,適合的才是好的。

花這么長篇幅說陰影跟文章的主題「設(shè)計(jì)的最后一公里」有關(guān)系嗎?

別著急,有的。

還是舉個(gè)栗子,這是大熊2014年給某個(gè)定制高端戶外游的公司做的視覺概念設(shè)定,仔細(xì)一看,問題不少。首先是采用卡片式的設(shè)計(jì),最好將內(nèi)容和背景脫離開,否則「可點(diǎn)擊」的暗示不夠強(qiáng)烈;其次是采用了幽靈按鈕「Ghost Button」,要補(bǔ)充一些必要的細(xì)節(jié)讓內(nèi)容更完整。

6dx20160505

「Before」

所以我們可以這么改進(jìn):

  • 通過邊框「Border」和陰影「Shadow」將卡片導(dǎo)航與背景明顯分割開;提高文字的可讀性;

  • 給幽靈按鈕增加細(xì)節(jié),即便鼠標(biāo)沒有移到上面處于「Hover」?fàn)顟B(tài),也要給人明顯可點(diǎn)擊的暗示;

5dx20160505

「After」

是否看出區(qū)別:右側(cè)底部卡片的標(biāo)題可讀性提高了,卡片和背景也分割的更明顯。

一點(diǎn)點(diǎn)陰影,差別可以如此大。

四、氛圍

優(yōu)秀的設(shè)計(jì)作品無一不重視氛圍的渲染,就好像去餐館吃飯,同樣一盤菜擺在蒼蠅館子的餐桌上,和擺在米其林餐廳里,人們對(duì)它的價(jià)格預(yù)期是不一樣的。我們花了95%的時(shí)間在反復(fù)推敲設(shè)計(jì)的合理性,交互的一致性。為何不多花那5%的時(shí)間,將最終要給別人看的設(shè)計(jì)好好打磨,呈現(xiàn)一個(gè)更好的樣貌?

我們還是來舉個(gè)栗子,這是大熊很久以前練習(xí)時(shí)繪制的燈塔:

4dx20160505

「Before」

這張卡片設(shè)計(jì)沒有絲毫特別之處,換句話說,太單調(diào)了。
我想我們可以從這幾個(gè)方面入手,強(qiáng)化設(shè)計(jì)最終呈現(xiàn)的效果:

  • 呼應(yīng)主題的背景,可以用高斯模糊或漸變;

  • 一些細(xì)微的裝飾性元素;

  • 文字和陰影;

一起動(dòng)手試試:

3dx20160505

看起來是不是比原來孤零零的卡片更完整。

這就是為什么我們要強(qiáng)調(diào)氛圍的重要性,同樣的設(shè)計(jì),僅僅多用一些心思,就提升了整個(gè)設(shè)計(jì)作品的完成度。

「越用心,越美好」這句話,在這里是適用的。

五、字體

大熊對(duì)字體的研究只有皮毛,但有一點(diǎn)記得很清楚:用對(duì)字體,設(shè)計(jì)才得體。

你不會(huì)想要在卡通風(fēng)格的設(shè)計(jì)中用宋體,同理,也不會(huì)用娃娃體去做嚴(yán)肅文學(xué)作品的封面。

用錯(cuò)字體,就像是穿著高跟鞋去登山,夾著拖鞋去跑步,總歸是勞心乏力,還不好看。

十分慚愧,大熊平時(shí)用的最多的英文字體,無非就是這么幾款:

2dx20160505

「基本都是系統(tǒng)自帶字體,請(qǐng)善用搜索引擎」

此外不得不提的是,大熊所在公司當(dāng)前的LOGO,也是在Lucida Grande這款字體的基礎(chǔ)上做的變形設(shè)計(jì)(這款字體實(shí)在是太經(jīng)典了):

1dx20160505

「haobtc LOGO」

所以,這對(duì)你意味著…

每當(dāng)設(shè)計(jì)接近尾聲時(shí),時(shí)刻記著從這五個(gè)角度重新梳理一遍(這里只是拋磚引玉):層次、色彩、陰影、氛圍、字體,你會(huì)發(fā)現(xiàn),如果每樣都比之前好那么一點(diǎn)點(diǎn),整體設(shè)計(jì)會(huì)大有不同。

設(shè)計(jì)中的「最后一公里」,歸根結(jié)底是細(xì)節(jié)的積累,用心探索,設(shè)計(jì)會(huì)越做越好。

這篇文章里提到的幾點(diǎn),不過是設(shè)計(jì)中經(jīng)常會(huì)碰到的常識(shí),要想真正提高設(shè)計(jì)能力,還需要大量反復(fù)的練習(xí)。設(shè)計(jì)圈內(nèi)高手如云,大熊依然徘徊在門外。只有通過不斷學(xué)習(xí),或許才有一天能做出讓別人感動(dòng)的設(shè)計(jì),與大家共勉。


1
7
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學(xué)科技園東區(qū)9號(hào)樓2層

版權(quán)信息

  移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)