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

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

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

(责编/翟方庆)
对数据库中的数据进行处理-Delphi资料 改变壁纸-Delphi资料 改变元件的视窗式样-Delphi资料 给MDI主窗口加背景-Delphi资料 更改StatusBar为黑底绿字-Delphi资料 画布的圆拷贝和直线拷贝-Delphi资料 回车替Tab下移控件-Delphi资料 获取系统颜色-Delphi资料 渐变色窗口背景-Delphi资料 控件深度投影和阴影效果的实现-Delphi资料 控制Delphi的窗口显示位置 控制Form不能放大、缩小、移动、关闭-Delphi资料 控制系统菜单-Delphi资料 利用Delphi实现支持窗体的自定义函数 轻轻松松在DELPHI3.0中实现三态按钮 全部窗体可使用鼠标移动-Delphi资料 让按钮连续工作--兼谈Delphi元件开发 让彩色光标出现在Delphi程序中 让彩色光标出现在程序中-Delphi资料 在Windows桌面的任务栏上有一个凹陷的区域,其中显示着系统时钟以及一些图标,这个长方形的区域便 如何使用Show方法来显示一个模态窗口-Delphi资料 如何旋转字体-Delphi资料 如何隐藏和显示Windows的任务条-Delphi资料 如何在DELPHI界面上运行可执行文件 设计Form时的快捷键-Delphi资料 生成非矩形窗口-Delphi资料 时隐时现的鼠标-Delphi资料 无标题窗口的移动-Delphi资料 应用程序敏感键的实现-Delphi资料 用Delphi 4.0 设 计 新 型 界 面 用Delphi 实 现 自定 义 颜 色 对 话 框 及 其 构 件 "未能启用约束。一行或多行中包含违反非空、唯一或外键约束的值。"是什么错??急急急 XP 能够访问2000,2000不能访问XP,怎么办? jboss如何设定bean自动更新 各位,谁用过动态域名一类的软件,推荐一个好用的.速度要快的.交点钱没关系的。up给分 请较文件的拖放的问题?还望大家指教! 我是一个新手!请你们帮忙! 请问软件工程硕士何时报名? 如何实现仿照FLASH当中的,将字符旋转方向? 是读软件工程硕士还是去当程序员? 在VFP中如果把报表加入到菜单中? WinCE支持I²C总线吗?请高手赐教。 有高手吗???帮忙啊!!! 开发Midas数据库应用程序,哪些软件需要购买使用许可?价格? 写一个Word阅读器 VC6.0编译98DDK中USBVIEW例子,每个C文件末尾都有Fatal Error 是读软件工程硕士还是去当程序员? 在VB里用ADO对像来更新ACCESS数据库时出现"所有记录中均未找到搜索关键字。"错误!如何解决啊.. 怎么看懂别人的程序? 如何修改软件默认的安装路径。 是读软件工程硕士还是去当程序员? WinCE支持I2C总线吗?谁有资料 有没有深层次的c语言书啊?(50分) 请问dbgrid对应的数据表的某个字段为0/1,可以把其cell显示为checkbox? 什么是3D加速卡? 请教NotesFactory问题,那里有资料 developer2000的疑惑 一个小问题,请给我看看! 是读软件工程硕士还是去当程序员? 请问这是什么错误?谁能帮我翻译一下。最好给出解决方法。对者给分!...在线等待! 请问这是什么错误?谁能帮我翻译一下。最好给出解决方法。对者给分!...在线等待! 紧急求助:关于打印的问题 如何用C#在ASP.net中对数据库进行查询? 网络打印问题 【求助】一个小问题,在线待回 DBGrid1如何获得2个表里的数据 帮帮菜鸟呀`/! 如何用C#在ASP.net中对数据库进行查询? 求获取FTP服务器上文件的创建日期的代码 系统已经从一个严重错误中恢复。 怎样使一个页面访问过后立即过期? and 和 or 有什么不同??? 关于oracle 配置的问题 Oracle数据库实例和数据文件的问题求助 调查:各位用Lotus开发的时候,对源码如何做版本控制的?效果如何? 请问各位高手现在业界对工作流与电子工单有没有统一的标准? 动态生成STATIC 文本框,把里面的文字都加上下划线,怎么做? 有什么好的类似于QQ的局域网通讯程序???可支持WIN98及WINXP间的通讯!!! 我快晕了,急救! 低手勿入,高手请进,剧难??? 一个程序调试中产生的问题 -------数据接收和发送模式的问题!(非资深程序员勿入)100分只给答的最好的 蜂蜜是在什么条件下结晶?蜂蜜是在低温的情况下结晶还是时间长的情况下结晶? 植物含胆固醇吗? 在固相萃取清洗过程中,在清洗溶剂流出后进行干燥时不小心将填料抽起来了, 浓缩结晶要在什么条件下进行酸、碱、中并说明理由~ 高血脂吃什么水果好?,植物油不含胆固醇,所含谷固醇或豆固醇和必须脂肪酸可阻止或消除肝细胞的脂肪变性 龙腾PPS是什么意思 请教一下,红外图谱在波长800~860出现一向上的峰,这是什么基团引起的?这是第二张图 哪位有GB/T14525-**** 波纹金属软管通用技术条件 这个标准的最新版本.求分享! 台钓竿什么牌子的比较好!性价比高!在两三百范围左右! 红外谱图如果有两个一样的基团,那么在红外谱图中看得出来吗?比如说2,4-二羟基苯乙酮,那么这两个羟基是出一个峰还是两个峰呢? 航天器在距地面高为h处绕地球做匀速圆周运动,如果地球质量为M半径为R航天器质量为m万有引力常量为G.航...航天器在距地面高为h处绕地球做匀速圆周运动,如果地球质量为M半径为R航天器质 蒸螃蟹要不要去绳子? 盐酸环丙沙星片作用是什么 是什么药 不小心吃了脱氧剂会怎样样?脱氧剂能吃么?食物 螃蟹煮好端出来的红色带一点青色可以吃吗 戊二醛与过氧化氢相比谁的杀菌效果好 脱氧剂(无补充)就是那种黑黑的用它能做哪些实验 氯化亚锡溶液用水稀释为什么会发白 9K培养基+1%葡萄糖灭菌 121度30min 会怎么样 对于新手用台钓竿好还是手竿(溪流竿)好?他们都说台钓竿台钓竿太重不适合垂钓! 氯化亚锡溶液是一个很不稳定的溶液,那10%的溶液大概能放多久? 戊二醛(cidex和excle)是如何杀菌的.请分别告诉下.RT 请分别说明下~ 鲤竿可以钓鲫鱼吗?另外台钓竿和手竿到底有什么区别啊?我想买一根鱼竿,希望能够兼顾钓多种鱼类,如鲤鱼 红鱼 草鱼 鲫鱼 经常野钓!不知道该买那种型号的竿,是不是鲤竿就可以兼顾啊?请高 液压金属软管制作和金属软管与母管连接问题1液压金属软管是否能做出2进一出类似三通的管2 我现在手头设备补气阀有一粗一细两根回油管,在与油箱回油母管用软管连接时一般连接方式是 碳酸的挥发性指什么,硝酸的挥发性指什么,他们各挥发出哪两种气体 关于宇宙飞船的电影讲得好像是飞上火星什么的电影,宇航员中还有一只猴子 在固液吸附法测物质的比表面积实验中,引起试验误差的原因有哪些 请高人帮我分析一下这张红外谱图 看看有什么基团 是镀银锦纶纤维煅烧后做的粉末做的红外 此为红外图谱 怎么区分台钓竿,手竿,机竿? 为什么比表面积越小,吸附能力越大? 红外图中2350,2330左右有两个峰,大概是什么基团的峰 关于固相萃取小柱的问题在固相萃取实验中,SPE小柱是不是应该在所有的操作时都要保持湿润!还是只是洗脱的过程中,保持小柱不流干就可以了? 在饱和的氢氧化钠溶液中通入二氧化碳会有什么现象 170度干燥箱灭菌与121度高压锅灭菌哪个效果好 鱼竿-手竿与台钓竿有何不同 浓缩洗洁精对自来水会污染细菌吗 八年级下册物理测试题小刚发现自来水龙头在漏水,他想:这一昼夜要浪费多少水啊!于是,他准备了量筒等测量工具,等到第一滴水落到量筒里开启秒表计时并数“1”,等他数到“40”时关闭秒 固相萃取小柱 MCX 与 浓缩洗洁精 对水 会污染细菌吗 固相萃取材料是啥 手竿鱼竿品牌?50元左右的手竿鱼竿啥牌子最好【新手】! 磁体在真空中能否吸引?比如一个真空试管,里面放上铁屑 ,外面有一块磁铁 能否被吸引? 速求:固相萃取柱的主要市场有哪些?他的市场怎么样? 螃蟹用高压锅蒸多长时间 最近还有一种叫沐糖素的保健品说能消除人身体细胞膜上葡萄糖转运体的抑制提高葡萄糖转运体的活性不知真假网上宣传还有口服的葡萄糖转运体我有些糊涂了,不知这两家谁在忽悠糖友消费 同温同压下,将NO2,NO,O2按一定体积比充满一容器,倒置于盛有水的水槽,液体充满容器,则各气体体积比为NO2,NO,O2的比是1:1:1或者4:24:19 高压锅蒸螃蟹多长时间 测定不规则固体密度时,若被测物体侵入水中时表面吸附有气泡,则对实验有什么影响 明矾溶液中加少量Ba(OH)2的离子方程式_____________ 主轴:通过两个球面球心的直线叫透镜的_____ 测固体密度实验原理 什么植物中含甾醇最高 螃蟹蒸多久 螃蟹怎么吃 实验室抗压试块抗压试验怎么放置试块压光滑面,放在圆圈正中就可以了吧. 什么鱼竿比较好 通过凸透镜两个球面球心的直线,叫做透镜的( ),简称( ) 花受精后不能发育的结构是什么 robot是什么意思? 人体不能利用植物豆固醇和麦固醇,对么? 只有一个球面的透镜有主光轴吗?不是通过两个球面!球心的直线才是主轴吗?快点 印巴再起武装冲突 造成10名平民受伤英国伦敦征兵日到来 “小兵”穿军装有巴西世界杯一个在建场馆发生火灾中泰高铁合作将造福泰国和本地区人民70余国驻华使馆设台参加国际义卖摩根大通同意支付51亿美元了结欺诈指英国伦敦征兵日到来 “小兵”穿军装有德国高层代表团将赴美 跟进默克尔被窃德国高层代表团将赴美 跟进默克尔被窃流浪女杭州街头诞下龙凤胎续:执意回到各国领导人都钟爱什么手机?杭州立“塔”打“井” “上天入地”要浙江省政协向社会公开征集提案线索 可马云谈\"来往\":我和马化腾在下棋国家卫计委要求严惩温岭医生被刺事件凶伊朗停丰度20%铀浓缩 伊朗政府尚未日本福岛外海强震上修为7.1级 东京海军三大舰队首次在西太平洋实兵对抗前美国国安局长“私聊”遭邻座“直播”美媒体称俄外交官在美招间谍 费用俄方美恶妇险扯断幼儿生殖器用胶粘合 面临“海归”硕士的外卖创业路广东评出“十大美丽海岛”:深圳内伶仃萧敬腾阿妹 春浪迷倒星国歌迷鸡排妹呛蔡依林变装表弟:“到底想干嘛外百老汇舞台上的亚裔孩子外百老汇舞台上的亚裔孩子日本东北地区发生5.2级地震 暂无受日本东北地区发生5.2级地震 暂无受吉林省家庭农场逾2万个外百老汇舞台上的亚裔孩子青海省湿地成为有重要影响力生态调节区司马光墓再修缮 有望告别“水患”瞭望:领导干部要成为驾驭政府和市场关外百老汇舞台上的亚裔孩子司马光墓再修缮 有望告别“水患”青海省湿地成为有重要影响力生态调节区外百老汇舞台上的亚裔孩子唐家璇出席中日友好交流大会 称两国对男子驾车到市场买菜 遭人隔窗开枪射中苏贞昌脸书po文自爆:被“误认”为苏傅崑萁有案在身 国民党花莲县长人选难
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