摘? 要：手機App用戶界面的設(shè)計質(zhì)量，對App的用戶使用體驗、用戶存量等具有十分重要的影響。采用以用戶需求為中心、規(guī)范嚴(yán)謹?shù)捻椖靠傮w設(shè)計流程，通過項目市場背景和用戶需求調(diào)研分析、目標(biāo)定位、整體規(guī)劃設(shè)計和規(guī)范化的制作實施等相關(guān)步驟，不僅可以讓App用戶界面設(shè)計項目的設(shè)計目標(biāo)更準(zhǔn)確地與用戶需求相匹配，同時還能幫助設(shè)計團隊在有限的設(shè)計周期內(nèi)，更加規(guī)范、平穩(wěn)、高效地實現(xiàn)項目目標(biāo)。

關(guān)鍵詞：手機App；界面設(shè)計；項目流程

隨著智能手機和移動互聯(lián)網(wǎng)相關(guān)技術(shù)的不斷發(fā)展和普及，各類手機App已逐漸成為幫助人們進行網(wǎng)上信息交流、查詢、購物、業(yè)務(wù)申辦等相關(guān)活動的重要途徑和渠道，同時也為相關(guān)行業(yè)實現(xiàn)“移動互聯(lián)網(wǎng)+”的業(yè)務(wù)模式升級換代，提供了有效的技術(shù)支撐。App界面設(shè)計質(zhì)量對App的用戶使用體驗、用戶評價、用戶存量和用戶忠誠度等，都產(chǎn)生著重要影響。如何在有限的項目設(shè)計周期內(nèi)，通過以用戶為中心的、合理的整體設(shè)計流程，讓項目更加平穩(wěn)、順暢、高效地得以實施，成了各個專業(yè)界面設(shè)計團隊十分重視，同時也需要不斷研究和改進的重要問題。近年來，隨著業(yè)界相關(guān)實踐經(jīng)驗的不斷積累，逐漸形成了一套比較常用的、規(guī)范的、以用戶需求為中心的設(shè)計流程，大致包含以下步驟：

一、項目調(diào)研分析

手機App用戶界面的設(shè)計目標(biāo)，主要是幫助用戶利用手機終端輕松便捷地滿足網(wǎng)絡(luò)信息查詢、溝通交流、學(xué)習(xí)、娛樂、購物、業(yè)務(wù)申報和辦理等相關(guān)需求。而各類手機App的設(shè)計委托方和運營單位（比如各類政府部門、非贏利組織或企事業(yè)單位等）的主要業(yè)務(wù)相關(guān)用戶群體，在用戶分布、用戶特性、用戶群體規(guī)模及其相關(guān)用戶使用需求等方面，都各有各的具體情況。因此，在進行項目規(guī)劃設(shè)計之前，需要對上述情況，以及項目的總體市場背景、宏觀需求和發(fā)展趨勢、市場競爭格局、創(chuàng)新改良空間、推廣應(yīng)用前景等相關(guān)問題，進行系統(tǒng)全面的資料收集、調(diào)研、和分析評估。在此基礎(chǔ)上，進行嚴(yán)謹?shù)牧㈨椃治龊驼撟C，對項目的總體目標(biāo)進行界定，并圍繞該目標(biāo)，有的放矢地展開后續(xù)相關(guān)研發(fā)工作。

（一）項目市場應(yīng)用背景和發(fā)展前景調(diào)研分析

