APP界面设计“栏”、“图”、“控”、“框”四字要诀

任何一款App都是有共同的特点的，或者叫共同的结构、功能、规则，我总结了就四个字：栏、图、控、框。

“栏”指的是App界面中存在着很多栏：

（1）状态栏：一般位于界面顶部，我们在手机上看到的手机信号、时间、通知、电量等都是位于状态栏；

（2）导航栏，也叫标题栏：多数情况下，App每个页面仅次于状态栏下会有导航栏，告诉用户你现在处于什么位置，当然有些App的一些界面并没有导航栏，其实并不是没有导航栏，只是留有位置没有文字而已；

（3）标签栏：有很多新人容易把标签栏和导航栏搞混了，这也许是受Web端产品中“导航”所影响，App中一般位于底部或者顶部的，用于大版块切换的栏，就是标签栏；

（4）工具栏：用于执行针对当前页面的操作的栏，比如留言框、收藏、分享、点赞等按钮所处的栏；(一般打开具体内容页面时才存在，也就是微观页面上才有），

（5）筛选栏：筛选栏并不是所有App都会有，一些信息维度比较多的App，比如招聘类App，会有筛选栏，支持按条件筛选，一般位于导航栏下方；

（6）搜索栏：这个很直观了，就是执行搜索功能的栏，一般和导航栏重叠或者位于导航栏下侧。（现在很多时候位于导航栏一行）

“图”即“视图”，请注意“视图”不是界面，而是代表着一种视图结构。视图分为宏观视图结构和微观视图结构。

宏观视图结构分为集合视图和列表视图

微观视图结构 例如：列表视图中每组信息可以是文本视图（纯文本）、图文视图（纯图片）、文本+图片视图，在一些较个别的App中还存在“卡片视图”，比如探探，一个界面就一个视图，可以以卡片形式，通过滑动切换视图内容。

“控”指的是“控件”，说起控件，App里面的控件真是太多了，不说具体的，就按照类别划分：最常见的各种按钮控件、轮播控件、文本控件、分段器控件、选择控件、计数器控件、加载控件等。 “栏”、“图”原本都是静态的，可是为什么能有交互，就是因为在旁边或者上面添加了控件。

“框”要比前面三种元素出现的频率低，一般在特殊情况下才会出现。这也符合多数情况下，App应用是稳定的、安全的，少数情况下会出现波动或者风险的实际情况。当我们要删除一条信息，会有对话框提示，当网络不佳时页面加载缓慢或者失败，会有toast提示，当需要注册时会有注册框等等。目前，用的最多的就是对话框和toast，ios中对话框叫做“Alert View”，安卓系统中对话框叫做“dialog”。

讲到这里，一款App，不管它的定位、性质、功能是什么样的，基本都离不开以上四部分，换句话说，以上四部分组成了App的界面，有了这四部分，你的App可能还不是很完美，但起码算是完整了。对于已经有多年产品经验的老人来说，这确实不够，但是对于新人来讲，掌握“栏”、“图”、“控”、“框”这四字要诀，你在设计App界面时不会丢三落四，不会找不到着眼点。

想象一下，你在设计App的首页时，从上往下要有状态栏、导航栏、搜索栏（可选）、标签栏，安插了轮播控件的banner位，以列表形式结合图文形式的视图界面，每个图文视图安插了按钮控件，下拉或者上拉或者点击标签栏“首页”按钮出现了加载或刷新插件。