移動(dòng)端設(shè)計(jì)規(guī)范及適配規(guī)則-基礎(chǔ)篇

時(shí)間：2023-09-24 16:42:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-24 16:42:02 來源：網(wǎng)站運(yùn)營(yíng)

移動(dòng)端設(shè)計(jì)規(guī)范及適配規(guī)則-基礎(chǔ)篇：

一、APP構(gòu)成及基礎(chǔ)規(guī)范

1.冷啟動(dòng)頁(yè)

開啟APP時(shí)的啟動(dòng)頁(yè)面，一般由logo、slogan、版本號(hào)、產(chǎn)品名、公司名、Copyright等信息簡(jiǎn)單組合而成，出現(xiàn)時(shí)長(zhǎng)一般在3s內(nèi)；

應(yīng)用的啟動(dòng)方式分為兩種：冷啟動(dòng)和熱啟動(dòng)；

冷啟動(dòng)：當(dāng)啟動(dòng)應(yīng)用時(shí)，后臺(tái)沒有該應(yīng)用進(jìn)程；

熱啟動(dòng)：當(dāng)啟動(dòng)應(yīng)用時(shí)，后臺(tái)已有該進(jìn)程。

2.引導(dǎo)頁(yè)

一般為產(chǎn)品的功能性引導(dǎo)，使用戶能快速了解產(chǎn)品特性；頁(yè)面數(shù)通常為1-5個(gè)(3個(gè)最為常見)；內(nèi)容由主題、圖/文簡(jiǎn)介、頁(yè)面指示器、跳過按鈕等構(gòu)成；

常用使用場(chǎng)景：新用戶激活、老用戶回歸、大版本功能更新等

設(shè)計(jì)注意事項(xiàng)：文字信息不宜過多，主題內(nèi)容要突出，圖片要符合品牌調(diào)性，頁(yè)數(shù)不宜太多。

3.登錄注冊(cè)

一般APP都會(huì)有自己的用戶體系，少部分第三方、功能簡(jiǎn)單的APP沒有，如系統(tǒng)工具中的計(jì)算器、鬧鐘、天氣等

第一種：第三方賬號(hào)登錄，用戶不需要輸入信息直接第三方賬號(hào)登錄即可，流程簡(jiǎn)化，提高留存率；

第二種：郵箱注冊(cè)，一般這種是最開始注冊(cè)時(shí)基于網(wǎng)頁(yè)版的；

第三種：手機(jī)號(hào)注冊(cè)，一般會(huì)結(jié)合密碼或是動(dòng)態(tài)驗(yàn)證碼。

以上三種方式一般會(huì)組合使用。

4.內(nèi)容頁(yè)

狀態(tài)欄 StatusBar ：用來呈現(xiàn)信號(hào)、時(shí)間、電量等信息，位于APP界面頂部，可以改變底色與APP統(tǒng)一；

導(dǎo)航欄 NavBar ：導(dǎo)航作用，位于狀態(tài)欄下方，一般顯示導(dǎo)航內(nèi)容、頁(yè)面標(biāo)題，也可以放搜索控件等；

標(biāo)簽欄 TabBar ：讓用戶在不同的頁(yè)面進(jìn)行切換，位于APP底部，一般放3-5個(gè)內(nèi)容，圖標(biāo)加文字形式；

工具欄 ToolBar ：常用于針對(duì)當(dāng)前頁(yè)面的操作展示，位于在APP底部，圖文形式根據(jù)使用場(chǎng)景而定，一般用于二級(jí)頁(yè)面；

搜索欄 SearchBar ：用于搜索，寬高可自定義，可位于導(dǎo)航中也可位于導(dǎo)航下方。

5.內(nèi)容形式

列表形式：每條列表信息可以是單獨(dú)的圖片或文本，也可以是圖文混合，多數(shù)會(huì)用分割線區(qū)分；

卡片形式：將同類內(nèi)容歸納到一個(gè)個(gè)矩形或圓角矩形中的一種展示形式；

集合視圖：將同類信息用平鋪的形式展示，一般圖片為主，文字為輔；

圖片形式：純圖片展示；

文字形式：純文字展示；

6.列表

列表式布局在APP中非常常見，其特點(diǎn)在于能夠在較小的屏幕中展示多條信息，用戶通過上下滑動(dòng)的方式獲得更多信息。

列表舒適體驗(yàn)的最小高度是80px，高度需要根據(jù)內(nèi)容多少而定。

列表布局示例如下：

微博消息列表126px、微信消息列表136px、QQ消息列表132px、網(wǎng)易云音樂列表110px、微信個(gè)人中心列表88px。

7.卡片

卡片是含有圖片和文字在內(nèi)的小矩形模塊，它是用戶了解更多細(xì)節(jié)信息的入口。

便于清晰展示同類型的內(nèi)容信息，如信息流等；

在同一頁(yè)面布局中，卡片寬度應(yīng)保持不變，但高度可以相應(yīng)調(diào)整，卡片的最大高度根據(jù)平臺(tái)可用空間高度而定。一般移動(dòng)端的卡片或按鈕等至少會(huì)有2px的圓角，無圓角會(huì)很尖銳，感受不好。

