界面设计模式（解析十种APP导航设计模式）

本文目录

• 解析十种APP导航设计模式
• JS常用设计模式（MVC、MVP、MVVM及其他设计模式）
• Android与iOS：应用程序用户界面设计的差异和比较
• uimode模式是什么意思

解析十种APP导航设计模式

1.标签导航 （标签导航位于页面底部 ，标签的分类最好在5个以内，比如微博、微信、淘宝）

优点：清楚当前所在的入口位置；直接展现最重要入口的内容信息。

缺点：功能入口过多时，该模式显得笨重不实用。
2.驼式导航 （中间加了一个“+”导航，像轮船上用来指挥的船驼，比如微博、qq空间）

优点：需要突出重要且频繁操作的入口。

缺点：同标签导航。
3.抽屉导航 （将菜单隐藏在当前页面内，点击入口即可像抽屉一样拉出菜单）

优点：节省页面展示空间；让用户注意力聚焦到当前页面；扩展性好。

缺点：不适合频繁切换的应用。
4.宫格导航 （宫格导航将主要入口全部聚合在页面，让用户做出选择，比如美图秀秀）

优点：直接展现各项内容；方便浏览经常更新的内容。

缺点：无法入口间的跳转；不能直接展现入口内容；不能显示太多入口次级内容。
5.组合导航 （比如淘宝里的快捷入口，像天猫之类的）

当用户需要聚焦内容，同时又需要一些快捷入口能够接到某些页面时，就可以采用组合导航。

优点：布局灵活，能适应架构的快速调整。

缺点：不规则容易有杂乱感。
6.列表导航 （比如微信的发现界面）

优点：层次展现清晰；可展现内容较长的标题；可展示标题的次级内容。

缺点：同级过多时，容易产生疲劳；排版灵活性不高；只能通过排列顺序、颜色来区分各入口重要程度。
7.tab导航 （用于二级页，本质和标签导航相同，当应用层级较多时，可采用tab导航，比如淘宝）

优点：对多内容多层级产品适用。

缺点：结构复杂，内容繁多。
8.轮播导航 （比如天气软件）

优点：单页面简洁内容，整体性强；线性的浏览方式有顺畅感、方向感。

缺点：不适合展示过多页面；非主页面不利于展示和查看。
9.点聚导航 （主操作选项或导航合并成一个按钮，浮动在页面上，比如path，最新版本导航置在中间）
优点：灵活；展示方式有趣；页面更开阔。

缺点：隐藏了更多入口和操作。
10.瀑布导航 （瀑布式布局适用于图片为主的内容，下拉自动加载，比如花瓣）

优点：浏览时产生流畅体验；排版布局多变；沉浸式体验。

缺点：不适合层级架构复杂的产品；容易产生疲劳感。

JS常用设计模式（MVC、MVP、MVVM及其他设计模式）

一、MVC

MVC模式的意思是，软件可以分成三个部分。

视图（View）：用户界面。

控制器（Controller）：业务逻辑

模型（Model）：数据保存

各部分之间的通信方式如下。

View 传送指令到 Controller

Controller 完成业务逻辑后，要求 Model 改变状态

Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的。

二、互动模式

接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受指令，传递给 Controller。

另一种是直接通过controller接受指令。

三、实例：Backbone

实际项目往往采用更灵活的方式，以 Backbone.js 为例。

1. 用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。

2. 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。

3. Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器） 。

四、MVP

MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。

1. 各部分之间的通信，都是双向的。

2. View 与 Model 不发生联系，都通过 Presenter 传递。

3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

五、MVVM

MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。

唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。 Angular 和 Ember 都采用这种模式。

1、js工厂模式
说明：

在函数中定义对象，并定义对象的各种属性，虽然属性可以为方法，但是建议将属性为方法的属性定义到函数之外，这样可以避免重复创建该方法。

引用该对象的时候，这里使用的是 var x = Parent()而不是 var x = new object(); 因为后者可能会出现很多问题（前者也成为工厂经典方式，后者称之为混合工厂方式），不推荐使用new的方式使用该对象。

