网页设计 on Victor42

使用无序列表的7项注意

hi@victor42.work (Victor42) — Sun, 16 Apr 2017 00:18:42 +0000

[国外设计第168期]

摘要：小圆点有助于分割大段文字，使得复杂的文章和博客更容易消化，突出关键信息。

有时候，最好的信息展现方式就是无序列表。无序列表能吸引注意、便于浏览、简化文本，并且表达出项目之间的关系。

网站不是一个适合长篇大论的地方。相比之下，网站的读者更喜欢文案以某种易于浏览的形式组织起来，能让他们轻松跳过大段文字，直达自己感兴趣的部分。

有许多种网页文本格式的技巧，能够分割大段内容。无序列表和加粗、缩进、行间距、彩色文字，都是辅助网页内容高效阅读的重要手段。

区区几个小圆点能够吸引视线，并且让复杂的概念易于理解。小圆点能让读者感知到内容的简明和重要。这并不奇怪，在可用性研究中，我们观察到读者对无序列表满怀热情。网页的读者希望快速消化内容。

我们可以对比下面这两个版本。你会发现第2个版本中的内容更易阅读。这是因为它以纵向列表的形式展现。相比之下，在第1个版本中，读者只能在结构不太清晰的段落中寻找。

版本1

我们的Spa度假套餐包含了2晚住宿，2次50分钟的任选spa项目，1顿两人份的上门早餐，到达时还有礼品篮相赠。

版本2

我们的Spa度假套餐包含:

2晚住宿
2次50分钟的任选spa项目
1顿两人份的上门早餐
到达时赠送礼品篮

不必担心版本2占了更大的纵向版面。如果（或者说除非）用户对内容感兴趣，随着视线的下移，他们完全不介意往下滚动。事实上，相比那些用长篇大论吓退用户的网站，恰当地使用了无序列表的网站，会更加亲切易懂，用户也会更有动力向下滚动。

使用无序列表的7条建议

1. 每一项的长度要比较接近

无序列表在展示相关内容时会达到最佳效果。其中的每一项都应该有同等的重要性。可能的话，让每一项的长度保持接近，就不会有明显的主次之分。保持统一的外观能让眼睛更舒适，使列表显得不那么杂乱。

错误用法

请带上以下物品参加露营：

睡袋
去瀑布徒步旅行时要用到的洗浴套件
防晒霜
防水夹克应对可能的雨天。我们可能会遇到强烈的暴风雨

长度上的差异，使得列表项显得杂乱、不统一。

建议用法

请带上以下物品参加露营：

睡袋
洗浴套件
防晒霜
防水夹克

2. 除非顺序很重要，否则不要使用有序列表

有序列表的使用场合，通常是列表项必须按照某个特定顺序排列，例如程序步骤。或者数量很重要时才能使用，比如前十名的榜单。

如果列表项的顺序和数量不重要，那就不需要数字序号。这么做会使人困惑：我们在用户研究中发现，人们会错误地认为他们必须完成有序列表中的每一项，但其实他们只需要选择其中一项即可。

错误用法

请通过下列任何一种方式联系我们：

在线联系登记表
在线聊天
致电
亲自上门

这些数字序号，让列表项显得好像是要按照顺序步骤来执行，而不是几个独立选项。

建议用法

请通过下列任何一种方式联系我们：

在线联系登记表
在线聊天
致电
亲自上门

3. 在列表项中使用相似的句子结构

每一项都要有统一的措辞风格。多变的措辞影响句子通顺，会阻碍读者阅读（甚至导致困惑）。

用相同的方式组织每一项。确保无序列表的每一项以相同的语法元素开头（例如名词、动词），要么都是词组，要么都是完整的句子。

错误用法

在公园中请遵守以下规则：

将垃圾投入指定的垃圾桶。
巨大噪音会吓坏动物。
应该站在黄色的标记线区域。
保持公园干净，人人有责。

在这个例子中，4条语句都以不同的词语开头。

建议用法

在公园中请遵守以下规则：

将垃圾投入指定的垃圾桶。
不要发出巨大噪音。
站在黄线区域内。
尽量保持公园清洁。

第二个列表的阅读更顺畅，因为每个短语的开头都用了同一类词语——本例中是动词。

4. 避免在每一项开头重复相同的词语

如果可以的话，请省略“一个”、“是”、“这个”这样的词语，去掉每一项开头的重复词语。每个列表项开头的词语有所区分，能让列表更加容易分辨。

错误用法

如何挑选菠萝：

用闻的。它闻起来要甜。
用按的。它应该按下去结实但柔软。
用看的。它最好是金黄色。

建议用法

如何挑选菠萝：

闻。它闻起来要甜。
按。按下去应该结实但柔软。
看。最好是金黄色。

5. 使用清晰的、描述性的句子和词语来说明列表

引语（或者说说无序列表之前的那句话）很重要，因为它让读者知道列表的内容大概是什么，为什么重要。引语不必是完整的句子，也可以和列表的每一项组合成完整有意义的句子。

错误用法

不列颠哥伦比亚省的假期：

徒步旅行
艺术博物馆
在湖上划独木舟

引语（不列颠哥伦比亚的假期）没有充分描述列表。而且，列表中包含了假期要完成的事项，但艺术博物馆并不是一个动作。

建议用法

我们在不列颠哥伦比亚省的假期行程包括：

上山徒步旅行
参观艺术博物馆
在湖上划独木舟

6. 保持格式一致

关于大小写和标点有一些基本准则：

如果列表项是句子，那么每一项的首字母就要大写，并且以句号结尾。
如果列表项是词组，不需要任何标点结尾，也不是一定要首字母大写。但是我们还是建议首字母大写，这样更易于浏览。

错误用法

如果发现霸凌行为：

支持受害者
将事情告知成年人
鼓励受害者向成年人反映
通过表示关心来提供帮助

这些句子没有首字母大写【译者注：当然中文没这个问题】，而且结尾没有标点。

建议用法

如果发现霸凌行为：

支持受害者。
将事情告知成年人。
鼓励受害者向成年人反映。
通过表示关心来提供帮助。

错误用法

你可以通过____来保护环境：

回收纸张和塑料产品。
少用一次性物品。
捐赠旧衣服和闲置物品。
骑车与步行替代开车。

列表项是词组，因此不需要标点符号结尾。

建议用法

你可以通过____来保护环境：

可回收纸张和塑料产品
少用一次性物品
捐赠旧衣服和闲置物品
骑车与步行替代开车

7. 不要滥用无序列表，会导致它们丧失效果

就像所有的视觉设计技巧一样，过度使用都是有害的。如果看到满是小圆点和缩进的页面，你会吓傻的。明智地选择需要强调的内容。（如果你没发现本文中的无序列表是前后对比的案例，你就会觉得有点使用过头了。）

在有3项或更多重要信息时，纵向列表是最好的展示方式。如果项目更少，那就杀鸡用牛刀了，直接放在句子中通常效果更好。

避免嵌套使用列表，这样就很难理解了。如果一定要表现多层级的列表，每一级都要用不同样式的小圆点。

注意

这些只是一般规范。但是每个公司或组织可能会采用不同的格式。如果你的公司在遵循某套风格指南，你应该先了解指南，然后才决定是否遵循以上规范。文案撰写有一个重要的方面，就是在整个文档和网页中保持内容统一格式。

结论

纵向列表吸引视线，能使列表每一项各自独立。因此，它比行内的列表更有效，能让人更有效地浏览、参考和理解关键要点。

原文链接：https://www.nngroup.com/articles/presenting-bulleted-lists/

作者信息：HOA LORANGER Hoa Loranger is VP at Nielsen Norman Group and has worked in user experience for over 15 years. She conducts research worldwide, and presents keynotes and training on best practices for interface design. Hoa has consulted for companies such as Microsoft, HP, Allstate, Samsung, Verizon, and Disney. She authors publications, including a book, Prioritizing Web Usability.

超越平庸：寻找网站失落的灵魂

hi@victor42.work (Victor42) — Sun, 17 Jan 2016 13:28:00 +0000

[国外设计第119期]

**网页设计是否丧失了灵魂？**这是否要归咎于响应式设计呢？我的朋友兼同事Noah Stokes提出了这些问题，不得不说是有点耸人听闻。毕竟，响应式网页不仅能让我们通过日益丰富的联网设备浏览网页，还能感受其乐趣。

作为设计师，我们的首要任务是解决问题，这可能远远超过其他的事情。响应式网页设计是一种绝妙的解决方案，能创造出适应各种设备的虚拟体验。但仍然有许多问题亟待解决，尤其是如何让各种内容都有趣迷人。一页纯文字可以成为一篇优美的博文，一大堆无关联的JPG图片可以成为一部专业的作品集。

然后，问题就变成了：我们能同时实现两者吗？

我们所获得的

毫无疑问，网络已经成为一个美学胜地。基于可靠的网格布局，构建简单迷人的网站，已经成为一种标准。互联网的垦荒已经完成，以框架和活动栅格形式出现的律法与秩序，已经掌管这片土壤，开始了和平的统治。

所有这些都是好事。简单迷人的网站，优势显而易见且丰富：

熟悉，便于用户浏览（操作正确的话）。
原型设计（相对）简单快速。
建站技术的高度标准化（流水线取代了工匠）。
快速布局节省了大量开销（有一定可能会转嫁给消费者）。
严格的栅格布局促进了响应式设计（它严重依赖极简的布局趋势）。

漫步Awwwards这样的网页设计画廊，其中展出的网站，有成百上千个都符合简单迷人的标准。（查看大图）

毫不夸张的说，标准化与其相关技术确有重大意义。无数的个人与小公司从中受益，通过简单迷人（却毫无独特性）的网站，向全世界分享他们的品牌。但是，那只是一方面。

我们所失去的

将个人行为纳入考量，如今的专业网站看起来基本上都很棒。拿一个名不见经传的设计师作品集网站，与十年前最好的设计机构网站相比，你甚至会承认我们在网页设计这件事上，已经做得好太多了。然而，四下看看，很容易得到结论：一切看起来都趋于同化。

是不是设计师都丧失了开拓精神？便捷是否牺牲了创造性？在回答这些问题前，我们先看看是什么致使今天网页设计缺乏多样性。

为何网站看起来都一样

看看如今的网站，同化的背后是什么力量在驱使？应该怪谁？事实证明，并不能简单归咎于某种工具或方法。响应式设计或许推波助澜，但它只是诸多因素之一。下面是一些疑犯。

布局

有限的布局创意，是网站缺乏多样性最主要也最显而易见的原因之一。抽离色彩、动画、视觉差滚动及类似效果之后，你就会注意到一些基本的网页布局原则。有多少网站是在这5种布局上稍作调整而成的？

5种常见的网站布局。（查看大图）

Noah哀叹“到处都是条条框框”，指的就是这个。我们似乎停滞了，独特的布局成为了一种失传的艺术。

响应式网页设计

在以前，你可以确保，所有的网站访客都在用低分辨率的台式电脑屏幕浏览。如今，网站在所有尺寸与分辨率上表现良好，这已不是一种奢侈，而是一种必需。宽度活动、可伸缩的基本栅格系统，使得响应式网页设计比随性的布局更易处理。

框架

网页设计框架或许可以加速设计与开发流程。对许多人而言，它们是建立跨浏览器响应式网页最安全快速的方式。作为奖励，他们还会注意保持内容简略，从按钮到表单，涵盖所有通用元素。Bootstrap和Foundation这类工具有着惊人的人气，导致成千上万的网页设计师在他们每个项目中使用完全相同的代码库、布局、甚至美学风格。

原型工具和设计流程

即使在从零开始的过程中，设计流程也在有意识地抑制创造力。多数原型工具都鼓励、甚至可能迫使你使用标准化的方框元素，严格遵循网格式的布局。

许多原型工具都鼓励使用常规网格布局结构。（查看大图）

高清免费照片与图片

获取优美的免费设计资源真是史无前例地容易。方便与可承受占据了支配地位，设计师们蜂拥向免费照片网站，从一个小小（但在不断增长）的池子中获取相同的资源。

两张免费摄影图片。（查看大图）

在过去的两年中，你看到过多少个网站用了其中某张照片（或者两张）？如果你经常浏览网站，我打赌有几十个。

The Village Style和Jigglist； College Essay Guy和Get Busy Make Money（查看大图）

这还不仅仅是照片，还包括图标、字体、设计模式等等。好的方面是，没有任何预算的设计师也能做出好看的网站；糟糕的是，所有其他设计师也在用同样的资源做着同样的设计。

设计趋势

对于某些设计师而言，“趋势”是一个贬义词。但它不该是贬义词。在20世纪找一个年代，看那十年的设计趋势。你会发现真叫人着迷。它为那个时代赋予了独特的风格与个性，往往能反映出整个文化环境。即使你看不见，它也正发生在你的工作中。你看到与体验到的一切，都在影响你的行为，互联网则前所未有地放大了这种效应。导致许多设计师从相同的资源获取灵感，追逐相同的趋势。

我们设计师

上面列出的每一项工具与资源都极有价值。它们能简化工作，让网页设计与开发的大门向更多人敞开，也为客户省钱。我不会胡乱使用它们，我会精心挑选。如果真要寻找破坏网页设计多样性的元凶，我会举起自己的手，就是我。我觉得不是每个项目都值得进行独特的设计，我要向那些尝试有趣设计的设计师们脱帽致敬。

要知道，有一点很重要，你用上面所有这些资源仍然可以创造出独特的设计。这都取决于你如何使用这些工具。

如何挑战现状

你的网站是否有独特的设计，现在想必你心里有数了。或许你不在乎这个——这完全没问题。但如果你想要打破标准的工作流程，这里有些概念能帮你实现，还有些网站可以作为非常棒的案例。

奇异的布局

关掉你的原型工具，拿出纸笔，思考一下如何创作出有趣且有用的布局，脱离你以前的套路。

Phases Magazine

Phases Magazine就是个很好的例子，在布局上大胆突破。它也有条条框框——其中有网格——但他们以某种方式创造出了完全不同于标准网站的体验（屏幕截图不能让你很好地感受到，请一定要亲自打开看）。如果你看到这个觉得，“哇，这太奇怪了”，那么很好！他们要的就是这个效果。有人会喜欢，有人会讨厌，但我喜欢的是他们在尝试做一些改变。

Phases Magazine用了一种非传统的网格。（查看大图）

不幸的是，这个网站的整体体验非常糟糕。有不必要的滚屏，表面上是响应式布局，但在某些尺寸下严重错乱。

Phases Magazine的布局在小屏幕上完全乱了。（查看大图）

Curious Space

这个概念还有一个更好的应用案例，Curious Space。

Curious Space的布局。（查看大图）

这里的网格也有些天然随性的感觉，但滚动功能是常规的，响应式断点也运转良好。

Curious Space适应各种不同设备。（查看大图）

操作这个网站时，你会注意到许多不错的小设计细节。例如，鼠标悬停会影响图片的层叠顺序。

鼠标悬停会让内容到前面来。（查看大图）

而且，滚动时还有点小趣味，但至少不会打乱操作，也与网站随性的视觉主题相吻合。logo开始是一堆混乱的字母，随着页面滚动，它们各自归位，在导航条中组成了“Curious Space”。

随着滚动，logo的字母各自归位。（查看大图）

Le Temps D’un Trajet

Le Temps d’un trajet也是一个有趣的例子。我们在此又看到了非标准的网格，但它的布局不是零星分散的，而是刻意聚集而成。

Le Temps d’un trajet的首页布局。（查看大图）

排列中的每个方块都是一张静止图片，鼠标悬停则变成一则短视频。但是最酷的地方，是网格随着焦点流畅地变化。

变化效果的视频演示

不要四四方方

为网站营造特别氛围的一种方式，就是跳出条条框框思考。这话听起来令人生厌，但当你向其他几何图形敞开心扉时，事情就开始变得有趣。

Built By Buffalo

Built By Buffalo用了六边形的布局。（查看大图）

看看Built By Buffalo构建出的蜂巢。这种图片集的设计对于移动端不太友好，所以他们索性在某个断点处变成了矩形。这个例子完美诠释了在适当时机做出独特的设计，同时了解何处是界限，应该收敛一点，给用户提供最佳体验。

在更窄的尺寸中，布局会变成矩形。（查看大图）

Anakin Design Studio

最近看到的Anakin Design Studio是这个系列中我的最爱之一。不仅因为布局漂亮、出乎意料，纵观如今的网站，它用到的形状都远远超出你的预期。

Anakin Design Studio的主页。（查看大图）

如你所见，巨大、遮罩式的文字让人印象深刻。但除此之外，随着页面往下滚动，还能看到他们最近的作品。许多设计师都会在这里放几排简单的矩形缩略图完事，但Anakin则在形状上玩了花样，使它更加吸引人。它们仍是矩形图片，却用白色背景营造出了多种形状的错觉。

Anakin Design Studio的作品集。（查看大图）

Avex Designs; Mathilde Jacon

还有一些其他网站使用了出乎意料的实验性形状。

Avex Designs和Mathilde Jacon使用了非常规的形状来营造独特的体验。（查看大图）

赋予生命

Fixate; For Better Coffee

像Fixate和For Better Coffee这样的网站结合了插画与天然元素，密密麻麻的布局创造出了强烈、令人印象深刻的体验。

Fixate和For Better Coffee运用了图文并茂的布局，使它们引人注目。（查看大图）

上面这种布局看起来复杂，只是因为插画；事实上，插画可以轻易拿掉。在一个迷失于千篇一律、四四方方小缩略图的世界中，特制的插画作品是传达独特品牌个性的绝佳方案。

For Better Coffee则用了有趣的动画，随着页面滚动，跟随咖啡豆亲历整个咖啡制作过程。体验非常流畅，页面也不会固定到特定位置，滚动变成了讲述故事的一项特色。

随着页面滚动，咖啡豆落入研磨机。（查看大图）

再往下滚动，新鲜咖啡会倒入杯中。（查看大图）

HappyFunCorp

既然我们提到美妙的插画型网站，就应该看看HappyFunCorp。

起初，看起来就像是个带有动画的普通网站。当你开始操作，奇妙的事情就发生了。主页的场景是其他所有页面的基础，当你点击链接，不会加载一个全新页面，而是放大查看场景中的某处细节。

点击链接放大查看细节。（查看大图）

这还挺奇特的，不过我喜欢它的创造性思维。而且正因为导航仍以标准方式呈现，所以对于用户没有学习负担。整个体验稍微有点出人意料，但这与网站正常的交互并无冲突。

差异化体验

我们对于用户有一条基本的期望，我们希望同一个网站的每个访客有相同的体验；要想做点不同的事情，可以把这点抛到九霄云外。Vasilis van Gemert网站不仅使用了独特的层叠式方块布局，它也会为每个访客呈现不同的配色。

Vasilis van Gemert网站的3种不同配色。（查看大图）

这个极具创意的特征，也延伸到了所有子页面中。

子页面也会改变配色。（查看大图）

创造独特的视觉主题

打造独特网站的另一个方法，是选取有趣或吸引人的主题，以此为基准左右所有的设计决策。这为你所有的行为提供了良好的指导，鼓励你探索传统UI之外的世界。

虽然这不适合所有网站（例如政府网站），但对于活动公告或小公司网页而言，这令人耳目一新。dConstruct 2015的新网站就是这方面的绝佳案例。

dConstruct 2015网站中的部分复古未来风格设计。（查看大图）

如你所见，他们营造出了复古未来的氛围，向《杰森一家》致敬。你会非常乐于滚动看完整个网站，想要了解他们如何呈现网站的各个部分。

dConstruct的一处设计细节。（查看大图）

这个网站有许多非常棒的细节值得注意。首先，大标题的处理就极其复古，结合了Lamplighter Script和Andes字体。

但最棒的地方，是这些是实实在在的网页字体，通过简单的CSS倾斜来改变方向。斜线贯穿运用于整个网站，有助于设计的统一性与创意。

创意地使用风格独特的网页字体，所有文字都可以选中。（查看大图）

这个网站完美诠释了响应式设计也未必就无聊。布局给人感觉并非四四方方或典型布局，但它仍然做到了各种尺寸适配良好。实际上我非常喜欢他们极具创意地在小屏幕上呈现元素。例如，随着屏幕尺寸缩小，下图的票券图片通过动画过渡，由横条变为竖条。这是个小细节，但非常聪明，反映出他们向整个布局的方方面面倾注了多少心血。

在窄屏中，票券由横条翻转成竖条。（查看大图）

我要向Clearleft脱帽致敬，是他们创造了这件杰作。

把版权素材作为一种输入，而非最终结果

我在Creative Market工作，我当然喜爱使用优秀的版权图片、字体、照片等等。高质量的版权资源，能给每位设计师的工作带来极大的帮助，但如何使用需要慎重考虑。无论你是在使用有趣的矢量作品、图标集、或是整套网站主题，考虑付出一些额外的努力，别让你的作品和其他人看起来一模一样。绝大多数人下载那些资源，都不肯费心做出哪怕一丁点定制化设计，所以只要一点点就大有帮助。

独特网站的问题

找到令人拍案叫绝的独特网站非常困难。为了写这篇文章，我花了许多小时搜寻，只找到少数几个可供展示的。我发现其中有个压倒性的倾向，如果设计师们真的想要追求独特的网页设计，做出的网站用户体验往往不可靠。

实验是好的，但如果网站怪异、难以预料的不愉快体验使用户感到困惑，则往往偏离了初衷。许多这类网站反而倒退一步，向我们呈现出FLASH时代的体验：加载太久、过于华丽的动画、跳跃式滚动、还有复杂的用户流程。有一种折衷，可以让你创造优美、外观独特的网站，但不必彻底颠覆交互。

网页设计长存

标准化、可预测的设计总会在网页中占有一席之地。实际上，它们或许最适合向各种屏幕展现各类内容。也就是说，我们需要一遍又一遍地，让我们的创意直觉与理性本能一决高下。

让我们尽自己的职责，维护互联网一直以来的面貌：一个包容科技、艺术和设计以新颖有趣的方式相互交叉的地方。成为一名开拓者，去试着做前所未见的事情——当然，路上会犯许多错误。时不时创造出奇异的东西也很棒，即使被其他人厌恶。这个叫做互联网的疯狂事物就是这样建立起来的，我们也正是这样在推动着它前行。

最后，尽管事实上大量网站看起来都一个样，但我不相信网页设计趋于停滞。有数不清的极有天赋的设计师们，创造了许多难以置信的网站，使这个群体持续不断进步升华。但这个话题仍有广泛争议。我想听听你的想法，关于网页设计的现状，还有你觉得谁在做着最有趣的工作。

原文链接：https://www.smashingmagazine.com/2015/07/hunt-for-the-webs-lost-soul/

作者信息： Joshua Johnson Josh Johnson is the Product Manager for Creative Market. He’s also a writer, designer, and photographer, and currently lives in Phoenix.

网页设计未来趋势：高清设计

hi@victor42.work (Victor42) — Sun, 13 Dec 2015 00:04:00 +0000

[国外设计第114期]

网页设计中最热门的技巧之一，就是高清背景图，这得益于高清显示屏的普及。但面对复杂的商标时，就不好处理了。

本文中，我们来展望一下网页设计的未来。高清网页设计是否能主导网络，这已经不是问题了，关键是高分辨率显示屏何时能够普及，这是提升视觉设计的必备条件。

下面开始，我们将要探索如何运用图片、视频、或是动画来创建高清背景，并且把所有内容有层次地组合。

图片

超大图、焦点图、全屏图。

以上几个词，最适合用来描述现代网页设计的背景图片。设计师们对高清设计不仅停留在思考层面，他们将其发挥到极致，用背景图占据了整个画面。

这种设计技巧很有效，因为用户天生就是视觉动物。

正如《2015与2016的网页设计趋势》所描述的，毕竟我们理解周围世界时，视觉在主导潜意识。而且，令人愉悦的图片在一定程度上能创造更好的用户体验，因为我们理所当然认为有吸引力的东西更好。这看似极其肤浅，但在设计中，感知就是真相。

高屏幕分辨率创造了绝佳的机遇，让用户能看到从前无法察觉的细节。图片中的小细节——例如Junction Moama所用的Macquarie公园的多色调纹理（上图的两种）——提升了界面的精细程度，对至关重要的第一印象大有帮助。

使用高清图片的5条建议：

使主画面成为视觉焦点——虽然图片是作为背景，不代表它就能占据舞台中央。优秀的照片能与用户建立情感连接，学习图片的精妙之处，看它如何影响设计的视觉层次。
考虑使用多图——使用我们在网页UI模式中提到的幻灯片或卡片风格的结构，来应对内容丰富或相片集类型的设计。
在图片上添加效果——模糊或色彩叠加，能够增加或是改变一张图片的调性（例如全用红色调会更加积极）。这在高清图片上很管用，因为下层的图片画质够高，细节仍清晰可辨。
考虑图片在不同屏幕尺寸下的效果——安排各种尺寸下的背景图，使之能适应任何断点，不会露出纯色块（那其实是真正的背景）。
打破局限——照片背景不一定要遵循标准的1:1.5相机比例，也可以使用从各自背景中裁剪出来的图片。

背景照片能创造简单的视觉吸引。选用优秀的照片强化品牌、产品或信息时，效果最佳。记住，有时会用多张背景照片，要确保这种设计结构和周遭元素能与每张图搭配良好。

视频

高清视频背景可能是今年最盛行的技巧之一——尤其是有着疯狂感的大量快镜头动作。从AirBnB这样的巨人，到几乎所有类型的小网站，视频迅速成为了网页设计中重要的一道风景线。

最初一批运用背景视频的网站，正是电影网站。例如《少年派的奇幻漂流》官网，用了一段电影预告作为背景（而且还是可下载的格式）。

视频作为一种设计技巧的出现，与它本身的新奇性毫无关系。在HTML5（还有能播放高清视频的智能手机）推出以前，许多浏览器与网络连接环境根本无法处理全屏视频背景。

任何关于高清视频的讨论，都应当围绕最终成品。无论是像Dunckelfeld’s这样的超现实主义黑白手法，还是像AirBnB这种更加现实的蒙太奇短片，你都需要来回调整它的饱和度和帧速率，让视频更吸引人，而不会使人分心。

光有一段视频可不够。所有拍摄优秀电影的技巧——取景、变焦、平移——在网页视频中同样重要，即便是用作背景。

Brindisa Tapas Kitchens做得非常棒，它剪辑了大量短片来展现它的食物与环境。视频从多个角度拍摄，有些片段用了缩时摄影的风格加速，另一些则刻意调慢来营造合适的氛围。

