布局和构图
对于包括我自己在内的许多web开发人员来说,设计过程中最令人生畏的部分是开始。想象一下,你坐在办公桌前,身边只有一杯咖啡和一张潜在客户的名片,这位客户需要一个基本的公司网站。通常,一张名片能充分体现公司的身份,也可以作为设计灵感。
不幸的是,下面史密斯服务公司的卡的情况并非如此。它是黑白的,全是文字,没有字符。Bleurgh !这是一块空白的画布!那么,接下来你要怎么做?你需要一个计划,你需要联系史密斯先生。从客户那里得到一些关于他的公司实际做什么的关键输入,并通过收集关于你必须处理的内容的信息,你将能够提出一个成功的设计。
任何人,无论艺术天赋水平如何,都可以设计出既好用又好看的设计。它所需要的只是一点经验和一些基本布局原则的工作知识。所以让我们从基础开始,不久你就会有设计画廊质量网站所必需的基础。
设计过程
设计一个网站是一把双刃剑。这个过程介于艺术、科学和解决问题之间。是的,我们想要创建一个美观的个人网站,但我们最优先考虑的应该是满足客户的需求。这些需求可能是崇高而详尽的,也可能只是为了提供信息。但是,如果我们不能认真倾听,整个项目就会失败。然而,创建设计组合的过程可以归结为三个关键任务:发现、探索和实现。
什么是compp ?
这个词电脑及相关知识是短语“comprehensive dummy”的缩写,一个来自印刷设计界的术语。这是一个完整的模拟印刷布局,是在布局进入出版社之前创建的。在翻译这个术语到网页设计,一个comp是一个布局的图像,在我们开始在HTML设计原型之前创建。
发现
设计过程中的发现部分是与客户见面并了解他们在做什么。这可能感觉有点违反直觉,但收集关于您的客户是谁以及他们如何经营业务的信息对于提出适当而有效的设计至关重要。
在你安排与客户的第一次会面之前,花一些时间研究他们的业务。如果他们让你设计一个网站,他们现在可能没有,但不管怎样,他们都不会。如果你找不到任何关于他们业务的具体信息,那就在第一次见面之前尽可能多地了解他们的行业。只要有可能,与客户的第一次会面应该亲自进行。有时,距离会决定会议必须在电话上进行,但如果客户在城里,安排一个时间面对面。
记住,这次会面不是为了给客户留下深刻印象,不是为了推销你自己,也不是为了推销一个网站,而是为了交流和确定客户想要的东西。试着多听少说,带上便签本做笔记。如果你带着笔记本电脑或平板电脑来讨论网站示例,请限制使用时间。电脑有屏幕,人们倾向于盯着它们,这不利于良好的会议或记录。如果你必须在会议中使用一些技术,那就使用语音记录应用程序来记录对话——当然,要得到客户的许可。不过,根据我的经验,笔和便签本对那些通常不太懂技术的客户来说没有那么大的威胁,也没有那么多的分心。
客户会议不必在办公室举行
甚至当我在一家大办公室的公司工作时,我也在café或午餐时间与客户会面。这种方法的可行性取决于客户。如果你的联系人看起来更像是正式的商务人士,那就不要建议他。然而,在很多情况下,这是一个让商务会议更私人的好方法。
以下是一些我喜欢在初次会见客户时问的问题,即使我已经通过搜索引擎找到了答案。
如果项目是一个新的网站开发:
- 公司是做什么的?
- 你在公司里的角色是什么?(如果这个人是你的主要联络人,这个问题尤其重要。)
- 公司是否有现有的标志或品牌?
- 你开发网站的目标是什么?
- 你希望在网上提供什么信息?
- 谁是你的竞争对手,他们有网站吗?
- 你有喜欢或不喜欢的网站的例子吗?
如果项目是重新设计一个现有的网站,我也想问:
- 当访问者访问你的网站时,他们通常在寻找什么?
- 你目前的设计有什么问题?
- 你希望通过重新设计达到什么目的?
- 当前站点是否有您想要保留的元素?
- 你认为你的访问者会对一个新的网站设计有什么反应?
如果项目是一个新的应用开发:
- 这款应用的目标是什么?
- 它需要在什么平台上运行(网络/本地)?
在这三种情况下,我都想问:
- 你有喜欢或不喜欢的应用程序/网站的例子吗?
- 该应用/网站在该领域是否存在竞争对手?
- 你的目标受众是谁?它的成员是否有任何共同的人口统计数据,如年龄、性别或物理位置?
- 你对这个项目有什么样的时间表,预算是多少?
有时我一开始会提出比这里列出的更多的问题。发挥你的想象力,试着提出一些有创意的问题,这将真正让你更深入地了解客户的组织。如果你是一名程序员,避免使用技术术语。如果你是一名设计师,请避免专门谈论设计。当然,这可能是你想的全部,但是像语义标记和响应式布局这样的东西对客户来说可能意义不大。更糟糕的是,这些类型的对话可能会在你有机会开始思考设计之前,给你带来误导性的设计意见。
探索
设计过程的下一个阶段是将你从客户那里了解到的信息带回实验室进行分析、解剖和实验。你想要牢牢掌握他们必须提供的所有信息、产品和服务,并考虑如何安排这些信息。站在网站访问者的角度,问问自己这些人在寻找什么。如果你正在考虑购买一种产品,在购买之前你需要知道什么?如果您正在注册一项服务,您将从哪里了解不同的产品以及您需要的服务级别?一页最清晰的标题是什么X,以及到达页面需要多少步Y?
在网页设计的世界里,这是一个过程的开始信息架构,简称IA。对于庞大的网站和复杂的web应用程序来说,信息架构本身就是一个职业,但是这个领域的指导原则可以为即使是最小的网站提供坚实的基础。对于我们过程的探索阶段,我们希望将网站的内容和流程组织成我们可以设计的结构。
完成这项任务最重要的两个工具是废纸(如果有白板也可以)和一大块便利贴。列出网站的所有零碎内容,并开始将它们分成组和子组。这些事情可能会经常发生变化,这时便利贴就派上用场了。如果您为站点的每个部分、分段和页面都做了记录,您可以将它们按照它们在站点导航中出现的顺序排列在墙上。您希望避免过多的选项让访问者不知所措,但也不希望将信息过多地埋没在站点中——也就是说,过多地点击主页之外的内容。这项活动没有严格的规则;只要让信息尽可能明显和容易获取就可以了。
实现
现在,我们已经考虑了如何组织我们正在使用的信息,设计过程的实现步骤从创建布局开始。无论项目是什么,都要尽量避免陷入与构建网站相关的技术中——至少在一开始是这样。在这一点上,站点是由直接的HTML、内容管理系统模板还是Ruby on Rails应用程序组成并不重要。最重要的是,我们有一个需要设计的界面和一张白纸。“纸吗?”没错,纸上的。你真以为我会让你回到你那珍贵的电脑前吗?不可能。原因如下:如果你开始在电脑前思考布局,很容易失去对设计的关注。如果从纸上开始,您可以忽略浏览器和CSS的技术限制,并专注于您希望最终产品的外观。 You might think that all good designers carry around fancy, hard-bound sketch books in which they flourish expensive markers and paintbrushes to design Da Vinci-esque renderings of potential web page layouts. For my part, I use a 79-cent, spiral-bound notebook and any writing instrument I can find on my desk that still works.
我首先勾勒了一些可能的布局。在我制作了几个之后,我决定一个我喜欢的,进入Photoshop,使用矩形工具将我在纸上标记的区域屏蔽掉。一旦我定义了我的布局,我就会尝试前景色和背景色,直到我有一个纯色方案。我继续摆弄Photoshop的旋钮,推着像素,直到最后,神奇地,我有了一个向客户展示的对比。
简单,是吧?好吧,也许我在简短的描述中跳过了一些步骤。老实说,当人们问我是如何做我所做的事情时,他们通常会得到类似的解释。事实是,从我过去的经验和大学设计和艺术课中,有大量现在潜意识的信息帮助我定义了自己的设计过程。
学习如何设计就像学习如何编程。有些人有一点诀窍,但任何人都可以学习。正如有好的代码和丑陋的代码一样,也有好的设计和丑陋的设计。学习一些与设计相关的原则和惯例将帮助你理解好、坏和丑之间的区别,帮助你建立自己的设计过程。
定义好的设计
大多数人从两个主要的角度来判断一个网站设计是“好”还是“坏”。有一个严格的可用性角度,它关注的是功能、信息的有效表示和效率。然后是纯粹的美学角度,这是关于设计的艺术价值和视觉吸引力。有些人沉迷于美学和图像,而忘记了用户,而一些可用性专家迷失在他们的用户测试中,忘记了视觉吸引力。为了接触到人们并保持他们的兴趣,最大化这两者是至关重要的。
要记住的最重要的一点是,设计是关于交流的。如果你创建的网站运作良好,信息呈现良好,但看起来很丑,或者不符合客户的品牌,没有人会想要使用它。同样,如果你做了一个漂亮的网站,但很难使用或无法访问,人们就会离开。事实上,一个完成的网站设计的元素和功能应该作为一个单一的内聚单元工作。下面列出了一些原因。
用户对设计满意,但对内容感兴趣
可用性专家最关心的问题之一是用户扫描页面以获取他们想要的信息所花费的时间,无论是一段内容、一个到另一个页面的链接,还是一个表单字段。设计不应该成为阻碍;它应该充当用户和信息之间的渠道。
高大、真实、纠结是一份视频旅行日记,记录了两位朋友在加拿大纽芬兰和拉布拉多的旅行。“高大、真实、纠结,指的是玛丽和米雷拉一路上收集的故事。在设计中巧妙地抓住了这种大冒险的想法,一个美丽的拉布拉多海湾的鸟瞰地图视图完美地框架了一个书法标志。这个标志然后尾巴变成一个蜿蜒的道路,跟踪你沿着页面。地形等高线成为衬托旅程/地图主题的雅致装饰。这一切一起工作,使页面导航感觉有点像在进行一次曲折的公路旅行。然而,这些小小的设计噱头丝毫不会影响你在滚动页面时看到的精彩故事——包括文本和视频。这是一个丰富、有创意、有趣的设计。
用户可以通过直观的导航轻松移动
稍后我们将详细讨论导航的位置,但是主导航块本身应该在页面上清晰可见,并且每个链接都应该有一个描述性标题。导航结构不仅在鼠标悬停时改变外观,而且还指示活动页面或部分,帮助用户识别他们所在的位置,以及如何到达他们想要去的地方。新西兰可再生能源技术公司Mercury可以立即确定你当前的位置回家了,E.Transport,E-Scooters在下面的例子中。
次要导航、搜索字段和输出链接不应该成为页面的主要功能。如果我们使这些条目易于查找,并将它们从内容中可视化地分离出来,我们就可以让用户专注于信息——当他们准备转到其他内容时,他们仍然知道去哪里看。
用户识别每个页面都属于站点
即使主页和网站其他部分的布局有很大的不同,所有网站页面都应该有一个有凝聚力的主题或风格,以帮助将设计整合在一起。支持俄罗斯的网站阿兹博物馆它以许多不同的方式分割布局,但在每个页面上都有强大的第一列导航,不会让人迷失方向。
网页结构
即使从非设计师的角度来看,定义一个满足我上面列出的所有要求的设计也是一个简单的任务。这类似于在冰箱上用磁性的诗歌词写一个短语。尽管有数百万种排列单词的方法,但只有少数几种排列是有意义的。磁词就像网页的组件或块。虽然这些必要的块的数量取决于网站的大小和主题,但大多数网站都有如下所示的组件。
让我们依次看一下这些组件。
包含块
每个网页都有一个容器。这可以是页面的形式身体
元素,或者一个all- contains部分
或div
.如果没有某种容器,我们就没有地方放置页面的内容。元素会漂移到浏览器窗口的边界之外,进入空白区域。这个容器的宽度可以是流动的,这意味着它可以扩展到浏览器窗口的宽度,也可以是固定的,这样无论窗口大小如何,内容的宽度都是相同的。
这个标志
当设计师提到“身份”时,他们指的是存在于公司各种营销形式中的标志和颜色,比如名片、信笺、小册子等等。出现在网站上的标识块应该包含公司的标志或名称,并位于网站每页的顶部。标识块提高了品牌认知度,同时通知用户他们正在浏览的页面是单个网站的一部分。
身份与品牌
许多人把“身份”和“品牌”这两个词混为一谈。品牌是一个广泛的术语,描述了开发公司、产品或服务的意识的过程。品牌过程包括广告、市场调研、客户反馈等等。身份实际上是品牌的一个子集,因为它只处理品牌的视觉方面。
导航
网站的导航系统必须易于找到和使用。用户希望在页面顶部看到导航。无论你打算在页面的一侧使用垂直菜单,还是在页面上使用水平菜单,导航都应该尽可能靠近布局的顶部。至少,所有的主导航项都应该出现在“页面上方”。
上层社会
的褶皱很多设计师称之为“页面页面”,指的是在用户向下滚动页面之前,页面内容的结束位置。这个比喻来源于报纸的折页。如果你看一份折叠的报纸的封面,大部分的标题和最大的新闻出现在上半部分,这样当报纸折叠时,最重要的新闻就可以一眼看到。网页上折页的位置取决于浏览器的尺寸和用户的屏幕分辨率。
的内容
内容为王。内容包括在网站上找到的任何文本、图像或视频。一个典型的网站访问者会在几秒钟内进入和离开一个网站。如果访问者无法找到他们想要的东西,他们无疑会关闭浏览器或转移到另一个网站。保持主要内容块作为设计的焦点是很重要的,这样访问者可以扫描页面以获得他们需要的信息。
页脚
页脚位于页面底部,通常包含版权、联系方式和法律信息,以及一些指向网站主要部分的链接。通过将最终内容与浏览器窗口的底部分开,页脚应该向用户表明他们位于页面的底部。
空格
平面设计术语空格(或负空间)指页面上没有字体或插图的部分。虽然许多新手网页设计师(和大多数客户)觉得需要用照片、文本、表格和数据填满网页的每一寸地方,但页面上的空白空间和内容一样重要。如果没有精心规划的空白,设计就会感觉封闭,就像一个拥挤的房间。空白有助于设计呼吸通过引导用户浏览页面,它还有助于创建平衡和统一——这两个重要的概念,我们将在本章后面详细讨论。
至此,我们已经与我们的理论客户史密斯先生进行了初次会面,这次会面很有帮助。他非常详细地解释了他的业务是做什么的,以及他想要这个网站达到什么目的。尽管我们还没有看到实际的内容,但我们可以使用网页解剖的标准块来开始开发布局。虽然其他网站特定的块被工作到许多网站布局的设计中,网页解剖工作总结了最常见的块。
现在我们有了这些信息,我们如何使用它来为Smith's Services创建一个基本布局呢?
是时候讲一些网格理论了。
方格理论
当大多数人想到网格时,他们想到的是工程和架构。然而,网格也是平面设计的一个重要工具,在网站设计中使用网格在过去几年里越来越受欢迎。
使用网格不仅仅是简单地将页面上的元素排成正方形并排列起来。比例也很重要。这就是该理论引入网格使用的地方。许多艺术历史学家认为荷兰画家Piet Mondrian是平面设计之父,因为他对网格的复杂使用。然而,经典网格理论几千年来一直影响着成功的艺术努力。划分构图元素的概念可以追溯到毕达哥拉斯和他的追随者建立的数学思想,他们将数字定义为比率而不是单个单位。
毕达哥拉斯学派观察到自然界中经常出现的一种数学模式,他们相信这是神的启示。他们把这种模式称为黄金比例或神圣比例。基本思想如下所示。
一条线可以用黄金分割比例将其长度除以1.62来等分。这个神奇的1.62数字实际上是1.6180339…,一个无理数,通常表示为Φ(发音为“phi”)。在这个讨论中,解释得出这个数字的数学方法有点太复杂了,而且可能对你成为一名更好的设计师没有真正的帮助,所以我就不赘述细节了。再说了,我的数学有点生疏了。
那么这个比例与平面设计有什么关系呢?一般来说,用与黄金比例成比例的线条划分的构图被认为是赏心悦目的。文艺复兴时期的艺术家使用神圣的比例来设计他们的绘画、雕塑和建筑,就像今天的设计师在设计页面布局、海报和小册子时经常使用这种比例一样。而不是依赖艺术判断,神圣的比例为我们提供了制作吸引人的布局的逻辑指导。
下图中的芦荟仙人掌就是自然界中黄金分割的一个例子。每一行连续的仙人掌刺的缩放提供了一个完美的平衡刺的位置和阳光照射。
图片来源:芦荟:J Brew, 2005
这一比例在好的设计中很盛行。像下面这些电影海报展示了如何使用黄金比例来划分画布和定位焦点。请记住,这些都是有用的指南,而不是无可辩驳的定律。《捉鬼敢死队》的海报显然使用了黄金比例来调整红色圆圈图形的大小和位置,但设计师需要将整个单位稍微向右移动,以平衡左手伸出的手。如果他们能完美地将圆居中,这个设计就会感觉不平衡的。
三分法则
黄金比例的简化版本是三分法.一条被黄金分割比例等分的线被分成两部分,其中一部分的大小大约是另一部分的两倍。将构图分成三份是一种不用计算器就能应用神圣比例的简单方法。
为了进行快速布局实验,我喜欢先用铅笔和纸画一堆简单的三分法网格。只需要画一个矩形,水平和垂直上分成三份,然后在每条垂直线之间画一条线,创建六列,如下图所示。
有了这个简单的网格,我们就可以开始布局我们的元素了。这通常被称为“线框”。线框图是设计内容块及其在页面上的位置的简单草图或布局。线框图非常有用,因为你可以快速轻松地移动元素。最大的、最外面的矩形代表我们在“Web Page Anatomy”一节中讨论过的容器。在使用这种布局设计方法时,我喜欢先放置最大的块。通常,该块表示内容。
在我的第一个三分法网格中,我将内容块放置在右下角布局的三分之二范围内。接下来,我将导航块放置在左侧列的中间三分之一处。我将标识块的文本部分放在内容的左侧,标识的图像部分放在菜单上。最后,我在网格的右列中压缩内容下面的版权块。结果是如下所示的四种可能的布局安排的左上角。
这些最初的草图提供了一个快速的了解什么一般的布局方法可能适用于你的网站。不过,没必要就此止步。Web上基于网格的设计越来越流行,这激发了许多关于在网格上设计网站的优秀文章和工具。
CSS框架
CSS框架是一种CSS系统,用于处理网站的网格结构。大多数现代CSS框架都基于12列网格,这主要是因为它提供了各种各样的列宽度,因为12可以被1、2、3、4和6整除。基金会,引导,布尔玛而且TailwindCSS所有框架都是基于12列网格的——尽管它们可以被定制为任意数量。
我通常在一个12栏的草图表上开始设计,以便于从我的草图和模型过渡到实际的工作原型。当你为自己的布局尝试不同的安排时,使用你所选择的任何网格的列作为标识、导航、内容和页脚块的对齐指南。我们很容易将所有元素安排在相同的一两个区块中,但要尽量避免这种情况,因为这在视觉上并不是很有趣。相反,考虑将一些元素推入另一列或完全离开网格。
你从新设计师那里听到的最常见的抱怨之一是网格使设计过于四四方方和受限。这是逃避。虽然栅格总是可以建议放置元素的好位置,但没有理由感觉被它们束缚住了。
以集体工作/生活空间(见下图)。该设计使用了大量的有机形状和照片蒙版来创建一个古怪的,流动的布局,很少有正方形的边缘。但是,在上面滚动一个14列的网格,底层结构就会变得更加清晰。最外面的两列主要被当作无文字的排水沟,留下一个经典的12列网格来划分剩余的空间。这个设计有很多精心的顺序和结构,但当你看不到网格时,它被巧妙地掩盖了。
请注意,即使在底部的自然矩形“位置”区域,设计师也使用了垂直偏移和不规则的背景形状来掩盖任何潜在的块状。
引用Josef Müller-Brockmann,平面设计先驱(和作者平面设计中的网格系统):
网格系统是一种帮助,而不是保证。它允许许多可能的用途,每个设计师都可以寻找适合他个人风格的解决方案。但你必须学会如何使用网格;这是一门需要练习的艺术。
我们对结构、网格和理想比例的渴望在人性中根深蒂固。一个“看起来不太正确”的布局通常可以通过移动元素和在网格上调整它们的大小来修复。所以,如果一个布局不起作用,继续尝试。在某一时刻,所有的碎片将会合在一起,《俄罗斯方块》的升级声音将在你的脑海中响起。你会达到平衡。
平衡
在比喻意义上,概念视觉平衡类似于跷跷板所展示的物理平衡。就像物理对象有重量一样,布局的元素也有重量。如果布局两侧的元素重量相等,它们就会相互平衡。视觉平衡主要有两种形式:对称和不对称。
对称的平衡
对称的平衡,或形式平衡,发生在构图的元素是相同的轴线两侧,如下所示。数字绘画沉思David Lanham的作品,很好地诠释了这个概念。注意男性和女性在位置和比例上是多么相似。即使是阴影背景框也是彼此的镜像。
虽然它可能并不适用于所有的设计和客户,但这种类型的对称被称为水平对称-可以应用于网站布局的内容居中或平衡它在相等的列。动力能源这是一个利用对称来平衡销售和支持这两个目标的有趣例子。请注意下面的截图,他们将屏幕减半,左边是标语/CTA(销售),右边是主要导航(支持)。更值得注意的是,导航列表是屏幕上最大的文本。这是一种非传统的设计——甚至可能不舒服——但我怀疑这是一种减少人工电话和电子邮件支持成本的认真尝试。
另外两种形式的对称平衡在网站设计中不太常见,这是由于媒体的性质。然而,它们通常表现在标志和印刷设计中:
- 左右对称,当一个构图在多个轴上进行平衡时,就会出现这种情况
- 径向对称,当元素围绕一个中心点等间距时,就会发生这种情况
不对称的平衡
不对称的平衡或非正式的平衡,比对称的平衡更抽象(通常在视觉上更有趣)。上面展示了一个不对称平衡的例子。不对称平衡不是布局两侧的镜像,而是包含不同大小、形状、色调或位置的物体。这些对象的排列方式是,尽管它们之间存在差异,但它们平衡了页面的重量。例如,如果你在页面的一边有一个大物体,而在另一边有几个较小的物体,构图仍然可以感觉平衡。
我的朋友杰里米·达蒂(Jeremy Darty)的音乐会海报就是不对称平衡的一个很好的例子。左边大的粉红色火烈鸟的视觉重量被布局右侧较小的火烈鸟和文本块的组合重量所平衡。注意,杰里米还使用了三分法。《Pop Sucks》游戏背后的蓝色云占据了垂直空间的三分之一,水平空间的三分之二。
请看下图中这三颗石头的照片。这可能不是一个特别令人兴奋的画面,但就平衡而言,它是震撼的!如果你用一张纸盖住下面三块石头中的任何一块,整张照片就会感觉不平衡,没有完成。这通常是平衡工作的方式。就好像整个作品都在一个画框里,挂在墙上的一颗钉子上。它只需要在一侧或另一侧施加很大的重量就能使整个画面失去平衡。
不像对称平衡,不对称平衡是万能的,因此,在Web上使用得更多。如果你看一下大多数两栏的网站布局,你会注意到较宽的一栏通常颜色较浅,这一策略为文本和主要内容创造了良好的对比。较小的导航栏通常颜色较深,有某种边界,或以另一种方式突出,以便在布局中创造平衡。
在线邮件服务的登录页面Handwrytten展示如何重新平衡页面,而不需要从根本上改变核心内容。让我们来分析一下。页面上有两个主要的内容区域。
- 在左边,手写的标志,标语和行动呼吁是他们想让你注意到的第一件事。
- 在右边,他们有产品的视觉演示是一封装在信封里的手写信件。这项服务是一个新概念,所以展示实际产品很重要。
他们的问题是,信件和信封都是轻量级的物体(视觉上和物理上),很难与左侧较重的标语/CTA元素竞争。他们需要一些视觉上的重量。
没有必要恐慌。如上图所示,handwritten的设计师在设计中添加了两个元素:
- 他们在这封信上画了一道又粗又黑的边框。
- 他们在信封后面放了一张黑色的“你好”卡片,以增加信封在视觉上的吸引力。
这两个都不是页面内容的关键,但当我把它们拿走时,设计在视觉上变得飘忽不定。
团结
设计理论描述了团结是一幅作品中不同元素相互作用的方式。统一的布局是一个整体,而不是被识别为单独的部分。以下图中的猴子为例。它们相似的形状(更不用说相同的颜色)使它们能够被视为一个群体,而不是四个不同的元素。
尽管现在的问题已经不那么严重了,但是统一是网页设计师一直鄙视HTML框架的众多原因之一。重要的是,统一不仅存在于网页的每个元素中,而且存在于整个网页中。页面本身必须作为一个单元工作。我们可以使用一些方法来实现布局的统一性(除了避免框架):接近性和重复性。
接近
接近是一种明显但经常被忽视的方法,可以使一组对象感觉像一个单一的单元。在布局中将物体紧密地放置在一起,可以创造出一个焦点,从而吸引眼球。看看下面的数字绘画。虽然由看似随机的笔画组合而成,但彼此最接近的五种笔画似乎形成了一个统一的物体。
在开始为元素设置边距和填充时,我们在Web上实践了接近性的概念。例如,当我为网站定义CSS样式规则时,我通常会更改存在于常见HTML元素之间的默认边距,例如标题(h1
,h2
,h3
),段落,方块引用,甚至是图片。通过改变这些值,我可以使元素之间出现或多或少的空间,从而创建组。
如果您查看下面的两列文本,您会注意到它们看起来很相似。唯一的区别是标题的位置。在左边一栏中,“Unkgnome”一词在上下两段之间等距。结果是它看起来更像一个分隔符,而不是下一段的标题。在第二列中,“Gnomenclature”标题被放置在它后面的段落附近。根据接近规则,该标题似乎属于该文本块。
重复
一群鹅,一群鱼,一群狮子。任何时候你把一组相似的物品放在一起,它们就形成了一个组。同样地,重复颜色、形状、纹理或类似的物体有助于将网页设计联系在一起,使它感觉像一个有凝聚力的单位。下面的例子说明了重复。尽管存在其他类似的笔画,但左边的9个红色笔画似乎是一个统一的组,因为它们重复了形状、颜色和纹理。这一组右边的笔画没有重复的图案,所以它们看起来是孤立的,即使附近有其他形状。
无论你是否注意到,重复经常用于网站设计,以统一布局的元素。该概念在未修改的HTML元素中发挥作用的一个例子是项目列表。每个列表项前面的项目符号是一个视觉指示器,表明项目符号项是整体的一部分。重复的图案和纹理也有助于统一设计。看一下截图Dribbble这里是设计师和开发人员展示和分享作品的中心。这种布局包含许多引人注目的元素,但重复的缩略图与视图、评论和点赞图标创造了一种统一的感觉,而导航栏和开放内容区提供了足够的空间来展示所有这些令人敬畏的、独特的设计作品。
强调
与统一紧密相关的是强调或支配的概念。而不是专注于一个设计的各个元素组合在一起,强调就是让一个特定的特征吸引观众的注意力。当你设计一个网页布局时,通常你会在内容或布局本身中找出一个你想要突出的项目。也许是一个供用户按下的按钮,或者是一条供用户阅读的错误消息。实现这种强调的一种方法是使该元素成为焦点。一个焦点是页面上吸引观众眼球的任何元素,而不仅仅是页面整体的一部分或与周围环境融为一体。与统一一样,有一些行之有效的方法来实现焦点。
放置
虽然实际网页设计的限制通常不允许这样做,但构图的直接中心是用户最先看到的点,通常是产生强调的最强位置。一个元素离中心越远,它就越不容易被注意到。在网络上,页面的左上角也往往需要我们这些从左到右阅读(记住许多语言,如希伯来语和阿拉伯语,是从右到左阅读)和从上到下浏览页面的人的大量注意力。
延续
背后的想法延续或流当我们的眼睛开始朝一个方向移动时,它们倾向于继续沿着那条路移动,直到一个更主要的特征出现。下图展示了这种效果。即使底部的斑点更大,因此更容易吸引你的眼球,你的大脑也会不由自主地说:“嘿,看那里,一个箭头!”很快,你就会发现自己盯着那个更小的物体看。
连续性是网页设计师用来统一布局的最常用方法之一。默认情况下,在应用任何样式之前,放在网页上的标题、副本和图像的左边缘在页面左侧形成一条垂直线。额外使用这个概念的一个简单方法是将元素与网格的线对齐。这为你的访问者创造了多条连续的线,让他们的眼睛沿着页面向下看。
下面的示例—类型代理站点的截图Bastarda-是延续的一个很好的例子。每一条曲线,每一个回声都会让你的眼睛向右看,在这种情况下,并没有什么特别有用的原因。事实上,这个图像只是a中的一帧blipvert巴斯塔达用悬停的画面来打击你。非常朋克摇滚的风格。被警告。
隔离
以同样的方式,接近有助于我们在设计中创造统一,隔离促进重点。从周围环境中脱颖而出的物品往往会吸引人们的注意。尽管与伙伴们分开让他很伤心,但下面这只孤独的猴子仍然成为了页面上的焦点。
对比
对比被定义为不同的图形元素并置,是在布局中创建重点的最常用方法。概念很简单:图形元素与其周围环境之间的差异越大,该元素就越突出。对比可以通过颜色(我将在第二章中详细讨论)、大小和形状的差异来创建。
看一下BGL上面是主页。如果有一个特定的链接或按钮,你希望你的访问者点击,它被称为行动呼吁.当你看到上面的设计时,最先吸引你注意力的是什么?对我来说,它是立即购买左边的按钮。这是页面上唯一一个使用暖色的地方——强烈的橙色与平静的蓝色和绿色形成鲜明对比。当然,在暖色的页面上,冷蓝色的CTA会有很高的对比度。
比例
在构图中创造强调的另一种有趣的方式是使用比例。比例是一种设计原则,与物体尺度的差异有关。如果我们把一个物体放在一个比它本身规模小的环境中,这个物体就会比它在现实生活中看起来更大,反之亦然。这种比例上的差异将观众的注意力吸引到物体上,因为它在那个环境中似乎不合适。
在下面的图片中,我把这只悲伤孤独的猴子叠加在曼哈顿的天际线上,以证明我的观点。在颜色的强烈对比和比例的差异之间,你的大脑立即说,“嘿,这不太对,”你一直盯着猴子,直到你强迫自己把目光移开。
的吉姆·比姆尼日利亚网站设置了一个相当传统的酒吧场景,但它的英雄镜头有点不正统。瓶子被放大,摇摇欲坠的角度,突破了英雄面板的边界。再往下看,两个杯子是从完全不同的角度拍摄的,所有这些都是为了给页面增添一些能量和生命。
在你的设计中创造重点不仅仅是让你的行动号召脱颖而出的关键。这也是我们如何在页面中移动观众的眼睛。通过给元素一个降序的强调,你可以为访问者建议一个顺序。如果在构建网站时牢记这一点,就可以使用语义HTML标记和CSS来强调所创建的重点。例如,通过匹配h1
来编辑
标题标签具有各自的视觉强调级别,可以为搜索引擎和视力受损的访问者提供页面中视觉上重要的内容的类似视图。
接下来,我们将看看一些经过试验和测试的布局模式,您可以从中获得灵感。
实用的布局
到目前为止,我们谈论的大部分内容都是设计理论。理论是有帮助的,但它只能帮助我们理解为什么在网站设计中一些想法可行,而另一些则行不通。以我的经验,例子和实践更有价值。大多数学术平面设计课程都包括丰富的艺术史和美术课程。这些课程为从艺术的角度理解平面设计提供了一个很好的基础,但是当您将设计带到Web时,它们对您将遇到的具体挑战几乎没有帮助。
巴勃罗·毕加索曾经说过:“我总是在做我不能做的事情,以便我能学会如何去做。“虽然我喜欢在设计新网站时采用这种方法,但重要的是首先要知道你可以做什么。当你放眼互联网,你可以看到布局的可能性是无限的。不过,根据网站的目标,只有少数几种可能性具有良好的设计意义。这就是为什么我们一遍又一遍地看到特定的身份、导航和内容配置。
在本节中,我们将讨论三种最常见的布局,并探讨它们的一些优点和缺点。
左栏导航
左列导航模式可以说是万维网最初15年的默认设计。拖网的web档案你会看到所有早期的雅虎!,AltaVista and Facebook leaned heavily on their left-column navigation. Today, it tends to be reserved for huge, link-heavy enterprise sites like Wikipedia or Craigslist.
在我看来,这种形式仍然存在感觉老式的和静态的-即使在一个明亮的,开放的设计,如海伍德高尔夫网站(如下)-所以我倾向于避开它。但这并不意味着你必须这么做。左栏导航在今天已经很少见了,如果你做对了,它可能会显得很酷很前卫。把东西混在一起总是好的。
说到混合,把左边的那一列放在内容的另一边怎么样?然后你就有了一个右列导航布局。
右列导航
如果您打算将主要内容限制在页面的一侧,那么将其推到左侧,将导航、广告和辅助内容放在右侧是很常见的。将内容优先级置于导航之上是新闻网站(例如Coda下面的例子),社交网络如Reddit,以及具有扩展导航方案的网站无法包含在一个简单的顶部导航中。
最终,决定将导航列放在左边、右边还是其他地方是一个判断,它实际上是关于你必须组织的内容的数量和类型。如果这是一个简单的网站,不需要任何辅助导航,考虑一个狭窄的,无柱式的布局。好的设计往往更多的是你去掉了什么,而不是你加入了什么。
如果你确实需要一个次要的列,只要记住内容是你的访问者在那里的目的——他们首先在左边寻找它。
三列的导航
如果你在21世纪初关注网页设计,你可能还记得对“圣杯式布局) -一个可缩放的三栏布局,具有自均衡的列高。世界上的一些最优秀的CSS专家花了成千上万个小时,试图迫使支持原始CSS的浏览器重新生成原本很容易用HTML表完成的布局。这就像让美国宇航局的所有人都去找你家里的钥匙一样。谢谢,但是为什么这么难!?!
讽刺的是,今天我们有很多优雅的CSSFlexbox而且网格圣杯的解决方案,但使用的机会却少得多。即使是像CNN、纽约时报和BBC这样的大型新闻网站,也更喜欢使用宽标题导航,然后在下面放上一小块内容卡片。现在主要是社交媒体网站推特而且脸谱网举着经典的三柱旗帜前进。
一个值得注意的例外是培训应用程序的仪表盘Strava(你可能需要登录才能看到下图中的视图)。作为一个经常使用Strava的用户,我相信这是如何以一种分层的、易于理解的、有吸引力的方式呈现海量数据的最好例子之一。如果你正在处理一个复杂的UI问题,你可以从这些家伙那里学到很多东西。
无导航杂志风格
如果你正在读这段话,我猜你可能不是直接从目录中读到的。在网络上,我们更倾向于以目标为导向,消费零碎的信息。网站导航让我们快速、高效……但也不稳定。如果你不想让你的访问者跳转到另一个页面怎么办?如果你需要传达的信息最好是作为一个整体来消费,比如一本书或杂志文章?如果是这样的话,为什么还要包含导航呢?这是杂志网站喜欢的方法Typographica,全新的,创造性的审查看看他们的艺术指导文章。虽然从技术上讲,你会在Typographica上找到一行文本链接导航,但它非常低调,几乎看不见。
基本的极简主义
与无导航的杂志风格分享哲学方法,许多设计师专注于一个任务,并简单地清除所有其他干扰。极简主义设计专注于讲述一个尖锐的导演故事,而不是为用户提供大量的选择。你可以把这种设计方法看作是“垂直幻灯片”或Powerpoint风格。旧金山营销公司事了当然采用了这种方法,将自己限制在大字体和简单颜色的紧凑信息上。
无论如何,极简主义都不是一种新的设计趋势——即使在网络上也是如此。在艺术界,20世纪六七十年代的极简主义运动是对抽象表现主义过度自我表达时代的一种反动。类似地,最近Web上极简主义和单页设计的激增是对过度交互的Web 2.0时代的一种反应。它试图平衡社交媒体的喧嚣和相当于一个和平的café或安静的美术馆。
打破模式布局
我创建这个类别是为了包含原始的网页布局想法,这些想法不能轻易地硬塞进任何早期的分类中。
茱莉亚Zass是一位才华横溢的插画家,她只是需要一种方式来呈现和存档她的“每天画”项目。她简洁的用户界面主要是几个大日历,上面点缀着缩略图。它不仅有一个吸引人的布局,而且有助于一目了然地解释项目——一个优雅的设计问题的解决方案。
“优雅”是绝对的不这个词用来形容PoolsideFM,该网站将90年代阳光明媚的音乐与不受欢迎的傻傻的90年代视频剪辑结合在一起Mac OS 8接口。用户界面允许你打开和关闭桌面应用程序,就像你在使用一台旧的苹果电脑一样。当然,这是半开玩笑的,我第一次装它的时候笑了。但问题是:人们很难把视线从这些视频片段上移开。20分钟后我的应用程序还开着。这是一个成功的UI吗?也许吧。毫无疑问,它是独特的、古怪的和有趣的。
我怀疑我们正在寻找下一个大的设计趋势,但这个激进的原创UI做了它的工作!
网络趋势
每年都有新技术出现。许多技术出现后很快就消失了,而少数技术通过采用新的浏览器功能或新的脚本突破而成为可靠的标准化技术。让我们看几个。
视频的背景
根据浏览器的大小播放全屏视频背景的能力已经有一段时间了,这当然使我们有能力将100年的电影和电视技术应用到网络上。
还需要考虑带宽问题。谷歌的WebM格式提供了令人印象深刻的视频压缩,但并不是所有浏览器都支持,因此您需要为Safari提供效率较低的备用方案。
还有一个问题是自动播放视频是否是你的用户想要的。高峰时段地铁通勤者在浏览运动鞋时,是否期望或希望看到自动播放的网球鞋视频?这是一个问题"罗杰的他在他的英雄面板中使用了一些经过精心编辑的视频循环。
砌体布局
另一个公认的趋势是砌筑UI模式。砌体布局将内容堆叠成等宽的列,而忽略了行的概念。砌体特别适合将随机大小的图像集合排列成整齐,易于浏览的格式。而Pinterest可能是砖石公司的代表人物,插画家克里斯蒂安Hammerstad(上图)显示了它为艺术作品和摄影提供了多么好的展示空间。
视差滚动
2011年左右,视差滚动开始出现在浏览器中,几年后,它就席卷了整个网络。值得庆幸的是,如今它的部署更加周到了。这个概念使用以不同相对速度滚动的堆叠层,在视口中创造深度的错觉。Coros.net如上图所示,是视差滚动的一个很好的例子。
找到灵感
因为左列、右列和三列布局配置是大多数网页设计的基础,所以没有必要拘泥于这些布局。已经创建了大量的设计展示和设计模式网站来展示新的和创新的想法,这些想法可能会帮助您跳出框框思考,包括下面列出的那些(仅举几个例子)。
- Awwwards是一个经过精心策划的画廊,由一个活跃和知识渊博的社区支持的新网站和应用程序设计。被提名者的质量通常很高——除了偶尔出现的可疑赌场网站。
- 一页爱擅长展示有趣的单页网站设计。
- 欣赏网络使用一个易于扫描的布局,把焦点放在三到四个新推出的网站,每周。总是值得一看。
- Designspiration持续策划各种设计主题的画廊,从排版到摄影,海报设计,信息图和应用程序设计。
- OKMonk是一个相对较新的但令人印象深刻的网站,自称为“高质量UI/UX设计资源目录”。在排版、工具、模板等方面,你总是有一个找到新想法的好机会。
- 灵感网格,虽然不是严格关注网页/应用程序设计,但它会寻找引人注目的排版、摄影和平面设计的例子,这些例子会激发你自己的新想法。
使用停尸房文件
我知道你在想什么:“太好了,我有一堆图库和模式库要看。现在怎么办呢?”我的第一个平面设计教授教我的最有用的技巧之一是创建一个停尸房的文件每当我为一个大项目收集灵感时。这个概念相当简单:如果你正在做一个涉及火车的插图或营销项目,你可以把你能找到的任何可能给你灵感的东西剪下来打印出来,并把它们都放在一个文件夹里。它对你当前的项目有帮助,如果你需要做另一个涉及火车的项目,你会有很多灵感。
停尸房档案的想法我几年前才想起来。我正在寻找一个我在最喜欢的画廊网站上看到的网站,但我不记得网站的名称或地址。毫无疑问,能接触到很多鼓舞人心的资源是很好的,但如果你找不到你想要的具体例子,它们就没有用了。从那时起,我开始创建自己的数字太平间文件。当我寻找灵感的时候,有一个网站设计库,我可以看看,这是一个方便的资源。
为你自己的停尸房文件截屏
- 选择显示要保存为截图的页面的浏览器窗口。
- 复制浏览器窗口的截图到剪贴板:
- 在PC上,按Alt+屏幕打印或者使用Windows中的本地剪切工具抓取屏幕的一部分。在Mac上,按转变+命令+4,然后空间把光标变成相机。然后按住Ctrl,并单击浏览器窗口。
- 此时,剪贴板中应该有浏览器窗口的截图。在您最喜欢的图形程序或文档编辑器中打开一个新文档,并粘贴截图。
- 保存您的图像或文档。
响应设计
如果不讨论设计如何在不同的屏幕上显示,我们就无法真正讨论布局。响应式设计使我们能够设计出不仅适用于手机、平板电脑和台式机,还适用于电视、冰箱和AR眼镜的设计。在响应式设计诞生之前,为移动设备构建网站意味着为更小的屏幕尺寸设计独立的网站——“m点”网站的短暂时代。伊桑·马科特2010年的文章是第一个认真描述一个过程,允许我们构建一个单一的应用程序,在所有设备上看起来都是原生的。随着移动技术的不断发展,我们有理由相信至少有一半的用户是移动用户。任何组织都不能忽视它一半的听众。
独立的手机网站还存在吗?
有趣的是,到2020年,Twitter (mobile.twitter.com)和Facebook (m.facebook.com)仍然将其移动流量重定向到单独的移动网站。然而,它们仍然是互联网巨头中的例外,从亚马逊(Amazon)到微软(Microsoft)、eBay、Instagram和Spotify,所有公司都选择构建一个从头开始响应的统一web应用程序。
屏幕分辨率
让我们先看看屏幕分辨率的当前状态。在过去的20年里,屏幕的分辨率和物理尺寸发生了巨大的变化。
让我们来看看上图中一些有趣的数字:
- 在21世纪初,我们的工作要简单得多,当时两种屏幕尺寸占据了90%的浏览器市场。
- 直到2009年左右,高分辨率屏幕呈现爆炸式增长,当时iOS和Android的崛起开始将大量用户转移到移动设备上。
- 低分辨率屏幕(如下
1024 px
在过去20年的大部分时间里,手机销量一直在急剧下降,但最近我们看到了反弹——可能是由于分辨率较低的手机。 - W3Schools强烈地迎合了开发人员,所以他们的流量可能比一般网站更以桌面为中心。
值得注意的是,许多使用较大显示器的用户往往不会最大化浏览器窗口,因此他们可以看到正在运行的其他应用程序。
@media查询如何工作?
响应式设计使用CSS来控制根据显示规则的设备的屏幕大小应用哪些规则。其中一种方法是媒体查询.站点被指示确定设备的屏幕分辨率。在样式表中,创建断点,用于根据设备的屏幕宽度指定元素的大小和结构。这些断点是您希望针对的不同屏幕尺寸的像素宽度范围。例如,您可以为移动设备设置断点0 px
来568 px
.设置这个特殊断点的CSS看起来像这样:
@media只有屏幕而且(min-device-width:320px)而且(max-device-width:568px){...}
然后,您可以将下一个断点设置为适合大多数平板电脑设备的范围,然后是台式机。使用断点和媒体查询的优点是可以设置任意多的断点。
事实上,响应式设计的主题太深奥了,不适合本书的范围,所以如果你想深入了解技术方面的内容,下面是你的阅读清单:
- 开创性的"响应式网页设计伊森·马科特的文章
- 快速开始响应式网页设计,第二版克里斯·沃德
- 响应设计作者:John Rhea
然而,让我们接下来看看响应式网页设计的纯设计考虑因素。
响应式网页设计原则
设计人员应该如何设计响应式应用程序?
始终以“移动为先”设计
几乎所有最早的响应式网站都是“桌面优先”的设计。这意味着开发人员通常采用他们现有的、功能齐全的桌面站点,然后使用CSS@media
查询添加更多CSS当浏览器检测到屏幕很小时。这是可以理解的,但不是一个很好的经历。试图通过添加更多东西来简化任何东西的想法很少是成功的好方法。
手机第一将布局的默认视图设计为简单、快速加载、移动友好的设计,然后使用的原则是什么@media
只有在浏览器条件允许的情况下,才可以在更丰富、更重的页面元素上添加查询。这不仅从屏幕大小的角度来看是合理的,而且从移动带宽限制的角度来看也是合理的。
不要仅仅因为元素在桌面视图中就把它们塞到移动视图中
在Nixon.com例如下面的例子,你会注意到他们没有呈现“H”2移动视图中的标志。这并不是因为它没有价值。由回收的海洋垃圾制成的袋子是一个很好的卖点。问题是,把它塞到移动视图中会损害其他一切:
- 手表被向下推,离开屏幕
- 袋子的图形变得更加模糊
- “商店收藏”按钮有更多的视觉竞争
尼克松已经足够务实,他意识到硬塞到手机设计中并不是一个全面的胜利。
SVG是你最好的朋友
可缩放矢量图形(svg)可以在任何现代浏览器中渲染,并且可以放大或缩小到任何尺寸而不损失图像质量,因此单个图形可以在所有屏幕尺寸下工作。今天,像Sketch、Figma、Illustrator、Affinity Designer和Adobe XD这样的应用程序都可以生成漂亮的svg,所以在实际的设计中几乎没有理由不使用这种格式。即使你的软件预算有限,四四方方的SVG拥有一些甚至连Sketch或Figma都无法提供的功能——只要9美元。
所有SVG文件都很小吗?
顾名思义,SVG主要是一种矢量格式,它根据数学和几何图形创建图像,而不是像素网格(例如JPEG和PNG)。这可能是一种非常有效的方法来覆盖大面积的图像。但是,可以将PNG和JPEG图形导入SVG。虽然这有时很有用,但您也引入了所有位图像素的自然文件大小问题和缩放限制。
响应框架
如果您对从头开始编写自己的响应式布局不感兴趣,那么最安全的选择是采用已建立的响应式框架之一—foundation或Bootstrap。
基金会如下所示,是Zurb开发的一个移动框架,包含了大量的web开发功能。它目前大约有60KB的CSS和84KB的JavaScript,但可以通过删除不需要的组件来大幅削减。稍后,如果您需要添加额外的功能,如响应式导航菜单、图像滑块、手风琴菜单、验证过的表单、按钮、模型弹出窗口、面板、工具提示、进度条或响应式表,您知道组件将是响应式的。
它还有一个很好的功能,可以让你快速生成工作原型。
引导如下所示,是另一个正在争夺响应框架首选的第一名的框架。就像Foundation一样,Bootstrap有许多自己的内置组件,允许您快速创建结构良好的移动优先网站。Bootstrap有许多与Foundation相当的集成特性。使用Bootstrap,你可以创建巨型屏幕、面板、井、导航条、进度条、下拉菜单、徽章、警报、工具提示、弹出窗口、选项卡、旋转木马等等。Bootstrap还集成了glyphicons,一个与框架一起使用的嵌入式字体库。
人们喜欢Foundation和Bootstrap的主要原因是它们是高度可定制的。对于不使用的组件,不需要下载JavaScript文件,甚至不需要包含JavaScript文件。只需单击与所需组件对应的复选框,并保留不需要的复选框。一旦你做出了选择,Foundation和Bootstrap可以将它们编译成自定义下载。它们基本上承担了编译web开发项目组件的所有艰苦工作。
随着开发人员热衷于创建尽可能精简的网站,使用最少的JavaScript和最小的文件大小,很容易看出为什么这种方法如此受欢迎。
响应式网页设计出现的一个问题是,传统的导航菜单在移动设备上的工作方式并不总是与在桌面屏幕上的工作方式相同。当没有足够的屏幕空间时,事情就会变得混乱。被广泛采用的解决方案是手机菜单或“汉堡”菜单。这是一个垂直堆叠的三行图标,如下图的右上角所示,它表示一个可展开的菜单,仅在点击图标时可用。然后,菜单内容以覆盖的形式出现在网站内容的顶部。
上面显示的菜单是Foundation菜单在桌面上的样子。在移动设备(如手机或平板电脑)上,菜单会折叠,直到您与它进行交互,如下面的示例所示。
项目:垃圾贩子
为了让你了解我们正在谈论的主要设计概念,有一个现实世界的项目来应用它们是很有帮助的。对于这本书,这个项目将是“垃圾贩子”。我的搭档崔西是一名摄影师兼数字艺术家,她希望创建一个简单、有吸引力的画廊网站来展示和营销她的作品。显然会有大量的图像,我们不希望它分散注意力,但网站需要有吸引力,令人难忘和专业。她的视觉风格是抽象现代和流行艺术的融合,所以我们需要在设计中尊重这一点。
资产
从盘点开始总是好的,这样可以帮助你了解自己的优点、缺点以及你目前缺少的东西。在项目之初我有:
- 工作标志
- 25+艺术作品
- 100 +照片
目前,我们还没有任何书面的支持内容,所以我需要与设计并行进行。
需求
看看需求,我认为我们有四种基本的页面类型:
- 登陆/主页
- 一个图库页面,显示大量的工作
- 展示单个产品的产品页面
- 实用程序页面,用于提供关于我们、联系方式和隐私等信息
我们还将拥有通往Instagram和购物车的外部路径。随着项目的发展,情况可能会发生变化,但我们将从这个站点地图开始。
网站地图
选择一个UI设计工具
这本书的第一版(出版于2005年)侧重于使用Adobe Photoshop进行大多数设计任务。虽然Photoshop是一个很棒的照片编辑器,但UI设计已经转向了更专业的工具。我主要讲三点:
这些应用程序中的每一个都允许您创建可重用的应用程序符号(或组件在Figma中),它允许您基于单个父组件生成子组件。对父组件所做的更改会自动传递到所有子组件。这非常适合创建线框设计所需的通用接口单元。
确实有许多优秀的专业线框图工具,例如Balsamiq,Moqups而且HotGloo.当然可以看看它们,但除非你每周大部分时间都花在线框图上,否则我怀疑你的大部分线框图需求将由上面列出的通用编辑器之一来满足。
我非常支持Figma并将使用它的网站地图(上图),线框图,以及完成的垃圾贩子设计。
线框图
话虽如此,我们不在我们的例子中,我们将使用12列布局。相反,我们将稍微改变一下,并围绕五栏布局进行设计。我们为什么要这么做?
我发现奇数列布局通常会有额外的能量。您可以通过比较下面的四栏和五栏布局来了解这一点。偶数列可以如此均匀地平衡,以至于它们缺乏自然的流动和移动。
相比之下,五栏布局似乎像树干一样自然地“悬挂”在它的中心栏上。中间的列通常是进入布局的最简单的路径,我想在这个设计中使用这种自然的流动。五栏布局也可以分解成几种有用的变体:4-1、3-2、2-3和1-4。
下面是主页和产品页面的基本线框图,包括一个移动渲染。
主页要完成的任务更多,因此必然更复杂。它需要:
- 欢迎和引导用户
- 聚焦最新作品
- 提供其他工作的路径
- 设置视觉风格/色调
产品详细信息页面可以有一个更窄的焦点,所以可以更简单:
- 展示所选作品
- 提供通往少数另类艺术作品的路径
除了呼叫按钮(cta),我倾向于让线框保持单调。我发现在线框中强调cta可以帮助你在以后做布局设计决策时牢记它们。
这些就是我们要充实的骨头。我们接下来要考虑的是将要使用的调色板。所以在下一章,我们将讨论颜色。