`

移动思维和WEB思维

 
阅读更多

随着移动互联网的兴起,移动思维这个词也越来越多被提起。经常会有人问我什么是移动思维,其实这个词是相当WEB思维而言的。

总结了下:

由于物理设备的不同导致的使用方法和使用习惯不同。(思维是针对 移动产品的设计人员来说的,而对于用户来说则是使用习惯)

用 蹲厕 和 马桶来分别比喻 下 WEB思维 和 移动思维:

用WEB思维来做移动:

用移动思维来改造WEB:

其实不管是什么思维,只要做出来的产品能便于用户使用,符合用户使用习惯就行。WEB思维算是 移动思维之父,但也不能全盘搬到移动上面,还是要根据移动的特性进行改造。

下面我们来探讨下 Web 和 移动 的一些差异性:

一 物理差异

物理上的差异包括 尺寸上的差异 和功能上的差异。

1. 尺寸的差异

PC能在一屏呈现的内容要多于智能手机,尽管现在智能手机的尺寸是越做越大。屏幕尺寸上的差异导致了,WEB和手机上设计的布局差异。

同时WEB和移动设备的交互方式不同。

手势的类型要比鼠标的操作类型要多,利用手势的特性可以做出很多有趣新颖的交互。

但手指的点击区域要比光标要大。

并且由于移动场景的“恶劣性”,移动端上 内容、字体尽可能做的大些,易识别些。因为你的用户可能在拥挤的公交、地铁上,可能在一边走路一边玩手机。

2. 功能的差异

相对于传统PC,智能手机轻便携带,自带各种传感器。针对智能手机的独有特性出了不少应用:

还有基于前置闪光灯特性的 手电筒应用。基于触摸屏特性的 画图应用。其他的,还有类似 摇一摇,扫一扫这些功能,在传统的PC上是很难做出来的。

所以在做移动产品时要充分利用智能手机的特性。

二 用户使用习惯的差异性

移动思维的差异性集中体现在这个阶段,设备的物理差异导致了用户使用习惯的差异性,所以产品设计人员的思维要在这个阶段发生转变。

我们先了分析下面几款产品的进化。

  • 博客—> 微博—> instagram

可以看出,从PC到移动,产品变得越来越轻、越来越薄了

为什么会有这种变化呢?

因为移动场景下,用户的智商是很低的!甚至是文盲!

在WEB端,用户会将大部分注意资源、精力都放在PC上。而在移动场景下,用户只会将少量的注意资源分配给你的应用。例如,你可以在早高峰的地铁里阅读新闻APP,你要时刻注意你周围的人,注意地铁是否到站,所以你分配给你的APP的注意力其实是很少的。

所以现在你该知道什么是移动思维了:

为弱智设计产品!

http://www.techug.com/mobile-design-and-web-design

分享到:
评论

相关推荐

    html+css+移动web 思维导图

    在这个“html+css+移动web”思维导图中,我们可以深入探讨这两个主题以及它们在移动设备上的应用。 1. HTML基础: HTML是一种标记语言,用于创建网页的结构。它的主要元素包括: - 标签:如`<html>`, `<head>`, `...

    web思维导图

    "web思维导图"很可能包含了从基础概念到高级技术的全貌,旨在帮助用户构建对Web技术的整体认知。 在这个思维导图中,我们可以预期以下几个关键知识点: 1. **Web基础**:这部分可能涵盖了HTTP(超文本传输协议)和...

    响应式Web设计思维

    响应式Web设计是一种网站设计思维,它允许网页界面能够自动适应不同分辨率的设备,包括桌面计算机、笔记本电脑、平板电脑和智能手机等。它突破了传统为特定设备设计网站的局限,使同一套代码和内容能够跨多种设备...

    网页思维导图实现

    4. **协作与分享**:支持多人协作和分享功能,允许用户邀请他人查看和编辑他们的思维导图,这通常需要与后端服务进行集成,处理权限管理和版本控制等问题。 5. **导入和导出**:为了兼容其他思维导图软件,网页应用...

    移动web.xmind思维导图

    总结

    移动适配基础思维导图.xmind

    移动适配基础思维导图.xmind

    js脑图思维导图插件.zip

    总之,JSMind是一款优秀的JavaScript思维导图插件,它的易用性、灵活性和强大的功能使其成为Web开发者的理想选择。无论是用于个人学习、团队协作,还是构建专业级的思维导图应用,JSMind都能提供出色的支持。通过...

    移动web上课笔记(xmind).zip

    总的来说,"移动Web上课笔记(xmind)"应该涵盖了上述所有知识点,通过思维导图的形式,以清晰的层次结构呈现了移动Web开发的学习路径和关键概念,是初学者和经验丰富的开发者都值得参考的学习资源。

    一个还算强大的Web思维导图。A relatively powerful web mind map.zip

    3. **用户界面设计**: 一个好的Web思维导图应用应该有一个直观且用户友好的界面,允许用户轻松添加、删除和移动节点,调整连接线,以及应用不同的样式和颜色。 4. **数据存储与同步**: 由于是Web应用,数据很可能...

    基于html5_canvas 实现的简单思维导图制作工具 支持自由放置节点和自由关联节点.zip

    考虑到标签中提及了“网页”和“多媒体”,我们可以推断这个工具可能还支持与用户交互的其他HTML5特性,例如拖放API(drag and drop)来简化节点的添加和移动,或者Web Storage(localStorage或sessionStorage)来...

    web前端思维导图.zip

    这份名为"web前端思维导图.zip"的压缩包文件,显然是为了帮助开发者或者学习者更好地理解和掌握Web前端开发的核心概念和技术。思维导图作为一种有效的学习工具,能够通过视觉化的形式,将复杂的信息结构化,帮助我们...

    linux安全、Web安全、java web等安全思维脑图

    linux安全 Web安全 java web 人工智能 区块链安全 移动安全 运维安全 等安全思维脑图

    d3.js的API思维导图

    【材料】:d3.js的API思维导图,图片形式 【介绍】 D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准,可以不需要其他任何框架...

    基于VUE使用Hbuilder工具移动开发的思维导图工具

    总之,结合Vue.js的灵活性和Hbuilder的高效开发环境,我们可以构建出一款既美观又实用的移动思维导图工具,满足用户在不同设备上记录和整理思维的需求。在实际开发过程中,不断学习和实践,才能不断提升我们的技术...

    HTML5移动web总结.xmind

    html5移动web阶段总结(xmind编辑的思维导图)

    融入创新创业元素的移动教学模式改革实践——以“Java Web项目实践”课程为例.pdf

    本文探讨了融入创新创业元素的移动教学模式改革实践,以“Java Web...通过移动教学模式和“一融合二贯通多维评价”的创新创业思维培养模式,学生可以更好地掌握Java Web开发技术,并具备创新创业能力和自主学习能力。

    javaEE思维导图.

    8. **微信小程序**:虽然不属于JavaEE范畴,但微信小程序是近年来流行的轻量级应用开发平台,使用特定的WXML和WXSS语言,结合JavaScript开发,适用于快速构建移动应用。对于JavaEE开发者来说,了解微信小程序有助于...

    《移动WEB开发(HTML5+CSS3)》课程标准.docx

    《移动WEB开发(HTML5+CSS3)》是一门针对计算机应用技术专业的核心课程,旨在培养学生利用HTML5和CSS3进行跨平台移动WEB应用开发的能力。这门课程建立在网站前端设计的基础之上,为后续的网站后台开发和网页脚本技术...

    移动建站必备

    通过以上对移动建站核心技术与实践策略的深入探讨,我们可以看到,移动建站不仅仅是技术层面的挑战,更是对设计思维和用户体验的考验。只有深刻理解移动用户的需求,才能在移动互联网的大潮中构建出真正符合时代潮流...

Global site tag (gtag.js) - Google Analytics