在體驗優秀的作品時，我們需要站在用戶的角度去發現好設計細節及交互解決方案，思考能給企業或用戶帶來價值并記錄下來，久而久之，就能提高自己的語言組織以及總結能力，再通過不斷的練習，以達到質變效果。

151.「keep」設置身高/體重-模擬現實生活中的固有認知

152.「網易蝸牛讀書」找人共讀-堅持讀書的動力

153.「keep」隱私模式-一鍵隱藏跑步軌跡

154.「京東」刪除搜索記錄-決策思考

155.「嗶哩嗶哩」動效IP結合操作特性-提升品牌曝光度

156.「高德地圖」返回-貼心的交互手勢反饋

157.「騰訊視頻」只看TA-滿足“追星”用戶沉浸式體驗

158.「京東讀書」你用過橫屏時分欄閱讀嗎？

159.「ETC車寶」如何在較少的空間展示更多的內容？

160.「盒馬」金剛區-引導用戶直達目標、快速轉化

161.「美團」酒店住宿-評價功能的重要性

162.「今日頭條」內容與評論區-高速直達

163.「MONO」TAB欄圖標-植入品牌記憶

164.「高德地圖」屏幕常亮-減少不必要的操作

165.「嗶哩嗶哩」生日-通過閃屏給自己一個暖心的祝福

151.「keep」設置身高/體重-模擬現實生活中的固有認知

產品體驗：

在keep設置身高/體重時，頁面效果采用了現實生活中的尺子/稱的刻度，通過左右滑動，跟隨刻度變化調整出準確的身高/體重數值。

設計思考：

早期的互聯網產品界面，很多都通過擬物化的設計來描繪現實世界中的產品，其便于用戶對功能進行感知，模擬物理世界中的交互，幫助輕松掌握界面的使用方式，最大程度的降低用戶學習成本。雖然后來逐漸過渡到扁平設計風格，但很多方面，依然保留了擬物的特征。擬物化風格會不會再次來臨也不得而知，但從設計趨勢的不但變化可以看出，如2020年火爆的新擬態設計（基本撲街）、C4D、2.5D設計等表現手法，都是在朝著貼近現實世界的認知方向延展。

在keep設置身高/體重時，通過模擬現實世界用戶對生活中事物的認知，將頁面設計成尺子/稱的刻度樣式，左右滑動即可設置完成，很符合用戶的直覺。模擬現實的設計可以幫助用戶輕松掌握界面的使用方式，更快的跟產品之間建立連接，根據模仿學習的基礎，有利于初次接觸的用戶，降低學習成本、提高效率以及出錯概率。

152.「網易蝸牛讀書」找人共讀-堅持讀書的動力

產品體驗：

進入網易蝸牛讀書的介紹頁面，通過“找人共讀”邀請喜歡讀書的伙伴加入，為堅持下去提供動力。

設計思考：

說起線上讀書，一開始必定給自己定下各種計劃，還會下定決心，從明天開始就……。可計劃很豐滿、現實很骨感，當你不想再看書時，可以找到上百個說法來掩蓋自己堅持不下去的理由，且聽上去合情合理。很多內/外因素的存在，當正在看書時收到朋友的吃燒烤邀請、網友的開黑4缺一、前男/女朋友的微信等都是放棄計劃的開始，即便可以抵擋這些誘惑，但面對看到的精彩無處表達喜悅、疑惑之處無地訴說等，無法交流的痛可能是壓倒你堅持的最后一根稻草。

網易蝸牛讀書可以邀請喜歡看書的網友一起學習，通過交流互動、相互鼓勵提升學習氛圍，雖然在虛擬的網絡世界，但相比一個人讀書更有看書的儀式感，精彩之處相互分享、不懂之處相互交流，擺脫一個人的孤獨，為堅持讀書提供源源不斷的動力。另外，第一次共讀的用戶，還可以免費得書，且后面能獲得翻倍的蝸牛殼用于換書，正所謂免費東西不要白不要，以此增加用戶的使用粘性，提升用戶在此平臺讀書的頻率，為后面的轉化提供條件。

（一個人在電影院就算看著喜劇也可能睡著，但一群人在場很可能讓你笑的岔氣；一個人靜悄悄的在手機追劇跟開著彈幕相比，也是兩種不同的心情）

153.「keep」隱私模式-一鍵隱藏跑步軌跡

產品體驗：

在keep跑步完成后，進入跑步記錄頁面，開啟隱私模式，系統會屏蔽跑步軌跡地圖上的部分文字信息，避免用戶在分享后暴露自己的位置隱私。

設計思考：

