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

今天,联网的移动设备数量正在疾速增长,人们的上网习惯也在不断改变,移动互联网的浪潮方兴未艾,作为设计师和开发者,需要了解以下几个现状:
  1. 设备的碎片化问题凸显。未来将诞生越来越多差异化的可访问Web的设备,人们将通过各种奇葩网络环境来使用它们;
  2. 因移动设备间的设计还原能力差异巨大,我们既往千辛万苦沉淀的规范、工作流程、基础框架将无法满足设备间差异化的设计需要;
  3. 解决方案总是优于规范而先出来的,在找到跨设备、跨平台的通用解决方案之前,我们只能着手为若干目标设备寻求单独的针对性解决办法;
  4. 跨平台的通用标准的建立是漫长而曲折的。在寻求解决办法的过程中难免磕磕绊绊,一个标准化的解决方案需要在不断试错的过程中逐步诞生。

拥抱未来

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

  • 相信未来,拥抱未知;
  • 在设计工作中学习和应用一些适应未来的设计思想,即面向未来的友好设计思想
  • 用上述思想去帮助和影响他人。
二、 思考
我们的设计应该对未来更加友好一些。我们应该通过对未来的预测,选择适合的技术,为人们创造出既满足今天需要,又能够适应未来变化的产品或价值。以下是一些有关产品、设计和技术的理论思考,如果你对这些理论有新的见解,或者另有蹊径,请不吝分享出来。

专注于内容

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

以用户为中心环绕的数据

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

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

内容的组织

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

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

识别未知的设备

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

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

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

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

三、参与

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

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

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

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

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

传播概念

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

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

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

更多

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

 
 
 
“面向未来的友好设计”倡导者名单
 
 
 
 
个人整理的一些“面向未来的友好设计”资源
 
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

面向未来的友好设计:Future Friendly的更多相关文章

  1. .NET Core:面向未来的开源跨平台开发技术

    作为一种全新的开源和跨平台的开发平台,.NET Core 历经两年多的开发,终于在于2016年6月27日针对所有主流服务器和桌面操作系统发布 1.0 RTM 版本..NET Core 是一种通用开发平 ...

  2. iOS开发请您把握现在 — 面向未来学习

    iOS开发请您把握现在 — 面向未来学习 这一篇文章,如果你是一名iOS开发正好也处于开发晋升瓶颈迷茫期,不妨停下你的脚步,花五分钟看看,兴许有你需要的!文章结尾有彩蛋 群里常见的唱哀 iOS现在到底 ...

  3. 领域建模-模型验证与面向资源的API设计

    使用 UMLet 建模 1. 使用类图,分别对 Asg_RH 文档中 Make Reservation 用例以及 Payment 用例开展领域建模.然后,根据上述模型,给出建议的数据表以及主要字段,特 ...

  4. Google搜索排名优化-面向搜索引擎的网站设计

    内容摘要:网站在搜索营销方面最主要的缺点: 行业知识:不知道搜索引擎对吸引的新用户的重要性,在搜索引擎排名服务中追求“傻瓜相关”,购买一些其实没有太多实际意义的行业关键词.其实能够用户输入的关键词越多 ...

  5. 面向多场景而设计的 Erda Pipeline

    作者|林俊(万念) 来源|尔达 Erda 公众号 Erda Pipeline 是端点自研.用 Go 编写的一款企业级流水线服务.截至目前,已经为众多行业头部客户提供交付和稳定的服务. 为什么我们坚持自 ...

  6. 使用WCF实现SOA面向服务编程—— 架构设计

    原文地址:http://www.cnblogs.com/leslies2/archive/2011/03/29/1997889.html SOA本身就是一种面向企业级服务的系统架构,简单来说,SOA就 ...

  7. 原创《weex面向未来的架构》

    最近一直在做weex的调研工作,整理之后给公司做了一次技术分享. 分享内容如下: 1:Weex是什么? 2:  Weex目前能做什么? 3:  Weex 如何调试 4:  剖析一下Weex原理 5: ...

  8. 进阶篇:4.4)DFA设计指南:面向高速自动化装配设计

    本章目标:更进一步,设计出符合高速自动化装配的零件. 1.前言 中国的人口红利时代正在慢慢地过去,这是事实.同时,机器换人与大自动化的时代也在到来. 在这个时代中,人工成本越来越高,零部件的装配和库存 ...

  9. GIAC2019 演讲精选 | 面向未来的黑科技——UI2CODE闲鱼基于图片生成跨端代码

    一直以来, 如何从‘视觉稿’精确的还原出 对应的UI侧代码 一直是端侧开发同学工作里消耗比较大的部分,一方面这部分的工作 比较确定缺少技术深度,另一方面视觉设计师也需要投入大量的走查时间,有大量无谓的 ...

随机推荐

  1. Mapreduce的文件和hbase共同输入

    Mapreduce的文件和hbase共同输入 package duogemap;   import java.io.IOException;   import org.apache.hadoop.co ...

  2. 一起学微软Power BI系列-使用技巧(4)Power BI中国版企业环境搭建和帐号问题

    千呼万唤的Power BI中国版终于落地了,相信12月初的微软技术大会之后已经铺天盖地的新闻出现了,不错,Power BI中国版真的来了,但还有些遗憾,国际版的一些重量级服务如power bi emb ...

  3. 7.让网站支持http和https的访问方式

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#iis 怎么让网站在本地支持SSL?http://www.c ...

  4. JAVA问题集锦Ⅰ

    1.Java的日期添加: import java.util.Date ; date=new date();//取时间 Calendar calendar = new GregorianCalendar ...

  5. [C#] 走进异步编程的世界 - 开始接触 async/await

    走进异步编程的世界 - 开始接触 async/await 序 这是学习异步编程的入门篇. 涉及 C# 5.0 引入的 async/await,但在控制台输出示例时经常会采用 C# 6.0 的 $&qu ...

  6. duang~免费的学习视频来啦:学霸君之全栈测试

    学霸君向童鞋们推荐一款 同名学霸学习 视频教程 重点是完全免费收看学习噢!!! 今天 学霸君推荐腾讯课堂的学霸君之全栈测试 复制下方链接至腾讯课堂中报名学习 https://ke.qq.com/cou ...

  7. 【云知道】LoadRunner 录制问题集锦

    关键词:各路录制小白汇集于此 虽然知道君对录制不感冒,但总是看到扎堆的人说这些问题,忍不住要站出来了. 百度虽好,帮助了很多小白,但关键是百度并没有排除错误内容,经过历史的几年传播,错的都快变对的了, ...

  8. WPF CheckBox 样式

    <Style x:Key="FocusVisual"> <Setter Property="Control.Template"> < ...

  9. java springMVC SSM 操作日志 4级别联动 文件管理 头像编辑 shiro redis

    A 调用摄像头拍照,自定义裁剪编辑头像 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技术:313596790freemaker模版技术 ,0个代码不用写 ...

  10. javascript排序

    利用array中的sort()排序 w3cfunction sortNumber(a,b) { return a - b } var arr = new Array(6) arr[0] = " ...