首頁

P了兩個圓,價值800萬?

seo達(dá)人


下面這兩個圓大家可能不熟悉,這個是萬事達(dá)的最新logo,就是由兩個圓組成,價值800萬。那為什么兩個圓形能夠價值這么多,今天跟大家聊聊,幾何在整個設(shè)計中的運(yùn)用,怎么讓你的圖形更高級。

圖片

圖片來源于網(wǎng)絡(luò),版權(quán)歸作者所有

 

一、幾何簡史課 

歐幾里得常被稱為“幾何之父”,因為他寫了一本叫《幾何學(xué)》的書,這是數(shù)學(xué)史上最有影響力的著作之一。

圖片

幾何圖案來源于幾何學(xué),幾何學(xué)是數(shù)學(xué)中對形狀和線與面之間關(guān)系的研究。圖案被定義為“重復(fù)的裝飾設(shè)計”。

在設(shè)計中,幾何圖案反復(fù)使用形狀和線條來創(chuàng)造引人注目的設(shè)計。幾何圖案非常適合用于設(shè)計,因為從本質(zhì)上講,我們的眼睛自然會被它們吸引。通過將幾何圖案與合適的顏色相結(jié)合設(shè)計引人入勝的視覺內(nèi)容。

圖片

世界內(nèi)外的一切都可以通過數(shù)學(xué)來推斷和理解,這正是許多文化將幾何視為神圣的原因,從一開始就被人類直觀地使用和理解。

因此,幾何形狀和圖案在藝術(shù)和設(shè)計中具有很大影響力。從伊斯蘭藝術(shù)到包豪斯運(yùn)動、立體主義、裝飾藝術(shù)等等,幾何圖案一直并將繼續(xù)在設(shè)計中發(fā)揮關(guān)鍵作用。

圖片

我們可以將幾何設(shè)計用于從品牌到產(chǎn)品、插畫、網(wǎng)站、應(yīng)用程序設(shè)計等等的任何設(shè)計中,下面帶大家看一些幾何圖案在不同設(shè)計環(huán)境中的運(yùn)用案例。

 

二、幾何在設(shè)計中的運(yùn)用 

1、平面設(shè)計

圖片

雜志封面設(shè)計結(jié)合了三角形和充滿活力的各種配色,創(chuàng)造出炫酷的圖案,色彩繽紛的效果。

圖片

平面設(shè)計師 Atul Charde 設(shè)計的長途汽車,展示了幾何圖案可以很好的吸引人的注意力。Charde 還結(jié)合了黃色、橙色、海軍藍(lán)和白色的配色,創(chuàng)造出一種正在忙碌行駛的感覺,很生動形象的體現(xiàn)了長涂汽車的概念,十分契合產(chǎn)品。

圖片

幾何設(shè)計也非常適用于包裝上面,用簡單的形狀組成復(fù)雜的圖案來包裝產(chǎn)品。

圖片

這瓶酒使用簡單的線條來創(chuàng)造一個有趣的幾何圖像。這是一個很基本的設(shè)計方法,但通過巧妙地結(jié)合顏色填充幾何形狀,設(shè)計感就出來了。一個復(fù)雜的圖案就是由一個簡單的圖形組成的。

圖片

圖片

盧塞恩紐巴德俱樂部音樂會系列海報,用繪畫與幾何的結(jié)合,表現(xiàn)了音樂的非常規(guī)和自由特點。

閃電形、星形、三角形表達(dá)音樂的激烈抑揚(yáng)頓挫感;圓形、傳達(dá)音樂的平靜、緩和感;自由筆觸有序直線,傳達(dá)音樂的有序、綿長感。

 

2、品牌

圖片

Nymble 健康套盒品牌視覺提取品牌首字母“N”與人奔跑時的姿態(tài)結(jié)合,雖然是簡單的幾何線條和點,卻非常有動感,簡潔而傳神。

圖片

圖片

圖片

品牌延展部分是對品牌標(biāo)志更進(jìn)一步的理解和演繹,沿用了標(biāo)志中的點、線元素,通過對點與線的位置、距離、粗細(xì)、大小的調(diào)整,構(gòu)建出一整套可變的網(wǎng)格圖案。

圖片

圖片

涉谷時裝周2020-2022的視覺設(shè)計用圓形幾何化的視覺語言,將SFW2020組合成圖標(biāo),并拆分重組成為輔助圖形,運(yùn)用到畫面整個體系中。從2020-2022,通過不同視覺展現(xiàn)不同的視覺風(fēng)格,2022的工業(yè)鬼馬感、2021休閑時尚感、復(fù)古都市感。

圖片

圖片

玻璃質(zhì)感和幾何圖形的結(jié)合完美詮釋主題,體現(xiàn)宏大精致的美。元素簡潔,通過細(xì)膩的質(zhì)感增加豐富的對比。

圖片

圖片

這是一款國外的披薩品牌的logo設(shè)計,特別之處在于logo的名字和圖形看似分開,實則是用一個郵票作為一個整體。圖形的人物是一個由幾何組合,用黃金比例切割出年輕媽媽的樣子。

圖片

圖片

圖片

這是國外的一個茶飲品牌的包裝設(shè)計,插畫的人物服裝和植物元素是當(dāng)?shù)厝说奶攸c,設(shè)計師將這些具有豐富變化的民俗服裝用幾何圖形有規(guī)律的重新組合。

通過將復(fù)雜的事物用幾何有規(guī)律的概括后,再通過合適的配色,呈現(xiàn)的整體設(shè)計感很強(qiáng)。同時在文字以及裝飾框上,也統(tǒng)一用了這種具有民俗風(fēng)情的風(fēng)格,在字體上也會用幾何作為流蘇一樣去代替字母一部分的筆畫。

 

3、插畫

圖片

圖片

簡單幾何元素拼綴出的人物、場景,色彩上深淺深的對比,圖形上方圓方對比增添了畫面的呼吸感和視覺沖擊力。

圖片

圖片

這種風(fēng)格的插畫區(qū)別于以往的插畫風(fēng)格,整體是幾何體和不規(guī)則形狀組合而成,噪點的運(yùn)用和顏色的搭配完美,夸張的手法,大膽的設(shè)計讓它脫穎而出。

圖片

無論是簡單的圖案還是復(fù)雜的圖案,幾何設(shè)計都可以完美地制作出引人注目的壁畫。

 

4、網(wǎng)頁設(shè)計

圖片

圖片

這個網(wǎng)頁運(yùn)用極細(xì)的線條,規(guī)則的塊面,將界面的功能展示區(qū)域分明,簡約不失嚴(yán)謹(jǐn),傳達(dá)出品牌的專業(yè)度。

圖片

B端設(shè)計的頁面采用圓角卡片,以及大規(guī)模幾何體使用,界面立體感和層級感比較突出,立體幾何插畫的表現(xiàn)效果很好可以在UI中運(yùn)用。

圖片

配圖用三維幾何體,搭配很年輕化的色彩風(fēng)格,顯得畫面感很強(qiáng)。整體色調(diào)很舒服,界面干凈整潔,很年輕。

圖片

圖片

這組網(wǎng)頁設(shè)計首屏融入幾何元素包裹著主圖,靈動多變的幾何裝飾打破慣性的設(shè)計思維,創(chuàng)造出新奇的視覺效果。

圖片

圖片

這個體育網(wǎng)頁頭部使用紅色和黃色,運(yùn)用對比色,視覺沖擊力強(qiáng),使用三角形和異形,簡單的幾何圖形,營造頁面的空間感。

圖片

圖片

背景采用柔和的微漸變點綴淡淡幾何圖形,既不會喧賓奪主分散用戶的注意力,又可以避免純色背景的單調(diào)。

 

5、UI設(shè)計

圖片

這個綠植商店頁面采用大圓角搭配圓潤的線性icon,用幾何拼接形式表現(xiàn)插畫,整體風(fēng)格自然簡潔。

圖片

這個醫(yī)美產(chǎn)品的UI設(shè)計,按鈕和產(chǎn)品的背景沿用同類型的幾何圖形,類似超級符號的存在,加深品牌印象的同時,打破常規(guī)背景圖的形態(tài),使頁面充滿生機(jī)活力,貼合醫(yī)美產(chǎn)品賦予肌膚青春活力的初衷。

圖片

從畫面感來看,有點像游戲或者娛樂產(chǎn)品風(fēng)格的界面。背景用很多幾何元素符號,畫面感很活躍。

圖片

這組啟動頁設(shè)計,通過人物和幾何圖形穿插,突出人物主體,拉開主體和幾何形的層次感;并運(yùn)用色彩疊加的方式,畫面更具青春、趣味和視覺沖擊力。

圖片

圖片

這是一款體育運(yùn)動場館預(yù)訂的產(chǎn)品,用幾何形狀表達(dá)不同的運(yùn)動,簡約又生動,也與整體高級感匹配。

圖片

幾何插畫設(shè)計風(fēng)格,頭部卡片像一個抽象的人物,整體風(fēng)格偏年輕化,卡片和背景生動有趣不單調(diào),顏色多彩充滿活力。

 

三、最后 

今天的分享就到這里,期待每天一個小知識點,可以給你的設(shè)計路上增加一點點能量。

 

原文地址:我們的設(shè)計日記(公眾號)

作者:叮當(dāng)貓

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》P了兩個圓,價值800萬?

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



必看的線上圖片使用攻略

純純

1-線上圖片的四大類別

2-線上圖片常見的五種處理方式

3-線上圖片使用的五大要點

4-總結(jié)



一、線上圖片的四大類別



1、 信息圖片:


在頁面中單獨存在的圖片,以圖片為主要元素傳達(dá)給用戶有效信息。


例如好好住APP,它在“看圖板塊”中就使用了信息圖片,重點表現(xiàn)圖片的信息,周圍無任何干擾元素或輔助信息元素。

 

2、 背景圖片:


背景圖片可以用于單個元素,也可以用于整體畫面,主要作用于營造氛圍。


單個元素:例如嘀嗒出行的“優(yōu)惠券板塊”,把插畫圖片應(yīng)用在單個卡片中。


整體畫面:例如網(wǎng)易云音樂的“聽歌頁面”,它就把歌曲封面的圖片作為頁面整體的背景。(圖片進(jìn)行了模糊處理)

 


3、 Banner圖:


作為導(dǎo)航入口,引導(dǎo)用戶點擊進(jìn)入詳情頁面,在各應(yīng)用都普遍使用。


Banner圖作為最常見的圖片使用形式之一,大家再熟悉不過了,它可以出現(xiàn)在APP中的各個界面中,如:首頁、個人中心、運(yùn)營活動頁等等,造作新家APP的首頁就用到了banner圖。


 

4、 信息配圖:


作為文字的輔助元素,圖片的含義需要和文字相符合才能更好地輔助傳達(dá)文字的意思,反之會讓用戶覺得困惑。



二、線上圖片常見的五種處理方式


1、圖片遮照:


1-1黑色遮照:

圖片與文字之間加黑色到透明度(10-60%)的遮罩,保證文字內(nèi)容區(qū)域在黑色區(qū)域,目的是為了能讓用戶看清文字。

 

1-2顏色遮照:

根據(jù)圖片整體的色調(diào),在圖片上加與圖片色調(diào)統(tǒng)一的顏色遮照,保證文字的可識別性,不影響圖片的正常顯示。 


1-3漸變遮照:

圖片與文字之間加透明度的漸變遮罩,讓文字顯得更加清晰,使畫面過度更加協(xié)調(diào)。


 

2、背景模糊:

在很多場景下我們都會采用到封面圖模糊處理后作為背景圖的方案,為保證信息能夠清晰顯示會在背景上加一個深色半透明蒙層。半透明層可以取黑色、深灰色、背景顏色(深),透明度為(25%-40%),它們呈現(xiàn)出來的效果都各有不同,我們可以根據(jù)不同的場景選擇不同的方案。


3、圖片圓角:

圖片圓角的使用也是十分有講究,根據(jù)不同的產(chǎn)品屬性去設(shè)定氣質(zhì)相符的圓角設(shè)計。


小圓角或直角:視覺印象是硬朗、高冷、具有攻擊性的,多用于時尚、高端、沖突感強(qiáng)烈的設(shè)計中;


大圓角:視覺映像是有親和力,柔軟,安全的,多用于母嬰產(chǎn)品、二次元產(chǎn)品、娛樂性強(qiáng)的設(shè)計中。

 

4、內(nèi)容出界:

在設(shè)計banner圖時我們?nèi)绻皇窃诳蚩蚶镒鲈O(shè)計,有時候未免顯得太呆板,我們可以突破畫框讓內(nèi)容溢出,營造更大的氛圍,近而使整個畫面更具有沖擊力。

 

 5、投影

圖片投影的方式一共分為7大類別,分別為:普通投影、等高線投影、矢量投影、圖層模糊投影、多層投影、移軸模糊投影、手動投影。(投影制作步驟可查看我之前發(fā)布的文章《七種投影詳細(xì)解析》)。而在線上運(yùn)用的最多的就是:普通投影、等高線投影、圖片模糊投影,效果如下:



