欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 24小时服务热线:400-8793-956
当前位置:南京网站制作公司 > 资讯中心 > 网站知识
南京网站建设设计社交新闻网站的最佳实践
来源:南京网站制作 时间:2019-03-04 08:53:08

这些天你如何获得每日新闻?嗯...您可能正在访问自己喜欢的网站和博客,但由于这些博客可能没有任何更新,因此效率低下。也许您使用RSS订阅它们,RSS会直接向您发送所有新文章,但在这种情况下,您必须对所有新内容进行排序以找到您感兴趣的内容。今天的另一个选择是访问社交新闻网站。

 
社交新闻网站是链接聚合器,这意味着它们的主要功能是收集和共享有趣的链接。这可以通过用户提交来完成,或者可以由系统自动完成。聚合方面只是其中的一部分,因为这些站点也对链接进行排序。同样,这可以通过用户投票或一些机械算法来完成(尽管在这种情况下,我们真的可以称之为“社交”新闻网站吗?)。最终结果是相同的:最有趣的链接上升到顶部。这一特殊功能使社交新闻网站成为RSS的绝佳替代品。
 
在本文中南京网站建设安优网络将展示一些当前的顶级社交新闻网站,将确定其设计中的趋势和模式,并建议在设计此类网站时遵循的一些最佳实践。让
我们首先看看四个热门的社交新闻网站,看看他们的设计是如何比较的。
 
Digg:
 
Digg是最受欢迎的社交新闻网站,其功能设计经常被许多竞争对手所采用。Digg使用两列布局:左侧的故事列表,右侧的额外内容,例如前10个故事框。在顶部,Digg显示了一个故事类别列表,在它们下面是排序控件。因此,用户可以选择一个类别,比如说“技术”,然后按“即将到来”对其进行排序,以查看所有最新提交的内容。
 
Propeller:
 
Propeller是一个很好地遵循Digg布局的网站的例子。这是一个两列布局,左侧是故事列表,右侧是次要内容,例如最新的关于Propeller的推文或大多数评论的故事列表。
 
与Digg不同,Propeller在每个故事之间使用水平线分隔符,以及斑马条纹背景使列表更容易扫描。这可能会有所帮助,尽管我必须注意斑马条纹传统上用于简化多个列表的读取,特别是那些具有许多列的列表。这是因为您想要读取远离左侧原始标签的列中的一段数据,并使用斑马条纹作为向导帮助您移动眼睛而不会丢失对该行的跟踪。在Propeller的背景下,它基本上只有一个数据列,斑马条纹的效果值得怀疑。
 
Reddit:
 
Reddit是与Digg不同设计的一个例子。Reddit 非常关注内容,特别是头条新闻。重点是如此强大,以至于除了头条新闻之外的所有内容都被最小化并移开以让故事占据前排座位。这种极简主义的设计允许非常快速的信息消费,因为访问者可以快速扫描很多头条新闻,以找到他们感兴趣的故事。由于Reddit没有描述字段,因此每个故事占用的空间较少,因此可以在屏幕上显示更多故事。
 
Reddit在首页的最顶端也有一个独特的元素:一个随机的即将到来的故事。与其他社交新闻网站一样,最新的Reddit故事保存在“即将发布”部分。由于此部分的流量少于首页,因此可能会丢失一些有趣的故事。为了解决这个问题,Reddit在首页上显示随机即将发布的故事,给他们一个短暂的曝光时刻,这可能有助于推动他们走向顶峰。
 
Newsvine:
 
Newsvine在设计上采用了不同的方法。与其他看起来像头条新闻的社交新闻网站不同,Newsvine使用杂志/报纸的外观。故事附有大量照片和描述,在某些情况下,故事的内容也可以在其详细信息/评论页面上找到。
 
Newsvine的一个有趣元素是影响热图:

该图表显示了两个条纹:投票最多的故事和讨论最多的故事。每个都显示一组块,所有块都有不同的颜色和大小。更大的块意味着对它们有更多的评论或更多的投票,这取决于它们所在的图表。颜色表示故事的年龄 - 绿色是新鲜的,红色是旧的。这种可视化允许以独特的方式浏览Newsvine上的内容。
 
现在让我们来看看社交新闻网站上的一些常见界面元素:
 
投票箱
所有社交新闻网站都有一些对文章进行投票的方法,但使用自动排序算法计算排名的网站除外。这使投票区非常重要。你希望它足够坚固以确保人们不会错过它,但同时你需要让它在界面设计中很好地淡入,以确保 在扫描标题列表时不会分散注意力。
 
以下是热门新闻网站投票箱的几个示例:

每个框由最多四个元素组成:提交的等级,投票的总和,投票故事的链接以及投票故事的链接。大多数网站都没有显示排名,只显示得分总和 - 也就是说,正面和负面投票都加起来了。谈论选票时,大多数社交新闻网站都有一种方式可以向下投票,但有些选择只有一个按钮。在仅显示向上按钮的情况下,通常在其他地方提供“埋葬”(或向下投票)故事的链接。
 
故事细节
每个故事都不仅仅是一个标题。故事通常显示他们的日期,发布他们的用户,简要描述,评论部分的链接,甚至可能是图片。
 
以下是热门新闻网站提交详情区域的几个示例:

投票框通常位于左侧。这使它可以保持在每个故事的一致位置。评论链接以及任何其他附加内容(例如“分享此故事”)位于说明(如果有)或标题下方。通过使标题周围的细节文本变为灰色,细节消失并将焦点放在标题上,从而使得扫描故事列表变得更加容易,因为我们的眼睛可以快速地从一个跳到另一个。
 
