輸入法界面設計之乾坤

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

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

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

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

用哪種字體？

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

字號怎樣設定？

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

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

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

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

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

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

默認面板高度

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

行間距優(yōu)化

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

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

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

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

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

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

語意優(yōu)化：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

提供易于理解的信息，圖標文字混排

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

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

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

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

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