同样，在设计中运用高清视频也有5条建议：

注意视频长度——背景视频应当在几秒钟内呈现一段视觉故事，让用户感受到氛围。最佳循环间隔是10到30秒。
关闭声音——对于多数用户而言，声音仍是一种很极端的自动播放元素。如果想要使用声音，也要默认设成静音。
关注加载时间——虽然高清视频很有意思，但不能因此拖慢网站加载速度。如果用户在加载过程中就退出了，视频再精彩都没有用。
考虑备选方案——有些设备无法渲染高清视频。在Goolge统计中查看访客最常用的设备，根据情况进行设计。通常，你会选取一张静态图片作为备选方案。
坚持高质量的视频——不论是否自己拍摄，为了清晰出众的画质，最好雇人来做这个事情，或者使用版权视频。不仅仅因为它要用在高清的环境中，也因为需要相当好的画质。就像照片一样，如果超过原片分辨率使用，视频就毁了。

网页设计，尤其是使用背景视频的网页，都在营造一种电影般的体验。网站中的高清视频，创造了一种完整的多媒体体验，在运动的背景之上层层传递信息。

动画

高清背景动画存在于固定图片的设计中，因为这些动画往往同时包含固定与运动元素。

它与加载动画同样盛行，数十年来设计原则几乎没有改变。唯一改变的是高清显示屏能呈现的画质水平。

成功的高清动画，关键在于时间控制。动画应当有着流畅无痕的效果。所有的循环动画都要首尾相接。

《2015与2016的网页设计趋势》中描述过，我们建议牢记以下5条原则：

坚持简单的动画——太复杂的故事与动作可能会加重认知负担，如果能实现完美的基本动画，就不要制作复杂的效果。
使用亮色调来关联界面——例如，可以从简单的鼠标悬停效果入手，改变链接颜色。考虑选用配色中最亮的颜色作为鼠标悬停色，让人注意到这个动画效果。悬停时放大文字也是一种视觉线索，能够起到额外的强调作用。这些简单的手段有助于突显特定的用户操作。
利用高清屏幕的特性——为了最佳的视觉效果，使用可缩放的图片格式，例如矢量图。
用视频的方法制作动画——同样的精妙之处也适用于动画。应当避免不和谐的运动和物体，例如声音，那会令用户感到厌烦。
为合适的观众制作动画——虽然许多设计师常把动画和插画合为一体，但这未必适用于每个网站。

同样，要注意细节。根据网站与用户的不同，动画可以是卡通式、视频风格，或者仅仅是插画环境中的一系列运动感。动画可以通过用户操作触发——点按、滚动或是鼠标点击——或者就简单地自动播放。

层层构筑：融合所有内容

高清背景只有作为某一层信息时才有效果。精彩的图片、视频或动画独木难支——你得考虑它与屏幕上其他内容的关系。

以下是3个简单的案例研究，这几个网站都将它们融合得非常好。

Adidas设计工作室

Adidas设计工作室用了各种技巧处理鲜明的大尺寸图片，号召人们加入。

全屏背景实际上链接到一段视频，滚动操作还有视觉差效果，引导用户浏览整个产品线和相关信息。清晰的图片搭配同样清晰的文字。通过一种温和的方式，用颜色构建了视觉的层次。

Flipboard

Flipboard熟练运用固定背景图的技艺，这高度依赖传统的摄影艺术。

高清图片包含许多细节，却不会咄咄逼人。图片还延伸到了屏幕之外，让人想象餐桌还会向各个方向延伸，在不同的屏幕分辨率下也确实如此。整个色调将这张图片塑造成背景元素，使注意力保持在其上更明亮的行动号召信息上。

5 Eme Gauche

5 Eme Gauche的特色是具有多层元素的大背景图，包含底部导航、社交媒体图标，还有屏幕中央的品牌logo和主页链接。

每层内容都与背景有互动，并且有所区分，让你一眼就能看出屏幕上的分层关系。这个网站的内部层级很清晰，因为所有页面都采用同样的分层格式和滚动动画。

结论

尽管高清背景近年来正逐渐盛行，但不能仅把它当作一种潮流。它们的产生，是可用性终于跟上科技发展的结果。

这意味着人们不会有一天厌倦高清设计，转而寻找下一股潮流。作为日渐成长的视觉行业，这种创作技巧绝对值得一学。

想学习更多不会过时的网页设计技巧，请看UXPin推出的免费电子书《2015与2016的网页设计趋势》。这份指南通过分解165个今日最佳设计，讲解了10种最有用的趋势，它们来自Intercom、Spotify、Apple、Google这样的公司。

原文链接：http://designmodo.com/high-definition-design/

作者信息： Jerry Cao Jerry Cao is a content strategist at UXPin — the wireframing and prototyping app — where he develops in-app and online content for the wireframing and prototyping platform.

网页设计师该向印刷设计学习的3件事

hi@victor42.work (Victor42) — Sun, 20 Sep 2015 10:52:00 +0000

[国外设计第103期]

了解这3条经典原则，能帮助你创造更好、更易懂的网页设计。

许多经典原则，例如那些字体设计原则，在线上仍然有效。图片由Peter Van Lancker提供，www.flickr.com/photos/petervanlancker

设计就是特定功能的构成——无论构成物是字节还是原子。这就意味着网页设计从它的祖先——纸墨中受益良多。

本文中，我们重点介绍几则印刷设计原则，它们在线上仍然适用。

熟练掌握后，你就能提升UI与UX设计水平，创造出更好、更易懂的设计。

01. 让读者保持专注

印刷设计专注于易读性，网页上也是如此：只是把“读者”换成“用户”而已。

目标应当是清晰的表达，并且让人能够轻松纵览整个设计。我们来看几个从印刷设计沿用过来的概念。

排版

就像报纸，用户不会阅读网站上的每个字——至少一开始不会。正如免费电子书《为人眼进行网页UI设计》里面描述的，扫视页面是用户的标准行为。

为扫视而设计时，有两种模式需要考虑。首先是F模式。

F模式排版：Creative Bloq的主页

F模式反映了用户最通常的扫视页面的方式。他们的视线从上面开始横向移动，然后沿着左边垂直移动，寻找突出的文字。

一旦找到激起他们兴趣的内容，他们又会开始横向浏览页面。

还有Z模式：

Z模式布局：MailChimp的主页

Z模式也是一种自然的浏览模式，通常用于报纸，网页上也是如此。用户在页面顶部水平浏览，然后向左下移动，在页面的下一行再次进行水平移动搜寻。

文字

和印刷一样，网页文字也应该有清晰的层次。选择适合的字号，有助于关键词在页面上突出，让用户更轻松的浏览页面。

清晰的文字层次：World Baking Day网站

我们来看看文字层次中一些常见的层级：

主要：页面上最显著的文字更大更闪耀，吸引用户的注意力。通常用于标题与装饰。
次要：介于中间的所有内容。不像标题那么显著，但要在页面的常规文字中突出显示。
再次：主要内容所选的文字。文字层次中的这一级，有助于使用户沉浸在正文中。
其他：更小的一级，使用斜体、粗体、下划线、不同颜色等等。

配合运用，建立文字的层次，可以创造出秩序，防止用户迷失其中。

要测试你页面的易读性，可以使用“3秒原则”：简略地浏览页面，然后看向别处。其中突出的内容有没有反映出你设计意图？如果是的，那你方向正确，继续保持；如果不是，则需要打回重新设计——可能确实如此。

02. 建立平衡感

无论平衡感来自于对称、非对称或是放射状，都是为了让设计创造出稳固与一致的感觉。如果用户在你的网页上感到轻松，他们会更愿意逗留。

图片或文字不要过于密集：时刻考虑元素的间隙。排版倾向于简洁——密集的布局会妨碍用户。眼睛难以接受杂乱，使人更难接受信息的流转。

考虑使用极简的设计，通过白色、黑色或非常深的背景和前景元素达到平衡。《为人眼进行网页UI设计》里讨论过，负空间的运用可以引导用户的注意力。

震撼的极简设计案例：鞋类品牌ETQ的网站

上面展示的ETQ网站，利用了负空间将视线引向所陈列的产品。页面底部对比鲜明的黑白色块，让用户选择尺寸或查看商品价格。

网页上极少干扰信息，创造了一种平静与秩序的感觉——当然，也希望有助于促成用户购买。

03. 创造可靠的设计

让你的设计对于所有用户都是可靠的。不要使用两种以上的字体，确保所有年龄层的用户都能阅读。过于杂乱会扰乱信息。

如果你发现自己在屏幕前手足无措，你的设计可能就包含了太多的图片。

选择配色方案时也要时刻为用户着想——如果是医院网站，使用冷静柔和的色彩；如果受众是青少年，则适合更鲜明的色彩。

UC San Diego Health的网站选用的配色很吻合它严肃的内容

下面是一些书籍设计中常犯的错误，同样适用于网页：

**未经过足够的测试：**始终要尽可能广泛对设计进行测试。内容可能会跨越多种媒介（网页、电子书、印刷品），这会使得文字有新面貌。而且，有些字体转换到新媒介上可能会变得不易阅读。找到适用于所有情境的字体非常重要。还要考虑你的设计在不同屏幕尺寸、不同分辨率和不同浏览器中如何展现。
**不恰当的语调：**为每个页面元素选择正确的语调。与字体一样，标题应该吸引读者注意，副标题作为标题的阐明或补充，正文要像一段友好的对话——温暖亲切，让读者渴望了解更多信息。
**不恰当的格式：**遵循你所选的媒介：否则，会一直浪费时间修改文件，应对CMYK用于印刷、RGB用于网站这样的问题。

深度阅读：UXPin的免费电子书，2015-2016趋势的网页设计手册

想要了解更多有用的UI与UX设计技巧，查看UXPin的免费电子书，《2015-2016趋势的网页设计手册》

在其中，你会看到166个手工挑选的案例，来自于Adidas、Intercom、Apple、Google与Versace这样的公司。还列出了100项免费的在线资源，帮助你加速设计流程。

原文链接：http://www.creativebloq.com/web-design/3-things-web-designers-can-learn-print-design-91516662

作者信息： Kyle Pereira Kyle is publishing and design studio manager of TLAC Design Studio. He has more than 20 years of experience in print, graphic design, computer graphics and prepress: www.tlac.ca

使网站显得业余的10个错误

hi@victor42.work (Victor42) — Sun, 16 Aug 2015 00:11:00 +0000

[国外设计第99期]

创建自己的网站对于资金拮据的企业主似乎是个好主意。可以以后再找设计师，等你的创业项目取得了一定的地位，那时你才会开始考虑这些无意义的事情。

是这样吗？

事实证明，对于初具雏形的业务，设计远比你想象得重要。当你运营线上业务时，访客的判断往往取决于设计中的小细节。

顾客都是三心二意的。他们对一些主流品牌已经产生了信任。为什么忽然要开始信任你？除非你在头几秒就吸引住他们，否则他们就走了。

最终，最微小的细节产生了最大的差异。如果你要树立一个值得信任的品牌，创造收入，这些细节必须仔细查验、精心准备。本文中，我就来谈谈网页设计中常见的业余错误。即使设计能力有限，你也能辨认出一些常见的错误，它们或许也渗入了你的网页设计中。

注：本文中使用的案例，都来自于创业项目，它们都特别重视各自网站的反馈。

1. 模版的不恰当使用

我不赞成在大型业务中使用网站模版，不过小型的、基于bootstrap的创业公司确实有此需求。无论如何，如果你最终用了一套模版，最好还是找个设计师为你的品牌适当定制化。最终甚至可能得到非常棒的产出。

预先设计好的模版网站存在一个普遍问题，logo和网站其余部分的视觉关联很弱。logo色彩并没有重复出现在网站的其他地方，或者与网站使用的字体并不搭配。

如果你要节省品牌包装开支，至少这模版不能太明显。

2. 使用默认的Bootstrap外观

另一个同样骇人的错误，是在公司网站上使用Bootstrap的默认设计。使用Open Sans可愚弄不了大家。很难区分各个使用相同设计的网站，这对你的品牌有害。

Bootstrap网站的一个赠品是极佳的字体。（正如Bootstrap那样）它全面的基础图标库，为它聚集了大量人气，你会需要它们来创建统一的视觉语言。非常适合的情况下，它可以作为复杂界面的一种有益补充。

当然，如果原创图标比通用图标对你的品牌更好呢？为什么不找找更精细的图标集，来描绘你的主要卖点——或是异想天开？找个插画师来帮你吧。

3. 文字对比问题

多数非设计师都远没有意识到字体的重要性。它们会成就或破坏整个设计，即使只是些“字母”。

“小作坊出品”的网页设计有个常见问题，标题和正文之间的对比太不明显。单单选用几个字号通常并不能解决。尝试在标题上使用更粗的字重，让它显然比其余文字重要。这有助于建立层级，温和地引导视线浏览网站。

4. 使用深色背景

背景色覆盖了网站的绝大部分区域，所以要谨慎选择。

首要规则，纯黑网站几乎没有好看的，除非经过专业的设计。白色比较无风险，不过更多设计师使用非常浅的灰色。当心更深的灰色，更糟的是黑色字母在这种背景上的易读性。灰度最好在15%以下，保持设计的明亮。

5. 多个同等的行动召唤

网站的每个页面都应该只有一个主要的行动召唤。如果不止给出一个操作——访客会困惑，他们可能会需要更多时间来做决策，然后采取行动。他们甚至会因为这样的认知负担而离开！

尽可能多地去除行动召唤。让人们更容易采取行动，无需思考。无论是注册按钮还是选择套餐，通过图形符号来使你期望的操作更加显眼，同时让其他选项更加温和，削弱吸引力。

6. 对齐与间距问题

间距很难处理。保留适当间距，元素周围不要太多留白，这可能是设计要考虑的最困难的部分。但通过一些规则可以简化。首先，确保所有元素都恰当地分组。其次，在这些组周围保留足够的空白。

7. 不专业的文案

写作同样很难，但它必不可少，能让你的卖点通过互联网传播。尤其如果你在卖东西，你得确保文案容易理解，并且有校对者检查修正所有拼写错误。

我常常在网站文案中看到一些令人尴尬的句子，似乎从设计的原型阶段开始，就以一段占位符卡在那里。最好在网站上线前找人通读所有文案。

8. 易读性问题

如果无法阅读，再多再好的文案也拯救不了你的业务。许多小细节可能损害文字的易读性，结果会影响人们对你公司的印象。

要小心地修复这些问题，比如行高太小、字号太小无法阅读，或者是文字与背景反差太小。尽管这些对于多数人不会造成实际的阅读困难，但事实是这些问题存在于网站上，使得网站看上去显得不太专业。你想象一下Facebook会有易读性问题么？

9. 不统一

你的品牌最好保持统一。在所有出现的地方，无论是社交媒体、Facebook广告，或是线下，顾客都要能立刻辨认出你的品牌。

不过我们回退一步，首先要确保网站本身的一致性。有没有继承的无序列表样式覆盖了正文字体？logo的颜色和网站上使用的完全一致吗？你是否在各处使用相同的阴影，还是说只是“足够接近”？通常要好好组织CSS文件，删除一切不需要的代码就能修复这些不统一的问题。

10. 过时的设计

不论喜欢与否，我们现在要向拟物主义告别了，每个仍然在重度使用渐变和阴影的网站一定会显得过时。尽管你的一些3D效果或许在某处侥幸成功，最好还是在扁平化设计指南中探索创意。

都在这里了：这是我通过分析一些不同的创业公司主页，得出的10个最常见的问题。现在再去看看你的网站，是否触犯了上面的哪条？

顺便提一下，我在写一本关于设计如何帮助企业主建立业务的书。想在发行时得到通知吗？来名单中留个名吧。

原文链接：http://designmodo.com/10-mistakes-website/

作者信息： Heidi Pungartnik Heidi Pungartnik is helping bootstrapping entrepreneurs grow their business with design at DesignforFounders.com. She’s writing a book on the topic as well so be sure to jump on the launch list!

印证渐变复兴的20个网站

hi@victor42.work (Victor42) — Sun, 26 Jul 2015 00:13:00 +0000

[国外设计第96期]

扁平化设计的时代正在终结，或许不会一蹴而就，却的确在逐渐衰亡。最有力的证明就是这种崭新的渐变潮流正在兴起。相比在web 2.0时代见到的那种渐变，它们更加细致微妙。

坦白说吧，渐变再度盛行了！

我列出了20个主打渐变形式的崭新网页设计。其中有些非常微妙，另一些则极度鲜艳；不论哪种，渐变都是一种为你设计添彩的有趣手法。

VO2 Group

VO2新网站的欢迎页面采用了非常规的设计，大量不同元素层层叠加。树洞般的设计造就了这个网站！很有意思，与众不同。背景元素之一——三角形——呈现了轻微的渐变。就此而言，它为三角形元素增添了视觉吸引力。

Melanie F – Look Book

Melanie的look book采用的布局方式，在时尚类网站中愈发流行，其中文字置于图片之上，两者却不粘连。在本例中，介绍文字呈现在网站页头的矩形上方。矩形中填充了绿色与紫色的渐变，很显然，它有助于吸引视线。

Adoratorio

这家设计机构以特别的方式运用渐变，将它用在了文字区域上。独具一格，相当酷炫。这种方法确实能巧妙地将文字风格化，非常管用。

Qards

甚至我们Designmodo Qard的着陆页也展现了多种渐变。大多页面都被分割成小块，背景填充了不同的渐变色。截图中的页面用的是橙色，其他页面则用了由浅到深的蓝色或绿色渐变。渐变的背景为网站设计增添一种独特的格调。

Symodd

Symodd的首屏，或者说介绍部分，主打由橙色到粉色的全屏渐变背景。这种渐变相对细微，因为这两种色调差异不大，赏心悦目。

Inc

Inc也在首屏区域使用了渐变。但是稍微有点不同，他们将蓝紫色渐变叠加在照片上。此处的渐变也没有太强烈，蓝色与紫色是非常接近的色调，将它置于照片之上效果很好。

Pho

又是一个蓝紫色渐变。它是这个案例集中相对柔和的一款，不过所选的两种颜色相当华丽——它们饱和度低，但对比强烈，看起来令人非常愉悦！

Impossible Bureau

Impossible Bureau的页面采用了非常鲜明、反差强烈的渐变色！很酷的是，每当页面加载完成，其他元素在上方出现，页面的浓烈与戏剧性并没有被冲淡。

Customeed

Customeed选择极度罕见的绿色渐变。出于某些原因，蓝色、紫色、粉色渐变非常盛行。但是绿色渐变也没有问题，它看起来令人愉快，与Customeed的网站配合良好。

Webflow

Webflow并没有大篇幅展示渐变——至少不像本文中其他网站那样。他们在网站首页用了一小片粉、紫、蓝的渐变点缀。这种激动人心的渐变在各处小范围运用，营造了很棒的格调。

Product to Profit

着陆页的渐变色很淡——略微有水洗的感觉。无论如何，它看起来的确很棒，因为并没有刻意突出。淡蓝淡紫色的渐变叠在照片上，效果很好。唤起这个网站一种友好的氛围。

Table Hero

Table Hero的主页遍布友好的小花样，说小花样是指各处的点缀。在1像素宽的按钮边框上，或是极细的标题文字上透出一丝渐变。这种方法很有意思，在设计中融入渐变来增添深度和多样性，却不会让渐变走火入魔。

GoGoRo

GoGoRo的焦点区域采用了极简设计，但绝对够抓眼球。除了巨大的文字“go”、小摩托的照片和少量小字，别无他物。文字本身很细，但由于字号够大，使它表现出一定的厚度。网站的设计师将欢快的蓝绿渐变作为文字的颜色。

Segment

Segment用了深色设计，通常整个区域都采用深灰色背景。但是为了给它添彩——或者说点亮它——他们用了很多明亮的霓虹绿色来提亮设计。某些区域的绿色渐变颇具吸引力，使整个设计引人注目。

Mapbox

进入Mapbox的主页，你会看到一个非常棒的首屏。轮播图中有些采用了微妙的渐变背景，为整个设计增加了纵深感和清晰度。

Gradients, motherfucker.

不知道你是否还记得这个网站，Visual Idiot在2012年发布的。不过随着屏幕滚动，你会发现它的渐变真是切中要害。这个网站相当简单，而且非常滑稽。展现了一系列难以置信的渐变，取自彩虹的颜色，例如粉色、蓝色、绿色、橙色。

Pitney Bowes

又是个大胆的案例。这个网站的设计相当平滑，白色文字在紫色为主体的渐变上显得鲜亮。文字看上去的确很棒。这个渐变其实是均匀线性的，但是得益于上面的蓝色圆形纹理，这种视错觉让它显得有点圆润。很酷，对不对？

Stripe

Stripe近期更新了他们的网站，他们也用了渐变！有些首屏轮播图用了非常漂亮的渐变，你在截图中看到的就是其中第一张。由深色的海军蓝过渡到绿色的渐变，色彩丰富，作为暗色调背景非常好。

One John St

这是Brooklyn DUMBO一个公寓群的着陆页。这个网站令人惊奇的地方，是渐变色会在一天中随着时间改变深度。这个设计非常有趣。

Wake

最后一个案例展现了最流行的蓝紫色渐变，这种配色正如日中天。Wake的网站遍布这种渐变色，因为这是他们应用品牌色一部分。

结论

可以看出，渐变是一项有趣的设计决策。它们造就了这种欢快、激动人心的设计。总体来说，渐变并不差——从来都没有差过——只是我们对太极端的渐变感到厌烦。尽管这些案例中有部分对比很强烈，也有一些呈现了它柔和的一面。希望这一系列能在你未来的设计中激发你的灵感。

原文链接

作者信息： Paula Borowska Paula runs a user experience blog BeingLimited and an author of an upcoming book about mobile design, the Mobile Design Book. You can connect with her on Google+.

网页改版7大要素

hi@victor42.work (Victor42) — Sun, 21 Jun 2015 17:45:00 +0000

[国外设计第91期]

Shopify Plus是我们创立的电商平台的企业版。2014年2月发布，如今仍然是第一版。我想是时候改版了。

经历了一年多，我们对客户与自身都有更深入的了解。陈旧的品牌已经不合时宜了。

我们并没有什么特别的流程，就是将以下7件事情串联起来，便达成了目的。

1. 面谈

我对执行团队的成员进行了一对一面谈，明确了Shopify Plus是什么。为了真实还原，我录下了每段面谈，供以后回放。

面谈之后便有灵感涌现——我觉得自己对于这个产品已经了如指掌。撰写愿景、任务描述、品牌指南、项目概述和网站文案都变得容易了。我们的网站需要更好传达信息，让人顿悟其中含义。

2. 项目概述

深入项目之前，我们写了一份项目概述，使大家达成共识。我们会适时更新，让它反映出项目的当前状态。

项目概述中可能会提出一些问题：

我们试图完成什么目标？
如何知道项目成功与否？
需要做什么？
为什么需要这么做？
有什么必要条件？
做这件事情是为了谁？
如何让他们知道？
项目团队有哪些人？
截止日期是什么时候？

3. 竞品分析

我们研究了还有哪些同类产品。我先从一系列竞品开始，然后转向电商领域之外那些与我们目标客户相同的公司。

我们对比了竞品的长处、弱点和机会，还有我们想要涉足的重点领域——和我们想要避开的领域。

我们的竞品分析文档

4. 信息结构

信息结构是内容组织的表现，使内容易于理解。在网页设计中，结构图表反映了网站里各页面间的关系，让你从更高的角度看待网站的构成。

我给旧网站画了一张信息结构图，展现出各页面间的关系。在更新和改变之前，我评估了内容、目标与工作量。这张图表帮助我们确定项目的范畴，可以作为所有页面撰写、设计和编码的任务清单。

Shopify Plus的信息结构图表

5. 线框图

在整个改版过程中，我都使用线框图帮助自己思考问题、激发创意。有一些画在餐巾纸上，面对面分享，另一些草图则通过网络分享。

线框图能带来一项意外收获：它帮你撰写内容。写文档让你难以把一切视觉化，在线框图中粘贴内容能让人清楚感受到页面的跳转流程，每块内容与其他如何保持关联。

Shopify Plus改版所用的高保真线框图

6. 灵感画板

我的灵感画板展示新品牌可能的样貌。它们有助于让我在项目早期从团队得到反馈。

我使用Pinterest创建了众多画板，用于局部分解，例如导航、动画和字体等，不会让创意迷失在单个画板中。

研究过程中在我Illustrator中绘制灵感创意，将文字、图片和色盘结合成类似广告的图样。同样的设计元素出现在各处设计稿中，不过位置和表现有所变化。

Shopify Plus的灵感画板

从灵感画板中探索Shopify Plus可能的品牌形象

7. 效果图与交互原型

线框图和网页设计印在纸上时，多数人都不会在意。在屏幕上展现设计很好，但最好的方法总是通过受众的视角来审视。

我在线框图流程早期就开始制作交互式效果图。直到网站编码完成前，都持续将它们与客户和团队分享。

我让他们在浏览时大胆讲出自己的看法，才能知道他们操作界面时所想。这些反馈都突显了局部的问题，也验证了设计方案，便于项目的最终定稿。

Shopify Plus的InVision项目页面

为Shopify Plus收集反馈

尽管一些机构会在改版过程中坚持特殊的顺序，但这7个步骤对我们很有效。选用适合你工作流程的策略，是改版成功的重要因素。

原文链接

作者信息： Filippo Di Trapani, Designer at Shopify Filippo is a designer working at Shopify’s headquarters in Ottawa, Canada. He’s a loving husband, father of 2, and an avid music lover. Follow me on Twitter

网页动画终极指南

hi@victor42.work (Victor42) — Sun, 14 Jun 2015 10:19:00 +0000

[国外设计第90期]

动画是人类毕生的理想之一（如果像某些历史学家相信的那样）。这个理论源起于洞穴壁画：在某些洞穴壁画中，经常见到一些生物被画上远多于正常数量的肢体。

这背后有很多套理论。有些指出这很简单，因为艺术家们并没有方法可以擦除这些肢体，于是将他们的错误留在壁画上，传给了子孙。还有理论相信，这些是最早的试图在静止图像中捕捉动态的方法。我选择相信后者。

还有比捕捉动态更加自然的愿望了吗？自然界的一切都在运动。人在行走，水在流动，植物开枝散叶，自然界唯一不变的就是变化，以一种运动的形式。有些在模糊中一闪而过，有些则慢到难以察觉，但这些都在发生。

