面向未来的友好设计：Future Friendly

一年前翻译了本文的一部分，最近终于翻译完成。虽然此设计思想的提出已经好几年了，但是还是觉得应该在国内推广一下，让大家知道“内容策略”，“移动优先”，“响应式设计”，“原子设计”等设计思想和技术的根源。这些概念最早其实是由luke wroblewski，brad frost等人在同一个设计思想框架下提出的。笔者经“面向未来的友好设计(Future Friendly Web Design)”设计理念联合创始人Jason Grigsby授权，将此设计思想框架首次翻译为中文版本。

能力所限，敬请指正，欢迎传播，转载时请请注明出处。

 

 

 

一、前言

今天，联网的移动设备数量正在疾速增长，人们的上网习惯也在不断改变，移动互联网的浪潮方兴未艾，作为设计师和开发者，需要了解以下几个现状：

1. 设备的碎片化问题凸显。未来将诞生越来越多差异化的可访问Web的设备，人们将通过各种奇葩网络环境来使用它们；
2. 因移动设备间的设计还原能力差异巨大，我们既往千辛万苦沉淀的规范、工作流程、基础框架将无法满足设备间差异化的设计需要；
3. 解决方案总是优于规范而先出来的，在找到跨设备、跨平台的通用解决方案之前，我们只能着手为若干目标设备寻求单独的针对性解决办法；
4. 跨平台的通用标准的建立是漫长而曲折的。在寻求解决办法的过程中难免磕磕绊绊，一个标准化的解决方案需要在不断试错的过程中逐步诞生。

拥抱未来

道路是曲折的，前方是光明的。今后网络和设备环境的发展会为我们带来什么，我们无法确知。但是无论如何，我们应该做到：

• 相信未来，拥抱未知；
• 在设计工作中学习和应用一些适应未来的设计思想，即面向未来的友好设计思想；
• 用上述思想去帮助和影响他人。

二、 思考

我们的设计应该对未来更加友好一些。我们应该通过对未来的预测，选择适合的技术，为人们创造出既满足今天需要，又能够适应未来变化的产品或价值。以下是一些有关产品、设计和技术的理论思考，如果你对这些理论有新的见解，或者另有蹊径，请不吝分享出来。

专注于内容

我们不要去追求在所有设备上展现全部的内容，我们需要判断哪些内容是用户想要看到的，然后通过合理的方法重新组织起来去适应用户的设备。要知道，用户依赖自己的一双慧眼去筛选自己需要的内容是需要大量做功的。我们可以通过一系列设计和技术方案使用户在各种设备上都能够轻松愉快地获取内容和服务。这种差异化的内容组织或设计方案，可以借鉴下面三种思想：

• 内容优先
• 移动优先
• 内容以用户为中心

以用户为中心环绕的数据

现在的用户往往拥有多个可联网的设备，这些设备间能够进行数据互通，就像iCloud一样，如果你使用iPad侧修改通讯录，登录同一个帐号的手机马上就可以获取到你在iPad上修改的内容。面向未来的友好设计中将此称之为“以用户为中心环绕的数据”，主要可以参考以下几点：

1. 根据设备的特点，在不同的设备上使用独特而灵活的方式来访问数据；
2. 同一服务在多设备上的数据要遵守一定的规范；
3. 注重数据长期的完整性；
4. 内容中引用的参考文献必须有意义且可以长久访问；
5. 每个设备均应提供读写操作（对内容或内容来源的编辑）。

• COPE原则：一处创建，多处发布
• 通过命令行来收集你所喜欢的Bag(BagCheck)
• 数据的用户体验

内容的组织

经过合理组织的内容是设计的核心。既然我们只能让内容去适应林林总总的设备，我们就有必要尽可能地了解设备间的差异、约束和限制。然后根据每种设备的特点去针对性地进行设计。未来是多变的，适应方式也是多样的。唯有大胆探索，合理预测，才能找到合适的解决方案。

无论是高端的智能机，还是受较大限制的老旧设备，设备间内容互通的设计方案同样也是面向未来的友好设计的一部分。

• 为未来准备好的内容
• 可适应的Web内容
• 形式先于内容

识别未知的设备

面对着各种不同类型的设备，设计工作无疑是个艰巨的挑战。履行web的标准化无疑是简化设计工作的最好办法，与之同时，根据每种不同设备的识别信息，进行个性化的调整，是完成设计工作必要的补充。

将当前需要适应的设备进行分类，并将分类方法应用到今后可能出现的新设备上。

