我总是在寻找灵感，寻找打破常规的卓越设计。这篇文章是关于独特的布局方案；这意味着我将谈论八个不同的网站，这几个网站以独特的方式展示了一般性的东西。我们将从产品展示，到给网站加入个人和人类元素，来探讨独特的布局方案。

1.哈佛大学改造了臭名昭著的传送门

       哈佛大学设计学院网站有一种独特的靠近导航的方法。当你第一次登录首页时，有一个视觉显示的导航。当然，每个单独的链接并没有在这里表示，只有几个关键的。很多网站都在主页的顶部有到更多的重要页面的链接；这就是一个给我们带来传送门的例子。但是，我还没有看过这样展示的。导航或许很小，但在前面和中间。更重要的是，它看起来就像属于那里。这很特别。

       左边的图像彼此重叠，但是你仍能看清有多少。图像和左侧的标题之间也有明确关系。图像相对于左侧的项目旋转。然而，在任何给定时间，你知道什么信息对你是有用的。就像哈佛设计学院创造了一个改进版本的传送门，这本就应在第一位。在这个设计决策中，不仅可用性被认真考虑，布局也是独特的。这两个因素的结合，产生了一个很棒的视觉设计。

2.TRA脱离网格

       很显然，TRA的网站使用了非传统的布局。这个网站，总的来说是很小的。他们也使用了反色方案，背景是黑的，文本是白的。这个配色方案几乎一定是一个让人惊叹的因素。然而，我们要讨论的是TRA的网站布局。让我们从主页开始：首页上有少量文字，其中大部分与与背景图片至少有一点重叠，除了“我们了解的人”部分下的段落副本。该副本被特别地对齐以脱离图像。它是不同的、独特的，也是很明显的。

       关于页面，对网格有更多的遵循和使用。但是，网格仍然是不规则的。似乎“About”页面的每个部分都有自己的网格。页面最吸引我的是网页从左上角剪出的图片。它就是和什么都不搭调。当然，这就让我很好奇。原来图像竟是一个画廊-你必须点击它打开图像。这是一个放大布局的聪明方式；有心去探究的人会得到一堆图像的奖励。不关心的人，也没有亏太多。这是个有趣的复活节彩蛋。

3.在一个固定页面中可以滚动鞋子照片

       这个独特布局方案是关于一个线上鞋子零售商。Feit的产品页很亮眼。首先，设计利用了屏幕的全宽和高度。这意味着屏幕的每个区域都用于特定目的。第二，网站简单、简洁、干净。这说明了即使使用了全屏幕来设计，也不乱。这很好，因为现在大量的设计依赖留白来使网页看起来干净、轻快。

       这个特定产品页面给我印象最深的是布局分割的方式。页面被很明确地划分为三个不同部分。首先，左侧是导航，这很标准，没什么特别的。然后右侧是产品详情。左侧的导航和右侧的详情都是固定在屏幕上的。但是，最后中间图片部分，充满了可以滚动的照片。我觉得这是个很妙的方案，因为不常见。

       通常，如果有一个大的产品照片列表，关于产品的信息就会随着照片滚动上去。在这里，当我向下滚动照片时仍然能看到产品的名称和描述，仍然能看到它的不同颜色并访问更多的信息，如关于材料的详情，而无需向上向下滚动。总之，这是对一个潜在买家来说的无缝体验。

4.一目了然展示产品多面图

       这里我们有另一个产品页面和另一种展示产品的方式。哈，我们还有另一个鞋的例子！Afuar的网页也有独特的展示方式。这次鞋子在页面顶部以不同的画面展示。这实际上是轮播UI元素的一部分。然而，这里的可用性不是个大问题。对于新手，默认会在桌面或笔记本屏幕尺寸上有三张图片。默认图片都有相同的背景，产生好看且无缝的展示。如果用户没有意识到图像是轮播的一部分，他们至少在电脑上看到三个不同的产品图片。对于像平板一样的小屏幕，默认显示两张图，这也很不错。总之，这里的些产品展示是个独特的设计方案。

5.OPENDOOR炫耀他们的人

       我觉得网络是一个没有人情味的地方，我们在这儿不常看到人类；真正的人都在应用程序、产品、企业等的背后。我一直努力在我的设计中加入人类元素。我可以看到，Opendoor想做同样的事。在他们的主页大约下拉一半，一个部分叫“我们支持你。”应该想要解释说，Opendoor公司后有真正的人，帮助客户的每一步。现在，Opendoor本可以就放下这句话，但相反，他们放了公司其中一个员工的大照片。

       这部分有很少的文本。相反，照片和脸是较大部分。我甚至会说，照片以100%积极的方式让这部分很给力。如果这个照片是缩略图或一个头像，效果就不存在了。如果照片是副本旁边的中等大小正方形（例如至少300×300像素），效果也不一样。选择用Mark这张友好脸庞的大图片是一个好的示意; 不仅这个设计决策提供了一个人性化和个性化的设计元素，它也很有创意。没有这张照片，对用户不会有个人影响。没有这种特定的布局，这部分将有一个完全不同的情感效果。

6.UX FLOW展示一个小动画可以走很久

       独特布局方案的下一个例子得用到动画。如果你看看UX Flow的主页，向下滚一点，你可能会注意到一个部分背景里的动画。实话说，没有什么复杂的，但它很独特。背景不随你在网页上滚动而缓慢移入。要说不同的话，在过去几年里，我们看到不同的元素从一个部分飞入或随你的滚动而出，但是，似乎没有许多背景动画，除了视差法。一个重要的原因是背景定义了一个部分，而且，虽然这不是什么疯狂的动画，它仍然令人印象深刻。

       不是一切令人印象深刻的东西都需要加粗、喧闹和令人讨厌。有时，像一个小而快速的简单动画这样细微的东西，足以让用户产生独特的体验。这绝对是那些情况之一。另一件要注意的事情是，动画发生的部分本身没有特定的布局。没关系; 从一个部分到下个部分的过渡是显而易见的，即使它不是动画结束布局，也仍然是布局的一部分。

7.TED TODD综合地图

       Ted Todd网站的视觉和整体用户体验设计很优秀。为了本文目的，我想说说Ted Todd在网页上使用位置和地图的方式。他们的首页底部，有一个部分专门展示公司在佛罗里达州不同办公地点。这一部分是惊人的，有多个原因。首先，这部分以独特的方式布局，提供了一个极佳的设计方案。这一部分最明显的一点是右边的佛罗里达州的光线形状。有许多点的佛罗里达州的视觉效果，是表明公司业务范围的绝佳方式。他们不只说了他们在佛罗里达州，这个设计向你说明了确切位置。这是一个易懂的显示效果，也是一种极佳的方式。

       这一部分的下个重要的是点。他们实际上是可以互动的。当你将鼠标悬停在它们上面时，你会得到Ted Todd保险办公室所在的城镇或城市的名称。但是，如果你点击它，整个部分向左移动，留出空间来显示办公室的详细信息。你还可以获取办公室的电话号码、地址、营业时间和员工名单。我喜欢这个设计方案，因为它让用户能快速导航到他们附近的位置。它在视觉上是更有趣和独特的表示，和在标题“我们的佛罗里达州的办公地点”下堆满信息的页面相比，你觉得呢？

原作者：Paula Borowska

原文地址：http://www.webdesignerdepot.com/2017/02/7-unique-design-decisions/