我參加了一場時尚發(fā)布會,發(fā)現(xiàn)可穿戴是否與科技有關(guān)已經(jīng)不那么重要了

做 APP 比做硬件還難?Misfit 設(shè)計師談軟件交互思路
沒有一個好的顏值,用戶不會注意你,沒有一個好的體驗,用戶不會長久和你在一起,這就是現(xiàn)實
這是一個看「臉」的時代,人是,產(chǎn)品更是。沒有吸引人的「臉」,用戶都不愿多看你一眼,談何生存?在顏值方面,Misfit 做了一個很好的示范,「科技與時尚」結(jié)合的理念融入進(jìn)了整個產(chǎn)品設(shè)計血液,不僅擁有高顏值的硬件產(chǎn)品,對美的潔癖在提現(xiàn)軟件上。
我們與 Misfit「跑調(diào)」的設(shè)計團隊聊了聊,硬件公司如何打造自己的 App 與交互設(shè)計。很多產(chǎn)品用戶不買單,也許不是痛點不夠深,而僅僅是因為你的產(chǎn)品丑,體驗差而已。
簡約至上是宗旨,軟硬件優(yōu)勢形成互補
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 針對喜歡跑步的用戶推出的純軟件產(chǎn)品。這 5 款應(yīng)用表面上看每款的視覺和交互風(fēng)格不一樣,但有一點是始終貫穿其中的,那就是「簡約」。
用過 Misfit 產(chǎn)品的人就會感覺到,產(chǎn)品功能與設(shè)計都非常簡約,基本上你會覺得再增加任何的設(shè)計和部件都會讓產(chǎn)品減分。

Misfit 從第一款產(chǎn)品 Shine 就能感受到「簡約」的基調(diào),圓形的紐扣式外觀,隱藏的激光打孔,沒有過多的設(shè)計
對于一家硬件公司如何打磨的 App 方面,團隊成員表示,其難點在于如何在軟硬件復(fù)雜性不斷變化的時候仍然要保持產(chǎn)品的簡約,聚焦產(chǎn)品的功能是一個突破口。
硬件產(chǎn)品擴展了軟件產(chǎn)品的能力,但同時也帶來限制與復(fù)雜性。這背后牽扯到相應(yīng)的硬件、固件、藍(lán)牙協(xié)議、算法、云端接口+iOS App 和 Android App 等一系列組件和團隊。畢竟硬件設(shè)計和制造是一個涉及非常長的流程和較復(fù)雜的供應(yīng)鏈關(guān)系,和軟件研發(fā)相比很不敏捷,較難迭代。在這樣的背景下,軟件產(chǎn)品設(shè)計要解決的主要問題就是在利用硬件有限的能力來帶給用戶更多的價值,有時甚至還需要利用軟件體驗來彌補一些當(dāng)前硬件能力的不足。
交互設(shè)計才是留住用戶的核心
「一張好看的臉決定用戶是否看上你,而好的交互設(shè)計將決定用戶是否愿意長久在一起。」
對于交互設(shè)計的問題,Misfit 「跑調(diào)」的設(shè)計團隊以他們產(chǎn)品作為案例,給我們分享了一些經(jīng)驗。
第一個經(jīng)驗:開始設(shè)計之前,花足夠的時間思考目標(biāo),分析需求,解讀場景
用一句話總結(jié)了「跑調(diào)」這款產(chǎn)品,可變速的跑步音樂播放器,專注于提升跑步過程中細(xì)微的音樂體驗。得到這一句話的背后是走了不少彎路,不斷的砍掉一些無用的功能,加大在體驗上提升,應(yīng)用場景的深入理解。經(jīng)過了這一過程產(chǎn)品結(jié)構(gòu)就不會過于復(fù)雜和龐大,有利于后續(xù)在產(chǎn)品設(shè)計中把控 App 整體的結(jié)構(gòu),進(jìn)而影響到整個交互和視覺的方向。
產(chǎn)品整體方向定了之后,如何落實到具體的項目上呢?整個產(chǎn)品的流程要簡單清晰,因為用戶是不花時間去思考一個復(fù)雜的應(yīng)用軟件的。「跑調(diào)」的設(shè)計是這樣的:
登錄注冊-音樂能量(推送離線音樂)-跑步-收藏音樂 (整個過程的目的就非常清晰,讓用戶知道這是做什么)
登錄注冊

