網(wǎng)站建設十個(gè)方法讓你的線(xiàn)框原型更具溝通能力發(fā)布者：本站     時(shí)間：2022-03-30 11:03:01

雖說(shuō)是每周一篇譯文，不過(guò)這事兒確實(shí)不能算是非常容易。從閱讀，到篩選，到試譯，到最終確定本周的文章并完成譯文，主要還是依靠每天抽些時(shí)間來(lái)做。還好，畢竟是自主行為，愛(ài)過(guò)，也仍在愛(ài)著(zhù)，這就是UX從業(yè)者兼翻譯票友的節操有木有。默，我們進(jìn)入今次的正文。

我(英文原文作者)參與過(guò)很多產(chǎn)品的線(xiàn)框原型設計，包括我自己獨立完成的，還有與其他設計師、產(chǎn)品經(jīng)理甚至是業(yè)務(wù)分析人員一起合作的。這很棒，因為在這個(gè)過(guò)程中我見(jiàn)識到了很多優(yōu)秀的項目。不過(guò)慢慢的我也發(fā)現了一些問(wèn)題，一些大家時(shí)常會(huì )在原型制作過(guò)程當中忽略掉的要素；如果能注意并解決掉這些問(wèn)題，我們的交互設計產(chǎn)出物就可以發(fā)揮更大的實(shí)戰價(jià)值。

下圖所展示的是一個(gè)很典型的例子，我們通常會(huì )將這種風(fēng)格的線(xiàn)框稿交付給相關(guān)同事來(lái)跟進(jìn)視覺(jué)設計或原型測試的工作。


十個(gè)方法讓你的線(xiàn)框原型更具溝通能力

這種線(xiàn)框稿確實(shí)能比較清晰的描述出頁(yè)面元素的布局方式，但也僅此而已。它所缺少的是與其他設計師、開(kāi)發(fā)人員以及被測用戶(hù)之間的溝通能力。接下來(lái)，我們將一起看一看有哪些方法可以幫助我們提升線(xiàn)框原型在這方面的表現。

1.通過(guò)明暗對比來(lái)描述模塊之間的視覺(jué)優(yōu)先級
哪些內容是需要用戶(hù)在頁(yè)面上最先注意到的？他們的視線(xiàn)應該聚焦到什么位置？我們希望用戶(hù)執行什么操作？這些問(wèn)題不能簡(jiǎn)單的丟給視覺(jué)設計師來(lái)考慮，而上圖所示的線(xiàn)框原型顯然無(wú)法幫助交互設計師傳達這方面的信息。

首先，根據產(chǎn)品需求及用研方面的實(shí)際情況，作為產(chǎn)品人員或交互設計師，我們自身應該對以上這些方面的信息了如指掌；在此基礎上，為最原始的線(xiàn)框稿添加視覺(jué)優(yōu)先級。具體實(shí)施起來(lái)其實(shí)很簡(jiǎn)單，將所有的深色“線(xiàn)框”移除掉，使用不同明度的灰色作為背景色來(lái)界定頁(yè)面和模塊的邊緣，并籍此表達不同元素之間的視覺(jué)優(yōu)先級。相比于之前純粹線(xiàn)框風(fēng)格的設計稿，我們可以在下圖中明顯的感受到元素與模塊之間的優(yōu)先級關(guān)系，例如酒店信息推薦及右側預定表單當中的操作按鈕都可以在很短的時(shí)間內抓住我們的目光。


十個(gè)方法讓你的線(xiàn)框原型更具溝通能力

這種方式并不意味著(zhù)交互設計師正在扮演著(zhù)視覺(jué)設計師的角色，我們并不是在表達“這個(gè)元素的背景色要比另外一個(gè)元素的更深一些”，這些明暗關(guān)系所要體現的只是哪些元素需要突出，哪些元素要相對弱化；而最終的視覺(jué)表現形式仍然應該由視覺(jué)設計師來(lái)掌控。

