童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

表单设计的九个基本法则

8月20日 金钟寨投稿
  在表单设计中,我们需要注意哪些内容呢?
  表单是承载信息和展示信息的重要途径,因此我们在设计的时候要注意很多事情。
  首先我们要知道表单的组成:
  标签
  帮助文字
  输入框
  报错提示。
  那我我们在设计的过程中到底要注意哪些事情呢?
  1、布局上
  我们尽量采用单列进行展示,建议这样做的原因一是能够方便用户进行浏览和输入,二是因为这样布局,能够进行响应式的开发,减少了成本。但是其自身也存在着缺点,当需要输入的条件过多时,用户需要拖动鼠标进行查看与填写。
  2、标签的设计
  标签的位置主要分成三种:左标签、顶标签、和内标签(图一、图二、图三、)。而关于是否要有必填和选填的存在,个人认为,选填是否存在是可以被考究的。
  左标签是目前比价主流的排布方式,主要适用于web端,建议将标签靠左对齐,因为不仅在界面上会显得比较争气划一,在用户对信息的提取和响应也会效率大大提高。但是它存在着一个比较尴尬的问题,也就是空间的占用上,用于web倒也没有什么问题,但是当如果用于移动端,则会出现需要左右滑动,信息填写被覆盖等问题。
  顶部标签很好的解决了左标签的尴尬处境,但是自身也存在着问题,也就是当需要填写较多信息的时候,出现滚动的场景几率也就相对较大。这里要注意的是在使用顶部标签的时候,我们要注意输入框与输入框之间的距离(如右图)。
  将标签放进输入框中是一个很好的解决方式,但是随之而来的还有,当我填写信息的时候,输入框任何指示信息也没有,会让用户产生困惑的心里,那我们要如何解决呢:如上图,我们可以将图标放入输入框中或者放在左侧。
  3、帮助性信息
  帮助性文字的展示一般采用气泡框进行提示(也有会先将一些提示性文字放在页面的顶端,但是这个要取决于文案的内容多少,以及重要程度。)气泡框提示的内容要求简洁易懂,鼠标放上去则迅速展开提示内容,鼠标移开则消失,注意:展开的时候不宜挡住当前输入区域,这么做的原因是让用户知道我处于什么地方,我在针对什么。
  4、输入框的设计
  在进行信息录入的过程中,我们要保持输入框的独特性(录入前、录入中、录入后):录入前和输入中我们要使输入框高亮、沉浸、悬浮、等方法,让用户只专注于当前的录入,录入后要给出反馈,是录入失败还是录入成功,当然这个要根据产品的特点,来进行控制。
  5、报错提示
  如上图,报错提示有很多种,要根据不同场景选择不同的报错提示,假如只是针对单个输入框的判断,则仅需在当前状态进行报错,文字提示和输入框颜色、样式、变化都可以。
  但是如果是重大操作结果报错,我们还是优先选择用模态框的方式进行报错,这样的好处是能更好的提醒用户错误的结果,也能中断用户的操作,让用户专心思考和检查之前的信息。
  6、自动配置。
  我们在设计的过程中,要尽量减少用户的输入次数,有些信息,我们可以通过自动补全,或者提供默认值等方式减少用户的输入时间,毕竟用户输入信息只是一个过程。
  7、尺寸和录入量、格式
  很多数据已经证明根据内容作出适当的尺寸,能够大幅减少用户的不确定性,以及一些特定的信息(手机、银行卡等)采用特定的录入格式都会让用户的体检更加良好。
  8、录入信息的分组
  将同类信息进行分组,这样即使是很多的信息叠加在一起,用户在输入上的心理压力也会大大减小。
  9、提高反馈报错和帮助信息的可见度
  但用户在输入信息的过程中,当遇到磕绊或者提示时,证明用户正处在迷茫的状态,这时候表达要发挥它的易操作、易理解、以及可见性,来进行指导用户走出迷茫。
  总结:好的表单设计,在使用上是高效的,友好的,体验统一的。因此在设计的初期,要对录入信息进行一个充分的了解,这样你的稿子才不会一审再审。
