這13個常用的App里,藏著許多設(shè)計師的匠心和巧思
發(fā)布時間:2022-01-19 11:18 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2 閱讀: 3796

作為設(shè)計師,在拿到產(chǎn)品需求的時候,所要做的不僅僅是完成產(chǎn)品的設(shè)計工作,更重要的是要思考如何通過設(shè)計的的手段去推動產(chǎn)品背后的商業(yè)價值達到最大化,提升視覺體驗、增強用戶的粘性以達到用戶轉(zhuǎn)化的目的。不需要我們設(shè)計的有多么復(fù)雜,可能是一個步驟的簡化、一句打動人心的文案、貼心的提示、趣味的動效…

「美團外賣」喊你回家吃最便宜的午餐

1. 產(chǎn)品體驗:

打開美團外賣APP,在每個店鋪下方都有突出的滿減提示,進入店鋪詳情頁,在頂部和底部同樣都有,選好商品后,商品的總價達到滿減條件,就可以減掉對應(yīng)的金額。

2. 設(shè)計思考:

滿20減18,后面還有6元無門檻紅包?這已經(jīng)是免費的午餐了,而且還賺了4塊錢。于是進入商品列表上下齊開「一頓操作猛如虎,定睛一看原地杵」,這里的商品要么就是低于20的,要么就是40左右,免費不存在的,要不就在這家隨便吃點吧。

其實類似于這種滿減提示在外面平臺一點都不稀奇,用戶也都不傻,也許進入店鋪發(fā)現(xiàn)不對后轉(zhuǎn)身就走,可平臺還是會把這種滿減提示作為最耀眼的存在,屢試不爽。

在用戶完成轉(zhuǎn)化的三要素中,動機、能力、觸發(fā),缺一不可。店鋪下方的滿減提示則是利用用戶的貪小便宜的心理,優(yōu)惠的數(shù)值越高,越能引起注意力和購買欲望,足以讓用戶產(chǎn)生下單的動機;進入店鋪后,看完所有商品,即使沒有符合用戶心理預(yù)期的價格,因滿減產(chǎn)生的動機逐漸降低,但新的購買動機產(chǎn)生了,通過紅包、好評、折扣、美圖…等能力依然在提升用戶的購買欲望,觸發(fā)用戶下單,并最終完成轉(zhuǎn)化。這種選擇「讓利」的方式去吸引用戶,也是短期內(nèi)也最有效方式。

這13個常用的大廠App里,藏著諸多設(shè)計師的匠心和巧思


「淘寶」激發(fā)用戶情緒的彈窗設(shè)計

1. 產(chǎn)品體驗:

在體驗淘寶簽到功能時,簽到成功會出現(xiàn)彈窗提示「簽到成功」,并告知此時下單紅包即可翻倍,點擊關(guān)閉,彈出二層彈窗「紅包未翻倍」及「限頻道內(nèi)使用」的文字提醒。

2. 設(shè)計思考:

淘寶通過二層彈窗提醒用戶退出當(dāng)前頁面可能帶來的影響、后果,讓用戶判斷當(dāng)前的退出決策是否正確,畢竟相對于‘收獲’來說,‘損失’更讓人在乎某事物。 同時告知退出會讓下次行動付出更多的金錢成本,這種更多成本的投入會讓用戶產(chǎn)生顧慮,從而激發(fā)用戶的情緒并轉(zhuǎn)化為行動。

這13個常用的大廠App里,藏著諸多設(shè)計師的匠心和巧思


「支付寶」螞蟻莊園-轉(zhuǎn)化用戶稍縱即逝的消費動機

1. 產(chǎn)品體驗:

在支付寶的螞蟻莊園喂養(yǎng)小雞,通過養(yǎng)雞攢愛心,集滿 5 顆愛心,即可捐贈給公益項目,另外可以完成多種任務(wù)來獲得飼料來喂養(yǎng)小雞;

點擊螞蟻莊園左側(cè)的果樹去種樹免費領(lǐng)取水果,同樣可以完成各種任務(wù)獲得肥料,施肥促使果樹成長,最終果實成熟就可免費領(lǐng)取真實的水果。

2. 設(shè)計思考:

