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

成都創(chuàng)新互聯(lián)長期為近千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為九龍坡企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、成都網(wǎng)站制作，九龍坡網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

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

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

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

1.通過明暗對比來描述模塊之間的視覺優(yōu)先級

哪些內(nèi)容是需要用戶在頁面上最先注意到的？他們的視線應(yīng)該聚焦到什么位置？我們希望用戶執(zhí)行什么操作？這些問題不能簡單的丟給視覺設(shè)計師來考慮，而上圖所示的線框原型顯然無法幫助交互設(shè)計師傳達(dá)這方面的信息。

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

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

本文名稱：十個方法讓你的線框原型更具溝通能力
網(wǎng)站地址：http://weahome.cn/article/cjdcdj.html