從理解用戶到 UI/UX 設計，導入遊戲化元素帶來的挑戰及成長
上篇寫了「UI/UX 創造價值的成就感！1 年 20000 用戶的 Side project 實作歷程」是關於 Beiyi APP 從無到有的實作過程。
簡單介紹一下這個專案「Beiyi 北宜」，是一個提供即時影像，整合路況回報的服務，主要目標客群是使用北宜公路的車友們。
這篇會記錄關於 APP 上線一年以來，透過觀察用戶的操作模式，搜集用戶給予的反饋，在每一次設計上的評估及調整設計想法，一步步朝著更好的使用體驗邁進。
新增功能的動機
- 按推(讚)功能
Beiyi APP 有別於 Facebook 、Instagram 社交媒體那般可以聯繫彼此、可以交友互動的平台。我們的核心是以回報山道路況為主的平台，所以在產品 V1.0.0 版上線時，只有最基本的功能，能看到監視器影像、可以發文、可以編輯姓名及頭像。
而上線後，不定時會觀察 APP 的註冊人數、每日在線人數以及回報文章篇數的數據資料。發現每日在線人數和發文篇數是有落差的，在用戶行為模式可以簡單歸類成「發文型」以及「觀看型」兩種。
透過這個數據資料，我們希望觀看型的用戶能有更多的「參與感」和「貢獻感」，所以在 V1.1.0 版新增按推(讚)功能，讓用戶能獲得成就感。
V1.0.0只能發佈文章
發文型 ➔ 「參與感」、「貢獻感」
觀看型 ➔ 「沒有明顯的參與感」
V1.1.0發佈文章、按推功能
發文型 ➔ 「參與感」、「貢獻感」
觀看型 ➔ 「參與感、貢獻感提升」
- 排除功能
回報的路況都有其時效性，比方說某一個路段發生了事故，可能不嚴重，半小時內就恢復正常道路通行。
因為上述這項因素，導致用戶在使用上有了不一樣的操作模式，是我們從來沒想過的行為 ——「刪除文章」
透過後台查看發文狀態，事故內容的文章會被用戶刪除，而且不只一位用戶有這樣的操作模式。
針對這項行為進行剖析，用戶刪除事故文章的舉動，猜測是為了不想造成其他車友誤以為事故還沒解決，所以衍生了刪除的動作，以表示「這項事故處理完畢」的意思。
在此同時有用戶給予寶貴的反饋內容，建議我們可以針對文章給予「已排除」的狀態。
設計「已排除」功能，內容朝著簡單易懂、顯示當下改動時間以及用戶手動調整狀態的規則做設計。
用戶在不同身份的時，所能操作的功能不一樣。
發文者 - 可刪除自己的文章、可將文章標示為已排除
觀看者 - 可檢舉文章內容不當、可隱藏用戶訊息或封鎖
- 上傳圖片功能
在 web 版製作時，我以用戶角度寫的 User Story 當中，提到希望能有上傳圖片的功能，沒想到用戶真的提出此需求。
我們無法知道用戶會上傳什麼大小尺寸的圖片。為了畫面整體的一致性與協調性，我將基礎的大小限制為 4：3 。
而每支手機的寬度不同，計算上，只要先判斷圖片在裝置上的寬度(橫向)，接著給予 4：3 的比例，就能算出高度(直向)，這樣不管在任何行動裝置介面中，都能固定 4：3 的比例。
在 4：3 的框裡，要如何算出 16：9 的尺寸
假設 4：3 的長寬為 276：207
已知長邊 276 / 16 = 17.25 (四捨五入)
17 * 9= 153
所以 16：9 的長寬為 276：153
產品發展後的新方向
隨著時間流動，Beiyi APP 用戶人數穩定成長，用戶開始有了黏著度，讓我們思考著產品下一步方向。
- 產品開銷
- iOS 費用約 3400 NTD/年
- Android 費用約 600 NTD/一次性永久
- 伺服器 Linode 費用 150 NTD/月
- 印製刀模貼紙費用約 9500 NTD
當時總用戶數大概 8000 人，每日在線用戶落在 600～800 人左右時，這時我們決定加入橫條式的廣告，計畫透過廣告曝光增加收入。
雖然加入廣告橫幅會影響介面整體的視覺，但還是想藉由這項決策，來了解用戶使用感受以及是否能帶來收入？
廣告功能上線後，增加的收益和每個月機器費用差不多，且用戶也沒有因此而拒絕使用。這項決策讓我明白，當產品能夠幫助用戶解決問題時，在不影響使用者操作的前提放置收益廣告，用戶是可以接受的。
用戶留存
記得當時是颱風天，樓下住戶的鐵皮屋頂被雨水打的碰碰作響，可想而知，車友們根本無法騎車上山兜風，而數據也證實，每日在線人數是呈現下降的狀態。
短期來看，外在的氣候因素，會讓使用需求下降。
長遠來看，發文和按推獲得的成就感，隨著時間熱誠度也會慢慢下降。
我們希望用戶能一直回來使用 App，所以決定挑戰利用遊戲化的制度提升用戶回訪率。
設計大挑戰
加入遊戲化的徽章等級制度，這階段我耗費很長時間著墨設計和編排。
[ 新增等級徽章 User Story ]
- 身為用戶，發表文章要能看到等級
- 身為用戶，我要知道自己目前等級狀態
- 身為用戶，我要知道如何獲得積分
- 身為用戶，我必須知道遊戲規則
這個規格，要設計的範圍涵蓋發文卡片、個人頁面以及等級徽章設計。
我對於遊戲徽章的了解並不多，所以參考許多網路遊戲、手機遊戲的等級徽章後，手繪了各種徽章樣式及緞帶，也實際用 Sketch 繪製，透過第一、二版的繪製，我覺得太過於平面，少了重量和質感，於是我將徽章加入反光，利用漸層顏色做出鐵的質感。
以前畫室老師教過一句話「畫素描就是，亮的旁邊暗；暗的旁邊亮」這樣才能呈現立體感，直到現在我還是記著這個口訣。
徽章設計告一段落後，就是文章卡片編排的部分。
雖然結果看起來改動並不大，但當時我卻想破頭畫了好幾版後才規劃出來。在設計時，經常會被既有的框架給限制住，導致設計綁手綁腳的，所以要適時的將元素打散，再將元素重新分類做規劃，幫助自己釐清頁面邏輯。
個人資訊 — — 頭像、姓名、等級
路況資訊 — — 路況種類、路況位置、路況內容、路況圖片
互動、顯示資訊 — — 按推、發佈時間、路況排除時間
最後是個人頁的部分，設計定稿之後，交由工程師實作這次的大改版。
個人資訊 — — 頭像、姓名、升級狀態
獎勵機制 — — 每日簽到、觀看廣告
個人積分數據 — — 發文次數、推(讚)數
遊戲規則 — — 官方說明資訊
最強糾察隊
在這個遊戲機制上線後，不僅廣告曝光增加更多收益，甚至還出現用戶發灌水文章獲取經驗值的有趣事件。
也因為這樣，規劃了封鎖機制，以禁言的方式處罰。
小結
一項產品的推出，不會一開始就達到完美境界，而是透過理解用戶的操作模式以及規劃產品方向，進而調整成當前使用體驗最舒適的狀態，透過不斷疊代讓產品變得更好！
謝謝看完這篇文章的你，讓我們一起成長吧！