2.使用真實(shí)的數據內容
對于線(xiàn)框原型當中的范例內容，包括導航元素的標題、表單標簽、介紹文案、圖標等等，我們都應該盡量使用最貼近生產(chǎn)環(huán)境的真實(shí)數據。這種方式可以更有效的幫助我們規劃界面元素的布局，并針對實(shí)際環(huán)境中有可能產(chǎn)生的極端數據情況制定預防性的方案，確保頁(yè)面結構的堅固性。

更重要的是，使用真實(shí)數據作為范例內容的線(xiàn)框原型可以在接下來(lái)的可用性測試當中更具表現力和說(shuō)服力，被測用戶(hù)不需要依靠主持人的描述或自己的猜測就可以在原型當中獲取到比較準確的信息。另外，真實(shí)數據也可以創(chuàng )造出一種更貼近實(shí)際產(chǎn)品的使用氛圍，這可以使被測用戶(hù)更加投入。對于測試人員來(lái)說(shuō)(主持人、觀(guān)察員)，我們可以設計出更具有針對性的任務(wù)或問(wèn)題，可以在測試過(guò)程中對被測用戶(hù)進(jìn)行更加深入的觀(guān)察；相應的，最終收集到的反饋信息也會(huì )更加真實(shí)有效。

仍以酒店的范例原型為例，諸如“你能找到這個(gè)酒店的特色服務(wù)信息嗎？”這樣的問(wèn)題是欠妥的，因為這就相當于告訴被測用戶(hù)，在頁(yè)面當中的某個(gè)地方存在著(zhù)這樣的信息，他們接下來(lái)就只會(huì )根據這條線(xiàn)索去尋找。多數情況下必然能夠找到，但這樣的反饋對于我們是沒(méi)有意義的。

如果在測試當中使用由真實(shí)數據構建起來(lái)的原型，那么情況就會(huì )好很多，我們可以問(wèn)被測用戶(hù)“你對這家酒店的感覺(jué)如何？”，這會(huì )使我們獲取有效反饋的機會(huì )大大的增加。用戶(hù)會(huì )根據這樣的問(wèn)題進(jìn)行更加自主的信息瀏覽行為，他們有可能會(huì )回答“這個(gè)酒店看上去不錯，不過(guò)他們提供家庭泳池，我真的不大喜歡小孩在酒店當中跑來(lái)跑去?！?br />

十個(gè)方法讓你的線(xiàn)框原型更具溝通能力

通過(guò)這類(lèi)反饋，我們可以了解到用戶(hù)不僅注意到了頁(yè)面當中的重要元素，而且他們對其中的具體內容也做出了真實(shí)的思考?？梢哉f(shuō)，通過(guò)一套無(wú)真實(shí)數據內容的線(xiàn)框原型，我們能夠測試產(chǎn)品的可用性，而使用了真實(shí)數據作為范例內容線(xiàn)框原型則可以更加全面的幫助我們測驗產(chǎn)品的用戶(hù)體驗。要了解更多原型測試方面的實(shí)戰方法，可以參考我們之前的文章“產(chǎn)品早期的原型設計與用戶(hù)測試”。

3.確保細節的準確無(wú)誤
將真實(shí)數據作為范例內容填充到原型當中后，我們要確保交互流程所涉及的信息的準確性。舉個(gè)簡(jiǎn)單的例子，如果購物車(chē)的頁(yè)面原型當中展示了兩個(gè)單價(jià)為50元的商品，那么在結算環(huán)節中，總價(jià)應該是100元，而不是隨便其他什么數字。錯誤的信息會(huì )阻礙溝通的有效進(jìn)行，開(kāi)發(fā)人員有可能在這里產(chǎn)生質(zhì)疑，被測用戶(hù)也會(huì )感到莫名其妙。

