產品細節剖析,讓你看看大廠是如何做設計的(2021-20)

8 評論 3925 瀏覽 15 收藏 30 分鐘

編輯導語:用戶在體驗產品時,往往會因為一些細節而對該產品更加喜愛或者厭惡,因為確定用戶轉化的關鍵不是產品本身,而是用戶的主觀心理感受。作者通過體驗以下幾款產品,總結其細節設計,看看是如何直擊用戶心理的。

我們在體驗優秀的產品時,很多看似簡單是設計往往會隱藏著很多細節,大到功能流程、小到文案或按鈕,這種觀察力來自于平時的多看、多練、多思考,很多小技巧能夠恰到好處地提升界面的設計視覺效果和使用體驗。

設計師都明白,確定用戶轉化的關鍵不是產品本身,而是用戶的主觀心理感受。

在設計一個高效且美觀的UI界面時,不僅要要將需求轉化為解決方案、把各個功能細節表述清楚,還應站在業務的角度考慮如何用設計手段提升產品的轉化率和數據的提升,通過深入挖掘用戶習慣,解決可能碰到的一系列問題,減少用戶在使用中的困惑及提高愉悅程度。

2021 | 第20篇分享目錄(286~300):

  • 286.「微信」來電通知-個性化的鈴聲設置
  • 287.「網易云音樂」點贊圖標-“熱評”諧音梗
  • 288.「餓了么」最近看過-快捷的查看入口
  • 289.「京東」個人頭像-意想不到的上傳失敗
  • 290.「支付寶」一鍵備注-降低操作成本 備注更高效
  • 291.「豆瓣」品牌傳播-劉海屏后面隱藏的LOGO
  • 292.「微信」群消息免打擾-依然不會錯過重要的人/消息
  • 293.「即刻」個人中心-頭像可以隨意拖動
  • 294.「iPhone」細節控-調節亮度 圖標的交互變化
  • 295.「支付寶」消息重新編輯-產品的包容性
  • 296.「淘寶」先用后付-解決用戶退貨難的痛點
  • 297.「菜鳥」取快遞-標題欄的友好數據提示
  • 298.「王者榮耀」加載中-分散用戶注意力
  • 299.「淘寶」庫存緊張-營造緊張感 促進快速決策
  • 300.「CCtalk」短信驗證碼-自動提取 一鍵輸入

286.「微信」來電通知-個性化的鈴聲設置

1. 產品體驗

在微信我的-設置-新消息通知-來點鈴聲頁面即可更換系統提供的鈴聲/歌曲,還可以為單個好友單獨設置。最讓人興奮的是,在設定好鈴聲后,還能開啟對方也能聽到我為TA設置的專屬鈴聲。

2. 設計思考

你想換微信的來電鈴聲嗎?想,比換電話鈴聲還想。為什么?因為不用看手機就知道是誰發來的,可以提前編理由或者決定是不是方便接……斜眼笑。

不不不,開個玩笑哈,主要是上次和一群朋友聚餐時,不知誰的微信來電鈴聲響起,大家都習慣性地掏出了自己的手機。

將微信升級到最新版本,語音和視頻通話來電鈴聲都可以更換了,除了8種鈴聲外,還有QQ音樂、視頻號里的音頻內容作為海量的音樂素材庫,用戶可以隨意搜索設置自己心儀的來電鈴聲。

勾選“朋友呼叫我時可聽到我的來電鈴聲”選項,呼叫的朋友也能同步欣賞,這不由的讓人想起了郭德綱的“爸爸接電話了”的鈴聲,不信你就試試。

更換微信來電鈴聲不僅能滿足用戶區分好友身份、惡作劇、小心思等需求外,還能避免在人群較多的場合,鈴聲一響,在場很多人都掏出手機的“窘境”。

287.「網易云音樂」點贊圖標-“熱評”諧音梗

1. 產品體驗

在網易云音樂的評論區,部分評論后面的大拇指點贊圖標變成了水瓶外觀樣式,即熱門評價的諧音“熱瓶”。

2. 設計思考

有時候在聽歌過程中控制不住自己的情緒,一不小心就陷入在評論區無法自拔,因為里面很多的文案讓人感同身受,內心難以平靜。

網易云音樂的熱門評論很多,比如愛情、親情、友情、青春等,每每都會有很強的代入感,其實,那些沒有評論反而頻繁翻看的人,才是最孤獨的人,隨著看的人越來越多,熱評也就成了焦點。

