起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品細節剖析，讓你看看大廠是如何做設計的（2021-10）
編輯導語：一款好的產品除了功能過硬之外，還需要讓用戶在使用的時候感受到舒適，提升用戶的體驗感。而這些，往往體現在產品設計的小細節中。很多時候，我們喜歡一款產品，卻說不上來哪里打動了我們，其實被我們忽略掉的就是那些能夠提升產品體驗的小細節。
設計師最重要的是要跳出純畫圖的桎梏，從設計表現的執行層面往后延展，擴寬自己的眼界，并非只停留在對原型稿的美化。
在設計過程中需要思考自己的工作能給業務、公司帶來多大的商業價值，站在業務和用戶體驗的角度思考，從產品的底層邏輯出發，去挖掘設計機會點，利用設計手段來助力、驅動業務的增長。
用戶想要的并沒有那么復雜，設計師只需要在滿足產品需求的情況下做一些細節的處理，這可能是一個功能流程的優化、符合用戶預期的視覺表現、打動用戶心理的感情牌、意想不到的驚喜、制造行為錯覺、提前行為預判、迎合人性的弱點等，將用戶轉化的最后一道心理防線擊潰。
136.?「淘寶」拍立淘-自動拆解圖片上多個商品
1. 產品體驗
在淘寶使用拍立淘搜索時，若同一圖片中存在多個商品，可通過點擊圖片對應位置或在識別結果列表更換類型。
2. 設計思考
有些商品因在其他地方見過，但總有那么幾款叫不上名字，或者一堆的外文無法描述，進入電商平臺不知從何處下手，沒法搜索。
為滿足不同用戶需求，淘寶拍立淘的上線為產品搜索結果的精準度提高了許多，對于那些不知名的商品，一張圖片即可匹配出多款類似商品，解放了純文搜索關鍵詞無頭緒、無處下手的苦惱。
淘寶為提升拍立淘搜索結果的精準度，當拍攝/上傳的圖片存在多個商品時，系統將整張圖片上可能存在的多個商品進行單個拆解，以列表的形式顯示在頂部，點擊縮略圖或圖片上的商品位置，即可切換商品類型，以便于用戶通過不同的渠道查找，提升解決用戶需求的幾率。
我們都知道，單個選擇總是會有太多的局限性，每給用戶多提供一個選擇，解決問題的幾率能得到很大的提升，哪怕這個方法不是那么的高效?；蛟S將淘寶的關鍵詞搜索、找相似、拍立淘等多個搜索渠道結合運用，總有一種方式會幫你找到想要商品。
（或許拍立淘所呈現的結果并不是我們想要的，但它作為一個搜索渠道的存在，總有一次會給你帶來幫助。以前遇到問題上百度，可軟件終究不是萬能的，當知道還有360搜索、谷歌搜索、知乎……時，解決問題的幾率瞬間提升了很多）
137.?「ZCOOL站酷」給應用添色不少的Tab bar動效
1. 產品體驗
站酷底部Tab欄的圖標，除了使用常規的動效，還加入了俏皮的表情和潛移默化的視線，表達生動且趣味化。
2. 設計思考
Tab bar是用戶進入應用里的第一觸點，傳達著整個應用的理念和架構信息，其作用是不可替代的，通過Tab bar的設計是否精致而感受設計的標準，不管是精致還是粗糙，在操作切換中就能感知。
站酷Tab bar的圖標僅僅是為了動效而做動效，其中加入了俏皮可愛的表情和潛在的視線，而不是單純的設計一個動作的反饋。
趣味化的表達更吸引眼球，增加視覺關注度，在過渡的時間差中，通過默認和選中狀態的前后差異對比，操作后出現俏皮的表情，給用戶帶來不一樣的情緒變化，提升操作的愉悅度和期待感。
這種動效給用戶體驗帶來的正面效果十分明顯，給應用添色不少。
138.?「京東」合理的引導-高效的完成表單內容
1. 產品體驗
在京東新建收貨地址時，當收貨人信息輸入完成，點擊鍵盤上的下一項，光標會直接切換至下一個輸入框，以便無間斷性的繼續完成對表單的輸入。
2. 設計思考
不管是APP還是Web端界面設計，表單是我們最常見的元素之一，也是設計師必須要親身經歷的設計組件，合理的表單設計能提升用戶的完成幾率及效率。除了合理的視覺呈現，其還可以在優化操作步驟、流程等，給予用戶合適的引導，提高用戶的心理預期。
在京東新建收貨地址時，當完成一個表單內容，系統會在操作鍵盤提供跳轉下一項的輸入的快捷路徑，無需在頁面中點擊輸入框定位光標，有利于用戶無間斷性完成表單輸入。
本人親測：80%以上的表單錄入還是最常規的操作，比如，完成一項內容輸入后點擊頁面上下一個輸入框定位光標，如果被鍵盤擋住，還得通過滑動頁面或隱藏鍵盤后去觸發下一項操作，基于常規，廣大用戶也并未感覺有什么不妥。
如若深究用戶體驗，可以做的更好，京東通過鍵盤可視化的快捷按鈕，引導用戶快速進入下一項操作，將流程路徑進行簡化，讓完成表單變的更加高效。
139.?「高德地圖」WiFi下離線數據自動更新-降低導航誤差
1. 產品體驗
在高德地圖設置中，開啟WiFi下自動更新離線數據，設備在WiFi環境下即可自動下載離線數據包，時刻保持最新的地圖數據，減少在使用過程中的誤差。
2. 設計思考
地圖軟件為我們的出行帶來了極大的便利，但最悲催的莫過于通過導航到達終點后，與真實的需求目標不符，原因竟然是地圖沒有更新。其實地圖類軟件數據包的更新相當頻繁，如果不是特別大的變動，基本通過熱更新（無需下載，進入應用在線更新）就可以完成。
在高德地圖的設置中，開啟WiFi環境下自動更新離線數據，方便用戶在需要時，隨時能使用最新地圖導航信息，避免用戶在導航數據不是最新、而需要單獨花費時間去下載，如果存在信號較差或WiFi不便的情況，則會浪費更多的時間，甚至影響出行，開啟自動更新可減少導航過程中出現的誤差，節省用戶時間成本。
（視情況而定，不需要的用戶關閉即可。但最坑的是：待你行駛在外地車牌禁行的道路上、無法獲取新開通的道路而繼續導航老舊路線……）
140.?「馬蜂窩」根據用戶使用場景進行行為預判
1. 產品體驗
進入馬蜂窩APP首頁，當頁面存在上滑操作時，tab欄除了發布入口，其他都會隱藏起來，頁面2秒內無操作或下滑時，tab欄會再次完整顯示。
2. 設計思考
通常我們在APP里使用某個大的功能時，會通過tab欄來尋找，一個功能清晰明確的tab欄能在一定程度上提升用戶體驗，很多產品會通過動效、圖標的精致程度、高效的標簽信息等細節來提升用戶的好感，還可以通過視覺美觀、反饋清晰的tab欄來傳達品牌形象。
馬蜂窩的底部tab欄使用了不一樣的交互方式，其表現手法在當前的各大APP中還是很少見的。根據用戶使用場景進行行為預判，當頁面存在上滑操作時tab欄自動隱藏，因用戶的主要視覺集中在列表的內容上，隱藏tab欄能增加頁面的可視化范圍，減少其他元素的干擾，給用戶更沉浸式的瀏覽。
頁面停止滑動或下滑時，預判用戶可能被某個內容吸引，或者有回看其他功能的想法，tab欄則完整顯示，方便用戶隨時做出其他選擇。從用戶角度出發，通過行為預判，針對產品的使用場景，在細節上設計的很貼心。
141.?「喜茶」顯示制作中的單/杯量-給用戶更多選擇
1. 產品體驗
在喜茶APP的門店列表頁，會明確提示當前店鋪正在進行中的訂單/杯數，方便趕趕時間的用戶選擇合適的門店以縮短等待時間，也同時滿足炫耀感、從眾心理較強的用戶在異常火爆（單/杯數量大）的店鋪進行“打卡”。
2. 設計思考
在忙碌了半天的工作中，突然想來杯奶茶放松放松，自己出去幾乎不可能，就只能通過一些平臺下單，然后就進入漫長的等待之中，過了好久打電話詢問卻被告知因太多人排隊還沒開始做，這時除了·#￥%~·#￥…外，就只能換一家了，然后繼續等待……
喜茶APP在門店列表頁顯示了正在制作中的單/杯量，雖然無法解決用戶等待時間的問題，但通過明確的提示給予用戶更多選擇，特別是計較時間的用戶，可選擇單/杯制作中數量較少的店鋪，以節省更多的時間。
其中也不乏一些用戶會去專門挑選爆單的店鋪，因受從眾心理的驅使，感性的認為單量越大、服務越好、味道就越好的理解，也為了滿足自己的品質生活，等不等待不重要，就算是為了朋友圈“打卡”也要整一杯，固門店列表的數據提醒，不管是針對哪種用戶，實用性都是顯而易見的。
142.?「QQ」隱藏會話-是保護隱私還是邪惡？
1. 產品體驗
在QQ好友的聊天設置中，開啟隱藏會話，即可將我們不想展示在會話列表中的好友會話記錄隱藏起來，以保護聊天信息的隱私安全。
2. 設計思考
QQ是許多80、90后在最初裝機必備的聊天軟件，到現在為止，依然有很龐大的用戶群。
如果會話列表中存在自己不想看到或者不想別人看到又不想刪除的聊天記錄，就會習慣性的移除會話列表讓其“躺尸”，但不知會在哪個時間猝不及防被一條新的消息“殺出來”，移除會話的操作就變成“一次性”的了。
在QQ好友的聊天設置中，開啟隱藏會話，就可以將該好友的會話記錄永遠的隱藏起來，就算即時聊天也不會顯示在會話列表中，對聊天信息的隱私安全提供保障。
比如給女朋友買生日禮物的咨詢記錄，但不想讓女朋友看到；醫生對自己身體健康問題不好的反饋，避免家人擔心等，都可以將其隱藏。當不需要時，在設置-隱私設置-隱藏會話列表頁面，將該好友取消隱藏即可。
（一些用戶認為，隱藏會話細品起來總感覺有點“邪惡”，不像是正常健康的交往關系需要使用的功能，甚至直接稱為“養魚”專用，但很多事情都具有兩面性，菜刀可切菜也可傷人，主要事在人為、好壞完全看你如何使用）
143.?「盒馬」一起購-降低食材的浪費和金錢成本
1. 產品體驗
在盒馬的購物車中，可發起一起購，將鏈接或購物碼發送給好友進行分攤買菜費用，方便因人少、單個食材分量超出與其他人拆分使用，避免多余食材的浪費。
2. 設計思考
外賣行業的興起，雖說讓很多人在家吃飯非常方便，隨叫隨到，但總有一部分人喜歡自己做，這并不是說TA們有多的勤快，而是出于多方面的考慮，比如食材的新鮮程度、合適的口味、疫情期間的安全問題等，通常就會自己動手，生鮮超市可不像便利店一樣在哪都有，而線上生鮮平臺就成了購買食材的重要渠道。
在特殊情況下，因為人少，按照平臺的分量購買，很多時候都會出現單份食材過多、食用不完的問題，比如一斤肉/青菜、一份小蔥/香菜等，下次使用則不新鮮，如果沒有冰箱存放，尤其是在夏季，定然會出現食材的浪費。
盒馬APP可在購物車發起“一起購”，將鏈接或購物碼發送給好友，待加入購買完成后就可以將食材拆分供多家使用，不僅能平攤食材費用、節約金錢成本，還能避免因食材超量而造成不必要的浪費，一舉兩得。
144.?「菜鳥」圖片備注-眾多快遞信息一目了然
1. 產品體驗
在菜鳥APP包裹的備注頁面，可設置圖片備注，方便用戶快速區分自己/他人的包裹或類型，讓列表一目了然。
2. 設計思考
大家平時在各種電商平臺購買商品之后，最關心的莫過于快遞信息了，為了避免用戶頻繁奔波于各大電商平臺之間查看快遞運輸進度（還能降低設備運行負荷），菜鳥APP的出現，將各大平臺的的快遞信息結合在一起，對用戶來說，很大程度上提升了查詢效率。另外，為了降低用戶誤操作重復點擊的可能，還提供了包裹名稱備注功能。
菜鳥包裹的名稱備注雖然可以進行明確的區分和規整，但在包裹特別多、尤其是添加了親友代收的情況下，依然會降低查詢效率。
最近，菜鳥APP上線了圖片備注功能，眾所周知，人們對圖片的視覺信息接受、理解速度要遠超文字，菜鳥包裹的圖片備注能避免快遞信息過多造成記憶混亂，方便用戶更快查詢，提高效率。
145.?「即刻」圖片省流量模式-幫用戶節省更多“5G”流量
1. 產品體驗
在即可APP我的-系統設置-瀏覽偏好設置中開啟圖片省流量模式，數據網絡下，不會預先加載出頁面中的配圖，可通過手動點擊加載對應的圖片。
2. 設計思考
10年前，智能設備開始普及，100M手機流量一個月用不完，現在進入5G時代，所謂的10G、20G可能是用戶在短視頻、社交、生活類應用上一天的流量消費，且三大“流氓”的5G套餐還不便宜。
對于流量的消費，用戶雖然有理性的認知，比如在看電影/追劇、視頻聊天、下載等基本都會在WiFi場景下完成，但類似短視頻、電商、生活類型的應用因隨意性較強且適合各種場景所帶來的方便性，用戶在受到某一個點的刺激引誘時，通常會忽略是否在WiFi場景下進行，一開始便停不下來，因高質量輸出的需求。
這些內容（圖片/視頻）加載所消耗的數據流量甚至遠超視頻類應用，尤其是在5G環境下，很多還沒有看到、不打算看的內容，都事先在幾秒鐘內消耗了你幾十、幾百兆流量，帶來的結果就是：又收到了xxx的流量疊加扣費信息。
即刻APP為了減少頻繁的超流量扣費帶給用戶的困擾，在系統設置中增加了圖片省流量模式，在非WiFi場景下不對圖片/視頻預加載，如有需要，可手動選擇性的加載部分或在設置中關閉此模式。
圖片省流量模式雖然在視覺體驗上有所降低，但站在用戶的角度思考，能幫助用戶在非WiFi環境下減少超流量扣費的情況，很大程度上節約了用戶經濟成本，且非常人性化，并不會帶來用戶的反感。
（別問我降低了用戶體驗的功能有毛用，問就是：你明知這樣的用戶體驗不好，為何還要在設置中開啟呢，還是留給有需要的用戶使用吧）
146.?「餓了么」買過-要不再買一次？
1. 產品體驗
在餓了么訂單列表，點擊“再來一單”進入店鋪，凡是在此店鋪購買過的商品會再次顯示在“買過”的導航中，便于勾起用戶的回憶，提升再次下單的成功率。
2. 設計思考
外賣平臺給我們帶來了很大的便利，平時為了節省時間，會通過美團外賣、餓了么來點餐。當我們發現其中一家很合自己胃口時，基本就會鎖定，方便以后繼續光顧，歷史訂單的“再來一單”無疑就成了最便捷的入口。
從餓了么APP訂單的“再來一單”進入店鋪，會發現導航的第一個標簽為“買過”，方便查看以前在該店鋪購買過的所有商品，以提醒用戶建立起更深的信任度。
因用戶是在訂單中受到某個商品的吸引而產生購買動機才進入該店鋪的，此時看到曾經買過的商品，即使失去最初的購買動機，也可能因為記憶印象產生新的需求，以此降低用戶流失率，提高轉化。
147.?「ETC車寶」簽到-將任務演變成用戶需求
1. 產品體驗
ETC車寶將簽到功能以氣泡提示展示在底部標簽欄“我的”入口，點擊我的，切換主頁面的同時簽到成功。
2. 設計思考
簽到是為迎合用戶貪婪心理而設計，是產品營銷及用戶留存的一個重要手段，主要通過連續簽到得到一定的獎勵來增加用戶的使用頻率及使用粘性。
看了那么多的簽到功能，很多都是通過動效、入口位置、差異化圖標等各種表現方式來吸引用戶完成簽到任務，設計師都明白，要想用戶在你的應用中完成某個任務而不是需求，那么任務的獎勵就要有足夠的誘惑力，否則就會存在負面效果。
ETC車寶將簽到功能關聯在“我的”入口，用戶進入“我的”頁面即完成簽到，直接將用戶應該完成的任務變成隱性（依附“我的”操作）需求，在完成其他需求的同時，不經意間也完成了簽到操作，降低簽到門檻，以簡化路徑的方式讓用戶更易于接受，提高用戶簽到成功率及產品的易用性。
148.?「叮咚買菜」小蔥免費送-還要考慮嗎？
1. 產品體驗
在叮咚買菜的購物車中，選擇好食材后，結算上方會彈出“是否需要免費小蔥”，如需要，則會在購物車中自動添加免費的小蔥商品，利用贈送的方式促進用戶下單。
2. 設計思考
路過水果攤時，經常會聽到老板說“來，免費嘗一下，不好吃不要錢”，這時，只要有點購買動機的人都會嘗一下，哪怕動機不是那么的強烈。
待嘗過之后，基于互惠原則以及面子心理，好吃多買點，不好吃少買點，且商家把用戶的這種心理也是拿捏的死死的，當你試吃時，老板已經給你撐開了塑料袋，更有甚者已經給你裝袋了。
其實，線上也是如此，看見免費的東西都會毫不猶豫的加入購物車，不管有沒有用，這份便宜LAOZI占定了，于是順便也將捆綁消費的商品給下單了。
在叮咚買菜購物車結算前，系統會彈出“是否需要免費小蔥”來促進用戶下單。
- 考慮到趨利避害是人們的一種本能，對于“免費的東西不拿就是一種損失”的想法，用戶的購買行為從產生到強烈，且小蔥本就是用量極小的調味品，很少有用戶專門對小蔥下單，此時看到免費小蔥，會毫不猶豫的加入購物車；
- 當這種突發性事件（免費送小蔥）占據了用戶大量的思考空間時，基本會短暫性忘記去其他店鋪/平臺對比價格和優惠力度，直接下單購買了。利用人們損失厭惡的心理與打折、滿減等相比，其作用更大，打折只會讓用戶找到一個能說服自己的理由認為理應優惠，而免費送則有一種買到就是賺到的錯覺，更能提高轉化率。
149.?「蝸牛讀書」包書皮-利用線下看書場景創造儀式感
1. 產品體驗
在蝸?？磿鳤PP，可對書架中的書本添加包書皮（封面），滿滿的儀式感，不僅能美化封面，還能根據書皮描述對書本進行分類。
2. 設計思考
每天堅持在看紙質書籍的人都知道，因看書時間、放置地點隨意性較強，且買來的書籍也算是自己的財產，于是就會給書本包書皮，能有效防止書本臟污、受潮、磨損、折角等一系列可能出現的損壞問題，當拆開書皮時，還是一本嶄新的書（手機殼也是同理）。
在蝸牛讀書APP的書架中，也可對書本包書皮，結合真實場景，創造出線下看書的儀式感。
對于儀式感的理解，很多用戶認為是刻意的做作，但同時也能會帶來心靈上積極向上的力量，幫助我們提前做好準備，以便盡快進入狀態，還能幫助緩解一些焦慮以及促進人與人書本之間的關系。
另外，書架上的書籍較多時，還能通過不同的書皮描述進行書籍分類，也能達到美化封面的作用。
150.?「微信」拍一拍撤回-及時化解尷尬
1. 產品體驗
如果在微信誤觸了拍一拍操作，長按拍一拍記錄后，在2分鐘內撤回且對方不會看到記錄，能及時化解尷尬。
2. 設計思考
微信拍一拍在剛開始上線時，異常火爆，其各大群里都是拍一拍消息記錄，無疑為用戶的交流互動增添了更多的樂趣。隨著熱度的逐漸降低，也給用戶制造了一些困擾，有時候手滑點頭像點了兩下，不小心拍了客戶、老板還有救嗎？不少人對這個功能是又愛又恨。
微信自上線拍一拍撤回功能后，這些問題都迎刃而解，如果不小心，失誤觸發了拍一拍，可在兩分鐘內撤回，并且對方不會收到任何提示，及時化解因操作失誤帶來的尷尬。
可以看出，微信團隊充分考慮了用戶的反饋以及不同場景下使用所帶來的問題，并做出對應調整以達到更好的用戶體驗。
結語
設計師需要養成體驗產品的好習慣并將優秀的產品細節記錄下來，加強自己的記憶，不僅能提升自己的語言組織和總結能力，也為日后輸出優秀的作品當鋪墊，對自己的能力提升以及未來的職業發展帶來便利。
本期產品設計細節分享結束，我們下期再見。
#專欄作家#
大漠飛鷹；公眾號：能量眼球，人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘，利用設計的手段為受眾用戶帶來更好的體驗，即好看、好用。
本文原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自?Unsplash，基于 CC0 協議
142中QQ隱藏對話“猝不及防被一條新的消息“殺出來”，移除會話的操作就變成“一次性”的了。”我就在微信里體會到了，剛剛隱藏對話，沒一會兒對方發消息又出現在我的列表里了也是哭笑不得。
啥也別說了，搓衣板了解一下
小蔥這個確實如作者分析所言，暫時讓客戶忘記去其他平臺比價，從而以極低的成本留住了用戶，減少了流失。
看到了很多新的設計創意，而且還有關于背景的分析，感謝分享~
感謝認可
ETC車寶最近是改版了嗎？好像變成雙擊icon簽成，取消氣泡打卡了，不過一開始這個設計還是挺有趣的，就是門檻感覺略低了一點。
是改了，不過之前版本的某個優點好像沒有了??
我點了我的，還是會直接簽到，但是icon上面的簽到標簽去掉了，對于老用戶可能減少了視覺干擾。但作為新用戶，挺意外的。