好的設(shè)計(jì)不僅能滿足用戶需求、提升易用性，還能彌補(bǔ)技術(shù)上的短板。在經(jīng)過(guò)一個(gè)產(chǎn)品從0到1的實(shí)現(xiàn)后，對(duì)這一點(diǎn)感受的尤其深刻。下面列出幾個(gè)我產(chǎn)品設(shè)計(jì)中的教訓(xùn)和收獲。

一、實(shí)現(xiàn)模型和心理模型

所謂實(shí)現(xiàn)模型，是指從開(kāi)發(fā)人員角度出發(fā)，頁(yè)面的每一個(gè)功能點(diǎn)都與后臺(tái)代碼模塊邏輯一致的模型。這種模型的好處是每一個(gè)按鈕和數(shù)據(jù)的輸入字段都體現(xiàn)了工程上的基礎(chǔ)構(gòu)造，方便研發(fā)人員針對(duì)性的調(diào)整。但缺點(diǎn)是這種模型下的“設(shè)計(jì)”并非“用戶導(dǎo)向”的，容易讓用戶產(chǎn)生迷惑感，最典型的是我們經(jīng)常看到的“錯(cuò)誤404”。

對(duì)于大部分軟件產(chǎn)品而言，后臺(tái)實(shí)現(xiàn)模型復(fù)雜而難以理解，而且了解其對(duì)幫助大部分用戶如何更好的使用產(chǎn)品并無(wú)實(shí)質(zhì)性幫助?！督换ピO(shè)計(jì)精髓》提到“人們使用產(chǎn)品時(shí)，不需要了解復(fù)雜機(jī)制工作原理的所有細(xì)節(jié)，因此可創(chuàng)造出一種快捷的認(rèn)知方式來(lái)解釋復(fù)雜的機(jī)制。這種方式足以應(yīng)付人們與產(chǎn)品的交互，但不一定能夠反映產(chǎn)品實(shí)際的內(nèi)部工作機(jī)制。”建立一個(gè)以用戶為導(dǎo)向的“心理模型”（mental model）或者“概念模型”（conceptual model）顯得格外必要。

首先，心理模型實(shí)質(zhì)上提供了一個(gè)用戶按照產(chǎn)品機(jī)制和規(guī)則進(jìn)行操作的理由。哈佛社會(huì)心理學(xué)家艾倫蘭格（Ellen Langer）曾做過(guò)一個(gè)實(shí)現(xiàn)：

圖書(shū)館打印插隊(duì)如果不給出理由則此行為被接受的概率為60%；如果給出一個(gè)理解則此行為被接受的概率為94%；甚至在解釋原因時(shí)只提供“因?yàn)椤倍鵁o(wú)實(shí)質(zhì)原因的情況下，此行為被接受的概率竟然為“93%”。足見(jiàn)，“人就是單純地喜歡做事有個(gè)理由”。那么，產(chǎn)品與用戶“交流”時(shí)，就需要有個(gè)“理由”讓用戶看到自己行為操作與產(chǎn)品回應(yīng)之間的解釋，從而順應(yīng)操作規(guī)則從而更好的使用產(chǎn)品。

其次，心理模型解決了部分用戶“好奇心”問(wèn)題。每個(gè)人都有好奇心，用戶并不關(guān)心后臺(tái)情況如何，它真正關(guān)心的是這段時(shí)間機(jī)器在做什么，很好地解決了用戶的好奇心可以讓用戶快速了解產(chǎn)品，降低學(xué)習(xí)成本和記憶成本，將更多的注意力放在更重要的操作層面，更好地使用產(chǎn)品。

比如，我們研發(fā)的產(chǎn)品有一個(gè)批量添加企業(yè)名稱的功能（300家企業(yè)/次），這個(gè)功能上傳到后臺(tái)需要進(jìn)行一系列處理從而實(shí)現(xiàn)其他核心功能，整體耗時(shí)較長(zhǎng)，經(jīng)過(guò)后臺(tái)性能測(cè)試耗時(shí)情況如下：

后臺(tái)性能統(tǒng)計(jì)情

從上表可知，添加企業(yè)數(shù)目與耗時(shí)之間成正相關(guān)，由此推算用戶一次添加300家企業(yè)等待時(shí)間過(guò)長(zhǎng)，用戶和系統(tǒng)都有隨時(shí)崩潰的危險(xiǎn)。為了優(yōu)化用戶體驗(yàn)，我提出三個(gè)方案：