跑步是受大家喜歡的運動之一，沒有健身房里的復雜訓練和費用成本，且時間靈活自由，經常跑步可以減肥、改善視力、改善失眠狀況、釋放壓力/舒緩情緒等諸多好處。堅持跑步需要極強的自制力，如果光靠自律來讓自己堅持，很少人能做到，其外在條件不可或缺，比如多人約定一起跑，相互鼓勵；給自己制造必須跑步的條件和理由；打卡朋友圈，獲得他人認可和鼓勵等。打卡朋友圈是很多人使用的一種方法，一方面礙于面子心理，通過營造努力的人設，在他人那里博得面子和形象，給自己帶來心理上的滿足感；另一方面，可以通過其他人的點贊、評論獲得對自己的肯定，增強自己對跑步的興趣，以提供堅持下去的動力。

keep為了讓用戶更安心分享自己的跑步記錄，在跑步軌跡地圖設置了隱私模式，點擊“小眼睛”開啟后，軌跡地圖上去掉了位置及信息標記，只能看到大概的輪廓。隱私模式能有效避免用戶的位置信息泄露，以最安全的方式使用產品帶來的服務，給用戶更容易掌控的感覺，帶去安全保障的同事，還能提升用戶對產品的信任度。

154.「京東」刪除搜索記錄-決策思考

產品體驗：

在京東搜索頁面刪除歷史記錄時，會自動展開所有搜索記錄，不打斷用戶瀏覽的情況下再次提醒是否全部刪除。

設計思考：

應用將用戶的搜索行為記錄下來，其主要目的是方便用戶下次使用時再次展現，可直接點擊快速找到自己所需的商品。雖然保存搜索記錄是在給用戶提供方便，但也可能將用戶較為私密的關鍵詞暴露給其他人，如果被自己的朋友或親人看到，就有些尷尬了，刪除歷史搜索記錄無疑是最有效的方法。在用戶刪除歷史記錄的過程中，其不同的交互方式給用戶不一樣的體驗，且還能提醒用戶思考、是否需要放棄這一操作行為。

在京東APP刪除搜索記錄的過程中，系統將所有記錄展開供用戶瀏覽，且右上角出現“全部刪除”的弱提示。通過展示的歷史記錄給用戶足夠的時間，以延長用戶下一步操作決策的思考，降低刪除成功的可能。眾所周知，用戶在操作刪除時，其主行動目標就是刪除成功，雖然在中途不太可能改變用戶的想法，但每給用戶多一份思考（所有歷史記錄），用戶改變想法的可能性就會增加；每增加一定的難度（弱化刪除操作，降低視覺傳播速度），用戶放棄下一步操作的可能性也會增加，而且應用需要通過用戶多次重復的搜索記錄來計算，確定是否增加該關鍵詞對應產品的曝光頻率，以達到更多的轉化，用戶的歷史記錄一旦刪除成功，就會增大二次搜索關鍵變化的范圍及不穩定性，不利于系統更精確的定向推薦產品及服務內容。

常見刪除歷史搜索記錄的交互方式無非三種，雖然不敢說哪一種最好，但可以根據應用的實際需求酌情利用：

①、無提示：操作刪除即刪除成功，路徑最短、效率最高，但極容易造成不可挽回的誤操作（如：美團）；

②、弱提示：操作刪除，再次提示是否刪除，弱化主操作，不影響頁面瀏覽，給予足夠的思考空間，但容易混淆原本的想法并通過信息錯覺給用戶“洗腦”，促使用戶放棄下一步操作或引導其誤操作（如：京東）；

③、強提示：操作刪除，通過彈窗提示用戶快速做出決策，效率較高，但用戶無法瀏覽頁面內容，沒有太大的思考空間，只停留在“是/否”的層面上（如：淘寶、餓了么）。

155.「嗶哩嗶哩」動效IP結合操作特性-提升品牌曝光度

產品體驗：

在嗶哩嗶哩視頻下方點贊時，或出現IP豎起大拇指的動效，生動有趣，點贊成功的同時，還傳播了品牌形象。

設計思考：

大拇指點贊是出現過最多的一種圖形表現方式，其誕生于2000年后，逐漸在全球各種應用中出現并被人們接受且成為一種潛在的點贊認知，通過自己對產品/內容的態度和認知傾向，用支持、贊同、偏愛等表達主觀情緒感受。知名產品對點贊的視覺表現、交互效果都非常嚴格，因為它會影響所有用戶的使用體驗及品牌價值。

嗶哩嗶哩的點贊除了常規的大拇指圖標交替出現外，還融入了動效品牌基因及激勵性質的文案。點贊成功時，圖標上方會出現一個豎起大拇指的動效IP形象，2秒后消失，利用點贊的特性結合IP強化品牌，為用戶在操作過程中增強記憶，提高品牌的曝光度，且動效IP樣式更具產品靈魂和趣味性。

