嫩草影院久久99_老司机午夜网站国内精品久久久久久久久_久久夜色精品国产_国产一级做a爰片久久毛片

看看你的手機鍵盤,隱藏了多少設計細節?

2019-12-18    濤濤

手機鍵盤,可以干嘛??


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


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


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



目錄:

一、鍵盤與命令類型

二、設計要點

三、有意思的鍵盤交互





Part1:鍵盤與命令類型

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


1.鍵盤類型

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



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


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



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



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



2.命令詞類型

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



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




3.H5里的插件 


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

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




Part2:設計要點

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



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

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



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

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



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



原因在于:

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

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


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




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

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

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



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



3.注意鍵盤的遮蓋區域

在一些表單設計時,應該注意鍵盤彈出后對界面布局、用戶操作的影響。


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



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



4.‘隱私數據’盡量用隨機鍵盤

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

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

如中國銀行的支付密碼:



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




5.命令按鈕位置的不同

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



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



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



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



6.預判用戶的行為

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


·自動調起鍵盤

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




·調起對應的鍵盤類型

這個點無需多講,當明確知道表單輸入所需的文本類型中文/英文/數字/郵箱/網址等,需調起相對應的鍵盤類型。




·短信驗證碼的調取

在短信驗證碼的表單設計時,可以利用系統的‘短信權限’自動輸入驗證碼,減少用戶的操作步驟。

iOS:只能將驗證碼調取在鍵盤上,點擊自動復制粘貼。
Android:可以將驗證碼自動粘貼在文本框里,且自動跳轉頁面。



前提是:產品已獲得手機的短信權限,否則很難調取到驗證碼信息。


·更準確的命令詞

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


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



但在視覺上,不恰當的命令詞容易讓人產生歧義、誤解,甚至干擾接下來的操作。


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

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



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


因此日常中,我們需要對命令詞有更深的理解,方便給予用戶更準確的引導。






Part3:有意思的交互

最后盤點一下,在一些第三方和系統自帶的鍵盤上,都有哪些有意思的交互細節?啟發一下產品設計時的腦洞。



1.更準確地移動光標

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

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



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

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



2.長按的彩蛋

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

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



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



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


文章來源:UI中國

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sdgs6788.com

存檔