• 方案一：直接降低用戶等待時(shí)間，具體實(shí)現(xiàn)方式為優(yōu)先上傳響應(yīng)，核心功能后臺(tái)運(yùn)轉(zhuǎn)實(shí)現(xiàn)；
• 方案二：讓用戶感覺(jué)等待時(shí)間短，具體實(shí)現(xiàn)方式包括游戲等分散注意力；
• 方案三：讓用戶獲得等待理由，具體實(shí)現(xiàn)方式是心理模型。

經(jīng)過(guò)對(duì)客戶使用場(chǎng)景分析，客戶往往在添加完企業(yè)以后會(huì)產(chǎn)生即刻查看企業(yè)信息的行為，最終采用方案三，交互設(shè)計(jì)通過(guò)滾動(dòng)條的形式實(shí)現(xiàn)，詳情見(jiàn)下圖：

上傳進(jìn)度條圖片：用戶可以獲知后臺(tái)這段時(shí)間在做什么，但實(shí)際情況并不一定如此。

告訴用戶一個(gè)合理的理由，他們就會(huì)耐心的等待。在后續(xù)的客戶反饋中，這個(gè)批量上傳功能從未收到抱怨，而且好評(píng)不斷。

與以上類似的心智模型還有Foxmail收取郵件時(shí)的效果：點(diǎn)擊收取郵件，會(huì)彈出對(duì)話框進(jìn)度條，進(jìn)度條上的文字會(huì)從正在驗(yàn)證、正在檢查郵件列表、到任務(wù)成功完成逐漸變化，告知用戶后臺(tái)機(jī)器運(yùn)轉(zhuǎn)邏輯。

正在驗(yàn)證

正在檢查郵件列表

任務(wù)成功完成

二、用戶是設(shè)計(jì)的基礎(chǔ)和來(lái)源

剛開(kāi)始做交互設(shè)計(jì)工作時(shí)，經(jīng)常產(chǎn)生在需求和設(shè)計(jì)稿之間卡住的情況。后來(lái)發(fā)現(xiàn)，大腦之所以產(chǎn)生這種“撕裂和痛苦”感，因?yàn)樽约涸诮换ピO(shè)計(jì)之前跳過(guò)了非常關(guān)鍵的步驟：用戶調(diào)研！在產(chǎn)品設(shè)計(jì)的時(shí)候需要考慮兩方面的內(nèi)容，分別是功能和數(shù)據(jù)。而每一方面的設(shè)計(jì)都來(lái)源于用戶。這一點(diǎn)在我從0到1的產(chǎn)品設(shè)計(jì)中體會(huì)最為深刻。

開(kāi)始的時(shí)候，由于對(duì)客戶場(chǎng)景了解不夠透徹，在模塊構(gòu)建的時(shí)候比較混亂。很容易產(chǎn)生各個(gè)功能之間斷裂感。隨著用戶調(diào)研和場(chǎng)景的明晰，流程圖的繪制，產(chǎn)品各個(gè)功能之間的模塊化聚合程度逐漸加強(qiáng)，再次進(jìn)行設(shè)計(jì)和模塊劃分時(shí)就變得相對(duì)輕松和容易。比如，對(duì)于金融機(jī)構(gòu)的信貸業(yè)務(wù)深入了解發(fā)現(xiàn)，其業(yè)務(wù)場(chǎng)景可分為貸前審查、貸后監(jiān)控兩方面。知道這兩個(gè)場(chǎng)景以后，根據(jù)這2個(gè)場(chǎng)景再次細(xì)分，功能模塊也就清晰的浮出水面了。

再比如，產(chǎn)品beta1.0推出以后，一些用戶反饋在他們的電腦上不能正常使用。開(kāi)始以為是個(gè)性問(wèn)題。隨著用戶反饋增加，對(duì)這個(gè)問(wèn)題開(kāi)始重視起來(lái)。為此，我們針對(duì)用戶（銀行金融機(jī)構(gòu)）使用瀏覽器進(jìn)行了調(diào)研。

銀行金融機(jī)構(gòu)瀏覽器調(diào)研使用情況

從調(diào)研結(jié)果可以發(fā)現(xiàn)：

1. 目標(biāo)用戶電腦設(shè)備更新速度慢，部分常用瀏覽器仍為IE8.0
2. 部分用戶電腦不能上外網(wǎng)
3. 部分用戶安裝其他瀏覽器或者使用外網(wǎng)需要額外申請(qǐng)
4. 技術(shù)部分負(fù)責(zé)設(shè)備更新工作

然而，我們產(chǎn)品瀏覽器兼容的IE的版本為IE11.O及以上（見(jiàn)下圖）。由于瀏覽器版本問(wèn)題，導(dǎo)致部分客戶在使用體驗(yàn)上大打折扣。

