前言

在互聯網產品日趨成熟的今天，APP同質化越來越嚴重，使得設計不夠精致、沒有氣質及品牌感。一個設計精致APP不應漏過任何一個細節，美觀、可用和的界面設計都需要花費大量的時間從細節上去打磨，并從多方面鉆研并創造出打動人心的UI/UE設計。

2021 | 第02篇分享目錄（016~030）

016.「QQ」手勢力度決定頁面展示范圍

017.「高德地圖」地點打卡-未來回憶曾經的足跡

018.「優酷」會員轉化-擊潰用戶最后一道心理防線

019.「網易云音樂」播放中的歌曲快速定位

020.「boss直聘」多個入口-簡化二次操作流程

021.「菜鳥」備注-快速找到列表中的包裹

022.「蝦米音樂」符合產品特性氣質的標簽欄

023.「QQ音樂」觸手可及的選擇性MV播放

024.「微信讀書」提升操作效率的進度條控制

025.「嗶哩嗶哩」信條-承包笑點的逆向彈幕

026.「淘寶」應對意外退出的通道

027.「微信」行為預判-提升操作效率

028.「抖音」搜索-撫慰每一個被情緒困擾過的靈魂

029.「京東」送禮物-更是一種神秘和驚喜

030.「叮咚買菜」一頓吃光-減少食材的浪費問題

016.「QQ」手勢力度決定頁面展示范圍

產品體驗：

QQ聊天的表情列表版塊，系統會根據用戶上滑的力度來確定表情選擇區域的大小，力度越大，列表區域占比就越大，同屏可供選擇的表情就越多。

設計思考：

經常使用QQ表情包的用戶都知道，其更新頻率非?？臁１热缟鐣系淖罱l生的大事件、互聯網當前流行的熱詞，甚至在疫情期間，凡是跟疫情相關的表情包都在不斷變化，從開始的安全防護到后面的線上辦公等，以至于深受廣大用戶的喜愛。

QQ的表情功能其中還有一個細節，用戶在選擇表情時，系統根據向上滑動的力度來確定表情區域所展示的范圍?；瑒拥牧Χ容^大時，考慮到用戶可能需要在更多的表情包中選擇的情況，固增大顯示的區域，便于用戶在同一屏界面中可瀏覽的范圍更大，同屏展示更多的表情包讓用戶在更短的時間內找到自己所需，所見即所得，對用戶進行的定性操作十分友好，從細節處理方面提升了用戶體驗。

017.「高德地圖」地點打卡-未來回憶曾經的足跡

產品體驗：

在高德地圖的足跡功能里，可以對我們所在的地點進行打卡，系統就會以亮光形式顯示我們去過的城市，并留下“???”標記，點擊可以查看自己的打卡時間和具體位置。

設計思考：

我們在高壓的生活下及忙碌的工作中，曾經去過很多地方游玩或者路過，隨著時間不斷的流逝，這些都成了模糊的記憶。當有一天靜下心來細想，好想去過的地方很少，甚至回憶不起來。

高德地圖APP的足跡打卡功能可以幫助我們記錄所去過的每一個地方，分為自動和手動打卡。在設置中開啟自動打卡后，當用戶使用導航的目的地屬于名勝古跡、美食地標建筑等類型的地點，導航結束后，即可自動完成打卡，如有特別需要，還可以通過手動打卡記錄每一個點。打卡功能雖然在表面上并非用戶硬性需求，但在未來的某個時間看到自己曾經的足跡時也略表欣慰，還可以滿足部分用戶的虛榮心，也許在無意間就能撫慰認為自己去過的地方太少、較為傷感的幼小心靈，給與溫暖的安撫與力量。

018.「優酷」會員轉化-擊潰用戶最后一道心理防線

產品體驗：

優酷普通用戶在看影片前面的廣告時，倒計時后面會提示xxx元可關閉廣告，廣告下方通過展示會員特權以鼓勵普通用戶升級會員，且定時滾動展示剛剛已加入會員的文字提醒。

設計思考：

