智能家居应用如何做？天猫精灵VS美的美居UI页面设计解析

时间：2023-09-13 15:06:02 | 来源：网站运营

时间：2023-09-13 15:06:02 来源：网站运营

智能家居应用如何做？天猫精灵VS美的美居UI页面设计解析：静电说：智能家居应用的设计是非常注重场景化的，在前一阵子，静电也特别喜欢使用智能产品去操控家里的各种设备，确实会非常方便。今天，咱们就来聊聊两款应用，天猫精灵和美的美居，看看这两款应用的设计优劣，还有哪些可以学习或规避的点。PS.产品和设计本身是关联非常密切的，所以我们会综合两方面进行分析。










001.启动界面-看品牌




启动界面有着重要的作用，它是应用的脸面和品牌展示的重要位置。首先是Slogan，天猫精灵：“我在，你说”。 美的美居：“智慧生活，可以更美的”。可以看出，一个使用了天猫精灵传统的口头禅来作为导语，而美的则在沿用“原来生活可以更美的”这样的经典广告语。通过这样朗朗上口的Slogan，可以帮我们更好的记住这些应用，这也是品牌营销的非常重要的一部分内容。

Tips：在设计应用的时候，从品牌角度考虑，为你的应用塑造Slogan标语，以及一个具有品牌感的LOGO。




002.首页-看定位

左图为天猫精灵的首页，右图为美的美居的首页

作为天猫精灵的老用户，我可以感受到天猫精灵的页面一直一直一直一直在改，而且每次改动作都非常大。所以每一次进去，我的第一感受就是“懵逼”。啊！常用的功能又找不到了，又要去学习了，所以对此真的特别的沮丧。从天猫精灵页面不断的调整，可以隐约的看出，这个应用一直没有找准自己的定位。首页现在塞满了很多内容，下图是天猫精灵的第一屏和第二屏，设计师仿佛要把所有内容都塞到这个页面中，甚至下方还有今日热点的新闻。




而设备管理则是需要进行下拉操作才能进行，且这个交互效果藏的非常深，在半个屏幕之间设计出这样一个下拉，虽然有文字提示，但个人觉得真的不是一个好选择，因为单纯来看，这个页面的模块是一个层次上的，并没有任何下拉的心理暗示。

天猫精灵的设备管理交互方式，emmmm

而再对比美的美居的页面，美的美居则倾向于把产品当作一个场景化使用的工具，注重用户第一时间去操控产品。而天猫精灵则倾向于把他的音箱产品做成一个内容分发中心。所以，这就导致了我用天猫精灵来设置的一整套智能家居系统在这个应用上操作非常不方便。比如，我想设置一个场景，或者一个指令，或者就是单纯的想用手机关个灯，就需要找半天。内容太多且频繁改版导致用户迷惑其中，有点崩溃。

所以，设计师和产品经理，要想清楚你的产品定位到底是什么？就像天猫精灵APP，也许主推内容，这就是你的定位，我无话可说，但是今后不会再使用天猫精灵当作家庭控制中枢了，毕竟场景跟我需要的不一致。




003.视觉设计-品牌定位

天猫精灵在这次改版中使用了大量流行的毛玻璃效果，加上轻盈的蓝紫色底色，毕竟符合流行趋势，但是我一直不太清楚，天猫精灵这个产品的品牌主视觉到底是什么？也许就是跟着流行趋势一路跟到底吧？ 导致我对这个音响类产品一直没有很深的印象。




美的美居则一直沿用其偏蓝色的主色设计，视觉锤逐渐钉在了用户心中。所以，有时候太过于跟流行=没有主见和个性？




天猫精灵页面

天猫精灵页面天猫精灵在不同的频道使用了不同的颜色，而且天猫精灵一直都在去推它的内容，对于设备和场景化的管理反而真的比较弱，个人感觉，拿出一个主菜单来进行设备管理非常必要，然而这个最基本的需求反而需要用下拉解决，非常不便。




而“我的”页面又出现了大量的内容入口，我只想说，除了眼花缭乱之外，我已经完全迷失在这一堆堆的繁杂入口中。

美的美居页面

美的美居页面

美的美居的页面则对场景模块进行了单独划分，虽然也有内发现和商城模块，但是整体感觉更加清晰，且模块之间也可以形成有效的关联，所有的内容都在为“智能家居”产品的功能来服务。而视觉设计上，美的美居的设计采用纯白色背景，整体更加清爽易读。




004.总结

首先从产品角度上来说，这两款产品的定位有很大的差异。一个是期望打造一个生态产品，但是又希望揉进去更多的内容。个人感觉，天猫精灵的杂乱程度和改版频度之高让我这个用户无法适应。而美的美居则注重于自家产品形成有机的关联，更加专注。




当然，天猫精灵的设计更精致，细节更好，当然，这仅仅是从视觉本身的层面来看。但是，如我刚才所说，如果内容本身规划都成为问题，那视觉设计本身也无能为力。

少即是多，能把一个复杂产品做到好用精简是一件很难的事情，大道至简嘛。另外，专注场景，还是专注提供内容，亦或其它，让用户能找到他的高频使用的场景是至关重要的，否则，这个应用，我一次都不想打开了。反而得不偿失。




各位设计师小伙伴，也可以学着从不同的产品中找到个其各自的定位，更好的梳理产品内容，再进行更好的整合与设计。




在12月开课的《静电的UI设计教室》课程中，我们会从视觉，交互等多个层面对产品和设计的关系作出讲解。让设计师做出更符合市场和用户需求，让面试官更满意的设计作品来。产品和设计的关联越来越紧密，设计师要真正提升我们的设计和思维能力，以不变应万变。




原文：