三、線上圖片使用的五大要點


1、文件大小

對于位圖,我們在線上場景中最常使用的文件格式無非是PNG與JPEG(在特殊情況下會用到動畫GIF)。

 

PNG圖片:

無損文件格式,我們UI設(shè)計師出圖的首選,不會輕易造成細(xì)節(jié)像素模糊或輸出文件變色的情況,并且支持alpha通道(透明度)。所以對于高質(zhì)量圖像文件建議輸出為PNG格式,不過正因為像素?zé)o損,所以PNG文件大小相對較大,在特定情況下可以選擇8位處理的做法來減小文件大小,在保證盡可能縮小文件大小的同時,也不會降低圖像質(zhì)量。

 

JPEG圖片:

JPEG格式會損失掉圖片中的一些像素細(xì)節(jié),所以輸出JPEG通常會比輸出PNG的文件大小更小,適用于對于圖片質(zhì)量要求不過高的場景。并且JPEG格式支持對文件質(zhì)量進(jìn)行二次壓縮,我們可以選擇使用JPEG格式質(zhì)量壓縮的方式,在文件大小和圖像質(zhì)量之間找到平衡。


2、比例


UI界面中常用的圖片比例是1:1、3:2、4:3、16:9。


1:1

1:1是傳統(tǒng)的120膠片畫幅,也叫大畫幅,因為相機(jī)結(jié)構(gòu)和其他一些原因?qū)е铝四z片是方形的,此比例更容易將構(gòu)圖規(guī)整的簡單,能突出主體圖片,通常用于頭像、電商圖片等。


3:2

3:2這個尺寸源于135膠卷的比例,采用這一比例并不是因為它是黃金比例,而是由相機(jī)的像場大小決定的,這個尺寸運(yùn)用到線上時適用于以內(nèi)容為主的應(yīng)用。

 

4:3

4:3是隨著攝影的發(fā)展,微單的出現(xiàn)而誕生的,3:2尺寸與4:3尺寸極為相似,在做設(shè)計時很容易混淆,不過在同屏顯示中,4:3的圖片內(nèi)容顯示略大于3:2,所以4:3尺寸更適用于以圖片為主或圖片與內(nèi)容比重相同的應(yīng)用。

 

16:9

16:9是根據(jù)人體工程學(xué)的研究,發(fā)現(xiàn)人的兩只眼睛視野范圍是一個長寬比例為16:9的長方形,所以電視、顯示器行業(yè)根據(jù)這個的黃金比例尺寸設(shè)計產(chǎn)品。這個尺寸的圖片在線上運(yùn)用于視頻播放的圖片顯示。


3、柵格系統(tǒng)


柵格系統(tǒng)以規(guī)則的網(wǎng)絡(luò)陣列來指導(dǎo)和規(guī)范版面布局以及信息分布,而UI設(shè)計里常用的柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展起來,柵格系統(tǒng)有時候也稱為網(wǎng)格系統(tǒng)。


柵格系統(tǒng)在圖片的排版布局、尺寸設(shè)定方面給了設(shè)計者直觀的參考,它讓圖片變得有規(guī)律,從而減少了設(shè)計決策成本,使整個畫面更加具有條理,讓內(nèi)容的可讀性變高。

 

移動端常用的柵格系統(tǒng)最小單位為4px(@1x)或3px(@1x),那么我們來看看airbnb是如何用3px(@1x)的柵格系統(tǒng)來確認(rèn)banner的尺寸大?。╯ketch軟件-顯示-布局,就可以打開柵格系統(tǒng)布局面板):


如上圖,airbnb的柵格系統(tǒng)布局設(shè)置總寬為328px(總寬為中間6列+4個間距寬度),偏置為24px(左側(cè)初始偏置像素),列數(shù)為6(一共分為6列),列寬45px(列數(shù)的寬度),間距寬度為12px(當(dāng)不能除正數(shù)時,會自動把間距縮小1px,所以會看到有些間距為11px,有些間距為12px)


當(dāng)設(shè)定好柵格系統(tǒng)后,我們就可以很好的得出圖片的寬度:158px(45+11+45+12+45)。再根據(jù)圖片比例的尺寸3:2,我們就可以算出圖片的高度為:106px(158*3x2),所以圖片的像素為:158px X 106px。根據(jù)相同的方法,我們可以用柵格系統(tǒng)+尺寸比例得出更多的尺寸大小。(注:不管是3px或4px柵格,都會出現(xiàn)除不整的情況,如上圖中的11px,這個不用擔(dān)心,不影響大局。)


4、倍率


在對banner圖進(jìn)行輸出時要考慮倍率的大小,每個產(chǎn)品會根據(jù)產(chǎn)品的特性來決策輸出的倍率,有些產(chǎn)品用二倍圖輸出,有些產(chǎn)品用3倍圖輸出,各有利弊。


標(biāo)準(zhǔn)分辨率的顯示器具有1:1的像素密度(即@1x),其中一個像素占位一個點。高分辨率顯示器具有更高的像素密度, 2倍或3倍的比例系數(shù)(即@2x、@3x)。當(dāng)1倍的位圖放在2倍或3倍的尺寸下時,就會出現(xiàn)圖片損傷現(xiàn)象(失真),那么我們到底該用幾倍圖去制作banner圖呢?


方案一:兩倍圖輸出

優(yōu)點:導(dǎo)出文件比@3x小,可平衡圖片質(zhì)量和線上文件大小的一個優(yōu)質(zhì)方案。

缺點:雖然@2x可向下適配@1x,但適配@3x放大后圖片會微微模糊,所以我們?nèi)绻聾2x導(dǎo)出圖片,那么banner內(nèi)的文字不能過小或過于密集、粗曠,畫面中也不能出現(xiàn)過多的效果,不然會看出明顯的模糊痕跡(如下圖的頂部文字與按鈕文字放大后就有明顯的模糊痕跡)


方案二:三倍圖輸出

優(yōu)點:@3x可向下適配@1x與@2x,能夠很好的保證不同尺寸下的圖片質(zhì)量,對視覺要求高的項目就必須用3倍圖來設(shè)計。

缺點:輸出的文件相對較大。


5、圖片適配


圖片的適配類型非常多,對于不同的布局適配場景我們選擇的適配方案也不同,圖片適配一共分為3大類:智能適配、設(shè)計師制圖適配、用戶裁剪適配。


1、智能適配:

簡單來說智能適配是指通過后臺代碼的約束對上傳的圖片進(jìn)行智能匹配,匹配內(nèi)容包含圖片大小、圖片尺寸以及圖片的展現(xiàn)方式。


圖片大?。嚎梢韵拗粕蟼鲌D片的最大尺寸。

圖片尺寸:可以限制圖片的長(寬)最小值,也可以限制圖片的精準(zhǔn)尺寸。

圖片展現(xiàn)方式:可以設(shè)定圖片在容器中的呈現(xiàn)方式,下面是最常見的8個圖片呈現(xiàn)方式。


*智能適配之Feed流圖片適配

當(dāng)你無法保證用戶發(fā)幾張圖片,無法預(yù)估圖片的比例時,我們就可以去設(shè)定它相應(yīng)的規(guī)則使之適配。


*1、單張布局:

不管用戶上傳幾張圖片,F(xiàn)eed流中以一張大圖進(jìn)行展現(xiàn),使用大圖布局的圖片適配方式一般有兩種,一種是給予圖片一個容器大小,讓其內(nèi)容全部展示;另一種是按照圖片的上傳比例而變化。


*1-1給予容器大小

我們可以給予圖片一個容器尺寸(如:300X300px),無論圖片有多大都不能超過此容器,為了讓圖片內(nèi)容全部展示出來且不變形,我們可以讓圖片保持正比例縮放,使長邊能完全顯示出來(左上或中心區(qū)域)。這一類的適配更偏向于以內(nèi)容為主的產(chǎn)品,下面是常用的兩種適配方案:


*1-2隨圖片比例而變化

如果你想保證圖片最佳的大圖預(yù)覽效果,那么就可以采用隨圖片比例而變化的方案,當(dāng)用戶上傳不同比例的圖片時,圖片展示的高度與寬度會根據(jù)我們提供比例縮放。采用該適配方式能將圖片信息表達(dá)完善,圖片占用空間大,適合圖片質(zhì)量高,這一類的適配更偏向于以圖片為主的應(yīng)用。


要做這類適配時我們首先要設(shè)定裁切的比例,裁剪比例一般設(shè)置為常用的圖片比例 1:1、4:3、3:2、16:9。我們上傳的圖片可以根據(jù)圖片的比例進(jìn)行自行匹配。當(dāng)圖片越接近正方形則選擇1:1,當(dāng)圖片長寬比例越大則選擇16:9。


用戶上傳的很多圖片并不是標(biāo)準(zhǔn)比例,如果存在多余像素,那么可以采用保持圖片正比縮放,從圖片中心區(qū)域展示,根據(jù)比例一共可以分為7種展現(xiàn)方式:


我們可以看到上圖,根據(jù)不同比例的尺寸展現(xiàn)出來的頁面占比也是不同的,如果產(chǎn)品對頁面承載信息量有較高要求,那么可以去除16:9、3:2、4:3的縱向尺寸。



*2、瀑布流:

瀑布流的圖片適配方法需要規(guī)定圖片比例,并且每個比例的容器大小是固定的,呈現(xiàn)方式也是保持圖片正比縮放,從圖片中心區(qū)域展示。


*3、宮格:

宮格式布局簡單來說就是有規(guī)律的方形布局(1:1尺寸),宮格布局的形式多種多樣可以是九宮格、四宮格、三宮格,下面以較為復(fù)雜的九宮格的適配為例,當(dāng)然最好的參考或者最常見的就是微信朋友圈。


2、設(shè)計師制圖適配

對于特殊頁面的圖片展示,我們?yōu)榱顺尸F(xiàn)最好的視覺效果,需要設(shè)計師對圖片進(jìn)行單獨尺寸的適配設(shè)計,并且輸出多個尺寸的圖片進(jìn)行上傳。

例如在適配開屏頁時就對其進(jìn)行了單獨的制圖適配,想要讓二倍圖適配三倍圖,最簡單的方法就是把畫面的上下區(qū)域留出更多的空間,中心畫面放大10%,可操作按鈕放置畫面安全區(qū)域:


如果設(shè)計師不進(jìn)行制圖適配,把適配交給程序處理,那么最終呈現(xiàn)的圖片就會顯得非常糟糕。如下圖1的強(qiáng)行適配,使得整個banner比例非常不協(xié)調(diào),讓人看了后覺得十分廉價;下圖2則稍微好一點,雖然保證了畫面的視覺中心,但是整體畫面看起來過于飽滿,沒有任何呼吸感,并且“點擊參與”按鈕過于靠下,容易與home指示器造成誤操作。


3、用戶裁剪適配

當(dāng)用戶想要呈現(xiàn)某些重要信息或識別性信息時,就可以把主動權(quán)交給用戶,讓用戶進(jìn)行自行裁剪,如頭像、身份證信息。用戶上傳圖片后,我們可以給用戶設(shè)定一個默認(rèn)裁剪區(qū)域,當(dāng)用戶不想進(jìn)行繁瑣時可以直接默認(rèn)系統(tǒng)裁剪,如上傳頭像,我們可以把默認(rèn)區(qū)域設(shè)置為圖片的中心區(qū)域。


小紅書在選擇頭像時默認(rèn)裁剪區(qū)域是圖片的中心區(qū)域1:1圓形,并且圖片是短邊顯示,無論什么比例的圖片都能全部展示在選區(qū)內(nèi),當(dāng)你想要把圖片脫離到選區(qū)外,系統(tǒng)會自動使圖片彈回。未選擇狀態(tài)是選區(qū)內(nèi)圖片高清,選區(qū)外圖片模糊,選擇狀態(tài)則是選區(qū)內(nèi)圖片高清,選區(qū)外圖片黑色不透明遮罩(高透明度)。


微信在選擇頭像時默認(rèn)裁剪區(qū)域是圖片的中心區(qū)域1:1正方形,圖片一樣是短邊顯示,也不能讓圖片脫離到選區(qū)外,但是能拖動并放大縮小選區(qū)框。未選擇狀態(tài)是選區(qū)內(nèi)圖片高清,選區(qū)外圖片有黑色不透明遮罩,選擇狀態(tài)則是圖片內(nèi)容全部高清呈現(xiàn)。



作者:黑獅力   來源:站酷

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



運(yùn)營設(shè)計中的視覺動線

資深UI設(shè)計者

我們的作品信息的傳遞效率高嗎?
什么樣的設(shè)計是清晰有效的?
想要搞清楚這些問題,首先你得了解視覺動線這個概念。


本文3200字,主要分為三個部分,閱讀時間約15分鐘。



—————   

      動線


