设计师初学必备宝典 绘制交互流程图
创始人
2024-07-21 03:51:18
0

学习产品设计初期肯定会遇到两个问题:第一,如何考虑更全面;第二,如何绘制交互流程图。开始产品设计前先要考虑所有可能性,如何才能以线性流程图的方法组织所需的设计元素。

流程图是产品经理和交互设计都必须掌握的技能,一张流程图可以省去需求文档和交互设计文档的很多文字描述,让技术人员一目了然地明白设计意图,便于组织程序的逻辑顺序。

绘制流程图准从简单的原则,流程图是设计师的产出物,体现设计意图,主要给技术人员和测试人员浏览,至于自己是如何思考不应体现在流程图中。别人也要早点回家被老婆,没有时间关心你如何的细心的考虑,也不关心用户会如何思考和操作的,请直接给他们展示设计的结果。

复杂和纠结留给自己,简单留给别人。对用户是这样,对工作同伴也是如此。

 

手机程序开机检查更新的流程图

图例1:手机程序开机检查更新的流程图

流程图包括以下图形

◆矩形表示交互环节

◆菱形表示问题判断

◆箭头表示工作流方向

也有用圆角矩形表示“开始”和“结束”,个人一般不要该图形,因为从上而下的线性流程图。最顶部的图形或者箭头开始的部分是流程图的“开始”,如图例中,开启程序触发了事件,程序开始检查更新;最底部的图形或者箭头终止的部分是流程图的“结束”,如重启程序和不再提示表示本次事件结束,无须以图形区分表示“开始”和“结束”。

流程图容易和操作步骤混淆,比如《交互设计表格》中的登录框操作步骤是:

◆点击登录,弹出登录框

◆点击用户名输入框,输入用户名

◆点击密码输入框,输入密码

点击登录

操作步骤是用户正常情况下完成某项操作所需的操作,而交互流程图(严格意义上叫程序流程图)表达是执行逻辑的路径,通俗地将是当用户点击某个按钮之后,程序执行命令的顺序。更复杂的系统流程图可用于产品架构。

当用户点击的登录框之后,文字描述程序执行的顺序:

检查用户名是否为空。如为空,提醒用户“请您输入用户名”。如果用户名设置要输入手机号码,还要检查手机号码是否是否以13/15/18开头的11位数字。

检查密码是否为空。如为空,提醒用户“请您输入密码”。

检查用户名是否是已用账户。程序提交数据与服务器数据进行比对。如果不是,提醒用户“用户名不正确”。疑问:用户名有误和不存在是如何判断的?

检查密码是否与账户匹配。如错误,提醒用户“密码输入不正确”。

现多数登录框将4和3合并,只提醒“用户名或密码不正确”,可能是告知用户过于准确的信息之后会增加盗号风险。

 

wap站验证用户手机号码 

图例2,wap站验证用户手机号码

 

【编辑推荐】

  1. 移动开发产品设计分析:各大移动平台的消息通知
  2. 移动终端设备产品登录页面设计理念
  3. 软件开发前期设计时的注意事项

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
各种千兆交换机的数据接口类型详... 千兆交换机有很多值得学习的地方,这里我们主要介绍各种千兆交换机的数据接口类型,作为局域网的主要连接设...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
规避非法攻击 用好路由器远程管... 单位在市区不同位置设立了科技服务点,每一个服务点的员工都通过宽带路由器进行共享上网,和单位网络保持联...
范例解读VB.NET获取环境变... VB.NET编程语言的使用范围非常广泛,可以帮助开发人员处理各种程序中的需求,而且还能对移动设备进行...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...