动画对于网页设计师已经不再新奇……它正在成为最基础的交互设计效果。

动画就是变化，是一种运动。它是我们艺术创作中最接近真实反映生活的东西。这就是为什么人们总是说“动画使我们的网站（或是演讲，诸如此类）鲜活起来。”这可能是陈词滥调了，但这个词很优美地呈现了动画在网页设计中的目的。

正确使用运动感，可以告诉用户他们完成了某些操作。他们成功地与界面进行了交互，引发了某些变化。

人们与真实物体互动时，也会触发并体验到相同的感觉（至少是类似的感觉）。就某种程度而言，动画是拟物的。没错，我说的就是拟物。

使用得当时，动画可以被设计成模仿真实世界的交互。我们似乎在原地打转。可能我们不会再过多使用复杂的皮革纹理，但我们仍然在尝试效仿现实世界。

网页动画简史

在进入实用部分之前，我们看看互联网上的动画是如何发展到今天（这么酷）的。最初一切都诞生于gif图……

原来.gif文件年龄甚至比我还大2岁。它们在1987年被创造，正是早年我们刚知道（或多或少）互联网的时候。因此开创了跳舞婴儿的纪元，那些东西太可怕了，还是忘了好。

如果gif图的流行告诉了我们什么，那就是人们想要将动画引入网页中。在此提醒一下，多数人可能并没有从改善可用性的方式考虑动画。一切都只是为了产生一点个性，表现一点生机，与其他静止的网页区分开。

现在正是关注网页动画与App动画的最佳时机。

当.gif文件的能力耗尽后，人们想要一种更好的方式，来向网站中添加动画。对，声音！声音太棒了。如果人们打开你的网页，开始播放你最喜欢的歌曲，这得有多棒啊？要像真正的歌曲……而不是那种破烂电脑音乐，对吧？

是Flash让我们艰难地学到了这个教训。但是别忘了Flash在它所处的年代是相当惊艳的。实际上它是一种革新。它是一种进步。它非常酷。

无论后来它被如何滥用，要知道Flash让我们在互联网中做一些从没想过的事情。它拓宽了创意的视野，为人们在一个崭新的行业创造了工作机会，带来了“网页动画”和90年代最棒的东西（除了天堂）：Flash游戏。甚至直到现在，我都觉得那些游戏使人入迷。

随着时间推移，很多设计师转移到基于Javascript的动画上，用于创造一些小东西，比如下拉菜单和其他导航元素。毕竟如果做得恰当的话，这更有利于SEO。其他人只用Javascript是因为，那正是FrontPage和DreamWeaver调用按钮图片的方式。微小的进步仍然是进步。

00年代中旬，W3C已经在努力将动画加入到CSS规范中。2009年，首份公开的CSS动画规范初稿就发布了。

如今呢？我们探索出了强制硬件渲染、CSS动画结合SVG文件、延伸基本动画功能的JavaScript库，等等。

现在我们正在探寻各种方式，不仅仅是为网站增添风格。我们在试图改善可用性，告知并教育用户，让用户更容易了解他们在做什么。

对于网页设计师，动画不再是新奇事物。它成为了影视行业的基础，一种全新的叙事方式。对我们而言，它成为了有效交互设计的基础。

现在正是关注网页动画与App动画的最佳时机。科技尚没有完全成熟（什么时候会呢），也无法提供全方位支持（何时能够呢），但我们在探寻新的方式将它呈现在世人面前，无需通过插件或是专用代码。

我们越是以开放的动画标准为基础，越多的人就能首先看到。近年来人们专注于运用动画驱动交互，这是一件非常非常好的事情。

是时候成为先行者了。

网页动画的种类

回到正题。我们在谈论的是哪种动画？我的意思是，我说了很多关于使用动画改善用户界面的言论，那些究竟是什么意思？

很显然，我们不能将动画效果随手加于网页元素之上，然后期盼它能提升转化率。那太傻了。就像设计的所有其他方面，使用哪种动画，何时使用，这都需要仔细考虑。

实际细节与实现也是必须考虑的。如果你的动画过于耗费资源，拖慢用户的移动设备，或者更糟的是拖慢他们的桌面设备，这就有问题了。很多问题。

我们由此入手，看看网页上几种典型的动画：

界面元素动画

我不知道这是不是最普遍的一类动画，不过我猜是的。它应该获此殊荣。在我的观念中，这是最有用的动画类型。

正如我在介绍中说的，这是一种让用户了解他们的操作（比如点击）被记录的动画。变化的发生需要他们的点击来催化，无论是转向另一个页面，打开侧边栏或模态窗口，还是在客服窗口中发送电子邮件。

不是说有反馈更好，而是如今反馈是必须的，这是个扁平化设计的世界。人们需要了解界面与装饰物之间的区别。让元素运动起来，是简单微妙的交互方式，给予用户他们所需的反馈。

它就像改变按钮背景色或让它跳动那么简单。这个类型也包含了侧边栏菜单“滑入”页面的动画，还有模态窗口放大显现的动画。

等待动画

这个也是，同样是为了给用户提供反馈。这类动画，会在某些操作正在后台进行时呈现给用户，你可不想让他们等到崩溃。

这类动画的作用很久以前就得到了印证，就在图形化用户界面首次发明的时候。最早的方式是鼠标指针变成沙漏，还有进度条也是。Apple在某时刻采用了“旋转的沙滩排球”，而windows则呈现了文件优雅地从一个文件夹飞向另一个。

这些惯例第一时间就被网页采用了，理由很充分。当用户开始疑惑正在发生什么时，他们会一直点击或点按。这是沮丧的一种表现。他们认为这样会让进度加快一点。

无论哪种方式，告诉用户正在发生的事情，哪怕通过一个简单的进度条，也能极大减轻精神负担……即使对于我们这些使用电脑很久的用户也是一样。

Beegit是一款写作应用，我用它来撰写和编辑这篇文章。它提供了一个便捷的“进度圈”，告诉我图片何时会上传完成，在模态窗口的左上角可以看到：

讲故事的动画

如今，用动画来讲故事已经超越了卡通。实际上，我要讲的完全不是那些动画。而是那些被设计出来与用户互动（比如向下滚动）的网站，操作引发了动画，讲述了故事。

有些普遍例子，那些页面会在你眼前将产品“装配”起来，以此展现新产品。其他则更像卡通片，有个小卡通形象跟随你到页面的每个地方。

这些动画的作用……存在争议。通常它们并没有提升可用性的意图，只是为了让用户印象深刻，为他们提供页面主题相应的环境。它们可能是在试图呈现一件产品的工艺，或是分享打造这件创造物的经历。

动画能否做到这点，取决于它们本身的质量。是否过度影响了网站的性能，或是影响了页面内容本身。如果用户在网站上找不到自己要的东西，世上所有的动画效果都救不了它。

有两个案例我的确很喜欢，它们来自深谙此道品牌：Apple和Sony。

Mac Pro的页面，致力于向下滚动时精确呈现内部构造：

同时，在Sony网站中，他们展现了多款不同设备。当然，“装配感”并没有那么强烈，各部分相互撞击，在火焰效果中成型。

纯装饰动画

无论好坏，有些人在网站上加入一些没有目的的动画，只是为了让人看到。这值得吗？

值得，也可以说不值得……

我会尽量避免，因为它使人分心。你想要人们的视线集中在商品信息和购买按钮上。让他们来此达成目的。如果网站没有提供特定的目标，或者确定目标时过于使人分心，他们就不会再回来了。

装饰性的动画应该完全隐藏起来。在人们完成行动召唤后再展现出来。还可以包含微妙的动画，只在用户触发某个特殊操作时才展现，比如鼠标悬停在页头和页尾的某个小物件上面。

在WDD网站中，鼠标悬停在logo上会让它动起来，虽然这点尚存争议。因为logo是个链接，并非纯装饰物，但它仍然是个不错的例子。Google随便一搜，就会找到很多带有彩蛋的网站（比如跳出一只哥斯拉并且咆哮怒吼……我不是在开玩笑）。

还有很多其他例子，包括Google众所周知的彩蛋，下面这个来自photojojo.com：

在任何页面一路滚动到最底部，会出现一只友善的恐龙“给你拍照”。而且在有气球的页面上，画面中的气球会微妙地来回飘浮。

广告中的动画，可以说：内心抗拒，钱包却不听使唤

广告。对于某些网站来说就是他们收入来源（咳咳），对于另一些网站则如同瘟神。给广告加上动画，duang！视线就被吸引过去了，违背了本意。这是个条件反射动作。

再加入声音，用户会感到强烈的憎恨……这也是条件反射。

但这几乎无法避免。如果想让人看广告，让它动起来就是个好方法。这可能在某些自我标榜“不喧宾夺主”的广告平台那里不受欢迎，但如果动画广告不起作用，我们就不需要它们了。

不过这种动画也有着与装饰性动画相同的问题：将用户的注意力从主要任务上分散开。这个在线销售的世界，分心就意味着死亡。

最终，衡量利弊还取决于你。没有广告、低调的广告、或是动画广告，都需要权衡。

你可能注意到了，我前面一直没提过启动界面动画。那是因为我觉得大家都已经很了解了。

动画的实现

技术实现方面也很重要，但无论你用.gif图、视频、CSS、SVG、甚至Flash（天哪），都有一些更重要的原则。暂时忘掉你打算使用的技术与技巧，再多做一些理论储备。用户会感谢你的。

性能，性能，还是性能

你会想，“当然，这很明显。动画应当运行流畅，不能卡顿。”正确，这在理论上确实显而易见。但问题是我仍然能看到一些网站，虽然用最新技术构建，动画却很卡。

我的Nvidia GTX 750 TI显卡要200美元。你的动画没理由卡。最近有些网站让我觉得，“《上古卷轴》运行也比这流畅。”我没有开玩笑说大话。

现在，想象一下在低分辨率的平板或手机上，浏览那些网站是什么样子。一方面，这是个检验个性的方法，但另一方面，它无法给这些龟速网站带来任何业务。如果你的印象中只有卡顿的动画，或者压根没有动画，那还不如让界面元素直接各就各位。

这就是说，那些加入了诸多动画和特效的网站也不怎么样，它们需要加载界面和进度条。没有人在看到想要的信息前，有义务等待动画加载。让人等待，就是你业务流失的方式。

我们将这些分成几点：

如果《上古卷轴》比网站的桌面端运行更流畅，那很糟糕。
如果用户看到主页前要等待加载动画，那相当糟糕。

在此我要给出一点技术层面的建议：考虑了硬件加速和性能之后，CSS几乎总是优于JavaScript。有选择时，使用基于CSS的动画，将JS作为备选。

从细微处开始

将动画当作设计工具而非样式表现时，最好从细微处着手。比如，微小低调的动画表现更好（见上一章）。第二，巨大炫目的动画必须带有实用的目的，不能只为了“好看”。

除了那些让UI元素感觉“真实”和接近自然的动画，多数网站都不需要任何动画。想像一下婚礼上撒米祝福的场景，加入那种视觉差滚动效果之前，问问自己，它真的改善了用户的体验吗。巨大炫目的东西在屏幕上四处移动，比常规文字和美丽的图片更能告知和引导用户吗？

多数情况下，答案很可能都是“不”。当然也会有例外。例外总是会有。但多数时候，让按钮动起来，让隐藏的导航条滑入，用动画移除发送客服邮件后的成功提示，这就足够了。

微妙是好设计的关键，这点往往被低估。以此为起点，然后如果你能确信，更大更闪耀的东西在用户体验方面更符合你的目标，那么再全力以赴！

持续时间要短，或者说：我觉得有必要加快速度

动画要快，准确的说，应该发生得快。这里我不是在说性能，而是一个物体在运动过程中实际耗费的时间。

想想我们如何与真实物体互动。有时候我们动作很快，有时慢。我们操作物体的速度，取决于它的尺寸。是顺手而为的任务，还是像端着满满一碗水那样。通常我们会很快地拿起物体，快速移动。单个动作可能发生在毫秒间。

在我们度量界面动画时，“毫秒”是最通常的度量单位。再长的话，人们就会开始对机器或产品、或是两者失去耐心。得确保它够短，不然让人感觉迟钝。

对于人们反复使用的产品，这点尤其正确。即使某个动画相当有趣好玩，第10次看到时也会失去吸引力。它只是个跳动的按钮或是滑动菜单，而不是你最爱的电视节目的片头。没有人会为此随声附和。

有时要让物体具有弹性

真实物体都会回弹。有些并不明显，但基本上所有的物体都有一点弹性。如果将它从足够高的地方扔向坚硬的表面，而且如果没有太大的空气阻力的话……总之你懂我意思。

与UI元素交互就像在操作硬质的小物体。将它们抛到一边，它们回弹一点。扔下去，也会回弹一点。

因此这很有帮助，适当时候让你的动画“回弹”，尤其是当它们垂直移动的时候。这都是在维持运动感。

物体不会突然停止

移动中的物体需要一些时间才能静止。静止物体需要一定时间加速。耶，物理现象！

所以，当你使物体移动或停止时，记得给他们一些时间（以毫秒计）来减速或加速。这个叫做“缓动”，这个功能被置入了CSS中。

链接

终极指南如果没有一个满是链接的章节，就是不完整的。下面来了。我们整理了一些文章链接，围绕网页动画背后的基本理论、入门教程，还有大量案例。请尽情享用。

网页动画理论

开始做动画前还想了解更多信息？没问题。这儿有一大堆聪明人的建议，其中一些还对网页动画的未来作了预测。

Animation Principles for the Web 这篇文章围绕CSS动画。描绘了运动物体背后最基础的原则。仔细看看他们网站的其余案例、教程和邮件课程。（不过，邮件课程是收费的）

Invisible animation Steven Fabre告诉我们动画要如何像设计本身那样，基本不可见。读了之后你就不会觉得这句话矛盾。快去吧。

Will animation be the big UI trend of 2015? 对于动画的指导原则做出了一些很棒的推测性的阐释，如果再短点就好了。

The Role of Animation in Web Design 另一则简单基础的建议。短小精悍，当你每次需要做出动画方面的重要抉择时，都值得回来重读一遍。可以将它作为记录思想的便条。

The State Of Animation 2014 Rachel Nabors出品，一套非常棒的总览，（或多或少）讲述了网页动画是如何完成的。你还会见到她的名字好几次，因为她是这个领域的专家。

Five Ways to Animate Responsibly Rachel Nabors的又一篇干货（我早说过还会看到她的作品……）。这篇中，她重温了5种加入动画同时不会疏远用户的方法。

教程

关键在这里！学习更多你想都没想过的CSS属性。学习easeIn和easeOut的区别——其实我也要查阅一下。

4 Simple CSS3 Animation Tutorials 跳过简介部分，直达干货，如果这样符合你习惯。我在下面还包含了很多引导性的教程。如果你想直接看一些基础代码，请由此开始。

A Beginner’s Introduction to CSS Animation 正如标题所描述的。只要你有基础的HTML和CSS知识，就能跟上这个教程，掌握一些有用的基于CSS的动画知识。

The Guide To CSS Animation: Principles and Examples Smashing Magazine为读者奉献了大量的基本动画。这是简单却有价值的知识。

Flashless Animation 又一篇很好的CSS动画介绍，传奇的Rachel Nabors出品。没错，它是2012年的文章，但那时与现在的唯一区别，是她提供的技巧如今得到了更多浏览器的支持。

Codrops tutorials 我说真的，Codrops的这些家伙，推荐多少次都不为过。他们创作了大量的案例、概念样品、灵感收集，当然还有教程。他们热爱动画，并且做了许多来分享他们的爱好。

这里是一些他们创作的动画相关的教程：

CSS3 Transitions, Transforms, Animation, Filters and more! 深入全面的交互教程，大量生动的案例。当你完成了大部分基础教程，可以来这里看看。它给你很多用于练习的创意。

Transitions & Animations 一篇简易CSS动画教程，特别关注transition和相关属性。

Shaking Up The Web With CSS3 (How To Make Links Shake) 重点讲述晃动物体的教程。我是指……看看就知道了。

High Performance Animations 这篇教程由众人爱戴的Paul Lewis和Paul Irish联合创作完成，关注如何在不拖慢浏览器的情况下完成动画。由于这点在移动端尤其重要，很值得一读。

Tutorial: Using animation-fill-mode In Your CSS Animations 在学了这么多让物体运动的方法后，还可以学着处理那些尚未移动、或是运动完成的物体。有时候样式会很棘手，这就是为什么需要animation-fill-mode属性。

Keyframe Animation Syntax css-tricks.com提供的一些非常有用的片段。不记得如何设定keyframe来达成目标？收藏这篇，就再也不用担心了。

A Look Into: Cubic-Bezier In CSS3 Transition 这篇完全是关于时间。我是指动画字面意义的时间。更确切的说，是讲述使用贝塞尔曲线来使动画节奏适中。

弹跳物体！ 我发现两个不同的教程，讲述如何打造弹跳动画。每个都采用了不同的方式，有一些其他所没有的内容。犹豫不决之余，我干脆把两者都放出来。

Create a CSS Flipping Animation CSS Transitions, Transforms & Animations – Flipping Card

Animating CSS3 Gradients 多数动画教程都假定你是要改变物体的几何形体或在页面上的位置。这篇则教你如何改变他们的内部……在本例中是指渐变。

标题图：动画图片，来自Shutterstock

原文链接

作者信息： EZEQUIEL BRUNI Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy. More articles by Ezequiel Bruni

网页设计的未来深藏于建筑史中

hi@victor42.work (Victor42) — Sun, 17 May 2015 01:09:00 +0000

[国外设计第86期]

西方建筑史对于网页设计的进化有重大参考意义。作为一种艺术形式，两者都遵循以下事实：

它们是人们前往的地方。
它们都承担着这件务实的工作。
科技的演进在限制着工程技术。
还有，它们至今绝对仍属于艺术范畴。

在这些限制条件下，两者的演化路径惊人相似，都建立在过去的基础上，以近似的方式产生影响。如果想知道网页设计将去向何方，可以看看建筑领域发展到了什么地步。

1. 新石器时代

简单、有限的结构

巨石阵，公元前3000-2000年；W3.org，1992年

除了稍微调整了尺寸和位置，它只是把东西摆在相应的地方。

2. 古典建筑

秩序与均衡，略带修饰

巴特农神庙，公元前437年；Yahoo.com，1996年

古典建筑时代精炼了对称与层级，采用了泾渭分明的区域划分，承担不同的用途。所用媒介（石头、像素）的外观也效仿先前的材质：石质的三竖线装饰象征着木质横梁，就像用3D按钮表现物理按键。

3. 罗马式建筑

更厚重的形式与更圆润的边缘

玛丽亚拉赫修道院，公元1093年；Apple.com，2000年

柔化边缘的同时，罗马式建筑时期也加厚了隔墙——菜单和按钮也一样——创造更庞大、厚重、易点击的形式。

4. 哥特式建筑

华丽、令人着迷

兰斯大教堂，公元1211年；Maroon5.com，2005年

CSS和FLash就是网页设计中的彩色玻璃。基本元素到位，我们就开始选用看似不可能的材料。哥特式建筑将石头变为反重力的壮举，令人屏息。虽然如今难以记得，那些早年的Flash和CSS网站，仅凭像素就使我们惊异不已。

没错，我将早期的Maroon 5网站与兰斯大教堂进行了对比。

5. 文艺复兴时期建筑

干净、精确、合乎逻辑

维琴察圆顶别墅，公元1567年；Rdio.com，2012年

这就是我们如今的阶段，近年来的“扁平式设计”趋势，与文艺复兴时期建筑惊人相似。文艺复兴建筑呼吁古典逻辑的回归。简单的几何学形式取代了华丽的复杂度。设计变得更干净。人们开始发表新准则的论述，一切都在变化。

接下来，我开始走进未来…

6. 巴洛克式建筑

扭曲一切准则

罗马圣卡罗教堂，公元1638年；未定义，2017年

合乎逻辑、保持精确的乐趣只持续了这么久。最终我们开始打破规则。在建筑设计中，这意味着真正打破部分古典元素，将他们扭曲成某种复杂的形式。与文艺复兴时期的理性主义相比，巴洛克式设计更富于情感和戏剧性。

我们在网页设计上会怎么做？这很难说。只要再等等，它几年内就会显现。

7. 新古典主义

Harkening back to the past

聆听过去

先贤祠（巴黎），公元1790年；未定义，2022年

一切周而复始。一旦获得足够的进展，我们会开始赞美最初的经典，全面复古。只要一定时间。新古典主义网页设计就在遥远的前方——虽然旧时代的Yahoo网站在我们看来很逊，并不庄严。但是6、7年后呢？它可能又很酷了。

8. 在那之后，谁知道呢？

我们大概知道了。它会类似于新罗马主义或是新哥特式的形式。总之是某些新形式。艺术会持续以复活重生的形式延续自身。最终呢？新的科技和新世界观会到来，我们如今是无法想象的。

然后一切开始变得神奇超然。

原文链接

作者信息： Mike Sall Product Science at @Medium

17个绝美的初创公司官网

hi@victor42.work (Victor42) — Sun, 10 May 2015 00:12:00 +0000

[国外设计第85期]

初创公司是非常有意思的业务模式，员工都雄心勃勃、奋力工作、思维卓越。

就我自己而已，我与很多初创公司协作过，我喜爱这种快节奏的环境。不过我最喜欢初创公司的一点，是它们极为重视产品与网站形象的设计。这些公司为了积累指数级的增长押下重注，所以设计被摆在基础的地位。

我收集了17个初创公司，它们成功打造了惊艳的网站。

初创公司网站案例

Exposure

如果你喜欢摄影和讲述故事，你就会喜欢Exposure。他们是一个照片平台，充斥着全世界人们不可思议的照片故事。页面很简单，但焦点很清晰地落在了照片上，这点很有利。搭配上干净鲜明的非衬线字体，页面效果就会非常好。

Nobly

Nobly是个社交app，试图连接想要做好事的人们。首页焦点区域非常抢眼。在鲜明的紫色背景上，是他们巨大的白色logo。这是最重要的入口，或者说欢迎页面——它很有效。

The Fernmway

Fernway是个旅行资源网站，专为想探索新目的地和新体验的人而生。如果你即将踏上旅途，一定会有兴趣的。即使你只对好的设计感兴趣，它也很不错。Fernway的布局似乎受杂志排版设计的影响，而且行之有效。深色的网站非常简洁，但展示效果相当好。

Flowmail

Flowmail为电子邮件简报而生，他们有着最干净的着陆页。除了3项重要议题和注册表单，屏幕上鲜有其他信息。恰如其分地传递了一个信息：他们能以优雅、简洁且有效的方式做事情。

Xero

Xero是个专注设计的在线会计软件。主页为潜在用户提供了大量信息。这些信息被精心排列过，看起来很棒。有他们自己的风格！

Assembly

Assembly是各种不同背景的创造者的在线社区——汇集了设计师、开发者、市场专员等——让他们相互接触、雇佣，合作项目。这是个建立在信任与团结之上的杰出社区。了不起的品牌形象反映出人们之间的连接。品牌的外观与感受很友好、欢乐、吸引人；这更激发人们成为社区的一份子。

eRated

如果你是在线零售商，名声非常重要。eRated提供此种便利，让你追踪名誉并帮你改善它。网站充斥着厚重的大号字体，还有彩色的图标和图片。所有这些都营造了友好和可信赖的氛围。

Brewster

Brewster是个为你记录联系人的app。他们对设计理解很透彻，因为长年来，着陆页和app本身就以启迪性著称。它现在的着陆页区别于其他典型的高端华丽，他们用卡通形象替代，有助于使品牌更加友好亲切。它与众不同，令人耳目一新。

Squarespace

Squarespace是个网站平台和网络主机服务商，专门帮助人们和公司完成高品质和高端的设计。它的风格很简单、清爽和精致。他们很好地运用了文字、留白、比例均衡和照片，打造了非常杰出的网站平台。

Rdio

Rdio能在线试听音乐，最新一次改版很有意思。他们摈弃了典型的网站布局，创意颇具实验性。为了强化创意设计的方向，他们选用了鲜明的色彩。网站看起来很棒，它欢快、乐观、激动人心。

Kissmetrics

Kissmetrics的着陆页是极简设计，刚好切中要害。这个统计分析类的网页应用通过中分来利用屏幕空间，只有行动号召放在一侧。另一侧是一张完全不相关的美丽照片。这很有效，因为很多人已经知道Kissmetrics是什么，他们除了一个注册或登录框以外，什么都不需要。

Virb

Virb是个网站创意平台。这个网站很华丽，使得注册他们家的服务更令人信服，也更便捷。他们很好地运用了照片贯穿全站。

Evernote

Evernote是人尽皆知广受喜爱的产品。然而，Evernote的那些家伙深谙公众证言的力量，他们推出Adam Savage和Jamie Hyneman作为他们的超级用户之一，酷到了极点。它现在不仅仅是产品看起来如何，还借用他人名义，成倍放大app的体验。

Narrative

Narrative是一款可穿戴相机。随着页面滚动，着陆页突出展示了这款设备的正面和内部。周围都是由这个app所拍摄的华丽照片。它很好地讲述了产品故事，通过它，你也能拍出这么棒的照片。

Square

Square因为高品质的设计标准声名远扬。网站和产品经年累月进化，但他们对风格的绝佳把握始终如一。他们对字体、照片和颜色运用恰到好处——设计非常干净，并且像素级精准。

Hotel Tonight

Hotel Tonight是个可以预订当下酒店房间的应用。他们的着陆页呈现一种紧迫的外观和感觉——就像app一样。像他们这样的产品，有点亲密的感觉会很有趣。而且，他们的着陆页充斥着优秀的高质量照片，都是你可能投身或向往的地方。

Geckoboard

Geckoboard是一个展示公司指标的平台。他们的产品——还有他们网站——都清晰地表明数据未必是无聊乏味的。他们的品牌涉及一些微妙而优雅的设计元素，例如绝妙的配色和精心挑选的字体。

结论

初创公司一次次证明，大力投入设计能够取得成功。如果设计做得到位，它会迫使我们尝试新事物，让你了解一些使你一见倾心的产品和公司。我希望这17个网站确实对你有帮助，使你理解设计是件大事。并且在你下个项目中，这些公司的美妙设计能给予你启发。

我个人倾向于极简而鲜明的设计，这些网站中你最喜欢哪个？可以在评论中留下你的想法。

原文链接

作者信息： Paula Borowska Paula runs a user experience blog BeingLimited and an author of an upcoming book about mobile design, the Mobile Design Book. You can connect with her on Google+.

