二、切圖命名規(guī)則
在APP開發(fā)過程中,隨著項目進展,會產(chǎn)生大量的切圖文件。為了保障團隊協(xié)作的效率以及開發(fā)的順利進行,制定一套清晰、有序的切圖命名規(guī)則顯得尤為重要。
我們的切圖命名規(guī)則遵循以下結(jié)構(gòu):“(界面或功能)+(控件名)+(狀態(tài))+(補充描述)”。這樣的結(jié)構(gòu)既方便設計者自己查找和分類管理,也能讓開發(fā)者快速理解切圖的用途和狀態(tài)。
1. 界面或功能:這部分用于標識這張切圖所屬的主要界面或功能,例如“首頁”、“用戶信息”、“購物車”等。這有助于我們快速定位到特定的功能模塊。
2. 控件名:這部分是對界面中的具體控件的命名,如“按鈕”、“輸入框”、“列表”等。通過控件名,我們可以清楚地知道切圖所代表的控件類型。
3. 狀態(tài):指的是控件的不同狀態(tài),如“正常”、“點擊”、“高亮”、“禁用”等。狀態(tài)的標識有助于我們了解控件在不同場景下的表現(xiàn)。
4. 補充描述:這是一個可選的部分,用于對前面三部分進行補充說明,或者標識一些特殊的情況。例如,在某些特殊的設計需求下,我們可以在補充描述中注明。
例如,一張表示首頁搜索按鈕正常狀態(tài)的切圖,其命名可能是“首頁_搜索按鈕_正常_無”。這樣的命名方式既清晰又直觀,極大地提高了團隊協(xié)作的效率。
需要注意的是,命名規(guī)則的執(zhí)行需要整個團隊的配合和遵守。只有大家都遵循同樣的規(guī)則,才能發(fā)揮出命名規(guī)則的最大效用。定期的團隊培訓和規(guī)則回顧是非常重要的。
除了遵循上述命名規(guī)則,還可以使用一些工具來提高切圖管理的效率,如藍湖等插件。這些工具可以幫助我們更好地進行切圖的標注、管理和分享,進一步提高團隊的工作效率。
切圖命名規(guī)則是APP開發(fā)過程中不可或缺的一部分。通過制定和執(zhí)行清晰的命名規(guī)則,我們可以更好地進行項目管理,提高團隊協(xié)作的效率,從而開發(fā)出更優(yōu)質(zhì)、更高效的APP。
三、UI設計中的切圖標注規(guī)范
在UI設計過程中,切圖標注是非常重要的一環(huán)。為了確保設計的準確實施以及開發(fā)工作的順利進行,我們需要制定一套清晰、準確的切圖標注規(guī)范。
所有的切圖標注必須準確、詳盡。設計師需要清晰地標注出每個界面的尺寸、顏色、布局、文字內(nèi)容等信息。對于特殊的設計元素,如按鈕、圖標、輸入框等,還需要特別注明其狀態(tài)、交互效果等。
標注的格式要統(tǒng)一。團隊需要確定一種或幾種常用的標注格式,如PSD、Sketch、AXURE等。這樣可以確保團隊成員都能方便地查看和理解標注文件。
為了提高開發(fā)效率,我們還需要為開發(fā)者提供一些便捷的工具或插件。例如,自動標注工具可以幫助開發(fā)者快速生成開發(fā)所需的代碼和文件;產(chǎn)品文檔共享工具可以讓開發(fā)者和設計師實時溝通和交流。
標注完成后,需要進行仔細的審查。確保所有的標注都準確無誤,沒有遺漏任何重要的信息。如果發(fā)現(xiàn)錯誤或遺漏,需要及時修正并重新確認。
切圖標注規(guī)范是UI設計中不可或缺的一部分。通過制定和執(zhí)行清晰的標注規(guī)范,我們可以確保設計的準確實施,提高開發(fā)效率,從而打造出更優(yōu)秀的APP產(chǎn)品。
四、UI設計與開發(fā)的銜接優(yōu)化

