原文链接：10 Commandments of Modern Web Design - 网站设计10条军规 - Mobile为先

译者：晴空

任何聪明的傻瓜都能把事情变得更大、更复杂、更费劲儿。但是需要一些天分和很大的勇气才能把事情变得简单。

——艾伯特爱因斯坦

（译者注：其实这句话是一个英国经济学家说的。）

我认为爱因斯坦所说的天分，很大一部分其实可以从明确的工作原则中找到。

我们往往纠结于技术细节，实现方式和项目进度，而缺乏大局观。我承认我自己经常出现这种情况。作为一个设计师，当我们发现自己出现这种状况的时候，如果有一些指导原则能提醒我们该如何应对，就显得非常重要了——特别是当我们还能够把这些指导原则分享给我们的团队和同事的时候。指导原则可以让每个人对他的工作都有一个相同的基本认知，并且简化了工作流程。它们并不是什么灵丹妙药，但是可以帮我保持工作调理。

下面我列出了一些我最新的设计基本原则。这些原则是我在这个全新的，有着无数浏览设备和惊人可能性的世界里的指导思想。希望它们能够帮你完善自己的设计流程，找到自己的设计原则并且在你前进的道路上直面新的挑战。

1. The mobile web is important!  移动网络很重要！
2. Create once, publish everywhere.  创建一次，随处发布
3. Editorial workflow is important!  内容编辑流程很重要！
4. Release early and often.  根据实际数据针对现有设计做出决策
5. Make existential design decisions based on data, 
not assumptions.  根据实际数据针对现有设计做出决策
6. Design from content outward (not device type or display inward).从内容开始设计
7. Nothing's more important than knowing what's important.关键是知道什么是最重要的
8. Design mobile first.首先设计移动设备的页面
9. Optimize, then customize.先优化再定制
10. Create and maintain a visual language (NOT a myriad of distinct designs). 保持统一的设计风格，不要拼凑

移动网络很重要！

为什么在设计过程中要关注移动端？2012年第一季度苹果发布的数据显示，现在每天售出的iphone数量超过全世界每天出生的婴儿数量（30万婴儿，40.2万台iPhone）！这还仅仅是iPhone，实际上每天有56.2万台 iOS设备（包括iPod-touch和ipad）被出售。2012年第一季，每天还有70万安卓设备被激活，另外还有20万诺基亚智能手机和14.3万黑莓设备。根据摩根斯坦利的研究，在1990年有一亿桌面互联网用户。在2000年早期我们已经达到十亿桌面互联网用户。今天的桌面互联网用户数只比它在2000年的时候略高，但移动互联网用户的数量是一百亿！地球上的移动设备的数量比摩根斯坦利预测的时间提前两年就超过了地球上的人的数量，这意味着移动网络不仅是无处不在的，它的增长速度也快于我们的预期。

另外，还有更多消息！2012年第一季度facebook宣布他们发现通过手机网站浏览facebook的人比用各种App访问facebook的人加起来还多！facebook公布的数据还表明，使用手机网站和App的facebook用户的网站浏览时间明显比使用桌面浏览器的用户长。2011年第三季度，美国尼尔森机构发布的关于移动用户的研究显示，在所有平台上的数以百万的手机用户，在可以选择的情况下，更多的会选择使用手机网页而不是App。（5700万VS 4900万）。

创建一次，随处发布

编写内容的时候，编辑团队需要一个一次性的，简单的工作流程，一旦内容被发布，就可以在所有类型的设备上正确的有效的显示出来。编辑团队需要专注于内容的质量，而不是设备，布局或者美学问题。当你开发内容模型的时候，不要忘记，这些内容是需要重用的。然后你可以在设计过程中使用这些内容来构建区块。这将确保编辑们不会被强迫成为“默认的”设计师。任何让编辑团队去创造新的形式，结构和表现甚至更为复杂的东西的想法，都应该持怀疑，谨慎的态度。任何减缓编辑过程，又无法显著增加内容价值的事情，都会损害产品的核心价值。COPE思想（即创建一次，随处发布），结合一致的内容模型和简单的数据，所创建的内容可以被基于网络的工具，应用程序App，和商业伙伴所使用，这有助于快速实现和创新。

内容编辑流程很重要！

设计团队很容易将他们的精力集中于网页的消费体验上，而完全忽略了内容的创建，审查，编辑，策划和发布。其实优秀的消费体验都来自于优秀的的内容创作。在设计过程的早期，设计师就应该花时间与作者，审稿，编辑和出版商进行沟通。看他们是怎么做的。了解他们创造的内容。了解一些基本情况，比如数量（他们创造多少内容），频率（他们多久创作一个内容）以及平均长度（一集有多少内容）。作为一个设计师，如果你不能真的理解网站的内容，你就无法创新或者设计出合适的交互组件，而最好的理解的内容方式，就是花时间直接和创建及维护内容的人沟通。

这个原则的第二部分是不好的或痛苦的内容编辑流程会导致内容出问题。同时，消除内容编辑流程中的问题可以让客户高兴。作为一个设计师，你可能无法够解决所有内容编辑流程的问题，但你可以在自己的工作范围内尽量的重视它。

尽早发布，经常更新

"Write drunk, edit sober."

— Ernest Hemingway

”醉的时候写作，清醒的时候编辑“——厄内斯特 海明威

