Axure PR 9 移動端設(shè)計規(guī)范

0 評論 941 瀏覽 8 收藏 7 分鐘

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

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

一、Android

1. 字體 Typography

Axure PR 9 移動端設(shè)計規(guī)范

Axure PR 9 移動端設(shè)計規(guī)范

2. 圖標(biāo) icons

Axure PR 9 移動端設(shè)計規(guī)范

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

Axure PR 9 移動端設(shè)計規(guī)范

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

Axure PR 9 移動端設(shè)計規(guī)范

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

Axure PR 9 移動端設(shè)計規(guī)范

4)單位和度量 Units and measurements

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

Axure PR 9 移動端設(shè)計規(guī)范

3. UI組件布局 Element Layout

1)列表 List

Axure PR 9 移動端設(shè)計規(guī)范

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

Axure PR 9 移動端設(shè)計規(guī)范

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

Axure PR 9 移動端設(shè)計規(guī)范

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

Axure PR 9 移動端設(shè)計規(guī)范

二、iOS

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

Axure PR 9 移動端設(shè)計規(guī)范

Axure PR 9 移動端設(shè)計規(guī)范

Axure PR 9 移動端設(shè)計規(guī)范

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

Axure PR 9 移動端設(shè)計規(guī)范

3. 圖標(biāo) Icon

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

Axure PR 9 移動端設(shè)計規(guī)范

Axure PR 9 移動端設(shè)計規(guī)范

Axure PR 9 移動端設(shè)計規(guī)范

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

Axure PR 9 移動端設(shè)計規(guī)范

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

Axure PR 9 移動端設(shè)計規(guī)范

4)配色

Axure PR 9 移動端設(shè)計規(guī)范

4. UI組件布局 UI Element Layout

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

Axure PR 9 移動端設(shè)計規(guī)范

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

Axure PR 9 移動端設(shè)計規(guī)范

3)搜索欄 Search Bar

Axure PR 9 移動端設(shè)計規(guī)范

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

Axure PR 9 移動端設(shè)計規(guī)范

5)表格視圖 Table View

Axure PR 9 移動端設(shè)計規(guī)范

6)彈出 Modals

Axure PR 9 移動端設(shè)計規(guī)范

7)提示框 Alerts

Axure PR 9 移動端設(shè)計規(guī)范

8)切換 Segment Controls

Axure PR 9 移動端設(shè)計規(guī)范

9)滑動條 Sliders

Axure PR 9 移動端設(shè)計規(guī)范

10)切換按鈕 Switch

Axure PR 9 移動端設(shè)計規(guī)范

11)切換按鈕 Switch

Axure PR 9 移動端設(shè)計規(guī)范

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

Axure PR 9 移動端設(shè)計規(guī)范

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

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

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

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