基于移動App 交互原型設(shè)計(jì)與實(shí)現(xiàn)

四川化工職業(yè)技術(shù)學(xué)院 姜波

在移動App 交互原型設(shè)計(jì)的過程中，需要對整個App 的交互原型設(shè)計(jì)方案進(jìn)行深入分析，要從移動App交互原型設(shè)計(jì)的具體步驟出發(fā)，保證設(shè)計(jì)工作的規(guī)范性和有效性。此外，在App 交互原型設(shè)計(jì)中，需要加強(qiáng)布局控制工作，提高運(yùn)行設(shè)計(jì)水平。在此基礎(chǔ)上，需要對相關(guān)的設(shè)計(jì)案例進(jìn)行綜合分析。通過交互原型設(shè)計(jì)可以直接開展交互以及視覺測試，能夠更加直觀地觀看App產(chǎn)品的最終形態(tài)，防止在移動App 設(shè)計(jì)過程中出現(xiàn)盲目無序的情況影響最終的設(shè)計(jì)效果。

在對移動App 進(jìn)行設(shè)計(jì)時，需要加強(qiáng)交互原型設(shè)計(jì)，促進(jìn)產(chǎn)品設(shè)計(jì)師以及產(chǎn)品經(jīng)理的有效溝通。一般情況下，在真實(shí)App 產(chǎn)品制作之前利用原型開展模型展示，可以使設(shè)計(jì)人員明確App 的最終設(shè)計(jì)形態(tài)。制作出原型后，團(tuán)隊(duì)成員可以通過討論、測試對整個App 的最終形態(tài)進(jìn)行全面掌握。同時能夠了解App 的具體性能，對提高App 產(chǎn)品的設(shè)計(jì)效率和設(shè)計(jì)質(zhì)量有極大幫助。

1 移動App 交互原型設(shè)計(jì)概述

1.1 移動App 交互原型設(shè)計(jì)工具

通過交互原型設(shè)計(jì)App 可以完成原型制作，為之后的設(shè)計(jì)提供基礎(chǔ)?，F(xiàn)階段，很多原型制作工具的應(yīng)用成本相對較低，操作也比較簡單，功能豐富，可以根據(jù)App 的設(shè)計(jì)目標(biāo)，保證原型制作的全面性。在一些App原型制作工具應(yīng)用過程中，可以利用自帶的流程圖功能建立組件庫和自定義樣式庫，滿足設(shè)計(jì)人員的具體需求。為了能夠充分發(fā)揮交互原型設(shè)計(jì)的積極作用，在原型設(shè)計(jì)過程中對Axure RP 原型設(shè)計(jì)工具的應(yīng)用比較普遍，該軟件的最大特點(diǎn)是專業(yè)性相對較強(qiáng)，可以完成一些相對復(fù)雜的交互設(shè)計(jì)工作。但是要注意在對Axure RP 軟件進(jìn)行應(yīng)用的過程中，設(shè)計(jì)人員要具有一些編程的邏輯思維，才能夠制作出想要的交互演示效果。Axure RP本身是比較成熟的交互原型設(shè)計(jì)工具，不管是基礎(chǔ)功能，還是團(tuán)隊(duì)協(xié)作功能的專業(yè)性都相對較強(qiáng)，界面設(shè)置的專業(yè)度也比較高。在實(shí)際應(yīng)用過程中，要根據(jù)App 軟件的具體開發(fā)目標(biāo)開展交互原型設(shè)計(jì)工作，提高App 設(shè)計(jì)水平。此外，需要注意在交互原型設(shè)計(jì)過程中完成配色圖，一般會利用Photoshop 根據(jù)前期線框圖做出相對完整的界面設(shè)計(jì)方案，一般包括確定配色方案、字體設(shè)計(jì)方案、圖片素材等。還要對各功能控制鍵進(jìn)行繪制，完成App圖標(biāo)設(shè)計(jì)工作，能夠在視覺上表現(xiàn)出App 的最終形態(tài)。

1.2 移動App 原型設(shè)計(jì)類型

