6個產品細節剖析，看看高手是如何做設計的！

Hi 大家好，智行的周二輕分享專欄來啦～

我們將在這里分享近期一些值得學習的線上案例，快來和我們一起發現隱藏在身邊的動人設計，get 新靈感！

1. 大眾點評：商家驗券

大眾點評在兌換禮品時模擬現實中驗券撕券的動作，這一設計融合了線下日常生活經驗與線上操作。

1. 提高兌換確認感：在模擬撕券的過程中，用戶會有一個明確的“完成”動作，這相比簡單的點擊確認，更能給用戶帶來兌換成功的確認感和滿足感，減少了因操作不明確而產生的疑慮。
2. 提升情感連接與產品溫度：將日常生活中的小細節融入線上產品中，不僅增加互動性和趣味性，還增加了產品的溫度。

2. 小紅書：文字筆記

小紅書推出了全新的文字筆記功能。這個功能可以將你的標題直接轉化為一張精美的圖片，用作筆記的封面。

1. 提升創作效率?：用戶直接將標題轉化為封面圖片，省去了手動尋找或制作圖片的步驟，顯著提升了筆記的創作效率。
2. 簡化操作流程?：用戶只需輸入標題，系統便能自動生成圖片，簡化了傳統筆記發布流程中需要單獨上傳封面的環節，使得操作更加便捷。
3. 增強視覺效果?：自動生成的精美圖片作為封面，能夠吸引更多用戶的注意，提升筆記的點擊率和閱讀量，從而增強用戶的創作成就感。
4. 激發創作靈感?：這一功能為用戶生成個性化的封面圖片，有時還能激發用戶的創作靈感，幫助他們更好地表達自己的內容和想法。

3. 高德地圖：實時天氣

當您在雨天打開高德地圖時，雨天動效將為您帶來全新的用戶體驗升級！

1. 實時信息，助您決策：實時天氣狀況，幫助您做出更準確的出行決策。
2. 逼真動效，身臨其境：屏幕上的雨滴動效，增強了線上與現實場景的連接，帶來極具真實感的沉浸體驗。

4. 美團外賣：會員簽到

美團外賣簽到模塊會利用不同的視覺樣式，根據簽到前后去承載當下場景需要突出的利益點。

1. 簽到前：簽到前利用大小差異的紅包，以明確利益點，并利用輔助動效提高點擊欲望。同時通過錯位排布強化視覺吸引力。?
2. 簽到后：簽到后的形式會變成更加清晰簡潔的進度條，強化透傳后續權益，為更有收益的信息讓位，有利用戶留存和轉化。

5. 智行：酒店榜單

智行酒店榜單根據用戶的不同需求（如價格、交通便利性、用戶口碑等）進行分類推薦，滿足多樣化的用戶需求，幫助用戶在眾多選擇中快速決策，提高預訂轉化率。

1. 榜單品牌動態化：頁面頭部展示酒店榜單的名稱及 3D 圖形，通過流暢的過渡和動畫效果，使用戶在切換榜單的過程中感受到界面的活力和互動性。
2. 頭部氛圍多樣化：不同的榜單的頭部氛圍有明顯的視覺差異。低價榜使用向下的箭頭元素，傳達價格下降的概念；經濟榜使用對勾元素，傳達經濟實惠和推薦的概念；交通榜使用了軌道元素，傳達交通便利性的概念；口碑榜則使用品質感的絲綢元素，傳達高品質和用戶口碑的概念。
3. 主題榜單直觀性：頁面中部通過放大展示不同主題的圖片，直觀地傳達榜單主題，吸引用戶的注意力并引導用戶進行點擊操作。
4. 酒店卡片差異化：不同榜單的酒店卡片布局和風格上保持一致的同時，具有特定的展示重點，能夠幫助用戶快速了解每個榜單的重點內容，提高信息獲取效率。低價榜的酒店卡片突出比價信息模塊；經濟榜突出酒店特色和用戶口碑；交通榜展示酒店交通位置；口碑榜強調上榜理由。

6. 淘寶：省錢周創意

淘寶省錢周通過放大“省”字作為主視覺來吸引用戶注意，并結合紅包元素和商品屬性，既直觀又富有吸引力。

1. 商品屬性的結合：“省”字下半部分結合紅包元素，巧妙地嵌入商品及折扣裝飾，既不影響字體識別度，同時傳達促銷商品的信息。
2. 絲滑的動效表達：通過紅包抖動絲滑切換商品，結合紅包及折扣元素的灑落，增強活動氣氛和吸引力。

最后要說的話

本期的設計分享就到這里啦。

文章中的案例與思考來自于智行 UED 同學的日常分享。

后續我們將持續深度體驗產品，挖掘更多值得分享、學習的設計案例。努力將其中的方法理論應用到智行 APP 后續的產品設計中。

愿我們的努力為你帶來更好的體驗。下次見。

歡迎關注作者微信公眾號：「智行ZXD設計中心」