動線一詞最早是源自建筑與室內(nèi)設(shè)計領(lǐng)域。指的是人在某個空間內(nèi)的移動軌跡。例如住宅空間的動線設(shè)計,我們會經(jīng)常聽到動靜分離的概念,講的就是動線的設(shè)計。住宅動線的設(shè)計目的是提高居住體驗,減少在室內(nèi)的重復(fù)行走軌跡。


例如家務(wù)動線的設(shè)計,從進(jìn)門到廚房再到生活陽臺,是家務(wù)勞動中最經(jīng)常行走的路線。通過設(shè)計動線,減少家務(wù)勞動的行走,就能提高家務(wù)勞動的效率。在這里動線越短,效率越高。





在商業(yè)建筑領(lǐng)域,動線的設(shè)計也被頻繁的運(yùn)用。例如店鋪的顧客動線設(shè)計,通過興趣區(qū)吸引顧客,引導(dǎo)顧客盡量多的瀏覽店鋪的商品,從而提高銷售額。商業(yè)空間的動線設(shè)計講究的是坪效(每平米的銷售額),動線的設(shè)計更側(cè)重迂回。




還有比如動物園、游樂場的路線設(shè)計,就涉及到游玩順序的體驗,以及緩解擁堵等問題。因此動線設(shè)計的目的在于提高效率,在家居和商業(yè)空間領(lǐng)域已廣泛應(yīng)用。而在視覺設(shè)計領(lǐng)域,也存在動線的概念。



————————

      視覺動線


大家在生活中有沒有遇到這樣的情況,你要找的東西就在眼前,但是找了好久仍然沒有找到。


人眼之所以能看清物體,是因為視網(wǎng)膜中央有個很小的區(qū)域叫做中央凹,這個區(qū)域集中了大多數(shù)的視錐細(xì)胞,專門負(fù)責(zé)視力的高清成像。


但是中央凹的面積極小,高清區(qū)域有限。人眼只有在10度視角范圍內(nèi)才最為敏感,30度范圍內(nèi)可以分辨出顏色。這就導(dǎo)致人眼可視范圍有限,一次只能產(chǎn)生一個視覺焦點。因此人眼在觀察物體時,沒辦法一下子看到所有信息,需要逐個地移動搜尋,這種視線的移動過程,就構(gòu)成了視覺動線


例如我們在閱讀文章時,一般是從左到右逐行地閱讀,這個閱讀順序就構(gòu)成了視覺動線。如果文字的排版過于跳躍,沒有規(guī)律,就會造成視覺焦點過多動線混亂的情況,容易出現(xiàn)閱讀障礙,大大影響了閱讀體驗。





在視覺設(shè)計中動線的設(shè)計尤為重要,例如下圖的banner,左圖動線混亂主次不清。右圖則能清晰地引導(dǎo)觀眾從左到右閱讀信息,降低無效的閱讀成本。
因此構(gòu)建合理有效的視覺動線,將有助于打造良好的閱讀體驗,能更高效地讓用戶獲取到信息,避免用戶的流失。








我們以運(yùn)營設(shè)計為例,來討論一下常見的動線類型。在運(yùn)營設(shè)計中,banner和活動專題是最為常見的,這類型的設(shè)計,畫面往往很有感染力,內(nèi)容豐富。這里介紹的動線,是指某張banner或者活動頭部同屏類的動線軌跡。一般我們可以將常見的動線分為這幾個類型:直線型、匯聚型、發(fā)散型、扇型、以及Z型。


———————

      直線型


直線型動線顧名思義,就是在一條路徑上依次展示信息元素。我們以banner為例來看看如何應(yīng)用。



在分析動線軌跡的時候,我們應(yīng)該逐一地尋找視覺焦點。這個案例中我們第一眼看到的是左側(cè)的標(biāo)題,我們稱第一眼看到的焦點為視覺入口點;緊接著視線轉(zhuǎn)移到了右側(cè)的龍身上。這就構(gòu)成了一條清晰的從左到右的視線軌跡。


banner中只在標(biāo)題和火焰上使用了色彩,其他背景使用較灰的色系,這使得視覺焦點突出,動線清晰。



2.1.1動線角度  

直線型動線在運(yùn)用的時候,不一定都是從左到右的橫向角度。常見的有對角線以及豎線的形式。


例如左圖這張banner就是對角線式的動線軌跡。對角線具有傾斜的角度,容易塑造出速度感。因此這樣的動線軌跡往往畫面更加的有動感。而豎向的動線一般用在窄長比例的畫面中,例如手機(jī)端的運(yùn)營活動。右圖的活動頁面就構(gòu)成了從上到下,從標(biāo)題到主體人物的動線瀏覽軌跡。



2.1.2視覺焦點個數(shù)  

直線型動線中,人們的瀏覽軌跡是根據(jù)視覺焦點的位置進(jìn)行的。在直線上依次排列視覺焦點,但并不是焦點越多越好,一般2-3個視覺焦點較為合理。較多的視覺焦點反而影響閱讀效率。 



———————

      匯聚


匯聚型動線是將用戶的視線聚焦到中心的一種動線軌跡。一般有多個視覺入口點來引導(dǎo)用戶的視線。




例如下面這張banner,我們的視線會先被左右兩側(cè)英雄所吸引,延著他們沖刺的方向視線轉(zhuǎn)移到了中間的標(biāo)題,這就構(gòu)成了匯聚型的視覺動線。匯聚型動線在元素擺放上一般具有引導(dǎo)性,最終目的是讓觀眾的視線聚焦到中心,以突出中心的標(biāo)題或者主體信息。



匯聚型動線的視覺入口點一般在2個以上,例如下面這張活動頭部,通過兩側(cè)的煙霧塑造視覺入口點,引導(dǎo)觀眾視線匯聚到中心。是一種側(cè)重突出中心內(nèi)容的動線類型。




———————

      發(fā)散


匯聚型動線是由四周向中心聚集的動線軌跡,而發(fā)散型動線則相反,它是由中心向四周轉(zhuǎn)移的動線軌跡。視覺入口點在中心,并逐步向四周擴(kuò)散的動線類型。



例如下面這個暑假活動頁面,就是視線由中心往四周轉(zhuǎn)移的發(fā)散型動線。我們第一眼會被醒目的標(biāo)題所吸引,這就是視覺入口點。之后視線逐步地往兩側(cè)移動,依次看到人物、書本、臺燈以及兩側(cè)的云朵。構(gòu)成了漸進(jìn)式的視覺瀏覽軌跡。



而下面這個四周年的活動,最醒目的也是標(biāo)題,它將觀眾的視線聚焦到了中心,之后逐步向四周發(fā)散。按照放射的方向,依次瀏覽了人物、按鈕、獎勵、圓球等信息。


可以看到發(fā)散型動線一般運(yùn)用在有較多信息元素的畫面中,瀏覽順序?qū)訉舆f進(jìn),比較適合對信息元素進(jìn)行歸類閱讀。


4.1入口點位置 

發(fā)散型動線一般是由中心往四周發(fā)散,視覺入口點一般在中心線位置。不過入口點也有位于邊緣的情況。例如下面這張banner,作為視覺入口點的人物位于右下角,通過手勢逐步引導(dǎo)觀眾閱讀標(biāo)題和玩具。是一種單邊發(fā)散的動線類型。



——————

      


扇型動線一般會在中心線上塑造一個視覺入口點,之后保持著至上而下、從左到右的視線軌跡,這種軌跡就好比一把扇子。



例如下面這個手機(jī)端活動,我們第一眼會被可愛的小狗頭部所吸引,之后視線往下,看到主標(biāo)題和副標(biāo)題,并按從左到右的視線軌跡閱讀了標(biāo)題。這就構(gòu)成了扇型的動線軌跡。


可以看到扇型的動線軌跡保持了從上到下的結(jié)構(gòu)關(guān)系,一般用在畫面較長的版式中。容易塑造至上而下、內(nèi)容由少及多的閱讀關(guān)系。



—————

      Z


Z型動線是最為常見的類型,它遵循了人們從左到右的閱讀順序習(xí)慣。并且在長頁面中可以一直做反復(fù)的延續(xù)。




例如下圖的活動頁面,我們的閱讀順序就是從左到右逐行地掃視關(guān)系。先是主標(biāo)題,再是副標(biāo)題,最后是木牌上的信息。這構(gòu)成了循環(huán)的Z型動線軌跡。此類動線比較適合應(yīng)用于文字類信息較多的畫面中。







在動線的設(shè)計過程中,比較難的是如何去引導(dǎo)信息之間的先后關(guān)系。這里介紹幾種便捷的技巧,如何更有效的來設(shè)計動線。


————————

      閱讀順序


第一種就是根據(jù)人們的閱讀習(xí)慣來設(shè)計,也就是從左到右,至上而下的順序。因為人的眼睛,左右轉(zhuǎn)動所看到的角度和區(qū)域,要比上下轉(zhuǎn)動所看到的要廣闊的多。從左到右也是人們通用的閱讀習(xí)慣和標(biāo)準(zhǔn),橫向閱讀也更為舒適。在設(shè)計中我們只需要按照從左至右自上而下的規(guī)律來擺放信息元素,就能保證有良好的閱讀體驗。



——————————

      元素指向性


第二種是利用元素本身的指向性來進(jìn)行引導(dǎo),特別是主體人物的肢體動作、手勢等。例如下圖中的banner就分別通過人物的眼神和手勢進(jìn)行引導(dǎo),讓觀眾的視線轉(zhuǎn)移到標(biāo)題上,構(gòu)成了很強(qiáng)的關(guān)聯(lián)性。讓動線的引導(dǎo)更為自然緊密。




———————————

      引導(dǎo)線的設(shè)計


第三種是引導(dǎo)線的設(shè)計,我們可以通過設(shè)計一些引導(dǎo)性的線條來引導(dǎo)觀眾的視線。常見的有放射線,或者虛擬的線條。

例如下圖1的banner,就是通過左右兩側(cè)放射性的線條來增強(qiáng)引導(dǎo),讓觀眾的視線匯聚到中心,構(gòu)成了匯聚型的動線。圖2除了蜘蛛的視線引導(dǎo)外,標(biāo)題文字的透視處理也構(gòu)建出一條無形的引導(dǎo)線,讓整個視線的引導(dǎo)更加緊密自然。在元素本身指向性不強(qiáng)的時候,引導(dǎo)線的設(shè)計能讓視線的引導(dǎo)更加緊密,有規(guī)律。



—————————

      層級的設(shè)計


第四種是通過層級關(guān)系的設(shè)計來構(gòu)建動線,也是經(jīng)常要用到的方法,構(gòu)建層級關(guān)系的方式有很多,這里只做簡單介紹,有機(jī)會再跟大家交流。


例如下面這個活動頭部,我們的閱讀軌跡是從左到右的關(guān)系,先看到左邊的人物然后是標(biāo)題,最后是右邊的人物,構(gòu)成了直線型的動線軌跡。如果我們拉開人物之間的空間關(guān)系,我們首先會注意到離我們近的物體,依據(jù)遠(yuǎn)近關(guān)系,形成了一條視覺引導(dǎo)軌跡。這就是層級對于視線引導(dǎo)的作用。


通過層級的塑造,可以更有效的來制造動線,引導(dǎo)觀眾的閱讀。



[ 小結(jié) ]


綜上,只要我們能夠理解動線的概念和目的,在排列元素時就能有更清晰的目的性,設(shè)計更有方向感。信息的傳遞是我們構(gòu)建作品和觀眾之間交流的橋梁,也是設(shè)計中首要考慮的因素。有效的信息傳遞才能發(fā)揮設(shè)計最大的價值。以上僅是個人的觀感與體會,希望對大家有幫助。

文章來源:站酷   作者:Tony老司機(jī)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)



字體設(shè)計丨逆反差的知感悟

ui設(shè)計分享達(dá)人

前言

2021年至今「逆反差字體」這個原本偏小眾的字體設(shè)計風(fēng)格,從卷土重來到廣泛應(yīng)用,再次受到諸多設(shè)計師的追捧,一股新浪潮撲面而來。


縱觀它的出現(xiàn)、流行與發(fā)展,身為設(shè)計師,期待本文可以通過對經(jīng)典設(shè)計的客觀分析,蓄力字體設(shè)計領(lǐng)域的經(jīng)驗和技巧,為2022年的創(chuàng)作積累更多靈感。



特征

PART 1.

——————————

商業(yè)的發(fā)展與驅(qū)動

Reverse contrast現(xiàn)在國內(nèi)被稱為「逆反差字體」。設(shè)計師皮特·比亞克(Peter Bi?ak)在2012年發(fā)表的文章中曾提到:這種逆反差字體的設(shè)計是有意通過違背讀者的預(yù)期來吸引注意的,怪異的字母形式在日益飽和的商業(yè)信息世界中脫穎而出。



PART 2.

——————————

打破認(rèn)知 重塑觀感


二十世紀(jì)中,荷蘭著名書法家和設(shè)計師格里特·諾澤爾(Gerrit Noordzij)倡導(dǎo)以書寫走向作為字體設(shè)計的基礎(chǔ),通過習(xí)慣來定義書寫理論:平移和擴(kuò)張。這個邏輯反映出人們對拉丁字母普遍造型認(rèn)知:橫細(xì)豎粗。


