移動APP布局設計經驗之道:獨門七字訣

俗話說的好,好的設計來自于對生活的細心觀察。同樣移動互聯(lián)網產品設計同樣要符合現實中生活習慣和認知習慣。畢竟移動互聯(lián)網是現實生活的衍生。

無聊是我們在電視電影中所看到的武俠動作片。總有一些大師擁有著絕世武功或是獨家秘訣。我想在移動APP布局設計中,也有一些設計大師掌握著APP布局設計之道-獨門七字口訣。

那是哪七個字呢?

動APP布局設計第一訣:聚

聚即聚攏、收納,最樸實的節(jié)省空間的方式之一,歸類之一。手機界面尺寸比較小,又要考慮符合手指點擊的面積,所以往往不會像web頁面中把詳細分類及信息全都鋪出來,導航條也不會像web界面設計中的細長的一條,只能精簡內容顯示最常用的幾個版塊。

index

 

移動APP布局設計第二訣:?

聚和藏有點類似,前者偏向歸類,后者偏向隱而不見。

移動APP設計中常用的隱藏元素有以下三類:  

(1)有形的控件:如按鈕、標簽、菜單、導航…

(2)手勢與重力感應:長按刪除、橫滑翻頁、搖一搖都是這一類;

(3)操作路徑:把不常用的功能或設置項藏得深一點,通過層層遞進達到目的。

in2

 

 

移動APP布局設計第三訣:

我們講完聚,藏之后,是不是考慮到有些時候也有組合一些或者是合并一些相同的元件或功能。比如移動APP設計中的合并也常常見于各種組件的組合,如輸入框與標簽、導航與下拉菜單、網址欄的輸入框與取消/刷新按鈕等。

APphe

 

 

移動APP布局設計第四訣:

常言道:有合必有分。這話說的真不錯!那么在移動APP設計中是如何體現分的呢?

分在簡單收納的基礎上,如果將空間繼續(xù)細化,分割成不同的“小塊”,會使得擺放更有秩序。比如利用網頁設計中的設計技巧:九宮格、柵格、區(qū)域劃分…如果小屏幕里靈活運用這些格子組合會讓界面顯得更加完整!

13-flat-mobile-interface

 

移動APP布局設計第五訣:

當我們聚、藏、合、分都不適用的時候,你會想到什么呢?那就是換。

換即替換之意,即合理利用共享空間交替展現。

手機屏幕空間非常有限,一塊小小的角落都可以成為兵家必爭之地,通過共享空間的利用,可以完成多個界面的跳轉及不同狀態(tài)之間的切換。Tab、slide page、還有各種翻轉切換都是通過空間共享的方式承載不同的信息。

4196_131226125212_1

 

移動APP布局設計第六訣:擠

移動設計的擠壓案例也特別多。ios4新增的inbox展示方式就是一種自上而下的擠壓處理,除此之外,facebook和path的從左往右的擠壓布局最近也特別流行。現在最流行的就是抽屜式設計。或者多態(tài)按鈕設計。

 

 

 

1362990168_5233

 

 

移動APP布局設計第七訣:

順的意思就是我們在設計APP的時候,可以直接利用智能手機現有的邊角或邊緣位置,順著這些特殊的“點”進行設計。下面的這種組合書架緊靠兩側墻面轉角位,這種順著拐點的巧妙設計可以為墻面節(jié)省更多的空間。

比如:1)屏幕邊緣 ?。?)角落 ?。?)控件邊緣 ?。?)系統(tǒng)狀態(tài)欄等

可以看看一些很棒的Android和iPhone等鎖屏UI界面設計欣賞。

 

總之: 移動交互設計無處不在。在我們的日常工作中,很多地方都可以借鑒到生活中積累的經驗。這移動APP布局設計之獨門的七字訣:聚、藏、合、分、換、擠、順,值得永遠牢記?。。?!

這APP設計七字訣可以算是真正的干貨!歡迎大家多多分享!

每天更新,
全站高品質素材免費下載!