APP控件设计（无耻整合）

1.各种栏

---

①状态栏20pt

②导航栏（Navigation Bar）45pt

③标签栏50pt

④工具栏45pt

⑤搜索栏45

⑥范围栏30pt~44p内容视图

2.内容视图

---

1.列表

有列表的地方有详情，点击进入详情

2.网格设计

一般包含几个元素：（缩略）图片、标题文字。

点击其中一个网格，也是跳转到下一级页面（列表、网格、详情页等）

3.内容轮显

4.泳道样式

每个泳道都是独立的，且是一排一排垂直排列的。

泳道的浏览方式一般是左右滑动，就可以查看里面的内容，如果内容较多，也可以直接加上『查看更多』的入口，将所有内容在一个页面显示出来。

5.卡片设计

卡片其实是列表的一种，最主要特点是，普通列表内容更单一简洁，而卡片呈现的内容更丰富比如有封面、标题、简介、链接、操作按钮（评论、点赞等），内容与内容之间模块化，每个卡片更独立清晰。

Instagram 的「推荐用户」模块，知乎的「知乎书店」模块，微博的「问答」模块，都利用了可以横向滑动的卡片设计，打破了订阅流信息垂直展示的限制，从而展示更多的信息。

6.集合视图

3.控制元素

---

4.临时视图

---

5.app界面类型

---

启动画面

影响用户对app的认知和看法最关键的是第一印象

引导页

主页和菜单界面

对不同类型的信息进行了区分和归整

天猫：第一张卡片式用户个人信息，以及用户自己收藏的内容和足迹数据;第二张卡片都是订单数据;第三张卡片是运营卡片，用于专门的大型活动的内容展示

考拉：第一张卡片是用户个人信息，以及用户自己收藏的内容和足迹数据;第二张卡片都是订单数据;第三张卡片是用户相关的其他信息;第四张卡片是考拉提供的服务。

微信读书：第一张卡片是用户个人信息;第二张卡片是用户账户的基本数据;第三张卡片是用户自己生成的相关内容;

6.异常状况设计

---

1、网络异常

场景1： 网络异常时，用户打开App，这种情况App会出现异常状态提示给用户，这是App主动告知行为；

场景2： 用户点击操作时，由于网络异常，这时候通过交互反馈给用户，这是App被动告知行为。

当前无网络时，用户点击操作时，无法正常使用产品，这时候通常有两种处理方式。

以缺省页的形式提醒用户当前网络异常。用toast提示

2、空数据

空数据一共分为两种类型，分别为初始状态和清空状态。

初始状态的设计，常规做法是简单的插画配合简洁的文案，必要的时候给出引导用户操作行为的按钮。现在流行的设计趋势是插画越轻量越简单越好，以免抢夺了文案信息。

清空状态的界面和初始状态设计很相似，唯一不同的是文案的提示。有的产品设计直接把清空状态的界面按照初始状态来设计，这样也是可以的，缺点就是没有告知用户产生空状态原因是初始化还是清空所致。

3、加载失败

在加载过程中，App向服务器请求数据，如果是网络原因导致，则使用网络异常的设计规范。如果非网络异常原因，则可能因为服务器异常导致接口请求不到数据，从而导致加载失败。 这种情况可使用toast告知用户加载失败的原因。

4、操作失败

5、消耗大量流量时

6、服务器异常

7、搜索无结果

8、无权限

9、功能建设中

10、内容被删除