不管哪個影視平臺，無論何種設備，非付費會員用戶在看影片前都需要先經過長達幾十秒的廣告，這是任何人都無法避免的一堵墻，廣告除了可盈利之外，還能起到激勵普通用戶開通付費會員的用處。

優酷視頻激勵普通用戶開通會員的的手段可謂是拍案叫絕。

①、利益引誘：在廣告倒計時的后面直接展示開通會員的金額， 通過優惠等利益刺激手段，吸引用戶繼續完成對產品的消費。較小的金額可以降低用戶的經濟成本，同時增加用戶對會員價格的心理接受程度，減少其防備心理，有很大的幾率吸引用戶產生開通會員的動機，促使用戶行動增強轉化（除了首次開通連續付費業務，所付出的金錢成本較低外，其他情況下價格并無優惠，不過一旦讓用戶產生了付費動機，這些都是后話）；

②  、增加說服力：  廣告下方羅列了部分比較重要的會員功能，圍繞開通會員后的特權并強調效果，以此證明會員內容的質量與真實性，吸引用戶去了解，為用戶增加開通會員驅動力；

③、羊群效應：提示****剛剛加入了會員，利用從眾心理，因為用戶的想法和行為容易受到周圍人們的影響，往往會勝過自己的理性認知。通過前面的用戶已做了前驅和后盾，不斷的引導和刺激用戶去開通會員（羊群效應在現實生活中遇到的很多。比如：大部分用戶出去吃飯，對空無一人的飯店沒有動力，往往會選擇里面已經坐了一些人的店鋪；走在外面，哪里圍的人多，就想擠進去看個究竟）。

019.「網易云音樂」播放中的歌曲快速定位

產品體驗：

在網易云音樂播放當前列表的歌曲后，當界面存在上下滑動的操作行為時，右下角會出現定位圖標，點擊可直接定位到正在播放的歌曲位置，如無任何操作，3秒后圖標自動消失。

設計思考：

我們在聽歌時，如果是無目標的行為，基本都會進入到某一個類型的列表或收藏歌單，進行順序播放，比如飆升榜、新歌榜等。如果有興趣，可能會在列表中上下滑動來看看是否有自己熟悉的歌曲，等最后要回到正在播放的歌曲位置時，就尷尬了，需要花費更多的時間來找到，在自己收藏的歌單中就更不用多說了。

網易云音樂在歌曲列表中增加了快速定位按鈕，當系統檢測到正在播放的歌曲列表中有滑動操作時，圖標會自動出現，點擊快速定位播放歌曲位置，方便快捷、省時省力。如果你的歌單中添加的歌曲太多，又無法找到播放的歌曲時，不妨試試右下角的定位按鈕吧，此功能真的很人性化。

020.「boss直聘」多個入口-簡化二次操作流程

產品體驗：

在boss直聘求職關鍵詞頁面，單點復選框選中/取消，底部同時提供已選中關鍵詞，可進行單個刪除或通過左下方的清除按鈕一鍵刪除。

設計思考：

在用戶的常規認知里，選項條件為數不多的復選框操作都是單點選中/取消，這種操作方式基本也成了用戶的慣性思維，若站在用戶體驗角度深挖細節的話，即使是大眾用戶都認可，其實也沒有最好，都還有上升的空間。

boss直聘的求職關鍵詞選擇，在這方面就做的更好，除了常規的單點選中/取消外，其底部還提供了已選中的關鍵詞條，用戶可在小范圍內清楚的知道已選中的內容，讓需求更加集中，便于進行統計、對比或刪除等操作，避免在頁面多個目標中尋找而增加時間成本。另外左下角還提供了清除按鈕，需要重新選擇目標的用戶，可一鍵刪除，節省了之前多次點擊的重復步驟，簡化二次操作流程。

021.「菜鳥」備注-快速找到列表中的包裹

產品體驗：

菜鳥的包裹列表，左滑其中的一個，可通過包裹備注修改名稱，方便用戶在包裹較多時有目標的查看。

設計思考：

