上一篇文章，我們主要溝通了，需求與界面之間存在著距離，這個(gè)距離就是設(shè)計(jì)規(guī)劃階段。當(dāng)越過(guò)這段距離，就來(lái)到了我們產(chǎn)品經(jīng)理最為熟悉的環(huán)節(jié)—原型設(shè)計(jì)。原型是承載著我們?cè)O(shè)計(jì)思想的產(chǎn)物。今天，就讓我們系統(tǒng)地來(lái)總結(jié)一下，抽象的設(shè)計(jì)思想，怎樣才能夠更好地通過(guò)具象的原型表達(dá)出來(lái)。

大家還記得設(shè)計(jì)規(guī)劃階段的內(nèi)容步驟嗎？讓我們先來(lái)簡(jiǎn)單回顧一下吧，因?yàn)樵驮O(shè)計(jì)是建立在設(shè)計(jì)規(guī)劃的基礎(chǔ)之上，今天的許多內(nèi)容都與上一期的知識(shí)緊密相關(guān)：

根據(jù)需求來(lái)設(shè)計(jì)相關(guān)的信息和任務(wù)，通過(guò)組織信息結(jié)構(gòu)、引導(dǎo)用戶完成任務(wù)得到一系列相關(guān)聯(lián)的界面草圖；

然后細(xì)化草圖為具體界面，在這個(gè)過(guò)程中考慮如何讓用戶輕松、愉悅、高效地瀏覽和操作；

最后，我們要賦予界面一些魔力，讓用戶難以忘記使用產(chǎn)品的體驗(yàn)。

追根溯源地去探究一些本質(zhì)的東西，才能夠讓我們?cè)谒械木駬衩媲斑M(jìn)行理性地判斷，而不是依靠生物的本能反應(yīng)，或者只是簡(jiǎn)單地執(zhí)行命令。

今天的第一個(gè)話題，讓我們先來(lái)探究一下原型的意義之所在。

重要性

原型可以說(shuō)是我們產(chǎn)品經(jīng)理最主要的產(chǎn)出之一了，尤其是對(duì)于初級(jí)產(chǎn)品經(jīng)理來(lái)說(shuō)，畫(huà)原型，或許占據(jù)了自身工作的大部分時(shí)間和精力。

但歸根結(jié)底，原型只是我們?cè)O(shè)計(jì)思想可視化的呈現(xiàn)。從這一層面來(lái)說(shuō)，原型本身并沒(méi)有那么重要，重要的是我們的設(shè)計(jì)思想，是每一次設(shè)計(jì)決策的過(guò)程。

畫(huà)原型的工作，就好比將橙子榨成橙汁的過(guò)程，如果把畫(huà)原型當(dāng)做我們主要工作的話，那我們只不過(guò)是一個(gè)榨汁的“工人”，這種“工人”是隨時(shí)可以被替換的。

而設(shè)計(jì)決策的過(guò)程，就好比我們通過(guò)用戶調(diào)研，能夠判斷出用戶更喜歡的是橙子，而非蘋(píng)果，進(jìn)而我們接下來(lái)要榨的是橙汁，而非蘋(píng)果汁。這才是產(chǎn)品經(jīng)理安身立命的根本之所在。

必要性

既然原型并沒(méi)有那么重要，那我們還畫(huà)它，或者說(shuō)耗費(fèi)精力來(lái)畫(huà)好它有什么意義呢？

雖然原型本身沒(méi)有那么重要，但它卻是必要的，其必要性存在于兩方面。

一方面是因?yàn)樵俸玫脑O(shè)計(jì)思想，也需要合適的載體去呈現(xiàn)，不然只是空洞的想法，即使這個(gè)想法再好，再驚世駭俗，恐怕也會(huì)讓人覺(jué)得虛無(wú)縹緲、難以落地。

另一方面是因?yàn)椋趯?shí)際工作中，原型會(huì)流轉(zhuǎn)于業(yè)務(wù)部、設(shè)計(jì)部、研發(fā)部等各個(gè)部門(mén)，它是項(xiàng)目開(kāi)發(fā)的標(biāo)準(zhǔn)和依據(jù)。如果表達(dá)不清晰，那么在各個(gè)環(huán)節(jié)的流動(dòng)過(guò)程中，就可能出現(xiàn)“蝴蝶效應(yīng)”，對(duì)項(xiàng)目造成極大的影響。

