2017-1-2 周周
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
@Akane_Lee :很多項(xiàng)目在開(kāi)發(fā)過(guò)程中,會(huì)制作原型測(cè)試與驗(yàn)證構(gòu)想。但項(xiàng)目開(kāi)發(fā)會(huì)經(jīng)過(guò)許多階段,也有很多種制原型的方式。該如何配合項(xiàng)目開(kāi)發(fā)進(jìn)度,制作適合的 原型呢?這篇文章列出了每一個(gè)設(shè)計(jì)階段對(duì)應(yīng)的原型設(shè)計(jì),能解決不少設(shè)計(jì)師的困惑。
開(kāi)發(fā)者對(duì)于產(chǎn)品一定有各式各樣的想法,并盡力讓用戶(hù)覺(jué)得產(chǎn)品「好用」。但開(kāi)發(fā)者該如何確定目前產(chǎn)品設(shè)計(jì)走向能讓用戶(hù)覺(jué)得好用?可透過(guò)「使用者測(cè)試」這個(gè)方法驗(yàn)證。我們可以透過(guò)原型測(cè)試用戶(hù)想透過(guò)產(chǎn)品完成某項(xiàng)任務(wù)時(shí),需經(jīng)過(guò)哪些頁(yè)面的流程;觀察使用者在操作過(guò)程中是否有感到任何不順或遲疑的地方等等。
有些文獻(xiàn)將原型分成低保真、高保真等等。我將原型粗分成:
每一種 原型 用途、制作方法、成本、使用時(shí)機(jī)都不相同,各有利弊。
最快速的原型制作方式,只需要紙筆即可完成,不需要經(jīng)過(guò)耗時(shí)的專(zhuān)業(yè)訓(xùn)練即可上手。只要在紙上繪制簡(jiǎn)單的 Wireframe (線(xiàn)框圖)就能進(jìn)行使用者測(cè)試。
要制作紙本 原型,需先考慮用戶(hù)想操作產(chǎn)品完成某一任務(wù)時(shí)會(huì)經(jīng)過(guò)的所有頁(yè)面,繪制簡(jiǎn)易 Wireframe。
使用時(shí)機(jī)
優(yōu)點(diǎn)
缺點(diǎn)
這是我最少使用的制作原型方式,雖然只要紙、筆、便利貼…等文具就可以完成,但和最終產(chǎn)品落差太大,主要拿來(lái)測(cè)試 Wireframe 內(nèi)容版面配置、檢查有沒(méi)有漏頁(yè)面。
或者是和 PM 或 RD 討論過(guò)程中各執(zhí)一詞僵持不下時(shí),為了說(shuō)服他人而制作的簡(jiǎn)易 原型,開(kāi)發(fā)團(tuán)隊(duì)內(nèi)部討論使用。但也和實(shí)際手機(jī)或網(wǎng)站上操作落差太大,效果不佳。
UI Stencils | iPhone Stencil Kit 這間公司提供很炫的金屬樣板,包含 iOS、Android、Web 等等,可以手繪出漂亮整齊的 Wireframe 。不見(jiàn)得好用,但擺在桌上看起來(lái)就很專(zhuān)業(yè)。我手上的是第一代,目前樣板已經(jīng)更新很多次版本了。
因?yàn)橛脩?hù)操作紙本 原型 和操作電子產(chǎn)品感受和習(xí)慣完全不同,保留快速制作 原型 的優(yōu)點(diǎn),改善操作落差極大的缺點(diǎn),延伸出這種制作原型的方式:
使用時(shí)機(jī)
優(yōu)點(diǎn)
缺點(diǎn)
真要拿手繪 Wireframe 制作 原型,我會(huì)使用 POP – Prototyping on Paper,可以在極短時(shí)間內(nèi)將手繪紙本 Wireframe 制作成可操作的 原型。減少紙本和電子產(chǎn)品在操作上的落差,盡量接近實(shí)際使用情境。
我大多拿來(lái)測(cè)試「單一任務(wù)」的操作流程,不會(huì)把整個(gè)產(chǎn)品都做成 原型,頁(yè)面太多管理不易,要修改也麻煩。
手繪 Wireframe 等級(jí)的原型我都不會(huì)當(dāng)成是正式測(cè)試,頂多拿來(lái)確定「這樣做用戶(hù)能夠順利完成任務(wù)嗎」,和最后產(chǎn)品落差實(shí)在太大。而且就算是信息公司,主管、老板、甚至開(kāi)發(fā)團(tuán)隊(duì)里看不懂 Wireframe 的人也是有,看不懂也沒(méi)辦法拿這個(gè)和對(duì)方溝通討論。
早期經(jīng)驗(yàn)不足時(shí),會(huì)依賴(lài)這種作法來(lái)驗(yàn)證自己的設(shè)計(jì),幾年下來(lái)會(huì)發(fā)現(xiàn)工具型 App 界面大同小異、操作方式就那幾套。除非是游戲類(lèi)、創(chuàng)新/找不到參考的界面設(shè)計(jì),不然我不會(huì)制作 Wireframe 等級(jí)的原型。
許多使用者看不懂 Wireframe,直到 Mockup 階段才能理解。若要對(duì)外部進(jìn)行使用者測(cè)試,原型盡量拿接近最終發(fā)布的產(chǎn)品,得到的結(jié)果較精準(zhǔn)。
使用時(shí)機(jī)
優(yōu)點(diǎn)
缺點(diǎn)
現(xiàn)況我最常做的 原型 是這類(lèi)型,用 Mockup 制作出來(lái)的 原型 不管對(duì)內(nèi)或?qū)ν猓褂谜叨伎吹枚?/span>
目前業(yè)界不少人制作 Mockup 等級(jí)的 原型 時(shí),會(huì)使用 InVision,簡(jiǎn)易快速易上手,且支持團(tuán)隊(duì)協(xié)作。可免費(fèi)試用,對(duì)于初次接觸 原型 的開(kāi)發(fā)者來(lái)說(shuō),短短時(shí)間就能做出有模有樣的 原型。
雖然 Mockup 等級(jí)的 原型 沒(méi)辦法確認(rèn)程序數(shù)據(jù)面的狀況、也沒(méi)辦法測(cè)試當(dāng)使用者操作不是按照規(guī)劃預(yù)期時(shí)產(chǎn)品如何反應(yīng),但就以視覺(jué)設(shè)計(jì)、內(nèi)容排版、操作易用性來(lái)說(shuō),Mockup 等級(jí)的 原型 算是不需要?jiǎng)佑霉こ處熥珜?xiě)程序,只需要設(shè)計(jì)師執(zhí)行、成本較低的 原型 制作方式了。
介于 Mockup 和程序制作間,靜態(tài) HTML,尚未套后臺(tái)串?dāng)?shù)據(jù)庫(kù),使用假數(shù)據(jù)。能測(cè)試動(dòng)態(tài)效果對(duì)用戶(hù)的影響。
使用時(shí)機(jī)
優(yōu)點(diǎn)
缺點(diǎn)
幾乎只要?jiǎng)佑玫焦こ處煂?xiě)程序,制作成本就會(huì)提高,Hype3 能讓設(shè)計(jì)師不用寫(xiě)程序代碼就產(chǎn)出 HTML、CSS、JS,功能強(qiáng)大、容易上手、支持中文界面。是我愛(ài)用的工具軟件,尤其在制作動(dòng)畫(huà)效果,配合時(shí)間軸和場(chǎng)景、對(duì)象等,可以在短時(shí)間內(nèi)做出假以亂真的 原型。
如果要測(cè)試動(dòng)態(tài)效果,限度的 原型 要做到 Web 這個(gè)等級(jí)。順帶一提,Hype3 的物理引擎非常有趣,不在意產(chǎn)出的程序代碼和效能的話(huà),做簡(jiǎn)單的小游戲很有意思,單純拿來(lái)做 原型 有點(diǎn)大材小用了。
離上架產(chǎn)品只差一步,已套程序數(shù)據(jù)庫(kù)。到這一步再來(lái)測(cè)「好不好用」已經(jīng)來(lái)不及了,真要修改勞師動(dòng)眾。在這階段要測(cè)的是各種「錯(cuò)誤」,比如使用者操作錯(cuò)誤;GPS、Wifi 不通時(shí)產(chǎn)品怎么響應(yīng)用戶(hù)等等,還有程序 Bug。
使用時(shí)機(jī)
優(yōu)點(diǎn)
缺點(diǎn)
無(wú)論是 Wireframe、Mockup、Web 產(chǎn)出的 原型,都沒(méi)辦法完整檢視整個(gè)產(chǎn)品。只有到了程序代碼階段、工程師套好程序串?dāng)?shù)據(jù)庫(kù),才能測(cè)試產(chǎn)品各個(gè)面向?qū)κ褂谜卟僮魃系挠绊憽?/span>
動(dòng)用人力多、成本極高,一旦發(fā)現(xiàn)問(wèn)題要修改會(huì)燒更多錢(qián),但每個(gè)產(chǎn)品上架前最好都要經(jīng)過(guò)這個(gè)步驟。
原型 是拿來(lái)驗(yàn)證、找出問(wèn)題的方法,不是有做就能保平安。原型 只能告訴你問(wèn)題在哪,不會(huì)告訴你問(wèn)題怎么解決。
不管是什么樣子的 原型、修改再多次,產(chǎn)品上架后一定會(huì)有更多出乎意料的各種狀況。公開(kāi)發(fā)布前有先做 原型 測(cè)試,起碼開(kāi)發(fā)團(tuán)隊(duì)知道問(wèn)題出在哪、有機(jī)會(huì)改善它。不做 原型 就直接上架,產(chǎn)品的問(wèn)題在哪就是由使用者透過(guò)一星評(píng)價(jià)或客訴來(lái)告訴你了。
藍(lán)藍(lán)設(shè)計(jì)( 91whvog3.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://91whvog3.cn