从Web到移动应用——谈设计师的思维转换

标签: 工作感想 | 发表时间:2012-12-08 23:53 | 作者:legene
出处:http://blog.sina.com.cn/legene

随着移动互联网的快速发展,很多web产品经理、设计师转而投身至移动应用领域。看起来非常相关的工作,却可能给他们带来了不小的困扰。

 

很多刚刚接触移动应用的产品经理、设计师依然习惯用Web的思维去做APP,从而导致一系列问题。张小龙在谈微信时曾经说过: 绝不考虑Web形态,一切考虑都基于APP。那么,移动应用和Web相比,区别到底在哪里呢?以下是我在工作中通过 血的教训总结出的几点内容,在此与大家共享。


1、单一且专注 


创新工场曾推出一款应用叫“布丁爱生活”,里面包含电影、美食等内容,但是推出后一直反响平平。后来这些内容被拆分成不同的应用,反而取得了不俗的成绩。这是为什么呢?

 

我认为:第一、移动端的屏幕小,场景不固定,太多的功能会造成层级复杂、操作困难,影响体验。所以移动端本身不适合太多、太复杂的功能。第二、从场景方面考虑,用户在相应的场景下,才会想到相应的应用。比如说,用户在想看电影的时候,可能就会搜素和电影相关的应用,而“爱生活”之类的产品,一般不会主动被搜到。即使用户看到了,也不知道它是做什么的。所以 做移动应用,千万不要“大而全”。

 

 


2、细分需求并做到极致

陌陌在微信这种强大的竞争对手面前,是怎么生存并壮大起来的?况且微信也可以通过查看附近、摇一摇等方式联系陌生人。抛开产品定位、营销等问题,我想对比一下设计方面的区别。

 

 

 

打开应用后,在微信界面上,看到的是最近和你联系过的人,以及它们的留言;而在陌陌上,首先看到的是附近陌生人的照片及个人签名。点击微信标签栏上的“找朋友”,再选中“附近的人”,才能到达如下图的列表页面。但很明显,微信的头像比陌陌的小很多,信息也不如陌陌丰富。如果你只是单纯的想结交陌生人,会选择哪个应用?



因此我的结论是,面对强大的对手,找准一个细分的需求点,把它做到极致,也不是没有机会(不考虑营销等其它因素)。


3、功能优先级

 

移动应用的使用场景、设备都和Web有巨大的区别。因此移动应用的功能,不仅取决于用户需求,还要考虑使用场景、设备限制等因素。 不要直接移植Web的功能到APP上。

 

比如说优惠券产品,Web端更重视打印功能;而手机端侧重于到店展示。

 




微信刚出的时候,很多人觉得奇怪:腾讯已经有了手机QQ,为什么要再做个微信?它们有什么区别?过了一段时间,我发现原先用手机QQ的人都改用微信了。为什么大家觉得在手机上,微信比QQ好用呢?后来有一天我终于有点明白了:手机QQ是Web端功能的移植;而微信的功能更多的考虑了移动应用的特点(语音输入,通过手机通讯录、QQ好友等方式添加好友,摇一摇……)


 

所以说, 做APP时一定要充分考虑移动应用的场景、设备等特点来设计功能并决定功能优先级,而不是简单移植Web的功能。


4、简单、易用


用户在使用Web网站时,一般是端坐在大屏幕前,既可以使用鼠标、也可以使用键盘;而用户在使用移动应用时,可能是边走边用,也可能是在拥挤而晃动的公车内。因此移动应用的功能一定要简单,字一定要够大(字大了可放的内容就更少),操作一定要简单(保证可触面积)……总之四个字: 简单易用。


5、尊重平台特点及设计规范


移动应用不像Web端,界面够大,使用环境够稳定,即便有不易理解的地方也可以在界面上加各种引导和提示。就算没有任何提示,用户还可以自己尝试。但移动应用的界面小,承载的内容十分有限(Web端一个页面的内容,移动应用可能要分很多个页面来展现,页面跳转次数高),使用环境不稳定,操作更困难,如果开发者都按自己的“想象”去设计界面,那后果不堪设想。索性我们有各平台的设计规范可以参考。设计规范可以更好的保持不同应用的一致性,让用户更易理解,减少学习成本,也让界面看起来更友好。对产品设计者来说,认真研读规范也是个学习的过程,帮助我们成长的更快。