嫩草影院久久99_老司机午夜网站国内精品久久久久久久久_久久夜色精品国产_国产一级做a爰片久久毛片
<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 老司机凹凸av亚洲导航| 久久国产黑丝| 亚洲免费观看| 久久精品123| 一区二区三区国产在线观看| 久久全球大尺度高清视频| 国产精品久久精品日日| 亚洲毛片av在线| 欧美激情1区| 葵司免费一区二区三区四区五区| 国产一区二区毛片| 午夜精品美女久久久久av福利| 亚洲精品一区二区三| 欧美黄色日本| 一区二区三区高清在线观看| 欧美伊人久久久久久午夜久久久久| 久久一区二区精品| 一区二区三区中文在线观看 | 蘑菇福利视频一区播放| 国产一区二区三区在线观看免费视频| 亚洲欧美国产高清| 亚洲一区二区在线免费观看视频| 亚洲经典在线| 久久精品99久久香蕉国产色戒| 亚洲欧美日本在线| 国产亚洲一区精品| 蜜桃精品久久久久久久免费影院| 久久久久国内| 亚洲精品一区二区三区av| 欧美国产免费| 美女网站久久| 亚洲精品一二| 一道本一区二区| 一区二区高清视频| 国产精品美女一区二区| 欧美一级片在线播放| 欧美影院一区| 亚洲人成在线播放| 一本一本久久a久久精品综合妖精| 国产精品久久久91| 久久永久免费| 欧美黄色成人网| 亚洲欧美中文另类| 久久青草久久| 亚洲在线观看免费视频| 久久国产主播精品| 一区二区三区视频观看| 欧美中文字幕视频| 日韩一级片网址| 欧美一区二区免费| 日韩亚洲精品视频| 欧美中文日韩| 亚洲特黄一级片| 欧美中文字幕在线观看| 正在播放亚洲| 久久精品欧美日韩| 亚洲神马久久| 久热精品视频在线观看| 午夜亚洲视频| 欧美搞黄网站| 久久久综合精品| 欧美日韩中文在线| 欧美成人精品在线播放| 国产麻豆精品视频| 亚洲精品国久久99热| 欧美色欧美亚洲高清在线视频| 久久精品国产99国产精品澳门| 欧美高清视频| 久热精品视频在线观看| 国产精品国产自产拍高清av| 欧美激情小视频| 国内自拍一区| 午夜精品一区二区三区在线视 | 一区精品在线| 性娇小13――14欧美| 在线亚洲欧美| 欧美高清视频免费观看| 欧美va亚洲va国产综合| 国产视频精品va久久久久久| 一本一本久久a久久精品综合麻豆| 亚洲精品在线观看视频| 麻豆精品国产91久久久久久| 久久精品久久99精品久久| 国产精品日韩欧美一区二区| 一区二区三区精品国产| 亚洲午夜伦理| 欧美体内she精视频在线观看| 亚洲第一区在线| 亚洲激情在线播放| 欧美成年人网| 91久久精品国产| 亚洲精品中文字幕有码专区| 久久久国产精品一区| 久久免费视频网| 黑人极品videos精品欧美裸| 麻豆精品传媒视频| 国产一区二区三区高清在线观看| 亚洲一区bb| 欧美在线观看一二区| 国产欧美精品| 久久爱www| 免费久久精品视频| 亚洲韩国日本中文字幕| 欧美国产第一页| 亚洲精品婷婷| 亚洲综合视频在线| 国产深夜精品福利| 久久亚洲不卡| 91久久香蕉国产日韩欧美9色| 亚洲精品小视频在线观看| 欧美日韩一区二区三区高清| 亚洲色图制服丝袜| 久久精品1区| 亚洲黄色影片| 国产精品久久久久久妇女6080| 亚洲欧美国产77777| 久久久久久一区二区| 亚洲欧洲日韩综合二区| 欧美日韩国语| 亚洲制服丝袜在线| 免费不卡在线观看| 在线视频你懂得一区二区三区| 国产精品欧美日韩久久| 欧美主播一区二区三区美女 久久精品人| 久久婷婷色综合| 日韩图片一区| 国产一区二区中文字幕免费看| 免费欧美高清视频| 亚洲主播在线观看| 亚洲国产精品va在线观看黑人| 亚洲一级特黄| 在线播放不卡| 国产精品国产三级国产aⅴ无密码 国产精品国产三级国产aⅴ入口 | 亚洲一二三区在线观看| 久久国产视频网站| 亚洲人成人一区二区在线观看| 欧美日韩中文另类| 久久天天躁夜夜躁狠狠躁2022 | 国产精品久久国产愉拍 | 亚洲人成亚洲人成在线观看图片| 欧美亚洲第一页| 老司机免费视频一区二区三区| 99国产精品99久久久久久| 久久久国产亚洲精品| 99精品久久免费看蜜臀剧情介绍| 国产精品午夜国产小视频| 久久综合999| 亚洲一区二区精品在线观看| 欧美国产日韩一区二区三区| 欧美一区午夜精品| av成人激情| 亚洲电影av在线| 国产视频久久| 国产精品乱人伦中文| 欧美激情va永久在线播放| 久久国产精品久久久久久久久久 | 亚洲精一区二区三区| 亚洲天堂视频在线观看| 在线成人免费视频| 欧美午夜精品理论片a级按摩| 久久久噜噜噜久久狠狠50岁| 亚洲午夜精品久久| 亚洲精华国产欧美| 美女精品国产| 久久精品2019中文字幕| 亚洲欧美日韩国产综合| 99热这里只有精品8| 亚洲高清三级视频| 韩国精品在线观看| 国产免费成人| 欧美日韩在线视频首页| 欧美v日韩v国产v| 久久综合九色欧美综合狠狠| 欧美伊人精品成人久久综合97| 中文国产成人精品| 亚洲伦理自拍| 99国产精品视频免费观看一公开| 亚洲第一精品福利| 亚洲第一网站| 亚洲第一综合天堂另类专| 久久综合网络一区二区| 久久青青草综合| 久久免费视频在线| 女女同性精品视频| 欧美国产第一页| 亚洲国产欧美日韩另类综合| 亚洲高清在线观看| 亚洲精品影院| 亚洲一区二区免费视频| 午夜性色一区二区三区免费视频| 午夜亚洲视频| 久久免费精品日本久久中文字幕| 欧美中文字幕在线播放| 久久久亚洲国产天美传媒修理工 | 久久影院午夜论| 麻豆精品视频在线观看| 欧美精品在线免费| 欧美午夜宅男影院在线观看| 国产精品网红福利| 激情欧美日韩|