APP界面設計中的投影設計

創(chuàng)新互聯(lián)與你分享《APP界面設計中的投影設計》。在今天的 UI設計中，投影使用的范圍和頻次越來越高。打開手機APP，或是看追波上的練習稿，都可以看見無數(shù)投影使用的案例。

掌握好投影的使用，是必備的 UI 視覺設計基礎。投影遠沒有大家想象的那么簡單，即使軟件中可以設置的參數(shù)并不多，在我的教學過程中，很多學員始終沒辦法很好的應用投影來提升自己的設計質感。

所以，這篇文章就會詳細講解投影的正確設計方法。

一、投影的基本介紹

在了解投影和設計的關系前，我們要先知道投影是什么。用專業(yè)點的方式解釋，即：投影指的是用一組光線將物體的形狀投射到一個平面上去，稱為「投影」。有了光源，才有投影。光影是美術和攝影最核心的基礎。那么投影有什么特征呢，先看看下面的這張靜物攝影。

圖中有很清晰的向右延伸的投影。距離主體越遠的投影，也就越模糊，越淡。通過這樣的投影我們還可以很輕易的分析出，光源在左側，且物體是放置在地面上的。投影可以帶給我們非常多隱藏的信息，而這些往往被我們所忽略。再看看下方的案例，當背景無法直觀的提供物體所處高度時，投影就能起到關鍵的作用。

在平面畫布中，投影的做法直接影響我們對元素的認識。 例如下圖中，投影可以讓我們了解按鈕本身是有厚度(遮擋了光線)或是離開了水平面處于懸浮狀態(tài)。

當然，投影除了對物理信息的暗示，還涉及到對視覺效果的表現(xiàn)。上面的白鞋投影很重，且輪廓清晰，這樣能塑造更強烈的沖突，增加鞋子的立體感。但是不是所有攝影都需要有這樣雕刻版的投影效果呢?答案是否定的，例如下面這張圖片。

主體物和背景色彩能很好的結合，創(chuàng)造出有趣歡快的視覺氛圍，所以只需要柔和的投影即可。在 UI 的設計中，對于陰投影參數(shù)的定義，也會直接影響我們畫面的視覺效果。

成熟的攝影作品，會根據對投影的需要再去調節(jié)打光的方式，這是個非常復雜而且繁瑣的過程，需要經年累月的學習。而在設計的過程中，創(chuàng)造投影卻非常容易，所以我們更該重視的是，如何正確的設計投影。

即先構思出元素的物理特性，再給予它正確美觀投影樣式。

二、UI設計中的投影

在進入了扁平化的設計環(huán)境后，投影有很長一段時間被抹除，因為大家認為那是擬物的遺毒，就怕設計里用到擬物元素顯得不夠時髦。到了 Material Design 發(fā)布以后，谷歌在規(guī)范中增加了 Z 軸的概念，也就是為平面預設了立體的空間，設計元素可以定義與空間中水平面的距離。

下圖中，Z 軸數(shù)字越大，代表和水平面的距離越遠，上升得越多。而帶給我們這種感受的原因，就是投影的暗示，元素本身的坐標并沒有任何改變。

既然增加了投影，那么谷歌的專業(yè)設計團隊，肯定不會很隨意的制定其參數(shù)。當我們打開谷歌的官方 UI KITS 源文件進行查看時，就能發(fā)現(xiàn)其中的不同。

可以看見，元素疊加了多層的投影，這是違反新手對于投影定義的直覺的。原因在與，一般軟件中定義的投影，其深淺與元素的距離是線性等比的，而現(xiàn)實世界中，深淺與距離是非線性的函數(shù)關系。

在 UI設計師接觸的平面類軟件中，只有 PS 具備好復現(xiàn)這種投影的能力，即控制投影的等高線。

而 Sketch、XD 這些軟件都不具備這樣的功能，且手機系統(tǒng)的投影渲染機制也是線性的，所以谷歌就通過使用 TopShadow、BottomShadow 疊加的方式，去模擬真實的投影效果，讓它們看起來更和諧自然，這就是多層投影的奧秘。

