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

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

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设计师/开发者 梁国鹏 ,与各位开发者、设计师聊聊移动交互设计那些事。【报名请戳】

(责编/翟方庆)
Web应用在IE11里的实际使用性能 回顾2013年十个值得关注的WordPress设计主题 为什么Google眼镜注定会失败? 2013移动开发工具盘点:最火原型设计工具 2013年12月份浏览器份额:IE 11暴涨3倍 【PPT集萃】十位一线专家分享Spark现状与未来(二) 2014年,怎么做产品才能获得成功? 年末新游盘点:2014年移动游戏四大趋势 IDC:全球有1850万程序猿 4成爱好者在写代码 PHP开发框架流行度排名:Laravel居首 2013年度最强AngularJS资源合集 研发周报:回顾2013、技术栈的选择、开源成趋势 TIOBE 2014年1月编程语言排行榜:Transact-SQL力挫Objective-C 夺得桂冠 IBM:这五个智能技术的发展,将会改变我们生活 一周消息树: 微软的2013,Surface的2014 Amazon CTO Werner Vogels:云和SaaS正在快速风靡全球 “人类先知”Isaac Asimov 50年前的科技预测大多应验了 2014年10大Web设计趋势 Google野心:App Indexing改写应用搜索格局 Cocos2d-x,老牌引擎的新进化 Kingdom Rush创始人专访:游戏与电影元素混搭 超实用的JavaScript技巧及最佳实践(下) 盖茨和鲍尔默或成挑选微软新CEO的最大阻碍 移动开发进阶:触发式邮件深入分析 King.com传奇再续!Farm Heroes Saga强势登陆iOS、Android 2013综述稿:Clojure这一年及大事件 亚马逊AWS vs.谷歌GCE,彪的是价格? 2014,混合云被广泛采用的一年 传微软拉拢厂商推双启动系统手机 用户可选Windows Phone或Android 为什么游戏领域总是“抄抄抄”! 物竞天择、百家争鸣——评OpenStack生态圈 想让JLabel显示的字是从上到下的。该怎么办? 关于相同记录不能存在的问题 ?消息响应问题 好难的问题!!! 菜鸟有道数组问题请教!!!!!!help,help 关于CStringArray的使用问题???? !!!请问如何通过VB控制来将word文档中的1个图片替换为另1个图片!!!!! 好东东 !!!请问如何通过VB控制来将word文档中的1个图片替换为另1个图片!!!!! 请教高手,给高分!!!!!! 难呀,很多高手都说难!!!! 屏蔽右键??如何做。。。。。 有简单的访问StoredProcedure的方法吗? 简单问题:redhat linux7.2 支持中文输入吗? 谁有ASP上载组件的源代码下载 !!!请问如何通过VB控制来将word文档中的1个图片替换为另1个图片!!!!! Label控件拖放时,拖放结束(放开鼠标)触发哪个事件?急... 技术问题中的非技术问题》》》》》 请大侠看看这个怎么实现比较好!读取文件的一部分。。。 如何把c++builder开发的程序移植到 windows ce环境下???共有6870分送!!! 如何显示JPG文件? 再问审批流程中的多角色定义 屏蔽IE工具栏等的高难度问题?????路过的高手都都看看吧;-) 急问:在VC中怎样些中断服务程序? 关于时间字段的问题 怎样用ATL制作一个Dialog容器,里面可以放置别的窗口 请问VC中为什么需要动态创建(与序列化有关的)?求通俗的解释或举例说明。谢。 紧急求助!! 请问那里有tc++ 3.0的下载?小弟先行谢过啦! 怎样从句柄得到对象,附有具体代码? 关于CStringArray的使用问题???? 我的程序错了么?? 我的程序错了么? DHCP问题 关于IIS的使用 XML中华网(www.xmlchina.net)诚邀您的加盟,让我们共同讨论.NET!! 请问:DCOM连接成功,但是不执行客户微服务器代码是什么原因? 建议有CMM实施经验的同仁定期召开一个讨论会,交流一些方法和思想。 请问在哪儿可以下载c++编译期(在UNIX环境下运行) 听说新出的JB6是4张盘,是吗?都是什么内容?大家讨论一下好吗? 一个菜鸟的问题,请问 rs_user.open sql,conn,3,2 中的3,2 是什么意思 test 如何显示AUTOCAD 生成的DWG矢量文件?(来者有分) 我送分来了 名词解释........ 一个菜鸟的问题,请问 rs_user.open sql,conn,3,2 中的3,2 是什么意思 c#中的DataGrid问题 请教关于jdk库的文档的问题 机器一启动,IE就跳出来,转到指定的网站,怎么办? 有空来坐坐啊各位大虾们 微狗是什么東西﹐它的原理是什么. 谁知道用vb怎么编出来能读出PCI数据的程序啊。我有高分相送啊 有哪些我国原始农耕时期有代表性的主要文化遗址名称除了河姆渡居民和半坡居民, 现在市面多是醋精勾兑的食醋,本人想自己制作食醋,如何制作? 春秋战国时期,标志生产力水平有巨大进步的是什么?A.都江堰的兴修B.变法的实行C.铁农具和牛耕的使用和推广D.农作物产量的提高 碱性氧化物有哪些 春秋战国时期纵横家的代表人物是谁? 英语翻译Paused by customer翻译成中文是:客户已暂停.翻译成越南语是? 碱性氧化物能和什么反应? 冰乙酸勾兑15度醋精怎么勾兑 碱性氧化物与酸性氧化物的概念及区别无 碱性氧化物都包括哪些种类?碱性氧化物即能与酸反应生成盐和水的氧化物,我知道金属氧化物这一种,还有别的吗? 春秋战国时期百家争鸣的代表性思想及代表人物 碱性氧化物跟酸性氧化物的定义分别是什么 直接食用醋精会怎么样 春秋战国时期的诸子百家都有哪些代表人物 他们的代表思想是什么? 酸性氧化物碱性氧化物的确切定义 碱性氧化物是由什么构成的? 春秋战国时期儒家代表人物头有哪些 白糖晶体什么形状白糖重新结晶后的晶体形状还有味精 食用醋精哪里有卖我去了许多超市及市场,都没有醋精卖,哪个神知道呀,1 氯化钾 跟 硫化钾 肥料有赛区别 苹果树上多了有什么反应 历史概括春秋战国时期士人阶层的变迁并分析变迁的原因 急! 碱性氧化物定义是什么初中学的是溶于水生成相应的碱,就是碱性氧化物 高中学的是与酸反应生成盐和水的,就是碱性氧化物 那个对? 氯化钾适合做什么肥料 春秋战国历史春秋和战国时期都有那些国家?各国家又有怎样的兴衰及更替? 请结合私学的兴起,说说春秋时期,“士”阶层崛起的历史意义. 区分氯化铵,氯化钾,磷酸钙三种化肥说初三学生能听懂的. 酸性氧化物与碱性氧化物分别是怎么定义的? 士阶层崛起源于哪个朝代 翻译中文成越南语麻烦高手翻译这句话啦,谢谢,在线等啦夏天那里很热吧 麻烦帮越南语翻译下、就一个单词.在线等.1兴趣爱好.最好要有调调的.谢谢啦! 春秋战国时期随着政治经济的发展,文化学术领域出现了什么和士阶层崛起和私人讲学之风盛行的心变化 英语翻译tìm kiếm 怎样鉴别稀硫酸、稀盐酸、氢氧化钠溶液、氢氧化钙溶液?具体的实验过程 河姆渡的原始农耕与半坡的原始农耕文化有什么异同? 如何快速制作白糖晶体! 请把越南语翻译成中文chau doc 春秋战国 社会背景快呀 “士”大致相当于当今社会的那一阶层?在春秋战国时期,“士”有哪些职责?请分别说明,好的我会追加分的! 【化学作业】如何制作白糖晶体? 英语翻译她到底是在说什么啊?是不是说分手之类的啊?.niaiuwma.uawaini.hong men ni. 河姆渡的原始农耕文化与半坡的原始农耕文化有什么异同 古代文武官级别 英语翻译这些框上都写的神马,还有右边那个提示的是什么意思, 河姆渡、半坡原始居民的农耕生活有哪些相同和不同之处?大大们 春秋战国时期上下等级之间是如何称呼的例如大臣家中的仆人该如何称呼家中的主母?又如何称呼其子女?有没有朋友知道有关这方面的书籍,请介绍一本. 酸性氧化物 碱性氧化物 两性氧化物包括了所有的氧化物这句话是错的还是对的.求大神解答 通过河姆渡原始居民和半坡原始居民的农耕生活情况,简述我国原始农耕文化的主要特征是什么 英语翻译ái chà,cute nhá 什么叫酸性氧化物、碱性氧化物,两性氧化物. 河姆渡和半坡原始居民的农耕和住房为什么会有较大的差别 明朝武官官名及级别 列举我国原始农耕文化南方和北方代表各一例,并找出它们有哪些主要的不同点 醋精与食用醋有什么区别? 英语翻译“水果店”这个词怎么写?能不能用越南语写出来啊 中国南、北方原是农耕文化的典型代表分别是什么 比较氧化钙、氯化钙、氯化钾熔沸点高低为什么? 春秋战国时期为什么社会等级分类减少?个人认为社会大变革期,像是地主阶级产生,等级分类不是应该增多吗 填空:北方原始农耕文化的代表是-----流域 的-----遗址 ,他们居住的是-----式房屋 醋精是勾兑醋的主要成分吗,醋精是什么原料? 英语翻译
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