網購已成為用戶的日常習慣，沒事的時候淘寶逛一逛、京東走一走、不急用的就在拼多多砍一砍。但網購平臺何其之多。我曾經碰到過這種情況，在不同的平臺都買了商品，其中有急/不急用的。最為難熬的就是等待物流了，頻繁的奔波于各大電商平臺個人中心的訂單頁面查看最近物流狀況，步驟繁瑣不說，還浪費大量的時間，手機差的還會閃退卡頓，相信這也是很多網購用戶的苦惱，直到菜鳥包裹的出現......

菜鳥定向的集合各大物流平臺的包裹數據，通過手機號碼，將單個用戶的包裹歸類到一個地方，非常方便。在使用過程中，還有一個很友好的設計細節，包裹名稱備注。在包列表中，可選中其中的一個包裹左滑，對名稱進行備注，便于用戶包裹過多時需要對其中部分包較急的包裹進行頻繁的查看，備注之后一目了然，能降低因誤點造成重復操作的可能性，快速找到想要的包裹，方便用戶有目標的查看。

022.「蝦米音樂」符合產品特性氣質的標簽欄

產品體驗：

蝦米音樂頂部標簽欄的選中狀態，文字放大的同時配合一段起伏較大的音頻波紋動效，彰顯行業產品特性。

設計思考：

標簽欄是APP界面中較為常見的控件之一，在視覺表現方面，只有選中、未選中兩種狀態，其設計也比較簡單，通常會在文字顏色/字重大小上進行變化，標簽下方加上小長條來區分兩者的狀態，用戶對于這種表現方式也是高度認可的，如果不想被同質化，未在細節上下足功夫，就很難設計出彩。

蝦米音樂的標簽欄選中狀態除了文字大小對比非常明顯外，下方是一段音頻波線動效，跳脫出較為常見的設計規范限制，從行業屬性中獲取靈感，把用戶在現實世界中物理認知的“聲波”形象來源作為產品特性，提取出具有獨特氣質的視覺音頻波紋樣式替代選中狀態的小長條，這樣能建立起視覺上的聯系，讓用戶產生由內而外的一致感受，既有設計感又符合產品特征。

023.「QQ音樂」觸手可及的選擇性MV播放  

產品體驗：

在QQ音樂播放頁封面圖的右下角，會顯示該歌曲相關的視頻數量，點擊則展開視頻列表，通過左右滑動選擇想看的視頻，可直接進入視頻播放。

設計思考：

有人說：聽音樂是一種情緒，也是一種心情，能從不同類型的音樂中聽出共鳴，去發現一些事物的美好。當我們發現自己喜歡上一首歌曲時，有沒有想打開該歌曲MV一睹演唱者的風采，或者邊聽邊看去感受歌曲意境和內容所帶來的一些理解上的輔助。

QQ音樂將歌曲的MV展示在播放頁封面圖片的右下角并提示數量，近在咫尺，便于用戶在聽歌的過程中對視頻選擇性的播放。一般音樂類型的應用在都是一首歌對應一個MV入口，需要先通過頁面的跳轉才能對視頻進行選擇，QQ音樂的這種交互路徑能避免用戶在聽歌過程中選擇視頻時造成中斷，通過左右滑動選擇想看的視頻，選中即可直接進入視頻播放頁，優化了操作路徑，減少操作步驟，觸手可及且不打斷沉浸式的音樂享受。

024.「微信讀書」提升操作效率的進度條控制

產品體驗：

打開微信讀書的進度控制條，點擊游標左右滑動，除了頁面內容變化外，進度條上方會顯示當前頁碼/總頁碼，并提示章節及標題；長按游標可單獨對書本的頁碼進行精準化的切換。

設計思考：

讀書就是和世界各個行業的人物進行一對一交流的過程，如果想通過讀書收獲成長，就要靠自己看書、學習、思考，并把知識用到自己的工作和生活中，不斷讓自己做出改變，因此也誕生了很多讀書類型的應用，線上看書不僅能適合多樣化的環境，還能節省經濟成本。曾經有人感慨，電子書是線性的，而紙質書是立體的，想看前面有聯系的內容就可以隨時返回去再讀，而電子書只能通過目錄和書簽來解決，要經過多次的操作和頁面的跳轉，且書本的內容都是通過數據傳輸、每次都要刷頁面才能看到內容，有可能會打擾用戶看書的思路，相對紙質書籍，看書效率和吸收程度就低了許多。

