為什麼這些設計更耐看?


為什麼這些設計更耐看?


阿思海姆《藝術與視知覺》曾經提到“視覺形象永遠不是對於感性材料的機械複製,而是對現實的一種創造性的把握,它創造的形象是含有豐富的想象性、創造性、敏銳性的美的形象。”

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

這本出版於1962年的經典書籍,書裡說到提升美感的十個點,分別是平衡、形狀、形式、發展、空間、光線、色彩、運動、張力、表現。

不要小看區區這10個詞語,裡面暗藏著與美感相關的知識點。

以大圖和小圖為例,給人的心理感受是完全不一樣。大圖更多給人以衝擊力的感覺。小圖則是平靜陳述內容。選有感覺圖片,建議根據這些選項再進行選擇。


為什麼這些設計更耐看?




為什麼這些設計更耐看?


一、 說服力畫面養成法


那麼,圖片如何正確傳達信息呢?這不得不提,藝術與視知覺的平衡。我們在觀察一個建築物的時候,以巴黎聖母院來說為例:當你第一眼看上去的時候很神聖,華麗的外表,中軸對稱的形式,讓人們對宗教產生了一種無言的崇敬。

同樣的結構,將圖片給換成下圖時,給人完全沒有崇敬的感覺。


為什麼這些設計更耐看?


同樣的結構為什麼會有這麼大的差異?和圖片給人的隱藏信息有很大的關係。

小測試:上圖你能得到的信息時什麼?

● 怪異?

● 螺絲釘?

● 不合常理?

特異是能打破現有框架的元素,譬如一個人身掛著狗頭,絕對能快速吸引你的目光。因為和常識有所偏差,所以能特別吸引目光。

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


為什麼這些設計更耐看?


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

那麼,有什麼特徵才會有這樣的感覺呢?

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


● 善用眼睛,影響他人

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

很多小說裡都會提到通過對方的一個眼神,就能確定那個人在想幹什麼。聽上去有點神奇,不過確實眼神有這樣的魔力。


為什麼這些設計更耐看?



如上圖所呈現的狀態一樣。我們看到左邊的三個人的視覺焦點一致向右,我們的注意力也不自覺的往右邊的區域移動。

怎麼樣的眼睛是具有引導作用呢?

可以參考以下這張圖,一般來說,當人臉的朝向了正面的時候,他的眼睛的引導力並不算很強。因為這時候他的眼神是盯著你看,並不會在畫面其它區域留下痕跡,所以引導的作用並不強。

這就是為什麼畫人像的時候,基本不會畫完全正臉的頭像,是一樣的道理。因為正臉的人像會顯得很嚴肅,並不生動。


為什麼這些設計更耐看?




為什麼這些設計更耐看?



根據這樣的眼神理論,我們排版的時候就顯得很容易,只需要將重點的內容往眼神指向的方向放置即可。

關鍵字:明確眼神方向

具體請看下圖,我把標題文字放在眼神聚焦的地方,就會顯得特別醒目。配合粗體大標題,畫面內容主旨十分明確。


為什麼這些設計更耐看?



相反我們將文字內容移到左側的時候,這種吸引力會弱化。看上去似乎還不錯,但總感覺有點不對路的地方。就是因為眼睛的朝向是在畫面之外,而文字是在畫面內部,他們兩者產生了引導線衝突導致的。


為什麼這些設計更耐看?



同樣在視覺語言中。左側跟右側的眼睛相互交匯到中間時就會產生一種對峙感。特別適合表現一種競爭和比賽的視覺效果。


為什麼這些設計更耐看?



如果你喜歡,可以利用大小對比的效果,將同一張圖片進行重複排列,就像下圖所展示的效果一樣,能產生很特別的版式。


為什麼這些設計更耐看?



三、 動作產生邏輯思考力

選圖時,除了眼神能產生很強的吸引力之外,人物自身的動作也有類似的效果,比如人體動作或者手指指向的行為。

仔細觀察會發現,我們用的鼠標指針就有類似的明確指向性。你會很清楚,它指向的頂端就是可以操作的區域。


為什麼這些設計更耐看?


在圖庫裡面搜索到關鍵字:『手指 指向』,能找到很多不錯的指向性圖片。尤其是比較親和的人物造型,或者快速聚焦某項內容時配合手指具有很明確的指引效果。

一本日本暢銷的文案書裡提到過一個觀點,什麼是優秀的文案?就是看完之後,能讓人產生行動,這就是好的文案。

