鄭州網(wǎng)頁設(shè)計(jì)培訓(xùn)教程：用戶流程設(shè)計(jì)

云和教育作為云和數(shù)據(jù)旗下高端泛IT職業(yè)教育品牌，開設(shè)有UI總監(jiān)班、PHP高薪班、JAVA大數(shù)據(jù)班、HTML5專家班、Unity虛擬現(xiàn)實(shí)大師班五大精品課程。

課程設(shè)置緊跟時(shí)代“前端”發(fā)展和“后端”需要。采用小班教學(xué)，金牌講師面授輔導(dǎo)，采用沉浸式的教學(xué)模式，8+2的學(xué)習(xí)模式，學(xué)員畢業(yè)即擁有1-2年工作經(jīng)驗(yàn)，貼近企業(yè)需求，保證高薪就業(yè)!

在激烈的比賽中取勝的往往是那些把技能鍛煉得更深刻的選手。我們能成為頂尖選手并沒有什么秘訣，而是對(duì)可能是基本技能的東西有更深的理解。每天都要學(xué)得更深一點(diǎn)而不是更廣一點(diǎn)，因?yàn)閷W(xué)得更深可以讓我們把潛力中那些看不到、感受不到但又極具創(chuàng)造力的部分挖掘出來。——國際象棋大師&業(yè)余太極推手世界冠軍，喬希?維茨金

最近在Udacity學(xué)習(xí)老美的產(chǎn)品設(shè)計(jì)課程，我以為會(huì)吸收不少先進(jìn)的產(chǎn)品理念，但只是一再強(qiáng)調(diào)那些我早就「看不起」的基本概念、基礎(chǔ)注意事項(xiàng)。

他們特別強(qiáng)調(diào)對(duì)于這些基本功的嚴(yán)格執(zhí)行。就像一開頭我引用國際象棋大師說的那句話一樣，「我們能成為頂尖選手并沒有什么秘訣，而是對(duì)可能是基本技能的東西有更深的理解」。其中一個(gè)讓我印象深刻的是關(guān)于用戶流程圖的設(shè)計(jì)。

流程圖，我相信在互聯(lián)網(wǎng)公司待過的同學(xué)再熟悉不過，產(chǎn)品會(huì)用到流程圖、設(shè)計(jì)會(huì)用到流程圖、開發(fā)測(cè)試也會(huì)用到流程圖。

在我工作的時(shí)候，沒有做出過一次讓設(shè)計(jì)/碼農(nóng)0疑問的流程圖，我把大部分的精力放在了產(chǎn)品/網(wǎng)站的視覺表現(xiàn)上，甚少思考流程里有什么改進(jìn)空間，甚至有時(shí)候因?yàn)楣δ芎?jiǎn)單連流程圖都懶得去想去弄了。

這個(gè)課程里提到我們?cè)诋a(chǎn)品設(shè)計(jì)開始時(shí)會(huì)犯的兩個(gè)典型錯(cuò)誤：

PM因?yàn)榕f版本不夠時(shí)髦/好看，進(jìn)行產(chǎn)品設(shè)計(jì);

PM用堆積木的方式來設(shè)計(jì)產(chǎn)品，比如LOGO放上邊，登錄模塊右上角，界面采用左右布局等等。

看了以后內(nèi)心特別慚愧，自己就是這么干的。

順序錯(cuò)了。我們應(yīng)該從「完成商業(yè)目標(biāo)」和「幫助用戶完成任務(wù)」開始，你希望用戶來到這里干什么，他們要經(jīng)歷多少艱難險(xiǎn)阻的操作才能最終完成你的任務(wù)，你怎么設(shè)計(jì)這些操作使得用戶減少用戶投降放棄的比例。

設(shè)計(jì)不只是設(shè)計(jì)它長得漂不漂亮，更重要的是設(shè)計(jì)它好不好用。當(dāng)我們?cè)O(shè)計(jì)一個(gè)頁面/功能時(shí)，先從設(shè)計(jì)用戶流程開始吧。

時(shí)刻提醒自己的兩件事情：

產(chǎn)品/項(xiàng)目目標(biāo)是什么，這是你讓一堆設(shè)計(jì)師程序猿加班加點(diǎn)圍著你團(tuán)團(tuán)轉(zhuǎn)的原因;

用戶目標(biāo)是什么，他們有什么需求要滿足。

留意用戶的來源

用戶從四面八方過來，質(zhì)量參差不齊，對(duì)于產(chǎn)品和信息的了解程度也不同，設(shè)計(jì)流程的第一步就是為不同的客源設(shè)計(jì)流程(也許到后面你發(fā)現(xiàn)他們的流程都一樣)。

他們可能是：

搜索引擎主動(dòng)找過來的;

你發(fā)布的廣告騙過來的;

被朋友圈微博吸引來的;

