轉(zhuǎn)載藍藍設(shè)計(   www.alimai.net  )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源：http://www.54xiaomeng.com/?p=432

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，   請點這里

繼續(xù)上一章的內(nèi)容，那么怎么去組織頁面元素，制作原型Demo；哪些表現(xiàn)層面是交互設(shè)計師該重點表達的內(nèi)容，原型的制作又有哪些章法可循呢？

Ⅰ. 什么是原型?

原型的概念說的簡單直白些就是用戶使用產(chǎn)品的界面模型，原型的設(shè)計主要包括三部分：①需求內(nèi)容的呈現(xiàn)  ②導(dǎo)航和鏈接   ③數(shù)據(jù)的交換

①需求內(nèi)容的呈現(xiàn)

1）文本，多媒體內(nèi)容的呈現(xiàn) 

最基礎(chǔ)的web頁面就是文字和多媒體的載體，通過文字和媒體把需求內(nèi)容呈現(xiàn)給訪問者是Web設(shè)計最最基礎(chǔ)的部分，設(shè)計師需要將信息分主次的傳達給訪問者，這是設(shè)計最基本的目的，之前我寫過類似的文章《視覺設(shè)計是為了表達信息》。其實不管是交互還是視覺，都應(yīng)該具備排版組織能力，分得清主次，明白目標，懂得用戶群，才能談的上設(shè)計。

了解柵格，有排版功底的交互設(shè)計師可以省去很多溝通成本：

和傳統(tǒng)的視覺排版不同的是，交互設(shè)計需要在有限的空間內(nèi)組織信息，舉幾個最常用的手法：

在設(shè)計布局的過程中，交互還必須要清楚前端實現(xiàn)的方法，基本的html,css和一些常用腳本效果都要有所了解。

2）行為召喚

除了基本的排版布局，交互在需求的呈現(xiàn)方面還需要花點心思。讀點心理學(xué)，了解數(shù)據(jù)分析，熟悉用戶的行為習慣，想好以何種方式呈現(xiàn)內(nèi)容才能迎合用戶。對待用戶，設(shè)計師要有一顆奴才的心態(tài)去猜測主子的玻璃心。

先介紹一種內(nèi)容引導(dǎo)的方法，姑且給這樣的設(shè)計方法稱作為“行為召喚”。所謂的“行為召喚”就是呈現(xiàn)界面的時候考慮到用戶心理，能夠激發(fā)起用戶的參與度。一些比較生硬的做法比如：文字加粗加大變色，按鈕變大，AD廣告做成gif圖或flash晃來晃去，增加new,hot等圖片標簽，或者干脆用性感美女做廣告。這些做法雖然破壞了畫面和體驗，但還是要承認這些比較生硬的設(shè)計方法確實能夠吸引一部分用戶的注意力。

如果將這些方法做一些思考用另一種方式呈現(xiàn)：

上述都是利用心理學(xué)的方法做的“行為召喚”，理解用戶，站在用戶的角度思考問題是交互設(shè)計師必須要學(xué)習的方法之一。

3）示例引導(dǎo)

如果給用戶三個垃圾桶，分類分別是可回收，不可回收，有害垃圾。無論你怎么設(shè)計外觀，用什么顏色，還是有很多用戶不知道該如何分類。但如果垃圾桶內(nèi)已存在一些垃圾，用戶自然會根據(jù)上一個人的垃圾來選擇分類。這樣的引導(dǎo)方法同樣可以運用到Web設(shè)計中。

看一些例子：

②導(dǎo)航和鏈接

除了內(nèi)容的呈現(xiàn)，網(wǎng)頁中還存在著大量的導(dǎo)航和鏈接，也就是傳說中的信息架構(gòu)。信息架構(gòu)主要目標就是以最短時間，最方便的形式讓用戶能夠快速找到想要的內(nèi)容，關(guān)于結(jié)構(gòu)導(dǎo)航的概念請閱讀上篇文章《交互設(shè)計的職能》中的<1.關(guān)于結(jié)構(gòu)導(dǎo)航的設(shè)計>，這里再粗略的講一下鏈接，也就是導(dǎo)航中的關(guān)聯(lián)導(dǎo)航。