避免3种响应式设计灾祸

hi@victor42.work (Victor42) — Sun, 26 Apr 2015 11:42:00 +0000

[国外设计第83期]

响应式设计方法对开发者非常有用，因为它使我们的内容在各种设备上广为传播。不用保留几个独立版本的网站，也可以摒除诸如缩放和流式布局这些方法的弊端。

本文重点讨论设计师遇到最多的3个响应式设计问题，也会提供一些规避错误的策略。

缩放、流式布局与响应式

这些术语容易造成混淆，设计师常常错误地交替互用。实际上，每个都是布局技巧的显著进化过程，像技术演进那样逐一显现。

缩放布局，旨在相对缩放每一个元素。它们会随着窗口大小变化动态缩放内容，就这方面而言，它们是响应式的。布局本身保持静止，通过改变每一个元素来保持一致的表现。

上图：不同分辨率下缩放布局的例子，这种设计为了统一牺牲了易读性。

流式布局就不一样，因为它们随着窗口尺寸缩放容器元素。通过em这类相对单位可以做到这点，克服了缩小文字的问题。用户主动缩放时，设计就被破坏了。

上图：不同分辨率下流式布局的例子，这种设计为了易读性牺牲了统一。

响应式设计不会缩放任何东西。相反，它会根据窗口尺寸决定显示哪些内容。

上图：不同分辨率下响应式布局的例子。

灾祸1：菜单折行

如果在页面顶部使用了导航栏，当页面展现在小屏幕上时，响应式设计通常会把它“掰”成更紧凑的格式，但这并非总是有效，如果显示区域比断点更宽，又不足以在一行显示所有菜单项的话。结果会导致菜单的折行。

有些方法可以解决这个问题。其一，减少导航栏中横排菜单项的数量，将它们分门别类。然后选中某类时，你可以通过下拉菜单来显示子类。

其二，减少断点的数值。应该以导航栏开始出问题的实际数值为准，而非具体设备尺寸。

其三，不同设备使用不同方式，例如滑动抽屉。

灾祸2：使用固定宽度图片

内容区域通常都随窗口尺寸变化。所以当固定宽度图片超出显示区域时，图片就被裁剪了。

上图：糟糕的固定宽度图片例子，它太大了。于是出现了滚动条，内容被推到屏幕之外。

通过给图片设定相对单位，可以避免这个问题。或者使用支持响应式的框架（比如Bootstrap），使用响应式图片class名来控制（例如class=“img-responsive”）。

上图：同样的元素，用响应式图片class名的方式，滚动条就不见了。

灾祸3：元素的扭曲

这有点晦涩难懂，但本质上，布局显示在小窗口上的时候，所有未经处理的列都会以行的形式呈现。这是个问题，因为内容的扭曲会不经意地改变设计的层级。

上图：列变成了行，扭曲了内容。

解决方法显而易见，但令人惊奇的是，仍有很多人在纠结它：只要明确地设定元素的宽度、高度、内边距。如果它移出所处位置，盖住了其他元素，可以通过将它包裹在div容器中，设置外边距，迫使它回到原本的地方。

规划有助于避免问题

本文只讨论了3种最普遍遇到的响应式设计灾祸，还有很多其他途径会毁了一个好的设计。预防错误并不难。现代浏览器都有内置的响应式布局测试，好好规划设计，多做测试。

原文链接

作者信息： EMMA GRANT Emma Grant is a professional freelance content writer from Ireland. Over the past three years she has travelled the world while running her business from her laptop. You find her at www.florencewritinggale.com More articles by Emma Grant

在响应式项目中连接设计与开发

hi@victor42.work (Victor42) — Sun, 12 Apr 2015 00:18:00 +0000

[国外设计第82期]

优秀的网页项目，不会单靠好的设计或是开发就能成功——它也需要设计师与开发者的沟通与协作。

我看过相当多的设计师与开发者由于缺乏沟通而糟蹋了项目，结果导致关系恶化。我也见过很多初学的设计师和开发者，通过团队协作创造出惊人的结果。他们避开了潜在陷阱，及时发布项目，并且迅速迭代。这种协作不仅对项目有益——善于沟通协作的团队也是一个更快乐的团队。如果任务并没有如愿进行，也会有更少的误解与紧张。

设计与开发的协作，在响应式网页设计（RWD）项目中尤其重要。各团队如今都要应对大批设备。固定的、“像素精准”的设计，如今该让位于流动的百分比设计。而且，图片资源也需要为多种设备尺寸与分辨率进行优化。

简而言之：响应式设计带来更多变数，需要交付更多资源——这也会导致更多问题。我发现一些技巧，可以克服这些障碍。

1. 首先关注“最极端”的屏幕尺寸

如果对此存疑，可以根据网页的一般经验设定屏幕尺寸范围：iPhone尺寸和桌面浏览器展开。

尽管有些设计师直接“在浏览器中”创作，一开始就完全是流式布局。但多数设计师仍然从固定尺寸开始：选定一组屏幕宽高，以此绘制效果图。

但这提出几个问题：你对开发团队重视到何种程度？应该首先交付哪些高保真资源？由于技术限制需要先考虑哪种设备？

我一直都建议从最“极端”的用户设备入手——最小和最大的设备尺寸。如果对此存疑，我建议以此为2015年的网页用户标准：

320 x 568像素（iPhone 5竖屏）
1600 x 1000px（桌面浏览器展开）

注意：你的用户可能存在差异，所以要看数据分析来定义你的“极端情况”。

“为最小和最大的设备尺寸设计，以此为响应式设计项目的起点。”

先应对最小的屏幕尺寸，这会迫使你做出艰难的选择，选出设计中最重要的功能。大屏幕尺寸则让人从另一个方向思考：最多包含多少内容？文字段落是不是太宽不易阅读？下拉菜单元素需要额外留白吗，如果需要，多少才能避免给人脱节的感觉？最后，选定最小和最大屏幕，通常需要你思考至少两种输入方式——最小的屏幕基于触摸操作，最大屏幕则使用鼠标和键盘操作。

可能最重要的是，当你应对极端情况时，你是在同时处理两种尺寸。并非完全绘制出一种屏幕尺寸，而后去适应另一种。那样会引发设计与开发的冲突。

2. 在各个断点之间讨论内容布局

既然在静止线框图和排版上投入这么多，就千万要记住，响应式网页设计天生是流动的。这意味着众多网站用户体验到的，是你设计的“中间”状态。所以几乎每件设计，都需要考虑特定尺寸间必要的布局调整。比如当尺寸减小时，内容可能会收缩，图片减少为单列。

要避免主观臆断，认为开发团队能够或是应该实现那样的布局调整。尽早行动，先知会你的开发团队，避免他们陷入太深。对于特别复杂的布局变化，最好另外绘制一张线框图或效果图来说明。特殊性不太重要的情况，通过简单的讨论，或者用邮件描述这些变化就足够了。

3. 尽早制定资源图策略

很多响应式图片需要多套资源。我个人网站的主页头图，根据屏幕尺寸和分辨率不同，会从6张不同图片中选择一张呈现。

图片格式与尺寸，通常是设计师与开发者之间的障碍。你可以使用PNG、JPG、图标字体，或者用SVG实现更小的元素或图标。并没有哪个是正确答案：一切都取决于内容和可用的资源。但重要的是对某种格式达成一致，坚持使用它。而且随着网页项目的进行，你还可以创建一些常用图片尺寸。

不过对于如今的响应式设计，这只是刚开始。你要至少输出2套位图资源（JPG）：1套给普通显示器，一套给高分辨率显示器。高级的响应式图片技术，需要更多套资源适应不同屏幕尺寸。

避免到项目末尾再决定响应式图片格式。至少要有一套像素密度显示策略。看看srcset和Picturefill，来保证良好的跨浏览器支持。如果感觉太过了，就从简单入手。用srcset属性来更换一些图片元素，这是个好的开始。看它如何处理，然后由此展开。

4. 微观的思考，模块化的设计

我的响应式设计工作流程深受Brad Frost的Atomic Web Design和Jonathan Snook的SMACSS影响。两者的框架都依赖小型、可复用的组件，以此为基础打造强大的网站结构。

对于交付给开发的资料，我喜欢先专注于小型、可复用的组件。因为它们在不同设备上，通常表现出同样的体验和外观。这样的统一性有利于开发团队消化。另外，小组件通常更容易跨页面复用。所以如果你设计了一套有效的解决方案，之后再重复使用就非常简单了。

小组件通常在不同设备上表现出同样的体验和外观。这样的统一性有利于开发团队消化。

假设你在设计一个注册页面，有标题、大幅图片和表单。根据设备不同，这些元素可能会变换交错或是改变尺寸。起初，要同开发团队一起专注于注册表单的小细节。它看起来是怎样的？需要怎样的验证？相对鼠标键盘，触摸输入会使表单发生什么变化？

5. 从开发者那里获得视觉与用户体验的反馈

有些设计师把开发者阻挡在产品会议、可用性讨论和其他反馈机会之外。只有一个启动仪式，交付一些资源，和一点点其他东西。这是错误的。

要记住，经验丰富的开发者掌握大量知识。如果他们与产品接触了一段时间，他们可能也有独到见解。

前端开发者和设计师的技能通常是重叠的。越来越多的设计师自己写代码。开发者也在刻苦钻研快速原型设计、线框图和美术设计。响应式设计加剧了这项趋势。即使没有“设计师”的头衔，一名开发者也可以表达出强有力的设计见解。

我们得承认，角色与责任的独立仍然有其价值。但稍加融合便可显著改善最终产品。所以，在你的下个可用性测试中，请一位开发者加入来讨论最终产出吧。或者如果你在进行一场设计头脑风暴，或许应该邀请一些开发者。

合作很重要

所有这些技巧都需要规划和认同。由于注重产品发布与截止日期，这就难以做到。但设计与开发关系良好对任何网页项目，尤其响应式设计项目都是有益的。初期的小投资，会为你的团队带来指数级的回报。

原文链接

作者信息： Nick Schaden, Web Platform Lead at Pocket At Pocket, Nick oversees development and design initiatives on Pocket’s web app, Chrome packaged app, and marketing web sites. He has extensive experience introducing and integrating responsive web design, both at Pocket and previously at Animoto, a video startup based in New York. Prior to Pocket and Animoto, Nick worked in technology at Gucci and Goldman Sachs. He loves electronic music and 80s action movies. Follow me on Twitter

2015网页摄影图的流行趋势

hi@victor42.work (Victor42) — Sun, 08 Mar 2015 13:11:00 +0000

[国外设计第77期]

提到设计，运用摄影图是其中一项基本手段，每件设计都或多或少都会用到。本文要剖析的并非摄影图本身，而是网页设计中运用和掌控摄影图的流行趋势。

其中有些显而易见、广为人知，其他则频频使用，却鲜有提及。当我们将同类趋势收集整理成套，对此概念的认识则会超乎我们想象。而且，像这样把各种趋势对比着看，我们似乎会发现当下采用的方法并非最佳，可以找到更好的替代方案。

1. 巨幅背景图

首先考虑一项最盛行的趋势。以下是一系列运用巨大照片作为背景图的网站。毫不夸张地说，这是一种快被消灭掉的方式。但这并不是说就该禁止使用。每种趋势都有它的意义。撰写这个章节时，我的任务就是寻找那些没有把这种风格作为权宜之计的网站。相反，我找的网站都带着目的运用它，背景摄影图在传达网站信息方面，扮演着重要角色。浏览以下案例时请牢记这一点。

2. 背景搭配前景内容

有的设计师聪明地将摄影图同时作为背景和前景元素，对巨幅背景图做的这种变通深得我心。在这些设计中，照片以装饰性的形式填满整个背景。同时突显了照片中的某些元素。这通常是通过纵深来实现的，产品或前景元素被置于焦点区域。这种视觉区域的混合，使照片具备一种格调，同时内容也意图鲜明。这种颇具挑战的方式，需要对照片有所规划和协调，以下是我最喜欢的一些案例。

3. 单色照片

对设计师而言，把照片“PS”一下来适应设计并不新奇。这个系列采用同一种特定方式，将这个概念发挥到极致。设计师将照片转为单色，尤其是非黑白的方式。尽管多数时候，这或许是风格上的决策，但我认为不止于此。颜色可以确定基调，传达出微妙的信息。通过在照片中运用单色调，设计师能反映出单一的情感。蓝色使人感到安全、稳固和协同。红色使人感觉兴奋、鲜活、充满能量，诸如此类。通过将照片转为单色风格，它呈现出一种新的传达方式。

4. 柔和色照片

这个系列的案例风格可能极度盛行，但老实说，它确实很时尚，而且有点使用过度。但是当我挖掘这类风格的案例时，我发现它并没有我们想象中那么流行。这些网站基于色调柔和的照片。更明确地说，这些照片都有一种褪色、近乎复古的风格。最常见的是搭配白色文字，置于照片上方（下面5个案例中都有）。这种方式与潮流风有密切关联，去年非常流行。最后，我很惊奇地发现，在我找到的这些案例中，几乎每个都利用了装饰性字体，置于照片之上。

5. 营造基调和氛围的照片

作为老师，我发现有些事总要我一遍遍地指导学生。其中之一就有关照片的选用。通常设计师会使用装饰性照片，不会直接传达出任何网站相关信息。比如，第一个案例是一组太空摄影集。它表面上并没有表达出任何品牌相关内容。在从前，我的观念中对这类装饰性照片的选用相当严格。随着对于照片运用的深入探索，这个观念逐渐趋于缓和。这就是我喜爱剖析趋势的原因，这样我们可以打破主观臆断，为我们的设计发现崭新的途径。这些案例证明，营造基调和氛围的装饰性照片，对设计的成功非常有意义。钻研这些案例，看看你是否同意。

6. 整理术

最后，来看一组在照片中运用了整理术的网站。整理术是将物体平行或者90度排列，来创造一种条理。这种方式非常小众和独特，设计师们很少使用这种风格。同样的，这种风格通常和潮流风设计有关，但不止于此。这些照片反映出内容之外、照片本身的含义（这当然是有意义的）。它们暗示着照片背后的品质，透露出一丝秩序、方法和条理。这些是好的品质，尤其是用来指代设计师和机构。

结论

摄影图片是设计师最天然的工具。通过研究这些使用方式和多种多样的风格，希望你能发现新鲜的灵感。总而言之，我希望这个简陋的案例集能帮你发现新鲜创意，为你的工作带来启迪和挑战。

原文链接

人眼如何浏览网站

hi@victor42.work (Victor42) — Sun, 18 Jan 2015 00:32:00 +0000

[国外设计第72期]

要创造正确的视觉层次，你就要理解我们的眼睛如何处理信息，UXPin的Chris Bank说。

Chris Bank，来自UXPin——一款线框图、原型图app，在本文中阐释了网页UI设计中创造视觉层次的原理和惯例。可以在这本免费电子书网页UI最佳实战中，看到超过33家公司的UI案例分析报告。

一个艺术大师除了要具备创造力，还要考虑一些细节问题，比如写作、用色、尺寸、包含哪些内容，可能更重要的是舍弃哪些。这可不是容易的事，所以我们才会对达芬奇和梵高这样的大师推崇备至。

网页UI设计师也应该如此。这本免费电子书网页UI最佳实战中讨论过，网站也是视觉艺术的一种形式，以它独有的方式，它要遵循很多传统艺术形式的规则。这是审美的科学，掺杂了一些商业准则，非比寻常的网站界面，必须让人感觉毫无压力、引人入胜。

本文中，我们首先看看视觉层次是什么，如何创造，然后我们再了解它如何在视线的自然运动中发挥作用。

###组织视觉

Luke Wroblewski，专栏作家兼雅虎产品设计高级主管，在他的的文章通过视觉层次沟通中阐释了网站界面的视觉表现在以下方面的重要性：

通知用户——像一只无形的手，界面应该引导用户一步步采取行动，却不会让用户感到压迫。比如当你向下滚动，支付服务商Square引导你了解它的价值所在，每一步都有相关的引导号召你采取行动。
传达内容之间的关联——界面展现内容的方式，应该符合用户对信息的优先级理解。例如，人气设计网站Abduzeedo在顶部包含了清晰的分类，推荐内容在中间，底部则是详细的分类。
影响情绪——人们去餐馆可不只是为了食物果腹。他们要的是口味、质感、外观，还有令人难忘的环境。界面设计也一样，而且假如你建立了积极的情绪响应，人们可能更容易谅解网站的缺点。比如Wufoo就是个完美案例，界面非常实用且令人愉悦。

你的UI设计，最终目标是要解答以下三个问题：

这是什么？（有用）
如何使用？（易用）
关我什么事？（渴望）

###人眼的可预见性

不论是角落的匆匆一瞥，还是对某个路人的仔细打量，人的视线总是自动聚集在某些特定的兴趣点上。虽然这点因人而异，多数人还是容易遵循某种明确的走向——也包括如何浏览网站。

来源：Nielson Norman Group；www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

在一篇关于视觉原则的文章中，99Designs的设计专栏作家，Alex Bigman，谈到了在左向右阅读的民族中，两种占据主导地位的阅读模式。我们依次来看看。

###01. F模式

通常体现在文字密集的网站中，比如博客，读者首先沿着左侧的文字垂直向下浏览，从每段的前几句寻找他感兴趣的关键词或要点，F模式由此得来。

当读者找到了喜欢的东西，他们就开始正常阅读，构成了水平线。结果就导致了看似字母F或E的路径。CNN和NYTtimes两者都使用了F模式。

Nielson Norman Group的Jakob Nielson进行了一次易读性研究，基于232名用户浏览上千个网站，还有F模式涉及实践的详尽说明

用户很少逐字逐句阅读。
前两段最重要，应该包含你的营销妙语。
起始段、副标题、重点列表中要带有诱人的关键词。

它会如何影响网站的界面设计？请看下图。

来源：理解F型布局；www.webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-de…

图中可以看到，数秒钟内就能看到最重要的内容，下方立马接上更详细的内容（还有行动号召），方便快速浏览。

对于想要嵌入广告和行动号召，又不希望内容被淹没的网站，F模式非常有帮助。切记，永远是内容为王，侧边栏的存在是加深用户的参与。和其他所有模式一样，F模式是一套指导方针——而非模版——因为读过F中的头几行之后，F模式可能会让人感觉枯燥。

###02. Z模式

Z模式浏览发生在不以文字为核心的网站中。读者首先浏览页面顶部的一条横线，不论是因为菜单栏，还是出于在顶部从左至右浏览一遍的习惯。当视线到达尽头，它会飞速向左下移动（这也是出于阅读习惯），在页面下方部分重复水平方向上的搜寻。

来源：理解Z型布局；http://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web…

Z模式几乎可以运用于任何网站界面，因为它满足了网站的核心需要，比如层级、品牌、行动号召。Z模式对于简洁至上、核心是行动号召的界面效果最佳。

在一个内容复杂的网站中强行使用Z模式，或许不如F模式来得奏效，但Z模式有助于带来一些秩序，导致布局的简化（还有转化率的上升）。牢记以下几则要点：

背景——分离背景，让用户的视线停留在网站结构内。
1号点——这是你logo的最佳位置。
2号点——增加一个彩色的次要行动号召，有助于顺着Z模式引导用户。
页面中央——页面中央的焦点轮播图能把顶部与底部区域分离开，引导视线顺着Z模式流动。
3号点——增加图标，从此处开始，顺着横轴移动，能将用户引导至4号点的最终行动号召。
4号点——这里就是终点了，是你主要行动号召的最理想位置。

预测用户的视线如何移动能带来巨大的优势。在页面上排布元素之前，通过优先级找出最重要和最无关紧要的元素。一旦你知道要给用户看什么，将它们置于各种模式的“热点区”，创造正确的交互，简直易如反掌。

你甚至还能在整个页面中贯穿和延伸Z模式，如果你觉得在行动号召之前还有更多有价值的主张，可以重复运用1-4号点。

作者：Chris Bank

Chris Bank是一名发展经理，就职于UXPin，一个创造响应式交互线框图和原型图的UX设计app。

原文链接

单页网站设计指南

hi@victor42.work (Victor42) — Sun, 11 Jan 2015 13:45:00 +0000

[国外设计第71期]

单页设计，是一项处理小型网站的绝佳技巧，甚至有些网站你可能认为一张页面搞不定，也同样适用。从易于维护，到减少带宽占用，使用单页网站的好处不胜枚举。

假如你应对的是个小型网站，通常只有几个页面的那种，可以考虑使用单页设计，看看它是否能简化项目，对用户更加友好。继续阅读，你将了解它的益处，何时使用（或不该使用），还有一些你该遵循的绝佳惯例。

##单页设计的益处

很显然，单页设计并非所有项目的理想选择。但假如可能的话，有一大堆理由使用它。

###直观易用

默认情况下，用户要浏览单页网站，只要知道如何滚动就行。你也可以加入箭头或其他浏览暗示，但除了少数例外，其实滚动就足以让用户在各部分间穿行。

完全不用担心用户身陷多层导航中，无休止地寻找他们所要的东西。如果页面上有多个部分，页头或其他导航链接通常很有帮助，不过即使没有它们，网站仍然是可用的。

###维护起来更快速、更简单

这点并非既成事实，编码良好的单页网站，或许编写起来比多页网站更快。设计过程有时可以花更少的时间，尽管这取决于单页网站的复杂程度。

一旦你脑海中有基本的布局，单页网站还能利用某些特定的设计约束来加快进程。尤其较之于多页网站而言，单页网站各个部分要保持无缝衔接。如果你已经明确哪些能做哪些不能，这类约束的确能加速页面开发。

维护也更简单。当你只需要处理一个页面，维护工作就大大简化了，只要网站本身编码良好。

###它迫使你进行简化

这条构筑了上面一点。当你只有一个页面要处理，你不得不把一切简化为它们最基本的形态。不再需要一页页毫无用处的市场宣传。你必须直截了当、开门见山。

###更具SEO潜力

高质量的站内链接，是网站在搜索引擎中的表现的重要组成部分。尽管搜索引擎并不是很多网站必须的最大流量源，它们仍然重要。

单页网站的链接总是指向自己。搜索引擎抓取时，这可以增加网站的权重。

###叙事的手法促使用户有所行动

单页网站往往从叙事角度出发，这点多页网站可不擅长。这可以促进转换，激发用户采取行动。

人们习惯于聆听故事，不论在线上还是线下，所以这点有着显而易见的用户体验优势。我们儿时就开始阅读和听故事，于我们而言，这是自然而然的事情。

###易于组织

再也不需要组织一列列数不清的页面和子页面了。无需多虑每个页面是父级还是子级。也没有庞杂的导航菜单和子菜单。所有都在一页上。是要包含导航链接，还是让用户滚动，这取决于你，就看是否有助于提升用户体验。网站如果有多个页面，是绝对不会这么考虑的。

###减少带宽占用

尽管不像从前，对服务器而言已经不成问题，不过想想近年来有多少用户通过移动设备访问你的网站。减少网站的带宽占用，会赢得流量有限的用户的感激。

###消灭了移动版网站

当然，响应式设计不只限于单页网站。但即使采用了响应式设计，网站越复杂，让它适应小屏幕还是愈发困难。单页网站并不复杂，这是必然的。运用响应式设计总体来说更容易。简化导航和类似改变，也更容易成就适用于小屏幕的设计。

##要不要用视觉差滚动？

视觉差滚动可能是互联网中发生过的最美妙的事情，也可能是个被滥用的噱头，来蹂躏我们浏览器，这取决于你怎么看。无论你站在哪一方，它似乎近期并不会消失。

就我而言，我希望有时间和地方来实现视觉差滚动。这个效果对于某些单页网站大有裨益，而对于另一些则是噱头，甚至更糟：难以使用。关键是要明确一点，你使用视觉差滚动真的能提升网站的易用性吗，还是因为你觉得它看起来很酷？

如果要使用视觉差滚动，还要考虑一件事，使用Javascript还是纯CSS技术来实现。关于这两个选择，请参见资源部分了解更多信息。

##何时使用单页网站，何时不用

虽然有单页网站大有益处，但它们也不是完美的全尺寸适配方案。虽然很多时候单页网站比多页网站更合理，但也有很多时候不应该使用单页设计。

总之，假如你的网站只有少数页面，单页网站或许是最佳选择。将一切浓缩在一个页面上，能让网站整体具有更现代的外观，如果内容精简，那么单页网站可以让它看起来更丰富。

单页网站的另一个普遍案例，就是发布预告页面。它们通常是单页网站，带有新闻邮件的注册表单。多数情况下，发布预告期间面向大众的信息很容易组织在一个页面上，所以，设计这些页面时优先考虑这种风格是很合理的。

产品单一的电商网站，也是单页网站表现优秀的领域。如果你只卖一种产品，无论它是实体或是虚拟的，何必劳烦使用多个页面呢？一个简单的单页网站才是更好的销售工具。

可能你觉得更复杂的电商网站不适合用单页网站，但它仍然可行。当然，有十多种产品的网站中我会避免使用，不过单张页面也足以轻易支撑一个简单的在线商店，通过弹出窗口来承载产品详情和支付流程。

不该使用单页网站的情况十分明确：庞大、复杂，或必须保有海量信息的网站不适合做成单页网站。在这些情况下，使用相对传统的网站结构更加明智。

##混合型网站

虽然有大量的单页网站存在，但也有很多混合型网站。它们给人印象是个单页网站，但通过ajax、弹出窗和类似技术，它们事实上包含了多页内容。

网站Dang & Blast就是这方面的绝佳案例。

如果无法让所有东西彻底融入单个页面，这会是和很好的解决方案。

说到单页网站，某些站点用了某种“取巧”的办法。它们的主站是个单页网站，但在其他域名下也有个博客（有时是Tumblr或托管在WordPress.com的网站）。这么做没有问题，它能突出主站的信息，也不用舍弃博客带来的好处。

##单页网站的绝佳惯例

优秀设计的多数准则，在单页网站中仍然适用，其实也适用于任何网站设计。还有一些额外的东西需要牢记，其中有些之前已经提到了。

###保持简单

设计如果对于你试图表现的内容而言过于复杂，对你和你的用户都没有任何好处。相反，要尽可能简化设计和内容，还能表达出你要的信息。

###导航链接还是有帮助的

正因为用户可以通过滚动来浏览你的网站，但并不意味着这是最友好的方式。如果你的网站很长，有很多部分，这点尤其正确。除非有特别好的理由，还是应该加入直达特定部分的链接，来使你的网站更加友好。

