技术资讯
单线流程(web设计思想)
2009-02-08 10:22:00
单线流程这个系列的文章,是本blog09年最重要的一个主题,因为我觉得单线流程的设计思想非常接近WEB产品设计的基本原理之一。在web设计领域 ,似乎目前还没有单线流程这个说法,所以本系列文章会比较山寨。
什么是单线流程
我所理解的单线流程是指,当用户进入某个流程时(按钮的出现往往是流程的标志),只能“前进” “后退” 或者“退出”,而没有多余的干扰流程。当然纯粹的遵守单线流程在实际的产品设计中没有任何意义,我们在做得更多的是让产品流程更接近单线流程。接下来我会举一些实际的例子。
A到B的流程(这里的“A” “B”是指流程中的关键组合)
这是最基础的流程,它永远符合单线流程,比如百度搜索,输入关键字------->百度一下

A到BC,或者AB到C
这是另两种非常基础的流程,无论哪种对用户来讲都是非常直观的。


接下来讲讲由以上基础流程组合成的复合流程。
A到B到C的流程

只有经过B才能到达C,在实际过程中我们常常会设计成如下这样:

举一个手机验证码的流程设置:

比较糟糕的设计,用户的视觉从A直接跳到C,在用户发现此路不通后,才返回B,所幸这个流程比较简单,一来一回的用户成本并不高。

google获取手机验证码的这个设计应该说是一个够用的,也符合用户心智的设计。也许可以更好的优化这类流程。
把A->B->C的流程分拆成 A->B,B->C。好处是把该流程变分成了2个纯粹的单线流程,坏处是用户只看到AB没看到C之前,用户会迷茫。
可能更好的做法是,ABC流程可见,但是在用户没有操作B之前,C不能被操作。

A经BC到D的流程

这类流程需要根据实际的情况来优化。下面以目前支付宝的手机注册和邮箱注册页面为例。
支付宝的手机注册(获取第二次手机验证码后的页面)

因为这是第二次获取手机验证码后出现的页面,key D先于ABC出现在用户视野里,这里暂时不去讨论这里key的顺序。
问题出在哪里,当用户完成A之后,有B和C这两个并列的入口供用户选择,而对“语音获取”这个不怎么常见的功能支付宝并没有做任何解释。这里支付宝给了用户两个并列的入口,并且没有对用户比较陌生的入口做好标识。也许我们可以把流程优化成如下这样:


我设计的并不是特别好,这里的C应该被近一步弱化,只有当手机短信延迟相当厉害而影响用户继续注册,才让用户采用比较高成本和陌生的语音获取验证码。
使用Email注册支付宝页面

不像上面这个例子的手机校验码获取,这里B和C都是不能互相替代的KEY,B与C也不存在谁主谁辅的关系,只是B会使用比较频繁。
这个页面似乎没多大问题,但为了说明我想说明的问题,我觉得这里的流程可以变成如下:

为什么这么做,因为B和C是两个不同类型的KEY,分解后的流程是 (B-->A-->D) (C-->A-->D),应该说这两个是相对独立的流程。而且在用户选择B或者C之后,很可能会影响用户A区域的行为。组合成 A-->(B/C)--->D,不如组合成(B/C)--->A---->D更清晰。
原文:http://hi.baidu.com/mooqii/blog/item/7b7f990944ef7da82fddd416.html
近期更新
- [2023-07-26 14:17:28] 为品牌赋能,海外官网品牌数字化
- [2023-05-06 10:32:26] 青岛网站建设公司,品牌网站定制,一站式网站服务——力图数字科技
- [2023-04-27 13:47:54] 品牌定制网站建设——从满足预期到走向超预期
- [2023-04-11 09:17:49] H5页面设计开发——移动端传播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力图数字科技配套网站服务支持
- [2021-05-18 10:14:11] 青岛网站建设的流程
- [2021-04-29 10:14:38] 企业定制化官网建设项目
- [2021-03-05 10:34:45] 移动互联时代房地产行业的微信小程序解决方案
- [2021-01-22 17:29:38] 微信小程序有哪些优势?为什么要开发微信小程序?
- [2021-01-08 17:28:04] 网站建设最容易忽略的人性化设计
- [2020-12-16 16:55:32] 建设一个常规的公司网站建设成本大概是多少?
延伸阅读
- [2019-08-15 10:12:31] 从零开始的响应式web设计
- [2009-02-05 18:23:00] 找茬:firefox下首次登录支付宝的流程有问题
- [2009-04-19 08:51:00] 流程之重—对比支付宝和建行网银水电煤支付
- [2014-07-30 23:19:22] 网站设计流程应注意的要素
- [2009-04-07 08:31:00] 中文Web设计中的着重号
- [2009-03-02 18:03:00] 主流互联网公司的产品项目流程 以及UE设计师的
- [2009-01-23 11:24:00] 2009年海外Web2.0风格设计风潮(下)
- [2013-11-05 09:59:00] 网站设计制作与运营的全部流程并不简单
- [2008-12-31 08:46:00] Web设计中的黄金分割
- [2009-04-19 08:46:00] web专题设计模板化可行性研究
- [2012-03-08 17:20:37] 优秀Web设计的10项原则:富有美感并创新实用
- [2015-12-01 10:37:20] 网站搜索引擎优化的流程及教程
