@Akane_Lee ：很多項(xiàng)目在開(kāi)發(fā)過(guò)程中，會(huì)制作原型測(cè)試與驗(yàn)證構(gòu)想。但項(xiàng)目開(kāi)發(fā)會(huì)經(jīng)過(guò)許多階段，也有很多種制原型的方式。該如何配合項(xiàng)目開(kāi)發(fā)進(jìn)度，制作適合的 原型呢？這篇文章列出了每一個(gè)設(shè)計(jì)階段對(duì)應(yīng)的原型設(shè)計(jì)，能解決不少設(shè)計(jì)師的困惑。

原型用途

開(kāi)發(fā)者對(duì)于產(chǎn)品一定有各式各樣的想法，并盡力讓用戶覺(jué)得產(chǎn)品「好用」。但開(kāi)發(fā)者該如何確定目前產(chǎn)品設(shè)計(jì)走向能讓用戶覺(jué)得好用？可透過(guò)「使用者測(cè)試」這個(gè)方法驗(yàn)證。我們可以透過(guò)原型測(cè)試用戶想透過(guò)產(chǎn)品完成某項(xiàng)任務(wù)時(shí)，需經(jīng)過(guò)哪些頁(yè)面的流程；觀察使用者在操作過(guò)程中是否有感到任何不順或遲疑的地方等等。

有些文獻(xiàn)將原型分成低保真、高保真等等。我將原型粗分成：

1. 紙本 原型
2. Wireframe
3. Mockup
4. Web
5. Code

每一種 原型 用途、制作方法、成本、使用時(shí)機(jī)都不相同，各有利弊。

編者按：2012年的Spotify 設(shè)計(jì)團(tuán)隊(duì)還是一團(tuán)亂麻，到今天已經(jīng)是協(xié)同效率，有標(biāo)準(zhǔn)可循的頂尖團(tuán)隊(duì)。來(lái)看這位總監(jiān)如何從零開(kāi)始改善它的。

歡迎關(guān)注譯者的微信公眾號(hào)：「非科班設(shè)計(jì)」

“設(shè)計(jì)無(wú)法標(biāo)準(zhǔn)化”在過(guò)去四年一直困擾著我。2012年我加入Spotify設(shè)計(jì)團(tuán)隊(duì)的時(shí)候，被當(dāng)時(shí)的混亂與分散嚇到了。說(shuō)得詳細(xì)點(diǎn)，字體、色彩、圖片、板式、信息架構(gòu)和交互方式好像全部都沒(méi)有能夠遵循的標(biāo)準(zhǔn)。

當(dāng)我開(kāi)始跟他們談?wù)撨@件事時(shí)，我才知道整個(gè)團(tuán)隊(duì)也為此覺(jué)得沮喪。我們的結(jié)論是：支離破碎的產(chǎn)品恰巧反映這個(gè)團(tuán)隊(duì)的松散，設(shè)計(jì)師分散在不同的項(xiàng)目、時(shí)區(qū)和漫無(wú)目標(biāo)的時(shí)程表，當(dāng)然不可能有任何機(jī)會(huì)去改善。

可是，這些原因在現(xiàn)代科技公司不是很常見(jiàn)嗎？所以我第一次說(shuō)出：“設(shè)計(jì)無(wú)法標(biāo)準(zhǔn)化”。

編者按：很多同學(xué)不清楚交互設(shè)計(jì)師是做什么的，也不知道如何評(píng)價(jià)一個(gè)App 的交互，不過(guò)看完這篇你就懂啦。

一、交互設(shè)計(jì)師的價(jià)值

1. 職能價(jià)值

將需求轉(zhuǎn)化為解決方案的能力（將模糊抽象的需求轉(zhuǎn)化成清晰具體的可視化解決方案）。

這個(gè)價(jià)值是最基本的專業(yè)價(jià)值，但你千萬(wàn)不要覺(jué)得你做的僅僅是用軟件畫幾個(gè)頁(yè)面而已。

例如你接到一個(gè)掃碼申請(qǐng)加入群聊的需求，你的任務(wù)不只是將申請(qǐng)加入的頁(yè)面畫出來(lái)，而是要考慮整個(gè)用戶場(chǎng)景，就比如用戶申請(qǐng)入群后，如果審批人沒(méi)有拒絕，也沒(méi)有同意，相當(dāng)于服務(wù)器沒(méi)有接收到任何指令，那申請(qǐng)的頁(yè)面怎么反饋呢，這些都是要考慮進(jìn)去的。

所有交互設(shè)計(jì)師要提供的是一整套解決方案，其中要考慮正向、反向、閉環(huán)等各種場(chǎng)景。

在有限的界面尺寸里，給予用戶無(wú)限操作可能

股票中行情內(nèi)容是最多的，其內(nèi)容展現(xiàn)的難度系數(shù)相當(dāng)大，所以它的交互設(shè)計(jì)也十分棘手。

