南順網絡

最實用的(de)扁平化2.0設計布局簡析

1、不規則弧線布局

17 年(nián)在很多新的(de)設計趨勢裏面有種風格，一(yī)般常在頁面頭部才用不規則弧線幾何圖形的(de)形式作為(wèi)頭部主視(shì)覺，區别于傳統長(cháng)方形，形成設計差異性，同時在不規則弧線處理(lǐ)上常用和(hé)頭圖或者插畫進行結合，有時候也會采用線條形式出現

2、層疊式布局

類似谷歌材料設計和(hé)通過卡片和(hé)投影感覺來營造層疊效果，長(cháng)距離(lí)大範圍的(de)投影設計，投影色為(wèi)按鈕元素中淺色，觸感呼之欲出 。

簡析：圖 1 在書籍封面上采用封面和(hé)背景，和(hé)消息留這種視(shì)覺錯差營造布局空間感，圖2，大的(de)專輯封面長(cháng)圖和(hé)背景很好的(de)融合，圖3，卡片滑動時候的(de)層疊效果

簡析：卡片通過加大後面卡片厚度集合大投影是目前一(yī)種主流手法，包括圖 3 的(de)日曆當天有提醒時候也是卡片調出感覺，瞬間和(hé)競品拉開差異性。簡析：大投影除了運用在按鈕和(hé)卡片上，同時在列表上，信息流卡片上也同樣适合運用。

3、網格偏出布局

一(yī)般文字在網格圖片的(de)空間裏面偏左或偏右，偏移于頁面主體，或者幾何圖形在頁面背後或者和(hé)頁面重疊，營造一(yī)種破形感覺。

簡析：這種風格打破網格，圖片局部展示，很好的(de)在平面有序的(de)空間裏形成了視(shì)覺差異性，這種差異性往往讓頁面顯得獨特，但是需要注意頁面的(de)留白和(hé)字體的(de)運用選擇。

4、異形導航布局

平台的(de)規範越來越模糊，最近的(de)很多app改變在嘗試去(qù)打破傳統邊界去(qù)做(zuò)出強的(de)差異性，很多app在導航上做(zuò)出了類似菜單上，頂部導航上出現了類型path當年(nián)的(de)創新，那種驚豔的(de)交互和(hé)視(shì)覺形式。

簡析：最新的(de)設計風向中，傳統的(de)導航tab和(hé)底部導航，傳統宮格布局這種規範邊界越來越模糊，用戶也在前篇一(yī)律的(de)設計中對這種設計也比較能接受。

圖1，頂部導航運用車的(de)流動線條h，返回按鈕用的(de)車燈形狀，符合産品定位和(hé)氣質，圖2，主導航采用 4 個流動的(de)氣泡，圖3，選擇歌曲運用圓盤設計，新穎。簡析：菜單設計，列表卡片設計，包括提示氣泡，滑動删除這些操作在扁平化2. 0 裏面都是可(kě)以被打破的(de)。

5、雲視(shì)差布局

利用現實生活中體驗，利用手機硬件陀螺儀來做(zuò)視(shì)覺空間視(shì)差，目前我們天貓banner是個嘗試，這種運用在banner,互動遊戲，地(dì)圖，以及未來概念設計比較多，未來AR/VR交互會很多往這個方向發展。

6、對角線布局

對角線布局在頁面可(kě)視(shì)空間內(nèi)通過對角線的(de)連接，形成一(yī)種視(shì)角線，這種設計能和(hé)普通的(de)設計在闆式上快速拉開差異性

簡析：slack的(de)官網上主banner圖形采用的(de)這種設計方法，讓主頁更有空間感。

簡析：國外設計公司網站在主頁突出他們服務也是采用類似構圖方法

簡析：Floatable官網設計時候采用對角線和(hé)人物層疊的(de)形式很好的(de)凸顯的(de)時尚感。

簡析：House Decor的(de)後台設計很好的(de)通過對角線布局來體現去(qù)空間感和(hé)儀式感。

簡析：REECH在頁面設計時候運用對角線作為(wèi)深色，同時結合流動的(de)線條凸顯主營業務和(hé)速度感。

編輯:--ns868