4.交互设计原理与方法-流程图
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
标准
在设计上的分类
产品业务流程图、产品功能流程图、产品页面流程图
产品业务流程图就是通过图形化的表达形式,阐述产品
在业务层面控制的图表。产品业务流程图通常作为产品设计初 期阶段的工具使用,通过图形化,能够更清晰、直观地传达产 品在业务层面的控制(如业务动作、方向、逻辑等信息)。
案例: ofo小黄车业务流程
几点建议: 面向操作的流程图
有些人喜欢面向页面的流程图,有些人偏爱面向状态的流程图 面向操作的流程图画法,这样做可以更聚焦在任务本身,排除界面元素干扰
由繁入简
站在不同的角色角度进行思考
在画流程图的时候,应当多思考各项操作、判断的操作者是谁,是系统还是用户,并用不同颜 色(或其他方式)标明。
不同情况全覆盖
others:泳道图、时序图、用例图、原型图
时序图
用例图
业务用例图
最后简化流程
绘制流程图
1.QQ登录流程 2.微博、QQ、微信发布照片状态(说说)流程图
时间: 3月29之前
app导航
1.底部标签导航
ቤተ መጻሕፍቲ ባይዱ 2.顶部标签导航,tab导航
3.底部和顶部双tab导航
4. 驼式导航
以此类推: 淘宝的业务流程 知乎的业务流程
产品功能流程图
产品功能流程图就是通过图形化的表达形式,阐述产 品在功能层面控制的图表。产品功能流程图通常作为 产品设计中期阶段的工具使用,通过图形化,能够更 清晰、直观地传达产品在功能层面的控制(如功能动 作、方向、逻辑等信息)。
产品页面流程图
产品页面流程图就是通过图形化的表达形式,阐述产品在页面 层面控制的图表。产品页面流程图通常作为产品设计后期阶段 的工具使用,通过图形化,能够更清晰、直观地传达产品在页 面层面的控制(如页面功能和信息、方向、逻辑等信息)。
页面流程图通常用于介绍产品页面元素及页面之间的跳转关系。
产品页面流程图一般由专门的交互设计师进行设计,其绘制过程 能够帮助交互设计师确定产品页面之间合理自然的跳转顺序以及 页面本身的功能及信息构成。
如何绘制? 以登录为例
登录要素只考虑了手机号+密码一种方式,是否满足 需求呢?为什么没有邮箱登录?昵称登录?手机号+ 短信验证码登录?继续看第一步输入手机号,是否会 存在手机号格式错误、手机号未注册的情况?系统是 否有必要对手机号进行单独检验?如果单独检验,会 不会有什么安全隐患?不检验,是否体验友好?如何 进行评估?其中的操作、判断是由用户来做还是系统 来做?系统做的话,是前端还是后端做呢?用户忘记 了密码怎么办?
5.抽屉导航
6.宫格导航
7.组合导航
8.列表导航
9.轮播导航
10.点聚导航
10.瀑布导航
10. 陈列馆式导航
11. 下拉导航
FOUR
功能结构绘制
1、信息架构设计
“分类”
1.1.功能结构图
1.2.流程图
1.2.流程图
通俗来说,流程图就是一个有特定逻辑顺序的步骤地 图,在这份地图的帮助下,我们可以预知某类步骤走法 所能到达的终点,同时,我们也可以通过这份地图找到 某个目的地的具体实现路径。
Sterneckert在2003年提出流程图可以根据不同的用户群(例如管理人员、系 统分析师、书记员)这个角度来绘制,并且划分出了四种常用的种类: 文档流程图:展示经过一个系统中的文档流的控制; 数据流程图:展示对一个系统中数据流的控制; 系统流程图:展示对于物理层面或资源层面上的控制; 程序流程图:展示一个系统中对于程序的控制;
对照流程图检验是否满足所有情况。最简单的检验原则就是每条路都应该走得通,都有开始 和结束的点而非莫名终端,每个判断都至少有两条流转出的路。
发掘新设计点
在流程图中,可以这样问自己,会不会有无法进行某操作的情况?在每一种发生错误的时 候,是否有对应的设计对策?如在登录的任务中,就发掘出了用户忘记密码的情况。