2013-9-21 藍藍設(shè)計的小編
轉(zhuǎn)載藍藍設(shè)計( www.ocunn.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(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)該具備排版組織能力，分得清主次，明白目標(biāo)，懂得用戶群，才能談的上設(shè)計。
了解柵格，有排版功底的交互設(shè)計師可以省去很多溝通成本：
和傳統(tǒng)的視覺排版不同的是，交互設(shè)計需要在有限的空間內(nèi)組織信息，舉幾個最常用的手法：
在設(shè)計布局的過程中，交互還必須要清楚前端實現(xiàn)的方法，基本的html,css和一些常用腳本效果都要有所了解。
2）行為召喚
除了基本的排版布局，交互在需求的呈現(xiàn)方面還需要花點心思。讀點心理學(xué)，了解數(shù)據(jù)分析，熟悉用戶的行為習(xí)慣，想好以何種方式呈現(xiàn)內(nèi)容才能迎合用戶。對待用戶，設(shè)計師要有一顆奴才的心態(tài)去猜測主子的玻璃心。
先介紹一種內(nèi)容引導(dǎo)的方法，姑且給這樣的設(shè)計方法稱作為“行為召喚”。所謂的“行為召喚”就是呈現(xiàn)界面的時候考慮到用戶心理，能夠激發(fā)起用戶的參與度。一些比較生硬的做法比如：文字加粗加大變色，按鈕變大，AD廣告做成gif圖或flash晃來晃去，增加new,hot等圖片標(biāo)簽，或者干脆用性感美女做廣告。這些做法雖然破壞了畫面和體驗，但還是要承認這些比較生硬的設(shè)計方法確實能夠吸引一部分用戶的注意力。
如果將這些方法做一些思考用另一種方式呈現(xiàn)：
上述都是利用心理學(xué)的方法做的“行為召喚”，理解用戶，站在用戶的角度思考問題是交互設(shè)計師必須要學(xué)習(xí)的方法之一。
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)主要目標(biāo)就是以最短時間，最方便的形式讓用戶能夠快速找到想要的內(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)理會迫于一些指標(biāo)壓力將業(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è)計師要能夠看的懂?dāng)?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平臺的各種標(biāo)準(zhǔn)組件
另外附一個jQuery組件的Demo預(yù)覽網(wǎng)站http://jqueryui.com/demos/
2）給出合適的即時的操作反饋
3）容錯性原則
4）程序能夠?qū)崿F(xiàn)的，盡量不用讓用戶去操作
類似導(dǎo)入類似產(chǎn)品，選擇記錄，智能搜索等
Ⅱ. 如何繪制原型
繪制原型當(dāng)然要先選工具,博主用過以下原型工具：
當(dāng)然最后還是覺得Axure最好用，工具的使用方法請移步到產(chǎn)品原型設(shè)計論壇，本篇就不再贅述了。
Ⅲ. 原型是過程，不是最終結(jié)果
我覺得這個觀點非常重要，所以單獨列出來講了。我曾經(jīng)很迷戀工具的使用方法，甚至?xí)肞S切圖將原型做到非常逼真的程度，但時間長了會覺得這樣的舉動非常沒有意義，而且會不自覺的抗拒別人的修改建議。原型只是一個概念到實現(xiàn)的過渡，是不同部門對話的交流介質(zhì)，最終還是會被開發(fā)需求文檔和前端稿所取代，交互的重點在于溝通和幫助項目成員理解改進需求。
所以我一直覺得交互設(shè)計就是一個有產(chǎn)品思想的需求翻譯，比視覺更懂產(chǎn)品，比產(chǎn)品更懂設(shè)計，是承擔(dān)起概念到實現(xiàn)的溝通橋梁。所以，廣泛的接受修改建議，有選擇的對原型不斷的做改進，利用原型引起項目成員的討論，每次的原型修改都是一次理解上的進步，這樣才能發(fā)揮交互設(shè)計的真正意義。
最后寫點總結(jié)：
原型的制作是一項比較復(fù)雜的工程，沒有捷徑和速成的方法，能力上的差別基本上在于項目經(jīng)驗的積累和對業(yè)務(wù)的熟悉程度,當(dāng)然個人的感悟認知能力也很重要。
藍藍設(shè)計的小編 http://www.ocunn.cn