UI不得不知的app設計布局之道(dào)

俗話說的好(hǎo)，好(hǎo)的設計來自于對(duì)生活的細心觀察。同樣(yàng)移動互聯網産品設計同樣(yàng)要符合現實中生活習慣和認知習慣。畢竟移動互聯網是現實生活的衍生。

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

那是哪七個字呢？

移動APP布局設計第一訣：聚

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

移動APP布局設計第二訣： 藏

聚和藏有點類似，前者偏向(xiàng)歸類，後(hòu)者偏向(xiàng)隐而不見。

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

（1）有形的控件：如按鈕、标簽、菜單、導航…

（2）手勢與重力感應：長(cháng)按删除、橫滑翻頁、搖一搖都(dōu)是這(zhè)一類；

（3）操作路徑：把不常用的功能(néng)或設置項藏得深一點，通過(guò)層層遞進(jìn)達到目的。

移動APP布局設計第三訣：合

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

移動APP布局設計第四訣：分

常言道(dào)：有合必有分。這(zhè)話說的真不錯！那麼(me)在移動APP設計中是如何體現分的呢？

分在簡單收納的基礎上，如果將(jiāng)空間繼續細化，分割成(chéng)不同的“小塊”，會(huì)使得擺放更有秩序。比如利用網頁設計中的設計技巧：九宮格、栅格、區域劃分…如果小屏幕裡(lǐ)靈活運用這(zhè)些格子組合會(huì)讓界面(miàn)顯得更加完整！

移動APP布局設計第五訣：換

當我們聚、藏、合、分都(dōu)不适用的時候，你會(huì)想到什麼(me)呢？那就是換。

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

手機屏幕空間非常有限，一塊小小的角落都(dōu)可以成(chéng)爲兵家必争之地，通過(guò)共享空間的利用，可以完成(chéng)多個界面(miàn)的跳轉及不同狀态之間的切換。Tab、slide page、還(hái)有各種(zhǒng)翻轉切換都(dōu)是通過(guò)空間共享的方式承載不同的信息。

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

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

本文名稱：UI不得不知的app設計布局之道(dào)
URL鏈接：

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有App設計等

廣告

聲明：本網站發(fā)布的内容（圖片、視頻和文字）以用戶投稿、用戶轉載内容爲主，如果涉及侵權請盡快告知，我們將(jiāng)會(huì)在第一時間删除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。内容未經(jīng)允許不得轉載，或轉載時需注明來源： 創新互聯