移動互聯網產品的原型設計淺談

陽純正

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

1 移動互聯網產品原型

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

2 移動互聯網產品原型設計的原則

2.1 明確受眾

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

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

2.2 先簡后繁

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

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

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

2.3 考慮移動特性

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

2.4 勿求完美

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

2.5 關注操作邏輯

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

2.6 快速迭代

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

3 項目開發(fā)流程

3.1 需求分析

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

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

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

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

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

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

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

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

3.2 項目開發(fā)

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

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

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

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

3.3 軟件測試

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

3.4 小結

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

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

4.1 產品原型表現方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5 結束語

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