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使用页面指示器展示不同位置的天气。
03-布局
一、表单布局/信息输入
上下布局：适合于标签文字较长或者输入部分较长。
左右布局-左对齐：信息输入长短不一，适合于默认填写后的快速检验。
左右布局-右对齐：适合于一项一项的细致填写。
二、信息展示
上下布局：
适合文字较多的场景。
左右布局：
文字较少，整体对齐。
卡片：
分组展示，适合内容较多的场景。分组的方式包括间距+标题、分割线、卡片等形式。
三、选项菜单/工具
在功能选项较多的情况下，要如何放置这些功能，让用户可以快速操作，又不会让整体显得过于凌乱。
隐藏 —— 收纳起来，点击后可以看到。
视觉上会显得比较干净简约，不会干扰用户。一般适合于非主要的操作。
悬浮按钮
悬浮按钮可以作为多个按钮的入口。点击后显示下一步的选择。数量不宜过多。
Action sheet
动作面板/底部卡片，点击后从底部展开。可以看成是隐藏起来的按钮组。
菜单下拉
气泡、上下文菜单、编辑菜单、下拉菜单等形式，从触发的位置展开。
组织 —— 平铺展示，功能位置的分布
操作上只需点击一次，更方便。适合于主要操作、数量不多场景。
CTA按钮
突出主要操作按钮，弱化次要按钮。适合用户目的、意图较为明确的场景。
按钮组
将操作按钮放到一起，适合于按钮数量不多的场景。一般要区分住操作和次要操作，与操作的对象放置在一起。如iOS向左滑动后的删除。
底部栏/工具栏
iOS叫工具栏（Toolbars），安卓叫底部栏（App bars: bottom），主要用来放置与当前页面内容相关的按钮，在需要的时候出现，在不需要的时候隐藏。
tab切换
标签栏或标签页的形式，横向切换不同部分，实现同级内容的切换。
四、分层组织选择
信息结构比较复杂时，需要分层组织。让用户在上下层级之间前进与后退、在同层级之间互相切换的操作方便无碍。即material design中提到的三种导航的方向：横向、前进、反向。
分层、文件夹式
单窗口深入的模式，点击后进入下一层。
级联菜单、左右组织树
通过导航菜单、导航轨道、抽屉菜单等方式，实现同级之间的横向切换。
上下分层组织树
利用手风琴的方式，点击展开/折叠。将下层内容与上层内容之间结合展示。减少跳转。适合结构层级较浅的场景。
五、页面中按钮位置
页面中主要操作按钮的位置。按钮规范系列！从四个方面详解「按钮位置」的设计方法 - 优设网 - UISDC
顶部
顶部按钮的尺寸一般较小，且右上角的位置视觉上更弱、操作上更不便。所以一般适合于需要谨慎操作的场景。
页面底部
页面内容的下方，适合于需要完整浏览的内容、内容较少的页面。如阅读许可协议后点击同意。
常驻底部/吸底按钮
固定在底部，不会因为页面过长而看不到。在多流程页面中，各个页面的按钮位置保持一致，更加清晰。需要注意的是，键盘的弹起会遮挡按钮，可以视情况考虑按钮随键盘联动。适合于一连串流程中的页面、让用户可以随时操作的场景。
、
悬浮按钮（Floating Action Button）
在页面中持续出现，一般是产品的主要功能入口。地图应用中，将大部分按钮悬浮，做成按钮组的形式，也可以实现多按钮的平铺展示。
04-动作/手势
动作和手势使用户触发、输入的方式。在不同的场景下，选用合适的方式，可以减少干扰与误操作，让信息的输入更加方便快捷。
点击
手指点击，移动端主要操作方式。操作对象一般具有明显的可点击性提示，如按钮、卡片、蓝色文字等。与web端类似，分为单击、双击等。
长按
按住一段时间，一般用于触发隐藏的功能。如删除、收藏等。
滑动
利用虚拟空间的无限性，水平方向、垂直方向滑动，如图片轮播的方式，可以显示更多的内容。一般用于同级内容的横向切换、调节音量/亮度等。
捏
两个手指展开或捏合，一般用户照片的放大/缩小。
音量
拖拽
选择对象后拖动到目标区域，一般用于自定义排序、分类、复制等场景。
旋转设备
设备方向的改变，内容会随着变化。如视频应用播放过程中，横屏者自动切换为全屏播放。
摇晃设备
适合于特殊场景而非主流程的交互，如微信的摇一摇。
语音
语音输入的方式，结合语音转文字技术，让输入更加便捷。
扫描
一般用于条码、二维码的识别，快速输入的一种方式。
其它
其它的还有一些自定义手势：如小米的多指下拉截图、华为的指关节截屏等，一般用于特殊场景的快捷操作。需要对用户进行引导教育。
文章结构
组件库
Ant Design Mobile | A Mobile Design Specification
Themes - iOS - Human Interface Guidelines - Apple Developer
概述 - Material Design - Material design 中文文档，指南，翻译
https://www.material.io/design/introduction#updates
Vant - Mobile UI Components built on Vue
参考资源
Calltoidea - Light up your imagination
Mobile Design Patterns - Pttrns
UI Garage - Daily UI Inspiration & Patterns for Web, Mobile & Tablet.
网友评论