APP與UI設(shè)計(jì)的主要內(nèi)容

在移動(dòng)APP客戶端的適配過(guò)程中，選擇一個(gè)平臺(tái)作為起點(diǎn)是關(guān)鍵的第一步。我們的視野必須超越單一平臺(tái)，著眼于多平臺(tái)適配的潛力。

選擇適配起始平臺(tái)

根據(jù)公司的戰(zhàn)略布局，明確首個(gè)切入的平臺(tái)，這可能是iOS、Android或其他任何主流平臺(tái)。這一步將為整個(gè)項(xiàng)目的方向定下基調(diào)。

理解平臺(tái)UI設(shè)計(jì)規(guī)范

深入了解所選平臺(tái)的UI設(shè)計(jì)規(guī)范，包括可用的UI控件和交互原則。這將確保我們的設(shè)計(jì)符合用戶習(xí)慣，提升用戶體驗(yàn)。

設(shè)計(jì)客戶端的初始形態(tài)

確定切入的屏幕大小，以此為基礎(chǔ)設(shè)計(jì)第一個(gè)客戶端。要考慮其他屏幕大小的適配性，決定是自適應(yīng)擴(kuò)展還是縮小。

交互設(shè)計(jì)的啟動(dòng)

根據(jù)所選平臺(tái)和屏幕大小，選擇一款典型的手機(jī)作為設(shè)計(jì)參考，開(kāi)始客戶端的交互設(shè)計(jì)。這一過(guò)程需要細(xì)致考慮用戶操作流程和界面布局。

確定客戶端的核心目的與風(fēng)格

明確客戶端的核心功能，如娛樂(lè)或功能性完成目的。根據(jù)功能和內(nèi)容，設(shè)計(jì)相應(yīng)的信息架構(gòu)。結(jié)合UCD原則，完成客戶端的交互原型設(shè)計(jì)。在過(guò)程中，始終考慮手機(jī)適配的三因素：平臺(tái)、屏幕、觸摸/非觸摸，以確保未來(lái)的界面適配完美無(wú)瑕。

APP設(shè)計(jì)和開(kāi)發(fā)所需的知識(shí)與軟件

確定要開(kāi)發(fā)的平臺(tái)（如iOS或Android）是首要任務(wù)。針對(duì)Android平臺(tái)，Java語(yǔ)言和XML知識(shí)是基礎(chǔ)，還需熟悉Android特有的API。對(duì)于iOS平臺(tái)，則需要掌握Objective-C語(yǔ)言和xcode開(kāi)發(fā)環(huán)境。

在開(kāi)發(fā)之前，需要制定APP設(shè)計(jì)方案，結(jié)合用戶體驗(yàn)制作原型，明確用戶定位和使用態(tài)度。其中涉及核心功能、輔助功能和邊緣功能的分布，以及應(yīng)用界面的風(fēng)格和樣式。原型設(shè)計(jì)制作可以選擇的工具軟件包括Axure RP、Mockplus、InVision和Justinmind等。

硬件與軟件版本對(duì)于開(kāi)發(fā)過(guò)程同樣重要。推薦使用惠普暗影精靈6和Apple Macbook Pro 13.3等高性能設(shè)備，同時(shí)確保使用最新版本的Windows10專業(yè)版、MacOS Big Sur以及Mockplus 3.6.2.1、Axure RP 8.1.0等開(kāi)發(fā)工具。

APP研發(fā)的設(shè)計(jì)流程

第一、市場(chǎng)分析

商業(yè)分析是產(chǎn)品生命周期中最具指導(dǎo)性的環(huán)節(jié)，它揭示了新產(chǎn)品的商業(yè)價(jià)值。這包括對(duì)行業(yè)前景的評(píng)估、潛在市場(chǎng)的分析以及產(chǎn)品投放后的預(yù)期回報(bào)。高層和創(chuàng)始人的決策至關(guān)重要，新產(chǎn)品的市場(chǎng)分析難度往往大于已有產(chǎn)品的擴(kuò)展模塊功能分析。

第二、產(chǎn)品定位

產(chǎn)品定位是產(chǎn)品成功的關(guān)鍵所在。它明確了產(chǎn)品的主要功能、目標(biāo)用戶和解決的問(wèn)題。例如，微信的定位是社交，ins則是照片分享生活。產(chǎn)品定位還應(yīng)包括用戶年齡段的分布以及潛在需求的分析。理解這些關(guān)鍵信息對(duì)于后續(xù)的設(shè)計(jì)和開(kāi)發(fā)至關(guān)重要。通過(guò)深入的市場(chǎng)分析和精準(zhǔn)的產(chǎn)品定位，我們可以為APP的研發(fā)奠定堅(jiān)實(shí)的基礎(chǔ)。

第三、需求階段

