策劃007-App界面交互設(shè)計規(guī)范詳解

一、前言

在完成了上篇《策劃006-APP界面設(shè)計風(fēng)格》的確定之后，接下來的工作并非立刻交付設(shè)計師進(jìn)行細(xì)節(jié)設(shè)計。在這之前，需要產(chǎn)品經(jīng)理（兼交互設(shè)計）與設(shè)計師、安卓前端開發(fā)和ios前端開發(fā)人員共同商議，確定一套統(tǒng)一的APP界面設(shè)計規(guī)范。

二、APP設(shè)計規(guī)范的重要性

APP設(shè)計規(guī)范是對APP界面進(jìn)行的風(fēng)格統(tǒng)一，涵蓋了界面元素的樣式、顏色和大小的統(tǒng)一規(guī)范和使用原則。約定的設(shè)計規(guī)范能夠減少產(chǎn)品、設(shè)計、前端之間的溝通成本，使界面設(shè)計更為整潔、統(tǒng)一，避免界面元素的重復(fù)設(shè)計，并減少設(shè)計素材，控制安裝包的大小。

三、設(shè)計規(guī)范的詳細(xì)內(nèi)容

1. 界面布局和背景色：對安卓和ios平臺的界面布局進(jìn)行統(tǒng)一規(guī)劃，建議在設(shè)計資源緊張的情況下，考慮使用同一套設(shè)計稿，并根據(jù)不同平臺的需求進(jìn)行微調(diào)。

2. 字體顏色與大?。褐贫?biāo)準(zhǔn)字規(guī)范，包括重要、一般、弱等類別，與標(biāo)準(zhǔn)色相結(jié)合，突出重要信息，弱化次要信息。

3. 界面元素間距：間距設(shè)計需考慮不同屏幕分辨率的適配性，可以通過等比放大縮小間距或固定某些界面元素的間距來解決。

4. 彈層、loading、圖標(biāo)和按鈕：進(jìn)行統(tǒng)一的梳理和規(guī)范，確保界面元素的一致性和用戶體驗的流暢性。

四、設(shè)計工具與輸出規(guī)范

推薦使用Mac矢量設(shè)計工具“Sketch”進(jìn)行設(shè)計，以ios平臺的iPhone 5尺寸（6401136px）作為標(biāo)準(zhǔn)尺寸進(jìn)行設(shè)計。設(shè)計完成后，可根據(jù)不同平臺的需求進(jìn)行微調(diào)，并導(dǎo)出適用安卓和ios尺寸的稿子。輸出規(guī)范包括：

1. 安卓（7201280px）：界面預(yù)覽圖、界面坐標(biāo)圖、標(biāo)準(zhǔn)界面的圖標(biāo)png文件。

2. IOS（6401136px）：界面預(yù)覽圖、界面坐標(biāo)圖、1-3倍圖矢量圖標(biāo)pdf文件。

其中，界面坐標(biāo)圖需在設(shè)計已定稿的界面預(yù)覽圖上標(biāo)注界面元素的間距、文字的顏色、文字的字號大小、圖標(biāo)的尺寸、按鈕不同狀態(tài)顏色以及按鈕的尺寸等。

五、標(biāo)準(zhǔn)色與標(biāo)準(zhǔn)字的應(yīng)用

標(biāo)準(zhǔn)色分為重要、一般、弱三個層次。重要顏色中一般不超過3種，用于特別需要強調(diào)和突出的文字、按鈕和icon；一般顏色用于普通級信息、引導(dǎo)詞；較弱顏色則用于背景色和不需要顯眼的邊角信息。標(biāo)準(zhǔn)字的規(guī)范同樣分為重要、一般、弱，主要規(guī)范標(biāo)準(zhǔn)字的大小，并與標(biāo)準(zhǔn)色結(jié)合，突出重要信息，弱化次要信息。良好的排版方式和標(biāo)準(zhǔn)字的應(yīng)用能夠提升用戶體驗，減少用戶使用APP時的疲勞感。

