建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > 交互设计教程 >

手机文本输入框设计

更新时间:2017-05-09整理编辑:建站学习网阅读:0

  手机端的文本输入受到使用环境、网络状况及设备本身条件的制约,使其用户体验的改良成为一个老生常谈的话题。如:一直在改进的输入法,新输入方式的探索(语音输入),甚至想尽种种办法去避免输入……

  文本输入本身是一个从无到有的过程,是让用户将空白的输入框填满的过程,本文避谈一些尚未经过易用性测试验证的创新设计,从本人的日常积累和实际经验出发,以文本输入框作为设计对象,从帮助用户认知及简化用户操作这两个维度来探究这些看似简单空白的小条能否生长出大智慧。

  无中生有之"引导词"——帮助用户认知

  手机端的界面空间可谓寸土寸金,很少有空白的区域。而用户在面对界面中一片空白的区域时往往会产生紧迫感甚至有些不知所措。如果在这片空白里增加一些"引导词"(即引导描述型词条),用户就能迅速产生认知活动,对将要输入的内容进行快速反应和判断。

就登陆界面的设计来说,面对无引导词界面的用户也许会浪费时间在想他的用户名是什么来着?是他的邮箱还是随便起的昵称还是他的手机号?以及他的密码是几位的?甚至还会浪费时间在用户名的书写格式上。而使用第二个界面的用户会在第一时间获知闪烁的光标处要输入邮箱,密码框里的"小点点"也形象的告知了用户密码的显示形式和长度。可见输入框中增加必要的引导词能够提高用户的输入效率。"引导词"依据使用功能及使用场景进行分类如下:1.输入内容的模板

  提供给用户即将输入内容的模板,用户无需花费更多时间思考如何输入。

  you@website.com是约定俗成的邮箱地址的模板,能够与用户的心智模型相呼应,用户能够很快的做出反应。

  2.需要输入的片段内容

  输入内容中有部分内容是用户经常用到或重复用到的,或者是约定俗成的,那么把这部分内容直接作为引导词,显示在文本输入框中,一方面能够提示用户接下来将要输入什么内容,一方面能够省略这部分内容的输入操作,进而提高输入效率。

  "www."和".com"等是用户所悉知的网址协议,在输入框中增加该引导词能够给用户直观的提醒这里是要输入网址的,并且省略了这些字符的输入。

  3.输入内容的描述

  用户输入的内容不准确会导致不准确的操作反馈时,需要增加对输入内容的简短描述,以降低这种误操作的风险。

  如果不提示输入商家或地点名称,用户应该不会很快搞清楚这个框子里应该输入些什么,用户好不容易完成输入,却是输入了一个错误的关键词,得到的是查无结果,很难想象用户该有多么的沮丧。

  4.输入诱导

  在多行文字的输入框中,虽然有光标闪烁提示用户输入框已被激活,可以输入了,但是为了消除用户在面对大片空白区域而产生紧张感也会增加引导性的文字,引导用户输入而不是点返回按钮退出。

  "说点儿什么吧……""吼一句"这些引导词会让用户有亲切感,引起用户情感上的共鸣,激发用户的操作欲望。

  无中生有之"附加控件"——简化用户操作

  为了使文本的输入效率更高,文本输入框可以与一些控件进行关联,依靠这些控件来简化或方便用户对输入文本的编辑操作。归纳几种输入框常用的附加控件如下:

  1.单位控件

  某些特定条件的输入内容本身就是一个单位,如收件人的邮箱地址,收信人的电话,好友的名称等。将每个单位转化为控件按钮,可以方便用户对单位信息进行编辑操作。

  添加收件人的输入操作中,输入的每个收件人名字自成一个单位,以分号隔开显示,当输入框再次获得焦点时每个单位文字变成控件按钮。编辑时可以就某个单位进行单独编辑,或删除,提高整体输入效率。

  单位控件的样式需结合具体的输入内容进行设计,可以是按钮形态,也可以是其他形态。位置可以在输入框内部也可以在外部,依具体情况而定。

  2.删除控件

  在手机上输入文字困难,删除大段的不必要文字同样困难,在设计时需要根据用户的使用情景充分考虑这一需求,使输入框附加一键删除按钮。

  浏览器地址栏中的"地址输入框"常常需要用户将其清空重新输入新的地址,因此当已有内容的地址栏获得焦点时,在输入框内增加一个清除按钮,方便用户快速的清空现有内容,开始新的内容输入。

  在微博的编写过程中,用户常常输入了一段文字后感觉并不是合适的,需要重新输入,此时输入框中的清除按钮就可以让用户快速清除当前输入的所有文字。

  删除控件多位于输入框末端。在单行文本输入框内为了节省空间删除控件可以是隐藏的,与文本选择进行关联。

  3.提醒控件

  手机中关于文字输入的字数有很多限制,比如每条手机短信限制160个字符,微博限制140个汉字等等,用户常常会因为不知道限制条件或者忘记了限制条件而进行了误操作,浪费了时间。那么在输入框中增加提醒控件,提醒用户目前还有多少个字符可以输入,避免用户输入超出字数限制。