隨著科技的不斷發(fā)展和改良，居民收入水平和消費能力逐步提升，以及自然地理環(huán)境和季節(jié)氣候變化等因素的影響，人們的日常生活和各類需求，也會隨之而發(fā)生相應(yīng)的變化，進而對相關(guān)產(chǎn)品和服務(wù)產(chǎn)生新的消費和使用需求。因此在項目設(shè)計前期，需要對項目的市場應(yīng)用背景進行調(diào)研和分析。首先可以對各類政府部門、稅收統(tǒng)計機構(gòu)、金融機構(gòu)、社科調(diào)研機構(gòu)、專業(yè)財金媒體等正式發(fā)布的，具有較高可靠性和公信力調(diào)研分析數(shù)據(jù)，進行收集、分析和借鑒。如果項目預(yù)算充裕，還可以聘請專業(yè)調(diào)研機構(gòu)，針對項目需求，制定和實施更有針對性的、量身定制的更加系統(tǒng)而精準(zhǔn)的調(diào)研方案。對本項目相關(guān)行業(yè)的市場背景、用戶群體分布、用戶特性、用戶規(guī)模，項目市場發(fā)展機會和前景，各種發(fā)展影響和制約因素，項目立項的必要性、可行性等，進行更加嚴(yán)謹?shù)姆治?、論證，為項目的立項決策等提供參考。

（二）用戶群體和用戶需求調(diào)研分析

為了讓項目作品能夠更好滿足目標(biāo)用戶群體的實際使用需求，需要在項目規(guī)劃設(shè)計之前，對項目的目標(biāo)用戶群體，及其對相關(guān)產(chǎn)品、服務(wù)和App的具體使用需求，進行系統(tǒng)、全面又深入細致的調(diào)研分析。調(diào)研的主要內(nèi)容包括：項目的主要用戶群體的地域、年齡、性別、職業(yè)、受教育層次、消費需求層次等分布情況；用戶對相關(guān)產(chǎn)品、服務(wù)、App的具體使用目的、使用過程、使用需求、使用體驗；使用過程中存在主要困難、問題的風(fēng)險點；問題反饋、獲得幫助、解決問題的機制和流程；用戶對相關(guān)產(chǎn)品、服務(wù)、App操作任務(wù)流程的認知、判斷、學(xué)習(xí)機制，以及對相關(guān)使用體驗的評價因素、評價標(biāo)準(zhǔn)等。調(diào)研的主要方法大致包括：問卷調(diào)研、用戶使用過程和使用行為觀察、用戶訪談、焦點問題討論、行業(yè)專家分析論證等?？梢韵冗\用現(xiàn)有的網(wǎng)絡(luò)調(diào)研平臺，初步進行問卷調(diào)研，了解用戶的年齡、職業(yè)、地域、使用需求、偏好等信息。再根據(jù)初步調(diào)研情況，制定更有針對性的，更加系統(tǒng)、深入的調(diào)研計劃。對上述調(diào)研計劃進行分析、評估、審議通過之后，再組織相關(guān)人員對其進行實施，展開各項具體調(diào)研活動。然后，對通過調(diào)研活動獲得的相關(guān)資料和有效反饋信息等進行匯總、整理、比較、分析。再根據(jù)分析結(jié)果，編制調(diào)研工作報告。并與項目設(shè)計團隊成員、委托方代表、用戶需求分析專家一起，對調(diào)研工作報告進行分享和討論，并針對調(diào)研工作的不足之處進行二次調(diào)研，不斷改進和完善。

（三）同類App研究分析

近年來，不少企業(yè)和組織機構(gòu)都在嘗試為具有各類需求的用戶提供有針對性的、經(jīng)過精心研發(fā)設(shè)計而方便實用的手機App，并從中積累了大量可供參考的實踐經(jīng)驗。因此，在項目前期，可以對與項目相關(guān)的上述同類App進行下載和試用，對它們的設(shè)計方法和思路，比如它們的用戶需求定位、功能規(guī)劃、業(yè)務(wù)特色、交互流程、外觀設(shè)計風(fēng)格等，進行深入研究和分析，以便對它們的成功經(jīng)驗進行參考借鑒，同時對其不足之處進行改進和完善。

（四）制定項目整體目標(biāo)

