雖說是每周一篇譯文，不過這事兒確實(shí)不能算是非常容易。從閱讀，到篩選，到試譯，到最終確定本周的文章并完成譯文，主要還是依靠每天抽些時(shí)間來做。還好，畢竟是自主行為，愛過，也仍在愛著，這就是UX從業(yè)者兼翻譯票友的節(jié)操有木有。默，我們進(jìn)入今次的正文。
我(英文原文作者)參與過很多產(chǎn)品的線框原型設(shè)計(jì)，包括我自己獨(dú)立完成的，還有與其他設(shè)計(jì)師、產(chǎn)品經(jīng)理甚至是業(yè)務(wù)分析人員一起合作的。這很棒，因?yàn)樵谶@個(gè)過程中我見識(shí)到了很多優(yōu)秀的項(xiàng)目。不過慢慢的我也發(fā)現(xiàn)了一些問題，一些大家時(shí)常會(huì)在原型制作過程當(dāng)中忽略掉的要素；如果能注意并解決掉這些問題，我們的交互設(shè)計(jì)產(chǎn)出物就可以發(fā)揮更大的實(shí)戰(zhàn)價(jià)值。
下圖所展示的是一個(gè)很典型的例子，我們通常會(huì)將這種風(fēng)格的線框稿交付給相關(guān)同事來跟進(jìn)視覺設(shè)計(jì)或原型測(cè)試的工作。
這種線框稿確實(shí)能比較清晰的描述出頁面元素的布局方式，但也僅此而已。它所缺少的是與其他設(shè)計(jì)師、開發(fā)人員以及被測(cè)用戶之間的溝通能力。接下來，我們將一起看一看有哪些方法可以幫助我們提升線框原型在這方面的表現(xiàn)。
1.通過明暗對(duì)比來描述模塊之間的視覺優(yōu)先級(jí)
哪些內(nèi)容是需要用戶在頁面上最先注意到的？他們的視線應(yīng)該聚焦到什么位置？我們希望用戶執(zhí)行什么操作？這些問題不能簡(jiǎn)單的丟給視覺設(shè)計(jì)師來考慮，而上圖所示的線框原型顯然無法幫助交互設(shè)計(jì)師傳達(dá)這方面的信息。
首先，根據(jù)產(chǎn)品需求及用研方面的實(shí)際情況，作為產(chǎn)品人員或交互設(shè)計(jì)師，我們自身應(yīng)該對(duì)以上這些方面的信息了如指掌；在此基礎(chǔ)上，為最原始的線框稿添加視覺優(yōu)先級(jí)。具體實(shí)施起來其實(shí)很簡(jiǎn)單，將所有的深色“線框”移除掉，使用不同明度的灰色作為背景色來界定頁面和模塊的邊緣，并籍此表達(dá)不同元素之間的視覺優(yōu)先級(jí)。相比于之前純粹線框風(fēng)格的設(shè)計(jì)稿，我們可以在下圖中明顯的感受到元素與模塊之間的優(yōu)先級(jí)關(guān)系，例如酒店信息推薦及右側(cè)預(yù)定表單當(dāng)中的操作按鈕都可以在很短的時(shí)間內(nèi)抓住我們的目光。
這種方式并不意味著交互設(shè)計(jì)師正在扮演著視覺設(shè)計(jì)師的角色，我們并不是在表達(dá)“這個(gè)元素的背景色要比另外一個(gè)元素的更深一些”，這些明暗關(guān)系所要體現(xiàn)的只是哪些元素需要突出，哪些元素要相對(duì)弱化；而最終的視覺表現(xiàn)形式仍然應(yīng)該由視覺設(shè)計(jì)師來掌控。
2.使用真實(shí)的數(shù)據(jù)內(nèi)容
對(duì)于線框原型當(dāng)中的范例內(nèi)容，包括導(dǎo)航元素的標(biāo)題、表單標(biāo)簽、介紹文案、圖標(biāo)等等，我們都應(yīng)該盡量使用最貼近生產(chǎn)環(huán)境的真實(shí)數(shù)據(jù)。這種方式可以更有效的幫助我們規(guī)劃界面元素的布局，并針對(duì)實(shí)際環(huán)境中有可能產(chǎn)生的極端數(shù)據(jù)情況制定預(yù)防性的方案，確保頁面結(jié)構(gòu)的堅(jiān)固性。
更重要的是，使用真實(shí)數(shù)據(jù)作為范例內(nèi)容的線框原型可以在接下來的可用性測(cè)試當(dāng)中更具表現(xiàn)力和說服力，被測(cè)用戶不需要依靠主持人的描述或自己的猜測(cè)就可以在原型當(dāng)中獲取到比較準(zhǔn)確的信息。另外，真實(shí)數(shù)據(jù)也可以創(chuàng)造出一種更貼近實(shí)際產(chǎn)品的使用氛圍，這可以使被測(cè)用戶更加投入。對(duì)于測(cè)試人員來說(主持人、觀察員)，我們可以設(shè)計(jì)出更具有針對(duì)性的任務(wù)或問題，可以在測(cè)試過程中對(duì)被測(cè)用戶進(jìn)行更加深入的觀察；相應(yīng)的，最終收集到的反饋信息也會(huì)更加真實(shí)有效。
仍以酒店的范例原型為例，諸如“你能找到這個(gè)酒店的特色服務(wù)信息嗎？”這樣的問題是欠妥的，因?yàn)檫@就相當(dāng)于告訴被測(cè)用戶，在頁面當(dāng)中的某個(gè)地方存在著這樣的信息，他們接下來就只會(huì)根據(jù)這條線索去尋找。多數(shù)情況下必然能夠找到，但這樣的反饋對(duì)于我們是沒有意義的。
如果在測(cè)試當(dāng)中使用由真實(shí)數(shù)據(jù)構(gòu)建起來的原型，那么情況就會(huì)好很多，我們可以問被測(cè)用戶“你對(duì)這家酒店的感覺如何？”，這會(huì)使我們獲取有效反饋的機(jī)會(huì)大大的增加。用戶會(huì)根據(jù)這樣的問題進(jìn)行更加自主的信息瀏覽行為，他們有可能會(huì)回答“這個(gè)酒店看上去不錯(cuò)，不過他們提供家庭泳池，我真的不大喜歡小孩在酒店當(dāng)中跑來跑去?！?/P>
通過這類反饋，我們可以了解到用戶不僅注意到了頁面當(dāng)中的重要元素，而且他們對(duì)其中的具體內(nèi)容也做出了真實(shí)的思考。可以說，通過一套無真實(shí)數(shù)據(jù)內(nèi)容的線框原型，我們能夠測(cè)試產(chǎn)品的可用性，而使用了真實(shí)數(shù)據(jù)作為范例內(nèi)容線框原型則可以更加全面的幫助我們測(cè)驗(yàn)產(chǎn)品的用戶體驗(yàn)。要了解更多原型測(cè)試方面的實(shí)戰(zhàn)方法，可以參考我們之前的文章“產(chǎn)品早期的原型設(shè)計(jì)與用戶測(cè)試”。
3.確保細(xì)節(jié)的準(zhǔn)確無誤
將真實(shí)數(shù)據(jù)作為范例內(nèi)容填充到原型當(dāng)中后，我們要確保交互流程所涉及的信息的準(zhǔn)確性。舉個(gè)簡(jiǎn)單的例子，如果購物車的頁面原型當(dāng)中展示了兩個(gè)單價(jià)為50元的商品，那么在結(jié)算環(huán)節(jié)中，總價(jià)應(yīng)該是100元，而不是隨便其他什么數(shù)字。錯(cuò)誤的信息會(huì)阻礙溝通的有效進(jìn)行，開發(fā)人員有可能在這里產(chǎn)生質(zhì)疑，被測(cè)用戶也會(huì)感到莫名其妙。
作為設(shè)計(jì)人員，長(zhǎng)時(shí)間的將注意力放在原型的制作上面，很容易忽視掉這類問題的存在。如果有條件的話，可以在適當(dāng)?shù)臅r(shí)候請(qǐng)其他人來幫忙檢查一下你的原型當(dāng)中是否存在這類細(xì)節(jié)當(dāng)中的錯(cuò)誤。
4.增加范例圖片的自我描述能力
圖片對(duì)于用戶體驗(yàn)的提升起著重要的作用，當(dāng)人們?cè)诰W(wǎng)站中尋找商品或服務(wù)時(shí)，圖片是引導(dǎo)他們制定決策的關(guān)鍵要素(怎樣通過設(shè)計(jì)幫助用戶制定決策)。另外，圖片也能幫助用戶對(duì)網(wǎng)站自身的形象和定位產(chǎn)生認(rèn)知。不過在線框原型中，我們通常只會(huì)使用一些灰色的容器和線條來表現(xiàn)圖片。
當(dāng)然，我并不是要建議在線框原型中使用真正的圖片或照片；我們需要做的是讓代表圖片的線框元素能夠體現(xiàn)出在實(shí)際頁面當(dāng)中，這個(gè)位置應(yīng)該放置怎樣類型的圖片。在制作線框原型之前，最好與相關(guān)的產(chǎn)品或業(yè)務(wù)人員就這方面的問題進(jìn)行溝通，根據(jù)產(chǎn)品自身的特質(zhì)及最終面向的用戶群體，來判斷圖片一類的視覺元素應(yīng)該具有怎樣的整體風(fēng)格。
舉個(gè)例子，我曾經(jīng)幫一家襯衣零售商做網(wǎng)站改版。在著手設(shè)計(jì)工作之前，我們首先使用舊版網(wǎng)站進(jìn)行了一次用戶測(cè)試，結(jié)果發(fā)現(xiàn)商品詳情頁當(dāng)中的演示照片總會(huì)使用戶產(chǎn)生迷惑。為了使襯衣更好看，他們?cè)谂恼盏臅r(shí)候刻意搭配上了領(lǐng)帶與袖扣，這使得用戶認(rèn)為每件襯衫都是包含領(lǐng)帶與袖扣的套裝。所以當(dāng)我進(jìn)行線框原型設(shè)計(jì)的時(shí)候，特意在商品照片的位置畫了一張不包含領(lǐng)帶與袖扣的襯衣草圖，以確保視覺設(shè)計(jì)師及后續(xù)環(huán)節(jié)的人員能夠理解，并避免在新版網(wǎng)站中重復(fù)錯(cuò)誤。
我們不必通過非常精細(xì)的繪畫來為線框原型中的圖片元素增加描述性，通過簡(jiǎn)單的草圖來陳述出用戶希望在這里看到的圖片類型即可。例如，在提供酒店預(yù)定服務(wù)的網(wǎng)站中，用戶通常希望在詳情頁里看到怎樣的圖片？房間？衛(wèi)生間？景觀？這些問題都是值得花時(shí)間了解清楚并在線框原型中加以體現(xiàn)的。
5.使用色彩時(shí)保持謹(jǐn)慎
在線框原型中，彩色通常被用于注釋。在必要的時(shí)候，我們也可以用特殊的顏色對(duì)那些特別需要用戶注意的界面元素進(jìn)行標(biāo)注，或是用來表達(dá)出錯(cuò)信息一類的狀態(tài)類內(nèi)容。不過要記得，在進(jìn)行原型測(cè)試的時(shí)候不要使用帶有色彩注釋的版本，原因是顯而易見的，我們不希望被測(cè)用戶被這些“突出”的元素引導(dǎo)或干擾。
6.確保交互元素明確易懂
交互元素的呈現(xiàn)方式應(yīng)該符合它的用途，例如按鈕看上去應(yīng)該可以被點(diǎn)擊。這些細(xì)節(jié)當(dāng)中的視覺表現(xiàn)形式的正確與否，會(huì)直接影響視覺設(shè)計(jì)師及開發(fā)人員對(duì)原型的理解；不具備自解釋性的交互元素所帶來的潛在體驗(yàn)問題也會(huì)暴露在可用性測(cè)試當(dāng)中。
7.以實(shí)際像素為單位
如果你使用HTML配合樣式代碼來制作原型(使用前端開發(fā)框架快速創(chuàng)建頁面原型)，那么這個(gè)問題基本不存在，因?yàn)槟阃ǔＰ枰韵袼貫閱挝粸槿萜髟O(shè)置寬度或高度屬性。不過在多數(shù)時(shí)候，我們創(chuàng)建的是純粹的線框圖。以實(shí)際像素為單位對(duì)頁面布局及元素尺寸進(jìn)行一定程度的規(guī)劃和說明，這將幫助我們自己以及視覺設(shè)計(jì)師在接下來的工作當(dāng)中省掉很多“猜測(cè)”與“估算”的過程。我曾經(jīng)習(xí)慣于使用Powerpoint來制作線框原型，這種方式只能展示元素之間大致的尺寸和位置關(guān)系；當(dāng)項(xiàng)目進(jìn)入視覺設(shè)計(jì)流程，它無法有效的幫助我與設(shè)計(jì)師進(jìn)行溝通，造成了不少的麻煩。
8.創(chuàng)建變更日志
隨著迭代的不斷進(jìn)行，每一版線框原型當(dāng)中的變更通常會(huì)越來越細(xì)化，從頁面結(jié)構(gòu)到模塊、控件，這會(huì)使跟進(jìn)后續(xù)工作的設(shè)計(jì)師或開發(fā)人員越來越難以發(fā)現(xiàn)所有的變化。作為交互設(shè)計(jì)師，我們有責(zé)任創(chuàng)建一份變更日志，并隨著項(xiàng)目的發(fā)展對(duì)其進(jìn)行持續(xù)的更新。日志中的每一條記錄都要包含日期、版本號(hào)、執(zhí)行者以及變更說明。這種信息交流的方式不需要花費(fèi)太多的時(shí)間，但結(jié)果卻是事半功倍的，無論產(chǎn)品人員還是設(shè)計(jì)師、開發(fā)者，大家都可以籍此來一目了然的跟蹤原型的版本變化。
9.避免深色線框
滿頁面的深色線框會(huì)使你的原型看上去缺乏層次、粗糙凌亂。正像我們?cè)诘谝稽c(diǎn)當(dāng)中所說的，試著使用不同明度的灰色作為背景色來界定頁面和模塊的邊緣。這樣不僅能表現(xiàn)出界面元素的視覺優(yōu)先級(jí)，而且可以使整個(gè)原型看上去更加整潔。如果必須在某些地方使用線條，那么盡量使用纖細(xì)的灰色實(shí)線或點(diǎn)狀線。我們固然不需要讓線框原型看上去像視覺稿一樣完美，但對(duì)這些細(xì)節(jié)的把握確實(shí)可以讓它更加簡(jiǎn)潔精美；在實(shí)際工作中，這往往可以提升原型被接納的程度。
10.保持跟進(jìn)
這一點(diǎn)更加偏向于交付流程，而非設(shè)計(jì)技巧。完成線框原型后，我們不能只是簡(jiǎn)單的把它扔給跟進(jìn)后續(xù)工作的同事?；ㄐr(shí)間去支援視覺設(shè)計(jì)師或開發(fā)人員的工作，只有他們才能將你的設(shè)計(jì)概念最終落實(shí)到實(shí)際當(dāng)中。通常，交互原型當(dāng)中所包含的想法、操作邏輯等方面的信息難以即全面又準(zhǔn)確的被大家理解，而且其中隱含的問題有可能在后續(xù)階段才能體現(xiàn)出來。我們有必要在交付原型之后保持跟進(jìn)，與大家協(xié)同作戰(zhàn)。
