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

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

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

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

Ⅰ. 什么是原型?

原型的概念說的簡(jiǎn)單直白些就是用戶使用產(chǎn)品的界面模型，原型的設(shè)計(jì)主要包括三部分：①需求內(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è)計(jì)最最基礎(chǔ)的部分，設(shè)計(jì)師需要將信息分主次的傳達(dá)給訪問者，這是設(shè)計(jì)最基本的目的，之前我寫過類似的文章《視覺設(shè)計(jì)是為了表達(dá)信息》。其實(shí)不管是交互還是視覺，都應(yīng)該具備排版組織能力，分得清主次，明白目標(biāo)，懂得用戶群，才能談的上設(shè)計(jì)。

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

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

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

2）行為召喚

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

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

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

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

3）示例引導(dǎo)

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

看一些例子：

②導(dǎo)航和鏈接

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

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

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

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

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

2）用戶到底想做什么

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

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

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

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

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

1）熟悉并運(yùn)用Web平臺(tái)的各種標(biāo)準(zhǔn)組件

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

2）給出合適的即時(shí)的操作反饋

3）容錯(cuò)性原則

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

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

Ⅱ. 如何繪制原型

繪制原型當(dāng)然要先選工具,博主用過以下原型工具：

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

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

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

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

最后寫點(diǎn)總結(jié)：

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