登陸注冊是重要一步,可以形成獨立的用戶行為數(shù)據(jù)庫,從中分析進(jìn)而更好的改進(jìn)產(chǎn)品為用戶服務(wù)。好的登陸注冊流程有助于提升產(chǎn)品氣質(zhì),提高新用戶注冊率。
從上圖我們可以看到,通過對進(jìn)入 APP 第一屏的區(qū)域進(jìn)行分割:1. 最上方用恰當(dāng)?shù)亩唐瑏韼椭脩羧ジ惺芪覀兿雮鬟f的情感和生活方式;2. 下方構(gòu)成主要的注冊登陸交互區(qū)域,突出注冊按鈕,同時照顧已有賬戶的用戶快速登陸;3. 接入用戶基數(shù)龐大的社交帳號登入,方便快速登陸,省去注冊流程;4. Loading 頁面運用產(chǎn)品 logo 形象加強用戶印象。可以感受到每一個略帶「心機」的小細(xì)節(jié)設(shè)計,背后都有其明確的目的。

輕量化的層次結(jié)構(gòu),采用全屏卡片式的設(shè)計來展現(xiàn)「音樂能量」和「我的收藏」兩個主要模塊,這樣帶來的好處有:
1. 版面比較大氣,簡潔,功能一目了然,相信沒人希望在跑步之前看到一個復(fù)雜的界面,要開始跑步還需要點擊好幾下。從應(yīng)用場景下,深入思考用戶行為,從而提升用戶體驗。
2. 刻意安排的銜接方式,使下方露出的卡片和標(biāo)題信息引導(dǎo)用戶去探索,滑動之后,背景顏色的變化,帶動著卡片所承載內(nèi)容的情緒。
3. 大的卡片面積,能夠承載更豐富的信息,有利于后期在視覺上探索更多的形式和玩法。因為在真正的跑步過程中,用戶是很少接觸到界面的,所以在用戶能夠看到可交互到的界面希望做到在好用的同時讓用戶印象深刻。
第二個經(jīng)驗:理清功能層級,統(tǒng)一反饋方式
在一款 App 之中,因功能的不同,會存在許多不同的入口,這些功能之間有著不同的聯(lián)系,嘗試設(shè)計不同的反饋方式來表現(xiàn)這種聯(lián)系,幫助用戶更好的去理解產(chǎn)品的整體結(jié)構(gòu)。

跑調(diào)主界面
以「跑調(diào)」的收藏功能為例,在點擊收藏卡片之后,會出現(xiàn)列表界面,在這個界面用戶能簡單試聽和刪除自己收藏的歌曲,因為不是一款音樂播放軟件,所以這里的功能做得相當(dāng)克制。卡片和列表,明顯是一種主次關(guān)系,當(dāng)點擊列表右上角關(guān)閉時,用戶可以快速回到主界面,因為界面信息及操作的簡單,這種主次關(guān)系的界面過渡統(tǒng)一為子界面從底部升起,關(guān)閉則收回到底部,具有一定的可逆性。
但是當(dāng)用戶點擊了卡片上的 PLAY 按鈕進(jìn)入到跑步播放界面時,則相當(dāng)于進(jìn)入了另外一個獨立的功能模塊,這里的信息和交互相較于列表界面要復(fù)雜的多,再用從底部升起的過渡方式顯得不那么合適,所以點擊卡片 PLAY 按鈕的界面過渡則統(tǒng)一為從右至左出現(xiàn)。
第三個經(jīng)驗: 善用工具,快速測試
在單個界面的布局和功能都確定了之后,需要把它們串起來,形成一個完整的操作流程。這個時候,工具的利用顯得尤為重要,高效的原型搭建能允許你在交互方式上做更多的探索,也利于內(nèi)部快速測試,確定方案。

快速搭建高保真原型,提高溝通效率
提到什么好的交互設(shè)計時,「跑調(diào)」的團隊成員總結(jié)了四點:
1.這個設(shè)計是否足夠有趣;
2.這個設(shè)計是否符合直覺;
3.這個設(shè)計是否滿足需求;
4.這個設(shè)計是否足夠有效率。
這 4 點并沒有絕對的先后順序,根據(jù)不同的功能有著不一樣的優(yōu)先級排序,最重要的是不要顧此失彼。
無論是硬件還是軟件,其目的就是給用戶帶來美好的體驗。當(dāng)你的產(chǎn)品得不到用戶的認(rèn)可,是否該想想是否自己產(chǎn)品在設(shè)計與體驗上就做得不夠好。當(dāng)一款產(chǎn)品做到「美貌與才華」兼?zhèn)鋾r,自然會吸引用戶,而這背后是需要不斷的總結(jié)、迭代、創(chuàng)新,以及做好每一個細(xì)節(jié),從而帶給用戶更加的美好體驗。