交互設計干貨 | IOS與Android的設計規(guī)范

關于設計規(guī)范的重要性就不多說,這篇文章主要通過舉例對比,來幫助大家深刻認識兩大移動平臺(IOS&Android)的設計規(guī)范以及它們之間的差異。

首先,從平臺的頁面布局上看,兩大平臺布局方式上明顯存在差異,如圖:

圖1

我們對兩大平臺分別從頁眉、頁腳進行詳細解說,先是IOS平臺,

圖2

IOS的頁眉,也就是我們說的導航欄,用于實現(xiàn)在應用不同信息層級結(jié)構(gòu)間的導航,有時也可用于管理當前屏幕內(nèi)容。具體效果,如圖3,

圖3

在頂部放一個標題,表示當前頁面的一些內(nèi)容,在左側(cè)有個返回按鈕,這個按鈕是依賴于當前頁面是屬于第一層級還是第二層級,如果屬于第二層級,就需要有一個返回的按鈕,以及返回上一級的標題是什么,然后右上角有個設置的入口,這樣看還是抽象的話,那就直接看實際效果的,如圖4,

圖4

熟悉了IOS頁眉的設計,再來看頁腳的,IOS的頁腳,也就是我們說的工具欄,用于放置操作當前屏幕中各對象的控件,如圖5,

圖5

工具欄上既可以放icon,也可以放文字,看個具體例子就知道怎么用了,如圖6紅色圈中形式,

圖6

至于選擇icon還是文字,要根據(jù)實際情況抉擇,如果功能入口很多,icon是更好的選擇。如果功能沒有那么多又想表達更加清晰的意思,建議使用文字。

IOS的頁腳除了是工具欄外,還可以是標簽欄。標簽欄可以讓用戶在不同的任務、界面和模式中進行切換,圖7是常見的設計方式,

圖7

具體的可以看下appstore的設計,

圖8

但是值得注意的是,底部標簽不要太多,最多5個。

在了解了IOS平臺頁眉頁腳的設計規(guī)范后,這時候來對比下Android平臺在這上面的設計有何不同,首先還是從頁眉上說明;

Android的頁眉放置的是操作欄(action bar),用于實現(xiàn)app內(nèi)視圖的切換和層級間的導航(返回上層),還會放置一些重要控件。常見的設計方式如圖9,

圖9

在這里不得不提一下,在圖9中看到的“下拉菜單”是android4.0的設計風格,進入android5.0后,Material Design被廣泛應用,這時候的操作欄我們叫應用欄了,是用來顯示應用的標識、應用導航、內(nèi)容搜索以及其他操作,比如這樣的,

圖10

從上面圖中不難看出,android4.0和5.0的區(qū)別在于下拉菜單變成左側(cè)抽屜導航,看下對比圖,

圖11

在這里也有個設計小技巧,上面我們列的都是一級導航,當導航條目很多時,我們就會考慮設計二級導航,而這時候如果選擇把二級導航直接加在一級抽屜導航里,像這樣,

圖12

如果是選擇這樣的設計,不難看出,左側(cè)導航條目變得非常多,也不便于用戶進行切換。那么這時候,我們可以把左側(cè)的二級導航放到頁面中,實現(xiàn)在某一個主導航下面進行子導航的一個切換,如圖:

圖13

以上是IOS和android在頁面布局上的不同,而在控件上,兩者也存在著差異,我們可以列舉幾個常見的,比如滑塊控件、開關控件等,具體的可到官網(wǎng)下載相關控件進行對比,這里不一一列舉了,

圖14
圖15

除了頁面布局和控件上的不同,兩大平臺在手勢操作上也有些差異,我們常見的手勢有點擊、雙擊、長按等,

圖16

那在操作上,各個手勢所達到的效果也不同,而IOS平臺跟Android平臺在同一個效果上所使用的手勢也會有所不同,比如刪除行為,IOS使用輕掃手勢,而Android則是長按刪除。

圖17

以上就是對兩大平臺間在設計規(guī)范上的簡單介紹,而在具體細節(jié)上的不同,可參考下面的導圖,

圖18

在設計時遵從最基本的原則也是體現(xiàn)一個交互設計師的專業(yè)性,認識設計規(guī)范也是為了避免在工作上犯了最不應該犯的錯,希望上面的總結(jié)對你有所幫助。



最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容