淺談互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)

1、    淺談互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)    廖家莉摘要：信息化高速發(fā)展的今天，越來越多的互聯(lián)網(wǎng)產(chǎn)品，以前有軟件用就非常知足了，現(xiàn)在不僅有很多軟件用還可以自己定制軟件。定制軟件前我們一般先進(jìn)行原型設(shè)計(jì)，就像飛機(jī)、房屋的建設(shè)成本都比較高，在建之前我們一般會先畫模型，做模型。產(chǎn)品原型是產(chǎn)品面市之前的一個(gè)框架設(shè)計(jì)，是利用紙筆或者工具快速勾勒出的產(chǎn)品的大致結(jié)構(gòu)。產(chǎn)品原型設(shè)計(jì)可以非?？焖俚赝瓿身撁娴呐虐娌季?，有一個(gè)大致的頁面效果，再加一些交互動作可以使之更加形象生動。原型設(shè)計(jì)方便和用戶以及開發(fā)人員之間的交流，不僅可以提高項(xiàng)目開發(fā)的工作效率和降低成本，還可以有效地避免重要元

2、素被忽略，也可以阻止一些不合理的假設(shè)。不管是大型項(xiàng)目還是小型項(xiàng)目，項(xiàng)目開發(fā)流程都是先進(jìn)行需求分析，再研發(fā)并測試。以前進(jìn)行需求分析的稱為需求分析師，主要出相關(guān)文檔;近幾年稱為產(chǎn)品經(jīng)理，產(chǎn)品經(jīng)理的職責(zé)非常多，開發(fā)前期需要負(fù)責(zé)市場分析、用戶需求分析、綜合各部分的意見和建議，畫出產(chǎn)品原型;開發(fā)中期需要跟進(jìn)產(chǎn)品與技術(shù)部緊密交流，確保產(chǎn)品實(shí)現(xiàn)進(jìn)度和質(zhì)量;開發(fā)后期需要進(jìn)行產(chǎn)品服務(wù)、協(xié)調(diào)相關(guān)部門進(jìn)行網(wǎng)站的維護(hù)、產(chǎn)品優(yōu)化以及市場營銷等。該文主要講述項(xiàng)目開發(fā)流程、產(chǎn)品原型體現(xiàn)方法、axure rp8工作界面及主要功能。關(guān)鍵詞：axure;原型設(shè)計(jì);項(xiàng)目開發(fā)流程;產(chǎn)品：tp311 ：a：1009-3044（2020

3、）03-0283-02產(chǎn)品原型是將頁面的基本結(jié)構(gòu)、頁面的排版布局、功能模塊、元素、人機(jī)交互的動作等，通過線框描述的方法在紙上或者使用工具畫出來，可以更具體、更生動地表現(xiàn)出來?，F(xiàn)在客戶有了更多需求，想用更獨(dú)特的方式實(shí)現(xiàn)，但只用語言溝通交流做出來的產(chǎn)品可能達(dá)不到客戶預(yù)期的效果還需要返工。我們可以使用產(chǎn)品的原型設(shè)計(jì)向客戶演示，更直觀地向客戶講解產(chǎn)品原型的預(yù)期效果，可以快速地挖掘出用戶的真實(shí)需求，再做項(xiàng)目，這樣做出來的項(xiàng)目和客戶預(yù)期的更接近，可以降低開發(fā)成本。項(xiàng)目開發(fā)人員也可以根據(jù)設(shè)計(jì)原型進(jìn)行溝通，明確項(xiàng)目需求，可以提高開發(fā)效率。但產(chǎn)品原型并不是一個(gè)可以投入使用的軟件，只有基本的效果而已。產(chǎn)品原型又分

4、為草圖原型、低保真原型、高保真原型。草圖原型就是在紙上畫出大概的需求，沒有交互，不便于交流。低保真原型美觀上和交互效果上還很欠缺，但可以快速構(gòu)建產(chǎn)品大致結(jié)構(gòu)，提供基本交互效果，方便和用戶以及開發(fā)人員之間的交流。高保真原型就是和真實(shí)產(chǎn)品很接近，可以模擬出真實(shí)軟件的界面及交互效果，只是不是連接的數(shù)據(jù)庫，但可以模擬數(shù)據(jù)的增刪改查。高保真原型需要投入大量的時(shí)間和精力。接下來，我淺談一下項(xiàng)目開發(fā)流程、axure rp8工作界面及主要功能。1 項(xiàng)目開發(fā)流程項(xiàng)目開發(fā)會涉及很多成員，如需求分析師、產(chǎn)品經(jīng)理、美工、ui設(shè)計(jì)師、前端開發(fā)人員、后臺開發(fā)人員、架構(gòu)師、軟件測試員、技術(shù)總監(jiān)等。一般項(xiàng)目開發(fā)分為三大步，需