其實并非全是如此，微信讀書考慮到體驗方面，針對用戶在讀書過程中可能出現的前后頻繁翻頁的問題，在進度條控制細節上做了很多便捷化的設計。用戶可通過點擊或長按控制條上游標，根據自己的實際需求進行前后長/短距離的滑動，就能輕松滿足自己所需要的頁面轉，并伴隨明顯的小窗文字提醒。此功能相對紙質書籍雖然不能堪稱完美，但足以解決用戶線上讀書時最基本的需求，讓操作流程變的更加簡單，大幅度的提升了操作效率，節約時間成本并提成產品的易用性。

025.「嗶哩嗶哩」信條-承包笑點的逆向彈幕

產品體驗：

在嗶哩嗶哩看《信條》電影，播放到時間發生逆向片段時，彈幕的文字及方向也發生逆轉，即逆向彈幕，兩者結合在一起非常應景，網友幾乎被“驚掉下巴”。

設計思考：

有很多用戶喜歡開著彈幕看視頻，彈幕有可能是視頻內容的良好補充，大部分視頻是不能牢牢抓住觀眾，也不需要觀眾死死盯著看的。各種神彈幕、刷屏本身就是內容的重要組成部分，所以看著彈幕可以給我們在看視頻的過程中帶來更好的氛圍及愉悅的體驗（部分不愛開彈幕的用戶除外）。

最近被一個腦洞的彈幕方式吸引到了-逆向彈幕。B站在《信條》電影里隱藏了一個很有趣的彩蛋，正負時間線穿插（片頭也逆向了）的情節發展，設計了讓人驚艷的逆向彈幕，跟電影的逆向片段組合在一起時非常應景，神奇且趣味化的彈幕方式讓用戶幾乎“驚掉下巴”，看完電影后仍能記憶猶新。有人直言“當時在電影院看完信條后，是不是倒著走出來，影院就把買票的錢給退了”。

026.「淘寶」應對意外退出的通道

產品體驗：

在淘寶的其他功能頁面發生閃退或意外結束應該進程時，再次進入首頁，會提供“打開上次訪問的頁面”的快捷入口，如無需要，幾秒后入口自動消失。

設計思考：

智能時代，每個人的手機中應該都裝有不下幾十個APP軟件。當我們正沉浸在某個APP當的內容時，因設備或其他原因意外的結束了應用進程，當再次打開時，需要憑借自己的記憶多番操作才能回到原來的內容處，甚至永遠無法找到，為此真的是很苦惱。

淘寶針對軟件意外退出的情況則留了一手，當用戶在使用過程中，APP因意外情況退出時，下次進入，可通過首頁提供的“打開上次訪問的頁面”入口，快速回到原先失蹤的頁面，再也不用擔心內容丟失了，看似一個簡單的入口，但通過細微的改進能給用戶帶來更好的操控感和易用性，便于用戶通過短時間記憶還原。

027.「微信」行為預判-提升操作效率

產品體驗：

我們在手機的其他界面發生截圖行為時，打開微信對話框的工具欄，系統會把剛剛截取的圖片以縮略圖的方式展示在右側，暗示詢問用戶是否有發送此圖片的需求，幾秒后會自動消失。

設計思考：

我們不管使用何種應用，在交流過程中有發送圖片的需求時，除了應用本身提供的圖片之外，其他都繞不開系統相冊功能。如若深究用戶體驗，進入相冊的操作路徑是可以減少的。

從微信對話框頁面打開工具欄，如在相近的時間內系統檢測到有截屏行為時，會把剛剛截取的圖片以縮略圖的方式展示在屏幕右側，點擊即可發送，通過行為感知并幫助用戶解決可能有發送此圖片的需求，提前預判用戶的操作，以提升選擇效率。若無此需求，幾秒后自動消失，絲毫不影響用戶的其他操作。

028.「抖音」搜索-撫慰每一個被情緒困擾過的靈魂