###分割内容

单个页面不代表一整个冗长部分。实际上也不该如此。将内容根据逻辑划分为几大块，用户才能更容易找到他们所需。

###让所有的背景都有所作为

单页网站常常有大幅背景。当然，有时候这些背景很朴素，或带有平铺纹理；不过也有单页网站利用所有的空间来挥洒创意。前面提到了，这也有助于划分内容。背景未必要是单一的图片。可以是一系列图片，如果这样做与内容更相符的话。

##单页网站的资源

单页网站的资源成百上千，还包括模版；我们这里重点关注表现突出的几个。

PureCSSParallax Scrolling：Keith Clark的这篇文章阐释了如何通过纯CSS打造视觉差滚动效果。如果你不想用JavaScript（或者不懂）的话，这是个很好的选择。

Skrollr：“为剩下的人准备的视觉差滚动”。这是个独一无二的库，适用于移动端和桌面。不需要jQuery，只有原生JavaScript。

Stellar.js：Stellar.js是另一个简单易用的视觉差滚动库。它提供了很多设置选项和iOS支持。

One Page Website Wireframes：如果你不确定如何构建你的网站，这个单页网站线框图集是很好的出发点。免费下载。这里还有第二集可供下载。

One Page Love：One Page Love是首屈一指的单页网站集合，里面有超过5000个网站案例，并且一直在更新。他们还主打大量模版和其他资源。

Start Bootstrap：Start Bootstrap集成了海量的免费单页网站Bootstrap主题。主题适合机构、自由职业者、作品集、着陆页等等。

One Page Love Templates：除了丰富的网站集合，One Page Love也提供免费和收费的模版。

One Page Mania：One Page Mania提供独特的网站和模版集合，供你下载或购买。

##结论

对各种网站来说，单页设计都是非常棒的选择。尽管它们不是小型网站的唯一设计方案，对很多项目而言它都是值得考虑的。思考使用单页设计的理由，然后也思考不用的理由，再做决定。

原文链接

在网页设计中运用柔和色调

hi@victor42.work (Victor42) — Sun, 30 Nov 2014 04:18:00 +0000

[国外设计第66期]

网页中的柔和色调的使用，不止是近来的趋势，这是一项设计师使用多年的技巧，用来创造有冲击力的视觉效果。

当你听到“柔和”一词，想到的可能是淡粉色、淡蓝色、淡黄色，不过这种配色远不止这些颜色。柔和并不一定要感觉像新生儿一样。通过某些适当的方式，配合其他元素，这些色调也可以相当鲜明。

下面我们从优秀的案例网站出发，了解10种在网页设计中运用柔和色调的方法。

###柔和的照片

照片上的柔和遮罩层，或是在恰当的光照环境中拍摄的照片，可以成为精妙绝伦的网站背景。照片的色调越淡雅，设计师就有越多的区域可以放置其他元素。

使用柔和的照片同样有助于与其他元素产生反差，比如logo或按钮。请注意Solasie的logo与柔和色调的照片搭配得多么完美。这种思想也能突出幽灵按钮。

###柔和的背景色

柔和的背景色是个好主意，使用多种颜色却不会咄咄逼人。由于柔和色调更加淡雅，画布上可以使用更大面积的颜色，却不会感觉太强烈。

处理柔和背景色的一个常见的趋势，就是像Dear Mum这样，使用单色调的配色方案，对一种颜色进行深浅变化。单色调能够与白色的文字元素产生美妙的视觉对比。搭配合适的字体，这种技巧也能打造时髦的现代感。

###鲜明的柔和色

尽管你通常不会把“鲜明”和“柔和”相提并论，这类配色可以帮你创造出大胆的设计。因为柔和色容易退居幕后，所以如果你要在它附近有所动作，这是非常棒的选择。

Marie Catrib’s在这方面做得很好。这里的柔和色相当鲜明，但似乎没有喧宾夺主，你能看到这个从色块层探出头偷瞄的女人。鲜明的柔和色帮助你发现并聚焦在图片上，完全柔和的背景冲击力就会稍显逊色。

###柔和色调营造氛围

你希望网站的访客产生怎样的感觉？柔和色很擅长营造平静、放松、缓和的感觉。如果这些情绪可以描述你的网站或公司，它或许就是正确的选择。

Sweez做得很棒，通过颜色创造了这样的情感链接。图中的一切都带着淡雅柔和的色调。它让你想到坐在安静平和的地方，享受一杯温暖美妙的卡布奇诺。看见没，这种简单的色彩多么有效。

###柔和色的插画

柔和色也是插画的绝佳选择。运用这种色彩理念创造出令用户驻足观赏的作品。

柔和色调的插画，将带有某种平静的绘画作品与色彩结合起来。它让绘画的运用出人意料。

###与柔和色产生对比

柔和色并不一定要凭空创造。它是一种很好地与其他设计元素产生对比的手段。

Kinder Fotografie在这方面做得非常好，运用了柔和色和明亮的照片、文字。设计中的柔和色部分包含了大量小细节，但你首先看到的儿童照片和文字“smiles”。然后用户才开始注意这些精致的细节。

###柔和色的导航

柔和色调也是创造优秀导航的手段。通常情况，设计师会给网站设计黑白色的导航条，但彩色在这里也有用武之地。

柔和色可以作为导航的手段，是因为它们避让了其他部分的设计。比如，Wonderfully Wild中，用户最先看见照片并做出反应。导航元素与主要内容融合地很好，但由于颜色的选用，它并没有妨碍主要视觉内容。

###扁平化设计中的柔和色调

我们今天看到的柔和色调大多都没有采用扁平化设计。设计师们喜欢的各种亮色，都变成了扁平设计兴起之初那些超级亮色的淡雅版。

在扁平化设计项目中使用柔和色调，好处是颜色仍然保有相同的感觉和整体外观，这种方式却不会为了吸引注意而过于压迫用户。在网站中运用柔和色与扁平风格色彩，更容易通过颜色引导用户到屏幕的特定区域，或是强调重要的文字元素。

###柔和色文字

设计师们不止是在图片和背景上使用柔和色调。这种配色风格也可以运用在文字上。（虽然这会很微妙）

柔和色最好以粗大字体的方式使用，与更加朴实的背景相衬来创造鲜明对比。使用带有粗描边的大字体，可以确保屏幕上有更多柔和色。这个概念通常用于少量的字母或文字组合，不适用于正文。

###柔和色调的界面元素

将柔和色用作界面元素的一部分，是个有趣的概念。这是扁平设计理念孕育出的又一个“花样”，按钮和其他元素可以使用柔和色。

Duy Tran的网站中，每块柔和色区域实际上是个超大的按钮。这些柔和色告诉用户哪块是哪块，让每个都易于点击（或触摸）。这些色调很突出，因为与极简的主图区域形成鲜明对比。（轮播图中的每一张与这些柔和色调的按钮区别开）

###结论

使用柔和色的关键，在于让它看起来清新，而不是褪色。将柔和色调与你期望的深色、更鲜明的图片或白色元素对比搭配，有助于创造带有冲击力的柔和配色。

柔和色调天生就带有令人放松和冷静的理念。网页设计时使用这种配色方案对你有利。要牢记颜色与整体设计的其余部分如何相互影响。

原文链接

首屏大图:最大限度利用设计

hi@victor42.work (Victor42) — Sun, 02 Nov 2014 15:17:38 +0000

[国外设计第62期]

当下网页设计最重大的一项趋势，就是大图片的使用。不只是大，这些巨幅图片看上去就像在屏幕上活过来一样。用在页面顶部时，就是我们常说的首屏大图。

如何利用这一趋势？需要从哪些工具入手？本文中，我们来看看这些首屏大图、用好它们的诀窍、熟练掌握这一趋势优秀网页案例，甚至还有可供下载研究的赠品。

##什么是首屏大图？

首屏大图，就是在首页或其他页面顶部，运用焦点图、文字和导航元素。首屏大图体现为多种形式——作为一张图片或带文字的图、图片轮播、固定图片、视频或是动态图片。设计风格也囊括写实与手绘。

焦点图片是你在网站中首先看到的东西，它的设计的宗旨就是引人入胜。它应当具备强烈的聚焦能力和视觉吸引力。

首屏大图在视觉上起着强烈的聚焦作用，通常仰仗简洁的字体、极简用色，还有基本图形构成的界面元素。多数设计元素都放在图片上，通常需要一些设计策略，来保证文字刚好融入屏幕中的特定位置。一般来说，品牌、导航和其他工具放置在外边缘——典型的是在顶部的左右两个角落——来保持注意力集中在图片本身。

首屏大图在各类网站设计中广泛发挥作用，几乎适合任何设计风格。这种视觉上讨人喜爱的趋势，其实只需要一样关键事物——一张惊艳的图片。

###使用首屏大图的诀窍

一旦你决定使用首屏大图，设计时要记住一些要点。设计要干净，元素不能干扰主图片、图集或视频。在这类设计中，分离各种元素至关重要。设计焦点图片时，记住这几点：

包含品牌。通常这个会放在左上角。选用纯白或纯黑的品牌标识或logo，不要带很多颜色。
标题和字体要鲜明。尽管照片很大，文字才更有助于吸引用户的注意。
就导航元素和辅助元素而言，文字处理得要精细。坚持只用一张大图和一片文字；让其他都在设计感中淡出。
注意色彩的选择。如果用了彩色图片，其他东西都要坚持使用黑色或白色。如果图片是黑白的，为文字选择一种简洁或单一的配色。
放置文字时，不要妨碍图片的视觉流程。不要遮挡图片中的人脸或重要部分。
考虑使用大而纤细的字体。（时尚且非常易于阅读）
考虑使用幽灵按钮来增添一点精致。（阅读之前的文章中详细了解）
使用固定导航。让用户更容易滚动和浏览页面。雕琢首屏大图的导航，使它在首屏内外都适用。
减淡图片颜色有助于突出文字。所有文字都要易于阅读、起到作用。
深度设计首屏大图，让用户了解接下来该怎么做——点击还是滚动。要包含一些视觉提示。记住，首屏大图未必要充满整个屏幕；只是多数会这么做。
创造能存在于响应式环境中的首屏大图。思考它在小屏幕上如何展现。该显示什么图片和文字？

###有启发性的案例

互联网上随处可见优秀的首屏大图案例。这组案例包括了正式上线的网站和进行中的作品。

##赠品

若你正准备从首屏大图入手，通常有两种免费资源可供选择——由真实图片或3D渲染构成的首屏大图，或是绘画作品。这取决于具体项目，每种风格都能良好发挥作用。

下载焦点图片时候要注意的是分辨率（图片要大过最的大屏幕宽度）、可编辑、文件格式和智能对象（如果你要四处移动元素的话）。正如所有免费的设计元素一样，确保核对过使用许可，遵循相应条款。免费赠品通常可以用于个人项目，但商业项目需要支付费用；使用前阅读任何元素的所有细节。

###2个免费的首屏大图展示

###扁平风格首屏大图

###2张复古风格首屏大图

###创意素材集

###免费焦点图资源

##付费资源

尽管有很多免费资源，也有相当多的高质量付费首屏大图资源。在付费资源包中，你可能有更多选择。购物愉快！

###16张首屏大图Vol. 1（$20）

###食物首屏大图模版#3（$20）

###87张首屏大图素材包（$35）

###扁平风格创意工作台（$11）

###朴实的素材图片（$20）

###艺术器材场景（$12）

##总结

不久的将来，首屏大图会是网页设计中的一种最棒、最富视觉吸引力的趋势。这项技巧的妙处在于，它可以与几乎任何东西搭配。想要设计扁平风格、极简风格，或是复古风格？就用首屏大图。

你在项目中使用了首屏大图吗？可以在评论中与我们分享。我们乐于看到你正在进行的项目。

原文链接

为网页文字的可读性而设计

hi@victor42.work (Victor42) — Sun, 14 Sep 2014 00:01:53 +0000

[国外设计第57期]

可读性：“阅读的状态或质量，是一种影响印刷品持续阅读难易程度的属性。”——dictionary.com

文字可以是优美的、简单的、狂放的、有趣的、激动人心的，还有很多其他种类。它能激起情绪，帮助用户理解你所要传达的讯息。字体有很多种，但有一点是共通的——它必须具有可读性。

这是一个时常被遗忘的因素。设计师们往太狭小的空间填入太多信息，或是选用了外观胜过可读性的字体。但重点是：如果字体无法阅读，你的设计就无法完全生效。

尽管有些耸人听闻，但它几乎是普适规律。你会问：“作为艺术元素的那些字体怎么说？” 不可阅读的字体在这类设计中确实能发挥作用，但是，仅限于与可读的文字搭配使用。

###在狭窄空间体现可读性

什么使得文字能够阅读呢？它实际上是很多因素共同作用的结果，包括行长度、行距、字体样式、外边距和内边距，还有颜色和对比度。

每一个元素，都影响着屏幕阅读的难易程度。这每一种元素，都是设计师能够操控的。记住，本文中谈论的这些元素，是指网站主体部分的文字，此处文字的可读性可以说是首要考虑因素。（别处文字的标准相对宽松许多，只要主体部分高度可读。）

行长度：每行的字符个数对于整体的可读性起着主要作用。如果文字段落非常宽，那是很吓人的，难以阅读。同理，每行文字太短也不行，会给读者的眼睛带来压力，造成混乱。
行距：每行文字间的间距也同样重要。看看这篇文章，如果每行文字都与上下两行粘在一起，你就无法理解这些句子。
字体样式：字体的样式也会影响可读性。简洁的衬线字体和无衬线字体是最具可读性、最易浏览的，而那些华丽的手书和新奇字体则最难破译。
外边距和内边距：和行距一样，元素周边和之间的空隙也影响着用户阅读文字本身。
颜色与对比度：文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字，就难以阅读了。设计师选择浅色字深色背景，或是深色字浅色背景，都是有原因的。对比使得字符容易阅读。

###不同屏幕上的可读性

那如何创造最易读的文字？如果是正文文字，有一些基本准则规定每行的字数——每种设备不同—— 有助于打造最佳的可读性。

从何开始呢？最佳行长度有助于帮你确定文字段落的大小。可以这样：确定正文部分的宽度——通常可以假定分成桌面、平板、手机三种尺寸。然后调整文字大小到理想的单行字数。

虽然还有其他因素在起作用，这些准则是很好的入手点。

桌面：每行55到75个英文字符，包括空格；理想状态是每行65个字符
移动设备：每行35到50个字符

将最佳的单行字数与绝佳的行距相结合，可以提升可读性。通常，行距最好是按照正文字体字号的百分比来定义，也可以定义为固定值或是em。

桌面：字号的1.5倍
移动设备：字号的1.75至2倍

如果你想找个工具来简化所有这些工作，试试黄金比例文字计数器。

###可读性的其他提示

要打造可读的排版，正文以外的文字也大有关联。使用标题、无序列表、段落间的额外间距和颜色，也能提升整体可读性（标题则有助于浏览整个网站）。

考虑使用如下元素增进文字层级，创造更完整、更易读的网页设计。记得要把这些元素“设计”成独特的字体、字号和颜色，并要在正文中保持协调。

标题
链接
粗体或斜体字
无序或有序列表
图像元素，例如照片
说明文字
引用文字
在各元素中混合使用衬线字体和无衬线字体

##10种易读的字体

没有一篇讨论可读性的文章不推荐字体的。下面有10种高度可读——并且相当流行——的字体供你选择建立网站。

###无衬线字体

Open Sans

Lato

Exo

Nobile

Droid Sans

###衬线字体

Arvo

Old Standard TT

Abril Fatface

Vollkorn

Josefin Slab

##可读性清单

既然你已经有了好点子，决定下个设计项目中要使用什么字体和样式，你确定能以一种完全可读的方式将它们组合起来吗？下面是一列清单，供你规划字体的设计。

主体部分字号够大吗？在每种设备上，它是否达到最佳的行长度？
每行文字间是否有足够的间距？
文字与页面边界和其他元素之间有没有足够的空间？
正文文字颜色与背景对比反差够强烈吗？
每个新段落之间是否有额外的空隙？
标题和其他元素与正文文字不同吗？
有没有使用其他元素（无序列表、粗体字等）分解大段文字？
正文文字是否使用了易读的字体（建议选用一种衬线或无衬线字体）？

###结论

可读性是设计中至关重要的组成部分。如果无法阅读和理解页面上的内容，对于用户而言，它就完全不相关也不重要。

如何在设计项目中规划可读性？你有没有其他通往成功的技巧？在评论中与我们分享吧。

原文链接

网页设计中的彩色滤镜效果

hi@victor42.work (Victor42) — Sun, 24 Aug 2014 12:08:37 +0000

[国外设计第54期]

在当今这个充斥着先进的特效和精妙风格的世界中，谁曾料到，像纯色和渐变这样简单的手法，竟能够催化出创造力，并极大提升网站的美学水准？现代网页设计师们，证明了优雅的插画、精致的图形和壮丽的照片，都能在彩色滤镜效果下很自然地得到强调。气氛焕然一新，网站开始变得光彩夺目。的确，它有助于解决某些问题。

首先，彩色滤镜能给网站耳目一新的外观，却不会增加负担。其次，它通过搭配传递各种情绪的色彩，很好地丰富了设计。第三，作为一层低透明度的遮罩，它不会掩盖主背景的魅力，对于想要轻微淡化轮播图或视频区域，却仍希望其吸引力不减的人，这点尤其有用。最后，它为前面的内容提供了坚实的基础，兼顾了可读性。

参考：最佳实践：一流的品牌与推广网站

这种方案能非常协调地与各种元素协作：提供强烈反差的白色、极受欢迎的扁平风格元素，还有为项目增添精致微妙感的轮廓式图形。

这里有些杰出的网页设计，示范了如何正确地运用这项技巧。

Zimya

着陆页带有一层美妙的半透明渐变，立刻唤起积极温暖的感觉。从紫红色到橙黄色，遮罩层华丽的颜色令人着迷。

Red Collar

平滑的半透明渐变极大地丰富了背景图——这家机构的视觉象征。它增添了几分独特，不仅与整个场景形成互补，也形成了热情洋溢的氛围。

Ingram Cole and Land

这个网站基于一些非常棒的赏心悦目的效果，这不仅指它的动画，还有成功贯穿整个网站设计的照片处理手法。从紫色到粉色，温暖而微妙的渐变，使欢迎页面看起来相当美妙奢华。

Adopt Wales

设计师在视频背景上覆盖了一层迷人的粉色渐变，营造了亲切友好的氛围。颜色与透明度的选择很好地突出了上面的元素。

Snippet App

对于更喜欢创造冷静与便捷的整体感观的人而言，蓝与白的结合是非常有用的。设计师实际上用了三种色调，不过这两者占据主要地位。

Joyce Van Herck

Joyce Van Herck是名高端艺术家，她的在线作品集网站嵌入了优美的几何图形。甜美的半透明渐变使斜线拥有活力，加强了这种愉悦的氛围。

Electric Mainline

和前面提到的Snippet App很像，设计师运用了蓝白混合。不论如何，低透明度的遮罩层，使用户欣赏其背后那张扮演主角的背景图。

Solid Giant

使用粉色是为了解决几个问题。首先，它能有效地突出标语、logo、导航和微妙的白色幽灵按钮；其次，它建立了一种轻松的氛围；最后，它体现了品牌特征。

Invelab

同样，设计师试图在背景与前景之间营造完美的对比，同时也将注意力引向工作室的图片。明亮的紫色有效地与白色形成互补。

M2B

欢快的半透明渐变强化了网站的视觉表现。正由于采用了这种方式，全新的色彩使得背后的图片陡然增色。而白色被用作一种补充色，使内容看起来醒目。

Lovedays

设计师在欢迎页面上运用了扁平风格。极简设计只包含了几个轮廓式元素、简洁的字体、朴素的按钮，还有城市背景图。后者与半透明的蓝色相配合，增加了可读性。

Numero Neuf

首页的特色是大量基于图片的导航，每一项都覆盖了一层黑色半透明滤镜。这种方式很常用：如果你想为文字营造完美的对比，并淡化菜单项，很自然就应该将注意力引向某个选中的项。

Evoluzione Telematica

绿色使人联想到正能量，此处就是这么用的。明亮的色调与白色共同建立了一种积极的形象。

The Place

这位设计师借极简主义的方式重现了优雅。所选的颜色反映了网站的个性，统一了视频样式。

Obbaki Foundation

颜色可以提升感观的协调程度。它丰富了网站的主题，同时轻而易举加入了一些戏剧性效果，对整体氛围有一定贡献。

Studio Up

这个机构通过迷人的效果展现了一个视觉差滚动的介绍页面，向普通用户证明了他们熟稔网页流行趋势。每一页都有其独特的颜色，覆盖在动态的背景上，用以突显其内容。

Hype Agency

设计师在焦点区域挥洒了一整片的橙色，为网站营造了恰当的积极的氛围。另一种颜色则是白色，非常明亮并融入其中。

Louis Currie

Louis Currie不满足于单一颜色；他用了一整套不同的蜡笔色调交替展示。这个网站绝对能体现他敏锐的色彩感与协调感。

Grey Group

华丽的青绿色覆盖了首页，像一层没有重量的轻纱，强化了这个网站井然有序的外观。轮廓式图形和幽灵按钮很好地突出并积极配合主色调。

Papertelevision

薄薄一层明亮多彩的颜色赏心悦目，伴随着每个主要部分。首页的深紫色几乎不容易注意到，但它仍然能使页面活泼有趣。

###结论

彩色滤镜——这种从前在平面设计中的基本技巧，在网页设计中重获新生。虽然色彩轻微地稀释了设计，它也带来了一丝精致和特别的魅力，同时兼具功能性。

原文链接

如何在网页中使用留白

hi@victor42.work (Victor42) — Sun, 27 Jul 2014 11:09:41 +0000

[国外设计第50期]

所谓留白，有时也称作负空间，两者是同一个概念。尽管这个术语尤其指留“白”，但它所指的区域并不一定要是白色的。它只是网页布局中环绕各元素的空白空间。

这样的空间体现为多种不同形式，例如图片、图表、缝隙、外边距、列甚至一行行文字之间的空间。尽管它似乎“空无一物”，里面没有任何其他设计元素占据一席之地，但我们不应该如此看待它。视之为“无物”，也许打造美感与表现力的机会就流失了。

处理得当的话，留白确实可以为网页设计带来大量的益处。不应减少网页设计中的留白，相反，应该增加网页中的负空间。一些知名的大众品牌已经在朝这个方向前进，更多的设计师们也在追随他们的脚步。

##更多的留白，等同于更奢华的品牌与网站

客户往往要求设计师尽可能用尽网页里的空间，因为网页中的空间是昂贵的，只有有限的屏幕来展示信息。无论如何，反其道而行之——增加留白——促使设计师在更严格约束的空间中，打造更加光鲜的品牌信息。

另外，大家会觉得，留白更多的网站，它的内容比屏幕空间更重要。所以，品牌也显得更尽奢华，因为它牺牲了更多屏幕空间，反而将焦点汇聚在内容信息上。

奢华的品牌了解这层隐喻，通常都使用更多留白来达到这一确切效果。PotteryBarn是个知名的高档家具零售商，它的网站很聪明地使用了留白，恰恰反映了这一点。留白支配了主页，页面旁边大片的留白，更好地将访问者的注意力集中在页面中间的交易与促销信息上。甚至页面顶部的品牌名称本身，也在字符之间慷慨地运用了留白。

##留白提升搜索流畅度

两大搜索引擎Google和Yahoo Search，诠释了留白简洁有效，这个简单的例子再适合不过了。

Google准确地理解了一点，正在搜索某个话题的用户，不想被嘈杂的背景和广告分散注意力。因此，留白支配了整个Google搜索引擎页面，实际搜索框只占据页面中央窄窄一丝空间。类似的，Yahoo搜索也体现了使用留白的妙处。虽然这个页面顶部有长长一条菜单栏，理念还是相同的：大量的留白，使用户专注于搜索，别无他物。

##可读性和易读性得到应有的大幅提升

用好留白，任何网站的可读性与易读性都会得到改善。如果一个页面上的文字过于拥挤，它就会妨碍舒适的阅读体验，从而阻碍整体用户体验。更多的留白使文字更易浏览，从而提升阅读体验，也更易理解。

Information Highwayman是个掌握这项原则的个人站点，是D Bnonn Tennant——一名文案和市场专员的个人网站。擅长夸耀的他，知道什么样的网页内容对任何小本经营管用，令人欣慰的是，Tennant在他自己的网站上实践了他所宣扬的东西。标题的字间距、文字段落和菜单栏间距，有利于确保可读性和易读性。

留白也可以用于不同内容区块之间，不只是为了提升阅读体验，也为了将内容分隔成不同部分，使得信息的吸收更加专注。Andrew Lucas的网站很好地展示了这一点。他是名伦敦的设计师，留白在他个人主页上运用得行之有效。

##它让颜色更鲜明

也许留白最直接，尽管也是最简单的益处，就是突出网页中的其他色彩，使它们更加鲜艳。这点对于吸引访客目光大有帮助，因为颜色深浅、饱和度甚至浓度都更加突出。

I Am Dan背后的设计师处理得非常棒，他在主页上使用稀疏的色彩，成为了这个概念的典范。他的网站简直就是零星几片红色分割开的留白。通过这种手段，红色突显了他作品集的链接，吸引访客浏览他的站点，有效地突出了他的网站，因此提高了访客响应召唤的几率。

Zurb是家网页设计公司，他们网站也体现了留白如何能突出色彩。它的特点是主页顶部单一的纯色和不同页面的彩色图标（就在虚线附近）。除了极少的颜色使用外，首页的整体设计以留白为主。

像绿色、橙色和红色这种简单的颜色，能够创造出令人愉快同时吸引注意的外观。上面提到两个网站，都采用了极简的用色方案，因为有如此大面积的留白。因此，用色非常机智得当，使用户赞赏有加。

##留白不是浪费空间

网页设计师们越来越多抛弃之前的误解，认为设计页面时应该尽可能在屏幕内填塞每个元素、每种颜色。正如上面例子解释过的，留白被用于突出品牌内容、提升可读性与易读性、突显极简色彩时，展现出了强大的影响力。

俗话说“少即是多”，不论你怎么看，它的确适用于关于留白的一切观点。广义上讲，网页设计中的这种极简处理方式，如今正越来越盛行，这项趋势肯定能持续下去。

原文链接

探究栅格系统

hi@victor42.work (Victor42) — Sun, 20 Jul 2014 08:20:03 +0000

