DIV CSS 佈局教程網

用戶體驗中的流程是十分重要的，因為好的產品要盡量減少用戶在使用中的多余操作，以使得用戶得到最好的體驗效果，一下我們將討論流程中最簡單的一種“單線流程”

什麼是單線流程
我所理解的單線流程是指，當用戶進入某個流程時，只能“前進” “後退” 或者“退出”，而沒有多余的干擾流程。當然純粹的遵守單線流程在實際的產品設計中沒有任何意義，我們在做得更多的是讓產品流程更接近單線流程。接下來我會舉一些實際的例子。



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更清晰。