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

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

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

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

  表单布局

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

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

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

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

  借助可视化元素

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

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

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

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

  主次操作

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

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

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

浅议Web网页Form表单设计技巧相关标签:制作网页制作网页开发网站制作网站
相关热点推荐
设计规范不应是摆设
网站SEO优化的最新趋
关键词网页应该放到什么
怎么制定网站推广方案
青岛网站设计如何做到文
网络性能测量技术的研究
搜索引擎算法:HITS
关于网站排名的基本原则
提高企业网站声誉的SE
平面设计师如何转型为互
青岛网站制作公司那家最
网站推广技术
网页顶尖设计师的思考与
网站推广方案
空状态设计是提升产品用
营销型网站建设的营销策
科普知识之搜索引擎的工
关于网站品质
企业建站“新闻动态”栏
响应式网页你了解吗?
个人网站的一些基础小知
网页设计中的版式原理-
真正成功的关键IP是坚
搜索引擎友好的网站设计
我国建成全球最大5G技
网页顶尖设计师的思考与
习惯是一件很可怕的事,
网站优化中你不曾注意的
网页设计中排版与布局基
时刻关注网站的健康程度
网站优化过度:新手站长
如何做一个优秀的设计?
如何让网站访客变成你的
电子商务网站“用户评论
网站登陆页面应遵循的原
网络三阶段是指的哪三阶
网页设计制作应注意的问
企业网站的运营思考
企业网站建设之认知用户
网站有效的页面外部优化
奈薇建站网青岛网站建设公司/青岛网站制作公司,专业提供"气质"型网站建设及精美网站制作服务,同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展

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