什么是交互設(shè)計規(guī)范介褥?
就是交互設(shè)計的統(tǒng)一規(guī)則粘优,對設(shè)計風(fēng)格、設(shè)計規(guī)則的約定呻顽。頁面怎么布局?使用何種控件丹墨?等等
為什么需要設(shè)計規(guī)范廊遍?
- 快速實現(xiàn)產(chǎn)品設(shè)計
- 統(tǒng)一用戶在平臺當(dāng)中的行為習(xí)慣,就如同在交通系統(tǒng)中贩挣,紅燈特指停喉前,綠燈特指行,如果某個城市改變了這一規(guī)則王财,其他地方的人來到這里卵迂,將會引起交通癱瘓。
使用設(shè)計規(guī)范時的注意點
- 在沒有更好的設(shè)計方案時绒净,盡量遵守設(shè)計規(guī)范
- 特殊情況下见咒,不必拘泥于設(shè)計規(guī)范,一切以用戶的使用場景為基準(zhǔn)
常見的設(shè)計規(guī)范
頁面規(guī)范
IOS頁面規(guī)范
- 頁眉(導(dǎo)航欄):
用于不同信息層級之間的導(dǎo)航挂疆,有時候也用于當(dāng)前頁的管理改览,比如從二級頁返回至一級頁下翎,對當(dāng)前頁的內(nèi)容的刪除功能等
- 內(nèi)容區(qū)
- 頁腳(工具欄或標(biāo)簽欄)
工具欄主要是當(dāng)前頁面的一些操作,可以用icon或文字操作宝当,操作較少時视事,建議用文字,較多時庆揩,建議用icon俐东,使得頁面更簡潔
標(biāo)簽欄用于在不同的任務(wù)、界面和模式中切換订晌,一般不超過5個
Android頁面規(guī)范
安卓4.0中常見頁面布局
幾種常見的頁面布局虏辫,圖片來自網(wǎng)易云課堂
- 大而全的主操作欄
- 主操作欄(Action Bar)+ 頂部次操作欄
- 主操作欄 + 底部工具欄
- 主操作欄 + 刺激操作欄 + 底部工具欄
- 頁眉(操作欄 Action Bar)
實現(xiàn)app中內(nèi)試圖的切換和層級間的導(dǎo)航(如返回上一級),還會放置一些重要按鈕
安卓5.0 (Material Design)中的一些改變
- 頁眉中的操作欄改為應(yīng)用欄(APP Bar)
應(yīng)用欄在以前版本中叫做操作欄腾仅,用來顯示應(yīng)用的標(biāo)識乒裆,應(yīng)用導(dǎo)航,內(nèi)容搜索以及其他操作
如果有二級導(dǎo)航推励,可以放在頁面中
常用控件
什么叫控件鹤耍?
就是控制元件,用戶通過控件來操作界面狀態(tài)或設(shè)定狀態(tài)验辞,打個類比稿黄,將房間比作頁面,那么控件就是房間的開關(guān)跌造、門把手等
控件庫
如果控件庫擁有對應(yīng)控件杆怕,盡量直接調(diào)用
IOS地址:
material design控件庫:
常用手勢
常用操作手勢
- 使用手勢操作的優(yōu)勢:觸摸是人類天性,降低使用成本
- 注意點:安卓是長按刪除壳贪;IOS是左滑刪除
IOS設(shè)計規(guī)范的發(fā)展歷史
(略)
Android設(shè)計規(guī)范的發(fā)展歷史
- 2010年陵珍,推出安卓2.3系統(tǒng),此版本設(shè)計混亂违施,無統(tǒng)一規(guī)范
- 2011年2月互纯,推出為平板設(shè)計的安卓系統(tǒng)
- 2011年,推出安卓4.0磕蒲,開始統(tǒng)一手機(jī)和平板規(guī)范
- 2014年留潦,推出安卓5.0,也就是Material Design
安卓設(shè)計規(guī)范發(fā)展史