设计 “阅读全文” 链接

日期: 标签:网页设计
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我

      很多博客作者和网页设计师都清楚,吸引访客的注意并非易事。事实上,大多数网站都能够在很短时间内吸引潜在读者。网站之所以能够吸引读者,是因为这里有一些重要的因素,这其中包括好的标题、有趣的内容和好的设计。尽管这些方面都 是很重要的,但是我们今天将重点讨论一个网页设计当中非常具体的,有时又会被忽视的因素: 紧跟于标题或文章摘要的"Read more"(中文:阅读全文)"Continue reading"(中文:继续阅读) 链接

      每个网站都会以自己特有的方式来引导读者点击文章链接,很多网站用了比较明显的链接,而有些网站 的方式则有点微妙。无论哪种方式,网站和用户界面设计师们都想到了一些非常有创意的方式来引导读者阅读。在这里,我们将给您展示45个将"阅读全文" 和 "继续 阅读" 链接设计得非常棒的网站。我们希望,这些网站会给您未来的项目带来灵感,或至少提醒大家不要忽视了这个重要的设计元素。

 

最佳做法

      在开始我们的展示之前,让我们先明白为什么"阅读全文" 链接如此的重要。有很多的原因能够说明它们的重要性,最重要的一个原因是:它们允许设计师将内容压缩在主页上。通过压缩内容,您可以在有限的空间中放置更多的内容。这就意味着,读者能够快速的浏览文章标题,同时您可以在明显位置放置更多的信息。

      另外,"阅读全文"链接让网站管理员可以更轻松地跟踪最流行的内容。如果设计师将整篇文章的内容堆放在主页上, 网站管理员就很难跟踪最流行的内容和了解用户到底喜欢看哪些内容。

      最后一点,也许是最实际的原因是金钱。希望获取利益的网站都明白,读者点击的次数越多,那么他们点击广告的可能性就越大。"阅读全文"链接可以使页面点击数成一倍甚至两倍的数目增长,这就可以吸引更多的广告主 。

     现在我们明白"阅读全文"链接的重要性了,那就让我们一起来欣赏一些设计的最佳实践。

 
1. 突出文字链接

      目前最流行的是使用文字链接形式的"阅读全文"。通常设置为下划线、粗体、颜色突出,或者加一个 ">"标记。让文字链接有别于一般链接是很重要的,这也是很多设计师经常忽视的地方。

Tutorial9

PSDTuts

Smashing Apps

CSS Tricks

David Airey

Freelance Switch

Lost and Taken

Veerle’s Blog

Rob Goodlatte

Douglas Menezes

slashdot

UsabilityPost

Kupferwerk

Dino Latoga

Elliot Jay Stocks

SixRevisions

Viget

Design Moves Me

The White House

Yahoo News

Huffington Post

F-I

Red Nose Day

UGSMAG

Carrot Blog

Take the Walk

Fantesca

Concentric Studio

Well Medicated

 

 

2. 使用Icons图标

      当使用单纯的文字不能达到目的时,可以尝试一下添加Icons图标。Icons图标是用户界面设计中的杰出 工具,它能够很容易地把访客的目光 吸引到它的周围。

GoMediaZine

Macalicious

The Potato

Sam Rayner

Design Reviver

The World Wide Blogger Bake Off

An Idea

Blog Full Bliss

Koodoz

Spoongraphics

 
 
3. 使用按钮

     如果你想突出"阅读全文" 链接,那就用按钮吧。很多网站使用图片或CSS文字样式的按钮。不过,请记住过 多的按钮会给访客带来压迫感 ,所以要限量使用。

Real Mac Software

Philadelphia Eagles

Dawg House Design Studio

Naldz Graphics

Spoon Graphics

Healogix

 
 
趋势

      开始设计你的网站之前,看看别人是怎么做的是很重要的。你可以去迎合当前的趋势,也可以朝着相反 的方向走。无论选择哪种方式,及时 捕捉流行趋势是设计师必备的本能。

研究本文提供的例子,我们发现了一些有趣的趋势*:

  1. 1. 纯文字链接的使用超过其他任何形式,比例接近2:1;
  2. 2. 大多数网站使用"Read More"这样的措辞,或许会有一点变化(中文网站通常是"查看全文" 或"继续阅读")。
  3. 3. 纯文字链接和图标链接通常用于博客,而按钮则大多用于商业网站上。

注:以上趋势只是对本文实例的统计,不代表整个互联网的趋势。

 
结论

      希望本文可以给你的"查看全文"设计带来一点灵感和帮助。吸引读者点击链接的方式有许多种,并且 各有利弊。纵观优秀的网站设计,大 多数设计师喜欢保持页面和功能的简洁,它们使用粗体或鲜艳的文字,有的则使用图 标或按钮。并且它们都喜欢保持文字的 简短,有近三分之一的人仅仅使用了"Continue(继续)"这个词来标识,因为它足够简短。

      我们还发现,大多数博客仅使用文字链接,而商业网站则更多使用按钮。这样做的理由,可能是商业网 站的运营者认为按钮更能吸引用户关 注他们的产品,但博客作者则更希望他们的页面简洁直观,避免给用户带来压迫感。

      最后一点,决定设计优劣的主要因素在于你的创造力和想象力。只要你能想出有利于用户体验的点子, 那设计就一定能于办法实现它。

 


本文翻译自:Designing "Read More" And "Continue Reading" Links

"结论"部分翻译参考: "查看全文(Read more)"设计教程与欣赏

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜即刻 https://www.ludou.org/read-more-link.html
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者。

5 条留言

点此留言
  1. 无涯博客 无涯博客

    我想知道的是,应该怎么来修改???

    • Ludou

      @无涯博客 这些涉及到HTML、CSS,具体不是三言两语能够说清楚的,你可以自己学学。

  2. Yutorpea

    有一个问题请教露兜老师。如何在wordpress中显示摘要而非全文。这个设定记得老版本的WP中有。现在只有在feed中才有啦。

    • 露兜

      @Yutorpea 文章编辑页面,右上角的显示选项,勾选摘要,填写文章摘要。
      主题如何设置首页文章列表只显示摘要,请上网搜索:WordPress 首页 显示 摘要
      需要用到的函数是:the_excerpt()

      • yutorpea

        @露兜 非常感谢!提示太准确了!

发表留言