連結戶外靈感，共赴自然之約：揭秘 Hikingbook 社群功能背後的設計

嗨！我是 Hikingbook 的產品設計師家蔚。

無論你最初是被什麼所吸引，在踏上戶外探險的旅程後，往往能發現自然中蘊含無盡的靈感，而這份靈感正是 Hikingbook 社群背後設計的核心所在。

在本文中，我將深入探討、分享團隊在建構 Hikingbook 社群時的思路、決策與背景脈絡。每一個部分都像是獨特的山徑，將帶領我們一步步深入了解 Hikingbook 社群背後的故事，希望對大家有所幫助。

目錄
一、為什麼要打造一個新的社群
二、根據使用者行為及需求，規劃社群核心體驗
三、社群為使用者帶來的價值
四、Hikingbook 社群發展的最終目標
五、一人設計師如何根據目標訂定設計決策
六、對 Hikingbook 社群的未來願景
結尾

一、為什麼要打造一個新的社群？

從站內的豐富資料與使用者行為出發，結合公司願景，我們希望在現有的產品基礎上打造一個「以使用者為中心」並且「鼓勵分享與互助」的戶外社群，讓每一個人都能更容易且安全探索戶外。

▋戶外愛好者的現狀與公司願景

自 2019 年開放山林政策施行之後，越來越多的人開始探索台灣的山林，這群新的戶外愛好者和過去藉由登山社、登山協會等團體接觸山林的人有所不同。

這群戶外愛好者往往是透過網路上的資訊（如：文章、影片）或是身邊的好友開始接觸相關登山的知識，而非透過登山社團、協會進行系統化的知識傳承。

在數位科技發達的今天，有許多熱心分享資訊的網友，讓即時的山林資訊更容易的在網路上被更新與搜索。其中，也有很多戶外愛好者會透過查看 Hikingbook 站內的活動紀錄來研究路線資訊、評估行程規劃等。

從商業的角度來看，Hikingbook 站內已經有許多使用者建立的資料與一定的使用者基數，在使用者可以藉由多元管道獲取資訊的現在，發展社群功能後，能夠強化現有使用者對產品的黏著度並持續增加站內資料的豐富性，並期望吸引更多的潛在使用者。

從使用者的角度出發，Hikingbook 針對登山已經開發了一系列的相關功能：裝備管理、路線規劃、活動紀錄與離線地圖等等，根據使用者的需求我們持續開發具有競爭力的功能，並期待能夠達到我們的願景。

我們相信，人作為自然的一份子，都能安全、自在地探索戶外，獲得無可取代的美好體驗。

而事前瀏覽相關「活動紀錄」，已經是進行任何有風險登山行程前不可或缺的一步了。越了解你即將前往的區域，就越能降低行程中的活動風險，而這也是為什麼，我們希望打造一個社群，讓使用者能互相交流、讓 Hikingbook 陪你一起安全登山。

▋登山安全與社群發展的潛力

至今 Hikingbook 已經服務超過 20 萬名使用者並協助他們紀錄 10 萬筆以上的戶外活動，在 Hikingbook 的官網及 App 中，可以看到這些使用者產生的精彩內容。

在使用者訪談中我們得知，對於登山安全意識程度較高的使用者在規劃行程前，會使用 Hikingbook 查看其他使用者的活動紀錄獲取以下的資訊：

1. GPX 路線軌跡
2. 路況資訊
3. 行程時間
4. 通訊點
5. 水源
6. 住宿紮營點

了解這些資訊後，登山者能夠降低面對未知情況的風險與安排適合自己的行程規劃，其中學習評估行程時間更是重要。

舉例來說，同一條登山路線，以普通的速度（上河地圖 1.0 的大眾速度）有可能需要 5–6 天才能夠完成，也有腳程較快的人能夠在更短的時間內完成。因此如何安排路線與行程規劃是因人而異，也沒有絕對的對錯。

藉由比較多筆不同來源的活動紀錄，能夠協助使用者在登山前建立對於路線的基本認知，這也是提升登山安全的重要一環。

對於戶外愛好者初期不了解自己的體能狀況、無法評估路線難度的狀態下，Hikingbook 站內豐富的內容是相當具有參考性的參考內容。