在函数的最后返回该对象。

不推荐使用这种方式创建对象，但应该了解。  

2、js构造函数模式
说明：

与工厂方式相比，使用构造函数方式创建对象无需在函数内部创建对象，而使用this指代，并而函数无需明确return。

同工厂模式一样，虽然属性的值可以为方法，仍建议将该方法定义在函数之外。

同样的，不推荐使用这种方式创建对象，但仍需了解。

3、js原型模式
说明：

函数中不对属性进行定义。

利用prototype属性对属性进行定义。

同样的额，不推荐使用这样的方式创建对象。

4、构造函数+原型的js混合模式（推荐）
说明：

该模式是指混合搭配使用构造函数和原型方式。

将所有的属性，不是方法的定义在函数中（构造函数的方式），将所有属性值为方法的利用prototype在函数之外定义（原型方式）。

推荐使用这样的方式创建对象，这样有好处。

5、构造函数+原型的动态原型模式（推荐）
说明：

动态原型方式可以理解为混合构造函数，原型方式的一个特例。

该模式中，属性为方法的属性直接在函数中进行了定义，但是因为

if(typeof Parent.lev == "undefined"){

          Parent.prototype.lev = function(){

            return this.name;

          }

   Parent.lev = true;

    } 

从而保证创建该对象的实例时，属性的方法不会被重复的创建。

Android与iOS：应用程序用户界面设计的差异和比较

移动领域的两大风向标--Android和iOS，也是移动应用设计时最大的两个竞争对手。Android与iOS在市场份额、受欢迎程度、使用人口统计方面数据不相上下，在这里，我们对比了Android和iOS之间的简单设计差异，这将帮助我们弄清一个与另一个有何不同。
由于碎片化的原因，安卓系统的应用设计会有细微的差异。

我们先来了解一下Android与iOS UI应用设计在扁平化设计和材质设计方面的对比。

人机界面指南主要基于三个原则。清晰、尊重和深度。简单来说，该方法支持极简主义，使用简洁的元素，注重排版和扁平化色彩。

简而言之，Android Material Design被认为是Flat设计的升级版，带有拟态性（一种流行的设计概念，即让所代表的物品与现实世界中的对应物相似）。

用Google设计副总裁 MatíasDuarte 的话来说，它是–

有了这些基础知识，让我们从7个方面研究两个平台之间的差异。

目录
1. 导航
2. 按钮
3. 图标和屏幕分辨率
4. 字体
5. 控件
6. 卡片
7. 警报

对于iOS应用程序，总是在“后退”按钮旁边提示上一个选项卡的名称。在中间，显示当前选项卡的名称，而在右上角则显示“”或“完成”（控制按钮）。
说到Android的设计规则，应用程序通常在抽屉菜单或后退按钮（可选）之后的左上角显示标题。移至右上方，总是有一个操作项，例如搜索图标（也可以是多个，例如“收藏夹”图标），其后是溢出菜单。

在iOS中，主导航始终显示在底部，功能菜单专门用于存储一次性功能。而在Android中，通常会在功能菜单中看到主要导航，或者以搜索栏，浮动操作按钮等形式在整个界面中存在。

ios界面指南中，没有类似抽屉导航菜单的标准控件。iOS的全局导航被放置在应用屏幕的底部，一般位于最末位的 "更多"标签下找到二级导航。
Android中，二次导航是一个抽屉，一旦按下功能菜单图标，就会从左到右打开，同时产生一个深色的遮罩层。

有四种方法可以在iOS应用中实现“后退”操作：

在某些情况下，Android应用程序中给出了类似后退的操作，您可以通过该操作进入前一个标签。但是，最常见和最简单的方法是使用导航栏中的后退按钮（Android 10中现在是可选的）。

iOS和Android中的按钮风格最主要的设计区别在于，iOS中的按钮遵循扁平化的设计模式，不带阴影、支持标题大小写。Android遵循Material Design，带阴影且字母大写。

另一个比较重要的按钮是Floating action button（FAB行动呼吁按钮）。例如安卓系统中Gmail的compose按钮，iOS系统中社交媒体应用的新建文章按钮。

