Synology BeeStation

Company

Synology

Role

UI Designer

Year

2022 - 2025

針對家庭使用者開立的產品線,將原本 NAS 作業系統複雜的架設流程簡化,讓一般使用者能夠在幾分鐘內打造自己的私有雲端。

Synology BeeStation

Company

Synology

Role

UI Designer

Year

2022 - 2025

針對家庭使用者開立的產品線,將原本 NAS 作業系統複雜的架設流程簡化,讓一般使用者能夠在幾分鐘內打造自己的私有雲端。

Synology BeeStation

Company

Synology

Role

UI Designer

Year

2022 - 2025

針對家庭使用者開立的產品線,將原本 NAS 作業系統複雜的架設流程簡化,讓一般使用者能夠在幾分鐘內打造自己的私有雲端。

Product goal

簡單直覺的個人雲端儲存裝置

簡單直覺的個人雲端儲存裝置

Mission and Role

產品初衷是讓沒有技術背景的使用者,也能輕鬆擁有自己的私有雲。作為主責介面設計師,完整的經歷產品開案至產品發售的過程,從簡化安裝流程、到對齊現有雲端的操作介面經驗,以及打造了 BeeStation 所有內建軟體的元件設計系統。

First time setup

新手友善的啟用流程

新手友善的啟用流程

Feature

將機器註冊的流程精簡化,為了讓初階使用者更好理解,從電源啟動、輸入機器序號等皆用獨立頁面來呈現,同時採用動畫效果指出明確的動作位置。頁面皆設定好 RWD 定義,使用者無需事先下載任何 App,使用手機也能在網頁上完成設定,不用 5 分鐘即可體驗個人的雲端儲存之旅。

啟用裝置引導說明

以一頁一個步驟進行引導,使用 GIF 圖片來強化引導說明,讓新手使用者更好尋找對應的行為位置。

無需額外下載 App,在任何手機網頁上都能完成設定

定義好頁面響應式行為,且在輸入序號頁針對手機版進行調整,讓使用者可以透過掃描 QR-Code 方式,直接進行裝置綁定。

順手啟用雲端備份功能,讓使用者做好資料的完整保護

因 BeeStation 僅有一顆硬碟無法組成 RAID 1 以上的磁碟陣列,故在流程最後引導使用者啟用 BeeProtect 功能,將資料同時備份到 Synology 的雲端伺服器空間,來防範機器故障時資料遺失的風險。

BeeStation Portal

管理所有裝置

管理所有裝置

Feature

完成機器的初次設定流程後會進入裝置管理頁面,此處可以瀏覽該帳號底下的所有機器狀態,考量使用者可能擁有多台機器,以及未來可能會新增 BeeStation 型號,故以卡片的形式來呈現。該管理頁面也會顯示新手引導提示、新功能更新等相關訊息視窗。

歡迎視窗指引

完成啟用流程後進入裝置管理頁面,該頁面列出該帳號底下所持有之設備。使用者首先會看到歡迎視窗來告知使用者機器已內建好兩個主要應用程式 BeeFiles 與 BeePhotos。

裝置卡片樣式

顯示裝置運作是否正常,透過滑鼠懸浮即可看到 BeeFiles 與 BeeFiles 之按鈕,讓使用者足夠直覺地打開兩個應用程式。

轉移技巧懸浮面板

在頁面右下角的燈泡符號,點擊後會列出常見的資料移轉方式,讓使用者有效率的將公有雲或個人硬碟上轉移資料。

BeeStation OS 更新視窗

在機器有新版本的軟體更新時,會顯示蓋版視窗來告知使用者新版本的推出,並且有哪些新的 Beta 功能可以體驗。

Beta 功能提提示

在更新視窗點擊列表項目,可進到下一層查看詳細的新功能描述。

Build in applications

BeeFiles 檔案管理應用

BeeFiles 檔案管理應用

Application features

