任洋

【摘要】 在產(chǎn)品設(shè)計(jì)的過程中需要一個(gè)合理的產(chǎn)品設(shè)計(jì)流程，無(wú)論是復(fù)雜的還是簡(jiǎn)單、實(shí)體的或虛擬的產(chǎn)品，均需要經(jīng)過一個(gè)合理的產(chǎn)品設(shè)計(jì)流程。通過設(shè)計(jì)流程的每個(gè)階段，產(chǎn)品的各個(gè)方面都會(huì)經(jīng)過多層次的考量、修改，通過這一個(gè)個(gè)步驟讓產(chǎn)品能夠擁有良好的用戶體驗(yàn)、完備的功能。

【關(guān)鍵字】 app設(shè)計(jì) 交互設(shè)計(jì)

信息時(shí)代，智能手機(jī)以及成為了人們生活中不可缺少的必備品。APP在未來將會(huì)是一個(gè)龐大的市場(chǎng)，本文將探究一款A(yù)PP的開發(fā)流程應(yīng)當(dāng)有哪些步驟，本文將涉到用戶體驗(yàn)設(shè)計(jì)，用戶界面設(shè)計(jì)，交互設(shè)計(jì)，動(dòng)效設(shè)計(jì)這幾個(gè)方面進(jìn)行探討。

APP開發(fā)分為8個(gè)部分，包括：前期準(zhǔn)備、功能圖與線框圖繪制、邏輯關(guān)系跳轉(zhuǎn)圖制作、低保真模型建立、界面設(shè)計(jì)、交互與動(dòng)效設(shè)計(jì)、程序交接、成品測(cè)試。文章順序?qū)凑誂PP開發(fā)步驟一一進(jìn)行闡述。

一、前期準(zhǔn)備

前期準(zhǔn)備要完成目標(biāo)用戶群分析、市場(chǎng)分析、應(yīng)用功能規(guī)劃這三個(gè)部分。在準(zhǔn)備階段應(yīng)當(dāng)設(shè)置調(diào)查問卷，收集目標(biāo)用戶群體的信息，為用戶分析、市場(chǎng)分析以及功能規(guī)劃建立數(shù)據(jù)基礎(chǔ)。

之后，需要進(jìn)行需求分析，這是任何產(chǎn)品均需要經(jīng)歷的重要的一個(gè)步驟，在需求分析中需要對(duì)前期調(diào)研的結(jié)果進(jìn)行整理、分類，得出用戶的需求列表。產(chǎn)品經(jīng)理依據(jù)前期的整理數(shù)據(jù)對(duì)APP的功能進(jìn)行設(shè)計(jì)，在這一過程中應(yīng)當(dāng)完成功能線框圖、邏輯關(guān)系跳轉(zhuǎn)圖的制作。

功能線框圖中展示APP的主要功能以及整體理念。在每個(gè)頁(yè)面中需要使用線框搭建出來頁(yè)面所需實(shí)現(xiàn)的功能，同時(shí)使用文字進(jìn)行備注，明確功能。功能線框圖的制作可以使用幻燈片制作軟件來完成。

在完成功能線框圖的制作之后，需要進(jìn)行邏輯跳轉(zhuǎn)頁(yè)面的制作，在這一過程中完成各個(gè)頁(yè)面相互跳轉(zhuǎn)的邏輯關(guān)系的設(shè)計(jì)。通過這一步驟可以檢查出頁(yè)面設(shè)計(jì)的不合理以及頁(yè)面的缺失。

二、低保真模型的建立

在完成了準(zhǔn)備階段的工作之后，需要對(duì)整體的信息進(jìn)行匯總性質(zhì)的展示，通過制作低保真模型來完成這一工作，并完善功能設(shè)計(jì)。

低保真模型制作可以更加真實(shí)的反饋效果，對(duì)于高保真的模型而言，人們更多的精力會(huì)集中在產(chǎn)品的功能設(shè)計(jì)是否完備，邏輯跳轉(zhuǎn)是否合理，是否缺少頁(yè)面。同時(shí)低保真模型可以快速制作，快速修改內(nèi)容，有利于時(shí)間的節(jié)省，精力可以更加集中于查找邏輯是否合理，功能是否完備等上面。在制作低保真模型之后，依據(jù)低保真模型完善線框圖制、邏輯跳轉(zhuǎn)關(guān)系圖的制作，保持三者相一致。

在完成了低保真模型之后，此時(shí)APP的整體架構(gòu)已經(jīng)建立，程序的開發(fā)工作也可以進(jìn)行了，工程師依據(jù)低保真模型以及功能線框圖對(duì)程序進(jìn)行開發(fā)。

三、界面設(shè)計(jì)

