IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

跨终端体验的完整性

幻風閣|Kent.zhu's Blog 2013-04-07 13:12:58 累计浏览 1,959 次
本机暂存

   可以预见的,用户将会在不同的屏幕上体验你的产品,而用户在各个屏幕上的用户体验也将趋于一致。对于用户而言,只在乎你所提供的服务,这与他在什么屏幕上体验无关。

   Evernote是跨终端体验完整性的典型案例。我可以在手机上继续在Mac上完成了一半的文章,也可以在Pad上读完某一个被共享的文档。对于我来说,随时随地的记录与查看的体验是完整的。

   百度云在跨终端体验完整性上则做的更好。我通过PC端共享一个BT种子或者视频文件,然后我的好友可以在Pad上直接观看。对于用户而言,共享影片的体验是完整的,且是被更好的满足了的!

   Path和啪啪则是另一类跨终端体验完整性的典型案例。我通过APP上传照片,然后通过Twitter等分享给我的朋友,如果我的朋友在PC上,他可以通过Web浏览器查看我的照片,对我的照片进行点评,或者收听我发出去的配音。对于我来说,随时随地与好友互动的体验是完整的。

   QQ音乐、快捷酒店管家等与微信的结合也是这样。我分享一首歌曲到微信,我的朋友可以直接在微信中点击播放,这个听歌的体验是完整的。我分享一个酒店详情到微信,我的好友可以点击之后在微信中查看这个酒店详情并完成预订,用户订房的体验也是完整的。

   所以,对于产品而言,用户更看重的是你的服务,至于承载这个服务的载体,并不重要。而作为产品,也必须去试图根据不同场景的切换去满足他们。

   以上是基于产品层面的跨终端体验完整性的一些思路与案例。如果细化到具体的设计上,同样的,也需要考虑跨终端的体验完整性,用户在不同的终端不同的浏览器上访问同一个网站,应该享受到一样完整的体验。

   最近学到一个新的词,叫做响应性设计,也被称为“响应性界面设计(Responsive UI)”、“响应性Web设计(Responsive Web Design)”。

   响应性设计,简单说就是设计和开发应针对用户行为和使用环境,做出不同响应的设计方法。主要是解决用户不在不同的终端浏览器上的体验一致性的问题。

   响应性设计具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。

   应用响应性设计不仅仅是变变布局,而是应该把各种设备的不同特点发挥在产品设计中。同一个产品在不同的屏幕尺寸 、不同的浏览器、 不同的操作系统 、不同的网络环境 、不同的设备性能下,在一个统一规划的设计策略下管理。这样可以很大程度避免出现类似wap.xx.com、m.xx.com、pad.xx.com这样的纷乱的情况。

   附,关于响应性设计的一些介绍与资料:

   c7210翻译:什么是响应式Web设计,怎样进行?

   kejun:聊聊响应性设计和开发

   孟爽paula:响应式设计如何入门

   kejun:一次响应性开发实践

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. Web表单设计之注册表单 (累计阅读 8,880)
  2. 用色彩打造专业的视觉效果 (累计阅读 7,234)
  3. webapp网页调试工具Chrome Devtools (累计阅读 6,986)
  4. 视觉设计师应该略懂交互 (累计阅读 6,086)
  5. 这些反人类设计,你肯定也碰到过 (累计阅读 5,630)
  6. 行进在产品经理的路上 (累计阅读 5,040)
  7. 浅谈如何留住用户 (累计阅读 4,964)
  8. 人人都能用的10条网站易用性技巧 (累计阅读 4,936)
  9. 在程序员的眼里,用户是这样使用他们开发的软件的 (累计阅读 4,927)
  10. 响应式Web设计:50实例例与实践 (累计阅读 4,884)