關(guān)聯(lián)導(dǎo)航主要就是解決用戶“下一步”應(yīng)該做什么，這個分兩種情況：

1）產(chǎn)品經(jīng)理希望用戶做什么

產(chǎn)品經(jīng)理會迫于一些指標壓力將業(yè)務(wù)模式加到網(wǎng)站中，這些內(nèi)容可能是和用戶自己預(yù)想的內(nèi)容毫無關(guān)系。那么這一類的鏈接都統(tǒng)稱為業(yè)務(wù)式鏈接。

這一類的業(yè)務(wù)鏈接內(nèi)容，交互所需要考慮的就是怎么將這些鏈接融入到頁面中，強調(diào)又不至于太生硬。常見的方法基本上就是圖文混排，動態(tài)播放滾動，AD廣告插入。

2）用戶到底想做什么

用戶想做什么可能他自己都不是很清楚，如何幫助用戶發(fā)現(xiàn)感興趣的內(nèi)容就需要通過元數(shù)據(jù)自動創(chuàng)建關(guān)聯(lián)內(nèi)容。元素據(jù)包括：時間，類型，主題，興趣，搜索或購買記錄等。這時候的鏈接是靠程序生成的，交互設(shè)計師要能夠看的懂數(shù)據(jù)，給出合適的鏈接規(guī)則。

例如最常見的“猜你喜歡”

如果能夠?qū)I(yè)務(wù)導(dǎo)向和用戶的心理模型保持在一個維度，比如google,baidu的個性化廣告投放，那么這個產(chǎn)品的體驗和轉(zhuǎn)化率自然就會上升，不過要做到這一點，需要數(shù)據(jù)分析人員，產(chǎn)品人員和交互設(shè)計師的共同努力。

③數(shù)據(jù)的交換

之前所講的內(nèi)容都是我們呈現(xiàn)給用戶的內(nèi)容，但產(chǎn)品級的Web的還需要與用戶之間有互動，也就是數(shù)據(jù)的交換。如何讓用戶參與的更容易，數(shù)據(jù)交換的更順利，這就是我們平常所談到的產(chǎn)品的易用性。那么原型階段是怎么做到讓產(chǎn)品更好用呢？

1）熟悉并運用Web平臺的各種標準組件

另外附一個jQuery組件的Demo預(yù)覽網(wǎng)站http://jqueryui.com/demos/

2）給出合適的即時的操作反饋

3）容錯性原則

4）程序能夠?qū)崿F(xiàn)的，盡量不用讓用戶去操作

類似導(dǎo)入類似產(chǎn)品，選擇記錄，智能搜索等

Ⅱ. 如何繪制原型

繪制原型當然要先選工具,博主用過以下原型工具：

當然最后還是覺得Axure最好用，工具的使用方法請移步到產(chǎn)品原型設(shè)計論壇，本篇就不再贅述了。

Ⅲ. 原型是過程，不是最終結(jié)果

我覺得這個觀點非常重要，所以單獨列出來講了。我曾經(jīng)很迷戀工具的使用方法，甚至會利用PS切圖將原型做到非常逼真的程度，但時間長了會覺得這樣的舉動非常沒有意義，而且會不自覺的抗拒別人的修改建議。原型只是一個概念到實現(xiàn)的過渡，是不同部門對話的交流介質(zhì)，最終還是會被開發(fā)需求文檔和前端稿所取代，交互的重點在于溝通和幫助項目成員理解改進需求。

所以我一直覺得交互設(shè)計就是一個有產(chǎn)品思想的需求翻譯，比視覺更懂產(chǎn)品，比產(chǎn)品更懂設(shè)計，是承擔起概念到實現(xiàn)的溝通橋梁。所以，廣泛的接受修改建議，有選擇的對原型不斷的做改進，利用原型引起項目成員的討論，每次的原型修改都是一次理解上的進步，這樣才能發(fā)揮交互設(shè)計的真正意義。

最后寫點總結(jié)：

原型的制作是一項比較復(fù)雜的工程，沒有捷徑和速成的方法，能力上的差別基本上在于項目經(jīng)驗的積累和對業(yè)務(wù)的熟悉程度,當然個人的感悟認知能力也很重要。