詳解：如何打造SVG圖文「高級感」？
「高級感」是一個模糊但又美妙的需求，在公眾號高級交互排版中往往為我們所追求但又捉摸不透。而 E2 編輯器官方認(rèn)為，所謂「高級感」其實可以被分解為視覺秩序、交互節(jié)奏與品牌調(diào)性的設(shè)計平衡。那么其中具體涉及哪些操作細(xì)節(jié)？本期為你解讀。
緩動函數(shù)
高級感動態(tài)的數(shù)學(xué)密碼
根據(jù)中華人民共和國《融媒體SVG交互設(shè)計技術(shù)規(guī)范》T/CASME 1609—2024 指導(dǎo)，SVG 設(shè)計“宜優(yōu)先選擇具備緩動函數(shù)的動畫表達(dá)，能體現(xiàn)物理加速、阻尼感的動畫為佳，動畫細(xì)節(jié)宜盡可能表現(xiàn)出物理特性的生動感”。
知其然更知其所以然——“緩動函數(shù)”是對物理世界運動規(guī)律的創(chuàng)造性重構(gòu)。緩動函數(shù)（Easing Functions）作為控制動畫速度變化的數(shù)學(xué)公式，直接決定了用戶對交互的心理感知。而“突?！?是高級感的絕對天敵——線性動畫（Linear）因缺乏節(jié)奏變化，常給人以直來直往的機(jī)械感；過度夸張的彈性動畫（Bounce）則又回會消解品牌的莊重性。
所以在 E2 編輯器中，你基本不會發(fā)現(xiàn)純勻速的動畫模板或過分夸張的強(qiáng)烈視效，對于緩動函數(shù)我們主要研發(fā)采用如“0.42 0 0.58 1.0”、“0.76 0 0.24 1”這類兼容性佳同時體驗自然的運動阻尼參數(shù)。
有時，用戶會帶著其他 SVG 效果向平臺咨詢是否可以增加某些看起來“生硬”的模版？但 E2 平臺更多會以品質(zhì)為立足點，站在真正關(guān)懷用戶的視角有選擇、有原則地確定平臺內(nèi)模板的具體類目及其特性。
如需了解平臺中各色輪播等自動動畫效果，可點擊閱讀《以SVG展示商品？26款輪播/滑動模板任你選擇。》和《大開眼界：SVG輪播圖創(chuàng)意組合設(shè)計》進(jìn)行學(xué)習(xí)。
少即是多
以克制傳遞價值
早年在著名交互設(shè)計工作室 JZ Creative Studio 的《奢侈品公眾號花式排版指南》分析中有所點明——最高級的動畫往往最質(zhì)樸。滾動廣告、差速滾動廣告、收縮滾動廣告是 E2 編輯器中最為奢侈品、3C 數(shù)碼品牌慣用的 SVG 輪播類型。而切換、漸現(xiàn)等是 E2 編輯器中最為奢侈品、3C 數(shù)碼品牌慣用的 SVG 變化類型。
所謂「高級感」，很多時候已經(jīng)體現(xiàn)在品牌方設(shè)計物料上。讓動態(tài)元素服務(wù)于視覺焦點的構(gòu)建，通過 SVG 交互設(shè)計適當(dāng)強(qiáng)化閱讀的儀式感，自然能讓讀者因格式塔心理學(xué)中的“閉合原則”而主動參與完成交互，對內(nèi)容產(chǎn)生更強(qiáng)的心理認(rèn)同。
尤其當(dāng)下融媒體設(shè)計工作中，交互頁面往往涉及多端同步，小程序、H5、SVG 都需要趨同，遵循“奧卡姆剃刀”原則以確保 Layout 能在多平臺具備技術(shù)可行性。因而克制但鮮明的動畫不僅能更直觀呈現(xiàn)視覺物料品質(zhì)，更能為交互設(shè)計提供安全的技術(shù)框架。
菜單交互
拒絕冗余和繁雜
以往在沒有 SVG 加持的條件下，商品圖文自上而下的堆疊往往顯得冗長，平面設(shè)計師費盡心思才能勉強(qiáng)在一個維度下梳理所有的信息。得益于包括「無限選擇器」等 SVG 模型在 E2 編輯器中的上架，其層級架構(gòu)的精密性、觸發(fā)方式的儀式感、反饋機(jī)制的精準(zhǔn)性都得到了前所未有的提升。
對于微信高級交互排版而言，SVG 的引入既保持了頁面的整潔性，賦予用戶自主發(fā)現(xiàn)的樂趣，讓操作本身成為一種享受。更重要的是，幫助讀者明確當(dāng)前所處的邏輯位置，避免迷失在信息中。正如設(shè)計師迪特?拉姆斯在“設(shè)計十誡”所表述：好的設(shè)計是顯而易見的，它不會讓用戶產(chǎn)生困惑。
以下提供部分采用「無限選擇器」菜單 SVG 交互的圖文：
《小米SU7 正式上市！售價21.59萬起》
《父愛，可超越極限》
《春游最佳「特」助，了解一下》
《特斯拉向您發(fā)出體驗邀請》
《畫春天？來試試》
《A面____，B面____》
《有點新意》
《Gucci Ancora @你》
《同頻心意，歷久彌新》
《游園尋寶》
《心動赴約，奇遇新年》
《家人們，你們的健康我承包了?！?/p>
《萬事開頭難？上手 Mac 可不難。》
《最受學(xué)生歡迎的小米產(chǎn)品出現(xiàn)了》
《大疆發(fā)布經(jīng)緯 M30 系列、大疆司空 2、大疆機(jī)場及禪思 H20N》
結(jié)語
打造 SVG 圖文的 “高級感”，本質(zhì)是在代碼精確性與創(chuàng)意突破性之間找到平衡點。無論緩動函數(shù)的合理應(yīng)用，動畫效果的克制選擇，交互菜單的積極引入，都實則是品牌性格的量化表達(dá)。
最終，每一個像素的移動，每一處按鈕的反饋，都應(yīng)服務(wù)于品牌價值的傳遞。也由此，視覺秩序、交互節(jié)奏與品牌調(diào)性能真正實現(xiàn)平衡。
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）