5、求分析、項(xiàng)目開發(fā)、軟件測試。下面我簡單描述下這三個(gè)環(huán)節(jié)：1.1 需求分析需求分析是非常重要的環(huán)節(jié)，需求分析又分很多步驟。第一步，需求分析，先和客戶交流，了解客戶需求，了解產(chǎn)品需要實(shí)現(xiàn)哪些功能及主要任務(wù)流程，并寫相關(guān)需求文檔。如果是公司內(nèi)部研發(fā)就頭腦風(fēng)暴，進(jìn)行市場分析，分析將研發(fā)的產(chǎn)品需要實(shí)現(xiàn)哪些功能及主要流程。第二步，畫思維導(dǎo)圖，將用戶描述的信息用圖呈現(xiàn)出來，主要包含產(chǎn)品的各個(gè)功能模塊及其邏輯關(guān)系等。第三步，畫流程圖，畫出每一步具體是怎么操作實(shí)現(xiàn)的，可以阻止一些不切實(shí)際的想法。第四步，頁面架構(gòu)設(shè)計(jì)，也就是整個(gè)項(xiàng)目需要有哪些頁面。第五步，頁面布局設(shè)計(jì)，頁面布局設(shè)計(jì)又分為總體結(jié)構(gòu)布局設(shè)計(jì)和導(dǎo)航設(shè)計(jì)

6、。首先確定總體結(jié)構(gòu)布局設(shè)計(jì)，然后確定導(dǎo)航是水平導(dǎo)航還是垂直導(dǎo)航，最后確定每一個(gè)功能模塊放置的位置。第六步，低保真原型設(shè)計(jì)，低保真原型設(shè)計(jì)就是利用相關(guān)設(shè)計(jì)工具制作出簡單的軟件原型。其實(shí)，需求分析前還有一步非常重要的過程就是競品分析，分析同行做得比較好，比較成熟的部分，分析同行有哪些功能，怎么實(shí)現(xiàn)的。第七步，原型評審，項(xiàng)目組成員都需要參加，開會討論該原型是否符合要求。不同角色關(guān)注的問題都不同，前端關(guān)注的是美觀、如何操作簡單，后臺開發(fā)人員關(guān)注的是怎么實(shí)現(xiàn)更簡單，總監(jiān)關(guān)注的是產(chǎn)品周期，測試人員關(guān)注的是項(xiàng)目的功能是否齊全，所以產(chǎn)品經(jīng)理一定要考慮周全。一般原型評審?fù)ㄟ^后需求分析階段就結(jié)束了，簽署相關(guān)文件就

7、進(jìn)入下一階段項(xiàng)目開發(fā)。但有些客戶還會要求畫高保真原型。1.2 項(xiàng)目開發(fā)項(xiàng)目開發(fā)又分前端設(shè)計(jì)和后臺開發(fā)，以前前端設(shè)計(jì)根據(jù)美工使用photoshop出的設(shè)計(jì)圖做相應(yīng)的靜態(tài)網(wǎng)頁，現(xiàn)在有原型設(shè)計(jì)，可以直接按照產(chǎn)品原型做靜態(tài)網(wǎng)頁?，F(xiàn)在前端有很多框架，前端設(shè)計(jì)之前一定要考慮好用什么框架，一般框架確定之后都不會再更改，如果想更改會非常麻煩?？蚣芫拖裥薹孔訒r(shí)的基本架構(gòu)，架構(gòu)都搭建好了，后面還想更改的話，一般情況下都是推倒重建?，F(xiàn)在不僅有很多瀏覽器，移動設(shè)備也普及了，前端開發(fā)還得考慮兼容性和響應(yīng)式布局。前端做好后，再是后臺開發(fā)，后臺開發(fā)分很多語言，有、php、java等，先選擇用什么技術(shù)，再選擇用什么框架。后臺

