淺談手機(jī)應(yīng)用設(shè)計(jì)的開(kāi)發(fā)流程

任洋

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

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

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

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

一、前期準(zhǔn)備

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

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

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

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

二、低保真模型的建立

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

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

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

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

在這一部分中完成界面的所有相關(guān)設(shè)計(jì)，其中包括了美術(shù)設(shè)計(jì)、交互設(shè)計(jì)、動(dòng)效設(shè)計(jì)，三者處于并行關(guān)系，并且相互關(guān)聯(lián)，在設(shè)計(jì)的過(guò)程中應(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)格之后，再開(kāi)展后續(xù)的設(shè)計(jì)工作。

在實(shí)際應(yīng)用中發(fā)現(xiàn)在確立美術(shù)風(fēng)格這一過(guò)程中可以使用Sktech進(jìn)行美術(shù)風(fēng)格的確立，Sketch擁有輕量級(jí)的設(shè)計(jì)，相比之下Adobe Photoshop的功能過(guò)多，不利于設(shè)計(jì)師進(jìn)行快速設(shè)計(jì)，現(xiàn)在主流的設(shè)計(jì)風(fēng)格為扁平化的設(shè)計(jì)風(fēng)格，對(duì)于圖片的處理依賴(lài)性降低，作為一個(gè)從制作線(xiàn)框圖演變而來(lái)的Sketch而言其設(shè)計(jì)的操作以及功能更加符合現(xiàn)在的設(shè)計(jì)需求，作為從圖片處理演變而來(lái)的Adobe Photoshop擁有強(qiáng)大的圖片處理功能，以及龐大的功能，讓設(shè)計(jì)師無(wú)法專(zhuān)注于設(shè)計(jì)，設(shè)計(jì)過(guò)程中的操作過(guò)于繁瑣。同時(shí)確定美術(shù)風(fēng)格對(duì)于細(xì)節(jié)設(shè)計(jì)要求不高，更多的是從整個(gè)感覺(jué)上進(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ī)客戶(hù)端，設(shè)計(jì)人員應(yīng)當(dāng)安裝此類(lèi)手機(jī)客戶(hù)端實(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ì)，又稱(chēng)互動(dòng)設(shè)計(jì)，交互設(shè)計(jì)在于定義人造物的行為方式相關(guān)的界面，在界面設(shè)計(jì)過(guò)程中應(yīng)道考慮到用戶(hù)的交互操作如何實(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ì)控制來(lái)進(jìn)行實(shí)現(xiàn)，手機(jī)交互將成為未來(lái)解決操作的一大趨勢(shì)。

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

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

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

動(dòng)效設(shè)計(jì)可以讓用戶(hù)與手機(jī)之間的交互更加有趣，同時(shí)讓交互實(shí)現(xiàn)的更加優(yōu)雅，一個(gè)好的交互設(shè)計(jì)離不開(kāi)動(dòng)效設(shè)計(jì)。動(dòng)效設(shè)計(jì)與交互設(shè)計(jì)相輔相成，不同于美術(shù)設(shè)計(jì)可以利用靜止的平面圖片來(lái)進(jìn)行展示，動(dòng)效設(shè)計(jì)與交互設(shè)計(jì)需要可交互性，目前比較好的工具有Quartz Composer，在設(shè)計(jì)過(guò)程中應(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ě)任何程序部分的，但是現(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)用戶(hù)參與到測(cè)試過(guò)程中，主要檢測(cè)的是產(chǎn)品完成度，以及最終的體驗(yàn)效果，依據(jù)反饋意見(jiàn)再進(jìn)行適當(dāng)調(diào)整。

五、總結(jié)

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

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

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

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