比設計App更加復雜和困難

前不久，小愛觸屏音箱發布。作為 VUI x GUI 的多模態交互產品（VUI，Voice-user interface。GUI，Graphical User Interface），其背后的 UI 體系真的是比 App 更復雜。因為當前全球多模態產品發展并不完善，很難借鑒，唯有探索創新。而 VUI 與 GUI 的復合并非只是簡單的加法，背后還有很多體驗細節的反復考量。而同時，小愛觸屏音箱也是與手機類似的平臺屬性的產品。那我們該如何設計這個復雜和全新的 UI 體系？本文會為大家分享小愛觸屏音箱的設計思考。

「人機環境+場景」的智能硬件分析法

在手機 App 的 UI 設計過程中，我們經常通過產品定位、業務訴求等來分析設計目標，但觸屏音箱在使用場景上與手機并不相同，我們不妨回溯一下，從人機環境來推導我們的設計主旨。

1. 快速傳達，1米外的清晰識別

小愛觸屏音箱一般擺放在臥室床頭，用戶在使用時與音箱的距離相比手機要遠很多，且很多時候是大于 1 米的。所以字體與顏色需要更強烈的識別性，以達到快速傳達信息的目的。

2. 信息>操作的輕量界面交互

在大多數的觸屏音箱使用場景里，用戶可通過語音更便捷地進行人機交互，這時候屏幕的作用就成了：展示信息為主，功能操作為輔。例如，在家一邊收拾房間一邊用觸屏音箱聽音樂，用戶可能會有以下需求：看歌詞、聽到喜歡的音樂想收藏、切換歌曲。后面兩個需求只需說一句：「收藏這首歌」或「換一首」就行，非常便捷。而且此時雙手被占用，界面交互很麻煩。所以點擊收藏和切換音樂等操作控件可以弱化、展示歌詞信息可以更突出。

3. 品牌，新潮科技的樂趣

小愛觸屏音箱作為提升生活體驗、跟隨新技術應運而生的新潮多模態交互產品，其主要功能有聽音樂、時鐘表盤、看視頻、控制家庭智能設備等。娛樂性強，需要新鮮感、樂趣與吸引力，且符合小愛同學年輕活力的形象。

4. 1米外的快速識別，需要顏色比值>5的色彩搭配

手機 APP 的常用控件為彩色底+白字，比值在 1.5-3.54 的區間，近距離觀看柔和不刺眼，但為了增強識別性，音箱的控件是彩底黑字，比值區間在 5.25-16.59。顏色比值計算：https://contrast-ratio.com

VUI（語音交互）的使用場景中，距離音箱一般大于 100cm，屏幕上面的字體需要更強烈的識別性，而當近距離時，GUI 交互會更便捷。如果字號還是像遠場時那么大，就會浪費屏幕空間。所以需要針對 GUI 和 VUI 設置不同的字號與字重。

新潮科技的樂趣

小愛觸屏音箱作為提升生活體驗、跟隨新技術應運而生的新潮多模態交互產品，大多數用戶是基于嘗鮮的心態購買和體驗，所以我們希望賦予她符合更多的新鮮感、樂趣與吸引力。從時尚潮流趨勢獲得更有活力和視覺吸引力的顏色質感搭配。

喚醒動效的設計我們希望傳遞具有生命力的科技與小愛同學的形象感受，沿用小愛同學的紅色，從自然中的螢火蟲與水母的運動和形態獲得靈感，形成有生命呼吸節奏的喚醒動效。

喚醒動效是象征有著生命的科技小愛，而音箱初始化的過程就是這個科技生命正在生長的過程。她們具有同樣的視覺元素：圓和紅色，并通過匯聚、心跳節奏、扁平質感來表現正在生長中的狀態。

大多數 APP 的天氣背景分三種：純色、風景圖片、扁平插畫。我們想探索不一樣的視覺方式，展現更多的吸引力。在抽象與具象中獲得平衡，顏色是抽象的，黃色是陽光，藍色是雨，白色是雪，但顏色變化和流動的韻律又是具象的，平緩的橫向變化是安靜的雪晨，紅色黃色的擁擠像熱得透不過氣的夏天，卷涌的咖啡色和灰綠是呼嘯的沙塵暴。

在設定大數字字體時，我們幾乎嘗試了市面所有的字體，并沒有找到我們心中的完美，最終我們決定設計一款小愛觸屏音箱的屏顯字體，在進行了一系列無襯線字體的字體研究之后，我們找到方向，以 MITYPEY 為藍本，保留了前者的幾何美感，增加了溫度與人文的親和力。

展示為主的輕量級界面交互

聽音樂時候用戶可能會有以下需求：看歌詞、聽到喜歡的音樂想收藏、切換歌曲等。后面兩個需求只需說一句：「收藏這首歌」或「換一首」就行，非常便捷。而且在大多時候，用戶并不在音箱跟前，并不想進行界面交互。所以點擊收藏和切換音樂等操作控件收藏在左上角的更多 icon 里，以展示歌詞信息為主。

Iot 控制也是遵循輕量便捷交互的原則，單點卡片關閉或開啟，長按展開更多內容與操作。