Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

0 評(píng)論 1166 瀏覽 13 收藏 7 分鐘

本文深入探討了Android和iOS兩大移動(dòng)操作系統(tǒng)的設(shè)計(jì)準(zhǔn)則,包括字體、圖標(biāo)、UI組件布局等關(guān)鍵元素。了解這些規(guī)范,設(shè)計(jì)師能夠創(chuàng)建既美觀又實(shí)用的應(yīng)用界面,提升用戶(hù)體驗(yàn)。

這期內(nèi)容,來(lái)分享一下Android,iOS移動(dòng)端常用的設(shè)計(jì)規(guī)范。

一、Android

1. 字體 Typography

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

2. 圖標(biāo) icons

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

1)應(yīng)用圖標(biāo) Product icons

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

2)系統(tǒng)圖標(biāo) System icons

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

3)快捷圖標(biāo) Shortcut icon

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

4)單位和度量 Units and measurements

  • dpi =屏幕寬度(或高度)像素 / 屏幕寬度(或高度)英寸
  • dp =(寬度像素 x 160)/ dpi

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

3. UI組件布局 Element Layout

1)列表 List

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

2)觸控區(qū)域尺寸 Touch target size

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

3)應(yīng)用欄 App bar

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

4)安卓通用設(shè)備分辨率常

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

二、iOS

1. 字體(默認(rèn)) Typography

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

2. 點(diǎn)和像素 Points and Pixels

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

3. 圖標(biāo) Icon

1)應(yīng)用圖標(biāo) App Icon

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

2)自定義圖標(biāo) Custom Icons

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

3)分辨率和顯示規(guī)格 Resolutions and Display

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

4)配色

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

4. UI組件布局 UI Element Layout

1)狀態(tài)欄 Status Bar

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

2)導(dǎo)航欄 Navigation Bar

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

3)搜索欄 Search Bar

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

4)標(biāo)簽欄 Tab Bar

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

5)表格視圖 Table View

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

6)彈出 Modals

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

7)提示框 Alerts

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

8)切換 Segment Controls

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

9)滑動(dòng)條 Sliders

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

10)切換按鈕 Switch

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

11)切換按鈕 Switch

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

12)iOS 通用設(shè)備分辨率常

Axure PR 9 移動(dòng)端設(shè)計(jì)規(guī)范

本文由 @PM大明同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!