產(chǎn)品適用瀏覽器及版本情況

所以說(shuō)，在產(chǎn)品設(shè)計(jì)之初要對(duì)目標(biāo)用戶進(jìn)行詳實(shí)的調(diào)研和分析，以客戶為核心向外發(fā)散開(kāi)來(lái)逐漸細(xì)化。以此產(chǎn)品的金融機(jī)構(gòu)為例，需要詳細(xì)了解用戶基本情況（年齡、學(xué)歷、知識(shí)水平、性別、興趣愛(ài)好、家庭情況、工作時(shí)間、使用工具、操作系統(tǒng)、瀏覽器及版本號(hào)、操作習(xí)慣、操作時(shí)間和時(shí)長(zhǎng)等）、用戶所在部門情況、用戶的領(lǐng)導(dǎo)及上下級(jí)關(guān)系、用戶所在組織機(jī)構(gòu)情況、用戶的客戶情況等等。

正所謂“解鈴還須系鈴人”，用戶是設(shè)計(jì)的基礎(chǔ)和來(lái)源，當(dāng)設(shè)計(jì)思路打結(jié)時(shí)，不妨擁抱用戶，你會(huì)發(fā)現(xiàn)驚喜。

三、設(shè)計(jì)原則：為常見(jiàn)的導(dǎo)航調(diào)整界面

在交互設(shè)計(jì)中，經(jīng)常會(huì)遇到功能和部件擺放的問(wèn)題。剛開(kāi)始做的時(shí)候，我掉進(jìn)了一個(gè)誤區(qū)，就是太過(guò)于害怕產(chǎn)品需求變更和技術(shù)實(shí)現(xiàn)問(wèn)題：：產(chǎn)品經(jīng)理是否還需要添加新的功能/部件，頁(yè)面布局時(shí)是否要考慮為新功能留出位置？ 如果再改頁(yè)面會(huì)不會(huì)涉及前端設(shè)計(jì)需求變更？

由于以上擔(dān)心，讓我的設(shè)計(jì)偏離了用戶，導(dǎo)致出現(xiàn)了將全部功能都隱藏起來(lái)的設(shè)計(jì)。

在獲得多個(gè)用戶的反饋和對(duì)后臺(tái)數(shù)據(jù)顯示的利用效率情況分析后，我開(kāi)始反思：面臨這種問(wèn)題，交互設(shè)計(jì)師不能憑空猜測(cè)，而是要深入用戶使用場(chǎng)景和流程之中，并通過(guò)調(diào)研最終確定。

《交互設(shè)計(jì)精髓》中曾提到，要為永遠(yuǎn)的中級(jí)用戶設(shè)計(jì)。也就是說(shuō)，在進(jìn)行功能和部件設(shè)計(jì)時(shí)，要針對(duì)占絕大多數(shù)的中級(jí)用戶進(jìn)行調(diào)研。調(diào)研內(nèi)容包括：

1. 產(chǎn)品使用流程，重點(diǎn)關(guān)注和細(xì)化設(shè)計(jì)功能和部件的使用流程
2. 每個(gè)功能/部件使用頻率
3. 每個(gè)功能/部件使用場(chǎng)景

根據(jù)以上調(diào)研結(jié)果進(jìn)行交互設(shè)計(jì)，確定各個(gè)功能/部件顯示或者隱藏的優(yōu)先級(jí)，“將用戶經(jīng)常使用的功能和部件放在最直接和便利的位置，比如工具條或組建箱。不太經(jīng)常使用的功能則深藏在用戶不會(huì)踏足的界面深處。那些不太經(jīng)常使用卻對(duì)用戶很重要的功能可以安全地隱藏在菜單、對(duì)話框或者抽屜里，只在需要的時(shí)候被提取。（來(lái)自《交互設(shè)計(jì)精髓》）”

而對(duì)于一開(kāi)始的擔(dān)心，交互設(shè)計(jì)師應(yīng)該一開(kāi)始就和產(chǎn)品經(jīng)理進(jìn)行溝通，或者讓其給出產(chǎn)品規(guī)劃方案，確定大致的需求和產(chǎn)品流程。但無(wú)論產(chǎn)品如何規(guī)劃，作為一名“交互設(shè)計(jì)師”需要首先考慮的是用戶使用場(chǎng)景，而非需求和技術(shù)實(shí)現(xiàn)。只要設(shè)計(jì)是基于用戶使用場(chǎng)景和頻次，即便日后有再多的需求也不會(huì)變動(dòng)過(guò)大。

本文由 @召陽(yáng)大發(fā) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。