從客觀的路線總長度、總爬升高度、活動總時間等數據到其他使用者主觀的評價、回報的路線資訊，都能夠協助新手降低風險。

因此，對於已經擁有這些珍貴資料的我們，希望在這個基礎上，打造一個「以使用者為中心」、「鼓勵分享與互助」的社群，讓樂於分享的使用者，帶領更多新的戶外愛好者一起安全地探索戶外。

二、根據使用者行為及需求，規劃社群核心體驗

對使用者來說 Hikingbook 最重要的價值除了紀錄活動以外就是參考其他其他使用者上傳的資料。因此在深入社群的設計前，將從兩個面向切入：

1. 提升站內資料的數量與品質
2. 如何更有效的呈現資料

從上述兩點出發優化核心的使用者體驗，為社群功能打下基礎。

▋多處漸進式調整提升 Hikingbook 站內的活動數量與內容品質

希望使用者在 Hikingbook 中產生的良性互動

隨著 Hikingbook 這幾年的發展，團隊發現有一群熱愛紀錄的使用者，會透過 App 紀錄他們完整的登山過程、甚至在該紀錄中撰寫更多描述資訊，提醒未來參考此紀錄的使用者相關的注意事項。

在觀察到上述的使用者行為之後， 團隊在 2023 年初開始了以下的前置作業：

1. 優化 Hikingbook 中的紀錄面板：增加紀錄活動的即時數據，提升用戶紀錄當下活動的動機。
2. 調整活動紀錄儲存流程與詳細活動紀錄頁面：引導使用者在活動內留下具參考性的內容。
3. 下載路線時新增拍手流程：鼓勵使用者互相給予正面回饋。

由左至右分別為：活動紀錄面板、儲存活動的路線建議、下載路線的拍手視窗

結合以上三點，透過提升活動紀錄的數量與品質，並且鼓勵使用者在下載他人路線時給予肯定，創造一個正向的循環、增加活動紀錄對於使用者的功能與情緒價值。

接下來讓我們來聊聊文中不斷提到的「活動紀錄」的介面優化設計，解析原始設計與新設計各自的設計意圖。

▋最大化顯示活動資訊的前提下，規劃視覺層級分明的介面

新舊動態牆對比圖，根據不同的設計意圖呈現不同的 UI

在原始的設計中，強調的是在單一畫面中能看到更多的活動，引起使用者的好奇心後儘可能往下滑動；

在新的動態牆中，著重的是單一活動的資訊呈現：該活動連接的官方路線、所在的縣市區域並顯示部分活動描述、互動狀態等，提供使用者在意的數據，讓使用者更容易決定是否要查看更多內容。

調整資訊的優先層級與排版，讓使用者在瀏覽動態牆時，能夠更一目了然地看到該活動的關鍵資訊。

並期望在版面調整後，能夠間接鼓勵更多使用者上傳活動的相關資訊，使用者輸入越多的內容，在版面上呈現的資訊就越豐富。

▋讓系統可以伴隨使用者偏好，推薦相應的內容

建立起登山的習慣或愛好後，在「出發前進行路線的研究」，往往會成為一個使用者反覆執行的操作模式。

舉例來說，使用者在 Hikingbook 站上的搜尋不同紀錄的過程中，會逐漸發現對自己最具有參考性（行程時間相近、活動類型相似等等）的其他使用者，抑或是在站上隨意瀏覽活動紀錄時，發現了意料之外的內容。

1. 設計合適的活動紀錄排序方式
2. 協助使用者獲得有參考性的內容
3. 啟發使用者意想不到的活動靈感

考慮上面提及的三個目標後，就需要導入社群中最核心的「追蹤」功能。

從步行、輕裝登山到重裝登山等等，還有更多樣的活動類型可以追蹤

藉由「追蹤」功能，賦予使用者決定自己要看到什麼類型內容的能力、建立使用者與活動上傳者之間的關聯性。

除了主動搜尋外，現在也能夠被動接受使用者自行篩選過的訊息來源