在移動App 原型設(shè)計(jì)過程中，其設(shè)計(jì)類型分為以下幾方面：

（1）信息分類原型也被稱作信息架構(gòu)，這是移動App 最初的設(shè)計(jì)形式。在這一原型設(shè)計(jì)過程中，需要將構(gòu)思完成的App 功能列出來，并對不同的功能進(jìn)行分類，之后根據(jù)列舉的功能劃分成一級一級的樹狀圖，主要包括一級頁面、二級頁面，按照功能的主次分成不同的層級。例如微信App 一級頁面上主要包括微信、通訊錄、發(fā)現(xiàn)、我，之后的二級頁面是一級頁面點(diǎn)開后的列表，例如通訊錄點(diǎn)開后有新的朋友、群聊等，為二級功能。依次往下，還有第3 層級、第4 層級功能。信息分類原型架構(gòu)在App 原型設(shè)計(jì)過程中，需要在正式制作界面原型之前確定好App 的功能結(jié)構(gòu)，并對其進(jìn)行分類和層級劃分。（2）線框設(shè)計(jì)原型。線框原型主要是利用線條完成界面大致排版設(shè)計(jì)，并不需要填色，體現(xiàn)出App 的排版即可。在原型設(shè)計(jì)過程中不需要傳達(dá)視覺效果，只需要將App 的功能層級和部分交互功能表達(dá)清楚。線框原型App 設(shè)計(jì)主要是在App 產(chǎn)品的設(shè)計(jì)階段進(jìn)行可視化展現(xiàn)，向設(shè)計(jì)人員傳達(dá)出產(chǎn)品的信息架構(gòu)、功能以及交互形式。（3）交互設(shè)計(jì)原型。在移動App 交互設(shè)計(jì)原型中主要有兩大類：一類是基于頁面或者窗口這種全局類的交互；另一類是某個具體的元件，在觸發(fā)事件發(fā)生時的交互。在App 產(chǎn)品繪制基本原型圖上為頁面中的元件添加交互功能，可以快速實(shí)現(xiàn)頁面交互的定制。移動App產(chǎn)品原型設(shè)計(jì)中，常見的頁面交互有頁面跳轉(zhuǎn)、引導(dǎo)頁左右滑動、長頁面上下滾動交互、彈出消息框交互效果、側(cè)邊欄菜單滑入效果和表單驗(yàn)證與登錄交互。（4）視覺設(shè)計(jì)原型。視覺設(shè)計(jì)原型屬于移動App 原型設(shè)計(jì)的最終環(huán)節(jié)，交互原型結(jié)合視覺原型具有高保真的特點(diǎn)。在視覺原型設(shè)計(jì)過程中，需要利用Photoshop 以之前的線框圖和設(shè)計(jì)創(chuàng)意為脊柱制作完整的界面，同時要確定配色方案、字體、圖片素材等，還要完成各功能控件繪制和App 圖標(biāo)設(shè)計(jì)等，需要在視覺上呈現(xiàn)出移動App 的最終形態(tài)。

2 移動App 交互原型設(shè)計(jì)步驟

目前，在開展App 交互原型設(shè)計(jì)的過程中主要采取的是以下三個步驟：

