Hikingbook App 改版前後比一比
舊版 vs 新版，有什麼不同？
Published in
10 min readJul 8, 2021
本篇原文出自 Hikingbook UI/UX 產品設計師 Tiffany Lin
在上篇 Hikingbook App 最大改版 中，團隊的產品設計師與大家分享了改版計畫從規劃到實作的心路歷程。今天這篇文章，就讓我們一起來看看，到底實際改版後，有哪些不同吧！
舊版跟新版有什麼差？來比對看看吧！
地圖頁
開始紀錄登山軌跡吧！
舊版：
- 流程：(1) 按「開始登山」（紅框處） > (2) 選擇「新增登山行程」 > (3) 輸入行程名稱 > (4) 按「確定」 > (5) 按「開始紀錄」鍵來紀錄軌跡> (6) 選擇是否要紀錄起點 （完成）
- 介面 ：「開始登山」鍵與介面缺少足夠對比度，圖示意義較不明顯。
- 問題：流程較複雜、無法快速開始紀錄、狀態不夠明顯。許多使用者不知道按下「開始登山」後，還需要再按「開始」才會開始紀錄軌跡。
新版：
- 流程：(1)開始鍵 > (2) 選擇是否要紀錄起點 （完成）
- 介面 ：使用顯眼的顏色為主要按鈕、搭配直觀的「開始」圖示來代表「開始紀錄」。可看到更大範圍的地圖，不會被過多 UI 所遮蔽。
- 優化：簡化紀錄的流程，使用者只需按下「開始鍵」，方能開始紀錄軌跡，同樣也可自由選擇是否要「紀錄起點」再開始紀錄。
查看地標
距離目前位置遠嗎？那裡天氣如何？
舊版：
- 流程：(1) 點選地圖任一地標 > (2) 滑出地標資訊頁（完成）
- 介面：所有資訊用多欄的方式顯示。可以從資訊頁頂部用下滑手勢的方式關閉此頁。
- 問題：文字顏色、大小、樣式皆一樣沒有變化，沒有階級區分，不知道哪些資訊為主要或是次要。進階功能無法馬上察覺和理解。
新版：
- 流程：(1) 點選地圖任一地標 > (2) 滑出地標資訊頁（完成）
- 介面：若點選的地標為紀錄點，會顯示此為第幾個紀錄點。地標名稱字級設定為最大、也位於最顯眼的位置，再來則是水平距離和座標。特別注意的是右方灰色區域，顯示的是紀錄此行程的進階資訊，包括天氣、抵達時間、當日已走時間。最下方的橫向功能表，雖在最底部，但樣式卻較為醒目，能讓使用者在短時間就發現這些進階功能的存在。
- 優化：
在研究使用者階段我們發現，山友時常去記算點到點之間所花費的時間，用於排程登山計畫的時間表，我們則將這樣的需求添加到地標的資訊頁中（當日已走時間），更方便山友詳細地參考山友紀錄的行程時間。下方的進階功能，除了擁有明顯的按鈕樣式，也添加了圖示去增加理解度。橫向功能則是新增「查天氣」的功能，可依照目前選取的地點座標，去連結當地的天氣狀況，方便山友即時觀察氣象。
查看下載路線
剛剛下載了別人的GPX，該怎麼看呢？
舊版：
- 流程：(1) 點選 icon > (2) 滑出「參考的登山行程」頁> (3) 選擇要顯示的路線 > (4) 已被選擇的路線會變為紅字（完成）
- 介面 ：圖示含義較無法快速理解，文字中「參考」解釋較為廣泛（是指導航嗎？還是只是觀看）、「行程」釋義較多，首次使用的用戶較難快速理解去使用。
- 問題：圖示與文字不夠簡白直接，狀態改變後僅有文字顏色變更，略為隱晦。若使用者想要將路線關閉，需滑到列表最上方，選擇「不選擇參考路線」才會關閉路線，而在列表有很多路線的狀況下，使用者就需要滑很久才能達成目的。
新版：
- 流程：(1) 選單 > (2) 點選 icon > (3) 滑出「選擇顯示路線」頁 > (4) 選擇要顯示的路線 > (5) 已被選擇的路線右方的 icon 會由灰變為紅色（完成）
- 介面 ：文字改用「顯示路線」更為直接，用代表顯示意味的「眼睛」圖示去增加使用者聯想到實際功能的功用，並使用圓底當作按鈕的背景，暗喻是「可按的」區域，當開啟時會是紅色配景搭配「張開眼睛」的圖示，反之是灰色搭配「關閉眼睛」的圖示。
- 優化：由於新版將地圖上功能都整合到一「選單」功能中，所以流程會比舊版多了一個步驟，將所有功能都透過統一的入口去展開，讓使用者可以一覽所有功能。當使用者觀看的路線已被開啟時，再次打開「選擇顯示路線」頁，系統將會自動滑到該路線的位置，不需要再做多餘的滑動。
新增紀錄點
這裡有水鹿耶？趕快來打個卡！
舊版：
- 流程：(1) 進入「新增登山紀錄」頁 > (2)開始編輯 > (3) 按「完成」（完成）
- 介面：下方功能左至右分別為：天氣、展開鍵盤、相機、座標、收起鍵盤，圖示意義都很明確沒有問題，但左二和右一「展開鍵盤」和「收起鍵盤」，分別為兩個圖示則是較不普遍的做法。（Android 只會有一個，而 iOS 系統較少有收起鍵盤功能）
- 問題：使用者選擇完一個項目後，切換下一個項目編輯時，無法即時顯示上一個項目選擇了什麼。
新版：
- 流程：(1) 進入新增登山紀錄頁 > (2)開始編輯 > (3) 按「完成」（完成）
- 介面：考慮到使用者較常會編輯的為「文字區域」及「上傳照片」，因此把這兩個功能放置在最顯眼、同時也佔頁面中最大的區域，讓使用者易於點選和編輯。
- 優化：由分欄位的顯示的方式，使用者可以及時看見每一欄位所選擇的內容。且因版面資訊較少，編輯時也不會因為鍵盤滑出，而遮擋過多資訊。
儲存登山行程
安全下山了！怎麼儲存？
舊版：
- 流程：(1) 結束行程 > (2) 跳出通知是否要「前往編輯行程資訊」 > (3) 按「前往編輯行程資訊」> (4) 滑出「新增登山行程」頁 > (4) 編輯 > (5)按「完成」（完成）
- 介面：用一頁的欄位方式顯示所有資訊。
- 問題：使用者必須要先輸入行程資訊方能開始紀錄，每次結束行程後都會跳出通知詢問是否要編輯。
新版：
- 流程：(1) 結束行程 > (2) 滑出「編輯登山行程」頁 > (3) 編輯 > (4) 按「儲存行程」（完成）
- 介面：縮小封面照的顯示尺寸，給頁面較多的留白空間減少視覺壓力。將文字內容可能會較多的「說明」和「後記」移至下一層級，避免所有資訊全部顯示、內容看起來較為冗長。將「完成」改為更有動作感的文字「儲存行程」，同時增大了按鈕的可點區域，增加使用者的控制感。
- 優化：使用者在不需經過任何選擇、不需輸入任何文字的情況下，即能快速地開始紀錄，而在結束行程後，即使不做任何編輯也能夠直接儲存行程，較為符合一般下山後就已經很累的情境；此時系統會將預設好的標題帶入後儲存，待使用者之後再進行編輯。
同步＆上傳機制
你知道同步是什麼嗎？
舊版：
- 流程：(1) 進到個人列表 > (2) 按左上角「同步」鍵 > (3) 系統會將所有行程都上傳到雲端（沒錯是所有） > (4) 可於個人頁尚查看（完成）
- 介面：不少使用者以為圖示是「重新整理」的意思，而「手動同步」機制的作法較少在紀錄 App 使用（通常是紀錄完當下就已上傳完成）。
- 當初使用「同步」的原因：因行程有距離、軌跡、多張照片、紀錄點、時間、座標…而每個行程距離有長有短，內容資訊量多寡也會相差甚大，無法達成儲存當下就自動同步，以免影響操作速度。
- 問題：而大家對於「同步」的理解也難有統一的解釋。最常發生的問題是，因為無法選擇單個行程同步，若使用者一次同步的內容數量過多，則可能造成服務器超載，導致 App 閃退或同步失敗。
新版：
- 流程：(1) 進到個人列表 > (2) 選擇要上傳的行程 > (3) 按右上角「上傳」鍵 > (4) 系統將上傳此一行程至雲端（完成）
- 介面：改為一次上傳一個行程，在上傳期間可以看見上傳進度。
- 優化：一次上傳一個行程，避免不斷地重複來回傳送資料，未上傳時會有明顯的 UI 表示「未上傳」 ，並建立在行程後系統自動提醒上傳的推播機制，不會在執行任務當下被干擾，而使用者只需要按一次上傳，往後已上傳的行程若有做任何編輯或刪除，系統都將自動同步。
探索頁
看看山友們都去哪裡？
舊版：
- 流程：(1) 探索頁 > (2) 查看行程（完成）
- 介面：一個行程所佔的版面較大，使用者無法快速瀏覽多個行程，每個行程下方有拍手數目、留言數、觀看次數。使用原生的標籤頁供使用者切換要顯示的內容，但由於類別較多，且原生元件有一定的限制，文字只能全部置於固定寬度、觀看時稍顯吃力。
- 問題：尋找行程時，優先考量的行程內容為路線資訊，但介面並未顯示這些訊息。切換顯示類別的點按區域太小。
新版：
- 流程：(1) 探索頁 > (2) 查看行程（完成）
- 介面：兩個行程為一行的方式顯示，並顯示每一行程的時間、距離、體能等級、天數、紀錄點數量，供使用者快速找到他們需要的行程。最上方切換模式用橫向捲軸的方式，文字彼此間距可以保留多一些空間，點按的區塊也更大。
- 優化：考慮到使用者尋找行程時，會透過路線資訊來評斷是否要進去觀看，將重點資訊盡可能的一次顯示於最外層，即使顯示尺寸有限，但資訊擺放位置並不互相干擾觀看。使用者若要切換顯示內容，只要從螢幕的右方往左方滑動就可以輕鬆切換。
成果心得
也許改版後不是最完美的樣子，但能確定的是，這個成果是團隊半年來付諸了許多心力和時間去完成的，真的辛苦大家了！
身為產品設計師，時常在使用者與公司目標之間做拉鋸戰，我們能做的就是洞見產品的可能性、積極參與使用者、馬不停蹄地與團隊溝通，為了就是想把問題想得更透徹，試著想出更適合的解決方案。我相信優化產品的過程是永無止盡的，是否真的變更好用了？我知道不保證每個人都這麼想，但是在盡力後，就放寬心去等待市場的回饋吧！不管是好的或是不好的回饋，都能讓我們有機會做更好。
這次改版上線後不久就碰上了疫情，相信很多產業都深受打擊，關閉山林也是現階段最好的做法。雖然不能馬上知道大家的回饋有點可惜，但我還是很開心能透過自主的力量去經歷改變產品的過程，即使有小小的改變，仍很值得！
優化產品的過程是沒有盡頭的，而 Hikingbook 團隊的核心價值之一便是 — — Iterate 持續迭代、專注優化，因為所謂「完美」的產品並不存在。透過這次 App 改版的分享，希望能帶大家一窺團隊在持續優化使用者體驗的道路上，得到的寶貴收穫。若有任何想法，都歡迎在留言與我們分享！
