青岛网站建设公司,青岛网站制作公司-奈薇建站网
建站咨询热线:0532-8878113113165158935 
知识普及 » 浅议Web网页Form表单设计技巧

浅议Web网页Form表单设计技巧

奈薇网站制作 2020-09-24 11:48发表
阅读次数 2287
  “输入框(Input)应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间的关系。”–《HTML权威指南》

  Web应用程序总是利用表单来处理数据录入和配置,但并不是所有的表单都保持一致。输入区域的对齐方式,各自的标签(label),操作方式,以及周围的视觉元素都会或多或少影响用户的行为。

  表单布局

  考虑到用户完成表单填写的时间应当尽可能的短,并且收集的数据都是用户所熟悉的(比如姓名、地址、付费信息等),垂直对齐的标签和输入框可以说是最佳的。每对标签和输入框垂直对齐给人一种两者接近的感觉,并且一致的左对齐减少了眼睛移动和处理时间。用户只需要往一个方向移动:下。

  在这种布局中,推荐使用加粗的标签,这可以增加它们视觉比重,提高其显著性。如果不加粗的话,从用户的角度讲,标签和输入框的文字几乎就一样了。

  如果一个表单上的数据并不为人熟悉或者在逻辑上分组有困难(比如一个地址的多个组成部分),左对齐的标签可以很容易的通览表单的信息。用户只需要上下看看左侧一栏标签就可以了,而不会被输入框打断思路。但这样一来,标签与其对应的输入框之间的距离通常会被更长的标签拉长,可能会影响填写表单的时间。用户必须左右来回的跳转目光来找到两个对应的标签和输入框。

  于是产生了一种替代的方案,标签右对齐布局,使得标签和输入框之间的联系更紧密。然而结果是左边参差不齐的空白和标签让用户很难快速检索表单要填写的内容。在西方国家,人们习惯于从左至右的书写,所以这种右对齐的布局就给用户造成了阅读障碍。

  借助可视化元素

  由于“标签左对齐布局”的优点(方便检索并且减少垂直高度),尝试纠正它的主要缺点(标签和输入框的分离)就很诱惑人。

  一个方案就是增加背景色和分割线,不同的背景色产生了一列垂直的标签和一列垂直的输入框,每一组标签和输入框利用清晰的水平线分开。虽然这听上去不错,但是还是会存在问题。

  对比之前的形态(用户主观的视觉区分),这增加了15个视觉元素:中间线、一个个有背景色的单元格以及一条条的水平线。这些元素会转移用户的视线,让用户难以聚焦到一些重要的元素上,比如标签和输入框。正如EdwardTufte指出的:“信息本身存在差异,必然产生感官上的不同。”换句话说,任何对布局无用的视觉元素都会不断地扰乱布局。当你试着浏览左侧的标签就可以发现,你的视线总是被打断,停下来想那些水平线、单元格和背景颜色。

  当然这并不意味着放弃背景色和线条。它们对于划分相关区域信息还是很有效的。比如一条细水平线或者一个浅浅的背景色,都可以从视觉上组合相关数据。背景色和线条对于区分表单的主要操作按钮尤其有效。

  主次操作

  一个表单的主要操作(通常是“提交”或“保存”)需要一个比较强的视觉比重(在上面的例子里用了亮色调、粗字体、背景色等等)。这相当于给用户一个提示:您已/即将完成填写表单。

  当一个表单有多个操作,比如“继续”和“返回”,那有必要减轻次要操作的视觉重量。这可以最小化用户潜在的操作错误的风险。

  虽然以上内容可以更好的让你设计表单,但是组合布局、可视化元素以及内容,仍然需要经过用户的测试以及数据分析(完成度评估、错误报告等)。

浅议Web网页Form表单设计技巧相关标签:网站规划网站改版企业建站建设网站
相关热点推荐
搜索引擎优化之Goog
即兴创作需要有效的设计
网站界面设计:网页的均
如何制作网站才能成功
网站页面在控制方面应注
迅速提高网站流量的方法
网站注册那些事儿
新手站长易犯的九大毛病
从网站建站到推广的路程
如何在HTML和XML
更新网站,提高网站权重
网站为什么要改版你知道
什么是真正的网站优化
百度每个月的收录时间分
企业建站的盈利模式及网
网站优化之外如何获得流
目前个性化搜索的不足点
关键词网页应该放到什么
企业通过建设网站来武装
如何提高网站收录和排名
网站策划的方法与方案?
iPadPro上线,意
青岛网站设计中如何创建
企业网站规划和网页设计
写给在职设计师们
网址搜索引擎,只需要花
必须了解的制作网站的一
企业VI设计不可忽略的
搜索引擎收录机制
网站推广十大不可以
引入样式表(css)的
WEB站点的质量测试是
建站事项1
企业网站建设的常见误区
微信小程序继续发力为开
建站全攻略细节篇
轻松打造自己的站内搜索
如何做高质量的网站外链
页面结构的SEO问题
优化策略:网页设计的七
奈薇建站网青岛网站建设公司/青岛网站制作公司,专业提供"气质"型网站建设及精美网站制作服务,同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展

热点地区:青岛网站建设价格 青岛即墨网站制作公司 开发区信息港 山东在线门户
建站咨询热线0532-88781131 15166683288 13963906391
版权所有© BangJianZhan.Com & Nev.Cn 青岛网站建设/网站制作公司
青岛雨后网络科技有限公司 - 青岛市市北区福州北路90号,景泰尚都6层
已经为您服务了
168个月 3