Design System
/
Web Design
BeeStation
專為個人資料管理而設計的儲存設備，輕鬆打造私有雲端。
About
Synology BeeStation 是一款簡單易用的個人雲端儲存裝置，它的設計初衷是讓沒有技術背景的使用者，也能輕鬆擁有自己的私有雲。
作為主責介面設計師，完整的經歷產品開案至產品發售的過程，從簡化安裝流程、到對齊現有雲端的操作介面經驗，以及打造了 BeeStation 所有內建軟體的元件設計系統。
Easily Setup Expierences
傳統網路儲存裝置 (NAS) 的設定過程，對一般家庭使用者而言有較高的設定門檻。例如需要理解如 IP 位址、RAID 陣列，帳號權限設定等等，整個過程不僅耗時，也容易出現挫折感。
BeeStation 透過內建硬碟的方式，並將機器註冊的流程精簡化，使用者可以選擇用 Google Account 登入，在連接好裝置的電源與網路線後，輸入裝置的序號即可開始，近乎在 3 分鐘之內即可體驗個人的雲端儲存之旅。
BeeStation Web Portal
BeeStation 的雲端管理平台，協助使用者註冊機器與裝置管理。
問題與解方
BeeStation 透過內建硬碟的方式，並將機器註冊的流程精簡化，使用者可以選擇用 Google Account 登入，在連接好裝置的電源與網路線後，輸入裝置的序號即可開始，近乎在 3 分鐘之內即可體驗個人的雲端儲存之旅。
簡化登入方式
BeeStation 的登入頁採用固定的雲端網址，使用者無需識別機器的 IP 地址也可以進行啟用流程。且登入方式也可採用 Google 帳號登入，省去重新註冊帳號與密碼的時間。
一頁一步驟引導設定
在裝置啟用流程上，為了讓初階使用者更好理解，從插入網路孔、電源啟動、輸入機器序號等皆用獨立頁面來呈現，同時用簡單的動畫效果指出明確的動作位置。
僅使用瀏覽器就能完成啟用
在 Web Portal 的流程皆設定好網頁的適應性體驗，使用者無需事先下載任何 App，就算使用手機也能在網頁上完成設定。
1
Web Login Portal
2
Desktop Web Setup
3
Mobile Web Setup
順手啟用資料保護服務
因 BeeStation 僅有一顆硬碟無法組成 RAID 1 以上的磁碟陣列，故建議使用者額外啟用雲端備份功能。
歡迎畫面
透過歡迎視窗來告訴使用者已經完成設定，並且已經內建好兩個應用程式可以立即開始使用。
裝置管理列表頁面
考量使用者可能擁有多台機器，以及未來可能會增加新的 BeeStation 型號，故以卡片的形式來呈現。
小技巧引導提示
為了更好的引導初階的使用者，我們在裝置管理頁面右下角新增了友善提示，讓初次使用時能夠知道使用訣竅，例如：從不同的雲端將資料匯入等方式。
BeeStation Device Portal
Synology BeeStation 是一款簡單易用的個人雲端儲存裝置，它的設計初衷是讓沒有複雜技術背景的使用者，也能輕鬆擁有自己的私有雲。
作為主責介面設計師，完整的經歷產品開案至產品發售的過程，從簡化安裝流程、到對齊現有雲端的操作介面經驗，以及打造了 BeeStation 所有內建軟體的元件設計系統。
透過簡易的登入行為，省去複雜建立帳號的過程，即可快速啟用裝置。
一頁一個步驟，降低使用者安裝時的焦慮，並透過動畫的方式來引導使用者安裝裝置。
頁面皆設好 RWD ，不需透過額外的 App 也可以在手機上完成裝置啟用。
1
Web Login Portal
BeeStation 管理 Portal
以卡片式的方式來呈現裝置列表，並透過 Hover 行為來打造 aha moment ，讓使用者知道系統內的兩個主要服務。
右下角的小技巧提示，讓初次使用者能夠先行閱讀或匯入資料
BeeStation 內應用程式：BeeFiles, BeePhotos
對齊市面上主流雲端的操作介面架構，讓上手沒有任何複雜度
BeeStation 手機應用程式：BeeFiles
在系統管理頁面新增裝置管理行為， 對設計資訊佈局再改造
BeeStation 桌面應用程式：Desktop Client
在電腦端也可安裝輔助應用程式，來備份電腦端的資料。第一次接觸到 Tray icon & Tray Panel 的設計行為。
BeeStation 設計系統
BeeStation 除了品牌 Logo 由視覺設計部門設計外，其他軟體所出現的 Logo 皆由我這邊處理，其中以 BeeFiles, BeePhotos 爲最主要的視覺識別。
BeeStation Logo 設計
從上述可以看出，BeeStation 內有非常多安裝與應用程式流程，故需要一套有系統的設計元件，來衍生相關的服務讓其視覺能夠有一致性。