細心的用戶會發現,在網易云音樂的評論區,有一部分點贊圖標并不是翹起的大拇指樣式,而使用了熱水瓶的抽象形狀,則是代表此條評論為“熱瓶(熱評)”,使用諧音梗的視覺樣式讓本來平淡無奇的界面元素變的更有意思,偶爾還會戳中用戶的笑點,并希望用戶主動的參與到評論互動中來,增加活躍度。

288.「餓了么」最近看過-快捷的查看入口

1. 產品體驗

在餓了么美食外賣類別列表,系統會在右下角提供最近查看過的店鋪列表入口,即-店鋪瀏覽記錄,進入后可快速在有意向的店鋪中點外賣。

2. 設計思考

選擇條件越多、越自由則越難選擇,這是選擇性困難綜合癥“患者”最普遍的癥狀。

每次到了飯點,很多人總是會打開外賣應用一遍又一遍的上下滑動店鋪列表,到底吃什么:隨便,可產品中從來都沒有“隨便”這一選項,不管用戶如何選擇性困難,但飯終究還是要吃,如果沒有留住用戶,一旦離開了當前應用,極有可能會通過其他平臺或者渠道解決。

餓了么為了最大程度的留住用戶并促進下單,在美食外賣類別頁面的右下角提供了最近瀏覽的店鋪入口,一方面能減少可供選擇的范圍,當用戶在列表中刷過一遍后,所點進去看過的必定是在某一方面亮點存在吸引力,與其讓用戶漫無目的繼續查找,不如引導其進入已查看過的店鋪,畢竟對用戶產生過吸引力的店鋪更有可能促進用戶決策并下單轉化。

另一方面,如果用戶在查看過一些店鋪后,有明確的目標需要去下單,根據記憶繼續在頁面滑動查找,必定會付出更大的操作成本,甚至可能直接被忽略帶過,此時,通過最近看過的入口可直接引導其進入下單流程,降低用戶流失的可能并提高轉化率。

289.「京東」個人頭像-意想不到的上傳失敗

1. 產品體驗

京東APP的個人頭像設置,如果將“東哥”之前在美國被拘的照片設為頭像,系統會做攔截,是無法上傳成功的。

2. 設計思考

在用戶的認知中,99.9…9%的APP個人頭像,如無特別規定或說明,隨便一張圖片都可以作為個人頭像且可以設置成功,即便是涉及違規,也是在后續被舉報或系統發現后才會采取相關的措施進行處理。

雖然大部分用戶的頭像是自己的照片,但還是有部分用戶將自己的偶像(明星、企業家或崇拜的某人)作為個人頭像。

在京東APP設置個人頭像時,上傳“東哥”昔日被拘的照片,則會一直處于上傳失敗狀態,雖然這個細節承包了我好久的笑點,但必須為京東的產品團隊點贊。

其實對于負面信息,不管是真實還是偽造,都會讓企業的形象受損,帶來經濟損失,如果被某些惡作劇的用戶設置頭像成功,被商家或其他用戶看到,可能成為產品的一大槽點或茶余飯后的談資,系統攔截此照片的做法,能很大程度的維護企業形象,如果換做其他企業,有多少團隊能想到呢?

290.「支付寶」一鍵備注-降低操作成本 備注更高效

1. 產品體驗

在支付寶的轉賬頁面,考慮到用戶手動填寫備注的操作成本,系統提供了部分常用的轉賬原因供用戶選擇,點擊即可一鍵備注,同時也在暗示備注的重要性。

2. 設計思考

移動支付給我們帶來了非常大的便利,涉及不是特大金額的轉賬,基本也不用跑銀行了,日常生活中的資金流動如交房租、借款、還款等,都直接用支付寶或微信分分鐘搞定,為了圖方便,甚至連備注都懶得寫,這也為日后的一些突發情況帶來了麻煩,以至于有理說不清。

在支付寶的轉賬頁面,系統會將常見的轉賬原因展示出來,一方面可以方便用戶一鍵備注,減少操作成本,另一方面也在引導用戶去操作,暗示備注的重要性,特別是借錢轉賬,有備注信息往往比空白的證明效力更高,也為日后 可能發生的糾紛,留下更有效的證據。

291.「豆瓣」品牌傳播-劉海屏后面隱藏的LOGO

1. 產品體驗