在上述調(diào)研分析的基礎(chǔ)上，可以組織項目經(jīng)理、客服、項目所屬行業(yè)需求分析專家、項目委托方代表等相關(guān)人士，對調(diào)研結(jié)果進行分析、研討。對項目的目標(biāo)用戶群體、用戶需求（可大致分為核心需求和相關(guān)附屬需求等）、用戶的常見使用情景等，進行界定。并以此為依據(jù)，確定項目需要實現(xiàn)的具體功能和整體目標(biāo)，以便圍繞上述目標(biāo)，對項目研發(fā)所需的相關(guān)人員、設(shè)備等資源配置，計劃周期、組織分工等，進行統(tǒng)籌和規(guī)劃。

二、整體功能規(guī)劃和信息架構(gòu)

根據(jù)上述項目目標(biāo)，針對用戶需求，對項目預(yù)計包含的主要功能、次要功能和附屬功能，以及相關(guān)的用戶界面信息架構(gòu)，進行系統(tǒng)的分析和規(guī)劃設(shè)計。通過樹狀圖、功能模塊列表等形式，對各個功能模塊之間的類屬和邏輯層次關(guān)系，進行梳理。這時需要對各個共能信息模塊，需要進行歸納和分類，把內(nèi)容相近、關(guān)系緊密的模塊歸為一個大類，以便用戶查找。信息模塊的名稱應(yīng)簡練而便于區(qū)分，盡量避免發(fā)生概念上的交叉重疊，以免用戶產(chǎn)生誤解和混淆。通常情況下，App的首頁界面上應(yīng)包含大多數(shù)用戶最常用的主要功能信息模塊和重要消息，這些常被稱為一級模塊。每個一級模塊中又常常需要包含與之相關(guān)的，細分的二級、三級、四級等功能信息模塊。在模塊規(guī)劃上，需要注意的是，如果模塊的層級過多，用戶在瀏覽和查詢相關(guān)信息時就比較容易“迷路”，因而降低用戶對App的使用效率。因此，界面模塊的層級一般保持在3～5級左右為宜。

三、確定項目設(shè)計尺寸規(guī)范

目前最主流的智能手機操作系統(tǒng)是iSO和Andriod系統(tǒng)。這兩種系統(tǒng)都參照人機工程學(xué)、設(shè)計美學(xué)等相關(guān)原理，對操作界面的整體尺寸，和其中所包含的各類界面組件的大小尺寸等，進行了大量的研究，經(jīng)過反復(fù)的設(shè)計試驗和效果測試，逐步形成了目前廣受用戶認可和接受的界面設(shè)計規(guī)范。并在其官方網(wǎng)站上發(fā)布了相關(guān)設(shè)計指南。盡管項目設(shè)計團隊完全可以根據(jù)特殊的用戶需求專門制定一套獨特的界面設(shè)計尺寸規(guī)范。但目前在大多數(shù)情況下，面向社會大眾的日常需求而設(shè)計的App界面，為了更好地與上述兩大系統(tǒng)的操作界面進行兼容，一般都會對其設(shè)計指南和其中包含的上述尺寸規(guī)范等進行參考和借鑒。目前國內(nèi)研發(fā)團隊較常用的方法是，先參照iOS系統(tǒng)主流機型的屏幕尺寸和相關(guān)常用界面組件的尺寸規(guī)范設(shè)計一套界面交互原型。待該原型通過測試和驗收之后，再在其基礎(chǔ)上對界面設(shè)計組件的尺寸和間距寬窄等進行相應(yīng)調(diào)整，使之能與iOS和Android系統(tǒng)其他機型的界面尺寸進行適配。通過上述方法，就可以讓同一款A(yù)pp在基于這兩種操作系統(tǒng)的常用手機屏幕上，都保持一致的界面外觀效果。讓用戶在這兩種系統(tǒng)的手機上使用同一款A(yù)pp時都不會感到陌生，從而減少可能由此帶來的不便。

四、交互流程設(shè)計

