火星網校
干貨丨教你如何設計玻璃態(tài)的UI設計效果
發(fā)布時間：2024-03-14 17:21:57 瀏覽量：221次
同學們在設計中經常遇到一些不可忽視的趨勢。盡管玻璃態(tài)在UI設計中不是新的事物，但是最近又被人們挖掘出來了。有些人甚至將這個趨勢稱為“玻璃態(tài)”，那么如何設計玻璃態(tài)的UI設計效果，下面讓我們一起來看看如何通過7個簡單的步驟教你如何創(chuàng)建玻璃態(tài)的UI效果。
1）畫一個形狀
首先創(chuàng)建一個基本形狀，一個具有以下尺寸的矩形：640×400，再加40pt的圓角。
2）應用漸變填充
現在該基本填充了。在本教程中，我們將使用漸變。兩種漸變顏色都將是純白色（#FFFFFF），但是它們的不透明度會有所不同。將第一個設置為40％，第二個設置為10％。
3）添加背景模糊
我們來模仿玻璃的是模糊感。首先將背景模糊值設置為20左右，來看看這個是表面如何變化的。當然，你也可以根據自己的效果來設置不同的模糊度。
4）添加邊框
一個優(yōu)雅的邊框會為元素增添了光澤。當玻璃表面重疊時，它也有助于建立視覺層次。如果要在設計中創(chuàng)建定向光的幻覺，則可能需要對邊框使用漸變。我是這樣制作卡片的，所以看起來更有“質感”。
卡邊界對角漸變的設置：
邊框：3px
顏色1：#FFFFFF（不透明度50％）
顏色2：#FFFFFF（不透明度0％）
顏色3：＃FF48DB（不透明度0％）
顏色4：＃FF48DB（不透明度50％）
5）應用陰影
細微的陰影效果有助于增強視覺層次。由于陰影的存在，區(qū)分所有層將更加容易。
在我的示例中，我使用具有24的模糊值的深色，并且擴展減小為-1。這次，你將通過添加陰影樣式屬性以與玻璃表面一起成形來獲得最佳效果。
6）填寫內容
是時候添加一些內容了。填寫必要的徽標和文字。要創(chuàng)建壓印層的錯覺，請用白色填充內容，并將不透明度降低到50％。你也可以玩圖層混合-嘗試疊加以獲得有趣的結果。
7）添加質感
玻璃卡片已完成，但是，你可以進一步添加一些高級紋理！要添加優(yōu)雅的噪點，我們添加帶有噪點的圖像。將不透明度降低到20％，并將填充的混合模式設置為“疊加”?？纯船F在看起來多么有質感。
來看一些其它的嘗試~
寫在最后
玻璃擬態(tài)越來越受歡迎，總之，多學點沒壞處噠，歐力給~如果喜歡影UI設計的同學，便可以趁此機會趕緊學起來喲！通過在線咨詢的方式跟專業(yè)老師一對一解答獲取 更多學習信息和內容噢！想學習了解影視更多干貨資訊、優(yōu)質教程、行業(yè)新聞、社交互動、在線輔導、企業(yè)招聘，行業(yè)競賽，可以下載“繪學霸App”繪學霸App外包接單等都能一手掌握，讓碎片時間充分利用！
這次教你如何設計玻璃態(tài)的UI設計效果，干貨分享結束啦！不論大家學習什么技能，一定需要多動手、多記、多問、多思考，希望大家可以收獲到成就！
轉載聲明：部分文章來源于網絡，不作任何商業(yè)用途。
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