結(jié)論：原型本身并沒(méi)有那么重要，重要的是我們的設(shè)計(jì)思想；但原型又是必要存在的，它是項(xiàng)目開(kāi)發(fā)的標(biāo)準(zhǔn)和依據(jù)。

生活中，我們會(huì)經(jīng)常提及一個(gè)詞語(yǔ)：“換位思考”。

原型既然是一個(gè)在不同人員之間流轉(zhuǎn)的產(chǎn)物，那我們不妨也從傳遞者和接收者的不同角度來(lái)梳理一下，傳遞者想要傳遞一些什么樣的信息，以及接收者想要接收一些什么樣的信息。

1. 傳遞者

關(guān)于“靜態(tài)的界面樣式”，以及“動(dòng)態(tài)的操作效果”，我們?cè)谏弦黄恼轮幸呀?jīng)溝通了“信息擺放原則”、“任務(wù)引導(dǎo)原則”以及“捕獲用戶放心的八種方法”。

另外，在之前的文章《以“封裝”的思維，來(lái)做原型》，也做過(guò)專門(mén)性的總結(jié)。

我會(huì)在本文結(jié)尾處加上相關(guān)鏈接，大家可自行查閱。

這里呢，我們需要重點(diǎn)溝通一下第三個(gè)方面：“隱藏的邏輯說(shuō)明”。

（1）限制：包括范圍值、極限值。

范圍值：主要指數(shù)據(jù)的取值范圍。比如下拉菜單、篩選按鈕等，我們?cè)谠蜕闲铇?biāo)注清楚它們的選擇范圍。

極限值：主要指數(shù)據(jù)的顯示范圍。比如，文本框的一行最多可以顯示多少字?jǐn)?shù)，超過(guò)這個(gè)字?jǐn)?shù)時(shí)，是換行，還是用“...”顯示。

（2）狀態(tài)：包括默認(rèn)狀態(tài)、常見(jiàn)狀態(tài)、特殊狀態(tài)。

默認(rèn)狀態(tài)：主要指默認(rèn)顯示的文字、數(shù)據(jù)、選項(xiàng)等。比如搜索框中通常默認(rèn)展示查詢條件“請(qǐng)輸入xxx?！?/p>

常見(jiàn)狀態(tài)：主要指對(duì)于某一個(gè)模塊，經(jīng)常遇到的一些狀態(tài)。比如積分模塊，常見(jiàn)的狀態(tài)包括未登錄狀態(tài)，登錄后未簽到狀態(tài)，登錄后已簽到狀態(tài)。

特殊狀態(tài)：主要指非正常情況下的樣式、文案、說(shuō)明等。比如數(shù)據(jù)加載失敗時(shí)，界面展示背景圖，并加上文案提示：“加載失敗了，下拉刷新試試吧”。

（3）操作：包括常見(jiàn)操作、特殊操作、錯(cuò)誤操作、手勢(shì)操作。

常見(jiàn)操作：主要指正常操作時(shí)得到的反饋狀態(tài)。比如分頁(yè)控件，常見(jiàn)的“鼠標(biāo)懸停”、“鼠標(biāo)按下”的效果。

特殊操作：主要指一些極端情況下的操作。一般用戶不會(huì)這么操作，但是一旦遇到極端情況，還是要想好應(yīng)對(duì)措施，因?yàn)閷?duì)開(kāi)發(fā)人員來(lái)說(shuō)，不管是正常的還是極端的操作情況，他們都要去編寫(xiě)對(duì)應(yīng)的代碼。比如類似于微信的功能，用戶添加自己為好友時(shí)該怎么辦。

錯(cuò)誤操作：主要指用戶操作錯(cuò)誤時(shí)的情況。首先我們應(yīng)當(dāng)根據(jù)防錯(cuò)法則，盡量避免用戶出現(xiàn)錯(cuò)誤。如果有些錯(cuò)誤無(wú)法規(guī)避，或者是遺漏了，比如庫(kù)存數(shù)量只剩下5件的時(shí)候，用戶購(gòu)買時(shí)輸入了數(shù)字6，這時(shí)應(yīng)該怎么辦，需要在原型上說(shuō)明清楚。

