起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品細節剖析，讓你看看大廠是如何做設計的（2021-06）
編輯導語：一款好的產品除了功能過硬之外，還需要讓用戶在使用的時候感受到舒適，提升用戶的體驗感。而這些，往往體現在產品設計的小細節中。很多時候，我們喜歡一款產品，卻說不上來哪里打動了我們，其實被我們忽略掉的就是那些能夠提升產品體驗的小細節。
如何讓自己的產品在保證基本的可用性和易用性的同時，還能讓界面看起來柔和、更富有親和力？一個產品能留住用戶的雖然是內容本身的質量與吸引力，但一個小小的細節卻能夠阻止用戶的流失，成為內容轉化的最后一道防線，讓人眼前一亮，值得借鑒。
76 「百度地圖」出行前的“極端”天氣預報
1. 產品體驗
使用百度地圖，導航路線規劃后，會出現當日的天氣提醒，點擊進入即可查看每個時段的天氣預報。
2. 設計思考
“賭博看運氣，出行看天氣”，任何時候，大家如果優先知道天氣情況就可以提前做好準備，這對人們的生活方便起到很大的作用。尤其是出行，天氣的變化是影響我們是否攜帶雨傘、交通工具選擇、保暖問題的重要因素，所以提前預知天氣的重要性可想而知。
使用百度地圖APP，導航路線規劃后，出行方式的下方會提示最近可能影響到出行問題的天氣變化，便于用戶選擇更合理的出行方式及交通工具，避免受到惡劣天氣變化的影響。還可以通過點擊進入，查看每個小時的天氣詳情，對于時間不是很敏感的用戶來說，為了錯開惡劣的天氣，提前或延遲出行也是一種不錯的選擇。
77 「搜狗輸入法」“跨界”復制/粘貼
1. 產品體驗
電腦和移動端都使用搜狗輸入法，且在同一個賬號登錄的情況下，電腦端出現文字復制的操作后，可在移動端設備任何位置的輸入框內直接粘貼，非常便捷。
2. 設計思考
輸入法給大部分用戶的第一感覺就是用來輸入文字的，哪個好用用哪個，一旦習慣了使用某個輸入法，基本就成了忠實用戶，不會隨意去改變。不過有時候輸入法只是輔助作用，并不需要直接使用，比如：我們在電腦網頁看到自己喜歡的文案語錄時，想發個朋友圈，就需要先復制，再用電腦端微信發到手機微信，最后從手機微信復制再到朋友圈粘貼，雖然很麻煩，用戶還是可以接受的，不然通過自己碼字就會浪費大量的時間。
搜狗輸入法的黑科技一直都很多，比如圖片英文翻譯、智能助手、文字掃描提取等，都是非常實用的功能。最近發現了一個新的設計細節，讓人驚呼。當電腦和手機端都使用搜狗輸入法且登錄同一個賬號時，在電腦端復制文字后，打開手機端任何輸入窗口，即可看到在電腦上復制的文字，直接粘貼即可，由被動輔助變為主動攝取，再也不用通過聊天工具發送到手機端進行二次復制的繁瑣操作了，實現“跨界”復制/粘貼，非常方便?？梢钥闯鰣F隊站在用戶體驗的角度上，對于輸入法使用場景的串聯考慮是非常貼心的，不僅能再次俘獲一大批新用戶的芳心，也能提升老用戶的使用忠誠度。
78 「支付寶」螞蟻森林/莊園-模擬現實世界的自然規律
1. 產品體驗
在支付寶螞蟻森林/莊園里，白天和夜晚分別使用了不同的場景，模擬現實世界中的自然規律，白天晴空萬里、且有陽光照射，夜晚滿天繁星、且有流星劃過，頗具真實感。
2. 設計思考
幾年前QQ牧場養殖、農場偷菜，如今演變卻變成了支付寶的螞蟻莊園養小雞、森林偷能量，將以前的純游戲思維轉變成了如今的游戲+公益的形式，不僅滿足了用戶小游戲的需求，還能促進公益事業的發展，同時用戶也會得到心理上的滿足和成就感。螞蟻森林/莊園小游戲對用戶產生的粘性除了其模式的新穎，也離不開產品團隊日夜刻苦鉆研所提升的用戶體驗。
螞蟻森林/莊園的視覺場景跟隨著白天、夜晚的環境變化，產品遵循現實世界慣例來呈現信息，更具真實感，便于用戶在使用中將現實中的體驗不經意間帶入到游戲場景，可使其更加投入，通過用戶的現有認知，以促成情感化的體驗，使產品更具親和力。
79 「躺平」趣味化的“擊掌”點贊
1. 產品體驗
在躺平APP對其他用戶的發表的動態推薦時，使用了擊掌圖標，且有光彩線條圍繞著掌心向四周擴散的動效樣式，趣味性十足。
2. 設計思考
推薦是對其事件/事務認可的一種表達行為，最早可追溯到上古時代的堯舜禹時期，那時候如果對某件事或人，高度認可時就使用鼓掌（慢速且有節奏）的方式來表達；到后面慢慢演變成了簡單的一個字“彩”；再到如今皆可用鼓掌、豎大拇指或直接言語…表達。
基于互聯網的發達，為了讓更多人發現其內容資源的優質性，80%以上直接沿用了豎大拇指樣式來表達對內容的認可及贊許，即使有區別于其他產品，也是在局部或動效樣式上做出一點改變。
躺平APP的點贊樣式較為新穎，使用了擊掌的圖標，并且使用了光彩線條圍繞掌心向四周擴散的動效樣式，相比豎起大拇指則更加強烈，意味著喝彩，表達了對內容的高度認可，相較于同質化嚴重的情況下作出了創新，?在過渡的時間差中，進行了趣味化的表達，更具視覺沖擊力。
（“擊掌”的點贊方式適合用于類似躺平、動漫、B站等二次元或個性化的產品中，如果用于工具、新聞、電商等類型產品，可能會對用戶產生干擾，慎用）
80 「QQ音樂」導入外部歌單-不同的設備/賬號歌單無縫對接
1. 產品體驗
在QQ音樂我的頁面，使用“導入外部歌單”功能，根據提示，即可把其他音樂應用里歌曲添加到QQ音樂歌單。
2. 設計思考
現在聽歌早已不像以前，一張內存卡或一根數據線就可以把手機里的歌曲轉移它處。基于人們生活水平的提高，數據流量套餐相比以前更是翻了百倍不止，WiFi基本人手普及，所以大家更傾向于在線聽歌，無需下載（除非深山老林或地洞沒有信號）占用手機內存，創建一個歌單，把自己喜歡的收藏起來，即時聽歌，非常方便，如果沒有特別的情況，成為了一款音樂應用的忠實用戶后，基本不會頻繁轉移。
QQ音樂的導入外部歌單功能，可將其他音樂APP的歌單添加到QQ音樂自己的歌單里。對于導入外部歌曲，很多用戶沒有什么概念，感覺自己用不上，別忘了蝦米音樂“尸骨未寒”。
很多事情不是沒有可能發生，當一旦需要時，這個功能就是“救命稻草”，可以想象，如果通過手動把以前的幾百首歌曲一首一首的添加到歌單，不知道會不會“抽筋”。除此之外，還可以將歌單在朋友之間相互分享添加，這也是一種不錯的音樂交友方式，實現不同設備、賬號的音樂歌單無縫對接。
81 「微信」簡便且高效的圖片翻譯功能
1. 產品體驗
在微信的聊天對話框中打開英文圖片，點擊下方的翻譯功能按鈕，即可翻譯圖片上的外文，并以中文顯示。
2. 設計思考
在我們的生活中，有時候多多少會遇到一些英文，比如進口食品包裝、藥物說明、護膚品等，其中就有一部分是純英文說明，無論自己多么博學多才，但不見得都能理解英文。
記得之前有一次，我自己的電腦藍屏，出現的全是英文，雖然自己也是一直提倡用互聯網解決問題，且也有一些拍譯軟件，但一想著需要下載注冊，沒準兒還要先看廣告或收費，且天生對英文有一種與生俱來陌生感，還未開始便放棄了，于是成了伸手黨，去請求別人幫助。
微信的圖片翻譯功能就是專為解決這一問題而生。通過在對話框中點擊圖片直接翻譯，看到一道綠色的光由上而下掃過之后，圖片中的英文就變成了中文，著實方便，比起以前通過第三方或先提取圖片中的文字來翻譯，操作簡單且效率還提升了很多，可以說是一個非常實用的小功能。
82 「橙」不一樣的的登錄方式
1. 產品體驗
在橙APP的登錄頁面，區別了常見的登錄界面樣式，使用對話聊天的方式按流程提示用戶完成登錄，界面流程方式新穎，濃厚的社交行業屬性。
2. 設計思考
在任何應用中，要想有自己的“私密”領地，都繞不開登錄/注冊的流程，但凡手持智能手機又想玩的開的用戶，對登錄的流程是非常熟悉的，比如手機號+驗證碼、一鍵登錄、第三方登錄，無外乎這幾種常規的登錄方式，如果想來點“刺激”的，無非就是加個logo、貼個插圖、來點動效等，見怪不怪了。
橙APP的登錄方式雖然同樣是手機號+驗證碼登錄，但在流程樣式上卻非常新穎。鑒于應用本身屬于社交行業，通過對話詢問的方式讓用戶按照流程輸入了手機號和驗證碼，給用戶造成這不是對使用該APP設置門檻的錯覺，降低用戶的防備心理（很多產品用戶量的增長都被擋在了登錄之門外），讓用戶不知不覺在聊天過程中完成了登錄流程操作，其方式非常友好且登錄的過程是愉快的，同時還兼帶了濃濃的社交行業屬性，通過更直觀的登錄場景感受，拉近用戶跟產品之間的距離，使用戶的印象更加深刻。
83 「高德地圖」桌面一鍵導航-出行更高效
1. 產品體驗
通過高德地圖的收藏夾，點擊收藏地址右側的功能菜單，在彈窗中將該地址“添加快捷導航到桌面”，后續就不用每次輸入常用的目的地了，直接通過桌面的圖標入口即可一鍵導航。
2. 設計思考
對于在外的工作人員，導航算是手機必備的軟件，以前只是純粹的導航認路，而隨著汽車量的增長，各地交通逐漸開始變得緊張，那么不管我們是否知道路線，駕駛之前都會習慣性打開地圖導航，隨時觀察路線擁堵情況來思考是否有更換更優路線的需求，于是就按照慣例打開導航、錄入目的地、選擇路線……等一系列的常規操作，日復一日，似乎沒有覺得什么不妥。
高德地圖的桌面一鍵導航功能，為長期有駕駛需求的用戶提供了更為便捷的操作，將經常使用的目的地添加的收藏夾，再添加到桌面以生成目的地導航便捷入口，有需要時桌面點擊即可，系統將自動規劃最優路線，通過最便捷的方式一鍵導航，再也不用日復一日的重復之前的操作了。
站在設計師的角度，在解決用戶需求時，操作越復雜、步驟越多，用戶的選擇條件、視覺負擔及時間成本就越多，出錯的情況也越多，故而用戶流失的可能性就越大。高德地圖通過一鍵導航簡化操作流程，通過合理的操作路徑，降低用戶時間成本，有效提升了使用頻率及粘性。
84 「愛奇藝閱讀」性別選擇-更明確的指引和提示
1. 產品體驗
首次進入愛奇藝閱讀APP，在性別選擇頁面中，男生和女生的頭像通過動畫的形式反復左右替換，用強視覺提醒的方式推動用戶進行選擇操作，以便于提供更匹配的內容資源。
2. 設計思考
大部分新聞或閱讀類型的APP，在用戶首次進入應用時，都有類似性別、行業、愛好之類的選擇，其主要目的是確定用戶的屬性，并提供更加匹配該屬性的內容資源來提升用戶的滿意度。其流程也是千篇一律，以建議性的提醒用戶去做選擇，如無需要直接跳過即可。
愛奇藝閱讀首次即進入APP時，以動態的性別頭像插圖反復左右切換的動效方式來提示有用戶選擇性別，相比常見的靜態按鈕直接顯示在那里會更加友好，不會過于生硬、冷冰冰，其動畫視覺樣式給予明確的指引和提示，更能引起用戶的注意，通過強烈的視覺提醒促使用戶更高效的完成當前任務。
類似這種選擇且非強制性的前置頁面，很多設計師只是按部就班當做一個流程，其實要想做好并非僅僅如此，可以通過趣味化、情感化、動效等方式增強用戶去選擇的欲望，以提高操作幾率，用戶一旦選擇，進入應用之后所看的內容定然更符合自身的需求，也能提高用戶的滿意度，其滿意度的高低能決定用戶的去留及轉化，所以應用中，用戶的前置選擇對產品的重要性可想而知。
85「餓了么」合適的時間、合適的提醒
1. 產品體驗
如果在餓了么有正在進行中的訂單，再次進入應用時，右下角會提供一個查看的快捷入口，點擊可快速進入該訂單查看進度或騎手配送狀態。
2. 設計思考
隨著外賣行業的普及，給我們的生活帶來了很大的便利，尤其是一日三餐，我們只需花幾分鐘的時間在外賣平臺上下單，其他的事情交給商家和外賣小哥，很大程度上縮短了我們去店途中和店里的等待時間，特別是對上班族來說，真的是太便利了。
不過外賣平臺不像京東淘寶-人們可以無憂無慮的逛上幾個小時，通常都是目標明確的用戶，在短時間內完成自己的需求，要么下單、要么查看配送進度。
如果在餓了么有訂單存在，再次進入首頁，右下角會提示配送信息，點擊直接進入查看詳情。從表面上看，右下角的入口雖然提供了快捷通道，但似乎不太友好，總是會遮擋部分內容。
其實并非如此，是因產品根據用戶的使用場景進行行為預判而設計的快捷入口，在正常情況下，從下單到完結一般在30分鐘左右，如果用戶存在未完結訂單且在短時間內再次進入平臺，80%以上的用戶此時需求為查詢配送進度，因此，右下角的進度提示正是在合適的時間給予用戶合適的提醒，根據用戶的場景需求提供了最為便捷的解決方案，由此可見、利大于弊。
86 「搜狗輸入法」教你少打字、多開掛
1. 產品體驗
進入搜狗輸入法的設置中，可開啟開掛模式，里面的三連發、回聲、重要的事情說三遍分別對應不同的效果。
2. 設計思考
搜狗輸入法在業界雖不敢說是最牛，但一定是數一數二的存在，發展至今，不僅僅是在滿足用戶的基本需求，還提供了讓用戶感到驚喜的功能，而現在更是研發了很多“黑科技”。
從搜狗輸入法左側的logo中進入工具選項，在設置中即可選擇開掛模式（真實效果見上圖）。正如字面的意思，搜狗輸入法通過智能幫助用戶自動完成一些列的復制粘貼工作，瞬間讓打字刷屏的手速快到逆天，且操作簡單、輕松完成，方便用戶在開懟、賣萌、刷屏過程中直接碾壓對方的打字速度。開掛功能可謂是實用性與趣味性兼備，讓我們在日常中，面對不同的社交需求時帶來貼心的改變。
（凡事有一個度，刷屏如果沒有用對場景，可能會遭到對方的反感，事在人為。就像之前的“拍一拍”功能面世，卻有人在上班時間拿去拍領導、拍老板，后果就不說了，刀可切菜亦可傷人）
87「美團」垃圾分類-解決餐后垃圾分類之憂
1. 產品體驗
美團我的頁面，推薦工具的“垃圾分類”功能，能幫助我們進行識別因外賣產出的垃圾類型，便于跟線下對應的垃圾桶“對號入座”，減少不必要的垃圾混合而增加清潔工人的工作量。
2. 設計思考
外賣平臺的興起，給我們的生活帶來了很大的便利，同時也產生了一些危害，首當其沖就是環境的污染。比如包裝盒、包裝袋、餐具等大量生活垃圾的產出，確實在外賣行業普及后，亂扔垃圾的情況跟隨著瘋速增長，雖然這些屬于個人情況，但也有部分用戶因不知垃圾如何分類，而將所有垃圾聚集在一起，然后就成清潔工的事情，最終無端增加垃圾分類的工作難度。
美團的“垃圾分類”功能對衛生環保方面增添了一份力量，當用戶不知道自己產出的生活垃圾是何種類型時，可通過查看常見垃圾類型提示或搜索來確定類型，方便用戶按類型將垃圾丟入對應的垃圾桶，解決餐后垃圾分類之憂，幫助養成良好的垃圾分類習慣，助力垃圾分類落地。還能消除用戶對“外賣垃圾分類麻煩”的顧慮，利用線上垃圾類型的普及，為綠色發展及環境保護貢獻自己的一份力量。
88「優酷」個性化彈幕設置-看劇互動兩不誤
1. 產品體驗
在優酷APP開著彈幕看片時，可通過彈幕設置調整字體的不透明度、行數、大小及速度來設定最適合自己樣式。
2. 設計思考
彈幕，用戶非常熟悉的一個詞，很多時候在看影片時，彈幕里面的內容遠遠要比影片帶來的樂趣多很多，除了能從中獲得群眾的陪伴增加愉悅感外，還可以帶動視頻的觀看氛圍，讓活躍的用戶有了表達自我的動力和熱情。但對于“鍵盤俠”來說，僅僅在上方顯示的幾行彈幕根本無法滿足自己看影片互動及調侃的需求。
優酷的彈幕設置中，可以根據自己的實際需求對彈幕字體大小、透明度、區域等參數進行設置，針對喜好調侃互動的用戶來說，使用滿屏半透明度字體樣式的彈幕無疑是最好的選擇，互動看片兩不誤。
89 「隨便走」AR導航-“傻瓜”式操作，老少皆宜
1. 產品體驗
使用隨便走導航，全程利用AR實景，通過3D立體形式的方向引導，幫助我們找到周邊的任何一個地方。
2. 設計思考
導航是我們出行必備的工具，目前高德和百度在該領域各自獨霸一方，看似很牛叉，但并不是萬能的。比如老人操作起來有一定的難度，經常各種功能找不到還說不好用；又比如我們在陌生的重慶市，可能你從這南面1樓進去，北面就在20樓，毫不夸張，如果通過常規的地圖導航去找人，我建議你最好吃個早餐再出去，等找到人之后就可以吃夜宵了；再比如……不比了。
隨便走APP是一款便捷式輕量導航工具，主打“讓生活樂趣一目了然”。利用“AR全息實景”的展現方式，改變了必須要有地圖的模式，對于我們找周邊的美食、酒店、公交、廁所、景點等需求，進行穿透式3D立體指引，操作簡單，不管前、后、左、右、上、下都有非常明顯的視覺引導，只有你想不到，沒有它找不到，對于長期生活在大城市的用戶，交通復雜、道巷縱橫，很可能我就在你“隔壁”，你卻找不到我“老王”。此外，隨便走APP操作簡單，學習成本基本為零，對家中老人而言，也是一款不錯的導航工具。
90 「微信讀書」模擬現實的行為動作
1. 產品體驗
在微信讀書的書架頁面，點擊書籍以及書本翻頁，都使模擬了現實生活中較為自然且真實的從書架拿書、及各個角度翻頁的效果。
2. 設計思考
看書APP雖然眾多，但真正能堅持下去、養成習慣的沒有幾個人能做到，站在平臺的角度思考，畢竟書本的內容是平臺無法修改的，除了提供優質的資源并給予方向指引外，其他便是通過設計體驗來提升用戶的好感度了，
微信讀書APP從書架的拿書動作到書本的翻頁，都模擬了現實生活中用戶看書的行為動作，大家都知道，真正喜歡閱讀的人，是不會在意這些所謂的橫豎及交互效果的，但前面都說了，這種人畢竟在于少數。
因為受眾的差別，模擬現實其最主要的作用就是為了吸引眼球，模擬用戶的實際行為，將其代入真實的情境中，使用戶對產品產生深刻的認同感，則看著更加舒心，待用戶提升忠誠且養成看書習慣之后，這些作用就會慢慢變得微不足道。
結語
設計師需要養成體驗產品的好習慣并將優秀的產品細節記錄下來，加強自己的記憶，不僅能提升自己的語言組織和總結能力，也為日后輸出優秀的作品當鋪墊，對自己的能力提升以及未來的職業發展帶來便利。
本期產品設計細節分享結束，我們下期再見。
作者：大漠飛鷹；公眾號：能量眼球
本文由 @大漠飛鷹 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自?Unsplash，基于 CC0 協議
不一樣的視角分析設計、場景、理念，學到了
從設計中抽象出設計師基于的場景與考慮，不斷豐富自身