五、风格指南，设计逻辑

界面

1.示例页面布局与风格：菜单的展示形式会是风格讨论的重点，他的操作方式影响整个产品，所以不要漏掉导航菜单的设计

2.布局说明：这里说的尺寸并非特指某个页面，是应用在大部分页面或者同类型的页面的常用尺寸，可能产生变动的尺寸不需要标

常用控件

不同平台的空间有不同的属性，一般假设做第一版设计的时候通常会做平台通用的设计，避免一些不同的空间操作方式

1.状态栏：系统自带的状态栏制作沉浸页面时可以考虑隐藏 

2.导航栏：通常位于屏幕的上方，状态栏的正下方，用户可以通过点击导航栏中的返回按钮，或者轻扫屏幕边缘来回到上一层。用户可使用导航栏的相应的控件来管理当前的屏幕内容

3.工具栏：放置用于操作当前屏幕中各对象的控件

4.文本输入：单行文本输入、多行文本输入、搜索框（通常在搜索时，导航栏被隐藏）

5.按钮：按钮由文字或者图标组成，文字以及图标必须能让人轻易地与点击后展示的内容联系起来，按钮的设计应当和应用的颜色主体保持一致。按钮需注意不同重要性与状态，重要性，我们认为重要的按钮居右显示，与WEB相反，上下排列的重要的在上面。重要的按钮常使用主色调或者焦点色。

点击状态：正常、按下、不可点击、按钮加载。

Android 按钮展示

• 1.悬浮响应按钮：它被选择进行积极的操作，如创建、收藏、分享、浏览和探索，他必须是圆圆的
• 2.浮动按钮：可以漂浮在界面内容上的按钮
• 3.扁平按钮：在对话框中应该尽量使用扁平按钮，以免多层堆叠
• 4.底部固定按钮：固定在底部并且持续可见，但是它不同于悬浮按钮的强存在感。在相对次要的功能中，可以使用这种固定按钮
• 5.下拉菜单中的按钮：

 

6.标签栏，（用于让用户在不同的子任务、视图和模式中进行切换）分段控件（每一个分段的作用类似按钮，点击之后将切换相应的视图）

7.选择与开关

8.选择器

9.模态视图

a.警告视图：必须包含标题，一个或多个按钮，用于告知用户一些会影响他们使用APP或者设备的重要信息，严格控制它出现的频率

b.操作视图：由用户某个操作行为触发，包含两个以上按钮

c.活动视图

d.底部视图 ：通常向上滑动进入，向下滑动退出，可以使 用列表或者九宫格，列表可以分组，底部视图还而已覆盖整个窗口

e.对话框：需要用户做出重要决定出现。包含标题，内容，操作

10.非模态视图：它出现一下就消失了，我们可以调节它出现的时间，它被用在需要交代进程或者给与反馈时，但是用户没看清也没有关系。（内容是短文本，“弱提示”他们也叫“吐司/面包”）

11.滑块：不精确但是比较方便的操作控件，在一定范围内调整某个数值或者进程，左边和右边支持使用自定义图片来表述相对的最小值与最大值的含义

12.活动指示器：当任务进行时其表现为加载和旋转，任务完成后自动消失，用户不可操作

13.下拉菜单：用于有限的单选操作

14.图标与文字：规范需确定好，使用一套规则

加载

1.页面加载

a.单页面整体加载：一次性加载页面全部内容

b.页面分块加载：页面比较复杂，可分批次加载，让不同优先级的内容分批加载，

c.跨页面预加载：当用户在查看上级页面时，我们可以先帮y用户加载好下级页面或者他预期会查看到

 2.操作加载：控件加载、后台加载

刷新

触发刷新（手势行为触发刷新）和自动刷新（按照某种规则，可以按照时间或者下次使用产品时自动刷新）

缓存

这里说的缓冲是用户使用过程中自动保存在本地的文件，缓冲的主要目的是为了下一次使用不需要联网就加载一次消耗流量，或者浪费时间等待。可以清理缓冲（占用内存比较大胆给与清楚缓冲功能，占用不大，希望用户有好的体验，可不提供清理缓冲，自动清理，等达到某个值就开始自动帮助用户清理）

热区

热区大于视觉焦点：有些信息即便我们希望弱化，也不能在用户想点击时点击不到

边缘热区：设计在边缘热区的点击热区比实际操作范围更大，并且用户也非常容易记住，是个很好用的方法

页面与视图的进入和退出

1.页面与视图：一级页面的进入与退出方式，子页面的进入和退出方式，模态视图的进入和退出

2.转场方式：限定范围、移动位置、中断触发、自定义动效、移动方向、移动时间、移动位置、移动速度

3.动效说明：触控，触发方式：点住控件和点击控件。如何移动：跟随手指移动。