公司新闻

将想法与观点,与您一起分享~

开发案例插画 插画-树 插画-树

如何正确的设计文章详情页

润雪科技 时间:2017-07-17 10:36 浏览量:3404
网站设计是跟随内容及用户而定的,用户访问网站主要是查找自己需要的信息而已,而内容是否能够吸引用户长时间的停留在页面,一个好的文章详情页设计是必不可少的。

如何正确的设计文章详情页

如何规划文章详情页


详情页规划


        用户在浏览文章时,最终目的就是找到自己需要的信息。用户往往会用最舒服、最快的方式进行查找,我们只有设计的够自然、简洁、路劲清晰、内容易懂,符合用户浏览的习惯,用户才会继续浏览下去。当用户进入一个页面的时候,通常都是只花几秒的时间就会判定出这个网页是否能找到我需要的信息,决定是否继续浏览还是关闭网页,所以只有好的文章内容配上好的设计,才能让留住用户。


        多数用户都只是对页面一扫而过,而不会逐字阅读。大部分场景都是一扫而过看看内容是否跟自己查找的内容相关,随着互联网的竞争激烈,现在的文章动不动都是上千个字,有多少用户用逐字阅读?在文章正文中,真正被阅读的文字只有20%,我们就需要观察页面结构,将正文最核心的内容放放在热点区域来抓住用户的注意力,使其用户继续阅读下去。



用户浏览详情页方式


文章详情页

        详情页的的设计方式通常是成一个竖型的长方形,用户进入页面的时候第一视觉就是文章的顶部,最多就是阅读几句话而已,这简短的几句话都不能留住用户的话,下面在精彩的文章内容也是枉然,用户在一次往下阅读,其次就是网页中加粗的文字用来吸引用户,加粗的文字往往就是段落的标题,说明段落的重点,用户可选择性的阅读,提高用户体验。


如何正确的吸引用户的注意力

网页标题突出文章重点


文章详情顶部的简介


文章中的加租的父标题


配上有趣的图案


段落中加粗重点语句,跟书上做笔记一样

用户最不喜欢阅读的是文章

无图片的文章详情


超长段落的文章


无重点突出的文章


文章文字与文字之间泰国紧密,文字大小




如何正确的设计文章详情页,在设计之前先查找阅读用骨灰浏览网页习惯的相关知识,在结合内容的特点进行设计,虽然说是文章详情页,但不是所有详情都是同样的设计方式。



来源声明:本文【如何正确的设计文章详情页】由润雪科技编辑原创或采编整理,如需转载请注明来自润雪科技。以上内容部分(包含图片、文字)来源于网络,如有侵权,请及时与本站联系。

TAG标签:网站开发 网站设计

相关文章
  • 前端react项目使用prettier来格式化(美化)各种代码

    前端react项目使用prettier来格式化(美化)各种代码

    前端react项目使用prettier来格式化(美化)各种代码,包括javascript、php、java、typesctip、css、less、json、sql等都可以美化

  • php用Mpdf将html文档转为pdf

    php用Mpdf将html文档转为pdf

    php将html文档转成pdf保存到服务器

  • php用libreoffice将ppt转为pdf

    php用libreoffice将ppt转为pdf

    1、先安装libreoffice:yum install libreoffice;2、由于ppt中都是中文,执行命令转ppt的时候中文可能乱码,我的解决办法是在liunx系统中安装中文字体,把windows的字体直接全部拷贝到liunx服务器中,直接把所有字体都上传到服务器

  • php利用imagick扩展将pdf导出成图片

    php利用imagick扩展将pdf导出成图片

    需要先安装php的imagick扩展,两种方式,第一种是使用php,第二种是使用命令执行;随便用哪种执行需要修改nginx配置文件增加:proxy_read_timeout 600s;使其链接60秒后不断,不然pdf一旦过大60秒无法完成工作就断开链接了

  • apache配置转发,如使用workerman 或 webman等框架的时候配合apache

    apache配置转发,如使用workerman 或 webman等框架的时候配合apache

    在使用workerman 或 webman等框架开发应用的时候需要配合nginx 或 apache进行转发,官网的文档只有写nginx,下面的apache的配置,前提是apche需要开启这两个模块

  • 一个class类几个函数即可调用各种微信支付场景

    一个class类几个函数即可调用各种微信支付场景

    真在的只需要一个class类文件几个函数就可以调用微信的所有支付,不管是微信公众号、h5、app、小程序支付,加密方式都是一样的,对比下微信的支付文档,只需要修改第一步传入的参数不同,下单地址不同,加密方式都是一样的,所以只要看懂下面的第一个函数,将搞定微信的任何支付。

如果您感觉我们的案例非常不错,请与我们取得联系~
立即咨询
获取方案及报价 023-6288-5285
网站建设流程 需求沟通
网站建设流程 签订合同
网站建设流程 项目开发
网站建设流程 上线/运营维护

张经理

186-9655-6121

邹经理

188-1980-6503

润雪科技二维码
电话咨询 在线咨询 微信咨询