支付寶通過公益的方式已經(jīng)讓用戶對螞蟻莊園產(chǎn)生了很強的粘性。項目的受益對象都是弱勢群體,比如留守兒童、殘疾幼兒、貧困女性等等,并根據(jù)捐贈的愛心進行好友排名。雖然有一部分人做好事不留名,但不排除大部分用戶都喜追求面子心理,總是希望自己最有面子,因為它可以帶來一種榮耀和心理上的滿足感,如果做好事能讓他人知曉,會激勵更多的人行善,因而用戶排名起到了極大的用戶激勵作用。

最近,螞蟻莊園增加了種果樹功能,選擇自己喜歡的水果種果樹,通過施肥最終讓果樹成熟就可以免費領(lǐng)取真實的水果,在開始出現(xiàn)「免費領(lǐng)水果」的時候就已經(jīng)激起了用戶的貪婪心理。種植果樹后,需要通過施肥促使果樹成長,在成長的不同階段需要的肥料也會根據(jù)基數(shù)遞增式的增加,需要用戶完成不同的任務(wù)獲得肥料,可以完成的任務(wù)雖然很多,但大部分都是九牛一毛。

用戶每天可以通過逛精選商品獲得大量的肥料,進入商品頁面,系統(tǒng)會推薦用戶最近在淘寶瀏覽過相似類型的商品,停留15秒即可領(lǐng)取肥料,同時如果下單更可領(lǐng)取近乎10倍的肥料,促使水果成熟的更快。根據(jù) 希克定律:用戶決策所需要花費的時間隨著選擇的數(shù)量和復(fù)雜性增加而增加。系統(tǒng)通過減少可供用戶選擇的選項以及為了「免費領(lǐng)水果」獲得肥料而可能下單的潛在動機,推薦最近瀏覽過的類似商品,促使用戶快速做出決策,以到達成交的目的。(PS:本人為了領(lǐng)取大量的肥料,已經(jīng)買了好幾次之前想買而沒有買的商品)

這13個常用的大廠App里,藏著諸多設(shè)計師的匠心和巧思


「CCtalk」友好的彈窗提示

1. 產(chǎn)品體驗:

進入「cctalk」APP首頁,底部會自動出現(xiàn)最近一次學(xué)習(xí)記錄的彈窗小提示,點擊即可進入繼續(xù)學(xué)習(xí),也可手動點擊關(guān)閉,在沒有任何操作的情況,時間達到5s也會自動關(guān)閉。

2. 設(shè)計思考:

cctall是一個重量級的產(chǎn)品,進入此應(yīng)用的用戶通常帶有目的性,都是以學(xué)習(xí)為主,不至于是用戶在漫無目的情況下進來娛樂休閑一番吧。進入首頁的學(xué)習(xí)記錄彈窗是介于toast與snackbar之間,延長了toast的顯示時間,并加入了一個跳轉(zhuǎn)鏈接,同時也可以關(guān)閉或自動消失,起到提醒用戶作用的同時,又不影響其他的操作。

一個好的產(chǎn)品會在恰當(dāng)?shù)臅r間給予恰當(dāng)?shù)姆答,不反饋、反饋不及時、反饋不對都會讓用戶反感你的產(chǎn)品,從而失去用戶。cctalk的彈窗提示正是在用戶恰好可能需要的時間出現(xiàn),讓用戶快速的達到自己的目的,非常的友好,同時也提升了產(chǎn)品的易用性。

這13個常用的大廠App里,藏著諸多設(shè)計師的匠心和巧思

「餓了么」便捷的購物車入口

1. 產(chǎn)品體驗:

進入餓了么首頁,點擊右下角的購物車入口,即可看到從所有店鋪添加的商品一覽,可進行一一結(jié)算。

2. 設(shè)計思考:

相比以前,用過餓了么的用戶都知道,每個店鋪都是有單獨的購物車,從對應(yīng)的購物車進去才能完成結(jié)算。大部分用戶在買商品之前,都會查看多個店鋪相同商品的價格、評論、綜合評分…等,根據(jù)性價比「貨比三家」,但回過頭來,需要來回切換去找到之前添加過商品的店鋪,甚至查詢不到,耗費大量的時間,非常的不便。

