陽純正

（湖南于一科技有限公司，湖南 長沙 410000）

1 移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型

移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型是對(duì)一個(gè)移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的可視化呈現(xiàn)，主要傳達(dá)一個(gè)產(chǎn)品的信息架構(gòu)、內(nèi)容、功能和交互方式。就交互設(shè)計(jì)而言，“原型”通常是指人們?cè)谂c未來產(chǎn)品進(jìn)行交互時(shí)獲得全新思路的工具。其可簡(jiǎn)單分為兩種，一種是低保真原型，另一種是高保真原型。前者通常是指產(chǎn)品設(shè)計(jì)初期利用畫筆、紙面繪制、控件庫所制作出來的“原型”，旨在解決用戶界面的一些問題；后者通常出現(xiàn)在產(chǎn)品設(shè)計(jì)的中后期，因?yàn)檫@時(shí)的視覺設(shè)計(jì)和信息結(jié)構(gòu)等已設(shè)計(jì)完成，所以可以直接展示設(shè)計(jì)方案在移動(dòng)設(shè)備中的運(yùn)用情況。

2 移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)的原則

2.1 明確受眾

移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)的首要原則為明確受眾。因?yàn)樗蓪?duì)移動(dòng)互聯(lián)網(wǎng)產(chǎn)品造成直接影響，而移動(dòng)互聯(lián)網(wǎng)產(chǎn)品是面向受眾的，只有滿足受眾需求，才可制作出與客戶需求相符的產(chǎn)品，才可確保用戶主動(dòng)積極地參與到產(chǎn)品使用中。

通常而言，這里的明確受眾有兩層含義：一為使用移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的受眾，就是指產(chǎn)品的目標(biāo)用戶和使用用戶，他們是最終的產(chǎn)品使用人群及目標(biāo)用戶；二為原型使用受眾，原型設(shè)計(jì)的使用者主要包括產(chǎn)品經(jīng)理、IT咨詢師、用戶體驗(yàn)設(shè)計(jì)師、交互設(shè)計(jì)師、界面設(shè)計(jì)師、架構(gòu)師、程序開發(fā)工程師、測(cè)試工程師等。只有基于受眾需求找到設(shè)計(jì)目標(biāo)，對(duì)設(shè)計(jì)方向和細(xì)節(jié)進(jìn)行有效把控，才可使原型使用受眾與移動(dòng)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)人員、開發(fā)人員、運(yùn)營人員進(jìn)行交流和討論，才能為開發(fā)與預(yù)期相符的移動(dòng)互聯(lián)網(wǎng)產(chǎn)品提供保障。

2.2 先簡(jiǎn)后繁

移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的七字訣“專注、極致、口碑、快”。專注和極致是產(chǎn)品的目標(biāo)，任何一個(gè)優(yōu)秀的移動(dòng)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)和開發(fā)都不可能一蹴而成，所以在進(jìn)行構(gòu)思、原型設(shè)計(jì)時(shí)，都需遵循先簡(jiǎn)后繁的原則。

具體而言，設(shè)計(jì)人員需明確移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的幾個(gè)重要需求，怎么定義重要需求，主要是看需求產(chǎn)生的價(jià)值，20%的需求創(chuàng)造出80%的價(jià)值，80%的需求只創(chuàng)造出20%的價(jià)值。太多的需求是老板或者產(chǎn)品經(jīng)理臆想出來的。最終我們還要在重要的20%的需求里面再提煉20%的重要需求進(jìn)行原型設(shè)計(jì)，并推動(dòng)團(tuán)隊(duì)完成簡(jiǎn)單版本，此版本只有最重要的功能，給目標(biāo)用戶使用。

待用戶量達(dá)到一定數(shù)值后，根據(jù)用戶反饋對(duì)移動(dòng)互聯(lián)網(wǎng)產(chǎn)品進(jìn)行分析改進(jìn)。以微信為例，微信1.0版本的功能僅有“發(fā)送信息”“分享照片”“設(shè)置頭像”三個(gè)，而在時(shí)代的發(fā)展和設(shè)計(jì)的迭代下，微信中加入了一些附加功能，如紅包、語音對(duì)講、搖一搖等，且以后會(huì)變得更加完善。也就是說，只有從簡(jiǎn)單的核心功能出發(fā)，才可找到適合的產(chǎn)品定位，從而為移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的效用發(fā)揮提供保障。

2.3 考慮移動(dòng)特性

