Navigation menu

0755-8229-8336
  • Contact us
  • 0755-8229 8336
  • 深圳市罗湖区人民南路国际商业大厦20楼(地铁1号线国贸站E出口既是)

    szniego@126.com


    © 2007-2020 All Rights Reserved.
  • 策略型高端网站设计公司

    Strategic advanced website design company

    View More
  • 如何在响应式网页设计中优化版式?

    时间:2020-07-03  作者:Angle  来源:www.niegoweb.com
    每次弹出有关响应式网页设计的讨论时,最受关注的通用术语和概念包括网格和图像,显然还有诸如流畅或灵活的设置。排版尽管从本质上一直被认为很重要,但在响应式网页设计中却很少得到应有的重视。本期专业网站设计公司Angle响应式网站设计中的排版


    公平地讲,响应式网页设计就其定义而言已经包含了一定程度的响应式排版。即使许多人不知道或只是忽略了这个事实,但响应式设计中却包含诸如行高,列宽等的宏观印刷问题。然而所有这些自然不能称为完整的,我们需要自己做功课。


    现在,在响应式设计中实现排版时,该方法很简单,而且有两个方面:首先,你需要注意字体本身,即字体应该根据屏幕尺寸进行调整,其次,你还需要牢记与优化的行长有关的内容(因为在第二点中失败将意味着消除设计所具有的易读性或可读性的任何机会)。



    1.响应式
    每当你在进行与排版有关的操作时,很明显,它们都是以字体开头的。无论你是使用下载的字体,还是自己制作字体,还是依靠网络字体,字体本身的重要性都不会被忽略。在最基本的层面上,选择归结为衬线与无衬线。现在,我不会支持或反对,因为我个人都喜欢它们。我还认为衬线的目的是使你的字体看起来更严肃,而无衬线为你提供了更多的自由。关于衬线与无衬线的争论已经存在了很长时间。关于该主题的书籍已经写好了,所以在这里站着走将不是最容易(甚至是必要)的事情。这样说来,这里是一个实用的建议:如果你的文本大小小于12,请注意使用衬线字体,因为小于12的衬线字体无法很好地呈现。现在,从响应式网页设计角度看待字体。如果标题采用诸如Seaweed Script之类的字体,则在台式计算机上会很好,但是在许多屏幕较小的移动设备上,除非你笨拙地将其放大,否则观众将很难阅读它。


    2.字体大小,行高/长度和对比度
    文本的大小在某种程度上取决于阅读距离。现在由于与书本或印刷杂志相比,计算机屏幕离眼睛的距离更远,因此文本也必须比印刷材料大。这是因为即使屏幕上的文本将具有较大的尺寸,但由于与打印的文本相比,其与眼睛的距离会更远,因此感知的尺寸也会较小。同样,在谈论行高时,我们可以将其与打印的文本进行比较。由于与计算机屏幕相比,印刷的书籍和杂志更靠近眼睛,因此行的高度可以小于屏幕上的文本的高度。同样,你必须记住,线高基准(尽管绝对值是Internet上无数网站所建议的),但它是所选字体的产品。线长呢?Baymard Institute建议,为了便于阅读,一行中的理想单词数可以在50到75个字符之间。现在我不建议你盲目遵循此规则,因为响应式设计意味着我们也必须牢记不同的设备尺寸。在超小屏幕上,即使一行显示50个字符也可能会损害可读性。正确的做法是将50-75作为开始的准绳,然后牢记目标受众可能使用的不同屏幕尺寸以及计划使用的字体,理想的线长。


    排版是响应式网页设计的重要方面。尽管乍一看可能令人困惑,但对其进行优化并不是很困难。你如何看待有关响应式网页设计的排版方面的这些观察?本期专业网站设计公司Angle为大家分享到这里。

    相关标签

    相关案例

    OTHER CASE