餓了么首頁右下角新增的購物車入口很好的解決了這一問題,進入購物車,能看到之前添加過商品到購物車的所有店鋪,可從列表中選擇進行結(jié)算,節(jié)省了用戶大量的時間成本,入口很巧妙的解決了用戶在下單流程中可能會遇到的痛點,提升了產(chǎn)品的易用性。

這13個常用的大廠App里,藏著諸多設(shè)計師的匠心和巧思

「夸克瀏覽器」洞察人心的地址欄細(xì)節(jié)

1. 產(chǎn)品體驗:

夸克瀏覽器輸入網(wǎng)址時,點擊下方控制條圖標(biāo),會放大左右控制區(qū)域,左右移動即可修改光標(biāo)位置;

地址欄顯示在鍵盤上方(屏幕中間位置),輸入網(wǎng)址時的自動匹配結(jié)果由下往上的方式排列。

2. 設(shè)計思考:

我們在使用移動端瀏覽器輸入網(wǎng)址時,如果需要修改文本框的地址,需要用手指直接在輸入框定位光標(biāo),相對很小的地址文本,要想將光標(biāo)精準(zhǔn)的定位在理想的位置,確實非常難。通過夸克瀏覽器的控制條左右移動定位光標(biāo),精準(zhǔn)度提升了很多,避免了用戶因光標(biāo)定位錯誤造成的重復(fù)操作,提高了操作效率。

另外所接觸的移動端瀏覽器,大部分的地址欄都設(shè)在屏幕的頂部。目前大屏幕尺寸已經(jīng)是趨勢,單手操作手機的用戶比例占據(jù)最大,頂部和最底部的單手最難操作的區(qū)域,而夸克瀏覽器打破常規(guī),將地址欄放在鍵盤上方,即屏幕的中間位置,是用戶單手最容易操作和控制的區(qū)域,非常的便捷。網(wǎng)址匹配結(jié)果根據(jù)精準(zhǔn)度由下往上排列也是非常合理。費茨定律告訴我們:需要連續(xù)操作的控件盡可能接近, 任意一點移動到目標(biāo)中心位置所需要的時間,與目標(biāo)距離正相關(guān), 與目標(biāo)大小負(fù)相關(guān)。

這13個常用的大廠App里,藏著諸多設(shè)計師的匠心和巧思

「微信」朋友圈消息重新編輯

1. 產(chǎn)品體驗:

使用朋友圈發(fā)布消息,發(fā)現(xiàn)有錯別字,把信息刪除后,點擊重新編輯即可在回到消息未發(fā)布時的界面修改完成。

2. 設(shè)計思考:

微信在最近一段時間真是大招連連,從之前一年一次的昵稱修改到后面的拍一拍,接著又上線了朋友圈消息刪除后重新編輯的功能,讓很多網(wǎng)友直呼真香。

我們在發(fā)布朋友圈消息之后,發(fā)現(xiàn)有錯別字或者需要增減內(nèi)容,可以直接刪除,在規(guī)定的時間內(nèi)重新編輯再次發(fā)布即可。尤其是對于發(fā)布長篇幅消息的用戶,沒有復(fù)制消息內(nèi)容就匆忙刪除,再次從0編輯,心里的陰影面積不弱于「一萬匹烈馬奔騰」,此時看到重新編輯的入口,可謂是雪中送炭,不僅簡化的交互流程,也省去了用戶重新編輯消息的一系列麻煩操作,深得人心。

這13個常用的大廠App里,藏著諸多設(shè)計師的匠心和巧思

「58同城」舉一反三的彈窗Tab欄

1. 產(chǎn)品體驗:

在體驗58同城APP發(fā)布房源信息時,需要錄入多種房屋選項,可以在一個彈窗的多個Tab欄中完成不同的選項。

2. 設(shè)計思考:

在我們使用的眾多APP應(yīng)用中,不少接觸關(guān)于信息選擇的頁面,如:填寫地址選擇地區(qū)、購物選擇商品類型、退貨選擇原因…等,最為常見的操作方式就是選擇完當(dāng)前選項后,需要點擊下一個選項入口,再次進入彈窗選擇,有很多個分級。而58同城發(fā)布房源的選項,在進行設(shè)計的時候?qū)⒍鄠分級放在同一選項,多個選項放在同一彈窗,有效的避免了選項太多造成的信息混亂,同時也解決了因多次彈窗給用戶帶來操作上的不便。節(jié)省時間操作成本的同時,也讓路徑變得更加合理簡單。