移動(dòng)互聯(lián)網(wǎng)產(chǎn)品主要顯示載體是智能手機(jī)，與傳統(tǒng)互聯(lián)網(wǎng)產(chǎn)品及其他終端產(chǎn)品原型設(shè)計(jì)不同，其特點(diǎn)在于屏幕空間有限、網(wǎng)絡(luò)信號(hào)易受地域影響、文字輸入效率較低、具有麥克風(fēng)、指紋識(shí)別、振動(dòng)反饋、安卓和蘋果系統(tǒng)適配等，所以在進(jìn)行移動(dòng)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)時(shí)，需考慮移動(dòng)特性。

2.4 勿求完美

產(chǎn)品原型的本質(zhì)是，產(chǎn)品的簡(jiǎn)略版本雖然與移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的最終形態(tài)無限接近，但其并不是最終產(chǎn)品，所以在動(dòng)效跳轉(zhuǎn)等方面存在問題很正常，這些問題正是設(shè)計(jì)人員不斷改進(jìn)的入手點(diǎn)。而通過調(diào)查發(fā)現(xiàn)，多數(shù)設(shè)計(jì)人員在進(jìn)行原型設(shè)計(jì)時(shí)常會(huì)陷入作品中，希望原型設(shè)計(jì)的每個(gè)部分都與最終產(chǎn)品效果相同。

2.5 關(guān)注操作邏輯

移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)目標(biāo)是滿足人們的使用需求，所以在進(jìn)行原型設(shè)計(jì)時(shí)，設(shè)計(jì)人員需重視操作邏輯。

2.6 快速迭代

在長時(shí)間的實(shí)踐中人們發(fā)現(xiàn)，如果在開發(fā)制作移動(dòng)互聯(lián)網(wǎng)產(chǎn)品過程中發(fā)現(xiàn)問題后，越及時(shí)解決問題成本就越低，而且糾正問題的方法也就越容易。所以在進(jìn)行移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)時(shí)，需將快速迭代當(dāng)作根本原則，即多次進(jìn)行可用性測(cè)試，且結(jié)合測(cè)試結(jié)果修改過設(shè)計(jì)方案后，要求程序員嘗試按照方案進(jìn)行編程。倘若程序員在編程過程中發(fā)現(xiàn)了問題，則需結(jié)合實(shí)際情況進(jìn)行修改，以降低后續(xù)開發(fā)修改的數(shù)量、成本、費(fèi)用。

3 項(xiàng)目開發(fā)流程

3.1 需求分析

需求分析是項(xiàng)目開發(fā)流程中的重要組成部分，其涉及的步驟如下。

（1）需求分析：原型設(shè)計(jì)人員需與使用場(chǎng)景的終端使用用戶進(jìn)行深入交流、溝通，明確其真正期望產(chǎn)品具備哪些功能。產(chǎn)品的主要任務(wù)是解決終端使用用戶的需求，并根據(jù)其需求進(jìn)行文檔編寫。倘若是公司內(nèi)部的研發(fā)活動(dòng)，需采用頭腦風(fēng)暴這一方式，基于市場(chǎng)情況進(jìn)行分析、探討，獲得創(chuàng)新性想法，從而了解產(chǎn)品所需功能與主要流程等。

（2）畫思維導(dǎo)圖：設(shè)計(jì)人員需以與終端用戶討論得到的各種信息為依據(jù)，根據(jù)實(shí)際情況繪制思維導(dǎo)圖，內(nèi)容包括產(chǎn)品各功能板塊及其邏輯關(guān)系。

（3）畫流程圖：設(shè)計(jì)人員需盡可能避免不切實(shí)際的、落地性較差的想法，需將原型設(shè)計(jì)的每一步驟、具體實(shí)現(xiàn)方法呈現(xiàn)于流程圖中。

（4）頁面架構(gòu)設(shè)計(jì)：設(shè)計(jì)人員需進(jìn)行綜合考慮，確保項(xiàng)目頁面與實(shí)際需求相符。

（5）頁面布局設(shè)計(jì)：其可分為兩部分，即總體結(jié)構(gòu)布局設(shè)計(jì)和導(dǎo)航設(shè)計(jì)。在這一過程中，設(shè)計(jì)人員需將總體結(jié)構(gòu)布局設(shè)計(jì)確定下來，然后基于此決定導(dǎo)航設(shè)計(jì)為水平導(dǎo)航還是垂直導(dǎo)航，在完成相關(guān)工作后，決定每一個(gè)功能模塊的放置位置。

