雖說是每周一篇譯文，不過這事兒确實不能算(suàn)是非常容易。從閱讀，到篩選，到試譯，到最終确定本周的文章并完成譯文，主要還(hái)是依靠每天抽些(xiē)時(shí)間(jiān)來(lái)做(zuò)。還(hái)好，畢竟是自主行(xíng)為(wèi)，愛(ài)過，也仍在愛(ài)着，這就是UX從業者兼翻譯票(piào)友(yǒu)的節操有(yǒu)木有(yǒu)。默，我們進入今次的正文。

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

下圖所展示的是一個(gè)很(hěn)典型的例子，我們通(tōng)常會(huì)将這種風格的線框稿交付給相關同事來(lái)跟進視(shì)覺設計(jì)或原型測試的工作(zuò)。

這種線框稿确實能比較清晰的描述出頁面元素的布局方式，但(dàn)也僅此而已。它所缺少(shǎo)的是與其他設計(jì)師(shī)、開(kāi)發人(rén)員以及被測用戶之間(jiān)的溝通(tōng)能力。接下來(lái)，我們将一起看一看有(yǒu)哪些(xiē)方法可(kě)以幫助我們提升線框原型在這方面的表現。

1.通(tōng)過明(míng)暗對比來(lái)描述模塊之間(jiān)的視(shì)覺優先級

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

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

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