這是一個(gè)看「臉」的時(shí)代贤笆，人是，產(chǎn)品更是讨阻。沒(méi)有吸引人的「臉」芥永，用戶都不愿多看你一眼，談何生存钝吮？在顏值方面埋涧，Misfit 做了一個(gè)很好的示范，「科技與時(shí)尚」結(jié)合的理念融入進(jìn)了整個(gè)產(chǎn)品設(shè)計(jì)血液奇瘦，不僅擁有高顏值的硬件產(chǎn)品棘催，對(duì)美的潔癖在提現(xiàn)軟件上。

我們與 Misfit「跑調(diào)」的設(shè)計(jì)團(tuán)隊(duì)聊了聊耳标，硬件公司如何打造自己的 App 與交互設(shè)計(jì)醇坝。很多產(chǎn)品用戶不買單，也許不是痛點(diǎn)不夠深次坡，而僅僅是因?yàn)槟愕漠a(chǎn)品丑呼猪，體驗(yàn)差而已呀袱。

簡(jiǎn)約至上是宗旨，軟硬件優(yōu)勢(shì)形成互補(bǔ)

Misfit 作為一家以硬件產(chǎn)品為主的公司郑叠，已經(jīng)發(fā)布了 5 款應(yīng)用，分別是 Misfit App明棍，Misfit Link乡革，Misfit Home，Misfit Cycling 和跑調(diào)摊腋。前四款產(chǎn)品均服務(wù)于 Misfit 的硬件產(chǎn)品沸版，而跑調(diào)是 Misfit 針對(duì)喜歡跑步的用戶推出的純軟件產(chǎn)品。這 5 款應(yīng)用表面上看每款的視覺(jué)和交互風(fēng)格不一樣兴蒸，但有一點(diǎn)是始終貫穿其中的视粮，那就是「簡(jiǎn)約」。

用過(guò) Misfit 產(chǎn)品的人就會(huì)感覺(jué)到橙凳，產(chǎn)品功能與設(shè)計(jì)都非常簡(jiǎn)約蕾殴，基本上你會(huì)覺(jué)得再增加任何的設(shè)計(jì)和部件都會(huì)讓產(chǎn)品減分。

Misfit 從第一款產(chǎn)品 Shine 就能感受到「簡(jiǎn)約」的基調(diào)岛啸，圓形的紐扣式外觀钓觉，隱藏的激光打孔，沒(méi)有過(guò)多的設(shè)計(jì)

對(duì)于一家硬件公司如何打磨的 App 方面坚踩，團(tuán)隊(duì)成員表示荡灾，其難點(diǎn)在于如何在軟硬件復(fù)雜性不斷變化的時(shí)候仍然要保持產(chǎn)品的簡(jiǎn)約，聚焦產(chǎn)品的功能是一個(gè)突破口瞬铸。

硬件產(chǎn)品擴(kuò)展了軟件產(chǎn)品的能力批幌，但同時(shí)也帶來(lái)限制與復(fù)雜性。這背后牽扯到相應(yīng)的硬件嗓节、固件荧缘、藍(lán)牙協(xié)議、算法赦政、云端接口+iOS App 和 Android App 等一系列組件和團(tuán)隊(duì)胜宇。畢竟硬件設(shè)計(jì)和制造是一個(gè)涉及非常長(zhǎng)的流程和較復(fù)雜的供應(yīng)鏈關(guān)系，和軟件研發(fā)相比很不敏捷恢着，較難迭代桐愉。在這樣的背景下，軟件產(chǎn)品設(shè)計(jì)要解決的主要問(wèn)題就是在利用硬件有限的能力來(lái)帶給用戶更多的價(jià)值掰派，有時(shí)甚至還需要利用軟件體驗(yàn)來(lái)彌補(bǔ)一些當(dāng)前硬件能力的不足从诲。

交互設(shè)計(jì)才是留住用戶的核心

「一張好看的臉決定用戶是否看上你，而好的交互設(shè)計(jì)將決定用戶是否愿意長(zhǎng)久在一起靡羡∠德澹」

對(duì)于交互設(shè)計(jì)的問(wèn)題俊性，Misfit 「跑調(diào)」的設(shè)計(jì)團(tuán)隊(duì)以他們產(chǎn)品作為案例，給我們分享了一些經(jīng)驗(yàn)描扯。