APP界面要給人簡潔整齊、條理清晰的感覺，這離不開界面元素的排版和間距設(shè)計。在設(shè)計過程中，還需注意考慮不同屏幕分辨率的適配性，以確保在各種設(shè)備上都能提供良好的用戶體驗。 五、彈層規(guī)范設(shè)計

彈層交互設(shè)計差異

彈層作為移動應(yīng)用中的關(guān)鍵交互元素，其設(shè)計必須考慮到不同平臺的使用習(xí)慣。對于iOS系統(tǒng)，操作彈層往往從底部彈出，體現(xiàn)了系統(tǒng)的操作邏輯和用戶體驗；而對于安卓系統(tǒng)，彈層更傾向于直接顯示在頁面中央，強調(diào)操作的便捷性。這種交互差異在設(shè)計時必須遵循各自平臺的設(shè)計原則和要求。根據(jù)彈層的不同功能，也需要設(shè)計不同的樣式。如提示性彈層可以采用弱提示方式，如應(yīng)用系統(tǒng)的token飄字提示；而對于需要強引導(dǎo)的操作彈層，則需要在右上角提供關(guān)閉操作或點擊非彈層區(qū)域進(jìn)行關(guān)閉。這樣的設(shè)計確保了用戶在不同情境下都能獲得清晰明確的操作指引。

頁面加載動畫的重要性

頁面加載動畫是APP界面中不可或缺的元素。一個精心設(shè)計的加載動畫不僅可以增加用戶的等待體驗，還能減少用戶在功能響應(yīng)過程中的焦慮感。除了常見的菊花加載動畫外，我們還可以考慮使用NPC元素、品牌logo等設(shè)計元素來豐富加載動畫的形式，使APP更加生動和活潑。這些元素的應(yīng)用不僅提升了用戶體驗，還加強了APP的品牌形象。

APP開發(fā)具體流程及其相關(guān)考慮

圖標(biāo)與按鈕的設(shè)計規(guī)范

在APP設(shè)計中，圖標(biāo)和按鈕的設(shè)計同樣至關(guān)重要。圖標(biāo)的大小、文件格式需要根據(jù)不同的平臺要求進(jìn)行設(shè)計，如安卓需要7201280px標(biāo)準(zhǔn)頁面的png圖標(biāo)格式，而iOS則需要多種尺寸的pdf文件圖標(biāo)。圖標(biāo)還需要根據(jù)不同的功能展示不同的狀態(tài)，如常態(tài)、選中態(tài)、點擊態(tài)等。按鈕的設(shè)計也需要根據(jù)功能的不同和場景的需要進(jìn)行差異化設(shè)計，包括樣式、顏色和尺寸等。不同手機平臺的按鈕尺寸也需要有所區(qū)別。這些設(shè)計規(guī)范都需要設(shè)計師、前端開發(fā)者與產(chǎn)品經(jīng)理共同制定并嚴(yán)格遵守。

頁面加載失敗與空頁面的設(shè)計規(guī)范

當(dāng)頁面加載失敗或頁面為空時，為了提供更好的用戶體驗，設(shè)計規(guī)范中需要統(tǒng)一考慮NPC（非玩家角色）元素、文案和按鈕的展示。這些元素需要根據(jù)不同的場景進(jìn)行差異化設(shè)計，確保用戶在不同情境下都能獲得清晰的操作指引和反饋。設(shè)計規(guī)范還需要涵蓋其他方面的設(shè)計要素，如文案風(fēng)格、布局等。這些規(guī)范不僅有助于提升用戶體驗，還能提高開發(fā)效率和質(zhì)量。設(shè)計規(guī)范應(yīng)由設(shè)計團(tuán)隊梳理并與前端開發(fā)者、產(chǎn)品經(jīng)理達(dá)成共識后嚴(yán)格執(zhí)行。在實際開發(fā)過程中遇到不符合規(guī)范的情況應(yīng)及時調(diào)整并更新規(guī)范文檔以適應(yīng)實際需求。

APP開發(fā)流程及費用概述

APP開發(fā)流程涉及到多個環(huán)節(jié)如需求調(diào)研、設(shè)計、開發(fā)、測試等階段。在費用方面考慮到APP開發(fā)的款式（固定款或定制款）不同價格也會有所差異。固定款A(yù)PP采用直接套用模板的方式開發(fā)時間短（約2~3天完成）費用相對較低主要適用于一些功能簡單、需求明確的應(yīng)用場景；而定制款A(yù)PP則根據(jù)企業(yè)的具體需求和設(shè)計定制開發(fā)功能較為豐富價格也相對較高需要多個工種的協(xié)同完成大型或功能復(fù)雜的APP項目可能需要數(shù)十人的團(tuán)隊進(jìn)行開發(fā)。因此企業(yè)在選擇APP開發(fā)方式時需綜合考慮自身需求和預(yù)算以做出合理的決策。同時產(chǎn)品經(jīng)理在整個開發(fā)過程中扮演著橋梁的角色需要積極主動組織設(shè)計師和前端開發(fā)者共同制定設(shè)計規(guī)范以確保開發(fā)出的產(chǎn)品更符合實際需求并達(dá)到最佳的用戶體驗效果。定制款A(yù)PP開發(fā)的時間與成本深度解析

====================

一、開發(fā)時間與開發(fā)價格的關(guān)聯(lián)

定制款A(yù)PP的開發(fā)時間與開發(fā)價格是緊密相關(guān)的。一般而言，開發(fā)時間較長，可能需要兩三個月甚至更長時間才能完成，相應(yīng)的開發(fā)費用也會較高，大概在幾萬甚至十幾萬不等。企業(yè)在考慮開發(fā)手機APP時，必須明確APP的詳細(xì)需求和功能，以便APP開發(fā)公司能夠為其提供一個合理的報價。

二、不同手機APP平臺的制作成本差異

目前市面上流行的手機APP制作平臺主要分為安卓系統(tǒng)（Android）和蘋果系統(tǒng)（IOS）。由于蘋果公司對平臺有一定的封閉性，并且手機APP開發(fā)語言O(shè)bjective-C的難度較大，制作蘋果系統(tǒng)的手機APP軟件費用通常要比安卓平臺的費用高一些。

三、APP制作成本中包含的人員工資

開發(fā)一款A(yù)PP通常需要產(chǎn)品經(jīng)理、客戶端工程師、后端工程師和UI設(shè)計師的參與。這些人員的工資是包含在APP制作成本中的。這些工作人員的月薪總和可能會超過4、5萬元。企業(yè)在考慮APP開發(fā)成本時，必須充分考慮人員成本。

四、APP開發(fā)公司所在地的影響

同樣實力的APP開發(fā)公司，在不同城市也會導(dǎo)致APP的成本費用有所差異。例如，在北京、深圳和上海等地的開發(fā)公司，由于開發(fā)人員薪資和其他支出相對較高，因此其開發(fā)成本費用也會較高。

前端與后端開發(fā)的差異解析

前端和后端開發(fā)在展示方式和技術(shù)應(yīng)用上存在明顯區(qū)別。前端開發(fā)主要創(chuàng)建Web頁面或app等前端界面，呈現(xiàn)給用戶。這一過程涉及HTML、CSS、JavaScript、jquery、Bootstrap、Node.js、AngularJs等技術(shù)。隨著互聯(lián)網(wǎng)技術(shù)發(fā)展，現(xiàn)代網(wǎng)頁更加美觀，交互效果顯著，功能更加強大。

后端開發(fā)則以java為例，主要用到Struts、spring、springmvc、Hibernate等技術(shù)和Http協(xié)議。Servlet在Tomcat服務(wù)器上的運行等技術(shù)也常被應(yīng)用。前端與后端開發(fā)各自扮演著不同的角色，共同構(gòu)成了完整的互聯(lián)網(wǎng)產(chǎn)品開發(fā)過程。

企業(yè)在考慮定制款A(yù)PP的開發(fā)時，需要全面考慮開發(fā)時間、平臺選擇、人員成本、公司所在地以及前后端開發(fā)的差異等因素。只有充分了解和考慮這些因素，才能確保企業(yè)在開發(fā)過程中避免不必要的困擾，順利實現(xiàn)APP的開發(fā)與上線。