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

一、前言

在確定了《策劃006-APP界面設(shè)計(jì)風(fēng)格》后，產(chǎn)品經(jīng)理（兼交互設(shè)計(jì)）的工作并未結(jié)束。在啟動(dòng)細(xì)節(jié)設(shè)計(jì)之前，需要與設(shè)計(jì)師、安卓前端開發(fā)和iOS前端開發(fā)共同商議，確定一套統(tǒng)一的設(shè)計(jì)規(guī)范。

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

APP設(shè)計(jì)規(guī)范是對(duì)APP界面的風(fēng)格統(tǒng)一，包括界面元素的樣式、顏色、大小等方面的設(shè)定。與設(shè)計(jì)、前端約定好統(tǒng)一的設(shè)計(jì)規(guī)范，能夠減少溝通成本，使界面設(shè)計(jì)整潔統(tǒng)一，避免界面元素的重復(fù)設(shè)計(jì)，并減少設(shè)計(jì)素材，控制安裝包的大小。

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

1. 界面布局和背景色：對(duì)安卓和iOS的界面布局進(jìn)行統(tǒng)一規(guī)劃，建議盡量統(tǒng)一，以節(jié)省設(shè)計(jì)資源。對(duì)于中小型項(xiàng)目，在資源緊張的情況下，可考慮使用同一設(shè)計(jì)稿，分別進(jìn)行微調(diào)以適應(yīng)不同平臺(tái)尺寸要求。

2. 字體顏色與大小：文字是APP主要信息的表現(xiàn)方式，需要制定標(biāo)準(zhǔn)的設(shè)計(jì)規(guī)范和排版方式。重要信息使用醒目且合適的顏色與字體大小組合來突出。

3. 界面元素間距：間距設(shè)計(jì)要考慮適配不同的屏幕分辨率，可以通過等比放大縮小間距或固定某些元素間距來解決。有時(shí)為了滿足高分辨率設(shè)備的需求，可能需要調(diào)整APP界面的頁面布局。

4. 彈層、loading、圖標(biāo)、按鈕等：這些元素也需要進(jìn)行統(tǒng)一的規(guī)范和設(shè)計(jì)，以保證界面的整潔和用戶體驗(yàn)的一致性。

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

推薦使用Mac矢量設(shè)計(jì)工具“Sketch”進(jìn)行設(shè)計(jì)。以iOS平臺(tái)的iPhone5尺寸（6401136px）作為標(biāo)準(zhǔn)尺寸進(jìn)行設(shè)計(jì)，并可以輸出適用于安卓和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)圖是指在設(shè)計(jì)已定稿的界面預(yù)覽圖上標(biāo)注界面元素的詳細(xì)信息。

五、標(biāo)準(zhǔn)色與標(biāo)準(zhǔn)字規(guī)范

1. 標(biāo)準(zhǔn)色規(guī)范：分為重要、一般、弱三種。重要顏色中一般不超過3種，用于強(qiáng)調(diào)和突出的文字、按鈕和icon等；一般顏色用于普通級(jí)信息；較弱顏色用于背景色和不需要顯眼的邊角信息。

2. 標(biāo)準(zhǔn)字規(guī)范：同樣分為重要、一般、弱三種。主要規(guī)范標(biāo)準(zhǔn)字的大小，并與標(biāo)準(zhǔn)色組合以突出或弱化信息的重要性。

通過統(tǒng)一的APP設(shè)計(jì)規(guī)范，可以確保APP界面的簡潔整齊、條理清晰，并減少溝通成本，提高開發(fā)效率。在與設(shè)計(jì)、前端團(tuán)隊(duì)共同商議確定設(shè)計(jì)規(guī)范后，可以啟動(dòng)細(xì)節(jié)設(shè)計(jì)，為產(chǎn)品的成功打下堅(jiān)實(shí)的基礎(chǔ)。

策劃后續(xù)可依據(jù)此規(guī)范持續(xù)完善。

彈層交互設(shè)計(jì)原則