156.「高德地圖」返回-貼心的交互手勢反饋

產品體驗：

在高德地圖頁面返回時，使用右滑交互手勢，所接觸的位置會出現水滴狀的返回圖標，對用戶做出交互反饋。

設計思考：

針對移動端界面的返回，第一印象是左上角的返回圖標，但在全面屏手機普及后，大屏幕尺寸也又開始占據市場，屏幕大意味著內容可以更大限度地得到展示，但也會增加單手操作的難度，尤其是頂部，幾乎成為單手操作的盲區，于是，很多應用開始將重要的功能往下方移動以及增加了很多隱藏的交互手勢，如上/下/左/右滑動、雙擊、長按、多指并行等一系列便捷的操作。

其實很多交互手勢，用戶已經見怪不怪，基本都有接觸，但是在地圖類型的應用中，80%以上的用戶操作各方向滑動時，思維還停留在移動地圖的認知上，很少有右滑返回的概念。高德地圖增加了右滑返的交互，且在人機交互的接觸位置出現水滴狀的返回圖標，給予用戶明確的反饋，便于用戶快速區分對應的下一步變化是返回還是滑動地圖，極大方便用戶使用，簡單的設計細節十分友好貼心，不知道的童鞋趕緊試試吧！

157.「騰訊視頻」只看TA-滿足“追星”用戶沉浸式體驗

產品體驗：

在騰訊視頻橫屏觀看影片時，點擊“只看TA”，選擇只想看到的明星片段，后續在看片過程中，系統會自動屏蔽與該明星無關的片段。

設計思考：

所謂“蘿卜青菜、各有所愛”，針對喜歡追劇/看片的人群，其目的是各不相同，比如喜歡歷史的，所關注的是故事的情節、改編程度及連貫性；喜歡科幻的，關注的是動感和特效。但說起青春偶像劇，喜歡看的，大部分用戶都是片中某些明星鐵粉，因“鮮肉”云集，打開彈幕就不難看出，鋪天蓋地的都是“好帥啊”“老公”“摸了女孩的手、我好傷心……愛死了”等一系列的花癡語錄，什么演技、劇情都不重要，重要的是“TA”別消失，不然的話就算是通過快進、跳集也要找到（抱歉、曝光了那一類人看劇的“貓病”）。

騰訊視頻APP的“只看TA”功能，解決了看片專為偶像而來用戶的需求，選中“只看xxx片段”，后續會自動屏蔽與該明星無關的內容。因為感性的成分較多，“只看TA”功能對于單純追星的用戶來說，再也不用通過快進、跳集的方式去尋找相關片段，可無需任何操作沉浸式看片，給用戶帶來較強愉悅感和滿足感。

158.「京東讀書」你用過橫屏時分欄閱讀嗎？

產品體驗：

在京東讀書的高級設置中，打開“橫屏時雙頁”開關，在橫屏閱讀時會變成左右雙頁的樣式，給用戶多一個選擇。

設計思考：

在報紙、刊物、出版物中，我們經常看到將大量的文字進行了分欄展示，其目的主要是便于快速閱讀。人們在閱讀大量的文字時基本都是不斷地從左到右-返回-從左到右……如此循環下去，當一行文字較長時，頭部和視線需要跟隨文字大幅度的移動，看完一行后，再用相反的動作返回下一行的開頭，費時費力費精神。而較小的行寬能讓一行文字在大部分情況下始終保持在目光范圍內，保證閱讀的完整性，提升閱讀速度。

使用京東閱讀APP，在高級設置中開啟橫屏時雙頁（分欄），其實在用戶看書時并沒有多大作用，但根據少數用戶的視覺瀏覽喜好多提供了一種選擇。針對習慣、感觸各異的互聯網用戶，在不影響功能、視覺體驗的情況下，讓他們去選擇最適合自己方式，是滿足用戶需求的最佳之舉。

159.「ETC車寶」如何在較少的空間展示更多的內容？

產品體驗：

進入ETC車寶“我的”頁面，會員版塊會出現抖動的效果，下滑可展開會員權益，上滑即再次隱藏還原。

設計思考：

用戶開通會員/購買增值服務是企業盈利非常重要的一大版塊，其固定入口大部分在“我的”頁面，為了引導用戶轉化的需要，也會合適的穿插在其他頁面、狀態、功能之中。因“我的”頁面需要給用戶提供常用的跟個人相關的功能，固會員版塊展示區域，基本上不能超出自己的那“一畝三分地”，也間接導致了因展示內容較少、吸引力不夠、轉換率較低的情況。

