`

移动思维和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的一些XMind的思维导图

    移动web.xmind思维导图

    总结

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

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

    HTML5移动web总结.xmind

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

    放弃Web端的思维做出更成功的移动应用

    很多刚刚接触移动应用的产品经理、设计师依然习惯用Web的思维去做App。张小龙在谈微信时就曾经说过:绝不考虑Web形态,一切考虑都基于App。那么,移动应用和Web相比,区别到底在哪里呢?以下是作者以自己在工作中...

    《移动互联网之路》作者: 李晓斌 出版年: 2016年

    本书全面、系统地讲解了 HTML 5、CSS 3 和 jQuery Mobile 从 Web 界面设计到移动应用开发的各种技术和知识点。本书难度适中,知识结构严谨,内容由浅入深、从易到难,讲解通俗易懂,并注重读者兴趣的培养,在知识点...

    网络安全思维导图

    信息系统等级保护实施指南思维导图.jpg 逆向漏洞 MPDRR模型.jpg Windows_Hacker学习路线图.jpg cheat sheet reverse v5.png 计算机病毒.png 安全人员技术要求.jpg 木马攻击与防御技术.png 欺骗攻击与防御...

    面试思维导图.xmind

    python-web开发,linux运维开发,基础运维,数据库,数据结构 等...。面试知识面总结,非常全面,希望会帮到有需要的朋友。

    现代前端技术解析 (前端知识体系与架构思维解析)

    这是一本以现代前端技术思想与理论为主要内容的书。前端技术发展迅速,涉及的技术点很多,我们往往需要阅读很多书籍才能理解前端技术的知识体系。...使读者获得成为高级前端工程师或架构师所必须具备的思维和能力。

    互联网常用概念.pptx

    基本概念 互联网思维: 相对于工业化思维的商业民主化思维和用户至上的思维。是互联网时代思维方式的集合,如免费、用户体验、参与感等。APP:分为web和native,web app是不用进行安装的,而平常在app store里下

    信息架构:超越Web设计(第4版)(全彩).[美]Louis Rosenfeld(带详细书签) PDF 下载 高清 完整版

    其中描述了信息组织的普遍和永恒原则,这一原则也适用于不断增长的移动世界。在第4版中,作者运用大量最新的插图和例子为这些原则提供了当前实践中的情境,验证了那些与技术和供应商无关的工具,以及那些经受住时间...

    堆塔思维-WebTick-crx插件

    堆塔思维web标注工具 此扩展程序为堆塔思维的web阅读工具,包括文本标注、区域截图、页内片段与整篇文章提取等功能。文本标注:以文本高亮形式记录web中的知识内容,并可以添加标题与笔记,该功能提供六种高亮颜色,...

    网络安全思维脑图(多个领域)

    网络安全思维脑图(多个领域), CTF,web安全,Linux安全,安全开发,人工智能,无线安全,移动安全,运维安全,社会工程学,区块链安全,安全技能树等等;

    信息架构 超越Web设计(第4版).pdf

    其中描述了信息组织的普遍和永恒原则,这一原则也适用于不断增长的移动世界。在第4版中,作者运用大量最新的插图和例子为这些原则提供了当前实践中的情境,验证了那些与技术和供应商无关的工具,以及那些经受住时间...

    C++、计算机网络,项目以及操作系统思维导图.zip

    软件开发设计:应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、python、web、C#等语言的项目开发与学习资料 硬件与设备:单片机、EDA、proteus、RTOS、包括计算机硬件、服务器、网络设备、存储设备...

    C++实现学生选课系统,主要练习面向对象编程思维.zip

    软件开发设计:应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、python、web、C#等语言的项目开发与学习资料 硬件与设备:单片机、EDA、proteus、RTOS、包括计算机硬件、服务器、网络设备、存储设备...

    各种安全相关思维导图整理收集.zip

    渗透步骤,web安全,CTF,业务安全,人工智能,区块链安全,数据安全,安全开发,无线安全,社会工程学,二进制安全,移动安全,红蓝对抗,运维安全,风控安全,linux安全 运维(Operations & Maintenance,简称O&M...

    安全思维导图集合.zip

    Web安全 业务安全 云安全 人工智能 其它相关 区块链安全 安全产品 安全开发 安全职业 安全论文 工控安全 态势感知 恶意分析 情报分析 数据分析 数据安全 无线安全 时间管理 物联网安全 移动安全 等级保护 编程技术 ...

    技术人的思维导图。涵盖计算机网络、操作系统、数据库系统、设计模式、Java基础、多线程编程等。Pentagram.zip

    包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、...

Global site tag (gtag.js) - Google Analytics