精品乾貨丨會說話的線框原型長什麼樣?【轉】

總結：第一、2點能夠利用

 

　　雖然說是每週一篇譯文，不過這事兒確實不能算是很是容易。從閱讀，到篩選，到試譯，到最終肯定本週的文章並完成譯文，主要仍是依靠天天抽些時間來作。還好，畢竟是自主行爲，愛過，也仍在愛着，這就是UX從業者兼翻譯票友的節操有木有。默，咱們進入今次的正文。

　 　我(英文原文做者)參與過不少產品的線框原型設計，包括我本身獨立完成的，還有與其餘設計師、產品經理甚至是業務分析人員一塊兒合做的。這很棒，由於在這 個過程當中我見識到了不少優秀的項目。不過慢慢的我也發現了一些問題，一些你們時常會在原型製做過程中忽略掉的要素;若是能注意並解決掉這些問題，咱們的 交互設計產出物就能夠發揮更大的實戰價值。

　　下圖所展現的是一個很典型的例子，咱們一般會將這種風格的線框稿交付給相關同事來跟進視覺設計或原型測試的工做。

　　這種線框稿確實能比較清晰的描述出頁面元素的佈局方式，但也僅此而已。它所缺乏的是與其餘設計師、開發人員以及被測用戶之間的溝通能力。接下來，咱們將一塊兒看一看有哪些方法能夠幫助咱們提高線框原型在這方面的表現。

　　1.經過明暗對比來描述模塊之間的視覺優先級

　　哪些內容是須要用戶在頁面上最早注意到的?他們的視線應該聚焦到什麼位置?咱們但願用戶執行什麼操做?這些問題不能簡單的丟給視覺設計師來考慮，而上圖所示的線框原型顯然沒法幫助交互設計師傳達這方面的信息。

　　首先，根據產品需求及用研方面的實際狀況，做爲產品人員或交互設計師，咱們自身應該對以上這些方面的信息瞭如指掌。

　　在此基礎上，爲最原始的線框稿添加視覺優先級。

　 　具體實施起來其實很簡單，將全部的深色「線框」移除掉，使用不一樣明度的灰色做爲背景色來界定頁面和模塊的邊緣，並籍此表達不一樣元素之間的視覺優先級。相 比於以前純粹線框風格的設計稿，咱們能夠在下圖中明顯的感覺到元素與模塊之間的優先級關係，例如酒店信息推薦及右側預約表單當中的操做按鈕均可以在很短的 時間內抓住咱們的目光。

　　這種方式並不意味着交互設計師正在扮演着視覺設計師的角色，咱們並非在表達「這個元素的背景色要比另一個元素的更深一些」，這些明暗關係所要體現的只是哪些元素須要突出，哪些元素要相對弱化;而最終的視覺表現形式仍然應該由視覺設計師來掌控。

　　2.使用真實的數據內容

　　對於線框原型當中的範例內容，包括導航元素的標題、表單標籤、介紹文案、圖標等等，咱們都應該儘可能使用最貼近生產環境的真實數據。這種方式能夠更有效的幫助咱們規劃界面元素的佈局，並針對實際環境中有可能產生的極端數據狀況制定預防性的方案，確保頁面結構的堅固性。

　 　更重要的是，使用真實數據做爲範例內容的線框原型能夠在接下來的可用性測試當中更具表現力和說服力，被測用戶不須要依靠主持人的描述或本身的猜想就能夠 在原型當中獲取到比較準確的信息。另外，真實數據也能夠創造出一種更貼近實際產品的使用氛圍，這可使被測用戶更加投入。對於測試人員來講(主持人、觀察 員)，咱們能夠設計出更具備針對性的任務或問題，能夠在測試過程當中對被測用戶進行更加深刻的觀察;相應的，最終收集到的反饋信息也會更加真實有效。

　　仍以酒店的範例原型爲例，諸如「你能找到這個酒店的特點服務信息嗎?」這樣的問題是欠妥的，由於這就至關於告訴被測用戶，在頁面當中的某個地方存在着這樣的信息，他們接下來就只會根據這條線索去尋找。多數狀況下必然可以找到，但這樣的反饋對於咱們是沒有意義的。

　 　若是在測試當中使用由真實數據構建起來的原型，那麼狀況就會好不少，咱們能夠問被測用戶「你對這家酒店的感受如何?」，這會使咱們獲取有效反饋的機會大 大的增長。用戶會根據這樣的問題進行更加自主的信息瀏覽行爲，他們有可能會回答「這個酒店看上去不錯，不過他們提供家庭泳池，我真的不大喜歡小孩在酒店當 中跑來跑去。」

　 　經過這類反饋，咱們能夠了解到用戶不只注意到了頁面當中的重要元素，並且他們對其中的具體內容也作出了真實的思考。能夠說，經過一套無真實數據內容的線 框原型，咱們可以測試產品的可用性，而使用了真實數據做爲範例內容線框原型則能夠更加全面的幫助咱們測驗產品的用戶體驗。要了解更多原型測試方面的實戰方 法，能夠參考咱們以前的文章「產品早期的原型設計與用戶測試」。

　　3.確保細節的準確無誤

　 　將真實數據做爲範例內容填充到原型當中後，咱們要確保交互流程所涉及的信息的準確性。舉個簡單的例子，若是購物車的頁面原型當中展現了兩個單價爲50元 的商品，那麼在結算環節中，總價應該是100元，而不是隨便其餘什麼數字。錯誤的信息會阻礙溝通的有效進行，開發人員有可能在這裏產生質疑，被測用戶也會 感到莫名其妙。