上面出現(xiàn)的投影都是黑白灰，但在現(xiàn)在流行的設計作品中，最常見的是應用了彩色的投影，攝影中也經常會應用彩色的投影渲染氛圍。

但是，投影中的這些彩色區(qū)域，并不完全都是投影，還包含了折射和漫反射的原理等。為了簡化，我們可以認為是光線穿透物體從而投射出帶有物體本身顏色的投影。就像撐起一把綠色的陽傘，傘下的人頭頂也會彌漫著草原的芬芳……

三、投影設計演示

在開始展示具體的設計案例前，我們要先明確一個原則，即：優(yōu)雅的投影是讓你感受到它的存在，但不會吸引你去關注它！

一般的設計軟件中，元素的陰影即是在元素的背后添加了一個相同輪廓的純色矢量圖形，我們可以通過 XY 軸移動它的位置，并使用模糊的參數(shù)來設置它的模糊度。當元素的距離水平面越近，陰影距離元素也就越近，即 XY 軸越小，模糊也越小，如果離得遠則相反。

1. 常規(guī)投影類型

第一種投影的類型，即光源從元素的上方投射下來，可以參考谷歌提供的投影方案疊加兩層投影。第一層是 XY 軸坐標為0，只添加模糊的參數(shù)，透明度較低。第二層陰影使用相同的模糊參數(shù)，增加 Y 軸坐標，透明度較高。

在非 MD 設計中，它濃郁的投影參數(shù)會讓整個界面變「臟」，變擁擠。我們要做的是要降低投影的透明度，這樣才能讓投影的表現(xiàn)更自然舒適。要牢記的是，當使用純黑色做陰影時，透明度無論如何都不應該高于 20%，正常區(qū)間在 5%-15%。

既然知道陰影屬性的規(guī)律，我們還可以復制個矢量圖層做模糊效果也可以得到一樣的效果，這種方法可以支持我們設計出更真實的投影。即將 BottomShadow 獨立出來，縮小并向下移動。

如果想要得到彩色的投影，那么只要切換投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我們要憑感覺去調整它們的透明度。

如果感覺不得勁，陰影太少了，那么我們就讓元素的 Z 軸上升。

既然前面提到彩色投影是由于光線穿透了元素，那么當使用了漸變色或者是圖片的投影，我們在上一步復制出的那層投影，就可以不使用填充色，而是直接用漸變或者是原圖進行模糊和透明度調整。

2. 非常規(guī)投影類型

光有垂直于平面的關系，那么發(fā)揮想象力，我們還可以更改光與面的位置，如下圖所示。

在這個場景中，投影就作用在圖片下方的地面，只有地面處于透視狀態(tài)時，才能可以看見它的投影，所以，我們就可以得到下方的效果。

當然，我們還可以結合光源的類型，比如使用聚光燈等，那么陰影的輪廓就會發(fā)生變化。

我們甚至可以預設元素本身產生有一定的變形，如邊緣翹起，那么就會產生獨特的陰影類型。

我們可以從日常生活中的觀察將各種不同的投影形式引用進我們的設計中，讓我們的設計視覺更豐富有趣。

總結

學會正確的投影設計方式，并不是僅僅讓我們局限在對 UI 元素的設計上。它還能給我們帶來很多意想不到的幫助，例如做設計的包裝。

通過前面講解的知識點，上方展示案例中應用的陰影方式相信你們已經可以看出端倪了，如果使用基礎的陰影設置去創(chuàng)建展示的陰影，就會發(fā)現(xiàn)效果遠遠不如案例的高級，自然也難以帶給別人良好的視覺體驗。最后，在項目中，想要將設計出來的陰影交付給開發(fā)，真正落地實現(xiàn)出來，無論安卓或是 iOS ，陰影的渲染和設計軟件的參數(shù)是不一致的，這就需要大家自己鉆研了。

當前標題：APP界面設計中的投影設計
分享URL：http://bm7419.com/news/168717.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、Google、網站設計公司、品牌網站建設、微信小程序、標簽優(yōu)化

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)