為什么這些畫面更耐看?

2019-1-16    資深UI設(shè)計(jì)者

在同樣的設(shè)計(jì)框架中,要如何快準(zhǔn)狠找到最終傳達(dá)的信息?有時(shí)候選對(duì)圖片讓你的設(shè)計(jì)事半功倍。


導(dǎo)語


為什么視覺效果很重要,因?yàn)槲覀兊拇竽X處理視覺信息的速度比其他信息快6萬倍。在同樣的設(shè)計(jì)框架中,要如何快準(zhǔn)狠找到最終傳達(dá)的信息?有時(shí)候選對(duì)圖片讓你的設(shè)計(jì)事半功倍。


阿思海姆《藝術(shù)與視知覺》曾經(jīng)提到“視覺形象永遠(yuǎn)不是對(duì)于感性材料的機(jī)械復(fù)制,而是對(duì)現(xiàn)實(shí)的一種創(chuàng)造性的把握,它創(chuàng)造的形象是含有豐富的想象性、創(chuàng)造性、敏銳性的美的形象?!?


這段話是不是太抽象了?簡單總結(jié)來說意思是:美是有規(guī)律。


這本出版于1962年的經(jīng)典書籍,書里說到提升美感的十個(gè)點(diǎn),分別是平衡、形狀、形式、發(fā)展、空間、光線、色彩、運(yùn)動(dòng)、張力、表現(xiàn)。


不要小看區(qū)區(qū)這10個(gè)詞語,里面暗藏著與美感相關(guān)的知識(shí)點(diǎn)。


以大圖和小圖為例,給人的心理感受是完全不一樣。大圖更多給人以沖擊力的感覺。小圖則是平靜陳述內(nèi)容。選有感覺圖片,建議根據(jù)這些選項(xiàng)再進(jìn)行選擇。

 




一、 說服力畫面養(yǎng)成法


那么,圖片如何正確傳達(dá)信息呢?這不得不提,藝術(shù)與視知覺的平衡。我們?cè)谟^察一個(gè)建筑物的時(shí)候,以巴黎圣母院來說為例:當(dāng)你第一眼看上去的時(shí)候很神圣,華麗的外表,中軸對(duì)稱的形式,讓人們對(duì)宗教產(chǎn)生了一種無言的崇敬。


同樣的結(jié)構(gòu),將圖片給換成下圖時(shí),給人完全沒有崇敬的感覺。


 

同樣的結(jié)構(gòu)為什么會(huì)有這么大的差異?和圖片給人的隱藏信息有很大的關(guān)系。


小測試:上圖你能得到的信息時(shí)什么?

  ● 怪異?

  ● 螺絲釘?

  ● 不合常理?


特異是能打破現(xiàn)有框架的元素,譬如一個(gè)人身掛著狗頭,絕對(duì)能快速吸引你的目光。因?yàn)楹统WR(shí)有所偏差,所以能特別吸引目光。


返回平衡的話題,好設(shè)計(jì)都需要分析其平衡之處。就像杜尚的這幅作品《坐在黃色扶手椅上的塞尚夫人》,利用黃金分割的輔助線,以中軸對(duì)稱的形式體現(xiàn)平衡。同時(shí),傾斜的躺椅和身體有形成另一種平衡。


 

這種結(jié)構(gòu)配合婦女的造型,形成一種端莊既視感。如果你有時(shí)間,再分析以前的繪畫,都能或多或少滿足找出畫面給人好感的原因。


那么,有什么特征才會(huì)有這樣的感覺呢?




二、 有感覺圖片的具有這些特征


1、善用眼睛,影響他人


眼神選圖的關(guān)鍵。我們都知道眼睛是人心靈的窗口,人類身上最迷人的部分,眼睛肯定算其中之一。


很多小說里都會(huì)提到通過對(duì)方的一個(gè)眼神,就能確定那個(gè)人在想干什么。聽上去有點(diǎn)神奇,不過確實(shí)眼神有這樣的魔力。