在一個(gè)界面中，僅通過(guò)點(diǎn)擊方式無(wú)法承載股票行情的諸多功能點(diǎn)。要想界面簡(jiǎn)潔、突出重點(diǎn)就必須把相對(duì)次要的功能隱藏起來(lái)。在行情界面設(shè)計(jì)過(guò)程中遇到的主要問(wèn)題是哪些東西該顯示，哪些東西隱藏，隱藏后如何讓用戶發(fā)現(xiàn)，怎樣的顯示方式更容易被用戶接受等等。

編者按：今天這篇文章，是由騰訊高級(jí)交互設(shè)計(jì)師@C7210 向同學(xué)們征集問(wèn)題后作出的回答，涉及交互設(shè)計(jì)、行業(yè)趨勢(shì)、職場(chǎng)、工具推薦等等，都是大家平時(shí)特別關(guān)心的，趕緊來(lái)收。

歡迎關(guān)注作者（高級(jí)交互設(shè)計(jì)師、貓奴、吉他手、鼓手、老狗、單身，現(xiàn)就職于騰訊ISUX）的微信公眾號(hào)：Beforweb

提問(wèn)

來(lái)自@X丶field：請(qǐng)問(wèn)對(duì)于現(xiàn)在視覺(jué)和交互逐漸融合的UX/Product Designer崗位有什么看法？

C 回復(fù)：

好問(wèn)題，也是我個(gè)人以及一些朋友正在親身面對(duì)、體會(huì)和見(jiàn)證的所謂“行業(yè)趨勢(shì)”。

首先排除全能型個(gè)人以一當(dāng)十的情況，單就通常意義上的團(tuán)隊(duì)協(xié)作的形式而言，目前我所能看到的“融合”分為兩類：

第一類：交互設(shè)計(jì)師與視覺(jué)設(shè)計(jì)師在產(chǎn)品層面統(tǒng)一認(rèn)知，理解并認(rèn)同商業(yè)意義及產(chǎn)品目標(biāo)，以此為基礎(chǔ)，在各施所長(zhǎng)、各盡其職的同時(shí)，更多的學(xué)習(xí)、了解彼此職能的目標(biāo)、焦點(diǎn)和工作方法，互相理解，融會(huì)貫通，減少分歧，降低成本，以最大化的合力完成產(chǎn)品設(shè)計(jì)工作。這種模式下，所謂“UX/產(chǎn)品設(shè)計(jì)師”是對(duì)兩種職能的統(tǒng)稱。本質(zhì)上講，這就是對(duì)于我們?nèi)缃袼煜さ膫鹘y(tǒng)團(tuán)隊(duì)模式的一種漸進(jìn)式提升。

盡可能閱讀各種相關(guān)材料，比如商業(yè)計(jì)劃，產(chǎn)品計(jì)劃，市場(chǎng)調(diào)查報(bào)告，平臺(tái)規(guī)范等，以更綜合地為設(shè)計(jì)做鋪墊，當(dāng)中會(huì)用到文獻(xiàn)調(diào)研，競(jìng)品分析，啟發(fā)式評(píng)估等方法。團(tuán)隊(duì)的不同角色根據(jù)各自職責(zé)進(jìn)行分析，比如視覺(jué)設(shè)計(jì)師可能多分析現(xiàn)在的視覺(jué)潮流，產(chǎn)品載體所在平臺(tái)的設(shè)計(jì)規(guī)范，當(dāng)然結(jié)果是面向所有人共享的。

白珠子：提到用戶招募，你的眼前可能馬上浮現(xiàn)出一個(gè)麻煩熊孩子的形象。假如你采納了定性研究方法，它幾乎就無(wú)法躲開(kāi)。它令人疑惑，一開(kāi)始你可能一頭霧水，不太清楚要找怎樣的用戶；它讓人著急，你計(jì)劃在4天內(nèi)找到合適的用戶，在多個(gè)渠道發(fā)放了招募信息，卻只收到少量回應(yīng)，不得不將整個(gè)調(diào)研項(xiàng)目的時(shí)間往后推；它不讓人省心，用戶也許表示只在某個(gè)特定時(shí)間段有空，可是這個(gè)時(shí)間段已經(jīng)被另一位用戶占用了……你來(lái)來(lái)回回地調(diào)整時(shí)間表，既尷尬又心累。

怎樣才能讓這位“熊孩子”聽(tīng)話些？今天筆者就來(lái)簡(jiǎn)要說(shuō)說(shuō)用戶招募的步驟和其中的一些技巧。

占位符文本可用作幾乎所有的HTML輸入類型的屬性，被誤導(dǎo)的設(shè)計(jì)師和開(kāi)發(fā)人員不要猶豫。為復(fù)雜的表單提供文字幫助或者刪除輸入標(biāo)簽來(lái)提高美觀度都頗具吸引力，然而，這樣使用占位符文本會(huì)導(dǎo)致許多可用性問(wèn)題。

本文將例舉常見(jiàn)的不良做法，并提供替代方案。

將占位符作為標(biāo)簽

說(shuō)起“愉悅性”，我們通常會(huì)想到一些讓人感到溫暖、開(kāi)心的東西，譬如毛絨玩具、紙杯蛋糕、擁抱，等等。

不過(guò)，具有愉悅性的事物在某些情況下同樣會(huì)帶來(lái)負(fù)面效應(yīng)。某些笑話可能冒犯到他人，溫馨的廣告可能誤導(dǎo)部分觀眾，即便是可愛(ài)的音效也會(huì)因?yàn)檫\(yùn)用不當(dāng)而使人抓狂。

在UX領(lǐng)域，我們總會(huì)對(duì)那些體現(xiàn)著愉悅性的設(shè)計(jì)細(xì)節(jié)贊賞有加；而另一方面，對(duì)其負(fù)面效應(yīng)的了解也將有助于我們更好、更全面的掌握這一設(shè)計(jì)原則，避開(kāi)陷阱。

場(chǎng)景對(duì)于界面設(shè)計(jì)和可用性測(cè)試來(lái)說(shuō)都是非常重要的。

一、在描述一個(gè)場(chǎng)景時(shí)，需要涵蓋哪些方面呢?

一個(gè)好的場(chǎng)景在描述簡(jiǎn)潔的同時(shí)，還需要回答下列關(guān)鍵的問(wèn)題

用戶是誰(shuí)?人物角色可以反映出網(wǎng)站真實(shí)的、主要的用戶群體。

用戶為什么來(lái)你的網(wǎng)站?如果可以的話，記下用戶到你的網(wǎng)站來(lái)的動(dòng)機(jī)和預(yù)期。

用戶的目標(biāo)是什么? 通過(guò)任務(wù)分析，你可以了解用戶到你的網(wǎng)站來(lái)是想獲得什么，進(jìn)而可以知道你的網(wǎng)站需要做什么才能讓用戶滿意的離開(kāi)。

另外一些場(chǎng)景描述還可以回答以下的問(wèn)題：

在設(shè)計(jì)這個(gè)網(wǎng)站之前，你可以先寫下10-30個(gè)你認(rèn)為的用戶想訪問(wèn)你的網(wǎng)站的原因或者用戶希望通過(guò)網(wǎng)站完成的任務(wù)。

場(chǎng)景和人物角色還可以結(jié)合起來(lái)，分類呈現(xiàn)不同類型的用戶到網(wǎng)站來(lái)的原因，有什么樣的需求，揭示出“什么樣的人”在“什么樣的場(chǎng)景”下會(huì)有“什么樣的行為”。

場(chǎng)景和人物角色可以通過(guò)故事的方式結(jié)合起來(lái)：為什么某類用戶會(huì)來(lái)你的網(wǎng)站?他們來(lái)網(wǎng)站希望做什么?這類用戶有什么特征?這些特征怎么影響到他們?cè)诰W(wǎng)站上的行為的?

因此，設(shè)計(jì)一個(gè)網(wǎng)站的關(guān)注點(diǎn)應(yīng)該在用戶以及他們想達(dá)成的目標(biāo)，而不是網(wǎng)站的組織和內(nèi)在架構(gòu)。知道了用戶的需求后，網(wǎng)站的內(nèi)容及架構(gòu)該怎么呈現(xiàn)也就不言自明了。

在可用性測(cè)試中使用任務(wù)場(chǎng)景

在為可用性測(cè)試設(shè)置場(chǎng)景時(shí)，考慮到時(shí)間的關(guān)系，測(cè)試任務(wù)不宜多于10-12個(gè)。此外，在測(cè)試中，你還可以詢問(wèn)用戶自己的場(chǎng)景，他們?yōu)槭裁吹侥愕木W(wǎng)站來(lái)，他們想通過(guò)你的網(wǎng)站獲得什么。

可用性測(cè)試中，避免通過(guò)場(chǎng)景告訴用戶如何去完成一個(gè)任務(wù)，而應(yīng)該在測(cè)試中觀察用戶是如何完成任務(wù)的，并根據(jù)用戶的操作情況來(lái)判斷當(dāng)前網(wǎng)站的設(shè)計(jì)是否能夠幫助用戶在特定的場(chǎng)景下順利的完成任務(wù)。

可用性測(cè)試的場(chǎng)景中不能包含任何告訴用戶該如何完成任務(wù)的信息。可用性測(cè)試過(guò)程會(huì)呈現(xiàn)出用戶是如何完成任務(wù)的，并且能告訴你這個(gè)頁(yè)面是推動(dòng)還是阻礙了這個(gè)任務(wù)的完成。

在正式測(cè)試前，你需要寫下你預(yù)期的用戶是如何完成這個(gè)任務(wù)的所有路徑和步驟，包括用戶可能使用的主要的入口或者其他的入口，供給觀察人員和記錄人員在測(cè)試中使用。而在測(cè)試后，可對(duì)比下你的預(yù)期過(guò)程和用戶完成任務(wù)的真實(shí)過(guò)程，這個(gè)對(duì)比過(guò)程有助于思考你的網(wǎng)站的架構(gòu)和導(dǎo)航的效率。