二、切圖命名規(guī)則

1. 切圖數(shù)量與分類

在APP開發(fā)過程中，隨著項(xiàng)目的推進(jìn)，最終輸出的切圖數(shù)量會(huì)相當(dāng)龐大。為了有效管理這些切圖，首先需要對它們進(jìn)行分類。通常，我們可以根據(jù)界面或功能的不同，將切圖分為不同的類別，如導(dǎo)航欄、主界面、列表、詳情頁等。

2. 命名構(gòu)成

切圖的命名應(yīng)遵循一定的規(guī)則，以便于查找和理解。命名應(yīng)遵循以下格式：“（界面或功能）+（控件名）+（狀態(tài)）+（補(bǔ)充描述）”。這樣的命名結(jié)構(gòu)能夠清晰地反映出切圖所屬的分類、功能、狀態(tài)以及任何其他必要的信息。

3. 控件命名

在命名中，“控件名”是非常關(guān)鍵的一部分。常見的控件包括按鈕、文本框、列表、滑塊、導(dǎo)航欄等。對于每個(gè)控件，都應(yīng)使用統(tǒng)一、簡潔的命名，避免使用過于復(fù)雜或難以理解的詞匯。

4. 狀態(tài)標(biāo)識(shí)

“狀態(tài)”指的是控件的不同狀態(tài)，如按鈕的正常狀態(tài)、被點(diǎn)擊狀態(tài)、禁用狀態(tài)等。在命名時(shí)，應(yīng)明確標(biāo)識(shí)出這些狀態(tài)，以便于區(qū)分不同的切圖。

5. 補(bǔ)充描述

“補(bǔ)充描述”是為了進(jìn)一步說明切圖的細(xì)節(jié)或特殊需求。在某些情況下，可能還需要提供設(shè)備的分辨率、尺寸或其他相關(guān)信息。這些信息可以幫助開發(fā)者更好地理解切圖的需求和細(xì)節(jié)。

6. 團(tuán)隊(duì)溝通與協(xié)作

統(tǒng)一的切圖命名規(guī)則是團(tuán)隊(duì)溝通與協(xié)作的基礎(chǔ)。通過遵循統(tǒng)一的命名規(guī)則，團(tuán)隊(duì)成員可以更快地理解彼此的工作，減少溝通成本，提高團(tuán)隊(duì)協(xié)作的效率。

7. 工具與輔助

為了更好地管理切圖，團(tuán)隊(duì)可以使用一些輔助工具，如藍(lán)湖等。這些工具可以幫助團(tuán)隊(duì)進(jìn)行自動(dòng)標(biāo)注、樹狀連線、交互原型制作和產(chǎn)品文檔共享，進(jìn)一步提高工作效率。

在實(shí)際操作中，團(tuán)隊(duì)?wèi)?yīng)根據(jù)自身需求和項(xiàng)目特點(diǎn)，靈活應(yīng)用這些命名規(guī)則。隨著項(xiàng)目的進(jìn)展，團(tuán)隊(duì)還應(yīng)定期回顧和優(yōu)化命名規(guī)則，以確保它們?nèi)匀贿m用于當(dāng)前的項(xiàng)目和需求。

典型界面切圖的命名規(guī)范

一、登錄界面命名

初識(shí)登錄界面，它的背景圖像命名為“Login_bg.png”，LOGO則稱為“Login_logo.png”。進(jìn)一步的，我們有輸入框的圖像命名為“Login_input.png”，而當(dāng)輸入框被選中時(shí)，其狀態(tài)圖像為“Login_input_pre.png”。登錄按鈕則簡稱為“Login_btn.png”，當(dāng)其被選中時(shí)，狀態(tài)圖像為“Login_btn_pre.png”。

二、按鈕及其他控件的命名

按鈕的命名遵循一種固定的格式：Btn_x.png表示按鈕的默認(rèn)狀態(tài)，Btn_x_pre.png代表按鈕被選中的狀態(tài)，而Btn_x_disable.png則代表按鈕不可點(diǎn)擊的狀態(tài)。

對于常見的控件，我們也有一套清晰的命名規(guī)則。如Icon表示圖標(biāo)，Img代表圖片，List是列表。還有Sign代表標(biāo)記，Menu是菜單，Bar表示欄，如StatusBar表示狀態(tài)欄，NaviBar表示導(dǎo)航欄，TabBar表示標(biāo)簽欄。其他的控件，如ToolBar是工具欄，Switch是切換開關(guān)，Slider是滑動(dòng)器，Radio是單選框，CheckBox是復(fù)選框，以及Bg代表背景。

三、App研發(fā)的設(shè)計(jì)流程

1. 市場分析