大多数社交新闻网站将时间显示为相对时间 - 例如10小时前。这是有道理的,因为人们希望看到故事的新鲜程度,并且对发布时的确切日期和时间并不特别感兴趣。
 
您还会注意到,某些网站会在其标题旁边显示提交链接所指向的域,通常在括号内。这很有用,因为它允许访问者判断他们应该期望什么类型的内容。例如,如果他们将“youtube.com”视为来源,他们就会知道这是一段视频。诸如'nytimes等知名来源也可以作为故事质量和长度的指标。虽然用户可以在悬停在链接上时看到源,但在快速扫描标题时始终显示它有帮助。
 
分页
社交新闻网站有数千个,或者在某些情况下有数百万个用户提交的链接。一次显示所有这些链接当然是不可能的; 你必须一次显示一个小集,以允许用户消化它。链接通常使用分页分成页面。分页是一种将内容分成多个页面并提供一组链接的方法,这些链接通常位于页面的底部或顶部,可以转到下一页或上一页,也可以选择手动页面编号。
 
以下是热门新闻网站分页的几个例子:

当然有分页的替代方案。Reddit仅显示下一页和上一页链接:

这种方法使导航更简单,因为您不必考虑您想要或找到“下一个”链接的页面 - 只有两个链接,所以大多数时候您只想要下一页。说了这些之后,它确实让它有点混乱,因为很难说出你在哪个页面。
 
Slashdot根据需要加载更多故事。只需单击“更多”按钮,下面将使用AJAX加载更多故事:

使用AJAX加载东西意味着没有“第一页”,只有顶部的故事和底部的故事。
 
无论您选择哪种分页,都应该记住一些事项,以确保您可以使用此界面元素。点击区域应该很大 - 不要只提供链接列表,而是为每个链接添加一个CSS填充属性,以便更容易点击。使用自定义样式清楚地识别当前页面 - 您的用户需要知道他们现在的位置。最后,提供“上一个”和“下一个”链接。大多数情况下,您的访问者都希望在下一页上浏览故事,因此通过制作这些链接,您将消除在查找下一页时所涉及的任何想法。
 
评论
我要研究的最后一项是评论。评论是社交新闻网站的一个重要元素,因为它们允许围绕每个故事进行讨论。故事链接指向的网站可能没有评论功能,因此社交新闻网站的评论部分作为讨论平台。
 
评论可以投票,就像个别故事一样。投票控件位于每条评论的右侧,如竖起大拇指或竖起大拇指。该评分最高的评论浮到列表的顶部,这意味着更高质量的讨论总是在顶部,任何毫无价值的意见将被否决。
 
Digg提供了另一个功能,可以更好地发表评论:线程化。如果你回复它,每个评论都可以启动它自己的一个帖子。这些线程是“折叠”的,但您可以使用线程注释底部的小回复链接将其打开。然后,所有回复都存储在父评论下,也可以向上或向下投票。这允许有趣的回复产生他们自己的讨论。
 
Newsvine采用与Digg相同的结构 - 每个评论都能够主持一组回复,但回复本身无法主持进一步的回复。这样可以保持视图清晰,但讨论会变得更加严格,这是否是好事取决于您希望在讨论中看到的自由度。
 
视觉外观略有不同。每个评论都没有添加左边距,而是将Newsvine的评论包装在盒子里。回复也包装在框中,并放在父框内。这提供了  明确的关系指标。Newsvine也只允许对父母评论进行投票。
 
南京网站建设安优网络认为,评论投票和评论线索这两个要素是促进社交新闻网站良好讨论所必需的基本要素。投票就像一个过滤器,从顶部删除任何低价值或垃圾评论,甚至完全删除它们(一些网站隐藏评分为负分数); 并且线程允许讨论转向不同的感兴趣领域。更多的讨论区域意味着更多要讨论的内容和更多的评论 - 这是一个严格的单层结构无法提供的东西。

本文地址:http://www.njanyou.cn/web/2349.html
Tag:
专业服务:南京网站制作,南京网站制作公司,南京网站建设公司
联系电话:025-65016872
上一篇: 南京网站建设帮你分析如何选择合适的CMS
下一篇: 南京网站制作认为设计师应该编码的6个理由
最新案例
永银
永银
珠海跨境电商
珠海跨境电商
五颗星商城
五颗星商城
上海万客生鲜超市
上海万客生鲜超市
一九在线商城
一九在线商城
你可能感兴趣
如何在 2024 年为您的网站创建徽标
无缝过渡:在设计驱动型开发中表现出色
社交媒体受欢迎程度背后的心理学
超越点击和点赞:释放数字营销的力量
使用选择轮使网站导航变得有趣的便捷指南
在您的网站上使用不寻常和醒目的颜色的 6 种方法
花店的基本数字营销策略
SEO的内部链接最佳实践
最后更新
如果需要改造在线商店南京网站建设认为需要考虑的 8 件事 南京网站制作公司分享使用 iPhone 拍摄更好网站照片的 7 个技巧 南京网站制作说说哪些关键因素使商业网站成功? 2024年房地产网站的创新网页设计趋势 捕捉自信:摄影在男士时尚品牌中的作用 SEO的内部链接最佳实践 花店的基本数字营销策略 在您的网站上使用不寻常和醒目的颜色的 6 种方法
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例