在確定了市場(chǎng)方向之后，我們需要深入探索這個(gè)方向上的需求。在這一階段，我們會(huì)識(shí)別出許多直接和間接的競(jìng)爭(zhēng)對(duì)手。對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)，這一階段尤為關(guān)鍵，因?yàn)樗婕暗绞袌?chǎng)分析和產(chǎn)品定位的深入理解。我們需要明確哪些需求是急需解決的，并輸出競(jìng)品分析報(bào)告，列出競(jìng)品的優(yōu)缺點(diǎn)，其中部分會(huì)用SWOT進(jìn)行分析。在這一階段，產(chǎn)品經(jīng)理（PM）需要引導(dǎo)團(tuán)隊(duì)找到產(chǎn)品的主要痛點(diǎn)并解決它們。

第四、產(chǎn)品設(shè)計(jì)階段

這一階段與UI設(shè)計(jì)息息相關(guān)。PM在這個(gè)階段的主要任務(wù)是畫(huà)原型和寫(xiě)文檔。真正出色的PM需要具備精湛的原型設(shè)計(jì)能力和詳盡的文檔描述能力。遺憾的是，目前市場(chǎng)上真正高水平的PM并不多，他們的原型設(shè)計(jì)可能粗糙，文檔描述可能遺漏關(guān)鍵信息，甚至在UI設(shè)計(jì)中存在一些優(yōu)于PM的點(diǎn)未被充分利用。很多資歷較淺的PM往往善于模仿競(jìng)品，卻忽略了不同產(chǎn)品之間的本質(zhì)區(qū)別。這一階段主要由PM和用戶體驗(yàn)設(shè)計(jì)師（UE）共同完成。交互完成后，會(huì)進(jìn)行內(nèi)部評(píng)審，確認(rèn)無(wú)誤后方可交給UI設(shè)計(jì)師。

在工作中，我們會(huì)看到各種各樣的原型交互圖，但優(yōu)秀的作品卻寥寥無(wú)幾。PM在整個(gè)產(chǎn)品規(guī)劃中要達(dá)到的目標(biāo)是實(shí)現(xiàn)產(chǎn)品價(jià)值。這需要明確每個(gè)階段的目標(biāo)，所有的決策和行為都要圍繞這個(gè)目標(biāo)進(jìn)行。最終，我們需要通過(guò)數(shù)據(jù)等方式來(lái)判斷是否解決了問(wèn)題。階段性的目標(biāo)必須是明確的，如用戶活躍度、成交量等關(guān)鍵指標(biāo)，這些都是驗(yàn)證前期工作是否有效的依據(jù)。

第五、需求評(píng)審階段

在產(chǎn)品需求確認(rèn)后，會(huì)召開(kāi)評(píng)審會(huì)議，參與人員包括PM、UE、UI、研發(fā)（RD）、前端（FE）、測(cè)試（QA）等職能人員。會(huì)議中，PM需要闡述需求文檔（大公司一般使用wiki工具），研發(fā)團(tuán)隊(duì)通常會(huì)提出最多的問(wèn)題，因?yàn)樗麄冊(cè)谠u(píng)審前已經(jīng)進(jìn)行了確認(rèn)工作并可能會(huì)提出風(fēng)險(xiǎn)問(wèn)題，如是否可以直接調(diào)用代碼、是否存在技術(shù)難點(diǎn)等。評(píng)審?fù)瓿珊?，研發(fā)團(tuán)隊(duì)會(huì)進(jìn)行排期工作。

第六、UI設(shè)計(jì)師的介入及工作要點(diǎn)

在UI設(shè)計(jì)師介入項(xiàng)目時(shí)，需要注意以下幾點(diǎn)：

拿到項(xiàng)目后不要急于開(kāi)始設(shè)計(jì)，要先明確產(chǎn)品的目的和意圖。仔細(xì)研究整個(gè)產(chǎn)品線，了解整體app的設(shè)計(jì)調(diào)性、字體字號(hào)、間距等。進(jìn)行競(jìng)品分析時(shí)，主要關(guān)注視覺(jué)層面，找出參考并吸取靈感。

設(shè)計(jì)前要預(yù)估整體設(shè)計(jì)進(jìn)度并給出設(shè)計(jì)排期。排期要根據(jù)頁(yè)面設(shè)計(jì)和修改的時(shí)間來(lái)計(jì)算，以避免項(xiàng)目延期。例如，如果有10個(gè)界面需要設(shè)計(jì)，可以給自己3天設(shè)計(jì)時(shí)間，1天確認(rèn)時(shí)間，然后根據(jù)需要增加緩沖時(shí)間。

在設(shè)計(jì)過(guò)程中，要遵循UI規(guī)范，確保設(shè)計(jì)的統(tǒng)一性和一致性。按照@2x的比例進(jìn)行設(shè)計(jì)，注意icon的粗細(xì)、視覺(jué)重量、字體自重、間距以及顏色的統(tǒng)一性。

一、視覺(jué)還原與走查聯(lián)調(diào)的重要性

在產(chǎn)品開(kāi)發(fā)流程的后期，我們需要對(duì)UI設(shè)計(jì)稿進(jìn)行視覺(jué)還原，進(jìn)入關(guān)鍵的走查聯(lián)調(diào)階段。這一階段至關(guān)重要，它確保了設(shè)計(jì)的精準(zhǔn)呈現(xiàn)和產(chǎn)品的完美落地。經(jīng)驗(yàn)告訴我們，有些開(kāi)發(fā)的還原度可能并不理想，因此我們必須嚴(yán)格把控。對(duì)于大廠而言，如果開(kāi)發(fā)還原度低于60%，通常會(huì)被要求重新調(diào)整后再進(jìn)行走查。走查聯(lián)調(diào)的內(nèi)容包括字體、字號(hào)、字重、顏色、間距、icon以及邊距等規(guī)范方面的核查，這一階段往往會(huì)發(fā)現(xiàn)開(kāi)發(fā)中的不足。當(dāng)走查聯(lián)調(diào)達(dá)到95%的滿意度時(shí)，我們可以認(rèn)為基本達(dá)到了預(yù)期。

二、走查聯(lián)調(diào)的詳細(xì)步驟

在這一階段，我們會(huì)使用多部不同品牌的測(cè)試手機(jī)進(jìn)行查看，以確保產(chǎn)品在不同手機(jī)上的呈現(xiàn)效果一致。測(cè)試過(guò)程中，我們會(huì)針對(duì)每個(gè)界面進(jìn)行截圖，并記錄在wiki中，標(biāo)注出存在的問(wèn)題。我們會(huì)將UI圖作為參考提供給開(kāi)發(fā)團(tuán)隊(duì)，以便他們更明確地了解需求并進(jìn)行調(diào)整。如仍存在小問(wèn)題，我們會(huì)進(jìn)行二次或三次聯(lián)調(diào)。當(dāng)開(kāi)發(fā)還原度達(dá)到90%時(shí)，我們會(huì)與開(kāi)發(fā)團(tuán)隊(duì)緊密合作，親自調(diào)整細(xì)節(jié)問(wèn)題，直至達(dá)到滿意為止。

三、QA測(cè)試環(huán)節(jié)的關(guān)鍵作用

QA測(cè)試環(huán)節(jié)對(duì)于設(shè)計(jì)師而言，通俗地說(shuō)就是找出bug的過(guò)程。確實(shí)，bug是阻礙產(chǎn)品上線的最大障礙，必須確保在上線前解決所有bug。QA的主要任務(wù)是檢查研發(fā)實(shí)現(xiàn)的功能與產(chǎn)品、UI、交互設(shè)計(jì)是否一致，尋找異常情況并進(jìn)行優(yōu)化，把控項(xiàng)目的質(zhì)量。這一過(guò)程類似于風(fēng)險(xiǎn)控制。

四、Tips環(huán)境的重要性及特點(diǎn)

在正式全量上線前，產(chǎn)品會(huì)先上線到Tips環(huán)境進(jìn)行測(cè)試。Tips環(huán)境是為了更好地模擬真實(shí)環(huán)境而進(jìn)行的一種測(cè)試方式。由于測(cè)試環(huán)境與線上環(huán)境的數(shù)據(jù)有時(shí)存在差異，一些問(wèn)題可能在測(cè)試環(huán)境無(wú)法完全暴露出來(lái)，因此需要通過(guò)Tips環(huán)境進(jìn)行進(jìn)一步的測(cè)試。Tips環(huán)境與線上環(huán)境共用數(shù)據(jù)，以確保測(cè)試的全面性和準(zhǔn)確性。

五、產(chǎn)品驗(yàn)收環(huán)節(jié)的核心要點(diǎn)

產(chǎn)品從0-1的過(guò)程中，產(chǎn)品驗(yàn)收環(huán)節(jié)尤為重要。產(chǎn)品驗(yàn)收的最終目標(biāo)是上線，但在此之前可能會(huì)經(jīng)歷多次修改。在產(chǎn)品上線前，必須通過(guò)測(cè)試、UI驗(yàn)收和產(chǎn)品驗(yàn)收，這是控制產(chǎn)品質(zhì)量的必要手段。產(chǎn)品驗(yàn)收的重點(diǎn)在于從產(chǎn)品角度驗(yàn)收開(kāi)發(fā)是否滿足產(chǎn)品需求，側(cè)重于業(yè)務(wù)邏輯和對(duì)需求的負(fù)責(zé)。這一過(guò)程確保了產(chǎn)品的質(zhì)量和用戶體驗(yàn)。