说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

为移动而设计之信息架构篇

HTML文档下载 WORD文档下载 PDF文档下载
本文从设计人员的角度出发,提出了移动端设计与传统桌面端设计的不同之处,同时归纳总结并比较了多种主流的设计模式和信息架构,旨在帮助设计、产品、开发相关人员更好的思考移动端设计。

大约在1993年,我父亲带回家一部体型硕大、形似砖头的移动电话。当时,我们全家人都对这个稀物表示难以置信的兴奋,但是没有人会认为它会对我们的生活产生巨大影响。几年后,当我的一些朋友决定购买它时,我仍然会把它看作是一种花样和噱头。 

如今全世界共有60亿移动订阅用户,意味着如果人手一部移动电话,那么世界上87%的人便拥有移动电话。然而,将近有30亿人使用台式电脑,这和移动电话使用情况差别很大。

移动设备存在于我们的生活中,随之而来也为移动端设计带来了一系列新的限制和机遇。让我们来看看设计方法会如何得以更新。

移动有何不同?

关于移动设计,我们最先需要了解的是它的不同之处,这并不仅仅指尺寸的不同。移动设备的属性与规格也带来了不同的设计启示和要求。由于移动设备更轻更便携,我们通常觉得它们更便于使用。通过频繁使用移动设备,我们与它们之间建立了独特而富有情感的联系。


属性与规格

绝大多数移动设备配有触摸屏,用户主要通过手势以及一些简单的界面元素进行操作。由于受限于屏幕尺寸,有时我们希望屏幕中的显示内容结构更简单精致。同样由于受限于带宽和连接速度,移动端上的设计需要优化加载时间,减少数据请求。

为何,何地与何时

由于需要不间断查看手机信息,我们往往会更频繁地使用手机。乘坐公交车时、街上漫步时或看电视时,它们都无处不在。甚至,我们通常“做”一些其他事情时也在使用。这意味着我们可能在一些复杂的视觉环境下或是一系列干扰条件下使用手机。

我们如何行动和感知

使用移动设备时,我们有不同的态度、行为和优先级。作为Going Mobile 2012研究的一部分,用户体验设计机构Foolproof 指出移动设备赋予我们一种新的自由感和控制感。还有一些用户反而对他们的移动设备产生了非常真实的情感。Foolproof指出当智能电话不在身边时,63%的人会感到失落不安。他们把这些设备描述为“有生命的”,是他们身体和人格的一种延伸。

移动设备从根本上改变了用户的期望,因此对于设计师而言,非常重要的一点是遵从以用户为中心的设计流程来进行设计。但存在的问题在于:以往那些最佳的传统实践方法并不总是可以参照。

移动如何影响设计师

移动设备的差异化直接作用于以用户为中心的设计的整个过程:从用户研究到最终的开发和实现方案的测试。而实现方法和信息架构是整个设计流程中受到最大影响的。

移动设计实现方式

不同于传统网站,移动设计的实现存在四种主流方式。移动用户最希望在浏览器上浏览,移动式网站(为移动设备而特地优化的网站)或者响应式网站(根据设备重新排列布局的网站)的内容。而那些在设备上安装了应用程序的人会选择原生应用或混合模式应用。原生应用是独立存在的:每一个应用的界面都被定义在平台层上方。混合模式应用提供了更为灵活的方式,从网络中获取内容,(即通过浏览器进行阅读),但也提供了类似于原生应用的界面。

每一种实现方式都有正反两面。选择哪种样式取决于项目的设计背景。(下面的表单中,星星越多,效果越好)


移动信息架构

移动设备同样也有自己的信息架构样式库。尽管响应式网站的结构可能更多遵从“标准化”样式,而诸如原生应用则通常采用基于标签的导航结构。但并不存在构造移动网站或应用的“正确”方法。接下来我们会带来一些最流行的样式:层级式、辐射式、套娃式、标签视图、便当盒和筛选视图。

层级式(Hierarchy):

层级样式是带有一个索引页和一系列子页面的标准网站结构。如果你在设计一个响应式网站,你可能会受限于此,然而它所带来的额外样式可以帮助你为适应移动设备而调整体验。

Luke Wroblewski在博文《移动为先》( Mobile First)中帮助我们首先关注于重要的内容:可以帮助我们创造更好的用户体验的产品特性和用户使用过程。 

  • 适用项:整理需要跟桌面端网站保持一致结构的复杂站点。
  • 注意项:多面的导航结构应用于小屏幕上可能会给用户引起的麻烦。