正在使用你網(wǎng)站/產(chǎn)品發(fā)現(xiàn)的;

……

這些人各自「心懷鬼胎」，你得把他們的需求和你的訴求想辦法匹配起來，提升轉(zhuǎn)化率。

舉一個(gè)之前迅雷會(huì)員開通(但我們沒做好的)的流程為例，我們的流程是：

高速通道試用→ 試用效果展示/會(huì)員介紹→點(diǎn)擊「開通會(huì)員」→登錄/注冊(cè)→支付頁面→完成支付、開通會(huì)員

這里我們思考得就不夠勤快，沒有針對(duì)不同用戶設(shè)計(jì)流程，也不愿意給自己添麻煩。我隨便舉一下針對(duì)不同用戶群改進(jìn)思路：

1、曾經(jīng)是會(huì)員但現(xiàn)在沒續(xù)費(fèi)的

沿用上面流程，但在支付時(shí)候可以記住上次支付方式，或者是在支付時(shí)提供給老會(huì)員買年費(fèi)的折扣;

2、沒有賬號(hào)的用戶

他可能只是想看看價(jià)格再?zèng)Q定買不買，但登錄/注冊(cè)的流程會(huì)擋掉一大部分人。

提供用QQ登錄的接口，或者是直接直接到支付頁，在頁面填寫自己的郵箱/手機(jī)，支付完成給他們的郵箱/手機(jī)發(fā)送密碼(當(dāng)然涉及到已經(jīng)有賬號(hào)或者這個(gè)郵箱手機(jī)被注冊(cè)了怎么辦的邏輯分支)。

如果把流程圖更細(xì)化、更多一點(diǎn)思考，我相信還能想到更多提升轉(zhuǎn)化率的改進(jìn)方法。

一些改進(jìn)用戶流程的思考方法：

用戶來這里有什么需求?他們有什么問題要解決?(空虛寂寞孤獨(dú)冷的夜晚怎么打發(fā))

他們?yōu)槭裁葱枰闾峁┑臇|西?(提供給他一段美好的個(gè)人時(shí)光)

你的產(chǎn)品/服務(wù)對(duì)于他們最重要的特性是什么?(速度快?立即能看片?)

用戶有什么擔(dān)心，他們猶豫什么?(太貴了，有沒有效果?)

什么信息能夠幫助他們做決定?(3天無效退款)

有什么情緒或者沖動(dòng)能幫他們做決定?(精蟲上腦)

這些問題靠自己YY肯定是不夠的，這就促使你要多跟用戶交流了。交流的時(shí)候，你發(fā)現(xiàn)會(huì)有千奇百怪的用戶，如果你為每一類人定制專門的流程，就算你不累死設(shè)計(jì)開發(fā)也會(huì)把你打得半死.

這其中的取舍就依賴于你的判斷了(要不然老板給你的工資是干啥用的啊)。

「流程」里要有些啥?

我自己以前畫的用戶流程，著重點(diǎn)是不同狀態(tài)間的邏輯跳轉(zhuǎn)。課程提供了另外一種方式提升可用性，我覺得非常贊。它將一個(gè)流程分成上下兩部分，上面是「用戶看到什么」，下面是「你要用戶做什么」。比如：

使用這種方式，可以讓你專注于怎么提升用戶的行動(dòng)上。給其他同學(xué)看的時(shí)候可讀性也更好(不像我之前的流程圖，實(shí)際看的人沒幾個(gè))。

做的時(shí)候可能會(huì)比較痛苦，以往的流程只需要考慮狀態(tài)之間的跳轉(zhuǎn)就好，而這種方式增加了用戶可見內(nèi)容跟要用戶行動(dòng)的內(nèi)容。但這種工作量的增加是值得的，我自己在做練習(xí)的時(shí)候，就會(huì)時(shí)刻提醒自己不忘最后的目標(biāo)，這些信息是不是有助于提升用戶的點(diǎn)擊、哪些動(dòng)作要簡(jiǎn)化哪些要增加。

值得模仿的網(wǎng)站

作者提供了兩個(gè)在用戶流程方面很不錯(cuò)的網(wǎng)站作為學(xué)習(xí)對(duì)象，一個(gè)是tastebuds.fm，一個(gè)是codecademy，都不需要翻墻就能直接訪問。計(jì)算是花個(gè)5分鐘瀏覽一下，也能給你帶來不少的收獲哦。

1、https://tastebuds.fm//

2、https://www.codecademy.com/

作者：黎晨，英文名LC。00年開始接觸互聯(lián)網(wǎng)，可是很年輕。在互聯(lián)網(wǎng)牛市造福浪潮中連小小的牛尾巴都沒沾到，不過，我會(huì)繼續(xù)努力的。

來源：微信公眾號(hào)【黎小晨想太多】