輸入法界面設(shè)計(jì)之乾坤

對于輸入法這樣的工具性產(chǎn)品來說，怎樣的界面設(shè)計(jì)才是好的？輸入法界面設(shè)計(jì)中又隱含著哪些理念？大家一起來看一下吧：）

隨著百度手機(jī)輸入法Android3.6版正式發(fā)布，迎來了全新第六代界面，新的界面更簡潔更人性化。在設(shè)計(jì)時從更多細(xì)節(jié)出發(fā)，多維度提升用戶輸入感受，盡可能提升輸入效率/準(zhǔn)確率，讓產(chǎn)品足夠簡單可依賴~~

清晰是首要的：字體選擇+字號設(shè)定+環(huán)境對比度

讓用戶有效使用，保證足夠明確的清晰是首要的。如何降低用戶辨識時間？影響清晰的因素是多維度的，其中包括：用哪種字體？字號怎樣設(shè)定？文字和環(huán)境對比度的關(guān)系怎樣？等等

用哪種字體？

選擇字體的時候，至少要滿足如下三點(diǎn)：1. 飽滿，2.簡潔，3.字母長寬比與按鍵相融合
選擇飽滿、無稱線的字體，清晰簡潔，無需花費(fèi)額外的時間加以辨認(rèn)，是輸入效率保證的基石。

字號怎樣設(shè)定？

字體確定后，進(jìn)行了多字號對比嘗試。并且針對不同分辨率都經(jīng)過多次嘗試適配，同時輔以用戶測試，以找到最優(yōu)選擇。最終選擇適當(dāng)加大一點(diǎn)的字號，讓字母與背景更好的融為一體，成為一個按鍵整體。并且對個別字母進(jìn)行單獨(dú)調(diào)整，以保證每一個字母的體量一致性。

文字和環(huán)境對比度的關(guān)系怎樣？

面板的整體色調(diào)設(shè)計(jì)，考慮手機(jī)系統(tǒng)、應(yīng)用場景、按鍵間對比等諸多方面。

整體面板僅保留了一定程度的色彩傾向，更適應(yīng)手機(jī)系統(tǒng)，能更好的融入各應(yīng)用場景。延續(xù)背景上徑向漸變設(shè)計(jì)，引導(dǎo)視覺焦點(diǎn)，同時保證字母鍵與功能鍵一定程度的對比，保證用戶快速辨認(rèn)。

在顯示效果上，對不同分辨率進(jìn)行分別考慮。對小分辨率低端機(jī)進(jìn)行簡化處理；在高分辨率主流機(jī)型上，進(jìn)行色調(diào)的微調(diào)，滿足細(xì)膩的色彩顯示，讓不同分辨率下視覺上看起來一致。

界面是為體驗(yàn)而存在的：默認(rèn)面板高度+行間距優(yōu)化

默認(rèn)面板高度

綜合考慮系統(tǒng)、競品、以往版本用戶調(diào)整反饋，分別給出默認(rèn)高度建議值，以及最高最低調(diào)整區(qū)間建議。根據(jù)線上版本的跟蹤數(shù)據(jù)分析結(jié)果，對默認(rèn)面板的高度進(jìn)行優(yōu)化，以符合更多用戶的基礎(chǔ)使用習(xí)慣。

行間距優(yōu)化

針對點(diǎn)擊按鍵落點(diǎn)區(qū)域進(jìn)行測試，測試得出：用戶點(diǎn)擊按鍵的落點(diǎn)位置整體偏下。

實(shí)際點(diǎn)擊的位置，比用戶心里預(yù)期點(diǎn)擊位置整體偏下。
所以在設(shè)計(jì)時增加行間距，從視覺上引導(dǎo)用戶點(diǎn)擊位置上移，提高實(shí)際落點(diǎn)，減少了誤點(diǎn)下一行按鍵的幾率，有效的提高輸入的準(zhǔn)確率。

無規(guī)矩不方圓：圖標(biāo)一致性規(guī)范+語意優(yōu)化

對于輸入法產(chǎn)品來說很多功能是特殊的，在一般APP中并不存在，如：面板切換、輸入方式切換、全鍵盤、拇指鍵盤等……因此形成輸入法產(chǎn)品特有的圖標(biāo)體系是非常必要的。

圖標(biāo)一致性規(guī)范：

啟用全新界面的同時對原有圖標(biāo)體系進(jìn)行優(yōu)化，根據(jù)產(chǎn)品特性采用面性圖標(biāo)為主，線性圖標(biāo)為輔的原則，同時對圖標(biāo)圓角、線條寬度等進(jìn)行規(guī)范。

語意優(yōu)化：

保證圖標(biāo)一致性是第一步，正是由于輸入法產(chǎn)品圖標(biāo)特殊性，對于語意層面的提煉亦變得很重要。對于用戶難以理解的圖標(biāo)進(jìn)行優(yōu)化，通過多種效果嘗試并配合用戶可用性測試的形式進(jìn)行驗(yàn)證，確定方案迭代上線。

———————————————————————————————————————————————————

以往默認(rèn)界面設(shè)計(jì)過程中積累了什么？

擬物設(shè)計(jì)不一定很美好，寫實(shí)按鍵的顛覆