在這一部分中完成界面的所有相關(guān)設(shè)計(jì)，其中包括了美術(shù)設(shè)計(jì)、交互設(shè)計(jì)、動(dòng)效設(shè)計(jì)，三者處于并行關(guān)系，并且相互關(guān)聯(lián)，在設(shè)計(jì)的過程中應(yīng)當(dāng)同時(shí)考慮三者。

3.1美術(shù)設(shè)計(jì)

界面設(shè)計(jì)最初需要確定美術(shù)風(fēng)格，這是界面設(shè)計(jì)中最重要的一部分，設(shè)計(jì)者需要選取一個(gè)主要頁(yè)面進(jìn)行設(shè)計(jì)，確定了此頁(yè)面的美術(shù)風(fēng)格之后，再開展后續(xù)的設(shè)計(jì)工作。

在實(shí)際應(yīng)用中發(fā)現(xiàn)在確立美術(shù)風(fēng)格這一過程中可以使用Sktech進(jìn)行美術(shù)風(fēng)格的確立，Sketch擁有輕量級(jí)的設(shè)計(jì)，相比之下Adobe Photoshop的功能過多，不利于設(shè)計(jì)師進(jìn)行快速設(shè)計(jì)，現(xiàn)在主流的設(shè)計(jì)風(fēng)格為扁平化的設(shè)計(jì)風(fēng)格，對(duì)于圖片的處理依賴性降低，作為一個(gè)從制作線框圖演變而來的Sketch而言其設(shè)計(jì)的操作以及功能更加符合現(xiàn)在的設(shè)計(jì)需求，作為從圖片處理演變而來的Adobe Photoshop擁有強(qiáng)大的圖片處理功能，以及龐大的功能，讓設(shè)計(jì)師無(wú)法專注于設(shè)計(jì)，設(shè)計(jì)過程中的操作過于繁瑣。同時(shí)確定美術(shù)風(fēng)格對(duì)于細(xì)節(jié)設(shè)計(jì)要求不高，更多的是從整個(gè)感覺上進(jìn)行篩選以及調(diào)整，Sketch作為一個(gè)能夠幫助設(shè)計(jì)師進(jìn)行快速設(shè)計(jì)的軟件非常適合這一部分的工作。

在確立了美術(shù)風(fēng)格之后就可以進(jìn)行其余頁(yè)面的設(shè)計(jì)工作，在完成這一階段的工作中設(shè)計(jì)人員可以根據(jù)自己的習(xí)慣以及需求選擇工具進(jìn)行，目前主流的設(shè)計(jì)工具均配備了能夠在手機(jī)上進(jìn)行實(shí)時(shí)預(yù)覽效果圖的手機(jī)客戶端，設(shè)計(jì)人員應(yīng)當(dāng)安裝此類手機(jī)客戶端實(shí)時(shí)查看在手機(jī)上的現(xiàn)實(shí)效果，由于電腦中顯示的大小并非為在手機(jī)上顯示的實(shí)際大小，所以在手機(jī)上實(shí)時(shí)查看最終效果是十分必要的。同時(shí)對(duì)于設(shè)計(jì)文件應(yīng)當(dāng)注意文件管理做好文件命名，并應(yīng)當(dāng)注意保密，防止文件外泄。

3.2交互設(shè)計(jì)

交互設(shè)計(jì)，又稱互動(dòng)設(shè)計(jì)，交互設(shè)計(jì)在于定義人造物的行為方式相關(guān)的界面，在界面設(shè)計(jì)過程中應(yīng)道考慮到用戶的交互操作如何實(shí)現(xiàn)，同時(shí)交互設(shè)計(jì)完整的呈現(xiàn)可以與動(dòng)效設(shè)計(jì)相結(jié)合，在下一小節(jié)動(dòng)效設(shè)計(jì)中會(huì)詳細(xì)闡述二者如何相結(jié)合。

交互設(shè)計(jì)是十分重要的部分，在智能手機(jī)普及之前，最早被大眾所接觸到的交互為WEB網(wǎng)頁(yè)的交互，當(dāng)鼠標(biāo)進(jìn)行點(diǎn)擊、懸停、滾動(dòng)會(huì)觸發(fā)一系列的交互。移動(dòng)平臺(tái)為交互設(shè)計(jì)提供了更多可能，在新的交互時(shí)代，大部分交互設(shè)計(jì)的解決方案依靠手勢(shì)控制來進(jìn)行實(shí)現(xiàn)，手機(jī)交互將成為未來解決操作的一大趨勢(shì)。

交互操作可以減少按鈕的使用，讓屏幕擁有更多的現(xiàn)實(shí)空間，同時(shí)也讓用戶的操作更加具有趣味性。

