布局和构成(The Principles of Beautiful Web Design翻译)

网页设计 everyinch 10705℃ 0评论

对于很多Web开发人员而言,包括我自己在内,在设计过程中最可怕的是开始部分。想象一下,你坐在你的办公桌前,只有一杯咖啡和一张客户名片,该客户需要一个基本的企业网站。通常情况下,名片对于公司的身份很有意义,可作为设计灵感使用。

不幸的是,图1.1中史密斯服务公司的名片情况并非如此。它是黑色和白色,全是文字,没有特色。谈论空白的画布!所以,你将何去何从?你需要一个计划…你需要联系史密斯先生。从客户那里得到关键内容:关于他的公司实际上做什么的,并收集你必须使用的有关的信息内容,你就可以拿出一个成功的布局和设计方案。

 

图1.1一个普通的商务名片

任何人,无论什么水平的艺术才能,都可以提供一个有效并美观的设计,一切需要的只是一点经验和一些基本的布局原则的知识。因此,让我们从基础开始,不久你就会有设计画廊品质网站必要的基础。

设计过程

如果你让我设计一座桥,我有很多问题。这座桥是跨越您的前院小沟还是跨越庞恰特雷恩湖?我是使用混凝土和钢筋,还是使用牙签来建造整个建筑物?当然,在知道您是谁和您为什么需要它之前,我不会在酒吧里拿走您的商务名片并承诺您建造金门海峡。另一方面,比起你委托我来为您创造一个园林雕塑,创造一个独特的艺术作品可能会让我感到更舒适。

设计一个网站的过程介于设计桥梁建筑和雕塑之间。是的,我们要创建一个令人愉悦的网站,但我们的首要任务应是满足广大客户的需求。这些需求可能是高级且详尽的,或者他们可能只是有关提供信息。如果我们不仔细听,整个项目将失败,伴随着我们的声誉的下降。开发,托管和维护一个网站或应用程序的技术细节可能,应该,是技术性的。建立一个设计排版的过程,可以归结到三个主要任务:发现,探索和实施。

Comp是什么?

“comp”这个词是短语“comprehensive dummy ”的缩写,这一名词出自印刷设计界。这是在打印版面付印之前创建的对布局完整的模拟。把这个词用于网页设计,就是我们开始设计HTML的原型之前的一种布局设想。

发现

在设计过程中发现的部分是要会见客户并了解他们是做什么的。这可能会感到一些非设计因素,但是,对你的客户是谁以及他们如何经营他们的业务进行的信息搜集工作,对提出适当和有效的设计方案是非常重要的。

在您安排您与客户第一次会议之前,花一些时间研究他们的业务。如果他们请你设计一个网站,那么很可能他们目前没有网站,但还是要用任何方法搜索他们的信息。如果您无法找到任何有关他们具体的商业信息,在第一次会议前要努力学习尽可能多地了解他们的行业。只要有可能,与客户第一次会议应亲自进行。有时候,距离会导致只能通过电话进行会议,但如果客户在同一城市,尽量安排时间以满足面对面会谈。

请记住,本次会议不是给客户留下深刻印象、推销自己或销售网站,更多的是沟通,仅需要知道客户需要什么。尽量多听少说话,准备一些纸做笔记。如果你携带了你的笔记本电脑或平板电脑来演示网站的例子,限制使用它的时间。计算机有屏幕,人们往往会盯着他们,因此,如果客户不是全部时间在盯着屏幕,你就应该做笔记。如果你一定要在会议上提到一些技术,使用一个像iPhone的iTalk录音机或Android的录音设备来记录您的谈话,当然要经过用户的许可。根据我的经验,纸张可以对不那么精通技术的客户减少威胁和减轻注意力的分散。

客户会议不一定发生在办公室

即使当我在为一家大公司工作,我也会把我最有成效的客户会议安排在咖啡馆或午餐时间。这种方法的可行性取决于客户。如果您的联系是似乎更为正式的业务类型,我并不推荐,在许多情况下,使商务会议更私人化是一个很好的方法。

这里有一些我喜欢在初次客户会议时提出的问题,即使我已经通过搜索引擎回答了自己:
■您的公司经营什么?
■您在公司的角色是什么[1]
■公司是否有一个现有的标志或品牌?您开发网站的目标是什么?
■您希望提供什么样的在线信息,?
■您的目标受众由哪些人组成?他们拥有任何共同的统计资料么?如年龄,性别,或地理位置等
■您的竞争对手是谁,他们拥有自己的网站妈?
■您有喜欢或不喜欢的网站的例子吗?
■您的项目有什么样的时间表,预算是多少?