手勢(shì)操作：主要指用戶使用移動(dòng)產(chǎn)品時(shí)的操作方式。常見(jiàn)的手勢(shì)包括點(diǎn)擊、滑動(dòng)、拖動(dòng)、放大、縮小、長(zhǎng)按、雙擊、橫掃、搖晃等。

（4）反饋：包括提示、跳轉(zhuǎn)、動(dòng)畫(huà)。

提示：主要指操作后，系統(tǒng)反饋給用戶的文字說(shuō)明。比如在手機(jī)號(hào)的輸入框中，輸入了非11位的數(shù)字，這時(shí)需給出提示信息“格式輸入錯(cuò)誤”。

跳轉(zhuǎn)：主要指點(diǎn)擊某個(gè)鏈接后，頁(yè)面跳轉(zhuǎn)到哪里。原型上需注明跳轉(zhuǎn)時(shí)是“原頁(yè)面刷新”還是“新頁(yè)面打開(kāi)”。

動(dòng)畫(huà)：主要指用戶操作后，系統(tǒng)通過(guò)動(dòng)畫(huà)的方式反饋給用戶。尤其是對(duì)于沒(méi)有專業(yè)交互設(shè)計(jì)師的團(tuán)隊(duì)來(lái)說(shuō)，產(chǎn)品經(jīng)理和前端工程師應(yīng)該共同承擔(dān)起這部分工作。

Axure中提供了9種常見(jiàn)的動(dòng)畫(huà)：逐漸、向右滑動(dòng)、向左滑動(dòng)、向上滑動(dòng)、向下滑動(dòng)、向右翻轉(zhuǎn)、向左翻轉(zhuǎn)、向上翻轉(zhuǎn)、向下翻轉(zhuǎn)。

2. 接收者

對(duì)于接收者來(lái)說(shuō)，除了傳遞者提供了三方面內(nèi)容以外，還需要了解“修訂記錄”、“信息結(jié)構(gòu)”、以及“任務(wù)流程”。

（1）修訂記錄

產(chǎn)品的設(shè)計(jì)并非一蹴而就的，通常需要通過(guò)多次的評(píng)審與修改，尤其是對(duì)于大型的項(xiàng)目而言，更是如此。有可能每一次更新迭代的內(nèi)容，還需要牽扯之前內(nèi)容的改動(dòng)。

那么對(duì)于接收人來(lái)說(shuō)，更愿意明確地看到哪些地方進(jìn)行了修改，然后重點(diǎn)關(guān)注這部分內(nèi)容就可以了。這個(gè)時(shí)候修訂記錄就顯得非常有必要了。

修訂記錄通常包含內(nèi)容如下：

注：對(duì)于版本號(hào)，我個(gè)人的習(xí)慣是，評(píng)審?fù)ㄟ^(guò)的版本用一級(jí)標(biāo)題表示，例如“v1.1”；對(duì)于過(guò)程中完善細(xì)節(jié)的版本，用次級(jí)標(biāo)題表示，例如“v1.1.1”。

（2）信息結(jié)構(gòu)和任務(wù)流程

而對(duì)于信息結(jié)構(gòu)和任務(wù)流程，是我們?cè)谠O(shè)計(jì)規(guī)劃階段的產(chǎn)物。對(duì)于接收人同樣也是需要從整體到局部地來(lái)理解產(chǎn)品的設(shè)計(jì)。不然的話，一頭扎進(jìn)細(xì)節(jié)當(dāng)中，免不了會(huì)陷入盲人摸象、管中窺豹的誤區(qū)。

在我們畫(huà)原型時(shí)，有這樣四條技巧或者說(shuō)是注意事項(xiàng)，可以提高我們?cè)诠ぷ鲄f(xié)同過(guò)程中的效率。

1. 利用明暗對(duì)比與字號(hào)大小表達(dá)主次關(guān)系

界面中哪些元素需要重點(diǎn)展示，或者是哪些信息需要突出呈現(xiàn)，我們可以通過(guò)顏色的明暗對(duì)比與字號(hào)的大小對(duì)比來(lái)進(jìn)行表達(dá)。

2. 不要把色彩呈現(xiàn)考慮到原型當(dāng)中