卡片中的橫構(gòu)圖，常采用16:9、4:3，也會(huì)有2:1、3:2等比例的使用。

8.缺省頁(yè)

缺省頁(yè)是指操作異常狀態(tài)下給予用戶反饋的提示頁(yè)面，或無數(shù)據(jù)、操作失敗等情況下出現(xiàn)的空頁(yè)面，因此也稱為空頁(yè)；

常用場(chǎng)景：首次操作、積極觸發(fā)、被迫中斷；

一般結(jié)構(gòu)是為空提示圖標(biāo)、為空原因、操作指引/功能入口三大部分；

9.loading

標(biāo)題欄loading：如微信、釘釘?shù)?，不影響用戶查看保存在本地的?shù)據(jù)，加載成功后狀態(tài)消失，失敗則提示未連接等；

白屏loading：當(dāng)頁(yè)面內(nèi)容比較單一，需要一次性加載完成才顯示，則采用這種白屏加載樣式；

進(jìn)度條：進(jìn)度條的加載樣式，多見于瀏覽器，包括PC端和移動(dòng)端的瀏覽器；此種加載方式用戶在完全加載完成之前是看不到任何內(nèi)容的，所以一旦超過時(shí)間太久一定要提示用戶什么原因加載失敗，而不是一直停留在加載狀態(tài)。同時(shí)將加載圖標(biāo)做得更有趣些，也會(huì)減輕用戶等待時(shí)的焦慮；

Toast：當(dāng)用戶執(zhí)行了某個(gè)操作時(shí)，為了防止用戶繼續(xù)操作導(dǎo)致數(shù)據(jù)加載失敗或錯(cuò)誤，則采用此形式，限制用戶操作；

下拉刷新：此方式被廣泛運(yùn)用，且越來越多APP使用自定義的加載動(dòng)畫，增強(qiáng)交互趣味性，同時(shí)用戶可通過下拉手勢(shì)操作來自己選擇重新加載數(shù)據(jù)，給了用戶一定選擇內(nèi)容的自由；

預(yù)設(shè)圖或占位符：當(dāng)頁(yè)面的框架固定時(shí)，只需要加載框架內(nèi)數(shù)據(jù)時(shí)，采用這種刷新樣式，即先加載框架，再加載框架內(nèi)的數(shù)據(jù)。為了防止框架內(nèi)的內(nèi)容為空，會(huì)用占位符或者預(yù)設(shè)圖片來填充。

10.提示

常見的移動(dòng)端提示類型：彈框/Alerts（警告類、出錯(cuò)類、選擇類、告知類）、Toast等。

彈框：屏幕中彈出的框，常伴隨有黑色/白色透明蒙層，一般分為警告類、出錯(cuò)類、選擇類、告知類；非全局性操作應(yīng)盡量避免使用此種交互方式，頁(yè)面變化較大，且取消后不易定位到原焦點(diǎn)，反應(yīng)距離長(zhǎng)，視線移動(dòng)距離長(zhǎng)，經(jīng)常有彈框彈出是很不好的體驗(yàn)；

Toast：多用來進(jìn)行操作反饋提示，如“處理中、提交中、加載中…”、“操作成功、網(wǎng)絡(luò)不佳”等場(chǎng)景，樣式一般是黑色/灰色透明態(tài)，默認(rèn)位置有上中下可選，可自定義樣式及展示位置；

11.模態(tài)視圖

在iOS中，蘋果使用“模態(tài)視圖”來指那些在當(dāng)前頁(yè)插入的“浮層頁(yè)面”。一般來說，模態(tài)視圖包括一個(gè)“完成”按鈕和“取消”按鈕，但也不是100%一定。

模態(tài)視圖的主要用途：收集用戶輸入信息、臨時(shí)呈現(xiàn)一些內(nèi)容、臨時(shí)改變工作模式、相應(yīng)設(shè)備方向變化、顯示一個(gè)新的視圖層級(jí)。

12.輸入框

輸入框的內(nèi)容分類：數(shù)字、英文字符、中文；

交互較為友好的界面點(diǎn)擊輸入框填寫內(nèi)容時(shí)，呼出的鍵盤會(huì)匹配當(dāng)前輸入框類型，如數(shù)字填寫(手機(jī)號(hào)、QQ號(hào)等)時(shí)呼出數(shù)字鍵盤，郵箱填寫時(shí)呼出英文鍵盤，中文填寫時(shí)呼出中文鍵盤等。

13.按鈕

移動(dòng)端按鈕按比重分為三類：重要、一般、較弱。

按鈕狀態(tài)分為：正常態(tài)Normal、按壓態(tài)Pressed/Highlighted、不可點(diǎn)擊態(tài)(禁用態(tài))Disabled；

WEUI對(duì)按鈕的分類規(guī)范如下示例：主按鈕的按壓態(tài)是在原色基礎(chǔ)上增加10%的黑色/白色。

14.圖標(biāo)