如果该项目是重新设计现有的网站,我还想问:
■当您的访问者来到网站他们一般希望找到什么信息?
■您现有的网站设计的问题是什么?
■通过重新设计您希望实现什么?
■您是否要保留当前网站的一些内容?
■您希望您的访客对一个新的网站设计做什么反应?

有时候,我一开始会列出比这里更多的问题。用你的想象力,并尝试提出一些有创意的疑问,这将让你更深刻的理解用户的组织机构。如果你是一个程序员,避免使用技术行话。如果你是一个设计师,避免专门谈论设计。当然,这可能是你在想的,但语义标记、浮动的和固定的布局,以及配色方案对客户没什么意义。更糟的是,这些类型的对话可能对自己的设计带来误导,在你有机会开始考虑自己的设计之前。

探索

在设计过程的下一阶段就是要把你从客户得到信息带回到您工作室分析,解剖和实验。基于对所有信息、产品以及他们所提供的服务的把握,你尝试应如何安排布局。把自己放在网站访问者的位置,问自己这些人正在寻找什么。如果你考虑购买产品,在你购买前你需要知道什么?如果你注册一个服务时,你从哪里了解不同的产品以及你需要什么样的服务水平?第x页最清楚的标题是什么,以及它要经过多少步才能达到第Y页?

在Web设计领域,信息架构,简称为IA,是一个工程的开端。对于可扩张网站和复杂的网络应用,信息架构是一个自成一体的事业,但这一领域的指导原则是,可以为即使是最小的网站提供一个坚实的基础。在我们的过程中的探索阶段,我们要着眼于把网站的内容和网站的流量组织成一个我们可以围绕设计的结构。

完成这项任务的最重要的两个工具是便条纸(或白板,如果你有一个)和一大叠便利贴。把网站所有的零碎物品列一个详单,并开始安排他们到组和子组。这些都有可能来回移动了不少次,而这也正是便利贴派上用场的地方。如果你把每一个章节,分段,以及网站的网页都做了说明,您可以它们安排在墙上,他们就会出现在您的网站的导航上。你要避免过多的选项压倒访问者,但你也不能把网站的信息隐藏太深,即让太多的链接远离主页。对于这项行为没有硬性且快速的规则,只是使信息尽可能的明显和容易到达。

实现

现在,我们要彻底想清楚我们要如何组织我们要使用的信息,我们的设计过程中实施步骤从创建一个布局开始。不考虑项目,尽量避免被与网站建设相关的技术所局限——至少在第一步上。在这一点上,不论网站将由HTML直接构成,或者使用一个内容管理系统模板,或使用一个Ruby on Rails的应用程序,技术都是不重要的。它的本质内容是,我们有一个界面设计和一张白纸。“白纸?”没错,白纸。难道你真的认为我是打算让你回到你所珍视的电脑上了吗?想都别想。原因在这里:如果你在电脑前开始思考布局,将很容易失去设计的重点。如果你在纸上开始,你可以忽略浏览器的技术限制和CSS,并专注于您所期望的最终产品的样子。现在,你可能以为所有优秀的设计师随身携带花哨的精装笔记,使用昂贵的马克笔和画笔来设计Da Vinciesque的网页布局效果图。但就我自己而言,我使用79美分的螺旋装订笔记本和我可以在我书桌上找到的任何可用的书写工具。

我开始通过绘制出几个可能的布局的草图。我制作了几个之后,我确定一个我喜欢的,转到Photoshop中,并使用矩形工具来制作我已经在纸上标明的区域。一旦我确定了我的布局,我试验前景色和背景色,直到我有一个坚实的配色方案。我继续旋转Photoshop的圆块图片和调整周围像素,直到,最终,如魔法般,我有了一个可以展示给客户的布局设计。

很简单,对吧?好吧,也许我在这短暂的描述中跳过了几步。老实说,当人们问我如何做到我所做的时,他们通常会收到一个类似的解释。事实真相是,来自过去的经验以及大学中设计和艺术课程的信息捆束现有潜意识,帮助我定义我自己的设计过程。

学习如何设计就像学习如何编程。有人有一些诀窍,但任何人都可以学会。正如有良好的代码和笨拙的代码之分,也有良好的设计和丑陋的设计之别。学习一些与设计相关的原则和设计惯例将帮助你了解好的、坏的、丑陋的设计之间的差别,使自己走向建立自己的设计。

定义好的设计

有两个主要观点能够使大多数人决定一个网站设计是“好”还是“坏”。有一个是严格的可用性角度,它着重于功能性、信息的有效表现和效率。还有从纯粹审美的角度来看,关注设计的艺术价值和视觉诉求。有些人被美学和图形所局限,而忽略了用户,与此同时一些可用性大师专注于他们的用户测试,而忘了视觉诉求。为了达到并保持人们的兴趣,两者必须最大限度地提高。