如上圖所呈現(xiàn)的狀態(tài)一樣。我們看到左邊的三個(gè)人的視覺焦點(diǎn)一致向右,我們的注意力也不自覺的往右邊的區(qū)域移動(dòng)。


怎么樣的眼睛是具有引導(dǎo)作用呢?


可以參考以下這張圖,一般來說,當(dāng)人臉的朝向了正面的時(shí)候,他的眼睛的引導(dǎo)力并不算很強(qiáng)。因?yàn)檫@時(shí)候他的眼神是盯著你看,并不會(huì)在畫面其它區(qū)域留下痕跡,所以引導(dǎo)的作用并不強(qiáng)。


這就是為什么畫人像的時(shí)候,基本不會(huì)畫完全正臉的頭像,是一樣的道理。因?yàn)檎樀娜讼駮?huì)顯得很嚴(yán)肅,并不生動(dòng)。

 



根據(jù)這樣的眼神理論,我們排版的時(shí)候就顯得很容易,只需要將重點(diǎn)的內(nèi)容往眼神指向的方向放置即可。



關(guān)鍵字:明確眼神方向



具體請(qǐng)看下圖,我把標(biāo)題文字放在眼神聚焦的地方,就會(huì)顯得特別醒目。配合粗體大標(biāo)題,畫面內(nèi)容主旨十分明確。



相反我們將文字內(nèi)容移到左側(cè)的時(shí)候,這種吸引力會(huì)弱化??瓷先ニ坪踹€不錯(cuò),但總感覺有點(diǎn)不對(duì)路的地方。就是因?yàn)檠劬Φ某蚴窃诋嬅嬷?,而文字是在畫面?nèi)部,他們兩者產(chǎn)生了引導(dǎo)線沖突導(dǎo)致的。



同樣在視覺語言中。左側(cè)跟右側(cè)的眼睛相互交匯到中間時(shí)就會(huì)產(chǎn)生一種對(duì)峙感。特別適合表現(xiàn)一種競爭和比賽的視覺效果。



如果你喜歡,可以利用大小對(duì)比的效果,將同一張圖片進(jìn)行重復(fù)排列,就像下圖所展示的效果一樣,能產(chǎn)生很特別的版式。


 




三、 動(dòng)作產(chǎn)生邏輯思考力


選圖時(shí),除了眼神能產(chǎn)生很強(qiáng)的吸引力之外,人物自身的動(dòng)作也有類似的效果,比如人體動(dòng)作或者手指指向的行為。


仔細(xì)觀察會(huì)發(fā)現(xiàn),我們用的鼠標(biāo)指針就有類似的明確指向性。你會(huì)很清楚,它指向的頂端就是可以操作的區(qū)域。



在圖庫里面搜索到關(guān)鍵字:『手指 指向』,能找到很多不錯(cuò)的指向性圖片。尤其是比較親和的人物造型,或者快速聚焦某項(xiàng)內(nèi)容時(shí)配合手指具有很明確的指引效果。


一本日本暢銷的文案書里提到過一個(gè)觀點(diǎn),什么是優(yōu)秀的文案?就是看完之后,能讓人產(chǎn)生行動(dòng),這就是好的文案。



關(guān)鍵字:有身體動(dòng)作



舉個(gè)例子:

  ● 迷人的姑娘,便宜的產(chǎn)品(狀態(tài)描述)

  ● 作為普通文員,她為什么擁有令人羨慕的小資生活?(動(dòng)作描述)


好的圖片也具備了這樣的特點(diǎn),搭配手部動(dòng)作,圖片具有很強(qiáng)的誘導(dǎo)性。



人物的手部動(dòng)作,可以清楚告訴用戶什么樣的內(nèi)容是重點(diǎn)。就如同下圖所示的一樣。左側(cè)的圖片明顯要比右側(cè)的圖片更有吸引力。


以往可能你并不清楚,為什么有這樣的不一樣的感受。經(jīng)過上述分析的案例,應(yīng)該就理解其中的原因了。



同樣的指向性動(dòng)作是可以連續(xù)搭配使用。圖片展示的效果如下圖,通過一個(gè)向左動(dòng)作跟一個(gè)向下動(dòng)作,形成了完整的指向型視覺引導(dǎo)方案。


