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

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

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

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

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

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

1.2 移動(dòng)App 原型設(shè)計(jì)類(lèi)型

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

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

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

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

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

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

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

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

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

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

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

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

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

6 結(jié)語(yǔ)

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

引用

[1] 周健.淺析《用戶(hù)體驗(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] 朱元朋.移動(dòng)終端界面交互動(dòng)效設(shè)計(jì)及視覺(jué)反饋研究[D].西安:西安電子科技大學(xué),2015.

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