劉海屏手機在豆瓣app截圖時,系統會自動在頂部加一個logo水印且剛好被劉海蓋住,極不容易被察覺。

2. 設計思考

水印是每個平臺及個人作品宣傳最常見的方式,也可以起到保護版權的作用,其加水印的方式是五花八門,比如在沒被授權的網站下載圖片,一般會在四角的某個位置加有較淺的水印,目的就是為了影響用戶使用從而去購買正版。

但對于一些宣傳品牌及知名度的產品,在加水印后,一不小心就會適得其反,所以盡量在不影響用戶使用的情況下加上logo水印,下載抖音視頻后,右上角的logo和抖音號就是最好的例子。

用劉海屏手機在豆瓣截圖時,系統會偷偷將logo水印藏在了劉海屏之下,利用視覺盲區“瞞天過?!保脩粼谡g覽時,不會發現有任何水印的痕跡,不得不說,團隊能想出這么“狗”的辦法,也算是非常睿智了,既達到了添加水印的目的,也成功的對用戶使用了障眼法,讓品牌得到一定程度的宣傳。

(PS:劉海屏手機用戶只是一小部分比例而已,劉海藏水印的做法最直接的結果就是:截圖的人不知道,一旦傳播出去,這個水印就暴露(非劉海屏)在光天化日之下了)。

292.「微信」群消息免打擾-依然不會錯過重要的人/消息

1. 產品體驗

開啟微信群消息免打擾后,可選擇設置4個群成員的消息正常接收,不受免打擾的影響,避免錯過重要消息。

2. 設計思考

每個人的微信中,多少都有幾個微信群,平日里消息一條接一條,吵的不亦樂乎,但是當自己不想再嗨聊或消息提示音可能會影響到自己時,毫不猶豫的開啟消息免打擾。

屏蔽普通的群消息倒還好,如果是工作群開啟了消息免打擾,當自己去爬樓看到領導發的重要消息時,可能已經過了一天一夜,這就悲劇了。

微信的最新版本,開啟群消息免打擾后,還可以設置關注4個群成員,被選中成員發出的消息不受免打擾的影響,可正常接收,即可以避免大量無關消息的打擾,又不會錯過重要的人/信息,一舉兩得。

293.「即刻」個人中心-頭像可以隨意拖動

1. 產品體驗

在即刻APP“我”的頁面,可將個人頭像隨意拖/甩動,還帶著殘影,原來的位置會顯示一個小紅心,松手后,頭像會根據自然的慣性規律回到原處。

2. 設計思考

對于個人中心版塊,產品的社交屬性越弱則頭像的關注度越低,就好比我們經常換微信、QQ頭像,但京東、淘寶的頭像可能還是只是默認狀態,無人問津,仿佛只是占位的存在。

社交應用最主要的功能是交流互動,而一個好的頭像就是促進交流互動的開始,雖然設定什么樣的頭像是由用戶自己決定,但若能為其添加部分細節作為輔助,就能產生意想不到的結果。

在即刻app我的頁面,頭像居然可以拖動并產生殘影,原位置還會出現愛心圖標,松手后頭像自動回到原處,讓原本只是代表個人形象的頭像,變的更有活力,為人機交互增加了趣味性和互動性。

294.「iPhone」細節控-調節亮度 圖標的交互變化

1. 產品體驗

從iPhone右上角下滑調出控制中心,在調節屏幕亮度時,圖標線條的長短會跟隨當前的明暗程度一起變化。

2. 設計思考

為什么說Apple的設計是魔鬼,并不是危言聳聽。蘋果一直都是走在行業的最前面,自誕生以來,其在細節設計方面得到用戶一致的好評,好的設計就是讓人看不見設計, 很多果粉都不一定能夠發現所有的設計細節。

調出iPhone的控制中心,上下滑動調整屏幕亮度時,圖標外圍的光線線條的長短會跟隨一起變化,將明暗變化的光線過渡差體現的更加生動,真實感更強。

通常,硬件的外觀僅僅是作為一種體驗的容器存在,而軟件界面細節的設計,則決定了我們是否喜歡這個設備,蘋果設計團隊一如既往的細節控也是果粉們愛不釋手的原因之一。

295.「支付寶」消息重新編輯-產品的包容性

1. 產品體驗

在支付寶發送的消息被撤回后,點擊重新編輯不會影響新輸入的消息,被撤回的消息會直接出現在當前已輸入消息的后面。

2. 設計思考