（1）定保真。在App 原型繪制之前必須明確App 原型繪制目標(biāo)，這是決定設(shè)計(jì)人員工作量以及產(chǎn)品上線質(zhì)量的重要基礎(chǔ)。原型需要畫到什么程度，主要是以上級部門的要求為基礎(chǔ)，根據(jù)團(tuán)隊(duì)的實(shí)際能力以及具體設(shè)計(jì)要求確定的。以此為基礎(chǔ)需要對原型設(shè)計(jì)標(biāo)準(zhǔn)進(jìn)行優(yōu)化。一般情況下，在定保真中，可以利用黑白線框圖完成主要交互設(shè)計(jì)，而配色線框圖可以完成全部的交互設(shè)計(jì)，能夠滿足App 的設(shè)計(jì)和開發(fā)需求。（2）畫頁面。這是App 交互原型設(shè)計(jì)過程中的關(guān)鍵環(huán)節(jié)。在設(shè)計(jì)之前要確定頁面的尺寸以及位置，為后續(xù)設(shè)計(jì)奠定基礎(chǔ)。一般可以利用375×667 完成App 原型頁面繪畫。這一頁面尺寸能夠兼容當(dāng)前所有的屏幕分辨率。在畫頁面時需要對尺寸進(jìn)行科學(xué)選擇，防止尺寸對視覺設(shè)計(jì)師產(chǎn)生不利影響。在利用Axure RP 確定頁面位置時，需要設(shè)計(jì)人員進(jìn)行手動設(shè)置，否則會導(dǎo)致手機(jī)上預(yù)覽的頁面不全。完成尺寸和位置確定后，需要利用原型軟件畫出頁面。目前，在頁面繪制過程中不需要完成元素配色，否則會影響視覺設(shè)計(jì)師的設(shè)計(jì)效果。在向視覺設(shè)計(jì)師交付設(shè)計(jì)方案時，最好以黑白線框圖為主。（3）加交互。完成所有頁面繪制工作后，需要將頁面交付給視覺設(shè)計(jì)師以及開發(fā)人員。一般情況下，需要在黑白線框圖上加主要交互，使其成為中保真原型，然后交付給其他人員。交互主要指的是頁面之間的跳轉(zhuǎn)處理過程，可以對整個產(chǎn)品的頁面關(guān)系進(jìn)行明確展示，并且有利于幫助設(shè)計(jì)人員和開發(fā)人員對整個版本的工作量進(jìn)行科學(xué)評估。除此之外，需要將App 中的上導(dǎo)航、下導(dǎo)航等畫出來，才能夠使其他人員對頁面內(nèi)的交互體驗(yàn)有更深入的了解。如果提前完成App 軟件庫設(shè)計(jì)工作需要快速調(diào)用，能夠提高與交互原型設(shè)計(jì)效率。需要注意的是在加交互的過程中，不需要100%的完成所有交互，因?yàn)橐恍┙换サ膹?fù)雜度比較高，會導(dǎo)致設(shè)計(jì)效率降低，可以利用文字邏輯進(jìn)行表述。

3 移動App 交互原型設(shè)計(jì)布局

（1）大平行式的布局。這種方式會顯示出一部分內(nèi)容，用戶通過上下左右拖動查看相應(yīng)的內(nèi)容。這種布局方式的最大優(yōu)點(diǎn)是能夠減少不必要的跳轉(zhuǎn)，大多數(shù)導(dǎo)航軟件中的查看地圖界面都是以大平移式布局為主。（2）宮格式布局方式。這種布局方式比較簡單直觀，符合大多數(shù)用戶的使用習(xí)慣，也是當(dāng)前主流的布局形式。目前，宮格式布局形式主要包括六宮格、九宮格。美圖秀秀中的界面就是以這種宮格式布局方式為主，但是要注意宮格式布局層級不能過多，否則會給用戶混亂無序的感覺。（3）側(cè)滑式布局。這種布局方式也能夠減少跳轉(zhuǎn)次數(shù)，具有較強(qiáng)的延展性。但是對用戶自身的要求相對較高，因?yàn)閭?cè)滑式布局支持隱藏信息，用戶本身要對App 有一定的了解才能夠快速找到相關(guān)的信息和功能。例如QQ軟件中的“我”這一界面屬于側(cè)滑式布局。（4）列表式布局。這種布局方式具有較強(qiáng)的信息延展性，但是在信息查找過程中復(fù)雜度比較高。一般情況下列表式布局需要與標(biāo)簽式布局進(jìn)行結(jié)合，大多數(shù)購物軟件的布局都是以列表式布局為主的，可以為用戶展示相對較多的商品方便用戶選擇。（5）標(biāo)簽式布局。標(biāo)簽式布局在設(shè)計(jì)時要將其放置在底部或者頂部，這樣能夠減少界面的跳轉(zhuǎn)層級，蘊(yùn)含的隱藏信息標(biāo)簽也相對較少，但是信息量比較大。（6）混合式布局?；旌鲜讲季质钱?dāng)前比較常見的界面布局形式，適應(yīng)大多數(shù)用戶的使用習(xí)慣和操作習(xí)慣。一般情況下會對多種單一的布局形式進(jìn)行利用。例如宮格式布局和標(biāo)簽式布局混合應(yīng)用。

