移动应用UI设计知识分享 - 网站源码_资源分享

终端产品应用领域UI结构设计

科学知识撷取

移动应用UI设计知识分享

撷取是一类积极的人生态度~~~

远方远航靠支索帆，天地万物生长靠太阳。畅享终端产品应用领域UI结构设计当然烦透了导航控制系统结构设计。话虽如此这股“原野”，今天给大家撷取一则终端产品应用领域UI中的导航控制系统结构设计的内容。

导航控制系统设计

现阶段Android网络平台的很多应用领域和iOS网络平台结构设计得几乎那样。可能听众会疑惑，Android控制系统有他们的结构导则，为什么会和iOS控制系统那样。现阶段终端产品互联网的开发节拍十分快，通常一到一周三个版插值。如果结构设计和维护三套UI，成本是十分高的，通常同三个商品在三个终端产品博戈达开发，结构设计资源短缺，倘若三个网络平台结构设计不并行，会使项目进展较慢。因此从项目组的工作效率来看，大多公司优先选择了结构设计一套iOS版的UI，再网络连接到Android网络平台的策略。采用者不是结构雕塑家，他们不能觉得“回到”按键暗淡。采用者虽则是否能很简洁且无线网络地采用该应用领域程序。因此绝大多数采用者是能够接受移殖自iOS控制系统的UI的。倘若专门结构设计针对Android网络平台的版，拿掉“回到”按键，似乎有点小题大做。iOS控制系统和Android控制系统的原生植物导航控制系统都有各自的优劣。在前述应用领域结构设计中，结构雕塑家也无须严格遵守相应的导航控制系统规则。根据应用领域的前述需要，优先选择适宜他们的导航控制系统布局。下面介绍一些常见的导航控制系统产业布局。

一、细长导航控制系统

在细长式信息结构的App中，所有的主要类型都能从主页面进入，采用者能直接从三个类型跳出另三个类型。

1. 1 条码导航控制系统

大多数App会优先选择工具栏式的导航控制系统，也叫条码导航控制系统，方便采用者在不同巨集里频密转换，如图8-1所示。原生植物Android控制系统是不能采用这类导航控制系统形式的，因为沿用了PC端页面导航控制系统模式，因此采用者很容易上手。QQ曾经试著在Android网络平台采用非条码式导航，但经过多个版更替，最终还是优先选择了条码式导航控制系统，这也是一类向大多数采用者生活习惯让步的结果。总体来说，只有紧随采用者的采用生活习惯和德国大众审美观非主流，才能推动应用领域商品不断升级换代，更加适宜采用者。

移动应用UI设计知识分享

图1-1 条码导航控制系统结构

1. 优点

（1）采用者清楚当前所在的入口位置。

（2）采用者在各入口间频密跳转且不能迷失方向。

（3）直接展现最重要入口的内容信息。

2. 缺点

（1）会占用一定高度的显示面积。

（2）功能入口过多时，该模式显得笨重且不实用。

（3）不利于大屏幕手机进行单手转换操作。

举个栗子

QQ、德国大众点评和App Store采用的是条码导航控制系统，如图1-2所示。

移动应用UI设计知识分享

图1-2 条码导航控制系统案例

1. 2 舵式导航控制系统

舵式导航控制系统是条码卡式导航控制系统的一类变体，如图1-3所示。中间的条码作为重要且操作频密的入口，通常都用图形或颜色凸显出来。

移动应用UI设计知识分享

图1-3 舵式导航控制系统结构图

1. 优点

（1）重要且操作频密的入口很显眼。

（2）较大限度地引导采用者进行操作。

2. 缺点

（1）中间按键极其显眼，按键周围的三个按键单击率较低。

（2）对中间按键的结构设计要求比较高，需要有高度的结构设计美感，否则显得不协调。

举个栗子

微博和美拍采用的是舵式导航控制系统，如图1-4所示。

移动应用UI设计知识分享

图1-4 舵式导航控制系统案例

1. 3 宫格式导航控制系统

宫格式导航控制系统的特征是登录界面中的菜单选项就是进入各个应用领域的起点，如图1-5所示。