• 设备检测
• Yiibu设备信息工具介绍
• 设备差异和响应式设计

运用各种设备来建立你自己的web生态系统

在我们的数码生活中，每种设备具有每种设备的优势。所以我们会选择适合的设备做适合的工作。当我们高效利用自己手中的若干设备为自己的生活服务时，这些设备就组成了一个环绕我们的web生态系统。在这个生态系统中，设备之间的关系并不是割裂的。而且只有在这个生态系统中，每个设备才能最大化地发挥它的作用。而我们需要考虑的，就是如何利用这个生态系统来提高我们工作的能力和效率。

• 多屏生活
• 后移动设备
• 考虑到传感器的设计

三、参与

欢迎加入“面向未来的友好设计”。现在你是我们的一份子了。你可以在你的工作中运用，或者向他人推广这种设计思想。比方说你可以做如下的一些事情：

在设计前先思考一下我们的设计哲学

“面向未来的友好设计”描述的是一种设计原则，而不是一种特别的技术实现方案。具体的技术随着时间推移，可能会发展繁荣抑或过时衰亡。同样也没有任何一种方法、技术，或者流程可以像万金油一样解决一切问题。“面向未来的友好设计”是一种设计哲学，这种思想应该是融会在技术之中的。

使用“面向未来的友好设计”这个名称

当你在设计工作中和同伴讨论相关原则的时候，多使用“面向未来的友好设计”这个名称，向同伴们推广这个概念以及概念背后的原则。在微博中添加#ffly标签，以及使用“面向未来的友好设计”的专用logo (.eps 或 .ai)。

传播概念

向你的伙伴、下属、老板介绍“面向未来的友好设计”概念，分享我们的网站。新概念的推广肯定是有阻力的。尝试将我们的设计概念和商业目标、用户体验、关系链提升等硬指标联系在一起去解释，也许就可以争取到大多数人的认同。

选择符合“面向未来的友好设计”的技术实现方案

检查一下现在的项目目标，并且选择符合“面向未来的友好设计”的技术方案去实现它。“面向未来的友好设计 - 思想” 中有你所需的学习资源。很多作者也在不断丰富着我们的理论和技术文章，我们诚挚邀请你来检查我们的工作，同时期待着你的分享：

• andrea trasatti
• brian leroux
• bryan rieger
• brad frost
• jason grigsby
• jeremy keith
• josh clark
• luke wroblewski
• lyza d. gardner
• scott jehl
• scott jenson
• stephanie rieger
• tim kadlec

更多

更多信息可以关注“面向未来的友好设计”的推特@future_friendly或者这份由Dave Olsen不断维护更新的技术实践文章列表。

 

 

 

“面向未来的友好设计”倡导者名单

 

 

 

• luke wroblewski
• scott jenson
• brad frost
• jeremy keith
• lyza d. gardner
• scott jehl
• stephanie rieger
• jason grigsby
• bryan rieger
• josh clark
• tim kadlec
• brian leroux
• andrea trasatti

 

个人整理的一些“面向未来的友好设计”资源

 

Blog

响应式Web设计创始人 Ethan Marcotte
移动优先的先行者 Luke Wroblewski
“面向未来的友好设计”概念的主要倡导者 Brad Frost

Book

Erin Kissane: "内容策略的元素 The Elements of Content Strategy"
Ethan Marcotte: "响应式设计 Responsive Web Design"
Luke Wroblewski: "移动优先 Mobile First"
Karen Mcgrane: "移动设备上的内容策略 Content Strategy for Mobile"

Article

JOHN ALLSOPP: 网页设计之道 A Dao of Web Design(2000.4.7)
Luke Wroblewski: 移动优先 Mobile First(2009.11.3)
Ethan Marcotte: 响应式设计 Responsive Web Design(2010.5.25)
Luke Wroblewski: RESS: 响应式设计+服务器端的支持 RESS: Responsive Design + Server Side Components(2011.9.12)
Mark Boulton: 关于响应式设计的工作流程 Responsive Summit: Workflow(2012.2.24)

Slides

Thomas Byttebier: 响应式Web设计 Responsive web design(2011.11.29)
Pon Kattera: 响应式设计时代的设计流程 Design Process in the Responsive Age(2012.6.21)

 

另外还有本人讲述响应式设计的历史和发展的PPT：“响应式设计：Rebuild as Design”，其中附录的一些资源可以作为参考

 

“Future Friendly Web Design”设计思想原文：http://futurefriend.ly