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

學(xué)過(guò)設(shè)計(jì)的同學(xué)應(yīng)該都知道RGBA，在元素堆疊的情況下，改變上層Alpha值，就會(huì)形成透過(guò)上層看下層的顏色，類似于玻璃半透明的效果，這就是不透明度，類似玻璃的效果。

那么毛玻璃呢？是在玻璃不透明度的基礎(chǔ)上，加上一些材質(zhì)的感覺(jué)，也就是模糊效果，讓元素邊界模糊，就好像像素眼變成了高度近視，色塊進(jìn)行了混合，產(chǎn)生了磨砂材質(zhì)的感覺(jué)，叫做毛玻璃。

MKBHD（油管博主） 首先提到了風(fēng)格Glassmorphism （玻璃擬物化）是 Glass（玻璃）和 Skeumorphism（擬物化）的結(jié)合，也確實(shí)在2020成為了流行視覺(jué)元素。

• 摘自dribbble

溯源的話是ios開(kāi)始，到win10開(kāi)始更新在Fluent Design 當(dāng)中，背景和前景之間的「Acrylic」層包含飽和增強(qiáng)層、高斯模糊層、色彩融合層、色調(diào)疊加層、噪點(diǎn)肌理層。而后mac os廣泛使用這種玻璃透明層，感興趣的小伙伴可以查一下蘋果微軟設(shè)計(jì)的過(guò)程，這里不再贅述。

摘自dribbble

在視覺(jué)上體現(xiàn)出縱深感，這里涉及到Z軸的概念，也就是各元素之間的空間感，去強(qiáng)調(diào)頂部關(guān)鍵信息，更好的建立界面的層次，提升品質(zhì)感和神秘感。              

總的來(lái)說(shuō)毛玻璃擬物化可以提升界面的：層次感、品質(zhì)感、用戶的驚喜感、更好的表達(dá)用戶當(dāng)前的位置、多用于卡片的展示中。

摘自dribbble

首先，我們來(lái)觀察玻璃擬物化需要的細(xì)節(jié)特點(diǎn)

▼元素的層次性如何體現(xiàn)？

具有明顯的懸浮感，需要突出的主元素在最上層。

▼玻璃的透明感如何體現(xiàn)？

使用鮮艷的色彩從半透明的卡片層中透出。

▼那透明度需要如何調(diào)節(jié)？

填充和透明度調(diào)節(jié)程度不同，效果是不一樣的，在卡片布局來(lái)說(shuō)，離我們近的元素吸引的光就多，則更透明。

▼背景玻璃的質(zhì)感？

磨砂材質(zhì)的質(zhì)感是通過(guò)各種背景模糊實(shí)現(xiàn)的，或者可以再疊加上紋理的效果。

▼細(xì)節(jié)質(zhì)感表達(dá)。

你可以發(fā)現(xiàn)現(xiàn)實(shí)玻璃邊緣是有光澤的，所以我們也可以在邊框增加細(xì)微的光線邊界去強(qiáng)化質(zhì)感，更可以突出主體本身。

摘自dribbble

有時(shí)候我們總能看到很多流行趨勢(shì)？可是怎么把這些趨勢(shì)運(yùn)用到自己的實(shí)際工作中呢？今天小核兒帶大家來(lái)實(shí)際操作一下，模擬一下真實(shí)工作需要的環(huán)境去產(chǎn)出。

首先我們分析這種流行因素適用于什么環(huán)境？可以看到收集的很多參考都將這種玻璃擬物化效果做成了卡片，具體優(yōu)點(diǎn)上面提及了，但很少作為按鈕或者其他部分，因?yàn)檫@樣會(huì)不利于部分用戶的閱讀體驗(yàn)。這個(gè)可用性測(cè)試結(jié)束后，我們還發(fā)現(xiàn)國(guó)內(nèi)app也開(kāi)始運(yùn)用這些玻璃擬物，除了海報(bào)H5之外，可以看到最初自如的圖標(biāo)這種通透新鮮感則是玻璃擬物化，而后騰訊、58都有相關(guān)設(shè)計(jì)。

摘自dribbble

拆解好思路后，我們實(shí)操嘗試去運(yùn)用，比方小核兒的公司需要做首頁(yè)金剛區(qū)的圖標(biāo)，和產(chǎn)品商量過(guò)后可以嘗試新的流行方案，那我們就開(kāi)始做吧。

首先做出面性組合圖標(biāo)的圖形設(shè)計(jì)

• ——加入漸變色提升圖標(biāo)輕量感

• ——思考把哪部分色塊變成玻璃感

• 

• 
  

  • 
    

  • ——復(fù)制一層在上面作為玻璃透明層調(diào)節(jié)填充的不透明度數(shù)值

  • ——把模糊改成背景模糊調(diào)節(jié)數(shù)值

  • ——增加細(xì)微邊框調(diào)節(jié)玻璃邊緣光感

    
    

  • 

  • 
    
    • 
      

    • ——輕微錯(cuò)位與下層形成層次性

    • ——增加整體陰影層擬物化更具立體感

    • ——然后最后根據(jù)界面的主色去更改圖標(biāo)的顏色

總結(jié) 講道理，這個(gè)效果在很早就已經(jīng)應(yīng)用了，但這就是流行趨勢(shì)，不斷的輪回，設(shè)計(jì)師在感知和探索流行趨勢(shì)的同時(shí)，去創(chuàng)造出新的東西來(lái)，所以不妨動(dòng)手試試看，在實(shí)驗(yàn)的同時(shí)會(huì)獲得很多新的靈感。

這就是設(shè)計(jì)，有趣且不單調(diào)，永遠(yuǎn)給你新的東西，永遠(yuǎn)讓你保持熱愛(ài)！

Powered by Froala Editor