計育韜：照片過多，公眾號如何優雅排版設計？
在有些情況下，品牌、校園或政務官方公眾號需要羅列出大量的照片。如果素材出自專業攝影師之手，那么對運營工作者尚且友善；如果照片畫質參差不齊，則要面臨難以用統一設計語言調和的窘境……
那么當照片過多時，到底有沒有好的方法能優雅地完成公眾號排版？本期專題，計育韜老師通過親自交付的若干精彩案例和部分其他團隊的優秀作品，講授具體的素材設計、頁面布局與交互開發思路。
方案一：讓照片更具有「照片感」
《轉眼，就站在了2023年的最后一天。》
企業年終總結，往往涉及大量的照片展示。格蘭富公眾號在年底的《轉眼，就站在了2023年的最后一天。》中通過如以上的方式，將照片以不同的角度平鋪擺放。點擊后，一條線從刊物版面出發，勾勒部分的照片細節，并隨著圖文的展開持續前進。
在現實中，照片內容本就各不相同，當我們的設計越模擬真實，讀者對照片的視覺統一性預期就越低。通過這種設計方式，原本略顯枯燥的照片與文案內容反而更顯生動，并且通過線索的 SVG 運動呼應了年度總結的主旨。
在這篇 SVG 交互作品開發過程中，計育韜老師通過 <touchstart> - <click>的雙重觸發將軌跡描摹與畫布展開同時激活，值得一提的是此處還融入了「關懷設計」，即便用戶不做點擊行為，也會在若干秒后開始強制執行動畫，由此確保了企業中的中高層領導以及外籍人士等相對不熟悉 SVG 操作的讀者可以順利瀏覽內容。
《第一個，宜昌！》
我們也可以考慮在三維空間中，基于 perspective 3D 的 CSS 布局技術，將照片以不同角度懸掛在開發者創建的公眾號坐標系內。正如三峽日報的《第一個，宜昌！》中所呈現的照片群展。
計育韜老師一般推薦perspective: 1px;空間尺度，同時注意在開發過程中，避免過于密集排列圖像進而造成 iOS 渲染故障。
方案二：宮格布局提升畫面故事性
《牧馬人冬季低調創造》
宮格是漫畫的通用載體，同樣也可以是公眾號排版的照片框架。如 JEEP 《牧馬人冬季低調創造》中的高清美圖就以宮格進行布局，“無中生有”誕生了一段故事情節，并通過彈出式海報支持用戶保存壁紙。在設計層面，車體采用了突破宮格的巧妙半摳圖設計，且宮格線包含了不規則傾斜，靈動而大氣，讓照片緊密卻不擁擠，豐富卻有重點。
宮格布局的另一優勢在于故事性（Storytelling）的強化可以對應弱化讀者對照片視覺統一性的預期。體現故事進程的照片可以用更真實的色彩還原現場體驗，我們以百威中國《點滴心意，水援千里》為例：
《點滴心意，水援千里》
路人「生圖」，尤其賑災工作中的圖像資料品質是尤其難把控的。從純設計層面來講，簡單平鋪只會傳遞出一種潦草敷衍的態度，造成適得其反的傳播結果。這種情況下設計師不妨通過宮格布局，結合文案設計提升畫面的故事感，讓照片轉化成一種親臨現場的感官憑證。
方案三：照片風格預處理
《雖遲但到！看這條公眾號，你一定會笑笑笑笑！》
使用相似的照片參數與濾鏡策略，即便是思政主題設計，大量的照片也一樣可以美觀陳列。作為 E2.COOL 黑科技 SVG 編輯器第一屆 1024 節投稿大賽冠軍作品，西部空天的《雖遲但到！看這條公眾號，你一定會笑笑笑笑！》為廣大政務新媒體崗位同志做了極佳的示范。
對融媒體工作而言，照片品質可能是進展延緩的原因，但必定不是作品粗糙的理由。在這里領域內，將海量照片美觀排版可以說是政務新媒體人的基本功之一。我們再以東線聯勤兵的《96年過去了，這支叫人民子弟兵的軍隊從未改變……》為例，這篇圖文的設計采用史料照片與 AIGC 人工智能生成相結合的方式，基于統一的黑白/做舊風格進行 perspective 3D 視差排版，歌頌了人民軍隊 96 年來的光輝歷史：
方案四：在線數字展覽設計
此前計育韜老師在《云 看 展，請 進 → → →》中，另外為廣大運營人介紹了幾種在線表現大量照片畫面的優雅排版策略，可以點擊藍色標題重溫。這里額外推薦一個 3D 櫥窗型的 SVG 交互效果，最早由計育韜老師發明并授權于 E2.COOL 黑科技 SVG 編輯器作為模版呈現，那就是「黑科技編輯器 | 視差相冊（縱向8圖）教程」模型。
在小紅書的《起猛了，看見外灘同時升起200個月亮》中，這個模型充分實現了用戶投稿照片的優雅展示：
《起猛了，看見外灘同時升起200個月亮》
更多行業頂尖 SVG 交互案例作品，歡迎移步 iSVG 公益免費搜索引擎：http://www.isvg.com/
第二屆中國 SVG 開發者大會很快將召開，這次除了行業各領軍開發者/團隊外，如果你與計育韜老師曾在學術和項目層面有過深度交流，屆時也歡迎通過指定渠道報名參與。如有其他合作需求，請添加微信：Zhuoya_Work 咨詢。
-END-
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）