（6）低保真原型設(shè)計(jì)：設(shè)計(jì)人員需利用多樣化設(shè)計(jì)工具，設(shè)計(jì)軟件原型。

（7）原型評(píng)審：評(píng)審需全體成員參與討論，討論內(nèi)容為移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型是否與要求相符。之所以要求全體參與，是因?yàn)閸徫徊煌瑫?huì)使工作人員看待項(xiàng)目的角度不同，從而為原型設(shè)計(jì)的修改提供理論依據(jù)，為其符合項(xiàng)目需求提供保障。

3.2 項(xiàng)目開發(fā)

項(xiàng)目開發(fā)可簡(jiǎn)單分為前端開發(fā)與后臺(tái)開發(fā)兩個(gè)部分。

在進(jìn)行移動(dòng)互聯(lián)網(wǎng)產(chǎn)品前期開發(fā)時(shí)，產(chǎn)品前端開發(fā)人員需考慮較多內(nèi)容，包括但不限于框架、兼容性、響應(yīng)式布局、開發(fā)語言，移動(dòng)終端的特點(diǎn)。

以前端框架為例，目前來說主流的App開發(fā)方式有Native App、Web App、Hybird App，而這3種方式又分別有眾多的框架可供選擇，一句話，前端的技術(shù)層出不窮，五花八門，讓人應(yīng)接不暇。而不同的框架適用于不同移動(dòng)互聯(lián)網(wǎng)產(chǎn)品，且可發(fā)揮不同作用，其涉及較多內(nèi)容，是前端開發(fā)的基礎(chǔ)，倘若出現(xiàn)錯(cuò)誤，后續(xù)進(jìn)行更改時(shí)只能“推倒重建”。為避免這一現(xiàn)象的發(fā)生，開發(fā)人員在進(jìn)行前端開發(fā)時(shí)需將終端框架考慮好。

完成前端開發(fā)后，需由后臺(tái)開發(fā)人員進(jìn)行后續(xù)工作，為移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的運(yùn)行提供保障。就目前情況而言，后臺(tái)開發(fā)的語言包括Asp、Java、Php、.Net等，且不同的開發(fā)語言需選用不同技術(shù)、搭建不同框架，所以在后臺(tái)開發(fā)過程中，設(shè)計(jì)人員需基于實(shí)際情況進(jìn)行語言、技術(shù)、框架選擇。在搭好后臺(tái)框架后，可根據(jù)框架情況、成員擅長內(nèi)容進(jìn)行拆分，使責(zé)任落實(shí)到人。在成員獨(dú)立完成自身負(fù)責(zé)的模塊后，可利用Gitlab，借助其自動(dòng)整合成員編寫的代碼。

3.3 軟件測(cè)試

軟件測(cè)試在項(xiàng)目開發(fā)過程中發(fā)揮著重要作用，可為軟件質(zhì)量提供保障。具體而言，在軟件測(cè)試過程中，測(cè)試人員需結(jié)合自身使用軟件的經(jīng)驗(yàn)、自身知識(shí)體系對(duì)軟件進(jìn)行分析，明確軟件在使用過程中存在怎樣的問題，是什么原因使這一問題產(chǎn)生的，并嘗試提出改進(jìn)方法。

3.4 小結(jié)

在移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的開發(fā)過程中，公司通常會(huì)采用同時(shí)推進(jìn)若干個(gè)項(xiàng)目的方式，而多數(shù)項(xiàng)目開發(fā)周期短，且公司人員數(shù)量較少，所以常會(huì)出現(xiàn)多人共同完成同一個(gè)產(chǎn)品原型的情況。在需求分析階段，通常由產(chǎn)品經(jīng)理、UED設(shè)計(jì)共同參與，通過交流、溝通進(jìn)行需求文檔、產(chǎn)品原型、交互流程制作。倘若開發(fā)人員急需進(jìn)行下一步工作，而需求文檔尚未編輯好，則可將產(chǎn)品原型當(dāng)作入手點(diǎn)，完成后續(xù)工作。

4 Axure RP8工作界面及主要功能

4.1 產(chǎn)品原型表現(xiàn)方法

（1）紙質(zhì)。紙質(zhì)表現(xiàn)方式可還原頁面大致效果，也可記錄設(shè)計(jì)師的靈感。但紙質(zhì)原型設(shè)計(jì)存在僅有設(shè)計(jì)師自己可以看懂的問題，會(huì)對(duì)后續(xù)交流、展示、研發(fā)設(shè)計(jì)、備案等帶來較大難度，所以設(shè)計(jì)師需將其轉(zhuǎn)換為電子文檔。通常而言，紙質(zhì)原型設(shè)計(jì)多被應(yīng)用于項(xiàng)目小、用戶需求少、工期短的移動(dòng)互聯(lián)網(wǎng)產(chǎn)品中。