哪怕是最简单的产品，在发布每个版本的时候，都应该记录下它的问题。（参见KISS原则及Getting REAL原则）。必须快速决断，先做出来，然后搞清楚用户如何与它交互以及用户如何评价它。找到问题所在，并解决问题。我们要快速变化以适应这个竞争激烈的市场。对于创新来说，失败是必要的，如果我们什么都不尝试，就一定不能创新。我们应该创造一种敢于迅速尝试的作风，而不能每天慢条斯理的讨论分析，纸上谈兵。

根据实际数据针对现有设计做出决策

“针对现有设计的决策”意味着有时你需要决定某些内容是否应该出现在屏幕上。不要因为你“估计用户不需要”，而去掉某些内容，也不要因为你估计“用户需要更好的体验”而增加额外的内容。你只需要建立一个能在所有设备上满足基本需求的内容模型和框架，然后在实际运行中收集真实用户数据来进行针对性的优化。

移动设备的使用者会告诉我们他们需要增加和删减的内容。他们的互动方式和喜好能够让你更科学地优化网页。但你需要先把产品上线，然后才能观察用户的使用爱好，你不能凭空推测。（参考第四条，尽早发布，经常更新）

你首先要问自己“这对用户有价值吗？”而不是“ 这对某部分使用特殊设备/不同尺寸屏幕的用户有价值吗？” 虽然你可能会预估哪些设备更流行，但是你的起步假设应该对所有的用户都有价值。

收集移动设备使用者基于网页标准的行为要比跟踪移动设备APP使用者的互动细节简单得多。用户使用移动设备的网页体验可以提供数据让你理解用户的价值观和互动行为。移动设备使用者总有更高的用户期望。比较常见的失误是仅仅基于桌面系统的经验来估计移动设备用户的需求。不要假设桌面电脑系统的用户需求和移动设备用户需求是相同的——这一点非常重要。用同一个内容模型来适应不同的设备会造成用户体验上的重大问题。举个例子，假设谷歌收录了一个网页的桌面版，并在移动设备上提供了浏览的相应链接。如果用户打开这个链接的时候显示的是一个移动版的页面，并且内容被精简过了，结果在页面上根本找不到相关的搜索内容，这个时候，用户就会觉得非常疑惑，挫败感随之而来。我们不能直接删减桌面版的页面，然后管它叫做移动版本！

从内容开始设计

你应该建立一个完整的内容模型，它能在所有设备上使用，给用户提供尽可能良好和简单的使用体验。设计应该从关注最有价值的内容开始，并为之设计应有的体验。相应的子元素设计也应该与其保持一致。例如，一个新闻网站首先应该确定哪些新闻类型是他们用户的最需要的。然后设计团队可以开始针对这些新闻类型的一段有代表性的内容进行研究，画线框图，制作原型以及头脑风暴。一旦这些完成了，就可以把注意力转移到每个类型的频道页面上，考虑内容中的哪些部分应该被显示出来（如，主页，一级目录等）。

关键是知道什么是最重要的

"Design is the conscious effort to impose a meaningful order."

设计是有意识地建立有意义的秩序 — Victor Papanek维克多•帕帕奈克

设计就是要帮助人们从纷繁的各种信息中找出并了解最重要和最有意义的东西。这就是设计之美。你必须了解内容的重点，内容类别的要素，以及这些内容传递的路线。如果你不了解内容的层次结构，你就无法设计出视觉上的层次结构。

开始决策之前，你必须对不同类别内容的重要性进行评估。针对每个页面，给出一个内容列表，并定义每个内容的层次（如，1类重要，2类重要等）。之后你才能开始设计你的页面风格和排版。

首先设计移动设备的页面

首先设计移动设备的页面是因为小型屏幕受限制更多，我们必须首先考虑基于小尺寸屏幕评估内容模型，列表和层次结构。

一旦完成这步，我们再考虑当屏幕尺寸和带宽改变时，页面的层次结构和互动方式要如何加强。移动设备的屏幕限制可以帮助设计团队始终关注设计的核心价值，这类似于出门旅行时，你会先打包一个小行李箱来看哪些东西是必需品，其他多余的东西你可以放在大行李箱里，但你很可能根本用不上它们。

但这不等于你不能设计出令人惊艳的视觉效果。相对于传统的桌面电脑，移动设备在很多方面都具有优势，例如设备定位，手势，定位检测、多点控制，陀螺仪，视频，音频和图片插入等。基于移动设备做出的设计可能更具创新性并提供更加丰富的用户体验。

先优化，再定制

网站上线并收集了用户使用数据以后，就要升级和更新了。我们需要对更新项目进行优先级划分。当网站优化（如，压缩文件体积，提高网页打开速度）和针对用户群的定制（如调整或者增加网站结构、内容或特征等）都需要做的时候，网站优化一般来说都应该比针对用户群的定制更重要。

网页是否能迅速打开，所需求的内容是否明确，是用户最关心的事。移动设备使用者会提出各种要求，但是他们永远都希望能够更快且更简单地使用网页。

保持统一的设计风格，不要拼凑

设计团队应该建立一套灵活的视觉语言，以在不同尺寸的屏幕之间维持相同的视觉风格。以下是一些可以帮助你做到这点的设计工具(e.g. element collages, style tiles, web style guides)，但是核心原则是，建立一套视觉语言，以便在不同的断点下，你可以更快地做设计决策。

这个思路再次印证了"尽早发布，经常更新" 的原则. 用一套样式模版和其他的设计工具来指导视觉上的设计决策，而不是收集各种素材再把它们根据不同的屏幕尺寸和内容拼凑在一起，同时，之后加入的新设计元素也不需要重新建立风格。单纯地拼凑各种设计会削弱你的工作效率和创新能力。