2015-10-8 用心設(shè)計
藍(lán)藍(lán)設(shè)計( paul-jarrel.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
來源:莫貝網(wǎng)
仔細(xì)閱讀MD的規(guī)范,似乎寫的很清楚,但是如果和Android4.0規(guī)范放在一起,還是會發(fā)現(xiàn)很多有出入的地方。不過規(guī)范的目的是為了培養(yǎng)并迎合用戶使用習(xí)慣,減少用戶認(rèn)知負(fù)擔(dān)。文字是死的,人是活的,靈活應(yīng)用才是關(guān)鍵。
在以MD為基礎(chǔ)的app設(shè)計中,經(jīng)常會出現(xiàn)以下結(jié)構(gòu)(如圖1)
在Android 4.0和material design設(shè)計規(guī)范中都專門對選項卡進(jìn)行了說明,但兩者的說法不同。
在Android 4.0中,選項卡tabs屬于操作欄的一部分,可以很輕松探索 app 中的不同功能,或瀏覽不同分類的數(shù)據(jù)集,就是說tabs選項卡是可以作為導(dǎo)航使用的,類似于iOS的標(biāo)簽欄,只是iOS放在屏幕底部,安卓是放在屏幕頂端(如上圖2)。
但在material design中,tabs 的作用是將大量關(guān)聯(lián)的數(shù)據(jù)或者選項劃分成更易理解的分組,雖然很容易讓人聯(lián)想到導(dǎo)航,但其本身并不是用來導(dǎo)航的。每個tab的內(nèi)容應(yīng)該互相關(guān)聯(lián)并且是在同 一個主題下(如下圖)。圖中出行方式可以通過tab劃分成多種方式,但是搜索、指南、設(shè)置卻完全屬于不同的功能導(dǎo)航。
如此看來,兩種規(guī)范似乎是相互沖突的,而且只要留心一下你會發(fā)現(xiàn),現(xiàn)在市場上經(jīng)常是這兩種形式都有。googel官方比較推崇應(yīng)用結(jié)構(gòu)是:左側(cè)導(dǎo)航抽屜+應(yīng)用欄+tabs(Tab可選),但是同一種結(jié)構(gòu)卻有兩種不同表現(xiàn)方式。
側(cè)邊欄導(dǎo)航作為應(yīng)用的主導(dǎo)航,頭屏顯示應(yīng)用最重要的功能或內(nèi)容,如果在較低層級中有多個平行相關(guān)視圖,可以用Tab結(jié)構(gòu)(當(dāng)然也可以沒有)。這種結(jié) 構(gòu)的關(guān)鍵是主要功能或內(nèi)容很突出,所以頭屏最大化顯示,而其他功能相對較弱,不需要頻繁切換側(cè)邊欄導(dǎo)航(如下圖)。谷歌發(fā)布的inbox郵箱,左側(cè)導(dǎo)航欄作為主導(dǎo)航,默認(rèn)顯示收件箱頁面,用戶最常用也最重要的功能是查看收件箱,至于其他的發(fā)件箱、垃圾郵件等都可以放在導(dǎo)航抽屜內(nèi)收起。googel圖書頂部是應(yīng)用欄+tabs結(jié)構(gòu),此處Tab強(qiáng)調(diào)的是在同一主題下的不同歸類,而不是導(dǎo)航。
或許是受4.0規(guī)范的影響,在左側(cè)導(dǎo)航抽 屜+應(yīng)用欄+tabs的應(yīng)用結(jié)構(gòu)中,Tab作為應(yīng)用的主導(dǎo)航,而左側(cè)抽屜作為輔導(dǎo)航,收納一些用戶不常使用的功能,像用戶中心、設(shè)置、反饋等。這種結(jié)構(gòu)適 合那些多個相同等級的功能視圖需要頻繁切換的app,且只需要手指左右滑動就能快速切換Tab視圖,這將大大提高應(yīng)用使用效率。如下圖所示,雖然是概念設(shè)計(主要是國內(nèi)安卓應(yīng)用喜歡延續(xù)iOS風(fēng)格,將Tab放在屏幕底部,米找到合適的例子,且MD沒有被普遍應(yīng)用),但很適合該場景下的示例。這款產(chǎn)品類似于微信,將主要功能導(dǎo)航放在頂部,實現(xiàn)快速切換,側(cè)邊抽屜導(dǎo)航放置收藏、狀態(tài)、設(shè)置等次要功能。
以上兩種方式并不沖突,關(guān)鍵是看你應(yīng)用的功能內(nèi)容。如果你的應(yīng)用核心功能很突出,且不需要其他功能頻繁切換,就選擇第一種;如果你的應(yīng)用有兩個或者兩個以上相同重要的功能模塊,且需要頻繁切換,比如微信的即時聊天和朋友圈,那就嘗試第二種。
Android部分暫時就到這里,來看看iOS。如果展開來講,體系太龐大,暫且用一張圖表示,雖然都是很基礎(chǔ)的內(nèi)容。
另外,Android和IOS很明顯的差異是層級返回和編輯選擇。
IOS平臺沒有實體返回按鍵,所以涉及層級間的導(dǎo)航,app界面本身一定要有返回按鈕,而實體home鍵只負(fù)責(zé)應(yīng)用退出。Android平臺有物理 返回按鍵,且點擊返回的是動作流。比如,在搜索界面,點擊搜索框調(diào)出軟鍵盤,再點返回按鍵,不是返回上一頁,而是收回彈出的軟鍵盤,它強(qiáng)調(diào)的是返回上一個 動作的界面,而非層級關(guān)系。在Android平臺上的app,如果應(yīng)用本身含有返回按鈕,返回的是上一層級,設(shè)計的是層級間的導(dǎo)航。另外,在安卓app的首頁點擊返回按鍵,就是退出應(yīng)用。可看如下關(guān)系圖
對于編輯選擇功能,IOS有明確的入口,通常在導(dǎo)航欄 上有編輯按鈕,點擊后進(jìn)入編輯模式,通常可以多選,同時底部或頂部會增加工具欄,用來處理多選內(nèi)容。當(dāng)然也可以單選刪除,通過點按向左滑動刪除,或者是點 擊按鈕從底部呼出操作菜單,逐個刪除。但Android是通過長安方式進(jìn)入編輯模式,此時操作欄被一個臨時情景操作欄覆蓋(情景操作欄可以覆蓋頂部操作欄 和底部操作欄),界面內(nèi)容允許單個或多個操作(如下圖)
以上部分其實都是一些平臺規(guī)范總結(jié),將區(qū)別大且重要部分整理出來,也是為了方便閱讀查看,后期會持續(xù)更新一些其他交互內(nèi)容。
作者:butter
來源:jianshu
藍(lán)藍(lán)設(shè)計的小編 http://paul-jarrel.com