[国外设计第49期]

栅格系统是种限制。我几乎从不在设计作品中使用栅格系统，直到我尝试过用多种方法规划元素与内容。于是我使用栅格来收拾整理各种东西。有趣的是，我在设计过程中，无意中建立起了栅格系统。当我来回调整层级、平衡、比例时，一切都自然而然陷入某种栅格之中。若你也像我一样，你或许不怎么推崇栅格系统，但是从假定的栅格系统入手，有助于建立直觉化的流程。如果你最终转变了方向，只要重新定义栅格来适应你的设计就好。假如这套逻辑冒犯到了某些栅格设计的中坚分子，我表示抱歉。对我来说，设计更接近一门艺术，而非科学，或者说事后我才发现它是门科学。

我创建了许多栅格系统，你可以在此下载。我赞成你在下个项目中反复开启关闭每一套栅格系统。下面我们回顾一下这些栅格的逻辑基础。

http://www.w3schools.com/browsers/browsers_display.asp。近乎一半的屏幕分辨率大于1366x768像素，这个比例正在逐年扩大。多数框架和栅格系统都在为1366x768像素或更低的设备做优化，于是我决定创建一套基于1920像素宽的栅格系统。

栅格往往被划分为3部分。我认为这是个好办法，由于三分法则的存在。我基于1920像素宽度和10像素外边距创建了3、6、9、12、15、18、21和24列的栅格。在psd文件中，你可以看到这些分列布局，设计时你可以开启和关闭它们。

在此下载栅格：https://dribbble.com/shots/1587898-Grid-Structures- Free-PSD?list=users&offset=0

我很想知道，设计时开关栅格如何影响你的直觉化设计流程。

原文链接

设计趋势:网页设计中的幽灵按钮

hi@victor42.work (Victor42) — Sun, 06 Jul 2014 13:27:51 +0000

[国外设计第47期]

我不确定我们是否意识到2014年最重大的趋势正在来临。它完全基于所有网站中微小的设计元素——按钮。

幽灵按钮——那些透明的、可点击的物体——忽然间就变得无处不在。以狂风暴雨之势席卷正网页设计领域。谁能想到，像按钮这么简单的事物，能够改变我们看待网页设计的方式？

参考：预测网页设计趋势

##什么是幽灵按钮？

幽灵按钮有着最简单的扁平外形——正方形、矩形、圆形、菱形——没有填充色，只有一条淡淡的轮廓。除了外框和文字，它完完全全（或者说几乎完全）透明。（因此得名“幽灵”）

这些按钮通常比网页上传统的可点击按钮大，也被置于显要位置，例如屏幕的正中央。

各种类型的网站（包括移动APP）中都能发现幽灵按钮的身影，它有着多种设计风格，却几乎都与单页网站有关联，还有那些极简风格或近扁平风格的设计方案。这种风格的按钮在全屏照片背景的网站中也大受欢迎，不像传统按钮那样，这种简洁的样式，是出于不干扰图片的考虑。

你有仔细观察过你的iPhone（运行iOS7）上的圆角按钮吗？每个设计元素都是幽灵按钮。

一位Designmodo设计师这样描绘这项新兴趋势：

“幽灵按钮的出现，从某种程度上来说，与人们热衷于在半透明全屏背景上放置界面与表单有关。于是，时机到来了，它在背景图片、产品形象和幽灵表单元素之间分配了用户的注意力，使得幽灵按钮不靠遮挡背景来体现自己的存在，却依然可见。”

设计元素

幽灵按钮有一系列典型的组成元素。尽管这并非完整的使用准则，但使用幽灵按钮时，其中多数都在发挥作用。

按钮是中空的
它外围有一圈轮廓，通常只有一点点厚度
它包含了简短的文字
颜色通常只有黑白
按钮往往比传统按钮更大
幽灵按钮一般占据页面显要位置
幽灵按钮可以单独或成小组出现
通常使用扁平或近扁平的设计方案
幽灵按钮内部可以使用小的几何形图标，不过很少这么做

幽灵按钮的优势

那么，是什么使得幽灵按钮如此管用？有必要把这项趋势用在你下个项目中吗？

幽灵按钮给人特别干净的外观和感受。简单自然的按钮，能使得页面的主体设计更加突出。（尤其在大幅图片上表现更好）

幽灵按钮几乎可以搭配任何设计方案，因为他们是透明的。这使得按钮可以从根本上承接周遭的设计特征。

幽灵按钮延续了“2013年度趋势——扁平设计”的演化。这样的设计趋势要成为当下主流，唯一的方法就是继续演变，接纳新的概念。

幽灵按钮提供了一种带有视觉惊喜的元素，因为这个按钮和用户预想的可不一样。

设计和创建幽灵按钮很简单。切记保持简约。幽灵按钮应该精细微妙，而非浮华炫目。

幽灵按钮无需过分扎眼，就足以创造出有感召力的视觉焦点。在众多网页设计中，幽灵按钮是屏幕上唯一的大型元素（这就是它如此有效的原因）。正因为如此，它抓住眼球，诱使用户点击按钮。而且这也是优秀用户界面的特征。

幽灵按钮有助于打造高端的设计风格。在设计中，简单往往就是高雅。

幽灵按钮的劣势

虽说幽灵按钮在设计上体现出诸多优势，同时有些劣势也需要考虑。采用任何新趋势之前，都要掂量它的优势与劣势，然后决定是否在项目中使用。

幽灵按钮可能太溶于背景中，使用户产生困惑。并非所有用户都了解设计；有些人对难以识别非传统样式的按钮，也不会知道它是做什么的。

幽灵按钮在高对比度或者颜色丰富的图片上很难处理。这些按钮往往不是黑色就是白色。假如你用的背景图是黑白交替的，幽灵按钮几乎看不到，也无法阅读。

为了便于使用，幽灵按钮依赖特定尺寸与位置。放置按钮时要格外小心，让人容易发现它，并且不能遮盖图片的关键部分。

幽灵按钮有时会明显影响与它搭配的图片

幽灵按钮的文案比“点击此处”要复杂。其中的文字，需要足够清晰的构思与文案，并置于其余部分的上下文语境中。

幽灵按钮如今已无处不在。想要使自己看起来跟得上潮流趋势？选择时兴的事物前，请确保它确实对你的项目有帮助。

##幽灵按钮的案例集

切记，把握任何趋势，关键是要用好它。正如一位Designmodo用户所说：

“我相信设计界诞生的每种趋势，都有它意义深远的用途。最重要的是不要沉迷其中，选择中庸之道。”

就此而言，它正是使用幽灵按钮和其他潮流趋势的关键所在。

接下来给你带来一组幽灵按钮的案例集，希望对你的创造力有所启发。这个案例集是从各种线上网站、进行中的项目、和Dribbble和Behance这类网站的作品集元素中收集而来。（点击每张图片，可以查看来源深入了解）

原文链接

几则诀窍打造个人作品集网站

hi@victor42.work (Victor42) — Sun, 15 Jun 2014 14:25:31 +0000

[国外设计第44期]

作为设计师，我想大家都体验过个人项目的难处，包括作品集。你在photoshop中投入了无数个小时，尝试了上百种不同方案，两个月后，你才意识到你的个人主页仍然写着“建设中”。

这也许不适用于每个人，但作为自己的客户，是相当有挑战的，所以我想分享一下如何更好地建立个人作品集。

参照：向大幅肖像的网站设计靠拢

##你的作品集用处是什么？

在投入到Photoshop中、迸发美妙创意之前，从“业务”的核心入手。你就是客户。像其他任何项目一样，你首先要设定目标。

你想要售卖作品吗？
还是仅仅展示你的作品？
让人认识自己？
或是教导读者？

这只是一些例子，你未必要从中选择。有个好方法，写下你所想到的目标，并给它们标上数值。比如我：售卖作品（0/5），展示作品（2/5），让人认识自己（2/5），寻求雇主（1/5）。

这也许看起来很奇怪，但我个人作品集的主要目的并非寻求雇主。我90%的询问都来自Dribbble，所以我决定偏重于展示个人喜好。

##画线框图

既然看到这些案例，可能你立刻就想开始重设计。这很好，但先别打开Photoshop。而是要拿起纸笔。

设定一个时限；比如说一小时，然后画出所有你想到的。即使30分钟后，你就觉得大功告成了，继续努力。在这个阶段，无所谓“丑陋”或是“半成品”。力求20种完全不同的布局。

（注意，这些还不是完整的线框图，只是草稿。）

这个头脑风暴的阶段过后，可以筛选手稿并画出线框图了。由于是出于个人喜好选择（很明显），我无法告诉你一套准则，但我有些建议：

**简单明了。**不能让人难以理解你的作品。确保第一印象是清晰友好的。
**有选择性。**作为设计师，你可能是个全才。但这不代表你需要强调过去的一切。强调实力，而非完整经历。
**专注于作品。**除非你真的要体现你的品牌特征，不然我觉得最好还是保持最低限度的设计。就像一间艺术画廊，你总不希望画廊比艺术品吸引更多注意力对吧？

##代码还是设计？

终于要数字化了！我提代码或设计的原因，只是因为并非每个设计师都会代码。如果你懂，那就忘了Photoshop，直接尝试代码。

既然这时候已经有了固定的线框图，可以着手编写代码实现功能。就我个人而言，以前即使我有个人作品集的线框图，我仍然只会在Photoshop里改来改去，最终什么也没发布。

这就是我建议先创建线框图的原因。它不仅让我保持正确的流程，也在我编写代码和在Photoshop中创作时节省大量时间。

##编辑与发布

最后一点也很重要，尽快把你的作品集上线。一旦有了良好的基础，你以后总能对页面进行微调和优化。甚至以后优化还是件好事，这样可以吸引用户回访。

“我添加了完整的项目描述，来此查看更新！”

“你现在可以通过作品集，直接买下我最新设计的图标！”

“我更新了滚动的形式，觉得如何？”

这就像拥有自己的房子。永远没有完成时，但在达到完美之前，你肯定等不及邀请别人登门拜访，对吧？

关于创立自己的作品集，我也乐于倾听你的想法。也许还有更多诀窍，或是个人经验？也请随意在下面评论中附上你的作品集！我时刻都在寻找灵感。

原文链接

如何预测网页设计趋势

hi@victor42.work (Victor42) — Sun, 08 Jun 2014 00:12:58 +0000

[国外设计第43期]

你如何得知未来的大势所趋？扁平化设计曾席卷设计界——由一些简单项目，进化为网页设计（尤其是应用设计）的重要组成。

然而即将来临的下一个是什么？你又如何得知？下面是一些预测网页设计趋势的方式（附少量时髦网页设计案例）……或许你甚至可以自己创造。

参见：2014年将盛行与消逝的趋势

##查看各式各样的作品集

年轻的设计师总在新设计的最前沿。钻研Dribbble_（试试Debuts列表）_和Behance这类网站，看看别人在从事些什么。看看Awwwards或The Best Designs上那些引人注意的网站精选集。

小项目可能会是重要的风向标。为什么？因为那些往往是设计师想要从事的项目。那些不被客户限制所阻碍的项目。

首先仔细观察用色（明亮、大胆、黯淡、极简）和字体。设计师们作出了怎样的选择？

然后观察界面。视觉元素看起来像什么？你和网站如何进行互动？它在其他设备上看起来如何？所有这些都可能是趋势的预言者。

##调查其他领域

看看其他创意领域，汲取灵感。艺术、时尚和建筑是网页设计师们迸发灵感、创造新趋势的领域。

时尚是非常棒的风向标和流行色趋势。时尚周的图片可以帮你发现哪种颜色会是接下来的大事件。预测色彩趋势时，Pantone每年的色彩年报是很有价值的工具。

艺术也很有帮助。当代艺术在表现什么？是怎样的风格？形象还是抽象，纹理还是扁平，宁静或是混乱？这些主题在网页设计中，都可以扮演重要作用。（涂鸦同样能帮你从文字和风格方面观察别人在想什么）。

注意新建筑的外形。将这些概念搬到设计项目中。建筑外表纹理和材料颜色也一样。

思考这些媒介怎样融合。不久前，视频还是电视或YouTube上的东西。如今视频就作为网站背景，成为了一项潮流元素。各种网站里弹出更多动画效果，频繁地融合或替代视觉差滚动效果。

##分析视觉效果

关键是，多数“真正的”设计趋势是可持续的。比如扁平化设计，如今已成为设计的主导势力超过一年了。多数公司（包括Apple）都采用了它。而它只从某一位设计师发源。

有三点组成，使得这项趋势得以延续：

可用性
与旧设计趋势的融合
历史渊源

依据这3点来考量所有成功的设计项目。

好的设计是实用、朴素和简单的。没有用户愿意与违反直觉的设计或界面打交道。用户必须知道在哪里点击什么，而且要理解各元素间的区别。

当今的趋势，往往与一些遗留下来的旧趋势能相互配合。设计的这种进化，使它对于设计师更具实践意义。它也是一种含糊的产物。考虑一下把一个新的或不多见的创意展示给客户；他们会接受一部分，而不是全部概念。这往往就是潮流大融合的来源。（想想从扁平到近扁平的过程）。

最后，很多趋势都植根于历史中。所有旧事物，都重获新生。虽然一种趋势不会以完全相同的形式重现，各种元素会以新的形式显现。

##留心社交媒体

社交媒体上喋喋不休的在谈论着什么？什么被转载分享？

社交媒体中的设计师网络能够帮你预测接下来的事情。（传统形式的人际网络也可以）。

不过你在谈论着什么？你的同辈们又在谈论什么？不要打发掉任何创意，因为它们中的任何一个，都有可能变成6个月后人人谈论的东西。

你关注什么人？看看这篇Designmodo早先列出的Twitter上值得关注的25位设计师。

##用科学的方法

实行非正式的趋势分析。这个过程就是收集信息，以此在信息中发现某种模式。

一周一次，记下所访问过的网站中吸引你注意的东西。看看颜色、字体样式、效果、界面元素、操作，和其他任何影响到你当前项目的外观与运用的事物。

久而久之，你会开始发现某些特定的共性显现出来。这是种简单且非常棒的趋势预测法。

##考虑技术与可用性

思考趋势的时候，不要忽视每天都在做的事情。考虑一下你用的设备类型，还有它们如何与网站相互影响。

比如，不久前，每个按钮都需要点击，如今很多都对触摸反馈友好。想想你玩的线上游戏和手游？它们通过什么操纵？怎样的操作使它们运转？流行的游戏可以稳定地预测出各种设备上，怎样的操作会让人们感觉舒适。

还要跟进科技和趋势。什么设备最流行？什么东西在改变着人们在线互动、购物和聊天的方式？这些在你的设计和开发团队内部，都是重要的交谈内容。

新技术与科技趋势，可能是促成网页设计趋势的首要因素之一，尤其是在新设备上。

##浏览设计博客

留心设计博客，比如Designmodo，跟上网页设计领域的近况。改变几乎每天都在发生，只是读一读正在发生什么，就能帮助你认出下一个趋势。

你可以寻找什么呢？从阅读新技术的教程开始。一旦有一帮设计师明显在学习某种技术，它必定会在一些完成的项目中展露出来。

看看文章和教程提供的案例。（Designmodo每张图都有链接）。访问这些展出的网站。是不是开始注意到一些共同元素？那可能就会是下一个趋势。

##结论

**预测趋势是一门很棒的艺术，而非科学。**今日所流行的，或许明天就会散去。最好（也是最有用）的趋势，是那些长久保持影响力的趋势。

如果你渴望极致的潮流，考虑从颜色或字体这类元素入手，而不是整体美感。那样你能在更大规模的设计变迁发生之前，作出成功的判断。

原文链接

案例研究:wordpress主题设计

hi@victor42.work (Victor42) — Sun, 20 Apr 2014 00:26:26 +0000

[国外设计第37期]

如果你是个网页设计师，并且经常使用wordpress，你可能会喜欢这个案例研究，我将展示我设计wordpress主题的过程。尽情享用吧！

几个月前，我应Slocum Themes之邀接受一项挑战，为博主们设计wordpress主题。理念是运用所有wordpress默认功能，创造一款简洁有效的主题。

我决定从社交媒体汲取灵感。毕竟，社交媒体的升级版可以被看作微型博客。对于像facebook、twitter、google+和pinterest这样的社交媒体平台如何展示文章，我做了一些研究，尤其是带照片的文章，然后Socialize就诞生了。

设计过程

第一步永远是在纸上画线框图，然后在Photoshop中进行设计，再是编码。鉴于是wordpress主题，我能够列出网站所有的组件和元素，所以我决定遵循基本的wordpress博客样式（页头、主体、侧边栏、页尾），不用画太多线框图。

相反，我想创建一套样式指南，所以我将一切分解，一次设计一个组件，保持整体设计的统一。我只在所有组件完成后，才将它们组合起来，而非采用常规方式，首先设计首页再是内页，我想要创造一套能够用在所有页面的可靠的指南。

文章组件

考虑到这一点，我认为我的关注点应该在博客最重要的元素——“文章组件”上，它在首页上要如何展现，才能吸引用户深入阅读。所以这就是一切的起点。我将文章组件分解为更细微的元素，例如：

文章日
文章作
文章标
文章缩略
文章描
操作项

我决定忽略某些其他的常见元素，例如分类、标签、评论数。

画了几稿后，我对于自己想要设计什么有了固定的概念。我不是在重新发明轮子，而是在试图简化它，如今多数博客主题有着数量惊人的选项，我的理念是让它在桌面和移动设备上都保持简单有效。

随着第一个也是最重要的组件完成，我列出其他所有需要设计的组件和元素。

颜
字
栅
图
导航与按
侧边
页
文章翻
文章评论

颜色

由于主题会有各种配色方案，使用多少颜色，用在哪里就显得很重要。我是这样分解它的：

主
辅助
背景
文字颜
链接颜
- 链
- 鼠标悬停状
- 鼠标点击状态

一旦颜色指南创建好了，可以使用Adobe Photoshop轻松将它换成另一套颜色，降低饱和度到黑白，再覆盖一层所选的颜色。

字体

下一步是定义一套字体结构基准，用来指引首页和内页的文章。这个项目中，我所选的字体是Source Sans Pro，由Adobe出品的一款无衬线字体，在用户界面中表现良好。尽管我在photoshop中创建了一套简易指南，还需要编码出一套完整版以供参考（查看字体指南）。

栅格

我创建了一套对于带有侧边栏的博客非常有效的栅格系统，流式布局，完全是响应式的，最大支持1200像素宽

图片

尽管主题是响应式的，某些图片的尺寸会根据屏幕尺寸变化，我还是想根据栅格设定最大和最小尺寸。

导航与按钮

导航保持非常简洁，颜色效果由我所选的色彩决定，为了保持整个主题的一致性。

侧边栏和页尾

页尾和侧边栏用的是相同的组件，所以我将它们设计成一个，唯一不同的是，页尾的背景色使它的组件略感不同。

文章和评论组件

要完成我样式指南中的所有组件，还差文章和文章评论组件。

最终的设计

一旦我的样式指南完成了，我只需要把一切拼凑起来，我编写了HTML和CSS，交给我在Slocum Studio的朋友把它处理成wordpress主题。有些元素在编码过程中有轻微的改动。

这是最终的首页，这套主题完全是响应式的，特色是支持8种不同色彩。

演示和购买

观看演示或购买这套主题，请访问Socialize Pro，在那里有售。还可以看看这套主题在MattReport.com的实际运用效果。

原文链接

网页设计新趋势:更少文字，更多的富媒体

hi@victor42.work (Victor42) — Sun, 16 Mar 2014 13:47:32 +0000

[国外设计第32期]

更少的文字，更多的富媒体——在网页设计中运用视频来达到特定效果，这算是2014年的一项新兴网页设计趋势。有些人坚持认为，这是一种有争议且冒失的展现方式，因为内容（文字）为王。其他人则打破这种共识，拥护更为激进的观点，他们的依据是人类好奇心的力量，和对更加炫酷的信息获取方式的喜爱。

不管怎样，你一定会注意到近的几个月来，包含视频等富媒体，并扔掉文字内容的网站，出现得越来越频繁。毫无疑问，这种做法有它的支持者与反对者，而且也难以断言，它是否是一种合理而有益的方式，能让网站看起来更现代、精美和创新。然而它当然也别具风味。只有时间能够展现它所有的“缺陷”，最终得出积极的结论。

在此我们收集了一些网页设计案例，它们更多依靠视频与图片制造视觉冲击，而非常规文字所构成的大量信息。

带有视频的网页设计案例

Manaz Productions，正如之前例子一样，这个网站只包含了视觉信息，几乎没有文字。使用这种方式并不令人感到惊奇，因为这个网站代表着一家视频制作公司。因此，设计师仅仅使用了能够展现这家公司能力与经验的视频，来构成这个着陆页。

Designmodo的Startup Framework，这个网站同它所展示的产品宗旨一样，散发着专业与老练的形象。这个页面包含很多解释与描述性的视觉信息，包括视频与图片，自然比单纯的文字更加引人瞩目。

The Barstow，网站被优雅地切分为两半，每一半都有一段豪放的视频。它们起着显著的引导作用，也有助于将用户带入恰当的氛围。

Winshape Camps有着梦幻般欢乐有趣的网页设计。主页包含了一段全屏视频介绍，也有效地与炫丽的半透明渐变背景融合，成为功能的一部分。

Apple 30 Years，这家公司献给它的忠实用户一个干净、现代、精致的页面，作为它30周年纪念。这个页面主要包含很多有趣迷人的视频，有力地展现了它的精髓。

Garmin，这是一个促销网站，用最佳位置巧妙地展现了它的广告商品。这个网站的文字与图片相互支撑，结合地非常好，值得夸耀。

Happy，乍看之下，这就是一个普通的单页网站，推销着它的设计者。然而，它利用一种相当创新的方式吸引用户的注意，通过播放一段24小时不间断的音乐视频，展示着这件精心设计的产品的全部力量。

eCards Strasbourg，这个网站让用户有机会发送特殊的电子卡片。相当讨人喜爱的别致背景是电影的风格，不仅强调了文字，也积极地鼓励着用户填写表单。

Sonia，适用于所有时尚主题的网站，它也利用了大量以图片、视频、甚至电影短片为代表的促销元素。

Joost Huver的网页设计靓丽而匀称，主要运用了大量图片。设计师通过最简练的方式，巧妙地创造一个相当精简却内容丰富的单页网站。

TSC，这个网站强烈依赖绝妙的图片来创造视觉冲击。网站团队使用很多不可思议的图片与照片来构建网站，不仅仅是首页，还有其他内页。

Sirai Horses，这个网站很聪明地使用了华丽的专业摄影图片作为背景，伴随着它所有的内页。它们担任着主要的视觉引导力量，将用户的注意力聚焦在宠物身上。

Story and Heart，这个网站的着陆页包含了一段令人吃惊的视频作为背景，有效地补足了内容，与此同时也抓住了用户的注意力。很像第2个例子，选择四两拨千斤的视频作为背景，可以让人轻易预知网站内容，因为它代表着一个电影制作社区。

Helio Sequence，设计师运用了暗色调，它以突出亮色元素著称。在这个例子中，干净的深色背景不仅强调了内容，也令视频更加突出。

Curiosity Amsterdam，欢迎页面部分包含了一组令人难以置信的短视频，还有令人印象深刻的背景，主要用于支撑标语“Curiousity. Creating Interest”。通过它强势的视觉内容，这个网站绝对能够激起用户的兴趣。

Zione Ceramica有一个工艺精良基于图片的单页网站，以大量专业摄影图片为主。设计师巧妙地将多种视觉信息组合起，但整体界面组织良好，便于快速浏览。

Kids Love Jetlag，这个网站属于一家创意数字机构，使用了迷人的全屏轮播图和颇具争议的视频。

Geox是个完美无瑕的促销网站，背后有着新颖绝妙的创意。为了展示使用Geox产品的所有优势，这家公司没有一条条列出它的好处，而是创作了一段原创视频。

Inner City又是一个基于图片的一流网站，设计师巧妙地运用迷人的图片，作为常规内容的补充。

Google Glass Experiment是个先进的交互式网站，通过变化的视频，传达出了充满活力与能量的形象。这些视频则成为了新产品中潜藏的巨大可能的有力证明。

We are Taiga，网站首页只包含了一组全屏视频，和简单的介绍。这家公司主要强调他们的作品，正力图避免所有杂乱的文字。

结论

基于视频的网站方案，正在飞快地聚齐人气，那些久经考验、大家习以为常的文字布局却没有。这种方式不仅在创意机构或视频相关公司间盛行，也受到一些设计师与艺术家们的追捧，他们信奉“我的作品自己会说话”。

原文链接

2014盛行与即将消逝的网页设计趋势

hi@victor42.work (Victor42) — Sun, 02 Mar 2014 01:03:32 +0000

[国外设计第30期]

过去两年来，我们见证了网页设计不可思议的变化，继而预测下一股可能出现的热潮。不管怎样，关于今年哪些趋势将会盛行，哪些将会消逝，我已经有些自己的预感了。看看你是否与我不谋而合！

（这是2013年网页设计趋势回顾）

即将盛行的趋势

有几种趋势即将到来，每一种都令我兴奋不已。今年的设计圈将大有看点，因为我觉得有一大堆变化即将发生，导致激动人心的走向。

模糊背景

多亏去年夏天的iOS7发布，设计师们像发疯般地将它作为灵感来源。其中诞生了一种出色的趋势，模糊背景被更多地使用。这个概念是指你当前所在的界面盖在前一个的上面。想想水雾弥漫的浴室门，它的背景就是模糊的。它确实是种非常酷的趋势，因为很多这类背景创造出了相当美观的非线性渐变。

Emotions of sound

Trippeo

简单的动画

从iOS7中诞生的另一个趋势，就是简单的动画效果。在网站和app中随处可见，它们是一些精妙的动画，为设计增添释义和个性。你可以在手势操作中发现它的身影，比如当你在信息中上下移动聊天气泡时，它们会相互碰撞。点击事件中也有，当你点击导航，它不是直接出现，而是向下滚动出现。CSS动画和变换的广泛使用，造就了诸多此类效果。

Theme kingdom

Big Cartel

简单的配色

过去一年里，大胆明亮的颜色已经为自己正名了。不过，使用亮色的微妙浅色搭配也一样。我说这个趋势时，基本上是指Google。很多他们的UI广泛使用了浅灰色和少量微妙的颜色，让网站看上去轻巧干净。

Ora ito

更棒的用户体验