安卓和iOS平臺(tái)的彈層交互應(yīng)各自遵循其平臺(tái)的設(shè)計(jì)要求。在安卓平臺(tái)上，彈層往往直接在頁面中央顯示操作；而在iOS平臺(tái)上，大多數(shù)操作彈層則從底部彈出。彈層的樣式應(yīng)根據(jù)其不同的功能進(jìn)行設(shè)計(jì)，確保用戶體驗(yàn)的流暢性和直觀性。

彈層可以細(xì)分為操作性彈層、提示性彈層以及強(qiáng)引導(dǎo)彈層等。對(duì)于右上角更多按鈕的觸發(fā)方式，應(yīng)設(shè)計(jì)相應(yīng)的操作性彈層；對(duì)于弱提示性的應(yīng)用系統(tǒng)，可以使用token飄字提示；對(duì)于需要強(qiáng)提示的情況，應(yīng)使用包含取消、確定模塊的彈層；對(duì)于更強(qiáng)提示且彈層需要承載一定操作的情況，右上角應(yīng)提供關(guān)閉操作或者可以通過點(diǎn)擊非彈層區(qū)域來關(guān)閉彈層。

Loading動(dòng)畫與界面設(shè)計(jì)

Loading動(dòng)畫是APP界面中不可或缺的元素。恰當(dāng)?shù)膌oading動(dòng)畫能為用戶帶來明確的反饋，告知功能正在加載，從而減輕用戶在等待過程中的煩躁感。除了常規(guī)的菊花loading動(dòng)畫，還可以考慮使用NPC元素，讓APP界面更加生動(dòng)和活潑。使用帶有l(wèi)ogo和口號(hào)的loading動(dòng)畫有助于強(qiáng)化APP的品牌形象。

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

圖標(biāo)設(shè)計(jì)需根據(jù)不同平臺(tái)的需求，提供不同大小和文件格式。例如，安卓需要png格式的圖標(biāo)，尺寸適應(yīng)7201280px的標(biāo)準(zhǔn)頁面；而iOS則需要不同尺寸的pdf文件格式的圖標(biāo)。圖標(biāo)應(yīng)根據(jù)功能的不同呈現(xiàn)不同的狀態(tài)，如常態(tài)、選中態(tài)、點(diǎn)擊態(tài)等。

按鈕的設(shè)計(jì)同樣需要根據(jù)不同的狀態(tài)和場(chǎng)景進(jìn)行設(shè)計(jì)。按鈕應(yīng)分為常態(tài)、點(diǎn)擊態(tài)和不可點(diǎn)擊態(tài)，并因功能和場(chǎng)景的不同而具有不同的樣式和顏色。按鈕的尺寸也應(yīng)適應(yīng)不同的手機(jī)平臺(tái)，長、中、短尺寸需根據(jù)平臺(tái)特性進(jìn)行調(diào)整。

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

當(dāng)頁面加載失敗或頁面為空時(shí)，可以通過統(tǒng)一的NPC、文案和按鈕設(shè)計(jì)來提供用戶反饋。NPC和文案的內(nèi)容應(yīng)根據(jù)具體的場(chǎng)景進(jìn)行調(diào)整，以確保用戶能夠明確了解當(dāng)前的狀態(tài)。

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

產(chǎn)品迭代與版本號(hào)的確定

在產(chǎn)品進(jìn)行迭代更新時(shí)，版本號(hào)的確定應(yīng)有一定的規(guī)范。在Android系統(tǒng)中，我們有versionCode和versionName兩個(gè)重要的版本號(hào)。這些版本號(hào)應(yīng)在Module的build.gradle文件中進(jìn)行配置。

很多時(shí)候，產(chǎn)品和程序猿之間會(huì)出現(xiàn)關(guān)于版本號(hào)的對(duì)話，如“這個(gè)版本是多少來著？”等。我們需要明確App版本號(hào)的規(guī)范以及每個(gè)數(shù)字位置的含義。版本號(hào)中的數(shù)字應(yīng)按照主版本號(hào)、次版本號(hào)和修訂號(hào)進(jìn)行排列。每當(dāng)進(jìn)行迭代更新時(shí)，應(yīng)根據(jù)實(shí)際情況在相應(yīng)的數(shù)字上加1。為了確保版本的規(guī)范性，產(chǎn)品經(jīng)理應(yīng)積極組織設(shè)計(jì)師和前端開發(fā)人員共同制定設(shè)計(jì)規(guī)范，確保規(guī)范的實(shí)際性和完整性。