豎筆畫在西文字體中起到承重、平衡結(jié)構(gòu)的作用。如果顛倒粗細(xì)對比關(guān)系,使其橫粗豎細(xì),就會造成橫向視覺,讓人產(chǎn)生印錯的感覺,這與傳統(tǒng)的三大主流西文字體的設(shè)計方法也是相差甚遠(yuǎn)。





逆向設(shè)計的規(guī)則營造出視覺上強(qiáng)烈的差異感,比起普通字體更怪誕、夸張,更具有戲劇性和情緒化,讓人印象深刻。它最大的特點是重構(gòu)了拉丁字母的視覺比例。經(jīng)發(fā)展,中文表達(dá)上使用“逆反差”還是生動準(zhǔn)確的。







知丨西字歷史(逆反差字體的思辨)

PART 1-1

——————————

溯源

在商業(yè)廣告海報張貼應(yīng)用中Caslon Italian字體被鑄造出來。這是19世紀(jì)初,工業(yè)革命在金屬活字印刷領(lǐng)域的一個新奇的創(chuàng)新。



1825年,印刷工和社會改革家托馬斯·卡森·漢薩德(Thomas Curson Hansard)把逆反差字體描述為“排版怪物”。


1854年,F(xiàn)rench Antique字體發(fā)行,造型如鐵軌般的字型引來了一種新的風(fēng)格——French Clarendon。它在美國廣告制作中展開了大量生產(chǎn)使用。在獲得市場認(rèn)可后的半個多世紀(jì),它仍在馬戲團(tuán)的海報和西部電影宣傳上被廣泛應(yīng)用。




這組彩色的活字印刷樣本,讓逆反差的設(shè)計風(fēng)格在當(dāng)下更顯復(fù)古。


19世紀(jì),在追求創(chuàng)新的歐洲人看來,逆反差字體的古怪造型仍是離經(jīng)叛道的。而現(xiàn)代設(shè)計師則帶著更多反思和辯證,以非傳統(tǒng)的審美來認(rèn)識這種字體風(fēng)格。



PART 1-2

——————————

遍布世界

20世紀(jì),逆反差字體的浪潮席卷歐洲。瑞士著名的字體設(shè)計師馬克斯·米丁格(Max Miedinger)于 1954年設(shè)計了自己的第一款逆反差字體Pro Arte。大名鼎鼎的Helvetica字體就是由他設(shè)計的。


20世紀(jì)80年代,遠(yuǎn)在亞洲的日本也接受了這股“逆浪潮”。當(dāng)時的動漫和游戲開始風(fēng)靡,熱血與科幻的世界里結(jié)合字體夸張的造型,讓設(shè)計簡直天衣無縫。



1980年,在游戲UI中誕生了世界上第一款逆反差像素字體,讓游戲世界充滿著奇幻感。



這種像素化的設(shè)計方法,如今是很潮的視覺表達(dá)。



80年代,逆反差字體在音樂和書籍等多個包裝領(lǐng)域的應(yīng)用也是繼往開來。





PART 1-3

——————————

今日應(yīng)用

逆反差字體從未真正流行但也從未被拋棄過。如今,除了趣味盎然,又增加了更加瘋狂的風(fēng)格效果,最為典型的是Maelstrom。很多字體的誕生,都證明著逆反差的無無限可能性。




感丨漢字之力(民族文化的養(yǎng)分)

西文有著較為完整的逆反差字體更迭歷史,漢字相對創(chuàng)造力偏弱。中國設(shè)計師在進(jìn)行漢字逆反差設(shè)計的探索時,不妨大膽些,打破局限,從中國書法中吸取創(chuàng)作養(yǎng)分,這是民族文化理解上的考驗,也是對民族文化的尊重。



PART 2-1

——————————

漢字書法與逆反差實踐

大多書法風(fēng)格多變,并沒有嚴(yán)謹(jǐn)?shù)臋M粗豎細(xì)。不過,難得能在清代的漆書中找到橫粗豎細(xì)的規(guī)律存在,它犧牲了部分漢字的視覺結(jié)構(gòu),傳達(dá)出一種鈍拙感和趣味性,這正是漆書的魅力所在。



漢儀2020年1月出品一款漢儀吉金,靈感來源就是漆書,在其基礎(chǔ)之上造型更加現(xiàn)代。



民國時期,在廣告招貼、書籍封面上,也能發(fā)現(xiàn)很多逆反差風(fēng)格的字體設(shè)計。這些都是漢字設(shè)計上逆反差的初次實驗。



PART 2-2

——————————

漢字逆反差的設(shè)計鑒賞

徐學(xué)成是中國第一代字體設(shè)計師,在晚年仍堅持實驗性設(shè)計的嘗試,1998年他主持設(shè)計出華康雅藝體這款逆反差字體。



造字工房也推出過幾款視覺沖擊力強(qiáng)、節(jié)奏分明、充滿藝術(shù)張力的字體:造字工房溢尚真體、彩體、超凡體等。



3type(三言)設(shè)計研發(fā)的基本美術(shù)體,在2020年10月進(jìn)入試用階段。它簡單明了,擁有大膽靈動的字形,是為數(shù)不多的優(yōu)秀中字逆反差字體。


基本美術(shù)體也是本文的靈感來源。曾路過順愛烤肉公司,被牌匾上的字體所吸引,便開始了我對逆反差風(fēng)格字體的探索研究。



日本一度受到美國Fantail(扇形尾)風(fēng)格的西字影響,也展開過一系列的實驗性嘗試。最為典型的是寫研在80年代,推出的「扇尾蘭」字體,它憑借寫研在行業(yè)內(nèi)的影響力得以廣泛的運(yùn)用。




其后,C&G 花束字體、TA-Sigma字體等,這些極具逆反差風(fēng)格的扇尾字形也在市場應(yīng)用中大放異彩。





PART 2-3

——————————

案例賞析

歷經(jīng)200年的鍛造與發(fā)展,逆反差字體如今獲得了越來越多設(shè)計師的青睞,中外設(shè)計有目共睹。



野獸派美學(xué)(The brutalist aesthetic)頻繁的應(yīng)用于當(dāng)代平面設(shè)計和網(wǎng)頁設(shè)計中,逆反差字體有著原始且未經(jīng)雕琢的質(zhì)樸風(fēng)格,往往在簡潔精致的物體上形成鮮明對比,增加設(shè)計內(nèi)容的趣味性。




悟丨關(guān)聯(lián)與創(chuàng)造(結(jié)語)

近兩年,看到了很多比例夸張、造型狂野的驗性字體形式出現(xiàn),這要歸功于酸性設(shè)計的盛行。


酸性設(shè)計,是一種主觀情緒化、美感與欲望交織、傳達(dá)致幻又辛辣酸澀的一種復(fù)雜感受的體現(xiàn)。它強(qiáng)調(diào)出了失調(diào)和混沌共存的狀態(tài),這和逆反差字體的反叛精神極為契合,二者結(jié)合來表達(dá)科幻感與未來主義時情緒飽滿而熱烈。希望本文能幫助更多朋友梳理逆反差字體與設(shè)計風(fēng)格的關(guān)聯(lián)性。




逆反差字體是一場字體設(shè)計的視覺革命??此乒终Q,其實是對視覺設(shè)計規(guī)律的突破與創(chuàng)新,雖“有悖常理”,但并非曇花一現(xiàn),它在字體設(shè)計的歷史上擁有自己長久的舞臺。


任何一個新穎的設(shè)計浪潮,都會影響設(shè)計師的設(shè)計表達(dá)。我們能做的就是感受浪潮、尋找源頭、思考走向,隨時精準(zhǔn)有力的擁抱變化。


藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:站酷 作者:騰訊ISUX
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

資深UI設(shè)計者

本次跟大家聊一個比較純粹的藝術(shù)風(fēng)格,英文原名叫“Minimal Art”,為什么一開始就上英文呢,因為這個風(fēng)格特別多不同的翻譯名,如果只看中文資料有時候你不知道原來不同書籍中談的是同一回事。

我列舉幾個常見的名稱,分別有“減少主義“、”極少主義“、”質(zhì)樸藝術(shù)“、”ABC 藝術(shù)“跟”極限藝術(shù)“等,因為”Minimal“是極少的意思,所以不同的研究者根據(jù)理解作了不同翻譯。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

極限藝術(shù)雕塑作品

這個藝術(shù)的特征是用極少的形式,極簡單的色彩,通過繪畫或者雕塑來表達(dá)一種周密的理念。

“ABC 藝術(shù)“這個名稱要特別說明一下,因為 ABC 是拉丁字母表開始的字母,有簡單初步的意思,而且順口,所以在運(yùn)動初期就有人以這個名字來稱呼。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

極限藝術(shù)繪畫作品

在我們的講述內(nèi)容中,統(tǒng)一以“極限藝術(shù)“來稱呼。

大家對這個藝術(shù)相信比較陌生,因為確實是比較“脫離群眾“,史太濃可以列舉一個歷史作品拉近這種距離,那就是 1957 年在米蘭畫展上誕生的《純藍(lán)》,作者是法國藝術(shù)家伊夫·克萊因(Yves Klein)。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

克萊因作品《純藍(lán)》

這個作品就是一張圖上鋪滿一片由克萊因自己混合的藍(lán)色,其它什么都沒有,但是這個藍(lán)色純凈得直擊心靈,藍(lán)得很理想,很絕對,展出后馬上引發(fā)轟動,克萊因跟他的藍(lán)色都一炮而紅,這個藍(lán)色就是后來大名鼎鼎的“國際克萊因藍(lán)”(International Klein Blue,簡稱 IKB)。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

伊夫·克萊因

說到這里肯定還有朋友不甚了解,不過沒關(guān)系,這個“克萊因藍(lán)”誕生后曾經(jīng)火遍過時尚圈,迪奧(Dior)、紀(jì)梵希(Givenchy)等大品牌都曾經(jīng)推出過“克萊因藍(lán)”色的服裝設(shè)計。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

迪奧曾經(jīng)推出的“克萊因藍(lán)“包包

而在 2021 年時候,這個藍(lán)色又再復(fù)興,被不少設(shè)計師用于商業(yè)設(shè)計,比如知名設(shè)計師潘虎老師不久之前為植物醫(yī)生設(shè)計的產(chǎn)品包裝就采用了這個“克萊因藍(lán)”,效果非常驚艷。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

植物醫(yī)生的產(chǎn)品包裝設(shè)計

克萊因當(dāng)時的這個叫《純藍(lán)》的作品,就屬于一種極限藝術(shù)的一種。

為什么產(chǎn)生極限藝術(shù)


今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

“至上主義”繪畫作品

第二個端點就是在 1960 年代的美國,我們先從這里講會比較好理解,因為這個運(yùn)動其實主要就發(fā)生在美國,在歐洲的影響都不算太大。

如果一直有看史太濃「風(fēng)格列傳」的朋友就清楚,1950-60 年代的美國曾經(jīng)有過“抽象表現(xiàn)主義”(Abstractexpressionism)跟“波普藝術(shù)”兩個重要藝術(shù)運(yùn)動,而極限藝術(shù)的誕生跟兩者密切相關(guān)。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

抽象表現(xiàn)主義風(fēng)格作品

此處順便多說一句「風(fēng)格列傳」的正確“打開方式”,就是每一個篇章的內(nèi)容雖然各自獨立,但應(yīng)該順著時間線順序來看,這樣會更加清楚很多藝術(shù)風(fēng)格的承接關(guān)系。

因為極限藝術(shù)可以說就是針對抽象表現(xiàn)主義與波普藝術(shù)而發(fā)起的。

極限藝術(shù)陣營中的成員認(rèn)為,抽象表現(xiàn)主義僅僅是表達(dá)藝術(shù)家一種瞬間的感覺,太不嚴(yán)肅,而波普藝術(shù)更是刻意要打破藝術(shù)中的高低雅俗,是反藝術(shù)的行為,這兩種運(yùn)動對于藝術(shù)發(fā)展而言都有著高度危害性。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

60 年代的波普風(fēng)格作品

當(dāng)然,這是極限藝術(shù)陣營的看法,所以它的誕生就是要明確的反對前兩者,并消滅他們。

極限藝術(shù)主張藝術(shù)創(chuàng)作必須通過精心設(shè)計,有周密計劃,而且作品必須是通過高度專業(yè)訓(xùn)練形成的結(jié)果,類似抽象表現(xiàn)主義那種隨意性及波普藝術(shù)中的平庸商業(yè)感都是“垃圾“。

有了戰(zhàn)略目標(biāo)隨之就是戰(zhàn)術(shù)考慮,于是極限藝術(shù)的成員們就從 1910 年代時候馬列維奇創(chuàng)作的《白上白》這個作品中找到形式的靈感。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

馬列維奇作品《白上白》

