比設(shè)計App更加復(fù)雜和困難

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

「人機(jī)環(huán)境+場景」的智能硬件分析法

在手機(jī) App 的 UI 設(shè)計過程中，我們經(jīng)常通過產(chǎn)品定位、業(yè)務(wù)訴求等來分析設(shè)計目標(biāo)，但觸屏音箱在使用場景上與手機(jī)并不相同，我們不妨回溯一下，從人機(jī)環(huán)境來推導(dǎo)我們的設(shè)計主旨。

1. 快速傳達(dá)，1米外的清晰識別

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

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

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

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

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

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

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

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

新潮科技的樂趣

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

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

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

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

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

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

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

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