根據(jù)上述整體功能和信息架構(gòu)規(guī)劃，就可以進一步對各個功能信息模塊中所含界面的交互順序和流程，進行構(gòu)思和規(guī)劃設(shè)計。其中主要包括：信息分類檢索、搜索、檢索標(biāo)題列表、具體信息呈現(xiàn)相關(guān)流程；用戶注冊、登錄、個人賬戶信息管理流程；商品或服務(wù)選購流程（含商品分類查找、比較、關(guān)注、加入購物車、購物車管理、優(yōu)惠促銷、下單、結(jié)算、訂單管理、物流跟蹤、售后服務(wù)、換貨退貨、反饋評價，等相關(guān)業(yè)務(wù)交互流程）其他服務(wù)的相關(guān)業(yè)務(wù)交互流程。針對網(wǎng)上業(yè)務(wù)辦理的功能模塊，設(shè)計時需要站在便于用戶操作和使用的角度，對相關(guān)業(yè)務(wù)的申報、受理、執(zhí)行、監(jiān)管、反饋等過程進行分析，并對各個步驟需要用戶填報的各項具體信息和完成的操作任務(wù)進行具體規(guī)劃。同時還需要考慮對用戶點擊執(zhí)行的相關(guān)操作任務(wù)（比如下載、上傳文件等）的完成進度進行反饋，并對用戶忘記密碼，或在填報和操作時可能出現(xiàn)的相應(yīng)錯誤等，提供相關(guān)修改提示，能夠引導(dǎo)用戶及時糾錯，順利完成相關(guān)操作任務(wù)?？傮w上，上述各類功能、各項業(yè)務(wù)的交互流程，都是為了幫助用戶快速、安全地完成各類信息查詢、交流和業(yè)務(wù)辦理等相關(guān)任務(wù)。因此，在設(shè)計時要注意業(yè)務(wù)流程的合理性、便捷性和安全性。

五、低保真界面交互原型設(shè)計

在上述工作的基礎(chǔ)上，可以運用Adobe XD、Sketch、墨刀、Axure等設(shè)計軟件，對各個模塊中包含的一個個界面的主要內(nèi)容，進行簡明、直觀的草圖設(shè)計。設(shè)計時，只需要借助不同亮度的灰色線框、色塊等，對每個界面中需要包含的功能組件（比如狀態(tài)欄、搜索欄、標(biāo)簽欄、以及各類按鈕圖標(biāo)等）和主要內(nèi)容（比如標(biāo)題、副標(biāo)題、文本框、圖片框、視頻播放窗口等）的外形輪廓、大小尺寸、間距等進行構(gòu)思和簡要繪制，從而體現(xiàn)出每個界面的主要功能和整體布局形式。在該階段，暫時還不需要對每個界面中包含的標(biāo)題、文字、圖片、視頻節(jié)目、按鈕圖標(biāo)等具體內(nèi)容，進行詳細的呈現(xiàn)。因此，本階段完成的界面設(shè)計圖都只是簡明的線框布局草圖，常常被稱為低保真界面原型設(shè)計圖，可以快速地呈現(xiàn)出界面規(guī)劃設(shè)計的大體效果。上述工作完成后，還需要繼續(xù)運用上述軟件，參照前期完成的交互流程規(guī)劃方案，為每個界面中包含的各種功能按鈕，添加相應(yīng)的交互指令，從而制作出具有基本交互功能，并能夠在手機上進行操作演示的低保真界面交互原型。設(shè)計團隊可以邀請項目委托方代表、用戶代表和行業(yè)專家等相關(guān)人士，共同對該交互原型進行試用、測試和研討。并根據(jù)發(fā)現(xiàn)的問題和相關(guān)建議，對上述交互原型進行修改和優(yōu)化。

六、制定整體視覺風(fēng)格設(shè)計規(guī)范

