之前寫過一篇文章（你可能忽略了這些能提升設(shè)計(jì)感的小細(xì)節(jié)），這篇文章就是講了一些小圖形在設(shè)計(jì)排版中的極大作用，那今天來看下形狀對設(shè)計(jì)的影響。

形狀的基礎(chǔ)概念

我們?nèi)粘Ｉ钪兴私獾男螤罡魇礁鳂拥?，對我們生活影響極其大，比如地下水井蓋為何做成圓形，電線桿的外形為何是圓形，高鐵火車頭前面為何是尖尖的，而不是方形等等，那么在產(chǎn)品界面設(shè)計(jì)中，形狀對它的影響也是極其大，每一種樣式所傳達(dá)的感受是不同的，黃金矩形、平行四邊形、圓形、三角形，其他不規(guī)則圖形，我把它們分為這幾大類。

下面我們就開始來進(jìn)一步了解這些形狀在布局設(shè)計(jì)中的作用

為什么形狀對設(shè)計(jì)影響如此大

我們首先要清楚圖形也是設(shè)計(jì)語言構(gòu)成的主要成分，在圖標(biāo)中，輔助圖形等等用的如此之多，下面看一些例子

下圖是我拆解的對比圖：

左邊和右邊相比是不是感覺右邊瞬間空了很多，左邊的設(shè)計(jì)布局更加新潮。傳達(dá)出一種很活躍新穎的趨勢感受

方形和圓形按鈕，那個(gè)感受更好一些呢，從我這邊理解來看，本身后面圖形就是黃金矩形，那么如果按鈕再來一個(gè)方形，就會(huì)顯得畫面略顯呆板，那么換成圓形按鈕，感受就會(huì)不一樣，會(huì)給提升一些設(shè)計(jì)細(xì)節(jié)

上面案例設(shè)計(jì)圖，分別在不居中使用斜切、四邊形、不規(guī)則圖形、和半圓形，有時(shí)候我們其實(shí)可以思考為何別人做的設(shè)計(jì)第一感官就是很舒服，看著覺得很新潮，其實(shí)這些在新潮的設(shè)計(jì)，都離不開圖形的組合運(yùn)用。萬變不離其宗，圖形也是構(gòu)成設(shè)計(jì)語言的基礎(chǔ)要素，所以設(shè)計(jì)中有著極大的作用

在網(wǎng)頁中的運(yùn)用

這種打破常規(guī)的構(gòu)圖技巧，給整個(gè)設(shè)計(jì)增添許多靈魂與新潮感

如何把這些圖形運(yùn)用到我們線上產(chǎn)品

前面我們了解到這些圖形在版面設(shè)計(jì)中，產(chǎn)品設(shè)計(jì)中的運(yùn)用，那么我們?nèi)绾翁崛∷悸愤\(yùn)用到我們現(xiàn)有的產(chǎn)品線來?？梢詠硐瓤茨壳耙呀?jīng)上線的案例

上面幾個(gè)案例我可以看出，這種形狀目前已經(jīng)慢慢在一些應(yīng)用中開始盛行起來，能通過這種手法來區(qū)分競品，形成用戶感知的記憶點(diǎn)，同時(shí)能給產(chǎn)品提升需要好的口碑

蘋果每次做設(shè)計(jì)改版時(shí)候 都做了一些新的嘗試，比如計(jì)算器圖形的改變，appstore里面大卡片的運(yùn)用，差不多3:4的一個(gè)設(shè)計(jì)

總結(jié)：提取設(shè)計(jì)思路

從上面一些案例我們分析得出一些設(shè)計(jì)方案運(yùn)用到我們設(shè)計(jì)中去，增加一些產(chǎn)品設(shè)計(jì)亮點(diǎn)。

上面我簡單列舉一些例子。當(dāng)然，我們在做的時(shí)候 一定要集合整個(gè)產(chǎn)品的基礎(chǔ)設(shè)計(jì)語言特征，去運(yùn)用這些圖形組合方式。

1. 打破常規(guī)的圖形色彩組合布局，并不是單一的圖形層疊，而是更加年輕化，新潮
2. 圖形斜切，黃金矩形的使用，半圓弧，不規(guī)則圖形等等，增添畫面設(shè)計(jì)感

推薦閱讀

下面是一些關(guān)于設(shè)計(jì)排版文章，歡迎閱讀：

《大小與重復(fù)在產(chǎn)品設(shè)計(jì)中的運(yùn)用》

提升產(chǎn)品UX體驗(yàn)的一些排版設(shè)計(jì)原則

最后希望能幫助到大家，一起進(jìn)步~

#專欄作家#

Tony，微信公眾號：洞見設(shè)計(jì)，人人都是產(chǎn)品經(jīng)理專欄作家。百度設(shè)計(jì)師。很樂意幫助年輕設(shè)計(jì)師成長，簡歷指導(dǎo)，每周分享最有價(jià)值的設(shè)計(jì)經(jīng)驗(yàn)，擅長產(chǎn)品體驗(yàn)設(shè)計(jì)，關(guān)注【洞見設(shè)計(jì)】后臺回復(fù)“彩蛋”領(lǐng)取設(shè)計(jì)資料。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議