还有一种由来已久的趋势，在网页设计中提升用户体验。我觉得这一点只会日趋重要。有一场重大的运动正在进行，旨在将用户体验与商业战略相结合，在网站和app上提供更好的整体体验。这确实是商业中相当重大和明智的转变，当然，它们两者是相辅相成的。

Exposure

Trail spring

大字体

网页字体也获得了高度关注。随着SVG图标字体的崛起，它们也变得越来越受欢迎。当我思考网页字体时，我所想的是将大字体整合进设计当中。它们圆滑、浑厚，也很美观，但不只限于此。目前，Iconic的奇才正在掀起一场图标字体的革命，他们在尝试创作响应式图标。

Time Brack

Happy

私人化内容

人们不喜欢没有人情味的东西，尤其在网上。一想到与机器甚至另一个企业打交道，他们就没有好感。因此，你会看到一些创业公司去除了他们网站上那些优雅的内容，却凭公司背后活生生的人物脱颖而出。内容为王，这是你和你的在线读者联系的唯一方式。你得将它个性化。让你的文章和图片显得友好、厚脸皮或是古怪，这样便能让用户与你建立联系。

Wondersuance

Create pilates

糟糕的趋势

另一方面，今年有一些东西会变得越来越罕见。见证设计和行业趋势变化确实是件了不起的事情。你不觉得吗？无论怎样，对于这点你不必太难过。

低画质的照片与视频

作为设计师，囤积照片一直是个坏主意。不管怎样，你是否注意到近一两年来，照片的画质总体在上升？它绝对与更大尺寸的图片作为设计元素来使用有关，比如图片放大充满整个页头的宽度与高度。想到画质糟糕的图片正在淡出历史舞台，真是让人心情愉悦。整个行业把照片画质的标准定得非常高——它也应该如此——因为图片也是内容的一部分，画质会成就或破坏一件设计与公司品牌。无需多说，我觉得这一段陈述对于视频的画质也是一样。

FiftyThree Pencil

Agst

扁平与拟物

扁平与拟物设计之争已经逐渐被淡忘。我坚定地相信这两个极端都将被淘汰，取而代之，我们会看到更多介于两者之间的界面，它们有着微妙的渐变和讨喜的阴影。我觉得扁平与拟物这两者的粉丝，不得不将它们吸收融合，它们都只是一种趋势，两者都会走到尽头。如果你愿意的话，为两者找到某种妥协吧。

Bright Media

Elegant Seagulls

冗长的表单

随着极简主义的兴起，我注意到表单的填写正在变得更简单。这是因为公司最终听取了用户调研的意见，人们不喜欢在网上填写表单。表单越大越长，用户就越难顺利填完。你多久一次能见到不需要重复确认email和密码的表单？无论是多久，你会看到更多这样的设计。而那些询问你生活中的每个细节，还有你生的第一个小孩，就仅仅为了注册一个免费email的笨拙讨厌的表单，会逐渐减少。

Treehouse

General Assembly

原文链接

网页设计中的方块元素

hi@victor42.work (Victor42) — Sun, 05 Jan 2014 14:44:39 +0000

[国外设计第25期]

当你欣赏下面这些案例时，留意一下他们如何以及为何使用矩形或正方形元素，会使得你思路大开。此处列举的方块元素，被用来对齐、组织、装饰、排列页面上的方与圆。在设计中使用方块元素有很多方法和原因。我们来详细了解一下。

使用方块布局的目的是什么？

或许这对你而言有点哲学和理论化，我们来看看别人选择方块布局的原因。（顺便提一句，我所指的方块也包括矩形，有些案例也使用矩形。）使用这种元素有两大原因。首先也是最重要的，它有助于组织内容。其次，它也能打造特殊的样式。它们是展现内心渴望和需求的完美元素。

看看Dennis Adelmann的作品集，显而易见，方块元素被用来组织排列他的作品。这是组织排列任意数量内容的简单途径，让事物保持简洁。

不过再看看We Love Noise这个网站，它就完全不同！是的，到处都是方块，移动鼠标时还有个有趣的动画效果。不过除了组织内容之外，你会发现方块元素也成为了设计风格的一部分。它是这种风格关键的决定性元素。

怎样用好它们？

我不觉得使用方块元素是什么难事。尤其是网页，自从诞生之初就开始使用方块形状来设计界面。但是你若想更有效地使用它，请遵循以下几个步骤。

制定希望达成的目标

根据你所要达成的目标，页面和区块会有很大的不同。一旦你确定了，方块元素就能帮助你完成目标。你是用它来组织内容？还是想为页面增添一点乐趣？

看看Paper and Paint。他们使用方块元素保持页面井井有条，并且突出了页面特有的流动性。随着鼠标向下滚动，每个方块中的不同内容都在进行着视觉差滚动——这是个非常酷的效果——每个方块都向你讲述独特的故事，汇聚成整个页面。这些方块元素的作用，就是保持各部分对齐，形成一种整洁的时尚，同时也为各个页面营造不同的故事氛围。

Anthony John Group使用方块来展示他们创作的各个项目，还有关键的公司信息，比如“幕后团队”。主页的规划与构建很棒，但也结合紧密。很明显，他们致力于创造像这个页面一样优雅的高端建筑设计，如果没有这些方块，可达不到这样的效果。

使用方块来组织内容

既然了解了你所追求的目标——尽管那几乎就是整合现有的信息——你会接触到内容组织的。你得把内容编成目录。要如何在各个方块中组织信息——某些方块内容会比其他的更多吗？这对组织内容很有帮助，你会来回摆弄，看看哪些有用哪些没用，发现哪些内容太多，哪些内容太少。我保证这不是什么高超技巧，实际上它不太需要凭直觉，大多时候都很简单——坐下来去完成它就是了。

注意到上面这个网站没有，Block Level，方块和方块中的图标就是全部了，只有图标。这就是我所指的组织内容，Block Level的设计者故意在每个方块中只留下一个图标。下一步就是要考虑如何将调整过的内容放在令人愉悦的设计中，这正是我们下面要讲的。

调整这些方块，或者干脆不动它！

既然组织内容的工作让你了解一组组信息看起来是什么样，你就要思考应该怎么处理这些方块。这是让你打磨内容块大小的一步，可能你希望它们都保持一致——又或者你决定让它们错落杂乱排布。这还是得取决于你的具体目标。

从Nedd中可以看出，方块元素都非常巨大，它们有着近似的宽度和相等的高度，让网站看起来井井有条。我希望你注意的是，虽然这是偏向于内容组织的用法，网站的样式仍然非常有趣轻快，这主要得益于它的颜色、矢量元素、圆形的应用、字体等等。

另一方面，我们还有像Banana Café这样元素散乱的网站——如果你想，也可以这样优美地乱序排列。这个网站看起来也很好玩，得益于它的字体、颜色的选用等等。方块的这种特殊用法其实没什么，只是一种特定的设计手段。

点缀样式

有千万种设计方法，可以为你下个项目中的方块元素打造特殊风格。你可以将它们与其他元素自由组合，比如圆形，或者采用贯穿始终的矩形或正方形来营造网站的视觉焦点。最后两个例子中，你会再次见识如何将方块良好地应用于设计中，希望对你有所启发，并能在你下个项目中发挥作用。

Jan Finnesand用了全屏的宽度与高度来放置方块，每一块都有特殊作用，大多展示了他以往的项目案例。充满整个浏览器窗口的方块造就了一件非常酷的设计。

这家公司无处不用方块！主页上可以看到，他们也展示不同的案例。通过不同尺寸的正方形引导用户视线。我最喜欢的一点是，他们用两个正方形来组成一张更大的图片，但每一张都指向一个独特的项目——我觉得这很酷。

原文链接

网页与APP中那些优美的登录表单

hi@victor42.work (Victor42) — Sun, 29 Dec 2013 10:34:45 +0000

[国外设计第24期]

我从Dribbble收集了20个漂亮的登录表单案例。希望你看后能从中受益，并对你以后的登录表单设计有帮助。设计一个登录表单是非常容易，但大多设计都很糟糕、毫无亮点。无论如何，这篇Dribbble案例集锦绝对走的是另一个极端。希望这20多个都能赢得你的青睐，废话不多说，直入正题！

网站与APP中的登录表单

继承了iOS7的精髓，这件登录界面作品将iOS7微妙的动画背景上升到一个新的层面。此处的背景完全是一张动画图片——甚至可能是GIF。尽管这背景事实上没有那么精致，但这一定是你平时不常见的设计。你几乎很难见到这样的APP，还有如此卖弄的首屏设计。

同样秉承着iOS7的精神，这个登录界面和它的附属界面采用了彩色模糊背景，令一切都保持绝对简洁。我得说这两个界面都相当极简化，实际的输入框被细线所取代。不过美妙的多彩背景增添了个性化色彩，令作品亲切美观。

如果说有令人愉悦的设计，那这一件就是了。蓝色背景图与明快的白色LOGO、文字和输入框形成强烈对比。绿色按钮看起来像个真实的按钮——尽管界面的其余部分都是扁平的——色调也与蓝色搭配地非常好。

真是醒目的配色！当然，它是从另一个角度思考登录框的产物。这不是一个通常意义上的登录窗，因为它在易用性方面仍存在瑕疵。但是在设计方面，我们尽可以跳出条条框框来思考登录界面。

与之前那些相比，这件相当平静和简洁。颜色选得非常棒。页面也很切中要害，它没有任何不必要（甚至扰乱注意力）的小把戏，任何一个登录界面都不应该有。

这又是一款大胆的登录界面设计。深色的登录界面、深色模糊背景、明亮柔滑的纤细字体，营造出了神秘气息与魔力。有了迷人的登录界面，就别无他求了。

现在呈现的是一款深色登录界面，还有非比寻常的红色文字与按钮。我不确定这么多红色是否合适，不过我们暂且继续——这是非比寻常的大胆设计，值得喝彩。我觉得自己对于红色的忌惮是没道理的，因为决定用户反应的，是红色按钮所处的环境，而非红色本身。我可以肯定，没有人会在按下这个登录按钮时感到崩溃。

这件作品绝对是本文中我的最爱之一，因为它够简洁，却不单调。它的配色相当惊艳，几种颜色完美结合。而且，它看上去真的很赞！确实是个打造简洁美观登录界面的好办法。

这是个稍微复杂些的登录界面。像如今大部分平台一样，你可以已有账号来登录，比如Google、Twitter或者Facebook，而不必在每个新网站上创建新的账号。不过如果你想的话，你也可以注册自己的账号。

这个界面很有创意——手写风格的注释与箭头，给界面增添了一些个性，配色也很棒，与常见的蓝色和银灰色有所区别。同时，不像时下大多数登录页面，它的背景图并不是视觉焦点，它就是一个轻巧的登录/注册页面。

我非常欣赏这件自由散漫的设计。没有分散注意力的导航，也没有烦人的其他内容。用户的操作与目标同样简单：选择Platform或Opentag，然后登录。如果是首次打开，你可以试试底部的“注册账号”链接。我觉得这真是个组织良好且执行到位的登录界面。

这也是我最爱之一，我着迷于它的扁平设计。它也没有多少分散注意力的东西，重点就是登录。简明的logo效果非凡，如果你没有账号，也能在这注册一个。除此之外，所选的颜色也紧密结合，表现良好。

我非常喜欢这件设计，因为东西都足够大，登录按钮很大，按钮上的文字很大，图标也很大。现在你应该有所体会了。另外，登录按钮是明亮的橙红色，你不会忽略它。它不会与周遭环境混为一谈，所有需要强调的操作都该如此。

我不确定自己是否赞同输入框背景和文字的颜色，不过除此之外，这仍然是件优秀的单色表单设计。我喜欢这两个输入框彼此结合的方式，因为他们显然就是一体的。我也喜欢那个醒目的登录按钮。

在你注销登录前，网站会记住你是谁，这点太赞了。从外观来看，它想营造安全登录的感觉，事实也确实如此，这得益于下面的两个logo——McAfee和VeriSign。我还喜欢它滑稽的头像，使得整个界面体验如此愉悦，虽然它其实很严肃。

这是我第三喜爱的作品，因为它好玩的配色。是的，这是扁平设计。如此基本的样式，本应该很单调，它却没有。我发现精心挑选过颜色的扁平设计常常能成功，因为充满了亲切感和个人色彩，这件登录界面就是如此！我很希望在自己经常使用的app和网站中见到更多这类设计。

啊，又是一个蓝色的界面！我对此处使用的绿色持怀疑态度，不过本作品中微妙变化的蓝色，与白色文字结合地很好——确实非常好。非正式的小写字体也给整个界面增添了几分个性。

我相当喜欢这个表单，因为它显然是页面的视觉中心，再没有其他东西分散我的注意力。当然，还有logo和邀请注册链接，不过它们在哪里都无法盖过巨大的登录界面。与暗调处理的背景图相对比，明亮的输入框吸引力注意力，让你立马就去登录。

这是一件拟物化与扁平结合的UI作品。你怎么想？我觉得它处理的非常好。不用嘲笑拟物元素的阴影效果，它们并没有影响整个设计，此处的设计相当聪明，节制地使用拟物化元素，字体的选择和色彩搭配铸就了这件作品。

又是一件迷人的登录界面。它内容比本文中很多设计都更丰富，不过配色选得很好，让界面漂亮地结合成一个整体。

原文链接

用草图来规划网站

hi@victor42.work (Victor42) — Sun, 01 Dec 2013 19:14:52 +0000

[国外设计第20期]

设计院校中有大量的基本课程。大企业与创业公司都在采取回归本源的设计方式，这一点也不稀奇。

无论你是个终身的涂鸦艺术家，还是一位严肃的商标设计师，通过纸张探索灵感都是一项重要的设计技能。

别怕！铅笔这类工具的力量不会消亡。在这个专注设备的时代，简单、久经考验的设计方式仍然大有可为。

实际上，我已经听到一种日渐强烈的声音，反对将工时浪费在高保真photoshop效果图上。手绘稿让你以一种灵活巧妙的方式，创作迭代式的渐进设计，不必为了高保真设计图和电子稿而超支时间。

不论你是大公司还是自由设计师，通过快速手绘与客户交流想法，是一项相当重要的手段。

为什么手绘？

手绘稿在某些方面对线框图甚至电子稿有所优势。它便携、亲切、富有创造力，并且久经考验。再没什么比纸和铅笔（或者钢笔）更简单的了。

我也发现，手绘稿对客户而言足够通俗，使他们能够提出意见并且做出修改。高保真效果图看起来就像是“成品”或者即将完成，那会束缚客户提出改进建议的意愿（我在这里真的忍不住要插一句，这完全不符合国情啊，不科学啊！）。手绘稿相对散漫、友好、非正式……你可以擦掉进行修改。

线框图总是充斥大量文字，极少反映出美术趋向和设计基调。特别是对于照片和视觉元素。你可曾见过一个大叉叉传达出了照片内容？

通过手绘稿，你可以快速、近乎思维练习式地迅速记录下你的创意。它能飞快见效，让你在屏幕前花更少工时，从而拥有更多时间来产生创意。卷起袖管然后寻找答案吧。

它最终会转化为photoshop的视觉稿给客户。你会发现它与传统线框图相近，却能更接近地反映出设计稿的美术趋向。

通过手绘，能够消灭那些仅仅为了占位的图片。要知道，你放在原型图和效果图中的一个大叉叉，代表着这里将放入一张真实的图片。你就会省着用你那些昂贵的版权图片了。

这就是网站的效果图。你能看出草图到线框图再到效果图的变化吗？

从哪入手

有一点可以肯定，多加练习才能精通。随身携带笔记本来涂鸦、迭代、速写，保持这项技能处在最佳状态。

我发现，练习的最好办法，就是在任何排队的时候拿出来画一画——比如买咖啡、杂货店购物、等待火车……只要是等待时间，都可以用来手绘。

画下你的所见，这个技巧会对以后有帮助，当你需要向客户展示的时候。画下每个给你带来灵感的东西，随身携带笔记本就意味着你可以随时记录灵感，留待以后使用。

随着手绘量的增加，你会开始学着精炼你的手绘稿，并将它们转化为更加正式的插图或绘画。

为网页设计而手绘

规划一个网站时，手绘可以成为非常重要的一环。你可以把它用于设计、用户体验测试、界面元素，甚至尝试字体设计方面的创意。

我曾经在多个网站中用它来想象一些创意元素，比如照片和图标。我也在关键界面问题上使用过这个办法，例如怎样使一个按钮或图标更加直观友好。

交流设计元素的推演变化时，手绘也是最好的方法。客户喜欢这个有创造性的环节。他们会深陷于此，并也喜欢上手绘。

我有个客户说过：“哇，好像我想什么你就能马上画出来。太不可思议了！”这就是和客户面谈时，飞快手绘的魔力。

注意！多加练习

Doodlers Anonymous是个不错的地方，可以作为学习的起点，看看别人如何手绘、涂鸦并思考他们的创意。它也是一个很棒的分享社区和同行交流场所。

注意，现实是残酷的。钻研手绘会很艰苦。如果你不够老练，或者没有将你的绘图稿打磨好……那么找些工作之外的时间专门来画。

可以在Worldwide Sketchcrawl,Doodlers Anonymous和Urban Sketchers这样的网站找到灵感。

订阅一些手绘博客，钻研那些日志和手绘稿。然后问问自己，准备好在客户面前绘画了吗？

Urban Sketchers是一个致力于观察研究手绘的国际非营利组织。他们在Flickr和Facebook上有着完善的社区。他们博客的重要组成，是一个由手绘选稿记者构成的核心小组，他们在全世界范围内收集别人分享的作品。在他们的网站和Flickr、Facebook社区里，你可以找到很多颇具启发性的方式来素描你身边的世界。

记住，简笔画没法给人留下什么印象。具备手绘的能力是非常重要的开端。在投入到客户的项目中之前，你可能得花些时间“练习”和理解如何用手绘来表达想法。

这是一件早期的电子手绘作品。当时我在实验混合型的电子线框图，用Wacom数位板草草画成的。从这些早期手绘作品中，我学到了对客户而言，简笔画是远远不够的。

手绘时应该提出的问题

首先问问自己，是否了解所设计页面中的所有元素？如果是个改版项目，我会检查现有内容，思考用户希望看到什么。

如果是个新站点，我会浏览同行网站，做一些竞争分析，然后看看那些最“典型”的用户需要什么，将这些内容加入列表中。

接下来，我会询问客户是否有某些设计偏好。很多情况下，客户都有他们自己喜欢和推崇的网站。了解这些，并领会他们偏好的设计语言是非常有帮助的。配色方案、字体、语言/文案风格、视觉元素，还有那些会影响到市场专员的设计趋势。Pinterest、氛围图片库和“寻宝游戏”，有助于掌握一个客户的个人喜好。

手绘表达设计

以此为例，这是我给一所私立学校设计网站时画的。目的就是避免花大量时间在高保真photoshop效果图上，也能把主页的线框图具象化。

首先，我用便签条或者写一份文档，来收集这个页面的最关键信息。当然，最开始都是在纸上写字，但文字是具有代表性的灵感源头，而且能为我整理出一份所需的导航、内容、支持信息的综合列表。

然后，我会将文字项的列表转化为缩略图。画出导航、内容区块、广告、栏目、支持信息区块、页头、页尾等等。如果纸张不够用，就在下方再粘一张。

接着，我会选出最终优胜的创意，用于最后的手绘稿。一旦我形成一系列有用的创意，就决定朝着它的方向继续进行。在这个阶段我总能从客户和设计师同行那里获得大量的反馈。手绘看起来非常通俗，客户在选出最佳创意时也感觉更轻松，此时，距离正式的PSD效果图还早。

典型的项目流程

这是从手绘线框图演化来的高保真Photoshop视觉稿。能从中看出手绘对于照片的美术趋向产生的帮助。

在大多数项目中，我从简单的矩形入手，画出一系列缩略图。这个过程相当简单，但它能帮助我产生一系列确定的方案，供客户、项目经理、和设计师同行选择。

当我们谈及缩略图和其背后的创意时，我会根据选定的缩略图进一步画出草图。这些粗糙的草图主要为了确定内容优先级，推动页面布局的定稿。我也会画出照片和创意元素，比如该布局中的按钮或其他图标图形元素。

在草图阶段，我希望回答诸如“用户要的是什么”和“如何体现内容优先级”这类问题。这个阶段非常需要合作讨论。我会将草图与客户、经理、项目同僚和其他设计师分享。如果有必要，我们会暂停一会儿，画出一两个草图摆到用户面前以供测试。然后重复这一阶段，对草图进行精炼、迭代和推演。

一旦草图的方向明确了，我会画出正式的手绘稿。像传统线框图一样，手绘线框图的页面上有确定内容……文字、图标和照片。于是，我对于照片的美术趋向在手绘稿中得到了检验和探讨。我也通过手绘线框图来将最终的UI元素具象化，确保它们有用。我们通常会对这些进行测试，甚至对于某些非常复杂的界面，还要画出那些用户会遇到的过渡界面的线框图。

很多次，进行到正式陈述的阶段时，我会用墨水代替石墨来画图。墨水能为手绘稿增加一点正式感，如果再加入颜色，我就不必担心遗漏页面上某些实际UI元素。

最终，你总会形成自己的流程。手绘最神奇的地方在于，它能达到完全的自由。你能在任何时候捕捉灵感。

画好会议手绘稿所需的“插件”

找到合适的工具来为客户手绘很重要。我是Uni-Bal Vision的忠实粉丝，它是防水的。一支顺手的笔刷，可以很好地大面积填充深色墨水。

所以，总而言之，下面介绍一些画好互动手绘稿所需的“会议”用品。

钢笔——我爱用钢笔绘图。当然，用墨水挥洒创意需要一定的自信，不过你可以随时重画那些线条。客户也喜欢墨水的清晰。我最爱的钢笔是Uni-Ball Vision。它是防水的，可以放心用水彩笔画上颜色。

“便携式”白板——找一块旧白板，将它切成更小更易携带的“移动”白板。移动白板可以跟着你穿梭于办公室之间，还能通过Evernote来记录迭代修改和手绘稿。

大素描本——别在客户项目中用小素描本，不要怕，找些14英寸宽的东西来用。尽可能在大的东西上呈现创意。

活动挂图——它和便携白板类似……是件不可思议的工具，能让你的客户紧密围绕某个创意或概念。而有粘性的那种能粘在墙上，用来应对长时间设计会议和整个下午的团队工作。

结论

作为一名设计师，最贵重的财产就是你的头脑。快速即兴表达视觉信息的能力，让你区别于网页开发流程中的其他角色。而手绘能将你从鼠标和显示器中解放出来，现场展现客户所需的答案。

具备了可靠的手绘技巧，设计师可以即兴表达创意，将交谈转化为实实在在的创新。手绘可以很通俗闲散，能让整个项目保持亲切。

那么，拿起一只钢笔或铅笔、一本素描本，然后将你的涂鸦转化雇主和客户的销售额吧。

原文链接

网页设计的10个灵感来源

hi@victor42.work (Victor42) — Sun, 10 Nov 2013 10:54:31 +0000

[国外设计第17期]

这一期有意外收获，我在译言网上发布的原文竟然被人抢先翻译了。通读一遍，发现译者的文字功底相当深厚，而自己的翻译太拘泥于原文，收益良多。有兴趣的朋友也可以看看本文的另一个翻译版本

能够激发我们创作优秀网站的，不仅仅是网页设计

这世上几乎每一样你身边的事物都能对你有所启发

你总是无法预料什么东西会点燃你创意的火花，我时常发现，一些最常见的事物能让我从新的或不同的角度来思考项目。这里我们介绍10种我最爱的网页以外的设计灵感来源

大自然

思考设计的最佳地点之一就是户外。看看自然界这些伟大的图形和色彩搭配。就我个人而言，我喜欢从花卉中汲取配色灵感

这株秋天的三色堇，可以作为新项目配色方案的出发点，伴以明亮且对比鲜明的颜色所营造出怦然效果【作者这里似乎忘记配图了，说好的三色堇呢~】

音乐

虽然很多设计师都会赞同，听听小曲是激发设计灵感的绝佳方法，然而音乐也能给人其他收获。想想你听不同风格音乐时，所感受到的形形色色的情感。收听吻合你项目基调的音乐，可以额外激发一些灵感。听音乐时随思维跳跃，将大脑在听音乐时创作出的画面，用作项目雏形的基础

我也喜爱音乐作品背后的创意和思想。专辑封面（甚至包括电子版）是个有趣的启迪思维、迸发创意的方式。我最喜欢的一张是极简风格的Jay-Z的The Hits Collection Volume One（它有着扁平风格的设计，并且在当前趋势流行很久以前就发行了）

艺术

设计是艺术或创意表达的另一种形式，参考其他艺术形式能够充分帮助你推动项目进行。不过别拘泥于最浅显的那层含义——参考美术作品。雕塑也是一个极好的灵感来源。细致观察它们的形状、物体的连接和相互作用，然后头脑风暴出规划网站的新途径

包装

包装设计可能是最容易被忽略的设计领域之一。回想一下，你有多少回拆封一条口香糖或丢弃一个饮料瓶时，却根本没注意过它的外观。在狭小空间中使用时，这些物件往往都是非常好的例子（从可读性角度回想一下食品标签上拥挤的信息）

观察这类东西，能极大帮助你处理好狭小空间。包装也有很多种形状和形式，能帮助我思考不同的内容展现方式（不是什么东西都得是四四方方的！）

照片

[译者注：创意机构Artsy也为Jill greenberg制作了个人主页，应对方要求，在此添加了上面的地址]

尽管摄影是网页设计一个显而易见的灵感来源，但它可能并不像你想象中的那样，只发挥常规的作用

如果一张漂亮的图片对你的项目有帮助，别仅限于从中汲取灵感，直接使用它。大胆设计，聚焦于这张漂亮图片。另一方面，如果你没有合适的图片，搜罗全世界的照片来寻找灵感。当你感到艰难、设计卡住时，National Geographic、Jill Greenberg和Levon Biss，就是寻求帮助的绝佳地方（而且这些网站围绕图片的设计都做得不错）

时尚

T台、时尚秀和杂志是参考新兴潮流的绝佳途径，从颜色到尺寸再到纹理。然后你可以将其中一些概念同样运用在网页设计中

时尚设计师在秀场用到的尺寸，或许有助于你思考从大（或小）方面来着手构建事物，但颜色选择和纹理才是最值得一看的时尚元素（想想时下的雪弗兰热潮就知道）。我们在网站上看到的很多背景纹理也取材于纤维制品或服装图案

