UI.

设计=情绪+可用性

杰森马克 经过 杰森马克  |  可能。 23,2013

虽然美术是一个主观领域,但是图形设计在其基础上具有更具公式化。有效的设计应该让人 觉得某种方式采取一定的行动。在本文中,我想分享重力开关 网络设计原则 我们在背后思考。

这些规则是:首先定义目标;专注于用户第二;情感设计;遵循视觉设计规则;构建清晰的视觉层次结构;始终如一;打破规则(必要时);不要过度使用gimmicks;最后测试,测量& improve.

 

1.首先定义目标

我打赌你以为我会说“focus on users first”, that’s what 最多 人们 说。 忘记,让我们从你的目标开始。使用头脑风暴会话开始每个网站设计项目,概述清晰,现实的网站目标,它加强了您的 商业 Objec.tives。

更好地说明这让我们看看亚马逊。他们的目标是最大限度地提高产品销售。通过“upselling”和“交叉销售”,他们可以最大限度地提高每个用户的购买力,但在这方面取得成功 慢下来 买入过程。与许多竞争对手不同,亚马逊在搜索结果中没有“立即购买”按钮。在购买之前,用户必须访问更多页面(具有潜在的upsells)。这是网站设计如何满足明确业务目标的完美示例。

买 - 现在 - 示例

大多数现代电子商务网站已从搜索结果中删除了“立即购买”按钮,虽然有些砖头和砂浆网点仍然存在。 

 

2.专注于用户第二

随着你明确的目标,你需要 定义和优先顺序用户。要尽可能具体。要问的一些问题的例子是:

  • 男性与女性崩溃?
  • 教育程度?
  • 地点在国家?
  • 相关爱好?
  • 收入支架?
  • 谁驾驶孩子们’产品购买?孩子们?父母?祖父母?

关键是设计师应该了解用户,以便他们可以确保他们的设计唐’T块密钥使用路径。

 

3.设计情绪

确保你明白 你的品牌应该是什么情绪vey。 头脑风暴。问问题。获取协议。最重要的是,在返回客户时重点关注这些情绪。永远不要问你的客户'喜欢“设计。当您提供设计时,您应该询问“其中哪一个让您觉得最专业的问题?”或者“当你比较这两个设计时,你会看到这个更现代化,而这个是更具活力的。那些对你来说都很重要的情绪,现在你在视觉上看到他们,你认为你是最重要的情感,你可以向你的目标受众展示?“

情绪 

哪些组织很有趣?放松?创新的?忙碌的?真实的? (由@Jessicashiner和Christine Mark设计)

 

4.遵循视觉设计规则

网站用户有意识地和下意识地使用许多小元素,以决定他们是否要相信网站。最重要的是:

  • 裁剪: 选择照片只有一半的战斗,裁剪照片是什么制作或打破页面布局。
  • 负面空间: 仔细注意边缘,填充和线路高度是看起来像纽约时报与高中时代之间的区别。
  • 字体: 每个人都喜欢选择字体,但是一位伟大的设计师可以快速发现专业字体并克制网站上的字体数量为1-2(不计算通常是自己的字体的徽标)。
  • 颜色: 颜色是设计师有效使用的最难的东西之一。挑选一个良好的调色板有很多规则,而在线使用它很诱人 彩色调色板发电机,花时间设计自己的调色板。
  • 布局: 创建良好的视觉页面“Flow”,以便用户的眼睛会在您希望它们上去的位置,没有其他元素在视觉上覆盖目标。

 

5.构建清晰的视觉层次结构

网站游客撇去。他们没有阅读。抓住他们的注意力,让他们到达最重要的信息,明确定义, 深思熟虑的视觉层次结构。一个深思熟虑的设计 - 网站> page >部分 - 通过您想要的方式通过页面引导用户。用户应该能够在您的页面上浏览并在瞬间将其理解。

看看文章的以下示例,并注意到您的眼睛难以告诉页面的困难,或者文章开始的位置!

坏视觉层次结构 

下面是我通过改变大约十几行CSS来制作的模型,以通过以下方式在此页面上创建更清晰的视觉层次结构:

  1. 文章标题应该是页面上最突出的元素。它目前是一个较小的字体大小,而不是页面上的页面!所以我增加了物品标题的大小,并减少了标题的大小。 
  2. 页面上的前进的页面也与视觉上的标题的内容断开连接,所以我还拧紧标题下方的间距,同时将空间留下来让用户知道它是它下面的段落的标题。
  3. 我还将小图像移动到标题的右侧而不是左侧,以便当用户扫描页面的左侧以定向本身时,文章标题在他们的视野中。
  4. 我删除了蓝色模板上的边框和背景课程,因此不再与标题竞争并删除了顶部边距。已经有一个阶级来制作灰色,在这种情况下工作正常。
  5. 我还删除了分散注意力的文本和图像,突出显示这是一个重印文章以及一些空段落和<hr> tags.
良好的视觉层次结构 

假设这是本页的关键部分,我故意留下所有广告。

 

6.保持一致

不要让你的用户混淆。链接应保持一致和不同。如果您选择使用整个图标,照片和插图,请确保它们看起来并觉得它们属于凝聚力集。 不一致会分散您的用户的注意力 并掩盖你的信息。大学教师’使用超过3个字体 - 最好是如果他们最好’在同一个家庭中。限制在5-6种颜色(注意: 标识 可以是一个不同的字体,经常 应该 be).

 

7.打破规则(必要时)

如果特别有些东西 独特或重要的 您需要突出显示,您可能需要“打破规则”。您可以使用一个或两个对比颜色来帮助元素脱颖而出。例如,下面的英国网站通过将这种较大的元素与彩色的颜色进行更大的元素来强调税率。

增值税 

当人们访问信息页面时 增值税税, Gov.uk的设计师确保大多数人需要的信息是前沿和中心。

 

8.不要过度使用gimmicks

让你的设计有趣,但是 确保这些元素支持 你想要在网站上完成的事情。例如 苏兹 网站很漂亮,在移动时看起来和精彩,但是当我在桌面电脑上访问它时,我丢失了。事实证明导航是隐藏的,直到您开始滚动,不幸的是将注意页面的底部带到页面的底部。结果,我甚至没有注意到顶部出现的细微导航。在甚至意识到顶部有(最终)导航之前,我滚动了大部分路径前往底部。 “隐藏”导航是一种整洁的效果,但“设计”阻止了我采取了预期的行动。最后,它传达了一个令人困惑的,邋的品牌形象。

将inze与本文在此处发生的事情进行比较 网页设计师仓库 当您滚动桌面计算机上的链接时。我们有一个整洁的效果,但为了噱头,它不会为用户创造“屏障”。它也优雅地降级,因此它不会破坏移动或旧浏览器。

 

9.测试。措施。提升

网站演变。灵活性和适应性设计。收集和分析正在进行的测试数据将推动不断的改进。请记住,这完全是关于创建符合您目标的设计。

TCI-示例

通过仔细测量原始着陆页面(左)的一系列次要设计变更的结果,我们提出了一种新的设计(右),增加了60%的注册百分比!

 

记住

有效的图形设计需要在情感上将用户与品牌联系起来,同时让他们做你想要的事情。它 能够 be done.

 

您是否同意这些设计规则?你会再增加了吗?让我们在评论中了解您的观点。

特色图片/缩略图, 情绪形象 via Shutterstock.