第一個(gè)經(jīng)驗(yàn)：開(kāi)始設(shè)計(jì)之前定页，花足夠的時(shí)間思考目標(biāo)，分析需求绽诚，解讀場(chǎng)景

用一句話總結(jié)了「跑調(diào)」這款產(chǎn)品典徊，可變速的跑步音樂(lè)播放器，專注于提升跑步過(guò)程中細(xì)微的音樂(lè)體驗(yàn)恩够。得到這一句話的背后是走了不少?gòu)澛纷渎洌粩嗟目车粢恍o(wú)用的功能，加大在體驗(yàn)上提升蜂桶，應(yīng)用場(chǎng)景的深入理解儡毕。經(jīng)過(guò)了這一過(guò)程產(chǎn)品結(jié)構(gòu)就不會(huì)過(guò)于復(fù)雜和龐大，有利于后續(xù)在產(chǎn)品設(shè)計(jì)中把控 App 整體的結(jié)構(gòu)扑媚，進(jìn)而影響到整個(gè)交互和視覺(jué)的方向腰湾。

產(chǎn)品整體方向定了之后，如何落實(shí)到具體的項(xiàng)目上呢钦购？整個(gè)產(chǎn)品的流程要簡(jiǎn)單清晰檐盟，因?yàn)橛脩羰遣换〞r(shí)間去思考一個(gè)復(fù)雜的應(yīng)用軟件的⊙禾遥「跑調(diào)」的設(shè)計(jì)是這樣的：

登錄注冊(cè)－音樂(lè)能量（推送離線音樂(lè)）－跑步－收藏音樂(lè) （整個(gè)過(guò)程的目的就非常清晰葵萎，讓用戶知道這是做什么）

登錄注冊(cè)

登陸注冊(cè)是重要一步，可以形成獨(dú)立的用戶行為數(shù)據(jù)庫(kù)唱凯，從中分析進(jìn)而更好的改進(jìn)產(chǎn)品為用戶服務(wù)羡忘。好的登陸注冊(cè)流程有助于提升產(chǎn)品氣質(zhì)，提高新用戶注冊(cè)率磕昼。

從上圖我們可以看到卷雕，通過(guò)對(duì)進(jìn)入 APP 第一屏的區(qū)域進(jìn)行分割：1. 最上方用恰當(dāng)?shù)亩唐瑏?lái)幫助用戶去感受我們想傳遞的情感和生活方式；2. 下方構(gòu)成主要的注冊(cè)登陸交互區(qū)域票从，突出注冊(cè)按鈕漫雕，同時(shí)照顧已有賬戶的用戶快速登陸；3. 接入用戶基數(shù)龐大的社交帳號(hào)登入峰鄙，方便快速登陸浸间，省去注冊(cè)流程；4. Loading 頁(yè)面運(yùn)用產(chǎn)品 logo 形象加強(qiáng)用戶印象吟榴】猓可以感受到每一個(gè)略帶「心機(jī)」的小細(xì)節(jié)設(shè)計(jì)，背后都有其明確的目的。

輕量化的層次結(jié)構(gòu)兜看，采用全屏卡片式的設(shè)計(jì)來(lái)展現(xiàn)「音樂(lè)能量」和「我的收藏」兩個(gè)主要模塊锥咸，這樣帶來(lái)的好處有：

1. 版面比較大氣，簡(jiǎn)潔细移，功能一目了然搏予，相信沒(méi)人希望在跑步之前看到一個(gè)復(fù)雜的界面，要開(kāi)始跑步還需要點(diǎn)擊好幾下弧轧。從應(yīng)用場(chǎng)景下缔刹，深入思考用戶行為，從而提升用戶體驗(yàn)劣针。

2. 刻意安排的銜接方式，使下方露出的卡片和標(biāo)題信息引導(dǎo)用戶去探索亿扁，滑動(dòng)之后捺典，背景顏色的變化，帶動(dòng)著卡片所承載內(nèi)容的情緒从祝。

3. 大的卡片面積襟己，能夠承載更豐富的信息，有利于后期在視覺(jué)上探索更多的形式和玩法牍陌。因?yàn)樵谡嬲呐懿竭^(guò)程中擎浴，用戶是很少接觸到界面的，所以在用戶能夠看到可交互到的界面希望做到在好用的同時(shí)讓用戶印象深刻毒涧。

