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

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

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 App可用性的七个开发错误 保益互动创始人曹军:听到的世界更精彩,盲人应用背后的故事 Gumi公司CEO国光宏尚: 大公开!日本手游市场攻克方法! Great Hill Partners高管Chuck Goldman &amp; 南京创毅CEO William Wei:超越黑莓——下一代企业移动 高通业务拓展副总裁沈劲:智能手机2.0——以体验为中心 百度副总裁李明远:百度轻应用——长尾APP的最佳选择 中国工程院院士李德毅:大数据时代的认知计算 创新工场联合创始人汪华:2013年中国移动互联网进入深入区 百度副总裁李明远:解答关于百度轻应用的八大疑问 谷歌推出PNaCl,帮助开发者在任何硬件和网站上运行代码 阿里云:双十一350亿交易额的幕后英雄 索尼移动智能设备全球技术总监Goran Andersson:索尼移动可穿戴设备解决方案 腾讯社交网络事业部副总裁陈磊:腾讯移动开发者服务体系 基调网络副总裁陈靖华:全面掌握移动应用性能 蓝港在线创始人王峰:手游新时代下的机会与挑战! Couchbase CEO Bob Wiederhold:数据库云端同步,移动应用开发的未来 三星电子大中华区副总裁黄伽卫:构建移动互联生态,解读内容服务新方向 MDCC 2013移动开发者大会:新浪潮,新硬件! 网站建设,如何平衡产品特性和利益需求? 开发者是如何提升技能水平的 Databricks核心成员专访:大数据时代“智能手机”Spark 数据密集、快速启动、核心应用,IBM存储重兵布阵 企业移动应用与BYOD:移动互联大势所趋 “首届智能硬件峰会”上午会议亮点汇总 代价究竟高不高,苹果为什么要在Android专利诉讼上花费2亿美元? 产品与设计专题论坛(下):App之美 产品与设计专题论坛(上):扁平还是拟物?产品说了算! 首届移动娱乐游戏峰会:中外手游的交锋与对抗(下) 研发人员超过500,基金会金牌会员,华为豪赌OpenStack New way of thinking:索尼SmartWatch 2应用开发马拉松大赛圆满结束 离了你地球照样转,谷歌地图并非苹果的必需品 vj中如何连接sqlserver???(直连接不是jdbc-odbc) 请问四川的怎么查软考成绩啊 如何安装40G的硬盘?(急!!!!!!) 公告:XMLBBS项目暂停一个月 关于weblgic下jsp编程的问题!!! about Release?? 在非控制台中,怎么取得运行者给的参数。 高难问题:Delphi 程序如何向CBuilder编写的DLL传递窗体指针,在DLL中如何用 关于实现头像跳动的问题!!!???? 请问我们平时用的电话机,传输的是数据信号还是模拟信号? outlook express有毒? 哪位大下指点一下:html 带参数访问 servlet 小小调查,向有识之士请教~~~ 谢谢~~~~ 有没有一种线程安全的方法来取得一张表的元组个数? listview排序的,过来看看。。 有一获国家专利的中文输入法软件急于开发 帮忙解释一下implementation什么意思,有什么作用. A Question about ActiveForm and TabStop. 用于从INI文件中读字串的函数是什么?请示高手! 清問:Datareport實現不了的功能如何實現?清大蝦指教,謝謝! 检测下拉列表中批配项,有则选中 为什么DBGRID显示一片空白,记录应该取到了。代码如下: 谁有免费出国代理,急用。如果能有,马上给分 关于学习.net与j2ee的抉择问题,欢迎各位大侠热烈讨论!!! 求PHP代码,功能是:判断字符是否全部为汉字? 又是MSFlexgrid的问题!!!请大家帮忙~! ActiveX访问数据库的问题? REDHAT LINUX 7.2下如何建立多个用户?多谢指点! 关于网线!高分!!!!! 关于生成文件的方法? 课程表开发 请问各位前辈,是否只有新增加的字段才有可能成为计算字段?谢谢! 俺要写一个简单的文本的报文,string类型的 关于生成文件的方法?..... 有谁能告诉一下我CVS和SSF是什么?,具体是指些什么?? WIN2K 的问题:1、怎么允许本地普通用户(user)关机;2、怎么能让本地普通用户开机后,客户机连接到SQL SERVER?3、为什么我的SQL量SERVER2K需要停止然后再启动客户才能用? 如何用VB把存储在ORACLE库中的图片字段取出成.JPG格式的图片文件????急在外出差呀多谢了~~~~~ 如何退出函数?exit function??? 测试2000的TCP/IP是否通,用什么命令 求助开发课程表提示 (*****向斑竹你提个小见意,大家最好都来看看,这个想法好不好!****) 为什么我做的增加功能有两个必须要按两次“添加”按钮才能新增一条记录啊? 很急,请教高手,如何把一个ip格式的字符串转换成ip类型,不是用getbyname(),而是像int和string转换一样的概念 请问如何让基于对话框的工具条一开始就浮在上面 来者有分,关于ado的 毛子青论文<<动态规划的优化>>,一个最长子序列的算法,请高手看过来(给出c实现代码的送20分!) 在鼠标单击时间中,可以使用什么函数取得鼠标点击处的坐标值 怎样在单击左键时弹出PopupMenu? 连续20多天加班,近来明显感到体力透支,做个调查!!!(有分) ASP调用VB编写的ActiveX DLL的问题 请教一sql语句 如果教室里的温度是零上16°C而教室外的温度是零下16°C,那么室内外相差( )℃ 高中长期提问用户,标准状况下32G某气体的分子数目与22co2的分子数目相同,则气体的摩尔质量 钢的密度是多少?怎么计算他的重量?直径40mm,L200,密度是不是0.787是不是这样计算:2*2(半径)*3.14(π)*20(长)*0.787(密度)/1000(倍),或错在哪里?我既然把这个计算方法忘记了 请问65锰弹 簧钢板和65锰钢板它们之间区别是什么 锰粉和电解锰的区别及用途 现有32g某气体,该气体分子由三个原子构成,它的摩尔质量为64g/moL.若阿伏加德罗常数NA≈6.02x10的23次方moL的-1次方表示,则该气体的物理的量为 moL 65锰钢板.凑字65锰钢板 具体都可以做什么用?有知道的吗 希望可以详细点 448mL某气体在标准状况下的质量为1.28g,该气体的摩尔质量约为多少? Q235B、Q345B钢板的最新价格是多少? 50锰钢板 50锰钢用途、价格? 标准状况下,112ml某气体的质量是0.14g,该气体可能是 (N2 WHY?) 标准状况下,5.6L某气体的质量为11g,其摩尔质量是_____ SA516GR70钢板的锰含量是多少?价格现在怎么样? 标准状况下,0.112某气体的质量为0.14g,求某气体的摩尔质量及相对分子质量(写出过程) 标准状况下,8.5g某气体占有体积为5.6L,则此气体摩尔质量和相对分子质量是多少? 在标准状况下,1mol锌与足量的稀硫酸完全反应,可生成氢气多少升?生成硫酸锌物质的量为多少摩尔?若反应后体积为0.5L,求硫酸锌溶液的物质的量浓度.Zn 65.4 Cl35.5 玻璃管的和筷子一样长的那种温度计可以当室内温度计测量室温用吗 在标准状况吓,5.6L某气体的质量为10克.则该气体的摩尔质量为?给我说说, 在实验室里使用稀盐酸跟锌起反应,在标准状况时生成3.36L氢气,计算需要多少摩尔的Hcl和Zn 小明将冰块放入易拉罐中加盐.用筷子搅拌大约半分钟,用温度计测量罐中冰和盐水混合物的温度,可以看到混合物的温度低于0℃.这时他观察易拉罐下部和底部有白霜.关于该现象说法正确的是( 低合金高强度结构钢钢板 460C 10*2000*8000是什么意思主要是10*2000*8000 重晶石有没有硅成份,重晶石的价值比石英石高吗 小明将冰块放入易拉罐中加盐.用筷子搅拌大约半分钟,用温度计测量罐中冰和盐水混合物的温度,可以看到混合物的温度低于0℃.这时他观察易拉罐下部和底部有白霜.关于该现象说法正确的是( 低合金高强度结构钢的牌号主要有 哪三个部分组成 硫酸钡及白度都90以上,密度4.4的重晶石现在市场价是多少啊? 将冰块放于易拉罐中并加入适量的盐.用筷子搅拌要用手拿着吗可以放在桌子上吗?快. 请问低合金高强度结构钢Q345能与碳素结构钢Q235焊接吗?焊接以后会漏水, 重晶石,重晶石粉在防辐射中的运用重晶石砂浆和重晶石混凝土,用 以代替金属铅板屏蔽核反应堆和建造科研、医院防X射线的建筑物. 标准状况下,112mL某气体的质量为0.14g,则其摩尔质量为?相对分子质量为? 为什么说“无论外界气温如何,冰水混合物的温度始终是0℃”?请不要复制哦,给我很详细明了的答案好吗~外界气温升高冰水混合物不吸热吗?外界气温降低冰水混合物为什么不会结冰呢?谢谢 重晶石选矿设备哪个厂的好?重晶石选矿设备的型号有哪些?重晶石选矿设备的市场价是多少? 16锰钢板 6mm厚的 价格 在标准状况下 ,体积为8.96L的CO和CO2的混和气体共14.4g,混合气体中碳原子的个数是 请问谁知道锰过量对人体有什么危害? 35#钢板可以用什么材质代替,Q235、Q345、16Mn? 已知有4.4g二氧化碳,有—— 个摩尔原子 有——个碳原子 锰粉和铝粉的储存和对人体有什么危害请问各位专家,锰粉和铝粉的储存用什么来包装能有效的降低氧化程度,尽可能的保存时间长点,另外请问锰粉和铝粉对人体有什么危害,在粉尘不厉害的情 45#钢板和Q345钢板有什么区别 14.4g的co与co2的混合气体在标状下体积为8.96L,为什么平均摩尔质量为36g/mol,怎么算得 锰对人体有害吗 请问,用保温杯装冰块是否会损坏保温杯? 16Mn可以用什么材料替代 请问锰超标对身体有什么害处? 保温杯 冰块 温度因为要从江西带一种药到浙江,把药放在保温杯里再装满冰块`我想问,冰块在保温杯里是零下多少度? 16Mn材质,以下几种符号分别代表什么意思? 现在温度都零下了 怎么我电脑刚开机就65度 过5分左右就15度左右了?用鲁大师检测的今年十一配的机器 CPU 速龙3核 440 主板微星880GM-E41 说的是CPU温度刚开机过高 5分钟后就15度左右了 保温杯装冰水会影响保温效果吗 为什么在标准状况下,1摩尔的任何气体的体积相同 氨氮锰对身体有什么危害? 将冰箱中刚取出的温度为-8'C的小冰块放入盛有冰水混合物的保温杯中,过一会看到的现象是A小冰块补熔化,保温杯中冰水混合物的水,冰数量不变B.小冰块补熔化,保温杯中的冰水混合物有部分 1摩尔气体的体积为22.4L时、该气体一定处于标准状况吗?要有几句的理由 标准状况下,用1体积的水吸收_____体积的氨气后可以制得浓度为10.0mol每升、密度为0.920g每摩尔的氨水急 保温杯内冰水混合物的温度是否处处为0度? 同温同压下相同体积的某气体与H2的质量之比为22,则该气体的摩尔质量为 判断对错:零下10°C比零下5°C的温度高是对是错? 0.04mol某气体在标准状况下的质量为1.28g则该气体的摩尔质量为 A 64g B 32g C 64g/mol D 32g/mol 在同温同压的情况下,知道CO2,H2,CO三种气体的混合气体的摩尔质量为28,怎么求三种气体的体积比 零下5℃比零下4℃的温度()?A、一样B高C低 已知1.505×10²³个A分子的质量为8g,则A的摩尔质量是?A.8g B.32g C.32g/mol D.64g/mol -10摄氏度的冰块放在0摄氏度的水中,冰块会融化吗?-10摄氏度的冰块放在0摄氏度的水中,冰块会融?下列操作不会使汽水中已经溶解的二氧化碳逃逸出来的是 A.打开汽水瓶盖 B.搅拌汽水 C.加热汽
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn