百度MUX：谈网页设计骨骼.pdf

百度MUX ：谈网页设计的骨骼 在我们的生活中 ，设计无处不在 ，比如地铁里的大广告牌 ，橱 里摆放的衣服 ，高楼大厦的LED 展位 ，甚至手机里的某个应用界面等 ，通常在大家眼里 ，好的设计就是即有创意又大胆 ，并没有什 么规律可循 ，但其实设计和绘画不同的在于 ，绘画可以展露个性 ，而设计的核心却是体现秩序的 美感 ，它不是来自个人 ，而是来自于社会 ，好比建筑群的设计构成 ，不只是一个华丽的皮囊 ，而是 有血有肉的 ，它的骨骼就是设计的根本。每个设计抽象出来都是一些元素的构成。 康定斯基曾经在 《点线面》的一书中 ，将艺术的形式归结为三种元素之间的构成关系。 “依赖于对艺术单个的精神考察 ，这种元素分析师通向作品内在律动的桥梁 。” ——瓦西里·康定斯 基 （Wassily Kandinsky ）《 点、线、面》 每个设计师总有一点职业病 ，有时候会被满屏的信息淹没 ，有时候会为一个像素的间距而纠结 ，但 只需静下心来 ，从设计的根本出发 ，不看那些装饰和颜色还有材质 ，只从平面构成出发重新解构你 的设计 ，也许会有不一样的启发和看到那一点点瑕疵所在。 我们先回顾一下平面设计中的点 ，线 ，面各自的特点 一 ．点的运用 在几何学的意义上点是可见的最小形式单元 ，是位置的表示形式。无所谓方向、大小、形状。但所 为设计构成的点与几何中的点是不同的。只有当它与周围要素进行对比时才可知这个具有具体面积 形象是否可以称之为“点”。 康定斯基认为从内在性的角度来看 ，点是最简洁的形态。 举个例子 ，下面的网站是一个日本传统的24节气网站 ，站点设计也非常的传统 ，用非常简约的线条 和少量的元素组合成了一种空灵的美感。 看起来都是文字和线条的交接 ，看起来并没有所谓的点的组成 ，但实际上一些文字在视觉里起到了 点的作用 ，如下图所示 ，右侧标题作为视觉中心 ，紧密的排列起来的文字形成了一个矩形视觉焦点 ，而左侧的小文起到平衡视觉的作用。 网站地址 ：ht t p://www.ise kagen sat .jp/k t n hagusa/ 1 ．不同形状的点往往给人以不同的视觉心理感受 圆形 ，平稳 ，在感情上是饱满的 ，浑厚有力量的。 方形 ，除了平稳外有端庄 ，大方感 ，在感情上是踏实的 ，可依靠的。 三角形或菱形 ：菱角分明 ，且有指向性 ，在感情上是偏倚的 ，有目的性的。菱形比三角形对称 ，在 平衡中寻求个性。其他不规则的图形 ，显得富有自己的个性 ，是独立的 ，张扬的。在规则的图形里 变得非常明显。往往用于丰富画面。 居中 ：平静 ，稳定 ，集中感 居上 ：不稳定感 居下 ：画面有沉淀 ，安静的感觉 ，但是不容易被人发现。 在页面三分之二靠上时 ：吸引人注意往往是视觉的焦点。 还是举日本节气网站这个例子 ，进入某个节气后首先映入眼帘的是正中央的节气信息 ，第一时间让 用户看到最想知道的内容 ，正中央圆角矩形的设计 ，隐喻传统印章 ，安静且舒适。而内容相对而言 在视线的偏上方从纯色背景到高清大图设的背景设计上非常有层次感也不会觉得枯燥。 3.当画面中有不同大小的点时 ，大的点是焦点 而点不同的排列方式也会产生不同的视 觉心理感受 当一个画面中有很多零散的点分布时 ，用户的视线会来回游移 ，而设计的目的就是如何让他们在不 规则中不显得凌乱。 例如这个站点画面里有三个较大的点 ，大的点往往吸引人的注意 ，并且这三个点形成了一个视觉上 的三角形 ，相对来说是比较稳定的。三角形的位置在页面的三分之二靠上 ，正好在视觉焦点的位置 。也说明了当你的视觉元素非常多时 ，把想要突出的内容放在偏上或者居中的位置 ，才容易被识别 。 二 ．线的运用 如果说点是静止的 ，那么线 ，就是点运动的轨迹。游离于点和形之间 ，它具有位置、长度、宽度、 方向、形状和性格等属性。 不同的线有不同的感情性格 ，线有很强的心理暗示作用。 直线好比男性 ，刚强有力量 ，曲线好比女性 ，柔和并且性感。 不同方向的线条和不同的排列方式也对用户起了不同的引导作用 如上面所示左图是瑞士航空公司的海报设计 ，不同方向的蜿蜒的公路线条性感的交织在一起 ，使得 画面非常丰富。 中图是一个电影海报 ，曲线的指向型引导用户的视觉 ，这就是点和线的区分 ，线是带有方向性的 ， 有粗细的变化。 右图是一张获得红点大奖的呼吁节电的海报 ，画面中简洁的直线并带有向下的方向感 ，即能引起关 灯的共鸣也能将不插电这种概念表达出来。 线还有切割画面的作用 ，线有连贯性 ，画面因为它的分割而变得生动有趣 ，对于阅读顺序有着决定 性的作用。 再如下图的网页用中央的一根直线将页面