针对电脑屏幕分辨率尺寸大小的不同改如何设计网站页面——响应式(二)

不详2014-08-21 11:33:10

    如果在增加了正文字体大小之后,新的字体在一开始刺激了你,不要担心这很正常。然而,当你习惯了它,你不会想要回到"标准"的小尺寸。

    从2006年开始我们已经推荐了"透视化比例"字体尺寸。最初,我们声明Georgia 16号字体是一个很好的正文尺寸参照,这个引起了很多的愤怒甚至一些嘲笑,但是现在这或多或少是一个普遍的标准。随着更高级的解决方案出现,这个标准慢慢地变得老式了。

    行高和对比

    正文字体尺寸可以通过那个透视窍门来评估,而行高需要一些调整。随着更远的阅读距离和更多的像素污点,给屏幕上的文字比印刷的更大一点的行高是比较聪明的方式。140%是一个好的参照,但是当然,这个需要根据你选择的字体来定。

响应式排版中的基础知识

    今天,作为一个前提是你要确定对比不会太弱(比如灰色的文字在浅灰色的底上)或者太刺眼(比如粉红之于绿色)。自从屏幕字体的设计是黑色之于白色,用黑色 的背景有点困难,但是这些做得好也会很不错。随着现代高对比的屏幕,选择黑灰字体或者浅灰的背景都是可取的,而不是深黑之于白色。但是,依然,这不是重要 的问题。

    iPhone vs iPad

    很多我们学习到的关于响应式排版的知识都是从给我们的书写软件寻找完美的字体中来的。当我们设计IA WRITER的时候我们花了几个星期去寻找正确的排版解决方案。在当时,高分辨率的ipad屏幕是一个全新的挑战,它也花了我们很长时间直到我们找到它的 运作方式。当苹果提出iphone的retina屏幕以及之后的ipad的retina屏,所有东西都改变了。我们完全可以写一本书解释我们是如何得出 IA WRITER中“令人讽刺”的字体,但是这些非常一般的事情有太多东西要说,所以我长话短说。

    如果你对比我们最新版本的iphone软件和ipad软件,你会发现字体的尺寸是不一样的。

响应式排版中的基础知识

    为什么用不同的字体尺寸在iphone和ipad上?如果你很认真地看了上面的解释,你就应该已经猜到了。

    当人和屏幕的距离不是经常一样的时候,通常来说,你手持ipad在早餐桌上,当你坐在沙发上的时候在你的大腿上,或者当你躺在床上,屏幕就在你面前,这些 场景会有各种不同的使用距离。这是一个全新的挑战,因为台式机和笔记本的使用距离不会发生这么多变化。为了让它在各种距离中都好用我们选择了最远的来确定 字体尺寸。这个可能会得出比床上使用的字体更大的字体,但是,这时不舒服的,同时,你一般不会在躺着的时候将ipad放在肚子上面写文章。

    iphone上面只有更少的屏幕空间,所以你需要集中来做调整。幸运的是,iphone会被放在面前很近的距离来操作,所以要用很小的文字尺寸来完美运行。从平均阅读距离中可得到iphone和ipad的一个相似的字体尺寸。

响应式排版中的基础知识

    因为iphone会被放得离眼睛很近,行高也可以紧一点,同样也是因为屏幕小而显得很有必要:

响应式排版中的基础知识

    当你为屏幕而设计的时候不是所有东西都是随你愿的。交互设计是工程性的:这不是寻找完美的设计,者是在寻找完美的妥协。在我们的例子中,我们必须去减少行高、行间距、字间距等等

响应式排版中的基础知识

    这些调整是如此精细以致于你不知道,你不会发现行距有多小。为什么我们不直接拿掉行距?行距不是美学上的事情,它让文字呼吸以及帮助我们的眼睛从一行跳到另一行。如果你觉得这些都听起来很难理解:不,到现在为止我们只涉及到了初级的东西。

那台式机如何?

    一些人抱怨mac上面的WRITER字体太大。和ipad一样(ipad会被放在各种不同的距离使用),我们要寻找适合mac屏幕的最适中的字体尺寸。当时,我们的参照是24英寸的高分辨率imac,得到的字体尺寸或多或少适合其他所有设备。

响应式排版中的基础知识

    因为运行IA WRITER 的MAC电脑数量是有限的,我们可以决定不同的适合的解决方案。我们查看了各种可能的布局以确保这个文字尺寸是各种设备上一个最好的折中。

响应式排版中的基础知识

    你可能问"为什么不让用户自己选择字体大小?"然而,调整字体尺寸不是一个关于兴趣的问题,是一个阅读距离的问题。自从大多数的网站和应用会有一个极其小 的字体尺寸,新的用户会从一开始就选择他们习惯的尺寸,会有这种结果:字体太小,无法体验我们写作软件的所有快感。主要原因不是我们想把一些想法强加在所 有用户上:我们想要的是,IA WRITER 不需要任何设置和摸索,你唯一要做的就是书写。这个已经是IA WRITER成功的公开的秘密了,改变这个将改变软件的核心。(我们要加强的是弱视人群同样易得到的一致性设计。)

    那么好,为什么不根据设备的分辨率自动调整呢?那不是真正的响应式排版吗?对的,我们正在作和这个概念相似的工作。现在,通过分辨调整,你同样需要选择视 觉上合适的权重来确保字体在各种尺寸和分辨率下显示预期的效果。字体的视觉同时也是随着字体尺寸和分辨率变化。这就是为什么MAC、IPAD1/2、 IPAD上面的IA WRITER用不同的分级显示。想要清楚的解释“分级数字字体”后面的逻辑性和我们网站背后的想法,我需要更多的时间和空间,所以,请等待PART II

上一篇:针对电脑屏幕分辨率尺寸大小的不同改如何设计网站页面——响应式(一)
下一篇:针对电脑屏幕分辨率尺寸大小的不同改如何设计网站页面——响应式(三)

  • >> more看看其他人的看法
  • I am really impressed together with your writing talents
    and also with the layout on your blog. Is this a paid subject or did
    you customize it yourself? Anyway stay up the nice quality writing,
    it is uncommon to look a great weblog like this one nowadays..

  • 1 htt ... 2017-5-14 16:55 星期日
  • }

有什么想说的吗?