通常，人們在使用一款A(yù)pp時，都不僅僅只是滿足基本的使用需求，往往還會在使用的過程中，寄寓對理想生活品質(zhì)的追求和對某種特定消費文化和價值的認同。因此，在項目設(shè)計前期，還需要在上述低保真原型設(shè)計圖的基礎(chǔ)上，為各個界面中包含的各類標(biāo)題、正文、列表的字體樣式、段落樣式、數(shù)據(jù)圖表（比如柱狀圖、餅狀圖、網(wǎng)狀圖或其他信息可視化圖表等）、插圖、通用組件、按鈕圖標(biāo)等，制定統(tǒng)一的外觀風(fēng)格和相應(yīng)的設(shè)計規(guī)范。將該規(guī)范分發(fā)給項目組中包含的美術(shù)設(shè)計團隊成員，以便大家在分工合作和分頭完成設(shè)計的過程中，保持一致的整體風(fēng)格。并通過這種整體風(fēng)格，來體現(xiàn)該App的品牌個性、所追求的特殊品質(zhì)和倡導(dǎo)的消費文化。

七、高保真界面交互原型設(shè)計

項目組中所含的美術(shù)設(shè)計團隊，可以在低保真界面設(shè)計原型圖的基礎(chǔ)上，對每個界面中包含的各種標(biāo)題、文字、列表、數(shù)據(jù)圖表、背景圖、插圖、按鈕圖標(biāo)、媒體播放窗口等，添加相應(yīng)的具體內(nèi)容。并運用PS、Ai等設(shè)計軟件，參照上述外觀風(fēng)格規(guī)范，進行更加精細化的外觀設(shè)計。使界面的各種細節(jié)、紋理、色彩層次更加豐富，插圖更加真實細膩，讓界面的視覺外觀效果更加美觀、完善，呈現(xiàn)出App未來準(zhǔn)備發(fā)布時的實際效果和藝術(shù)品質(zhì)。因此，業(yè)界常常把本階段完成后的設(shè)計圖稱為高保真界面原型設(shè)計圖。下一步，需要借助上述Adobe XD、Sketch、墨刀、Axure等設(shè)計軟件，為每個高保真界面圖中所含的功能組件，添加交互指令，制作出可以在手機上點擊、操作、演示的高保真界面交互原型。并邀請設(shè)計團隊成員和相關(guān)人員，對上述高保真原型，進行測試、研討和修改完善。

八、適配各種市場主流機型的屏幕尺寸

