移动端交互设计的信息组织

标签: 交互设计IXD 博客blog 手机mobile 信息架构IA | 发表时间:2012-07-04 08:03 | 作者:张雅秋
出处:http://www.zhangyq.com

如何开始移动设计

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

组织架构

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

  • 配合使用方式:人们如何适用移动设备,为什么这样用?
  • 强调内容超过导航
  • 保持清晰和专注

配合移动设备适用方式

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

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

“我有个微任务要做”;

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

“我有些无聊”。

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

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

  • 查找/发现(急需信息,基于地点位置):我现在需要得到答案——多数是告诉我在哪里。
  • 探索/娱乐(无聊,基于地点位置):我现在想消磨时间,来点娱乐打发无聊。
  • 签到检查(check-in)/ 状态(重复/微任务处理):一些重要的事需要不断改变或更新,我想留在上面。
  • 编辑/创建(紧急调整,微任务处理):我需要马上做完一些事,不能等。

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

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

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

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

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

内容优于导航

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

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

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

纪念翻译未果的《mobile first》

相关 [移动 交互设计 信息组织] 推荐:

移动端交互设计的信息组织

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

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

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

2012年移动应用交互设计趋势

- - 曉生語錄
2011年涌现出诸多优秀设计,随着操作系统的更新和硬件性能的提升,交互设计又被提升到一个新的高度. 不再是将内容从互联网搬至移动设备,而是解决设备本身的问题,根据用户需求从操作方式、信息架构和内容呈现等各个方面挖掘设计的可能性,为用户带来新颖的交互体验. 本文汇总今年热门产品的界面案例,希望能从中总结出未来一年需要重点关注的设计趋势.

移动设备的简单交互设计

- - Tech2IPO
用户访问移动站点不仅消费内容,还会完成某些任务. 就拿坐飞机来说吧:用户在航空公司的移动站点中经常要完成航班状况查询,登机手续办理、搜索并订票等任务. 移动用户界面(UI)的设计是如何帮助用户完成任务的呢. 移动站点传达和展现交互的最佳方式又是什么呢. 为了找出在移动设备上设计简单交互的最佳方法,我对航班状况查询的任务做了些调查.

移动交互设计那些值得你学习的原理

- - 人人都是产品经理
买了本《设计之下》,是搜狐UED团队写的书,挺好的. 今天又拿来体会了下,顺便摘抄点下来,算是读书笔记,感谢搜狐新闻客户端UED团队. 人、动作(情感、典型、策略、用户研究、流程、动机)、环境、工具、目的. 创起来的流程是这样子的,人,通过工具,完成动作,达到目的,在环境里. 2、解析需求的过程可以获得以下两点东西:.

2014年移动应用交互设计10大趋势

- - 百度MUX
在移动互联网飞速发展的这几年,每年都会有一些新鲜的设计趋势涌现出来. 2014年,又有哪些新的设计趋势脱颖而出呢. 百度MUX有一群关注趋势的小伙伴,从大量的APP中去发现设计范式,挖掘设计趋势,预测出2014年在移动产品中会被广泛应用的十大交互设计趋势. 希望这些新颖的设计模式,为设计师们带来创新设计灵感,进而为用户带来新鲜有趣的体验.

20130320早读课:三大移动平台上的交互设计差异

- - 互联网er的早读课,专注产品、用研、交互
推荐理由:iOS,Android,WindowsPhone可以说是目前移动互联网上最主流的三个平台,在文中,作者@ 可风f 从布局形式、导航逻辑、应用间联系、多任务、分辨率、设计风格等几个角度比较了三者之间的差异,需要我们在多平台设计时注意. 之前早读课也曾分享过 @MoonMonster 的一篇文章,但没有WindowsPhone平台的信息,欢迎延伸阅读→.

交互设计-简单

- DayuLu - 腾讯CDC
  交互设计是近几年流行的一个词语. 现在市场上有许多资料来介绍什么是交互设计,如何做交互设计等. 从场景,任务,用户,操作等分析. 但由于受实际情况的限制,往往不能很深入. 所以笔者结合实际工作体验与大家分享下,具体做设计时候是怎么考虑的. 如果要说什么是一个好的交互设计,个人浅见就是简单. 本文以下内容都是围绕简单2字进行展开.

交互设计初体验

- - 微博UDC
9月初,我来到新浪微博UDC部门交互设计岗位实习. 在接近四个月的学习时间里,我对交互设计行业有了深一步的了解,认识到了交互设计师的一些具体职责. 鉴于之前接受的知识大多来自书本或网络上的文章,在校期间参与项目的机会并不多,因此,我对此次实习做了一些总结:一方面,希望鞭策自己,在以后的工作中有所进步;另一方面,也希望能帮助刚步入交互设计行业的同学更快的适应工作,更好地学习交互设计.