起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品細節洞察分析，看完這些你離大廠又近了一步（2021-11）
編輯導語：不知道你有沒有留意過，大廠們的產品都是如何設計的？通過對大廠產品細節的剖析，我們可以獲得更多經驗，更高效地做出提升用戶體驗的產品。本篇文章里，作者就對一些大廠的產品設計細節進行了剖析，一起來看一下。
目錄章節
- 【58同城】發布與發布-按鈕賦予雙重功能，提升視覺降噪
- 【微信】雙擊放大-文字全屏顯示，識別清晰閱讀流暢
- 【ZAKER新聞】長按編輯-結合易用性賦予更多探索體驗的樂趣
- 【高德地圖】家人地圖-位置一目了然，電量及時顯示
- 【支付寶】外賣了然于心-高效及時的顯示送達距離與時間
- 【酷狗音樂】空歌狀態-用趣味插圖，替代文字提醒
- 【抖音】評論兼顧視頻-查看評論，也能同時觀看視頻兩不誤
- 【豆瓣】邊刷文字邊聽歌-愜意時光，享受一個產品的開闊體驗
- 【微信】搖一搖-性別不同，圖案的顯示也不同
- 【汽車之家】按鈕消失-強化發布功能，瀏覽時也為頁面降噪
一、【58同城】發布與發布-按鈕賦予雙重功能，提升視覺降噪
1. 使用場景
在58同城上進行發布閑置作為賣方等角色和在社區發布交友內容作為社交時，兩種發布如何讓用戶更好理解更容易使用。
2. 設計思考
設計目標：解決用戶發布需求與發布社交的檢索容易度，為頁面降噪突出發布按鈕功能。
設計方案：在首頁和發現兩個模塊中，發布按鈕給予不同的圖標顯示，做為瀏覽頻次最高的首頁，發布類型多樣是滿足大眾用戶較好的一個放置入口，加號圖標承載著匯集含義，點擊后所承載的內容是豐富的。相機圖形，明顯給人更直觀理解，拍照相冊文字發布，更多包含于社交場景下的功能使用。
兩個功能圖標的合并更多是降低用戶學習成本和視覺降噪來進行的優化，發布按鈕放在底部并且居中位置，本身也是符合菲茨定律，距離手指目標越短，越容易操作，同時也兼顧左右手不同用戶的使用，是一個很好的設計點。
二、【微信】雙擊放大-文字全屏顯示，識別清晰閱讀流暢
1. 使用場景
對于視力障礙和嘈雜環境、地鐵等身體晃動看不清文字的用戶提供的大字顯示。
2. 設計思考
設計目標：解決用戶看不清文字，閱讀費力的問題，提升閱讀識別性，讓產品更易用更好用。
設計方案：在聊天頁面中，發來一段語音，由于嘈雜的場景不便于聽，可長按語音轉文字閱讀，當文字很長閱讀費力時，可通過雙擊點擊文本內容激活放大顯示功能，進行閱讀查看，提高產品易用性，給用戶帶來良好的閱讀體驗。
三、【ZAKER新聞】長按編輯-結合易用性賦予更多探索體驗的樂趣
1. 使用場景
如今的產品功能不斷增加，讓原本精簡的頁面變的臃腫起來，ZAKER新聞在訂閱板塊中如何通過視覺降噪提高產品使用，我們來看下。
2. 設計思考
設計目標：解決視覺干擾問題，把不常用的功能進行隱藏，通過觸發激活功能，提高用戶操作探索嘗試，提升內容聚焦性。
設計方案：在資訊模塊訂閱導航中，展示了每個頻道模塊，用戶通過長按頻道激活編輯，進行位置移動和刪除功能，但凡把功能做隱藏，就注定增加了用戶學習成本，ZAKER新聞在觸發時長上做了優化，用戶只需長按0.5s左右即可激活編輯，相較于1-2s的觸發時長，操作成本降低了很多，也是對產品易用性的一個優化。
四、【高德地圖】家人地圖-位置一目了然，電量及時顯示
1. 使用場景
地圖的使用場景大多在于尋找目的地或者參看不同路段的實況信息，但對于家人位置安全等卻是很少會考慮到的一個場景。
2. 設計思考
設計目標：解決地圖使用場景單一問題，增加家人地圖給用戶實時顯示，提高產品使用率。
設計方案：如果你經?？次业奈恼?，想必還記得第二期中iPhone查找功能。高德地圖的家人模式，是iPhone查找的升級版，進入我的-家人地圖，可以直觀查看到家人距我的位置，可以通過打電話或去找Ta來快捷使用高德地圖，不僅如此，當進入家人地圖頁面時，還有電量狀態顯示，當家人手機電量過低時可以及時告知親人進行充電以免帶來無法使用手機的風險。
高德地圖從原本只有的地圖導航功能，拓寬到各場景中，衍生出家人地圖模式，不僅為產品本身帶來正向流量，也為用戶帶來更多便捷的服務體驗，這本身就是為用戶體驗做出的一次嘗試。
五、【支付寶】外賣了然于心-高效及時的顯示送達距離與時間
1. 使用場景
支付寶是阿里旗下最重要的服務理財支付匯集型產品，對于在支付寶-口碑中點外賣的用戶同樣提供配送提醒。
2. 設計思考
設計目標：解決在支付寶消費實時訂單后的實況反饋提示，優化提示機制，提高產品易用性，提升付費下單率。
設計方案：在使用支付寶點完一單外賣后，回到首頁，在中間區域會優先展示訂單實時信息，以及配送距離等，給用戶明確提示，不需要進入多級頁面繁瑣查看，減少交互路徑。當用戶要查看詳細信息只需點擊外賣模塊直接進入訂單信息頁面，相比餓了么，用戶下單后，首頁只展示縮略信息，并不能給用戶直觀信息呈現，還需要點擊進入訂單信息頁面才能查看具體內容。
對比兩者，支付寶外賣提醒交互路徑更短，更易于用戶查看。
六、【酷狗音樂】空歌狀態-用趣味插圖，替代文字提醒
1. 使用場景
空狀態的使用場景一般都很受限制，在空狀態之內再添加插畫等配圖，給用戶不同的信息反饋，提升產品溫度，使用的親切感。
2. 設計思考
設計目標：解決空狀態形式單一，空狀態下操作內容時文字提示的機械感受，提升產品情感，強化用戶使用酷狗音樂的心智。
設計方案：當沒有播放列表沒有歌單時，點擊進入歌曲頁會展示黑膠唱片圖形，告知用戶當前沒有歌曲，當點擊分享或空白處時，唱片圖形切換成瞭望塔插圖，同樣是空狀態展示，后者即有點擊圖標的反饋信息又有傳達更深層次的理解，暗示用戶查看更多好歌再去分享給好友的深層意思，當然不同人看到會有不同的理解。但通過設計手法增加空狀態的不同呈現內容，本身就起到了激發用戶探索產品的欲望，同時較好地讓用戶使用產品本身。
七、【抖音】評論兼顧視頻-查看評論，也能同時觀看視頻兩不誤
1.使用場景
在觀看視頻時，查看評論區時往往都會和視頻產生分割，不能邊看視頻邊看評論。
2. 設計思考
設計目標：解決用戶一心二用的問題，提供邊看評論邊看視頻功能，增加產品使用體驗。
設計方案：這個表現手法快手上最先看到，因為這本身就是快手的一個特點，我在這里不加贅述。
抖音做為UGC內容，給予用戶創作權限也是最大的，用戶可以上傳橫屏與豎屏內容。針對橫屏內容，進行評論與視頻同時顯示，因為視頻寬度不變，高度的黑色區域顯示評論，兩者互不影響，同時保證觀看體驗一致性。
但豎屏不支持與評論同時顯示，究其原因，評論區的浮層展示高度受限，豎屏本身內容過，與評論區同時顯示會壓縮整體尺寸，信息采集少且看不清內容，可能還會帶來不好的瀏覽體驗，與其添加此功能不如不添加。
八、【豆瓣】邊刷文字邊聽歌-愜意時光，享受一個產品的開闊體驗
1. 使用場景
熟悉豆瓣的用戶在瀏覽影評，興趣小組等模塊時，配上音樂氛圍感直接拉滿，并且可以更專注查看內容。
2. 設計思考
設計目標：整合業務功能，把豆瓣FM植入豆瓣產品中，提高推廣度同時給用戶視覺聽覺雙重享受，增加使用粘性。
設計方案：進入豆瓣首頁通過左滑或點擊左上角漢堡圖標，展開抽屜模塊，在右下方瓷片區有豆瓣FM入口（沒使用過的用戶不顯示播放器）點擊進入歌曲播放界面，用戶可對歌曲進行更多操作，關閉時同樣通過下滑手勢快速回到上一級中，把聽音樂變得輕量化，在用戶正常瀏覽內容時不會進行視覺干擾，隨時想聽就聽，很好的整合自家產品矩陣來一次服務好用戶。
九、【微信】搖一搖-性別不同，圖案的顯示也不同
1.使用場景
你如果只使用同性別注冊賬號并且使用，不會發現細小的設計亮點，就如同下面這個案例；左邊男性、右邊女性。
2. 設計思考
設計目標：按用戶性別區分，用圖標傳達用戶群體的特征，讓產品更貼合用戶使用。
設計方案：當你在微信設置男性時，進入搖一搖頁面會是握拳的姿勢抓著手機，當你在微信設置女性時，此頁面會出現食指和小拇指伸直的圖標，二者在性別中做出圖形區分，目的降低用戶屬性的不貼合，給用戶產生困擾。
男性具有陽剛、力量等屬性，由拳頭衍生出抓手機體現出專注且有力量，同時通過圖標告知用戶搖手機時要抓緊防止脫手。
女性具有優雅、柔弱等屬性，手指相比男性纖細修長，握手機這么野蠻的動作當然不能做啦，通過撬指頭的方式呈現給女性用戶，凸顯出幾分俏皮感。相反男性用戶使用撬指頭的圖標多少會感覺有些娘，畢竟在微信里面使用陌生交友功能時，感受更真實。
十、【汽車之家】按鈕消失-強化發布功能，瀏覽時也為頁面降噪
1. 使用場景
經常會有產品在右下角常駐一個添加按鈕，在瀏覽時會遮擋部分內容，同時純色圖形在頁面中也形成了視覺干擾。
2. 設計思考
設計目標：解決按鈕干擾以及遮擋部分信息的問題，通過設計表現強化按鈕功能，同時優化用戶瀏覽閱讀體驗。
設計方案：當用戶瀏覽廣場頁內容時，通過上滑查看更多內容，按鈕隨著用戶手勢進行消失。當上滑時，表示用戶在進行瀏覽內容，按鈕消失；當用戶停留一段時間或向下滑動表示用戶返回頂部，這時候用戶可能是要發布內容，按鈕隨即出來。
通過產品IP移植與按鈕上方，形成了視覺聚焦，給用戶強提示；用戶瀏覽內容時，按鈕消失，進行降噪處理，提高用戶瀏覽體驗，一舉兩得的優化點，值得學習。
十一、結語
設計師要有發現美的眼睛。美不僅是視覺，還有好的體驗流程。不要讓用戶思考，這是每個設計師所追求的。認真記錄產品細節，了解背后的思考，也是不斷提升自己邏輯思維和表達能力的一種方式。
本期產品細節分析結束，我們下期再見！
作者：碳水Sir；公眾號：草蓉三石
本文由 @碳水Sir 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
