移动端设计——第一节:信息架构

小编话:移动设备的种类影响着我们设计过程的方方面面,今天让我们跟着@网秦的同学一起来了解移动端设计的信息构架。很多刚入行的小伙伴们可能有些都不知道吧,那就跟着今天的文章涨姿势吧!对于设计过程可是是非常重要的哦,希望对大家有帮助!

写在前面,虽然这是一篇老文章,但是对刚入行的同学来说仍然非常重要,所以今天再次拿出来,进行了重新翻译,希望对大家有帮助!

移动设备的种类影响着我们设计过程的方方面面。在本篇文章中(移动端设计系列文章第一节),Elaine McVicar将带领大家探索几个当下最火爆的移动端网站及应用架构。

在1993年的某一天,我老爹带回家了一台巨大的砖头手机。记得当时我们都被这种高科技惊呆了,但谁也没想到,这种高科技会在日后给我们的生活带来如此巨大的影响。过了几年,我的很多朋友都开始购买手机,不过那时的我还是觉得这不过是个噱头而已。

而今天,世界上已经有了60亿手机用户,也就是说,按一人一一部算,全世界人口的87%都有了手机。相比之下,全球只有不到30亿人使用台式机。

移动设备绝不是昙花一现,但其兴起也给设计带来了许许多多的新制约(和机会)。下面我们来看一下应当如何相应地革新我们的设计方式。

移动设备的不同之处是什么?

关于移动端设计,我们首先要了解的是除了尺寸其还有哪些不同于传统之处。移动设备的物理特性和规格产生出了不同的设计可容性及要求。移动设备更加轻便、易于携带,从而使用起来也就更方便。由此造成的对移动设备的频繁使用,会让我们对它们产生一种独特的情感联系。

物理特性与规格

大部分移动设备都采用触摸屏,也就是让用户在简单的界面元素之外依靠手势来与设备进行交互。考虑到移动设备的尺寸较小,我们有时候就会希望其内容结构更加简单小巧。除此之外,移动设备的网络带宽和连接也存在限制,因此就要求设计针对加载时间进行适当的优化,也就是说要尽量减少数据需求。

何时何地如何做

大家一般都会把移动设备带在身边,所以对其使用也就相对来说比较频繁。比方说在公交地铁上、在路上或者看电视时,我们都可以随时使用。换句话说,我们一般都是在干着其他事的时候“顺便”使用。这样一来,移动设备的使用就会受到视觉条件的限制,或者存在着诸多分散人注意力的因素。

我们的行为与感觉

最后一点,在使用移动设备时我们有着各自不同的态度、行为和主次顺序。用户体验设计公司Foolproof在其Going Mobile 2012调研中发现,移动设备给我们带来了一种全新的自由和控制感。进而,有的用户就会对自己的移动设备产生出实实在在的情感。Foolproof还发现,有63%的人在发现自己的智能手机没放在能轻松拿到的地方时会觉得不爽。他们将移动设备看作是“有生命的”…是自己身体和人格的一个延伸。

移动设备已经从本质上改变了用户的心理预期,因此,我们作为设计师就务求遵循以用户为核心的流程来打造各项解决方案。这里唯一的问题就是我们传统的最佳实践可能就不那么好用了。

移动对设计师的影响

移动设备的独特性直接影响着以用户为中心设计流程的各个方面:从用户调查到最终开发再到测试等等。而流程中受影响最大的部分之一就是我们的交付方式以及信息架构。

移动端呈现方式

有别于传统网站,移动端的呈现方式比较流行的有四种。使用浏览器查看内容的移动用户最爱的是专门针对移动设备的网站(针对移动设备特别优化)或响应式网站(可针对移动设备调整显示方向或重新布局)。而通过安装应用浏览内容的用户则一般会选择本机应用或混合型应用。本机应用通常功能完备:应用的所有界面都经过预先的规划。混合型应用则比较灵活一些,其可通过web加载内容(因为需要通过浏览器查看),但最后通过类似应用的界面(或Chrome)进行呈现。

上面每种呈现方式都有着自己的优劣之处。所以大家需要根据项目的设计背景相应进行选择。(下表中星数越多表示越好)

移动端信息架构

移动设备也有自己的一套信息架构模式。虽然响应式站点的结构可以采用“标准”模式,但是,以本机应用为例,其通常会采用基于标签的导航式结构。再次强调,移动站点或应用的架构并没有一定之规。比如下面这些比较热门的模式:分层结构、轴辐式结构、套娃结构、标签视图、便当盒结构及筛选视图结构:

分层结构

分层结构模式是一种比较标准的网站结构,其拥有索引页及一系列子页。对于响应式网站,可能这是唯一可用的模式了,不过你也可以自己构思其他模式来针对移动端量身定制用户体验。

Luke Wroblewski的“移动为先”方法可以帮助我们将注意力先集中到关键的内容上,例如有助于打造优秀用户体验的功能及用户旅程等。

适合于

组织需要遵循台式机网站结构的复杂型网站结构。

要注意

导航。多层面导航结构容易给使用小屏幕的用户带来问题。

轴辐式结构

轴辐式结构可让用户通过中央索引向外导航。这是iPhone默认采用的模式。用户不能在各个“辐条”之间进行导航切换,只能先回到轴心再出去。这个方式在历史上一直用于工作流程存在限制(通常是表单或购买流程等技术限制)的台式机情况,但其现在也开始逐渐流行到了移动端,因为在移动端用户往往需要专注于单项任务,另外设备的形状因素也造成全局导航使用比较不便。

适合于

