用sketch做玻璃擬態(tài)圖標(biāo)!

玻璃擬態(tài)是今年各大設(shè)計網(wǎng)站提到的比較多的風(fēng)格渠欺,很多文章將其定義為設(shè)計領(lǐng)域的新趨勢妹蔽,我覺得這并不合理。因為玻璃擬態(tài)被實際應(yīng)用的并不多挠将,只能說在各設(shè)計網(wǎng)站上比較流行胳岂,有設(shè)計師自身拿來“意淫”的成分。

玻璃擬態(tài)尤其不適合在實際項目中的界面設(shè)計上使用舔稀,其主要不足有以下幾點:①頁面需要大量留白乳丰,過渡占用空間,②在日光環(huán)境下辨識度太低 ③開發(fā)實現(xiàn)成本高内贮,渲染占用系統(tǒng)資源④除了新穎产园,視覺效果一般為了設(shè)計師“一己私欲”汞斧,這犧牲是不是有點過大了?

如果界面非要做成玻璃擬態(tài)的效果什燕,我覺得只有在深色背景+黑夜模式下效果是最佳的粘勒。

難道被設(shè)計師煞費苦心發(fā)明出來的玻璃擬態(tài)就這么被拋棄了?不是的屎即,我們只是全盤否定了用玻璃擬態(tài)做界面庙睡,但是用來做背景和圖標(biāo)還是可以的(做效果圖也不錯)。

做背景我就不多說了技俐,iOS 14乘陪,macOS Big Sur 和 Windows 10 20H2上用到的比較多,跟早期說的毛玻璃效果類似雕擂。

今天主要介紹下擬態(tài)圖標(biāo)的實現(xiàn)方法暂刘,技法很簡單,實現(xiàn)過程中有三個細(xì)節(jié)需要注:

1捂刺、模糊方式需要選擇“背景模糊”

當(dāng)模糊選項里背景模糊離奇消失時谣拣,試試重新選擇一下其他模糊選項就會再次出現(xiàn)


2、一定要給圖層樣式填充添加不透明度而不是在圖層外觀里面添加

3族展、模糊圖層的投影只投在后面的圖層上:

如上圖森缠,圖層A的投影只顯示與圖層B重疊區(qū)域的部分,投在B區(qū)域外的不顯示仪缸,這需要把A復(fù)制一層加上投影贵涵,然后用B作為蒙版層對A的投影進(jìn)行遮罩。

設(shè)計的關(guān)鍵在于遮擋部分實現(xiàn)的效果恰画,圖層A加投影是為了前后界限和空間區(qū)分更明顯宾茂,模糊層A還可以細(xì)化加內(nèi)隱影效果: 可以加兩個一深一淺,淺的作為投影處的暗部反光拴还,加兩個也是為了讓界限明顯一些(尤其是在不透明度很低和深色背景下增加內(nèi)陰影更加有必要)跨晴;其他效果可以自由發(fā)揮,如給整體加彌散投影片林、初始圖層加一些微漸變等端盆。

其它我就不多說了,下面是網(wǎng)上找的一些案例费封,效果和種類基本就這些焕妙,大家可以結(jié)合應(yīng)用場景參考下。

更多干活查看“小桔設(shè)計”公粽號

1. 設(shè)計師要懂的字體代碼知識

2. 什么弓摘?不會用Sketch畫圖標(biāo)焚鹊?看這里!

3. 冷門但好用的Sketch高頻技巧

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末韧献,一起剝皮案震驚了整個濱河市末患,隨后出現(xiàn)的幾起案子爷抓,更是在濱河造成了極大的恐慌,老刑警劉巖阻塑,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蓝撇,死亡現(xiàn)場離奇詭異,居然都是意外死亡陈莽,警方通過查閱死者的電腦和手機(jī)渤昌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來走搁,“玉大人独柑,你說我怎么就攤上這事∷街玻” “怎么了忌栅?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長曲稼。 經(jīng)常有香客問我索绪,道長,這世上最難降的妖魔是什么贫悄? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任瑞驱,我火速辦了婚禮,結(jié)果婚禮上窄坦,老公的妹妹穿的比我還像新娘唤反。我一直安慰自己,他們只是感情好鸭津,可當(dāng)我...
    茶點故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布彤侍。 她就那樣靜靜地躺著,像睡著了一般逆趋。 火紅的嫁衣襯著肌膚如雪盏阶。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天父泳,我揣著相機(jī)與錄音般哼,去河邊找鬼吴汪。 笑死惠窄,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的漾橙。 我是一名探鬼主播杆融,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼霜运!你這毒婦竟也來了脾歇?” 一聲冷哼從身側(cè)響起蒋腮,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎藕各,沒想到半個月后池摧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡激况,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年作彤,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片乌逐。...
    茶點故事閱讀 38,569評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡竭讳,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出浙踢,到底是詐尸還是另有隱情绢慢,我是刑警寧澤,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布洛波,位于F島的核電站胰舆,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蹬挤。R本人自食惡果不足惜思瘟,卻給世界環(huán)境...
    茶點故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望闻伶。 院中可真熱鬧滨攻,春花似錦、人聲如沸蓝翰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽畜份。三九已至诞帐,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間爆雹,已是汗流浹背停蕉。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留钙态,地道東北人慧起。 一個月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像册倒,于是被迫代替她去往敵國和親蚓挤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,446評論 2 348

推薦閱讀更多精彩內(nèi)容