8、開發(fā)也有很多框架，一般先搭好框架，再分配每個(gè)成員做哪一個(gè)模塊，督促整個(gè)項(xiàng)目開發(fā)周期。團(tuán)隊(duì)項(xiàng)目開發(fā)過程會涉及項(xiàng)目整合，可以用svn，svn可以將所有成員的代碼自動整合在一起，能看到每次是誰更新了，更新的內(nèi)容可以高亮顯示出來。如果出錯了，還可以還原到某個(gè)節(jié)點(diǎn)。項(xiàng)目開發(fā)完成后是軟件測試。1.3 軟件測試軟件測試也是非常重要的環(huán)節(jié)，軟件測試是保證軟件質(zhì)量的重要手段。軟件測試不僅僅是找錯誤，還需要分析錯誤產(chǎn)生的原因，如何進(jìn)行改進(jìn)。一般軟件測試都不讓開發(fā)人員測試，由于思維定式開發(fā)人員很難找到自己的錯誤。測試需要有測試需求分析、業(yè)務(wù)流程分析、測試用例設(shè)計(jì)、測試用例評審、測試用例的更新和完善。軟件測試又分黑盒

9、測試和白盒測試。黑盒測試也就是功能測試，白盒測試就是內(nèi)部結(jié)構(gòu)測試、邏輯測試。有些項(xiàng)目開發(fā)測試周期比開發(fā)周期都長。1.4 小結(jié)實(shí)際開發(fā)過程中，一個(gè)公司一般會幾個(gè)項(xiàng)目同時(shí)推進(jìn)，由于項(xiàng)目的開發(fā)周期短，人手等問題。有時(shí)會由多人共同完成一個(gè)產(chǎn)品原型，需求分析階段主要由產(chǎn)品經(jīng)理和美工設(shè)計(jì)交流，出產(chǎn)品原型和需求文檔。開發(fā)人員等不及需求文檔，直接看產(chǎn)品原型就進(jìn)行后續(xù)開發(fā)。需求階段其實(shí)還應(yīng)該有數(shù)據(jù)分析，寫數(shù)據(jù)字典，有些產(chǎn)品經(jīng)理或需求分析師可能對數(shù)據(jù)庫不太了解，會讓后臺開發(fā)人員完成。開發(fā)完成后，測試工作可能還會交給產(chǎn)品經(jīng)理來做。2 axure rp8工作界面及主要功能2.1 產(chǎn)品原型體現(xiàn)方法產(chǎn)品原型的體現(xiàn)方法有很

10、多，主要可以通過紙質(zhì)、word、vl-sio、axure等工具來實(shí)現(xiàn)。其中用紙質(zhì)實(shí)現(xiàn)的話，可以快速地畫出頁面的大致效果，還可以用來記錄設(shè)計(jì)師的瞬間靈感，但紙質(zhì)的原型可能只有設(shè)計(jì)師本人才看得懂，不適于向客戶進(jìn)行展示，不便于后續(xù)的交流討論、研發(fā)設(shè)計(jì)、備案等，還得轉(zhuǎn)換成電子文檔，比較麻煩。因此紙質(zhì)的原型適合項(xiàng)目小、工期短、用戶需求少的產(chǎn)品;使用word進(jìn)行原型設(shè)計(jì)的話，可以使用文本框、圖片、形狀、圖表等工具，畫出一個(gè)簡單的產(chǎn)品原型。word簡單，使用方便，效果豐富，但word畫出的原型交互效果不好，幾乎沒有任何的交互效果;visio的話，也可以畫原型，但更適合畫流程圖;一般畫原型都使用的是原型設(shè)計(jì)的

11、專用工具，比如axure、墨刀、mockup screen等。用專用工具不僅有豐富的控件，還可以做出更好的交互效果。其中axure rp是其中的佼佼者。2.2 axure rp8工作界面及主要功能axure rp是一款快速實(shí)現(xiàn)、準(zhǔn)確表達(dá)、帶有交互效果且容易上手的原型設(shè)計(jì)工具。一旦掌握了一定的開發(fā)技巧后，加上一個(gè)良好的規(guī)劃，那么很多東西都可以信手拈來。axure的主要功能為：繪制網(wǎng)站架構(gòu)圖、繪制流程圖、使用元件繪制出簡單的原型、可以添加交互用例及樣式、輸出html網(wǎng)站、輸出word規(guī)格文檔等。其中word文檔中包含目錄、網(wǎng)頁原型、注釋等很多內(nèi)容。axure rp8軟件界面大致可以分為8個(gè)區(qū)域，分

