简洁至上Web设计#8211;创意要素及设计技巧.pdf

简洁至上的Web设计 – 创意要素及设计技巧 简洁 ，不等于简单。这与弹琴是一个道理 ，你也 有能力弹得很快 ，但你并不需要在所有地方都弹 得这么快。在很多时候 ，让速度慢下来反而比弹得飞快要来的更加困难。实际上 ，味道往往最能体 现在从容自然、舒缓平淡的韵律当中。接下来进入原文作者人格 ；我发现自己在很大程度上就是 一Dummy Syst em来着。 简洁的Web页面设计风格是当前圈子当中的风潮之一。在本文中 ，我们首先将对这类风格当中的那 些最具代表性的组成要素进行分析 ，随后 ，我(英文原文作者)还会向各位分享一些工作中的实战 技巧。 简洁风格的创意组成要素 固定宽度的页面布局结构 花时间观察一些简洁风格的网站 ，你会发现它们当中的绝大多数都有用到经过良好规划的网格布局 系统。如果哪位朋友对网格布局还不大了解的话 ，可以设想一下 ，在着手进行实际的视觉设计工作 之前 ，使用辅助线将页面划分为若干等宽的列 ，通过这种方式对页面结构及元素的布局进行更精准 的规划。网格布局可以使设计方案当中的信息结构更加清晰 ，在视觉上具有强烈的节奏感与一致性 。 固定宽度的网格布局结构可以为页面带来秩序与效率。举个例子 ，虽然Creat ive Review当中的页面 布局会根据内容类型的不同而有所区别 ，但我们能够感受到的浏览体验却是相当连贯的 ，因为这些 页面都是基于同一套网格布局框架进行设计的。下图展示了他家的首页和A bo ut 页面 ： 对于在线杂志或报纸一类需要呈现大量内容的网站来说 ，要打造简洁的页面设计方案则更加困难。 不过英国的卫报(T he Guardian)以及一些同类型的在线报纸站点倒是向我们展示了通过固定宽度的 网格布局实现简洁设计方案的可行性 ： 配色有些 凶残么——译者C72 0注。 如果不使用固定宽度的布局方式来组织这些内容 ，几乎可以说 ，首页将会乱的一塌糊涂。然而 ，在 网格布局的帮助下 ，模块之间的留白及层次关系都相当清晰 ，整个内容结构的健壮性得到了提升。 下面两篇文章(英文)可以帮助你更好的理解与实践网格布局的概念 ： A Brief Loo k at Grid- Based Layo ut s in Web Design T he 960 Grid Syst em Made Easy 也不是什么新概念了 ，国产好文章也蛮多 ，有欲求的同学可自行觅食——译者C72 0注。 良好的文字排印 良好的文字排印方案往往可以对简洁风格的页面设计起到事半功倍的推进作用。 对字体数量的限制是这其中的一个关键因素。如果在同一套设计方案当中运用了过多的字体 ，它们 彼此之间就会产生视觉上的竞争与冲突 ，这无疑会使页面变得凌乱不堪 ，用户的阅读连贯性也会受 到极大的破坏。 看看那些设计优秀的网站 ，你会发现它们通常只会用到一到两种字体 ，并在此基础上通过不同的 字号、字色、粗细、间距等属性来体现出内容的层次结构。 在这方面 ，纽约时报(T he New Yo rk T imes)与T he Mavenist都是不错的例子。 这两个站点用到的字体都不超过两种 ，但它们的设计方案都比较充分地利用了字体各方面的属性 特质 ，使得整个页面当中的信息层次非常鲜明。 除了字体以外 ，行间距(line-height )也是文字排印方案当中的一个关键性因素。使行与行之间保持足 够的空间 ，文字段落就能变得更加易读 ，当用户阅读到一行文字的末尾时 ，也可以很轻松的将目光 转向下一行开头的位置。我们可以在样式表当中通过line-height属性对行间距进行调整。 此外 ，对于每一行当中的文字来说 ，字间距(let t er-spacing)也是我们需要考虑到的细节问题。合理 的字间距可以为文字带来更好的呼吸感。 关于文字排印 ，也有些不错的文章(英文)推荐一看 ： A Basic Loo k at Typography in Web Design CSS Typography: T he Basics CSS Typography: Techniques and Best Pract ices CSS Typography: Examples and Too ls 简化的配色方案 在印刷领域 ，设计方案所用到的颜色数量通常会受到各种现实问题的限制 ，譬如项目的预算只允 设计师使用两种颜色来设计海报。类似这样的情况是很常见的 ，设计师们时常会因为这些局限而感 到相当的闹不住。 而Web设计领域当中却不存在这类问题 ，如今 ，多数显示设备所支持