馬列維奇曾經(jīng)說過:藝術(shù)不為政府與宗教服務(wù),不描述行為歷史,僅僅表達(dá)客觀對象,表明簡單的客觀對象可以存在,不依賴于任何東西。

這種理念被極限藝術(shù)者們十分推崇,聽上去也確實非常高端。

因此至上主義這樣極其簡潔的表現(xiàn)形式就成為極限藝術(shù)的首選,由此可見極限藝術(shù)在反對“抽象表現(xiàn)主義”的時候,其實也是從他們的源頭“抽象主義”那里分割出來。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

馬列維奇作品《黑色正方形》

這種關(guān)系真心不好理解,我舉個宗教發(fā)展的例子,比如天主教中曾經(jīng)分裂出東正教,隨后又再分裂出新教,但三者的主張不相同,而且新教是因為反對前兩者而誕生的,大致這樣,也許還不夠貼切。

極限藝術(shù)源自抽象主義還有兩個佐證,就是他們的思想根源除了靠攏馬列維奇,跟“風(fēng)格派”(詳見「風(fēng)格列傳」-風(fēng)格派篇)中蒙德里安(Piet Cornelies Mondrian)的藝術(shù)思想也十分一致,蒙德里安認(rèn)為藝術(shù)品被創(chuàng)作出來以前,必須在藝術(shù)家的頭腦中完全成熟。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

蒙德里安的風(fēng)格派作品

蒙德里安的繪畫藝術(shù)曾經(jīng)被我們收錄進(jìn)抽象主義的范圍進(jìn)行講述,這里要補(bǔ)充一句,就是關(guān)于藝術(shù)流派之間的關(guān)系難以理清,通常每個研究者都只能是無限接近,或者說各自有一套歸納方法。

另一個佐證就是很多極限藝術(shù)家之前就是搞抽象表現(xiàn)主義的,我們后面會介紹一下,這種情況太常見了,比如很多后現(xiàn)代主義設(shè)計師是從國際主義陣營中轉(zhuǎn)變的,超現(xiàn)實主義藝術(shù)家很多從達(dá)達(dá)主義中產(chǎn)生。

我們在談抽象表現(xiàn)主義的時候講過一個分支,就是色域繪畫,其實跟極限藝術(shù)在形式上已經(jīng)非常相似。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

抽象表現(xiàn)主義中的色域繪畫

當(dāng)然,極限藝術(shù)家們指責(zé)抽象表現(xiàn)主義與波普藝術(shù)的作品沒有思考是有些過分與不厚道的,等于說人家混飯吃,也等于一些甲方苛責(zé)設(shè)計師設(shè)計出品不上心一樣,這些其實都無法證明,只能是主觀感受或者是刻意發(fā)難。

那么,極限藝術(shù)在抨擊他人的時候,自身的表現(xiàn)形式有什么特點呢,我們接下來看看。

表現(xiàn)形式與奠基人

其實馬列維奇的至上主義具有很理性的本質(zhì),簡潔圖形的背后都有嚴(yán)謹(jǐn)?shù)臄?shù)學(xué)與幾何思維,這一點就屬于極限藝術(shù)的理論基礎(chǔ)。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

馬列維奇

他跟馬列維奇是老鄉(xiāng),構(gòu)成主義跟至上主義有著師承關(guān)系,意思是構(gòu)成主義的一些思路源自至上主義,兩種風(fēng)格基本上是并行發(fā)展的,而構(gòu)成主義更偏向設(shè)計這個端口多一些。

塔特林當(dāng)時提出過一個藝術(shù)理念,就是:真實的空間感與真實的質(zhì)感。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

工作中的塔特林

這種理念跟至上主義一樣,都尊崇嚴(yán)謹(jǐn)?shù)睦硇灾髁x及數(shù)學(xué)思維,再形成審美品味,而且是一種比較曲高和寡的高度審美化。

塔特林的這個理念后來主要體現(xiàn)在極限藝術(shù)的雕塑作品中。

這里我想到了古龍小說中的小李飛刀李尋歡,他的武功特點就是不管對方怎么厲害,他都是一刀解決,所謂“小李飛刀,例不虛發(fā)”,沒有任何花哨的招式,一招致命。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

《小李飛刀》又名《多情劍客無情劍》

確實是種深不可測的武功,這個時候我們再回看克萊因的《純藍(lán)》也許就是這種味道。

但如果你讓我說清楚《純藍(lán)》到底表達(dá)了什么,坦白說不可能,我不認(rèn)為除了作者之外有人有資格談作品的創(chuàng)作概念,如果談都是扯淡居多,賞析沒問題,可以談感受,或者揣摩作者想法。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

克萊因作品《純藍(lán)》

但有一點可以肯定,克萊因調(diào)出這個顏色花的功夫費(fèi)的心思不亞于愛迪生研究他的電燈泡。

極限藝術(shù)正式的開始被定義在 1959 年,當(dāng)時美國紐約的現(xiàn)代藝術(shù)博物館舉辦了一個畫展,一名 23 歲名叫法蘭克·史提拉(Frank Stella)的青年藝術(shù)家展出一張名為《16 個美國人》的作品。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

史提拉作品《16 個美國人》

作品畫面空空如也,只是黑色畫面上有簡單白色直線條,非常耐人尋味,但產(chǎn)生很大影響,極限藝術(shù)第一槍就這樣打響,或者說浮出水面,開始逐漸形成流派與理論。

這個風(fēng)格另外還有兩位重要奠基人,分別是巴涅特·紐曼(Barnett Newman)及阿德·萊因哈特(Ad Reinhardt),兩人最初也是活躍于抽象表現(xiàn)主義陣營,后來投身到極限藝術(shù)的探索。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

紐曼與萊因哈特

先說一下紐曼,他在美國屬于波蘭的移民,生于 1905 年,1922 年開始學(xué)習(xí)繪畫與藝術(shù),1930 年代之后逐漸全職從事藝術(shù)創(chuàng)作。

1948 年時候,43 歲的他創(chuàng)作了一張名為《溫曼一號》(Onement 1)的繪畫,畫面就是黑紅的底色上畫了一條橙黃色條紋,非常簡單,屬于極限藝術(shù)的潛伏期作品。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

《溫曼一號》

紐曼從這個作品開始就一直以這種風(fēng)格進(jìn)行創(chuàng)作,他的作品尺寸非常大,而且?guī)缀醵际且粋€底色上畫些橫線或者畫些豎線,然后就沒有然后了。

所以當(dāng)他在 1950 年開始搞個展的時候引發(fā)藝術(shù)評論界的批判,因為也有混飯吃的嫌疑,直到 1960 年代極限藝術(shù)理論體系逐步完善,而且有走紅跡象的時候評論界才改變對他的態(tài)度,轉(zhuǎn)而將他奉為極限藝術(shù)的大師。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

紐曼的極限藝術(shù)繪畫作品

所以有時候,成也媒體敗也媒體,評論界有一部分評論家對藝術(shù)的評價常常見風(fēng)使舵,針對自身利益出發(fā),比如希望吸引大家注意力,就像如今很多吃“人血饅頭”的自媒體。

不管如何,60 年代的紐曼成名了,然后他的作品影響另一位藝術(shù)家,那就是前面談到的另一位奠基人阿德·萊因哈特。

萊因哈特比紐曼年輕 8 歲,生于 1913 年,早年從學(xué)習(xí)設(shè)計轉(zhuǎn)而進(jìn)修藝術(shù),1937 年到 1947 年期間都是抽象表現(xiàn)主義流派的成員。

他的早期作品色彩鮮艷明亮,有著硬邊幾何的形式風(fēng)格,有點像立體主義,也像風(fēng)格派。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

萊因哈特早期作品

1950 年代開始他就將自己的創(chuàng)作形式變得越來越簡單,比如將作品限制在單色范圍,而到了 1960 年代,因為紐曼的影響,他堅決投身于極限藝術(shù)的創(chuàng)作中。

他的作品開始表現(xiàn)變得更加極致,大部分都是采用不同明暗程度的黑色長方形進(jìn)行重疊,非常單純,如果用前些年比較流行的網(wǎng)絡(luò)語句來形容看他的畫,就是“看了個寂寞”。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

萊因哈特極限藝術(shù)繪畫作品

萊因哈特除了創(chuàng)作之外,熱心于通過寫作及演講來推廣極限藝術(shù),產(chǎn)生不錯的效果,所以大家將其視為極限藝術(shù)的奠基人之一。

極限藝術(shù)與雕塑

極限藝術(shù)除了在繪畫中表現(xiàn),還有一個重要載體是雕塑。

有些從事極限藝術(shù)的藝術(shù)家本身橫跨繪畫與雕塑兩個領(lǐng)域,其中最突出的就是法蘭克·史提拉(Frank Stella)。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

法蘭克·史提拉

他被譽(yù)為美國最知名的極限藝術(shù)大師,原因在于他的作品有強(qiáng)烈個人特色,早期主要進(jìn)行繪畫創(chuàng)作,隨之轉(zhuǎn)向雕塑與裝置,正是雕塑作品讓他成了大名。

史提拉成大名的原因在于他反其道而行,不是采用“少即是多”(Less is more)的原則,而是“多即是少”(More is less),將作品做得非常繁雜。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

史提拉的繪畫作品

這里很多朋友就奇怪了,那不是跟極限藝術(shù)中的“極少”產(chǎn)生矛盾嗎?所以史提拉是將極限藝術(shù)拔高到哲學(xué)高度,讓人產(chǎn)生深刻的思辨。

情況如同硬幣的兩面,如果在一張白色畫紙上只畫上一筆黑色,大家的注意力就只集中黑色,但當(dāng)黑色的筆畫不停增加,直到最后只剩下一小片白色底色時,大家則變成關(guān)注白色,所以“以少見多”變成了“以多見少”。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

史提拉的繪畫作品

再比如一個人最開始只擁有一個專業(yè)身份的時候,他感覺很少,但其實因為這種少形成的專注讓他擁有更多,分別是專業(yè)領(lǐng)域深度上的多跟時間自由上的多,因為專業(yè)上的極致能讓回報更大,越到后面越輕松自如,能騰出更多時間放在生活。

而當(dāng)身份越來越多自以為擁有更多時,因為散焦反而讓收獲更少,疲于奔命失去生活。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

史提拉的繪畫作品

舉個更現(xiàn)實的例子,當(dāng)你買多一部車或者買多一套房子的時候,確實物質(zhì)的擁有多了,但會相應(yīng)產(chǎn)生一系列更多的問題,比如忙于車的停放、保養(yǎng)、改裝,俱樂部活動。

擁有多一套房子就要多思考新的裝修,擺設(shè),還不得不做更多工作還貸,所以這時候“多”與“少”讓人迷惑,根本無法分辨清楚到底是多還是少。

史提拉在這方面最著名的雕塑作品是 1990 年創(chuàng)作的《梅杜莎之筏·之一》(法國浪漫主義畫家席里柯有同名作品《梅杜莎之筏》)。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

史提拉作品《梅杜莎之筏·之一》

這個作品使用一個堅固的金屬支架,橫向支撐出一大堆支離破碎,纏繞在一起的金屬片、金屬線與金屬構(gòu)件,看上去就是一團(tuán)亂糟糟。

史提拉對這個作品沒有作任何解釋,他說作品沒有象征意義,沒有隱喻,所有內(nèi)容與思想都在作品本身,大家只需要觀察,這一點倒是很符合前面談到的塔特林藝術(shù)理念,就是:真實的空間感與真實的質(zhì)感。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

史提拉的其它雕塑作品

其他極限藝術(shù)的雕塑作品則跟主流的極限藝術(shù)繪畫差不多,都是用最少最簡單的形式進(jìn)行創(chuàng)作。

比如卡爾·安德勒(CarlAndre)在 1969 年創(chuàng)作的《鎂和鎂》(Magnesium-Magnesiumplain),其實就是用 30 厘米見方的鎂金屬以 6*6 的數(shù)量(有一個版本是 12*12)鋪在地上,簡單到不得了。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

安德勒作品《鎂和鎂》

展覽過程中也沒設(shè)阻擋,所以經(jīng)常有觀眾很自然的從上面走過,以為是金屬地板。

安德勒的創(chuàng)作特點就是喜歡采用現(xiàn)成品以數(shù)學(xué)的韻律進(jìn)行不同方式的組合、排列、堆砌形成簡單的雕塑,大部分是金屬片材、磚頭、木塊等。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

安德勒與他的雕塑作品

還有一位知名的極限藝術(shù)雕塑家名為羅伯特·莫里斯(Robert Morris)。

他在 1988 年時候創(chuàng)作名為《艾爾斯》(The Ells)的雕塑作品,其實就是三個 L 字形狀的鐵籠用非對稱的方法進(jìn)行擺設(shè)。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

莫里斯作品《艾爾斯》

莫里斯有時候也很喜歡采用圓形進(jìn)行創(chuàng)作,這種幾何中最基本的形式被很多極限藝術(shù)家喜愛,因為圓形統(tǒng)一又簡單,同時具有飽滿的形式特點,他的作品常有這種元素。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

