<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 看看你的手機鍵盤,隱藏了多少設(shè)計細節(jié)?

          2019-12-18    濤濤

          手機鍵盤,可以干嘛??


          無疑是打字、信息輸入,也是用戶體驗產(chǎn)品最常用、最直接的方式之一。


          我們每天都在使用鍵盤,但是偶爾會遇到一些體驗上的不足,如鍵盤擋住操作入口、很難控制鍵盤光標(biāo)的移動...


          所以今天想梳理一下手機鍵盤里的要點、細節(jié)點,日后遇到有涉及到鍵盤輸入的地方,可以有更多的思路去解決各種產(chǎn)品/設(shè)計問題。



          目錄:

          一、鍵盤與命令類型

          二、設(shè)計要點

          三、有意思的鍵盤交互





          Part1:鍵盤與命令類型

          先簡單說下鍵盤與命令詞類型(想看設(shè)計要點,可直接滑到Part2部分),對鍵盤有個全局的認識,方便在工作中知道每種鍵盤的用途


          1.鍵盤類型

          從技術(shù)角度上看,市面上所有的鍵盤產(chǎn)品可分為:系統(tǒng)鍵盤(手機默認鍵盤)、第三方鍵盤(功能豐富,輸入效率高)、自定義鍵盤(安全性高,有一定開發(fā)成本)。



          從可提供類型看上,iOS一共提供了12種的鍵盤類型:


          其中8種是常用的:默認(中英)鍵盤、郵件鍵盤、字符與數(shù)字鍵盤、帶小數(shù)點的數(shù)字鍵盤、存數(shù)字鍵盤、撥號鍵盤、網(wǎng)址鍵盤、外國產(chǎn)品鍵盤(如Twitter、Instagram)



          剩下的4種則是這些,但我實在看不出這些鍵盤和默認(中英)鍵盤有何區(qū)別,因此將這4種獨立展示:



          而Android系統(tǒng)鍵盤只提供了9種,但大部分和iOS的鍵盤類型一樣。因此需要我們在交互稿中,標(biāo)明對應(yīng)的鍵盤類型



          2.命令詞類型

          而鍵盤命令詞的類型上,iOS提供的也很豐富,多達11種。



          而安卓則少些,但基本能覆蓋所有場景了。




          3.H5里的插件 


          iOS自帶有‘上一項’和‘下一項’的鍵盤插件,因而在一些H5表單中可以靈活選擇上/下一個文本框或選擇器。

          而Android在H5是沒有’下一項‘命令的(無論第三方還是系統(tǒng)鍵盤)。因而在H5頁面中的表單中,往往需要提供一個外部插件來輔助用戶輸入。




          Part2:設(shè)計要點

          盤點了鍵盤與命令詞類型后,接下來梳理一些設(shè)計要點,避免今后工作中踩坑,完善產(chǎn)品設(shè)計細節(jié)。



          1.‘刪除‘不完全是‘清除’

          鍵盤上的‘刪除’按鈕可以逐一刪除輸入結(jié)果,界面上的‘清除’icon也能做到。但二者間在特定的技術(shù)環(huán)境下,會存在交互上的差異。



          一個典型的例子就是:UC瀏覽器的翻譯器。

          在 已有翻譯結(jié)果 的情況下,點擊鍵盤上的‘刪除’按鈕,只能刪除文本框里的內(nèi)容,對底下的翻譯結(jié)果并無影響。



          而點擊界面上的‘清空’icon,能同時清除掉 文本框內(nèi)容和翻譯結(jié)果。



          原因在于:

          在當(dāng)前的技術(shù)環(huán)境下,UC瀏覽器還無法里做到‘實時翻譯’(邊輸入內(nèi)容,邊顯示翻譯結(jié)果),因此無論用戶在文本框里編輯了什么內(nèi)容,技術(shù)上都很難檢測到文本框里的信息,所以不會影響到底下的翻譯結(jié)果。

          而’清空‘icon則不同,它就相當(dāng)于界面上的一個功能入口,點擊它完全可以檢測/控制到其他內(nèi)容狀態(tài)(文本框內(nèi)容和翻譯結(jié)果),所以可以做出對這2者的‘清除’指令。


          但若能做到‘實時翻譯’,就可以同時檢測、刪除 文本框內(nèi)容和翻譯結(jié)果了。就如谷歌瀏覽器的翻譯器:




          2.鍵盤可以附帶功能入口

          產(chǎn)品設(shè)計時總有一個固有思維:一定要將某個按鈕/功能/操作放在某個界面上因此有時會受到‘視覺布局怪異功能關(guān)系不搭’等的困惑。

          遇到這種情況時,可以試著將功能和鍵盤綁定在一起,依附在鍵盤上才出現(xiàn)。讓功能和內(nèi)容間的關(guān)系更加獨立開來,釋放頁面壓力。



          但是有個提前:這些功能/內(nèi)容盡量是和用戶的輸入行為有關(guān)聯(lián)的,不要把所有功能都添加上去。



          3.注意鍵盤的遮蓋區(qū)域

          在一些表單設(shè)計時,應(yīng)該注意鍵盤彈出后對界面布局、用戶操作的影響


          一些重要信息、操作按鈕要盡量放在鍵盤的遮蓋區(qū)外,避免用戶‘要收起鍵盤才能操作/看到’的尷尬局面。



          包括手機橫屏時的走查,也要注意一下鍵盤高度對界面的影響。



          4.‘隱私數(shù)據(jù)’盡量用隨機鍵盤

          對于個人財產(chǎn)、身份信息等敏感數(shù)據(jù)的輸入時,用戶對該類型信息的重視程度,明顯高于其他類型的信息輸入。

          所以產(chǎn)品設(shè)計時可優(yōu)先考慮 ‘自定義隨機鍵盤’(指鍵盤上的字母/數(shù)字等隨機排布),以保護用戶財務(wù)和隱私安全。

          如中國銀行的支付密碼:



          騰訊各大樓下的訪客機也是采用隨機鍵盤,以保護所有訪客的預(yù)約隱私。




          5.命令按鈕位置的不同

          在手機鍵盤里輸入文字時,iOS由于系統(tǒng)的限制,對文字的發(fā)送指令只能在鍵盤上來完成,因此iOS用戶的交互操作都全部集中在鍵盤右下角。



          而Android端就靈活很多,不僅可以在鍵盤上執(zhí)行發(fā)送指令,也可以在輸入欄/搜索欄周邊新增操作入口。



          即使大部分產(chǎn)品都這么做,但還是有部分產(chǎn)品做到了‘兩端對齊’,如網(wǎng)易郵箱:



          更多Android與iOS的交互差異,可看這里



          6.預(yù)判用戶的行為

          用戶行為的預(yù)判,指的是當(dāng)我們明確知道用戶目的、能推測出用戶下一步操作時,可以做一些減少用戶操作步驟、提升輸入效率的設(shè)計,如:


          ·自動調(diào)起鍵盤

          在一些表單輸入的流程中,當(dāng)能預(yù)知到用戶的下一步操作時,完全可以幫助用戶自動調(diào)起鍵盤的(尤其是需要跳轉(zhuǎn)頁面才能輸入的表單)。




          ·調(diào)起對應(yīng)的鍵盤類型

          這個點無需多講,當(dāng)明確知道表單輸入所需的文本類型中文/英文/數(shù)字/郵箱/網(wǎng)址等,需調(diào)起相對應(yīng)的鍵盤類型。




          ·短信驗證碼的調(diào)取

          在短信驗證碼的表單設(shè)計時,可以利用系統(tǒng)的‘短信權(quán)限’自動輸入驗證碼,減少用戶的操作步驟。

          iOS:只能將驗證碼調(diào)取在鍵盤上,點擊自動復(fù)制粘貼。
          Android:可以將驗證碼自動粘貼在文本框里,且自動跳轉(zhuǎn)頁面。



          前提是:產(chǎn)品已獲得手機的短信權(quán)限,否則很難調(diào)取到驗證碼信息。


          ·更準(zhǔn)確的命令詞

          鍵盤上的命令詞,在交互上的固定認知是:點了就能看到想要的內(nèi)容。


          就如微信的搜索,用戶的預(yù)期和鍵盤上的命令詞完全是一致的,用戶能知道點擊會出現(xiàn)什么樣的內(nèi)容。



          但在視覺上,不恰當(dāng)?shù)拿钤~容易讓人產(chǎn)生歧義、誤解,甚至干擾接下來的操作。


          如網(wǎng)易郵箱登錄的第一個表單,鍵盤上對應(yīng)了‘下一步’命令詞,用戶知道可以快速切換到第二個表單。

          但在第二個表單時,還是‘下一步’命令詞 是不是會讓人費解??



          畢竟該處是表單輸入的交互終點,用‘前往(Go)、登錄(Join)’這些命令詞是不是更準(zhǔn)確些呢?


          因此日常中,我們需要對命令詞有更深的理解,方便給予用戶更準(zhǔn)確的引導(dǎo)。






          Part3:有意思的交互

          最后盤點一下,在一些第三方和系統(tǒng)自帶的鍵盤上,都有哪些有意思的交互細節(jié)?啟發(fā)一下產(chǎn)品設(shè)計時的腦洞。



          1.更準(zhǔn)確地移動光標(biāo)

          在輸入過程中,想將’光標(biāo)‘移動在某個文字附近是一件比較麻煩的事,尤其是在小屏幕手機里。

          但iOS手機有3D touch功能,不少產(chǎn)品都會通過‘重按鍵盤’的方式來控制光標(biāo)的移動。如iOS系統(tǒng)鍵盤、百度輸入法和訊飛輸入法:



          但是Android手機可沒有3D touch,如何解決這個問題?

          典型的例子還是UC瀏覽器,采用一個‘滑塊組件’來控制光標(biāo)的移動。不管Android和iOS端,都能有效地提升輸入效率和體驗。



          2.長按的彩蛋

          除了長按鍵盤外可以移動光標(biāo)外,在一些第三方鍵盤上也隱藏了‘長按’的彩蛋,如:

          ·百度輸入法:
          長按可以持續(xù)選擇表情,還有表情飄出效果。



          ·訊飛輸入法
          長按可以選擇表情的顏色,但部分表情才有而已。



          ·搜狗輸入法:
          長按可以切換至‘單手鍵盤’模式,用于操作大屏幕手機或iPad。


          文章來源:UI中國

          日歷

          鏈接

          個人資料

          藍藍設(shè)計的小編 http://m.sdgs6788.com

          存檔

          久久久综合九色合综国产| 久久www免费人成精品香蕉| 97精品依人久久久大香线蕉97| 99久久综合国产精品免费| 狠狠色综合网站久久久久久久高清| 中文精品久久久久人妻不卡| 无码伊人66久久大杳蕉网站谷歌| 亚洲中文字幕久久精品无码喷水| 69久久精品无码一区二区| 国产精品无码久久四虎| 久久婷婷五月综合色奶水99啪 | 久久亚洲美女精品国产精品| 亚洲精品国产美女久久久| 青青青国产精品国产精品久久久久 | 亚洲va中文字幕无码久久| 久久青青草原精品国产不卡| 99蜜桃臀久久久欧美精品网站| 国产欧美久久久精品| 久久久久国产精品人妻| 99久久精品免费观看国产| 久久久久免费看成人影片| 久久无码一区二区三区少妇| www.久久热| 97久久国产露脸精品国产 | 久久综合久久鬼色| 久久最近最新中文字幕大全| 亚洲成色www久久网站夜月 | 人妻系列无码专区久久五月天| 蜜臀av性久久久久蜜臀aⅴ麻豆 | 亚洲国产精品久久66| 久久精品国产亚洲av日韩| 久久亚洲国产最新网站| 狠狠人妻久久久久久综合蜜桃| 99精品久久精品| 亚洲精品乱码久久久久久按摩 | 欧美国产成人久久精品| 亚洲国产精品综合久久网络| 久久久久女教师免费一区| 国产精品九九久久精品女同亚洲欧美日韩综合区 | 久久99国产精品久久| 久久男人AV资源网站|