12、別為菜單欄、工具欄、工作區(qū)域、頁面面板、元件面板、母版面板、檢視面板、概要面板。其中文件菜單除了有新建、保存、打開等基本功能，還可以新建團(tuán)隊(duì)項(xiàng)目。發(fā)布菜單可以生成html文件和word說明書。工具欄非?？旖莘奖?，工具欄中可以自定義工具欄，工具欄中有鋼筆工具和photoshop的類似，可以繪制路徑、形狀等，工具欄中還有對齊方式，樣式工具欄等。頁面面板用來顯示軟件頁面，可以看到產(chǎn)品的大致結(jié)構(gòu)及頁面間的關(guān)系。頁面結(jié)構(gòu)采用樹形菜單，層級分明，結(jié)構(gòu)清晰，可以對頁面進(jìn)行增加、移動、刪除等基本操作，還可以自動生成網(wǎng)站的架構(gòu)圖。元件面板又分基本元件、表單元件、菜單和表格元件、標(biāo)記元件、流程圖元件、圖標(biāo)元件。元

13、件面板可以自定義元件庫以及載人外部元件庫。基本元件是最常用的，矩形元件可以快速繪制網(wǎng)頁布局。動態(tài)面板用得非常多，可以用來實(shí)現(xiàn)簡單的交互效果。中繼器可以綁定數(shù)據(jù)，用來實(shí)現(xiàn)數(shù)據(jù)的增刪改查功能。表單元件可以配合變量使用，實(shí)現(xiàn)值的傳遞等。流程圖元件可以和工具欄中的連接及箭頭使用繪制出流程圖。還有很多的圖標(biāo)元件也都非常實(shí)用。母版面板可以設(shè)計(jì)共用部分，重復(fù)利用，提高開發(fā)效率。比如導(dǎo)航、版權(quán)信息等可以使用母版實(shí)現(xiàn)，還可以將母版一鍵添加到所有頁面中，或刪除母版，以及控制母版位置等。檢視面板可以給元件命名、添加交互效果、注釋，以及編輯樣式和交互樣式設(shè)置等。其中交互效果有很多事件，如載入時(shí)、鼠標(biāo)單擊、移入、移出等

14、事件。配置的動作也有很多，如打開鏈接、設(shè)置顯示隱藏、設(shè)置文本、設(shè)置圖片、設(shè)置啟用禁用、設(shè)置元件樣式大小等動作，還可以添加變量、使用表達(dá)式、使用函數(shù)，添加條件等。概要面板不僅可以看到頁面使用了哪些元件，還可以管理動態(tài)面板，如快速添加、復(fù)制、刪除動態(tài)面板狀態(tài)等。3 結(jié)束語axure rp就其本身而言，其實(shí)僅僅是一個(gè)工具，大部分人都可以很快學(xué)習(xí)并掌握之，但要畫出好的原型，會用只是一個(gè)最基本要求，關(guān)鍵是要有良好的原型開發(fā)思維。也就是說畫原型的重點(diǎn)不是技術(shù)，而是思維，除了要有整體規(guī)劃之外，還需要充分結(jié)合實(shí)際業(yè)務(wù)需求，在理解需求的基礎(chǔ)上進(jìn)行開發(fā)。畫產(chǎn)品原型前一定要對行業(yè)非常了解，市場分析很重要，現(xiàn)在互聯(lián)網(wǎng)

15、產(chǎn)品太多了，市場分析可以體現(xiàn)產(chǎn)品的價(jià)值。在公司產(chǎn)品經(jīng)理的地位是比較高的，很多人說公司里最大的產(chǎn)品經(jīng)理是老板。產(chǎn)品經(jīng)理分不同的級別，初級的是產(chǎn)品助理，主要畫原型設(shè)計(jì);中級的是產(chǎn)品經(jīng)理，會負(fù)責(zé)原型評審會議的組織;高級的則是產(chǎn)品總監(jiān)，會負(fù)責(zé)多條產(chǎn)品開發(fā)的進(jìn)度。在開發(fā)項(xiàng)目過程中，需求分析是最重要的，需求分析就像修房子時(shí)打的地基，地基都不穩(wěn)的話，后面修得再高再好都有可能塌。地基不好的話，我們可以重新打，如果地基都沒打好就開始修的話，后面維護(hù)起來非常麻煩，到時(shí)再重建的話成本就不是一般的高。地基打好修好后還需要檢查是否安全以免人員傷亡。所以說項(xiàng)目開發(fā)時(shí)，需求分析是第一步也是最重要的一步，如果沒有需求分析直接開發(fā)，開發(fā)