海淘科技為你帶來的：【設(shè)計資訊】移動端UI設(shè)計規(guī)范

前言

設(shè)計目的設(shè)計

1. 幫助設(shè)計端對提高設(shè)計質(zhì)量、工作效率。當(dāng)然我們在做一個移動UI時肯定是我們要有所需求的
2. 減低各方溝通成本， 統(tǒng)一設(shè)計標(biāo)準(zhǔn)及工作方法
3. 支持模塊化設(shè)計，減低開發(fā)成本、加快產(chǎn)品開發(fā)代的制作速度。
4. 逐步提高交互體驗，更好的服務(wù)與用戶體驗工作

標(biāo)準(zhǔn)原則

1. 高效設(shè)計，優(yōu)質(zhì)的閱讀體驗、保持專注、簡約流程
2. 快速認(rèn)知 、快速記憶，降低認(rèn)知成本。
3. 標(biāo)準(zhǔn)的基礎(chǔ)設(shè)計規(guī)范
4. 進(jìn)階標(biāo)準(zhǔn)，情感化設(shè)計體現(xiàn)、產(chǎn)品品牌印象傳播

界面設(shè)計構(gòu)成

圖標(biāo)層、圖文排版層、布局層

設(shè)計標(biāo)準(zhǔn)尺寸

不同的手機(jī)型號都有他不同的分辨率和尺寸。

布局標(biāo)準(zhǔn)原理

以為移動端有著不同的像素，所以我們在設(shè)計布局是要一定的標(biāo)準(zhǔn)。

布局標(biāo)準(zhǔn)控件

移動端頁面的控件是少不了的，但是我們對移動的界面布局也有著規(guī)則，下圖所示。

布局標(biāo)準(zhǔn)案例

字體大小標(biāo)準(zhǔn)

移動端界面設(shè)計，移動端設(shè)備，桌面的尺寸大小不一，閱覽時要提升舒適度，給出了字體大小的標(biāo)準(zhǔn)。

字體使用規(guī)則標(biāo)準(zhǔn)

在用戶瀏覽時更加的舒適，推出了字體使用規(guī)則標(biāo)準(zhǔn)，1.設(shè)計稿標(biāo)準(zhǔn)文字；2.文字搭配；3.詳情頁標(biāo)題文字與詳情文字間距；4.行間距設(shè)定；5.對齊原則。

字體搭配標(biāo)準(zhǔn)

文字大小的搭配也是給出了標(biāo)準(zhǔn)，用于詳情頁的標(biāo)題文字和詳情文字，分別采用36px和30px；文字大小用于索引列表標(biāo)題和詳情簡介，分別是32px和26px，或者30px和24px；字體大小用于帶頭列表標(biāo)題和輔助信息，分別是30px和22px。

文字案例-（導(dǎo)航欄標(biāo)題、二級導(dǎo)航文字、菜單欄文字、內(nèi)容信息文字）

文字案例-(帶頭像列表文字搭配)

文字案例-（設(shè)置列表文字、設(shè)置列表輔助信息文字、未讀信息文字）

文字案例-(內(nèi)輔助信息)

文字案例-（文字大?。?

按鈕大小、帶頭像文字搭配文字、內(nèi)文標(biāo)題文字、內(nèi)文詳情文字、小標(biāo)題文字、提示文字

桌面圖標(biāo)柵格系統(tǒng)

桌面圖標(biāo)案例1

桌面圖標(biāo)案例2

系統(tǒng)圖標(biāo)柵格系統(tǒng)

系統(tǒng)圖標(biāo)視覺比例柵格

系統(tǒng)圖標(biāo)案例1

系統(tǒng)圖標(biāo)案例2

附錄一安卓開發(fā)單位轉(zhuǎn)換Appendix android development unit conversion

安卓開發(fā)單位轉(zhuǎn)換1

安卓開發(fā)單位轉(zhuǎn)換2

安卓開發(fā)單位轉(zhuǎn)換3

以上海淘科技為你提供的，設(shè)計資訊中移動端UI設(shè)計規(guī)范。不僅有設(shè)計資訊，還有網(wǎng)站建設(shè)方案資訊。文章下載，點擊：【設(shè)計資訊】移動端UI設(shè)計規(guī)范。