Case 26 | Strava

App: track activity & map routes

一款紀錄運動軌跡的App,跑步,游泳等等。

一進入App,品牌的背景顏色橙色 (#EA5B2A)充滿整個頁面,上面是經過設計過字體的品牌名稱。給用戶一個比較強烈的品牌標識的感受。

Log in/Sign up界面,推薦登陸方式以顏色標出,比如"Log In"和“Continue with Facebook”

CTA button的Corner radius是4px,整體給我是一個比較tech的感受

兩個button的"drop down" effects非常neat, (y:4, blur:8, #000000 20%)

進入產品的主界面:tracking activity

上方用green bar來顯示狀態

CTA button的位置居中,78px*78px, drop shadow (y:4, blur:8, #000000 15%)

light gray line分隔4個icon的功能分區,既有一個分區又不會很大的視覺負擔

"Start"之後的界面主要分隔為上下4個區域:

  1. 地圖(活動軌跡)

2. 細節(時間,距離,平均步速)

3. 操作

4. CTA buttons(Resume, Finish), 兩個buttons一個用了brand color做背景色,一個則作為stroke邊框顏色。

🍺思考:

・button的"effects"有質感,運用drop shadow來從視覺上突出button。不僅是visual而且增加了3D的效果讓用戶更知道去點按button

・light gray lines作為分區的線條,顏色需淺,這樣不會造成視覺負擔的同時又起到分區的作用

・Corner radius的大小可以讓整個設計的style有所不同