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

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

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

(责编/翟方庆)
“BlackBerry 10移动应用开发大赛”应用推荐 Java程序优化的一些最佳实践 Heka:Go编写,来自Mozilla,高效、灵活的插件式数据挖掘工具 Anchora鲁为民:PaaS是我的兴趣 次世代IDE Light Table 0.4发布 带来众多更新和改进 别再设计易碎的Web API! LinkedIn:55人支持2700位员工,2亿用户的大数据分析 Brian Krzanich是谁?这位新CEO预示英特尔未来怎样? HTML5开发者心声:浏览器兼容性成最大问题 传微软6月下旬将发布第二代Surface 7到9英寸全有 Turbulenz:HTML5 2D和3D游戏引擎开源 携程开放平台总经理夏天:内容+高转化率成就开发者 直接拿来用!最火的Android开源项目(一) Qunar 谌振宇:旅游行业的移动化如何布局? 大数据分析“铁三角”: Teradata数据仓库、Teradata Aster与Hadoop Teradata专业服务:打造行业企业的“数据科学家” Xamarin Evolve 2013:竭尽全力让C#服务iOS与Android 史上最全!57个Web框架4轮横向对比 回顾银行数据的可用性和一致性历史 Qubole:托管在AWS平台上的Hive服务 自由操作系统 Debian 正式发布7.0版本 4月份浏览器份额:IE 8仍居第一,IE 10翻番 亚马逊正式在华推Android应用商店 收入3:7分账 不要男孩,只允许女生参加的四所编程学校 下一波App机会在哪里? JS1K 2013优胜作品公布 3D蜜蜂仅获亚军 专访:前新浪网架构师徐佳转行卖水果背后的故事 FBI密码挑战,你能解开吗? 从0到1只需一天:Twitter后PC时代物联网“敏捷”开发之路的探索 机械生物已经面世 只少个“大脑”而已 百度正式宣布3.7亿美元收购PPS视频业务 DBGrid改变行的颜色 下载英文Windows的地址 我要在一個按鈕點擊后,開啟另外一個頁面,並且這個頁面自動處於打印預覽狀態,怎麼寫? 正在上升中,公司给自己加薪了,自己却突然心灰意冷. 我想问什么是temporary object?请高手指教 那位大哥在HP-UX下配置过PHP和ORACLE? 宝丽金120首金曲 Dialogs(wdDialogFileOpen)提示ActiveX不能创建对象? 那位朋友知道如何在网络上截取一个信息(数据包) 大家看过dvdrip的片子吗?有一个问题请问 (winform)我想编写一个简单的浏览器,问题1 在LINUX下如何安装软件啊? 苏州的朋友可以进来看看吗? 关于游标类型的问题 如何比较两幅近似图像并得出偏移的距离? 怎样处理鼠标拖动事件。 绘制图形时的自动滚屏问题 请教怎么去掉字符串后面带的空格? 请教关于双机通讯的问题,谢谢 播放问题 如何使用jsp显示数据库中的数据? 请问什么叫模态窗口啊? Win32标准dll,VB下调用问题 挑战:对手机短信文字自动解析? 推荐一个linux下的杀毒软件. 关于oicq? 二手笔记本多小钱? 关于在iis中的resin的配值问题,急,求帮助!!!! PHP中的类到底是怎么回事 怎么知道INI文件的某一个小节下有几个关键字? 不知道发在这里对不对。。。有关DVD 菜鸟级:关于两台都接了宽带的机子彼此可见的问题。请高手指教!谢谢! 我最近发现,我所喜欢的人,她不喜欢我了? 关于游标类型问题? 急!急!急!COMBOBOX问题!(在线等候!)! the problem of CButtonST 如何用java 做一个游戏? 只要有道理就有分! 中程要注册的吗? 大家帮我看看我得曲线重画代码错在那里阿????? 今天我生日,郁闷散分 如果一个项目延期了,你作为一个主管,应该怎么办? sorry,我想问的是怎么去掉字符串后面带的回车符? 请问下怎么编译通过CJLibrary? 是不是SQL server不支持table1.filter语句? vbscript里怎么设置弹出窗口的大小? 全套MCSE2000 BIBLE 是TESTKING的,要的进 怎么用VB编写DLL,请告知如何编写(举例)。 网络安全引发Checkpoint认证培训热 编程注册表--有高分相赠!(请教高手,多谢!) winfax 如何进入win2000
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