HTML5技术

响应式排版中的基础知识 - jerrylsxu(2)

字号+ 作者:H5之家 来源:博客园 2015-12-24 09:20 我要评论( )

为什么用不同的字体尺寸在iphone和ipad上?如果你很认真地看了上面的解释,你就应该已经猜到了。 当人和屏幕的距离不是经常一样的时候,通常来说,你手持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

  到目前位置的反应

  虽然没有社交媒体按钮,但是这篇文章还是得到了很多的转载,很少的批评的点,主要围绕流体层级和自适应层级的问题,对于这个问题,我想将它放在后面说。我表示吃惊,当我听到Joshua Porter这样评论:

  @IA 直到我看到“交互设计是工程性的”的时候,我比较困惑。这是如何运作的呢?

  .就如很多其他人想知道的,全部的引用是:“当你为屏幕设计的时候,不是所有的东西都是按你预期的运作。交互设计是工程性的:这不是关于寻找完美的设计,这是在寻找完美的妥协。”通常我会说,“网页设计是工程性的:这不是关于寻找完美,是寻找最好的妥协。”用“网页设计”的话这句话会表达清晰一点,因为这个设计很多明显的技术暗示。我之所以用“交互设计”是因为这些例子中我用了app。

  这个的意思是当平面设计需要以及允许你有很大程度的视觉控制,而网页设计需要你从一开始去思考关于视觉设计和技术的相互妥协为了得到完美的结果,你需要去探索很多不同的分辨率,通过每个自身的利弊在所有次优的选择中寻找最好的折中。

  在这一点上,平面设计师经常会打断你说话,同时尝试证明他们也处理很多技术上的问题。当然,他们是做了。所有的艺术和设计需要技术上的知识。但是就像设计汽车引擎和设计网站有个不同点,设计网站和杂志和设计网站也有不同点。这个不同点和工程性的程度有关。

  总结来说,这意味着在设计网站和app的过程中,很多我们想的东西都是关于折中和尝试寻找没有太多缺点的解决方案。这让很多平面设计师选择不干了,因为他们习惯于有控制权。Khoi Vinh有更多精彩的演讲关于屏幕和平面设计中的不同点。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5中的新事件 - zxyGo

    HTML5中的新事件 - zxyGo

    2017-03-10 14:00

  • 响应式网站的优点和缺点 - zhaobao1830

    响应式网站的优点和缺点 - zhaobao1830

    2017-02-26 16:00

  • canvas中的非零环绕原则 - 一混五六年

    canvas中的非零环绕原则 - 一混五六年

    2017-02-22 10:00

  • .NET 十五岁,谈谈我眼中的.NET - 张善友

    .NET 十五岁,谈谈我眼中的.NET - 张善友

    2017-02-16 15:00

网友点评
a