第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

小键盘大细节:浅析Keyboard在移动产品中的设计

时间:2017-11-30 14:44来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
虚拟键盘即Keyboard,在移动端我们无时无刻不在与它打交道。它并不是真实的物理键盘,而是在屏幕内拥有键盘样式和功能的控件,可以按需随时改变样式和位置。在文本输入的交互操作中,

  虚拟键盘即Keyboard,在移动端我们无时无刻不在与它打交道。它并不是真实的物理键盘,而是在屏幕内拥有键盘样式和功能的控件,可以按需随时改变样式和位置。在文本输入的交互操作中,移动端虚拟按键的交互体验明显劣于PC端的实体键盘,因此我们有必要在移动端的产品设计中做好Keyboard的细节设计。

  

小键盘大细节:浅析Keyboard在移动产品中的设计

  

小键盘大细节:浅析Keyboard在移动产品中的设计

  iOS原生键盘

  iOS原生键盘的全部类型

  

小键盘大细节:浅析Keyboard在移动产品中的设计

  iOS键盘相关属性

  外观:

  (代码属性)Default:默认外观是浅灰色

  (代码属性)Dark:深灰:石墨色(iOS7之后的石墨色相比之前版本做过更新)

  (代码属性)Light:亮灰:趋近于白色

  可支持自动大写:

  (代码属性)None:不自动大写

  (代码属性)Words:单词首字母大写

  (代码属性)Sentences:句子首字母大写

  (代码属性)All Characters:所有字母大写

  自动更正:

  (代码属性)No:不自动更正

  (代码属性)Yes:自动更正

  我们看到,iOS中提供了多达12种键盘可以选择(中文键盘只有一种布局),键盘的一些属性也可以进行设置。我们在产品设计细节时可以根据用户的需要,提供不同类型键盘。在设计文档中,要将相应的键盘类型名称写在界面下方(最好写英文,开发哥哥们好理解),或者干脆直接摆上相应的键盘截图。当同一个界面有不同类型输入框的情况时,需要表明键盘的切换规则。

  虽然12种键盘类型已经很多了,但仍不能覆盖全部场景,这时可以进行自定义键盘。当然,开发成本会比较高。

  按键命令

  

小键盘大细节:浅析Keyboard在移动产品中的设计

  iOS的部分键盘中还有多种按键命令,iOS提供了11种类型的按键命令,我们在产品设计细节中可以将所需要的命令用文字描述出来,也可以使用截图的方式。

  按键命令常使用的如下:

  回车(return/enter):用来换行

  前往(go):任务过程中到下一个步骤的动作,例如输入网址后,前往打开的网页

  下一步(next):用在多个输入框的表单中切换到下一个输入框

  搜索(search): 点击后执行搜索动作

  发送(send):一般用在通讯App中将内容发送出去

  完成(done):任务完成后终结动作,例如表单提交

  Android原生键盘

  Android原生键盘的常用类型:

  

小键盘大细节:浅析Keyboard在移动产品中的设计

实际上,Android输入框的inputType(输入类型)有29种参数:

  android:inputType=”none”–输入普通字符

  android:inputType=”text”–输入普通字符

  android:inputType=”textCapCharacters”–输入普通字符

  android:inputType=”textCapWords”–单词首字母大小

  android:inputType=”textCapSentences”–仅第一个字母大小

  android:inputType=”textAutoCorrect”–前两个自动完成

  android:inputType=”textAutoComplete”–前两个自动完成

  android:inputType=”textMultiLine”–多行输入

  android:inputType=”textImeMultiLine”–输入法多行(不一定支持)

  android:inputType=”textNoSuggestions”–不提示

  android:inputType=”textUri”–URI格式

  android:inputType=”textEmailAddress”–电子邮件地址格式

  android:inputType=”textEmailSubject”–邮件主题格式

  android:inputType=”textShortMessage”–短消息格式

  android:inputType=”textLongMessage”–长消息格式

  android:inputType=”textPersonName”–人名格式

  android:inputType=”textPostalAddress”–邮政格式

  android:inputType=”textPassword”–密码格式

  android:inputType=”textVisiblePassword”–密码可见格式

  android:inputType=”textWebEditText”–作为网页表单的文本格式

  android:inputType=”textFilter”–文本筛选格式

  android:inputType=”textPhonetic”–拼音输入格式

  android:inputType=”number”–数字格式

  android:inputType=”numberSigned”–有符号数字格式

  android:inputType=”numberDecimal”–可以带小数点的浮点格式

  android:inputType=”phone”–拨号键盘

  android:inputType=”datetime”–日期时间

  android:inputType=”date” –日期键盘

  android:inputType=”time”–时间键盘

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