產品細節剖析,讓你看看大廠是如何做設計的

編輯導語:大廠在產品細節這方面,往往有着獨特的想法和考慮,如果我們去細心的觀察以及親身體驗和總結,就能發現常人所不能發現的一些提升體驗感的小細節,這樣可以提升我們的設計能力,增強用户的粘性,實現產品的最大價值。

產品細節剖析,讓你看看大廠是如何做設計的

作為設計師,在拿到產品需求的時候,所要做的不僅僅是完成產品的設計工作,更重要的是要思考如何通過設計的的手段去推動產品背後的商業價值達到最大化,提升視覺體驗、增強用户的粘性以達到用户轉化的目的。

不需要我們設計的有多麼複雜,可能是一個步驟的簡化、一句打動人心的文案、貼心的提示、趣味的動效…

產品細節剖析,讓你看看大廠是如何做設計的
46.「微信」朋友圈視頻靜音播放-減少噪音污染1. 產品體驗

在微信朋友圈,長按選中視頻,然後從彈出的選項中選擇“靜音播放”,跳轉到視頻播放頁面後是沒有聲音的。

產品細節剖析,讓你看看大廠是如何做設計的
2. 設計思考

朋友圈作為現在獲取好友信息的主要場所之一,很多的用户都會在朋友圈發佈圖文、短語、視頻等類型信息。

我們通常習慣性的每隔一段時間就想去朋友看看,當看到非常感興趣的視頻時,就激動的忍不住點了進入,沒想到突然來了一段勁爆的音樂,此時地鐵上的人都詭異的看着你、正在午休中的同事在仇視你、上班中的領導皺着眉頭看向你,就問你,尷不尷尬?

其實在微信朋友圈看視頻,很早就設計了這樣一個細節,長按該視頻,選擇“靜音播放”跳轉到視頻播放頁面,此時播放視頻時沒有聲音的,如果擔心視頻裏的聲音影響到自己或他人,可以使用靜音播放。

雖然事前把手機音量減到最低也可以解決這個問題,但可能導致忘記將音量調回來而造成來電或其他聲音通知的信息遺漏。靜音播放還能方便“摸魚黨”在上班時間給自己來一個小小的放鬆,避免眾目睽睽之下太過張揚給自己帶來不必要的麻煩。

47.「餓了麼」趣味/情感化-有温度的交流1. 產品體驗

在餓了麼騎手信息頁面,點擊藍騎士頭像,頭頂的藍色竹蜻蜓會旋轉2秒,且配有玩味性質的toast文案,趣味性十足,時而引發會心一笑。

產品細節剖析,讓你看看大廠是如何做設計的
2. 設計思考

眼尖的細心網友可能已發現,之前我們在餓了麼點外賣,待騎手送到去取餐時,騎手頭盔上有個藍色的竹蜻蜓,這個不僅僅是裝飾作用,更是對優秀騎手的一種激勵政策。

竹蜻蜓不僅是騎手身份的象徵,還因“皮膚”的創意讓外賣騎士職業在社交平台攢了一波人氣,隨後美團也在頭盔上增加了袋鼠耳朵、美猴王的“鳳翅紫金冠”等。

如果你在線下沒有看到,沒關係,餓了麼已經把竹蜻蜓搬到了線上,儼然已成了餓了麼的品牌形象。在騎手的個人信息頁面,點擊頭像,竹蜻蜓會轉動,利用toast彈窗配合文案提示,趣味性十足。

用户在常規的APP頁面交互過程中本來只為滿足一個需求而經過的必要流程,用趣味化的方式體現,雖然沒有實質上的幫助,但會給用户帶來驚喜,讓整個操作過程感到放鬆、愉悦,也是情感化設計的體現,用户偶爾暖心一笑,讓冷冰冰的頁面變成了有温度的交流,極大的提升了用户體驗。

48.「高德地圖」長途信息-途中所需一覽無餘1. 產品體驗

在高德地圖路線預覽時,點擊長途/沿途信息,即可查看路線所經過的加油站、衞生間及服務區等沿途信息。

產品細節剖析,讓你看看大廠是如何做設計的
2. 設計思考

有網友説,好多次想在開車的過程中去加油,又不想繞路,又特別的想找中石化而不是中石油,每次遇到這種情況都覺得導航軟件不夠人性化。其實不僅如此,在開車途中,有時候也有餐廳、汽車維修、取款等方面的需求。