此項(xiàng)內(nèi)容與第一條的表達(dá)并不矛盾。因?yàn)檫@里的色彩，主要是指視覺(jué)效果的色彩。

專業(yè)化分工的目的，是為了提高生產(chǎn)效率。作為產(chǎn)品經(jīng)理，如果也去考慮色彩呈現(xiàn)的話，結(jié)果無(wú)非是既沒(méi)有UI做的專業(yè)，又限制了UI的思維。

原型圖，最好是灰白相間的。其中就算是包含色彩，也是邏輯層面的色彩，例如用戶點(diǎn)擊錯(cuò)誤，出現(xiàn)紅色的提示信息，這個(gè)是需要我們?cè)谠椭羞M(jìn)行表達(dá)的。至于這個(gè)紅色的色號(hào)是多少，甚至是到底用不用紅色，這個(gè)仍舊是由UI進(jìn)行決策。

3. 重要的信息在第一屏進(jìn)行展示

最重要的內(nèi)容，尤其是操作按鈕，一定要在第一屏內(nèi)展示完，否則用戶第一眼看不到，就有可能放棄這個(gè)頁(yè)面。

這里給出一個(gè)數(shù)據(jù)供參考：在1024像素 x 768像素的分辨率下，第一屏高度可定為600像素。這里能夠讓我們感受到第一屏展示的內(nèi)容即可，至于具體像素的把控，當(dāng)然還是UI設(shè)計(jì)師的專業(yè)領(lǐng)域。

4. 盡量使用真實(shí)符合邏輯的數(shù)據(jù)內(nèi)容

界面上的文案隨便填充，僅做示意用，這對(duì)產(chǎn)品經(jīng)理來(lái)說(shuō)可能會(huì)覺(jué)得很正常，但是把這些內(nèi)容交付給UI或者開(kāi)發(fā)時(shí)，就有可能產(chǎn)生諸多疑問(wèn)。

例如購(gòu)物結(jié)算的界面設(shè)計(jì)中，如果界面數(shù)據(jù)隨便填充，比如“單價(jià)”、“優(yōu)惠”、“數(shù)量”、“合計(jì)”四個(gè)字段下的數(shù)據(jù)隨意填充，就有可能讓開(kāi)發(fā)對(duì)于幾項(xiàng)數(shù)據(jù)的邏輯關(guān)系產(chǎn)生誤解。

文章結(jié)束之前，讓我們?cè)俣嗔囊粋€(gè)話題吧，也就是原型的規(guī)范或者是說(shuō)標(biāo)準(zhǔn)組件庫(kù)的問(wèn)題。

規(guī)范性能夠給我們帶來(lái)的好處不言而喻。

對(duì)于用戶來(lái)說(shuō)：一致的風(fēng)格，能夠形成鮮明的產(chǎn)品特征，增強(qiáng)用戶粘度；

對(duì)于團(tuán)隊(duì)來(lái)說(shuō)：降低了培訓(xùn)成本，使新人也能夠快速地融入到工作當(dāng)中；

對(duì)于自己來(lái)說(shuō)：避免重復(fù)勞動(dòng)，減少犯錯(cuò)幾率，大大提高工作效率。

如果你所在的團(tuán)隊(duì)，或者是你自己，還沒(méi)有建立原型規(guī)范或者是標(biāo)準(zhǔn)組件庫(kù)的話，那就從現(xiàn)在開(kāi)始行動(dòng)吧。

在當(dāng)今社會(huì)，知識(shí)的應(yīng)用性或許比創(chuàng)造性更加重要，從0到1地建立自己的組件庫(kù)，倒不如從互聯(lián)網(wǎng)界現(xiàn)有的組件庫(kù)中，篩選出適合自己的，來(lái)的更加直接與高效。

我也在自己公眾號(hào)內(nèi)的“資料分享”模塊，分享了自己的原型組件庫(kù)，如有需要，可自取。

好了，以上就是今天的全部?jī)?nèi)容了，對(duì)于原型，或許每一個(gè)產(chǎn)品經(jīng)理也都要經(jīng)歷三重境界吧：“看山是山，看山不是山，看山還是山。”

今天的分享，可以看到，我們目前處在“看山不是山”的境界當(dāng)中。希望有朝一日，我們也能夠“看山還是山”

-END-