UI設計師的產品體驗日記 02 期
前言
靈感來源於日常的積累，只有當你擁有足夠的腦存量的時候，你才有可能會爆發那顆小宇宙。每天堅持體驗和記錄，記錄下那些打動你的設計和互動形式，分析那些具備相同屬性的設計表現，同樣的功能業務會有那些設計解決方案呢？這些疑問都是需要你在日常的體驗中不斷總結。
1. 一直播
頂部橫向標籤導航是很常見的一種導航模式，方便使用者在不同功能模組之間進行快速切換。大部分產品的橫向標籤導航都採用文字的形式，一直播在文字上添加了與分類名稱相符的圖示，如圖中的關注、熱門、發現、明星，在導航分類上增添了趣味性，在細節上提高使用者體驗。（胡羊 摘錄）
2. 網易雲音樂
鯨雲音效的音畫主題，聲音視覺化，探索音樂更多存在形態，目前提供了純美古風、激燃電音、孤獨患者等主題。看著音樂化作炫綵線條、水母裙襬、漣漪擴散樣起起伏伏，聽眾得到了視聽雙重美的享受。
記得小時候用按鍵手機放音樂，看著頻譜小格格起起落落髮呆，樸素美好。有些人說雲音樂不務正業，不好好弄版權，淨弄些花拳繡腿。在此不做評論，我覺得鯨雲音效是好的嘗試，而且還能吸引更多人成為會員。（馬滕 摘錄）
3. MOO音樂
與大部分的音樂 APP 相比，MOO音樂讓人眼前一亮的是它的播放介面，沉浸式的大圖體驗以及底部的動態頻譜，可謂是看得見的音樂節奏。
同一首音樂會隨機匹配不同的背景圖，當你每次開啟聽音樂時都有新鮮感，而不是總盯著一張專輯封面不停旋轉…（秋芸 摘錄）
4. Cuto 桌布
Cuto 不會像其他桌布軟體那樣直接給你裁切好的桌布，而是將製作權交給了使用者，使用者可以通過左右滑動選取自己喜歡的圖片區域，並且可以對圖片進行模糊度調整，大大的提高了使用者的參與度和桌布的可用性。
使用者可在 Cuto 中直接預覽鎖屏介面和主介面效果圖，省去了每次下載過圖片後都要去系統設定中預覽效果的麻煩，減少了不必要的跳轉。（秋芸 摘錄）
5. 好奇心日報
好奇心日報主要以圖文新聞為主，所以整個互動簡單，只留下兩個 Tab 和一個浮窗，個人中心等功能入口均收入在浮窗中。
往上滑動資訊時，頂部的狀態列、浮窗會隱藏（浮窗不會隱藏許久）。讓使用者更加用沉浸於新聞中，不受其他資訊的干擾。（柳青 摘錄）
6. 愛奇藝 花式集錦
使用者在進入愛奇藝後，在首頁banner下方隨意長按某一個視訊，可以跳轉至“花式集錦”讓使用者觀看視訊的精彩片段，便於使用者選取自己感興趣的視訊觀看，節省了使用者來回跳轉的步驟。
在瀏覽視訊集錦的時候，隨著你往下滑動，會點亮下一個視訊集錦，上一個隨之變暗。讓使用者視覺更好的注意在當前視訊。（阮平 摘錄）
7. 馬蜂窩旅遊 icon 設計
開啟馬蜂窩，最吸引我的便是它的icon設計，不同於其它APP，這款APP的金剛區部分採用了“摺紙風”主題icon的設計，很吸晴。
icon的摺紙風格又與擬物風格融洽的結合，別具匠心的圖形化設計不僅增加了閱讀的趣味性，還清晰易懂，將資訊更加準確的傳遞給了使用者，辨識度較高。
icon的顏色採用了較為明亮的色彩，漸變過度舒緩，烘托了產品氛圍，活潑而歡快，很好的吸引了使用者的眼球。（小石頭 摘錄）
8. ENJOY
首先取名 ENJOY 就不同於一般美食 App，突顯其高格調。首頁的第一個 banner 圖會根據當天的日期每天變換，有很好的情感代入而非生硬的廣告植入，讓使用者每次開啟軟體都有一種情感共勉，因為有這樣的積極情緒，使用者會很自然的點開專題瀏覽商品從而提高訂單量。（愛臭臭的幸福 摘錄）
9. 毒 App
毒，是一款 sneaker 和運動潮流文化人群聚集地的應用。在下拉重新整理的時候，載入的是以一些錯亂的線條到組合成“毒”字的過程。為其增加了趣味性，同時“毒”也是品牌角色，加強了品牌印象。（小夥汁 摘錄）
10. Artand
Artand是一個藝術品社交平臺，現在市面上很多App第一次開啟軟體就彈出類似開啟通訊錄、選擇感興趣的內容等等，大部分使用者都是選擇不看內容直接跳過。而Artand第一次開啟軟體時並沒有任何干擾使用者主觀意願的操作，也沒有讓使用者選擇感興趣的欄目，這樣使用者直接沉浸在藝術的氛圍，tab欄右側的自定義欄目也可以滿足使用者自己編輯tab內容的需求。（愛臭臭的幸福 摘錄）
11. 淘寶語音輸入
淘寶更新後添加了語音輸入，按鈕的位置放置在鍵盤輸入的上方而不是常規的放置在搜尋框的右邊。這樣可以讓使用者更直觀的看到這個語音輸入的按鈕，不至於被忽略。
同時這個按鈕的放置位置正好可以讓我們在使用鍵盤輸入的時候可以很方便的點選，很大的提高了這個按鈕的使用率，提升了使用者體驗。（有名兒 摘錄）
12. 飛豬機票訂購
在飛豬，當進入機票訂購頁面後，出現彈層提示當前有 幾位使用者正在瀏覽此航班，營造出一種緊迫感，促使用 戶快速下單。顯示6s後消失，不會對使用者產生任何資訊干擾。
當用戶向下滑動，頂部航班資訊消失，留下時間資訊一 直懸浮在上方，以便使用者反覆確認訂票時間，降低了用 戶定錯時間的概率。（嬌嬌 摘錄）
13. 星巴克 星禮卡
星巴克 App 當用戶點選星禮卡圖示時該產品的按鈕會根據使用者當前擁有禮卡狀態更換文字提示，節省了⽤戶思考時間及操作步驟，提⾼了商品轉化率。（白起 摘錄）
14. 得到&喜馬拉雅
在體驗這兩款App時，發現他們都有一個共同點，都會記憶上次的播放內容。得到是以一個彈框的樣式；喜馬拉雅是通過底部tob欄的icon的樣式。這樣可以更好的提升使用者體驗，降低使用者尋找播放歷史的時間。（fell 摘錄）
15. 今日頭條 遊戲廣告
最近在使用今日頭條APP中，遊戲廣告可以以短視訊的形式推送給使用者，不僅可以“點贊”“評論”“分享”以外，還多了一個試玩功能，讓使用者可以馬上真實的體驗到遊戲。（Today 摘錄）
16. Artand 微動效
Artand關注作品前的關注按鈕是黑色的心形，點選按鈕從視覺上會有一個由黑色的心變成紅色的心的小動畫，手上會有“咚咚”的觸感，當用戶去點選這個按鈕的時候既眼前一亮，又會有一種 “嗯，是心動的感覺”。（愛臭臭的幸福 摘錄）
17. 餘音 App
餘音的Slogen是：簡而美的獨立音樂雜誌，一款極簡文藝風的產品。設計風格採用大字型和圖片以及大量的留白，介面非常的極簡。同時將側邊欄放在了右側，資訊佈局採用右對齊，使用者操作便捷。（阮平 摘錄）
18. 唯物 App
日期放在主頁左上角的位置，很醒目。點選進去是大家的最新動態和當前較熱門的話題，相當於為使用者節省了篩選內容的時間，直接顯示了大部分使用者感興趣的內容，更容易吸引使用者。（大西瓜 摘錄）
19. 蘇寧易購 底部icon處理
當頁面停留在首頁時，底部icon不只是把此狀態顯示出來，同時變成此頁面的另一個操作，點選猜你喜歡會快速滑到對應版塊。
分類頁面也是如此，選中會變成搜尋，再次點選會跳轉搜尋頁面，方便使用者進行快捷操作。（小鯨魚 摘錄）
20. 高德地圖 引導頁設計
更新高德地圖App後，在引導頁的設計中運用了場景插畫設計與動效處理結合，讓使用者對於產品的功能一目瞭然，使用者體驗更佳。
這也體現出UI設計師的更高要求，除了完成產品介面設計以外，基本的插畫功底和動效設計功底需要掌握，大家互相努力！（大錘 摘錄）
21. 小紅書截圖創意 + 分享功能處理技巧
一、在 iPhoneX 體驗小紅書，截圖後劉海區域會放置小紅書的 logo，充分利用了該區域的空白區。
1、方便使用者在後期看到截圖時可以快速回憶起是哪個產品的截圖；
2、使用者若在截圖後分享也能增強產品品牌曝光度。
二、在截圖操作完成後，頁面會自動跳轉分享介面，對於有分享需求的使用者可以更好地進行操作。
三、截圖後會在左下角有縮圖，縮圖會影響使用者下一步分享操作，小紅書的解決方案是：
1、縮圖停留的幾秒，分享渠道的操作icon會後移，這樣不會影響使用者立即操作；
2、縮圖消失後分享渠道icon會滑動至合理的位置，這樣也不失頁面平衡。（小鯨魚 摘錄）
22. UC 瀏覽器
UC瀏覽器的首頁開放了第三方軟體入口，方便使用者有需求時可以直接進入，避免重複搜尋。當進行上滑後會隱藏，且不會因為下拉操作重複出現，方便進行新聞瀏覽。完美的處理了第三方軟體和自身軟體的結合運用和權重分配。（九思 摘錄）
23. QQ 音樂播放介面
利用QQ音樂播放音樂時，當滑動歌詞右邊會出現播放小按鈕，使用者想聽那裡能直接跳轉，體驗更加友好。（樑嘉良 摘錄）
24. 喜馬拉雅 FM
狀態列、導航欄以及banner圖後面的背景顏色都會和banner圖的色相保持一致。使介面上半部分在banner圖切換時視覺表達更加協調自然，banner圖的內容傳播也能得到更好地強化。（北枳 摘錄）
25. 知乎的下一個回答
舊版中查看回答頁面，右下角的“下一個回答”按鈕，下拉的引導不夠突出。新版本里改為下拉箭頭和文字雙重提示，使用者更直觀的知道下拉來檢視下一個回答。（胡羊 摘錄）
26. 夸克瀏覽器
1、夸克瀏覽器將整個導航欄內容佈局到介面底部，這樣基本上所有的功能都可以單手操作，同時也增加了瀏覽器的產品差異性。
2、夸克瀏覽器的拓展頁面，改變了以往的縱向與橫向疊加排列形式，變成了一頁至多顯示 6 個可滑動式佈局，使介面顯示得更清晰、整潔。（北枳 摘錄）
27. YouTube
使用者在觀看視訊時，手指拖動視訊到下方，視訊將自動等比縮小以浮層形式展示，使用者可以繼續瀏覽其它感興趣的內容。
如果想放大視訊，只需輕輕向上移動，也可以左右滑動直接刪除，非常便捷的互動處理。（九思 摘錄）
28. 蘑菇街
1、蘑菇街金剛區有一個不透明度的下拉分類按鈕，使超出數量的圖示隱約可見，不但使整個重要區域不至於太過臃腫，而且更顯精巧。
2、使用者分享自己的穿搭秀，點選穿著的衣服會立馬顯示出衣服的牌子價格和購買途徑。將社交、買家秀與產品更好的結合在了一起，方式新穎。（北枳 摘錄）
29. 蝦米音樂
蝦米音樂的 AI 電臺中，隨心聽的音樂，點選不喜歡，會切換歌曲和彈出彈窗讓使用者選擇不喜歡的理由，逐步完善該使用者喜歡聽的音樂型別，以便更好地推送給使用者，加強後期的使用者體驗。（樑嘉良 摘錄）
30. B站長按點贊功能
在體驗B站APP時，長按點贊按鈕，能同時實現點贊、投幣、收藏功能，讓使用者如果同時需要操作三個功能支援up主時可以更便捷。對於視訊作者，其視訊的推薦增多意味著能提升熱度，從而增加曝光機會，也就能獲得更多的收穫，還能更加激勵自己做出更優質的內容。（楊洪瑞 摘錄）
31. 今日頭條
在今日頭條閱讀文章詳情時，當閱讀接近文章結尾時，分享轉發圖示會由線性風格轉變為漸變加強。以此突出來提醒使用者，引導使用者進行文章分享，加強文章的曝光度，因而啟用更多的平臺活躍度。（六夢 摘錄）
32. 轉轉
轉轉的品牌 LOGO 是頭上長著發條的小熊，品牌色為偏粉的紅色，對標鹹魚走可愛風格。在“我的”介面中，使用者頭像上放了發條裝飾，足跡特意使用了小熊掌，紅包中心有小發條，底部標籤欄“我的”icon 是小熊，頭部背景和底部圖示使用了品牌色，非常具有品牌識別性。（馬滕 摘錄）
33. 支付寶 領取地鐵電子卡
對於第一次使用手機乘坐地鐵的使用者，如何有效地引導使用者領取電子卡片並掃碼通過閘機是設計師需要思考的問題。支付寶給出的方案是在卡片領取頁面通過可重複播放的趣味小動畫引導使用者瞭解掃碼支付的流程，這樣的情感化設計不僅貼合實際使用場景，相比圖文說明更容易讓使用者快速理解。（蟲尾巴 摘錄）
34. 支付寶 乘車掃碼
當系統檢測到使用者在乘車碼介面有截圖行為後，會以彈框的形式提示風險操作。作為安全支付類軟體，支付寶站在使用者的角度考慮到了這個場景，提高了產品的容錯性。（蟲尾巴 摘錄）
35. 網易雲音樂歌曲評論
廣告一直被認為是體驗殺手，網易雲音樂的設計師將評論區的票務廣告巧妙地與評論列表形式保持了一致，演出和評論一樣可以被點贊，即便去不了演唱會也可以通過點贊精神支援一下，這樣的解決方案不僅保證了產品體驗，也解決了產品商業化的需求。
另外，評論框的預設文案充滿了感染力，無形之中帶給使用者愉悅的使用體驗。（蟲尾巴 摘錄）
36. 悅動圈
在使用悅動圈開始跑步的時候，想要暫停或者結束本次跑步時需要滑動螢幕下方的橫條，然後選擇恢復和結束本次跑步，這樣大大降低了跑步時出現的錯誤率。（Mars 摘錄）
本期分享到此結束，我們下期相遇。
本文由團隊成員整理編輯，釋出於站酷，僅作為學習交流，勿做他用。