两种系统都使用8dp的网格来构建屏幕结构，而最常见的边框是16dp。
在开发移动应用程序时，以预定义的尺寸设计图标是非常关键的。这里有一个表，描述了所有的测量。

这些表格一开始可能会让人有点不知所措，但是如果你知道基本尺寸，并且能够使用倍数进行检查和导出，会发现这并不复杂。

多年来，苹果一直是Helvetica Neue字体的粉丝，然而在2015年，苹果开始使用San Francisco，它更节省空间，非常适合手机、台式机和iOS Watch使用。

Android系统，一直使用Roboto作为标准系统字体。在可预见的未来，谷歌也没有计划改变这一深受喜爱的元素。

控件设计包含搜索、CTA按钮、选择控件和标签等元素。每一个都满足了这样或那样的目的，让我们来看看他们的位置。

搜索功能对于两个平台来说都非常重要，苹果最近还在iMessage中加入了 "搜索栏 "。

在苹果中，搜索选项有两种类型--突出和隐藏。通常情况下，搜索图标会显示在上边的选项卡上，而有时需要从上到下拖动屏幕才能显示搜索栏。此外，如果要取消搜索查询，可以按 "取消"，如果要清除，可以用 "X"。

在安卓系统中，没有隐藏的搜索栏，你总能在上层标签中找到一个。如果要取消搜索，只需点击"←"图标即可，如果要清除查询，则和iOS中的一样。

浮动的动作按钮（FAB）在Android中充当主要行动按钮，可以出现在顶部应用栏或一些组件的边缘。而iOS应用中的主要行动按钮总是出现在页面的右上角。

不过也有一些例外，少数iOS会在底部工具栏显示CTA，而Android则在上部工具栏显示。

如果需要显示一些选项，可以在iOS平台上使用选取器控件，选取器一般出现在底部。
对于在Android平台上显示很少的选项，通常使用一个出现在原地的下拉菜单，或者一个出现在中心的模态对话框，使用模态框时应用背景变暗。

据观察，iOS系统并没有一个视觉上类似于 "标签"的控件。它使用的是一个分段的按钮。Android使用了"扁平化设计的tab"来实现同样的效果。

卡片是图片、文字、视频的集合，还包括按钮和评论。
在iOS中，卡片的特点是无阴影、全宽、无圆角。而在安卓系统中，卡片的设计有阴影、沟槽、圆角等功能。

安卓系统的提醒采用的是扁平化的按钮样式，具体尺寸可以在材质设计指南中找到。操作按钮被放置在提醒的右下角。这些 "按钮 "完全以文字为主（全大写），让用户更容易理解。

至于iOS系统的提醒，则是用分割线隔开。它们基本采用句子或标题的形式，在独立的区块中呈现。它们被放置在弹出窗口的中心。

本文涵盖了iOS和Android所有的初步差异，希望对你有所帮助，而设计一个iOS或Android的移动应用，总是有迭代的准则，所以，一定要保持信息的更新，及时调整自己的产品设计。

Q. 为什么iOS和Android上的应用看起来不一样？
品牌和意识形态的不同，已经波及到他们的操作系统的运作方式。两个平台的UI设计已经成为品牌的符号化。

Q. 如何设计一个原生应用？
在设计原生应用时，必须始终遵守iOS UI应用设计指南和Material设计指南。这样才能使应用与它所要针对的平台同步。另外，这些平台有不同的要求，所以你的应用必须满足它们才能在应用商店上发布。

Q. iOS比Android更方便用户使用吗？
这个问题的答案是纯主观的。它是基于用户的个人偏好。有些人可能会觉得iOS更实用，而有些人则在各方面都偏爱Android。

uimode模式是什么意思

UI模式。uimode模式是UI模式的意思。“UIMode是当前UI的简称，也是此模式的简称。是桌面，汽车，TV，手表，白天，夜间等。移动应用UI设计模式，作者是TheresaNeil，2013年由人民邮电出版社出版，是提供了70多种移动应用设计模式作为参考的书籍。