使用者根據自己偏好的「活動類型」、「路線規劃」、「紀錄資訊」等不同的面向，追蹤其他 Hikingbook 上的使用者，當這些被追蹤的使用者上傳他們的活動紀錄時，就可以在自己的動態牆上看到這些活動。

▋根據戶外活動的時效性調整動態牆的顯示邏輯

左圖顯示已瀏覽完 3 個月內活動的狀態，繼續向下滑動可直接查看使用者最新上傳的活動紀錄。

當然，我們也深知，戶外活動的紀錄是相當的時效性，搜尋同一條路線時，若出現一天前與一年前的紀錄，上傳時間越接近搜尋當下的紀錄是更有參考價值的。

因此在使用者的追蹤動態牆上，會優先顯示 3 個月內上傳的活動紀錄，儘可能提供最即時的資訊，在使用者瀏覽完 3 個月內的活動後，可以選擇要查看已追蹤使用者過去的活動紀錄，或是直接向下滑動，查看其他未追蹤使用者的最新上傳活動紀錄。

▋針對使用者原有的操作行為，進行微小的調整，就能帶來巨大的改變

看似微不足道的改變，都有可能帶來極大的影響。

除了顯示更豐富的資訊外，對活動紀錄的互動行為也有所修改。

過去需要使用者額外點擊一次後，在活動詳細資訊頁中才能進行以下的操作：下載路線、拍手、留言與分享活動。

但社群中是鼓勵使用者彼此互動與交流的，因此我將這些操作按鈕搬移到最外層顯示，減少使用者額外的無意義點擊與等待跳轉的時間。

使用者下載他人的路線時，系統也會跳出視窗邀請使用者對分享者的活動拍手，鼓勵分享者上傳的高品質內容。

在修改下載路線流程的一個月後，Hikingbook 站上的活動被拍手的數量，就相較上一個月顯著提升了 400% 以上，這對於建構一個互助、友善的社群是相當有意義的指標。 

透過其他部份的設計提升站內的活動紀錄的數量與內容品質後，透過「追蹤」功能實現新的資訊顯示邏輯、主動推薦內容給使用者，並且根據使用者的原有需求（可閱讀性、資訊時效性）等提供相對應的解決方案，減少使用者在搜尋資料的過程中不必要的摩擦力，並且在使用者旅程中的最後一步，鼓勵使用者彼此交流，建立正向回饋。

三、社群為使用者帶來的價值

從最積極的追蹤其他使用者或是主動查看所在位置附近的活動、路線到瀏覽 Hikingbook 編輯部精挑細選的使用者訪談，我們為你準備好了各種方式讓你能夠更容易的與他人建立連結、獲得靈感。

▋藉由每一位使用者的路線回報，打造即時的路線資料庫

回到使用者建立對於路線的認知上，雖然 Hikingbook 的官方路線資料庫中，有超過 1700 條的步道與路線。

但在日常與山友們的交流經驗中，團隊也了解這些路線的資料是無法滿足使用者需求的，永遠都有新的路線和尚未被收錄的路線資料。

Hikingbook 使用者上傳、更新活動紀錄的速度，絕對比官方主動更新路線資訊更快。正因如此，我們該做的不只是單純地新增站內的路線資料（雖然我們每個月都仍會持續更新路線、步道資訊），我們更應該做的，是提供使用者好用的工具，讓每個人都能使用這些工具建立有參考性的紀錄。

活動詳細資訊頁中，可以針對去過的路線提供回報；綁定官方路線時，能夠建議路線

對上傳者來說，可以回顧自己過去行程中的運動表現、路線紀錄與心情感受；對瀏覽者來說，可以在出發前，了解其他使用者是怎麼進行該路線的規劃與實際的軌跡。

使用者儲存活動時，若無法直接配對到相應的官方路線，我們也提供了路線回報的功能，參考使用者實際的 GPX 軌跡搭配紀錄點，作為新的官方路線資料素材，替未來要走類似路線的使用者提供相關內容。

▋沒有明確目標，也能快速探索周圍地區的「附近活動」

關於戶外靈感，除了在事前的研究，若今天你臨時前往了一個你不熟悉的區域，但又想要快速地探索周圍的區域，那麼 Hikingbook 社群會是你的好助手。