由于各家手機廠商都不斷對產(chǎn)品進行升級換代。因此，目前iOS和Andriod系統(tǒng)，都分別有好幾種不同屏幕尺寸的主流機型。所以，在上述高保真界面原型通過測試、評審、定稿之后，就可以用它作為樣品，參照其它機型的屏幕尺寸，對界面的畫幅尺寸，以及其中包含的各種標(biāo)題、字體、圖片、按鈕圖標(biāo)的大小尺寸和間距等，進行適當(dāng)?shù)恼{(diào)整，隨后將其保存為能夠與其它主流機型的屏幕尺寸相匹配的版本。

九、切圖和添加程序代碼

接下來，項目組中負責(zé)上述界面外觀設(shè)計的美術(shù)團隊，需要與負責(zé)添加代碼的程序團隊進行溝通。根據(jù)程序團隊的需求和相關(guān)切圖規(guī)范，對高保真界面原型圖中所包含的各種插圖、數(shù)據(jù)圖表、按鈕、圖標(biāo)等進行切圖。將它們從原來的界面設(shè)計圖中分別切割和提取出來，并保存為一個個單獨的圖片文件。保存時，需要按照統(tǒng)一的命名規(guī)范對文件夾和圖片進行命名。以便讓程序員可以通過這些切圖的文件名，及其所屬文件夾的名稱，對其所屬的機型屏幕版本、信息功能模塊、具體界面名稱，及其類型和功能等，進行區(qū)分。在編寫程序代碼時，對這些圖片進行快速的搜索、查找和調(diào)用。同時也有利于在后期維護中對需要更新的圖片進行查找和替換。程序員在收到上述切圖，并與美術(shù)設(shè)計師進行溝通和工作交接之后，便可參照上述高保真界面交互原型，編寫相關(guān)程序代碼，將原型轉(zhuǎn)化為能在手機上運行的真實界面。相關(guān)工作完成后，可以請項目團隊成員、委托方代表等一起對界面的實際效果進行測試和修改完善。

十、驗收、交互、運營和持續(xù)改進

最后，可以組織相關(guān)部門一起，進行項目成果驗收和交付。隨后即可進行App的宣傳推廣和市場發(fā)布。繼而進入App的實際運營階段。在此過程中，需要及時收集和分析用戶反饋的各類問題，并在此基礎(chǔ)上對App進行持續(xù)改進和版本迭代。

上述步驟，是目前國內(nèi)從事手機界面設(shè)計專業(yè)公司和團隊，較為常用的項目整體設(shè)計流程。其核心原理是以用戶需求為中心，在對用戶需求進行詳細研究、分析、把握的基礎(chǔ)上，制定清晰而具體的項目整體設(shè)計目標(biāo)，并圍繞上述目標(biāo)，參照行業(yè)相關(guān)手機界面尺寸和設(shè)計規(guī)范，有條不紊地展開App用戶界面功能規(guī)劃、交互流程設(shè)計、視覺外觀設(shè)計、交互原型設(shè)計等相關(guān)工作。在產(chǎn)業(yè)實踐的過程中，不同的界面設(shè)計項目團隊往往會根據(jù)各個項目的具體需求、整體規(guī)模、項目預(yù)算和資源配置條件、人員分工的細化程度等相關(guān)情況，對上述個別環(huán)節(jié)進行適當(dāng)簡化、合并或同步實施。但項目的整體工作思路、方法和流程，是基本相通和大體一致的。

由于國內(nèi)手機界面設(shè)計相關(guān)行業(yè)的發(fā)展歷史還不算太長，目前大部分專業(yè)教材和參考文獻主要都集中在對相關(guān)軟件操作技巧和美術(shù)設(shè)計原理的介紹上，對項目的整體規(guī)劃設(shè)計思路和流程進行整體介紹的資料相對較少。因此，作者結(jié)合自身在界面設(shè)計方面進行學(xué)習(xí)、研究和積累的一些實踐經(jīng)驗，以及近年來指導(dǎo)學(xué)生完成相關(guān)本科畢業(yè)設(shè)計項目的教學(xué)經(jīng)驗，嘗試對上述項目流程進行了簡要梳理和介紹，希望能對相關(guān)專業(yè)的同學(xué)或剛?cè)胄械膹臉I(yè)者們，提供一些參考和幫助。由于作者的經(jīng)驗有限，也很希望能得到業(yè)界同仁們的寶貴意見。

參考文獻：

[1]呂云翔.UI交互設(shè)計與開發(fā)實戰(zhàn)[M].北京：機械工業(yè)出版社，2020.

[2]王雨典.試析基于用戶體驗的手機界面設(shè)計[J].大眾文藝，2021（3）：37-38.

[3]陳麗，劉慧瓊.媒體界面交互性設(shè)計的流程和原則[J].中國遠程教育，2006（4）：22-30.

[4]王怡琛.以交互設(shè)計流程為導(dǎo)向的實訓(xùn)式圖標(biāo)設(shè)計教學(xué)實踐探索[J].卷宗，2021（6）：216.

[5]耿陽，趙煒濃.融合參與觀察的用戶界面設(shè)計方法研究[J].設(shè)計，2020（9）：44-46.

[6]梁哲，穆冰玉，溫麗琴.UI界面設(shè)計[M].石家莊：河北美術(shù)出版社，2018.

作者簡介：駱鵬州，成都東軟學(xué)院數(shù)字藝術(shù)與設(shè)計學(xué)院碩士、副教授。研究方向：美術(shù)設(shè)計、數(shù)字媒體藝術(shù)。