第二個(gè)經(jīng)驗(yàn)：理清功能層級(jí)贮预，統(tǒng)一反饋方式

在一款 App 之中，因功能的不同契讲，會(huì)存在許多不同的入口仿吞，這些功能之間有著不同的聯(lián)系，嘗試設(shè)計(jì)不同的反饋方式來(lái)表現(xiàn)這種聯(lián)系捡偏，幫助用戶更好的去理解產(chǎn)品的整體結(jié)構(gòu)唤冈。

跑調(diào)主界面

以「跑調(diào)」的收藏功能為例，在點(diǎn)擊收藏卡片之后银伟，會(huì)出現(xiàn)列表界面你虹，在這個(gè)界面用戶能簡(jiǎn)單試聽(tīng)和刪除自己收藏的歌曲，因?yàn)椴皇且豢钜魳?lè)播放軟件彤避，所以這里的功能做得相當(dāng)克制傅物。卡片和列表忠藤，明顯是一種主次關(guān)系挟伙，當(dāng)點(diǎn)擊列表右上角關(guān)閉時(shí)，用戶可以快速回到主界面，因?yàn)榻缑嫘畔⒓安僮鞯暮?jiǎn)單尖阔，這種主次關(guān)系的界面過(guò)渡統(tǒng)一為子界面從底部升起贮缅，關(guān)閉則收回到底部撞牢，具有一定的可逆性懈词。

但是當(dāng)用戶點(diǎn)擊了卡片上的 PLAY 按鈕進(jìn)入到跑步播放界面時(shí)，則相當(dāng)于進(jìn)入了另外一個(gè)獨(dú)立的功能模塊佣渴，這里的信息和交互相較于列表界面要復(fù)雜的多齿坷，再用從底部升起的過(guò)渡方式顯得不那么合適桂肌，所以點(diǎn)擊卡片 PLAY 按鈕的界面過(guò)渡則統(tǒng)一為從右至左出現(xiàn)。

第三個(gè)經(jīng)驗(yàn): 善用工具永淌，快速測(cè)試

在單個(gè)界面的布局和功能都確定了之后崎场，需要把它們串起來(lái)，形成一個(gè)完整的操作流程遂蛀。這個(gè)時(shí)候谭跨，工具的利用顯得尤為重要，高效的原型搭建能允許你在交互方式上做更多的探索李滴，也利于內(nèi)部快速測(cè)試螃宙，確定方案。

  快速搭建高保真原型所坯，提高溝通效率                                                                

提到什么好的交互設(shè)計(jì)時(shí)谆扎，「跑調(diào)」的團(tuán)隊(duì)成員總結(jié)了四點(diǎn)：

1.這個(gè)設(shè)計(jì)是否足夠有趣；

2.這個(gè)設(shè)計(jì)是否符合直覺(jué)芹助；

3.這個(gè)設(shè)計(jì)是否滿足需求堂湖；

4.這個(gè)設(shè)計(jì)是否足夠有效率。

這 4 點(diǎn)并沒(méi)有絕對(duì)的先后順序状土，根據(jù)不同的功能有著不一樣的優(yōu)先級(jí)排序苗缩，最重要的是不要顧此失彼。

無(wú)論是硬件還是軟件声诸，其目的就是給用戶帶來(lái)美好的體驗(yàn)酱讶。當(dāng)你的產(chǎn)品得不到用戶的認(rèn)可，是否該想想是否自己產(chǎn)品在設(shè)計(jì)與體驗(yàn)上就做得不夠好彼乌。當(dāng)一款產(chǎn)品做到「美貌與才華」兼?zhèn)鋾r(shí)泻肯，自然會(huì)吸引用戶，而這背后是需要不斷的總結(jié)慰照、迭代灶挟、創(chuàng)新，以及做好每一個(gè)細(xì)節(jié)毒租，從而帶給用戶更加的美好體驗(yàn)稚铣。

版權(quán)聲明：本文系深圳灣編輯創(chuàng)作發(fā)布，轉(zhuǎn)載請(qǐng)注明來(lái)自深圳灣，并標(biāo)明網(wǎng)站地址 shenzhenware.com
轉(zhuǎn)載惕医、采訪耕漱、投稿、團(tuán)隊(duì)報(bào)道聯(lián)系公眾號(hào)：shenzhenware