這13個常用的大廠App里,藏著諸多設(shè)計師的匠心和巧思

「美團」首頁金剛區(qū)圖標(biāo)

1. 產(chǎn)品體驗:

進入美團首頁,金剛區(qū)面性類型的抽象圖標(biāo)給人眼前一亮的感覺;

金剛區(qū)多種分類入口可通過左右滑動切換,能快速找到自己想要的功能。

2. 設(shè)計思考:

一個產(chǎn)品最具核心功能的就是首頁了, 它承擔(dān)了產(chǎn)品最核心的功能,決定了產(chǎn)品的屬性和基調(diào),而首頁的金剛區(qū)最能體現(xiàn)產(chǎn)品的「骨骼」(產(chǎn)品架構(gòu)),以方便用戶快速進入對應(yīng)的需求模塊。通常我們見得最多的金剛區(qū)圖標(biāo)樣式80%都是「底色塊+圖形元素」組合而成,而美團APP金剛區(qū)使用的面性圖標(biāo),通過對現(xiàn)實生活中物體縮影的抽象圖形進行色彩填充的圖標(biāo)樣式, 清晰、簡潔且統(tǒng)一,具有表意能力強、辨識度高的特點,提升易用性。跟其他產(chǎn)品大眾化的圖標(biāo)樣式相比,做到了差異化。另外通過單色疊加,更改透明度或疊加圖層樣式設(shè)計,視覺上非常通透,有空間感,細(xì)節(jié)豐富,品質(zhì)感強,具有很強的吸引力,稱得上是首頁的顏值擔(dān)當(dāng)。

針對首頁眾多的功能入口,無法全部展示,大部分移動應(yīng)用都會在金剛區(qū)的最后位置設(shè)計一個「更多」的入口。而美團則通過左右滑動的交互方式將功能分類全部展示,在視覺上更加聚焦。因為很多的圖標(biāo)具備相似性,使用列表展示容易混淆用戶的視覺,降低圖標(biāo)的辨識度以及信息的傳遞速度,所以全部展示并左右滑動選擇、分塊瀏覽很好的解決的這一問題,不僅操作快捷,而且視覺傳達的效率也得到了提升。

這13個常用的大廠App里,藏著諸多設(shè)計師的匠心和巧思

「iPhone」App Store引人注目的動效引導(dǎo)

1. 產(chǎn)品體驗:

使用iPhone移動端設(shè)備進入App store首次下載該應(yīng)用,頁面底部提示「通過側(cè)邊按鈕確認(rèn)」,屏幕右側(cè)按鈕位置備注「按兩下以安裝」,同時右側(cè)的模擬按鈕色塊以動效的方式彈動兩次提醒。

2. 設(shè)計思考:

對于Apple產(chǎn)品,不管是移動端還是桌面設(shè)備,在視覺和體驗上都可稱之為魔鬼級別。下載應(yīng)用時,右側(cè)的按鈕形狀則是利用視覺線索進行示能,讓用戶通過圖形,預(yù)期下一步的行為或感知圖形的作用。通過動效提示方式更能吸引用戶的眼球,也更能引導(dǎo)用戶進行操作,真正做到的有溫度、有情感的交流。

這13個常用的大廠App里,藏著諸多設(shè)計師的匠心和巧思

「騰訊QQ」隱藏在暗處的多窗口消息瀏覽

1. 產(chǎn)品體驗:

點擊QQ消息列表進入聊天框,長按聊天窗口空白處,可以切換多窗口,左右滑動可切換好友/群聊窗口,上下滑動可查看當(dāng)前窗口的更多聊天記錄。

2. 設(shè)計思考:

雖然現(xiàn)在大部分的用戶都轉(zhuǎn)戰(zhàn)微信,但QQ作為社交應(yīng)用的翹楚,光輝一直都沒有退卻,只不過QQ服務(wù)的用戶群體較年輕,而且社交群體多樣化,也更符合年輕化的氣質(zhì)。QQ的信息多窗口切換,看起來也是相當(dāng)炫酷,切換時只需要在消息列表中,長按消息的空白處就能快速進入切換選項,絲滑般的快感,我們再也不需要使用返回信息列表再重新進入到窗口的多步驟操作了。