圖標(biāo)大致可以分為功能性圖標(biāo)、非功能性圖標(biāo)；

功能性圖標(biāo)點(diǎn)擊后會(huì)根據(jù)交互狀態(tài)有視覺變化，非功能性圖標(biāo)不可點(diǎn)擊。

圖標(biāo)設(shè)計(jì)時(shí)需與品牌調(diào)性相符合，同類圖標(biāo)的大小、色系、線條粗細(xì)、視覺比例等都要保持一致；目前常用的風(fēng)格就是線性圖標(biāo)和非線形圖標(biāo)(扁平類等)。

一般圖標(biāo)的尺寸會(huì)根據(jù)使用位置的不同而有不同的大小規(guī)范，保證頁(yè)面整體性的同時(shí)，需與所搭配文字的比例保持協(xié)調(diào)性。

15.選擇器

選擇器：?jiǎn)芜x、多選、地點(diǎn)選擇、日期時(shí)間選擇等。

二、移動(dòng)端適配基礎(chǔ)概念

1.概念

px：pixel，像素，是圖像的基本采樣單位，電子屏幕上組成一個(gè)圖像的最基本單元，px是ppi的單位；

pt：point，點(diǎn)，是一個(gè)標(biāo)準(zhǔn)的長(zhǎng)度單位，常用于印刷業(yè)，等于1/72英寸，iOS開發(fā)單位；

dp：density-independent pixel，安卓開發(fā)長(zhǎng)度單位，獨(dú)立密度像素，與dpi無關(guān)，1dp表示在屏幕像素密度為160ppi時(shí)1px的長(zhǎng)度；

sp：scale-independent pixel，安卓開發(fā)字體大小單位；

ppi：pixel per inch，像素密度，圖像采樣率（在圖像中，每英寸所包含的像素?cái)?shù)），一般網(wǎng)頁(yè)的像素密度就是72px，ppi的數(shù)值越高，畫面會(huì)越細(xì)膩；

dpi：dots per inch，打印分辨率（每英寸所能打印的點(diǎn)數(shù)，即打印精度），每英寸多少點(diǎn)，dpi數(shù)值越高，圖片越細(xì)膩。

ppi和dpi經(jīng)常都會(huì)出現(xiàn)混用現(xiàn)象。它們是用來描述屏幕的屬性，或者說是性能。但從技術(shù)角度說，“像素”（P）只存在于計(jì)算機(jī)顯示領(lǐng)域，而“點(diǎn)”（d）只出現(xiàn)于打印或印刷領(lǐng)域。

2.換算

①pt與px

公式一：1pt= (DPI / 72) px

當(dāng)ps新建畫布分辨率為72ppi時(shí)（即72dpi時(shí)），1pt=1px；當(dāng)新建畫布分辨率為72*2=144ppi時(shí)，1pt=2px；

②ppi與dpi

dpi最初用于衡量打印物上每英寸的點(diǎn)數(shù)密度。DPI值越小圖片越不精細(xì)。當(dāng)DPI的概念用在計(jì)算機(jī)屏幕上時(shí)，就應(yīng)稱之為ppi。同理： PPI就是計(jì)算機(jī)屏幕上每英寸可以顯示的像素點(diǎn)的數(shù)量。因此，在電子屏幕顯示中提到的ppi和dpi可認(rèn)為是一樣的。

公式二：dpi=ppi

③ppi計(jì)算方法

公式三：ppi=屏幕對(duì)角線上的像素點(diǎn)數(shù)/對(duì)角線長(zhǎng)度= √ （屏幕橫向像素點(diǎn)^2 + 屏幕縱向像素點(diǎn)^2）/對(duì)角線長(zhǎng)度

以小米2s為例，該屏幕分辨率為720px*1280px，4.3英寸。則點(diǎn)密度為 √ (720^2 +1280^2) /4.3 = 342ppi。

④px與dp

dp為安卓開發(fā)時(shí)的長(zhǎng)度單位，根據(jù)不同的屏幕分辨率，與px有不同的對(duì)應(yīng)關(guān)系。安卓端屏幕大小各不相同，根據(jù)其像素密度，分為以下幾種規(guī)格：

1dp定義為屏幕密度值為160ppi時(shí)的1px，即，在mdpi時(shí)，1dp = 1px。 以mdpi為標(biāo)準(zhǔn)，這些屏幕的密度值比為：ldpi : mdpi : hdpi : xhdpi : xxhdpi : xxxhdpi = 0.75 : 1 : 1.5 : 2 : 3 : 4；即，在xhdpi的密度下，1dp=2px；在hdpi情況下，1dp=1.5px，其他類推。

公式四： 1dp=（屏幕ppi/ 160）px

iOS系統(tǒng)的適配需要先了解幾個(gè)概念：

物理分辨率：硬件能支持的分辨率；邏輯分辨率：軟件能達(dá)到的分辨率。

物理分辨率=邏輯分辨率X像素倍率

iOS系統(tǒng)根據(jù)其設(shè)備像素密度，分為以下幾種規(guī)格：




由AdBright首席UI設(shè)計(jì)師整理。