起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品細節剖析，讓你看看大廠是如何做設計的（2021-01）
編輯導語：一款好的產品除了功能過硬之外，還需要讓用戶在使用的時候感受到舒適，提升用戶的體驗感。而這些，往往體現在產品設計的小細節中。很多時候，我們喜歡一款產品，卻說不上來哪里打動了我們，其實被我們忽略掉的就是那些能夠提升產品體驗的小細節。
設計的思考不僅要注重表象層面，也需要圍繞信息傳達這一設計的本質功能，以充滿自省的精神深化和反思自己的設計意識，即做到“好看、好用”。在設計過程中，要站在公司的利益上，懂用戶所想，在每一個關鍵點都要帶給用戶意想不到的驚喜，這些往往都是通過細節體現出來的。
01 「夸克瀏覽器」首個頁面-我的地盤我做主
1. 產品體驗
進入夸克瀏覽器的首個頁面，除此必要的元素之外，看到的是一片純凈之美。長按搜索框下方的空白區域，點擊“+”號，可根據用戶自己的喜好從彈窗中將想要的站點入口添加到搜索頁，便于快捷訪問。
2. 設計思考
UC瀏覽器可能不是每個移動端用戶都知道，但絕對是一方霸主，夸克與UC本是一家。昨天在網上看到一個帖子說“自從用了夸克之后就把別的瀏覽器全部刪掉了，沒有天氣掛件、沒有新聞推送、沒有購物頻道、沒有游戲插件、沒有精準廣告、就是最原始的上網工具，仿佛在這看到了當年的塞班時代一心一意做用戶體驗的影子”。
迄今為止，沒有任何一個應用可以滿足所有用戶的需求，UC瀏覽器也是如此，夸克可以將那些視UC為糞土的用戶給攬過來，表面上看似搶奪用戶，實則是風險對沖，當一個出了問題不是還有另一個么？用戶不管是在夸克還是UC，其實都在自家，一個獨善其身，一個兼濟天下。
用過手機瀏覽器的人都知道，在資訊爆炸的今天，夸克的畫面干凈得令人難以置信。在干凈的同時，并非是缺少這些站點模塊，而是放在了暗處，用戶可以根據自己的喜好將站點咨詢模塊調用出來，自定義空白區域，寓意用戶“自己的地盤自己做主”。
眾所周知，大多數瀏覽器都有站點推薦的功能，不過該功能都是給相應網站打廣告的，內容沉雜，尤其是一些強制性的內容讓用戶產生了逆反心理，而夸克精選中的網站，則是一些價值很高的優秀站點，并非廣告業務，這點可以從致用戶的一封信和網站類型得出。
這也是夸克被譽為最純凈瀏覽器的原因之一，不管是APP內容還是用戶體驗、易用性方面都能提升用戶的忠誠度，深得廣大用戶喜愛。
02 「百度」為什么把返回按按鈕放在了左下角？
1. 產品體驗
進入百度APP，頁面中80%以上的返回操作入口都放置在左下角，單手操作手機的用戶觸手可及。
2. 設計思考
Android智能設備的返回入口其實一直都在屏幕下方，只不過是根據品牌的不同，左右位置不同而已。根據后來大屏手機的普及，為了節約空間資源，使屏幕最大化的被使用，把原先硬件上的部分操作入口給隱藏了，但一直都存在。
設計師都知道，iOS與Android的設計規范存在著差異化，比如返回入口就一直在左上角，雖然也有右滑返回的交互手勢，但畢竟是隱藏的，而且對于部分頁面的左右滑動，只能對tab導航起到作用，基于目前的趨勢，手機的屏幕越來越大，單手操作的靈活性就成了難點。
百度APP的大部分頁面則是把返回按鈕直接從左上角搬到了左下角，被較為激進的用戶稱為反人類的設計，其實并非如此。大屏幕尺寸已經是趨勢，屏幕大意味著內容可以更大限度地得到展示，將返回按鈕放在左下角能有效的解決的用戶單手操作大屏幕手機操作的難點，更易于操作，提升便捷性。更有效的防止用戶因操作困難而導致手機滑落（碎屏），增加安全系數。
03 「優酷」彈幕中毫不違和感的廣告推送
1. 產品體驗
在優酷觀看視頻打開彈幕后，每隔幾分鐘，系統會推送一條廣告穿插在彈幕的內容中，點擊可進入對應的頁面。
2. 設計思考
在互聯網產品中，花樣廣告的出場方式屢見不鮮，比如在看視頻、看書之前/過程中，總是被突入起來的的廣告打斷，用戶雖然很煩但別無選擇，畢竟沒有一款真正的既免費又免廣告還很牛B的產品無償提供給用戶使用，即便用戶覺得自己沒有認真看過這些廣告，但是只要它們在用戶面前完成了播放，哪怕只是聽到了，那就完成了品牌意識的輸出。
在這個過程中，用戶可能會無形中就知道了這個品牌的存在和定位，在未來的某個場景中，用戶會默許和遵從這個品牌的輸出方式，乃至消費。廣告作為企業盈利的一種方式，不可避免，只會在盡可能減少用戶反感或抗拒的情況下自然出現。
優酷APP用了一種較為新奇的方式植入廣告，基于很多用戶在看視頻時都有開彈幕的習慣，直接將廣告穿插在了彈幕區域，每間隔幾分鐘就會推送一條，跟隨彈幕一起流動，毫無違和感。
雖然廣告植入會引起用戶的反感，但以彈幕的方式出現，并未占用額外空間及打擾用戶觀看視頻，很大程度上降低了對用戶的打擾及觀看視頻的沉浸體驗，增加了用戶對廣告的接受程度，如果對某個廣告感興趣，點擊后面的入口即可直接跳轉對應的內容頁面。
04 「QQ」發送圖片-便捷的交互路徑
1. 產品體驗
在QQ聊天對話框，點擊工具欄的圖片入口調出相冊，按住想要發送的圖片并往上拖動，松手即可發送。
2. 設計思考
我們下載到手機的APP，大部分在首次打開時都會彈出一系列的系統權限，比如相冊、相機、位置、網絡…等，社交類型的更是不必多說，基于應用本身的性質，相冊、相機及通訊錄類型的權限都是必備開啟狀態，以便于在使用過程中的圖片、視頻交流。
QQ開啟相冊權限后在用戶體驗上更是舉一反三，用戶在聊天過程中如果有使用圖片的需求，點擊后，系統會將手機最近保存的50張圖片，按照時間的先后順序以完整縮略圖的方式直接顯示在聊天界面的工具欄下方，用戶只需按住想要選擇的圖片并往上拖動，松手即可發送，非常方便，免去了常規的觸發跳轉頁面調取相冊的多步驟操作，且有效降低聊天過程中因頁面跳轉帶來的沉浸式的視覺思路阻斷，優化了操作路徑，提升產品的易用性。
05 「美團」減少一步操作、提升一級體驗
1. 產品體驗
在美團訂單列表頁面，單擊其中一個訂單從右側向最左側滑動，即可出現彈出提示，點擊刪除完成操作。
2. 設計思考
刪除操作，我們一點也陌生，大部分出現在列表類型的頁面。早期智能設備的刪除入口基本都是通過右上角編輯或單個內容區域明顯的刪除圖標入口以完成對應的刪除需求。后來，也不乏一些應用為了節省頁面空間，去掉了明面上的刪除入口，通過長按交互操作來完成刪除流程，但時至今日，并不廣為人知。
美團APP的訂單列表，只需將單個內容從右滑至最左側，從自動出現的彈窗中完成刪除操作。其實這種交互方式在目前看來并不新鮮，基本普及了，但關注細節的用戶會發現，大部分APP內容的刪除，都是在左滑之后調出刪除入口，需點擊之后才彈出確認框，繼而完成刪除。
美團APP則是在用戶有明確刪除需求的情況，從右至左大區域滑動并自動觸發刪除入口，省去點擊觸發彈窗的操作步驟，正所謂移動界面、體驗至上，減少一步操作，就能提升一級體驗。
（除了需要對用戶的刪除操作做出挽留、有營銷的多功能隱藏入口外，如無明確需求，建議省略左滑后需要再次點擊觸發彈窗的這一步操作）
06 「京東」搜索框-觸發用戶轉化動機的占位符
1. 產品體驗
京東搜索框的占位符，會根據用戶曾經搜索或查看過的商品關鍵詞進行提示，每2秒鐘切換一次，以便提醒用戶再次查找之前可能想購買的的商品。
2. 設計思考
占位符就是在輸入框中占住一個固定的位置，然后用戶可以根據文案描述或提示語來明確每個表單輸入框應當填什么內容，并且能夠促進表單輸入完成和提高轉化率所存在的一個元素。最為常見的就是“請輸入xxx”一段提示性質的文案，但如果把占位符的作用僅限于此，那就太浪費資源了。
京東APP搜索框的占位符開啟了自動搜索建議機制，不僅展示了平臺主推、熱門等部分商品的關鍵詞，還通過動態預測用戶查詢方向，曾經搜索或瀏覽過的商品關鍵詞會替代占位符給予用戶提示。
比如用戶搜索或購買過狗糧，后續進入APP，系統就以占位符的方式推薦跟小狗相關的商品，比如狗窩、驅蟲藥、罐頭等，雖然不能直接進行搜索，但足以喚醒無目標用戶的購物記憶，幫助用戶明確購物需求，以便用于迅速作出決策、執行操作，起到提升下單轉化的推動作用。
07 「騰訊視頻」付費片-試看6分鐘的激進小心思
1. 產品體驗
觀看騰訊視頻付費影片，可免費試看6分鐘，時間到了會自動暫停并彈出付費渠道彈窗，付費/放棄觀看二選一。
2. 設計思考
廣告和影片付費對視頻類型的應用來說，是兩個非常重要的盈利渠道。平臺除了日常的維護費用外，且不說影片的質量怎么樣，單是購買版權就是很大一筆費用，所以收費也是合情合理，用戶通?？梢酝ㄟ^購買單片或開通平臺VIP觀看付費影片。
使用過騰訊視頻的用戶都知道，付費影片可以免費試看6分鐘，那么為什么不是直接放在付費區域，只對付費用戶開放呢？
騰訊視頻的試看其實相當于打開用戶的潘多拉魔盒，大部分影片6分鐘基本已初入劇情，能吊足胃口，激發用戶看下去的興趣，如果用戶不喜歡，也有自己選擇的權利。通過一小段的試看把付費片的部分價值明確告知用戶，用細節不斷觸達用戶心智，達到吸引用戶、引導用戶轉化目的。
另外，很多用戶都傾向于回報別人的好意，投之以木桃，報之以瓊瑤，通過免費時間段的觀看，礙于面子心理，也有可能觸發用戶的付費動機（這個不難理解，比如我們路過某個熟人的水果攤，每次都會叫我們去嘗一下，久而久之，即使沒有購買需求，礙于面子，多少也會買一點），從而形成轉化，為平臺帶來收益。
08 「高德地圖」模擬現實事物運行規律的微交互
1. 產品體驗
高德地圖規劃路線后，選擇出行方式時，用模擬現實事務的微動效圖標+文案提示對應的出行方式，直觀且趣味的表現方式更有代入感。
2. 設計思考
我們經常在網上看到這樣的問題“高德地圖與百度地圖到底哪個好用”，準確的說是各有千秋，高德地圖用戶略多于百度地圖，若論起用戶使用體驗，兩家的應用一點都不含糊。在導航軟件作為用戶出行必備軟件之一的今天，不僅僅是認路，更是用戶在外吃、喝、玩、樂的一款高效綜合體，其用戶體驗一直都是企業研究的重點。
使用高德地圖選擇出行時，出行方式圖標以模擬現實事物的運行規律，?利用現有認知，幫助用戶輕松掌握界面的使用方式，縮短對出行方式的理解時間，?最大程度的降低用戶的學習成本。同時圖標動效的展現方式，能增加趣味性、以及用戶對于界面功能直接操縱的感知，降低操作難度，用情感化方式的表現，提升用戶粘性。
09 「網易云音樂」定制您的專屬首頁
1. 產品體驗
在網易云音樂首頁，將頁面向上滑至底部，進入自定義排序功能，即可定制用戶自己喜歡的專屬首頁樣式以及功能模塊的先后順序。
2. 設計思考
很多設計團隊都深知用戶體驗至上的道理，但一個應用界面的交互及展現樣式不管以何種方式呈現，都不可能滿足所有用戶的需求，只能在不斷追求細節的基礎上來滿足更多用戶。
首頁自定義在一些部分較為個性化的APP上已經不足為奇了，即根據用戶自身的需求，去修改系統、官方提供的頁面內容及先后順序。不過在眾多APP的首頁自定義功能的認知里，都是對頁面的原有功能進行增減及自定義排序。
在網易云音樂APP最新版本的首頁底部也增加了自定義排序功能入口，不同于其他APP頁面自定義的是除了能對現有功能進行增減及排序外，還特別定制了三種不同設計樣式的呈現以供用戶選擇，相當于用戶隨時都可以對首頁進行改版。
不用的用戶都有不同的視覺瀏覽及操作喜好，比如大卡片、九宮格、操作熱區的范圍等，網易云音樂通過提供不同的首頁樣式可以滿足更多用戶的需求，提供更愉快的使用體驗，增強用戶的信任感，即多滿足一個用戶就可能多留住一群用戶，降低了用戶流失概率。
10 「夸克瀏覽器」關鍵詞-提前預知用戶的需求
1. 產品體驗
使用夸克瀏覽器搜索相關內容時，系統會自動檢索關鍵詞，并將關鍵詞對應的常見內容結果以卡片樣式展示給用戶，隨著關鍵詞的變化，匹配的內容也隨之改變。
2. 設計思考
說到瀏覽器的作用，想必大家腦海里的第一印象就是搜索，將自己不明白的東西通過搜索引擎從互聯網大數據中自動匹配出海量的相關數據鏈接，提供的信息量非常龐大，包含各色各樣的新聞、問答、文章，可以說一應俱全，涵蓋一切，其各種瀏覽器的搜索操作方式大同小異，基本都是通過輸入關鍵詞，然后點擊搜索出結果。
夸克瀏覽器在用戶搜索的操作（點擊搜索之前）過程中，增加了一個細節，即“行為預判”，通過用戶輸入的關鍵詞，提前預知用戶可能想要查找的內容，以簡介的方式呈現，給用戶提供一個快捷通道，加深用戶對此關鍵詞條的認知，快速判斷出是否滿足自己的需求。
系統所匹配的卡片式內容簡介是通過數據庫長時間的數據分析，提取其中較為共性、常見的內容來反映用戶可能出現的興趣與需求，并合理挖掘使用，通過引導便于用戶快速識別并點擊，縮短輸入時間，還能解決用戶對關鍵詞組織不清晰、邏輯不清的用戶給與指導，提升產品的易用性。
11 「快手」剛剛看過-貼心的用戶提醒
1. 產品體驗
從快手“精選”欄目進入用戶主頁，在作品列表將所瀏覽過的視頻上標記剛剛看過，避免重復點擊觀看。
2. 設計思考
身處移動互聯網浪潮之中，我們不難發現，如今的短視頻把用戶的卷入和參與推向了一個新高度，尤其是生活在大城市高度壓力下的年輕用戶群。
學累了，就想刷個小視頻放松下，真以為然后就能集中精力再去學習？其實都是在扯淡，總覺得接下來的某個視頻會有種奇異的魔力，一刷就停不下來，就好比在無邊無際的海洋中，越喝越渴，別說自身難以碎片化學習，就連老人和小孩都帶進來了。
抖音和快手作為目前短視頻的代表，都有著龐大的用戶群，在用戶需求基本都能滿足的條件下，其戰略方向準確的基礎上，誰的用戶體驗最好，誰就是最后的贏家。
快手APP雖然被后來者抖音趕超，但在用戶體驗上從未含糊過。細心的用戶可能會發現，在用戶主頁的作品列表中，剛剛看過的短視頻做作了提醒標記，告知用戶少走冤路，避開已看過的短視頻，可以避免用戶因重復點擊觀看而浪費時間，且在非WiFi環境下，還能節約用戶的數據流量，這個提示算是很貼心了。
12 「騰訊視頻」VIP欄目-免費營銷策略轉化用戶
1. 產品體驗
騰訊視頻VIP欄目中的電視劇，基本都可以免費看前面的幾集，然后根據劇情的發展程度，從免費變成付費，未完結的電視劇還可以通過二次付費進行超前點播。
2. 設計思考
免費的東西人人都喜歡，古今中外大都如此，免費策略營銷也因此有強大的生命力。但互聯網應用如若完全免費，不具商業性，可能連基本的日常生活都難以維持。大家都知道，會員付費是影視類應用盈利的一大來源，但用戶對付費造成自己財產損失有種天然的抗拒，通常電視劇都提供幾集免費觀看，然后才硬性要求開通VIP。
視頻類應用大都如此，這里以騰訊視頻為例。不難發現，付費區不同的電視劇，其免費觀看的集數不同，這并不是隨意設定，而是根據劇情的發展程度，在某個“高潮”即將迭起的那一集開始收費，通過免費階段的觀看，對用戶產生一定的吸引，勾起想要看下去的欲望，從而出現付費動機以促成用戶開通VIP。
這其中還有一部分互惠原則存在，即給用戶免費一部分之后，降低用戶付費的心理負擔，提高對費用的接受程度，來而不往非禮也。針對未完結的電視劇，如果熱度較高，在用戶的觀看欲望高漲之際抓住機會點，通過二次付費提供超前點播，用戶也隨之接受。不管是強制VIP還是二次付費點播，其都需要在合適的時間、合適的地點予以合理的出現，才有利于最大程度的轉化用戶。
13 「支付寶」城市天氣-不僅僅是天氣預報
1. 產品體驗
支付寶首頁左上角城市下方提供了天氣狀況，進入切換地區頁面，會展示當前城市最近幾天的天氣情況。
2. 設計思考
隨著支付功能的普及，幾乎也成了每天都會打開的引用，它集合了我們的衣食住行，以前出門不能忘了帶錢包，而現在只需要一部手機就能搞定一切。雖然功能眾多，但對大部分用戶來說，最主要還是歸結于支付功能，除了部分線上支付外，就是線下支付了，顧名思義，線下即涉及用戶的出行。
支付寶首頁城市下方的天氣預報，為用戶提供了貼心的提醒，便于有出行需求的用戶根據天氣狀況的程度決定是否必須出行或準備出行的必備物品。同時支付寶集合人們的生活服務，即使用戶放棄出行，部分事情也可以通過支付寶線上解決，比如外賣、購物等。
14 「躺平」趣味化的下拉刷新樣式
1. 產品體驗
躺平APP在頁面下拉刷新時，會出現一個倒掛俯沖的“小人兒”動效結合情感化設計，趣味且引人注目。
2. 設計思考
下拉刷新是APP不可缺少的功能，十分常見，主要從品牌、功能、驚喜、運營、反饋五個維度結合情感化設計。在頁面下拉刷新的時候，整個頁面也會跟著下移，待頁面數據加載完成，頁面會恢復到初始狀態，在這中間就存在一個時間差，一個好的下拉刷新樣式，能讓用戶通過時間差享受到趣味化的視覺體驗及減少等待過程中的焦慮感。
躺平APP下拉刷新使用了品牌IP插圖，從外觀視覺上是給用戶打造品牌印象，倒掛俯沖的“小人兒”動效結合情感化設計，趣味化的用戶體驗，能在產品特性上帶給用戶驚喜，勾起回憶，通過視覺跟用戶進行情感互動。
15 「滴滴打車」添加途經點-解決位置不統一的情況
1. 產品體驗
使用滴滴出行叫車，用戶在行程前輸入目的地時，點擊右側“+”符號添加最多不超過三個途經點。司機將按照乘客預先設定多個“途經點”，把多個乘客送達預定位置，每個途經點的停留時間不超過3分鐘。
2. 設計思考
打車模式從之前的線下出租車轉戰到線上，誕生的了很多叫車平臺，其用的最多、知名度最高的當屬滴滴出行，線上叫車服務給我們的出行帶來的極大的便利。
不知道大家有沒有碰到過這種情況，幾個人一起叫車但下車點不同，等到需要時可能會跟司機發生不必要的糾紛或不愉快的出行。多個人的上車點不同，但終點一樣，也會被迫每人都要叫車，因此需要付出更多的金錢成本。
滴滴出行APP的添加途經點功能，完美的解決的多個用戶出行的這種煩惱。途經點旨在滿足多人共同乘車、個人多點出行等場景下多目的地經停的需求，減少口頭溝通帶來的誤解與不便。途經點可以為乘客停車3分鐘，不用額外收費，如乘客需要在某個地點長時等待，則需與司機溝通達成一致即可，隨著此功能的上線，滴滴出行為用戶提供了更為便捷的打車體驗。
結語
設計師需要養成體驗產品的好習慣并將優秀的產品細節記錄下來，加強自己的記憶，不僅能提升自己的語言組織和總結能力，也為日后輸出優秀的作品當鋪墊，對自己的能力提升以及未來的職業發展帶來便利。
本期產品設計細節分享結束，我們下期再見。
作者：大漠飛鷹；公眾號：能量眼球
本文由 @大漠飛鷹 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于 CC0 協議
大神你好～看了你的文章覺得非常棒，請問能否轉至我們公司的內網供大家學習討論？會注明文章的出處～
你好，可以轉載的，請告知轉載地址
快手的剛剛看過這個功能，還存在指引用戶能快速找到當前看的視頻，因為有些博主的視頻一次性分幾集，用戶如果想找下一集，沒有相應標簽的話，會找很久。有了這個，用戶在瀏覽幾百上千視頻頁面的時候，可能很快找到當前視頻
個人認為，除了13點有點牽強，其他的整理的太好了！收藏
感謝建議，不過個人覺得存在即合理，我會再找一些相關資料查證一下，感謝提醒