作為設計人員，長(cháng)時(shí)間的將注意力放在原型的制作上面，很容易忽視掉這類(lèi)問(wèn)題的存在。如果有條件的話(huà)，可以在適當的時(shí)候請其他人來(lái)幫忙檢查一下你的原型當中是否存在這類(lèi)細節當中的錯誤。

4.增加范例圖片的自我描述能力
圖片對于用戶(hù)體驗的提升起著(zhù)重要的作用，當人們在網(wǎng)站中尋找商品或服務(wù)時(shí)，圖片是引導他們制定決策的關(guān)鍵要素(怎樣通過(guò)設計幫助用戶(hù)制定決策)。另外，圖片也能幫助用戶(hù)對網(wǎng)站自身的形象和定位產(chǎn)生認知。不過(guò)在線(xiàn)框原型中，我們通常只會(huì )使用一些灰色的容器和線(xiàn)條來(lái)表現圖片。

當然，我并不是要建議在線(xiàn)框原型中使用真正的圖片或照片；我們需要做的是讓代表圖片的線(xiàn)框元素能夠體現出在實(shí)際頁(yè)面當中，這個(gè)位置應該放置怎樣類(lèi)型的圖片。在制作線(xiàn)框原型之前，最好與相關(guān)的產(chǎn)品或業(yè)務(wù)人員就這方面的問(wèn)題進(jìn)行溝通，根據產(chǎn)品自身的特質(zhì)及最終面向的用戶(hù)群體，來(lái)判斷圖片一類(lèi)的視覺(jué)元素應該具有怎樣的整體風(fēng)格。

舉個(gè)例子，我曾經(jīng)幫一家襯衣零售商做網(wǎng)站改版。在著(zhù)手設計工作之前，我們首先使用舊版網(wǎng)站進(jìn)行了一次用戶(hù)測試，結果發(fā)現商品詳情頁(yè)當中的演示照片總會(huì )使用戶(hù)產(chǎn)生迷惑。為了使襯衣更好看，他們在拍照的時(shí)候刻意搭配上了領(lǐng)帶與袖扣，這使得用戶(hù)認為每件襯衫都是包含領(lǐng)帶與袖扣的套裝。所以當我進(jìn)行線(xiàn)框原型設計的時(shí)候，特意在商品照片的位置畫(huà)了一張不包含領(lǐng)帶與袖扣的襯衣草圖，以確保視覺(jué)設計師及后續環(huán)節的人員能夠理解，并避免在新版網(wǎng)站中重復錯誤。

我們不必通過(guò)非常精細的繪畫(huà)來(lái)為線(xiàn)框原型中的圖片元素增加描述性，通過(guò)簡(jiǎn)單的草圖來(lái)陳述出用戶(hù)希望在這里看到的圖片類(lèi)型即可。例如，在提供酒店預定服務(wù)的網(wǎng)站中，用戶(hù)通常希望在詳情頁(yè)里看到怎樣的圖片？房間？衛生間？景觀(guān)？這些問(wèn)題都是值得花時(shí)間了解清楚并在線(xiàn)框原型中加以體現的。


十個(gè)方法讓你的線(xiàn)框原型更具溝通能力

5.使用色彩時(shí)保持謹慎
在線(xiàn)框原型中，彩色通常被用于注釋。在必要的時(shí)候，我們也可以用特殊的顏色對那些特別需要用戶(hù)注意的界面元素進(jìn)行標注，或是用來(lái)表達出錯信息一類(lèi)的狀態(tài)類(lèi)內容。不過(guò)要記得，在進(jìn)行原型測試的時(shí)候不要使用帶有色彩注釋的版本，原因是顯而易見(jiàn)的，我們不希望被測用戶(hù)被這些“突出”的元素引導或干擾。

6.確保交互元素明確易懂
交互元素的呈現方式應該符合它的用途，例如按鈕看上去應該可以被點(diǎn)擊。這些細節當中的視覺(jué)表現形式的正確與否，會(huì )直接影響視覺(jué)設計師及開(kāi)發(fā)人員對原型的理解；不具備自解釋性的交互元素所帶來(lái)的潛在體驗問(wèn)題也會(huì )暴露在可用性測試當中。

