一.流程图设计

流程图(Flow Chart)：用图示的方式反映出特定主体为了满足特定需求而进行的有特定逻辑关

系的一系列操作过程。

流程图的四种基本结构：顺序结构，条件结构(又称选择结构)，循环结构，分支结构。

1.流程图的常用符号意义：

2,软件业务流程图设计

一般我们在写产品需求文档的时候，我们需要设计流程图，一般一个PRD里面会由几个大的主

流程图+几个子模块的流程图构成。

主流程图不需要很详细，只要描述大概的通用操作流程。而在具体业务模块下，再去设计详细的角色操作流程图。流程图设计完后，先切分业务模块，然后绘制线框图。

图片示例：图8-2 一个注册页面的通用流程图

作为制定一项交互设计工作计划的开端，我们可以从探寻以下几个问题开始。

1.为什么要做这个功能？（业务目的）

2.产品期望得到怎样的成果？（业务目标）

3.谁来使用这个功能？（目标用户）

4.他们为什么要使用这个功能？（用户需求、体验目标）

5.如何让他们都来使用这个功能？（行为设计）

在了解这几个问题的基础上，逐步展开一系列的动作，有序落实交互设计的前期工作计划。

主要包括：

1、分析业务需求一＞2、分析用户需求一＞3、分解关键因素一＞4、归纳设计需求，明确设

计策略。

二.手绘线框图

1.页面功能模块的划分

根据产品需求确定模块划分，和页面内容，为视觉和研发提供设计和开发标准。

线框图设计要素：界面内容、元素布局、优先顺序、关联分组。

线框图要做到：结构：将产品的各个页面放到一起。

内容：页面显示内容是什么？

信息层次：如何组织和展示这些信息？

（布局）功能：页面如何工作，完成任务？

（视觉顺序）行为：与用户如何交互？

它是如何运转的？线框图设计步骤：明确该页面功能和任务确定设计页面所需信息内容对页面

信息内容进行布局调整页面元素细节（尺寸，定位等）。

2.手绘线框，可以买专门的手绘线框本，然后铁皮的手绘线框原型钢尺。

手绘线框，一般在产品功能需求文档做完，功能拓扑图及重要流程设计完毕，然后开始把功能

分配到各个页面上。

有一些敏捷式开发时，会让设计师，一边讨论一边绘制手绘线框，手绘线框图的优势是，可以

用最小的成本探讨设计可行性等问题。所以，设计师平时应该多使用APP竞品，使得自己对各

类APP版式非常熟悉，

APP中比较重要的页面有注册、登录、首页、个人中心、设置、导航分类、播放器、各种列

表、社交、购物车、照片库、侧滑、搜索、地图、社区、对话框、精品推荐等。

十二类常见APP页面导航:

A、底部导航：釆用文字加图标的方式展现。一般有3〜5个标签，大部分APP选用这种导航，

优点是可以不迷路的在各个模块中切换，缺点是会分割页面内容，占有一定的底部空间。

B、顶部导航：优点适用于较多的分类卡片，可以左右滑动，隐藏更多功能，缺点是需要2手操

作。

C、舵式导航：优点是可以把常用功能或者重要功能居中醒目显示，缺点是图标熟练只能单

数。

D、瓦片式导航：优点简约而不简陋，导航清晰、明显。缺点：进入模块后，要退出才能回到

菜单。

E、列表式：优点可以对内容非常多的数据进行不断加载滑动，缺点是单调容易引起疲劳。

F、弹出菜单：优点是形式节省空间新颖，缺点是需要猜测和记忆内部功能。

G、瀑布流：优点是图片展示类可以一直下滑视觉效果好，缺点是要找之前滑过去的图片，需

要上下翻很久。

H、卡片翻转：优点是视觉效果好，动感强。

I、侧滑菜单：抽屉导航指的是一些功能菜单按钮隐藏在当前页面后，点击入口或侧滑即可像

拉抽屉一样拉出菜单。这种导航设计比较适合于那么不需要频繁切换的次要功能，例如对设

置、关于、会员、皮肤设置等功能的隐藏。缺点是需要猜测和记忆被隐藏的功能。

J、时间轴：优点是适合时间线发帖打卡性质的页面，缺点是页面记录信息有限,需要点入后查

看。

K、数据可视化：优点适合各种数据图表展示，缺点耗费空间，并且开发繁琐。

L、自由添加：优点可以让客户自由定义功能模块，缺点开发麻烦，客户有学习成本。

3. APP线框设计（低保真原型设计）

线框图一般分为，低保真，中保真，高保真。

低保真，一般文字加简单的色块线框，标示出大概布局和功能即可，手绘或者AXURE自带功

能即可。

中保真，基本加上了图标的形态，尺寸也比较精确，一些隐藏页面和操作提示会在旁边写明，

拥有了简单的逻辑跳转。

高保真，基本和开发出来的上线版本80%〜90%类似了，有细腻的跳转动效，或者交互操作反

馈，基本就是没连数据库的ALPHA版。

4.常见APP交互跳转手势

UEgood学员APP线框作业展示，做线框要注意合理性，在保证顶部标题栏状态栏和底部导航

栏尽力按官方系统APP的尺寸外，可点击区域不要小于44DP,也就是手指点击尽量不要按到另

一个控件，出现误操作。

同类功能和图标控件，使用一致的尺寸设计及同类控件集中在一起，不同的功能用不同的间距

隔开，颜色上，尽量使用5〜7个色阶区分功能块。同类的页面多去收集一些排版，在手绘线框

的时候,多推敲下，尽量让页面视觉效果又好看，交互操作又方便合理。