（2）Word。Word中有很多工具，包括但不限于圖片、文本框、圖表、形狀等，設(shè)計(jì)人員可充分利用這些工具，畫出簡(jiǎn)單產(chǎn)品原型。與其他表現(xiàn)方式相比，Word具有使用便利、效果較好的優(yōu)勢(shì)，但其缺點(diǎn)也較為明顯，即交互性不強(qiáng)。

（3）Visio。Visio可用于原型繪制，但畢竟不是專業(yè)工具，所以在實(shí)際操作中存在較多問題。

（4）墨刀。它是一款在線原型設(shè)計(jì)與協(xié)同工具，借助墨刀，產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)、銷售、運(yùn)營及創(chuàng)業(yè)者等用戶群體能夠搭建產(chǎn)品原型，演示項(xiàng)目效果。

（5）Axure。其為專業(yè)工具，具有控件豐富、交互效果較強(qiáng)的特點(diǎn)，其中，Axure RP的優(yōu)勢(shì)更加明顯，如快速實(shí)現(xiàn)、表達(dá)、交互性強(qiáng)、易上手等。

4.2 Axure RP8工作界面及主要功能

Axure的主要功能有進(jìn)行架構(gòu)圖、流程圖、原型繪制，添加交互用例、交互樣式，輸出HTML網(wǎng)站及Word文檔等。

Axure RP8的工作界面可簡(jiǎn)單分為八個(gè)區(qū)域，即菜單欄、工具欄、工作區(qū)域、頁面面板、元件面板、母版面板、檢視面板、概要面板。菜單欄的主要功能包括新建、保存、打開、新建團(tuán)隊(duì)項(xiàng)目等。

發(fā)布菜單具有生成HTML文件、Word說明書的功能。

工具欄具有自定義特點(diǎn)，包括鋼筆工具、對(duì)齊方式、樣式工具欄等功能。頁面面板簡(jiǎn)單來說就是現(xiàn)實(shí)移動(dòng)互聯(lián)網(wǎng)產(chǎn)品頁面的，通過其可將產(chǎn)品結(jié)構(gòu)和頁面之間的關(guān)系梳理清楚。

頁面結(jié)構(gòu)通常以樹形圖的形式呈現(xiàn)，具有結(jié)構(gòu)明晰、層級(jí)分明的特點(diǎn)。相關(guān)工作人員可利用其增加、刪除、自動(dòng)等操作對(duì)頁面進(jìn)行修改。

元件面板具有自定義元件庫、載入外部元件庫等功能。

母版面板簡(jiǎn)單來說就是用來設(shè)計(jì)共用部分的，其特點(diǎn)是提高開發(fā)效率。在項(xiàng)目開發(fā)過程中，在進(jìn)行導(dǎo)航、版權(quán)信息設(shè)計(jì)時(shí)，可利用母版，使工作人員進(jìn)行共同設(shè)計(jì)。

檢視面板的功能有命名、添加交互效果等。概要面板的功能為瀏覽頁面使用的元件，并借助其添加、復(fù)制等功能對(duì)動(dòng)態(tài)面板進(jìn)行管理。

5 結(jié)束語

綜上所述，移動(dòng)互聯(lián)網(wǎng)產(chǎn)品是在信息技術(shù)、移動(dòng)設(shè)備普遍化的背景下產(chǎn)生的，而原型設(shè)計(jì)是移動(dòng)互聯(lián)網(wǎng)產(chǎn)品開發(fā)制作的基礎(chǔ)，可為產(chǎn)品最終發(fā)揮其效用提供保障。如何進(jìn)行移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)是設(shè)計(jì)人員不得不深入思考的問題。在此方面，設(shè)計(jì)人員需遵循“明確受眾”“先簡(jiǎn)后繁”“考慮移動(dòng)特性”“勿求完美”“關(guān)注操作邏輯”“快速迭代”等原則，并根據(jù)實(shí)際情況應(yīng)用軟件進(jìn)行開發(fā)設(shè)計(jì)，如此才可確保其與實(shí)際需求相符，才可為移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的效用發(fā)揮提供保障，才可做到移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)與市場(chǎng)需求、人們需求相符，做到與時(shí)俱進(jìn)?！?/p>