高德地圖的沿途/長途信息,可讓用户在出行之前把需要了解的信息一覽無餘,提前會有心理預期,當我們行駛在高速路上,需要知道接下來距離加油站、餐廳或汽修還有多遠時,高德地圖的沿途搜索功用恰好能夠處理用户的當務之急,考慮周全且人性化。

49.「愛奇藝」導航標題字-貼心的界面環境適配1. 產品體驗

愛奇藝首頁頂部導航切換時,主題背景跟隨切換後,標籤文字也使用跟主題背景相近的色值,讓視覺更柔和。

產品細節剖析,讓你看看大廠是如何做設計的
2. 設計思考

在我們用過大多數的APP中,常見的大標題都是主題色、深色或白色,所以在不同的背景色環境中顯示,視覺的舒適度總是沒有那麼高,也驗證了一句話“合格的設計千篇一律,優秀的設計百裏挑一”。

愛奇藝首頁頂部導航切換時,其標籤文字的色值會跟隨主題色一起切換,讓文本逐步接近背景色,視覺上更加柔和,相比常規性的“千篇一律”舒適度更高,提升了視覺體驗,還能起到降低視覺疲勞、保護眼睛的作用。

這是一個很容易被設計師忽視的好功能,可以看出來,愛奇藝的團隊對界面環境體驗的考量是很貼心的。

50.「蝦米音樂」橫屏磁帶效果-滿滿的回憶殺1. 產品體驗

使用蝦米音樂聽歌,在播放頁面橫屏時,界面會變成早起的音樂播放工具“磁帶”樣式,頗為復古,上滑彈出多種場景音效選擇,並用不同顏色的“磁帶”外觀區分,點擊“磁帶”的兩個孔可切換上/下一曲。

產品細節剖析,讓你看看大廠是如何做設計的
2. 設計思考

《荊軻傳奇》電視劇中最讓我記憶最深刻的一句話是“這個故事雖然已經過去了2200多年,但依然會留在我們的心中,代代相傳”,而今天的蝦米音樂也將成為歷史。

相信所有蝦米粉都收到一則即將停止運營的線上通知,且啓動頁也變成了告別畫面,讓用户一陣心酸,啓動頁的那一聲告別,最後的希望也將破滅。

  • 2021年1月5日10點:停止賬號註冊、會員充值、蝦幣充值、專輯購買等服務;
  • 2021年2月5日0點:停止所有歌曲試聽、下載、評論等所有音樂內容消費場景,停止個人資料導出或下載;
  • 2021年3月5日0點:運營停止,關閉服務器,屆時及以後將無法登錄……

當看到這則消息時,蝦米粉們有些淚目了,頗有壯士一去不復返的悲壯之感,蝦米音樂從上線到至今都沒有讓用户失望過,尤其是音樂實驗室一直都是音樂界裏的黑科技。雖然即將成為歷史,但有的設計細節仍值得我們記住。

使用蝦米音樂聽歌,將播放頁面橫屏,畫面變成轉動的磁帶效果,其中還隱藏了幾個交互手勢,點擊磁帶的左右兩個孔可切換上/下一曲,上滑選擇場景音效,頗為經典的復古效果給用户來了一波滿滿的回憶殺,通過突出的視覺樣式,給用户帶來美好的回憶,達到增強用户記憶的目的。

讓用户用一款產品很容易,記住一款產品卻很難,蝦米音樂的磁帶效果真正起到了畫龍點睛的作用。

51.「酷狗音樂」個性化的歌詞設置1. 產品體驗

在酷狗的歌詞頁面,點擊左下角的“詞”入口,即可對歌詞進行字體、字號、顏色、動感等一系列的個性化設置。

產品細節剖析,讓你看看大廠是如何做設計的
2. 設計思考

面對“百年”一成不變的歌詞頁面,用户早已產生視覺疲勞。對於視覺效果樣式較為單一的設計形式,早已無法攬住用於的心了,用户喜歡的是要讓更多的選擇由自己來控制,其內心會產生一種成就感,也會間接對產品產生信任。

酷狗音樂的歌詞設置算是有心了,通過一系列個性化設置歌詞樣式,讓用户隨心所欲,滿滿的成就感。比如女生喜歡可愛萌萌的樣式,可以通過選擇較為卡通的字體、粉粉的歌詞顏色來滿足少女心;男生可以選擇剛硬有力的字體、開啓動感歌詞來滿足力量和節奏感。

