蘭亭妙微設(shè)計(jì)公司 原創(chuàng)視覺設(shè)計(jì)干貨
這套蘭亭妙微自研的質(zhì)感彈窗設(shè)計(jì)方法論，手把手教你打造高吸睛的 APP 運(yùn)營彈窗，掌握后輕松提升彈窗點(diǎn)擊率！
前言
各位設(shè)計(jì)師伙伴們，蘭亭妙微的設(shè)計(jì)教研團(tuán)隊(duì)又來分享實(shí)戰(zhàn)干貨了！上一期我們?yōu)榇蠹也鸾饬恕兑曈X設(shè)計(jì)課 5：光影漸變的高階應(yīng)用》，教大家用漸變疊加和光效塑造畫面層次感，讓扁平設(shè)計(jì)更具視覺張力，不少設(shè)計(jì)師反饋實(shí)操性極強(qiáng)，希望能有更多視覺設(shè)計(jì)的高階技巧分享。
今天我們繼續(xù)深耕漸變與光效的實(shí)戰(zhàn)應(yīng)用，以 APP 運(yùn)營場景中最核心的質(zhì)感彈窗為載體，帶來超詳細(xì)的設(shè)計(jì)思路與實(shí)操教程，使用工具依舊是設(shè)計(jì)師必備的 Photoshop。本次教程不會(huì)糾結(jié)基礎(chǔ)的軟件操作，而是聚焦現(xiàn)實(shí)光影的觀察方法、立體質(zhì)感的拆解邏輯、PS 圖層模式的質(zhì)感塑造技巧三大核心，教大家從底層邏輯理解質(zhì)感設(shè)計(jì)，做到舉一反三，這些思路同樣適用于質(zhì)感圖標(biāo)、品牌視覺物料等各類設(shè)計(jì)場景。
我們以電商 APP 新人禮包彈窗為設(shè)計(jì)案例，將整個(gè)設(shè)計(jì)流程拆解為 28 個(gè)核心步驟，每個(gè)步驟再細(xì)化實(shí)操要點(diǎn)，由蘭亭妙微視覺設(shè)計(jì)部的資深設(shè)計(jì)師執(zhí)筆，全程還原商業(yè)級(jí)質(zhì)感彈窗的設(shè)計(jì)思考過程。先來看下本次教程的最終完成效果，一個(gè)兼具質(zhì)感、氛圍感與營銷吸引力的新人禮包彈窗，能在瞬間抓住用戶注意力，提升點(diǎn)擊與轉(zhuǎn)化。
Step1 畫面創(chuàng)意與構(gòu)圖構(gòu)思
彈窗是 APP 運(yùn)營拉新、促活的核心入口，新用戶端承接新人福利、注冊(cè)引導(dǎo)，老用戶端承載大促活動(dòng)、福利推送，其核心訴求是在 1 秒內(nèi)抓住用戶注意力，這與 Banner、鉆展圖的設(shè)計(jì)邏輯高度契合，因此視覺創(chuàng)意與圖形吸引力是彈窗設(shè)計(jì)的關(guān)鍵。
本次蘭亭妙微設(shè)計(jì)的新人禮包彈窗，選用紅包、禮盒、金幣這類用戶認(rèn)知度高、自帶福利感知的視覺元素，避免晦澀的圖形符號(hào)，降低用戶理解成本。正式繪制前，建議先快速繪制草圖，確定主體元素的擺放位置與整體構(gòu)圖；若元素較少，可直接勾勒色塊稿完成主體定位，同時(shí)明確主色調(diào)與物體間的明暗關(guān)系 —— 比如畫面中的紅包與禮盒均以紅色系為主，通過明暗深淺區(qū)分前后層次，讓畫面更具空間感。
為了讓主體質(zhì)感塑造的演示更直觀，本步驟暫時(shí)隱藏絲帶、按鈕等輔助元素，這類元素對(duì)主體配色與質(zhì)感影響較小，可在主體塑造完成后再添加。
Step2 勾勒紅包基礎(chǔ)陰影面
塑造物體的立體關(guān)系，核心是讓扁平色塊產(chǎn)生明暗區(qū)分，我們從畫面中視覺占比最大的紅包開始塑造。分別為紅包的上半部分與下半部分繪制陰影，蘭亭妙微的設(shè)計(jì)技巧是：拒絕直接添加全局統(tǒng)一的投影，這類陰影雖規(guī)則但缺乏靈動(dòng)性，易讓畫面顯得呆板。
我們會(huì)單獨(dú)創(chuàng)建陰影圖層，自由控制陰影形狀與范圍：紅包上半部分的陰影設(shè)計(jì)為左小右大，為后續(xù)的質(zhì)感加工預(yù)留調(diào)整空間；下半部分則勾勒左右均勻的規(guī)則陰影面。陰影塑造均采用矢量形狀 + 羽化的方法，讓陰影過渡更自然，避免生硬的邊緣感。
Step3 塑造紅包多層亮面質(zhì)感
完成陰影面后，為紅包上半部分疊加多層亮面，亮面分為三個(gè)核心區(qū)域，層層遞進(jìn)塑造光澤感，且與陰影面形成視覺呼應(yīng)：
- 左上角高光面：作為紅包的主受光區(qū)，高光面面積最大，形狀設(shè)計(jì)為左大右小，與上一步左小右大的陰影形成反向呼應(yīng)，強(qiáng)化光影的立體感；
- 反射光亮面：這是環(huán)境光的反射形成的次亮面，光感弱于主高光面，因此勾勒中間大、兩邊小的圓弧形狀，羽化值略調(diào)低，讓光感更細(xì)膩；
- 分層陰影面：為了區(qū)分紅包上下兩部分的空間感，在銜接處添加略帶泛紅的彩色陰影，疊加在黃色邊緣上，讓紅包初步呈現(xiàn)通透的光澤質(zhì)感。
Step4 添加紅包硬朗邊緣高光
為進(jìn)一步強(qiáng)化紅包的光澤感，在物體邊緣添加硬質(zhì)感高光，模擬強(qiáng)光照射下的邊緣反光效果。這類高光采用純白色矩形塊面繪制，無需羽化模糊，保留硬朗的邊緣質(zhì)感。
我們將硬高光添加在紅包下半部分的右側(cè)與下方，原因是主高光已集中在左上方，硬高光避開主受光區(qū)，能讓光影分布更均衡，避免畫面光感過于集中。
Step5 區(qū)分光照下的紅包色相變化
光影對(duì)物體的影響，不僅體現(xiàn)在明暗，更體現(xiàn)在色相的微妙變化—— 蘭亭妙微總結(jié)的設(shè)計(jì)規(guī)律是：受光的高光區(qū)域色相偏暖，未受光的暗部區(qū)域色相偏冷。
基于此，為紅包上半部分做色相調(diào)整：主色為大紅色，左上方高光區(qū)加入橘色提升暖度，右側(cè)暗部區(qū)域加入玫紅色調(diào)增加冷感。這里分享一個(gè)避坑技巧：暗部不直接添加低明度顏色，否則會(huì)讓畫面顯得發(fā)灰、臟亂，而是選擇與主色對(duì)應(yīng)的略冷色調(diào)，既保證明暗對(duì)比，又讓色彩更通透。
Step6 優(yōu)化紅包邊緣的明暗對(duì)比
紅包邊緣的黃色線條初始明度過高，無法通過直接加高光或調(diào)明暗的方式塑造質(zhì)感，因此先降低黃色的整體明度，為后續(xù)的質(zhì)感塑造做鋪墊。
針對(duì)上下兩部分的邊緣，采用差異化的處理方式：上半部分直接降低明度；下半部分則勾勒暗調(diào)塊面遮罩在邊緣，保留左側(cè)部分黃色（左側(cè)為光源方向），讓邊緣的明暗變化更豐富，與整體光影邏輯保持一致。
Step7 塑造紅包下半部分的柔和光照
紅包上半部分已完成豐富的色彩與光影變化，下半部分無需過度疊加色彩，否則會(huì)讓畫面顯得雜亂。僅為下半部分添加一層比主色略亮的紅色塊面，勾勒為水滴形圓弧，讓光照疊加的效果更柔和，與上半部分形成光影呼應(yīng)，同時(shí)保持畫面的簡潔性。
Step8 為紅包添加立體厚度感
紅包上半部分的黃色邊緣與紅色主體色相過于接近，空間層次不清晰，因此為上層邊緣添加厚度層，塑造立體的厚度感。厚度層的顏色選擇比黃色明度略低的橙色，而非直接降低黃色明度 —— 蘭亭妙微的設(shè)計(jì)經(jīng)驗(yàn)是：暗部添加色彩時(shí)，同步提升飽和度，能讓顏色更干凈，避免發(fā)灰。
完成厚度層繪制后，為紅包上半部分整體添加一層陰影，讓上下兩部分的空間層次徹底區(qū)分開。
Step9 疊加紅包厚度層的反射高光
紅包上半部分的厚度層為暗色調(diào)，需添加明暗變化提升質(zhì)感，因此在厚度層疊加圓弧形黃色反射高光。選擇黃色而非之前的白色。
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。