UI界面設(shè)計

觸屏音箱的UI界面設(shè)計方法

3125

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

“人機環(huán)境+場景”的智能硬件分析法

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

以上分析出設(shè)計目標主旨

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

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

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

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

3.品牌新潮科技的樂趣

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

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

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

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

新潮科技的樂趣

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

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

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

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

在設(shè)定大數(shù)字字體的當(dāng)初，我們幾乎嘗試市面所有的字體，并沒有找到我們心中的完美，最終我們決定設(shè)計一款小愛觸屏音箱的屏顯字體，在進行了一系列無襯線字體的字體研究之后，我們找到方向，以MITYPEY為藍本，保留了前者的幾何美感，增加了溫度與人文的親和力。關(guān)于【MiAitype字體設(shè)計的思考過程】，會在下一期詳細展現(xiàn)