之前有个PM坚决拒绝看各平台的设计规范,认为产品设计者不应该受此约束,而应该大胆发挥。他设计的东西果然非常“非主流”,用户使用起来不易理解。我认为即使真的想去打破什么约束,也应该先充分的了解它,然后再在此基础去做更好的突破。


6、“又笨又大”的UI风格


很多之前做Web产品的设计师,初次尝试移动应用时都容易犯一个错误:界面看起来很美观,但就是不像移动应用的界面,怎么看都有Web的影子在。为什么呢?因为设计师往往倾向于更小一点的字体,这样可以让界面看起来更精致,更美观。但这在移动应用上就行不通了,试想用户如果在拥挤而晃动剧烈的公车上看密密麻麻的小字,将会多么气恼。所以这时就需要设计师转换一下思维了。






移动应用的UI风格有什么特点呢?简单的来说: 1. 字一定要够大,要一目了然 2. 布局非常的规整、简洁、一致性更强,这样阅览起来更轻松 3. 内容少、颜色少……这些可能都是Web端设计师非常讨厌和排斥的东西,但是为了做出专业和易用的产品,一定要及时调整思路。


7、独特的风格&精美的界面


虽然移动应用界面看起来“又笨又蠢”,设计师还要受到平台规范的“束缚”,但这并不妨碍众多令人惊叹的移动应用界面的诞生。移动应用界面应该比Web界面看起来更精美,想象一下苹果或安卓优美的机身,配上一个简陋粗糙的界面,将是多么煞风景的一件事情。况且在小屏幕上,界面的缺陷更容易被人发觉。这些智能机的高端用户,会毫不犹豫的带着嫌弃的表情删掉你的应用。


所以做移动应用的设计师,往往需要更加注意设计细节。当然,这建立在首先理解平台规范和设计特点的基础上,在这个基础上去寻求突破。移动应用其实给了设计师更大的发挥空间。




不仅要精美,更要独特。现在移动应用竞争非常的激烈,独特的设计更容易让你的应用脱颖而出。




9、其它


移动应用还有许多不同于Web端的特点,比如输入方式、横屏模式、启动、加载、手势、转场、动画等,这些就不一一叙述了,大家在设计规范上都可以找到相关内容。


总结:


移动设备便携、屏幕小、操作不便、但使用场景丰富多变,这些特点都决定了在移动应用上,不适于承载复杂的功能与庞杂的内容。很多时候,我们需要放弃Web端的思维,充分考虑移动设备的特点,专注的思考问题,才能做出更成功的移动应用。


最后想说的是,移动应用既不是Web端产品的附属,也不是Web端产品的复制品,它应该有自己独特的生命力。不建议Web端产品和客户端产品由同样的团队来负责,这样难以做出专业且高效的产品。



  青春就应该这样绽放   游戏测试:三国时期谁是你最好的兄弟!!   你不得不信的星座秘密

相关 [web 移动应用 设计师] 推荐:

从Web到移动应用——谈设计师的思维转换

- - legene的交互设计博客
随着移动互联网的快速发展,很多web产品经理、设计师转而投身至移动应用领域. 看起来非常相关的工作,却可能给他们带来了不小的困扰. 很多刚刚接触移动应用的产品经理、设计师依然习惯用Web的思维去做APP,从而导致一系列问题. 张小龙在谈微信时曾经说过: 绝不考虑Web形态,一切考虑都基于APP. 那么,移动应用和Web相比,区别到底在哪里呢.

基于HT for Web的Web SCADA工控移动应用

