設計經驗談：KKBOX for UWP
Universal Windows Platform 會改變你開發軟體的方式
如何設計 KKBOX 的 UWP 版本？
在開發前，我們設定的目標：
1. 針對 UWP 適用於各種大小尺寸螢幕的特性，做到好的使用者體驗
2. 首先支援 Desktop / Tablet / Mobile ，讓不同裝置間切換可以享受一致的體驗與功能
3. 同時支援手勢與滑鼠的操作
首先，我重新歸納了原本 Windows App 8.1 和 Windows Phone 8.1 的架構。「架構」是我們優先需要處理的問題，原本的WA、WP在規劃時就為了因應平台規範，在架構上有所不同，WP 比較像 Android Phone 的版本，WA 比較貼近 Desktop 版。所以我們決定層級採用手機版本的架構，但平板等大螢幕可以運用 Win 10 分割視窗的特性，善用螢幕空間秀更多資訊。但分割視窗是很新的概念，所以我們運用簡易的紙本測試幫助我們進行設計。
使用者測試
在跟 RD 討論了四種可能性的層級，最後採用 A、B、C 三種方案做測試。
測試重點：
1.大螢幕的動態
2.分割視窗大小
3.更多功能視窗的形式
測試結果：
最後結果我們決定用版本 C 的分割視窗架構，但不同的是我們沒有限制分割視窗的比例，我們讓使用者可以依據自己的使用習慣、情境選擇所需的比例。
另外「更多功能」的顯示方式比較，我們發現微軟官方定義的長按、滑鼠右鍵叫出功能其實很多用戶並不清楚，所以最後加上「…」的icon，並用圖加文的方式顯示功能資訊，讓不新用戶也可以很快上手。
反向思考：UWP 是新的平台架構，我們應該要思考如何讓習慣使用其他平台的使用者，也能迅速上手這個平台。
溝通是成功的關鍵
身為這個案子的設計師，我認為與工程師之間的「溝通」是非常重要的過程，也直接影響到案子的成果。
一般平台的開發過程是線性的，主要由設計師定義好頁面規範，再交由工程師依規則實作，也比較不會有開發時才發現與設計概念落差很大的可能性。但因為 UWP 多平台的特性，許多地方其實是需要設計師與工程師來回溝通的，定義規範這件事更是需要雙方討論後，一起有共識，才能找到更好的解決方式。以下舉三個在這次開發中，進入實作階段才遇到的狀況，因而重新調整設計、規範。
第一個狀況是Tab Bar在平板尺寸螢幕的設計：
1. 我們最初參考了 Win 10 官方的應用程式設計，讓手機 Drawer 上的圖示常駐在畫面左側當作 Tab Bar
2. 搜尋按鈕因為大螢幕版本有分割視窗的原因，所以調整位置在大螢幕時放到 Tab Bar 上
但第一點因為主題面板功能的關係，發現我們的軟體不適合只呈現圖示而沒有文字輔助（換了面板後會無法依圖示理解各項功能是什麼），並因為有多語系的問題，所以我調整了 Tab Bar 的寬度，並加上文字資訊。
第二個狀況是搜尋頁面
在上面有敘述到，大螢幕尺寸我們把搜尋按鈕位置放進 Drawer 裡，但搜尋框輸入位置在 Drawer 展開，會讓 Drawer 需要在這個功能頁面常駐，這和 Drawer 在其他頁面都會收起來的狀態相牴觸，在實作上會特別費工。所以經過五次的重新設計與實作討論中，我們最終決定用最簡單的版本——比照手機的架構設計平板的搜尋頁。這個方式不只減少了工程師不必要的問題，也是使用者最能無痛接軌的做法。
第三個狀況是現正播放頁面
第一版本現正播放頁面的設計，畫面的功能在所有螢幕尺寸都是一致的，但是在大螢幕上左右兩側會非常的空，所以工程師跟我提議想善用空間，直接把歌詞顯示出來放在專輯封面旁邊。我認為這是好的建議，所以我開始進行改版，但我當下並不知道這個簡單的想法，需要花我三天的工作時間去重新定義這個頁面。
我們從工程師列給我的這串邏輯開始重現：
1. Width > n
2. Height > m
3. Width > n && Height > m （不含Status Bar 高度）
專輯封面 & 歌詞範圍定義：
1. Set album cover minimum height
2. Set lyrics minimum width
若 album cover.height < 1.，則檢查 width 是否 > 2.
此條件成立，則 lyrics 展開
（song access 的三顆按鈕要跟著 lyrics，song/album name 跟著 album cover）
但是實際上在看到這串邏輯的時候，我腦中並無法直接跑出畫面，所以我只好用最土法煉鋼的方式，畫出所有可能的螢幕尺寸會遇到的狀況，再重中找到每個需要定義給工程師的數值。(這個例子也證明工程師是邏輯的動物，設計師是視覺的動物 XD)
然而，即使我們定義的非常詳細，也是會有無法預期的例外。
在手機的橫向狀態，會發生因為螢幕高度不夠，歌詞只能顯示一行的狀況，所以之後我們又另外增加了手機橫向版本的定義，讓雖然是寬螢幕的手機，歌詞與封面還是需要做切換。
最後，在滑鼠與手勢之間，也是需要做定義的。
例如我們有直向的滑動與橫向的子物件滑動，但是滑鼠不可能用滾輪同時做到兩種滑動，所以只能另外增加了左右箭頭的按鈕，輔助子物件滑動。
延伸資訊：
我們工程師 Pou Lin 寫的介紹文：KKBOX for UWP 新體驗新方向
我們的應用程式已經在今年四月上架，歡迎大家下載使用，讓 KKBOX UWP 版本改變你用應用程式的習慣。
前往微軟市集下載
如果有任何問題歡迎寫信到 uwp-dev-intl@kkbox.com，讓我們的團隊持續優化我們的產品，提供你更好的體驗。謝謝！
謝謝閱讀本篇文章
— 英文版本閱讀
