智能家居應(yīng)用如何做？天貓精靈VS美的美居UI頁(yè)面設(shè)計(jì)解析

時(shí)間：2023-09-13 15:06:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-13 15:06:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

智能家居應(yīng)用如何做？天貓精靈VS美的美居UI頁(yè)面設(shè)計(jì)解析：靜電說(shuō)：智能家居應(yīng)用的設(shè)計(jì)是非常注重場(chǎng)景化的，在前一陣子，靜電也特別喜歡使用智能產(chǎn)品去操控家里的各種設(shè)備，確實(shí)會(huì)非常方便。今天，咱們就來(lái)聊聊兩款應(yīng)用，天貓精靈和美的美居，看看這兩款應(yīng)用的設(shè)計(jì)優(yōu)劣，還有哪些可以學(xué)習(xí)或規(guī)避的點(diǎn)。PS.產(chǎn)品和設(shè)計(jì)本身是關(guān)聯(lián)非常密切的，所以我們會(huì)綜合兩方面進(jìn)行分析。










001.啟動(dòng)界面-看品牌




啟動(dòng)界面有著重要的作用，它是應(yīng)用的臉面和品牌展示的重要位置。首先是Slogan，天貓精靈：“我在，你說(shuō)”。 美的美居：“智慧生活，可以更美的”?？梢钥闯?，一個(gè)使用了天貓精靈傳統(tǒng)的口頭禪來(lái)作為導(dǎo)語(yǔ)，而美的則在沿用“原來(lái)生活可以更美的”這樣的經(jīng)典廣告語(yǔ)。通過(guò)這樣朗朗上口的Slogan，可以幫我們更好的記住這些應(yīng)用，這也是品牌營(yíng)銷的非常重要的一部分內(nèi)容。

Tips：在設(shè)計(jì)應(yīng)用的時(shí)候，從品牌角度考慮，為你的應(yīng)用塑造Slogan標(biāo)語(yǔ)，以及一個(gè)具有品牌感的LOGO。




002.首頁(yè)-看定位

左圖為天貓精靈的首頁(yè)，右圖為美的美居的首頁(yè)

作為天貓精靈的老用戶，我可以感受到天貓精靈的頁(yè)面一直一直一直一直在改，而且每次改動(dòng)作都非常大。所以每一次進(jìn)去，我的第一感受就是“懵逼”。??！常用的功能又找不到了，又要去學(xué)習(xí)了，所以對(duì)此真的特別的沮喪。從天貓精靈頁(yè)面不斷的調(diào)整，可以隱約的看出，這個(gè)應(yīng)用一直沒(méi)有找準(zhǔn)自己的定位。首頁(yè)現(xiàn)在塞滿了很多內(nèi)容，下圖是天貓精靈的第一屏和第二屏，設(shè)計(jì)師仿佛要把所有內(nèi)容都塞到這個(gè)頁(yè)面中，甚至下方還有今日熱點(diǎn)的新聞。




而設(shè)備管理則是需要進(jìn)行下拉操作才能進(jìn)行，且這個(gè)交互效果藏的非常深，在半個(gè)屏幕之間設(shè)計(jì)出這樣一個(gè)下拉，雖然有文字提示，但個(gè)人覺(jué)得真的不是一個(gè)好選擇，因?yàn)閱渭儊?lái)看，這個(gè)頁(yè)面的模塊是一個(gè)層次上的，并沒(méi)有任何下拉的心理暗示。

天貓精靈的設(shè)備管理交互方式，emmmm

而再對(duì)比美的美居的頁(yè)面，美的美居則傾向于把產(chǎn)品當(dāng)作一個(gè)場(chǎng)景化使用的工具，注重用戶第一時(shí)間去操控產(chǎn)品。而天貓精靈則傾向于把他的音箱產(chǎn)品做成一個(gè)內(nèi)容分發(fā)中心。所以，這就導(dǎo)致了我用天貓精靈來(lái)設(shè)置的一整套智能家居系統(tǒng)在這個(gè)應(yīng)用上操作非常不方便。比如，我想設(shè)置一個(gè)場(chǎng)景，或者一個(gè)指令，或者就是單純的想用手機(jī)關(guān)個(gè)燈，就需要找半天。內(nèi)容太多且頻繁改版導(dǎo)致用戶迷惑其中，有點(diǎn)崩潰。

所以，設(shè)計(jì)師和產(chǎn)品經(jīng)理，要想清楚你的產(chǎn)品定位到底是什么？就像天貓精靈APP，也許主推內(nèi)容，這就是你的定位，我無(wú)話可說(shuō)，但是今后不會(huì)再使用天貓精靈當(dāng)作家庭控制中樞了，畢竟場(chǎng)景跟我需要的不一致。




