雖說(shuō)是每周一篇譯文，不過(guò)這事兒確實(shí)不能算是非常容易。從閱讀，到篩選，到試譯，到最終確定本周的文章并完成譯文，主要還是依靠每天抽些時(shí)間來(lái)做。還好，畢竟是自主行為，愛過(guò)，也仍在愛著，這就是ux從業(yè)者兼翻譯票友的節(jié)操有木有。默，我們進(jìn)入今次的正文。
我(英文原文作者)參與過(guò)很多產(chǎn)品的線框原型設(shè)計(jì)，包括我自己獨(dú)立完成的，還有與其他設(shè)計(jì)師、產(chǎn)品經(jīng)理甚至是業(yè)務(wù)分析人員一起合作的。這很棒，因?yàn)樵谶@個(gè)過(guò)程中我見識(shí)到了很多優(yōu)秀的項(xiàng)目。不過(guò)慢慢的我也發(fā)現(xiàn)了一些問(wèn)題，一些大家時(shí)常會(huì)在原型制作過(guò)程當(dāng)中忽略掉的要素；如果能注意并解決掉這些問(wèn)題，我們的交互設(shè)計(jì)產(chǎn)出物就可以發(fā)揮更大的實(shí)戰(zhàn)價(jià)值。
下圖所展示的是一個(gè)很典型的例子，我們通常會(huì)將這種風(fēng)格的線框稿交付給相關(guān)同事來(lái)跟進(jìn)視覺(jué)設(shè)計(jì)或原型測(cè)試的工作。
這種線框稿確實(shí)能比較清晰的描述出頁(yè)面元素的布局方式，但也僅此而已。它所缺少的是與其他設(shè)計(jì)師、開發(fā)人員以及被測(cè)用戶之間的溝通能力。接下來(lái)，我們將一起看一看有哪些方法可以幫助我們提升線框原型在這方面的表現(xiàn)。
1.通過(guò)明暗對(duì)比來(lái)描述模塊之間的視覺(jué)優(yōu)先級(jí)
哪些內(nèi)容是需要用戶在頁(yè)面上最先注意到的？他們的視線應(yīng)該聚焦到什么位置？我們希望用戶執(zhí)行什么操作？這些問(wèn)題不能簡(jiǎn)單的丟給視覺(jué)設(shè)計(jì)師來(lái)考慮，而上圖所示的線框原型顯然無(wú)法幫助交互設(shè)計(jì)師傳達(dá)這方面的信息。
首先，根據(jù)產(chǎn)品需求及用研方面的實(shí)際情況，作為產(chǎn)品人員或交互設(shè)計(jì)師，我們自身應(yīng)該對(duì)以上這些方面的信息了如指掌；在此基礎(chǔ)上，為最原始的線框稿添加視覺(jué)優(yōu)先級(jí)。具體實(shí)施起來(lái)其實(shí)很簡(jiǎn)單，將所有的深色“線框”移除掉，使用不同明度的灰色作為背景色來(lái)界定頁(yè)面和模塊的邊緣，并籍此表達(dá)不同元素之間的視覺(jué)優(yōu)先級(jí)。相比于之前純粹線框風(fēng)格的設(shè)計(jì)稿，我們可以在下圖中明顯的感受到元素與模塊之間的優(yōu)先級(jí)關(guān)系，例如酒店信息推薦及右側(cè)預(yù)定表單當(dāng)中的操作按鈕都可以在很短的時(shí)間內(nèi)抓住我們的目光。
這種方式并不意味著交互設(shè)計(jì)師正在扮演著視覺(jué)設(shè)計(jì)師的角色，我們并不是在表達(dá)“這個(gè)元素的背景色要比另外一個(gè)元素的更深一些”，這些明暗關(guān)系所要體現(xiàn)的只是哪些元素需要突出，哪些元素要相對(duì)弱化；而最終的視覺(jué)表現(xiàn)形式仍然應(yīng)該由視覺(jué)設(shè)計(jì)師來(lái)掌控。