由淺入深介紹一些關(guān)于移動端開發(fā)設(shè)計產(chǎn)品相關(guān)的內(nèi)容续搀。一來鞏固自己學(xué)到的知識與經(jīng)驗擅憔,二來給大家相互討論學(xué)習(xí)共同進(jìn)步靡馁,三來分享讓初學(xué)者有個更系統(tǒng)的認(rèn)識。本系列文章分享僅適用于一二年級的設(shè)計同學(xué)以及產(chǎn)品同學(xué)钾虐。
1腮恩、狀態(tài)欄(Status Bars)
狀態(tài)欄埋嵌,位于手機頂部狐援,主要用于顯示手機信息狀態(tài),常用的有運營商某筐、網(wǎng)絡(luò)狀態(tài)比搭、時間、電池電量等等南誊,示各家系統(tǒng)而定身诺。值得注意的是安卓系統(tǒng)還會顯示后臺運行程序的圖標(biāo)蔽莱。由于沉浸式體驗的加入,iOS系統(tǒng)的狀態(tài)欄可以根據(jù)app當(dāng)前頁面的延伸更改背景色或者選擇去掉戚长。而安卓系統(tǒng)由于各家廠商定制深度的不一樣會有所不同盗冷,就原生系統(tǒng)而言,6.0以上的系統(tǒng)才可以實現(xiàn)和iOS一樣的沉浸式體驗同廉。狀態(tài)欄必要時可以隱藏仪糖,比如放大看圖片、看視頻等
2迫肖、導(dǎo)航欄(Navigation Bars)
導(dǎo)航欄锅劝,iOS的導(dǎo)航欄位于狀態(tài)欄下方,可顯示當(dāng)前頁面的標(biāo)題蟆湖。當(dāng)顯示新頁面時故爵,導(dǎo)航欄左側(cè)會出現(xiàn)一個帶上屏幕標(biāo)題的返回按鈕,有時右側(cè)還會出現(xiàn)內(nèi)容空間隅津,比如編輯诬垂、完成等等。iOS的導(dǎo)航欄背景是半透明的伦仍,都可以調(diào)節(jié)背景色结窘,必要的時候還可以隱藏。比如全屏情況下看視頻充蓝、看圖片甚至微信的朋友圈其實都隱藏了導(dǎo)航欄隧枫。安卓的導(dǎo)航欄在屏幕的底部跟iOS有根本上的區(qū)別,三個操作按鈕分為返回谓苟、回到桌面以及打開后臺中心官脓。而與iOS相同的“導(dǎo)航欄”稱為標(biāo)題欄。
3涝焙、搜索欄(Search Bars)
搜索欄卑笨,可以單獨存在也可以存在與導(dǎo)航欄的右側(cè)進(jìn)行全局或者局部的搜索,iOS更傾向于前者而安卓更多是位于導(dǎo)航欄的右側(cè)纱皆,可根據(jù)使用場景的不同靈活調(diào)整湾趾,需要注意的是芭商,iOS搜索欄默認(rèn)用文字“取消”來取消操作并且以模態(tài)的形式進(jìn)行搜索派草,而安卓常用“向左箭頭”表示取消搜索,新建頁面進(jìn)行搜索铛楣。
4近迁、標(biāo)簽欄(Tab Bars)
標(biāo)簽欄,位于應(yīng)用屏幕的底部簸州,提供應(yīng)用不同模塊之間快速切換的能力鉴竭。iOS的標(biāo)簽欄一般3-5個標(biāo)簽歧譬,背景為半透明,可以有背景色必要的時候需要隱藏比如喚起鍵盤時搏存,每個標(biāo)簽一般為圖標(biāo)+文本瑰步。根據(jù)MD(Material Desigh)風(fēng)格安卓標(biāo)簽欄一般在標(biāo)題欄下方,但由于現(xiàn)大多數(shù)開發(fā)都習(xí)慣把安卓“iOS”風(fēng)格化璧眠,所以同樣的安卓的標(biāo)簽欄也跟iOS一樣常用于屏幕底部缩焦。
5、工具欄(Tool Bars)
工具欄责静,位于屏幕底部袁滥。其中包含用于執(zhí)行與當(dāng)前視圖或其中的內(nèi)容相關(guān)的操作的按鈕。只有iOS才會有工具欄的概念灾螃。工具欄背景半透明可以有背景色彩题翻,必要的時候需要隱藏。例如Safari瀏覽器向下滑動時隱藏工具欄以及喚起鍵盤時需要隱藏工具欄腰鬼。
這些都是常規(guī)的布局分布嵌赠,是設(shè)計規(guī)范是基礎(chǔ)。我們需要立于基礎(chǔ)但不能受限于此熄赡,大膽創(chuàng)新才是立命之本猾普。很多優(yōu)秀的設(shè)計都是在此布局的基層上增刪改,同時也要考慮所在開發(fā)團(tuán)隊的能力本谜,項目進(jìn)度安排時間安排初家。根據(jù)用戶群體的特點、使用習(xí)慣進(jìn)行設(shè)計乌助。當(dāng)自己還沒有跟好的創(chuàng)意時多參考下優(yōu)秀的作品溜在。