在APP開發(fā)過程中,UI設計與開發(fā)的銜接是非常關鍵的一環(huán)。為了提高銜接的效率和質(zhì)量,我們需要對UI設計與開發(fā)的交流流程進行優(yōu)化。
建立有效的溝通機制。設計師和開發(fā)者需要定期進行溝通,共同討論設計的進展和遇到的問題。這樣有助于雙方了解彼此的工作進展和難點,從而及時調(diào)整工作方向。
用戶界面設計指南與APP研發(fā)設計流程
一、用戶界面設計命名規(guī)范
在用戶界面設計中,切圖命名至關重要。以下是典型的界面切圖命名方式:
1. 登錄界面命名:
- Login_bg.png(登錄背景)

- Login_logo.png(登錄LOGO)
- Login_input.png(輸入框)
- Login_input_pre.png(輸入框選種狀態(tài))
- Login_btn.png(登錄按鈕)
- Login_btn_pre.png(登錄按鈕選種狀態(tài))等。

二、常見控件命名規(guī)范
控件的命名應簡潔明了,易于理解。常見的控件包括:Icon(圖標)、Img(圖片)、List(列表)等。其他常見的控件包括:Sign(標記)、Menu(菜單)、Bar(欄)、StatusBar(狀態(tài)欄)、NaviBar(導航欄)、TabBar(標簽欄)、ToolBar(工具欄)等。對于特殊功能控件如Switch(切換開關)、Slider(滑動器)、Radio(單選框)、CheckBox(復選框)以及Bg(背景)等,也需要根據(jù)功能進行命名。
三、APP研發(fā)的設計流程
1. 市場分析
市場分析是APP研發(fā)的第一步,商業(yè)分析能體現(xiàn)出產(chǎn)品的商業(yè)價值。通過市場分析,確定行業(yè)前景、產(chǎn)品投放市場的回報以及新產(chǎn)品的商業(yè)價值。對于新產(chǎn)品來說,市場分析尤為重要,因為需要評估市場接受程度、競爭對手情況以及潛在的用戶需求。而已有產(chǎn)品則可以通過積累的數(shù)據(jù)進行更深入的用戶行為分析,為新模塊功能的開發(fā)提供有力支持。

2. 產(chǎn)品定位
產(chǎn)品定位是明確產(chǎn)品的核心功能和目標用戶群體。通過明確產(chǎn)品的功能定位,確定產(chǎn)品的主要用途,例如社交、照片分享等。也要明確產(chǎn)品能解決什么問題以及目標用戶年齡段的分布,以便進行后續(xù)的用戶界面設計和功能開發(fā)。產(chǎn)品定位的準確性直接影響到產(chǎn)品的市場競爭力。
3. 需求階段
在確定了市場方向和產(chǎn)品定位后,進入需求階段。在這一階段,需要明確哪些需求是急需被解決的,同時關注該方向上的直接和間接競爭對手。需求分析是開發(fā)過程中的重要環(huán)節(jié),它直接影響到產(chǎn)品的用戶體驗和市場競爭能力。通過需求分析,我們可以找到產(chǎn)品的痛點,并針對性地進行優(yōu)化和改進。也要關注用戶反饋和市場需求變化,以便及時調(diào)整產(chǎn)品方向和開發(fā)計劃。
第一章:競品分析與報告輸出

在項目管理過程中,PM們常常需要輸出競品分析報告,以梳理競品的優(yōu)劣。這些報告有時采用SWOT分析來深入探究。在這一環(huán)節(jié),PM們挖掘競品的特點,為產(chǎn)品設計環(huán)節(jié)提供有力的依據(jù)。
第二章:產(chǎn)品設計環(huán)節(jié)與UI的緊密關聯(lián)
產(chǎn)品設計是與UI息息相關的核心環(huán)節(jié)。在此階段,PM的主要任務包括繪制原型和編寫文檔。在實際操作中,真正出色的PM并不多見。他們可能會面臨原型繪制粗糙、文檔描述不全等問題,甚至在UI設計中忽略了一些優(yōu)于PM的創(chuàng)意。這一階段需要與UE緊密合作,完成原型交互圖的設計,并進行內(nèi)部評審,確保交互方案的準確性。
第三章:原型交互圖的質(zhì)量與挑戰(zhàn)
在工作中,我們會見到各種各樣的原型交互圖。優(yōu)秀的作品寥寥無幾,大多數(shù)時候面臨的挑戰(zhàn)是原型設計的質(zhì)量。PM們需要在這個環(huán)節(jié)中明確產(chǎn)品規(guī)劃的目標——實現(xiàn)產(chǎn)品價值。每個階段的目標都應明確,以確保所有的決策和行為都圍繞這個目標進行。最終,通過數(shù)據(jù)等方式考核是否達到了預定目標。

第四章:需求評審與團隊協(xié)作
在產(chǎn)品需求確認后,進行需求評審是至關重要的一環(huán)。會議通常由PM主導,UE、UI、RD、FE、QA等職能人員參與。在這一階段,PM需要闡述需求文檔,而研發(fā)通常會對文檔提出最多的問題。通過評審,研發(fā)會對項目進行排期,為產(chǎn)品的進一步開發(fā)奠定基礎。
第五章:UI設計師的角色與職責
UI設計師在項目中的作用不可忽視。在接手項目后,設計師應首先明確產(chǎn)品的意圖和目的,仔細研究整個產(chǎn)品線,并進行競品分析。在設計過程中,設計師需要注意產(chǎn)品調(diào)性的統(tǒng)一,遵循UI規(guī)范。他們應按照@2x的標準進行設計,確保視覺元素的一致性和準確性。設計師還需要負責切圖標注,制定設計排期,并在項目結(jié)束后進行視覺還原的走查聯(lián)調(diào)。這一階段的執(zhí)行對于確保項目的順利進行和最終產(chǎn)品的質(zhì)量至關重要。

1. 初步審查設計規(guī)范
在進行開發(fā)深度聯(lián)調(diào)之前,對字體、字號、字重、顏色、間距、icon、邊距等設計規(guī)范進行初步審查,往往能發(fā)現(xiàn)開發(fā)中的不足之處。這一環(huán)節(jié)是確保后續(xù)工作流程順利進行的基礎。
2. 走查聯(lián)調(diào)流程詳解
走查聯(lián)調(diào)是產(chǎn)品開發(fā)流程中不可或缺的一環(huán)。在這一階段,我們會使用多部不同品牌的測試手機進行界面檢查,因為不同手機可能存在細微的顯示差異。測試手機會將每個界面截圖,并標注問題所在,然后上傳至wiki作為參考。還需特別注意劉海屏和@3x屏的兼容適配問題。若有遺漏或需要進一步調(diào)整,可進行多次聯(lián)調(diào),直至達到滿意效果。
3. QA測試環(huán)節(jié)的重要性

在產(chǎn)品開發(fā)流程中,QA測試環(huán)節(jié)扮演著至關重要的角色。設計師普遍認為測試的主要任務是找出bug,確實如此,bug是阻礙產(chǎn)品上線的最大障礙。QA的主要任務是檢查研發(fā)實現(xiàn)的功能是否與產(chǎn)品、UI、交互設計一致。還需尋找異常情況并進行優(yōu)化,確保項目的質(zhì)量。在正式全量上線前,會先將產(chǎn)品上線至tips環(huán)境進行測試,以確保線上環(huán)境可能出現(xiàn)的問題得以解決。
4. 什么是tips環(huán)境?
Tips環(huán)境是一個專門用于產(chǎn)品測試的環(huán)境。由于測試環(huán)境與線上環(huán)境的數(shù)據(jù)可能存在差異,某些問題在測試環(huán)境中可能無法完全暴露出來,因此需要通過tips環(huán)境進行進一步的測試。Tips環(huán)境與線上環(huán)境共享數(shù)據(jù),以確保產(chǎn)品上線前的穩(wěn)定性和質(zhì)量。
5. 產(chǎn)品驗收環(huán)節(jié)的關鍵作用
在產(chǎn)品從0到1的過程中,產(chǎn)品驗收環(huán)節(jié)至關重要。產(chǎn)品驗收的最終目標是產(chǎn)品上線,但在此之前可能會經(jīng)歷多次修改和調(diào)整。產(chǎn)品驗收不僅需要通過測試、UI驗收,更重要的是從產(chǎn)品的角度驗收開發(fā)是否滿足了產(chǎn)品需求。這一環(huán)節(jié)的側(cè)重點在于業(yè)務邏輯和對需求的滿足程度。
