西安嘉瑞德网络公司
当前位置:网站首页 > 网站维护 > 网页制作设计时你不的不考虑的东西 返回列表

网页制作设计时你不的不考虑的东西

发布时间:2020-09-02来源:admin

网页制作设计时你不的不考虑的东西,其实在实际工作中,网页制作设计时需要考虑的东西不仅仅是网页色调,网页的风格等等,这些是最为基础的,但是一个网页最为能体现出细节性的东西比如文字的行距,行高,大小,颜色等等,这些也时候网站的主要元素,也是最为能体现歘网站的细节性的东西,但是这些细小的东西往往是人们在实际制作网页的时候最容易忽略的元素,接下来我们来详细的看看专业的网站制作公司的专家是怎么说的。最近负责某知识型社区的改版,其中一块是提升读者在网页端阅读的体验。在调研一些网站的设计规范和查阅部分文献后,结合自己的思考,总结如下几点,以供参考。一个阅读型网页,比如各新闻资讯网站、阅读型社区、web端读书网站等,在去除广告等干扰元素后,纯内容的阅读体验会受到以下几个因素的影响:字体、字号、字色、行宽、行间距、段间距、背景色。

接下来一一介绍。
字体:
衬线字体 or 非衬线字体:调研了多个网站,均采用非衬线字体。查阅资料,衬线字体更富表现力,可提高辨识度和阅读效率,多用于报纸、书籍等印刷品,以及电子杂志和艺术网站的正文字体。在电子屏上显示时,由于字号、显示器尺寸、显示器分辨率等影响因素,使用衬线字体时过细的笔画可能会显示不清难以辨认。从稳妥角度考虑,这可能是各大网站均采用非衬线字体作为首选字体的原因。
推荐以下字体:
MacOS
中文:首选 苹方regular 次选 冬青黑体简体。
英文:首选 Helvetica Neue 次选 Arial。
Windows
中文:首选 微软雅黑 次选 冬青黑体简体。
英文:首选 Arial 次选 Tahoma。
字号:
字号太小看不清累眼睛,太大页面不精致且显示效率低。
一个字在显示器上显示出来有多大,取决于字号和单个像素方块的物理尺寸。单像素块尺寸,取决于显示器尺寸和显示器分辨率。随着显示器技术发展,在显示器尺寸没有变大的情况下,显示器分辨率越来越高,这意味着单像素方块的物理尺寸越来越小,因此网页端设计时的推荐字号也在变大,从12px 到 14px 到 16px。稳妥起见,正文建议使用 16px 。以此为基准,扩大和减小后确定标题和辅助文本的字号,此处建议以 4px 为步长,使对比明显。
字色和背景色:
阅读体验受文字和背景的对比度影响。高对比度时,识别清晰,但眼睛容易疲劳。只有找到一个合适的对比度,才能做到既识别清晰,长时间阅读又不容易累。
首先是白底黑字和黑底白字。二者本身对比较强,加上人类眼睛侧抑制等视觉机制,会让反差特别大,因此识别起来很清晰。由于白底黑字相较于黑底白字的反差更小[1],故而可读性更高,适用于注重文字阅读的网站;黑底白字视觉刺激性强,适用于注重视觉表现力或营造氛围的单页面,比如海报、主题网站首页等。另外,对于视觉受损的用户,此两种配色方案也是较人性化的选择。
然而,白底黑字并非最好。由于白色具有100%的亮度,黑色是0%,巨大的亮度对比让眼睛在阅读时要尽全力去适应,容易引起眼部疲劳,因此白底黑字仍不适宜长时间的阅读,所以印刷品读物的纸张多用乳白色或淡黄色的纸张。又因为显示器本身就发光,所以在电脑上阅读纯白色背景的文字,比在纸上阅读时,眼睛会更容易疲乏。
然而Hill(1997)的研究却表明:黑色和白色一直被认为是最可读的;有黑色在内的色彩组合比没有黑色的色彩组合更易于阅读;较浅背景上较深的文本比较暗的背景上较浅的文本的评价高。因此,更好的组合可能是保证了对比度(大于4.5)的浅灰背景 + 深灰文本。
行宽:
行宽过大,阅读时要转动脖子,降低阅读效率,而且目光从行尾移至下一行首容易串行。行宽过小,用户注视点要在行间频繁跳跃,降低了阅读速度,体验也不好。为防止此现象,文本宽度最好在450-700px之间。
确定具体数值时,要注意行宽应该是正文字号的整数倍。这是因为中文是方块字,最好的排版应该像小学时的作文本那样,每一列字都对齐,除最后一行外,每一行应该写满,这样才能整整齐齐。
如果采用左对齐,可以达到每一列字都对齐(有半角字符的行,会破坏队形),但当最后一个字符为标点时,会直接换行,导致此行会缺一块,不好。
如果采用两端对齐,就能避免这种情况。但两端对齐有另一个问题,段落的最后一行不一定写满行。当最后一行未写满行,且,行宽不是正文字号的整数倍时,为了达到两端对齐,前面行会增加字间距,但最后一行不会增加字间距。这样,最后一行的每个字都不能与其所在列对齐。
如果行宽是正文字号的整数倍,就能避免这种情况。达到两端对齐不留空,每列对齐像阅兵的效果。
左对齐
两端对齐
行间距:
行间距太小,有密不透气的感觉,读者浏览文章时容易串行;行间距太大,阅读时会感觉文章不够连贯,页面也不够精致。网页上行距常用em为单位,不管是中文网站还是英文网站,大多用1.5em-1.8em的行距。
段间距:
分情况。文章较短,就不需要很宽的段距;文章很长,最好利用段距分隔文章的节奏,给阅读者喘息和思考的机会,提高文章的可读性。经验值是,段间距一般为行间距的75% 。
实际上,影响纯内容阅读体验的远不止以上这些。实际工作中,环境光、设备尺寸和分辨率、用户视力等都应该在设计师的考虑范围内。魔鬼在细节中,多考虑一些,用户体验就会提升一些。

