Web设计师应遵循的高效设计原则之三:对齐

  • A+
所属分类:未分类

 《写给大家看的设计书》一书把复杂的设计原理凝炼为对比、重复、对齐和亲密性四大设计原则。本系列文章将分别详细阐述四个设计原则中的重点因素及辅助工具。本文为第三篇,讲述对齐在网站设计中的重要作用及辅助工具。

  主要针对酒店行业和联邦政府进行Web开发的Ryan Boudreaux针对四大设计原则写了一系列文章,本文为第三篇《Effective design principles for web designers: Alignment》的译文,内容如下:

  对齐是“Web设计者应遵循的高效设计原则”之三。

  对齐

  

 

  无论你是否意识到,对齐都是大部分Web设计中必不可缺少的部分;它作用于幕后,是一个隐藏设计元素。它起初可能只是一个PSD文件,也可能是设计模版中不可缺少的部分,是Web设计的主干。你的网站可能有一套布局(或网格),作为主要的框架,以支持网站的外观、体验、导航、工具栏、页眉、页脚等。

  作为高效设计原则,“对齐”可以帮助我们对“元素如何在页面中布局”做出明确的决定。利用战略层上的布局,可以设计出更强大、更吸引人的作品;利用网格系统,可以为每个元素的定位提供标准的指导。没有对齐策略,我们就会随意安放元素,与其他相似元素产生很小甚至不会产生联系。没有对齐,网站的外观及体验就会变得杂乱无章。

  对齐策略已远远超越了对齐、浮动属性及文本和图片的对齐方式,它还包含其他的因素,比如用户的交互、信息架构、网格及Web设计元素的组织。

  关于Web设计中的对齐,你是如何做决策的?

  最主要的考虑因素包括对典型用户交互方式的分析,如眼动追踪测试。针对“用户如何浏览网页”的多项研究已开展,内容包含眼睛是如何浏览页面的,从开头到结束的扫描路径是什么,用户如何决定跳转到的位置及下次点击位置等。Charles O’Connell在Usability.gov上发起的讨论(如图1)介绍了眼动追踪测试的含义。从这些研究可以看出,它的要点之一是大部分用户会沿着“F”形状的“热点图”来扫描页面内容,即从顶部开始(正如头条往往比图片更吸引眼球),仅扫描几个词后,便沿页面的左侧扫描并寻找更多有吸引力的内容,并在几秒内做出点击动作。

  

 

  图1

  同时还要注意信息架构(IA),包括整体概念模型、设计计划、架构及组织方式。该过程可以描绘出网站的层级结构、核心导航、标准、规范、分类标签、可用性,用页面线框图、站点设计图解、原型图来代替详细的设计模式。图2展示了一个简单网站的信息架构概念模型,它提供了开发流的起点,最终对主要元素进行对齐设置,以满足动态网站模型。

  

 

  图2

  利用对齐,如何创建引人注目的网站?

  对齐原则带来了条理,而条理体现了协调,所有的元素平衡合理地安排在Web页面中。以有序的方式组织页面元素,从而构建成功的产品并健康的发展。

  图3所示的简单布局以左侧顶部的Logo开始,页眉和导航区域位于右侧区域,并与之水平对齐;Banner图位于导航的下方。左侧栏与Logo位于一列,一直延伸到页脚的上方。主内容区与Banner图和页眉左对齐。右侧栏占据了剩余空间,与页眉/导航及Banner图的右边缘垂直对齐。页脚横跨页面的整个宽度。

  

 

  图3

  注意,Logo、左侧栏、内容区、右侧栏及页脚部分的文字均为左对齐,导航及Banner图区域为居中对齐。

  这仅仅是一个举例,来说明如何清晰地布局网格系统中的页面元素。

  网格系统

  一些网格系统及模版可以指导我们布局Web设计元素。下文列举了两个此类系统,你可以修改其中各种设置,如列、排版,并以CSS和HTML格式进行保存,从而快速提供原型,或整合入现存的开发环境中。

  由Web开发者Rasmus Schultz提供的Grid Designer 是一个在线工具,它默认提供4列,宽分别为174px,总宽度为800px,其中每列间有20px的间隙,页面两侧分别有22px的留白。在该案例中,默认的排版样式为Veranda:段落内文字大小为10px,行高为1;标题采用默认字体,大小为16px,行高为2。如图4。

  

 

  图4

  960 Grid由Web设计师Nathan Smith设计,可供下载。它提供了一个系统,通过常用维度来分割宽为960px的页面来流程化Web开发。它提供了两种选择:12列和16列,每一种选择即可单独使用也可混合使用。12列网格将宽均衡地分割成12列(每列宽为60px),而16列网格则分割为16列(每列宽40px),每列左右两侧具有10px的间隙,各网格最外侧均留出20px的空白。

  

 

  图5

  响应式对齐

  针对响应式Web设计,W3C已推出了CSS弹性框布局模块(CSS Flexible Box Layout Module)工作草案,简称“Flexbox”。Editors Draf于2012年8月13日进行了更新,它描述了CSS框模块的规范,以优化用户界面的设计。在强性布局模块中,弹性容器中的子元素可被定位于任何位置,可“弹性”变换大小,即可以增大充满未用空间,也可缩放以避免溢出,可很容易地对子元素进行水平和垂直对齐。这些框的嵌套(如水平中的垂直嵌套、垂直中的水平嵌套)可用来构建两种维度的布局。图5是来自Editors Draf的一个插图。

  

 



本文出自:亿恩科技【www.enkj.com】

河南亿恩科技股份有限公司(www.enkj.com)始创于2000年,专注服务器托管19年,是国家工信部认定的综合电信服务运营商。亿恩为近五十万的用户提供服务器托管、服务器租用、机柜租用、云服务器、网站建设等网络基础服务,另有网总管、名片侠网络推广服务,使得客户不断的获得更大的收益。 服务热线:400-723-6868 服务器/云主机 24小时售后服务电话:0371-60135900 虚拟主机/智能建站 24小时售后服务电话:0371-55621053
广告也精彩
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: