趋势 on Victor42

混合型界面：对话式UI的未来

hi@victor42.work (Victor42) — Sun, 08 Jan 2017 12:46:00 +0000

[国外设计第159期]

2016年是对话式设计之年。消息应用正以惊人的好评度和参与率，占领世界和app store的排行榜。每个社区产品、应用市场、点播服务、约会应用、社交游戏和电商产品，为了提高好评度、参与率和销量，都已经或即将加入消息功能。

有大量关于对话式UI的讨论，还有这种人机对话模式如何通过简单的指令和文字反馈（偶尔配合照片），将消息或语音交互融合在一起。虽然我很喜欢文字和照片，但它尚有非常广阔的探索前景，可以在对话式界面中加入丰富的图形界面元素。

这点有些讽刺，因为1986、1996、2006年也是对话式设计之年。想知道对话式UI会走向何方，我们就应该回到这些历史时期。

命令行，又称作原始对话式界面

似乎我们都见过这些界面。命令行正是最初的对话式界面。输入上下文指令，敲回车，电脑就会执行命令，并且打印出答案。输入和输出都是文字。有时候通过非常原始的方式，你能看到各种符号组成的表格或ASCII码图片。这是文字媒介的一种极具创造力的用法，但它本质上还是文本。

Linux命令行

仔细想想，这是不是很像一场互动对话，人告诉电脑做什么，电脑执行，然后回来汇报结果，或者提出新的问题，得到回复后才能继续任务。

命令行最大的缺陷在于，你必须准确知道应该输入什么，或者让电脑给你提供选项。要记住所有这些命令，对多数人而言要求太高，这时的电脑还不够平易近人。

即使早在那个年代，消息应用就已经存在了，因为人们不仅仅想要与机器对话，也想和人类对话。交互被局限于文字媒介。

图形化用户界面

施乐公司帕洛阿尔托研究中心，一家复印机公司下属部门的天才们，创立了一系列用户界面范式，彻底改变了游戏规则。让不懂命令行、也不愿花数小时学习的用户，能够直接用东西（鼠标指针）指着屏幕上熟悉的视觉形象。

Xerox Star用户界面

这些物体代表了人们在现实世界中熟悉的事物——文件夹、按钮、垃圾桶。除了这些熟悉的视觉隐喻，他们还加入了新的概念，例如窗口、对话框、桌面等等。这些物体让用户能与电脑交谈，电脑也能以图形化而非文字的方式与用户交流，只需要指向并点击他们需要的操作。

采用对话式UI的消息应用

文字主要用于输入网址、撰写文档和邮件，已经不作为人机交互的主要方式了。但它仍然是人与人通过电脑交流的主要方式，聊天室和前赴后继的消息应用都是如此。

聊天室就是最原始的Slack。显然，它更粗糙、更欠产品化。但聊天室引入的许多概念在今天再度盛行。聊天室已经支持了聊天机器人、多人测验、投票和其他类型的对话式应用，各频道可以依需要启用。

Trivia聊天室机器人

即时通讯应用在视觉上更自然，随时间推移也开始支持更丰富的媒体格式，例如表情、照片、视频和小程序，例如游戏或测验。第一批这类应用包括ICQ、AIM、MSN和Yahoo! messenger，在90年代末极度盛行。

MSN messenger里的井字游戏

随着移动通信的到来，还有运算设备屏幕的局限，需要对桌面端的富图形界面进行重新思考。早期的移动设备只有几行简单的黑白文本界面。

短信服务（SMS）是1994年少数几个出现在移动设备上的服务之一。短信只支持文字，并且不能超过160个字符（译者注：这是在作者的国度）。从一开始，它就既支持人与人互发短信，也支持人与电脑发送消息。短信具备一些聊天室和桌面即时通讯应用不具备的特征。它能持续运转，可以在任何时候接收到通知。也出现了基础的对话式服务，例如通过短信指令查询余额。文字游戏、星座运势、还有其他娱乐类内容，把短信的运用推向了一个新的方向。而相对严肃的应用，例如天气和股票行情，则又是另一个方向。这些应用通常都由服务商或者关系紧密的企业提供。不像聊天室或即时聊天应用，短信自己集成了支付系统，使得它能在这个平台上构建出真正的业务。最后，许多像Nexmo这样的上层服务商（OTT），让每个开发者都能运用短信来搭建全球平台。平台限制和入口，使得短信成为移动端对话式界面、聊天机器人、智能助手绝佳的试验田。由于只能使用文字，基于短信的应用与命令行的体验差不多。

Assist的短信聊天机器人界面

随着智能手机的崛起，我们看到越来越多的上层服务（OTT）应用开始蚕食短信的核心价值。通信应用在移动使用中占了最大比重，因为用户暴露在大量消息通知中。由于这些消息应用通过IP通信，绕过了运营商的信号网络，对内容的类型基本没有任何限制，消息中什么都可以发。可以看到，这些应用已经扩展了消息类型，包含照片、音频消息、视频、表情、动图等富媒体。微信和Line这些来自亚洲的即时通讯软件，还将这些富媒体消息扩展为迷你应用。Facebook Messenger对这个概念进行了移植。每个消息都是一个自我包含的应用，可以产生文字或富媒体界面。

上层消息应用正在逐步开放API来整合各种服务，非常像短信的演化路径。Telegram、Slack和 kik都有成百上千的聊天机器人。

Slack中的KhaledBot

尽管如此，限于应用所处的环境，其中多数机器人还是基于文字，还不支持迷你应用。仍然近乎于命令行，只是额外加入一些富媒体内容。

不像短信是整合到系统中的应用，所有基于短信的产品都依存于此，但许多产品都有应用内消息。各种消息应用、社区、应用市场、点播服务、约会应用、游戏和企业工具，都包含某种依照环境和用户专门定制的即时消息。一般来说，相对于OTT消息应用，这些应用都有简化版的消息功能，毕竟这些都不是业务的核心。但一切变化很快，我们在Layer打造的服务，能让消息功能被植入到越来越多的应用中。不只是把通常专属于消息应用的功能带给每个产品，最重要的是探索了新的可能性。

每条消息都是独立应用

下面是一些混合界面的案例，很好地将命令行与图形界面范式结合起来。2016年起，我们会看到更多此类案例，因为这种结合吸取了两者的优点：文字——对话式界面的快速输入，还有图形界面丰富直观的体验。

每条信息都是独立应用

每条消息都有成为一个独立应用的潜质。它可以显示文字、照片，或者在消息气泡的局限中展现更复杂的信息。有无限的可能，可以创造各种迷你应用，比如照片轮播、媒体播放器、迷你游戏、清单项、消息内支付等等。

富文本消息例子——音乐、照片、移动商店、迷你游戏、测验、快递、酒店预订

开发者们可以更多关注体验，不用局限于基础设施。将迷你应用作为消息的一部分，会成为一种行业标准。我们在对话式设计领域中已经能看到这种趋势，Operator这样的公司正在引领行业前行，设计出丰富的体验供用户直接操作，而不仅仅是回复文字。这是他们与传统消息应用的一大区别。

Operator中的可操作消息卡片

聊天机器人（自然语言处理、人工智能和其他许多美好事物）

你或许已经注意到了，以上案例中的某些消息，其实不必由人类来撰写和发送。事实上，随着消息变为迷你应用，加入聊天机器人就变得更有意义。这尤其方便了管理工作流的业务和应用。发出消息就是输入请求，回复的消息不仅仅是答案，还提供了一个完整的应用来处理请求。例如，向一个对话式应用提问“知道Onitsuka Tigers吗？”会得到文字或图片的商品列表，还可能返回带有轮播滚动的信息卡片，每条结果都带有购买按钮，可以直接触发支付流程。让人类来制作富媒体卡片极其耗时，但对于理解上下文问题的机器人而言，这是小事一桩。只有混合了对话式界面和富媒体图形界面，聊天机器人才能发挥它的潜能。

语音信息

苹果的Siri和亚马逊的Alexa/Echo做出了表率，语音可以成为对话式人机交互中一种强大的输入/输出手段。结合富媒体图形化反馈，它还可以更强大。带有语音输入和视觉输出的智能手表，是这个领域的一种探索。我很确信将来会出现更多类似形式。

原文链接：https://medium.com/the-layer/the-future-of-conversational-ui-belongs-to-hybrid-interfaces-8a228de0bdb5#.yn4io27e8

作者信息：Tomaž Štolfa Curious observer. Co-founder @Layer

聊天机器人设计终极指南

hi@victor42.work (Victor42) — Sun, 06 Nov 2016 00:31:52 +0000

[国外设计第152期]

聊天机器人的惊人潜力在于能够一对多地根据语境分别沟通。

我们把这句话分解一下。

**一对多沟通：**现今，有许多工具可以实现一对多沟通。从基本的信件，到电子邮件市场营销，再到社交媒体，这些工具可以轻松触达大量受众和目标群体，一视同仁。但是，这些工具多半不能分别沟通。

**分别沟通：**对大量人群进行分别沟通的方式出现并不久。目前最受欢迎的方式是程序化广告投放，但是最终要以一种有意义的形式触达终端受众，需要大量研究和分析技巧，才能正确运用。

**语境沟通：**我们每天与人交谈时都要这么做。在多数人来说是下意识行为。

“未来，聊天机器人会成为交互的标准方式。”

当有人问你“我给你拿件夹克过来？”你不会问他哪天拿过来——你很清楚他说的就是现在。你下意识（或许思考过，并且看了下天气应用）意识到天气因素，基于当前对话和环境，给出最适合的回答。

我相信，正是语境沟通（动态智能的一种形式）使得聊天机器人成为一种万众期盼的革命性技术。

现如今，机器人的语境沟通还无法做到完全合理，但还是有些做的非常不错，而且我相信这种交互会成为未来的标准：

虽然聊天机器人的创造潜力仍处于婴儿期，这正是令人激动的时代，创造者们试图掌握这种新技术的最佳运用方法，尽可能创造出最好的机器人。

为什么聊天机器人正在瓦解用户体验

除了我们刚提到的原因，还有人类天生就需要靠交流来维系。这是我们日常生活的一部分，我们依赖各种设备帮助我们进行日常沟通。

只有让用户活跃于社区中，而不是将用户拉入新生态系统，业务才真正算得上成型。不仅仅因为这更容易，而且性价比高，也因为这是更自然的一种交流形式。

“用户更希望你的服务植入到一个他们已经在使用的应用中。”

人们每天平均只用4-6个应用

尽管智能手机的拥有者平均安装了27个应用，他们每天通常只用4-6个。30天之后，只有3%的应用能留住它们的新用户。

“超过25亿人安装了至少一个通讯应用。几年后，这个数字会达到36亿，大约为全人类的一半。”

——《经济学人》

下载试用一个新应用，然后看看它是否有幸能成为那6个应用之一，这已经不再现实了。用户更希望你的服务植入一个他们已经在用的应用中，而不是下载一个新应用。

这意味着什么

别再浪费钱试图把人们拉进你的生态系统中。把你的内容推送到已经有活跃用户的地方。

图片来源于Statista

通讯应用已被广为接受

数千年来，我们都通过交流的方式销售商品、学习新技能、构建人际关系。通讯应用刚好是最新最有趣的交流方式。

“当我们群发消息到Kit社区，通常其中带有一则新视频的链接，我们看到转化率高达10%。”

——Patrick Starzan，Funny or Die的投资经理

排在最前的4个通讯应用，活跃用户数高于前4的社交网络应用。它们还体现出更长的活跃时段。WhatsApp的用户平均每周花费200分钟用于交流。

这意味着什么

继续一段对话，比开始一段新对话容易。以一种亲切自然的方式，用通讯应用与受众建立关联。

数据来自Buffer和Business Insider。

标识和功能可见性

如今，也包括可见的未来，机器人几乎不受限于输出内容形式。缺乏标识和功能可见性，既是挑战，也是创造聊天机器人的一大优势。

说挑战，是因为你得想办法有创造性地运用基本元素解决这个问题。

“将内容推送到已经有活跃用户的地方。”

好处在于它会迫使你打磨体验，尽可能达到最天然、有用的体验。

每个交互都应该有意义，能够提供价值。

文字元素

对话式界面的基础就是文字。有些平台允许按钮或快速回复与文字一起出现，但这还没有形成全行业标准。除非哪天，短信能适应聊天机器人的生态系统，不然它不可能成为通行标准。

多媒体元素

现在每个聊天机器人平台都允许发送图片了，包括短信。可以接收的格式包括JPEG、PNG和GIF。有些平台还允许你发送视频和音频，不过你最多大概也只能到此为止了，这是聊天机器人的平台边界。

允许发送视频的平台，包括Messenger和Telegram，但这些更高级的多媒体类型，必须通过某种定制的编码形式。

如果用模板式机器人平台，像motion.ai、Chatfuel和其他类似平台，它们都不支持视频和音频的发送。

创建聊天机器人的最佳实践

尽管科技从业者已经很熟悉聊天机器人，但对于世上多数人而言它仍然很新奇。

我在九月回到Nebraska的家里，当我告诉大家我在进行的工作，我得到这样的回复：“你是说那种当你无聊时，可以在AOL上和你聊天的东西吗？”

我笑了，但这就是现实。有许多人并不了解你说的是什么，所以创造时要牢记这一点。

下面是9条最佳实践，能帮你创造出友善的机器人：

1. 不要对用户撒谎

人们并不傻。如果过分承诺，或者声称你的机器人是什么先进玩意，但名不副实，他们最终都会发现的。

目前为止，机器人应该负责处理逻辑和它们擅长的事情。它们并不能替代人类的存在。

“要提前让用户知道他们是在和机器对话。”

你当然希望你的机器人尽可能接近人类，但是如果你试图说服用户这不是机器人，他们就会怀疑，然后可能就会离开。再次赢得信任，比预先告诉他们这是机器人更难。

如果让人知道，他们正在与一个有先天局限的机器交谈，他们会感到更加自在和包容。

应该怎么做

要提前让用户知道他们是在和机器对话。
让用户了解机器人的能力与局限，这样他们就不会什么事都找机器人。
当事情由于机器人的能力有限而搞砸时，要勇于承认。

图注：应该让用户了解，自己正在与机器人交谈。这样在机器人犯错之后，人们会更容易留下。不要试图说服用户，相信你的机器人比实际更聪明，或是像人类一样聪明。

2. 以对话开场

尽管像Siri、Alexa和Google这样的人工智能机器人已经出现有一段时间了，多数人仍然不习惯于对着无生命的物体说话或写字，以此达成目的。他们仍然习惯于操作所见即所得的界面。

作为聊天机器人设计师，这就是你的工作，巧妙地教育用户，对话式界面有多好用。

应该怎么做

可以的话，使用按钮来给用户提供熟悉的体验。（一些平台，比如短信，尚不支持按钮，可以用操作式指令代替。）
点了几个按钮后，引导用户输入回复来继续对话，让他们习惯于输入。可以通过提供操作式指令来完成。
确保所有按钮和指令都能触发操作。

图注：提供操作指令给用户，有助于教导他们和机器人聊天。不要留给用户开放性的问题或陈述，迫使他们决定接下来的走向。

3. 为人类情绪设计

和机器人聊天很枯燥。虽然这可能效率很高，而且符合产品的客观事实，但人们可不会喜欢，并继续使用。这也不是我们习惯的方式。

如果你没有给机器人赋予人格，用户就会这么做——所以要设定你期望的人格。这是你在品牌设计过程中已经完成的事情，但此刻更加重要。

为人类情绪设计聊天机器人，重要性不输于其他任何形式的体验。情绪决定机器人，机器人决定体验。

“情绪决定机器人，机器人决定体验。”

应该怎么做

使用友善、包容的语言和用户交谈，让他们感到在和朋友或熟悉的人聊天。
把用户输入复述出来，确保理解正确。这会让用户感觉自在，帮你赢得他们的信任。
当用户开始调戏机器人（例如反复问同一个问题考验它），无礼一点并不为过，告诉用户机器人正在听。

图注：使用友善、包容的语言和用户交谈，让他们感觉不到是在和机器对话。还要确保复述用户的意思，让他们更加自在，知道你理解正确。不要完全按照模板回答，无视用户的反应。

4. 交流没有限制

语言是地球上最有力的工具之一。在大学期间，我辅修英文——语言一直都让我着迷。但构建人工智能聊天机器人，是我做过的最困难的事情。

说话——我们组织语句和词汇的方式——在生活中是一种下意识行为。但是，要创造具有人工智能的机器人，我必须解构自己的潜意识语言模型，从而教会电脑我的本领。

思考如何称呼各种人物（或事物）会让人发疯，怎样的语法结构最能表现用户的谈话，什么词汇最容易被拼写错误，会被错写成什么样？

图注： “希拉里·克林顿为可持续发展做了些什么？”这句话有多少种问法？有8种方式可以指代希拉里·克林顿，包括：Hillary Clinton、Hillary、Clinton、Senator Clinton、Hillary Rodham Clinton、Crooked Hillary、she、her。以上8种指代方式，有1714种可能的拼写错误。上面这个问题的问法，算上可能的拼写错误，鬼知道！

美国的多数孩子要经历12年的英语课堂来学习这门语言，而且他们通常也并不能运用自如。

计算机学习起来或许更快，但也需要时间。除了把大量数据扔给它，你也没什么办法可以加快进展。

应该怎么做

用那些喜欢破坏的人来构成基础用户，以此检验你的系统。引入适合的人群至关重要。
使用SEO关键词生成器来应对常见的拼写错误和失误。
接受现实，建立人工智能需要时间，而且它起初表现不会太好。只有出错，它才会进步。做好准备，设定边界来限制出错。

5. 设定边界

我们习惯的网站、应用和数码设备，都有着有限宽度的屏幕，有限长的页面，有限个按钮，等等。我们习惯了这些限制和引导元素。

对话是没有限制的——只要你愿意。

要让人融入其中，我们得为用户设定限制和路径，让他们感到熟悉。用户不会告诉你这些，因为他们也想不到，但这么做会得到他们赞赏。

应该怎么做

为用户提供操作式的陈述和按钮，引导对话。
使用按钮让人感觉交互更加熟悉，就像网站和App中的体验一样。
创造内容区块来消化错误，将对话重新引回正轨。
教给机器人一些基本的对话技巧，创造一些触发机制，解决这些常见问题。

图注：提供按钮或操作式的命令项给用户选择，以此设定对话的边界。不要让对话任意发展。没有边界的话，用户会轻易搅乱你的机器人。

6. 让人放松下来

除非你的机器人完全是基于模板，或者完全通过按钮点击来操作，不然机器人总会在某些状况下出错。这无可避免。

对话没有限制，即使你的机器人开发几个月、几年，仍然可能无法顾及用户想要的一切东西。就算做到了，你的机器人仍然有时候会抽风。

“你的机器人总会在某些状况下出错，做好准备。”

预先准备，让出错的体验尽可能不造成痛苦。

应该怎么做

要表明你理解他们的痛苦。
提供选项，教人应对这种情况，把用户引回到安全的地带。
人工干预。
不要无缘无故不搭理用户。

7. 每个交互都有意义

不必再通过软件分析每一次点击或输入意义何在。理解用户行为变简单了，但是用户保持专注则更难了。

必须要意识到，并非用户想要的一切都与你的产品有关，而且能在所有干扰中保持专注。

应该怎么做

适当地给内容块加上标签，让它们易于理解。
追踪最容易导致用户离开的内容块或输入项，找出原因，然后作出改变。

多数分析平台可以展示出哪些区块和按钮被点击了，以及用户向系统中输入了什么，还有许多其他数据。

8. 帮助用户就是帮助自己

你不可能预见此刻用户想要的一切。对话是没有限制的。

不必试图推测用户需求，或者请求他们做调研，在操作中直接通过机器人来让用户提交反馈，这才是最自然的方式。

应该怎么做

当用户询问了某些机器人不知道的东西，要允许用户提交文章。
询问用户，机器人给出的答案是否是他们所要的，如果不是，让他们告诉机器人想要什么。

图注：让用户提交内容，你就不必亲自创造一切。让用户来帮助你为他们自己服务。别让用户等待，不要剥夺他们提交所需内容的机会。

9. 辨识和迎合用户情绪

相比界面，对话中包含的情绪要多多了。不必征求用户的回复，他们总会给你反馈，无论是否下意识如此。

运用你在用户情绪方面的知识，在适当时机触发内容区块，延伸和改善体验。

应该怎么做

利用积极情绪来推广你的产品，或者让用户替你推广。
辨别出消极情绪，尽可能保全形象。

图注：用户向机器人表达某种情绪时，可以使用一些幽默的互动。通过积极情绪来推广，消极情绪来保全形象。不要用默认回复来应对用户的情绪，这只会让用户觉得你在预测意图方面有待改进。

创造未来，正是时候

创造得好的话，聊天机器人是强大的工具。随着时间推移，它们只会变得越来越厉害。

利用这股潮流，开始创造你自己的聊天机器人吧！

如果想要讨论任何关于文本的内容，所用的工具，或者其他任何事情，请联系我。

聊天机器人延伸阅读

原文链接：http://blog.invisionapp.com/guide-to-chatbots/

作者信息：Joe Toscano Experience designer for R/GA’s Google team in San Francisco, CA. Joe plans to change the world with a smile, design and some code. If you want to keep up with what he’s doing outside of InVision, follow him on Twitter or Medium! Follow me on Twitter

未来的汽车UI将惊艳世界

hi@victor42.work (Victor42) — Sun, 16 Oct 2016 00:38:14 +0000

[国外设计第149期]

今天多数汽车UI的设计，由于不直观、过时和缺乏美学表现力，一直饱受诟病。其他行业都将设计的品质奉为标准，汽车生产商在这方面则动作迟缓。所以，许多设计师抓住了这个机会，思考未来的汽车界面会如何改变我们的驾驶体验。

汽车行业的革新似乎日益加剧。实际上汽车行业在未来20年的变化，会超越过去一个世纪。因此，最前沿的设计师应该关注这个至关重要的行业。那未来的汽车界面会变成什么样呢？会根本上改变我们与车的关系吗？

下面是一系列优美富有未来感的汽车HUD（平视显示器）、交互界面和第三方应用控制器，它们来自世界各地的设计师。有些设计来自真实产品，还有一些仍在研发阶段。

特斯拉手机控制中心界面

来源：Matthaeus Krenn

为何惊艳：

你是否也时常怀疑自己有没有锁好车门、关车灯，或是把钥匙交给你刚学会驾驶的孩子。

这款应用让你不用离开座位，就能检查以上所有。如果还带有柴油混合动力，你甚至可以吃早餐时启动引擎除霜。作为感知反馈，直观的动画和过渡效果让你了解操作是否执行完成。

车载触摸操控界面

来源：Gleb Kuznetsov for FΛNTΛSY

为何惊艳：

这个界面用了手势操作，通过肌肉记忆来整体操控。屏幕上手指的数量与动作能触发操作，苹果的iPad、magic mouse和其他操作系统已使得这种方式成为了行业标准。这个案例中，移动能提高或降低数值。

这款界面不需要记住那些小控件和大量图形，因此能让你以同样的手势或其他操作，完成各种不同类型的任务。

可以在这里查看到完整案例研究，体验这套原型。

特斯拉控制面板概念设计

来源：Bureau Oberhaeuser

为何惊艳：

随着更多功能共用一个空间，并且相互高度关连，汽车正在变得更加智能。这些变革会将铺天盖地的数据呈现在我们面前，这在手机上已经发生了，还有其他所有原本只有单一功能的设备。它必须表现得很自然，决定了我们看什么、怎么看。人工智能和机器学习会掌控直觉，Bureau Oberhaeuser的原型非常优秀，让一切鲜活起来。

可以在这里查看案例研究和实际操作。

远程汽车健康监测和控制

来源：Ramotion

为何惊艳：

如果你的汽车出了什么毛病，拿起扳手钻到车底一通乱拧可不容易。当所有系统都电子化、计算机化，外表光鲜洁净，要判断问题所在可并不那么简单直观。这款移动应用原型，能以一种你可以理解的方式展现汽车的健康数据，让你在踏上漫漫旅途之前能进行必要的修整。

胎压监测与天气界面

来源：Ryan Duffy

为何惊艳：

这个界面表现行进中的胎压，让你分别了解各个轮胎的压力范围，准确知道要加多少压。这个界面提供了最基本的反馈，它应当成为行业标准。

Hudway增强现实平视显示器

来源：Hudway应用

为何惊艳：

毋庸置疑，驾驶员都应该将注意力集中在道路上，但是当司机查看手机导航时，内置的移动导航界面仍然会时常引发事故。Hudway应用在挡风玻璃上开启了第二块屏幕的新体验，让事情变得简单多了。玻璃是未来的界面，这款导航应用利用了这块空间，作为驾驶员手机的延伸，并伴随逐步的语音提示。

可以在这里查看案例研究，感受它的操作方式。

Car Play应用——City Guide

来源：Cleveroad

为何惊艳：

这个界面最适合勇敢的探险家。如果想要快速探索周边的世界，这款应用让你在有限的道路上激发出旅行的动力（并且会让你走在正确的车道上）。

苹果Carplay

来源：Apple

为何惊艳：

大家有目共睹。如果你熟悉所有苹果设备，完全可以无脑使用，你可能还会在汽车上安装其他产品。苹果的Carplay将第二屏的交互提升到新的高度，它只会变得更越来越优秀。

数字仪表盘显示屏

来源：Mike Montgomery

为何惊艳：

没什么能比得上发动引擎、让所有指示灯亮起来，然后像军乐队一样响起旋律。当接近下一个转弯口、油量低、或者胎压下降，你会通过周围一切声音和随后的视觉互动获得反馈，就像微动画那样表达出直观的讯息。

但是，把所有类似功能都用数码显示，总有弊端。通常都没有手动替代方式，所以如果某处线路故障或是电子故障，你的座驾马上就会变成无头苍蝇。

特斯拉的Apple Watch界面原型

来源：Eleks Digital

为何惊艳：

随着穿戴设备成为我们连接设备中的一部分，与你相关的产品生态中，最精密部分的控制不再那么依赖手持设备了。这个原型很好地表现了如何将它展现在手腕上。在此深入了解这套原型。

结论

这就是我们今天所能看到的汽车用户体验设计的前沿。你还知道其他什么产品正在拓展边疆？你觉得这一系列设计如何？可以在评论中加入讨论，发表你的高见！

原文链接：https://www.toptal.com/designers/interactive/amazing-vehicle-ui

作者信息：MUWUSO MKOCHI Muwuso is a senior interactive art director and multidisciplinary designer with key focuses in digital, brand, and experience design. Over the past 9 years, he’s led UI and integrated experience design in-house and remotely for some of the world’s biggest–and smallest–brands and agencies. He is constantly inspired by the evolution of technology, its influence on human behavior, and the resulting impact on environments and micro-cultures.

设计新趋势：化繁为简

hi@victor42.work (Victor42) — Sun, 17 Jul 2016 15:54:28 +0000

[国外设计第140期]

我们在这个“极简主义”的世界生活已经有些时日了，之后又将去向何方？

过去几个月来，设计创新领域的先行者们，将“极简设计”推向了一个新的高度。Facebook、Airbnb和Apple都遵循着近似的原则，简化它们的核心产品，这种“化繁为简”（Complexion Reduction）的新趋势就在它们的移动端设计中得到体现。

“化繁为简”究竟是什么？

你是不是从没听说过“化繁为简”的趋势？那是肯定的，因为这只是我创造出来的术语。最近我留意到一种新的趋势，它超越了扁平化设计，也超越了极简设计，独立性在逐渐削弱。有些人会说，这只是极简设计运用到移动端领域时开启的新阶段，但我认为它截然不同。有一些明确的共性和特征可以定义这种新趋势。所以我决定给它起个名字。起个名没什么问题吧？

这种横扫硅谷的热门新趋势，有以下这些决定性特征：

加大加粗的标题
更简单更普遍的图标
减少彩色的使用

结果呢？许多我们喜爱的应用界面，开始越来越像是出自同一品牌。

证据

早在5月份，Instagram发布了新设计的UI时，我第一次注意到这种新趋势。

他们此次改版的变化，其中包括去除了无处不在的蓝色和深灰色，加粗了标题，简化了底部导航栏和图标。只留下黑白界面和醒目的标题，突显内容，功能清晰。我很欣赏这套简洁有序的界面，并且同时想起我仰慕已久的另一个平台：Medium。Medium自从2012年发布以来，黑白界面就用得炉火纯青，从那以后每次设计改版，都在去除繁杂；实际上Medium正是化繁为简的开山鼻祖之一，他们自己都不知道这点。真是要恭喜Medium！

Facebook的同行们更新了Instagram的界面之后不久，我打开了Airbnb，它看起来如此熟悉，令我深受震撼。自从他们4月份发布了新设计以来，这是我第一次打开这个应用，但我感觉这一套界面分外熟悉。

Airbnb的UI改版产生的媒体影响力，并没有一个月后Instagram的改版那么大（可能因为它没有一个光彩夺目的新图标），但它也使用了许多相同的化繁为简技巧。

移动端的改版设计采用了更大更粗的标题，去除了不必要的图形和色彩，简化了图标，使它们更通用、易识别。只留下黑白界面，突显内容，功能清晰。

Apple是最近的一个例子，设计师们迷上了化繁为简的趋势。本月初，Apple的WWDC大会上，这个科技巨人发布了一系列值得期待的更新，包括iOS 10的发布，他们正在进行调试，“iOS有史以来最重大更新！”（不过由于iOS 8时也这么说，所以至少是iOS 8以来最重大的更新）

发布会中有一点特别吸引我。那就是Apple Music的改版设计。虽然它改版的最重要方面是用户体验提升和新增功能，但我首先注意到的是它的朴素。Caitlin McGarry，Macworld的本报记者就很准确地描述了这次更新，“它有一套全新外观，巨大的卡片、加大加粗的字体、干净的白背景，突显唱片艺术。”

听起来很熟悉吧？这套设计与Instagram和Airbnb的设计略微有所区别（他们用的是实心图标！Apple在搞什么？）但关键元素都在：加大加粗的标题，黑白界面。

所有这些意味着什么？

我在上文提过，这意味着越来越多你喜爱的应用会变得很相似。为什么？就像国家橄榄球联盟（NFL），科技界也是个相互模仿的圈子。这些改版设计都得到了积极正面的反馈（有些人抱怨这些黑白界面“缺乏个性”，但他们很快就适应了。你打开一个应用是为了它的功能，并不是个性），所以我预测，新老应用都会踏上化繁为简的浪潮。

这意味着iPhone的主屏很快就会变成一块彩色的马赛克，这些鲜艳的入口会引领你进入游乐场。

现在，无论你是否支持这种单色的时尚，它毫无疑问是一个发展方向。产品设计流程正在发展和进化，不再是从前那种分离式的方式，鼓励过多的设计。现在的流程更趋于整体，真正关注用户。在从前的产品设计流程中，UI设计师可能会接过UX或产品给出的原型图，要求“把它做漂亮点”。然后设计师就会画上数小时、数天来添加、去除、调整颜色，或许最好的方案可能就一直摆在他们面前……直接用原型图！由于在如今这个整体的设计流程中，UX和UI设计师的界限正变得模糊，设计师不必过分操心自己的具体职责（例如把它做漂亮点），转而关注最终目标，为用户打造最棒的产品。

化繁为简的终极指南

你是否已经接受了化繁为简的趋势，并准备好踏上这波浪潮了？很好，遵循这些指南，你马上就会创造出优秀的应用。

去除彩色。当然，你可以保留一种颜色，但要极度克制地使用它。其他一切最好是黑白的。让内容来为应用填充颜色。
加大、加粗、加黑的标题。看到标题了吗？把它加到20至30像素，并且加重。
简洁、纤细、易辨识的图标。你的图标最好是通用的，也不能使用彩色。如果想做得更好，应该按这个顺序来排列：主界面、搜索、主操作、次要操作、我。
留白区域变为原来的两倍……不对，要三倍。甚至可以到四倍。这一点绝不能出错。
应用图标更鲜艳。如果你就是喜欢设计一些鲜艳闪耀的东西，可以用在应用图标上。这是体现个性和品牌的地方，要让它光彩夺目！

原文链接：http://swarmnyc.com/whiteboard/complexion-reduction-a-new-trend-in-design-1

作者信息： Michael Horton UX/UI designer @ SWARM in NYC | www.themikehorton.com

2016年电商设计的9个趋势

hi@victor42.work (Victor42) — Sun, 24 Jan 2016 20:57:00 +0000

[国外设计第120期]

在当今这个瞬息万变的电商世界，对于任何一位设计师，预测未来都极具挑战。今天新潮，明天就会落伍！作为设计师，想要给顾客营造顺畅的购物体验，同时使自己领先于竞争对手，你得持续不断评估当下趋势的价值。

如果你正要搭建（或者翻新）在线商城，你就得了解电商领域当下的流行趋势。下面我们来深入了解即将主导2016年的热门电商设计趋势。

1) Material Design

Material Design继续盛行，如今开始大范围被电商企业采用。自2014年发布起，鲜明的、专注内容的设计风格便开始流行，而且还会在未来继续引领风潮。正是Material Design统一、切实、欢快的体验，跨越各种设备与平台，使得电商网站如此迷人。

尽管将Material Design应用于在线商城是个让人望而却步的任务，还是有些电商敢于冒险尝试，成功地运用了这种设计风格，PA Design和Bewakoof就是两个例子。

2) 隐藏式菜单

隐藏式菜单，最常见的一种变化是汉堡菜单，已经极为盛行了，因为可以清理电商网站杂乱的版面。最初它们是为移动端设计的，但现在也越来越多用在桌面端的设计中。

2015年，许多在线销售商在大大小小的屏幕上都使用了隐藏式导航菜单，节省了大量屏幕空间，这个趋势在未来还会持续增长。如今许多知名在线商城都使用了隐藏式菜单，例如House of Fraser和EtQ。

3) 向上的响应式

响应式设计是2016年大多数网站的基本要素，但除了优化移动端和平板，为大屏幕设备设计也至关重要。因为在高清设备（例如电视）上浏览和购物是大势所趋。

超过32%的互联网用户拥有1920像素甚至更高的设备，这说明兼顾那些大屏幕有多么重要。整个2016年，会有越来越多电商网站致力于兼容大屏幕设备，比如Firebox、Smythson和Burberry。

4) 丰富的动画

动画是吸引顾客、与他们沟通的良好方式，许多电商网站开始将它注入设计中，让在线购物体验更加欢快好玩。如果使用位置和时机恰当，动画会让你的顾客感到你在真正关心他们的体验。

在2016年，你会看到更多电商网站有创意地运用动画——例如按钮旋转、图标转动和加载进度条——为顾客留下深刻印象。想找点灵感吗？看看Nixon、Fleet Feet Sports和Fallen Hero，它们在运用动画方面都做得非常棒。

5) 故事讲述

在如今这个竞争激烈的电商领域，只有故事讲述能让你的品牌鹤立鸡群。用一种独特且引人入胜的方式呈现内容，好的故事不仅在品牌与顾客之间建立情感连接，也能增加忠诚度与销量。简单说，故事讲述能让品牌起死回生。

虽然电商网站讲述故事并不容易，但许多快速成长的电商都在实践这种策略，作为他们的优势。有两个电商网站充分利用了故事讲述，Bonobos和Greats。

6) 卡片式设计

近几年，卡片式（类卡片式）布局在设计师当中累积了极高的人气，毫无疑问这个趋势将延续至2016年甚至以后。首先，因为卡片是Material Design中最主要的元素之一；其次，因为它们在响应式设计中表现非常好。

卡片布局最棒的一点就是对用户友好。让你可以排列组织产品，不仅让访客一眼看到所有相关信息，同时如果某件产品不合适，也能产生有效的增加销售，让顾客浏览更轻松。Rejuvenation和Lord & Taylor都将卡片运用得登峰造极了。

7) 大号的活动文字

内容为王是当然的，但如何呈现内容反映了它的力量有多大！同往年一样，2016年也会以大号的响应式文字著称，它们适用于所有类型的设备，从小屏幕手机，到大屏幕桌面显示器。

要建立强有力的品牌视觉识别，文字至关重要，吸引潜在顾客购买你商城中的产品，大量的商城都热衷于运用这种技巧。AYR、Nasty Gal和Brdr. Krüger都很好地运用了大号活动文字。

8) 大幅背景

考虑过大号文字，我们再考虑一下大幅背景。它一直是最吸引人的网页设计趋势之一，所以并不意外，迷人的大幅产品照片在电商网站中得到广泛运用，让产品更能激发购买欲。全屏背景图片或视频，为在线商城赋予了非常清爽、专业、时髦的外观，迫使潜在顾客进入商城后尽快购买。

虽然大幅背景在主页上效果很好，它也能用在产品页上，让顾客沉浸其中。在产品详情页面使用沉浸的交互式图片或视频，让访客在点击购买按钮前，就感觉像拥有了它一样。

9) 动态搜索

最后，我注意到了一项新的设计趋势异军突起，动态搜索。2016年，许多电商网站会使用基于JavaScript和Ajax的搜索，动态展示产品。这项技术非常成功，尤其是当你有庞杂的产品系列。

最具吸引力的电商网站案例，JadoPado，就运用了这项令人称奇的技术。去他们网站看看，搜点什么，你会看到页面展示的产品动态变化。还有另一个很棒的动态搜索案例，Stuart Weitzman。

原文链接：http://www.webdesignerdepot.com/2016/01/9-ecommerce-design-trends-to-embrace-in-2016/

作者信息： AJEET YADAV Ajeet is a senior web developer at WordpressIntegration - PSD to WordPress service provider, where he is responsible for writing custom JavaScript code during the conversion process. In his spare time, he writes on different topics related to JavaScript, WordPress, and Web Design to share his work experience with others. You can follow WordpressIntegration on Facebook More articles by Ajeet Yadav

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

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.

Material Design只是独辟蹊径，并未全面胜出

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

[国外设计第97期]

Material Design发布之时，Google在设计领域做出的努力令我印象深刻。在这方面Apple一度遥遥领先。这种局面结束了。记得我以前总抱怨Android设计的那套不统一、缺乏文档、缺乏吸引力的暗色主题，还有模棱两可的汉堡菜单的滥用。Material Design解决了其中很多问题。如今它提供了一套统一的设计语言，更明亮、色彩丰富，并且背后有深思熟虑的设计指南作为坚实支撑。

但是尽管它色彩漂亮，卡片的使用提供了强烈的纵深感与操纵感。我时常扪心自问，这真的像许多设计师说的那样，比Apple的iOS设计优秀吗？我要发表一下我的看法，我觉得它只是独辟蹊径，并未全面胜出。

与iOS的相似点

我们从iOS的3项核心原则说起：清晰、遵从和深度。

清晰是指文字易读、图标明显、对比强烈。清晰的定义,对于不同平台是特定的。对于iOS和Android用户而言，什么是清晰的取决于他们熟悉什么。iOS用户可以立刻辨认的图标，Android用户或许不行，反之亦然。

深度是两大平台共有的另一项原则。但它们用不同的方式表达这一概念。iOS提倡模糊和渐变，Android却强调投影和纸张的概念。

拟物2.0

虽然都这么说，两大平台都用了重要的方式重现了现实世界。它们通过模糊、投影，还有符合物理规律与空间关系的动画呈现一种拟物化。拟物设计使用熟悉的隐喻，有助于引入新概念，但是过度细致的纹理和立体效果绝对是自取灭亡。作为用户，由于科技对我们而言已经不那么陌生，我们已经不适应拟物设计了。皮质日历和黑胶唱片，在这个时代已经比不上数码概念了。

设计的数字化，使得陈旧的概念显得过时且莫名其妙。

没有人再用这样的日历了。

这两种设计语言都有各自的弱点。

例如，多层模糊相互叠加，有种割裂感。而且，有点太鲜艳了。

卡片的概念在圆形屏幕上看起来截然不同。卡片占据了整个宽度。文字的对齐方式感觉不协调，因为有很多不必要的留白。在圆形屏幕上，列表也难以使用，因为边角处隐藏了重要内容。

不过这些Android Wear界面看起来非常棒。真的给人一种专为圆形屏幕设计的感觉。

内容在Material Designs中并非核心

顺从是这两者的差异所在。iOS完全是内容优先，而Android使用卡片的概念来使内容显得更有触感，尽管这样会在左右两侧损失一些重要的屏幕空间。眼花缭乱的色彩也盖过了内容。

华丽隐藏了内容，阻碍了交互。

色彩、导航和行动召唤有强烈的聚焦作用。（这就是新的Material Design Lite，为网页而生）

相反在iOS中，关注点更多在内容上。界面的颜色更加中性、符合情境（它们会根据内容变化）。鲜明的色彩尽量少使用，通常都用于操作项。

Apple Music与Google Music的简单对比显示了Material Design使用了更多亮色和插画。对于Apple Music，唯一使用的亮色就是“立即试用”按钮。

标签栏 VS 汉堡菜单

关于是否应该使用汉堡菜单，争议由来已久。距离结束尚遥遥无期。尽管Apple在设计中很少使用。

但至少可以这么说，自从Material Design 鼓励使用之后，我们通常更多在Android上见到它们。

iOS更偏好标签栏作为导航。有趣的是，LukeW指出明显的就是更好的。Facebook的iOS版改用了标签栏后，用户粘性有了重大改善。

Google Inbox使用了汉堡菜单。

但有些时候汉堡菜单是个好主意，比如最重要的内容就在主页上。汉堡菜单内的选项必须只能是次要的，例如设置和登出。

色彩运用

Material Design突出地使用颜色。当然，它们非常漂亮。Flat UI配色方案也是。我们都知道，柔和色在各种状况下效果都很好，不像CSS或Xcode中那些耀眼的默认色彩。

iOS配色（左），Flat UI（中），Material Design Palette（右）

不过Material Design在页头中使用那些色彩，有时甚至盖过了内容。许多颜色竞相展现时，其他元素的重要性便降低了。

页头是可以操作的吗，因为它有颜色？应该改用图片来表现我的产品吗？“Goals”这个标题为什么和链接颜色相同？

色彩确实有含义，但这些含义很有限（例如红色意味着警报，黄色意味着警示等等）。颜色也能传达品牌，但是品牌不应该占据界面的中心。实际上，应用图标是最适合呈现品牌的地方。除非你确定要在页头使用一种单色，不然就该想想更富表现力的方式。用某种方式确切表现你的应用。

同样的，这对Android有意义，iOS则否。

如果一图胜千言，一种颜色只胜十言。

各平台定制 VS 全平台通用

不得不承认，我曾经认为一套设计语言统一全平台是最好的方法。但不幸的是，这会导致用iOS的设计语言来设计Android应用。从我的观点来看，它确实有意义，但最终对用户是不友好的。Android用户就是不熟悉iOS。

Material Design统一全平台的目标是个勇敢的尝试，是我所见过的在这方面做得最好的。但这真的是最好的方式吗？

网页上真的需要华丽吗？卡片适合小屏幕吗？

卡片的概念，在Android wear上，有时还是圆形的屏幕，真的起作用吗？给人感觉这套设计语言并没有优先考虑设备。相反，像是事后聪明。

看看Apple Watch，它的设计完全为了手表而重新思考过。这就意味着会有新的UI范例要考虑，尤其对于按压、数字表冠、手腕检测和黑色屏幕边缘。

Material Design定义更清晰

从材质如何操作和选用，到色彩如何结合，一切都在指南中有详细解释。

每种设计元素应该如何选用，来创造统一的构造和投影。

有一套特定的配色方案和颜色的组合方式。

Material Design甚至还提供了一整套系统图标。

有一套严格的风格指南，好处是不容易出差错。就像Bootstrap。它提供了一套统一且方便的体系。坏处是它限制了创造力，会让多数应用同质化。

Material Design的闪光点

不要误会我，还有很多地方Material Design做得很好。只是似乎每个设计师都没有认真考虑其缺点，就高唱赞歌。

设计规则从来都在不断变化，将人们的生活推向时代前沿。只要我们的生活在变化，设计也会改变。

例如，他们新的设计细则是一流的。在多个设计议题上都作出了指导，让你在Material Design的领域之外也有所收获。

Material Design中的颜色和动画指南确实让人印象深刻。

卡片的概念在整个平台表现很好。它可伸缩且模块化。当然也适用于网页——在移动浪潮来临前，设计师们已经使用了很久了。但我相信屏幕越小，它越没用。

之前我提过，柔和色并非一项新事物。但是Flat UI trend和Material Design都很推崇它。我们正在返璞归真，创造协调的色彩和漂亮的字体。这是件好事。我们越了解设计的基础，就能更好地塑造上层的设计。

Material Design的动画优雅，讨人喜欢，尽管不像人们理解的那么革新。在iOS7之前，过渡式的界面仍然是个非常新鲜的概念。很高兴看到两套规范都推崇更加顺滑、渐进式的动画，来逐渐引导用户，而非通过骤然变化来引人注意。

Material Design中有意义的动画。

没有完美的设计语言

永远不会有完美的设计语言和模版。本文的目的不是为了批判其中之一，而是从优势与弱点的角度来审视。设计就是为了某个目的选择最适合的方式。那么继续前进吧，持续实验来找出最适合你产品的那个。别忘了考虑人们所用的设备。

我经常写一些关于iOS、Android和代码的文章。你可以在Twitter上通过@MengTo找到我。感谢阅读！

原文链接

作者信息： Meng To I design, code and write. @mengto

印证渐变复兴的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+.

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

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

2015网页摄影图的流行趋势

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

[国外设计第77期]

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

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

1. 巨幅背景图

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

2. 背景搭配前景内容

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

3. 单色照片

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

4. 柔和色照片

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

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

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

6. 整理术

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

结论

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

原文链接

2015年至关重要的4种排版趋势

hi@victor42.work (Victor42) — Sun, 25 Jan 2015 14:01:00 +0000

[国外设计第73期]

近十年来，互联网已经发生了翻天覆地的变化，然而它其实一点也没变。如果看看10年前，我们会发现大批网站都有一套通行的排版模式。页头、页脚、侧边栏和内容区域，构成了这种直截了当的布局。这是人们预期中的网页排版。同时期Macromedia Flash的兴起，引领其他排版方式进入了一个新的时代。布局不必再拘泥于固定格式。当然，随着FLASH的衰退，这种方式也稍稍淡出……我说稍稍，是因为它如今又卷土重来了。

假如你研究一个流行的作品集网站，里面展示了当今的网页设计。毫无疑问，你会注意到网页的基本结构千变万化，根本没有固定形态。它可以伸缩变化成任何所需的东西。我认为这是响应式网页设计带来的最棒的副产品。事实上，新的准则，就是根本没有固定准则。

综上所述，我们能观察发现几种重大的排版设计趋势，能够代表我所理解的非常规布局。说它们非常规，是因为它们并不严格遵循某种准则或既定体系。但这种趋势的例子，即使没有几百，我也能找出几十个，归入这几类中。

本文中，你会看到有趣的非常规排版趋势大杂烩，希望它能给你带来启发，帮助你构思网页设计的基本结构。我们这就深入了解一下……

##分割屏幕

在这类中，我们精选的网站都用了垂直分隔线来分割屏幕。可能这么做有很多原因，通过研究大量此类案例，我发现主要有两点。

原因之一，有时候在一套设计中，的确存在两个同等重要的主体元素。网页设计的通常方法，是按照重要性给内容排序。然后重要性会体现在设计的层次和结构上。但是假如你就是要推广两样东西呢？这种方式，可以让你突出两者，并让用户迅速在其中做出选择。

原因之二，有时你要表现出一种重要的两重性。以Eight and Four网站为例。他们在此要表达的是，他们的核心竞争力来自植根数字领域，还有多才多艺的员工。这两点成就了他们。通过屏幕分割来表现这一点，是种令人愉快的方式。

##去界面化！

网页设计中的主要元素之一，就是容器元素：方块、边框、形状和所有类型的容器，用于将内容从页面中分离开。想象一个古板的页头，元素刚好容纳其中，与内容分隔开。如今的一项普遍趋势，就是去除所有这些额外的界面元素。

这是种极简主义的方式，但它更进一步，带来一些有趣的转变。

在这个例子中，他们把页头和页尾的概念统统去掉了。反而更像一个交互式杂货摊。从左向右的排列，就基本完成了内容层次的排布，有助于让排版更加直观。用于分隔导航和内容的界面就不需要了。取而代之的是漂亮的产品惊艳全场。

可以发现，移除任何感官上的页头和页尾后，内容得到了极大的强调。你会先看到公司名称，然后是关于他们经营内容（和场所）的清晰描述，而不是先看到页头。之后才是主导航。让用户浏览之前先重点强调品牌，这个方式太棒了！它造就了优美的视觉流程。有趣的是，当你滚动页面时，页头和界面才出现。美观且有效的排版，这种模式的运用颇具启迪性。

##基于模块或网格

接下来这些排版方式，建立在模块化或类似网格的结构上。在这些设计中，每个模块都力图根据屏幕尺寸伸缩调整。实际上这并不是什么新的方式，不过响应式网页设计让它变得更加有用。它暗示了一种自适应布局模式，可以像搭积木一样，由各种模块组件创建而成。

这个案例完美地诠释了这一点。整个设计都是响应式的。随着屏幕尺寸变化，每个模块都改变尺寸来适应空间。均匀划分屏幕使得设计更易于适应。他们还（在大屏幕尺寸中）引入一些元素来打破模块界限的束缚，这是画龙点睛之笔。

这个案例更加激进。当然，它也包含了模块化的方式，让他们能够根据需要轻松增减内容。但此处还有一个重要的设计元素在发挥作用，之前的案例是没有的。模块通过尺寸变化，来反映其重要程度和在各层级中的地位。这类模块化的布局方式存在一种风险，它使每样东西尺寸都相同，这意味着无法强调任何事物。相反，这个案例还是清晰地突出了主要元素。

##一屏以内

最后，还有一些网站采用这样的方式，让设计完全在一屏内展现。这是响应式设计的一个分支，因为它会适应屏幕尺寸。不过在这个绝佳案例中，整个设计的适应方式完完全全吻合屏幕，没有产生滚动条。没有滚动，意味着内容必须极度聚焦，而且要建立清晰的内容层次。我发现这些网站的聚焦能力和清晰程度，令人耳目一新。

##结论

虽然我把这几种趋势分开讲，但其实他们都表现为积木块的形式。这些积木可以通过很多不同方式组合。事实上，本文中展示的很多案例，都可以放在我们讨论过的其他几个分类中。现代网页的布局如此多样化，而且确实合乎使用，造就了如此激动人心的互联网媒体。

原文链接

5项启迪性的移动端设计趋势

hi@victor42.work (Victor42) — Sun, 04 Jan 2015 10:23:00 +0000

[国外设计第70期]

App Store和Google Play里的app多如牛毛。很难说未来的趋势是什么，不过显然我们可以轻易选出当下的5种趋势并加以分析。

看看时下的app中的颜色、创意和简单朴素，我们能从中学到一些设计移动app的技巧。

##App中的色彩

**公认的，色彩始终是设计的一部分。**不过，近来很多app将色彩当作设计的基础使用，而不只是点缀。色彩可以营造氛围，极大地影响了app的整体体验。当你把一个色彩缤纷的app和一个几乎纯白的app进行比较，就能清晰体会到这一点。通常，颜色用来树立app的个性，比如友好、有趣或优雅。

看看Rubie、Sky、Rise或Peek这样的app。设计中充斥着华丽的色调，因为色彩是设计中最显著的部分。Rubie和Peek诠释了暗色设计不一定要使用黑色和深灰色。不要自我束缚，尝试使用深紫色或深红色来创造优雅而友好的暗色调设计。

另外，还有像Sky和Rise这样的app，它们信奉的是由鲜活色调构成的渐变。看到如此强烈的色彩在app设计中突出运用，真富有启迪性。两者看起来都如此华美壮观。难道不是吗？这一切都要归功于将色彩作为主要设计元素的运用。

##UI的简单朴素

很多app信奉简洁清晰的设计；这么想真是令人欣慰。常年来，设计师都在为更简洁更干净的设计而奋斗，尤其是极简主义，近来的趋势显示它依然如此。

2012年，Google做了一些研究，证明了简单的网站更好。点击此处深入阅读。总而言之，这个观点很直接。简单的网站更容易消化理解。复杂的网站需要访客付出更多认知上的努力，提供相对逊色的体验。因此，网站视觉上越简洁越好。移动app也一样。Conversion XL基于Google的研究写了一篇文章，关于简洁的网站为何有明显优势。

比如Product Hunt或AirBNB。两者都提供了简洁干净的界面，慎重且适当地展现内容。Product Hunt在一个列表中展现了许多不同内容，但滚动浏览相当简单。理解内容毫无障碍。AirBNB也一样，虽然它提供的信息更多。在任何一个界面，即使是列表或消息界面，呈现给你的信息永远不会将你淹没。

##优雅而精致的氛围

有意思的是，有些app试图通过设计营造一种精致优雅的气氛。这在网站中也不常见，在移动app中明显更加罕见。这个概念适用于酒店、酒吧或餐馆类的业务，他们想通过app创造亲密无间的感觉，就像他们的线下服务一样。不能说这种设计更好或是更糟；不过看到app尝试非典型的设计，总是不错的。

Hotel Tonight和Litely是这类设计的两个例子。两者都有着暗色的设计，展现出优雅、精致和亲切的感觉。这是种截然不同的设计风格，也正是它在支撑着这类非典型设计的app。Hotel Tonight提供的是眼下急需的酒店预订，但它把这件事处理得很时髦。谁说预订酒店一定要在枯燥的白色和浅色中完成。此外，Litely则使你忙于编辑照片，它的深色界面非常时尚。

##App创意

认真想一想，你用过多少称得上独特或创新的app？总体来看，我们常用的app中，没有一款打破常规。或许某项服务或产品曾经很新颖、富有创意，但用了一段时间后，我们习以为常，它就一点也不新颖了，成为一种平常的存在。有些杰出而巧妙的app打破常规，应该受到赞美，它们成就了与众不同的app。