ETC車寶的會員版塊展示區域同樣較小，但卻合理利用不同的交互方式在不占用太多頁面資源的情況下，展示了更多會員權益。進入“我的”頁面，會員版塊會出現抖動的動畫效果，其最主要作用在于動態比靜態更加吸引眼球，增加視覺關注度，利用輕交互動效來吸引用戶視覺焦點，增加點擊欲望。

一般來說，除非用戶在目標非常明確的情況下，才會主動進入會員頁面，因為這關系著用戶的經濟成本。ETC車寶“我的”的下滑可展開會員權益，上滑即隱藏，既做到了不占用頁面空間，又額外給用戶展示了比較有誘惑力的會員權益，吸引用戶參與，勾起開通會員的欲望，同時也能在減少用戶操作的情況下，了解更多會員內容，最終達到增加轉化率的目的。

160.「盒馬」金剛區-引導用戶直達目標、快速轉化

產品體驗：

盒馬APP將金剛區的入口直接做成了產品一級分類，用戶進入首頁，即可根據對應的需求快速到達指定位置，少了各種常規功能的彎彎繞繞。

設計思考：

常見的電商應用，大部分都是直接在底部標簽欄設計一個分類入口，而金剛區是一個頁面中頭部的重要位置，也是核心功能區域，其聚合了各類子板塊的入口，為各個子版塊分發內容引導流量，所以其重要性不言而喻。

盒馬APP直接將金剛區設計成產品類型入口，其最主要的目的是引導用戶在最短的時間內找到目標，快速解決用戶需求，少了常規的套路和彎彎繞繞，多了一份效率。相比tab上的分類入口，更能促進用戶快速決策，避免用戶被其他內容吸引而產生新的想法，影響轉化。

161.「美團」酒店住宿-評價功能的重要性

產品體驗：

美團酒店住宿詳情頁主圖的右下角，會特別突出該酒店的綜合評分和其中一條好評，點擊后可進入評論頁面，依然突出酒店評分，以及大數據下的住客偏好。

設計思考：

評價的目的更多是為了表達個人對于某問題或現象的看法以及思考，也會作為后來者是否購買該產品的重要依據，直接關系著店鋪的綜合評分。不難看出，用戶在購買某個產品時，除了價格之外，買家秀就是決定用戶是否轉化的關鍵因素（不是唯一），商家也會使用各種方法來提高好評率，其中就包括收到快遞后好評返現券、商家電話提示等。縱然如此，評論功能也都只是提供一個的簡單入口或介紹完產品后象征性的展示最近兩條最新評論，還沒有上升到超級重要的程度。

美團APP酒店住宿版塊則把評論（綜合評分）的重要程度提升了一個等級，將綜合評分和其中一條好評顯示在詳情頁主圖的右下角，用戶進入即可被快速吸引。住客都是以自身位置為中心，因距離的因素限制了諸多選擇條件，相比其他電商產品，評價似乎成了除價格之外的唯一決策條件，提高評價功能的等級，也是為了將對應的信息快速傳達給用戶，減少其思考時間，提升決策效率。

162.「今日頭條」內容與評論區-高速直達

產品體驗：

在今日頭條的新聞詳情頁，點擊小氣泡圖標，頁面會自動跳到底部評論區，以供隨時查看、參與評論，再次點擊圖標，可回到之前未看的位置。

設計思考：

在擁擠的公交/地鐵上、忙里偷閑的上班時間里，我們偶爾會打開新聞APP來了解一些社會熱點資訊，增加知識視野及“吹水”能力，偶爾還會跟隨大流調侃一番。當被新聞中某個有趣的點刺激著自己的腦細胞時，會不自覺的進入評論區表達自己的想法或看看別人見解，很簡單，點一下底部（大部分底部懸浮）的氣泡圖標就能直達。一番操作之后，要再次回到頁面剛才沒有看的位置就難搞了，因大部分新聞內容較長，靠下拉去查找基本不現實，且查找的時間越長，記憶力就會逐漸減弱，浪費更多的時間成本。

今日頭條APP的新聞詳情頁面，在點擊圖標去到底部后，若想回到文中原來的位置，只需再次點擊圖標即可，避免通過調取大腦記憶滑動頁面查找而浪費大量的時間，還能防止用時過長而“斷片”，為用戶提供了便捷的路徑，減少不必要的誤操作，增加產品的易用性。

163.「MONO」TAB欄圖標-植入品牌記憶

產品體驗：

MONO（貓弄）APP，底部tab欄圖標直接用名稱中的四個字母替代，以達到最大化品牌傳播的目的。