联系方式:18066528545   029-89298792

阅读过此文章的读者,还阅读过下面的文章

  • 西安制作一个公司网站需要多钱呢,最近几年西安市场上的网站制作公司少了不少,跟五六年前相比较的话,西安本地的网站制作公司大部分都关门了,面对这么的市场形势,不仅仅是网站制作公司日子不好过,其他行业的日子...
  • 外贸网站制作跟小程序开发有什么区别呢,如果要说网站跟小程序的区别,其实这二者的区别还是蛮大的,不管是制作的方式还是使用的方式方面都是很大的差异,比如网站是基于浏览器来使用的,而小程序是基于微信端来打开...
  • 你的公司网站制作好了,没有咨询和成交原因何在呢,其实当下作为公司的网站用途也是很广泛的,不仅仅是用来宣传公司的一个入口,更多的是帮助你的公司进行产品和服务宣传的一个入口,作为公司网站如果你还是停留在前...
  • 外贸独立网站加国外tiktok的成为今年外贸宣传推广的热点,的确今年的外贸推广的方式和方法发生了很大的变化,尤其是国外的抖音短视频在国外的使用逐年的增长,在配置一个独立网站来作为最终的引流客户的落脚点...
  • 企业网站建设完毕后有必要源代码和数据库交付吗,这个是非常的有必要的,毕竟用户花钱做的就是网站的源代码和数据库,这也让是用户必须要拿到的东西,不然网站后期有什么问题了,或者更换服务器的时候,这些东西没有...
  • 一个合格的企业网站是如何设计制作出来的呢,其实当下制作和建设企业网站的公司是越来越多了,毕竟网络时代,你公司美誉哦网站相当于你的公司失去了网络上展示自己的形式,而有的人说,当下做一个公司网站不是很简单...

网站地图 Copyright © 2015 西安嘉瑞德网络科技有限公司 陕ICP备2023001199号