莫里斯極限藝術(shù)雕塑作品

極限藝術(shù)的雕塑情況大致如此,余不一一。

結(jié)案陳詞

極限藝術(shù)其實發(fā)展到如今都仍然存在,但聲勢明顯變得比較弱,因為他主力反對的抽象表現(xiàn)主義及波普藝術(shù)都衰退了,等于也失去發(fā)展的著力點。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

現(xiàn)代家居中的極限藝術(shù)裝飾畫

情況就如同商業(yè)市場,百事可樂需要可口可樂的存在,麥當(dāng)勞需要肯德基的存在,所謂遇強(qiáng)越強(qiáng),對手變?nèi)跎踔料?,也會讓自己也不再進(jìn)步甚至消亡。

我們?nèi)缃襁€經(jīng)常會聽到設(shè)計中的 “極簡主義”,其實并非完全一回事, “極簡主義”更多是種延展的設(shè)計概念,還是屬于基于功能問題為基礎(chǔ)的形式考慮,而極限藝術(shù)不需要考慮任何功能。

今年最火的「克萊因藍(lán)」是如何產(chǎn)生的?聊聊背后的極限藝術(shù)

極限藝術(shù)海報《皮爾斯怪獸公司》

在一些概念海報,裝飾畫或者公眾裝置藝術(shù)中極限藝術(shù)仍然適用,至于怎么才能真正用好,這期分享相信一定對你有所幫助。

文章來源:優(yōu)設(shè)   作者:設(shè)計史太濃VS遠(yuǎn)麥劉斌


分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)



如何把握好平面設(shè)計中的節(jié)奏感?

資深UI設(shè)計者

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!

如何把握好平面設(shè)計中的節(jié)奏感?來看高手的分析!


藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:優(yōu)設(shè)  作者:美工美邦
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


UI設(shè)計師如何高效支援Banner設(shè)計需求

資深UI設(shè)計者


為什么需要高效?


當(dāng)下互聯(lián)網(wǎng)進(jìn)入以內(nèi)容運(yùn)營為核心的時代,市場競爭激烈,需要對于市場的熱點進(jìn)行快速反應(yīng),持續(xù)迭代。不管是大廠還是小廠的UI設(shè)計師多多少少需要支援運(yùn)營需求。U1S1 做簡單運(yùn)營圖對于體驗設(shè)計方向的設(shè)計師來說,性價比確實有點低,一般難度較高的運(yùn)營設(shè)計需求都由專業(yè)的視覺設(shè)計師來做,體驗設(shè)計師一般接到的都是比較簡單或者緊急的需求,這對于設(shè)計的能力提升來說是比較有限的,大量的時間被占用在運(yùn)營設(shè)計上,持續(xù)被榨干,有些本末倒置,但人生就是這么操蛋,總得想辦法解決。



Banner構(gòu)成拆解


就目前大部分互聯(lián)產(chǎn)品的Banner而言。

其構(gòu)成一般由標(biāo)題文案、主體元素(人物、物品等)、背景(場景、底色等)元素構(gòu)成。



模板化沉淀


面向設(shè)計師:模板化運(yùn)營設(shè)計 + 素材資源同步盤

第一種方法是本文的核心方法,原理很簡單,其實就是利用Sketch和或者Figma的組件化(為了統(tǒng)一語義本文統(tǒng)一稱為組件,其子集為用例)進(jìn)行設(shè)計。

我們將這些元素分別打包成組件.



把組件的用例調(diào)整后放置在預(yù)覽區(qū)所有不同尺寸的畫板中。

當(dāng)出現(xiàn)需要特殊調(diào)整的時候可以解綁微調(diào)。如果希望給畫面添加一些細(xì)節(jié)的話,再另外添加即可~


這么一波操作,大概1個多鐘就可以輸出一整套7個圖,足以應(yīng)付一周22套運(yùn)營圖的需求了(悲傷的故事)


當(dāng)然要達(dá)到這種速度還需要一個通用素材庫的加持??臻e時間把一些KV的圖素拆出來放到Eagle共享盤,這樣你和你的小伙伴們就可以高效愉快地拉圖了...



面向運(yùn)營同學(xué):創(chuàng)客貼等第三方設(shè)計平臺

在創(chuàng)客貼搞個團(tuán)隊模式,然后設(shè)計師把常用的一些模板上傳上去,運(yùn)營同學(xué)只要自己改改文案,換換人就可以啦



設(shè)計規(guī)范制定


雖然有了模板化的設(shè)計工具,但如果缺少了設(shè)計規(guī)范的引導(dǎo),就會宛如脫韁野馬,設(shè)計出各種偏離業(yè)務(wù)需求或風(fēng)格不一致的Banner出來。

設(shè)計規(guī)范需要與運(yùn)營同學(xué)共同協(xié)商制定,比如標(biāo)題最長長度、排版構(gòu)圖、圖素尺寸等等。具體規(guī)范需要根據(jù)不同的業(yè)務(wù)需求進(jìn)行定制化。

下面就以我們團(tuán)隊的制定方式作為范例說明一下。



排版構(gòu)圖

常規(guī)的排版構(gòu)圖模式有居中式構(gòu)圖、左右構(gòu)圖。

居中式構(gòu)圖:居中式構(gòu)圖是將主體放置畫面的中心進(jìn)行構(gòu)圖。這種構(gòu)圖方式這種構(gòu)圖方式的最大優(yōu)點就在于主體突出、明確而且畫面容易取得左右平衡的效果

左右式構(gòu)圖:左右構(gòu)圖將文字標(biāo)題元素和主體物按照比例分割進(jìn)行位置安排。符合用戶閱讀習(xí)慣:閱讀視線要符合用戶從左到右或從上到下的瀏覽習(xí)慣。



尺寸

Banner的尺寸需要根據(jù)UI界面的需求進(jìn)行制定。

例如針對我司的產(chǎn)品,一個活動最多有7個運(yùn)營位的樣式,分別在首頁、搜索位、文章封面、活動中心、閃屏等。


標(biāo)題長度限制

由于運(yùn)營同學(xué)有時候?qū)τ跇?biāo)題的長度沒有經(jīng)過精簡優(yōu)化,標(biāo)題特別長長長長長長長長,加上Banner本身就小,在手機(jī)屏幕上基本看不清,也就沒有意義了。因此需要共同制定好主標(biāo)題副標(biāo)題長度限制,超過就直接打回重改。


出血設(shè)置

制定出血位的原因是某些尺寸的圖素可能出現(xiàn)在多個不同的入口,以及不同尺寸的手機(jī)屏幕可能會出現(xiàn)裁剪的現(xiàn)象。



視覺走查


不論是設(shè)計師也好,運(yùn)營同學(xué)也好,完成設(shè)計之后最好建立一個視覺自查表進(jìn)行對照,目的是盡量減少一些原則性錯誤,減少來回改稿的情況。



流程化閉環(huán)


為了更完美的提升整個流程效率,不僅需要升級中部流程,前后端的流程都需要進(jìn)行優(yōu)化。

首先是最好在需求的前端建立需求排期表進(jìn)行需求的篩選。

分門別類地將需求的詳細(xì)信息進(jìn)行可視化展示,對應(yīng)的需求文檔接入。這里不得不吹一波飛書文檔,太**好用了。

針對需求的后端即設(shè)計交付環(huán)節(jié),最好是在設(shè)計稿導(dǎo)出的時候使用工具進(jìn)行壓縮,更小的體積意味著更快的加載速度,這對于提升產(chǎn)品的用戶體驗是毋庸置疑的。這里推薦2個工具:

1.imageOptim

2.Picdiet https://www.picdiet.com/zh-cn (個人推薦JPG使用這個網(wǎng)站,壓縮的質(zhì)量最高)


總結(jié)


最后,如果實在人力不足的情況下,就把項目外包出去吧,畢竟占用UI設(shè)計師太多時間產(chǎn)出如果沒什么價值的話,其實roi也是很低的,設(shè)計師的人力成本也是錢!

“能用錢解決的問題,就用錢解決!”—— 魯迅

如果運(yùn)營經(jīng)常提出很多無理的需求,比如量很大,沒有什么依據(jù)都是拍腦袋想的,那可以考慮把項目外包出去,一旦外包出去,花的就是真金白銀,讓運(yùn)營也知道,這是設(shè)計師嘔心瀝血畫的,市場的價格就擺在那,整天搞些有的沒的是否真的能對項目帶來價值。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:站酷  作者:坡安Chris 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


全面剖析視覺專題設(shè)計

ui設(shè)計分享達(dá)人

本文做設(shè)計探討交流分享,不涉及商業(yè),如有不足多多指教。 其中的優(yōu)秀案例、插圖部分來自站酷、花瓣和百度(詳情請查看原鏈接)僅供參考學(xué)習(xí)。 

 本文從“視覺專題設(shè)計簡述”也就是視覺專題設(shè)計的基礎(chǔ)理論、“專題設(shè)計思維養(yǎng)成”就是總結(jié)一些常用的設(shè)計前期思維方向如何找到和“案例參考”三個部分構(gòu)成。

首先是視覺專題設(shè)計簡述:  

大家有知道”視覺傳達(dá)藝術(shù)設(shè)計“專業(yè)吧,這個作為大學(xué)藝術(shù)設(shè)計專業(yè)中的一種(Visual Communication Design)是為傳播特定事物通過可視形式的主動行為。大部分或者部分依賴視覺,并且以標(biāo)識、排版、繪畫、平面設(shè)計、插畫、色彩及電子設(shè)備等二度空間的影像表現(xiàn)??傊褪轻槍ρ劬梢钥吹降木邆涿缹W(xué)影響的設(shè)計符號,稱之為“視覺傳達(dá)”。 

視覺設(shè)計的領(lǐng)域很廣,總的大致分為7種,所以印象中視覺傳達(dá)專業(yè)的同學(xué)會的都挺多!??!哈哈哈 

字體設(shè)計、標(biāo)志設(shè)計、 插圖設(shè)計 ,這三種就是字面意思,大家也常接觸就不做文字說明。 

而下面這幾種,我用括號內(nèi)的文字做區(qū)分說明。

編排設(shè)計(文字、圖像、圖形、廣告招貼、書籍等編排設(shè)計) 

廣告設(shè)計(主題、創(chuàng)意、語言文字、形象、襯托等要素組合進(jìn)行平面藝術(shù)創(chuàng)意的一種設(shè)計) 

包裝設(shè)計(綜合運(yùn)用自然科學(xué)和美學(xué)知識,為在商品流通進(jìn)行的包裝造型、結(jié)構(gòu)、裝潢設(shè)計) 

展示設(shè)計(主體為商品,在既定的時間和空間范圍內(nèi),對展示空間的創(chuàng)作過程)

當(dāng)視覺設(shè)計前面加兩個字,“視覺專題設(shè)計”,這個就是將視覺設(shè)計加了限制條件,是針對產(chǎn)品某個主題活動,以特定風(fēng)格傳遞產(chǎn)品想要表達(dá)的信息,為提高產(chǎn)品轉(zhuǎn)化率,達(dá)到流量、曝光、口碑收益的運(yùn)營設(shè)計。 

如果說需求方讓你只是做一個視覺設(shè)計,那么他們的需求就是為了能夠準(zhǔn)確傳達(dá)信息,有些童鞋做設(shè)計過于自嗨,沉浸自己的設(shè)計風(fēng)格中,沒有g(shù)et到需求方一個簡簡單單的想法,他們只是想要傳達(dá)信息,所以給出合適的信息展示就能完成,而設(shè)計圖片的美感只是錦上添花,你說他們的審美不過關(guān),也能否先反思一下自己的設(shè)計圖是否能讓別人不思考就看懂。如果他們要求是一個專題設(shè)計,這是為品牌服務(wù),最后落腳點是品牌,那他們需要的就不僅僅是個美感、信息傳遞、突出符合產(chǎn)品自身的調(diào)性,以及帶來流量的設(shè)計才是他們想要的目標(biāo)。

 因此想要做好一個視覺專題,不妨倒推一下整個專題設(shè)計的目標(biāo): 

  1. 流量增長(當(dāng)今最具價值證明,數(shù)據(jù)說話) 

  2. 曝光增加(好的壞的,只要有,就有熱度,就有話題,區(qū)別同類的“臉盲”) 

  3. 口碑更好(毫無疑問對品牌屬于積極正面的影響) 

  4. 帶來收益(前三條都是為這條準(zhǔn)備,收益才是王)

 所以當(dāng)我們產(chǎn)出一個設(shè)計任務(wù)時,可以從以下4個不同層次的設(shè)計把控點來,反思調(diào)整自己的作品:  

首先,基礎(chǔ)層級是傳遞出準(zhǔn)確的信息,也就是這個信息是能被人識別讀懂(如果一個視覺專題設(shè)計產(chǎn)出除了設(shè)計師本人能看懂,其余人不明所以,那么只能說明這個設(shè)計夠“藝術(shù)”不夠“過關(guān)”); 