投诉 评论 转载

提需求前,你要问自己这8个问题近期一直在梳理需求收集、需求评审流程,恰好自己带的起点学院就业班邻近毕业答辩,也要模拟需求评审过程,就写一写关于这方面的心得吧。针对评审要注意的事项,我梳理了8个问题,和大家一……你需要知道的C端和B端的设计区别相较来说,C端的产品不管从涉及区域,渗透力,同类的密度都远远超过B端;归根原因其实是因为它面向的用户更加广泛,种类也更加多样化。那么B端和C端的差异在哪里呢?下面我想通过自己的……数据型B端设计理念探讨本文总结了当前的B端设计理念的优劣并在此基础上衍生出个人的另外一种新的B端设计理念;也阐述了基于数据型B端设计理念重新设计的模型划分以及数据型B端需求设计文档中的编写规则。……表单设计的九个基本法则在表单设计中,我们需要注意哪些内容呢?表单是承载信息和展示信息的重要途径,因此我们在设计的时候要注意很多事情。首先我们要知道表单的组成:标签帮助文字……设计实战:以不变应万变,交互规范的制作与思考良好的交互规范可以很好的帮助企业、团队提高产出,保证用户体验。规范很重要规范和秩序存在于生活的方方面面。不知道大家有没观察过,稍微有点规模的咖啡连锁店,一般至少会有……商品评价那些事:有必要让用户去评价每一个商品吗?电商产品有必要让用户去评价每一个商品吗?前段时间有朋友问了一个有趣的问题,电商产品的商品评价中,有必要让用户评价每一个商品吗?提炼一下这个问题的几大要素:电商……设计总结:批量筛选的用户体验研究批量筛选听起来是一个非常简单的操作体验,但要让用户提高效率、拥有较好的体验,还是需要深入考虑交互流程。1、批量筛选是有针对性的筛选操作批量筛选和盲选是完全不一样的概……产品经理如何基于需求迭代产品(下篇2):产品的整体设计之业务上篇所讲的高聚合低耦合的宗旨,就是要用在产品设计上,本篇文章分为整体设计和局部设计两个部分。上篇所讲的高聚合低耦合的宗旨,就是要用在产品设计上。此处所讲的产品设计,不只是……电商平台会员及积分体系概况集合文章收集整理了各大电商平台会员及积分体系,相信对你一定有所帮助。一、淘宝天猫(一)会员名称:普通会员:淘气值300且1000分;超级会员:淘……产品经理必须知道的刷新功能三个重要发展阶段文章主要从技术、产品和品牌三个层面对下拉刷新操作做一个深度的解读和玩法。现在,交互方式不断进步演变,下拉刷新不再只是一个简单的功能,对用户来说属于高频次操作。越来越多的设……为摩擦而设计:只为更好的用户体验本文主要展示了一些设计用例,帮助大家更好的理解摩擦是如何在用户体验设计师的手中发挥积极效用。在用户体验设计中,摩擦指的是人为地在设计中创造摩擦或阻力来阻止用户达成目标。就……蓝湖产品负责人:“蓝湖2。0”升级背后的思考本文作者将结合自身的产品经历,与你分享下产品升级背后的思考。enjoy任何一款产品从上线到成熟都要经历多次迭代与升级。一般来说,大部分升级是上线新功能,在界面和交互方向不……
Axure教程:中继器如何切换标记状态?Axure模拟微信聊天效果墨刀教程:如何快速制作一个App首页原型?善用Axure写PRD,最正统的产品逻辑表达法Axure教程:原型设计之微信朋友圈效果(中继器、动态面板、善用Axure写PRD,全面通用的移动端产品规范V2。0Axure教程:原型设计之多用户注册登录Axure教程:如何制作一个不区分大小写的验证码原型?Axure教程:原型设计之侧滑菜单Axure教程:商品详情页产品图效果展示Axure教程:原型设计之转盘抽奖Axure教程:原型实战之模拟拼图效果(变量、动态面板、参数

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界