這個(gè)方案既有明確的引導(dǎo)性,也有人物間的大小對(duì)比,整體看上去會(huì)顯得比較完整和耐看。



我們分析一下,如果將顏色去掉,效果是不是不一樣的?得到的是這樣的結(jié)果。


可以明顯的感覺到, 圖一的指向性要比圖二好很多。



試圖通過視覺點(diǎn)的分布,看看問題出在哪里?


圖二視覺點(diǎn)會(huì)有兩個(gè),第一個(gè)是往下的視覺點(diǎn),一個(gè)是往右的視覺點(diǎn)。整體感受就會(huì)比較凌亂。


相反,圖一比較明確,只有一個(gè)按順序移動(dòng)的視覺點(diǎn),即先向左再向下,最終觸達(dá)核心文字。








四、 具象,遵循潮流的方向


當(dāng)你找到圖片之后,不清楚要做成什么風(fēng)格的時(shí)候,趨勢可以幫到你。


趨勢是從哪里來呢?



關(guān)鍵字:具有明確眼神方向



一般可以從各大時(shí)裝周得到,另外還有很多大型的設(shè)計(jì)網(wǎng)站,每年都會(huì)發(fā)布下一年的趨勢報(bào)告,那里也有大量的參考性案例。我們?cè)噲D挑選其中一個(gè)風(fēng)格趨勢,配合我們找圖的技巧,看看能得到什么不一樣的結(jié)果。


  ● 大膽的用色(Bold Color) 




大膽的用色風(fēng)格有一個(gè)很大的特點(diǎn),顏色使用特別大膽跟前衛(wèi),可以配合一定的矢量圖形搭配使用。需要采用多于3種的色彩,以及高飽和度色調(diào)。


那么這個(gè)風(fēng)格的特點(diǎn),就可以整理成以下關(guān)鍵字:

  ● ins 

  ● 時(shí)尚

  ● 粉色




挑選其中一張圖片作為主題,再利用初始用到的參照物分解原理,將其拆分成這三塊內(nèi)容,即點(diǎn)綴,主題跟色調(diào)。


為什么會(huì)選擇這張嘴唇的圖片呢?


首先前衛(wèi)風(fēng)格使用的元素都會(huì)比較另類,于是圖片素材就需要滿足另類的特點(diǎn)。而另類廣義來說是超出原來的正常理解范圍。


譬如:像嘴唇、鼻子、鞋子這類本不該出現(xiàn)的物體,取代了原本頭部的位置,結(jié)構(gòu)成為了另一種獵奇的物體。



仔細(xì)分析大膽前衛(wèi)的風(fēng)格。首先發(fā)現(xiàn)這些風(fēng)格的圖片都會(huì)經(jīng)過處理,不會(huì)直觀表現(xiàn)原來的樣子。意味著直接將找到的圖片拉進(jìn)這種設(shè)計(jì)是不合適的。


利用曲線跟色彩飽和度兩個(gè)參數(shù)進(jìn)行特別的調(diào)整,形成下圖。當(dāng)然如果你愿意,也可以變成其他任何高飽和度的色彩,形成的感覺也是差不多的。



 

特別注意要利用對(duì)撞色的原理,配粗字體,參考波普風(fēng)格元素,在關(guān)鍵字里添加上『波普』這個(gè)詞語會(huì)得到更多驚喜。



最終形成的海報(bào),如圖所示。






五、 圖片傳達(dá)實(shí)驗(yàn)室——迅速提高圖片魅力


看了那么多有魅力的特征圖片,肯定要?jiǎng)邮謱?shí)踐,怎么將這部分的知識(shí)融入到選圖之中。


我將這部分內(nèi)容稱為圖片傳達(dá)實(shí)驗(yàn)室理論,是以一個(gè)界面為例,結(jié)合我們選圖和處理圖片的技巧,形成一批有說服力的界面。


 

目錄會(huì)分為發(fā)現(xiàn)問題,列舉課題,評(píng)價(jià)方案和實(shí)施策略。文字會(huì)以這四部分為主要核心,簡述整體提高圖片魅力的方法。

 


