談談常見的移動應用設計風格

Tabs流

現在最流行的設計風格莫過于經典的TABS風格,下面是某種Tabs設計的實現:

[---TITLE---]

[---CONTENT---]

[---TABS---]

優點

就是,布局清晰明了,功能切換方便,用戶學習成本低,畢竟主要功能都在tabs上,只要會點擊按鈕都會用這個應用,而且,大部分應用都是這樣,是絕對的易上手風格.

缺點

爛大街的設計風格,沒法給人耳目一新的感覺,而且存在一個問題,就是屏幕利用的浪費,因為tabs一直占用著底欄,有時候,我們可以思考一下是否必 須要常駐?接著就是功能數目與tabs數量的沖突,有時候,我們一個應用有很多一級頁面的功能的,有些人就像把它全部放到tabs里面,就不tabs擺放 得密密麻麻的,有密集恐懼癥的人估計,永遠都不會用這樣的應用了.目前的趨勢是tabs 不斷做減法.

參考

微信,QQ,Appstore

Tiles流(metro?)

類似于flipbard的那種風格的,我稱之為磚塊流吧,我的意見是磚塊設計風格是用來解決tabs數目過多而出現的一種設計方式,這種設計的邏輯 應該是,當我們一個應用的功能很豐富無法每個功能看上去都是很好用不好決定哪個功能作為默認功能的時候,這時候,我們往往把這個抉擇交個用戶.下面是某種 Tiles設計的實現

[---TITLE---]

[--[TILE]--[TILE]--]

[--[TILE]--[TILE]--]

[--[TILE]--[TILE]--]

...

優點

解決了應用功能非常之多如何對用戶的解釋的問題,讓用戶能夠一目了然的在眾多磚塊里面選擇到自己需要的功能

缺點

功能間的切換不方便,例如,一個用戶在用功能A的時候,想回頭使用功能B,就需要先返回再選擇功能B,然后,想用功能A的時候,再返回,在選擇.如果一個功能的層級有3層,要切換功能就要返回 多次.使用這種風格的應用,切記一個功能的層級不要太深.

參考

flipbard,zarker

Change流

關于這風格的名字著實思考了很久,現在這種風格并不多見.這種風格可以看做是Tabs流和Tiles流的某種合體的實現,上面提到Tabs流的風格 存在無法展示過多功能,Tiles流無法存在無法暫時默認頁面,功能切換麻煩.而Change流正好把這兩點給克服了,下面是某個不存在的應用(g+)的 Change設計的實現

[---Control---]

[-[--LeftPage--]-[--MainPage--]-[--RightPage--]-]

現在這個圖樣,估計不好了解,這里得特地說明一下,Change的設計風格,它把原來的title欄,改造成了可以用于進行交互的 欄,android稱之為actionbar,為了大眾一點我把它改名為控制欄,把title欄改造成控制欄的一個好處就是能夠進行一定的交互,有人可能 會問,tabs流和tiles流的title欄就不可以進行交互了?這里所說的交互是貫穿于整個設計,例如filpboad 的title欄位,可以用作看作用戶詳細信息,但是,這個已經脫離設計以外了,它本質還是一個用于展示當前標題,只不過,在上面添加了一個功能.

說了這么久這個control欄有什么特別的地方呢?control欄可以說是把tabs風格在tiles風格架設了一個橋梁,使一個繼續既然 tabs的功能間方便切換,也能像tiles那樣有豐富的功能進行選擇.這里的實現,就是把我們的主前端分成了三個page,MainPage保留了 tabs 的功能默認暫時,LeftPage則實現了tiles 級別的美觀的功能選擇顯示,而右邊的頁面可以做對MainPage的一些補充顯示.

優點

擁有tabs和tiles風格的優點,去除了它們的缺點.

缺點

對于大屏手機的操作不方便...

參考

不存在的應用: g+,facebook

最后

貌似寫的挺多的,覺得不錯,有就頂一下吧,如果,有不同見解,回復討論!

-同時在oschina,cnblogs 發布...