分析2022年大廠新孵化的App,一起發(fā)現(xiàn)他們設(shè)計(jì)的獨(dú)特之處

16 評論 7000 瀏覽 55 收藏 23 分鐘

編輯導(dǎo)語:在競爭激烈且產(chǎn)品功能差異化不大的情況下,選擇在設(shè)計(jì)上下功夫往往能讓人眼前一亮,而這種巧思,尤其體現(xiàn)在細(xì)節(jié)上。本文拆解了一些較少被分析的大廠產(chǎn)品設(shè)計(jì)細(xì)節(jié),一起看看優(yōu)秀的產(chǎn)品設(shè)計(jì)到底好在哪里吧~

今天我們從產(chǎn)品風(fēng)格、圖標(biāo)、插圖、動(dòng)效幾個(gè)維度,分析被遺漏的大廠產(chǎn)品的設(shè)計(jì)亮點(diǎn)。

事先聲明 /attention 。

  1. 強(qiáng)烈建議使用電腦查看,用戶體驗(yàn)更佳。
  2. Gif 體積較大,請耐心查看。
  3. 為了讓設(shè)計(jì)細(xì)節(jié)更容易被看到,用Gif來呈展示。

以下是碳水Sir在App Store發(fā)現(xiàn)的幾款“寶貝”,之所以稱為“寶貝”是因?yàn)楫a(chǎn)品中可學(xué)到的東西太多了,每個(gè)產(chǎn)品視覺UI以及動(dòng)效都有其獨(dú)特風(fēng)格(當(dāng)然網(wǎng)上也有別人總結(jié)過的產(chǎn)品,我這里就不拿出來重復(fù)說了)我僅針對未總結(jié)的大廠產(chǎn)品,進(jìn)行設(shè)計(jì)細(xì)節(jié)拆解,看看優(yōu)秀的產(chǎn)品設(shè)計(jì)到底好在哪里,請君細(xì)細(xì)品味。

(淘寶 – 屋顏 – 一站式潮流家居平臺(tái))

(字節(jié) – 抖音盒子 – 潮流時(shí)尚電商平臺(tái))

(騰訊 – doX多克斯 – 生活碎片視頻社交)

(淘寶 – 吃貨筆記 – 記錄美食好生活)

(得物旗下 – 95分 – 奢潮二手平臺(tái))

(騰訊 – PODO漫畫 – 獨(dú)特交互體驗(yàn)漫畫閱讀平臺(tái))

(荔枝 – 皮玩 – 語音社交平臺(tái))

(陌陌 – 咔咔 – 實(shí)拍互動(dòng)交友平臺(tái))

排名不分先后,從以上幾款產(chǎn)品logo中不難看出,圖形設(shè)計(jì)都偏向于具像化,傳遞出正向的情緒,顏色方面使用熒光黃、青綠、漸變粉等凸顯年輕、大膽,富有朝氣。

一、屋顏

1. 前言

第一眼看到這個(gè)名就有被驚艷。首先屋顏是屋檐的斜譯,檐變成顏,中華文字博大精深,讀起來也不違和,同時(shí)也直觀呈現(xiàn)出產(chǎn)品定位屬性。logo采用字體設(shè)計(jì)手法,“屋”字經(jīng)過設(shè)計(jì)手法使線條呈現(xiàn)出立體空間感,也間接體現(xiàn)出產(chǎn)品是和房屋軟裝相關(guān),同時(shí)為屋內(nèi)添置“顏色”(軟裝)相關(guān)的產(chǎn)品。一個(gè)logo兩層含義,通過字體設(shè)計(jì)以及諧音表現(xiàn),巧妙的融入其中。

2. 品牌元素

直觀來看,頁面大量留白,圖片質(zhì)量高級且風(fēng)格統(tǒng)一,均采用素底作為產(chǎn)品首圖,很好的提升產(chǎn)品整體調(diào)性。

圖形方面均采用直角元素,配圖、banner、按鈕、icon無一例外;細(xì)線風(fēng)格設(shè)計(jì)使產(chǎn)品極具品質(zhì)感,有種無印良品的現(xiàn)代極簡主義風(fēng)潮。也叫MUJI風(fēng)。