我们很难发觉，有时智能手机在妨碍我们。Kimd就是个简单得不可思议的app，但它的创意想到聪明。作者Julie Chabin饱受明亮屏幕的干扰，比如观看演唱会的时候，于是她打造了一款暗淡的照片视频拍摄app。这个创意如此简单，甚至有点傻气，但它非常有效！整个现代社会都在无休止地使用智能手机，人们总是容易忘记，在某些特定场合使用智能手机是非常奇怪的举动。

另一个精彩案例是DRAWNIMAL。这是个儿童app，帮助他们画画、学习字母表。同样的，这并不是第一个以此为目的的app，却是第一个如此挥洒创意的app。这个app延伸了智能手机的学习体验，它让孩子用真实的纸笔画动物，并将智能手机作为绘画体验的一部分。它为app增加了一个维度，而且并不强迫使用数码设备来学习。这个app的使用方式很特别，也正是这点成就了它的创新。

##无处不在的照片

有一点，我敢肯定你注意到了，那就是各类app对照片的广泛运用。它们被当作内容和设计元素来使用。数码照片正在成为我们生活中不可思议的一份子；这的确是一项非常好的趋势，因为经常接触和用到自己的照片，真是件优雅的事情。在app中使用照片是一件强有力的工具。

VSCO和Steller两款app就是基于照片，相当惊艳。它们都尝试利用你的摄影才能，并激励你分享。以VSCO为例，兼具照片编辑与展示/分享功能。这意味着你可以随心所欲编辑图片，并上传到自己个人资料页面。这是个严格的社区，致力于分享高质量照片。Steller则允许用户创建图片故事。长短任意，可以填充文字、视频，当然还有照片。这个小小的社区有海量图片故事供你浏览，各不相同，比如DIY教程和游记。

###你的观点？

当今移动app带来的5项启迪，就是如此。你觉得app中会掀起怎样的热潮？你觉得设计与app创意，会趋于稳健，还是更加颠覆呢？

原文链接

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

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, 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每张图都有链接）。访问这些展出的网站。是不是开始注意到一些共同元素？那可能就会是下一个趋势。

##结论

**预测趋势是一门很棒的艺术，而非科学。**今日所流行的，或许明天就会散去。最好（也是最有用）的趋势，是那些长久保持影响力的趋势。

如果你渴望极致的潮流，考虑从颜色或字体这类元素入手，而不是整体美感。那样你能在更大规模的设计变迁发生之前，作出成功的判断。

原文链接

网页设计新趋势:更少文字，更多的富媒体

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) — Sat, 31 Aug 2013 23:23:33 +0000

[国外设计第8期]

不可否认，扁平设计目前是设计界的宠儿

它无处不在。不仅仅是扁平设计，现在也包括类扁平设计

关于这种风格的有效性与用途的争论如火如荼。这种极度时髦的设计风格在激发着每个人的观念。让我们回退一步，看看辩题双方和扁平设计的利弊

支持者：扁平设计很时髦

扁平设计非常时髦，但是它会持续多久？

如果你是追赶潮流的设计师，却没尝试过扁平设计，现在正是时候搭上扁平设计这班车。采用这种风格的项目（并且用得恰到好处），在各种博客中随处可见，包括我们这个，有助于提升你的设计

而且，跟随潮流而设计，乐趣无穷

反对者：它只是种潮流

时髦的另一面，是你永远不知道它能流行多久

我们已经能看到，趋势正在从纯扁平设计向类扁平设计或长影扁平设计转变

如果你频繁改版你的网站或APP，时尚的设计也许适合你。如果你要一个网站经久不衰，请考虑不那么“潮”的东西

支持者：简单的移动界面

简洁的移动端设计，是扁平设计应用中的绝佳例子

一些令人印象深刻的扁平界面设计被应用在功能简单的APP上。巨大的按钮在移动设备上容易点击，不需要再放大来寻找链接

反对者：可用性值得商榷

当涉及到某些复杂的用户体验时，扁平设计就会变得单调

并非所有用户都喜欢这种界面风格，他们有时会不知道该点击哪里

Norman Nielsen Group的一项分析指出，扁平设计风格会干扰可用性，因为用户有时不知道什么是可点击的。而且，扁平设计的项目总倾向于更低的“信息密度”来保持简洁

支持者：明亮的用色可以烘托氛围

也许只是我个人感觉，但扁平设计看起来让人愉快。所有这些明亮鲜艳的颜色都令人爱不释手，创造了一种积极、迷人的氛围

Flat UI Colors，一个展示和帮助设计师使用扁平配色的网站，是个非常好的氛围提升工具

看看这些色调，它们都温暖而友好。即使深色也是基于暖色设计

由于扁平设计通常包含很多颜色，引发更多积极的联想。谁会说彩虹是阴郁的呢？

反对者：配色困难

在一个项目中你用的颜色越多，就越难将它们恰当地搭配起来

创造一个协调的配色方案本身就是一个挑战，如果你再加4、5种甚至更多颜色，它会变得更加棘手。成功运用扁平配色的设计师，都倾向于坚持统一饱和度和亮度，来设计一致的外观，使得颜色的选择有迹可循

支持者：聚焦精美的字体

扁平设计的一个优势，是漂亮字体的聚焦作用

除去了装饰，字体确实在扁平设计项目中蓬勃发展。从精美装饰性字体，到简洁的非衬线字体，漂亮的字体是优秀的扁平设计的关键组成之一

在我个人看来，投影效果有点糟蹋字体。有趣的字体与大胆的配色之间形成的强烈对比，令人印象深刻、精神振奋

反对者：糟糕的字体变得更明显

正因为扁平设计有助于聚焦优秀的字体，它也能放大糟糕的字体。（看看苹果预发布iOS7时遭受的所有诟病，比如那极细的主字体，现在这个设计决策已经被修正了）

扁平设计冒失起来简直无法饶恕。选用什么都会有某种程度的戏剧性，难以掩盖字体的不完美

如果你对于字体的组合和选择不在行，那么扁平设计可能不是你的最佳选择

支持者：视觉表达简洁鲜明

扁平设计的本质是简洁和鲜明。这是使它美观的重要特征之一

这种风格使用很多高对比特征，包括颜色、字体，和大胆的总体设计，保持段落简洁易读。按钮和其他UI元素通常设计成基本的几何图形，尽管边角也会用到圆形

反对者：它会看起来太简陋

取决于使用者的不同，扁平设计也被部分人评价为“过于简陋”

用扁平设计传达复杂的视觉信息会很困难

扁平设计的另一项反对声音，是用户界面工具太朴素。拟物化设计的支持者表示，增加一些具象的装饰可以让工具更易用。坦白说，这得看内容

在极度简洁的界面设计中，视觉层级也是一项需要重点考虑的内容。什么是最重要的？你如何通过视觉强调它？

支持者：扁平设计摒弃令人厌烦的装饰

没有什么比一眼就看出设计者对项目充满厌倦更糟的了

这些本末倒置的花哨装饰包含了太多阴影效果、古怪的动画，或者根本就是显得多余的随机效果

正因为扁平设计简洁的本质，这些约束可以促使设计者忠于这种风格的本质完成项目

反对者：有些装饰还是不错的

并非所有装饰都不好

在设计纯扁平项目的时候，它确实极大地限制了能够为你所用的技巧

结论

没有一种设计风格是完美的。为你的每个项目量身定制地设计，才能使得外观和所要传达信息的感觉风格相吻合

设计不仅仅是某样东西看起来如何。它也关乎易用性和功能。优秀的设计总是易用的

原文链接

现代极简风格:纯文字+背景图式欢迎页面

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，传递出很棒的平衡感

反思

通常设计师更喜欢用激动人心的背景图片，再稍稍加暗处理，可以避免对比不够明显。近乎纯白的亮色在任何此类背景上都华美清晰可辨，所以你有机会一箭双雕。首先，你不用浪费时间制作非凡的字体——常规字体就可以了，你要做的只是选择正确的粗细和尺寸；第二，你也能在不降低可读性的情况下，用一张别致的背景图迷倒用户

原文链接