常用的移動(dòng)端設(shè)計(jì)布局形式:不規(guī)則弧線布局、層疊式布局、網(wǎng)格偏出布.....
隨著扁平化1.0運(yùn)用了兩三年,新的扁平化2.0時(shí)代,在漸變流行打破了開端,這周研究一些扁平化2.0設(shè)計(jì)師的移動(dòng)端設(shè)計(jì)布局形式,整理分析了一些常用的布局形態(tài)。
1、不規(guī)則弧線布局
17年在很多新的設(shè)計(jì)趨勢(shì)里面有種風(fēng)格,一般常在頁(yè)面頭部才用不規(guī)則弧線幾何圖形的形式作為頭部主視覺(jué),區(qū)別于傳統(tǒng)長(zhǎng)方形,形成設(shè)計(jì)差異性,同時(shí)在不規(guī)則弧線處理上常用和頭圖或者插畫進(jìn)行結(jié)合,有時(shí)候也會(huì)采用線條形式出現(xiàn)。
簡(jiǎn)析:這3張作品,第一張?jiān)谖业捻?yè)面頂部頭圖采用波浪弧線設(shè)計(jì)很好的和背后森林融合,第二張圖也是類似原理,第三張?jiān)趥?cè)邊欄采用插畫風(fēng)格。
簡(jiǎn)析 :除了運(yùn)用到菜單欄,播放頁(yè)面,在引導(dǎo)頁(yè)上也可以采用這種流行線條對(duì)引導(dǎo)頁(yè)面內(nèi)容進(jìn)行串聯(lián),形容故事性。
簡(jiǎn)析 :除了在移動(dòng)端運(yùn)用,在網(wǎng)頁(yè)和產(chǎn)品頁(yè)面也很多采用這種風(fēng)格,讓產(chǎn)品網(wǎng)站看起來(lái)沒(méi)有那么單調(diào)枯燥。
2、層疊式布局
類似谷歌材料設(shè)計(jì)和通過(guò)卡片和投影感覺(jué)來(lái)營(yíng)造層疊效果,長(zhǎng)距離大范圍的投影設(shè)計(jì),投影色為按鈕元素中淺色,觸感呼之欲出 。
簡(jiǎn)析 :圖1在書籍封面上采用封面和背景,和消息留這種視覺(jué)錯(cuò)差營(yíng)造布局空間感,圖2,大的專輯封面長(zhǎng)圖和背景很好的融合,圖3,卡片滑動(dòng)時(shí)候的層疊效果。
簡(jiǎn)析 :卡片通過(guò)加大后面卡片厚度集合大投影是目前一種主流手法,包括圖3的日歷當(dāng)天有提醒時(shí)候也是卡片調(diào)出感覺(jué),瞬間和競(jìng)品拉開差異性。
簡(jiǎn)析 :大投影除了運(yùn)用在按鈕和卡片上,同時(shí)在列表上,信息流卡片上也同樣適合運(yùn)用。
3、網(wǎng)格偏出布局
一般文字在網(wǎng)格圖片的空間里面偏左或偏右,偏移于頁(yè)面主體,或者幾何圖形在頁(yè)面背后或者和頁(yè)面重疊,營(yíng)造一種破形感覺(jué)。
簡(jiǎn)析 :這種風(fēng)格打破網(wǎng)格,圖片局部展示,很好的在平面有序的空間里形成了視覺(jué)差異性,這種差異性往往讓頁(yè)面顯得獨(dú)特,但是需要注意頁(yè)面的留白和字體的運(yùn)用選擇。
4、異形導(dǎo)航布局
平臺(tái)的規(guī)范越來(lái)越模糊,最近的很多app改變?cè)趪L試去打破傳統(tǒng)邊界去做出強(qiáng)的差異性,很多app在導(dǎo)航上做出了類似菜單上,頂部導(dǎo)航上出現(xiàn)了類型path當(dāng)年的創(chuàng)新,那種驚艷的交互和視覺(jué)形式。
簡(jiǎn)析 :最新的設(shè)計(jì)風(fēng)向中,傳統(tǒng)的導(dǎo)航tab和底部導(dǎo)航,傳統(tǒng)宮格布局這種規(guī)范邊界越來(lái)越模糊,用戶也在前篇一律的設(shè)計(jì)中對(duì)這種設(shè)計(jì)也比較能接受。
圖1,頂部導(dǎo)航運(yùn)用車的流動(dòng)線條h,返回按鈕用的車燈形狀,符合產(chǎn)品定位和氣質(zhì),圖2,主導(dǎo)航采用4個(gè)流動(dòng)的氣泡,圖3,選擇歌曲運(yùn)用圓盤設(shè)計(jì),新穎。
簡(jiǎn)析:菜單設(shè)計(jì),列表卡片設(shè)計(jì),包括提示氣泡,滑動(dòng)刪除這些操作在扁平化2.0里面都是可以被打破的。
5、云視差布局
利用現(xiàn)實(shí)生活中體驗(yàn),利用手機(jī)硬件陀螺儀來(lái)做視覺(jué)空間視差,目前我們天貓banner是個(gè)嘗試,這種運(yùn)用在banner,互動(dòng)游戲,地圖,以及未來(lái)概念設(shè)計(jì)比較多,未來(lái)AR/VR交互會(huì)很多往這個(gè)方向發(fā)展。
6、對(duì)角線布局
對(duì)角線布局在頁(yè)面可視空間內(nèi)通過(guò)對(duì)角線的連接,形成一種視角線,這種設(shè)計(jì)能和普通的設(shè)計(jì)在板式上快速拉開差異性。
簡(jiǎn)析 :slack的官網(wǎng)上主banner圖形采用的這種設(shè)計(jì)方法,讓主頁(yè)更有空間感。
簡(jiǎn)析 :國(guó)外設(shè)計(jì)公司網(wǎng)站在主頁(yè)突出他們服務(wù)也是采用類似構(gòu)圖方法。
簡(jiǎn)析 :Floatable官網(wǎng)設(shè)計(jì)時(shí)候采用對(duì)角線和人物層疊的形式很好的凸顯的時(shí)尚感。
簡(jiǎn)析 :House Decor的后臺(tái)設(shè)計(jì)很好的通過(guò)對(duì)角線布局來(lái)體現(xiàn)去空間感和儀式感。
簡(jiǎn)析 :REECH在頁(yè)面設(shè)計(jì)時(shí)候運(yùn)用對(duì)角線作為深色,同時(shí)結(jié)合流動(dòng)的線條凸顯主營(yíng)業(yè)務(wù)和速度感。
總結(jié)
不規(guī)則弧線布局
常在頁(yè)面頭部才用不規(guī)則弧線幾何圖形的形式作為頭部主視覺(jué),區(qū)別于傳統(tǒng)長(zhǎng)方形,形成設(shè)計(jì)差異性,同時(shí)在不規(guī)則弧線處理上常用和頭圖或者插畫進(jìn)行結(jié)合,有時(shí)候也會(huì)采用線條形式出現(xiàn)。
層疊式布局
類似谷歌材料設(shè)計(jì)和通過(guò)卡片和投影感覺(jué)來(lái)營(yíng)造層疊效果,長(zhǎng)距離大范圍的投影設(shè)計(jì),投影色為按鈕元素中淺色,觸感呼之欲出。
網(wǎng)格偏出布局
一般文字在網(wǎng)格圖片的空間里面偏左或偏右,偏移于頁(yè)面主體,或者幾何圖形在頁(yè)面背后或者和頁(yè)面重疊,營(yíng)造一種破形感覺(jué)。
異形導(dǎo)航布局
平臺(tái)的規(guī)范越來(lái)越模糊,最近的很多app改變?cè)趪L試去打破傳統(tǒng)邊界去做出強(qiáng)的差異性,很多app在導(dǎo)航上做出了類似菜單上,頂部導(dǎo)航上出現(xiàn)了類型path當(dāng)年的創(chuàng)新,那種驚艷的交互和視覺(jué)形式。
云視差布局
利用現(xiàn)實(shí)生活中體驗(yàn),利用手機(jī)硬件陀螺儀來(lái)做視覺(jué)空間視差,目前我們天貓banner是個(gè)嘗試,這種運(yùn)用在banner,互動(dòng)游戲,地圖,以及未來(lái)概念設(shè)計(jì)比較多,未來(lái)AR/VR交互會(huì)很多往這個(gè)方向發(fā)展。
對(duì)角線布局
對(duì)角線布局在頁(yè)面可視空間內(nèi)通過(guò)對(duì)角線的連接,形成一種視角線,這種設(shè)計(jì)能和普通的設(shè)計(jì)在板式上快速拉開差異性。
文 / sky 小密圈:sky的設(shè)計(jì)日記
我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對(duì)接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn),每一個(gè)項(xiàng)目承諾做到滿意為止,多一次對(duì)比,一定讓您多一份收獲!