附近活動頁面中也有許多 Error handling 需要處理

社群動態牆中加入了「附近活動」的子分類，即使沒有追蹤其他使用者，只要點擊「附近活動」，即可馬上瀏覽所在位置方圓 50 公里內的活動紀錄，看看過去一年內在附近活動的 Hikingbook 使用者都在做些什麼戶外活動。

▋透過文字遇見不同面貌的 Hikingbook 使用者

戶外活動的規劃是非常多元的，同一條路線根據體能、攜帶裝備等條件的不同也可以有很多走法，每一個人都可以選擇用自己想要的方式來親近戶外。

無論是輕量化速攀或是重裝攜帶爽糧與同伴們共享多日登山的時光，都有各自的樂趣，因此，向你介紹社群中的「社群亮點」。

持續收錄、訪問各具特色的 Hikingbook 使用者

在社群亮點中，有來自 Hikingbook 編輯部的特別企劃，訪談介紹各式各樣的 Hikingbook 使用者，有透過鏡頭帶領我們一同冒險的攝影師小藍與 Danny、 在 14 天內完成無補給速攀中央山脈大縱走的 HikerCP、從工作到生活都追求挑戰的工程師 Joy Lee。

Hikingbook 編輯部會持續搜集來自使用者身上的精彩故事，並透過專文介紹給你，在社群中若不知道要追蹤誰，從這群使用者開始也是一個好方法 。

跟隨不同類型的戶外愛好者，用你喜歡的方式探索自然。

從主動搜尋活動紀錄到隨意瀏覽周圍的活動，不論你是怎麼樣的使用者，總是能找到適合你自己的方式使用 Hikingbook 社群。

四、Hikingbook 社群發展的最終目標

原本的活動動態牆中，更像是一個純粹展示自我與他人紀錄的平台，但在多次看到使用者在各自的活動紀錄中交流想法後，我們意識到，社群可以做到的事是更豐富的。

▋互相幫助彼此，才是社群的核心價值

「共同成長」與「互相啟發」不是空泛理想，而是在 Hikingbook 中的現在進行式，我們需要做的是放大並鼓勵這樣的體驗發生在每一名使用者身上。

這些是真實發生在社群之中的互動

CMX 的創辦人 David Spinks 曾經說過：

To build an audience, you help people.
To build a community, you help people help each other.

上文中提到的設計改動都是 Hikingbook 社群的基礎，透過鼓勵已經在站內相當活躍的使用者們，希望藉此影響其他的使用者產生相似的行為，最終形成一股友善的風氣。

這正是團隊期盼的社群發展方向，借助大眾的力量，幫助每一個戶外愛好者能用更安全的方式去親近自然，帶回自己獨一無二的體驗。

我們的工作只是打造並維護一個環境，使用者們才是社群真正的核心與靈魂所在。

在官方路線已經有許多來自於社群使用者的回報

五、一人設計師如何根據目標訂定設計決策

在執行大規模開發需求時從利害關係人確認開發需求、識別潛在風險、決定設計策略、控制開發時程等工作都是一人產品設計師需要面對的，接下來就和你分享我是怎麼規劃為期 4 個月的設計開發。

▋綜觀全貌後選擇最核心的角度切入，才能夠「以簡御繁」

起初在專案開頭時，花了兩天的時間進行設計的時程規劃，雖然上文中已經提及許多理想的操作情境，但在實務的設計上，其實還有很多錯誤處理（Error Handling） 、邊緣案例（Edge case）需要考量。

產品設計師需要從使用者的角度出發評估需求、對公司內部又必須權衡務實的商業考量，如何在有限的時間之中，產出一個足夠好且具有可持續性（未來可迭代開發）的設計是最大考驗。

因此在設計之初，我的作法是在需求規劃中逐一檢視所有的開發需求。識別本次專案中最複雜、最核心的元素，並根據資訊架構切分成多個子任務以利時程控管。

透過 Asana 管理複雜的開發需求，避免遺漏

首先，在社群之中最優先需要處理的就是「動態牆中的內容」，因為這是整個項目中，出現頻率最高、影響使用者體驗最大的元件（Component）。