瓷片區(qū)的配圖采用線性+2.5D風(fēng)格,使畫面富有空間層次,能撐住頁面頭部重要位置,且再次突出產(chǎn)品極簡主義風(fēng)格。當(dāng)然還有空狀態(tài)、無網(wǎng)絡(luò)環(huán)境下的配圖等等都很統(tǒng)一。

3. 動(dòng)效表達(dá)

動(dòng)效方面最值得關(guān)注的是下拉刷新,使用吊燈作為下拉效果,當(dāng)向下滑動(dòng)時(shí)電線被拉扯長,但斷不了,給人以安全可靠的產(chǎn)品透傳,也算是通過創(chuàng)意設(shè)計(jì)助力產(chǎn)品體驗(yàn)的手段之一。釋放刷新時(shí),輪播不同的家居icon圖標(biāo),再次強(qiáng)化定位產(chǎn)品屬性,且刷新時(shí)不至于乏味。

加載狀態(tài)采用+號(hào)線條旋轉(zhuǎn)表現(xiàn),同時(shí)在結(jié)尾變成一個(gè)方形,這么極簡的設(shè)計(jì)之前其他產(chǎn)品從未出現(xiàn)過,同時(shí)它也符合屋顏的產(chǎn)品調(diào)性(新家軟裝要做加法,僅個(gè)人理解)也算是一個(gè)設(shè)計(jì)亮點(diǎn)。

4. 3D實(shí)景

最新穎的是產(chǎn)品特有的【3D實(shí)景逛店】功能,進(jìn)一步強(qiáng)化家具與室內(nèi)的強(qiáng)相關(guān)性,為什么這么說,單從買家具上,線上買前只能靠照片來間接聯(lián)想買后填入家中的情況,并不能按照自己習(xí)慣多角度查看家具。又或者因?yàn)槊?,沒時(shí)間去線下家具館,或者怕白去一趟,通過【3D實(shí)景逛店】快速解決這部分用戶需求。同時(shí),也給線下家具館增加了更多曝光度的可能性。

至此,屋顏的設(shè)計(jì)細(xì)節(jié)講解就結(jié)束了,希望產(chǎn)品體驗(yàn)越做越好。

二、抖音盒子

1. 前言

抖音旗下的電商平臺(tái),整體風(fēng)格清爽直觀,綠色與紫色搭配也是一種時(shí)尚風(fēng)。相比其他電商產(chǎn)品,抖音盒子沒有金剛區(qū)圖標(biāo)設(shè)計(jì)以及營銷類的占位圖,相反金剛區(qū)僅展示奢侈品實(shí)物圖,產(chǎn)品圖大小做了統(tǒng)一,視覺呈現(xiàn)很高級,同時(shí)下列瀑布流商品中首圖沒有活動(dòng)促銷等信息干擾,只展示商品圖,突出其時(shí)尚潮牌好物的特性,同時(shí)也與當(dāng)前清爽、高級的設(shè)計(jì)風(fēng)格相一致。

2. 品牌元素

幾處設(shè)計(jì)細(xì)節(jié)值得參考,首先是底部Tab欄點(diǎn)擊動(dòng)效,承載抖音logo的故障風(fēng)效果,黑色+紫色故障效果一來告知與抖音具有相關(guān)聯(lián)性,是旗下電商產(chǎn)品;二來黑色Tab圖標(biāo)能很好的壓住“紫綠主色調(diào)”的跳躍感,不至于太過俏皮脫離電商屬性。

并且圖標(biāo)的整體性與統(tǒng)一性都做得很好,“小紅點(diǎn)”的設(shè)計(jì)采用品牌色“小紫點(diǎn)”呈現(xiàn)(小小的顏色改變),更加強(qiáng)化了產(chǎn)品風(fēng)格與調(diào)性的統(tǒng)一,(小紅點(diǎn)并不是只能用紅色)這點(diǎn)值得學(xué)習(xí)。