其次,高一點的層級就是除了能準(zhǔn)確傳遞正確的信息以外還能包含一定的信息量,說明這個設(shè)計傳達(dá)出不止是一點有效信息; 

再來就是“視覺效果來源于匹配程度”,意思是看完這個設(shè)計我能夠聯(lián)想或者關(guān)聯(lián)到一些和他相關(guān)的信息事物,證明此設(shè)計傳達(dá)出了準(zhǔn)確有效的信息還能讓所有信息,規(guī)律的結(jié)合,成為觀看者聯(lián)想起過往瀏覽過事物與之匹配的事物; 

最高一層就是視覺與信息的唯一匹配,這也就是我以后看到這個設(shè)計就只會想起某個特定品牌, (例:看到少了一塊的蘋果圖片,一定會想到“喬布斯的蘋果公司、他的手機(jī)等”;看到一定會想到“騰訊公司的QQ企鵝”)


市場固定資源有限,想要瓜分到一口蛋糕, 現(xiàn)在每個企業(yè)都需要一定的專題設(shè)計來提升自己品牌的影響力,借機(jī)造勢,作為企業(yè)形象與美譽(yù)度的提升突破口,結(jié)合各種銷售玩法達(dá)到目標(biāo)。

 企業(yè)發(fā)展的不同階段對專題設(shè)計的要求也是不同,起初需要一個視覺符號來代表,讓大眾記住公司,這也是初期階段受美學(xué)影響,各個公司和企業(yè)都想要注冊商標(biāo);隨著時間變遷企業(yè)的發(fā)展和轉(zhuǎn)型需要,誕生了一批品牌符號,也就是我們常說的IP形象、文創(chuàng)、動漫、虛擬智能人工等等,這些是受營銷思維主導(dǎo)催生的視覺設(shè)計產(chǎn)業(yè)鏈;最后能扛住時間檢驗,并且讓自己的企業(yè)視覺設(shè)計做到極致,成為為社會文化審美的標(biāo)桿,推動風(fēng)格潮流的風(fēng)向,就成為了一種特定的文化符號,這是所有企業(yè)向往的方向,也是最難成就的頂端。當(dāng)我們能在制作自己的專題設(shè)計時,包含企業(yè)所想,那么你一定是個格局大家!

接下來是講述思維養(yǎng)成的一些方法:拆解需求——了解清楚現(xiàn)在的事實、目前商業(yè)需求的背景,收集通常這樣的需求在市場上的視覺風(fēng)格,分析定量現(xiàn)狀和定型現(xiàn)狀,從而推導(dǎo)出商業(yè)假設(shè),得出用戶體驗?zāi)繕?biāo),反復(fù)推敲找出設(shè)計發(fā)力點。    


定量屬性是指以數(shù)量形式存在著的屬性,并因此可以對其進(jìn)行測量。測量的結(jié)果用一個具體的量(稱為單位)和一個數(shù)的乘積來表示。以物理量為例,距離、質(zhì)量、時間等都是定量屬性。

定性是指通過非量化的手段來探究事物的本質(zhì)。其概念與定量相對應(yīng)。

定性的手段可以包括觀測、實驗和分析等,以此來考察研究對象是否具有這種或那種屬性或特征以及它們之間是否有關(guān)系。

定性研究是與定量研究相對的概念,也稱質(zhì)化研究,是社會科學(xué)領(lǐng)域的一種基本研究范式,也是科學(xué)研究的重要步驟和方法之一。

如果說定量研究解決“是什么”的問題,那么定性研究解決的就是“為什么”的問題。

 專題設(shè)計一般分為三類:活動、信息、組合;確定好自己的設(shè)計類型,

活動類專題設(shè)計——時效性強(qiáng)整體活動時間短、活動類主體利益針對人群、設(shè)計調(diào)性喜慶,通常大紅色,

為了達(dá)到想要的商業(yè)回饋,爭取利益點,主要信息簡單明了; 

信息類專題設(shè)計——活動周期可循環(huán)、活動類主體利益是產(chǎn)品、設(shè)計調(diào)性多數(shù)貼合品牌性質(zhì),為了

穩(wěn)固原有商業(yè)形象、讓品質(zhì)再次提升,拉近與用戶的距離,多數(shù)采用品牌的ip或者文藝的插畫來凸顯溫馨; 

舉例為“京東618”和“face u”、“支付寶 花唄”、“飛豬旅行”各有特色 

 

信息組合類的專題設(shè)計——活動周期可長可短,也沒有特定的時效性,既包含活動類的特點,也包含信息類的特點。它的定量現(xiàn)狀和定性現(xiàn)狀都可用不同場景區(qū)分。從舉例就可看出, 

“阿里巴巴云棲大會”、“成都國際設(shè)計論壇”、“臺北燈光節(jié)”、“海信發(fā)布會” 主視覺海報——

 思維方式2是分析構(gòu)思: 

團(tuán)隊的小伙伴一起頭腦風(fēng)暴,發(fā)散思維寫出與主題相關(guān)的,盡可能的多寫,然后再根據(jù)意向分類,提取出自己關(guān)鍵詞匯,結(jié)合詞匯在腦海產(chǎn)生的視覺元素,整合篩選定好方向

 方向定好后,我們就要選取如何通過創(chuàng)意與表現(xiàn),來實現(xiàn)專題設(shè)計讓人記住。 

常見的創(chuàng)意方法,通過流行的表現(xiàn)風(fēng)格做視覺呈現(xiàn),如三維立體、手繪插畫、賽博朋克等;

通過獨特風(fēng)格、操作難度高、技術(shù)含量大的表現(xiàn)手法做視覺呈現(xiàn),如手工塑造、超寫實還原、概念模擬等; 

通過具有情感化設(shè)計的圖文做視覺呈現(xiàn),圖文具有強(qiáng)有力共性(例如“杜蕾斯文案”、“江小白酒情懷”堪稱文案絕絕子······)通過動畫實現(xiàn)等等···· 

而表現(xiàn)從淺至深就是,引導(dǎo)——刺激——價值 

?

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png



文章來源:優(yōu)設(shè) 作者:YiVi_eleven

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)



五步提升你的版面精致度

資深UI設(shè)計者


首先,我們怎么去理解在作品集版面中的“精致度”。我覺得可以將其轉(zhuǎn)化為“質(zhì)感”,“細(xì)節(jié)”,“細(xì)膩”這樣的詞匯。其實“精致度”不足這個問題大部分同學(xué)也是能有所感知的,只是不知道哪里出了問題,也就無從下手。當(dāng)然還有一小部分同學(xué),可能并不覺得自己有什么問題,也無法體會修改前后的差別,這樣的同學(xué),我建議你平時應(yīng)該多看一些優(yōu)秀的設(shè)計作品,多沉淀一下,這樣的方式對你幫助更大。


很多同學(xué)經(jīng)常把“精致度”理解為形式感不夠,或者是不夠酷炫,這么理解是不準(zhǔn)確的。這就好像一個產(chǎn)品,它的精致和它的外觀設(shè)計并沒有什么直接聯(lián)系,而是更多的取決于這個產(chǎn)品的做工和材質(zhì)。做工體現(xiàn)在接縫的處理,邊角的打磨等等,而材質(zhì)決定了其質(zhì)感的好壞。那么同理,版面的“精致度”實際上和你的設(shè)計感也是沒有直接聯(lián)系。那么從哪些方面體現(xiàn)版面中的“精致度”呢?我結(jié)合自己的經(jīng)驗總結(jié)了以下幾個方面:

1.舒適的間距。一個合適的,讓人舒適的間距特別重要。無論是文字與的,或者說認(rèn)為不重要的事情。混亂的,不統(tǒng)一的,不舒適的間距會讓版面變的排布變的無章,這就好像一個產(chǎn)品各個部件的拼接接縫大小不一,會導(dǎo)致“精致度”下降。

2.大小比例。版面中所有元素的互相之間,以及相對于整個版面的大小比例問題。這個也是非常重要的一個體現(xiàn)“精致度”的地方。所有內(nèi)容都過于傻大粗,無疑會讓版面看起來非常粗糙。

3.層次感。層次感實際上是一個非常好的提升質(zhì)感從而體現(xiàn)出“精致感”的手段。缺乏層次感的版面會顯得非常的寡淡,以及在內(nèi)容較多時可能會在視覺上造成較亂的感覺。那么如何提升層次感,主要是靠對比的強(qiáng)弱。比如:深與淺,粗與細(xì),大與小,疏與密等等。

4.字體。選擇一個精致好看的字體,對版面的精致度有一定的提升,不過還是要注意,字體的與版面之間的大小比例要注意。


5.配圖。配圖的質(zhì)量也一定程度上影響了版面的精致度。無論是你自己做的圖,比如分析圖,效果圖等,還是你網(wǎng)上找的圖,如參考圖等,都很大程度上決定了你這一頁的精致度。


通過以上幾點的提升,我相信你的版面“精致度”一定會有較為顯著的提升,而版面效果也會看上去更為高級。不過這里還是要再次提醒,精致度和設(shè)計感是兩回事兒,如果只有精致度,而設(shè)計感較差,那也是不行的。希望本期的內(nèi)容對你的版面有所幫助。


藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png


文章來源:站酷   作者:馬克筆留學(xué)設(shè)計

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!

資深UI設(shè)計者

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

生活在地球上的我們,每時每刻其實都在感受著重力的存在。除了物理層面的影響,重力是否會改變我們對于視覺畫面的認(rèn)知呢?又或者說,物理學(xué)中經(jīng)常聽到的重力概念,和設(shè)計中的構(gòu)圖、排版又存在著怎樣的關(guān)聯(lián)呢?

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

我們或許能夠從格式塔學(xué)派對認(rèn)知心理學(xué)的研究里,尋找到一些蛛絲馬跡。

人們的大腦總是會去腦補(bǔ)眼前看到的事物。就像我們看到的這三個被遮擋住的圓形圖案,位于中心的倒三角雖然沒有實際出現(xiàn),但我們確實認(rèn)為它是存在的對吧。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

視覺本身是很容易被周圍環(huán)境影響的,就像我們現(xiàn)在看到的這個畫面。如果忽略掉空間和透視的話,你還會覺得右側(cè)的豎線更高嗎?

而實際上的情況是,左邊的豎線高度要遠(yuǎn)遠(yuǎn)高于右邊的豎線高度。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

再看這個例子,兩側(cè)位于中央的白色球形,它們之間,誰看起來更大,誰又看起來更???也許有的朋友會說左邊更大,這個答案是沒錯的,但它也僅僅是看起來更大而已。

如果我們在畫面中拉出兩條輔助線,我們就會發(fā)現(xiàn),原本右邊看起來更小的圓球,要比左邊的圓球更大。

通過剛剛的幾個小測試,相信大家已經(jīng)對于用眼睛的判斷能力有了一些認(rèn)識了,是不是有一種眼見不一定為實的感覺?視覺重力原則,其實就是建立在這樣的認(rèn)知基礎(chǔ)之上的。我們大腦所認(rèn)為的重心或平衡感,和真實的情況,往往并不相同。

在做版式設(shè)計的時候,我們的構(gòu)圖越接近重心的平穩(wěn)狀態(tài),就越會激發(fā)和諧的美感。因為重力在自然界中是再平常不過的現(xiàn)象了,生活在這樣環(huán)境中的我們,自然也會有這種審美上的傾向了。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

我們來看這個例子,這張紙最穩(wěn)定的位置在哪里呢?答案是它的正中心。

