萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

QQ 影像 for iPhone 設計分享:從工具到情感表達的產品進化之路

手機攜帶性強 + 卡片機級成像,拍攝/處理/分享需求激增。QQ 影像 iPhone 版(iPhone 影像)聖誕季上線,經多版本迭代:從濾鏡打磨 → 陪伴式編輯流程改版,**重心從編輯工具轉向「圖片記錄生活的情感表達」**,確立「一切為了圖片記錄生活」的 App 理念。

營造帶入感的影像環境

首頁演變見證環境營造:

  • v1 擬物場景沉浸感強但擴展性/表義弱;
  • v2 圖標+文字可用性強但工具感重;
  • v3 將功能入口融入生活場景,**首頁成為「編輯生活瞬間的入口」**,強化帶入感。

工具欄捨棄不透明背景,改用半透明/漸變透明承載,工具與圖片相得益彰。普通照片 (3:4) 全屏呈現,系統相冊級操作體驗。整體 UI 採暗環境突出圖片主體,實驗證實暗環境最廣泛適配各類照片,提升專業感。

影像本身:濾鏡體系的 8 維度建構

分析數十款 App 總結濾鏡 8 維度:色溫、飽和度、對比度、復古做舊、膠片質感、繪畫藝術化、失焦、扭曲。原創濾鏡在軸線上可視化排布:

  • 色溫覆蓋冷暖,特效觸及紅/紫傾向;
  • 飽和度、復古、膠片軸線從弱到強均勻分佈;
  • 繪畫藝術化初期靠 Q 拍濾鏡補齊,後續自主優化;
  • 失焦/扭曲僅保守特效(柔光、移軸、魚眼)。

縮略圖策略:固定圖像回歸

經歷 固定圖 → 實時當前圖 → 固定圖回歸。實時縮略圖效果不明顯,無法詮釋濾鏡特色。**最能平衡反映各濾鏡特色的固定圖**成最終選擇。

貫穿始終的圖片主線:動畫賦予掌控感

選擇 → 編輯 → 分享全程圖片可見。分享從獨立頁改為畫板抽動露出動畫;最後一步加入「從畫板拿下圖片分享」動畫,圖片作為生活印記的存在感一氣呵成。編輯時導航隱藏同步動態縮小,**極大化圖片展示空間**。

拇指友好點擊與手勢自然交互

  • 點擊區域優化:模態編輯界面「確定/取消」置底部拇指易達區(非頂部導航),騰出空間給圖片;拼圖刪除可點擊區域擴大至整個縮略圖。
  • 手勢承載高頻操作:切換濾鏡/版式用滑動,滿足「換換試試」心理;滑動力度、動畫縮放反饋貼近自然交互;搖一搖隨機切換版式帶來趣味隨機感。

吹一吹:從傳感器聯想到專利創新

CDC 提出創意:結合人臉識別 + 音頻檢測,動態裁切人臉區域、按氣息大小球形放縮。視覺營造吹氣擬物場景(插入/拔出吸管),交互加入波紋、半透明圓周、聲音反饋引導用戶入場。上線反饋佳,已申請專利。

後記

打磨後的 iPhone 影像獲用戶認可,多次入 App Store 推薦榜。融入生活的 QQ 影像正向 KANO 魅力產品邁進。

文章來源:騰訊 CDC

copyright © 萬盛學電腦網 all rights reserved