硬體 UI・專利 — 07 / 000%EN日本語繁中
案例 07 — HTC — 2015 年

我們能不能讓蓋子上的畫面說更多 ——更清楚的回饋、更多功能,而不增加複雜度?

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

專案概述

Ice View 是 Dot View 的後繼:一個平滑無邊、近乎不透明、但看得穿的蓋子。通知、來電、音樂 —— 以及 Dot View 永遠做不到的那件事,蓋著就能開相機拍照

我從早期視覺概念一路主導到上市,並帶領兩位 UI 設計師。我們跑完發想、選定方向,成果申請並取得了專利(TW D182760)。動態設計也由我負責:驗證整段操作流程的動畫原型,以及最後上線的所有動畫。

視覺概念、動畫與動態、原型、UI、設計協調。硬體與 ID、CMF 一起處理,可行性與工程團隊一起確認。

目標

上一代做不到的事

Dot View 全部只有 48 個點可以用。那個天花板把進階功能擋在外面,其中最要緊的是沒辦法拍照。就算把蓋子打開,也還是不好用。

所以 Ice View 不是改個造型。把正面從點矩陣換成半透明面板,買到的是解析度,而解析度買到的是功能。

材質

保護與可讀性往相反方向拉

這個材質能緩衝、能透出內容,而它最難的地方在於它天生就是糊的。保護得好的透明度不好讀,好讀的透明度保護得少。

我們和 CMF 設計師花了很長時間調材質特性,找那個美感與硬體表現同時成立的點。這是整個專案裡,單靠介面設計絕對解不掉的一段。

可讀性

依波長挑,不是依喜好挑

降低材質透明度確實讓可讀性變好,但還是不夠好。所以我們不再把它當成「不透明度」的問題,改當成「波長」的問題來處理 —— 配色最後會變成白底加霓虹,而且以紅與綠為主,原因就在這裡。

參考的是交通號誌的理論:紅與綠在視覺條件劣化時穿透得最遠,而一片模糊的半透明面板正是這種條件。用穿透力而不是品牌或流行來挑介面配色,是這個專案真正轉動的那一個決定 —— 成品蓋子上所有看得清楚的東西,都在它的下游。

隔著蓋子看時鐘 —— 紅與綠,三個層級
隔著蓋子看時鐘 —— 紅與綠,三個層級

流程

蓋子能做什麼,以及順序

為關蓋狀態設計的八段流程,在任何東西被畫成完稿之前先走過一遍。

流程 — 01
流程 — 01
流程 — 02
流程 — 02
流程 — 03
流程 — 03
流程 — 04
流程 — 04
流程 — 05
流程 — 05
流程 — 06
流程 — 06
流程 — 07
流程 — 07
流程 — 08
流程 — 08

動態設計

用形變指出事情發生的位置

動態的原則是用平滑的形變去標示畫面上剛剛發生事情的位置。在這麼擴散的一個面上,位置比細節容易讀;所以本來該由銳利的字體排版負責的「指出來」,改由動畫承擔。

動畫原型是對著實體模型檢視的,不是在螢幕上看。因為透過真實材質之後的流暢度與可讀性,螢幕不會告訴你。

新通知
新通知
來電
來電
從紀錄回撥
從紀錄回撥
打開蓋子看細節
打開蓋子看細節
生日
生日
萬聖節主題
萬聖節主題

記憶體

為什麼全 HD 動畫是最難的要求

半透明的面是整面的,要畫的東西遠比 Dot View 多。但蓋子一關,系統就進入待機,被要求最多的那一刻,正好是可用記憶體最少的那一刻

這個限制對動態的形塑,比任何美學偏好都大。每一段動畫都必須值得它在那個狀態下所花的代價。

基本功能

天氣,以及它背後的畫面

十一種天氣狀態,畫成隔著蓋子、在蓋子允許的尺寸下仍然讀得出來。

晴
高溫
高溫
多雲時晴
多雲時晴
多雲
多雲
霧
風
晴朗
晴朗
大致晴朗
大致晴朗
雨
雷雨
雷雨
雪
功能畫面 — 01
功能畫面 — 01
功能畫面 — 02
功能畫面 — 02
功能畫面 — 03
功能畫面 — 03
功能畫面 — 04
功能畫面 — 04
功能畫面 — 05
功能畫面 — 05
功能畫面 — 06
功能畫面 — 06
功能畫面 — 07
功能畫面 — 07
功能畫面 — 08
功能畫面 — 08
功能畫面 — 09
功能畫面 — 09
功能畫面 — 10
功能畫面 — 10
功能畫面 — 11
功能畫面 — 11
功能畫面 — 12
功能畫面 — 12

成果

Ice View 上市後的評價確實是兩極的。當成 Dot View 的升級版來讀,反應不錯;當成一個案子來讀,抱怨集中在硬體與客製化,而這兩點都成立。

上市時的媒體報導與 Google Play 商店評論,節錄引述
much higher resolution and have a greater variety of colors
The Verge

這印證了前提:面板才是買到解析度與色彩範圍的東西,Dot View 做不到的「蓋著拍照」也是從這裡來的。

needs theme options like dot view
Play 商店評論

我們也想要。主題的 mock-up 做了好幾個,但在硬體限制下每個主題的實作成本都很高,工程無法把它排進首發。

I only wish I could change the colour scheme or font
Play 商店評論

答案一樣,只是問得更尖銳。一套依波長挑出來的配色,很難在不失去它之所以被選中的可讀性的前提下開放給使用者改。

  • 硬體上的抱怨是關於保護。 皮套偏軟、表面容易刮傷。這不是軟體能補的,所以我們把它交給 ID 設計師,作為下一代的輸入。
  • 客製化沒有上線。 Mock-up 存在,時程不存在。用這個順序寫才準確:它是被砍掉的,不是沒想到。
  • 使用者持續在給建議。 評論裡滿是具體的要求和對更新的期待,這比冷淡是好得多的問題。
動態製作 — After Effects
動態製作 — After Effects