抓住用户的设计:移动网页设计的信息组织

标签: 业界 Android iPhone web Windows Phone | 发表时间:2012-07-24 11:57 | 作者:Warlial
出处:http://www.leiphone.com

【编者按】本文转载自 @雅秋168个人博客。对于我们中很多人来说,移动端设计是一个崭新的机会。

但是,如果你过去是桌面端的网页设计师,如何将经验转换到移动网页端呢?当然,已有的一些工具,经验,技能仍然适用,只需开始思考下如何在手机上进行组织和布局。

组织架构

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

配合使用方式:人们如何适用移动设备,为什么这样用?

强调内容超过导航

保持清晰和专注

配合移动设备适用方式

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

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

“我有个微任务要做”;

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

“我有些无聊”。

这正好与google的调研不谋而合,他将移动用户细分为三种行为群体:

当前是 急迫的,反复的,或者无聊的

不管如何描述,移动端的使用方式通常包括以下交互情形:

查找/发现(急需信息,基于地点位置):

我现在需要得到答案——多数是告诉我在哪里。

探索/娱乐(无聊,基于地点位置):

我现在想消磨时间,来点娱乐打发无聊。

签到检查(check-in)/ 状态(重复/微任务处理):

一些重要的事需要不断改变或更新,我想留在上面。

编辑/创建(紧急调整,微任务处理):

我需要马上做完一些事,不能等。

以上因素决定人们为何掏出手机,所以这些行为决定了手机体验应该如何被构造和组织来满足人们的需求。

例如:照片分享Flickr的移动网页体验就有四个主要操作。你通讯录里好友的最新活动和最新上传让人们不断想检查是否有好友的照片更新;提供当日附近人们上传的一些有趣的内容和照片,为想浏览优质照片的人们打发无聊时间的方式。

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

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

这就意味着需要考虑用户真正需要你网站组织提供的真实用例(use cases)。之前我曾经写过一篇《利用人物角色来做信息架构》其实就是通过分析用户完成某任务的流程来进行网页上的信息架构。这一点其实在手机端更加重要。
通过了解以上用户会掏出手机的动机,结合自身app提供的功能,尽量减少用户在移动端的操作路径。

内容优于导航

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

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

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

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

定位和探索

但是,请稍等一下,如果内容总是优于导航。我如何才能在移动网页端找到我的路径?难道我们不需要一种导航或路径去发现哪里可以进入?

当然需要了,但是允许人们探索和定位相关的内容并不意味着罗列一堆影响内容浏览的导航条。

例如,旧版的Facebook里将我经常浏览的相关信息放在顶部和中间的重要位置,但是由于顶部导航占据三行的空间,每页我一屏只能看到一条动态。

之后,Facebook调整了移动网页体验,重新设计了导航,减少了导航项的数量。如果你不去管头条新闻和新闻摘要,他们将导航数量减半(从10减少到5)。It’s a good start.

 

关于导航菜单,youtube提供了一个全屏的快捷入口。这种方式的缺点:一是你需要主动寻找;二是你不得不打断当前任务,跳转到一个单独的页面;三是你要知道网格图标的意思是“导航菜单”。

ESPN移动网页设计聪明很多。他也在顶部有一个“菜单”按钮,点击后直接在下方直接展示多层级的导航列表。这种方式让你思考下一步去哪里时,可以停留在当前页面,不需要离开去加载一个新的页面。

别忽视另类导航——控制屏幕底部容易些

不容忽视的是人们在使用手机时,容易的单手操作会让他们舒服很多。对于单手来说,屏幕底部操作也就显得容易些。详细讨论可以参见《hover已死有事烧香》

当人们拨弄到屏幕底部,想选择或决定去哪里的时候,很多移动网页没有给与你机会。

youtube设计在每页的底部缺少导航引导,当你划拨到底部就没地方可去了。

亲,您这是让我退出(Sign out)还是逼我写反馈意见(Feedback)啊?

底部菜单对引导用户深入访问更有意义,但不好直接复制一个其他地方也有的菜单按钮。可以将顶部的菜单按钮从底部展开(放在内容信息之后)。Bagcheck移动网页端就是这么干的:

Bagcheck顶部的锚点链接从页面底部展开网站导航

 

关于返回键

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

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

Android Phone 一般都有物理返回按键

即便是苹果iPhone上的浏览器,底部的工具栏上包含一个永久的返回按钮。

iPhone浏览器底部工具栏包含一个返回按钮。某网页左上角的返回实属多余。

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

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

  • 移动用例(usecase)。像是寻找、探索/游戏,签到/查看状态,编辑/创建,思考这些行为,然后调整网站移动端使用时候的架构。
  • 首先关注内容,其次才是导航。人们更关心信息和他们想快速处理的任务。
  • 相关的的导航出现在合适的位置,会让人们沉浸,或是访问度更深。
  • 减少关键任务的选择。导航需要清晰并且关注在人们真正需要的事情上,多考虑人们在紧急状态和非理想状态下尽快提供帮助。
  • 考虑人们在休闲时候使用手机,并且请考虑横屏设计,让人们更加欣赏你简单的设计。

