移动端信息架构、布局方式、动作/手势整理

作者: dddt01 | 来源:发表于2021-08-25 17:15 被阅读0次

01-信息架构/内容组织形式

信息架构即多个信息如何分类组织，彼此之间如何关联与跳转，一般的模式包括分层与平铺。

分层在于如何返回顶层、下一层之间能否互相跳转、如何让人不迷失在路径之中。

平铺包括纵向分布、横向分布、折叠展示。横向分布比纵向之间的关系更加独立，分块更加明显。

—— 分层 ——

跳板式

launchpad，各菜单之间相互独立，类似于工作台的门户/手机系统的桌面。

how：不同等级的内容可以使用不同的尺寸、形式做出区分。

金字塔式

what：每个页面都可以从主页进入，然后回到主页。各个页面之间可以通过翻页来横向跳转。

when：类似文件夹查看的模式，经常和单窗口深入的模式一起使用，路径再深也能即时回到主页。

why：组织关系比较明确，同时让用户在较深的路径中可以更快的回到起点。

how：把前进、后退的导航放置在固定位置，减少鼠标移动的距离。

与跳板式一样，都是有一个主页来承载所有的入口。跳板式中，像小程序的设计，点击右上角的快捷操作，也可以马上返回主页/关闭当前应用。

与跳板式的差异在于，各部分之间有一定的联系，并非完全独立。

仪表式

跳板式的一种细分，不仅展示模块名称，还展示关键的指标数字，点击后可下钻查看详细的分析。先看全局整体状况，再看每一项细分指标的分析。常见的如支付宝的账单。

列表菜单式/拓展列表式

分别是独立功能的入口，如系统的设置界面。通过将信息收纳起来，点击后查看更多的方式，让信息分层组织，页面更加简洁。如通话记录将同一号码的多个记录合并到一起。

与跳板式相比，更多依靠文字描述来区分各部分。同时可以将在当前页的操作与进入下层的操作结合到一个页面。

超级菜单式

将菜单折叠，点击后显示更多。将菜单分层，一开始只显示主菜单，可以将不重要的次级功能隐藏，让页面更加简洁。

—— 平铺 ——

选项卡式

顶部tab或者底部tab，在不同的菜单视图中切换。类似于web端邮箱的左右分屏，即可以看到列表，又可以看到单条内容下的详情。

how：tab的数量不宜过多，上限为5个。

底部的tab更适合手指的操作，顶部tab一般层级比底部tab更低。

对于已选择的tab，应该在视觉上进行强调提示，让用户知道自己选择了哪一项。

轮盘式

轮播图的形式，左右滑动常看上一张/下一张。常见于电商APP的商品详情查看、安装升级后的引导页、金刚区的入口布局，不适合太多的分屏数量。

陈列馆式

以缩略图的形式显示内容项，让人快速了解每一项是啥意思，一般在相册中使用。

how：可以对内容进行分组，方便用户快速定位。

手风琴式/Accordion/扩展面板/树状结构/分组折叠

可以折叠/展开的内容区域。一般是针对一组内容进行折叠/展开，可以多级嵌套，形成树形结构的内容组织。

规则#

对复杂区域进行分组和隐藏。

通常，一次只允许单个内容区域展开；特殊情况，多个内容区域可以同时展开。

02-导航模式（Navigation）

导航模式分为：分层导航、扁平导航、内容驱动或者体验驱动导航

分层导航（Hierarchical Navigation）

每屏做一个选择，直到到达目的地。要去往另一个分支，你需要回退或者重新开始来做出不同的选择。设置和邮件使用这种导航方式。

类似《界面设计模式》中提到的单窗口深入，在一个单一的窗口中显示应用程序的每个页面，层层深入。每次都用新的内容来替代当前的内容。层级应该尽可能的简单，避免过于琐碎冗长，让用户失去耐心。

扁平导航（Flat Navigation）

在不同的内容目录之间切换。音乐和 App Store使用这种导航方式。

内容驱动或者体验驱动导航（Content-Driven or Experience-Driven Navigation）

在内容之间自由穿梭，或者内容本身定义了导航。游戏、阅读、和其它沉浸式的应用一般采用这种导航方式。

一些APP结合了多种导航方式。例如，一个使用扁平导航的APP可能在每一个目录中使用分层导航。

Material Design Navigation

导航的方向分为：横向导航、前进导航、反向导航。

横向导航即同一层次的内容之间水平移动。一般使用导航抽屉、标签栏/底部导航栏、标签页、分段控件、页面指示器等。

前进导航即触发进入下一层或者逻辑顺序的下一步，如查看详情、搜索等等。印版使用按钮、卡片、列表、链接等作为触发的入口。

反向导航即返回到上一层次或者时间顺序上的上一屏。一般使用系统提供的返回按钮实现。

原则

总是提供清晰的路径。应该总是要让人们知道他们在你APP的哪个位置并且如何到达下一个目的地。不管使用那种导航方式，最重要的是贯穿内容的路径是符合逻辑的、可预测的且容易理解的。一般而言，给人们到达每一屏的唯一路径。如果他们需要在不同的上下文中查看某一屏内容，考虑使用动作面板、警告、气泡式弹窗、或者模态视图。了解更多， see Action Sheets, Alerts, Popovers, and Modality。

设计一个可以快速轻松访问内容的信息架构。以需要最少数量点击、轻扫和屏幕数量的方式来组织你的信息架构。

使用触摸手势来创造流畅感。让用户轻松的在界面间跳转，感受不到阻力。例如，你可以让人们从屏幕的一侧轻扫来返回上一屏。

使用标准的导航组件。尽可能的，使用标准的导航控件例如页面控制器、标签栏、分段控件、表单视图、集合视图和分屏视图。用户已经熟悉了这些控件，他们会很自然的知道玩转你的APP。

使用导航栏来访问分层内容。导航栏的标题可以展示在层级中当前的位置，返回按钮可以很容易的退回到上一个位置。具体指导, see Navigation Bars。

使用标签栏来展示内容或功能的同级目录。无论当前处于哪个位置，标签栏都可以让人们在目录之间快速切换。具体指导，see Tab Bars。

当你有多页同样类型的内容时，使用页面指示器。页面指示器清晰的表明了可用页面的数量以及当前在哪一页。天气APP使用页面指示器展示不同位置的天气。