互動設計 — 09 / 000%EN日本語繁中
案例 09 — HTC — 2016 年

如何讓手機保持順暢,又不必忍受干擾廣告或複雜設定?

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

專案概述

Boost+ 掃描並清除垃圾檔案、最佳化記憶體與電池,還能替個別 App 上鎖。它不只給 HTC 的機器,也提供給其他 Android 手機 —— 這在當時的 HTC 是比較不尋常的一步。

我是這個案子的動態設計師:分鏡、動畫,以及讓它被正確實作出來的規格。線框與體驗是與 UX 設計師並行做的,競品分析也由我負責,用來釐清我們相對於其他選擇能主張什麼。

動畫、動態設計、分鏡。與 UX 設計師、產品經理和工程團隊協作。
Boost+ 標誌
Boost+ 標誌

沒有人寫在需求裡的那個題目

當時市面上那個 App,是靠使用者誤觸的廣告在賺錢的,而且可能還帶著資安漏洞。要被取代的是這個 —— 把它講出來,就是這個專案存在的全部理由。

這會改變「最佳化 App」在這裡的意思。問題出在這個品類的商業模式上,所以設計目標不是更快的掃描或更好看的儀表,而是「一個人打開它不會因為手滑而被課稅」。底下所有的東西都是從這裡推出來的。

它必須做到的事

手動掃描與清理儲存空間。記憶體最佳化。不用人開口就會自己跑、把效能維持住的 Smart Boost。對使用者挑選的那些 App 持續生效的電池最佳化。以及 App 鎖,把個人資料放在一把鑰匙後面。

一個 App 裡放五件工作,首先是層級問題,其次才是視覺問題:自動的功能必須可信到讓人願意放著不管,手動的功能則必須在使用者不信任它的時候找得到。

扁平幾何,以及水

動態語言是從哪裡來的

乾淨、極簡、單純的幾何元素、扁平。我選幾何,是為了讓頁面之間可以「變形接過去」而不是硬切;動態的想法則來自水 —— 會循環,也會變成容器的形狀

這不是挑一個好看的裝飾。Boost+ 做的事是清掉多餘的東西、把空間拿回來,所以「被清走、又以可用的形式回來」的物質,剛好是這個產品自己的論述被畫出來的樣子。開場是液體潑濺,整套系統從那裡繼承下去。

畫面

在任何東西動起來之前,先和 UX 設計師走過的流程。

首頁 · 垃圾檔通知
首頁 · 垃圾檔通知
流程08

分鏡

動態概念與分鏡。動畫真正被決定的地方就在這裡。

動態概念與分鏡
動態概念與分鏡

動態

用程式碼跑,不是播出來的

動畫是用程式碼實作的,不是包成影片出貨。所以難的地方在交接:一段動畫只會以「你把它講清楚的精確度」存在

所以我給工程的是參數,不是一段參考影片 —— 每個物件什麼時候出現、跑多久、走什麼速度曲線 —— 再對著實際的 build 微調。在 After Effects 裡畫分鏡、做動畫是簡單的那一半;決定它能不能活下來的那一半,是你講得夠不夠精確,讓實作的人沒有讀錯的空間。

首頁開場
首頁開場
首頁進入掃描
首頁進入掃描
Smart Boost
Smart Boost
掃描結果
掃描結果

成果

Boost+ 是 HTC 10 的主打功能之一,在 2016 年的發表會上亮相。它拿到4.5 星、破百萬次下載,使用者開始把它跟當時這個品類最紅的 Clean Master 放在一起比。

這兩個數字都來自原始案例,沒有重新查證過。上線前請先確認。