• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 超全面!13种表单样式的设计方式都在这了

超全面!13种表单样式的设计方式都在这了

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含ui设计,经验分享,表单设计,设计模式等相关知识,希望在学习及工作中可以帮助到您

半木zxy:从复杂的ERP系统到Facebook,应用程序已经不仅仅是作为输入的意义而存在。各种各样形式的表单服务于用户提交信息。本文介绍了13种不同的方式来呈现表单,并探讨了数据输入的未来。

模态

简单的模态适用于低复杂性和有限输入的表单。模态通常易于实现,且用户的体验很直观。但是,复杂的交互需要其他的模态,而弹层(popover)可能会导致用户犯错。此外,模态会阻止用户与应用的其他内容进行交互直到关闭。

所以更长的表单应考虑使用单独页面,并支持在条目的上下文中进行内嵌编辑。

多模态

多模态表单呈现可拖拽窗口的样式,允许用户一次与多个表单进行交互(无需关闭),用户可以拖动查看模态窗口下面的信息。多模态允许高级用户同时处理大量信息,并且不用打开多个视图或浏览器选项卡等等。

但对于新手来说,这种呈现方式可能会有问题,因为他们可能会感到迷失或者导致错误操作。

滑出

滑出表单一般在主视窗的局部位置滑动出现,或者推出能适应表单格式的内容模块。和模态一样,滑出的内容是与上下文存在关系的,允许用户在主视窗中查看参考信息。因为滑出模块通常占用了整个窗口的高度,所以允许承载较长的表单内容。

弹层

弹层表单非常适合快速编辑和输入,弹层一般出现在对应相关数据的上下文中,所以用户不会在应用程序中迷失它们的位置。

内嵌

内嵌表单允许用户直接在数据呈现的地方进行简单输入和编辑,不会跳转到其他视图界面。内嵌表单兼具编辑和阅读模式,输入内容可以在用户与各个字段交互时进行编辑和自动保存。

可编辑表单

像内嵌表单一样,可编辑表单允许用户直接在数据显示的地方编辑数据。对于表格数据的输入,如在电子表格或发票行项目的情况下是非常好的。这对于表格数据的输入(如在电子表格或发票条目)是非常好的。

接替

接替模式使用户能够与复杂的表单交互,同时能够快速返回到之前的视图。

接替对于输入内容项无需后续视图直接展现的系统级数据是非常好的。

向导

向导允许用户按顺序逐步填写信息,它非常适用于用户在操作完成后就不再参与的复杂表单。当用户需要经历一个陌生的过程时,就应该使用向导。因为用户使用向导表单的成本高甚至其操作有点不领人情,它通常会有糟糕的用户体验。

分段表单

分段表单非常适用于复杂信息的输入。用户可以享受表单的完整上下文,而不是像向导一样的多页表单。

用户可以自由地而非线性地填写整个表单中的信息,为用户提供更多的灵活性。

拖放

虽然不是典型的表单,但是拖放编辑器允许用户从预定义的输入中选择并将其拖动到所见即所得的内容模块中。通过模仿物理世界,其主要的交互形式为输入增添了一种乐趣。

所见即所得

所见即所得编辑器被用于文本编辑,如Microsoft Word、MailChimp电子邮件创建、SquareSpace网站发行商等。所见即所得编辑器允许用户无需了解HTML、CSS和JS就能创建丰富的内容。

填写空白

有时可用性可以忽略美学和有趣的互动,而不会造成用户体验不佳。

在句子或段落中空白处输入的表单,让用户使用预设的结构来完成语句。

对话式用户界面及其未来

对话用户界面(CUI)通常由响应于自由形式语音或文本输入的“机器人”组成。机器人响应或提供进一步的表单控件来解决用户请求。机器学习已被用于更好地解释输入和定制响应。

对话用户界面已在大肆宣传,许多设计师认为CUI是Web表单的未来。WeChat的成功为对话式界面的普及性提供了可信度。然而,正如Yunnuo Cheng和Jakob Nielsen指出的那样,WeChat产品的优势来自于其熟悉而方便的用户界面,而不是其对话用户界面。

CUI有许多可用性问题,包括:缺乏可发现性,以及肆意的任务路径。CUI的同质性并不是表单设计的未来,而是许多聊天应用程序的未来,这些应用程序围绕这种收集输入方式发现了一个契机。

我期待着将CUI与丰富的图形界面融为一体的设计。迷你嵌入式应用程序可以基于用户的输入来呈现,这可以产生可能独立于聊天框的更大应用程序。或当用户在应用程序中迷失时,也可能使用CUI。

随着数据输入变得标准化、OCR功能增加、软件自动化处理,许多原有表单形式将被淘汰。但是,始终需要一个用户界面。我希望这些不同的表单可以帮助您构建更好的应用程序。让我知道我错过了什么。

「这些表单设计的文章不容错过」

Salesforce的可访问性设计经验:
《涨姿势! 对于可访问性设计师必知的7件事(上)》
《涨姿势! 对于可访问性设计师必知的7件事(下)》

优秀的视觉设计也很重要:
《实用素材!22组深色风格登录表格PSD免费下载》

来自百度设计师的经验总结:
《牵线搭桥!让用户更高效地完成表单填写》

原文地址:uxdesign.cc

设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

优设大课堂

您可能想查找下面的文章:

  • 2013年网页设计UI最热趋势 最流行的UI设计
  • 通往优秀UI(用户界面)设计师之路的20个路标
  • 这10条认知,可能就是你和大厂UI 设计师的差距
  • 针对零基础新人,我给出这份可能是最详细的UI 自学流程总结
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 这篇超详细的教程,帮你全面掌握 APP 中的投影设计!
  • 超全UI设计规范,带你了解规范设计全流程
  • UI 设计新人如何接私单?来看高手的经验!
  • 用一篇文章,带你回顾桌面GUI 的设计发展史

相关文章

  • 2017-08-06让你了解HTML及资源是如何加载的
  • 2018-08-23AI教程!教你制作超唯美的游戏场景
  • 2018-08-23三款思源宋体改造繁体版免费下载+MacOS GUI素材打包
  • 2018-08-23没有美术基础怎么画卡通肖像?来看这个方法!
  • 2018-08-23你临摹到底是为了什么呢?
  • 2018-08-23从零基础到入门,这份3个月的高强度字体设计自学计划送给你!
  • 2018-08-23一个专业易用的健身APP,要如何规划它的功能和UI?
  • 2018-08-23超实用!3分钟带你掌握11个最常用的交互控件
  • 2018-08-23交互设计师和产品经理PK的一点心得
  • 2018-08-23创造富有故事性的网页,你需要熟悉这7个维度

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 在按钮置灰时,该如何提供给用户反馈?
    • 设计实战!健身应用Mannva的UX/UI设计流程是怎样的
    • 我们请了9个顶尖设计师,询问他们是如何开始创作的
    • 用苏宁金融的案例,教你学会分析一款App
    • 这10个理由告诉你,为什么要在设计中使用渐变
    • 腾讯内部分享!超全面的互联网金融体验设计的方法库
    • 历时7天,168小时,超过100页的「复仇者联盟」PPT 免费下载!
    • 如何做好一个搜索体验流程?看这篇超全面的总结!
    • 如何设计支付购买流程?来看这份超全面的UX优化方案
    • 需求分析:我走过最长的路,就是需求的套路

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有