任何一個(gè)細(xì)小的設(shè)計(jì)，都可以做得很精彩。

設(shè)計(jì)師用了都說好的 Slack 究竟有何奧秘，今天我們就先從它完美的注冊(cè)體驗(yàn)講起。之所以說它完美，我覺得要?dú)w功于簡(jiǎn)潔的界面，順暢的流程，以及充滿心機(jī)的細(xì)節(jié)設(shè)計(jì)上。

為了讓文章更「干」，我將它的體驗(yàn)設(shè)計(jì)「小心機(jī)」歸納為四個(gè)部分:

一、第一印象很重要

注冊(cè)過程是產(chǎn)品和用戶的 first date，而注冊(cè)入口又是和用戶的 first sight，因此注冊(cè)入口就是給用戶留下好的第一印象的關(guān)鍵。

Slack 使用了全屏的氛圍圖，并用講實(shí)例的方式告訴你「如此牛逼的團(tuán)隊(duì)也在使用我們的產(chǎn)品」，這滿滿的格調(diào)會(huì)讓用戶迫切地想見識(shí)一下 Slack 的真面目呢。

非常簡(jiǎn)潔而有說服力的說明，伴隨著簡(jiǎn)單明了的步驟，讓用戶以為創(chuàng)建一個(gè)自己的賬號(hào)，僅需輸入郵箱這么簡(jiǎn)單的一個(gè)步驟，這么好的事還不快試試?

二、我的產(chǎn)品會(huì)說話

和用戶的互動(dòng)都是建立信任的過程，注冊(cè)時(shí)尤為重要。好的產(chǎn)品會(huì)像朋友一樣，讓用戶沒有壓力，產(chǎn)生安全感甚至依賴感。而這樣的一個(gè)朋友也一定是個(gè)會(huì)說話的朋友。

通常我們看到的注冊(cè)流程是這樣的:

單調(diào)乏味的表單，冰冷的人機(jī)交互，讓用戶覺得注冊(cè)填寫是一項(xiàng)任務(wù)。

而 Slack 是怎么做的呢：

Slack 注冊(cè)過程以對(duì)話的形式設(shè)計(jì)表單文案，一問一答，很生動(dòng)，「What’s your name?」 仿佛是和人一起交流，沒有任何認(rèn)知負(fù)擔(dān)，而且給用戶輕松愉快的使用體驗(yàn)。

另一個(gè)有情感化設(shè)計(jì)的細(xì)節(jié)是頁面下方用戶是否愿意接收郵件的欄目 。普通網(wǎng)頁的文案是這樣冷漠而機(jī)械:

而 Slack 的文案 是這樣：

括號(hào)中的「very occasional」很口語化，并有種稍帶撒嬌情緒的感覺，讓人無法拒絕(像筆者這種特別怕廣告郵件干擾的人都為之心軟保留了 check box 里的對(duì)勾呢)。

三、給你足夠的安全感

人機(jī)交互的過程中用戶總會(huì)因?yàn)椴挥押玫脑O(shè)計(jì)沒有安全感，尤其在填表單這種需要用戶大量輸入的場(chǎng)景下，安全感十分重要。Slack 富有安全感的設(shè)計(jì)細(xì)節(jié)：

1. 告訴用戶這個(gè) Team Name 之后還可以修改，所以不需要太過謹(jǐn)慎，不需要有太多的壓力。
2. 用實(shí)例清楚明了地告訴用戶你可以這樣填寫，即使用戶懶得閱讀前面的提示文字，也可以一眼看懂 team 命名規(guī)范。
3. 另外一點(diǎn)是 Slack 注冊(cè)整個(gè)流程中每一頁都只解決一個(gè)問題，而右邊大篇幅的界面都用縮略圖的形式告訴用戶你所填寫的這一項(xiàng)信息最后會(huì)應(yīng)用在哪里。這就很大程度上解決了用戶在認(rèn)知上的困惑，比如搞不清楚 user name 和 team name，等等。

這里插播一個(gè)反例：比如某注冊(cè)表單中各種名稱需要填寫，寶寶真的搞不清也懶得搞清楚這些名稱都是什么作用啊。

四、沒有懶的用戶，只有差的設(shè)計(jì)

用戶體驗(yàn)很多時(shí)候要包容用戶的惰性，讓用戶更舒服。正是有了懶人，才有了越來越多為懶人服務(wù)的工具，也才讓我們?nèi)祟愇拿鞲酉冗M(jìn)，懶人萬歲啊～Y(^o^)Y

回到正題，表單設(shè)計(jì)的一大原則就是盡量減少用戶的輸入，減少輸入有兩招：

1. 真的減少，即根據(jù)用戶習(xí)慣自動(dòng)填寫內(nèi)容
2. 心理上減少，比如通過界面信息布局設(shè)計(jì)讓用戶感覺需要填寫的信息很少，或通過讓用戶感受到輸入信息的必要性進(jìn)而減少用戶抵觸心理等。

Slack 就用到了這兩種。首先，填寫 web address 時(shí)自動(dòng)根據(jù)團(tuán)隊(duì)名稱填寫，允許用戶進(jìn)行修改。

另外，每一個(gè)頁面都僅僅解決一個(gè)問題，用整個(gè)頁面將這個(gè)問題詮釋得生動(dòng)貼切，左邊是問題和提示，右邊是大效果圖告訴你你所填的這一項(xiàng)內(nèi)容會(huì)用在哪里。

這樣的界面就形象地告訴了用戶「為什么你必須填這一項(xiàng)信息」，讓用戶從心理上對(duì)輸入信息沒有抵觸，也就在心理上減少了輸入負(fù)擔(dān)。

最后 Slack 的新用戶向?qū)Ш妥?cè)體驗(yàn)無縫銜接，給用戶了一個(gè)完整的流程閉環(huán)。

在新用戶向?qū)Ы缑?，除了氣泡?biāo)記提示之外，還有以對(duì)話形式的 slackbot，它可以解答新用戶的各種問題，在尋求幫助的同時(shí)，用戶也恰好體驗(yàn)了產(chǎn)品。

這整個(gè)「注冊(cè) – 向?qū)?– 使用」的流程讓人感覺緊密相連，沒有場(chǎng)景的生硬切換，而是環(huán)環(huán)相扣的順暢感。

雖然只是一個(gè)小小的注冊(cè)場(chǎng)景，但是卻有設(shè)計(jì)師大量的心思花在細(xì)節(jié)設(shè)計(jì)上。所以，任何一個(gè)細(xì)小的設(shè)計(jì)，都可以做得很精彩。共勉。

作者：春卷

來源：https://zhuanlan.zhihu.com/p/23327244

本文由 @春卷 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。