003.視覺(jué)設(shè)計(jì)-品牌定位

天貓精靈在這次改版中使用了大量流行的毛玻璃效果，加上輕盈的藍(lán)紫色底色，畢竟符合流行趨勢(shì)，但是我一直不太清楚，天貓精靈這個(gè)產(chǎn)品的品牌主視覺(jué)到底是什么？也許就是跟著流行趨勢(shì)一路跟到底吧？ 導(dǎo)致我對(duì)這個(gè)音響類產(chǎn)品一直沒(méi)有很深的印象。




美的美居則一直沿用其偏藍(lán)色的主色設(shè)計(jì)，視覺(jué)錘逐漸釘在了用戶心中。所以，有時(shí)候太過(guò)于跟流行=沒(méi)有主見(jiàn)和個(gè)性？




天貓精靈頁(yè)面

天貓精靈頁(yè)面天貓精靈在不同的頻道使用了不同的顏色，而且天貓精靈一直都在去推它的內(nèi)容，對(duì)于設(shè)備和場(chǎng)景化的管理反而真的比較弱，個(gè)人感覺(jué)，拿出一個(gè)主菜單來(lái)進(jìn)行設(shè)備管理非常必要，然而這個(gè)最基本的需求反而需要用下拉解決，非常不便。




而“我的”頁(yè)面又出現(xiàn)了大量的內(nèi)容入口，我只想說(shuō)，除了眼花繚亂之外，我已經(jīng)完全迷失在這一堆堆的繁雜入口中。

美的美居頁(yè)面

美的美居頁(yè)面

美的美居的頁(yè)面則對(duì)場(chǎng)景模塊進(jìn)行了單獨(dú)劃分，雖然也有內(nèi)發(fā)現(xiàn)和商城模塊，但是整體感覺(jué)更加清晰，且模塊之間也可以形成有效的關(guān)聯(lián)，所有的內(nèi)容都在為“智能家居”產(chǎn)品的功能來(lái)服務(wù)。而視覺(jué)設(shè)計(jì)上，美的美居的設(shè)計(jì)采用純白色背景，整體更加清爽易讀。




004.總結(jié)

首先從產(chǎn)品角度上來(lái)說(shuō)，這兩款產(chǎn)品的定位有很大的差異。一個(gè)是期望打造一個(gè)生態(tài)產(chǎn)品，但是又希望揉進(jìn)去更多的內(nèi)容。個(gè)人感覺(jué)，天貓精靈的雜亂程度和改版頻度之高讓我這個(gè)用戶無(wú)法適應(yīng)。而美的美居則注重于自家產(chǎn)品形成有機(jī)的關(guān)聯(lián)，更加專注。




當(dāng)然，天貓精靈的設(shè)計(jì)更精致，細(xì)節(jié)更好，當(dāng)然，這僅僅是從視覺(jué)本身的層面來(lái)看。但是，如我剛才所說(shuō)，如果內(nèi)容本身規(guī)劃都成為問(wèn)題，那視覺(jué)設(shè)計(jì)本身也無(wú)能為力。

少即是多，能把一個(gè)復(fù)雜產(chǎn)品做到好用精簡(jiǎn)是一件很難的事情，大道至簡(jiǎn)嘛。另外，專注場(chǎng)景，還是專注提供內(nèi)容，亦或其它，讓用戶能找到他的高頻使用的場(chǎng)景是至關(guān)重要的，否則，這個(gè)應(yīng)用，我一次都不想打開了。反而得不償失。




各位設(shè)計(jì)師小伙伴，也可以學(xué)著從不同的產(chǎn)品中找到個(gè)其各自的定位，更好的梳理產(chǎn)品內(nèi)容，再進(jìn)行更好的整合與設(shè)計(jì)。




在12月開課的《靜電的UI設(shè)計(jì)教室》課程中，我們會(huì)從視覺(jué)，交互等多個(gè)層面對(duì)產(chǎn)品和設(shè)計(jì)的關(guān)系作出講解。讓設(shè)計(jì)師做出更符合市場(chǎng)和用戶需求，讓面試官更滿意的設(shè)計(jì)作品來(lái)。產(chǎn)品和設(shè)計(jì)的關(guān)聯(lián)越來(lái)越緊密，設(shè)計(jì)師要真正提升我們的設(shè)計(jì)和思維能力，以不變應(yīng)萬(wàn)變。




原文：