网站设计分析:移动网页设计的信息组织

  如何起头移动设计

  对于我们中很多人来说,移动端设计是一个崭新的时机。但是,如果你过去是桌面端的网页设计师,如何将经验转换到移动网页端呢?当然,已有的一些工具,经验,技术仍然实用,只需起头思考下如何在手机上进行组织和布局。

  组织架构

  当你起头组织移动端界面的内容和操作时,一些可靠的信息架构准则:比如,清楚的标签(labeling),平衡的宽度和深度,妥帖合理的心智模型,这些仍旧十分首要。但是,组织移动端网页设计体验你需要考虑以下因素:

  配合应用法子:人们如何实用移动设备,为什么这样用?

  强调内容超过导航

  维持清楚和专注

  配合移动设备实用法子

  我们很容易了解移动设备上奇特的限制和性能。简略来说,桌面网页同样有很多奇特的限制。所以直接将桌面产品移植到手机端并无意义。而是要考虑移动端独有的特征,并且满足到用户需求。

  通过钻研一些专业分析的共通点,我们会得到一些启迪。面对通常人们是如何应用他们的移动设备的,为什么?这个问题时,Josh Clark在他的《触动人心》(注:《触动人心-设计优异的iphone利用》一书中讲到过三个要害用户行径:

  “我有个微任务要做”;

  “我想看看左近的情况”;

  “我有些无聊”。

  这正好与google的调研不谋而合,他将移动用户细分为三种行径群体:当前是急切的,重复的,或者无聊的。

  不管如何描绘,移动端的应用法子通常包孕以下交互情况:

  查找/发现(急需信息,基于地点地位):我现在需要得到答案——多数是奉告我在哪里。

  摸索/娱乐(无聊,基于地点地位):我现在想消磨光阴,来点娱乐打发无聊。

  签到反省(check-in)/状态(重复/微任务处理):一些首要的事需要不断转变或更新,我想留在上面。

  编辑/创立(紧急调剂,微任务处理):我需要马上做完一些事,不能等。

  以上因素抉择人们为何掏出手机,所以这些行径抉择了手机体验该当如何被结构和组织来满足人们的需求。

  例如:照片分享Flickr的移动网页体验就有四个首要操作。你通信录里好友的最新运动和最新上传让人们不断想反省是否有好友的照片更新;供给当日左近人们上传的一些有趣的内容和照片,为想涉猎优质照片的人们打发无聊光阴的法子。

  

 

  flickr的移动网页体验符合人们为什么而掏出手机(虽然略显生硬)。

  配合移动环境应用环境自然也需要适应你网站真实世界的需要。因为移动体验可能被用在任何地点场景,你需要考虑如何让人们无论在哪里都感觉好用。

  这就意味着需要考虑用户真正需要你网站组织供给的真实用例(use cases)。之前我曾经写过一篇《利用人物角色来做信息架构》其实就是通过头析用户完成某任务的流程来进行网页上的信息架构。这一点其实在手机端更加首要。

  通过领会以上用户会掏出手机的动机,联合自身app供给的功效,尽量减少用户在移动端的操作路径。

  内容优于导航

  一条惯例理论,在移动端内容优先于导航。无论人们是否经常查看更新信息,诸如:股票,消息或是比分;他们查看当地消息或是通过搜索查找文章或是应用聊天工具,他们都想快速响应需求而不是看到你的网站架构脉络。

  太多的移动网页体验(像是之前的Flickr )起头时的对话都是一大堆的导航列表,而不是内容信息。移动端用户光阴很名贵,下载也需要流量的金钱耗损,所以让他们马上获得想要的信息才是要害。

  

 

  Youtube ESPN的移动网页就是这样做的。先是一个简略的抬头奉告你身处哪里,将导航选项降级为一个单独的按钮。其余的地位放置可随时查看的最新信息(ESPN)和最热的供消遣的视频。

  ESPN Youtube移动网页体验将重点放在内容信息上,而不是导航上。

  定位和摸索

  但是,请稍等一下,如果内容总是优于导航。

  关于返回键

  许多iphone的原生利用在导航上都有个永久的返回按钮。由于苹果的移动设备没有硬件上的返回按键,所以很多app都在顶部标题栏设置了返回按钮。

  

         不过在移动互联网的体验上,没必要处处都设置返回按钮。因为很多设备上,诸如,andoid、黑莓、windows phone7都有硬件上的返回物理按键。

 

  

 

  andoidphone 一般都有物理返回按键

  即便是苹果iphone上的涉猎器,底部的工具栏上包孕一个永久的返回按钮。

  

        iphone涉猎器底部工具栏包孕一个返回按钮。某网页左上角的返回实属过剩。

  在移动网页体验上添加一个返回按钮容易引起混合。人们在应用网页时候会问:“这两个返回按键的作用是一样的吗?”。因此在移动网页设计时,不该当在有限的空间内盘踞一个过剩的“返回”按钮。

 

  总之,当你筹划组织移动网页体验时,考虑哪些用户行径符合移动生活的需要。

  移动用例(usecase)。像是寻找、摸索/游戏,签到/查看状态,编辑/创立,思考这些行径,然后调剂网站移动端应用时候的架构。

  首先关注内容,其次才是导航。人们更关切信息和他们想快速处理的任务。

  相关的的导航出现在适宜的地位,会让人们沉浸,或是造访度更深。

  减少要害任务的选择。导航需要清楚并且关注在人们真正需要的事情上,多考虑人们在紧急状态和非理想状态下尽快供给赞助。

  考虑人们在休闲时候应用手机,并且请考虑横屏设计,让人们更加观赏你简略的设计。

  纪念翻译未果的《mobile first》

       原文:http://www.zhangyq.com/first-element-of-the-interaction-design-of-mobile-terminal-scene/

转载请注明:代码家园 » 网站设计分析:移动网页设计的信息组织

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)