这是一个看「脸」的时代，人是，产品更是。没有吸引人的「脸」，用户都不愿多看你一眼，谈何生存？在颜值方面，Misfit 做了一个很好的示范，「科技与时尚」结合的理念融入进了整个产品设计血液，不仅拥有高颜值的硬件产品，对美的洁癖在提现软件上。

我们与 Misfit「跑调」的设计团队聊了聊，硬件公司如何打造自己的 App 与交互设计。很多产品用户不买单，也许不是痛点不够深，而仅仅是因为你的产品丑，体验差而已。

简约至上是宗旨，软硬件优势形成互补

Misfit 作为一家以硬件产品为主的公司，已经发布了 5 款应用，分别是 Misfit App，Misfit Link，Misfit Home，Misfit Cycling 和跑调。前四款产品均服务于 Misfit 的硬件产品，而跑调是 Misfit 针对喜欢跑步的用户推出的纯软件产品。这 5 款应用表面上看每款的视觉和交互风格不一样，但有一点是始终贯穿其中的，那就是「简约」。

用过 Misfit 产品的人就会感觉到，产品功能与设计都非常简约，基本上你会觉得再增加任何的设计和部件都会让产品减分。

Misfit 从第一款产品 Shine 就能感受到「简约」的基调，圆形的纽扣式外观，隐藏的激光打孔，没有过多的设计

对于一家硬件公司如何打磨的 App 方面，团队成员表示，其难点在于如何在软硬件复杂性不断变化的时候仍然要保持产品的简约，聚焦产品的功能是一个突破口。

硬件产品扩展了软件产品的能力，但同时也带来限制与复杂性。这背后牵扯到相应的硬件、固件、蓝牙协议、算法、云端接口+iOS App 和 Android App 等一系列组件和团队。毕竟硬件设计和制造是一个涉及非常长的流程和较复杂的供应链关系，和软件研发相比很不敏捷，较难迭代。在这样的背景下，软件产品设计要解决的主要问题就是在利用硬件有限的能力来带给用户更多的价值，有时甚至还需要利用软件体验来弥补一些当前硬件能力的不足。

交互设计才是留住用户的核心

「一张好看的脸决定用户是否看上你，而好的交互设计将决定用户是否愿意长久在一起。」

对于交互设计的问题，Misfit 「跑调」的设计团队以他们产品作为案例，给我们分享了一些经验。

第一个经验：开始设计之前，花足够的时间思考目标，分析需求，解读场景

用一句话总结了「跑调」这款产品，可变速的跑步音乐播放器，专注于提升跑步过程中细微的音乐体验。得到这一句话的背后是走了不少弯路，不断的砍掉一些无用的功能，加大在体验上提升，应用场景的深入理解。经过了这一过程产品结构就不会过于复杂和庞大，有利于后续在产品设计中把控 App 整体的结构，进而影响到整个交互和视觉的方向。

产品整体方向定了之后，如何落实到具体的项目上呢？整个产品的流程要简单清晰，因为用户是不花时间去思考一个复杂的应用软件的。「跑调」的设计是这样的：

登录注册－音乐能量（推送离线音乐）－跑步－收藏音乐 （整个过程的目的就非常清晰，让用户知道这是做什么）

登录注册

登陆注册是重要一步，可以形成独立的用户行为数据库，从中分析进而更好的改进产品为用户服务。好的登陆注册流程有助于提升产品气质，提高新用户注册率。

从上图我们可以看到，通过对进入 APP 第一屏的区域进行分割：1. 最上方用恰当的短片来帮助用户去感受我们想传递的情感和生活方式；2. 下方构成主要的注册登陆交互区域，突出注册按钮，同时照顾已有账户的用户快速登陆；3. 接入用户基数庞大的社交帐号登入，方便快速登陆，省去注册流程；4. Loading 页面运用产品 logo 形象加强用户印象。可以感受到每一个略带「心机」的小细节设计，背后都有其明确的目的。

轻量化的层次结构，采用全屏卡片式的设计来展现「音乐能量」和「我的收藏」两个主要模块，这样带来的好处有：

1. 版面比较大气，简洁，功能一目了然，相信没人希望在跑步之前看到一个复杂的界面，要开始跑步还需要点击好几下。从应用场景下，深入思考用户行为，从而提升用户体验。

2. 刻意安排的衔接方式，使下方露出的卡片和标题信息引导用户去探索，滑动之后，背景颜色的变化，带动着卡片所承载内容的情绪。

3. 大的卡片面积，能够承载更丰富的信息，有利于后期在视觉上探索更多的形式和玩法。因为在真正的跑步过程中，用户是很少接触到界面的，所以在用户能够看到可交互到的界面希望做到在好用的同时让用户印象深刻。

第二个经验：理清功能层级，统一反馈方式

在一款 App 之中，因功能的不同，会存在许多不同的入口，这些功能之间有着不同的联系，尝试设计不同的反馈方式来表现这种联系，帮助用户更好的去理解产品的整体结构。

跑调主界面

以「跑调」的收藏功能为例，在点击收藏卡片之后，会出现列表界面，在这个界面用户能简单试听和删除自己收藏的歌曲，因为不是一款音乐播放软件，所以这里的功能做得相当克制。卡片和列表，明显是一种主次关系，当点击列表右上角关闭时，用户可以快速回到主界面，因为界面信息及操作的简单，这种主次关系的界面过渡统一为子界面从底部升起，关闭则收回到底部，具有一定的可逆性。

但是当用户点击了卡片上的 PLAY 按钮进入到跑步播放界面时，则相当于进入了另外一个独立的功能模块，这里的信息和交互相较于列表界面要复杂的多，再用从底部升起的过渡方式显得不那么合适，所以点击卡片 PLAY 按钮的界面过渡则统一为从右至左出现。

第三个经验: 善用工具，快速测试

在单个界面的布局和功能都确定了之后，需要把它们串起来，形成一个完整的操作流程。这个时候，工具的利用显得尤为重要，高效的原型搭建能允许你在交互方式上做更多的探索，也利于内部快速测试，确定方案。

  快速搭建高保真原型，提高沟通效率                                                                

提到什么好的交互设计时，「跑调」的团队成员总结了四点：

1.这个设计是否足够有趣；

2.这个设计是否符合直觉；

3.这个设计是否满足需求；

4.这个设计是否足够有效率。

这 4 点并没有绝对的先后顺序，根据不同的功能有着不一样的优先级排序，最重要的是不要顾此失彼。

无论是硬件还是软件，其目的就是给用户带来美好的体验。当你的产品得不到用户的认可，是否该想想是否自己产品在设计与体验上就做得不够好。当一款产品做到「美貌与才华」兼备时，自然会吸引用户，而这背后是需要不断的总结、迭代、创新，以及做好每一个细节，从而带给用户更加的美好体验。

版权声明：本文系深圳湾编辑创作发布，转载请注明来自深圳湾，并标明网站地址 shenzhenware.com
转载、采访、投稿、团队报道联系公众号：shenzhenware