移動平台上的产品设计.docVIP

移动平台上的产品设计 【编者按】本文由@淘宝UED团队所撰。随着智能手机的产生，人们对它们的使用时间与粘性迅速加大，移动互联网的发展越来越迅猛，越来越多的PC端产品开始把注意力集中在转移到方寸之间的屏幕之上时，有如潮水般汹涌。 移动互联网的前景堪好。我们需要的就是适应在移动平台设计一个好的APP，以此获得自己的席位。 当下的移动互联网产业，已经从单纯的以实现单一功能为主，到平台的转移，再到各个APP之间的产业链的形成，还有广告植入的各种运营手段产生各种盈利。 如何设计出一个好的APP，是我们今天需要介绍的主题。 所谓移动平台，是指除了不方便搬动的PC机，所有方便移动和携带的电子设备。不仅仅是我们流行在使用的智能手机和各种Pad，也同时包含了车载应用和各种家庭生活电子产品。 移动平台的特点： 1、时间碎片化： 移动设备的方便携带，也同时带来了它浏览时间的碎片化。以智能手机为例：我们通常在短暂的时间里，完成一件任务或者是进行一个娱乐事件。 如散步、坐公交、睡前、午后闲暇、旅行的时候，开始拍照、分享、做笔记、玩游戏、购物，等等。在平均短短5-30分钟的时间里，思路常常被打断，手机常常被拿起放下，高效和轻交互，就成为了移动设计的特点。 2、手势的应用： ? 移动触屏的产生，同时也带来了各种手势的配搭。这些手势的应用，相比于键盘、鼠标，能更加快速做出响应，并且降低学习成本，更加直观地进行人机交流。 但触摸相比鼠标，却无法达到高度的精准，也无法出现像网页中的鼠标hover、悬停等的效果。东西方人的指尖触碰面积略有不同，但通常，它们合适的点击区域是在44-44px的范围里。 3、屏幕的限制： 我们说移动平台的设计，其实就像是带着枷锁跳舞，这个枷锁不仅是来自各个平台系统的控件规范，还有最大的问题就是屏幕空间的有限，加之前面说过的44-44px的点击区域，更是需要我们的APP设计。 在单个界面的展示，简洁再扼要，交互轻量再轻量，层级浅显再浅显。 如何在有限的屏幕中展现更多的信息。有三个要素： a. 巧妙地利用工具栏与toolbar的隐藏与浮出，最大程度地展示主题，同时快速的做出交互动作。 b. 合理放置控件布局：尽量把最重要的交互按钮和信息，放置在第一屏中，这点相信在PC端网页设计中也同样适用。 c. 有针对性的移植：现在有越来越多的客户端应用，都来自于成熟的网站产品的转移，但网页所能承载的信息与交互，远远大于客户端。于是我们应该高度解理产品的核心功能与精神理念，提取最重要的信息模块，进行客户端的转化移植。 实例1：flickr 图片分享是flickr的精神宗旨，在客户端中，只展现了转发，拍照，赞，评论，前后浏览几个最能体现产品的功能。而其他类似“感兴趣的”“小组”和各种应用，在这里就不再做实现。 4、限制输入： 我们在使用智能手机和其他移动设备的时候，必须在环境不稳定，并且碎片时间里快速地完成任务，而不像在PC电脑前，沉溺专注地做一件事。 而敲击键盘输入文字，却需要花费一定的时间精力，在不得已的情况下，用户并不喜欢在手机上长时间的敲击虚拟键盘，（各位一定有经常按错键的时候吧）所以许多优秀的app就会用其他的功能代替键盘，比如微信的语音功能。 如上是一款手机花费充值的app，在选择金额上，它通过用户利用滑动区域值，很好地解决了输入数字的问题. 5、流量与费用的考虑： 移动用户通常包流量来实现上网的乐趣，所以我们在设计app的时候应该同时考虑到流量与耗电的节约，尤其是合理的图片展示对流量的影响。 比如weico+的应用，必威体育精装版版节省了60%的耗电量，无疑是一大卖点。 还有新浪weibo的客户端，对于图片的展示，分成feeds小图、点击出中图、再点击加载详细大图，满足了各种用户浏览图片的需要，通过需求细分来达到了节约流量的目的。 设计要求： 现在我们要开始着手开始设计一个app，说到实际操刀，该从何入手呢？ 首先你要了解自己的产品属性，它是一个全新的未有任何PC基础的app，还是移植性的app？ 1、全新的app设计： 每一个app都有它的精神宗旨。我们在这里给它一个定义叫做：产品定义描述（Application Definition Statement简称ADS），融会贯通，这个概念不仅体现在app的设计上，同时也体现在广告策略案等不同工作领域的形成引导。 合理地给你的产品定义非常重要。首先你要想好，你的产品大致是属于那种类型的app。 目前市面上的app大致分为3类： 实用工具型（Utility）： 比如天气预报、录音、计算器、股票查询等应用。 生产效率型（Productivity）： 这类应用主要是解决用户在极短并且不稳定的情况下高效地完成工作任务，比如印象笔记，mindmeister 沉浸型（Immersive）： 这类应用多