個性化設置可以根據用户的不同偏好及瀏覽行為進行自行調整,讓界面看起來和同類產品截然不同,有特色的產品更容易讓用户記住,提升使用粘性。

52.「快手」交互手勢-兩個需求“一箭雙鵰”1. 產品體驗

在快手的精選視頻欄目,頁面左滑後,以單列的卡片樣式把該創作者的所有作品顯示在設備右側,方便用户上下滑動選擇,且不會打斷當前播放的視頻。

產品細節剖析,讓你看看大廠是如何做設計的
2. 設計思考

短視頻類型的APP我們用過很多,因為其互動性很強,所有隱藏了很多交互手勢,較有代表性的莫過於抖音和快手。

左滑是比較常見的手勢類型,在視頻播放頁面,用户都知道通過左滑可以查看該創作者更多的作品,但頁面的跳轉會中斷當前正在播放的視頻,要麼看完左滑,要麼再次回來重新觀看,別無選擇。

快手APP將當前視頻創作者的作品選擇換了一種方式展示,頁面左滑後,所有作品都會顯示在設備右側,用户可上下滑動進行選擇,且不打斷當前視頻的播放,可謂是“一箭雙鵰”。

在同時滿足用户多種需求的情況下,節約用户大量的時間成本,提升產品易用性,以便用户在最短的時間內、用最簡單的操作滿足自己所需。

53.「高德地圖」導航語音包-拉近“距離”一鍵完成1. 產品體驗

在高德地圖的導航設置中,可選擇各種語音包,比如明星、網紅、地區方言等,設置成功後,在接下來的導航行程中,所選擇聲音將一路伴隨用户進行語音播報。

產品細節剖析,讓你看看大廠是如何做設計的
2. 設計思考

從目前的網紅、明星直播帶貨中就可以看出,追星族對明星的追捧到底有多麼瘋狂,近似失去理智的將每個月收入都盡數投入到明星產品中,甚至入不敷出,所買的可能是一堆連自己都不知道為什麼要買的東西,TA們不會放過任何一個能與明星虛擬接觸的機會,這也讓很多互聯網的線上產品找到了營銷機會點。

高德地圖在導航過程中的語音播報,就很好的利用了這個機會點。在導航設置的的語音包裏選擇自己的喜歡的明星進行語音播報。

可以設想,在旅途中自己喜歡的明星一直在給自己引路,會有一種近距離接觸的錯覺,這似乎比聽明星的歌曲、看電視劇更有親近感,能間接滿足自己小小的虛榮心,平台也能通過此種方式增加用户粘性。

另外對於有思鄉之情的用户,選擇家鄉的地區方言播報, 在回鄉的旅途中也可以拉近與家鄉的距離感(每個人都有自己喜歡的人或事物,追星族亦是如此,上方舉例只是部分説明,至於是理性消費還是感性消費全憑自己的內心決定,勿槓)。

54.「喜馬拉雅」更具親和力的語音簽名1. 產品體驗

在喜馬拉雅的個人設置頁面,可以錄製一段語音作為簽名,系統提供了部分文案語錄參考,錄製完成並選擇性別後,其他用户就可以在我的個人主頁收聽語音簽名了。

產品細節剖析,讓你看看大廠是如何做設計的
2. 設計思考

從我們最早玩的QQ開始,一直到現在,在很多應用裏,用户都喜歡用一句話設置個性簽名。

有人説,個性簽名是自己對每個階段的一種感受,其實也不僅僅如此,有些人常年用一句話,有的卻頻繁更新,這個功能就像一塊空地,用一句簡短的話語代表自己的心情、特意的人設、表面的性格或者渴望有心的人發起交流。

喜馬拉雅APP則是一改常態,使用了區別於常規的文字個性簽名,即語音簽名。通過個人中心設置喜歡的名人名言或勵志語錄,其他用户進入自己的個人主頁點擊即可收聽。

語音簽名更具有親和力,並非僅僅是文字的理解,能拉近人與人之間交流的“距離”,更像是情感互動,這種互動體驗通過情感化的方式會給用户帶來驚喜,讓其感受到產品的温度與團隊的用心,加強用户對產品的印象,是鞏固用户粘性與忠誠度十分巧妙的方式。

55.「微信」炸彈表情-炸壞了手機的鋼化膜1. 產品體驗

