技術資訊
單線流程(web設計思想)
2009-02-08 10:22:00
單線流程這個系列的文章,是本blog09年最重要的一個主題,因為我覺得單線流程的設計思想非常接近WEB產品設計的基本原理之一。在web設計領域 ,似乎目前還沒有單線流程這個說法,所以本系列文章會比較山寨。
什么是單線流程
我所理解的單線流程是指,當用戶進入某個流程時(按鈕的出現(xiàn)往往是流程的標志),只能“前進” “后退” 或者“退出”,而沒有多余的干擾流程。當然純粹的遵守單線流程在實際的產品設計中沒有任何意義,我們在做得更多的是讓產品流程更接近單線流程。接下來我會舉一些實際的例子。
A到B的流程(這里的“A” “B”是指流程中的關鍵組合)
這是最基礎的流程,它永遠符合單線流程,比如百度搜索,輸入關鍵字------->百度一下
A到BC,或者AB到C
這是另兩種非常基礎的流程,無論哪種對用戶來講都是非常直觀的。
接下來講講由以上基礎流程組合成的復合流程。
A到B到C的流程
只有經過B才能到達C,在實際過程中我們常常會設計成如下這樣:
舉一個手機驗證碼的流程設置:
比較糟糕的設計,用戶的視覺從A直接跳到C,在用戶發(fā)現(xiàn)此路不通后,才返回B,所幸這個流程比較簡單,一來一回的用戶成本并不高。
google獲取手機驗證碼的這個設計應該說是一個夠用的,也符合用戶心智的設計。也許可以更好的優(yōu)化這類流程。
把A->B->C的流程分拆成 A->B,B->C。好處是把該流程變分成了2個純粹的單線流程,壞處是用戶只看到AB沒看到C之前,用戶會迷茫。
可能更好的做法是,ABC流程可見,但是在用戶沒有操作B之前,C不能被操作。
A經BC到D的流程
這類流程需要根據實際的情況來優(yōu)化。下面以目前支付寶的手機注冊和郵箱注冊頁面為例。
支付寶的手機注冊(獲取第二次手機驗證碼后的頁面)
因為這是第二次獲取手機驗證碼后出現(xiàn)的頁面,key D先于ABC出現(xiàn)在用戶視野里,這里暫時不去討論這里key的順序。
問題出在哪里,當用戶完成A之后,有B和C這兩個并列的入口供用戶選擇,而對“語音獲取”這個不怎么常見的功能支付寶并沒有做任何解釋。這里支付寶給了用戶兩個并列的入口,并且沒有對用戶比較陌生的入口做好標識。也許我們可以把流程優(yōu)化成如下這樣:
我設計的并不是特別好,這里的C應該被近一步弱化,只有當手機短信延遲相當厲害而影響用戶繼續(xù)注冊,才讓用戶采用比較高成本和陌生的語音獲取驗證碼。
使用Email注冊支付寶頁面
不像上面這個例子的手機校驗碼獲取,這里B和C都是不能互相替代的KEY,B與C也不存在誰主誰輔的關系,只是B會使用比較頻繁。
這個頁面似乎沒多大問題,但為了說明我想說明的問題,我覺得這里的流程可以變成如下:
為什么這么做,因為B和C是兩個不同類型的KEY,分解后的流程是 (B-->A-->D) (C-->A-->D),應該說這兩個是相對獨立的流程。而且在用戶選擇B或者C之后,很可能會影響用戶A區(qū)域的行為。組合成 A-->(B/C)--->D,不如組合成(B/C)--->A---->D更清晰。
原文:http://hi.baidu.com/mooqii/blog/item/7b7f990944ef7da82fddd416.html
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網站建設公司,高端網站定制,一站式網站服務——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網站建設——從滿足預期到走向卓越
- [2023-04-11 09:17:49] H5頁面設計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網站服務支持
- [2021-05-18 10:14:11] 青島網站建設的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網建設項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網站建設最容易忽略的人性化設計
- [2020-12-16 16:55:32] 建設一個常規(guī)的公司網站建設成本大概是多少?
延伸閱讀
- [2008-10-09 08:40:00] 阿里旺旺產品項目UED流程圖
- [2009-01-23 11:06:00] 2009年海外Web2.0風格設計風潮(上)
- [2008-10-04 17:09:00] 畫Web流程圖的一點心得
- [2012-03-08 17:20:37] 優(yōu)秀Web設計的10項原則:富有美感并創(chuàng)新實用
- [2009-02-10 09:07:00] 單線流程(2)---流程中的KEY
- [2009-01-23 11:24:00] 2009年海外Web2.0風格設計風潮(下)
- [2009-04-13 10:19:00] 手機門戶的注冊流程
- [2019-08-15 10:12:31] 從零開始的響應式web設計
- [2021-05-18 10:14:11] 青島網站建設的流程
- [2014-03-24 18:05:18] 網站設計制作的流程控制與管理
- [2009-02-01 15:06:00] 縮短流程的小設計
- [2009-04-19 08:51:00] 流程之重—對比支付寶和建行網銀水電煤支付