陽純正

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

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

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

2 移動互聯(lián)網(wǎng)產(chǎn)品原型設計的原則

2.1 明確受眾

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

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

2.2 先簡后繁

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

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

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

2.3 考慮移動特性

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

2.4 勿求完美

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

2.5 關注操作邏輯

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

2.6 快速迭代

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

3 項目開發(fā)流程

3.1 需求分析

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

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

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

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

（4）頁面架構設計：設計人員需進行綜合考慮，確保項目頁面與實際需求相符。

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

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

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

3.2 項目開發(fā)

項目開發(fā)可簡單分為前端開發(fā)與后臺開發(fā)兩個部分。

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

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

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

3.3 軟件測試

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

3.4 小結

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

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

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

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

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

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

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

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

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

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

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

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

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

頁面結構通常以樹形圖的形式呈現(xiàn)，具有結構明晰、層級分明的特點。相關工作人員可利用其增加、刪除、自動等操作對頁面進行修改。

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

母版面板簡單來說就是用來設計共用部分的，其特點是提高開發(fā)效率。在項目開發(fā)過程中，在進行導航、版權信息設計時，可利用母版，使工作人員進行共同設計。

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

5 結束語

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