原文链接 移动网页设计的信息组织

您可能也喜欢:

抓住用户的设计:清晰的移动应用表单

口袋里的较量--盘点中国移动互联网“第一次世界大战”

移动界面设计点滴

移动互联网时代:响应式网页设计已成为大势所趋

手机公司的移动互联网就是个伪命题
无觅

相关 [设计 移动 网页设计] 推荐:

从基本文本网页至移动网页设计,网页设计全历史

- Kione - 互联网的那点事
从1990年代初的基本文本编辑的网页开始,1990年代中期的在线网页建设,到上世纪90年代末崛起的flash,再到后来的CSS和Javasvript的崛起,直到现在web 2.0时代鼎盛时期,网页设计经历了多次变革. 这里介绍和突出了,不同时期里面网页设计的各方面的关键特点. 编辑/翻译: Viking Wong@DamnDigital 图片编辑: Qi Wong@DamnDigital 原文: Kissmetrics.

5大移动网页设计之最佳实践

- everfly - 互联网的那点事
本文来自SocialBeta内容贡献者wisp,原文译自Mobile Web Design: Best Practices,更多移动产品设计方面的资料,请查看SocialBeta移动互联网栏目. 移动设备的兴起正在给互联网带来一场新的革命,虽然说移动网页设计原则不会有多大变化,但是却有着明显的区别.

抓住用户的设计:移动网页设计的信息组织

- - 雷锋网
【编者按】本文转载自 @雅秋168 的 个人博客. 对于我们中很多人来说,移动端设计是一个崭新的机会. 但是,如果你过去是桌面端的网页设计师,如何将经验转换到移动网页端呢. 当然,已有的一些工具,经验,技能仍然适用,只需开始思考下如何在手机上进行组织和布局. 当你开始组织移动端界面的内容和操作时,一些可靠的信息架构准则:比如,清晰的标签(labeling),平衡的宽度和深度,妥当合理的心智模型,这些仍旧十分重要.

响应式网页设计

- - 前端观察
这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以 先看下这个PPT. 在说到这个话题前,我们先看下网页设计和前端开发的现状:. 全球有超过53亿手机用户(包括传统手机).

移动互联网时代:响应式网页设计已成为大势所趋

- - 博客 - 伯乐在线
我们正处在移动互联网快速发展的时代,智能手机和平板也越来越普及,有些人甚至都到了没有智能手机或平板就无法过活的地步. 智能手机和平板的普及,也就意味着越来越多的用户会通过移动设备访问互联网. 通过移动设备访问互联网的用户或多或少都有过这样的经历:有些网站压根就没有针对移动设备的网站,哪怕是有,大多都是不够“移动友好”,阅读体验完全跟不上传统的 Web 版本;而且在不同的移动设备上,浏览体验也是大相径庭,让很多用户大为苦恼.

网页设计的12种颜色

- chenhua - 阮一峰的网络日志
前不久,ColourLovers.com公布了一项调查结果. 他们发现,美国前100大网站的Logo,主要使用12种颜色. 其中,采用蓝色的网站最多,红色排在第二种,黄色排在第三种. 我把这12种颜色的RGB代码列出来,供将来自己做网页时参考.

网页设计师的新挑战

- changwei - 互联网的那点事
随着苹果带来的平板电脑风暴让很多设计理念得到进一步的升级. 每天都有太多的好的创意涌现出来,似乎世界的每个角落都有一群孜孜不倦的Geek在研究着新的技术,在想着好的创意. 或许他们只是用着一种自娱自乐的姿态做着自己喜欢的事情,却给很多人带来了快乐和方便,也在微妙的改变着这个时代. 下面是来自网络搜集来的30个伟大的应用程序以及字体设计,来自网页设计师和开发人员.

HTML5和CSS3:网页设计的框架

- 壮壮爱 - 译言-每日精品译文推荐
来源HTML5 and CSS3: Wireframing in the final product. 框架是Photoshop和网页经典的比较之处. 现有的框架和原型工具不能准确体现网站的需求. 静态设计的网站不能在web浏览器上浏览. 而且当你完成网站最终建设,网页上一些元素看起来和草稿中相对应元素不完全一样,客户端会发现那些字体定位上的细微的区别.

如何成为网页设计专家

- Desmond - 译言-每日精品译文推荐
你是否想与客户侃侃而谈让他们认真的对待你的观点,因为看上去你就是个专家. 如果你的答案是肯定的,那么恭喜你,有许多人与你一样. 如果希望有一天能真正做到,那么你需要退后一步再想想,成为专家对你来说为什么如此重要. 为什么我们都希望看上去像个专家. 我们都希望成为专家是因为我们希望我们的观点能够被其它人认真对待.