前言

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

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

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

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

018.「優(yōu)酷」會員轉(zhuǎn)化-擊潰用戶最后一道心理防線

019.「網(wǎng)易云音樂」播放中的歌曲快速定位

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

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

022.「蝦米音樂」符合產(chǎn)品特性氣質(zhì)的標簽欄

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

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

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

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

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

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

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

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

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

產(chǎn)品體驗：

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

設計思考：

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

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

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

產(chǎn)品體驗：

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

設計思考：

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

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

018.「優(yōu)酷」會員轉(zhuǎn)化-擊潰用戶最后一道心理防線

產(chǎn)品體驗：

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

設計思考：

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

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

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

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

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

019.「網(wǎng)易云音樂」播放中的歌曲快速定位

產(chǎn)品體驗：

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

設計思考：

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

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

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

產(chǎn)品體驗：

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

設計思考：

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

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

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

產(chǎn)品體驗：

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

設計思考：

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

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

022.「蝦米音樂」符合產(chǎn)品特性氣質(zhì)的標簽欄

產(chǎn)品體驗：

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

設計思考：

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

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

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

產(chǎn)品體驗：

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

設計思考：

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

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

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

產(chǎn)品體驗：

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

設計思考：

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

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

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

產(chǎn)品體驗：

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

設計思考：

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

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

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

產(chǎn)品體驗：

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

設計思考：

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

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

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

產(chǎn)品體驗：

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

設計思考：

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

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

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

產(chǎn)品體驗：

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

設計思考：

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

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

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

產(chǎn)品體驗：

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

設計思考：

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

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

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

產(chǎn)品體驗：

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

設計思考：

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

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

結(jié)語：

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

本期產(chǎn)品設計細節(jié)分享結(jié)束，我們下期再見。

轉(zhuǎn)自：站酷

作者：大漠飛鷹CYSJ

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