十個(gè)方法讓你的線(xiàn)框原型更具溝通能力


7.以實(shí)際像素為單位
如果你使用HTML配合樣式代碼來(lái)制作原型(使用前端開(kāi)發(fā)框架快速創(chuàng )建頁(yè)面原型)，那么這個(gè)問(wèn)題基本不存在，因為你通常需要以像素為單位為容器設置寬度或高度屬性。不過(guò)在多數時(shí)候，我們創(chuàng )建的是純粹的線(xiàn)框圖。以實(shí)際像素為單位對頁(yè)面布局及元素尺寸進(jìn)行一定程度的規劃和說(shuō)明，這將幫助我們自己以及視覺(jué)設計師在接下來(lái)的工作當中省掉很多“猜測”與“估算”的過(guò)程。我曾經(jīng)習慣于使用Powerpoint來(lái)制作線(xiàn)框原型，這種方式只能展示元素之間大致的尺寸和位置關(guān)系；當項目進(jìn)入視覺(jué)設計流程，它無(wú)法有效的幫助我與設計師進(jìn)行溝通，造成了不少的麻煩。

8.創(chuàng )建變更日志
隨著(zhù)迭代的不斷進(jìn)行，每一版線(xiàn)框原型當中的變更通常會(huì )越來(lái)越細化，從頁(yè)面結構到模塊、控件，這會(huì )使跟進(jìn)后續工作的設計師或開(kāi)發(fā)人員越來(lái)越難以發(fā)現所有的變化。作為交互設計師，我們有責任創(chuàng )建一份變更日志，并隨著(zhù)項目的發(fā)展對其進(jìn)行持續的更新。日志中的每一條記錄都要包含日期、版本號、執行者以及變更說(shuō)明。這種信息交流的方式不需要花費太多的時(shí)間，但結果卻是事半功倍的，無(wú)論產(chǎn)品人員還是設計師、開(kāi)發(fā)者，大家都可以籍此來(lái)一目了然的跟蹤原型的版本變化。


十個(gè)方法讓你的線(xiàn)框原型更具溝通能力

9.避免深色線(xiàn)框
滿(mǎn)頁(yè)面的深色線(xiàn)框會(huì )使你的原型看上去缺乏層次、粗糙凌亂。正像我們在第一點(diǎn)當中所說(shuō)的，試著(zhù)使用不同明度的灰色作為背景色來(lái)界定頁(yè)面和模塊的邊緣。這樣不僅能表現出界面元素的視覺(jué)優(yōu)先級，而且可以使整個(gè)原型看上去更加整潔。如果必須在某些地方使用線(xiàn)條，那么盡量使用纖細的灰色實(shí)線(xiàn)或點(diǎn)狀線(xiàn)。我們固然不需要讓線(xiàn)框原型看上去像視覺(jué)稿一樣完美，但對這些細節的把握確實(shí)可以讓它更加簡(jiǎn)潔精美；在實(shí)際工作中，這往往可以提升原型被接納的程度。

十個(gè)方法讓你的線(xiàn)框原型更具溝通能力


10.保持跟進(jìn)
這一點(diǎn)更加偏向于交付流程，而非設計技巧。完成線(xiàn)框原型后，我們不能只是簡(jiǎn)單的把它扔給跟進(jìn)后續工作的同事?；ㄐr(shí)間去支援視覺(jué)設計師或開(kāi)發(fā)人員的工作，只有他們才能將你的設計概念最終落實(shí)到實(shí)際當中。通常，交互原型當中所包含的想法、操作邏輯等方面的信息難以即全面又準確的被大家理解，而且其中隱含的問(wèn)題有可能在后續階段才能體現出來(lái)。我們有必要在交付原型之后保持跟進(jìn)，與大家協(xié)同作戰。