微信8.0版本升級後,表情包版塊調整的雖然很多,但最讓用户驚訝的莫過於炸彈表情的“爆炸”效果了,活脱脱上演了微信版的“敍利亞戰爭”。

產品細節剖析,讓你看看大廠是如何做設計的
2. 設計思考

可以確定的是,微信每一次大的版本更新都沒有讓用户失望,雖然偶爾的一個細節會讓用户吐槽,但整體來説用户的滿意度還是非常高的。

本就沒有任何一個產品能100%滿足所有用户的需求,至於部分瑕疵,只能通過不停的探索與研究逐步改善。從之前的拍一拍、青少年模式、修改微信號等,到現在的8.0版本,幾乎都是在很短的時間內發生了巨大的變化,所以微信一直佔據社交主流寶座不是沒有道理的。

微信8.0新版本自上線以來一直都是好評不斷:首先啓動頁風格更加精簡,這本就是在預料之中;其次懸浮窗優化升級,不用説,視覺體驗提升了一大截;然後新增個人狀態,我們在QQ、釘釘等應用中都已經熟悉了;再者就是表情包發送之初的動態效果,早就在其他應用玩過已不陌生了。

這次微信8.0一系類新功能中,最吸引眼球的莫過於動態表情,其重中之重給用户印象最深的就是炸彈表情包發送之後的爆炸效果了,有很多網友表示玩嗨了。

向對方扔炸彈表情,會在屏幕區域範圍內出現較大的爆炸視覺效果,設備還會跟着震動,讓聊天變的更生動,增強互動的趣味性。不過炸彈表情雖然好玩,但是發送之前需要考慮是否打擾好友,避免弄巧成拙。

我曾經試過將幾個人拉倒微信小羣,大家不停的發炸彈表情,痛痛快快的炸了一番,場面一度堪比線上版的“敍利亞戰爭”,玩罷之後,甚至懷疑手機鋼化膜的損傷是否為炸彈表情所致……

56.「微博」點贊-不僅僅是“點贊”和“取消”1. 產品體驗

長按微博的點贊圖標,會彈出微笑、哭泣、生氣、驚訝、點贊五個大表情包,用户可根據自己的感受,用表情包對微博進行不同態度的點贊,且上方會顯示已有的表情包點贊數量統計。

產品細節剖析,讓你看看大廠是如何做設計的
2. 設計思考

點贊功能是很多應用不可缺少的功能了,不僅可以激勵內容生產者產出更加優質的內容,還能幫助平台篩選出更符合用户偏好的內容。

新浪微博的界面設計我是一直都不敢恭維,一種風格長期使用,跟自身在該行業中的壟斷地位息息相關,不管好壞,大家沒得選擇,另一方面可能考慮到用户的龐大,涉及男女老少,其改版之後會增加用户的學習成本,一不小心就會導致用户流失。

縱然如此,微博在部分細節上依然讓用人出乎意料,帶來驚喜之餘,也提升了用户體驗。

微博的點贊功能設計的算是比較有心了,除了常規的單擊點贊/取消之外,還隱藏了一個彩蛋,長按點贊圖標,會彈出五個表情包,用户可以選擇對應的表情包對當前的點贊行為表達不同的態度,再次長按後點擊該表情即可取消。

動態的大表情包能在不經意間帶給用户驚喜,通過趣味化的方式將點贊心態傳達的既準確又生動自然,帶來更好的互動體驗。且展示已有表情包點讚的數量統計, 利用羊羣效應,讓新進用户將此想法和行為在相當程度上受到周圍人的影響,降低用户的思考時間,提高點贊轉化效率。

57.「QQ」QQ相冊-幫助用户製造回憶氛圍1. 產品體驗

進入QQ空間的相冊,在圖片上下翻動的同時,右上角的日曆圖標會跟圖片列表時間的月份一致,對應變化。

產品細節剖析,讓你看看大廠是如何做設計的
2. 設計思考

QQ是80、90一代用户的回憶,即便有部分人不用了,但確實伴隨了我們前後十幾年,其QQ空間的説説和相冊更是由遠及近記錄了我們曾經發過的閒言碎語和回憶,再次使用起來依然倍感親切。