消息撤回功能,主要是為用戶提供一個及時糾錯的機會。在交流互動的過程中,用戶可能會出現一不小心“手抖”就發送了不符合原本意思的內容,這時就可以通過消息撤回進行“補救”,當然也不排除……故意為之的存在。

另外,當我們在輸入框編輯了很長一段內容后,突然發現前面已經發出的消息有錯別字或內容不妥,及時撤回并點擊重新編輯,消息即會出現在輸入框,但之前已經編輯的內容被無情的覆蓋,所花費的時間與精力付之東流,即便重新編輯也可能再達不到之前的效果,浪費更多的時間。

使用支付寶進行信息交流時,如果已經輸入了部分內容,將之前已發出的消息撤回并重新編輯,新編輯的內容時不會被覆蓋的,被撤回的消息會顯示在已有編輯內容的后面,有效避免用戶原本已輸入的內容被覆蓋而需要再次編輯,且人們的記憶有限。

如果內容被覆蓋,原本的內容則很難被無遺漏的完全想起,勢必會增加用戶的時間、思考及操作成本。以用戶為中心的設計,即便用戶犯錯,產品也需要將用戶的成本降到最低,以達到包容性的目的,從而提高用戶對產品的預期,增加其易用性。

296.「淘寶」先用后付-解決用戶退貨難的痛點

1. 產品體驗

進入淘寶APP,在支付設置中開啟先用后付,購物時很多商品可0元購買,收貨確認滿意后再付款,如果對商品不滿意,將商品退回即可。

2. 設計思考

隨著各種電商平臺如雨后春筍般的出現,魚龍混雜。正所謂林子大了什么鳥都有,以至于很多平臺的商家打著質量保證、不滿意可隨時退款的旗號來吸引用戶。

但是,當消費者真正碰到問題時,一些不良商家自動失聯,一旦過了可退貨期限,即便說破喉嚨也是枉然,所以部分消費者為了避免麻煩也只能選擇吃啞巴虧,表面上看,似乎是商家贏了一局,但這種事情出現的多了,會逐漸降消費者的信任度,增加其防備之心。

淘寶是目前最火熱、用戶最多的電商平臺之一,也推出了各種各樣的功能受廣大用戶青睞,先用后付就是其中之一,用戶可以先免費試用商品,如果對產品不滿意,可在商家規定的時間內退貨,不需要付產品的錢,確定滿意之后再通過支付寶賬戶手動支付或自動扣款。

先用后付功能能在用戶下單之前打消售后顧慮,降低其防備之心,利用更好的服務體驗來滿足、取悅用戶,變著花樣讓其“樂”在其中,增強用戶對產品的信任度而提升下單轉化率。

(PS:開通先用后付功能,芝麻信用分需要在550分及以上,且退貨需要支付快遞費用)

297.「菜鳥」取快遞-標題欄的友好數據提示

1. 產品體驗

在菜鳥APP中,如果存在多個待取包裹且在不同的站點,進人取件頁面,除了下方的小圓點和右側的提示外,頂部標題欄也會明確告知待取包裹的數量以及共有幾個快遞站點。

2. 設計思考

當我們在淘寶、京東等任何電商平臺上買了東西,基本都可以通過菜鳥APP來查詢進度及取快遞,解決了我們不停在多個平臺反復切換查看的一系列麻煩操作。

菜鳥不僅將大部分快遞信息都集中在了一起,其在設計細節方面也從未含糊,始終站在用戶的角度給予最好的使用體驗。

在菜鳥的取件頁面,如存在多個包裹、取件站點,其底部和側面都提供了明顯標記以便用戶感知多個包裹或站點的存在。

此外,還在標題欄以數據統計的形式明確告知用戶,以便用戶對信息進行精準把控,從而減少思考,避免用戶通過增減操作成本的方式來感知具體信息,用明顯的視覺引導的方式,高效解決了用戶的潛在需求。

298.「王者榮耀」加載中-分散用戶注意力

1. 產品體驗

王者榮耀在即將對戰前的加載過程中,界面中間會顯示小貼士,普及當前所選擇英雄的使用技巧,以及點擊小拳頭,可為隊伍加油的操作。

2. 設計思考

很多游戲中,在進行模態加載時,都需要一定時間,比如進入游戲前的加載、各地圖之間的傳送、某些事物/事件加工合成等,少則幾秒、多則幾十秒,用戶在等待的過程中無比煎熬,雖然大部分都配備了進度條提示,但還是會遭到一些用戶吐槽,一旦到了其所能承受的閾值,即會憤而轉身。