探究版本號(hào)命名規(guī)則

隨著移動(dòng)應(yīng)用的普及，我們不難發(fā)現(xiàn)，多數(shù)主流App的versionName格式多為3位或4位數(shù)字。這些數(shù)字背后蘊(yùn)含著怎樣的規(guī)則和含義呢？讓我們來一探究竟。

從實(shí)際觀察中不難發(fā)現(xiàn)，不同公司在版本號(hào)的控制上存在著微妙的差異。有的主版本號(hào)被壓制得很低，而有的則已經(jīng)攀升至10。盡管各有千秋，但大部分應(yīng)用都遵循了一套通行的規(guī)則。這些規(guī)則為我們定義自己的版本號(hào)提供了堅(jiān)實(shí)的基礎(chǔ)。

目前，我們主要從兩個(gè)維度來解讀版本號(hào)的意義。其中，一個(gè)重要的區(qū)別在于，在需求明確之前，一種方式允許我們提前確定版本號(hào)，而另一種則需要在明確需求后才能確定。經(jīng)過與產(chǎn)品團(tuán)隊(duì)的深入討論，我們決定采納第一種方式，以更靈活地應(yīng)對(duì)未來的開發(fā)需求。

此篇文章寫于2018年1月30日晚，地點(diǎn)位于深圳南山區(qū)。次日下午再次進(jìn)行編輯，以確保信息的準(zhǔn)確性。

App原型設(shè)計(jì)規(guī)范詳解

在App原型設(shè)計(jì)過程中，我們需關(guān)注眾多要素，其中界面尺寸尤為關(guān)鍵。為了適配iOS和Android兩大主流平臺(tái)，我們通常設(shè)計(jì)一套原型來覆蓋多種主流設(shè)備尺寸。對(duì)于iOS平臺(tái)，原型設(shè)計(jì)主要基于7501344的尺寸（2倍率），轉(zhuǎn)換后得到的手機(jī)原型尺寸為375x667。而針對(duì)Android應(yīng)用，原型尺寸則調(diào)整為360640。

在界面設(shè)計(jì)的其他尺寸及規(guī)范方面，我們應(yīng)遵循特定的字體大小和樣式，以確保文本清晰并適應(yīng)不同屏幕。iOS系統(tǒng)推薦使用蘋方/PingFang SC和San Francisco Pro字體，而Android 5.x以上版本則推薦使用思源黑體/Noto Sans Han。對(duì)于5.0以下版本的Android，建議使用Droid Sans Fallback。英文和數(shù)字內(nèi)容則采用Roboto字體。字體大小通常采用偶數(shù)設(shè)置，并以16px和12px作為基準(zhǔn)。詳情頁中標(biāo)題與正文的間距設(shè)定為12px、16px和20px，行間距則設(shè)置在1.5至1.6倍之間。導(dǎo)航欄文字大小一般在16px至20px之間。

在導(dǎo)航欄、標(biāo)簽欄和分類入口的設(shè)計(jì)中，需要注意每行圖標(biāo)數(shù)量不超過5個(gè)，圖標(biāo)尺寸通常為雙數(shù)。板塊間距應(yīng)保持在10-15px之間，常見間距為12px。搜索框的字體大小一般設(shè)定為14px，輸入框大小則通常在20-25px之間。顏色選擇上，文字顏色需確保安全，而導(dǎo)航欄下的提示欄顏色則應(yīng)鮮艷突出，大小建議為28px。

遵循以上規(guī)范及尺寸標(biāo)準(zhǔn)，有助于確保App設(shè)計(jì)的一致性和用戶體驗(yàn)。在設(shè)計(jì)和開發(fā)過程中，我們始終歡迎各位提出寶貴的建議和意見，共同提升App原型設(shè)計(jì)的質(zhì)量。讓我們一起努力，創(chuàng)造更出色的移動(dòng)應(yīng)用體驗(yàn)！