移动应用UI设计知识分享

图1-5 宫格式导航控制系统结构

1. 优点

（1）清晰展现各入口。

（2）采用者容易记住各入口的位置，方便快速查找。

2. 缺点

（1）无法在多入口间灵活跳转，不适宜多任务操作。

（2）容易形成更深的路径。

（3）不能直接展现入口内容。

举个栗子

支付宝和爱奇艺采用的是宫格式导航控制系统，如图1-6所示。

移动应用UI设计知识分享

图1-6 宫格式导航控制系统案例

二、内容主导式导航控制系统

2. 1 陈列式导航控制系统

陈列式导航控制系统是通过直接在界面上显示各个内容项来实现导航控制系统的，如图2-1所示，主要用于展示文章、菜谱、照片和商品等。

移动应用UI设计知识分享

图2-1 陈列式导航控制系统结构

1. 优点

（1）直观地展现各项内容。

（2）能够方便地浏览经常更新的内容。

2. 缺点

（1）不适宜展现顶层入口框架。

（2）对界面内容要求较高，否则显得杂乱。

（3）结构设计效果较单一，容易呆板。

举个栗子

厨房故事、Dribbble和Pinterest采用的是陈列式导航控制系统，如图2-2所示。

移动应用UI设计知识分享

图2-2 陈列式导航控制系统案例

2. 2 旋转木马式导航控制系统

当应用领域程序信息足够细长时能试著轮播导航控制系统，倘若应用领域得当，能够给人耳目一新的体验，这就是旋转木马式导航控制系统，如图2-3所示。这种导航控制系统能够较大程度保证应用领域页面的简洁性，得到极为简洁的采用者体验和直观的流程，实现概览和细节界面的无缝过渡。页面轮盘式更换，适用于有少量页面的导航控制系统，可用来作为展示某些情况，如系列商品。

移动应用UI设计知识分享

图2-3 旋转木马式导航控制系统结构

1. 优点

（1）单页面内容，整体性强。

（2）线性的浏览方式有顺畅感和方向感。

2. 缺点

（1）不适宜展示过多的页面。

（2）不能跳跃性地查看间隔的页面，只能按顺序查看相邻的页面。

（3）由于各页面结构相似，容易忽略后面的内容。

举个栗子

iPhone自带的天气应用领域采用的是旋转木马式导航控制系统，如图2-4所示。

移动应用UI设计知识分享图2-4 旋转木马式导航控制系统案例

三、列表式导航控制系统

列表导航控制系统通常用于二级页面，不能默认展示任何实质内容，因此通常App不能在首页采用它。这种导航控制系统结构清晰、易于理解、冷静高效，能够帮助采用者快速定位到对应的页面。

列表项目能通过间距和标题等进行分组，形成扩展列表。

3. 1 列表式

列表式导航控制系统有很多种形式，如图8-11所示，包括个性化列表菜单、分组列表和增强列表等。增强列表是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的。列表菜单适宜显示较长或拥有次级文字的标题。

移动应用UI设计知识分享

图3-1 列表式导航控制系统结构

1. 优点

（1）层次展示清晰。

（2）可展示内容较长的标题。

（3）可展示标题的次级内容。

2. 缺点

（1）同级内容过多时，采用者浏览容易产生疲劳感。

（2）排版灵活性不是很强。

（3）只能通过排列顺序和颜色来区分各入口的重要程度。

举个栗子

小米手环、VPN和i P h o n e 手机控制系统设置使用的是列表式导航控制系统，如图3-2所示。

移动应用UI设计知识分享

图3-2 列表式导航控制系统案例

3. 2 抽屉式

抽屉式导航控制系统也叫侧滑导航控制系统，如图3-3所示，抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能，让采用者更专注于核心的功能操作。菜单隐藏在当前页面之后，只要单击入口就能将它拉出来，此类导航控制系统节省了页面展示空间，有利于将采用者的注意力聚集在当前的页面，能应用领域在不需要频密转换内容的应用领域上。为了导航控制系统与界面间平滑过渡转换，此类导航控制系统需结构设计转换的过渡动画。

移动应用UI设计知识分享