在聊這個(gè)問題之前,我們不妨來看一下這張圖片,每日新聞的一張漫畫。好像沒有什么問題,就是一個(gè)有關(guān)特朗普跟普京的故事。



但是我們?cè)囍鴵Q另一種角度去看。每個(gè)角度都能呈現(xiàn)不一樣的內(nèi)容。雖然它們都是引用了同一張圖片,但是表達(dá)的意思卻是完全不一樣,另外所表現(xiàn)出來的視覺語言也是相當(dāng)不同。



這意味著一張圖片是可以被多次利用,而且只要你用的圖片尺寸夠大,局部是可以用作很多用途,你能創(chuàng)作的可能性就會(huì)多元化。




1、發(fā)現(xiàn)問題


我們以關(guān)鍵字『靜謐』開始,對(duì)這個(gè)技巧進(jìn)行討論。通過搜索,在圖庫里面找到了這么一張圖片。初看下來沒有什么特別大的問題,顏色,圖形和構(gòu)圖都還可以。


 

試著將它植入到音樂界面里,得到了以下效果。用直接將圖片以默認(rèn)方式嵌套到這個(gè)矩形里,能清楚的發(fā)現(xiàn)圖片下半部分顯得空蕩蕩。效果并不是很好,而且圖片的上半部分,文字和背景粘在在一起,造成的閱讀影響。


 


2、解決的課題


我們?cè)撛趺唇鉀Q上述問題呢?很簡單,只要將圖片進(jìn)行反翻轉(zhuǎn)可以了,最終形成以下所示的效果。


拿到圖片,特別是這種類似背景的圖片,翻轉(zhuǎn)是很有用的技巧,它可以實(shí)現(xiàn)從不同的角度適用圖片。


  ● 文字:在圖片里顯得清晰。

  ● 重點(diǎn):變得更有視覺焦點(diǎn)。





3、列舉替代方案


當(dāng)我們找到了這么一個(gè)角度之后,可以分析顏色,進(jìn)而列舉出更多可選的方案。


也可以通過軟件,將圖片顏色進(jìn)行抽離和分解的工作,快速形成一組可供我們參考的顏色。


如圖所示,就能快速實(shí)現(xiàn)配色方案的目的。

 



能列舉不同結(jié)果的方式還有很多,除了配色分類之外,我們還可以用以下3種方式。這里的每種方式與之前的素材整理法相似,都是一種快速擴(kuò)展素材的模式。



① 以圖搜圖:


這是一種快速得到圖片的方式,不用怎么動(dòng)腦,只要你覺得這張圖片還可以,就能找到跟它相似的一堆圖片。


 


② 顏色關(guān)鍵字搜索:


對(duì)目標(biāo)圖片顏色的分析,列舉出顏色趨勢,并將這些名稱放到專業(yè)的圖庫里進(jìn)行搜索。

 



③ 高級(jí)自定義搜索:


可以只用普通引擎進(jìn)行針對(duì)站點(diǎn)檢索,進(jìn)行指向性搜索。你只要知道目標(biāo)就可以針對(duì)搜索。


 





六、 實(shí)施方案策略




1. 權(quán)威高質(zhì)量相關(guān)性圖片


這部分主要是結(jié)合之前聊到的三個(gè)圖片特征,進(jìn)行組合搭配。如果只有背景的畫,圖片的魅力是不太夠,這時(shí)候我們需要引用人物的造型。


人物和靜謐這個(gè)主題相關(guān),我們找到了有靜音動(dòng)作的圖片,具體如下圖所示。


我們直接將這張圖片摳出來,放到我們之前整理的背景里的話,明顯是顯得有點(diǎn)格格不入了。因?yàn)閮煞N畫面的風(fēng)格不太一致,這就需要進(jìn)行統(tǒng)一的調(diào)整。



調(diào)整會(huì)利用到photoshop 里面的曲線工具,色階工具以及曝光工具。分別針對(duì)亮色系跟暗色系做了兩套版本進(jìn)行對(duì)比。做出來的結(jié)果,亮色系對(duì)整體的界面更有幫助。


 



