2023-3-1 資深UI設(shè)計者
以下是碳水Sir在App Store發(fā)現(xiàn)的幾款“寶貝”，之所以稱為“寶貝”是因為產(chǎn)品中可學(xué)到的東西太多了，每個產(chǎn)品視覺UI以及動效都有其獨(dú)特風(fēng)格（當(dāng)然網(wǎng)上也有別人總結(jié)過的產(chǎn)品，我這里就不拿出來重復(fù)說了）我僅針對未總結(jié)的大廠產(chǎn)品，進(jìn)行設(shè)計細(xì)節(jié)拆解，看看優(yōu)秀的產(chǎn)品設(shè)計到底好在哪里，請君細(xì)細(xì)品味。
（淘寶 - 屋顏 - 一站式潮流家居平臺）
（字節(jié) - 抖音盒子 - 潮流時尚電商平臺）
（騰訊 - doX多克斯 - 生活碎片視頻社交）
（淘寶 - 吃貨筆記 - 記錄美食好生活）
（得物旗下 - 95分 - 奢潮二手平臺）
（騰訊 - PODO漫畫 - 獨(dú)特交互體驗漫畫閱讀平臺）
（荔枝 - 皮玩 - 語音社交平臺）
（陌陌 - 咔咔 - 實拍互動交友平臺）
排名不分先后，從以上幾款產(chǎn)品logo中不難看出，圖形設(shè)計都偏向于具像化，傳遞出正向的情緒，顏色方面使用熒光黃、青綠、漸變粉等凸顯年輕、大膽，富有朝氣。
第一眼看到這個名就有被驚艷。首先屋顏是屋檐的斜譯，檐變成顏，中華文字博大精深，讀起來也不違和，同時也直觀呈現(xiàn)出產(chǎn)品定位屬性。logo采用字體設(shè)計手法，“屋”字經(jīng)過設(shè)計手法使線條呈現(xiàn)出立體空間感，也間接體現(xiàn)出產(chǎn)品是和房屋軟裝相關(guān)，同時為屋內(nèi)添置“顏色”（軟裝）相關(guān)的產(chǎn)品。一個logo兩層含義，通過字體設(shè)計以及諧音表現(xiàn)，巧妙的融入其中。
直觀來看，頁面大量留白，圖片質(zhì)量高級且風(fēng)格統(tǒng)一，均采用素底作為產(chǎn)品首圖，很好的提升產(chǎn)品整體調(diào)性。
圖形方面均采用直角元素，配圖、banner、按鈕、icon無一例外；細(xì)線風(fēng)格設(shè)計使產(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)一。
動效方面最值得關(guān)注的是下拉刷新，使用吊燈作為下拉效果，當(dāng)向下滑動時電線被拉扯長，但斷不了，給人以安全可靠的產(chǎn)品透傳，也算是通過創(chuàng)意設(shè)計助力產(chǎn)品體驗的手段之一。釋放刷新時，輪播不同的家居icon圖標(biāo)，再次強(qiáng)化定位產(chǎn)品屬性，且刷新時不至于乏味。
加載狀態(tài)采用+號線條旋轉(zhuǎn)表現(xiàn)，同時在結(jié)尾變成一個方形，這么極簡的設(shè)計之前其他產(chǎn)品從未出現(xiàn)過，同時它也符合屋顏的產(chǎn)品調(diào)性（新家軟裝要做加法，僅個人理解）也算是一個設(shè)計亮點。
最新穎的是產(chǎn)品特有的【3D實景逛店】功能，進(jìn)一步強(qiáng)化家具與室內(nèi)的強(qiáng)相關(guān)性，為什么這么說，單從買家具上，線上買前只能靠照片來間接聯(lián)想買后填入家中的情況，并不能按照自己習(xí)慣多角度查看家具。又或者因為忙，沒時間去線下家具館，或者怕白去一趟，通過【3D實景逛店】快速解決這部分用戶需求。同時，也給線下家具館增加了更多曝光度的可能性。
至此，屋顏的設(shè)計細(xì)節(jié)講解就結(jié)束了，希望產(chǎn)品體驗越做越好。
抖音旗下的電商平臺，整體風(fēng)格清爽直觀，綠色與紫色搭配也是一種時尚風(fēng)。相比其他電商產(chǎn)品，抖音盒子沒有金剛區(qū)圖標(biāo)設(shè)計以及營銷類的占位圖，相反金剛區(qū)僅展示奢侈品實物圖，產(chǎn)品圖大小做了統(tǒng)一，視覺呈現(xiàn)很高級，同時下列瀑布流商品中首圖沒有活動促銷等信息干擾，只展示商品圖，突出其時尚潮牌好物的特性，同時也與當(dāng)前清爽、高級的設(shè)計風(fēng)格相一致。
幾處設(shè)計細(xì)節(jié)值得參考，首先是底部Tab欄點擊動效，承載抖音logo的故障風(fēng)效果，黑色+紫色故障效果一來告知與抖音具有相關(guān)聯(lián)性，是旗下電商產(chǎn)品；二來黑色Tab圖標(biāo)能很好的壓住“紫綠主色調(diào)”的跳躍感，不至于太過俏皮脫離電商屬性。
并且圖標(biāo)的整體性與統(tǒng)一性都做得很好，“小紅點”的設(shè)計采用品牌色“小紫點”呈現(xiàn)（小小的顏色改變），更加強(qiáng)化了產(chǎn)品風(fēng)格與調(diào)性的統(tǒng)一，（小紅點并不是只能用紅色）這點值得學(xué)習(xí)。
最后想告訴大家，產(chǎn)品在每個階段設(shè)計形式都會發(fā)生改變，比如1.0.1-1.0.2可能是輕微調(diào)整，1.0.0-2.0.0就是大的視覺升級。可能因為產(chǎn)品發(fā)展或用戶變化，使得產(chǎn)品設(shè)計風(fēng)格發(fā)生改變， 但要知道每個上線版本一定是當(dāng)前方案的最優(yōu)解。就如你看到的“抖音盒子”現(xiàn)在是1.9.0版本號，或許在不久的將來就會全新升級。這就不得而知了。
是一款短視頻社交平臺，與其他社交產(chǎn)品不同，doX主打短視頻內(nèi)容社交，用戶通過拍攝上傳有趣的短視頻內(nèi)容，來認(rèn)識志同道合的朋友。雖然與抖音同為短視頻平臺，但抖音更側(cè)重視頻分發(fā)，而doX側(cè)重于通過視頻與用戶建立聯(lián)系，一個視頻下可以跟拍多條，有點像qq以前的漂流瓶，只是換種呈現(xiàn)方式。這種陌生人視頻交友有一絲“探探”的味道。
設(shè)計上面單看logo以為會沿用手繪線稿類似的風(fēng)格。整體使用下來，僅在我的頁面頂部背景中用到，其余均采用斷線像素風(fēng)icon設(shè)計，綠+白的設(shè)計風(fēng)格，可能也是為了營造出一種陌生人交友的科幻感覺吧。
發(fā)起拍攝頁，背景會有噪點動效，也是營造一種拍攝前無鏡頭的感覺，引導(dǎo)用戶隨手記錄。
最后產(chǎn)品的切入方向很新穎，但是否能在短視頻風(fēng)口分出一杯羹就不知道了，但目前來說整體設(shè)計風(fēng)格框架已搭建起來，剩下的就是不斷填補(bǔ)及完善設(shè)計，使其更加統(tǒng)一，希望doX越來越好。
第一次接觸“吃貨筆記”就被頁面整體設(shè)計風(fēng)格吸引。粗線圖標(biāo)+擬物圖標(biāo)形式空前新潮，給人眼前一亮的感覺。它類似于“大眾點評”，是個寶藏探店美食分享的平臺。通過線上探店選擇報名-自行到店-發(fā)表動態(tài)-上傳票據(jù)-提取飯票，來獲得優(yōu)惠消費(fèi)的同時提高平臺UGC內(nèi)容的產(chǎn)出?？上У氖悄壳皟H支持【廣州】店鋪（可能是先做小范圍本土化嘗試然后再逐漸擴(kuò)大地域），外地用戶只能看看界面并不能真實使用，這點很遺憾。
動態(tài)布局也很有創(chuàng)意，第一張大圖，其他小圖呈現(xiàn)，五宮格的樣式使布局統(tǒng)一，且更好突出第一張圖的主視覺層級。
如今本地餐飲服務(wù)平臺已經(jīng)做得很好了，“吃貨筆記”在嘗試從優(yōu)化福利流程、視覺表現(xiàn)、設(shè)計手法等多維度探索新的操作形式，這種身先士卒的精神值得尊敬，單說設(shè)計表現(xiàn)的細(xì)致，就以超過了大部分產(chǎn)品。當(dāng)然，每一款好的產(chǎn)品離不開設(shè)計，更離不開產(chǎn)品功能是否真實滿足用戶需求，讓用戶使用輕松、解決需求后是否帶來爽點。
圖標(biāo)用色很鮮明，均采用3D質(zhì)感表現(xiàn)形式，能看出設(shè)計上面下了很多功夫。底部Tab欄選中圖標(biāo)也采用3D質(zhì)感表現(xiàn)，與金剛區(qū)和空狀態(tài)圖標(biāo)形成呼應(yīng)，增強(qiáng)產(chǎn)品風(fēng)格記憶點。產(chǎn)品目前的評論和下載量都不像沒推過一樣，可能產(chǎn)品分享度不高導(dǎo)致很多一部分人不知道，所以增加徽章模塊評價打卡獲得獎勵，并以此成就來滿足用戶心里預(yù)期，從而增加使用黏性和傳播分享。
最后這款產(chǎn)品設(shè)計表現(xiàn)都特別出眾，通過空狀態(tài)文案等內(nèi)容也能看出產(chǎn)品的個性特征。例如：“蝦米都沒有，快看看其他的”，還有很多小的設(shè)計細(xì)節(jié)，這里就不一一說了，大伙兒自行下載體驗一下吧。
95分是得物旗下的分離出來的全新App，主打潮流閑置交易平臺，而得物定位是新一代潮流網(wǎng)購電商，兩者還是有所區(qū)別。但從UI設(shè)計角度，還是能看到得物的影子，潮流前線，并且整體風(fēng)格時尚統(tǒng)一，很多細(xì)節(jié)值得在這里展開說說。
整個設(shè)計清爽直觀、沒有多余裝飾元素，這就要求圖標(biāo)必須做到極致，才能撐住整個頁面。我羅列了一下可能出現(xiàn)的圖標(biāo)，輕質(zhì)感毛玻璃效果，結(jié)合統(tǒng)一的漸變元素使得每個圖標(biāo)都精致耐看，值得研究。線性圖標(biāo)也是一樣，整體配套，這套圖標(biāo)應(yīng)該下了不少功夫。
在二手平臺存量競爭的時代，能有一款產(chǎn)品嘗試新的設(shè)計風(fēng)格，并且把近幾年火起來的毛玻璃風(fēng)格相融合，這種走在設(shè)計前線的作風(fēng)與95分產(chǎn)品潮流前線的調(diào)性一致，單說設(shè)計嘗試這種做法就已經(jīng)超越了大多數(shù)產(chǎn)品了。
毫不夸張，這款產(chǎn)品打開了我對交互表現(xiàn)與實現(xiàn)的新認(rèn)知。我看了一下最早發(fā)布是去年9月27日，到目前為止短短8個月時間，就能讓PODO這款產(chǎn)品的交互設(shè)計做到如此優(yōu)秀，背后依靠騰訊，也有游戲元素的影子，這就不足為奇了。
使用下來基本沒有太多圖標(biāo)元素，更多是把屏幕空間分給了動漫封面，一行三個動漫排列，背景與主體人物分開，滑動時二者在空間層進(jìn)行錯位，營造一種錯層的空間感，使原本扁平的圖像瞬間立體了許多很是新奇。
點開動漫詳情，圖文信息依次從上到下展開，引導(dǎo)用戶視覺享受，并且頭圖中的動漫人物也做了動效設(shè)計，全覽下來很是細(xì)致。除此之外，還有三個明顯的交互細(xì)節(jié)，分別是：設(shè)置頁展開交互、閱讀頁底部導(dǎo)航交互以及目錄頁的交互樣式，都以新的表現(xiàn)形式呈現(xiàn)出來，作為設(shè)計師的我們現(xiàn)在不能再說：“設(shè)計已經(jīng)玩不出新的花樣”這樣的說法了。
太多的交互動效就不一一列舉了，趕緊收入囊中吧！
通過了解得知“皮玩”是荔枝App旗下控股產(chǎn)品，同樣也在入局陌生人社交領(lǐng)域。但值得注意的是該產(chǎn)品上線1個月，內(nèi)部框架及UI界面已相對完整，卡片、插圖、動效、圖標(biāo)、以及一些趣味設(shè)計都已上線，應(yīng)該是一個成熟團(tuán)隊孵化的項目，上線前的測試應(yīng)該沒少下功夫，才能在產(chǎn)品初期做的如此完善。logo采用漸變黃底+吐舌頭表情相結(jié)合，搞怪趣味要用嘴說話這樣的印象。定位：更好玩的語音社交算說得過去 。
初次體驗，第一感受就是采用貼紙風(fēng)的設(shè)計元素，icon與元素都具有較強(qiáng)的設(shè)計感，飽和度較低的配色加上白色描邊，就如產(chǎn)品說的“玩一下、皮一下”相呼應(yīng)，產(chǎn)品的整體顏色采用漸變黃和漸變綠，配色很大膽，同時體現(xiàn)出該產(chǎn)品用戶所代表的具有興趣多元化、喜歡嘗鮮這樣一個群體。同時產(chǎn)品也是想通過這種設(shè)計吸引用戶使用。
產(chǎn)品中處處都能看到微動效，使靜態(tài)的畫面變得活潑許多，這種做法也是為了給用戶營造一種活躍的氛圍，增加平臺活躍度。
咔咔是陌陌孵化的一款社交產(chǎn)品，最近發(fā)現(xiàn)一些大廠旗下產(chǎn)品都在獨(dú)立運(yùn)營，目的也是為了和主產(chǎn)品脫離關(guān)系，防止激烈競爭導(dǎo)致產(chǎn)品停止運(yùn)營。年前很火的“啫喱”想必就是吃虧在這方面。回歸正題，首頁是以視頻為主圖片為輔的瀑布流形式呈現(xiàn)，停到某一位置則直接循環(huán)播放該視頻，排版方式極具新穎，當(dāng)體驗下來眼球左右移動總是會打斷我信息的獲取，有點強(qiáng)制引導(dǎo)用戶看大圖視頻內(nèi)容的感受。點開則可以與對方進(jìn)行互動點贊評論。
看看模塊，采用類似“探探”卡片交互左滑不喜歡右滑喜歡來讓用戶進(jìn)行操作，但與“探探”不同的是此互動是開放的，用戶選擇滿意的動態(tài)內(nèi)容添加到卡片后，陌生人可看到展示內(nèi)容，并且她被多少人喜歡都會展示出來，相當(dāng)于是個人名片，有種抖音+探探的味道。并不具有一對一的個人隱私性，這是與探探最直接的區(qū)別。
看看模塊中，“打招呼”是與對方建立私聊的唯一方式，如果該用戶已關(guān)注但未打招呼，把卡片劃走，那再也不能與對方建立私聊，除非對方通過“看看”模塊與你打招呼。這個產(chǎn)品細(xì)節(jié)很容易因為用戶不理解或者手滑就無法與上個用戶進(jìn)行“打招呼”私信，且私信功能僅在觸發(fā)“打招呼”后才能交流，入口少、且不易理解，不知道是產(chǎn)品經(jīng)理的有意為之還是被遺漏掉的地方。
消息頁的添加入口，用折疊手法展示，降低頻繁跳頁的割裂感，同時縮起時也不會占用消息列表。
消息列表是通過“打招呼”保存下的私密消息，聊天形式極具特色，黑色背景加上紅紫漸變列表有種夜店嗨皮的即視感觀，這里就不過多評價，大家領(lǐng)悟吧。
設(shè)計中還值得關(guān)注一點，就是個人主頁中的個性標(biāo)簽，我羅列出22個，當(dāng)用戶發(fā)表三個同類動態(tài)即可點亮一個標(biāo)簽，此標(biāo)簽也會代替文字描述承載動態(tài)內(nèi)容的作用，用戶選擇已點亮 的icon即展示對應(yīng)標(biāo)簽內(nèi)容了，相當(dāng)于動態(tài)中的標(biāo)簽分類，但前提發(fā)表動態(tài)時選擇對應(yīng)你標(biāo)簽，不然發(fā)表后的動態(tài)不能二次修改。這種通過標(biāo)簽點亮的功能也是為了讓用戶UGC內(nèi)容更加多元化，同時也想通過標(biāo)簽來吸引用戶多多發(fā)動態(tài)的。創(chuàng)意點是好的，但是否能達(dá)到好的效果，還是要拭目以待。
相比其他產(chǎn)品，咔咔是我一直關(guān)注的產(chǎn)品，同時也是特別喜歡的產(chǎn)品之一，所以我分享給你們。
設(shè)計師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺，還有好的體驗流程。不要讓用戶思考，這是每個設(shè)計師所追求的。
認(rèn)真記錄產(chǎn)品細(xì)節(jié)，了解背后的思考，也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。
本期產(chǎn)品細(xì)節(jié)分析結(jié)束，點擊原文鏈接查看更多，我們下期再見！
作者：碳水Sir；公眾號：草蓉三石
作者：碳水sir
鏈接：https://www.zcool.com.cn/article/ZMTQwMzM4OA==.html
來源：站酷
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com