這些布局方式都是以線框原型為基礎(chǔ)的整體結(jié)構(gòu)布局，在實(shí)際設(shè)計(jì)時還要根據(jù)App 的具體情況進(jìn)行局部功能的交互設(shè)計(jì)。例如對按鈕點(diǎn)擊效果、頁面切換等進(jìn)行科學(xué)選擇，可以在原型繪制過程中利用文字邏輯表述清楚，或者直接利用原型制作軟件制作。一般情況下，在對移動App 交互原型設(shè)置的過程中，需要加強(qiáng)工具選擇。目前，Axure RP 工具的應(yīng)用比較多，功能比較專業(yè)，可以滿足布局設(shè)計(jì)的需求。

4 產(chǎn)品原型設(shè)計(jì)與Axure RP

在開展移動端App 設(shè)計(jì)制作過程中，必須要加強(qiáng)與客戶的溝通和交流，了解客戶的實(shí)際需求。之后需要完成市場調(diào)研，對產(chǎn)品的場景、功能范圍和商業(yè)需求進(jìn)行科學(xué)定位。此外，要完成項(xiàng)目評估工作，確定其商業(yè)價值、業(yè)務(wù)邏輯及核心特點(diǎn)和創(chuàng)意，才能夠進(jìn)行移動App 原型設(shè)計(jì)工作。在具體的設(shè)計(jì)過程中需要從產(chǎn)品結(jié)構(gòu)設(shè)計(jì)、細(xì)節(jié)定義、視覺設(shè)計(jì)等不同角度出發(fā)，保證交互原型設(shè)計(jì)方案的科學(xué)性和全面性。在對原型設(shè)計(jì)方案進(jìn)行模擬測試后，才能進(jìn)行軟件代碼設(shè)計(jì)，最后完成產(chǎn)品測試以及產(chǎn)品交互。其中交互原型設(shè)計(jì)是關(guān)鍵環(huán)節(jié)，其設(shè)計(jì)效果直接影響最終產(chǎn)品的使用體驗(yàn)和設(shè)計(jì)效果。Axure RP 軟件作為快速專業(yè)的原型設(shè)計(jì)工具，能夠使交互設(shè)計(jì)在短時間內(nèi)創(chuàng)建原型應(yīng)用軟件。在具體的設(shè)計(jì)過程中可以完成App 原型創(chuàng)建，明確流程圖、線框圖和說明文檔等。

在對Axure RP 軟件進(jìn)行應(yīng)用的過程中，其操作界面相對簡單，與專業(yè)的圖像處理軟件Photoshop 和矢量圖設(shè)計(jì)軟件的界面布局類似，方便設(shè)計(jì)人員進(jìn)行快速操作。例如在具體的設(shè)計(jì)過程中，可以設(shè)計(jì)具體操作系統(tǒng)的常用軟件圖標(biāo)導(dǎo)入其他常用的UI 元件素材庫，主要包括菜單欄、鍵盤以及不同的按鈕等，能夠完成主流手機(jī)界面圖設(shè)計(jì)工作，可以使設(shè)計(jì)人員快速了解Axure RP軟件的具體操作要求，方便開展后期設(shè)計(jì)。并且在設(shè)計(jì)過程中Axure RP 軟件自身帶有的一些素材能夠節(jié)省時間，使設(shè)計(jì)人員投入更多的精力對頁面布局和交互效果等進(jìn)行科學(xué)設(shè)計(jì)。Axure RP 軟件自身的元件庫比較豐富，在開展界面布局設(shè)計(jì)時，可以直接利用圖標(biāo)拖曳的方式完成設(shè)計(jì)工作。但是要注意動態(tài)面板元件的使用難度相對較大，在使用過程中要根據(jù)App 軟件的設(shè)計(jì)目標(biāo)和要求完成操作。動態(tài)面板本身能夠?qū)崿F(xiàn)不同交互動作，屬于多空間、透明、無限大的元件容器。在實(shí)際設(shè)計(jì)過程中必須要對動態(tài)面板的狀態(tài)和狀態(tài)頁編輯方法進(jìn)行全面掌握，才能夠提高交互設(shè)計(jì)的整體效果。在對動態(tài)面板應(yīng)用時，為了提高動態(tài)面板的應(yīng)用效率，可以對一些案例進(jìn)行分析，掌握動態(tài)面板的具體設(shè)計(jì)方法和規(guī)則，了解相關(guān)概念和操作要求后再利用動態(tài)面板制作全局導(dǎo)航圖。