提到从时尚中汲取灵感时，有一点需要注意：有时候网页设计师们需要好一阵子才能捕捉到最前卫的潮流。但这是一个站在时尚前沿来思考未来趋势的好办法

室内设计

若说获取颜色与纹理设计灵感，室内设计是世上最棒的途径之一

逛家具店，触碰和观察布艺品，有助于把你的网站所需背景视觉化。你也可以在现实中混合搭配颜色和纹理，从而你可以在创作电子版本前，挨个尝试哪些适用

观察室内设计动向，也能帮助你在颜色方面掌握流行趋势。斑驳脱落的油漆和设计博客是不错的地方，能让你思考时下盛行的颜色，以及如何运用于自己的项目中

食物

虽然有大量的反对者非常厌恶Instagram上那些食物图片，但这些简单的照片也能带来灵感

颜色和形状的组合有时非常棒。处于某种原因，寿司图片给我非常多启迪（可能是因为颜色和它圆形的轮廓）。观察食物能帮助你创作一个与食物相关的网站……或者是某些完全无关的东西

旧物

提到创造意象，旧物能很好地帮助你入手。硬币、电影海报和旧书中包含了很棒的颜色与字体案例

你所看到的样式大多都不常见，能帮助你完成一个外观感觉不要求太前卫而是与众不同的项目

这些灵感来源的妙处是，它们会让你从不同方面思考意象。比如很多旧书，包含了素描样式的图画，而不是照片或全彩色绘画。看着这些样式，能帮你考虑各种不同途径，来在项目中创建和使用图片

建筑

建筑及它的轮廓（特别是大城市中的那些）对我来说是相当惊艳的灵感来源。这些创造物的外观和“生命”简直让我有种冲动亲手设计些东西

在数字领域运用你从建筑中观察到的形状，来创作一些有趣的东西。当你需要一幕背景或框架来排列布局各元素时，想想建筑轮廓与地平线是如何交汇的。也回忆一下夜晚的天际线，明暗（颜色对比的基准）如何共同作用来创造视觉特效，然后将它复制到设计项目中

原文链接

网页设计中的半透明运用准则

hi@victor42.work (Victor42) — Sun, 15 Sep 2013 00:32:56 +0000

[国外设计第10期]

使用半透明元素来设计网页很美观也很需要技巧。半透明效果是指色块、文字或图片被“稀释”或者冲淡，使得颜色减淡，并且透出后方内容

执行到位的话，这种效果会非常震撼，能划出一块绝佳的文字展示区域，或者作为吸引注意力至图像某部分的手段

但是使用半透明时，设计师必须小心谨慎。这种效果很难处理得当，因为事关可读性。透明度使用错误的半透明块和文字也，会能散注意力，并且破坏整体设计效果

接下来看一套行为准则，附带一些半透明效果在网站上的优秀执行案例

通过半透明来形成对比

选用半透明设计技巧的最大好处，是创造对比。这种效果可以让设计师通过色块、图片上的大字体或多种颜色层次来创造视觉焦点

半透明也可以在背景图不能很好展现上方文字时，将文字分离开来

使用半透明设计时尤其需要考虑对比。只有图片（或背景）和文字都可读时，半透明效果才是有意义的。当你考虑使用半透明效果时，问问自己：这是否有助于用户对图文的理解？

避免遮挡图片的重要部分

半透明效果不应该遮挡其下方背景或图片的重要部分。决定半透明层位置的时候，要清楚你“牺牲”了什么内容

用不同的透明度

没有完美的透明度值。对于某些项目，80%透明度比较理想；对于其他的也许15%才是最佳选择。对每个项目采用不同的透明度

不要觉得半透明就能让文字更易读

使用半透明色块来衬托文字并不意味着文字会自动变得易读。要考虑对比——半透明色块与文字、背景图与半透明色块两方面都要考虑

半透明效果用在图片、色块或文字上时，考虑文字的可读性至关重要。切记，如果设计效果致使文字难以辨认，你的信息将无从传达

在细节处使用半透明效果

半透明并非只适用于网站的主体部分。这种效果在细节处也能大放异彩

可以考虑用半透明来展示导航工具栏，或者作为按钮和可点击元素的鼠标悬停效果。多种透明度不要使用过度。选定一种元素和透明度样式，然后使它贯穿整个网站的设计

不要在对比强烈的图片上放置半透明元素

处于可读性考虑，最好避免在已经包含强烈对比的元素上使用半透明效果——比如黑白对比或色盘上的互补色

因为要在背景的各个部分都达到正确的效果很难，想在这类元素上使用半透明效果，除非强烈对比在你的设计中真的只起到负面作用。考虑用浅色块代替吧

将半透明作为一种艺术手法

半透明不只是次要效果。可以考虑用这个效果为你的网站设计主画面

大尺寸半透明创造的对比、强调和视觉吸引令人震撼

不要将半透明作为装饰物使用

半透明效果并非为了打破设计中的单调。把这种效果作为装饰物使用，注定会导致糟糕的设计

半透明效果的使用应该事先考虑和规划好。半透明不是加粗这类简单效果，处理不当看起来会很草率且不专业

在背景中使用半透明

不只是设计前景元素时可用半透明效果，它也能用在背景图上。有些非常棒的半透明元素精细微妙

还有些半透明效果夹在图像层之间。例如Tony Chester的网站，就用了绝妙的半透明分层技巧打造了一件多维度的设计

不要同时运用过多半透明效果

在每个项目中有节制地使用不同类型的半透明效果。透明度要能制造反差对比，产生视觉吸引力。这样使用过多的差异化效果，会分散用户注意力

在轮播图片上使用半透明元素

半透明的使用不限于单页网站或静止网站。它在变化的图片和背景上也起作用。两种方式都可以用上半透明效果

在轮播图片上使用半透明，是该效果最棘手的用法之一。却也最令人印象深刻。慎重考虑多张背景图的情况。选用颜色和对比搭配相近的图片，这样只需一种半透明效果即可应对后方移动变换的背景

格外注意半透明效果与每张图的匹配程度，才能保证每张图的整体性，并创作出易辨认的照片或其他背景与文字，保持视觉统一

小结

尝试半透明效果，是拓展设计技巧的一个绝妙方法。像很多其他效果一样，要有节制地使用这个技巧，并且在多种环境下实验这种设计，来确保它按你的意图运作和展现

半透明设计的最大挑战，是在轮播图片上使用时确保文字清晰可读，和避免半透明元素错误地遮挡下方图片

尝试多种透明度和使用方式——用于图片、背景、遮罩效果——来决定那种效果最适合某个项目

原文链接

打造精彩的单页网站

hi@victor42.work (Victor42) — Sun, 25 Aug 2013 01:25:52 +0000

[国外设计第7期]

不是每个网站都要很复杂或包含很多页内容信息

有时候一个页面就足够了

不过你打算用一个页面来创建网站，并不意味着它会很轻松

开发一个单页网站布局所需要的思考与规划，不比某些更加复杂的网站少。它需要将所有相同的基础元素整合成一个更大的站点，还要让人看起来印象深刻，你得照着预期进行并且怀揣明确的目标

本文中我们来看一些精彩的单页网站设计，它远比你想象要流行。在你欣赏这些网站的外观的同时，不妨点击访问，体验一下网站中这些非常棒的用户界面细节

什么是单页设计？

单页网站建立在单个窗口中

单页网站的概念更多基于滚动而非点击（尽管点击也没有被禁止）来浏览和通读网站与它的内容

一个单页网站可以简单到像一页纸，恰好吻合浏览器窗口且不需要滚动。但它并非总是如此。单页网站可以滚动（当然也别把网页设计得太长，这非常重要，用户会受不了）

简单来说，单页网站是不包含域名内的链接并且所有内容都在主界面的网站

为什么选择单页设计？

单页网站设计有很多注意事项，它并不适合每个项目

它流行的使用场合：上线前的APP预告、带有email注册表单的网站、作品集展示工具、引导用户跳转的网站、简单展示产品和信息的公司网站

单页网站通常设计得很赞，因为它们只有一次机会——第一印象——来从杂乱的视觉景观中吸引用户注意力

这类页面通常都适用于不具备丰富内容的网站：售卖单个产品的网站，用来推销另一个网站、APP或商品的网站，小型作品集或简单的信息

既然这类网页的设计通常都高度视觉化，文字就得尽可能保持精简。单页网站同时也需要一个清晰易懂的用户界面，用户才能准确知道他们可以用这个网站来做什么

怀揣目标

开始设计单页网站时要有清晰的目标。你想让用户在你的网站上做什么？他们浏览时候应该接收到什么信息？

比如说，如果你在预告你一个APP，你可能想要用户提供email地址，这样你可以在发布时告知他们。如果你在出售一套UI工具，你的目标就是将访问量转化为销量

其他行为可能包括：填写表单、观看视频、转到其他站点，或以上都有

在开始设计之前，了解你想要用户做什么，并且自始至终反复强调

通往成功的设计秘诀

既然你已经了解自己想让网站干什么，遵从下面的几条秘诀，然后踏上发布之路吧

创造第一印象。你只有唯一的机会来增加新用户。你的网站得通过视觉吸引来迅速告诉用户他们为何来这

保持专注。记住你的目标，去除所有碍事的小花样、设计元素和文案

使用鲜明的视觉风格。无论纯色、图片或漂亮的照片，选择一种很棒的视觉表现，并且大张旗鼓地使用它

开发一个清晰的导航。尽管你可能会怀疑你需要导航干什么——它毕竟只是个单页网站——任何一个包含许多目录、表单和各种形式链接的网站都需要清晰的导航。用来告诉用户不同按钮的用途（尤其他打算下载或购买你的产品）。即便是拥有少量内容的网站，也需要包含一个清晰易懂的指引来发挥作用

精心组织。你绝对没法在单页设计的版面（或空间）中说清楚你的全部所想。信守什么是重要的，并将所有东西根据重要性层级排个序。撰写简单清晰的文案，不断编辑直到措辞简洁明了、切中要害

设计时玩得开心！

酷炫的花样和效果

有数不清的酷炫花样和选项可以帮助你充分利用单页设计。有些甚至是从移动端概念中“偷窃”而来，那是个单页设计随处可见的领域

视觉差滚动：滚动特效是单页设计中最盛行“花招”中的一个。轻弹鼠标，用户无需点击或从欢迎页跳转就能来到一个新页面。这种效果可以激励用户继续滚动、阅读、与网站互动，看看接下来会出现什么（你可以在之前的文章中学习更多关于视觉差滚动的知识）

移动APP欢迎页：创建一个特别的欢迎页面，在用户通过移动设备和平板电脑访问你网站的时候，鼓励他们下载APP。这个“广告页面”可以帮助你将网站用户转化为正式的APP用户

隐藏式导航：鼠标接近时会出现和隐藏的菜单可以在整个设计中节省空间，并且始终在熟悉的位置提供导航（通常是页面顶部）。你也可以试试其他导航特效，比如Jamie Oliver’s Fifteen页面中那样，导航刚开始在屏幕中央，随着鼠标向下滚动移至顶端（并且固定位置）

动画：如果视觉差滚动不是你的菜，考虑一下用动画或视频背景来增加视觉吸引力。移动物体会诱使用户逗留，看看接下来发生什么

结论

和其他类型的设计“花招”或趋势相比，单页网站只有在你内容专为它定制时才有效

这种风格最适合内容有限且视觉鲜明的网站

原文链接

如何让响应式设计保持迷人

hi@victor42.work (Victor42) — Sun, 18 Aug 2013 22:14:39 +0000

[国外设计第6期]

响应式网页设计很流行，而且绝无秘密可言。行家们倡导，各品牌趋之若鹜。这不仅是创建一个移动端站点，而是让你的网站适用于每种浏览器尺寸，不论桌面端、平板还是智能手机

响应式设计的秘诀，是创建一个不论大小尺寸都美观的网站。在点开你的设计软件着手动工之前，你需要考虑很多。这是个额外步骤，最终成品却总能证明它的价值所在。很明显，设计师若不考虑响应式设计，网站就会倾向于呆板无趣

设计师绝对有必要保持自己的创意贯穿整个响应式站点。鉴于更多人在使用平板和智能手机，你总希望保证每个人都能访问你的网站。这里有一些提示，可以帮助你在设计响应式网站的同时，保持创意和高效

1. 使用绝妙的字体

对于响应式网站，你不得不考虑它在小屏幕上看起来如何。好的字体是所有优秀网站的重头戏，然而它在响应式设计中，却几乎成了必需品。随着屏幕减小，大部分元素都应该变化、缩小或者移动位置。首先，也是重中之重，你的字体要具备这种能力

第二，你得用不同标题尺寸和多种文字大小。如今，我们在桌面端设计中常常使用巨大的标题和页头。这点不必延续整个网站，因为你总得考虑更小尺寸。确保你使用FitText这类插件来缩小字号就好，它很管用

Smith用了很多种不同字体来打造引人注目的外观和氛围。也将不同字体大小贯穿全站。桌面模式下，文字和段落多列布局的方式很有意思。当窗口被缩小，文字压缩成一列。所幸文字的比例和样式没变，保持了一致性

Smashing magazine的做法也一样。窗口缩小时，整个抛弃了右半边的设计（广告）。无论如何，窗口中的文字、样式、颜色和大小都始终如一

2. 使用精彩的图片

和文字排版一样，图像在任何网页设计中都至关重要。在响应式设计中，当你在更小的屏幕上查看网站，你的图片应该相应更小或等比缩放，这点也和文字相同。响应式设计中有成百上千种不同布局和图片尺寸。注重图片的选择和使用，因为它们毫无疑问会发生变化。随着屏幕变大或变小，图片会改变形状和展现方式，或被裁切掉一部分

理想情况下，你会希望确保窗口尺寸变化时，大幅摄影图片不会有任何裁切。另外，在你制作图像时，必须保证你的作品加载速度快，而且对小尺寸屏幕可见。这就是为什么设计师推崇扁平设计，它使得这点更容易

在Pandiscio中，首先你得注意一下这个大标题图片在桌面端的样子。它是完整的，伸向两侧边缘，而且质量相当高。当你缩小窗口尺寸，图片也跟着变小、变化形状（从矩形变成方形）、被裁切。他们找到了随屏幕尺寸变化仍保持美观的图片

KinHR是个使用了各种不同图形化元素的网站。请注意在大小尺寸下，头图会像Pandiscio一样缩小。但无论如何，在网页主体部分中，图片缩小却保持外形不被裁切

3. 不要忽视导航

如果人们不知道如何浏览你的网站，那他们就直接不浏览了。响应式设计的导航更难处理，因为我们已经习惯于为横向设计打造导航。如今，我们得创建能够轻易压缩以适应纵向规格的导航

只有少量链接时这并不是大问题。你可以将你的导航变小或缩至顶部，也可以为访客提供一个下拉菜单。主要问题是该如何处理包含更多内容的繁重导航

Mashable有大量链接，因为它有大量的分类甚至更多的文章。在这之上，他们还有自己的公司二级页链接。Mashable决定在左侧为小屏幕浏览器创建一个弹出菜单

Monocle网站导航顶部有两块延伸部分。为适应小尺寸浏览器，他们为极端情况的内容创建了下拉菜单，并且缩减了导航的第二部分

4. 使它好玩

点击网上的链接，在看见页面之前，你很可能要坐等内容加载。精确地找到“下一页”按钮来浏览更多内容也非常令人讨厌。这类的事情并不好玩，也不直观

注重细节并使你的网站更加直观，会令你的网站更值得分享。想想在所有尺寸的浏览器上使用同一个网站会是怎样。想想你执行一个操作时网站应该如何反应。找到这些问题并修复它们，你的网站用起来就会很容易、好玩和直观，同时也使它更有趣点！

Mud注重各种过渡效果，使得他们的网站更加有趣。很多元素滑动下拉和淡入，而不仅是唐突地移动和出现，从而创造一种非常顺滑的感觉，与众不同

在作品集之间跳转时，Neue Yorke用了很多动态效果。动画再次创造出了高端的感觉，让访客对即将显示的内容兴趣十足

5. 跳出条条框框

如果其他办法都没效果，那就发挥创意吧。响应式设计并不意味着要束缚我们的创作方式。总有实现创意的空间，无论通过代码还是设计

Enso创造了一个看起来绝非响应式的网站。注意尺寸缩小时布局如何一点点变化，却仍然保持着他们的品牌和创意

TBWA有一个创意精彩的网站，不过他们也有精彩的图片和字体！他们物尽其用打造了一个非凡且有趣的响应式设计

结论

在响应式设计或任何网站设计中保持创意，和画出构思并修改定稿一样简单。开始计划网站的作用和功能时，会比着手动工更好玩。响应式设计未必是一件重大、万全的任务，广大设计师畏惧的那种。它非常简单！记牢所有我们之前讨论过的，然后创造世所罕见的精彩网站吧！祝你在响应式设计中好运相伴

原文链接

打造完美婚礼网站的秘诀

hi@victor42.work (Victor42) — Sun, 04 Aug 2013 21:15:18 +0000

[国外设计第4期]

可能你已经收到过好几次请帖，或者准备好了礼物

因为这正是婚礼时节

夏季和秋季是受欢迎的婚礼季节。新人们越来越觉得，一个很棒的婚礼网站是和亲朋好友们交流的绝佳方式，还可免去各种额外花销。这原本小众的趋向，正在变得越来越流行

一个网站可以用作结婚纪念、婚礼信息展示台（登记信息、着装要求、向导指引和其他更多），还可以作为一个分享图片与视频的地方

很多新人会选择模版样式个性十足的婚礼网站，可以让他们的网站脱颖而出。一个精美的婚礼网站比facebook页面更个性化，也让不用社交网络的人（好吧……）更易访问

在这，我们分享一些打造精彩婚礼网站的诀窍和个性十足的案例——其实你不必依赖手书和粉红丝带

强调欢迎页面

一个婚礼网站可以简单到单页设计，或者复杂到任何你能想象。但是欢迎页面是重中之重

婚礼网站的欢迎页（或主页）应该传达三件事：新人要清晰可辨，要能看见婚礼日期，所有其他导航项应该清楚、容易找到

新人决定放在网页上的信息各有不同，但是通常都应该有事件信息和指引（包括外地客人的住宿信息）、婚礼事项、请帖、礼品登记链接和联系方式

使它个性化

设计一个婚礼网站最重要的部分就是个性化

你的网站上要反映出你们是谁。主题要和你的个性相匹配——有趣、正式、非传统或是古怪

一个婚礼网站必须长什么样，并没有具体准则。它应该同时符合两位新人的审美观。（太多婚礼网站模版都凸显一种女性化风格，这并非对每个人都有吸引力）选择两位新人都喜欢的字体与配色。考虑把这个大日子的主题创意加入到网页设计中，使用相同的配色和字体

使用这个网站来讲述你的故事。你们如何相遇或成为情侣？怎样走入婚姻的殿堂？记住，你的一些客人可能不知道故事的完整经过，这可以帮助他们在婚礼之前更好地与你联系

包含照片与更新

另一种让你的网站个性化的方法，是包含大量图片和更新。一些网站甚至包含了博客，这是种分享婚礼新闻的有趣方式

加入图片也是一个创造精彩的好办法，正由于这些肖像照片的存在

而且记得要有趣。秀出你最棒的情侣照片——欢乐时分、肖像照，甚至还有你们喜欢的地方，或是婚礼现场

很多新人在婚礼结束后也会继续更新网站，分享结婚典礼、招待会和蜜月的照片

包含事件信息

这个也许不是你网站最有趣的部分，但它是让访客和婚礼宾客产生大量点击的部分

确保你的网站包含了所有相关的事件信息，从婚礼地点和交通信息，到着装要求、用餐选项（如果适用）和是否适合儿童

然后可以考虑一下电子请帖，如果你不想处理纸质回函的话（这也可以为你节省一些邮资）

还要包含礼品登记链接。虽然有些新人会回避这个主意，但它可以方便想要送礼品的人们

最后，确保要有联系方式。无论是电子邮件、电话号码或是街道地址，必须让人们更容易找到你。担心垃圾信息或不受欢迎的访客来你网站？考虑使用密码保护——你可以把它作为链接或加入邮件中发放出去——或者令你的网站屏蔽搜索引擎

友好的用户界面

这点几乎不用说，但还是要记得使你的婚礼网站对用户友好

链接应该容易找到和点击，导航要简单。一个婚礼网站不必包罗万象，很多都只是一个滚动页面

也要考虑建立一个移动版，或者使用响应式设计

根据流行趋势设计

我们Designmodo讨论了很多流行趋势，你也可以把它们用在婚礼网站上

Courtney和Andrew的婚礼网站将三种流行趋势组合成一个很棒的站点：扁平设计、视觉差滚动和复古色调

这个网站给人超级现代的视觉和感受，它的脱颖而出正因为它紧跟潮流的设计。（我们从个人简历猜测，这个网站如此美观可能归功于Andrew熟悉“网页设计和开发”）

结论

婚礼网站每天都在变得更受欢迎

就像礼服一样，大部分新人都想为这个大日子打造一个完美独特的网站。无论你选择已有模版或是定制网站，记得把它打造得专属于你

原文链接

现代极简风格:纯文字+背景图式欢迎页面

hi@victor42.work (Victor42) — Sun, 28 Jul 2013 00:47:57 +0000

[国外设计第3期]

文字与背景图片是每个现代网站都具有的重要元素。这两项首先映入用户眼帘，使他们熟悉网站标志、简介和导航。搭配合适的照片或图画，创造所需氛围。文字与图片在网站的视觉和内容方面同时发挥作用，它们的组合极为有效，甚至只用这两种元素就足以建立一个与众不同魅力十足的欢迎页。它们在一起可以打破任何限制，巧妙地相互结合与补充，脑海中的任何想法，都可以通过它们实现

今天我考虑尝试一种更为极简主义的方式，让页面除了这两项基本元素之外再别无他物。我深入了解收集了一些网站案例，它们的首页都只包含背景图和精巧的文字

极简风格欢迎页：文字与图片

少年派的奇幻漂流冒险氛围十足。欢迎页面华丽的朦胧风格，和粗边框中的朴素白色文字都令人着迷

Levante用优雅的女性化字体来装饰轮播大图。顶部细长的深色导航条，用整齐的浅色字与主页相互映衬

蒙着白色轻纱的城市风景图，是Allamar Design的重要元素，让网站看起来干净整洁。深色的圆形LOGO和标题优雅结合，立刻吸引观众的注意力，尽管相对整个页面它其实很小

Clouds over Cuba与上个例子刚好形成鲜明对比。这个网站也用深色的城镇风景图作为背景，白色细字体标语看起来非常显眼

Beta Takaki的动态效果让人印象深刻，几张办公场所的特写交替切换，使得前景元素跃然屏幕上（这条的意思纠结了好久，打开网站一看才明白，原来背景图是会动的，用了近年流行的滚动视差效果）

EDIT OpenDay 2013采用了极度锐利的字体和平面构成风格，简单原始的风格吸引用户

Iuqo用的不单单是背景图片，而是一段让用户在云中飞行的迷人视频。紧凑排布的扁长标题、轮廓式LOGO和底部两个菜单项，使主页看起来极为通透

KIN HR展现了一副团队工作过程中的场景，配上相当大的标题，厚实的标准字体使页面看起来非常棒

柔和、光线明亮的背景照片，还有标题上那醒目的半透明圆圈，造就了Borgo 27温暖的氛围

Deleting Borders的显著特征，是无出其右的纤细标语，占据着整个设计的中央部分。暗淡、带点杂色的背景图与微微透明的高调字体完美相配

House有着格调迷人的清新夏日风格。白色朴素的字体设计LOGO和lomo风格全屏背景图极好地搭配

Basader又是个非常棒的全屏视频背景案例。硕大的黑色倾斜文字，与力量十足的愤怒海洋景象完美匹配

Epok Design基于各种视差效果，很好地在欢迎页表现了公司信息，还有与之相配的照片和有趣的介绍

Le Rockwood被设计成常用的黑白色调，它非常依赖这张情感强烈的照片，照片刻意加深处理过，还有厚实夺目的字体

Sebanado选用了一张时尚精美的图片。这张时尚主题照片和极小的标题增加了网站的神秘感

Web Akademie使用了非常朦胧的背景照片和与众不同的圆润字形，为网站营造出精致时尚的外观

Samaritaine的手法是使用引人入胜的视频简介，以迷人的屏幕保护结束。后者依赖柔和的颜色组合，和轮廓圆润的巨大粗字体，来增加额外的冲击力

Wearegoat把屏幕分为两部分，并且将用户注意力集中在主要方面。第一部分用于自我介绍（通过一小段描述文字呈现），第二部分直观展现日常工作场景

Thomas Loizeau使用一张惊险的高空照片和优雅适度的浅色文字欢迎潜在客户

Digital Park以与众不同的三维多边形为亮点，这必然为中央部分的设计增加了一点纵深。除此之外，巨大的黑色非正式字体和单调的灰色背景看起来很协调

Papercutart. 灰色与黑白照片、大量留白，还有一小段有活泼手写体的文字，给网站一种高雅的感觉

温暖的图片、极度突出的标题，Demi Creative漂亮地将两者结合起来，为网站注入象征主义

在复古导航和颇具创意的LOGO支持下，Mountain Standard Vail展示出令人印象极为深刻的风格

Swedish Seasons展现一副华丽的风景图，覆盖着的深色半透明三角形上，排列着菜单与网站标题。总体来看，这个网站有着精致高雅的外观

My life in 20 years真是个与众不同概念独特的网站。首页上包含了抽象线条背景和巨大简单的字体，直接将作者的想法摆在最显要位置

Loft City Church包含一个全屏图片轮播，向用户展示教堂活动信息。一组完美排列的巨大标题，清晰明了阐述这个网站的设计美学

Moio用了令人惊奇的单色矢量LOGO和粗犷字体，为网站注入运动风格的调调

Aguru Digital Agency给人艺术性的印象。深色的绘画背景、微妙精致的菜单，还有优雅却有些许欢快的字体设计LOGO，传递出很棒的平衡感

反思

通常设计师更喜欢用激动人心的背景图片，再稍稍加暗处理，可以避免对比不够明显。近乎纯白的亮色在任何此类背景上都华美清晰可辨，所以你有机会一箭双雕。首先，你不用浪费时间制作非凡的字体——常规字体就可以了，你要做的只是选择正确的粗细和尺寸；第二，你也能在不降低可读性的情况下，用一张别致的背景图迷倒用户

原文链接