原型設(shè)計(jì)有哪些工具好用？

時(shí)間：2024-02-12 16:20:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-12 16:20:01 來源：網(wǎng)站運(yùn)營(yíng)

原型設(shè)計(jì)有哪些工具好用？：原型設(shè)計(jì)其實(shí)可作為具體的概念表達(dá)，而且在實(shí)際的產(chǎn)品開發(fā)中，運(yùn)用原型設(shè)計(jì)工具可以測(cè)試產(chǎn)品，提高設(shè)計(jì)效率，節(jié)約設(shè)計(jì)成本。下面康石石給大家介紹一些好用的原型設(shè)計(jì)工具。

分析與定義

1. Emphathy map（用戶分析）

Emphathy Map是一種可以分析用戶體驗(yàn)的方法。交互原型設(shè)計(jì)的第一步是通過調(diào)研先找到Pain Points，Emphathy Map一共有五個(gè)需要分析的部分，包括Tasks、Feelings、Influences、Pain Points和Overall Goal，下面的Pain Points和Overall Goal是基于上面的三個(gè)部分進(jìn)行的總結(jié)。回答問題的時(shí)候要先找到Tasks，再分析Feelings和Influences，最終做總結(jié)。Emphathy Map不是短期就能做完的，需要長(zhǎng)時(shí)間的分析和觀察，最好是團(tuán)隊(duì)合作。

圖片來源：https://boagworld.com/usability/…

為了做出完整的Emphathy Map，需要大量的數(shù)據(jù)，但是上圖中的語(yǔ)言過于抽象，所以很多人會(huì)采用下面的模板來開展初步的用戶分析。從觀察用戶的所看、所聽、所說、所想和所做來進(jìn)行總結(jié)。實(shí)際上兩者的內(nèi)容是一樣的，只是換了一種語(yǔ)言而已。在實(shí)際操作中，可以團(tuán)隊(duì)合作進(jìn)行頭腦風(fēng)暴式的數(shù)據(jù)填充，再?gòu)暮芏鄶?shù)據(jù)中，挑選出最適合的觀點(diǎn)作為推斷Pain Points，就可以進(jìn)入到設(shè)計(jì)階段了。

圖片來源：https://www.everyinteraction.com/…

2. 大屏幕頭腦風(fēng)暴（功能分析）

在完成了流程圖和信息架構(gòu)圖后，進(jìn)行具體的UI界面設(shè)計(jì)時(shí)可以使用大屏幕形式的設(shè)計(jì)方法。其主要的功能是通過多人頭腦風(fēng)暴來集體討論，設(shè)計(jì)出界面的架構(gòu)。包括產(chǎn)品經(jīng)理、UI設(shè)計(jì)師、UX設(shè)計(jì)師等所有需要進(jìn)行功能和外觀設(shè)計(jì)的交互設(shè)計(jì)師，基本的設(shè)計(jì)順序如下：

1）需要把界面畫的大一些，貼在墻上。

2）根據(jù)流程圖按順序進(jìn)行設(shè)計(jì)。

3）當(dāng)產(chǎn)品經(jīng)理提出主要的界面功能之后，其他設(shè)計(jì)師可以用便利貼貼出修改、補(bǔ)充、刪除意見。

4）最后由產(chǎn)品經(jīng)理進(jìn)行整理，進(jìn)行合理的意見整合。

圖片來源：https://unsplash.com/photos/tCNjNF6FfGk

這種方式可以把每個(gè)設(shè)計(jì)師的專業(yè)知識(shí)都結(jié)合在一起，一起決定大體框架及具體的功能，避免了大量的重新修改主要界面內(nèi)容。而且這樣討論并且設(shè)計(jì)出來的界面質(zhì)量會(huì)很高，但缺點(diǎn)是需要大量的時(shí)間去進(jìn)行會(huì)議與思想的碰撞。

原型設(shè)計(jì)與測(cè)試

1. 紙質(zhì)原型（界面制作與測(cè)試）

紙質(zhì)的交互設(shè)計(jì)界面的優(yōu)點(diǎn)是可以快速的進(jìn)行設(shè)計(jì)表達(dá)，視覺化設(shè)計(jì)概念。繪制的方法和測(cè)試的方法有兩種。第一種是只利用一張紙，不進(jìn)行疊加設(shè)計(jì)，繪制完成后用手機(jī)紙模型來卡住界面進(jìn)行跳轉(zhuǎn)界面。

圖片來源：https://www.pinterest.co.uk/pin/282882420317248770/

第二種是可以把彈出的畫面在界面上進(jìn)行疊加，這樣的方法雖然復(fù)雜，但是可以進(jìn)行即時(shí)的修改，測(cè)試的時(shí)候可以把所有界面貼在墻上，使用剪頭來引導(dǎo)，跳轉(zhuǎn)。

圖片來源：https://www.pinterest.co.uk/pin/108790147221047710/

手繪畫的不好的人可以買一些這種尺子，版面效果會(huì)干凈很多。

圖片來源：https://www.pinterest.co.uk/pin/346214290097471752/

2. Axure（界面制作與測(cè)試）

界面設(shè)計(jì)的工具是沒有具體要求的，電腦軟件經(jīng)常用到的有Sketch Up、Axure、AI、PS、Briefs等。Axure是一個(gè)非常容易學(xué)的軟件，非常容易上手，下面給大家簡(jiǎn)單的介紹一下，這是Axure的主要設(shè)計(jì)界面，分7個(gè)主要功能欄。




主菜工具欄可以進(jìn)行基本操作，比如，打開和保存、對(duì)其和格式化等。




Pages這一欄，非就是所有頁(yè)面的流程圖的樹狀圖?？梢赃M(jìn)行修改層次、添加刪除或者編輯頁(yè)面等操作。




Libraries就是所有的元件庫(kù)，里面有很多種默認(rèn)的原件，按照了不同的功能進(jìn)行了排列，有圖片格式，有基本形狀元件、標(biāo)題、文字、直線和動(dòng)態(tài)面板等。元件庫(kù)可以直接導(dǎo)入rplib文件，提高作圖效率，最多可以放1000個(gè)左右。




Masters，其實(shí)就是母版。標(biāo)準(zhǔn)母版和背景母版是最常用的，標(biāo)準(zhǔn)模板是可以改變?nèi)课恢茫锩娴脑擎i定的，背景模板則是所有都是固定的。




工作區(qū)非常很好理解，就是可以進(jìn)行設(shè)計(jì)的面板。




Inspector可以設(shè)計(jì)界面和界面之間的鏈接方式，是滑動(dòng)還是彈出等。還可以進(jìn)行標(biāo)注和Style設(shè)計(jì)。




Outline主要是用來對(duì)對(duì)動(dòng)態(tài)面板進(jìn)行管理，對(duì)功能進(jìn)行管理，這非常像是PS合AI里的圖層。




2. Demonstrate（用戶測(cè)試工具）

這是一款手機(jī)界面用戶測(cè)試APP工具，叫Demonstrate，使用方式非常簡(jiǎn)單，不用像Axure那樣在電腦上進(jìn)行繪制，只需要把已經(jīng)畫好的草圖放上去進(jìn)行測(cè)試就可以。是紙質(zhì)模型和APP工具結(jié)合的方式。除此之外相似的APP有Tapcase、POP、Prott等。

圖片來源：http://www.bknudson.com/portfolio/

測(cè)試的方法是先拍攝設(shè)計(jì)好的紙質(zhì)版交互模型，再?gòu)腶pp里創(chuàng)建鏈接，可以分享給朋友快速測(cè)試得到反饋。這樣的測(cè)試方式大大的減少了時(shí)間，隨時(shí)都可以用手機(jī)實(shí)現(xiàn)測(cè)試，雖然沒有像axure那么專業(yè)，但是可以滿足基本的測(cè)試要求，比較適合不會(huì)專業(yè)軟件的人。

Apple Store Prott Intro Images

以上，望有幫助，歡迎交流

———————————————

歡迎關(guān)注我的個(gè)人官方微信（搜索：kang-shishi）

如有藝術(shù)留學(xué)、院校、專業(yè)、作品集方面的問題，可私信康石石咨詢