评论样式是博客设计中经常被忽略的部分。 毕竟,它们位于页面的底部,直到访问者对您的网站有了印象,他们才可以看到,并且它们的真正作用是提供更多功能。 为什么要花大量时间在样式上并使它们真正脱颖而出?
但是良好的注释样式可以使您的设计与众不同。 花时间设计您的评论和评论表单可以给普通访问者留下深刻的印象。 它下意识地暗示您关心他们的意见,并希望他们参与您网站上的讨论。
在下面,您将找到一些最佳实践,以及在下一个博客设计中创建漂亮的评论系统的示例。
样式
您如何设置评论的风格可能会对访问者对您博客的总体感知产生巨大影响。 它表明您足够在意读者说些什么,以便花时间以一种时尚且易于使用的方式炫耀其言论。
螺纹视图还是平面视图?
是否具有主题注释或仅按时间顺序对其进行排序始终是一个棘手的问题。 尝试决定时,需要考虑一些事项。
首先,如果您希望访问者彼此之间积极讨论您的帖子,那么主题化评论可以大大促进这一点,特别是如果您有大量评论。
![freelanceswitch评论](https://i-blog.csdnimg.cn/blog_migrate/806877b8cd132f4311672a53e48fbd8f.png)
另一方面,线程注释有时会被滥用。 评论者可能会使用完全不相关的内容来响应线程中的第一个评论,只是使他们的评论显示在评论的顶部附近(当然,您可以随时进行调整以防止这种情况发生,但这是额外的工作量)管理员)。
如果您对让评论者直接回复文章而不是彼此回复更感兴趣,那么进行扁平化评论会更有意义。
两种选择都有其自身的优缺点,因此您在做决定之前确实必须权衡每种方法的优缺点。
最佳实践
这里是一些用于创建更有效的注释设计的技巧。
强调作者评论
在设计评论时,您应该采取一些措施使作者或管理员评论在页面上脱颖而出。 这可以通过在注释中添加图标或更改背景颜色来实现。
这种样式使评论者更容易直接看到作者的回复,并有助于增加讨论量。
![阿司帕那](https://i-blog.csdnimg.cn/blog_migrate/3e429a330006bb7e61324258edf7717a.jpeg)
包括墓碑
人们在进行讨论时喜欢看到别人的脸。 通过启用Gravatar,您可以自动执行此过程并鼓励讨论。
![马克·布尔顿](https://i-blog.csdnimg.cn/blog_migrate/35bbed2b00d0ea39ea9233b48a894667.png)
引用与引用分开
引用确实不是讨论的一部分(至少不是您的博客中进行的一部分),并且不应与其他评论内联。
给引用提供自己的特殊区域,可以在上方(如果通常获得的引用多于引用)或在所有其他注释下方(如果通常获得的引用多于注释)。
使用有意义的设计元素
在设置评论样式时,请考虑对内容类型有意义的设计元素。 气泡,引号,简单的边框和交替的背景颜色都可以增强您的注释并提高可读性。
![复制博客](https://i-blog.csdnimg.cn/blog_migrate/3724ea02a8db04029e8d2445b42a884f.png)
对您的评论进行分页
如果您的博客上通常收到20或30条以上的评论,请考虑对这些评论进行分页以缩短页面加载时间。
分页注释还可能使您看起来比您有更多注释,因为导航到新页面几乎总是会让人们感到内容更多。
直接链接到个人评论成为可能
包含指向每个单独评论的锚链接可以使访问者更轻松地与他人共享评论。
如果某人在您博客的评论中进行的讨论特别好,他们可能想邀请其他人加入,并直接链接到他们的最新评论或评论的主题,这将使事情变得容易。
![Garrettdimon](https://i-blog.csdnimg.cn/blog_migrate/efd69d269cd6d8c4c918cc4d5c0fb6f7.png)
示例:整洁的评论视图
摇滚乐
![摇滚乐](https://i-blog.csdnimg.cn/blog_migrate/4b58a6a27816ac96dd67a7f95ef874b8.png)
Baekdal.com
![baekdal评论](https://i-blog.csdnimg.cn/blog_migrate/737446df99d93d54091b40235f3d6796.png)
Subtraction.com
![减法](https://i-blog.csdnimg.cn/blog_migrate/cee0be22d01489bc38ea814a98c1a737.png)
GoodBytes.be
![好字节](https://i-blog.csdnimg.cn/blog_migrate/226ae223fda94994608d96f9f7745471.png)
方形空间
![平方空间](https://i-blog.csdnimg.cn/blog_migrate/e99c221ba0ef721f651d34df559754c1.png)
博客少
![更好的设计](https://i-blog.csdnimg.cn/blog_migrate/d1590645717d78830fa925c88099fe57.png)
Snook.ca
![ook](https://i-blog.csdnimg.cn/blog_migrate/e9a87d2650b198a4a88a51cd91c091a8.png)
粒子树
![粒子树](https://i-blog.csdnimg.cn/blog_migrate/e287b974115cabaabade9355e2af04e4.png)
希金斯人,希克斯设计
![希克森主义](https://i-blog.csdnimg.cn/blog_migrate/487b4b287b36383b7b78096ac9a644cb.jpeg)
Dezinerfolio
![Dezinerfolio](https://i-blog.csdnimg.cn/blog_migrate/fe9a535a423c48f0c5bb9bd27d0b01d7.png)
设计
您的评论表必须易于使用,并鼓励访问者参与您博客上正在进行的讨论。 虽然仅凭良好的评论表单设计可能不会在一夜之间为您带来大量评论,但设计不当的表单肯定会阻止读者发表评论。
注意事项和最佳做法
设计评论表单时,需要考虑很多因素,从是否包括额外的垃圾邮件预防措施到如何处理回复。 以下是做出这些决定的一些技巧以及其他一些技巧。
放置您的评论表
在设计整体评论系统时,这是一个非常重要的考虑因素。 您是否希望您的评论表直接位于帖子本身之下,或者位于评论的结尾?
最好的决定方法是问自己是否要让评论者积极地讨论帖子,还是只将他们的评论集中在帖子本身上。
如果是第一种选择,则将您的评论表放在评论的末尾。 如果是后者,则将其直接放在帖子下方,评论上方。
垃圾邮件预防
即使您使用Akismet这样的防垃圾邮件实用程序,直接向表单中添加一些垃圾邮件防护也可以进一步减少垃圾邮件的数量。
有两种常见的选择:一种是验证码,这对于许多用户来说很难解密(尽管某些验证码系统明显优于其他验证码系统); 另一个是基于问题的系统,通常使用简单的数学方程式,评论者必须先回答才能提交评论。
![克里斯希弗莱特](https://i-blog.csdnimg.cn/blog_migrate/6706257537f1f54a20710c65e2feb9ac.png)
需要一个帐户或允许备用登录
如果您收到大量垃圾邮件评论,或者如果您有辱骂评论的问题,那么要求评论者拥有一个帐户可能会有所帮助。 其他选项包括让用户使用其拥有的另一个帐户登录,例如Twitter,Facebook Connect或OpenID。
要求登录使人们对自己留下的评论更加负责,这意味着更少的辱骂或垃圾评论。 当然,要求登录也可以减少您获得的评论数量,因为有些人不会打扰。
![Baekdalform](https://i-blog.csdnimg.cn/blog_migrate/11f6220a97a05ace4d499d0aa5e62266.png)
处理回复
如果要使访问者可以直接回复其他评论者,则重要的是要决定是否要在评论者点击回复时显示内嵌评论表单,或者只想让他们进入已经存在的评论表单这一页。
两者都不错,尽管第一种选择有时会减少混乱(您知道您肯定是在回复特定帖子,而不是一般地评论)。
定位表单字段
您如何在注释表单中定位和标记字段可能会对表单的可用性产生重大影响。 可用性邮报上有一篇很棒的文章,涵盖了更深入的内容。
![设计](https://i-blog.csdnimg.cn/blog_migrate/07e19431e2643f7dd6d89b98e04e2c29.png)
表格说明
使您的评论者可以轻松地查看评论表单中需要填写的字段。 还应向他们明确指出,不会公开其电子邮件地址之类的内容。
![简单位](https://i-blog.csdnimg.cn/blog_migrate/320cadd1b1054288e4e4f485b795c353.png)
验证方式
您的评论表单需要向评论者表明他们的评论已成功发布,即使您保留所有或部分评论以进行审核。
如果您要发表评论,请确保您指出评论经过审核后才会显示,因此您的访问者不会因为发表第一个评论而最终发表多条评论。
提供预览
让您的评论者在提交之前预览其帖子是一个不错的可用性功能,许多博客都忽略了此功能。 这也意味着您的博客获得了更高质量的评论,因为评论者在发布之前更有可能通读并编辑他们的评论。
![茉莉花](https://i-blog.csdnimg.cn/blog_migrate/8666121dcd7b6b983b9cf90557edbc2a.png)
示例:评论表
互联网亿万富翁
![互联网亿万富翁](https://i-blog.csdnimg.cn/blog_migrate/3f82fb5725237f3ea64a38d12e3b2141.png)
正宗的无聊
![正宗的无聊](https://i-blog.csdnimg.cn/blog_migrate/72c7247f8187514346a44e791b6db091.png)
FreelanceSwitch
![FreelanceSwitch](https://i-blog.csdnimg.cn/blog_migrate/4898e8454e29ed8ce100de13c7ee199f.png)
橡树创意
![橡树创意](https://i-blog.csdnimg.cn/blog_migrate/368ad258b83cdb33a0c2a8f3bb68debb.png)
BrianYerkes.com
![BrianYerkes.com](https://i-blog.csdnimg.cn/blog_migrate/e4b3a23a844343693c252c0df83f1614.png)
阿布杜泽多
![阿布杜泽多](https://i-blog.csdnimg.cn/blog_migrate/34f67252d944fb9e2920b044cbf93581.png)
WPDesigner.com
![WPDesigner.com](https://i-blog.csdnimg.cn/blog_migrate/f9810823db5a10961fa77ecca0c9e357.png)
设计工作计划
![设计工作计划](https://i-blog.csdnimg.cn/blog_migrate/a97b492c86b634e223977166f1e22de9.png)
Doc4广告代理商
![Doc4广告代理商](https://i-blog.csdnimg.cn/blog_migrate/03376fddfc378d86cc0dd1f692129dc9.png)
Mac Appstorm
![Mac Appstorm](https://i-blog.csdnimg.cn/blog_migrate/d6edb2c384e3ab7979c84d13236545d3.png)
Productivedreams.com
![Productivedreams.com](https://i-blog.csdnimg.cn/blog_migrate/3d04d8b2266124b993303f72bf7a9d41.png)
资料来源
- 77个鼓舞人心的博客评论表单设计 –第一名网页设计师
- 设计分析:评论 – Snook.ca
- 界面设计灵感:36种简洁的评论表格设计 – Dzine Blog
- 使用WordPress注释的十大教程 – DesignM.ag
- 从引用中分离引用 – Pro Blog Design
- 设计元素 – SmileyCat,特别是“ 博客评论”和“ 博客评论表单”部分
翻译自: https://www.hongkiat.com/blog/comment-design-considerations-best-practices-and-examples/