商業(yè)分析是產(chǎn)品生命周期中最宏觀的指導(dǎo)性文件。市場分析報(bào)告應(yīng)體現(xiàn)新產(chǎn)品的商業(yè)價(jià)值以及投放市場的預(yù)期回報(bào)。這一步需要高層或創(chuàng)始人對整體市場有深入把控。對于新產(chǎn)品和已有產(chǎn)品的上新模塊功能，分析難度和重點(diǎn)有所不同。新產(chǎn)品的分析需要更全面的考慮行業(yè)、用戶等因素。

2. 產(chǎn)品定位

產(chǎn)品定位聽起來可能很抽象，但其實(shí)至關(guān)重要。它涉及到產(chǎn)品的主要功能、目標(biāo)用戶群以及解決的問題。例如，微信的產(chǎn)品定位是社交，而ins的產(chǎn)品定位是照片分享生活。明確的產(chǎn)品定位有助于確定目標(biāo)用戶年齡段和產(chǎn)品的核心功能。

3. 需求階段

在確定了市場方向后，需要找到該方向上的具體需求缺口。這也是UI設(shè)計(jì)與其他研發(fā)環(huán)節(jié)緊密合作的關(guān)鍵階段。在需求環(huán)節(jié)，還需要關(guān)注直接和間接競爭對手，明確哪些需求是急需解決的痛點(diǎn)。只有解決了這些核心問題，產(chǎn)品才能在市場上脫穎而出。

第一章：競品分析報(bào)告

在產(chǎn)品開發(fā)過程中，PM通常會(huì)輸出一份競品分析報(bào)告，詳細(xì)羅列競品的優(yōu)缺點(diǎn)，并通過SWOT分析進(jìn)行深入探討。這份報(bào)告是產(chǎn)品發(fā)展的重要參考，幫助團(tuán)隊(duì)明確自身產(chǎn)品的定位和市場策略。

第二章：產(chǎn)品設(shè)計(jì)環(huán)節(jié)

產(chǎn)品設(shè)計(jì)是與UI緊密相關(guān)的環(huán)節(jié)，PM在這一階段主要負(fù)責(zé)繪制原型和編寫文檔。雖然這是每個(gè)PM都熟悉的工作，但真正能夠做出優(yōu)秀產(chǎn)品的PM并不多。原型圖的質(zhì)量參差不齊，文檔描述也常常出現(xiàn)遺漏。在UI設(shè)計(jì)中，PM還需要能夠識(shí)別并吸收競品的優(yōu)點(diǎn)。設(shè)計(jì)完成后，團(tuán)隊(duì)會(huì)進(jìn)行內(nèi)部評審，確認(rèn)無誤后才會(huì)交給UI設(shè)計(jì)師。

第三章：產(chǎn)品規(guī)劃與目標(biāo)

在產(chǎn)品設(shè)計(jì)過程中，PM需要明確產(chǎn)品規(guī)劃的目標(biāo)，即產(chǎn)品價(jià)值。每個(gè)階段的目標(biāo)都應(yīng)該明確，所有的決策和行為都需要圍繞這些目標(biāo)進(jìn)行。最終，團(tuán)隊(duì)需要通過數(shù)據(jù)等方式來考核是否達(dá)到了目標(biāo)，解決了一些問題。產(chǎn)品規(guī)劃必須避免空洞、無法執(zhí)行的情況，否則會(huì)影響產(chǎn)品的生命周期。

第四章：需求評審

當(dāng)產(chǎn)品需求確認(rèn)后，會(huì)進(jìn)行需求評審。這一階段由PM、UE、UI、RD、FE、QA等職能人員共同參與。PM需要闡述需求文檔，研發(fā)團(tuán)隊(duì)會(huì)提出一些風(fēng)險(xiǎn)和問題。評審結(jié)束后，研發(fā)部門會(huì)根據(jù)討論結(jié)果進(jìn)行排期。

第五章：UI設(shè)計(jì)師的角色與工作流程

UI設(shè)計(jì)師在項(xiàng)目中扮演著重要角色。在項(xiàng)目開始階段，設(shè)計(jì)師應(yīng)先了解產(chǎn)品的意圖和目的，走查整個(gè)產(chǎn)品線，并進(jìn)行競品分析。在設(shè)計(jì)過程中，設(shè)計(jì)師需要按照產(chǎn)品的整體調(diào)性進(jìn)行視覺設(shè)計(jì)，遵循設(shè)計(jì)規(guī)范。設(shè)計(jì)完成后，需要進(jìn)行時(shí)間預(yù)估并給出設(shè)計(jì)排期。在設(shè)計(jì)過程中，設(shè)計(jì)師還需要注意UI規(guī)范的執(zhí)行，如圖標(biāo)、字體、間距、顏色等。設(shè)計(jì)稿完成后，需要進(jìn)行視覺還原的走查聯(lián)調(diào)階段，確保開發(fā)還原度達(dá)到要求。

1. 規(guī)范審查初體驗(yàn)

當(dāng)我們深入探究字體、字號(hào)、字重、顏色、間距、icon、邊距等設(shè)計(jì)細(xì)節(jié)時(shí)，不難發(fā)現(xiàn)開發(fā)實(shí)現(xiàn)中的細(xì)微不足。走查聯(lián)調(diào)達(dá)到約95%的完成度時(shí)，產(chǎn)品基本上就可以宣告合格了。這一環(huán)節(jié)，我們?nèi)缤?xì)心的工匠，對每一處細(xì)節(jié)都進(jìn)行嚴(yán)格的審查。

2. 走查聯(lián)調(diào)的實(shí)踐之路

走查聯(lián)調(diào)的流程中，我們會(huì)動(dòng)用多部不同品牌的測試手機(jī)進(jìn)行全方位檢測。因?yàn)橐徊渴謾C(jī)表現(xiàn)良好的功能，在另一部手機(jī)上或許會(huì)出現(xiàn)微妙的誤差，比如劉海屏的兼容適配問題，或是針對@3x屏幕的適配挑戰(zhàn)。我們在測試手機(jī)上截取各個(gè)界面，細(xì)致入微地標(biāo)注問題所在，并將UI圖貼給開發(fā)團(tuán)隊(duì)作為參考。這樣，開發(fā)團(tuán)隊(duì)的工作方向就會(huì)變得更加明確。如果聯(lián)調(diào)一次后仍有瑕疵，我們可以進(jìn)行二次、三次甚至更多次的聯(lián)調(diào)，直到開發(fā)完成度達(dá)到90%，我們再親赴開發(fā)現(xiàn)場，親手調(diào)整細(xì)節(jié)問題，直至產(chǎn)品完美呈現(xiàn)。

3. QA測試環(huán)節(jié)揭秘

對于大多數(shù)設(shè)計(jì)師而言，QA測試環(huán)節(jié)的主要職責(zé)就是找出bug。確實(shí)，bug是阻礙產(chǎn)品上線的最大障礙，必須確保解決所有bug后才能上線項(xiàng)目。實(shí)際上，QA的核心任務(wù)是檢查研發(fā)實(shí)現(xiàn)的功能與產(chǎn)品、UI、交互設(shè)計(jì)是否一致。在這一環(huán)節(jié)中，我們還要尋找異常情況并進(jìn)行優(yōu)化，把控項(xiàng)目的質(zhì)量，類似于風(fēng)險(xiǎn)管理。值得一提的是，正式上線前，產(chǎn)品會(huì)先部署到tips環(huán)境進(jìn)行測試。這是因?yàn)闇y試環(huán)境的數(shù)據(jù)可能與線上環(huán)境存在差異，為了確保產(chǎn)品的穩(wěn)定性和質(zhì)量，需要進(jìn)行額外的tips測試。

4. 產(chǎn)品驗(yàn)收環(huán)節(jié)的關(guān)鍵性

在產(chǎn)品從0到1的旅程中，產(chǎn)品驗(yàn)收環(huán)節(jié)至關(guān)重要。這一環(huán)節(jié)可能會(huì)經(jīng)歷反復(fù)的修改，但最終目標(biāo)是產(chǎn)品上線。產(chǎn)品驗(yàn)收不僅是技術(shù)層面的驗(yàn)收，更重要的是從產(chǎn)品角度驗(yàn)收開發(fā)是否滿足了產(chǎn)品需求。這個(gè)環(huán)節(jié)的側(cè)重點(diǎn)在于業(yè)務(wù)邏輯，對需求負(fù)責(zé)。

5. 綜合驗(yàn)收與上線準(zhǔn)備

在產(chǎn)品上線前，必須通過測試、UI驗(yàn)收和產(chǎn)品驗(yàn)收等關(guān)卡，這是產(chǎn)品質(zhì)量控制的必要手段。只有經(jīng)過嚴(yán)格的質(zhì)量把關(guān)，產(chǎn)品才能順利上線并贏得用戶的青睞。最終上線的產(chǎn)品必須是一個(gè)經(jīng)過千錘百煉、精雕細(xì)琢的杰作。因此產(chǎn)品驗(yàn)收的最終目的是確保產(chǎn)品的質(zhì)量和用戶體驗(yàn)的滿意度。在這個(gè)過程中我們要對每一個(gè)細(xì)節(jié)進(jìn)行仔細(xì)的檢查和評估以確保產(chǎn)品的質(zhì)量和用戶體驗(yàn)達(dá)到最佳狀態(tài)。同時(shí)我們也要注重團(tuán)隊(duì)協(xié)作和溝通以確保整個(gè)過程的順利進(jìn)行并按時(shí)交付高質(zhì)量的產(chǎn)品給用戶帶來更好的體驗(yàn)和價(jià)值。