每个功能都有自己内部导航和用途的多功能工具。

要注意

需要执行多任务的用户

套娃结构

套娃结构模式能够以相对线性的方式引领用户查看细节内容。当用户身处环境不便时,这种导航方式相对比较快捷简单。其简单的前后推进模式还能让用户清楚明确地知道自己目前在内容结构的什么位置。

适合于

主题单一或彼此相近的应用或网站。也可用作其他模式的子模式,例如标准分层结构或轴辐式结构模式。

要注意

用户无法快速在不同板块直接切换,所以要考虑其适用性,不能成为对内容探索的障碍。

标签视图

这是普通应用用户比较熟悉的模式之一。其实际上就是通过工具栏菜单把一系列板块绑在一起。这种方式可以方便用户在首次打开时快速浏览并理解应用的全部功能。

适合于

主题类似的工具类应用。多任务。

要注意

不要做的太复杂。这一模式最适合于简单的内容结构。

便当盒/仪表盘

便当盒或者叫仪表板模式可以通过使用组件形式展示相关工具或内容的不同部分将详细具体的内容直接呈现到索引屏幕上。这一模式比较复杂,因此更适合于平板电脑。其可以让用户一眼发现关键信息,因此功效强大。但是这种模式同时也严重依赖于设计界面的优劣以及信息呈现是否明确。

适合于

主题类似的多功能工具和基于内容的平板电脑应用。

要注意

平板电脑的屏幕较大,因此能够留出更大的空间发挥这一模式。但设计时尤其要注意理解用户与各部分内容之间进行交互的方式,以便确保应用的简便和乐趣性。

筛选视图

最后,筛选视图模式可以让用户通过选择筛选器选项形成分类视图以便在系列数据中进行导航。筛选以及分类搜索方法的使用是方便用户以自己喜爱的方式探索内容的好办法。

适合于

内容量大的应用或网站,例如文章、图片和视频类网站。可以用做杂志类应用或网站的模板,或者用作其他导航模式的子模式。

要注意

移动端。考虑到复杂性问题,筛选器和分类搜索在比较小的屏幕上显示时可能会有困难。

后续

距离我第一次看见搬砖机的时间已经过去将近20年了(我买自己的第一部手机也是12年前的事了)。现在,我,我老爹和几乎我认识的人都用上了智能手机,我们几乎天天或者说随时都在使用它们。科技的日新月异要求我们也要不断适应,不断随之改变。

开发出适合于手机和平板电脑的信息架构只是打造优秀移动用户体验的第一步。在本系列的第2节-设计注意事项中,我将说明移动与传统之间的种种差别对最终设计解决方案的出炉会存在哪些影响。

译文地址:网秦

译文作者:蒋灿

uxbooth

(0)

相关推荐

  • 「译文」信息架构设计大杀器-卡片分类法的实施细则

    主题:卡片分类法是一种用户体验设计中的调研方法,它可以帮助我们分析用户,构建符合用户预期的信息架构. 一个网站是否好用,判断标准之一就是信息组织的是否有条理,用户能否方便地找到他们需要的东西.但一个非 ...

  • 解读信息架构设计

    什么是信息架构? 简单来讲,信息架构指的是app或网站当中全部信息的组成结构.经过认真梳理的信息架构可以使产品更加易于理解和导航.这有些类似于作家在动笔之前首先拟出故事的大纲,或是建筑师需要以精准的蓝 ...

  • 设计规范 | Web端设计组件篇:级联、数字输入、单复选框和开关

    本文主要讲解的是级联组件.数字输入.单复选框和开关,一起来文中 cascade级联组件 定义:存在父子层级关系的选择枚举组件. 使用场景: 用于含有层级关系的枚举组件,例如:省市.组织架构.不同导航层 ...

  • VisualStudio2015怎么设计一个注册信息的页面?

    VisualStudio2015中农想要设计一个注册信息页面,该怎么设计呢?下面我们就来看看html网页的选项可以填写在表格里的制作方法,请看下文详细介绍. 1.打开Visual Studio,新建一 ...

  • 财富!免费移动端设计资源

    要成为一名优秀的设计师,我们必须要清楚在创作过程中去哪找资源.想要提高技术水平又去哪找资源.没错啦!o(≧v≦)o~~今天小编就给大家带来了关于介绍移动端设计资源.其中,将分培训.灵感和工作所需资源三 ...

  • 设计规范 | Web端设计组件篇-其他类

    根据组件的用途,可以分为六大类:Feedback 反馈.form 表单.basic 基础.data 数据 .navigation 导航.other 其他. Tag标签 定义:用于标记和选择的组件 使用 ...

  • 设计规范 | Web端设计组件篇-数据类

    根据组件的用途,可以分为六大类:Feedback 反馈.form 表单.basic 基础.data 数据 .navigation 导航.other 其他. 用户在使用网站过程中,数值可直观的提醒用户当 ...

  • Word中批量删除节信息的方法

    Word中批量删除节信息的方法 这时要想编辑页码,只有两个思路,要么一节一节的编辑(因为页码的编辑只在当前节内生效);要么就批量删除掉所有的节,再重新编辑.如果这篇文档只有十几页,我可能就会新建一个空 ...

  • 如何在电脑端QQ聊天发信息时显示头像和聊天气泡?

    相信很多小伙伴都有在使用电脑上的QQ,在聊天发信息时如何才能让头像和聊天气泡显示出来呢?方法很简单,下面小编就来为大家介绍.具体如下:1.  首先,打开电脑上的QQ并登录.2. 登录成功后,任意打开一 ...