亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

UILEO的第一篇UI設(shè)計筆記

每周五更新，歡迎持續(xù)關(guān)注哦~

   前言

去年發(fā)了一大堆動效的教程，應(yīng)該很多人都認為我是個動效設(shè)計師，其實我是個正兒八經(jīng)的UI設(shè)計師，這不，開始重操舊業(yè)，弄動效之余整一些界面類的技巧教程。

   投影的類別

投影大家應(yīng)該不陌生，能讓整個頁面非常有層級感，塑造空間感。在前2年投影的應(yīng)用更是廣泛，一度成為流行趨勢。

在我們的界面設(shè)計中區(qū)分塊與塊的方式也就那么幾種：顏色、描邊、投影

從上圖能明顯看的出來，投影能更加突出卡片的內(nèi)容，不至于讓整個界面太平，相比較會更有品質(zhì)感，所以因為這些原因，從蘋果系統(tǒng)的一系列設(shè)計，還有一些主流APP設(shè)計也可以看到相當多的地方有投影的應(yīng)用，這里看一些優(yōu)秀的案例。

   投影的應(yīng)用

接下來詳細介紹下投影在界面中的應(yīng)用。

1、圖片自身投影（沉浸感強，能很好的融入圖片）

2、顏色自身投影（模擬真實場景，更自然）

3、白色卡片投影-大卡片大投影，瀑布流排版小投影（替代描邊和色塊分割，更具質(zhì)感）

   如何做好投影

說完了投影的各種好處，有點，那么投影使用不當也是會有很大的弊端，并且容易造成反效果。

比如投影太重了就會顯得特別臟、投影太輕了會和背景融合、投影太靠下了頂上就禿了、投影太大就容易糊...是一個蠻矯情的設(shè)計樣式。

我們現(xiàn)在就需要搞定這塊使用規(guī)則，如何去設(shè)定投影參數(shù)，如何在合適的情況使用合適的投影。

我們先看看Material Design給出的一個關(guān)于光影的規(guī)范。

具體可以到谷歌規(guī)范的官網(wǎng)瞅瞅：https://material.io/design

能看到其實投影根據(jù)不同的使用場景，不同的界面層級，有幾種不同的投影高度，在這里我們需要先梳理清楚你的界面層級，是重是輕，這樣就能選擇正確的投影高度。

然后是投影的擴散范圍

我們說了一大堆的理論，也有很多人抱怨為什么就是做不好投影，接下來說下投影究竟如何去做才算一個好看的投影

投影從設(shè)計中的數(shù)值參數(shù)可以分這幾個：顏色（包含透明度）、XY軸、模糊范圍

咱們從大的往小的去慢慢拆解

首先顏色切記別太深，黑灰色透明度別超過15%，彩色的特別是亮色透明度別超過30%

接著XY軸，也可以認為是投影角度，99%的情況下都是向下投影，也就是sketch或者xd的向下位移（Y軸正數(shù)），這樣會更加體現(xiàn)空間感，也會更加自然，平均四散的投影會導(dǎo)致設(shè)計元素有些模糊。也需要注意向下位移的時候切記白色卡片別出現(xiàn)上方和背景過于融合，會非常奇怪。

 最后是模糊范圍，需要看情況，對于大卡片留白比較大的可以為整體高度的四分之一左右，距離為高度的十分之一就差不多（只是一個大概的數(shù)值，情況不同需要靈活應(yīng)變）

 然后是稍微密集的小按鈕啥的，建議用小的投影，代表輪廓范圍就行，大概是高度的十分之一（一般不超過10px），距離為高度的二十分之一（一般不超過5px）

這只是對大部分通用情況的一個簡單概括，有些復(fù)雜的獨特的形狀還是需要大家自己去把控

   結(jié)語&練習(xí)

在平時看設(shè)計的時候需要注意優(yōu)秀設(shè)計投影的深度，距離，慢慢的你就知道什么投影是好的，然后就可以搞定這個細節(jié)啦～

微信公眾號：LEO設(shè)研所

Powered by Froala Editor