關鍵字:有身體動作

舉個例子:

● 迷人的姑娘,便宜的產品(狀態描述)

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

好的圖片也具備了這樣的特點,搭配手部動作,圖片具有很強的誘導性。


為什麼這些設計更耐看?


人物的手部動作,可以清楚告訴用戶什麼樣的內容是重點。就如同下圖所示的一樣。左側的圖片明顯要比右側的圖片更有吸引力。

以往可能你並不清楚,為什麼有這樣的不一樣的感受。經過上述分析的案例,應該就理解其中的原因了。


為什麼這些設計更耐看?



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

這個方案既有明確的引導性,也有人物間的大小對比,整體看上去會顯得比較完整和耐看。


為什麼這些設計更耐看?


為什麼這些設計更耐看?



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

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

試圖通過視覺點的分佈,看看問題出在哪裡?

圖二視覺點會有兩個,第一個是往下的視覺點,一個是往右的視覺點。整體感受就會比較凌亂。

相反,圖一比較明確,只有一個按順序移動的視覺點,即先向左再向下,最終觸達核心文字。


為什麼這些設計更耐看?




為什麼這些設計更耐看?



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


當你找到圖片之後,不清楚要做成什麼風格的時候,趨勢可以幫到你。

趨勢是從哪裡來呢?

關鍵字:具有明確眼神方向

一般可以從各大時裝週得到,另外還有很多大型的設計網站,每年都會發佈下一年的趨勢報告,那裡也有大量的參考性案例。我們試圖挑選其中一個風格趨勢,配合我們找圖的技巧,看看能得到什麼不一樣的結果。

● 大膽的用色(Bold Color)


為什麼這些設計更耐看?


為什麼這些設計更耐看?


大膽的用色風格有一個很大的特點,顏色使用特別大膽跟前衛,可以配合一定的矢量圖形搭配使用。需要採用多於3種的色彩,以及高飽和度色調。

那麼這個風格的特點,就可以整理成以下關鍵字:

● ins

● 時尚

● 粉色


為什麼這些設計更耐看?


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

為什麼會選擇這張嘴唇的圖片呢?

首先前衛風格使用的元素都會比較另類,於是圖片素材就需要滿足另類的特點。而另類廣義來說是超出原來的正常理解範圍。

譬如:像嘴唇、鼻子、鞋子這類本不該出現的物體,取代了原本頭部的位置,結構成為了另一種獵奇的物體。


為什麼這些設計更耐看?



仔細分析大膽前衛的風格。首先發現這些風格的圖片都會經過處理,不會直觀表現原來的樣子。意味著直接將找到的圖片拉進這種設計是不合適的。

利用曲線跟色彩飽和度兩個參數進行特別的調整,形成下圖。當然如果你願意,也可以變成其他任何高飽和度的色彩,形成的感覺也是差不多的。


為什麼這些設計更耐看?




為什麼這些設計更耐看?


特別注意要利用對撞色的原理,配粗字體,參考波普風格元素,在關鍵字裡添加上『波普』這個詞語會得到更多驚喜。

最終形成的海報,如圖所示。


為什麼這些設計更耐看?


五、 圖片傳達實驗室——迅速提高圖片魅力


看了那麼多有魅力的特徵圖片,肯定要動手實踐,怎麼將這部分的知識融入到選圖之中。

我將這部分內容稱為圖片傳達實驗室理論,是以一個界面為例,結合我們選圖和處理圖片的技巧,形成一批有說服力的界面。


為什麼這些設計更耐看?


目錄會分為發現問題,列舉課題,評價方案和實施策略。文字會以這四部分為主要核心,簡述整體提高圖片魅力的方法。


為什麼這些設計更耐看?


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


為什麼這些設計更耐看?


但是我們試著換另一種角度去看。每個角度都能呈現不一樣的內容。雖然它們都是引用了同一張圖片,但是表達的意思卻是完全不一樣,另外所表現出來的視覺語言也是相當不同。


為什麼這些設計更耐看?


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

1、發現問題

我們以關鍵字『靜謐』開始,對這個技巧進行討論。通過搜索,在圖庫裡面找到了這麼一張圖片。初看下來沒有什麼特別大的問題,顏色,圖形和構圖都還可以。


為什麼這些設計更耐看?


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


為什麼這些設計更耐看?


2、解決的課題

