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

一、前言

在完成了上篇《策劃006-APP界面設(shè)計(jì)風(fēng)格》的確定之后，接下來的工作并非立刻交付設(shè)計(jì)師進(jìn)行細(xì)節(jié)設(shè)計(jì)。在這之前，需要拉上設(shè)計(jì)師、安卓前端開發(fā)和iOS前端開發(fā)團(tuán)隊(duì)，共同商議并確定APP的界面交互設(shè)計(jì)規(guī)范。

二、什么是APP設(shè)計(jì)規(guī)范

APP設(shè)計(jì)規(guī)范旨在統(tǒng)一APP界面風(fēng)格，對(duì)界面元素的樣式、顏色、大小等設(shè)定統(tǒng)一的規(guī)范和使用原則。與設(shè)計(jì)、前端團(tuán)隊(duì)約定好統(tǒng)一的設(shè)計(jì)規(guī)范至關(guān)重要。這有助于減少產(chǎn)品、設(shè)計(jì)、前端之間的溝通成本，使界面設(shè)計(jì)更為整潔、統(tǒng)一，避免界面元素的重復(fù)設(shè)計(jì)，并減少設(shè)計(jì)素材，控制安裝包的大小。

三、APP設(shè)計(jì)規(guī)范的主要內(nèi)容

設(shè)計(jì)規(guī)范主要涵蓋界面布局、背景色、字體顏色大小、界面元素間距、彈層、loading、圖標(biāo)、按鈕常態(tài)及點(diǎn)擊態(tài)等方面的統(tǒng)一梳理和規(guī)范。

四、交互規(guī)范的實(shí)施建議

在頁面布局和交互規(guī)范上，建議安卓和iOS盡量統(tǒng)一，以節(jié)約設(shè)計(jì)資源。對(duì)于中小型項(xiàng)目來說，如果設(shè)計(jì)資源緊張，可以考慮使用同一套設(shè)計(jì)稿，并根據(jù)需要微調(diào)，以適應(yīng)安卓和iOS不同的尺寸要求。

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

推薦使用Mac矢量設(shè)計(jì)工具“Sketch”進(jìn)行設(shè)計(jì)。以iOS平臺(tái)的iPhone5的尺寸（6401136px）作為標(biāo)準(zhǔn)尺寸進(jìn)行設(shè)計(jì)，并據(jù)此進(jìn)行相應(yīng)調(diào)整以輸出適用于安卓和iOS的稿子。設(shè)計(jì)輸出規(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)圖是指在已定稿的界面預(yù)覽圖上標(biāo)注界面元素的間距、文字顏色、字號(hào)大小、圖標(biāo)尺寸等信息。這對(duì)于后續(xù)的界面開發(fā)非常有幫助。此外還需要制定標(biāo)準(zhǔn)色規(guī)范和標(biāo)準(zhǔn)字規(guī)范。標(biāo)準(zhǔn)色分為重要、一般和弱三種類型，與標(biāo)準(zhǔn)字一起，共同突出APP的重要信息和弱化次要信息。而文字排版和間距設(shè)計(jì)也是關(guān)鍵要素，需要確保APP界面的簡潔整齊和條理清晰感。在進(jìn)行設(shè)計(jì)時(shí)，還需考慮不同屏幕分辨率的適配性，采取相應(yīng)措施確保良好的用戶體驗(yàn)。設(shè)計(jì)規(guī)范指南

一、彈層交互規(guī)范

彈層作為APP界面中的重要交互元素，其設(shè)計(jì)應(yīng)遵循不同平臺(tái)的規(guī)范要求。對(duì)于安卓和iOS系統(tǒng)，彈層的展示方式和觸發(fā)方式存在顯著差異。安卓系統(tǒng)的彈層通常直接顯示在頁面中央，強(qiáng)調(diào)直接的操作反饋；而iOS系統(tǒng)的彈層則更多從底部彈出，用戶體驗(yàn)更為流暢。

在設(shè)計(jì)彈層時(shí)，需要根據(jù)其不同的功能設(shè)計(jì)不同的樣式。如操作性彈層，可以通過右上角的“更多”按鈕觸發(fā)；提示性彈層則可根據(jù)提示的強(qiáng)弱，采用弱提示的token飄字或強(qiáng)提示的取消、確定模塊彈層；對(duì)于需要更強(qiáng)引導(dǎo)的操作，彈層右上角應(yīng)提供關(guān)閉操作或可點(diǎn)擊非彈層區(qū)域進(jìn)行關(guān)閉。

