新闻动态页面设计的四大关键点-阿里云开发者社区

开发者社区> 云建站助手> 正文

新闻动态页面设计的四大关键点

简介: 导航功能栏之新闻动态页面的设计
+关注继续查看

随着互联网竞争的日益加剧,越来越多的企业开始意识到提供优质的用户体验才是重要的、可持续的竞争优势。优质的用户体验可以提升用户对企业的整体印象,也是区别竞争对手的软实力。

用户体验一般包含4个方面,品牌、易用性、功能性和内容。做到这四个方面不仅可以让用户便捷地访问到自己需要的内容,还能在不知不觉中接受企业想要传达的品牌和内容。

而今天要讲的「新闻动态」页面则是着重于易用性和内容的建设。聚焦于提升用户的阅读体验。

提升用户的阅读体验主要着眼于页面中的文字、排版、网页设计类型。所以下面我们就从这几个方面进行讲解。

一、页面文字要符合用户阅读习惯
「新闻动态」页面文字较多,所以要采用易于用户阅读的字体,正文内容还要注意字体的大小及行距等属性的设置,避免文字过小或过密造成阅读障碍。
设置符合用户阅读习惯的文字,可以使浏览者更顺利、愉快地接受企业所要传达的信息。
1.关于字体
字体分为衬线字体和非衬线字体。简单来说,衬线字体就是带有衬线的字体,是模仿中国古代字体和古代碑文上的字体,笔画有粗细之分,简单易变形,修饰性强。常用的有宋体。
非衬线字体与衬线字体相反,无衬线装饰,笔画粗细无明显差异。常用的是微软雅黑。
页面中的字体选择是一种感性行为,需要考虑整个网站页面和浏览者的感受。除此之外,还要考虑大多数浏览者的计算机里可能只有默认字体,所以,正文内容最好采用基本字体。

2.关于字号
在页面设计中,字号也是用户体验的一部分,但文字并不是仅仅放在网页上就可以,还需要合理的布局和搭配样式才能起到事半功倍的作用。
网页中字号应用的几条规范如下:
①正文内容使用一般使用宋体12px或14px,最小不小于12px。
②主导航文字使用14-18px字号,一般使用偶数字号,奇数字号的字体在显示时会有毛边。
③工具栏文字为12px或14px;一级菜单使用14x,二级菜单使用12px;版底文字为12px或14px。

二、页面排版要简洁易读
页面排版主要涉及行宽、间距和行对齐。

1.行宽
如果文字过长,则视线移动距离大,浏览难以注意段落的起点和终点;如果文字过短,眼睛需要来回扫视,容易破坏阅读节奏。
因此,保证每一行承载合适的字数可以提高文章的易读性。调查显示,在实际网页中,14px大小的中文字体,每行的字符数在35-45更合适。

2.间距
一般来说,行距过宽会让文字失去延展性,影响阅读;行距过窄,则容易跳行。
页面设计中,一般根据字号大小选择1-1.5倍作为行间距,1.5-2倍作为段间距。

3.行对齐
通常情况下,尽量在页面中选择一种文本对齐方式,要尽量避免两端对齐。

三、使用响应式网页设计
不仅是「新闻动态」的页面设计,还是整个网站的设计,都建议大家使用响应式设计。
所谓响应式设计就是一个网站能够自动适应不同设备。根据系统平台、屏幕尺寸、屏幕定向等进行相应的相应和调整。
响应式设计不仅可以带来高效的阅读体验,提升用户的新闻阅读效率,能够使用户在固定的时间里阅读更多的内容,有利于曝光更多的品牌资讯和广告。

四、减少用户等待时间
一般网页的打开速度最好不要超过3秒,时间过长会影响用户的心情以及对网站的印象。
Robert B Miller在他发表的有关响应时间的文章中指出,用户有三个阈值时间:0.1秒钟、1秒钟和10秒钟。
如果响应时间短于0.1秒钟,用户感觉不到任何延迟,即0.1秒钟是让用户感觉到系统立即做出了响应的时间上限。1秒钟是让用户思维不被中断的上限。10秒钟是让用户的注意力保持在对话过程中的上限。

第一印象很重要,等待时间过长会影响用户是否进行进一步的操作。看一篇文章已经耗费掉大量的耐心,你还指望人家以后点进去产品页面细看嘛!!!
所以网页打开速度当然是越快越好,没有最快,只有更快。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8479 0
页面之间传值的方法
在前端开发中我们常常需要从一个跳到另一个页面,并且将当前页面的数据传递过去,总结一下我的方法:  1 通过URL传值,不过有个缺点就是传输的值不能太大,因为浏览器对与URL的长度是有限制的。 首先定义getQueryString方法 function getQueryString(name) {  ...
978 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10280 0
关于iframe页面里的重定向问题
    最近公司做的一个功能,使用了iframe,父页面内嵌子页面,里面的坑还挺多的,上次其实就遇到过,只不过今天在此描述一下。     请允许我画个草图:          外层大圈是父级页面,里层是子级页面,我们是在父级引用子级页面的,由于是两个页面,URL肯定不一样的,“一般的,在子页面做的操作也仅仅对子页面生效”,现在我要说的就是关于这一点的!     公司这个功能,在子级页面完成某个操作以后,需要跳转页面,于是子级页面的代码是这样写的:提交=>提交成功=>跳转B页面。
2486 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
12149 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11392 0
新闻动态页面设计的四大关键点
导航功能栏之新闻动态页面的设计
176 0
Render在View页面的写法
@{Html.RenderAction("GenreMenu", "Store");} @{Html.RenderPartial("HistoryList", Model);}  学习交流群:364976091
512 0
+关注
云建站助手
阿里云面向企业/个人用户提供一站式建站产品及服务,包括自助型模板建站工具【云速成美站】,个性化定制设计官网产品【云企业官网】。关注云建站助手,掌握产品最新动态。
74
文章
3
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载