辐射式(Hub-spoke):

辐射样式向用户提供了便于跳转的中央式索引,这是iPhone的默认样式。用户无法在分页面之间切换,而必须回到中央跳转。一直以来,这种样式主要用于工作流程受限的桌面端(通常是技术限制,诸如表单或者购买流程中受到的限制)。然后,这种样式在移动设备上越来越流行,这是由于用户使用移动设备时会专注于单一任务,以及由于设备本身的外型因素。这种样式的流行使得全局性导航愈发难以使用。 

  • 适用项:多功能工具,其中每个都有不同的内部导航和目标。
  • 注意项:这种样式不适于用户进行多任务操作。


套娃式(Nested doll):

套娃样式采用渐进式导航引导用户查看到更详细的内容至。当用户操作不方便时,这是一种快速简单的导航方法。通过点击“前进”或“后退”,用户可以强烈感知自己所处何处。

  • 适用项:应用或网站的主题奇特或者主题之间密切相关。它们同样适用于内置其他父样式的子样式,诸如标准的层级样式式和辐射样式。
  • 注意项:用户无法在不同内容中快速切换,因此需要考虑这种样式是否方便查找,而不能让它成为查找内容的绊脚石。


标签视图(Tabbed view):

这是一种普通应用用户熟悉的样式。这种形式通过工具栏菜单集合为一系列的内容。这样用户可以在第一次打开应用时,便能快速扫过并了解应用的全部功能。

  • 适用项:基于一个相似主题的工具项和多任务情况。
  • 注意项:这种样式不太适合复杂类结构,较为适用于非常简单的内容结构。


便当盒/仪表盘(Bento box/Dashboard):

便当盒/仪表盘样式通过使用组件展示相关工具或内容的部分信息,再把更详尽的内容链接至到索引界面。由于这种样式很复杂,它在桌面端显示会比在移动端更为适合。这种显示醒目有力,用户只需要扫一眼就可以理解关键信息,但它严重依赖于信息清晰的设计呈现。。

  • 适用项:主题相似的多功能工具和基于内容的平板电脑应用程序。
  • 注意项: 尽管平板电脑的屏幕提供更多空间承载这种样式,但更为重要的是我们要理解用户如何与每块内容互动,以及我们要确保应用简单、有效、使用愉悦。


筛选视图(Filtered view)

最后,筛选视图样式允许用户通过选择筛选项来切换不同视图从而在一系列的数据中进行导航。筛选同分面搜索方法一样,是一种很棒的适合用户查询内容的方法。

  • 适用项:内容数量庞大的应用或网站,诸如文章,图像和视频。它可能为杂志样式的应用或网站提供了好的基础,或者是它可以作为另一个导航样式内的子样式。
  • 注意项: 移动设备上,由于筛选和分面搜索很复杂,所以很难在较小的屏幕上展示。


 下一步

自从我第一次看到大型的砖头式移动电话起,已经过去了将近二十年,(而我买第一步移动电话也有大约十二年了)。如今我、我父亲和我认识的人几乎都有一部智能电话,我们习惯于频繁地使用它们沟通、交流并且管理我们的生活。每一年科技都有一次飞跃,因此我们要清楚地认识到我们需要与时俱进。设计友好的移动和桌面信息架构正是创建伟大的移动体验的第一步。在第二部分-设计考量 中,我将解释移动内容的差异性如何影响最终方案的设计。

文章来源:腾讯CDC

原文地址:UXBootth


Go Mobile沙龙第3期:交互设计

最近在移动互联网业界,出现了一些有趣的现象。在一个应用开发团队中,项目设计、视觉设计、UE用户体验的角色被重视起来。那些扁平化设计、交互式设 计、响应式设计,也一度成为我们谈论最多的关键词。交互设计师不仅仅是画图的,更要关注信息架构、界面交互等方面。如何做好交互设计呢?
本期Go Mobile将在6月22日于杭州举行,届时将邀请中央美术学院交互设计工作室负责人 彦风 、创新工场用户体验总监 吴卓浩 、前三星研究院用户体验部负责人 林敏 、Ark Design创新顾问/联合创始人 张文新 、欧朋浏览器产品总监 冯嘉彬 、DailyCost设计师/开发者 梁国鹏 ,与各位开发者、设计师聊聊移动交互设计那些事。【报名请戳】

