移动应用UI设计模式（一）

著  【美】Theresa Neil

这本书看了一部分，主要介绍移动端APP里的UI设计模式。

每一种UI元素或者说布局、功能等都有不同的样式及特点，什么样的地方适用什么样的样式。云朵——卷云、积云、层云、卷层云、积雨云、高层云、荚状云、马云，等等，不同的天气、地域、海拔等会有不同的云，如果晴空万里咱不能给来一个乌云，该是什么情况就得有什么样的云。或者可以通过云的质感、颜色、高度、运动的轨迹等来判断云的类型，还可以通过云来判断天气等。云之间也可以互相转换、互相影响、相互联系，浓积云会变成积雨云，随之带来暴风雨。

举这个例子就是说移动端里也有诸如此类的界面类型，每一种可能都会有很多相互关联相互影响的云。

本书共十章内容，依次与大家分享。

第1章  导航

导航的存在无非就是说明三点内容，我是谁（我在哪），我从哪来，要往哪去。突然想到了西游记里的唐三藏，每次通关或者遇到谁总是要介绍自己一番，贫僧是从东土大唐而来，去往西天取经的和尚。说明身份，从哪来去往哪，简单明了。

1.1主要导航模式

主要导航模式

（1）跳板式——快速启动板

这个就是个网格布局样式，很多APP都在使用，可以使2*2，4*4，2*3等等，不一定非得是矩形、圆形，长方形的也可以，可以成比例放大某些认为很重要的选项，以彰显其重要度。

美图秀秀APP截图

（2）列表菜单式

和跳板式的共同点是每个菜单图标都是进入各个功能的入口。这种导航样式适合较长或拥有次级文字内容的标题。

gtaskj界面截图 备忘录截图 备忘录截图

（3）选项卡式

这种导航模式是时下最流行的，基本叫个APP都是这种主要导航模式，简洁、易于操作。可以在屏幕上面或者底部，这种导航的好处就是一目了然，无需完全跳转到别的页面，当前选项即当前页，有安全感，易于单手操作大拇指操作，不容易迷失方向。

in界面截图 陌陌界面截图

（4）陈列馆式

主要是把一些主要的信息比如新闻、菜谱、照片、产品等，可以通过布局成轮盘、网格或用幻灯片演示的。有时，把这些内容进行分组更容

BBC NEWS界面截图

（5）仪表式

一种度量关系的，带数据的绩效指标的。当下很难找到一个主导航是只有仪表似的导航，只能在网上找诸如类似的。

mint和ego界面

（6）隐喻式

这种导航应用于游戏较多，在组织事物进行分类的应用中也能看见。

（7）超级菜单式

一般很多购物网站习惯用这种导航模式，这种试用条目较多的APP导航，选项少的不适合。

折800 ripcurlshop.com

1.2次级导航模式

所有的主要导航模式都可以用作次级导航，有时APP经常会选项卡导航下再用选项卡导航，选项卡下用列表导航等等情况。

（1）页面轮盘式

选项卡搭配页面轮盘，用户可以滑动操作快速浏览一系列离散的页面，可以显示页面中的数量。页面轮盘式有一定缺陷，页面超过8个，最好使用列表菜单。此导航适用较少页面。

（2）图片轮盘式

在演示版本中，这种导航很合适，也很有吸引力。适用于艺术品、产品、照片等。能够很好的提供良好的视觉化功能可见性，以此告诉用户有更多的内容可以访问。

gap移动版

（3）扩展列表式

通过下拉屏幕显示更多的信息。移动应用中使用较少，跳转居多。能够很好的逐步显示某个内容项的更多细节或选项。类似手风琴。

iOS天气APP