5 交互設(shè)計(jì)案例分析

在移動App 交互原型進(jìn)行設(shè)計(jì)時，要根據(jù)手機(jī)界面的實(shí)際情況完成色彩搭配和界面構(gòu)圖。在Axure RP 軟件應(yīng)用過程中，可以通過不同軟件完成交互原型設(shè)計(jì)工作。交互原型設(shè)計(jì)主要是在編輯器中進(jìn)行的添加動作，包括鏈接、元件、全局變量與其他動作。每一個動作使用的元件都不同，必須要設(shè)計(jì)相應(yīng)的參數(shù)，同時加上不同的動畫。還可以根據(jù)App 的實(shí)際情況為動作設(shè)置具體的條件，從而實(shí)現(xiàn)交互設(shè)計(jì)效果。例如在登錄界面的登錄按鈕事件進(jìn)行設(shè)計(jì)過程中，一般需要輸入用戶名和密碼，且正確后才能夠正常登錄并跳轉(zhuǎn)到頁面。在對登錄按鈕進(jìn)行交互設(shè)計(jì)時，要通過幾種情況對交互效果進(jìn)行判斷：（1）未輸入用戶名和密碼，點(diǎn)擊登錄按鈕；（2）輸入用戶名但未輸入密碼，點(diǎn)擊登錄按鈕；（3）輸入用戶名，未輸入密碼，點(diǎn)擊登錄按鈕；（4）用戶名和密碼輸入后點(diǎn)擊登錄按鈕。需要對不同的設(shè)置條件進(jìn)行全面考慮，確保每一個條件之間的關(guān)系正確。這樣才能夠保證條件關(guān)系清晰明確，提高編輯器的編輯設(shè)計(jì)水平。

6 結(jié)語

綜上所述，在移動App 交互原型設(shè)計(jì)工作中，需要在掌握軟件原型設(shè)計(jì)步驟和布局規(guī)則的基礎(chǔ)上保證移動App 交互原型設(shè)計(jì)效率和設(shè)計(jì)效果。在對Axure RP 軟件進(jìn)行應(yīng)用的過程中，必須要熟練掌握相應(yīng)的操作要求和規(guī)范，提高移動App 交互原型設(shè)計(jì)水平。在具體的操作過程中，需要對客戶的具體需求進(jìn)行全面了解，同時要加強(qiáng)市場調(diào)研，確定App 的功能定位，為之后的App 設(shè)計(jì)提供有效的數(shù)據(jù)參考，從而提高App 的綜合設(shè)計(jì)水平。

引用

[1] 周健.淺析《用戶體驗(yàn)設(shè)計(jì)》中App原型設(shè)計(jì)在教學(xué)中的應(yīng)用[J].福建茶葉,2019,41(9):71.

[2] 王楚音.基于目標(biāo)導(dǎo)向的大學(xué)生校園直播App原型設(shè)計(jì)研究[D].北京:北京服裝學(xué)院,2019.

[3] 朱元朋.移動終端界面交互動效設(shè)計(jì)及視覺反饋研究[D].西安:西安電子科技大學(xué),2015.

[4] 許磊.基于用戶體驗(yàn)的敦煌世界地質(zhì)公園App原型的設(shè)計(jì)與實(shí)現(xiàn)[D].北京:中國地質(zhì)大學(xué)(北京),2020.