服务支持
服务支持
您的位置是:首页 > 新闻资讯 > 响应式网页设计WEPAPP
卓有成效的网页设计:规则,技巧与响应式设计
2015-3-3 

  排列,网格,图像与图标并不是响应式设计的全部。如果没有文本或内容,这一切都将毫无意义。正如比尔盖茨所说“内容为王”。而谈到内容,我们就必须谈谈 网页设计。在当前的网页设计趋势下,任何一个网页设计师和网页开发者都无法忽视响应式排版的影响。

  在接下来的文章中,我们将深入探讨一下如何创建卓有成效的响应式网页排版及创建过程中需要考虑的因素。
排版基础
  无论在网页中还是在印刷媒体中好排版最重要的一点就是选择合适的字体。合适的字体,文本颜色,字长和字号大小等元素是最佳呈现效果的保障。因此,在我们真正开始研究如何创建成功的响应式网页排版之前,有必要弄清楚一些基本概念的含义。
字体
  又被称为 字体集(font family)。它指的是一款字体(typeface)有它自己的风格,而在这种风格下设计一系列用途不同的字型,数字,标志,特殊字符和磅值。
字型
  指的是包含一系列字体信息(如样式,磅值,宽度等)的可用计算机文件。
基线
  基线(Baseline)是大部分字母所“坐”在的,字体的下降部之上的直线。 
大写字高
  是指某种字体中,位于基线(baseline)以上的大写字母的高度。
X自高
  字高是指字母的基本高度,精确地说,就是基线)和主线之间的距离。
降部
  降部指的是一个字体中,字母向下延伸超过基线的笔画部分,也称为下延部。
字符间距
  简称字距,在指的是字符之间的空隙,该属性影响文本行或文本块的密度。
字距微调
  指调整单词中单个字符宽度的过程。
行距
  在css中也被称为 行高。指代字体连续行的基线间的距离。
网页排版的要素
  不仅单词和语句有其自身的意义,每个字符也有独特的个性。不论排版是否是响应式的,你都应力求将更好的排版呈现给用户。
如果用户对网页中的内容完全不感兴趣或感到无法理解的话,你的排版就是毫无意义的。简单来说,网页排版有五个基本要素。
•    字体
•    颜色
•    质感
•    图像
相应的,也有5种方法让你迅速获得更好的网页排版。
1.选择与网页主题最契合的字体
  目前许多网页使用的都是同样的字体。没错,我说的就是Arial和Helvetica。但如果你能根据要传递的信息选择定位更精确的字体,不是更好吗?
  举例来说,如果你网站是面向儿童的,不妨在标题中试试 DK Crayon Crumble 或 Little Miss Priss这样稚拙可爱的字体。
  当然,你不一定任何时候都这么做,重点是,要尽量使排版与目标用户的特点相匹配,而且文本内容要清晰,可读。
2.使用网页字体
  目前所有的主流浏览器都支持 @import命令和标准链接标记(link tag)。请看下面的示例。
使用@import命令:
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
使用标准链接标记
rel=stylesheet type=text/css>
这意味着你可以使用任何来自在线字库的字体,如 Google Font, Typekit和Fontdeck。使用网页字体有如下优势:
•    省钱。你不必专门花钱购买在线字体。
•    省时间。省去了在文件中手动调整字体的繁琐,只需几串代码就可以完成。
•     几乎与所有主流浏览器都能良好兼容。
3.选择合适的配色
  网页设计师最常犯的一个错误就是在网页中滥用颜色。请始终记住,优秀的网页设计的重要特征就是良好的功能性和设计本身的优美。
  在网页中胡乱使用颜色会扰乱网页内容,给用户造成视觉疲劳。
  但又该如何恰当地选择色彩搭配呢?在这方面并没有既定的规则,但我还是有一些建议:
  •    像W3C规范指出的那样合理把握文本与网页背景的对比度。视力不一样的用户,对颜色的敏感度也不同。因此不妨使用这款工具软件来获得良好的对比效果。
  •    如果可能的话使用扁平UI色彩。这种类型的色彩很柔和,不易造成视觉疲劳。如果想深入了解这方面的信息,可以参考这个网站 flatuicolors.com 。
4.使用文本而不是图像
  我们都知道,图像会拖慢网页加载速度。很多时候,使用图片似乎是展示某些字体和网页布局的唯一方式。然而这种方式也可能失败。在我看来使用合适的文本才是最为可行的办法,在响应式网页设计中尤其如此。记住,搜索引擎并不能搜索图像,却能精准地搜出文本。
5.文字贴层(clipping text)时使用备份字体
  有时候你可能需要将文本贴到图片上以创建图像文本(image text)。问题是 并非所有的浏览器都支持这种技术。
  据我所知实现这一技术的最好方式是利用 CSS Browser Selector plugin。这是一款体积很小的插件,它能根据不同的浏览器特点来呈现出你想要的特定样式。接下来我就谈谈如何使用这款很酷的插件。
  •    点击 下载插件然后将它与起首部分(head section)连接起来:
  •    利用浏览器的代码来设置CSS属性。
.opera #header { margin:20px; }
.webkit #header { margin:30px;  }
.webkit #header { margin:10px; }
.webkit #header { margin:15px; }
响应式排版实用法则
  多数基础排版元素都可以通过CSS来调整。但响应式排版并不只是在不同设备上优化一下文本尺寸那么简单的事。前面我们已经探讨了如何取得更好的网页排版效果,我想现在是时候谈一下响应式网页排版中的基本规则了。
1.使用rem而非pixel和em
  pixel和em的使用十分广泛。pixel是固定的,而ems的计算则是基于父级元素的。这意味着重新确定浏览器的大小时,你将很难算出实现预计效果所需要的数值。
  一个更好的选择是使用rem。Rems的全称是“根元素”,根元素默认的字体大小是固定的,更重要的是,它被大多数主流浏览器所支持。
  font-size:16px;   // 1rem = 16px
}
h1{
  font-size:1.9rem // 19px
}
h2{
   font-size:1.8rem // 18px
}
  在这个例子中,我将基本字体大小设置为16px,这也是其他元素默认的字体大小。当设备改变时,h1和h2的大小也随之改变。
  对于较老的IE版本,我们可以先在px单位中定义字体的大小,然后再定义与其相应的rem单位的大小,这样,在任何浏览器上我们都能得到可自动调整的文本。
  font-size:16px;   // 1rem = 16px
}
 
h1{
  font-size:19px; font-size:1.9rem;
}
 
h2{
   font-size:19px; font-size:1.9rem;
}
2.在不同设备上使用rem单位
  既然现在我们已经知道如何使用rem,接下来我们便可以借助@media queries选项来在不同大小的屏幕上应用rem。输出效果取决于字体。因此你需要输入真实的字体大小来查看输出效果是否令你满意。
@media (max-width:640px) {
h1 {
    font-size:1.7rem
}
h2{
    font-size:1.9rem;
}
}
 
@media (max-width:480.
h1 {
    font-size:1.7rem
}
h2{
    font-size:1.9rem;
}
}
  请注意与宽屏相比较,在较小的屏幕上显示时,字体反而略大一些。这是为了照顾使用手机或平板设备的用户。
3.使用CSS3伪类(pseudo-classes)来获取特定风格
  CSS3一个很棒的特性就是它能在特定的字体,线条或段落中实现不同的风格。这让设计师能够自由地调整文本的大小。
  正如你在下面的示例中看到的,我们用到的CSS3伪类有:
  •    first-of-type—选择段落标签中的first child。
  •    first-of-type—选择段落标签中的first line。
  •    first-of-type—选择段落标签中的first letter。
4.定量控制
  正如 Robert Bringhurst,所指出的,最理想的字行长度在45到75个字符/行之间。对响应式设计而言,这个量并不好把握,尤其是在较小的屏幕上。但如果你无法控制它,也就无法控制文本的可读性。
  Elliot Jay Stocks在一篇文章中介绍了如何通过媒体查询(media queries)来得到想要的行高和字行长度,非常有参考意义。
利用插件
  现在已经有很多jQuery插件来帮助我们改善响应式设排版,使用最普遍的还是 FlowType.js。这个插件可以计算出每行中的字符数,并可以在任何设备的屏幕中根据特定字行长度设置字体大小。
  下面我们来看看它具体是如何工作的。
第一步:设置排版数值
  在FlowType.js中添加CSS的基本设置数值。
 
   font-size:16px;
   line-height:20px; }
}
 
h1,h2,h3,h4,p {
   font-family: inherit;
   font-size: inherit;
}
 
h1 {
   font-size:3em;
   line-height:1em;
}
 
h2{
   font-size:2em;
   line-height:1em;
}
 
p{
   font-size:1em;
   line-height:1em;
}
  这些数值可以被FlowType.js所用,当设备屏幕大小发生改变时,这些数值也会自动改变。在禁用JavaScript的情况下,设置字体大小和字行高度能帮你打开网页并对其进行调整。
第二步:将FlowType.js与起首区域(head section)关联
  下载FlowType.js并将它置于html文档的起首区域中。
第三步:启用FlowType.js插件
  我们只需在前面添加如下图所示的编码便可以启动FlowType.js插件。
 
$(function () {
    $(body).flowtype();
});
第四步:自定义FlowType.js设置
  FlowType.js有自己默认的设定值,但你也可以自行调整这些数值。你只需在插件中添置一些选项即可。
$(body).flowtype();
   minimum   :500.
   maximum   :1920.
   minFont   :16.
   maxFont   :40.
   fontRatio :34.
   lineRatio :1.50.
});
  除了flowtype.js,还有其他一些优秀的jQuery插件。例如:
•    FitText – A jQuery plugin that makes font-sizes flexible making text and headlines fluid or responsive.
•    js – A great plugin for radical web typography.It helps control the kerning of text in a just a line of jQuery code.
•    Responsive Measures – A simple script that enables you to create ideal measures for a container’s text.
结语
  响应式设计正在日益走向成熟。我们都知道图像,页面布局及网格的重要性。但却常常忘记了,内容或文本才是用户阅读的对象和搜索引擎的工作对象。
  因此在为页面布局和图像花费心思的时候,同样也应该花点心思在网页内容上。毕竟,网页内容在不同设备中的可读性及易读性对用户而言至关重要。

新闻资讯
  • 联系我们 contact us
  • 您可以拨打以下电话联系我们

  • 电话
    86 - 010 - 6412 7586
    86 - 18601235528
  • 也可以发邮件或QQ联系我们

  • 电话
    chinahome158@163.com
北京网站设计-顶级网站建设服务,升级品牌网站形象,提升品牌竞争力! 北京网页设计| 北京网站制作 | 网站建设知识库 | 联系我们
我们是一家网站设计网站建设公司 | 我们能做网页设计网站改版和网站建设开发 | 我们做过集团公司教育培训医疗机构单位网站建设改版
为每一家企业提供最专业的品牌服务 | 我们的网站设计价格很优惠 | 联系网站设计公司 | 网站设计建设常见问题 | 网站设计网站导航地图
Copyright©2006-2030 HOME158.CN BestViewby1024*768 Email:chinahome158@163.com 京公网安备110105018368
地址:北京市朝阳区汤立路218号明天STUDIO(明天生活馆)537室 北京网站建设直线:010-64127586 24小时咨询热线:13241795859
优秀网页设计公司|北京做网站专业公司
京ICP备09023403号