看起來很「酷」的Keep，是這樣被設計出來的

健身 06-21

前言

關於 Keep 的設計風格，紫色品牌色的產生，每次版本的設計考量，運營設計、周邊設計等等，很多人都有著很濃厚的興趣，想知道其背後的一些故事。這次借著版本升級，我們的設計總監 Lisa 將為感興趣的同學們介紹一下在 4.0 版本中，設計團隊是如何從功能業務出發到一些運營視覺表現的。本篇總結會聚焦在版本迭代中的設計執行，同時會在一些功能點上設計如何發揮最大價值進行闡述。

設計背景

在兩年時間內，Keep 已經從 1.0 升級到 4.0 版本。1.0 開始我們以移動健身教練定位，以打造用戶私人教練為目的服務了第一批想健身的用戶人群，滿足了人們能隨時隨地不受時間和空間限制的健身需求；2.0 我們整合了我們第一批用戶的運動數據，讓用戶能更直觀的看到自己訓練相關的數據露出，以及我們嘗試了不同於早期單一的社區行為；3.0 我們增加了跑步運動、健身課程表以及實體的品牌周邊產品；直到 4.0 ，我們的核心功能不止於健身，Keep 的定位從「移動健身教練」正式升級為「自由運動場」，成為多品類的運動工具，同時承載著社區，活動，直播等更加多樣的社區屬性，以及豐富了具有品牌性質，更加貼近用戶心理歸屬感的周邊商品，在完善 Keep 工具屬性的同時我們在探索著其他更加多樣的運動環境和品牌價值的輸出……

設計準備

基於定位和業務方向的調整，結合產品功能擴展、體驗差異化以及品牌升級需要，設計層核心的方向是

「

多品類訓練內容模式的統一和不同運動本身個性化之間的兼顧

」

，即設計風格的統一和滿足不同業務之間的差異性，二者是包含與被包含的關係。

總結 4.0 設計的關鍵詞：豐富性、流暢性、品質感。

下面將在功能和設計表現上具體闡述整個 4.0 版本中，設計是如何在滿足需求的基礎上執行推動達到以上三點的。

設計執行

產品功能 - 內容立體，高效瀏覽，數據直觀

1、首頁改版。首頁是快速開啟 Keep 工具屬性的入口，尤其是跑步和騎行成為與健身平行的運動品類。在這種分類的狀態下，設計在頂部導航嘗試了多種分類方式，由最初的品牌紫色到現在的白色，設計的思考是如何最大呈現分類價值，即內容層次分明，引導用戶快速找到運動入口，同時也要兼顧未來更豐富的運動品類。

2、登錄註冊流程重構。登錄註冊重構在 4.0 之前兩個版本已經上線了，重構原因一方面是從數據發現，新用戶在註冊頁流失，是由於在登錄按鈕和註冊按鈕之間選擇不清，不明白含義，包括不常用的第三方登錄佔據了主要的空間位置。設計在這個需求存在的情況下進行了登錄註冊流程重構，以減少用戶誤觸和快速完成註冊為首要目的，進行了去個性化的設計，加大了字型大小，增大了留白，選擇唯一的用戶引導方式，在之後的數據總結上能看到明顯的提升。

另一方面為配合整體業務升級，從開屏 video 到引導頁我們進行了重構，一個原因是為了和新版註冊流程更好的銜接，另一個原因開屏視頻是品牌屬性的體現，引導頁面是沉澱於功能層，目的是讓用戶體驗從開始啟動就有品牌升級的氛圍感。

3、數據中心的可視化設計。基於 Keep 是一個兩年多的工具類產品，已經擁有了用戶的相關數據報告，我們整合了數據中心的功能需求並進行設計升級，在滿足功能基礎上更加強化了品牌色，並且嘗試了多種交互細節的表達方式。

4、發現頁面重構。發現頁面是內容的集合體，設計要分清層級關係，不增加結構的複雜性，不增加用戶的認知成本，整體保持一致的韻律感。盡量將同類型場景、內容模版統一，達到簡明統一的效果。

5、個人頁面重構。個人頁面是自我價值的一個歸屬，設計上要體現標籤，體現榮譽，同時也要有良好的層級引導，圖文組合模塊適當增加空間，調整到最舒適平衡的視覺結構，有視覺呼吸感。突出「我」的一個屬性。