我們把信息添加在頁面的中心位置,現(xiàn)在它看起來更平穩(wěn)了嗎?然而并沒有,可問題出在哪?一定是我們沒有把文字?jǐn)[正吧?上方的區(qū)域(a),看起來要比下方的區(qū)域(b)面積更大一些,真的是這樣么?

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

可實際上,文字確實是在頁面的正中心位置上了,這同樣我們的眼睛在作怪。

所以為了抵消視覺上的這種墜落感,我們需要將文字略微向上移動,這樣我們看這段文字才是真正居中的。

正向

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

我們再舉個例子,這是一個數(shù)字 8,我們來仔細(xì)觀察一下它的造型,頂部與底部的負(fù)空間看起來是一樣大的對嗎?

垂直翻轉(zhuǎn)

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

而事實上并不是這樣的,通過將它倒置,我們就會更明顯的看出來,其實為了抵消人眼的錯覺,我們在做字的時候,需要將上面做的更小,底部做的更大一些。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

這是兩個完全等大的黑色圓形,但它在視覺上其實并不是平衡的,人們的眼睛會覺得右邊更輕,這雖然沒有頂部和底部那么明顯,但也確實存在。那么解決的方法就是將左邊的圓形略微縮小一些,現(xiàn)在這個頁面看起來平衡多了。我們總是會下意識的認(rèn)為左側(cè)要更重要些。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

? 畫作:The Creation of Adam

看這幅畫,很明顯左側(cè)的內(nèi)容要比右側(cè)更少,可如果我們將它鏡像翻轉(zhuǎn)過來,它原版的平衡感就會被打破了。人們更多會認(rèn)為左邊看起來更重了。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

同樣的,在我們的漢字設(shè)計中,也會應(yīng)用這種做法,比如林字的兩個木字旁,就并不是左右等大的,因為這樣在視覺上會顯得不平衡。所以需要將左側(cè)的偏旁削弱,才會在視覺上看起來更加和諧。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

具有左右結(jié)構(gòu)的漢字,基本上都遵循了這個原則。形成了左收右放的構(gòu)成樣式。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

漢字“田”的中心十字筆畫,為了看起來是居中的感覺,實際上也特地微調(diào)了文字的重心部分。利用輔助線,我們會更容易察覺到這其中的變化??梢钥吹剑瑱M筆部分,向上移動了很多。豎筆部分也相應(yīng)向左做了位置上的調(diào)整。

人們常說,細(xì)節(jié)決定成敗。也正是這些不起眼的細(xì)節(jié),拉開了專業(yè)平面設(shè)計和業(yè)余設(shè)計師之間的距離。相信看到這里的小伙伴們,應(yīng)該已經(jīng)領(lǐng)略到了視覺重力原則在設(shè)計中的重要地位了。那么光知道有這么一回事兒可不行,我們更應(yīng)該去了解它的特點,以及嘗試著去掌握它。

我們看到的所有圖像,無論抽象的還是具象的,其實都是具有重量感的。那么都有哪些因素會影響到視覺重力的大小呢?找到視覺重心之后,我們又要怎樣去利用它們?接下來我們就一起去尋找相應(yīng)的答案。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

色彩對視覺重量有影響嗎?我們看畫面中的這兩個圖形,是不是很明顯感覺到右邊更重呢?黃色的色相本身的視覺明度就要比藍(lán)色更淺,所以我們會感覺到右邊更重。

為了抵消顏色對視覺重量的影響,我們需要降低藍(lán)色的面積,這樣才能讓兩個圖形看起來是平衡的。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

那么換成具象的物體呢?道理其實也是一樣的。我們依然可以把它們看成是純粹的色彩。經(jīng)過這一步分析,我們是不是發(fā)現(xiàn)了左側(cè)紅色的蘋果,顯然會更深和更重呢?

所以,為了保持左右的平衡感,我們也需要把紅色相應(yīng)的縮小一些。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

我們看這兩個圖形,它們誰更重?左側(cè)的八邊形,它的頁面邊緣更復(fù)雜,角度變化也更多,所以承載了更多的信息量,相比正方形更簡潔的造型來說,左側(cè)會更重。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

那么換成大小相同的秤砣和棉花呢?誰更重?幾乎沒懸念了,棉花完敗。當(dāng)具象的物體出現(xiàn)時,結(jié)合以往的視覺經(jīng)驗后,誰更重誰更輕也就很顯而易見了。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

對齊也需要考慮到視覺重力嗎?如果你也有這種疑問的話,接著往下看。這是兩個馬克杯,它們雖然造型類似,但是色彩卻不同。很顯然藍(lán)色的版本會更重,而在位置上更靠近左邊,也就顯得更重了。

所以,為了抵消這種重量上的輕微不平穩(wěn),我們可以把顏色更淺的橙色放到左側(cè)的位置上。這樣雖然色彩上橙色更輕,可由于它的位置更重要,也就不會給人不平穩(wěn)的感覺了。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

那么構(gòu)圖基本確定之后,我們?yōu)檫@兩個杯子搭配上一段文案信息。這樣兩個商品的展示也就做完了。你發(fā)現(xiàn)這兩個組合出現(xiàn)什么問題了嗎?當(dāng)文字信息加入到頁面之后,是不是覺得哪里不對呢?

電腦是看不懂圖像的,所以用到對齊命令時,它們會圍繞著像素的邊緣去做對齊??蓡栴}在于,并不是所有圖片的視覺重心都剛好在方框的中間位置。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

所以我們要去修改的地方,也正是這個視覺重心的對齊位置?,F(xiàn)在再看這兩個組合,是不是感覺和諧了很多。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

當(dāng)西文和漢字相互組合時,需不需要考慮到視覺重心的對齊呢?我們看,如果僅僅是依據(jù)邊緣進(jìn)行對齊的話,就會讓西文部分看上去很小。而正確的做法是需要我們忽略掉一些文字邊緣的。

分別找到兩組文字的視覺大小。只有這樣,才能讓兩組文字在視覺面積上達(dá)到相同的重量。當(dāng)然,文字字重部分也是需要做出相應(yīng)匹配。我們看,經(jīng)過調(diào)整后,中西文的搭配明顯要更加平穩(wěn)了。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

但也是有例外的,比如這個例子,明明是按照之前的調(diào)整方式,僅僅是更換了文字的內(nèi)容。為什么它看上去依然沒有對齊呢?這里的問題其實出現(xiàn)在西文部分,有些單詞組合,字母并沒有占據(jù)下伸部的空間。所以在整體上,就會顯得有高低的錯落感。

這種情況,當(dāng)然就需要重新去匹配了。解決方法依然是對齊文字之間的視覺重心部分。所以,方法并不是死記硬背的。我們需要根據(jù)不同的情況去做出有針對性的調(diào)整。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

接下來我們來做一個包裝的案例。它是一個螃蟹口味的海鮮調(diào)味料。首先,我們選擇這個手繪的螃蟹作為這個畫面中的視覺焦點,把它放在版面的中心位置。經(jīng)過前面的學(xué)習(xí),我們知道了,選擇對齊元素時,我們要忽略掉那些細(xì)枝末節(jié)的部分,才能找到真正的視覺中心位置。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

找到了視覺重心后,我們把它安排到頁面真正的中央部位。頂部和底部的空間,我們就繼續(xù)調(diào)整其他的信息。首先從層級上來說,在頁面頂部我們需要一個相對第二大面積的文字組合。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

而其余的元素,圍繞著底部的負(fù)空間去排列就可以了,到這里這個包裝也就做完了。

無論是版式設(shè)計,還是繪畫攝影,構(gòu)圖從來都是一個講究的事情。想要做一版在視覺上平穩(wěn)的版面,最簡單的辦法,就是把主體固定在頁面的中心位置??墒沁@種對稱的設(shè)計,由于太過完美,也多少會給人一種單調(diào)和乏味的印象。那么有沒有一種既讓頁面保持平衡,又能在結(jié)構(gòu)上做出變化的設(shè)計方法呢?這就引出了我們接下來的內(nèi)容了。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

這個案例,屬于網(wǎng)頁中會出現(xiàn)的廣告頁面。首先,如果我想要讓版面達(dá)到平衡狀態(tài),就需要把主體的重心安排在頁面的中央位置。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

但是,為了讓頁面中加入更多信息,我們也不得不讓主體向頁面的一端靠攏,從而預(yù)留出足夠的空間。

可這樣就導(dǎo)致了頁面的不平衡,左側(cè)的文字重量并不能平衡整個版面。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

其實,解決的辦法也很簡單,我們可以試著將主體略微移向頁面的中心部分。這樣一來,就實現(xiàn)了一種動態(tài)的平衡狀態(tài)。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

這背后的知識其實很簡單,就是最基本的杠桿原理。如果天平兩端并不平衡,那就讓更重那個的靠近中心,更輕的遠(yuǎn)離中心。這樣也就恢復(fù)到平衡狀態(tài)了。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

這同樣是一個網(wǎng)頁中會出現(xiàn)的廣告頁面。我們看,它都出現(xiàn)了哪些問題。版面中所有的元素都集中到了頂部,這就導(dǎo)致了頁面底部重量過輕,頂部重量過重的極端對比。也就是我們俗稱的頭重腳輕。那么經(jīng)過調(diào)整之后問題依然存在。過多的空白,會讓人們感覺這個版面作品沒有完成。所有的重量都集中到了版面的左側(cè),這依然是一個極端的構(gòu)圖。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

正確的做法應(yīng)該是怎樣的呢?我們可以將重量最大的元素安排在中心位置。并且讓其他元素以對稱的樣式排布。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

當(dāng)然,你也可以將信息放大,和原本的圖像進(jìn)行一個疊壓組合,形成一個更重更大的整體。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

又或者,采用頂部圖像,底部文字的做法,讓頁面中的重量分配均等。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

反過來也是一樣的,頂部安排文字,底部安排圖像。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

再或者,我們可以將信息安排在頁面的左側(cè),形成左字右圖的配置。這樣的構(gòu)成,有助于人們第一眼發(fā)現(xiàn)你想傳達(dá)的信息。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

而反過來呢?圖像就成為了更重要的那個。人們會先看到圖,然后緊接著去閱讀相應(yīng)的文字信息。

到這里,我們分別從細(xì)節(jié)的刻畫,再到元素的重心對齊;又從視覺重心的動態(tài)調(diào)整,一直講解到了宏觀頁面的構(gòu)建思路。我們可以看到,視覺重力原則幾乎滲透了整個設(shè)計流程。很多時候我們其實并不缺乏理論知識的武裝,可一到自己實際動手,就馬上繳槍投降了。矛盾點還是出在對理論知識點靈活運(yùn)用上,接下來我就帶著大家再做幾個案例。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

打算做一套大米的包裝設(shè)計。產(chǎn)品的名字就叫高山巖米。它長什么樣子呢,就像我們現(xiàn)在看到的這樣,類似葡萄干一樣,和我們平時見到的大米顏色是有一些區(qū)別的,據(jù)說營養(yǎng)價值很高,也被譽(yù)為米中黃金。

我想利用圖形的切割來表現(xiàn)這個巖米的部分。同時,在輔助一個篆書結(jié)構(gòu)的山字,以這樣的圖形來體現(xiàn)這個主題內(nèi)容。并且,我也希望這個大米的部分是鏤空的,能夠透過它看到真實的米。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

主視覺的刻畫差不多后,接下來我把它放到包裝上,并且將其他信息也一并加入到版面里。不過這樣一來,信息和主視覺相互疊壓,對于內(nèi)容來說可能會有些相互干擾了。所以我們來試著編排一下。到這里,好像出現(xiàn)了我們前面提到過的問題了,那就是,整個布局顯得頭重腳輕了。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

接下來再試著調(diào)整一下?,F(xiàn)在我們把底部和頂部的空間都占據(jù)了,同時也預(yù)留出了三分之一的留白,這該不會有什么問題了吧。相信看到這里的小伙伴應(yīng)該都能看出問題了,那就是這樣的配置確實有些左重右輕了。留白可以有,但絕對不是這樣做的。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

除了我們之前提到的上圖下字,或者是左圖右字之外。我們當(dāng)然也可以綜合的應(yīng)用它們。我們現(xiàn)在這個構(gòu)成,其實就是一種全包圍的結(jié)構(gòu)。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

又或者,將一部分內(nèi)容放在底部,而主要去刻畫上方的文本樣式。這就形成了類似半包圍的結(jié)構(gòu)。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

如果說之前的版本是上下樣式的半包圍構(gòu)成的話。那么接下來的這個構(gòu)圖,就是融合了重心動態(tài)布局的左右樣式半包圍構(gòu)成了。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

當(dāng)我們不知道怎樣去安排版式構(gòu)成時,視覺重力原則就成為了一個很好的參考依據(jù)。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

我們再做一版活動海報。畫面中出現(xiàn)的各種電器,都是經(jīng)過退底處理的。這樣的處理,能夠讓它們毫無違和感的出現(xiàn)在同一個頁面中。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

在頁面的部分,我加入了這個活動的具體內(nèi)容。展覽的主題叫《模塊世界展》,是著名設(shè)計師迪特拉姆斯的個人展覽。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

拿到這樣的內(nèi)容時,最保險的做法就是讓頂部的圖片成為一個更大的組合。上圖下字,很平穩(wěn),也很保守。

我們可以看到,圖片部分,我盡量將它們還原成了現(xiàn)實中它們本來的比例關(guān)系。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

或許,我們也可以再換一種思路,相對的更突破一些。將圖片通過顏色劃分成組。我們能夠看到,其中有全黑的,也有彩色的,更有白色的。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

除了像剛剛的堆積到角落,我們也可以把圖片組合規(guī)劃成對角線的樣式,在這樣的形式下,版面構(gòu)圖依然是平衡的。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

我們當(dāng)然也能讓圖片組合劃分成一個更大的組合,以及一個更小的組合。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單?。ǔ喟咐? loading=

又或者,打亂圖片的順序,完全依據(jù)視覺重心去匹配其中的位置關(guān)系。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

最終,我決定從展覽的主題中尋找突破口,以“錯位”的手法去呼應(yīng)“模塊化”這個概念。不僅僅是文字部分的錯位和拆解,圖片部分也通過硬邊的投影,形成了一種嵌套于版面中的視覺印象。

掌握好「視覺重力原則」,構(gòu)圖的奧秘很簡單!(超多案例)

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png



文章來源:優(yōu)設(shè)   作者:研習(xí)社

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)





日歷

鏈接

個人資料

存檔