要记住的最重要的一点是,设计与沟通有关。如果您创建一个网站,它能良好运行并展示信息,但看起来丑陋或未能配合客户的品牌,没有人愿意使用它。同样,如果你制作了一个漂亮的网站是很难使用或无法访问,人们就会离开。事实上,一个已完成的网站的设计元素和功能应该作为紧密结合的整体一起进行工作,因此:

用户因设计愉悦,但因内容被吸引

可用性专家关注的最大问题之一是用户浏览页面得到他们需要的信息所花费的时间,无论是一段内容、到另一个网页的链接或窗体域。设计不应该是障碍,而应作为用户与信息之间的沟通渠道。

Nick La的网页设计墙[2](图1.2所示)是一个既美观又实用的设计典范。丰富多彩的插图围绕着页面结构,装饰了导航和网站元素,看起来好像他们是从一个速写本剪下来的。许多手工制作的、有机元素形成对比,有利于吸引你的视线到博客的帖子内容而又不干扰页面的可读性或它的组织性。

 

图1.2 网页设计师墙

用户可以通过直观的导航方便的走来走去

稍后我们将谈论更多的导航布局,但主要的导航区块本身应该是在页面上清晰可见的,每一个链接应该有一个描述性标题。一个导航结构,不仅在光标放到上面时改变外观,也要显示出活动的页面或区段(如图1.3所示菜单一样),帮助用户识别他们在哪里,以及如何到达他们想去的地方。

 

图1.3来自nclud.com的导航栏,华盛顿,数字基础网页设计机构

辅助导航、搜索框、外向链接不应该成为页面的主要标志。如果这些物品容易被找到,我们要在视觉上把它们与内容分开,我们可以让用户专注于信息——但当他们准备转移到其他内容时他们会知道看哪里。

用户识别每一个属于该网站的页面

即使网站的主页和其他页面的布局有着显著不同,一个有统一的主题或风格应该存在于网站的所有网页,以帮助设计风格保持在一起。

看一看来自莫尔商学院的网站[3]的三张截图。虽然这些网页内容块划分的不同,但有多种视觉符号让用户知道它们是来自同一网站的网页。这种统一性大部分是由于特征元素和导航块的重复。统一使用一个非常有限的色调(黑色,灰色,黄色和红色)也有助于统一的页面。

 

图1.4 摩尔商学院的网页

页面剖析

网页剖析

即使从非设计者的角度来看,确定一个满足上述所有的要求的设计是一个简单的任务。它类似于在你的冰柜上用有吸引力的诗性单词写短语。虽然有很多方法来安排单词,只有为数不多的安排有意义。有吸引力的单词像是元件,或网页的一部分。虽然这些必要的块数取决于网站的大小和主题,但大多数网站都有出现在图1.5中的组件。

 

图1.5 网站的构造

让我们依次看一看这些组件:

包含

每个网页都有一个容器。它可能以页面body标签的形式,包含全部div标签。如果没有某种容器,我们就没有地方放置我们的网页内容。这些元素会漂到浏览器窗口的外部空间并填满空白空间。这个容器的宽度可以是浮动的,这意味着它可以扩展以填补了浏览器窗口的宽度;或者是固定的,所以不管窗口的大小是什么内容的宽度是相同的。

Logo

当设计师提到一致性,他们指的是存在于公司各种形式的市场营销的标志和颜色,如名片、信纸、宣传册和其他[4]。出现在网站上的统一模块应该包含该公司的Logo或名称,并安排在每个页面的顶部。同一模块增加品牌知名度,同时告知用户他们现在看到的页面是一网站的一部分。

导航

至关重要的是,网站的导航系统应该很容易找到和使用。用户希望看到导航正好在页面顶部。无论您计划使用在页面一侧的竖直菜单或穿过页面的横向菜单,导航应接近尽可能布局顶部。至少,所有主要的导航项目应该出现“折痕上”。

关于折痕

折痕,许多设计师这样称呼它,就是一个网页结束前用户向下滚动的部分。这个比喻是来自于报纸折痕。如果你看一个折叠报纸的封面,大多数新闻的标题和最大的新闻出现在上半部分,所以,最重要的新闻项目可以在报纸折叠时一眼看到。网页上的折叠位置取决于浏览器的尺寸和用户的屏幕分辨率。

估计一个分辨率为1024×768像素的Chrome浏览器,也就是去除浏览器中的应用标签、按钮、地址栏和底部的状态栏等形式占据的空间,折叠空间通常只是在从顶部跨越500像素。

内容

内容为王。一个典型的