最后想告訴大家,產(chǎn)品在每個(gè)階段設(shè)計(jì)形式都會(huì)發(fā)生改變,比如1.0.1-1.0.2可能是輕微調(diào)整,1.0.0-2.0.0就是大的視覺升級??赡芤?yàn)楫a(chǎn)品發(fā)展或用戶變化,使得產(chǎn)品設(shè)計(jì)風(fēng)格發(fā)生改變, 但要知道每個(gè)上線版本一定是當(dāng)前方案的最優(yōu)解。就如你看到的“抖音盒子”現(xiàn)在是1.9.0版本號(hào),或許在不久的將來就會(huì)全新升級。這就不得而知了。

三、doX多克斯

1. 前言

是一款短視頻社交平臺(tái),與其他社交產(chǎn)品不同,doX主打短視頻內(nèi)容社交,用戶通過拍攝上傳有趣的短視頻內(nèi)容,來認(rèn)識(shí)志同道合的朋友。雖然與抖音同為短視頻平臺(tái),但抖音更側(cè)重視頻分發(fā),而doX側(cè)重于通過視頻與用戶建立聯(lián)系,一個(gè)視頻下可以跟拍多條,有點(diǎn)像qq以前的漂流瓶,只是換種呈現(xiàn)方式。這種陌生人視頻交友有一絲“探探”的味道。

2. 設(shè)計(jì)元素

設(shè)計(jì)上面單看logo以為會(huì)沿用手繪線稿類似的風(fēng)格。整體使用下來,僅在我的頁面頂部背景中用到,其余均采用斷線像素風(fēng)icon設(shè)計(jì),綠+白的設(shè)計(jì)風(fēng)格,可能也是為了營造出一種陌生人交友的科幻感覺吧。

發(fā)起拍攝頁,背景會(huì)有噪點(diǎn)動(dòng)效,也是營造一種拍攝前無鏡頭的感覺,引導(dǎo)用戶隨手記錄。

最后產(chǎn)品的切入方向很新穎,但是否能在短視頻風(fēng)口分出一杯羹就不知道了,但目前來說整體設(shè)計(jì)風(fēng)格框架已搭建起來,剩下的就是不斷填補(bǔ)及完善設(shè)計(jì),使其更加統(tǒng)一,希望doX越來越好。

四、吃貨筆記

1. 前言

第一次接觸“吃貨筆記”就被頁面整體設(shè)計(jì)風(fēng)格吸引。粗線圖標(biāo)+擬物圖標(biāo)形式空前新潮,給人眼前一亮的感覺。它類似于“大眾點(diǎn)評”,是個(gè)寶藏探店美食分享的平臺(tái)。通過線上探店選擇報(bào)名-自行到店-發(fā)表動(dòng)態(tài)-上傳票據(jù)-提取飯票,來獲得優(yōu)惠消費(fèi)的同時(shí)提高平臺(tái)UGC內(nèi)容的產(chǎn)出??上У氖悄壳皟H支持【廣州】店鋪(可能是先做小范圍本土化嘗試然后再逐漸擴(kuò)大地域),外地用戶只能看看界面并不能真實(shí)使用,這點(diǎn)很遺憾。

動(dòng)態(tài)布局也很有創(chuàng)意,第一張大圖,其他小圖呈現(xiàn),五宮格的樣式使布局統(tǒng)一,且更好突出第一張圖的主視覺層級。

2. 表情評分

如今本地餐飲服務(wù)平臺(tái)已經(jīng)做得很好了,“吃貨筆記”在嘗試從優(yōu)化福利流程、視覺表現(xiàn)、設(shè)計(jì)手法等多維度探索新的操作形式,這種身先士卒的精神值得尊敬,單說設(shè)計(jì)表現(xiàn)的細(xì)致,就以超過了大部分產(chǎn)品。當(dāng)然,每一款好的產(chǎn)品離不開設(shè)計(jì),更離不開產(chǎn)品功能是否真實(shí)滿足用戶需求,讓用戶使用輕松、解決需求后是否帶來爽點(diǎn)。

3. 動(dòng)效表達(dá)

圖標(biāo)用色很鮮明,均采用3D質(zhì)感表現(xiàn)形式,能看出設(shè)計(jì)上面下了很多功夫。底部Tab欄選中圖標(biāo)也采用3D質(zhì)感表現(xiàn),與金剛區(qū)和空狀態(tài)圖標(biāo)形成呼應(yīng),增強(qiáng)產(chǎn)品風(fēng)格記憶點(diǎn)。產(chǎn)品目前的評論和下載量都不像沒推過一樣,可能產(chǎn)品分享度不高導(dǎo)致很多一部分人不知道,所以增加徽章模塊評價(jià)打卡獲得獎(jiǎng)勵(lì),并以此成就來滿足用戶心里預(yù)期,從而增加使用黏性和傳播分享。