產品體驗：

在抖音搜索較為極端且消極的關鍵詞時，比如：抑郁、服毒、不想活了等，系統會出現較為溫馨的愛心畫面，并通過情感化的文案鼓勵以及提供心理援助渠道，以此來提高用戶的積極情緒。

設計思考：

人們通常會借助于歡樂、開心來表達自己的愉悅，同時也會面臨悲傷、憂慮的情況，需要表達心中的苦悶。如果沒有得到有效的疏解、排遣，使得內心一直處于郁悶狀態無疑是很糟糕的。尤其是目前處于高度壓力下的年前人群，在環境因素、心理與生理創傷、家庭環境等情況的影響下，導致一些人因為心中的苦悶，得不到很好地宣泄、發泄，走上了極端的想法，其解決問題的方式不管是線下、線上都是從心理上入手。

抖音APP在面對極端且消極的關鍵詞搜索時，并非跟其他應用的搜索結果雷同，而是以情緒激勵的統一樣式展示結果。首先通過溫馨的愛心畫面緩解較為消極的用戶情緒，并通過積極正向的文案鼓勵用戶；其次，基于用戶在心情低落時要得到安慰或鼓勵的需求，平臺提供了心理援助熱線以及消極心理的疏導建議，幫助用戶進行緩解或改善消極行為。作為一個短視頻平臺，雖然沒有明確的義務去撫慰用戶，但這種做法可以用溫暖的方式傳遞愛與力量，也撫慰每一個被情緒困擾過的靈魂，讓用戶感受到親切放松的氛圍，是鞏固用戶粘性與忠誠度十分巧妙的方式。

029.「京東」送禮物-更是一種神秘和驚喜

產品體驗：

在京東商城購物禮物時，可以通過商品詳情頁的“送禮物給TA”，節省很多中間步驟，直接在線上完成包裝、賀卡、寄語和快遞等“一條龍”服務，將禮物送到對方手中。

設計思考：

部分用戶在特殊情況下，都有送禮物的小習慣，不管是禮尚往來、男女朋友還是送基友，有時甚至不需要理由，只想把最好的東西送給TA們。這時候可能去會店里（線上/線下）買一個對方喜歡的東西，然后經過包裝+寄語，再快遞給對方，因為整個流程的復雜，有時候不可避免會出現一些突發性的狀況，難免造成尷尬。

在京東APP購買禮物則省去了一些列的麻煩，只需要選好禮物，即可完成從包裝、賀卡、寄語和快遞等“一條龍”服務，免去不必要的麻煩以降低出錯的可能性，將操作流程和路徑都進行了簡化，讓整個送禮的過程更。通過選擇合適禮物的包裝風格，制造出禮物的神秘感，送出的不僅僅是禮物，更是一種浪漫和驚喜。

030.「叮咚買菜」一頓吃光-減少食材的浪費問題

產品體驗：

在叮咚買菜分類的“一頓吃光”列表中，菜品會根據專業廚師建議一頓的常規用量進行組合搭配包裝，包括分量較小的調味品類也進行了小份裝的貼心組合，避免食材偏多造成浪費或損耗。

設計思考：

“一粥一飯，當思來之不易”，勤儉節約，珍惜糧食是我國的傳統美德。隨著互聯網帶來的便利，很多人足不出戶便可在線上平臺完成食材的購買，但買菜也存在的很多困擾，比如買少了不夠吃，買多了又浪費，沒有一個確切的方案可以讓買的一頓食材剛剛好，因此會造成食材的浪費和更多的金錢成本。

叮咚買菜推出的“一頓吃光”欄目，用倡導勤儉節約的用餐理念與生活方式，篩選出用戶經常購買的食材搭配，再根據專業廚師對食材配比，進行分量、包裝及動態調整，以最大化滿足消費者需求，減少食材的損耗，在很大程度上解決了買菜很難確定食材分量的問題，不僅讓用戶每餐都吃得新鮮健康的同時，盡可能地減少食物浪費。

結語：

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

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

轉自：站酷

作者：大漠飛鷹CYSJ

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