- - ITeye博客
最近客户采用 HT for Web图形界面组件,实现了油田燃气管网和供水管网等工控SCADA的HMI人机界面,并将系统运行在平板和手机等Android和iOS移动终端,在此我们在技术支持过程中的一些知识点进行些梳理和分享,希望对有志于Web SCADA领域的伙伴们提供些帮助. 移动终端呈现方面,HMI界面布局应用和游戏领域有类似的问题,一般对横版或者竖版会有更好的布局效果,例如有些游戏只支持横版的玩法,这对于采用Native的App应用来说不成问题,可将App配置成只能横向或者纵向布局,但对于移动终端浏览器就有点尴尬,目前大部分终端你是不能限制用户旋转平面导致布局变化.

Web设计师能从游戏中学到些什么

- Guan - 所有文章 - UCD大社区
Smashing Magazine版权所有. 作者:Smashing Magazine. 译者:UCD翻译小组,波希米亚. 原文地址: http://www.smashingmagazine.com/2011/07/27/what-web-designers-can-learn-from-video-games/.

WEB设计师和开发人员需要的新鲜资源

- redhobor - 互联网的那点事
网页设计正在进入全新的领域,各种技术每天都在涌现. 网页设计师和开发人员都需要不停的去改进自己的思维不停的去创新用户体验,才能让项目在众多的网页中脱颖而出. 但是不管是WEB设计师还是开发人员,都需要有一套属于自己的素材库,里面有各种资源可随时调用. 下面是我们分享给大家的一些非常实用和新鲜的资源,其中有关于幻灯片插件,有CSS框架,有HTML5和CSS3还有GUI,jQuery等等.

Web设计师能从游戏中学到些什么

- 锋 - 互联网的那点事
译者序:一直以来我都想写一篇关于游戏与交互设计之间关系的文章,因为我坚信好的设计和游戏一样有魔力,都能为用户带来乐趣. 这可能跟我之前在游戏公司任职过有关,潜移默化地受到感染和熏陶. 当看到这篇文章时,共鸣了,这就是我想要说的,于是我决定译过来,跟更多设计师产生共鸣,推动 “乐趣设计”,同时也为自己这方面的想法写下第一笔.

50 个Web 设计师必备的超便利工具

- Zhang Yi - 菠菜博
作为一个 Web 设计师并不容易,不仅考虑设计与架构,还要时刻注意各种小细节,设计师的工作被各种各样的问题包围,你需要一套超级便利的工具帮你解决各种消耗时间和精力的问题. 本文介绍了50个非常强大的工具,你会发现,其中的一些工具会让你感到惊艳在. 站点发布前的工作清单,预设了28个需要检查的事项,也可以自定义.

热点争议:Web设计师需要编程知识吗?

- - Web App Trend
Web设计师是否应该学习编写代码是个充满争议的问题. 通常,在完成了一件网页设计后他们把创建网页代码的繁重工作都留给了程序员们. 这种现象不只出现在网络开发行业,在软件及游戏开发业也是如此.  在本篇文章中,作者 Deepu Balan 和大家分享了一些为什么Web设计师需要学习编写代码的理由,这会使广大的Web设计师们受益匪浅.

Web设计师如何制作Retina图像

- - 博客 - 伯乐在线
英文原文: how to create retina graphics for your web designs,编译: w3cplus – 大漠. 苹果公司发布了更多的产品适应Retina屏幕. 到目前为止,我们知道苹果设备中支持Retina屏幕技术的有“iPhone”、“iPod”、“iPad”和“Macbook Pro”,这些设备能为用户呈现更细腻、平滑和高质量的图片效果,提高了用户的视觉体验.

Bizness Apps 帮助中小企业同时制作本地移动应用和 HTML5 Web 应用

- walker - 36氪
Bizness Apps 为中小企业提供工具,让他们可以方便快速的创建自己公司的移动应用. 成立于 2010 年 10 月,9 个月内覆盖 20 多个国家,超过 10 种语言,目前已经帮助中小企业创建 1000 多个移动应用. Bizness Apps 的理念在于,他们希望让中小企业主,可以很容易的做出便宜实惠、可定制的移动应用,他们允许用户 DIY 自己的应用,支持 iPhone, iPad 和 Android 平台,用户不需要会编程就可以创建、编辑、管理自己的应用.