最后這款產(chǎn)品設(shè)計(jì)表現(xiàn)都特別出眾,通過空狀態(tài)文案等內(nèi)容也能看出產(chǎn)品的個(gè)性特征。例如:“蝦米都沒有,快看看其他的”,還有很多小的設(shè)計(jì)細(xì)節(jié),這里就不一一說了,大伙兒自行下載體驗(yàn)一下吧。

五、95分

1. 前言

95分是得物旗下的分離出來的全新App,主打潮流閑置交易平臺(tái),而得物定位是新一代潮流網(wǎng)購電商,兩者還是有所區(qū)別。但從UI設(shè)計(jì)角度,還是能看到得物的影子,潮流前線,并且整體風(fēng)格時(shí)尚統(tǒng)一,很多細(xì)節(jié)值得在這里展開說說。

2. 動(dòng)效表達(dá)

整個(gè)設(shè)計(jì)清爽直觀、沒有多余裝飾元素,這就要求圖標(biāo)必須做到極致,才能撐住整個(gè)頁面。我羅列了一下可能出現(xiàn)的圖標(biāo),輕質(zhì)感毛玻璃效果,結(jié)合統(tǒng)一的漸變元素使得每個(gè)圖標(biāo)都精致耐看,值得研究。線性圖標(biāo)也是一樣,整體配套,這套圖標(biāo)應(yīng)該下了不少功夫。

在二手平臺(tái)存量競爭的時(shí)代,能有一款產(chǎn)品嘗試新的設(shè)計(jì)風(fēng)格,并且把近幾年火起來的毛玻璃風(fēng)格相融合,這種走在設(shè)計(jì)前線的作風(fēng)與95分產(chǎn)品潮流前線的調(diào)性一致,單說設(shè)計(jì)嘗試這種做法就已經(jīng)超越了大多數(shù)產(chǎn)品了。

六、PODO漫畫

1. 前言

毫不夸張,這款產(chǎn)品打開了我對交互表現(xiàn)與實(shí)現(xiàn)的新認(rèn)知。我看了一下最早發(fā)布是去年9月27日,到目前為止短短8個(gè)月時(shí)間,就能讓PODO這款產(chǎn)品的交互設(shè)計(jì)做到如此優(yōu)秀,背后依靠騰訊,也有游戲元素的影子,這就不足為奇了。

2. 交互效果

使用下來基本沒有太多圖標(biāo)元素,更多是把屏幕空間分給了動(dòng)漫封面,一行三個(gè)動(dòng)漫排列,背景與主體人物分開,滑動(dòng)時(shí)二者在空間層進(jìn)行錯(cuò)位,營造一種錯(cuò)層的空間感,使原本扁平的圖像瞬間立體了許多很是新奇。

3. 交互效果

點(diǎn)開動(dòng)漫詳情,圖文信息依次從上到下展開,引導(dǎo)用戶視覺享受,并且頭圖中的動(dòng)漫人物也做了動(dòng)效設(shè)計(jì),全覽下來很是細(xì)致。除此之外,還有三個(gè)明顯的交互細(xì)節(jié),分別是:設(shè)置頁展開交互、閱讀頁底部導(dǎo)航交互以及目錄頁的交互樣式,都以新的表現(xiàn)形式呈現(xiàn)出來,作為設(shè)計(jì)師的我們現(xiàn)在不能再說:“設(shè)計(jì)已經(jīng)玩不出新的花樣”這樣的說法了。


太多的交互動(dòng)效就不一一列舉了,趕緊收入囊中吧!

七、皮玩

1. 前言

通過了解得知“皮玩”是荔枝App旗下控股產(chǎn)品,同樣也在入局陌生人社交領(lǐng)域。但值得注意的是該產(chǎn)品上線1個(gè)月,內(nèi)部框架及UI界面已相對完整,卡片、插圖、動(dòng)效、圖標(biāo)、以及一些趣味設(shè)計(jì)都已上線,應(yīng)該是一個(gè)成熟團(tuán)隊(duì)孵化的項(xiàng)目,上線前的測試應(yīng)該沒少下功夫,才能在產(chǎn)品初期做的如此完善。logo采用漸變黃底+吐舌頭表情相結(jié)合,搞怪趣味要用嘴說話這樣的印象。定位:更好玩的語音社交算說得過去 。

2. 元素拆解

初次體驗(yàn),第一感受就是采用貼紙風(fēng)的設(shè)計(jì)元素,icon與元素都具有較強(qiáng)的設(shè)計(jì)感,飽和度較低的配色加上白色描邊,就如產(chǎn)品說的“玩一下、皮一下”相呼應(yīng),產(chǎn)品的整體顏色采用漸變黃和漸變綠,配色很大膽,同時(shí)體現(xiàn)出該產(chǎn)品用戶所代表的具有興趣多元化、喜歡嘗鮮這樣一個(gè)群體。同時(shí)產(chǎn)品也是想通過這種設(shè)計(jì)吸引用戶使用。

產(chǎn)品中處處都能看到微動(dòng)效,使靜態(tài)的畫面變得活潑許多,這種做法也是為了給用戶營造一種活躍的氛圍,增加平臺(tái)活躍度。

八、咔咔

1. 前言

咔咔是陌陌孵化的一款社交產(chǎn)品,最近發(fā)現(xiàn)一些大廠旗下產(chǎn)品都在獨(dú)立運(yùn)營,目的也是為了和主產(chǎn)品脫離關(guān)系,防止激烈競爭導(dǎo)致產(chǎn)品停止運(yùn)營。年前很火的“啫喱”想必就是吃虧在這方面?;貧w正題,首頁是以視頻為主圖片為輔的瀑布流形式呈現(xiàn),停到某一位置則直接循環(huán)播放該視頻,排版方式極具新穎,當(dāng)體驗(yàn)下來眼球左右移動(dòng)總是會(huì)打斷我信息的獲取,有點(diǎn)強(qiáng)制引導(dǎo)用戶看大圖視頻內(nèi)容的感受。點(diǎn)開則可以與對方進(jìn)行互動(dòng)點(diǎn)贊評論。

2. 看看模塊

看看模塊,采用類似“探探”卡片交互左滑不喜歡右滑喜歡來讓用戶進(jìn)行操作,但與“探探”不同的是此互動(dòng)是開放的,用戶選擇滿意的動(dòng)態(tài)內(nèi)容添加到卡片后,陌生人可看到展示內(nèi)容,并且她被多少人喜歡都會(huì)展示出來,相當(dāng)于是個(gè)人名片,有種抖音+探探的味道。并不具有一對一的個(gè)人隱私性,這是與探探最直接的區(qū)別。

3. 打招呼

看看模塊中,“打招呼”是與對方建立私聊的唯一方式,如果該用戶已關(guān)注但未打招呼,把卡片劃走,那再也不能與對方建立私聊,除非對方通過“看看”模塊與你打招呼。這個(gè)產(chǎn)品細(xì)節(jié)很容易因?yàn)橛脩舨焕斫饣蛘呤只蜔o法與上個(gè)用戶進(jìn)行“打招呼”私信,且私信功能僅在觸發(fā)“打招呼”后才能交流,入口少、且不易理解,不知道是產(chǎn)品經(jīng)理的有意為之還是被遺漏掉的地方。

4. 消息模塊

消息頁的添加入口,用折疊手法展示,降低頻繁跳頁的割裂感,同時(shí)縮起時(shí)也不會(huì)占用消息列表。

消息列表是通過“打招呼”保存下的私密消息,聊天形式極具特色,黑色背景加上紅紫漸變列表有種夜店嗨皮的即視感觀,這里就不過多評價(jià),大家領(lǐng)悟吧。

5. 品牌元素