2. 能引起行為的動(dòng)作按鈕


還記得前面的章節(jié)提到,一個(gè)令人引起動(dòng)作的手勢,是很重要的行為嗎?


我們可以通過眼神和手部動(dòng)作,進(jìn)行視覺焦點(diǎn)的鎖定,類似下圖所示的結(jié)果,并且結(jié)合圖片合成的技巧進(jìn)行一致性的輸出。


對(duì)于眼神望向右邊而言,『80%和購買按鈕』顯得就非常明顯。

 




3. 減少視覺噪音


完成上面那一步還是不夠,我們?cè)噲D減少一點(diǎn)視覺噪音。什么是噪音呢?就是對(duì)整體畫面沒有幫助,卻能吸引觀眾目光的元素。往往這些東西都會(huì)出現(xiàn)在背景里。


我們都知道,如果背景越復(fù)雜的話,前景的重點(diǎn)性會(huì)減弱。這一步可以對(duì)背景進(jìn)行簡易化的處理。最終形成的樣子,如下圖所示。






4. 款式一致


除了上述能為圖片加分的選項(xiàng)以外,還有一點(diǎn),就是當(dāng)多圖片使用時(shí),一定要注意款式的一致。





七、 延伸思考:技術(shù)思考


已經(jīng)簡述很多關(guān)于圖片處理的技巧,另外還有一個(gè)很重要的概念,我也將此放在這里進(jìn)行延伸思考。吉薩金字塔和達(dá)芬奇?zhèn)魇喇嬜鳌睹赡塞惿酚惺裁搓P(guān)系?它們都是基于黃金分割設(shè)計(jì)!


黃金分割是一個(gè)數(shù)學(xué)比例。我們?cè)诖笞匀恢泻苋菀渍业竭@樣的比例,當(dāng)它用于設(shè)計(jì)時(shí),能創(chuàng)造出有生命力的、純天然的視覺作品,愉悅我們的眼睛。



無論是設(shè)計(jì)或是攝影構(gòu)圖,合理使用黃金比例可以讓你的作品更美觀,因?yàn)檫@套系統(tǒng)已經(jīng)是被歷史驗(yàn)證過,超越感覺的一般性方法。


但黃金比例不只上圖所示的樣子,還有許許多多的形式。一般我們使用時(shí),將主要元素放在交界線的位置就可以了。



但是我們適用設(shè)計(jì)軟件里并沒有這一選項(xiàng),自己動(dòng)手做的話明顯也不是很合適。這時(shí)候,我們就要使用到萬能的插件。


在介紹插件前不妨看一下,我們利用黃金比例去分解世界名畫,可以得到這樣的結(jié)果。就是主要的元素都能放在線段交界的部分。這就是為什么有些版式,看上去很有美感的原因所在。



那我嘗試用這種ps插件,將生成的黃金比例圖,放到了我們所需圖片里。插件有個(gè)地方,它可以根據(jù)的圖片尺寸。自動(dòng)適配一個(gè)黃金比例圖給你。


  ● 插件一:Divine Proportions Toolkit


  ● 插件二:GoldenCurve黃金分割線GoldenCurve - PHOTOSHOP中的黃金分割線





總結(jié):


具有說服力的畫面是什么樣子呢?或者換一種說法,什么是耐看的畫面?應(yīng)該就是能讓人產(chǎn)生行動(dòng)的效果,注意『行動(dòng)』這兩個(gè)字很重要。


什么樣的情況會(huì)產(chǎn)生行動(dòng)呢?我們可以利用眼神,動(dòng)作以及趨勢塑造有動(dòng)作感的畫面。一般,有感覺的設(shè)計(jì)也會(huì)緊緊遵循這樣的原則,另外我們對(duì)這套理論進(jìn)行實(shí)踐,得出快速提升圖片魅力的方式,即發(fā)現(xiàn)問題,列舉課題,評(píng)價(jià)方案和實(shí)施策略。

日歷

鏈接

個(gè)人資料

存檔