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

不详2014-08-21 11:32:15

    网络的快速发展,带动了一系列的关联企业,如:计算机、平板电脑、手机、服务器主机、软件等。其中与网站建设密 切相关的就是显示屏,现在的电脑、平板电脑、手机的显示屏钟来越来越多,而且占比也比较繁杂,如PC电脑显示屏有:1024*768、1400*900、 1920*1080、1280*800、1920*1200、1280*1024等各种尺寸的显示屏,而传统网站的页面尺寸是固定的,这样就会导致设计师 本来做好的网站在自己的网站上看起来非常完美,客户看了以后也非常满意,但是当客户回去在自己的电脑上看了之后就会有很多问题,要求设计师去改,这样随着 客户使用不同的显示屏,网站展示效果就会不同。有的甚至因为浏览器的不同产生不兼容等问题,导致一个网站一直处于修改状态。那么应该如何改变这个局面呢?

    根据硬件的提升,网站建设使用的编程语言也在不停的改善,比如最新的HTML5就是一个很好的例子。而针对刚出提到的电脑屏幕分辨率尺寸大小的不同改如何设计网站页面这个问题,我们可以使用响应式排版。

    当我们建立网站的时候,我们一般从定义正文开始。正文的定义显示了你的主栏有多宽,其它几栏的大小就随它自己内容定义了。直到最近,各种屏幕分辨率或多或少是同质化的。如今,我们要处理各种屏幕尺寸和分辨率。这让处理变得更复杂。

    在重整旗鼓的热情中,我写了一篇关于响应式排版的博客,这篇文章主要专注于我们最近的实验:响应式字体。如果不知道IA的历史,你可能会错过我们新启动的 网站中的响应式排版和设计的一些关键点。我决定从头做起,一步一步解释响应式排版,而不是整理所有文章。以下是第一步。

 

响应式排版中的基础知识

    为了防止给每个可能的屏幕尺寸做不同的层级设计,很多网站设计师会采用响应式网站的概念。一言以蔽之,这是一种网页布局会自动适应屏幕尺寸的概念。有很多种方法可以定义这种概念。我喜欢用这种方法:

    适应性布局:按步骤调整布局适应有限数量的屏幕尺寸。流体性布局:不断地调整布局以适应每一种可能的宽度。两种方式都有优势和劣势,我们相信布局适应于很 少的合理变化位置是我们要采用的方法,因为可读性比布局宽度随时和窗口一样宽来得重要。这是不是一个复杂的问题它本身就值得商榷,但是最优的可读性需要在 文字尺寸上一定数量的控制(栏宽),就此看来,流体式布局会产生更多问题。

    提示:响应式设计已经包含了很多宏观排版问题(文字大小、行高、栏宽)。于是响应式设计已然在很多方面包含了响应式排版。在我们自己网站上第一次发表关于 响应式字体的文章主要针对我们使用的“阶段字体”。我想要在下一篇说说关于阶段的东西,现在要快速在屏幕上进入响应式宏观排版的问题。

    选择一种字体

    正确的色调
    迟早,你需要决定哪种字体是你想要用的。你选择一种字体主要是色调上的问题,但是,因为每一款字体都有它自己的品质,都需要(或禁止)一定的处理,字体的选择会产生很多视觉和技术上的结果。网页字体有非常多种可以选择,所以选择一种适合的字体是另外一种考验。

    我们通过为自己的网站设计字体来试验阶段性字体。我们选择了一种衬线字体因为它适合我们的色调,同时映射出我们内容的提炼。我们为IA WRITER选择了一款等宽字体。因为我们程序的首要目的是帮你得到第一手的草稿,我们尤其选择了nitti字体,一款让你同时觉得很有力但是很细致的字 体。使用等宽字体的决定也是因为第一个ipad的系统不自动紧排比例字体。我们即刻决定使用等宽字体,而不是使用比例字体以至渲染效果很差。

    有衬线字体还是无衬线字体

    通常的选择会在有衬线字体和无衬线字体之间。这本身是一个很复杂的问题,但是这里有一个简单的经验法则可以帮你:有衬线字体是一个牧师,无衬线字体是一个 黑客。没有一个比另外一个好,但是,因为各种各样的原因,有衬线字体有更独裁的痕迹,而无衬线字体感觉更民主。记住,这是被包裹在两条懒散的线里面的五千 年的排版历史,,所以,不要太在意。

    很多的人仍然认为在屏幕上的排版的问题,"衬线或无衬线"这个问题本身解答了它自己。事实上,没那么简单。有别于一般的理念,如果你选择大于12号的字 体,有衬线和无衬线字体可以表现得一样好。小于12号的有衬线字体渲染得不够锐利,但是(同时,这点带领我们进入第二点)在现代的显示器上,12号字体绝 对太小了。

    什么尺寸?

    你的正文字体不是取决于你自己的个人喜好,它取决于阅读距离。因为一般的屏幕离人会比书本远一点,台式机字体的大小要比印刷的大一些。

    下面的图案显示了,当你的正文字体离你的身体越远,需要的字体更大。两个黑色的和两个红色的A有一样的度量尺寸。但是因为右边的一副被拿在更远的位子,感受到的尺寸会更小。右边红色的A和左边黑色的A在感受上一样的尺寸:

 

    字体离得越远,视觉上会显得越小。你需要将字体设置得更大一些,当字体阅读的距离更远的时候。选择多大的字体是一个科学性的问题。如果你没有什么经验,有用的一个窍门是,将一本印刷很好的书放在合适的阅读距离,然后比照屏幕字体大小。

    平面设计师没有网页设计经验的时候,把网页正文字体和印刷字体相比的时候,会惊讶于网页正文字体有多么大。提醒下你,只有你在一排一排地作比较的时候会觉得字体很大,然而通过透视观察就不会这样觉得了。

响应式排版中的基础知识

上一篇:学习之响应式Web设计:Media Queries和Viewports
下一篇:针对电脑屏幕分辨率尺寸大小的不同改如何设计网站页面——响应式(二)

有什么想说的吗?