硬體 UI・互動 — 06 / 000%EN日本語繁中
案例 06 — HTC — 2014 年

能不能讓手機在皮套關著的情況下就回答問題 ——一眼看到重點,且少幾個步驟就能行動?

公司
HTC
角色
UI 設計師
平台
行動裝置
期間
2014 年

專案概述

Dot View 是一個正面為點矩陣的翻蓋皮套。隔著關起來的蓋子就能顯示時間、天氣與來電者,讓最常問的幾件事不用打開任何東西就有答案

我負責搭配 App 的 UI 與流程、適合點矩陣螢幕的轉場與動態,以及讓這件產品有個性的微互動與節日動畫。這份需求與其說是功能,不如說是性格:在 2014 年,一個只能談保護的翻蓋皮套沒有任何話可說。

在核心團隊負責 UI 與動態設計:與 UX 設計師共同產出線框與體驗,與 ID、CMF 處理硬體整合,與 PM 確認範圍與時程,與工程團隊協作實作。
主視覺
主視覺

目標

單手,且蓋子不用打開

透過翻蓋皮套操作手機,傳統上的第一步是先把蓋子打開。單手時這很別扭 —— 而單手正是手機大多數時候被使用的方式

所以目標不是做一個更好的蓋子,而是讓「關起來」這個狀態本身夠用,使「打開」不再是每一次互動的第一步。

設計方法
設計方法

限制

其中兩項設計無法繞過
  • 不支援第三方通訊軟體通知。 受限於授權問題而無法顯示 —— 而這個產品的整個提案就是「一眼看到通知」。
  • 每一款手機的感測器位置都不一樣。 Dot View 靠霍爾感測器讀磁鐵運作,新機型一出位置就會移動,連帶蓋子上的開窗該蓋住什麼也跟著變。
  • 誤觸發。 一個會對「被關上」反應的蓋子,也會對口袋反應。我們設計了一個手勢來防它,使用者還是持續回報。

我們做了什麼

相較上一代的六項新增

我們選擇直接去談 —— Google、Facebook、Line、WhatsApp、WeChat —— 把各家的通知圖示以 Dot View 的風格重畫,讓人們真正會收到的通知終於能顯示出來

至於感測器的問題,我們與 ID 與機構工程合作,按機型逐一調整 UI 位置,並把關鍵功能收斂成即使被移動也站得住的圖像化畫面。這是這個專案不好看的那一半,也是決定了它在使用者手上那支手機能不能用的那一半。

線框 — 01
線框 — 01
線框 — 02
線框 — 02
線框 — 03
線框 — 03
線框 — 04
線框 — 04
蓋子 UI — 時間、天氣、通知
蓋子 UI — 時間、天氣、通知
第三方通知
第三方通知

節日主題

八個節日,每個三段動畫

系統會認出即將到來的節日或生日,並換上那一天的裝扮。主動畫在主畫面,另外兩段出現在來電畫面與媒體控制,讓這個節日跟著使用者走進互動裡,而不只是貼在一張壁紙上

新年 — 主畫面
新年 — 主畫面
新年 — 通知
新年 — 通知
新年 — 來電
新年 — 來電
情人節 — 主畫面
情人節 — 主畫面
情人節 — 通知
情人節 — 通知
情人節 — 來電
情人節 — 來電
愚人節 — 主畫面
愚人節 — 主畫面
愚人節 — 通知
愚人節 — 通知
愚人節 — 來電
愚人節 — 來電
母親節 — 主畫面
母親節 — 主畫面
母親節 — 通知
母親節 — 通知
母親節 — 來電
母親節 — 來電
父親節 — 主畫面
父親節 — 主畫面
父親節 — 通知
父親節 — 通知
父親節 — 來電
父親節 — 來電
萬聖節 — 主畫面
萬聖節 — 主畫面
萬聖節 — 通知
萬聖節 — 通知
萬聖節 — 來電
萬聖節 — 來電
聖誕節 — 主畫面
聖誕節 — 主畫面
聖誕節 — 通知
聖誕節 — 通知
聖誕節 — 來電
聖誕節 — 來電
農曆新年 — 主畫面
農曆新年 — 主畫面
農曆新年 — 通知
農曆新年 — 通知
農曆新年 — 來電
農曆新年 — 來電

Dot View 主題

隨時可切換

為 Dot View 2.0 設計的三個主題,同樣在三個畫面上各自動起來。

太空梭 — 主畫面
太空梭 — 主畫面
太空梭 — 通知
太空梭 — 通知
太空梭 — 來電
太空梭 — 來電
熱氣球 — 主畫面
熱氣球 — 主畫面
熱氣球 — 通知
熱氣球 — 通知
熱氣球 — 來電
熱氣球 — 來電
夜生活 — 主畫面
夜生活 — 主畫面
夜生活 — 通知
夜生活 — 通知
夜生活 — 來電
夜生活 — 來電

延伸應用

Dot Breaker ・ Dot Design ・ Dot Message

在 Samsung 賣電鍍皮套、第三方包辦 iPhone 的市場裡,「保護」不是一個位置。所以我們做了三支 App,讓這個皮套從「擁有的東西」變成「使用的東西」

Dot Breaker

打磚塊是少數在低解析度單色蓋子上依然完全讀得懂的東西。

二十關,蓋子關著時用陀螺儀操作。這個皮套本來就是一塊點矩陣螢幕,而這個遊戲不向它要任何它給不起的東西 —— 不要精細輸入,也不要它畫不出的細節。

完成度
App 端的 UI 也全部使用點矩陣字體,讓手機上的畫面與蓋子上的遊戲看起來是同一件產品,而不是一款遊戲配一個皮套。
線框 — 01
線框 — 01
線框 — 02
線框 — 02
線框 — 03
線框 — 03
商店頁面
商店頁面
教學
教學
選關
選關
遊戲狀態
遊戲狀態
開場畫面
開場畫面
遊戲畫面
遊戲畫面
遊戲結束動畫
遊戲結束動畫
過關動畫
過關動畫
Dot Design

不想從空白開始的人有範本,想從空白開始的人有空白

使用者可以自己做 Dot View 的壁紙。入口就只有這兩個,而這兩個就是全部 —— 有個東西可以接著改,或者什麼都沒有。

完成度
浮動式的選單,可以拖走。在畫布上,工具總是擋到正在畫的那一塊 —— 固定工具列會讓它所在的那個角落永遠畫不到。
線框 — 01
線框 — 01
線框 — 02
線框 — 02
線框 — 03
線框 — 03
商店頁面
商店頁面
編輯畫面
編輯畫面
更多功能
更多功能
完成的設計
完成的設計
草稿庫
草稿庫
設為壁紙
設為壁紙
Dot Message

蓋子不再只是一個讀數,而是別人可以在上面寫字的地方

文字在皮套正面跑過,而發送的是另一個人的手機。

傳送
傳的人決定內容、顏色與閃爍頻率,再發到對方的皮套上。
線框
線框
設定頁
設定頁
動畫模擬
動畫模擬

成果

Dot View 獲得正面回響,The Verge 與 CNET 都報導了新功能與搭配 App。原始碼也對外釋出,讓開發者可以做自己的 App 與主題。

  • 誤觸發並未真正消失。 即使設計了防誤觸的手勢,使用者仍持續回報。我們修正設計並更新 App 來降低它 —— 是緩解,不是解決。
  • 最大的收穫是走出自己的專業。 與 UX 設計師做線框、與 ID 與 CMF 對硬體、與工程確認可行性。要被理解的對象變廣了,反而磨出了對細節的講究。