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

前言

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

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

標準原則

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

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

圖標層、圖文排版層、布局層

設(shè)計標準尺寸

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

布局標準原理

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

布局標準控件

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

布局標準案例

字體大小標準

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

字體使用規(guī)則標準

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

字體搭配標準

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

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

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

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

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

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

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

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

桌面圖標案例1

桌面圖標案例2

系統(tǒng)圖標柵格系統(tǒng)

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

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

系統(tǒng)圖標案例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ī)范。