UI Redesign — BitoPro 虛擬貨幣交易所 iOS App
My First UI Redesign Project
--
為了讓自己對於 UI/UX 設計流程有更近一步的了解，這次想要試著做一個 Redesign UI 的挑戰，此篇將會紀錄我 Redesign 〈BitoPro 虛擬貨幣交易所 iOS App 〉的發想過程，歡迎大家不吝指教交流。
台灣的虛擬貨幣交易所 BitoPro
2017 年至今，台灣有許多虛擬貨幣交易相繼開設，目前 BitoPro 和 MAX 可以說是並列台灣前兩大虛擬貨幣交易所。
而今天的主角 BitoPro 它是由台灣 Bitoex 團隊所打造的，讓所有市場參與者能夠在這個交易所以新台幣購買 Bitcoin、ETH 、USDT 等數位資產。它的安全性高（需要通過驗證才能開通各項權限）、手續費低、同時也有網頁版與手機 App 兩種介面供大家選擇使用。
有哪些地方可以做得更好
身為虛擬貨幣交易所的使用者，兩個交易所我都曾使用過，不過因為近期比較常在 BitoPro 上作交易所以想說可以利用自己的經驗，來思考看看有沒有什麼地方可以做得更好。
使用過 BitoPro 的 App 後，整理出了幾個主要問題：
- 底部 Tab Bar 中的「首頁」與「市場」提供的資訊相似
這兩項導過去的地方都是各幣別的買賣市場，感覺可以合併為一個類別。
2. 底部 Tab Bar 前兩個類別無實質切換頁面功能
根據 iOS Human Interface Guidelines，Tab Bar 應為能於各信息間切換的功能欄。但從 Tab Bar 中的「首頁」或「市場」點進去各幣別市場後，就無法再點選「首頁」或「市場」回到原頁面，一定要按左上翻的返回圖示。
3. 在買賣的時候無法用想要花費的金額自動回推應該買多少數位資產。
在目前的功能中，只能先設定要購買的價格，接著設定要買的數量，最後他才會告訴你這樣會花多少錢。但有時候會想要先設定好買價跟願意花的錢，再看看可以買到多少資產。
4. 想要查看已完成訂單時需要自己篩選觀看條件
有點多此一舉，感覺可以至少顯示近期的交易紀錄。
5. 資產列表中，除了新台幣以外的其他數位資產只有顯示數量。
希望也可以標示這些資產等於多少新台幣或美金，讓使用者比較容易知道自己現在的資產是怎麼分配的。
其他使用者的反饋
根據 App Store 裡的用戶評分與評論，截至 2020 年 3 月總共有 143 份評分，獲得的平均分數為 3.9。而其中又有 43 位除了評分外還有提供評論，我整理了一下之後分析出以下訊息：
除了無法更新、無法登入、速度慢等程序問題外，也提出「介面難用」、「手機介面與網站差異太大」、「功能無法使用」、「功能太過簡化」等與介面流程相關的評論。
從可以更好的地方重新設計
針對上述提出的主要問題，整理出了新的 Functional Map：
接下來，將根據上述歸類出的【可以做得更好的地方】來重新設計介面，希望能打造出心目中 BitoPro 最好用也最好看的型態。
比對舊版與 Redesign 後的使用者介面：
- 改良後將「首頁」與「市場」兩頁合併成一頁，並置於單手操作熱區位置，方便使用者點選。
- 將原本首頁上方的廣告區域縮小，並加上搜尋市場的功能，讓使用者要使用冷門市場交易時不需要滑到很下方。
- 新增了「最近觀看」的欄位，這樣在上一步驟搜尋過的也會自動跳到最近觀看，減少找尋的時間。
- 加入所有幣別的真實 icon，讓使用者可以更清晰的分辨各種幣別。
- 將交易類型的選單從下拉式選單改成左右滑動的方式，讓使用者可以清楚的知道有哪些交易類型可以選擇，同時也更方便點選。
- 因為有些人會習慣看國外的交易所後再來購買，所以在購買單價方框的右上角新增了相當於多少美金的資訊，讓使用者能夠方便換算。
- 加入了輸入總額的方框，可以根據想要花費的總額來回推需要購買的數量。
- 原本要查看已完成的交易紀錄必需跳轉三個頁面才能真正看到想要的資訊，我認為使用起來很不方便。改良後在「已完成」的頁面改成顯示近半年的交易紀錄，如果想要看更多才需要去歷史紀錄篩選查詢。
- 在頁面最下方新增按鈕，讓使用者可以直接跳到歷史紀錄的頁面，不用再往上尋找歷史紀錄在哪裡。
- 將最上方的資產總覽的視覺的設計成像是信用卡的樣子，另外也新增不同幣別的選項，讓使用者可以任意切換。
- 下方不同幣別也加上了各自的小圖示讓使用者可以更清楚的分別。
- 數位資產的部分有別於原先只顯示數量，新版的介面中也顯示了其所代表的新台幣價值。（上方為總資產，下方則為可用餘額）
小小總結
雖然 BitoPro 是台灣多數人使用的虛擬貨幣交易所，但在使用的過程中依舊可以發現許多沒有那麼方便的地方，甚至是比他的競品使用起來更加的不流暢。希望 BitoPro 有機會能改善並提高 App 的使用者體驗，進而增加用戶使用率。
藉由這次的 Redesign 可以發現 UI 設計真的有需多細節需要留意。雖然一開始覺得很複雜，但透過 Redesign 來一步步建立學習目標，我想終究還是能慢慢釐清與了解 UI 設計的。
這篇僅紀錄我就生活中使用到的 App 作改良及發想的過程，因缺乏相關經驗，可能還有許多沒有考量到的點，還請大家多多指教！
👏🏻1~20下：感謝分享，到此一遊。
👏🏻21~30下：覺得這篇文章對你有一點幫助。
👏🏻31~50下：太棒了，覺得獲得很大的幫助！期待之後的分享！
