3.將視覺元素分組并進(jìn)行優(yōu)先級排序
從功能及內(nèi)容的角度，將上面列表中的元素條目進(jìn)行分組，并按照優(yōu)先級從高到低的順序排列：
- 搜索框、搜索失敗提示、搜索建議
- 熱門關(guān)鍵詞、飲食分類、最近搜索關(guān)鍵詞
- logo、app的功能服務(wù)簡述
- 添加食材的入口鏈接
對于最簡化可實行產(chǎn)品來說，分組和排序的工作會很容易進(jìn)行。如果app的功能比較復(fù)雜，視覺元素和模塊過多，你可以嘗試卡片排序的方式。將每個元素條目寫在卡片上，使形式更加實體化、獨立化，便于操作。讓團(tuán)隊相關(guān)人員參與進(jìn)來，征詢分組建議，最終達(dá)成一種統(tǒng)一的模式。
4.為每組視覺元素制作低保真原型
草圖時間，開始動手吧。低保真階段，不需要任何藝術(shù)美化方面的因素介入。
不必介意能否一開始就把所有元素畫的得當(dāng)和到位，這是一個創(chuàng)作的過程，完全可以多嘗試嘗試你頭腦中不同的方案。而且我們之前的分組方案也不是絕對的，在制作草稿的過程里，如果你覺得最近“搜索關(guān)鍵詞”在邏輯上與搜索框更加貼近，那么就修改一下分組，沒問題。要記得，在原型設(shè)計的整個過程里，我們有一個大原則，就是讓迭代與更新發(fā)生的盡量早些。
目前還不用考慮各元素在“一致性”方面的問題，不必為他們之間的位置和尺寸關(guān)系牽扯精力；現(xiàn)在我們只要關(guān)注每個元素獨立的個體。
5.線框圖
是時候把這些UI元素的低保真原型撮合到線框原型中了；不要忘記我們之前對它們進(jìn)行分組時的優(yōu)先級排序。在這期間仍然會頻繁的發(fā)生迭代，所以不必過多考慮精確的網(wǎng)格對齊、配色或字體一類。線框原型的設(shè)計制作過程，就是評估UI元素之間的平衡性、優(yōu)先級和互動關(guān)系的過程。
在之前的低保真原型階段，紙和筆就足夠了；但是在線框原型的制作過程中，我們通常需要對模塊化、可復(fù)用的UI元素集合進(jìn)行布局規(guī)劃和細(xì)節(jié)調(diào)整。這時，我們最好使用一些輔助工具來提高效率；你可以試試看下面這些：
便簽貼紙
恩，最基本的方法，并且仍然沒有脫離紙筆，但不失靈活性與可行性。在每張便簽貼紙上畫一個UI元素，或是一組已經(jīng)模塊化的UI元素集合，根據(jù)需求隨意調(diào)整組合方案及布局位置。如果某元素或模塊本身需要調(diào)整，重新畫一枚即可，無需調(diào)整全局。
PowerPoint(PPT)或Keynote
首先說明，我個人很討厭使用此類作演示用的軟件工具進(jìn)行設(shè)計方面的工作，不過必須承認(rèn)，在快速草圖和分組歸類設(shè)計元素等方面，它們還算好用。
Google文檔的繪圖工具
Google文檔工具套裝中的繪圖應(yīng)用也不錯。雖然它并非專為Web設(shè)計而打造，但它的基本功能可以滿足我們制作線框圖的需求，而且遠(yuǎn)程多人協(xié)作等方面的功能特色也相當(dāng)實用。
獨立Web應(yīng)用
可以試試那些專門用來制作線框圖的基于瀏覽器的Web應(yīng)用。有的還不錯，比如Mockingbird，很容易上手，基本功能一應(yīng)俱全。Pencil Project也是一個選擇，它是一款Firefox擴(kuò)展。
桌面應(yīng)用軟件
Balsamiq Mockups是一款不錯的線框原型設(shè)計工具，它是商業(yè)軟件。當(dāng)然，如果你已經(jīng)有Microsoft Visio或是OmniGraffle的話，也可以使用它們提供的網(wǎng)頁線框模板。
我個人比較喜歡那些提供了低保真草圖風(fēng)格的軟件，這種風(fēng)格的線框圖可以顯得更加原始和自然，避免摻雜過多的視覺美化方面的因素。下圖左側(cè)為手繪草圖，右側(cè)為OmniGraffle的線框原型輸出。
對于以上幾種類型的工具，我傾向于Web應(yīng)用或是桌面應(yīng)用軟件，因為它們多數(shù)都內(nèi)置了很全面的GUI組件庫。
低保真原型可以用于產(chǎn)品相關(guān)部門內(nèi)部進(jìn)行小規(guī)模的評審和測試。
出處：Be For Web
責(zé)任編輯：bluehearts
上一頁 原型設(shè)計與用戶測試 [1] 下一頁 原型設(shè)計與用戶測試 [3]
|
第 1 頁 
第 2 頁 原型設(shè)計與用戶測試 [2]