BeeFiles 為主要的檔案管理網頁應用,使用者可在此網頁上傳檔案。除了常見的檔案預覽、搜尋、分享的功能以外,BeeFiles 提供額外的標籤功能,讓使用者可以對打案進行標籤管理,更好的對檔案分門別類。

BeeFiles 另外還提供了備份公有雲如 Google Drive, Drop box 的功能,可以將備份任務設定為單向或雙向同步,利於整合四散在公有雲的檔案進到 BeeStation 裡面,

列表與縮圖預覽檔案方式

與常見之雲端硬碟相同,提供列表與縮圖模式讓檔案預覽上可以更加方便。

備份外接硬碟與公有雲檔案

備份來自不同硬碟與不同公有雲內的檔案資料,使用者可以設定單向/雙向同步,以及選擇同步跟目錄或特定的資料夾。 以卡片的方式列出以建立的同步任務,卡片左下角帖出任務當前狀態,讓使用者快速理解當前同步狀況。

快速搜尋選單

列出常見之檔案類型,供使用者快速點擊來篩選特定類型之檔案。 另外也提供進階搜尋來設定時間範圍、檔案大小等功能。

Avatar 選單

使用者可於 Avatar 選單進行進階設定,例如設定語系、版本數量上限、Log 等資訊。

背景任務懸浮面板

當使用者同時上傳或移動多個資料時,面板會顯示任務進度。 其中公有雲與外接裝置備份會被 Pin 在最頂端以利使用者隨時檢視。

Desktop application

桌面同步工具
BeeStation for desktop

桌面同步工具
BeeStation for desktop

Application features

桌面應用程式能夠同步與備份電腦端的資料,使用者可以設定掛載隨需同步資料夾,在電腦端點擊檔案時才將檔案從 BeeStation 下載,來節省電腦端的容量。

安裝與設定完畢後在電腦系統的選單列會顯示 Tray icon 符號,點擊後會顯示懸浮面板顯示即時的檔案同步進度,使用者也可以在此查看 BeeStation 相關的通知訊息。

Tray Panel 懸浮面板

在電腦系選單列會顯示 BeeStation 符號,在上傳中會有符號變化來提示使用者當前的運作狀況。

設定隨需同步資料夾

完成安裝桌面應用程式時需指定隨需同步資料夾位置,之後在點擊檔案的當下才會將檔案下載下來,使用者也可以在該資料夾直接上傳檔案。

設定電腦端資料夾備份任務

對電腦端的指定資料夾進行備份,使用者可以選擇將檔案備份至 BeeFiles 或 BeePhotos,當資料夾內有異動時會及時進行變更。

資料夾備份方式

資料夾備份可以設定單向或雙向的同步模式,在單向模式下於 BeeFiles 上進行的檔案異動不會影響到電腦端的資料夾。

Email Template

郵件通知樣式

郵件通知樣式

Features

BeeStation 的郵件系統用來通知使用者重要的訊息。 例如在完成啟用流程後會發信給使用者相關的操作訣竅與教學。在 BeeStation 有新的系統版本更新時也會透過信件告知,有哪些新的功能即將推出可以提前加入 Beta 版本測試計劃。

歡迎信件

當使用者完成啟用流程,系統會自動寄送歡迎信件,將重要的網址與軟體資訊提供給使用者保存。

軟體更新信件

BeeStation 有新的可用軟體更新時,系統會寄送信件通知使用者,並簡述該版本新增的功能與特色。

Design Systme

設計系統規劃與元件變數整理

設計系統規劃與元件變數整理

Features

BeeStation 擁有完整的設計系統,從字級變數、色票、介面元件皆有完整的文件定義,讓 BeeStation 內建的所有應用程式能共通用此一設計系統,讓整體的視覺維持一致。

Visual Guideline

圖標與應用程式 Logo

圖標與應用程式 Logo

Features

BeeStation 內使用的 icon 的粗細、顏色皆有統一規範,另外 Logo 的顏色也與主要介面色票有所關聯。

Next project

Synology DSM 8.0

Synology DSM 8.0