欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

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

发布时间:2017:11:30 19:11:08 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1262个文字,预计阅读时间4分钟
导语
虚拟键盘即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”–时间键盘

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:「人人都是产品经理」web端首页分析

下一篇:AI产品之路:神经元与神经网络

  • 18900 文章总数
  • 2382587访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信