用戶體驗(yàn)設(shè)計(jì)之路(三):原型是設(shè)計(jì)的表達(dá)

3 評(píng)論 4389 瀏覽 29 收藏 16 分鐘

上一篇文章,我們主要溝通了,需求與界面之間存在著距離,這個(gè)距離就是設(shè)計(jì)規(guī)劃階段。當(dāng)越過這段距離,就來到了我們產(chǎn)品經(jīng)理最為熟悉的環(huán)節(jié)—原型設(shè)計(jì)。

原型是承載著我們?cè)O(shè)計(jì)思想的產(chǎn)物。今天,就讓我們系統(tǒng)地來總結(jié)一下,抽象的設(shè)計(jì)思想,怎樣才能夠更好地通過具象的原型表達(dá)出來。

一、內(nèi)容回顧

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

  • 根據(jù)需求來設(shè)計(jì)相關(guān)的信息和任務(wù),通過組織信息結(jié)構(gòu)、引導(dǎo)用戶完成任務(wù)得到一系列相關(guān)聯(lián)的界面草圖;
  • 然后細(xì)化草圖為具體界面,在這個(gè)過程中考慮如何讓用戶輕松、愉悅、高效地瀏覽和操作;
  • 最后,我們要賦予界面一些魔力,讓用戶難以忘記使用產(chǎn)品的體驗(yàn)。

二、原型的意義

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

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

1. 重要性

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

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

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

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

2. 必要性

既然原型并沒有那么重要,那我們還畫它,或者說耗費(fèi)精力來畫好它有什么意義呢?

雖然原型本身沒有那么重要,但它卻是必要的,其必要性存在于兩方面。

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

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

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

三、原型的內(nèi)容

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

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

1. 傳遞者

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

另外,在之前的文章《以“封裝”的思維,來做原型》,也做過專門性的總結(jié)。

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

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

(1)限制:包括范圍值、極限值。

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

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

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

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

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

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

(3)操作:包括常見操作、特殊操作、錯(cuò)誤操作、手勢(shì)操作。

常見操作:

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

特殊操作:

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

錯(cuò)誤操作:

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

手勢(shì)操作:

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

(4)反饋:包括提示、跳轉(zhuǎn)、動(dòng)畫。

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

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

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

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

2. 接收者

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

(1)修訂記錄

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

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

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

注:對(duì)于版本號(hào),我個(gè)人的習(xí)慣是,評(píng)審?fù)ㄟ^的版本用一級(jí)標(biāo)題表示,例如“v1.1”;對(duì)于過程中完善細(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ì)于接收人同樣也是需要從整體到局部地來理解產(chǎn)品的設(shè)計(jì)。不然的話,一頭扎進(jìn)細(xì)節(jié)當(dāng)中,免不了會(huì)陷入盲人摸象、管中窺豹的誤區(qū)。

四、原型的技巧

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

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

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

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

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

專業(yè)化分工的目的,是為了提高生產(chǎn)效率。作為產(chǎn)品經(jīng)理,如果也去考慮色彩呈現(xiàn)的話,結(jié)果無非是既沒有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è)頁面。

這里給出一個(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)理來說可能會(huì)覺得很正常,但是把這些內(nèi)容交付給UI或者開發(fā)時(shí),就有可能產(chǎn)生諸多疑問。

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

五、結(jié)語

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

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

  • 對(duì)于用戶來說:一致的風(fēng)格,能夠形成鮮明的產(chǎn)品特征,增強(qiáng)用戶粘度;
  • 對(duì)于團(tuán)隊(duì)來說:降低了培訓(xùn)成本,使新人也能夠快速地融入到工作當(dāng)中;
  • 對(duì)于自己來說:避免重復(fù)勞動(dòng),減少犯錯(cuò)幾率,大大提高工作效率。

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

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

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

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

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

下一期讓我們繼續(xù)聊一聊原型評(píng)審那些事兒,不見不散。

相關(guān)閱讀

用戶體驗(yàn)設(shè)計(jì)之路(二)需求到界面的距離

以“封裝”的思維,來做原型

#專欄作家#

曉莊同學(xué);公眾號(hào):曉莊同學(xué)產(chǎn)品筆記,人人都是產(chǎn)品經(jīng)理專欄作家。智慧校園領(lǐng)域的B端產(chǎn)品經(jīng)理。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 有一點(diǎn)小小的不同意見,原型當(dāng)中一定要把一些業(yè)務(wù)規(guī)則進(jìn)行標(biāo)注嗎?從客戶角度來說,原型是最直觀輸出的東西,客戶在瀏覽的時(shí)候不會(huì)在意那些業(yè)務(wù)規(guī)則、數(shù)據(jù)范圍等細(xì)小的東西,他們只是看看流程、屬性、界面展示是否符合自己的要求,在前述都得到認(rèn)可的情況下,一些細(xì)節(jié)的業(yè)務(wù)規(guī)則是后續(xù)要一一確認(rèn)的事情。本來可以很簡潔的界面呈現(xiàn)給客戶,加上各種各樣的標(biāo)注后反而凌亂且不易讀。從研發(fā)角度來說,原型是研發(fā)過程的參照標(biāo)準(zhǔn)之一,僅僅作為可視化界面的標(biāo)準(zhǔn),很多復(fù)雜的業(yè)務(wù)邏輯判斷還是要通過文字進(jìn)行精準(zhǔn)描述,僅通過原型界面的標(biāo)注,空間有限,說不清道不明的東西太多了,并且界面的標(biāo)注東一塊西一塊,容易遺漏,倒不如文字一條一條將所有的邏輯判斷、數(shù)據(jù)范圍、權(quán)限控制等業(yè)務(wù)規(guī)則精準(zhǔn)表達(dá)。

    來自北京 回復(fù)
    1. 你這個(gè)回答也沒錯(cuò)。
      但對(duì)與錯(cuò)是要放在特定的環(huán)境當(dāng)中,就比如你說的第一種,如果原型的交付對(duì)象是客戶,那肯定不用太多細(xì)節(jié)的東西。但很多時(shí)候,原型的交付對(duì)象都是開發(fā)吧,如果是開發(fā),那就需要了。
      第二種情況,如果是大項(xiàng)目,那也沒問題,還得配一個(gè)專門的幾十頁甚至上百頁的PRD。如果是敏捷迭代的,一周一個(gè)版本的小項(xiàng)目,那PRD都可以沒有,直接原型+標(biāo)注的形式確實(shí)是ok的~

      來自河南 回復(fù)
    2. 感謝曉莊老師回復(fù)。哈哈哈哈哈,敏捷迭代的情況,我現(xiàn)在是結(jié)合禪道,在每一個(gè)拆分的需求里面把需求描述、規(guī)則什么的寫清楚。也是個(gè)辦法

      來自北京 回復(fù)