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

简介: 导航功能栏之新闻动态页面的设计

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

用户体验一般包含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秒钟是让用户的注意力保持在对话过程中的上限。

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

相关文章
|
4月前
|
UED
带您一步步构建一个具有复杂布局的电商详情页,涵盖页面结构规划、样式设计以及交互效果的实现
【6月更文挑战第14天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先,规划页面结构,包括顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。接着,进行样式设计,注重色彩搭配、字体选择、布局与间距以及图片处理。例如,使用固定顶部导航栏,轮播图展示商品图片,分块展示商品信息和评价,以及设计相关商品推荐区。最后,实现交互效果,如图片放大、添加到购物车按钮、滚动监听和评论互动,提升用户体验。实际开发时需根据需求和规范进行调整,保证跨设备兼容性。
74 1
|
12月前
|
传感器 XML 定位技术
《移动互联网技术》第九章 感知与多媒体: 了解质感设计的基本原则和设计方法
《移动互联网技术》第九章 感知与多媒体: 了解质感设计的基本原则和设计方法
86 0
|
数据采集 数据可视化 搜索推荐
网站导航应该这样设计才正确,你应该知道的十个关键点
网站导航的细节设计左右着使用者体验好坏,不管你的网站页面设计得再漂亮,使用者体验不在,自然也留不住浏览者的注意力。从你的网站视觉吸引力、布局,再到文本的运用都是使用者体验的一环,要达到美观与功能之间的平衡,才称得上是一个好网站。
346 0
网站导航应该这样设计才正确,你应该知道的十个关键点
|
移动开发 数据可视化 前端开发
基于Leaflet的全景综合展示实战
众所周知,当前许多GIS类应用底图数据都是有层级限制。在一些需要高清晰的实景展示需求下,就必须要结合一些更接近真实的展示。比如倾斜摄影测量、Bim技术、全景展示技术。而从经济成本和时间成本上来比较,全景展示技术成本较低,制作流程简单
579 0
基于Leaflet的全景综合展示实战
资深交互设计师教你:四类弹框的四大设计准则
资深交互设计师教你:四类弹框的四大设计准则
资深交互设计师教你:四类弹框的四大设计准则
|
JavaScript NoSQL 数据可视化
D3.js 力导向图的显示优化
我们用 D3.js 力导向图来对图数据库的数据关系进行分析,其节点和关系线直观地体现出图数据库的数据关系,并且还可以关联相对应的图数据库语句完成拓展查询。此外,本文还讲解了如何优化新增节点和多边关系的显示
1550 0
D3.js 力导向图的显示优化
|
数据库
【自然框架】—— 全貌
  补充:忘记了一件很重要的事情,我建立了一个小组 http://space.cnblogs.com/group/nature/ 欢迎大家加入。我们可以组织一些话题进行讨论。 ==============================================     关于自然框架,以前都是分着说的,比较零散,现在整理归纳一下,和在一起说一下。
995 0
|
编解码 移动开发 Android开发
[译]移动开发中用 1x 视觉稿设计的好处
本文讲的是[译]移动开发中用 1x 视觉稿设计的好处,那我就开门见山了:我确信你们很多人都已经知道 1x 设计的好处了。但是呢,言语和风声总不会那么一致。在移动设备上,到底是使用 1x 设计稿更好,还是 2x 设计稿,一直没有达成共识。
1438 0
下一篇
无影云桌面