為此,你也可能會聽到:「我趙日天表示不服哇」,已經(jīng)不用QQ好多年,微信這么方便,難道它不香嗎?其實對于真正需要的用戶來說,這一功能還是非常的方便。不管是處于學(xué)習(xí)、工作還是閑聊吹水,QQ的群聊功能比較多樣化,我們在瀏覽群聊天記錄、爬樓、查找部分有用信息通過多窗口切換時是非常實用。

這13個常用的大廠App里,藏著諸多設(shè)計師的匠心和巧思

「中國工商銀行」趣味的動效視覺引導(dǎo)

1. 產(chǎn)品體驗:

進入中國工商銀行APP首頁,搜索欄里的語音錄入通過動效的形式在麥克風(fēng)圖形與音波圖形之間過渡來回切換,提醒用戶可以使用語音錄入搜索。

2. 設(shè)計思考:

目前很多移動端應(yīng)用的搜索都增加了語音錄入功能,為的是讓用戶更高效、便捷的完成搜索,不過大部分只是增加了一個麥克風(fēng)圖標(biāo)作為提示。工商銀行APP使用動效的形式在麥克風(fēng)圖形與音波圖形之間過渡來回切換,首先動態(tài)的視覺引導(dǎo),增添了趣味性的微交互更能吸引用戶的眼球,也能夠更好的引導(dǎo)用戶操作。其次使用兩個圖標(biāo)在識別性上是具有選擇性的,擴大了用戶在識別層范圍的認(rèn)知程度,也間接提升辨識度,兩個圖標(biāo)過渡性質(zhì)的切換,也顯得非常柔和,情感化的設(shè)計細(xì)節(jié)為產(chǎn)品增添了溫度,提高點擊率。

圖標(biāo)是一個對象或動作的視覺體現(xiàn),最重要的意象屬性就是傳達含義功能,另外也是加深用戶形象的最主要影響要素。麥克風(fēng)圖標(biāo)是一個設(shè)備的抽象圖形,音波圖標(biāo)則是使用設(shè)備時的交互過程,兩個圖標(biāo)以動效的形式完美過渡結(jié)合,給我們的第一印象就是感覺這個功能再在向我們招手,在和我們對話,真正做到了有溫度的交流。

這13個常用的大廠App里,藏著諸多設(shè)計師的匠心和巧思

「京東」適時的隱藏營造沉浸體驗

1. 產(chǎn)品體驗:

在京東APP商品列表上滑瀏覽商品時,導(dǎo)航欄和全局篩選欄自動隱藏,存在下滑操作后再次展示。

2. 設(shè)計思考:

一般情況下,當(dāng)一些導(dǎo)航或者操作入口可能會成為打擾用戶沉浸體驗障礙時,我們就會把它隱藏,因為部分元素的存在,就會分散用戶的注意力;谟脩舻男枨,京東APP的商品列表頂部有導(dǎo)航欄、全局操作欄、垂直內(nèi)容篩選欄,加上狀態(tài)欄,在移動設(shè)備中的縱向占比是相當(dāng)?shù)拇螅瑸榱私鉀Q這一問題,京東通過改變交互的方式,當(dāng)頁面上滑,會隱藏導(dǎo)航欄和全局篩選欄,下滑后則再次顯示。

在交互方面,做了這樣的思考,當(dāng)出現(xiàn)上滑的操作后,可以理解為用戶已經(jīng)開始在挑選商品,這時候搜索與排序的重要級下降了,搜索結(jié)果垂直內(nèi)容篩選的重要級上升了,將等級較低的操作/信息適時的隱藏,可以讓用戶專注于當(dāng)前信息,避免其他多余的內(nèi)容產(chǎn)生干擾,同時也讓內(nèi)容區(qū)域高度增加,一屏展示的商品信息更多,增大商品觸達用戶的可能性以及屏幕的利用率。合理的運用了交互設(shè)計四策略-隱藏:盡可能隱藏需要隱藏的功能,其次在合適的時機、位置上顯示相應(yīng)的功能。

這13個常用的大廠App里,藏著諸多設(shè)計師的匠心和巧思

文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC