简洁至上的Web设计——创意要素及设计技巧

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 12:36 点击:

  简洁,不等于简单。这与弹琴是一个道理,你也许有能力弹得很快,但你并不需要在所有地方都弹得这么快。在很多时候,让速度慢下来反而比弹得飞快要来的更加困难。实际上,味道往往最能体现在从容自然、舒缓平淡的韵律当中。接下来进入原文作者人格;我发现自己在很大程度上就是一Dummy System来着。

  简洁的Web页面设计风格是当前圈子当中的风潮之一。在本文中,我们首先将对这类风格当中的那些最具代表性的组成要素进行分析,随后,我(英文原文作者)还会向各位分享一些工作中的实战技巧。

  

clean-web-design-elements-tips-showcase

 

  简洁风格的创意组成要素

  固定宽度的页面布局结构

  花时间观察一些简洁风格的网站,你会发现它们当中的绝大多数都有用到经过良好规划的网格布局系统。如果哪位朋友对网格布局还不大了解的话,可以设想一下,在着手进行实际的视觉设计工作之前,使用辅助线将页面划分为若干等宽的列,通过这种方式对页面结构及元素的布局进行更精准的规划。网格布局可以使设计方案当中的信息结构更加清晰,在视觉上具有强烈的节奏感与一致性。

  

clean-web-design-elements-tips-grid

 

  固定宽度的网格布局结构可以为页面带来秩序与效率。举个例子,虽然Creative Review当中的页面布局会根据内容类型的不同而有所区别,但我们能够感受到的浏览体验却是相当连贯的,因为这些页面都是基于同一套网格布局框架进行设计的。下图展示了他家的首页和About页面:

  

clean-web-design-elements-tips-creative-review

 

  对于在线杂志或报纸一类需要呈现大量内容的网站来说,要打造简洁的页面设计方案则更加困难。不过英国的卫报(The Guardian)以及一些同类型的在线报纸站点倒是向我们展示了通过固定宽度的网格布局实现简洁设计方案的可行性:

  

clean-web-design-elements-tips-magazin-newspaper-guardian

 

  配色有些许凶残么——译者C7210注。

  如果不使用固定宽度的布局方式来组织这些内容,几乎可以说,首页将会乱的一塌糊涂。然而,在网格布局的帮助下,模块之间的留白及层次关系都相当清晰,整个内容结构的健壮性得到了提升。

  下面两篇文章(英文)可以帮助你更好的理解与实践网格布局的概念:

  A Brief Look at Grid-Based Layouts in Web Design

  The 960 Grid System Made Easy

  也不是什么新概念了,国产好文章也蛮多,有欲求的同学可自行觅食——译者C7210注。

  良好的文字排印

  良好的文字排印方案往往可以对简洁风格的页面设计起到事半功倍的推进作用。

  对字体数量的限制是这其中的一个关键因素。如果在同一套设计方案当中运用了过多的字体,它们彼此之间就会产生视觉上的竞争与冲突,这无疑会使页面变得凌乱不堪,用户的阅读连贯性也会受到极大的破坏。

  看看那些设计优秀的网站,你会发现它们通常只会用到一到两种字体,并在此基础上通过不同的字号、字色、粗细、间距等属性来体现出内容的层次结构。

  在这方面,纽约时报(The New York Times)与The Mavenist都是不错的例子。

  

clean-web-design-elements-tips-new-york-times

 

  

clean-web-design-elements-tips-The-Mavenist

 

  这两个站点用到的字体都不超过两种,但它们的设计方案都比较充分地利用了字体各方面的属性特质,使得整个页面当中的信息层次非常鲜明。

  除了字体以外,行间距(line-height)也是文字排印方案当中的一个关键性因素。使行与行之间保持足够的空间,文字段落就能变得更加易读,当用户阅读到一行文字的末尾时,也可以很轻松的将目光转向下一行开头的位置。我们可以在样式表当中通过line-height属性对行间距进行调整。

  此外,对于每一行当中

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • WordPress添加百度喜欢按钮小技巧
      • Wordpress 博客如何实现自定义Gravatar头像
      • 网站设计分析:建立良好的视觉层级
      • 网站设计分析:“中国式设计”的三个方向
      • 案例分析:奥巴马筹款网站的制作过程
      • 创建不平衡的平衡:在网页设计中使用不对称设计
      • 7大主流B2C首页导航栏设计对比分析
      • Wordpress页面模板制作方法及使用
      • css控制文字前的小图标
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1