王者榮耀在進入游戲前的加載過程中,使用了一些小技巧來分散用戶的注意力,解決了用戶在漫長等待中無法切出畫面的痛點。

首先在界面中間放了一些當前所選英雄的操作小技巧輪播提示,其次增設了一個“拳頭”按鈕,用戶點擊后可為隊伍加油。

除此之外,還有如英雄皮膚、熟練度等級等,讓用戶發揮無限遐想,這些提示都有助于用戶在等待加載的過程中從“無所事事”變的“有事可做”,不會顯得那么無聊或煎熬,展示用戶可能感興趣的信息,將用戶的被動等待轉變成新目標產生后的自然時間消耗,能有效較少用戶對加載時間過長的抵觸心理。

299.「淘寶」庫存緊張-營造緊張感 促進快速決策

1. 產品體驗

進入淘寶APP,購物車、收藏列表中的商品會有部分顯示“庫存緊張”等提示,督促用戶盡快購買。

2. 設計思考

當我們在電商平臺看到心儀的商品,并非特別/立即想要、或手頭拮據等待活動優惠打折后再買,但確實產生了購買的沖動,這時就會把商品添加都購物車。

同理,有很多日常所需的商品,即便現在下單了,后續還會購買或者購物車滿了,也會毫不猶豫的添加到收藏夾,待日后所需隨時回來。

其實不管是購物車還是收藏的商品,用戶都產生過想購買的欲望,甚至有些商品離轉化只有一線之隔,產品只需在窺探用戶心理后,添上一把火即可。

在淘寶購物車、收藏夾的商品列表中,很多商品的標題下方會顯示“庫存緊張”標簽,利用商品庫存不多,傳遞給用戶一種緊迫感,暗示他們盡快購買。

基于用戶討厭失去選擇的自由,所以常傾向于快速地決策來留住一些東西,尤其購買欲望極其強烈且稀缺的商品,為避免未來的不可得性,用戶會減少決策時間,甚至產生不理性想法并立即下單,對商家做出有利的決定,從而提升轉化率。

(PS:有些“低庫存” 提示,不排除部分商家故意而為之,目的是利用人性的弱點來促進最大程度的轉化)

300.「CCtalk」短信驗證碼-自動提取 一鍵輸入

1. 產品體驗

CCtalk登錄在獲取短信驗證碼后,會自動將手機短信中的驗證碼提取出來懸浮于鍵盤上方,點擊可一鍵錄入。

2. 設計思考

在我們使用的各種注冊/登錄及部分業務處理時,短信驗證碼是必不可少的工具,它不僅能作為自己身份的重要憑證,還能提高賬號的安全系數、防止他人惡意注冊等作用。在收到驗證碼后,通常會是從手機頂部彈出并停留幾秒鐘,如果用戶沒有在這有效的短時間內記住,就需要進入手機短信功能查看了。

使用cctalk時,在收到驗證碼后,系統會自動將有效數字提取出來并置于鍵盤上方,點擊后即可一鍵錄入驗證碼,避免用戶手動進行數字輸入、甚至從短信頁面重新提取,降低用戶的記憶負擔及輸入時出錯的可能性,減少不必要的操作,進一步提升用戶體驗。

(PS:CCtalk只是其中一個案例,雖然有些常見的應用都使用此種方式,但綜合起來,至少還有70%以上的應用需用戶手動進行數字輸入,優秀的設計雖然不能帶來很明顯的利益點,卻能潛在的提升用戶體驗,值得借鑒)

結語:

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

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

#專欄作家#

大漠飛鷹;公眾號:能量眼球,人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘,利用設計的手段為受眾用戶帶來更好的體驗,即好看、好用。

本文原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 請問,這些最新更新的功能是如何第一時間知道的呢

    來自山東 回復
    1. 我是一個設計師,所以手機里面每半年會更換國內排名前100的APP,每個星期更新一次,查看更新類容。
      另外我也會玩一玩各種APP,有一些是很早就存在的細節。

      來自廣東 回復
  2. 喜歡這個系列

    回復
    1. 感謝支持

      來自廣東 回復
  3. 真棒

    回復
    1. 感謝支持

      來自廣東 回復
  4. 京東那個真的是,哈哈哈哈哈

    來自北京 回復
    1. 別笑,一定要憋住

      來自廣東 回復