(责编/翟方庆)
JavaScript异步编程好助手:Promise模式 功能解析:Red语言推出0.3.3新版本 可穿戴?可吞咽!UI和UX的悄然转变 华为刘成:讲述开发者联盟的故事 出尔反尔,Amazon咬文嚼字玩转私有云 创业公司SOASTA:曾帮助伦敦奥运会官网进行云负载测试 金山云进一步聚焦云存储 Facebook公布用户数据:美国移动用户占比78% Zynga开源服务器监控工具zPerfmon 上海海事大学王洁:打造物流教学科研应用云平台生态系统 15个步骤创立技术公司,并收获千万用户(二) HTML5发展慢热 开发者热情不减 NimbleBit孪生兄弟创始人:最后悔没有专注和扩大品牌 将对Windows形成挑战:谷歌在Chrome OS中默认支持Office 微软的企业社交大动作:Yammer发布移动SDK 谷歌开源Gumbo:纯C语言实现的HTML5解析库 AMD发布APPML源码,构建clMath库 【观察】3个月,每天增加52台,又一家云企业跻身十万台服务器俱乐部 感受华为IT业务的实力 小米雷军:我为什么做红米? GitHub上线Trending功能,帮你轻松找到有潜力的开源项目 如私人秘书:谷歌搜索将变得更加个性化 微软将于10月17日正式发布Windows 8.1 Google推出在线教育C2C平台Helpouts 技术人员组团参加SDCC 2013的十个理由 继BAT之后 第四大巨头是谁 如果传统IT部门真的消亡,你该何去何从? 闪存突袭,混合储存是否已步入黄昏 Cloudera发布Hadoop开源组件Sentry:提供细粒度基于角色的安全控制 我从其他Shell脚本中学到了什么? 10个调试和排错的小建议 最近在找个网站管理系统,各位能否给个建议100分侯 标准库和标准模版库,和库函数什么关系啊 我是这样调用DLL的。 java里面有没有象MSDN一样的帮助系统啊??? 哪里可以下载库函数的中文资料啊 在一个框架页面上,如何进行打印? 大家好啊,来帮帮忙做这道题,小妹谢谢啦!:) delphi的报表问题 (急急急,线上等待) ora8i的安装问题,急! go命令为什么没效果 Query的设置? 回答过菜鸟级问题-我做的FLASH动画在有些机器上无法显示的请接分。再次感谢 给点意见!!! 求救,如何限制用户下载!!!内有详细说明.分不够可以在给!!! 請問怎樣用代碼得到一個dw控件的 dw 對象并messagebox出來? ★★★算法讨论:如何识别红眼和消除运动模糊★★★ 兄弟们,帮我啊!~ 紧急求助:请问如何在MFC程序中调用自己编写的C++类 请问谁有组卷的算法,急用,多谢! 急!!!关于FileSystemObject问题,在线等 求面积 鼠标在视图和用非模式对话框交互绘图 在.login中怎么设置汉字的位数? oracle9i的安装文件都有什么?望高之!急! 如何用window.open弹出一个屏幕居中的窗口? 大侠们,在线求word200文件密码破解,急!!!!!!!!!!! ccnet(苦海放歌) tdl982324(石井坚) ( ) wanghr100(灰豆宝宝.net) possible_Y(◎)(◎)←(这是眼镜,不要想歪了)请接分 ccnet(苦海放歌)yaoxuefeng(锋雨者)brainf(后街)请接分 配置节的type的第二个参数的含义 报表问题。 最近在找个网站管理系统,各位能否给个建议 windows2000的奇怪问题 关于如何自定义组件问题 有关windows 98自动重起问题。 ListBox问题 VFP8.0中的数组问题,高手和用过的人来看看! 数据库的移植问题? 重新开机时常常变成"大图标",怎样设置使WIN2K所有磁盘(c,d,e盘)上的所有文件夹和文件以"列表"显示,就是让"查看"->"列表"固定? oracle9i的安装文件都有什么?望高之!急! 哪位有没有SCJP培训的录音或其他教学的好东西阿 MSComm控件在设计时运行没问题,但打包后装到别的机子老是出现“没有注册类”,求救? delphi 做的数据库应用程序如何移植?? copysign怎么用啊? 如何将一个网页的所有链接均自动加为绝对链接? 技术与数学的问题 本人写了一个设置纸张方向和大小的函数,其中MyDevMode.dmPaperSize = psize '若vbPRPSA3 设置纸大小为A3,但在VB对象库中找不A2张对应值 tomcat4.1.24中的sevlet问题 我下载了linux的iso文件,可怎么安装啊!! 我想问一下,有关于计数器的相关的信息? 救急:是否可以在两个页面(两个单独打开得ie浏览器页面)传递参数,如何实现啊? JDBC相关的两个问题 两小儿辩日孔子判断不出谁对谁错两个小孩的态度是 to the Moon and Back汉语意思是什么 千军万马( )成语接龙越多越好! 西班牙语 1.vive en una casa和vivo en una casa中,vive和vivo分别是什么数格的变位?2.vivo en moscu是我住在莫斯科的意思吗?3.El es de Francia表示他“某某是哪国人”的时候谓语动词后都要加de吗?可以具体说 on the swim team汉语 我想问一下亚细胞定位在叶绿体中的基因转入没有叶绿体的物质中可以表达吗比如亚细胞定位在叶绿体中的基因转入到酵母中表达,可以发挥功能吗,为什么 求:人教版数学八年级(上)全等三角形每个课时后面的练习题(原题)同题,不需要答案,但必须是原题····那个····说一句:请直接给网址或现题 网址要不用注册的~拜托各位了····· 鹿是不是保护动物?鹿可以不可以吃? 英语语法-句子-划分成分 求一字之师,以下均为划分句子成分疑难(先),括号内需特别解释(再)!求一字之师,以下均为划分句子成分疑难(先答),括号内需特别解释(再解),如阁下也有不 最好详细点,感激不尽. 谁原为东京八十万禁军教头,被高俅设计误入白虎堂,发配沧州,后雪夜上梁山?我不知道!求求你们告诉我!谢谢了! 尊敬与爱戴的区别 感激不尽(第四题) 卵原细胞和精原细胞是体细胞吗有一道题问:人体内体细胞DNA的复制时期.我想体细胞应该也包括精原和卵原细胞吧,这二者都可以减数分裂,而体细胞大都是有丝分裂,所以我写的是分裂间期, 什么样的老师是你最爱戴的尊敬的? the jovian moons are more like planets than moon.5093 为什么精原细胞,卵母细胞是体细胞?受精卵大还是卵细胞大? 荷兰也是海洋强国,为什么干不过英国?西班牙、法国这些陆上强国海战不行,PK不赢英国,这没什么奇怪的.但荷兰素来以海洋立国,号称海上马车夫,民众历来在海上吃风饮浪,从来不缺少训练有素 Hard的意思 The moon is more useful than the sun 课文越快越好谢谢各位了我需要的是全篇课文 《水浒传》中的林冲曾是东京八十万禁军教头,一直安分守纪的他却在高俅等人步步追杀下,雪夜上梁山.它既有骁勇善战的一面,又有隐忍退让的一面.请概述能反映林冲隐忍退让性格的情节 用“近来我也注意到···可是总···原因似乎是···不够···又···尚···”造句 这是什么动物 长得像鹿 在中国古代和长脖鹿长得很像的动物是什么 hard的中文意思 用水桶从井里提水时,把水提上来所做的功是(),把桶提上来所做的功是().若用一只水桶通过滑轮组到井下取水,第一次提取半桶水,第二次提取满桶水(摩擦不计).两次相比较:W1额外( 麂鹿是什么动物 用 假如.不足.不敢.不能.将不能.造句 面积S=0.2m^2,n=100匝的圆形线圈,处在如图所示的磁场内,磁感应强度随时间t变化的规律是B=0.2t,R=8.0欧,C=μF,线圈电阻忽略不计.下列说法正确的是A.感应电动势大小为0.04VB.通过电阻R的电流大小为0. (2)话说原为京城八十万禁军教头的林冲,因被权奸高俅所害,刺配沧州,行至野猪林时,又被董超、薛霸绑缚 用“.了,就像.了”似的造句 推荐的名句及理由 光线垂直射到镜面上,反射角是________,反射光线的方向是_________. 胚芽鞘的细胞中有叶绿体吗? 《享受生命》 梁衡 帮我做下题目1 作者认为,全面享受生命实际上是( ),要达到这一目的,就要具备( )和( )两个条件.2 在第5自然段中,作者为什么说“享受生命”这句话又是多么沉重?3 人在逆境中成长好还是在顺境中成长好我们下周一有一个辩论,人的一生在顺境中成长好还是在逆境中成长好?我的观点是:逆境好.现在请求帮助,能够在尽量少举例子的情况下,战胜对方.首先, 借口怎么造句急用~~~~~~~!5分钟倒计时!不要深奥的!!!! 孔子在文中提出的评价一个人的正确方法是?宰予昼寝.子曰:“朽木不可雕也,粪土之墙不可圬①也!于 予与②何诛③?”子曰:“始吾于人也,听其言而信其行;今吾于人 也,听其言而观其行.于 望远镜和显微镜的原理是什么?最好有图. 小明上学期前四次数学考试成绩,第一次80分,第二次100分,第三次99分,在前四次考试中,小明得的平均分时整数分,小明第四次考了多少分?第3题的2小题 介绍点人和动物之间的小说把你知道的书名说出来.人与自然,动物世界就算了.是那种第一视角 与各种动物亲密接触的. 根据公式P=UI可知,电流越大,电功率越大;但根据公式P=I2R可知,电阻越大,电功率越大,也就是说电流越小;这一个电流越大电功率越大,一个电流越小电功率越大,岂不是相矛盾;我想了半年了, underlined 的汉语是什么? 孔子在《论语》中提出,评价一个人的正确方法是什么拜托了各位 11 、 下列不属于核反应堆的慢化剂的选项是?A . 重水 B . 石墨 C . 盐酸 12 、 下列不属于最早一批在中国开始核弹研究的物理学家的是?A . 钱三强 B . 杨振宁 C . 邓稼先 13 、 向美国联 成语接龙 千军万马——( ) 孔子在文中提出,评价一个人正确的方法是什么 英语翻译.如果不是亲眼所见,我是不会相信的. 电焊怎么戴着面罩能分清熔池和熔渣,我自己点焊戴面罩能分清,主要看熔池棱廓.但是连弧焊看不清,感觉混沌成一坨,如何能分清? :北京市海淀区西直门北大街甲号依都阁大厦7A室(明光桥西南角) 具体位置在哪里?如果是在朝阳区欧露经典或者安贞门地铁站应该坐甚磨车?怎磨走?坐地铁的话怎磨坐呢? 造句 带有反问和比喻的句式 underlined什么意思 北京市西直门北大街45号时代之光名苑2号楼1504 请帮我用英文翻译一下, 求依客莱的英语翻译 underlined是什么意思 verano是西班牙语吗?是什么意思? moon cake国语是什么意思 underlined 的意思 关于西班牙语的问题!句子,Vivo en Tocumen.en可以换成de或para关于西班牙语的问题!句子,Vivo en Tocumen.en可以换成de或para吗? i have travelled on the moon中文意思是什么 underlined的意思 五旬女子拼凑出骗婚团队 8人相继被骗记者探访平壤地铁 装饰奢华乘客行色匆西班牙就美国涉嫌在西从事监听活动召见朝鲜向欧洲派足球留学生 为成为体育强华媒:揭秘核潜艇部队新海军战略呼之欲杭州规定60方以上新建住宅最少配一个杭州酝酿再度延长地铁末班时间 延长至浙江省委通报省级班子专题民主生活会情杭州彩虹快速路有望11月开通贵阳拆迁猫鼠游戏:白天拆晚上搭 与城中国反贪关键词:健全机制让群众敢举报贪官忏悔录:本来只想捞几万 接判决难美女童为父亲录庆生视频爆红网络【组图贝克汉姆超速再度载长子出车祸【组图】白宫说奥巴马对国家安全局有信心监听门让世界彻底放弃侥幸纽约股市三大股指28日涨跌不一约40名尼日尔移民因汽车抛锚在撒哈拉美方称机密情报泄露未对美外交政策造成海军第一艘核潜艇去除核反应堆退役美女童为父亲录庆生视频爆红网络(组图“红十字”,平时善为战时谋外交部发言人予以肯定脸好看更要事好办多级联动呵护官兵健康实事办到官兵心坎上你的爱温暖孤儿战士心给您提个醒锻造能打胜仗的坚强堡垒战友们,让我们一起追梦圆梦美国旧金山湾区发生25年来最强烈地震调查研究越接地气越好着眼破解矛盾抓好整改落实设立知识产权法院进入“倒计时”没有重槌的回响对口支援西藏工作20周年电视电话会议拿基层官兵的眼神当镜子“阳光当兵”播洒友爱满军营中国对外援助坚持“民生为本”战士暖暖的家遭遇挫折,战友与你共渡难关把“硬指头” 攥成“铁拳头”
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