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

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

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

用那種字體？

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

字號怎樣設(shè)定？

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

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

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

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

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

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

默認面板高度

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

行間距優(yōu)化

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

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

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

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

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

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

語意優(yōu)化：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

作者：百度mux