我們該怎麼解決上述問題呢?很簡單,只要將圖片進行反翻轉可以了,最終形成以下所示的效果。

拿到圖片,特別是這種類似背景的圖片,翻轉是很有用的技巧,它可以實現從不同的角度適用圖片。

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

● 重點:變得更有視覺焦點。


為什麼這些設計更耐看?


3、列舉替代方案

當我們找到了這麼一個角度之後,可以分析顏色,進而列舉出更多可選的方案。

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

如圖所示,就能快速實現配色方案的目的。


為什麼這些設計更耐看?




為什麼這些設計更耐看?


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

① 以圖搜圖:

——

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


為什麼這些設計更耐看?


② 顏色關鍵字搜索:

——

對目標圖片顏色的分析,列舉出顏色趨勢,並將這些名稱放到專業的圖庫裡進行搜索。


為什麼這些設計更耐看?


③ 高級自定義搜索:

——

可以只用普通引擎進行針對站點檢索,進行指向性搜索。你只要知道目標就可以針對搜索。


為什麼這些設計更耐看?



六、 實施方案策略

1. 權威高質量相關性圖片

這部分主要是結合之前聊到的三個圖片特徵,進行組合搭配。如果只有背景的畫,圖片的魅力是不太夠,這時候我們需要引用人物的造型。

人物和靜謐這個主題相關,我們找到了有靜音動作的圖片,具體如下圖所示。

我們直接將這張圖片摳出來,放到我們之前整理的背景裡的話,明顯是顯得有點格格不入了。因為兩種畫面的風格不太一致,這就需要進行統一的調整。


為什麼這些設計更耐看?


調整會利用到photoshop 裡面的曲線工具,色階工具以及曝光工具。分別針對亮色系跟暗色系做了兩套版本進行對比。做出來的結果,亮色系對整體的界面更有幫助。


為什麼這些設計更耐看?


2. 能引起行為的動作按鈕

還記得前面的章節提到,一個令人引起動作的手勢,是很重要的行為嗎?

我們可以通過眼神和手部動作,進行視覺焦點的鎖定,類似下圖所示的結果,並且結合圖片合成的技巧進行一致性的輸出。

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


為什麼這些設計更耐看?


3. 減少視覺噪音

完成上面那一步還是不夠,我們試圖減少一點視覺噪音。什麼是噪音呢?就是對整體畫面沒有幫助,卻能吸引觀眾目光的元素。往往這些東西都會出現在背景裡。

我們都知道,如果背景越複雜的話,前景的重點性會減弱。這一步可以對背景進行簡易化的處理。最終形成的樣子,如下圖所示。


為什麼這些設計更耐看?



4. 款式一致

除了上述能為圖片加分的選項以外,還有一點,就是當多圖片使用時,一定要注意款式的一致。

七、 延伸思考:技術思考

——

已經簡述很多關於圖片處理的技巧,另外還有一個很重要的概念,我也將此放在這裡進行延伸思考。吉薩金字塔和達芬奇傳世畫作《蒙娜麗莎》有什麼關係?它們都是基於黃金分割設計!

黃金分割是一個數學比例。我們在大自然中很容易找到這樣的比例,當它用於設計時,能創造出有生命力的、純天然的視覺作品,愉悅我們的眼睛。


為什麼這些設計更耐看?


無論是設計或是攝影構圖,合理使用黃金比例可以讓你的作品更美觀,因為這套系統已經是被歷史驗證過,超越感覺的一般性方法。

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


為什麼這些設計更耐看?



但是我們適用設計軟件裡並沒有這一選項,自己動手做的話明顯也不是很合適。這時候,我們就要使用到萬能的插件。

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


為什麼這些設計更耐看?


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

● 插件一:Divine Proportions Toolkit

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


為什麼這些設計更耐看?


總結


具有說服力的畫面是什麼樣子呢?或者換一種說法,什麼是耐看的畫面?應該就是能讓人產生行動的效果,注意『行動』這兩個字很重要。

什麼樣的情況會產生行動呢?我們可以利用眼神,動作以及趨勢塑造有動作感的畫面。一般,有感覺的設計也會緊緊遵循這樣的原則,另外我們對這套理論進行實踐,得出快速提升圖片魅力的方式,即發現問題,列舉課題,評價方案和實施策略。



做過1萬個小時設計,讀過1千本書,分享與你相關的設計故事



分享到:


相關文章: