2024-5-28 資深UI設(shè)計(jì)者
看似簡(jiǎn)單的投影,其背后有很多值得說道的東西。
在如今的界面設(shè)計(jì)中,投影使用的范圍和頻次越來(lái)越高。無(wú)論線上項(xiàng)目或是追波上飛機(jī)稿,都可以看見各種各樣的投影樣式。
投影的使用,是 UI 設(shè)計(jì)師必須掌握好的視覺設(shè)計(jì)基礎(chǔ)。投影遠(yuǎn)沒有大家想象的那么簡(jiǎn)單,即使軟件中可以設(shè)置的參數(shù)并不多,很多設(shè)計(jì)師始終沒辦法很好的應(yīng)用投影來(lái)提升自己的設(shè)計(jì)質(zhì)感。
所以,這篇文章就會(huì)詳細(xì)講解設(shè)計(jì)投影的正確姿勢(shì)。
有了光,才有影。光影是美術(shù)和攝影最核心的基礎(chǔ)。
如果沒有系統(tǒng)學(xué)習(xí)過相關(guān)理論,對(duì)投影的認(rèn)識(shí)會(huì)有失偏頗,會(huì)認(rèn)為投影只是將一個(gè)物體的輪廓(遮擋光源的部分)完整映射在其它平面上而已,一個(gè)光源下只有一個(gè)影子,比如下圖設(shè)計(jì)出來(lái)的情況。
但是,真實(shí)世界中的投影,卻并沒有這么簡(jiǎn)單,往往虛實(shí)即不統(tǒng)一,明暗也不一致。就像下面這個(gè)物體的陰影。
在光學(xué)原理中,不透明物體遮擋光源,所產(chǎn)生的影子有兩個(gè)部分,本影和半影。本影是影子中間最暗的部分(還有偽本影的概念,我們暫時(shí)將它合并起來(lái)理解),而四周開始變淺變淡,有彌散質(zhì)感的影子稱為半影,就像下圖所示。
現(xiàn)實(shí)世界中可見的投影都會(huì)形成這兩種影子,因?yàn)楣庠从猩⑸涞奶卣?,?dāng)光線照射在物體上時(shí)勢(shì)必會(huì)產(chǎn)生非垂直角度的光線,于是其中作用最大,重疊最多的一部分形成本影,而其余比較極限的切線部分形成半影,如下圖的案例。
通過案例我們也可以發(fā)現(xiàn),當(dāng)光源、物體、陰影面的距離不同時(shí),產(chǎn)生的本影和半影面積也就不同。反過來(lái)講,我們還可以通過物體本影和半影的面積,來(lái)判斷它的空間關(guān)系,比如下方的兩個(gè)物體,明顯能感受到下側(cè)懸浮的高度大于上側(cè)。
或者,通過陰影來(lái)判斷光源對(duì)于物體的方向和強(qiáng)弱。比如下圖案例,就可以明顯判斷光源位于畫面的左側(cè),所以即使擺入其它物體,陰影也會(huì)朝反方向延伸。
除此之外,投影還可以反應(yīng)很多其它隱藏的三維信息,只要使用得當(dāng),它就可以幫助設(shè)計(jì)師表達(dá)呈現(xiàn)各種不同的空間位置。比如可以通過投影判斷物體是處于懸空或者是平躺,以及物體的厚度如何。
根據(jù)生活的經(jīng)驗(yàn),我們已經(jīng)對(duì)投影所產(chǎn)生的暗示習(xí)以為常,能根據(jù)投影的結(jié)果下意識(shí)的對(duì)界面內(nèi)容做出判斷。所以,設(shè)計(jì)師在設(shè)計(jì)過程中如果對(duì)投影沒有進(jìn)行很好的思考,就無(wú)法設(shè)計(jì)出符合規(guī)律和邏輯的投影,界面就會(huì)產(chǎn)生違和感,而作品也因此大幅降低了質(zhì)感。
在進(jìn)入了扁平化的設(shè)計(jì)環(huán)境后,投影有很長(zhǎng)一段時(shí)間被抹除,因?yàn)榇蠹艺J(rèn)為那是擬物的遺毒,就怕設(shè)計(jì)里用到擬物元素顯得不夠時(shí)髦。
到了 Material Design 發(fā)布以后,谷歌在規(guī)范中增加了 Z 軸的概念,也就是為平面預(yù)設(shè)了立體的空間,設(shè)計(jì)元素可以定義與空間中水平面的距離,并通過投影來(lái)表現(xiàn)。
下圖中,Z 軸數(shù)字越大,代表和水平面的距離越遠(yuǎn),上升得越多。而帶給我們這種感受的原因,就是投影的暗示,元素本身的 XY 坐標(biāo)并沒有任何改變。
即然增加了投影,那么谷歌的專業(yè)設(shè)計(jì)團(tuán)隊(duì),肯定不會(huì)很隨意的制定其參數(shù)。當(dāng)我們打開谷歌的官方 UI kits 源文件進(jìn)行查看時(shí),就能發(fā)現(xiàn)其中的奧妙。它們?yōu)樵貏?chuàng)建了兩層投影,即本影和半影,有時(shí)也稱為 top shadow 和 bottom shadow。
并且,還有一個(gè)在第一部分沒有提及的要點(diǎn),投影的深淺與元素的距離是非線性的,即中心到邊緣衰減的速度是越來(lái)越大的,用坐標(biāo)軸標(biāo)示就是非線性的函數(shù)關(guān)系,而大多數(shù)軟件中的投影只能以線性的模式呈現(xiàn)。
在 UI 設(shè)計(jì)師接觸的平面類軟件中,只有 PS 具備完美復(fù)現(xiàn)這種投影的能力,即控制投影的等高線。
上面出現(xiàn)的投影都是黑白灰,但在現(xiàn)在流行的設(shè)計(jì)作品中,最常見的是應(yīng)用了彩色的投影,攝影中也經(jīng)常會(huì)應(yīng)用彩色的投影渲染氛圍。
但是,投影中的這些彩色區(qū)域,并不完全都是投影,還包含了折射和漫反射等混雜的色光。為了簡(jiǎn)化(完整的闡述可以寫一本書了),我們可以認(rèn)為是光線穿透物體從而投射出帶有物體本身顏色的投影。就像撐起一把綠色的陽(yáng)傘,傘下的人頭頂也會(huì)彌漫著草原的芬芳……
在開始展示具體的設(shè)計(jì)案例前,我們要先明確一個(gè)原則,即:優(yōu)雅的投影是讓你感受到它的存在,但不會(huì)吸引你去關(guān)注它!
一般的設(shè)計(jì)軟件中,元素的陰影即是在元素的背后添加了一個(gè)相同輪廓的純色矢量圖形,我們可以通過 XY 軸移動(dòng)它的位置,并使用模糊的參數(shù)來(lái)設(shè)置它的彌散度。
當(dāng)元素距離水平面越近,陰影距離元素也就越近,即投影的 XY 值越小,模糊也越小,如果離得遠(yuǎn)則相反。
3.1 常規(guī)投影類型
第一種投影的類型,即假定元素平躺,光源正對(duì)著元素的平面,可以參考谷歌提供的投影方案疊加兩層投影。第一層是 XY 軸坐標(biāo)為0,只添加模糊的參數(shù),透明度較低。第二層陰影使用相同的模糊參數(shù),增加 Y 軸坐標(biāo),透明度較高。
在非 MD 設(shè)計(jì)中,它濃郁的投影參數(shù)會(huì)讓整個(gè)界面變“臟”,變擁擠。我們要做的是要降低投影的透明度,這樣才能讓投影的表現(xiàn)更自然舒適。要牢記的是,當(dāng)使用純黑色做陰影時(shí),透明度無(wú)論如何都不應(yīng)該高于 20%,正常區(qū)間在 5%-15%。
既然知道陰影屬性的規(guī)律,我們還可以復(fù)制這個(gè)矢量圖層做高斯模糊也可以得到一樣的效果,這種方法可以支持我們?cè)O(shè)計(jì)出更真實(shí)的投影。即將 Bottom Shadow 獨(dú)立出來(lái),縮小并向下移動(dòng)。
如果想要得到彩色的投影,那么只要切換投影的色彩即可。值得注意的是,不同色彩的刺激程度不同,我們要憑感覺去調(diào)整它們的透明度。
如果感覺不得勁,陰影太少了,那么我們就讓元素的 Z 軸上升。
既然前面提到彩色投影是由于光線穿透了元素,那么當(dāng)使用了漸變色或者是圖片的投影,我們?cè)谥疤岬降膹?fù)制出的那層充當(dāng) Bottom shadow 的矢量圖形,就可以不使用填充色,而是直接用漸變或者是原圖進(jìn)行模糊和透明度調(diào)整。
3.2 非常規(guī)投影類型
光既然可以垂直于被照射平面,那么發(fā)揮想象力,我們還可以更改光與面的位置,讓光線與平面之間的夾角變小,如下圖所示。
在這個(gè)場(chǎng)景中,投影就作用在圖片下方的地面,只有地面處于透視狀態(tài)時(shí),才能可以看見它的投影,所以,我們就可以得到下方的效果。
當(dāng)然,我們還可以結(jié)合光源的類型,比如使用聚光燈等,那么陰影的輪廓就會(huì)發(fā)生變化。
我們甚至可以假設(shè)元素本身產(chǎn)生了一定的變形,如邊緣翹起,那么就會(huì)出現(xiàn)獨(dú)特的陰影形狀。
我們可以從日常生活中的觀察將各種不同的投影形式引用進(jìn)我們的設(shè)計(jì)中,讓我們?cè)O(shè)計(jì)中的視覺形式更豐富有趣。
學(xué)會(huì)正確的投影設(shè)計(jì)方式,并不是僅僅讓我們局限在 UI 元素的設(shè)計(jì)上。它還能給我們帶來(lái)很多意想不到的幫助,比如做設(shè)計(jì)作品的包裝。
通過前面講解的知識(shí)點(diǎn),上方展示案例中應(yīng)用的陰影方式相信你們已經(jīng)可以看出端倪了,如果使用基礎(chǔ)的陰影設(shè)置去創(chuàng)建展示的陰影,就會(huì)發(fā)現(xiàn)效果遠(yuǎn)遠(yuǎn)不如案例的高級(jí),自然也難以帶給別人良好的視覺體驗(yàn)。
最后,在項(xiàng)目中,想要將設(shè)計(jì)出來(lái)的陰影交付給開發(fā),真正落地實(shí)現(xiàn)出來(lái),無(wú)論安卓或是 iOS ,陰影的渲染和設(shè)計(jì)軟件的參數(shù)是不一致的,這就需要大家自己鉆研究了。
藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。
關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司
銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
作者:酸梅干超人
鏈接:https://www.zcool.com.cn/article/ZOTU1MjI0.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com