設(shè)計(jì)中還值得關(guān)注一點(diǎn),就是個(gè)人主頁中的個(gè)性標(biāo)簽,我羅列出22個(gè),當(dāng)用戶發(fā)表三個(gè)同類動(dòng)態(tài)即可點(diǎn)亮一個(gè)標(biāo)簽,此標(biāo)簽也會(huì)代替文字描述承載動(dòng)態(tài)內(nèi)容的作用,用戶選擇已點(diǎn)亮 的icon即展示對應(yīng)標(biāo)簽內(nèi)容了,相當(dāng)于動(dòng)態(tài)中的標(biāo)簽分類,但前提發(fā)表動(dòng)態(tài)時(shí)選擇對應(yīng)你標(biāo)簽,不然發(fā)表后的動(dòng)態(tài)不能二次修改。這種通過標(biāo)簽點(diǎn)亮的功能也是為了讓用戶UGC內(nèi)容更加多元化,同時(shí)也想通過標(biāo)簽來吸引用戶多多發(fā)動(dòng)態(tài)的。創(chuàng)意點(diǎn)是好的,但是否能達(dá)到好的效果,還是要拭目以待。


相比其他產(chǎn)品,咔咔是我一直關(guān)注的產(chǎn)品,同時(shí)也是特別喜歡的產(chǎn)品之一,所以我分享給你們。

九、結(jié)語

設(shè)計(jì)師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺,還有好的體驗(yàn)流程。不要讓用戶思考,這是每個(gè)設(shè)計(jì)師所追求的。

認(rèn)真記錄產(chǎn)品細(xì)節(jié),了解背后的思考,也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。

本期產(chǎn)品細(xì)節(jié)分析結(jié)束,我們下期再見!

#專欄作家#

碳水Sir;微信公眾號(hào):草蓉三石,人人都是產(chǎn)品經(jīng)理專欄作家。One More產(chǎn)品設(shè)計(jì)負(fù)責(zé)人,擅長設(shè)計(jì)細(xì)節(jié)洞察分析。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評論
評論請登錄
  1. 屋顏里面就沒有3D實(shí)景這個(gè)功能~
    為了看這個(gè)功能特意下載。
    客服明確沒這個(gè)功能,所以,我們是同一個(gè)App么

    來自廣東 回復(fù)
    1. 來,我教教你。
      打開iOS版手機(jī),進(jìn)入屋顏首頁_選擇底部TAB第三個(gè)「門店」_頭圖標(biāo)題寫著“3D實(shí)景逛店 真實(shí)走進(jìn)屋顏體驗(yàn)館”,點(diǎn)進(jìn)去就能查看。
      功能是有的
      App是同一個(gè)
      可能你的客服產(chǎn)品業(yè)務(wù)不熟悉

      來自上海 回復(fù)
    2. 啊哈哈哈謝謝你的回復(fù)??上乙呀?jīng)卸載了

      來自廣東 回復(fù)
  2. 作為一個(gè)產(chǎn)品 竟然不知道這些app 失職啊我 趕緊下載體驗(yàn)一下

    來自四川 回復(fù)
    1. hhhh幸虧看到了 不晚不晚

      回復(fù)
  3. 友啥、彼應(yīng)、noknok也是新推的一些、風(fēng)格上這些應(yīng)用都差不多

    來自湖南 回復(fù)
    1. 是的

      回復(fù)
  4. 說實(shí)話這些APP就聽過抖音盒子,但是看著圖片和動(dòng)圖感覺這些APP很潮啊,就是為啥沒怎么聽過嘞

    來自廣西 回復(fù)
    1. 沒接觸過的app,本身就沒有這方面需求,所以不奇怪

      回復(fù)
    2. 可能是針對00后、10后這類群體。會(huì)喜歡新潮的東西

      來自湖南 回復(fù)
  5. 為啥我一個(gè)都沒用過,不是目標(biāo)用戶?

    來自浙江 回復(fù)
    1. 我也不是目標(biāo)用戶,只是喜歡研究app罷了

      回復(fù)
  6. 今年大廠的app都好新潮,能感受到app的品類好像都是專注于某一細(xì)分品類的

    來自廣東 回復(fù)
    1. 一針見血,細(xì)分領(lǐng)域

      回復(fù)
  7. 沒想到?jīng)]關(guān)注的新秀app竟然這么流暢,簡潔的頁面我愛了,愛簡潔人狂喜

    來自安徽 回復(fù)
    1. 都很有趣

      來自上海 回復(fù)