小程序UI視覺設(shè)計(jì)規(guī)范

像素和設(shè)備調(diào)試

開發(fā)微信小程序時(shí)設(shè)計(jì)師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn),單位換算相對(duì)簡(jiǎn)單。微信小程序所定義的一套 WXSS (WeiXin Style Sheets) 中有一個(gè)有趣的長(zhǎng)度單位 rpx，即 responsive pixel。

rpx(responsive pixel)， 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素,

• 750rpx = 375px = 750物理像素
• 1rpx = 0.5px = 1物理像素

邏輯像素，在 CSS 中也被稱為 CSS 像素 (CSS pixels)，是為 Web 開發(fā)者創(chuàng)造的，在 CSS 和 JavaScript 中使用的一個(gè)抽象的層，每一個(gè) CSS 聲明和幾乎所有的 Javascript 屬性都使用 CSS 像素。

例如我們平時(shí)使用 Chrome 的設(shè)備調(diào)試工具的時(shí)候，iPhone6 是高 667px，寬是 375px，與蘋果官方的 1334px x 750px，長(zhǎng)寬分別少了 2 倍，那么面積就少了 4 倍。這就是經(jīng)常說(shuō)的 Retina 屏幕用四個(gè)(物理)像素表示一個(gè)(邏輯)像素。

三機(jī)的rpx

rpx 轉(zhuǎn)換成 px 是需要乘以一個(gè)系數(shù)的：px = rpx * n

rpx 只是定義一個(gè)絕對(duì)值 750 寬度，然后簡(jiǎn)單的根據(jù)不同設(shè)備的邏輯像素來(lái)進(jìn)行 rpx 到 px 的換算。

小程序視覺規(guī)范

1.字體大小

微信內(nèi)字體的使用與所運(yùn)行的系統(tǒng)字體保持一致，常用字號(hào)為20, 18, 17, 16,14 13, 11(pt)。

2.字體顏色

藍(lán)色為鏈接用色，綠色為完成字樣色，紅色為出錯(cuò)用色 Press 與 Disable 狀態(tài)分別降低透明度為20%與10%。

3.列表

列表欄之間的行距間隔尺寸要求如下：

4.表單

5.按鈕

• 大按鈕

對(duì)當(dāng)前頁(yè)面整體的即時(shí)操作，對(duì)于鼓勵(lì)用戶操作的按鈕，必須有效且滿足用戶需求。

按鈕的高度固定為94px(47pt)，圓角大小固定10px(5pt)。

*主操作按鈕在一個(gè)頁(yè)面內(nèi)只能出現(xiàn)一次

• 中按鈕

該按鈕操作在頁(yè)面層級(jí)中的重要程度不高，或者不鼓勵(lì)用戶操作的按鈕，抑或者大按鈕的使用會(huì)擾亂信息瀏覽時(shí)，可用中按鈕代替。

中按鈕寬度最小360px(180pt)。

文本兩邊間距最小60px(30pt)，最大不限制，不夠則拉伸按鈕寬度。

按鈕最高固定為70px(35pt)，圓角大小固定為8px(4pt)。

• 小按鈕

僅對(duì)頁(yè)面某項(xiàng)內(nèi)容的操作、選擇，小按鈕是可以重復(fù)的。

小按鈕寬度最小120px(60pt)。按鈕內(nèi)距離文字間距離最小30px(15pt)，不夠則拉伸按鈕寬度。按鈕高度固定為60px(30pt)，圓角大小固定為6px(3pt)。

6.圖標(biāo)

尺寸：100*100px

一般用于結(jié)果頁(yè)面狀態(tài)提示，根據(jù)結(jié)果的情況選擇對(duì)應(yīng)的icon。

小程序Titlebar(標(biāo)題欄)按鈕

使用方法

提供深淺兩種配色的按鈕選擇，以更好適配不同頁(yè)面風(fēng)格，注意保持Titlebar各元素保持足夠的識(shí)別性。

小程序和APP在實(shí)用性和設(shè)計(jì)難度上有哪些差別？

小程序請(qǐng)這樣設(shè)計(jì)【小程序界面UI交互教程】

常見的網(wǎng)頁(yè)ui界面布局有哪些?

AI立體字標(biāo)題效果制作教程【UI設(shè)計(jì)】

傳智教育UI/UE開發(fā)培訓(xùn)