當前位置:首頁 >教程首頁 > U I 設計 > AI+UX設計大師班 >百度手機輸入法2.0升級設計分享

百度手機輸入法2.0升級設計分享

發布時間:2018-11-17 19:57:24

 

 

導言:

結合百度手機輸入法2.0升級,我們從交互、視覺設計的層麵與大家分享一些我們的設計心得和思路。

 

交互設計層麵:

輸入法的交互設計,首先應遵循的理念是:如何讓用戶更方便和快捷的輸入?

要讓用戶更快捷和方便的輸入,我們重點想從三個方麵入手去實現這個目標:

1.尊重用戶的使用習慣;

2.對輸入法設計中常出現的問題進行改進;

3.簡化操作,提高用戶的輸入效率。

 

一:尊重的用戶使用習慣

我們考慮尊重用戶的使用習慣,而這個習慣的獲得,主要從兩類用戶來考慮:一類用戶是非百度輸入法用戶,其最開始接觸的一般是係統自帶的輸入法。(圖01)

 

圖01

 

另一類用戶是使用過百度輸入法的用戶,已經習慣了百度輸入法的按鍵布局。(圖02)

 

 

圖02

 

我們尋求在百度輸入法和係統自帶輸入法的使用習慣上尋找平衡,讓用戶切換到百度輸入法時,學習成本最低。

 

交互解決方案:

現有的虛擬全鍵盤和拇指鍵盤的布局形式設計,基本都遵循了和實際物理鍵盤的保持一致的思路。同時優化數字和符號麵板的切換,遵循了現在常見的切換形式。(圖03)

 

圖03

 #p#e#

 

二:對輸入法設計中常出現的問題進行改進

虛擬按鍵相對於實體按鍵來說,它存在許多使用上的問題,比如缺乏觸感導致的誤操作頻發的問題;比如拇指鍵盤和全鍵盤由於鍵盤特性,其布局不一致,導致用戶找不到相關操作按鍵的問題等;這部分問題,我們會通過各種途徑,尤其是用戶測試的方式,進行問題的收集,並提出解決方案。(圖04)

 

圖04

 

現有的一些輸入法,都普遍存在以下這些問題:

1:全鍵盤和拇指鍵盤操作一致性的問題;

2:各種輸入法方式和輸入麵板切換的問題;

3:按鍵小,缺乏類似於物理按鍵反饋的問題;

4:誤輸入或者誤操作的問題等等。

 

交互解決方案:

1:一致性的問題解決方案,保持全鍵盤和拇指鍵盤麵板切換入口位置一致性。(圖05)

 

圖05

 

2:誤操作問題解決方案,增加鍵盤切換鍵,增大功能鍵麵積。點滑輸入切換麵板的方式容易引發誤操作,在新設計的交互布局界麵,我們保留點滑切換鍵盤的功能,作為高級操作,同時增加麵板切換鍵,避免新手用戶誤操作。(圖06)

 

圖06#p#e#

 

三:簡化操作,提高用戶的輸入效率

如何能夠減少用戶的操作?我們注意到用戶經常在各種切換中耗費了大量的時間成本,比如輸入一段文字:我們今天去AW-107開會,Be On Time。這是我們常見的一段文字,但是其包含的內容類型非常複雜:漢字,英文大小寫,數字,符號。使用現有的輸入法進行輸入,需要頻繁的在各種麵板中進行切換,用戶輸入時十分吃力。

 

交互解決方案:

充分利用百度輸入法的點滑功能,我們在全鍵盤麵板上,第一排字母按鍵複用輸入按鍵,可以讓用戶在不用切換的情況下快捷輸入數字。(圖07)

 

圖07

  

支持超長句輸入,也可以大大提高用戶的輸入效率,百度輸入法最大支持15個字的超長句輸入,交互設計中,兩行顯示的方法解決候選字顯示的問題。(圖08)

 

圖08

 

上麵是這次輸入法升級交互設計層麵的幾個小細節,更多改進請大家在實際使用時細細體會吧!#p#e#

 

視覺設計層麵:

2010年設計界掀起了UI界麵擬物化風潮,在設計百度手機輸入法1.1版/1.2版本默認界麵時也應用這樣的風格,將麵版按鍵打造成真實按鍵的效果。由於手機輸入法產品的界麵空間相對有限,元素眾多,過於複雜的效果並不能夠給用戶帶來好的視覺感受。在這次升級之初我們就調整了思路:設計一款用戶在使用時不被設計所累的默認皮膚。 

 

人類有80%的信息是通過視覺得到的,其中色彩具有神奇的魔力,不同的顏色會帶給人們不同的心理感受。例如:藍色讓人感覺孤獨、獨立和平靜;綠色讓人感覺生命、生長、變化和複蘇;紫色讓人感覺權威和聲望;紅色讓人感覺活力、憤怒和喜悅;橙色讓人感覺力量、光輝和震撼……(圖09)

 

圖09

 

有色彩就會有色彩傾向性,同樣的顏色,有人喜歡有人就可能會很反感。對於擁有龐大用戶群的百度手機輸入法產品來說,排斥某一類用戶並不是我們的目的,而且作為一款工具類產品來說,簡潔、精致的界麵更有助於用戶關注操作本身。 

 

在嚐試多種方案後,最終我們確定采用明度淺灰色係為此次升級默認界麵的主色調。灰色是黑色與白色的混合色,沒有色相和純度,隻有明度。不同明度的灰色可以產生接近黑色或白色的效果。”明度淺灰色”會給人高雅、寧靜和精致的感覺,因此也常被稱為高級灰。點擊態需要能足夠引起用戶注意,因此我們給默認界麵點擊態搭配了高明度亮藍。(圖10)

 

圖10

 

在完成此次升級默認界麵的風格設定之後,工作並沒有就此完成,移動端不同平台或者同一平台不同型號的手機顯示效果差異可能是很大的,為了能夠盡可能讓用戶看到的界麵效果,和我們實際設計的效果一致,我們分別針對平台找到主流機型對界麵進行了調整。

华体会hth体育网 賞析
  • 2101期學員李思庭作品

    2101期學員李思庭作品

  • 2104期學員林雪茹作品

    2104期學員林雪茹作品

  • 2107期學員趙淩作品

    2107期學員趙淩作品

  • 2107期學員趙燃作品

    2107期學員趙燃作品

  • 2106期學員徐正浩作品

    2106期學員徐正浩作品

  • 2106期學員弓莉作品

    2106期學員弓莉作品

  • 2105期學員白羽新作品

    2105期學員白羽新作品

  • 2107期學員王佳蕊作品

    2107期學員王佳蕊作品

專業問題谘詢

你擔心的問題,火星幫你解答

微信掃碼入群領福利

掃碼領福利最新AI資訊

點擊谘詢
添加老師微信,馬上領取免費課程資源

1. 打開微信掃一掃,掃描左側二維碼

2. 添加老師微信,馬上領取免費課程資源

×

同學您好!

您已成功報名0元試學活動,老師會在第一時間與您取得聯係,請保持電話暢通!
確定