最近在QQ空間發現一個不錯的小細節:進入QQ相冊,上下翻動圖片列表的同時,右上角日曆圖標中的數字以月份方式顯示,並對應列表中的圖片發佈時間,通過反覆強調增強用户視覺感知,圖標中的月份上下銜接滾動顯示,體現出時間的遊輪,用更明確的視覺展示帶用户更快的進入回憶中,利用回憶氛圍方便用户抒發自己的情感。

58.「菜鳥」既貼心又實用的代取快遞功能1. 產品體驗

在菜鳥裹裹的取件Tab頁,可通過添加親友,幫助其跟蹤物流信息或代取快遞,尤其是家庭之間非常實用。

產品細節剖析,讓你看看大廠是如何做設計的
2. 設計思考

有時候因為不方便經常需要別人幫忙取快遞或者幫助別人取快遞,一般都是通過截圖把取件憑證(取件碼/開箱碼)用微信發給對方,或者需要幫助家中老人跟蹤物流信息,也要先索取物流單號,操作非常麻煩,一不留心可能就會忘記,給自己或親友帶來不便。

現在好了,菜鳥的“添加親友”功能可以完美的解決這個問題。

如果需要幫助親友代取快遞或跟蹤物流信息,可通過添加親友的手機號碼(最多4個),對方確認後,就能隨時查看該手機號碼相關包裹的物流信息了,非常方便,解決常規的轉發取件碼可能存在失誤的問題,減少溝通成本,還能幫助家中老人因不熟悉APP操作的原因,協助跟蹤物流信息。

另外,若不想讓親友看到自己的包裹信息,可通過權限設置屏蔽自己的包裹。不得不説,站在用户的角度,添加親友功能考慮周全且人性化,貼心又實用,為相互代取快遞的用户提供了很大的便利。

59.「騰訊視頻」自動切換畫質-降低流量超額風險1. 產品體驗

在WiFi環境下高畫質觀看騰訊視頻時,若WiFi突然中斷變成流量觀看,系統會自動切換到低畫質流暢觀看,屏幕上方還會彈出“清晰度切換成功”提示。

產品細節剖析,讓你看看大廠是如何做設計的
2. 設計思考

眾所周知,無論是聊天、購物,還是聽音樂,其耗費流量的程度遠不及視頻用的快,尤其是在5G網絡嶄露頭角的今天,若是點錯了某部電影進入觀看,可能在極短的時間內就已經使用流量緩存完畢,就算是返回都來不及了。

騰訊視頻在非WiFi環境下,對觀看視頻的數據流量做了一定的控制。當用户在WiFi環境下觀看視頻時,因某些原因突然斷網,系統會自動切換到低畫質流暢播放,節約用户的數據流量。

頂部通過彈出的清晰度切換成功提示,對用户起到警醒作用,便於用户考慮自己剩餘流量的多少來決定是否需要繼續觀看,雖然可以設置在數據流量環境下低畫質播放,但用户容易沉浸在看視頻的氛圍中,如果沒有可視化的提示,可能會導致數據流量超額帶來經濟損失而受到用户的心理牴觸。

60.「QQ音樂」定時關閉-再也不擔心手機“罷工”了1. 產品體驗

在QQ音樂的設置中,設置一定的時間後開啓定時關閉,計時結束後,系統會立即自動關閉音樂播放,再也不擔心聽歌聽到手機沒電了。

產品細節剖析,讓你看看大廠是如何做設計的
2. 設計思考

90%的用户手機中都安裝了音樂應用,上班累了戴上藍牙耳機聽一曲、在擁擠的公共/地鐵上無聊時聽一曲、晚上睡不着就開着音樂邊聽邊入睡。

不過最令人尷尬的是歌曲播放了一整晚,電量用完沒發現,等上班到了地鐵站才發現根本用不了乘車碼,連買票都沒法支付,心中有一萬匹馬在狂奔,emmm……

QQ音樂有的定時關閉功能,不知道大家有沒有用過。設置一定的時間開啓定時關閉,計時結束即可自動關閉音樂播放,實現了喜歡每晚聽着歌曲入睡的用户再也不擔心早上起來發現電量用完的情況,對用户起到了實質性的幫助。

有時候換一種思考方式做解決少數用户可能碰到的問題,對用户的留存也能起到關鍵性的作用。

結語

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

作者:大漠飛鷹;公眾號:能量眼球

本文由 @大漠飛鷹 原創發佈於人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基於 CC0 協議

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 7059 字。

轉載請註明: 產品細節剖析,讓你看看大廠是如何做設計的 - 楠木軒