移動(dòng)設(shè)備中的交互可以讓用戶感受到真實(shí)的自然規(guī)律，例如點(diǎn)用戶點(diǎn)擊一個(gè)按鈕的時(shí)候產(chǎn)生的交互與自然規(guī)律相符合，在真實(shí)世界中我們點(diǎn)擊一個(gè)物體的時(shí)候會(huì)發(fā)生物理形變，交互維持了移動(dòng)平臺(tái)與真實(shí)世界的聯(lián)系。交互提供的視覺反饋?zhàn)尣僮鞲丫哂腥の缎?，同時(shí)彌補(bǔ)了觸屏手機(jī)缺乏操作反饋的不足。

3.3動(dòng)效設(shè)計(jì)

動(dòng)效設(shè)計(jì)可以讓用戶與手機(jī)之間的交互更加有趣，同時(shí)讓交互實(shí)現(xiàn)的更加優(yōu)雅，一個(gè)好的交互設(shè)計(jì)離不開動(dòng)效設(shè)計(jì)。動(dòng)效設(shè)計(jì)與交互設(shè)計(jì)相輔相成，不同于美術(shù)設(shè)計(jì)可以利用靜止的平面圖片來進(jìn)行展示，動(dòng)效設(shè)計(jì)與交互設(shè)計(jì)需要可交互性，目前比較好的工具有Quartz Composer，在設(shè)計(jì)過程中應(yīng)當(dāng)使用Quartz Composer工具建立高保真可交互的模型。在這一環(huán)節(jié)中，對(duì)所有的交互、動(dòng)效部分進(jìn)行設(shè)計(jì)。

3.4程序交接

程序交接是一個(gè)新產(chǎn)生的環(huán)節(jié)，以往設(shè)計(jì)師是不會(huì)編寫任何程序部分的，但是現(xiàn)今的APP設(shè)計(jì)提出了對(duì)設(shè)計(jì)師跟高的要求，需要設(shè)計(jì)師能夠使用簡(jiǎn)單的代碼完成交互與動(dòng)效的效果制作，在這中間就產(chǎn)生了一部分程序。

在這個(gè)環(huán)節(jié)中，主要進(jìn)行交接的是一些程序參數(shù)，例如圖層的透明度，構(gòu)件形變的百分比等。依據(jù)這些參數(shù)工程師可以百分百的還原設(shè)計(jì)師設(shè)計(jì)的動(dòng)效以及交互設(shè)計(jì)。

四、成品測(cè)試

成品測(cè)試分為兩個(gè)部分，一個(gè)部分需要工程師進(jìn)行完成，主要檢測(cè)程序整體的運(yùn)行情況進(jìn)行程序測(cè)試。另一個(gè)部分為對(duì)成品進(jìn)行使用測(cè)試，這部分可以邀請(qǐng)目標(biāo)用戶參與到測(cè)試過程中，主要檢測(cè)的是產(chǎn)品完成度，以及最終的體驗(yàn)效果，依據(jù)反饋意見再進(jìn)行適當(dāng)調(diào)整。

五、總結(jié)

面對(duì)紛繁的市場(chǎng)，作為一個(gè)產(chǎn)品的開發(fā)者，應(yīng)當(dāng)明確自己的產(chǎn)品定位，在細(xì)分的市場(chǎng)中越來越多的產(chǎn)品會(huì)做的更加專業(yè)化。不同于APP市場(chǎng)的開發(fā)初期，隨著時(shí)間的推移市場(chǎng)對(duì)于APP的要求會(huì)更高，對(duì)于產(chǎn)品開發(fā)者的要求也會(huì)更高。

現(xiàn)在的APP開發(fā)對(duì)整個(gè)開發(fā)團(tuán)隊(duì)以及個(gè)人都提出了更高的要求，對(duì)于團(tuán)隊(duì)而言需要更加密切的配合，對(duì)于個(gè)人而言需要能夠擁有更多的技能。

在整個(gè)開發(fā)過程中需要團(tuán)隊(duì)的所有成員打破工種的限制進(jìn)行配合，一個(gè)巧妙的設(shè)計(jì)需要設(shè)計(jì)師與工程的共同配合，而不是依靠緊緊依靠設(shè)計(jì)師設(shè)計(jì)一個(gè)精美的界面，或是依靠工程師攻克一個(gè)技術(shù)難題。

同時(shí)依靠一個(gè)合理的開發(fā)流程對(duì)產(chǎn)品進(jìn)行開發(fā)十分重要，在完善的開發(fā)流程下，可以盡可能的規(guī)避缺陷，設(shè)計(jì)出一款相對(duì)完善的APP。本文所探討的開發(fā)流程可能還不夠完善，需要盡心進(jìn)一步的完善。