做 APP 比做硬體還難？Misfit 設計師談軟體交互思路

作者：柳雪 來源：深圳灣（shenzhenware)

這是一個看「臉」的時代，人是，產品更是。沒有吸引人的「臉」，用戶都不願多看你一眼，談何生存？在顏值方面，Misfit 做了一個很好的示範，「科技與時尚」結合的理念融入進了整個產品設計血液，不僅擁有高顏值的硬體產品，對美的潔癖在提現軟體上。

我們與 Misfit「跑調」的設計團隊聊了聊，硬體公司如何打造自己的 App 與交互設計。很多產品用戶不買單，也許不是痛點不夠深，而僅僅是因為你的產品丑，體驗差而已。

簡約至上是宗旨，軟硬體優勢形成互補

Misfit 作為一家以硬體產品為主的公司，已經發布了 5 款應用，分別是 Misfit App，Misfit Link，Misfit Home，Misfit Cycling 和跑調。前四款產品均服務於 Misfit 的硬體產品，而跑調是 Misfit 針對喜歡跑步的用戶推出的純軟體產品。這 5 款應用表面上看每款的視覺和交互風格不一樣，但有一點是始終貫穿其中的，那就是「簡約」。

用過 Misfit 產品的人就會感覺到，產品功能與設計都非常簡約，基本上你會覺得再增加任何的設計和部件都會讓產品減分。

Misfit 從第一款產品 Shine 就能感受到「簡約」的基調，圓形的紐扣式外觀，隱藏的激光打孔，沒有過多的設計

對於一家硬體公司如何打磨的 App 方面，Misfit 認為，難點在於如何在軟硬體複雜性不斷變化的時候仍然要保持產品的簡約，聚焦產品的功能是突破口。

硬體產品擴展了軟體產品的能力，但同時也帶來限制與複雜性。這背後牽扯到相應的硬體、固件、協議、演算法、雲端介面與 iOS App 和 Android App 對接等一系列組件以及對應的開發團隊。畢竟硬體設計和製造是一個非常長的流程和較複雜的供應鏈體系，和軟體研發相比很不敏捷，較難迭代。在這樣的背景下，軟體產品設計要解決的主要問題就是利用硬體有限的能力來帶給用戶更多的價值，有時甚至還需要利用軟體體驗來彌補一些當前硬體能力的不足。

交互設計才是留住用戶的核心

「一張好看的臉決定用戶是否看上你，而好的交互設計將決定用戶是否願意長久在一起。」

對於交互設計的問題，Misfit 「跑調」的設計團隊以他們產品作為案例，給我們分享了一些經驗。

第一個經驗：開始設計之前，花足夠的時間思考目標，分析需求，解讀場景

用一句話總結「跑調」這款產品是：可變速的跑步音樂播放器，專註於提升跑步過程中細微的音樂體驗。得到這一句話的背後 Misfit 走了不少彎路，不斷的砍掉一些無用的功能，加大在體驗上提升，加深對應用場景的理解。經過了這一過程之後，產品結構就不會過於複雜和龐大，有利於後續在產品設計中把控 App 的整體結構，進而影響到整個交互和視覺的方向。

產品整體方向定了之後，如何落實到具體的項目上呢？整個產品的流程要簡單清晰，因為用戶是不會花時間去思考一個複雜的應用軟體的。「跑調」的設計邏輯是這樣的：

登錄註冊－音樂能量（推送離線音樂）－跑步－收藏音樂 （整個過程的目的就非常清晰，讓用戶知道這是做什麼）。

登陸註冊是重要一步，可以形成獨立的用戶行為資料庫，從中分析進而更好的改進產品為用戶服務。好的登陸註冊流程有助於提升產品氣質，提高新用戶註冊率。

從上圖我們可以看到，通過對進入 APP 第一屏的區域進行分割：最上方用恰當的短片來幫助用戶去感受我們想傳遞的情感和生活方式；下方構成主要的註冊登陸交互區域，突出註冊按鈕，同時照顧已有賬戶的用戶快速登陸；接入用戶基數龐大的社交帳號登入，方便快速登陸，省去註冊流程；Loading 頁面運用產品 logo 形象加強用戶印象。可以感受到每一個略帶「心機」的小細節設計，背後都有其明確的目的。

輕量化的層次結構，採用全屏卡片式的設計來展現「音樂能量」和「我的收藏」兩個主要模塊，這樣帶來的好處有：

1. 版面設計簡潔，功能一目了然，相信沒人希望在跑步之前看到一個複雜的界面，要開始跑步還需要點擊好幾下。從應用場景下，深入思考用戶行為，從而提升用戶體驗。

2. 刻意安排的銜接方式，使下方露出的卡片和標題信息引導用戶去探索，滑動之後，背景顏色的變化，帶動著卡片所承載內容的情緒。

3. 大的卡片面積，能夠承載更豐富的信息，有利於後期在視覺上探索更多的形式和玩法。因為在真正的跑步過程中，用戶是很少接觸到界面的，所以在用戶能夠看到可交互到的界面希望做到在好用的同時讓用戶印象深刻。

第二個經驗：理清功能層級，統一反饋方式

在一款 App 之中，因功能的不同，會存在許多不同的入口，這些功能之間有著不同的聯繫，嘗試設計不同的反饋方式來表現這種聯繫，幫助用戶更好的去理解產品的整體結構。

跑調主界面

以「跑調」的收藏功能為例，在點擊收藏卡片之後，會出現列表界面，在這個界面用戶能簡單試聽和刪除自己收藏的歌曲，因為不是一款音樂播放軟體，所以這裡的功能做得相當克制。卡片和列表，明顯是一種主次關係，當點擊列表右上角關閉時，用戶可以快速回到主界面，因為界面信息及操作的簡單，這種主次關係的界面過渡統一為子界面從底部升起，關閉則收回到底部，具有一定的可逆性。

但是當用戶點擊了卡片上的 PLAY 按鈕進入到跑步播放界面時，則相當於進入了另外一個獨立的功能模塊，這裡的信息和交互相較於列表界面要複雜的多，再用從底部升起的過渡方式顯得不那麼合適，所以點擊卡片 PLAY 按鈕的界面過渡則統一為從右至左出現。

第三個經驗：善用工具，快速測試

在單個界面的布局和功能都確定了之後，需要把它們串起來，形成一個完整的操作流程。這個時候，工具的利用顯得尤為重要，高效的原型搭建能允許你在交互方式上做更多的探索，也利於內部快速測試，確定方案。

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

提到什麼好的交互設計時，「跑調」的團隊成員總結了四點：

1. 這個設計是否足夠有趣；

2. 這個設計是否符合直覺；

3. 這個設計是否滿足需求；

4. 這個設計是否足夠有效率。

這 4 點並沒有絕對的先後順序，根據不同的功能有著不一樣的優先順序排序，最重要的是不要顧此失彼。

無論是硬體還是軟體，其目的就是給用戶帶來美好的體驗。當你的產品得不到用戶的認可，應該想想是否自己產品在設計與體驗上做得不夠好。當一款產品做到「美貌與才華」兼備時，自然會吸引用戶，而這背後是需要不斷的總結、迭代、創新，以及做好每一個細節，從而帶給用戶更加的美好體驗。

轉載、採訪、投稿、團隊報道聯繫公眾號：shenzhenware

推薦閱讀：