界面設(shè)計(jì):為什么你的布局很平庸?

3 評論 9038 瀏覽 88 收藏 7 分鐘

在產(chǎn)品界面設(shè)計(jì)中,形對設(shè)計(jì)有很大的影響,每一種樣式所傳達(dá)的感受是不同的:黃金矩形、平行四邊形、圓形、三角形以及其他不規(guī)則圖形。本文筆者對形的運(yùn)用和相關(guān)設(shè)計(jì)思路進(jìn)行了梳理分析,供大家參考和學(xué)習(xí)。

形的基礎(chǔ)概念

我們?nèi)粘I钪兴私獾男螤罡魇礁鳂拥?,對我們生活影響極其大,比如地下水井蓋為何做成圓形,電線桿的外形為何是圓形,高鐵火車頭前面為何是尖圓形的而不是方形等等,這些日常生活中的設(shè)計(jì)你有趣思考過嗎。

那么在產(chǎn)品界面設(shè)計(jì)中,形對它的影響也是極其大,每一種樣式所傳達(dá)的感受是不同的,黃金矩形、平行四邊形、圓形、三角形,其他不規(guī)則圖形。

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

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

我們首先要清楚圖形也是設(shè)計(jì)語言構(gòu)成的主要成分。在圖標(biāo)中,輔助圖形等等用的如此之多,更何況Google Materials 材料語言已經(jīng)把圖形納入設(shè)計(jì)系統(tǒng)規(guī)范里面了,可以看出他的重要性,下面看一些例子。

下圖是我拆解的對比圖:

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

方形和圓形按鈕,那個(gè)感受更好一些呢,從我這邊理解來看,本身后面圖形就是黃金矩形,那么如果按鈕再來一個(gè)方形,就會顯得畫面略顯呆板,那么換成圓形按鈕,感受就會不一樣,會給提升一些設(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)用

前面我們了解到這些圖形在版面設(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)用。就是不斷通過一些形去強(qiáng)化用戶感知,打造產(chǎn)品記憶點(diǎn)。

提取設(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ì)感

如果你喜歡我的文章,歡迎點(diǎn)贊和轉(zhuǎn)發(fā),感謝大家!

#專欄作家#

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)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 形態(tài)是視覺上的感受,其目的在于引導(dǎo),其引導(dǎo)源于對內(nèi)容的尋求。形式不單單是形,形式如何,更關(guān)乎于內(nèi)容。

    回復(fù)
  2. 作者接私單嗎?

    回復(fù)
  3. 很有啟發(fā),感謝分享~

    來自北京 回復(fù)