從轉(zhuǎn)入移動(dòng)互聯(lián)網(wǎng)后，一直想寫(xiě)關(guān)于手機(jī)原型設(shè)計(jì)的一些常用工具和設(shè)計(jì)方法，通過(guò)自己從互聯(lián)網(wǎng)轉(zhuǎn)到移動(dòng)互聯(lián)網(wǎng)的一些常用的工具使用，可以實(shí)現(xiàn)多種方式來(lái)做手機(jī)客戶(hù)端的產(chǎn)品設(shè)計(jì)，以達(dá)到最好的效果。希望對(duì)于處于手機(jī)客戶(hù)端設(shè)計(jì)的設(shè)計(jì)師有些幫助。原型設(shè)計(jì)的軟件很多，Axure、Visio、FireWorks、PS、Balsamiq-Mockups……（這里有一些設(shè)計(jì)的工具下載地址：http://c2.com/cgi/wiki?GuiPrototypingTools）一系列的軟件都可以在手機(jī)原型設(shè)計(jì)中使用，甚至很多人直接用Word直接來(lái)做手機(jī)的原型設(shè)計(jì)。今天想說(shuō)的是用Visio做的設(shè)計(jì)和設(shè)計(jì)方法。

很多人把Visio稱(chēng)為“萬(wàn)能戰(zhàn)士”。微軟的Visio不是簡(jiǎn)單的畫(huà)流程圖的工具，同樣可以畫(huà)出直觀的手機(jī)原型設(shè)計(jì)，可以直接輸出給UI和視覺(jué)設(shè)計(jì)師，配上文檔后同樣可以交給開(kāi)發(fā)。

Visio畫(huà)原型優(yōu)點(diǎn)：
1、普及度高。Visio是不可或缺的一款軟件產(chǎn)品，不論是開(kāi)發(fā)人員還是產(chǎn)品經(jīng)理都會(huì)在自己電腦上裝個(gè)Visio，很多時(shí)間在電腦安裝Office時(shí)都選擇了安裝Visio。Visio的重要性已經(jīng)不需要再細(xì)說(shuō)，相信Visio在這些設(shè)計(jì)軟件中的也是認(rèn)知最高的。
2、組件庫(kù)極其豐富。你可以說(shuō)Visio起動(dòng)速度慢，那是因?yàn)樗刑嗟臇|西需要啟動(dòng)，Visio2010增加了更多，在不斷的滿足用戶(hù)流程規(guī)范的同時(shí)，也為原型設(shè)計(jì)增加了應(yīng)用的組件，讓原型設(shè)計(jì)更加快速化。
3、彈性極好。對(duì)于Visio的彈性確實(shí)沒(méi)啥可說(shuō)的，在自己切身使用的幾款原型設(shè)計(jì)軟件中（Axure、Balsamiq Mockups、Word、PPT、GUI Design Studio、UI Design等）感覺(jué)彈性最好的就是Visio了，同時(shí)可以直接將流程圖放在原型圖旁邊加以說(shuō)明，標(biāo)注文字，同時(shí)可以導(dǎo)到文檔中，也可以導(dǎo)出為圖片，可以直接交付給UI設(shè)計(jì)。
4、流程能力表現(xiàn)強(qiáng)大。Visio最早一定沒(méi)人用來(lái)做原型設(shè)計(jì)使用，但它最突出的特點(diǎn)是用它來(lái)畫(huà)流程圖。Visio畫(huà)流程功能同樣配在產(chǎn)品中，交集著原型設(shè)計(jì)，對(duì)于開(kāi)發(fā)、設(shè)計(jì)都會(huì)是一種全方位結(jié)合的方式。
5、完整的支撐整個(gè)產(chǎn)品生命周期。這是最重要的一點(diǎn)，同時(shí)也是很多設(shè)計(jì)者愿意用Visio來(lái)畫(huà)原型的一方面。為什么說(shuō)Visio可以完整的支撐整個(gè)產(chǎn)品生命周期，產(chǎn)品從無(wú)到有，一定是個(gè)迭代的過(guò)程，不斷的產(chǎn)品版本的更新，文檔的更新，流程的更新修改，用Visio畫(huà)原型，旁邊附上流程圖加說(shuō)明，會(huì)將很多流程簡(jiǎn)單化。
……