二、頁面Loading動(dòng)畫與圖標(biāo)規(guī)范

Loading動(dòng)畫是APP界面中不可或缺的元素。設(shè)計(jì)加載動(dòng)畫時(shí)，除了常規(guī)的菊花樣式外，還可以考慮使用NPC元素，使APP界面更加生動(dòng)活潑。使用品牌logo或口號(hào)作為動(dòng)畫元素，能夠強(qiáng)化品牌印象。圖標(biāo)的設(shè)計(jì)也需要根據(jù)不同平臺(tái)的需求進(jìn)行規(guī)范，如安卓和iOS對(duì)圖標(biāo)大小、文件格式的要求不同，設(shè)計(jì)時(shí)需特別注意。圖標(biāo)還應(yīng)根據(jù)不同的功能狀態(tài)，如常態(tài)、選中態(tài)、點(diǎn)擊態(tài)等，進(jìn)行相應(yīng)的設(shè)計(jì)。

三、按鈕規(guī)范

按鈕作為界面中的基礎(chǔ)元素，其設(shè)計(jì)也需要遵循一定的規(guī)范。按鈕的狀態(tài)分為常態(tài)、點(diǎn)擊態(tài)和不可點(diǎn)擊態(tài)。設(shè)計(jì)時(shí)，應(yīng)根據(jù)不同的功能和場(chǎng)景需求，為按鈕設(shè)計(jì)不同的樣式和顏色。按鈕的尺寸也要根據(jù)手機(jī)平臺(tái)的差異進(jìn)行設(shè)計(jì)，確保在不同平臺(tái)上的顯示效果一致。

四、頁面加載失敗與空頁面規(guī)范

當(dāng)頁面加載失敗或頁面為空時(shí)，可以通過NPC、文案和按鈕的統(tǒng)一規(guī)范來提供友好的反饋。設(shè)計(jì)時(shí)，應(yīng)根據(jù)不同的場(chǎng)景選擇合適的NPC形象和文案內(nèi)容，以提供更好的用戶體驗(yàn)。

五、App版本號(hào)規(guī)范

在APP開發(fā)中，版本號(hào)的規(guī)范同樣重要。對(duì)于Android系統(tǒng)，我們有versionCode和versionName兩個(gè)版本信息可以在Module的build.gradle文件中配置。每次迭代新版本時(shí)，都需要確定版本號(hào)。版本號(hào)的設(shè)定應(yīng)遵循一定的規(guī)則，例如主版本號(hào)、次版本號(hào)和修訂號(hào)的組合方式。產(chǎn)品、設(shè)計(jì)和開發(fā)團(tuán)隊(duì)?wèi)?yīng)達(dá)成共識(shí)，嚴(yán)格遵守版本號(hào)規(guī)范，以確保版本管理的有序性和準(zhǔn)確性。在決定下一個(gè)版本時(shí)，產(chǎn)品團(tuán)隊(duì)?wèi)?yīng)與開發(fā)團(tuán)隊(duì)充分溝通，確保版本號(hào)的合理性。為了避免每次手動(dòng)修改版本號(hào)帶來的不便，可以建立自動(dòng)化工具或方法，確保每次打包發(fā)布時(shí)版本號(hào)自動(dòng)遞增。

設(shè)計(jì)規(guī)范是確保APP界面用戶體驗(yàn)一致性和良好性的關(guān)鍵。從彈層交互、頁面Loading動(dòng)畫、圖標(biāo)、按鈕到頁面加載失敗和空頁面的規(guī)范設(shè)計(jì)，每個(gè)環(huán)節(jié)都需要團(tuán)隊(duì)之間的緊密合作和共識(shí)。版本號(hào)的規(guī)范管理也是確保APP迭代有序進(jìn)行的重要一環(huán)。只有遵循這些規(guī)范，才能確保APP界面的美觀、易用和高效。版本號(hào)的規(guī)范與App原型設(shè)計(jì)的重要性

一、版本號(hào)格式的多樣性及其中蘊(yùn)意

從眾多主流App的觀察來看，versionName的格式多數(shù)為3位和4位。每一位的號(hào)碼背后都有其特定的含義。這種格式多樣化表明，不同公司對(duì)版本號(hào)的控制和規(guī)范有所出入。有的主版本號(hào)被壓得很低，而有的則已經(jīng)到達(dá)10。盡管存在這樣的差異，但大多數(shù)App都遵循了基本的規(guī)則。我們可以在這些規(guī)則的基礎(chǔ)上，結(jié)合自身的需求，制定合適的版本號(hào)策略。值得注意的是，我們主要依據(jù)兩個(gè)維度來考慮版本號(hào)的含義，其中維度1允許在需求出來之前提前確定版本號(hào)，而維度2則需要在明確需求后才能確定版本號(hào)。經(jīng)過與產(chǎn)品的深入討論，我們選擇了維度1的定義方式來確立我們的版本號(hào)。

二、App原型設(shè)計(jì)規(guī)范：界面尺寸是關(guān)鍵

在App原型設(shè)計(jì)過程中，界面尺寸是不可或缺的關(guān)鍵因素之一。為了兼顧iOS和Android平臺(tái)，我們通常設(shè)計(jì)一套原型，并根據(jù)主流設(shè)備調(diào)整尺寸。對(duì)于iOS平臺(tái)，原型設(shè)計(jì)主要基于7501344尺寸（2倍率），轉(zhuǎn)換后得到的手機(jī)原型尺寸為375x667。而對(duì)于專門的Android應(yīng)用，原型尺寸則調(diào)整為360640。

在遵循界面尺寸規(guī)范的字體大小和樣式的選擇也不容忽視。合適的字體大小和樣式能確保文本清晰，并適應(yīng)不同屏幕。iOS系統(tǒng)推薦使用蘋方/PingFang SC和San Francisco Pro字體，而Android 5.x以上版本則推薦使用思源黑體/Noto Sans Han。對(duì)于導(dǎo)航欄文字大小，通常在16px至20px之間。圖標(biāo)的設(shè)計(jì)也是關(guān)鍵一環(huán)，每行圖標(biāo)數(shù)量不應(yīng)超過5個(gè)，圖標(biāo)尺寸通常為雙數(shù)，以保證視覺的和諧統(tǒng)一。板塊間距應(yīng)保持在10-15px之間，常見的間距為12px。搜索框的字體大小一般設(shè)定為14px，輸入框大小通常為20-25px。顏色選擇上，文字顏色需確保安全，而導(dǎo)航欄下的提示欄顏色則應(yīng)選擇鮮艷以吸引用戶注意。

三、遵循規(guī)范，確保App設(shè)計(jì)的一致性與用戶體驗(yàn)

在App設(shè)計(jì)中，遵循上述規(guī)范及尺寸標(biāo)準(zhǔn)至關(guān)重要。這不僅有助于確保App設(shè)計(jì)的一致性和高質(zhì)量，還能提升用戶體驗(yàn)。通過規(guī)范的字體、圖標(biāo)、顏色等設(shè)計(jì)元素，用戶可以更加輕松地理解和使用App，從而提高用戶滿意度。在原型設(shè)計(jì)過程中，如有任何疑問或建議，歡迎在評(píng)論區(qū)交流，共同提升App原型設(shè)計(jì)的質(zhì)量。一個(gè)優(yōu)秀的App設(shè)計(jì)不僅僅是技術(shù)的展現(xiàn)，更是藝術(shù)與工程的完美結(jié)合。讓我們共同努力，創(chuàng)造出更加出色的App作品。

四、版本號(hào)的進(jìn)一步探討

在軟件開發(fā)生命周期中，版本號(hào)的定義與管理至關(guān)重要。它不僅反映了軟件的更新迭代歷史，還為用戶和開發(fā)者提供了溝通橋梁。在實(shí)際操作中，我們應(yīng)深入理解并靈活應(yīng)用版本號(hào)規(guī)則，以確保軟件開發(fā)的順利進(jìn)行。

無論是版本號(hào)的規(guī)范管理還是App原型設(shè)計(jì)的細(xì)致入微，都是打造優(yōu)秀App不可或缺的一環(huán)。希望能為大家在軟件開發(fā)和設(shè)計(jì)過程中提供有益的參考與啟示。