設計思考：

一個應用是否好用，其視覺（交互效果/任務流程/操作方式）占據很大的作用。tab欄作為整個應用結構的入口，也不例外，不管是精致的圖標、趣味的動效還是優秀的交互方式，其目的都是為了通過美觀的視覺，將產品想表達的內容清晰發反饋給用戶。

MONO打破了以往其他應用tab欄的常規表現方式，將名稱拆解，即M、O、N、O以圖標的方式至于tab欄，用最直接的方式進行品牌傳播，讓用戶記住的并非APP里的某個功能，而是品牌記憶。雖然跟用戶所需要的美觀、親和力、趣味性等，似乎是反其道而行，但存在即為合理，通過品牌基因的融入，能讓產品帶有靈魂， 延伸品牌價值觀以及突出圖標特征來提高品牌曝光度，讓用戶看到產品的第一印象，就知道當前使用的是什么，當品牌元素在產品的各個層面合理復用時，也能增強用戶記憶，變相提升用戶粘性。

164.「高德地圖」屏幕常亮-減少不必要的操作

產品體驗：

在高德的地圖設置中，開啟“開啟屏幕常亮”功能，即可在導航過程中保持設備屏幕常亮，避免猝不及防的息屏帶來安全不必要的麻煩和安全隱患。

設計思考：

平時我們在導航的過程中，如果長時間沒有觸碰手機會出現自動鎖屏的情況，因事發突然，若行駛在交通復雜且不熟悉的道路口，慌忙之中選擇解鎖手機查看、剎車減速靠邊或隨便駛入其中一個路口，不管何種選擇，都可能來不必要的麻煩及安全隱患。

使用高德導航時，在設置中開啟屏幕常亮后，導航過程中能有效防止設備自動變暗或鎖屏，避免用戶在駕駛過程中手動調整設備或考慮突發事件造成大腦“開小差”，影響駕駛安全。屏幕常亮可以幫助用戶將更多的注意力放在安全駕駛方面，不會因出現息屏受到影響，從而提升安全系數。

165.「嗶哩嗶哩」生日-通過閃屏給自己一個暖心的祝福

產品體驗：

在生日當天進入嗶哩嗶哩，啟動頁之后會出現一個暖心生日祝福+溫馨的閃屏，利用情感化的表現方式讓用戶在進入應用之前就能感受到友好的祝福，幾秒鐘后，自動進入首頁。

設計思考：

“生”是來到這個美好世界的一種方式，“日”是紀念降臨人間的日子。很多人都想在自己生日這天得到好友的祝福，只有在這一天才感覺到自己是真正的主角，聽到一聲“生日快樂”是對自己最好的期盼，被習慣性地祝福，即使這一天自己天犯了什么錯，也會被不同程度地原諒，因為我們知道，還有人記著、愛著自己。

在智能設備普及的今天，我們身邊少了很多的朋友，但卻多了一個鐵友-智能手機，最初給我印象最深的就是在生日這一天，從早上開始，QQ的生日祝福消息就沒有斷過，雖然都是虛擬的禮物，但至少是自己的朋友（Q友）親手送出，還是無比的開心。而如今的微信、抖音、視頻等平臺成了手機必備，履行著我們可以沒有朋友，但不能沒有手機的原則。表面上看，我們似乎在和冷冰冰的機器交流，實則應用早已通過親和、情感、趣味化的方式成為了自己最忠實的朋友。

在生日當天進入B站，系統會通過閃屏的方式給我們送上最真摯的祝福，溫馨的畫面+暖心的祝福語，再結合產品的特性融入情感化的設計，為用戶打造了一個有歸屬感且溫暖的“家”，為產品設計增添了人情味，并通過祝福的方式拉近用戶與產品間的距離感。如果自己的生日被所有人遺忘，多少會有些失落感，而B站用溫暖的方式傳遞愛與力量，也能撫慰每一個被情緒傷害過的靈魂，這也是鞏固用戶粘性與忠誠度十分巧妙的方式，一個小小的細節，就能感受到產品的溫度與團隊的用心，很大程度上提升了用戶對產品的好感度。

結語：

設計師需要養成體驗產品的好習慣并將優秀的產品細節記錄下來，加強自己的記憶，不僅能提升自己的語言組織和總結能力，也為日后輸出優秀的作品當鋪墊，對自己的能力提升以及未來的職業發展帶來便利。

本期產品設計細節分享結束，我們下期再見。

原文地址：能量眼球

作者：大漠飛鷹CYSJ

轉載請注明：學UI網》產品細節剖析，提升用戶體驗就差這一點！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( 91whvog3.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務