Visio對(duì)于畫(huà)手機(jī)原型設(shè)計(jì)確實(shí)有自己的優(yōu)勢(shì)方面，但同樣存在著不足，包括界面效果表現(xiàn)，以及交互方面的缺陷等。
Visio畫(huà)原型缺點(diǎn)：
1、靜態(tài)。這是個(gè)很頭疼的問(wèn)題，因?yàn)閂isio沒(méi)辦法做到和Axure一樣做到交互，只有將事件、提示語(yǔ)言寫(xiě)在Visio原型旁邊。給出來(lái)的只是一個(gè)靜態(tài)的頁(yè)面，或者僅是一種圖片而已。
2、過(guò)于強(qiáng)大而不夠?qū)I(yè)。都說(shuō)事情有二面性，Visio也一樣。因?yàn)樗^(guò)于強(qiáng)大，而顯得不夠?qū)I(yè)，Visio可以畫(huà)流程圖，而很多用戶(hù)就直接將Visio定為只能畫(huà)流程圖的工具。但同樣可以發(fā)現(xiàn)很多用戶(hù)用Visio來(lái)畫(huà)網(wǎng)站的原型圖，Axure或許也是這樣，但很多人更愿意用“Axure+Visio”來(lái)完成“原型+流程”的工作，各取所長(zhǎng)，當(dāng)僅用Visio畫(huà)時(shí)就顯得不夠?qū)I(yè)了。
3、使用成本相對(duì)較高。這里說(shuō)的成本集中于人力成本和時(shí)間成本。用Visio做個(gè)原型確實(shí)不容易，我花了很久才做了一個(gè)手機(jī)原型，而且還沒(méi)完全表達(dá)清楚意思，不像Axure可以直接通過(guò)事件來(lái)表達(dá)意思，同時(shí)對(duì)于配色也沒(méi)Axure好用，其次是時(shí)間成本，做一個(gè)像樣的Visio的原型得花費(fèi)很多時(shí)間，同時(shí)與UI、視覺(jué)的溝通時(shí)間成本會(huì)增加。沒(méi)有了交互，文字的理解會(huì)增加更多的時(shí)間成本。
4、交互能力差。這點(diǎn)我一直覺(jué)得是用Visio畫(huà)原型最大的缺陷，Visio沒(méi)辦法像其它軟件一樣，從一個(gè)界面直接過(guò)度到另一個(gè)界面，對(duì)于交互的感覺(jué)確實(shí)不好。所以很多設(shè)計(jì)人員不愿意用Visio做原型也在這個(gè)方面。
5、缺少連貫性，大量的文字信息輔助。同樣的一個(gè)功能在其它的原型設(shè)計(jì)軟件中可以直接表現(xiàn)出來(lái)，例如跳出框之類(lèi)，都可以直接表現(xiàn)。但Visio只有通過(guò)大量的文字信息來(lái)表達(dá)清楚，無(wú)形中增加了時(shí)間成本，同時(shí)文字理解差異也會(huì)導(dǎo)致成本增加。
……

Visio是“萬(wàn)能戰(zhàn)士”，但優(yōu)缺點(diǎn)同在。Visio給用戶(hù)的不再是簡(jiǎn)單的畫(huà)流程圖工具，同時(shí)也可以是原型設(shè)計(jì)工具?！疤}卜青菜各有所愛(ài)”，Visio同樣可以做出漂亮的原型界面。合理有效的利用Visio自帶的控件，同時(shí)加載一些手機(jī)設(shè)計(jì)常用的界面，可以很好的表達(dá)出產(chǎn)品原型。個(gè)人建議如果用Visio做手機(jī)原型設(shè)計(jì)最好是針對(duì)于大屏幕的手機(jī)，如Android和iPhone這類(lèi)大屏幕的手機(jī)，同樣可以做出很多原型軟件做出的效果。

上面是二張用Axure和Visio畫(huà)的原型，Visio花費(fèi)的時(shí)間是比較多的，但當(dāng)有模版時(shí)會(huì)讓工作變的更加簡(jiǎn)單化。特別是對(duì)于做手機(jī)DEMO來(lái)說(shuō)，用Visio即可以畫(huà)流程圖，同樣也可以畫(huà)原型圖。個(gè)人愛(ài)好取舍吧，同樣見(jiàn)過(guò)用PPT做手機(jī)原型的，下一篇可以分享一下用PPT做原型的一些優(yōu)劣，做出的效果同樣逼真。哪個(gè)更好看，則是仁者見(jiàn)仁，智者見(jiàn)智了，但有一點(diǎn)可以確定，Visio同樣可以做出漂亮的原型。

附上用Visio畫(huà)的Android原型和Axure畫(huà)Andriod的原型，希望可以對(duì)手機(jī)原型愛(ài)好者有些幫助。

axure-android (1) visio-android (2)

突然發(fā)現(xiàn)用Visio的Android原型好大，如有需要就發(fā)郵件給我吧（xzwcool@gmail.com）。

來(lái)源：http://www.537520.com/?p=502