針對動態牆中的內容我提出了「容器(Container )」的概念，在需求規劃中可以看到原始的開發需求如下：

開發時 Dev. Team 會將開發需求透過 Asana 管理

1. 使用者上傳的活動
2. 官方路線資訊
3. 編輯精選的內容集合（Curation）
4. Hikingbook 的使用者專訪（User Story）
5. 行銷部門的推薦內容

上述各種不同的資料就像是液體，需要與其性質相符的容器來承載，不同類型「容器」中的資料來源可能是使用者、行銷部門或是兩者結合（例如：編輯精選的使用者活動）。

這些看起來相似度高卻有細微不同的資料，將會根據資訊架構、演算法顯示於動態牆中。

為了維持使用者在瀏覽不同頁面時的視覺一致性，需要盤點這些容器中的資料結構，並根據資料結構來進行視覺提案、減少不必要的元素，降低後續開發實作的複雜度。

因此我決定從「使用者上傳活動」開始設計，該項目的資料結構是最複雜的，若能優先解決此處的設計規劃，剩下的工作就是簡化與比例的微調。

在開始設計前就決定好設計策略，以終為始來開展後續工作。

所有視覺提案都是由最左方的容器修改而來

在決定好策略與最關鍵的設計的項目後，接下來與你分享實際設計的過程。

▋在設計時考量到 Edge Case，並提出相應的處理方式，節省後期開發人力的成本

在設計「使用者上傳活動」時，這並不是一個全新的元件，也因此，存在著一些我們已知的問題：

1. 使用者將活動命名的較長時會無法完整顯示
2. 無法在外層直接看到活動的互動狀態等等

因此，在開始設計時，就需要把這些問題納入考量，思考因應的方式。在整理完這些已知問題（Known Issue）後，我才真正開始設計 UI。

首先，我把單一容器中切分為五個部分：

1. Top header（頁首）
2. Cover Image（封面照片）
3. Body Content（主體資料）
4. Interaction Area（拍手、留言、分享、下載等互動行為和狀態）
5. Footer Matadate（頁尾詮釋資料）

此為一個不存在於 App 中的介面，主要目的是用來溝通開發需求與各種極端情境

這五個部分各司其職，在視覺層級上 Cover Image 吸引使用者的注意力、Header 負責提供貼文者、上傳時間等次要資訊，Body Content 補充詳細的活動資訊，Footer 則顯示清楚的運動數據。

透過這樣的視覺規劃，讓使用者可以在瀏覽動態牆時，透過掃視（Scan）的方式識別不同活動的資訊。

在完成最複雜的容器設計之後，剩下就是根據不同的內容，調整容器的資料結構，並再次與開發、行銷人員確認資料來源、建議字數、呈顯形式與限制，儘可能避免資料遺漏或是未定義的狀態。

在專案初期與相關利害關係人共同確認最後交付的產品規格，避免在完成設計提案後需要打掉重練。

藉由反覆的測試與迭代後才定下最後的 UI 提案，過程中驗證不同資料的顯示狀態、操作邏輯是否合理、易操作。

▋決定好介面的外觀形式後，如何展示給使用者也同等重要

在完成容器的設計後，接下來就是要如何把內容傳達給使用者。使用者在更新 App 後看到新的設計會不會因此迷失方向，需要重新建立心中的認知模型，因此接下來的工作便是「重構資訊架構」。

在重構資訊架構時，首先想到的是，要根據什麼邏輯來梳理資訊架構？目前的資訊架構有什麼樣的問題？

為了釐清以上的問題，我先回頭檢視原始設計的資訊架構、介面設計，試圖識別潛在的問題。

透過分析原始設計，了解其優缺點

原始動態牆的互動行為與資訊架構：

1. 在「推薦」的子分類中上方有行銷部門希望曝光的內容（活動、商品等），下方則是使用者所在區域的當週熱門活動。
2. 在「活動」的子分類中則是依上傳時間由新到舊顯示使用者上傳的活動。

根據使用者操作 Hikingbook 的行為並分析原先的介面後，我認為原先動態牆最主要的痛點就是內容與使用者的關聯性過低。