設計表現 - 框架統一、體驗一致、最優表現

好的設計基於優質的功能需求，功能通過良好的視覺引導表現出來，設計在依託於上述重要的功能之外進行了更多關於交互框架，表現層，設計基因如何做到最優表現的思考和執行。

1、框架統一

在豐富的健身品類和內容之後的問題就是不同模塊之間差異性難以兼顧統一。為此我們梳理整體控制項，加強統一體驗的同時，提升控制項的可用性及操作效率。

2、規範重構

重新定義 4.0 設計規範：顏色、字型大小、字重、icon 梳理、提醒樣式等。

3、安卓規範化

創業團隊人力資源不夠，迭代迅速，安卓的設計體驗還需要進行更多優化，基於 4.0 我們承載的功能越來越多，安卓規範化被提上了日程，設計主動規範安卓控制項並推進開發執行。

視覺及品牌 - 視覺吸引、強化基因、品牌滲透

很多人認識我們是通過產品，通過 App 的直觀體驗。其實我們的創意側一直在不斷的嘗試和完善更加符合 Keep 屬性的視覺表現。以下會列舉我們大大小小的一些運營層面的視覺輸出。

1、運營層

我們在運營層的準則是要結合不同的內容輸出符合內容的視覺樣式，什麼推廣適合走什麼風格，保持個性化的同時要符合 Keep 的調性，是創意表現上最核心的問題。

2、品牌層

品牌意識是一個基因，他不僅體現在設計作品上，更是應該根植於每一個設計人員的內心，我們和商品部門合作，進行了一系列品牌周邊的設計。

3、其他視覺

Keep 員工健身房視覺

Keep 內刊

總結

這次版本更新最大的收穫是可以多角度看待和思考問題。4.0 已上線一個月，這篇文章現在發出是因為 4.0 迭代時間是非常緊迫的，在上述幾個大的功能之外還有非常多的細小的功能點去設計。很多框架統一，體驗統一的問題都是我們最近兩個版本才開始解決的，所以對於 4.0 版本我們一直在趕，和時間比快就會產生很多遺留問題，設計部是在上線一周就做了內部總結，我們發現了問題，然後在這兩個版本里分階段的去解決，同時也體會到了主動發起需求的不易。感謝產品經理的引導和開發人員的配合。

整體而言 4.0 版本設計是以整合內容為導向，減少過多結構樣式的表達，保持一定的韻律感和統一性，給用戶內容豐富但結構簡明的視覺認知，但在以非內容為主的數據表現上，我們會更加強化品牌屬性，強化設計基因，突出我們的品牌色，找到更多的設計感。在接下來大家將看到訓練視頻 UI 的重構、課程表重構、跑步騎行首頁更改、飲食的視覺調整以及創意側的形象統一等，我們設計成員也將更加深耕於設計的原因，加強設計背後理性化的思考。

最後，關於設計團隊

我們一直要做

「酷」

的設計，

「酷」

是基於我們的產品形態、基於我們的用戶、基於我們的品牌產生的。

「和而不同」

一方面是業務層的個性和共性的準則，另一方面也是設計團隊人員的行為準則，即如何在

「酷」

的統一概念下創造不同類型的設計表現。

我們是一個不到 10 人的團隊，裡面涵蓋了用戶體驗設計和運營設計兩大方向，每天要和產品、開發、運營、市場、人力等各部門接觸，但我們的職責不止步於我們的職業名稱，我們主導了我們新辦公室導視設計，做服裝周邊，做鞋子設計。其他同事喜歡讓我們幫忙解決問題，這些合作無疑對我們是一種信賴。我們在滿足於職能上一直在跨界，並且目標導向，價值觀一致，努力做到設計價值的最大化。

身在創業公司，大家需要不斷去豐富自己的經驗，包括規範和制度，這需要部門的每個人去努力共建。之後還會有更多的關於設計的思考和探索，希望我們能為用戶、為產品、為品牌做的更多。

本文版權屬於 Keep，歡迎分享到朋友圈，轉載請先聯繫後台。點擊閱讀原文下載 Keep。