
我們能不能讓蓋子上的畫面說更多 ——更清楚的回饋、更多功能,而不增加複雜度?
- 公司
- HTC
- 角色
- UI 設計師
- 平台
- 行動裝置
- 期間
- 2015 年
專案概述
Ice View 是 Dot View 的後繼:一個平滑無邊、近乎不透明、但看得穿的蓋子。通知、來電、音樂 —— 以及 Dot View 永遠做不到的那件事,蓋著就能開相機拍照。
我從早期視覺概念一路主導到上市,並帶領兩位 UI 設計師。我們跑完發想、選定方向,成果申請並取得了專利(TW D182760)。動態設計也由我負責:驗證整段操作流程的動畫原型,以及最後上線的所有動畫。
目標
上一代做不到的事Dot View 全部只有 48 個點可以用。那個天花板把進階功能擋在外面,其中最要緊的是沒辦法拍照。就算把蓋子打開,也還是不好用。
所以 Ice View 不是改個造型。把正面從點矩陣換成半透明面板,買到的是解析度,而解析度買到的是功能。
材質
保護與可讀性往相反方向拉這個材質能緩衝、能透出內容,而它最難的地方在於它天生就是糊的。保護得好的透明度不好讀,好讀的透明度保護得少。
我們和 CMF 設計師花了很長時間調材質特性,找那個美感與硬體表現同時成立的點。這是整個專案裡,單靠介面設計絕對解不掉的一段。
可讀性
依波長挑,不是依喜好挑降低材質透明度確實讓可讀性變好,但還是不夠好。所以我們不再把它當成「不透明度」的問題,改當成「波長」的問題來處理 —— 配色最後會變成白底加霓虹,而且以紅與綠為主,原因就在這裡。
參考的是交通號誌的理論:紅與綠在視覺條件劣化時穿透得最遠,而一片模糊的半透明面板正是這種條件。用穿透力而不是品牌或流行來挑介面配色,是這個專案真正轉動的那一個決定 —— 成品蓋子上所有看得清楚的東西,都在它的下游。

流程
蓋子能做什麼,以及順序為關蓋狀態設計的八段流程,在任何東西被畫成完稿之前先走過一遍。








動態設計
用形變指出事情發生的位置動態的原則是用平滑的形變去標示畫面上剛剛發生事情的位置。在這麼擴散的一個面上,位置比細節容易讀;所以本來該由銳利的字體排版負責的「指出來」,改由動畫承擔。
動畫原型是對著實體模型檢視的,不是在螢幕上看。因為透過真實材質之後的流暢度與可讀性,螢幕不會告訴你。






記憶體
為什麼全 HD 動畫是最難的要求半透明的面是整面的,要畫的東西遠比 Dot View 多。但蓋子一關,系統就進入待機,被要求最多的那一刻,正好是可用記憶體最少的那一刻。
這個限制對動態的形塑,比任何美學偏好都大。每一段動畫都必須值得它在那個狀態下所花的代價。
基本功能
天氣,以及它背後的畫面十一種天氣狀態,畫成隔著蓋子、在蓋子允許的尺寸下仍然讀得出來。























成果
Ice View 上市後的評價確實是兩極的。當成 Dot View 的升級版來讀,反應不錯;當成一個案子來讀,抱怨集中在硬體與客製化,而這兩點都成立。
much higher resolution and have a greater variety of colors
這印證了前提:面板才是買到解析度與色彩範圍的東西,Dot View 做不到的「蓋著拍照」也是從這裡來的。
needs theme options like dot view
我們也想要。主題的 mock-up 做了好幾個,但在硬體限制下每個主題的實作成本都很高,工程無法把它排進首發。
I only wish I could change the colour scheme or font
答案一樣,只是問得更尖銳。一套依波長挑出來的配色,很難在不失去它之所以被選中的可讀性的前提下開放給使用者改。