　　做爲設計人員，長時間的將注意力放在原型的製做上面，很容易忽視掉這類問題的存在。若是有條件的話，能夠在適當的時候請其餘人來幫忙檢查一下你的原型當中是否存在這類細節當中的錯誤。

　　4.增長範例圖片的自我描述能力

　 　圖片對於用戶體驗的提高起着重要的做用，當人們在網站中尋找商品或服務時，圖片是引導他們制定決策的關鍵要素(怎樣經過設計幫助用戶制定決策)。另外， 圖片也能幫助用戶對網站自身的形象和定位產生認知。不過在線框原型中，咱們一般只會使用一些灰色的容器和線條來表現圖片。

　　固然，我並不 是要建議在線框原型中使用真正的圖片或照片;咱們須要作的是讓表明圖片的線框元素可以體現出在實際頁面當中，這個位置應該放置怎樣類型的圖片。在製做線框 原型以前，最好與相關的產品或業務人員就這方面的問題進行溝通，根據產品自身的特質及最終面向的用戶羣體，來判斷圖片一類的視覺元素應該具備怎樣的總體風 格。

　　舉個例子，我曾經幫一家襯衣零售商作網站改版。在着手設計工做以前，咱們首先使用舊版網站進行了一次用戶測試，結果發現商品詳情頁當中的演示照片總會使用戶產生迷惑。

　 　爲了使襯衣更好看，他們在拍照的時候刻意搭配上了領帶與袖釦，這使得用戶認爲每件襯衫都是包含領帶與袖釦的套裝。因此當我進行線框原型設計的時候，特地 在商品照片的位置畫了一張不包含領帶與袖釦的襯衣草圖，以確保視覺設計師及後續環節的人員可以理解，並避免在新版網站中重複錯誤。

　　咱們沒必要經過很是精細的繪畫來爲線框原型中的圖片元素增長描述性，經過簡單的草圖來陳述出用戶但願在這裏看到的圖片類型便可。

　　例如，在提供酒店預約服務的網站中，用戶一般但願在詳情頁裏看到怎樣的圖片?房間?衛生間?景觀?這些問題都是值得花時間瞭解清楚並在線框原型中加以體現的。

　　5.使用色彩時保持謹慎

　　在線框原型中，彩色一般被用於註釋。在必要的時候，咱們也能夠用特殊的顏色對那些特別須要用戶注意的界面元素進行標註，或是用來表達出錯信息一類的狀態類內容。

　　不過要記得，在進行原型測試的時候不要使用帶有色彩註釋的版本，緣由是顯而易見的，咱們不但願被測用戶被這些「突出」的元素引導或干擾。

　　6.確保交互元素明確易懂

　　交互元素的呈現方式應該符合它的用途，例如按鈕看上去應該能夠被點擊。這些細節當中的視覺表現形式的正確與否，會直接影響視覺設計師及開發人員對原型的理解;不具有自解釋性的交互元素所帶來的潛在體驗問題也會暴露在可用性測試當中。

　　7.以實際像素爲單位

　　若是你使用HTML配合樣式代碼來製做原型(使用前端開發框架快速建立頁面原型)，那麼這個問題基本不存在，由於你一般須要以像素爲單位爲容器設置寬度或高度屬性。

　　不過在多數時候，咱們建立的是純粹的線框圖。以實際像素爲單位對頁面佈局及元素尺寸進行必定程度的規劃和說明，這將幫助咱們本身以及視覺設計師在接下來的工做當中省掉不少「猜想」與「估算」的過程。

　　我曾經習慣於使用Powerpoint來製做線框原型，這種方式只能展現元素之間大體的尺寸和位置關係;當項目進入視覺設計流程，它沒法有效的幫助我與設計師進行溝通，形成了很多的麻煩。

　　8.建立變動日誌

　　隨着迭代的不斷進行，每一版線框原型當中的變動一般會愈來愈細化，從頁面結構到模塊、控件，這會使跟進後續工做的設計師或開發人員愈來愈難以發現全部的變化。

　 　做爲交互設計師，咱們有責任建立一份變動日誌，並隨着項目的發展對其進行持續的更新。日誌中的每一條記錄都要包含日期、版本號、執行者以及變動說明。這 種信息交流的方式不須要花費太多的時間，但結果倒是事半功倍的，不管產品人員仍是設計師、開發者，你們均可以籍此來一目瞭然的跟蹤原型的版本變化。

　　9.避免深色線框

　　滿頁面的深色線框會使你的原型看上去缺少層次、粗糙凌亂。正像咱們在第一點當中所說的，試着使用不一樣明度的灰色做爲背景色來界定頁面和模塊的邊緣。

　 　這樣不只能表現出界面元素的視覺優先級，並且可使整個原型看上去更加整潔。若是必須在某些地方使用線條，那麼儘可能使用纖細的灰色實線或點狀線。咱們固 然不須要讓線框原型看上去像視覺稿同樣完美，但對這些細節的把握確實可讓它更加簡潔精美;在實際工做中，這每每能夠提高原型被接納的程度。

　　10.保持跟進

　　這一點更加偏向於交付流程，而非設計技巧。

　　完成線框原型後，咱們不能只是簡單的把它扔給跟進後續工做的同事。花些時間去支援視覺設計師或開發人員的工做，只有他們才能將你的設計概念最終落實到實際當中。

　　一般，交互原型當中所包含的想法、操做邏輯等方面的信息難以即全面又準確的被你們理解，並且其中隱含的問題有可能在後續階段才能體現出來。咱們有必要在交付原型以後保持跟進，與你們協同做戰。

　　以上就是關於提高線框原型溝通能力的十點建議。能夠參考咱們以前的文章「線框原型的本質及實踐應用概述」，瞭解更多關於線框原型的基本理念及運用方法。