百度手機(jī)輸入法第二代默認(rèn)界面，當(dāng)時用戶使用觸屏手機(jī)主流分辨率為320*480px，隨著輸入法V2.0版本的發(fā)布，我們開始接手產(chǎn)品設(shè)計(jì)，當(dāng)時擬物化設(shè)計(jì)相對流行，人們認(rèn)為軟件界面設(shè)計(jì)越接近于現(xiàn)實(shí)生活，用戶認(rèn)知和接受成本相應(yīng)越低。蘋果很多擬物化的典范，也貌似證明了這點(diǎn)。

由于觸摸屏沒有物理反饋，沒有辦法帶給用戶真實(shí)的按鍵感受，嘗試在現(xiàn)實(shí)生活中找到映射，將按鍵設(shè)計(jì)接近于實(shí)體按鍵，從視覺感受上做彌補(bǔ)。

但通過對上線后數(shù)據(jù)監(jiān)控以及用戶可用性測試，效果并不如預(yù)期。

輸入法是一個工具性產(chǎn)品，如何保證輸入效率/準(zhǔn)確率和用戶情感間的平衡？

輸入法產(chǎn)品用戶選擇第一要素是效率/準(zhǔn)確率，一切影響這點(diǎn)的設(shè)計(jì)都不是好的設(shè)計(jì)，雖然擬物化的設(shè)計(jì)在一定層面滿足用戶對實(shí)體按鍵的認(rèn)知映射，但由于面板可展示空間有限，小空間和復(fù)雜質(zhì)感間的沖突反倒給用戶帶來更強(qiáng)的心里負(fù)擔(dān)。根據(jù)產(chǎn)品特性進(jìn)行設(shè)計(jì)是必須的，但不能單單跟隨設(shè)計(jì)潮流，時刻將設(shè)計(jì)趨勢和產(chǎn)品特性進(jìn)行結(jié)合，并以數(shù)據(jù)驗(yàn)證為依據(jù)進(jìn)行設(shè)計(jì)才是王道。

恰當(dāng)?shù)囊曈X分層，為用戶視覺降噪

之后乃至最新版的界面設(shè)計(jì)，果斷去掉了復(fù)雜的擬物按鍵形式，通過清爽且無色彩傾向的灰白作為搭配。設(shè)計(jì)團(tuán)隊(duì)和用戶研究緊密配合，對影響用戶輸入效率/準(zhǔn)確率的各種因素進(jìn)行分拆驗(yàn)證，針對按鍵形狀、按鍵間距、按鍵前景顏色、按鍵背景顏色、按鍵尺寸與比例、輸入?yún)^(qū)按鍵顏色與功能區(qū)按鍵顏色等進(jìn)行對比測試……

經(jīng)過測試發(fā)現(xiàn)，輸入?yún)^(qū)和功能區(qū)，高對比更容易識別。對比度越大的界面，用戶準(zhǔn)確率/效率越高，但綜合考慮視覺層面的需求，因此在默認(rèn)界面設(shè)計(jì)中需要保證必要的對比度。

讓用戶為自己情感做主，主題皮膚商店

你、我、他……每人每天都經(jīng)歷著屬于自己獨(dú)一無二的喜怒哀樂，一款界面設(shè)計(jì)滿足億萬用戶的需求是不可能也是不人性的，百度手機(jī)輸入法設(shè)計(jì)了“皮膚/主題商店”功能，默認(rèn)界面滿足用戶基本需求，用戶情感通過皮膚/主題的選擇得以釋放……

提供易于理解的信息，圖標(biāo)文字混排

從功能層面將用戶常用功能前置，如：超級皮膚、輸入方式切換、夜間模式等等，方便用戶快速找到，而不用去眾多設(shè)置項(xiàng)中尋覓。那么對于“熊頭菜單”所放置的功能該如何表達(dá)呢？圖標(biāo)？文字？

究竟是使用圖標(biāo)還是使用文字表達(dá)功能，一直是業(yè)界爭議的話題，但有一點(diǎn)是共同認(rèn)識：除了少數(shù)用戶認(rèn)知高的圖標(biāo)外，文字對于表達(dá)是最準(zhǔn)確的。那么使用文字就是好的方式嗎？答案也是否定的，文字本身并沒有視覺傳達(dá)的功能，對于不常見的功能用戶無法只通過文字就能猜出想表達(dá)的功能是什么，因此我們在空間可允許的界面盡可能采用圖標(biāo)文字混排的方式，即圖標(biāo)保證視覺傳達(dá)，又通過文字為快速準(zhǔn)確提供了支持。

說了這么多，先休息一下吧！來回顧一下輸入法視覺設(shè)計(jì)Tips：

• 清晰是首要的
• 界面是為體驗(yàn)而存在的
• 無規(guī)矩不方圓
• 擬物設(shè)計(jì)不一定很美好（根據(jù)產(chǎn)品特性進(jìn)行設(shè)計(jì)）
• 恰當(dāng)?shù)囊曈X分層，為用戶視覺降噪
• 讓用戶為自己情感做主
• 提供易于理解的信息

以上是在輸入法產(chǎn)品界面設(shè)計(jì)過程中的一點(diǎn)點(diǎn)小心得，我們會繼續(xù)努力，為用戶提供移動端最好的輸入體驗(yàn)~，針對百度手機(jī)輸入法有任何建議歡迎聯(lián)系我們哦~~