优秀的网页评论表单的设计方法

2016-02-20 00:06 5 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - Web开发 】

vadim,usabilitypost 的读者,发表过一篇很有意思的文章,《评论表单设计》。文章里说他在网上留心很久,发现了网上的大多数表单都把姓名和Email 作为必填的选项,不过作为评论表单来说和传统表单应该有区别了,除了姓名和Email外,评论项也是必不可少的,如图:

vadim提到,他曾特意去观察一些有上百条评论的热门博客,他发现这些博客的评论表单的选项非常多也没有注明是否必填,很多人不得不在某些对他们没用的选项留下none和n/a。

这些表单很多选项并不是非填不可的,但是没有提示,很容易让人产生思路混乱,因此除了姓名和Email,其它的都应该可以算作是选填项吧。不过作为评论表单,评论框也应该是作为必填项存在,当然,如果你足够聪明那也行~~

做一个优秀的评论表单设计


如何设计一个完美的评论表单?

UX Matters 写过一篇《label placement in forms》(表单中的标签位置)的好文。这篇文章的研究是基于eye-tracking,可以算的上是比较权威的。

摘自本文你应该把label标签放在input的上面,这样的布局,可以让眼睛始终保持label和input的最小距离,如果你要把label放在input的左边的话,那你至少要保持label中文字右对齐,这样也是一种最小距离。同时建议文字不要使用粗体。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

一个好的评论表单设计,应该是label和input越靠近越好,如果label在input之上那是相当完美的位置啦,但是实际操作可能需要考虑到实际的产品需求,字段的多少。大多数表单都是先‘姓名’,接下来‘Email’,其次是‘网址’,最后是‘评论框’这样排列,几乎所有的博客和网站的评论框都是用这样的排列方式,但是否这样的方式是最好的方式?

我的一个朋友,做了一个与众不同的评论表单设计,如图:

 

这样的设计挑战了传统的设计,把评论框放在了第一的位置,然后才是评论者的信息。这样的方式可以让你先写评论,再登录/注册,就像人们写信一样,先把信的内容写好,再在结尾处签字。我想这样可能会给用户一种新感觉吧。

当然,这样的评论表单并不是非常完美的那种,它让用户必须得先到右侧找到输入框,填好信息之后,再回到左侧确定提交才行。

于是,我这推荐另一种我觉得不错的表单,是来自Particletree blog:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

感觉非常好的表单,我们能够第一时间看到评论框,紧靠在下面就是作者信息框了,label标签也在input上方,布局就像ux matter说的那样。提交按钮在所有的字段后,并且居中显示,必填项也有红色的星号提示。再一次说下,非常不错。我可能会把usability post的评论框也换成这种儿。。。

你是怎么想的呢?你觉得传统的那种评论框不错?还是我给你推荐的2种新式的表单很好?还是你有新的好方法?我非常欢迎听到你们的想法:)

来源:http://www.tulaoshi.com/n/20160220/1631246.html

延伸阅读
导航是网站不可或缺的一部分,看惯了一成不变传统的网站导航和今年倍受宠爱的隐藏式汉堡菜单导航,是时候来点不一样的刺激下灵感了。这20个网站不仅都有自己脑洞大开的导航设计,整体设计也是创意丰满,一起来点意料之外的惊喜吧。 Vincent Tavano ACT Festival ECC Architectural Print Gallery Heat Architecture ...
标签: Web开发
获取一组radio被选中项的值 var item = $(’input[@name=items][@checked]‘).val(); 获取select被选中项的文本 var item = $(select[@name=items] option[@selected]).text(); select下拉框的第二个元素为当前选中值 $(’#select_id’)[0].selectedIndex = 1; radio单选组的第二个元素为当前选中值 $(’input[@na...
备注: 关于label和tag,在中文中都翻译成标签,而下文中出现的标签,都是对label的翻译,比如"用户名"+输入框, 这里的"用户名"项在英文中是label,约定翻译为标签 页面表单已经是web设计中讨论最多的元素,已经超过10年了.我们无法避免.Call-to-action(一般翻译为"行动呼吁","行动号召",但是都觉得不理想....
最近几个月以来,我一直忙于在我的新书中通过实际测试数据来重写设计建议,这本书名叫《网页表单设计最佳练习》(Web Form Design Best Practices)。为完成这件事,我很荣幸的和伦敦的可用性专家Etre一起合作,并进行了大量的专门针对网页表单设计的眼动实验和可用性研究。其中的一项测试便是研究主要行为与次要行为之间的差异化。 主要行为与...
Adham Dannaway 图01 Jessica Caldwell 图02 Million 图03 Made by On 图04 Atelier Design 图05 Brand New Conference 图06 Kantt 图07 Deutsche & Japaner 图08 1 Minus 1 图09 Type Plus 图10 Built by the Factory 图11 Bionic Hippo 图12 Massimo Bonini 图13 Ma...

经验教程

476

收藏

25
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部