導致動態牆就算有很豐富的內容，在使用者瀏覽到有興趣的內容前，失去耐心的話就不會繼續瀏覽了。因此接下來，我將針對此痛點，探索設計的方向。

▋透過內容與使用者之間的關聯性，讓使用者更容易建立新的認知模型

從「與使用者自身關聯性高低」的角度出發，新版介面是透過二級導航（Secondary Navigation）處理與使用者關聯性高到低的內容分類。並將「推薦」中的分類打散，加入新的「商城」，重新梳理整體的資訊架構。

新版介面示意圖

1. 追蹤中：顯示使用者主動追蹤的內容
2. 附近活動：根據使用者所在位置顯示方圓 50 km內的活動
3. 社群亮點：由 Hikingbook 編輯部主動更新的使用者訪談文章、當週熱門活動
4. 個人活動：顯示使用者公開的活動紀錄

以關聯性來處理資料結構上相似，但對於使用者優先層級不同的內容。

由於「追蹤中」的內容是由使用者主動選擇的，內容與使用者之間的關聯性是最高的，附近活動則是較為隱性，透過使用者當下的 GPS 位置來決定顯示的內容。最後才是顯示跟使用者關聯性較低，但在社群中充滿個人特色、值得專文介紹的各種 Hikingbook 使用者們。

透過資訊架構，搭建起使用者與內容之間的橋樑

目前 Hikingbook 社群上線約莫一個月，已經有超過 1000 名使用者在 App 內追蹤其他 Hikingbook使用者，也有近 2000 名使用者正在被追蹤中，也期待未來後續的發展！

六、對 Hikingbook 社群的未來願景

▋做好準備，期待美好的事物發生

對我來說社群是一個有機體，會有自己演化的方向與個性，就像是上文所描述的，作為設計者，我打造的只是一個「容器」，並希望這個容器對於使用者來說是好用且符合需求的，但容器內要裝填什麼內容，仍然是以使用者為主。

作為戶外愛好者的工具，你可以透過 Hikingbook 發現靈感、規劃路線、並在實際走訪時的導航路線以及活動後紀錄分享屬於你的冒險。

很榮幸 Hikingbook 已經陪伴了這麽多使用者一起探索戶外，也不斷被使用者驚艷，已經有人把我們的產品帶到了那麼遠的地方去使用或者是竟然會有人這樣子使用我們的產品。

加入 Hikingbook 後一路到現在，作為設計師的我已經接受了太多精彩的內容、從每一位使用者身上也學習到了太多。

而 「Hikingbook 社群」更像是一份禮物，獻給從過去一路支持 Hikingbook 的使用者以及未來想要參與其中的人們。

就像是米開朗基羅只是把大理石中多餘的部分去除，讓美麗的事物浮現，我也只是把不吝於分享的使用者們所上傳的珍貴紀錄，稍加調整後，讓這群使用者能更容易夠被看見、讓你們的分享的資訊可以幫助到更多的人。

希望未來在社群中可以看到更多的互動與交流，並在這個過程中，大家都能都安全的探索戶外，把自己接收到的資訊，再分享給更多需要的人。

結尾

Hikingbook 社群的核心是「以使用者為中心」、「鼓勵分享與互助」。在實際開發時，才真正體驗到要持續提供有意義的內容與處理各種錯誤狀況是多麼令人崩潰。

但看著 2023 年以來做的各種設計變更在有了使用者參與之後，真的讓 Hikingbook 站內的內容變得更加豐富，甚至連我在規劃自己的登山行程時，也都更常參考站上使用者的活動紀錄。

這種感覺真的是非常神奇，就像是你努力幫助互不認識的陌生人，結果最後收穫最多的竟然是自己。

在 Hikingbook 社群的設計中，我做的不是從 0 到 1 的創新，而是替未來發展從 1 到 N 的過程進行基礎的建設。

希望你會喜歡這篇文章，透過這篇文章與你分享在過去幾個月開發時的酸甜苦辣，也期待收到你的回覆，歡迎來信或留言交流，或者是在 Hikingbook 上一起追蹤各式各樣精彩的使用者吧。