当前位置:首页>ps入门教程>ps基础教程>设计知识>教程内容

知识分享,什么是设计流程图?(2)

来源:站酷 作者:Danis2011 学习:3537人次

  设计流程图长得并不特别,跟全世界流程图都差不多,也同样是作为一种表达工具存在。区别只在于描述的对象和组成的内容不一样。设计流程图的一大重点是面向表现层,也就是说,描述的是界面(或叫屏幕)的变化,是用户看到的界面的行为流。什么行为呢,界面之间的跳转逻辑,也就是导航逻辑。

 

  导航是信息架构的一部分(教科书把信息架构划分为组织、导航、标签、搜索四个系统),当然是交互设计的重要一环,导航的设计思路就能用流程图表达出来(或者也可以说用流程图来辅助设计吧),这也是个人觉得设计流程图的最重要运用。看下图:

 

知识分享,什么是设计流程图?

 

  从图中可以看出构成:

  a 界面。

  一个矩形代表一个界面,这个流程中用户走过两个界面(登录页和首页),因为表达的是界面的跳转,界面是用户实实在在接触到的媒介,非界面的内容,不要出现。

  b 动作。

  矩形之间也就是界面之间加上一个触发动作,比如从界面A点击下一步按钮,到达界面B,“点击下一步”就是连接这两个界面的关键动作,需要标示出来,上图例子就是“单击提交按钮”。

  c 条件。

  一个动作之后可能有多种“是/否”的结果,则在矩形之间、动作之后加上一个或多个判断菱形。如上图的检验账号密码是否输入正确。

 

 

二、注意什么?

 

1 坚持表达表现层。

 

  不要一个流程图里面,又有内部算法逻辑,又有界面逻辑,下图标红的矩形就是多余的,这个不关用户的事情,会扰乱你的导航设计思路:

 

知识分享,什么是设计流程图?

 

  不要把步骤和界面本身都用矩形表示,比如下图标红的矩形(况且你还不知道用户填写的顺序呢,我先填密码不行啊):

 

知识分享,什么是设计流程图?

 

 

2 抛弃系统错误。

 

  什么是系统错误呢,也就是非用户犯的错误,比如登录的时候服务器当了,网络连接错误等导致登录失败。除非你特别想强调系统错误后的提示界面,否则建议不要加进去流程图里面,因为每一步操作都可能错误,你的流程图会因此变得很庞大。如下图:

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
暂无评论,交个作业支持一下吧~

关注大神微博加入>>

网友求助,请回答!