该控件多内嵌于输入框中的右下脚,并与输入内容本身在颜色或字体大小上做区分设计,不能喧宾夺主,打扰用户的输入过程。结论:

  设计手机文本输入框时,以用户需求为出发点,结合使用场景,在空白的输入框样式中增加引导词、附加一些小控件的设计手段可以帮助用户对将要输入的内容有更好的理解和把握,减少用户在输入过程中产生的错误,方便用户对已输入的内容进行编辑和修改,达到提高用户输入效率的目的。

  当然这些"无中生有"的设计策略,在实施时要注意样式的展示和交互上的细节,尽量做到简洁、低调,因为输入的文字才是用户在输入过程中需要重点关注的对象,不要让复杂的设计打扰用户。

本文网址:https://www.dedexuexi.com/wysj/jhsj/3167.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
网页设计中该如何决定是否使用框架?
« 上一篇2017年05月09日
规范设计心得:用户是谁,需求又是什么?
2017年05月09日下一篇 »
  • 网易云音乐WP1.0设计项目实战
    0阅读
    WP 平台是很多设计师很少涉足的地方,优设之前发过一篇WP设计规范指南,今天网易的同学继续上干货,来一篇WP的设计项目实战!作为一款有诚意的音乐APP,这次设计过程相当用心,值得学习的地方也很多,学习来。项目背景Windows Phone一直是各家公司缺少投入的平台,WP用户不得不经常面对一个成...
  • 马伯庸教你如何做一个万年好甲方
    0阅读
    编者按:原以为亲王精通历史,会写小说,现在才知道他也很懂作为甲方的门道啊。今天分享@马伯庸 同学的一篇好文,前有笑点,后有干货,有趣得紧。作为设计师,能遇到这样的甲方就嫁了吧。@马伯庸 :对我们甲方来说,艺术性是第三才需要考虑的因素。我们第二考虑的是如何有效率地把核心信息传达到客户那儿去。无论多么...
  • 网站设计主题和风格是重点
    0阅读
    企业为了在互联网上争夺一席之地,纷纷建起了网站。企业的网站就像企业的网络门户,既然是门面那么就要将网站建设好,充分展现企业的良好形象。貌似许多企业建网站是为了赶时髦,因为他们的企业网站设计的实在是不堪入目,这样不仅不会为企业带来什么利益,相反还会毁了企业的形象。那么企业要建好这样的门面应该如何入手呢...
  • 如何给网站布置干净的“关于我们”页面
    0阅读
    所有网站,无论是官方、电子商务、社会化网络还是个人站点,都应该设计一个恰到好处的关于页面,直截了当地告诉到访者,为什么要浪费他们宝贵的时间浏览你的网站。 一、为什么要有关于页面 不要让用户思考! 1、向浏览者传达本站的价值,留住用户 2、始终提醒自己站点的主旨,不要跑题 二、起什么名 关于页面存在的...
  • 如何建立一个成功的移动应用
    0阅读
    一个消费者应用程序是否成功,只通过相加其组成部分的总和来计算。简单的查看用户手机应用的下载历史,用户设备残留的移动应用数量,和那些真的被坚持使用的移动应用情况,就能知道这句话的真实含义。然而,如果你想知道为什么有些用户不再使用某些手机应用,那这篇文章可能会给你一些启示。 像一台机器一样,移动应用通过...
 
QQ在线咨询