網(wǎng)易云課堂-IOS 與Android設(shè)計(jì)規(guī)范

引入:?紅燈停,綠燈行

設(shè)計(jì)規(guī)范是為了培養(yǎng)/適應(yīng)用戶的使用習(xí)慣.

1.平臺(tái)頁面布局規(guī)范

IOS??經(jīng)典的延續(xù)

文字標(biāo)識(shí)更直接,但是占用更多空間

但空間足夠時(shí),推薦使用文字,而非ICON

底部標(biāo)簽最多放5個(gè)(目前的屏幕)

ANDROID??變化與統(tǒng)一

4.0?是標(biāo)志性的,平板和手機(jī)統(tǒng)一規(guī)范

下拉菜單的缺點(diǎn):?顯得非常重,在狹小的空間內(nèi)放置過多操作元素

標(biāo)簽式導(dǎo)航:?把下拉菜單橫排在下邊

右上角操作按鈕過多時(shí),?移動(dòng)到頁面下端:?容易引起誤操作,但是頁面會(huì)更加簡潔

5.0 Material Design

扁平化(IOS7 -2013)意味著所有的事物都只有x軸和Y軸

Material Design?在頁面上加了一個(gè)z軸,?提升層次感

與之前的擬物化設(shè)計(jì)是存在區(qū)別的

Z軸意味著,?頁面之間有一個(gè)上下的相對(duì)位置

如 一個(gè)看似懸空的按鈕/?抽屜式導(dǎo)航

2. 平臺(tái)常用控件

控件庫是規(guī)定好的??樣式

做控件設(shè)計(jì)的時(shí)候,要先看看這個(gè)控件是不是平臺(tái)自身所帶的,

平臺(tái)所帶的是可以直接調(diào)用的

IOS:?頁面內(nèi)搜索框

Android:?搜索圖標(biāo)

不符合平臺(tái)規(guī)范的設(shè)計(jì)會(huì)增加開發(fā)的工作量

EX:?鬧鐘——時(shí)間選擇器

音量調(diào)節(jié)——滑塊控件

開關(guān)控件

雖然操作控件不同,但是基本的交互動(dòng)作是一樣的.

進(jìn)度讀取:?無限循環(huán)指示器(短時(shí)間等待)?vs.?進(jìn)度條(等待時(shí)間比較長)

退出控件—— 無限循環(huán)控件

H5頁面加載——進(jìn)度條

3. 平臺(tái)常用手勢(shì)

直覺化

快捷高效

隨著大屏的普及,未來的頁面會(huì)變得越來越大

通過手勢(shì)的滑動(dòng)和捏合,會(huì)帶來很多便利

一切的設(shè)計(jì)目的都是以用戶的使用場(chǎng)景為中心