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

1 評論 19051 瀏覽 144 收藏 8 分鐘

本期和大家聊下 UI 設(shè)計中提升產(chǎn)品UX體驗一些排版設(shè)計原則,下面進(jìn)入正題(備注:以下舉例圖片均來源于網(wǎng)絡(luò))。

本期和大家聊下 UI 設(shè)計中的一些排版的設(shè)計原理,作為 UI/UX 設(shè)計師,如何更佳有規(guī)律的去掌握排版設(shè)計能力,這樣能保證你在設(shè)計中的界面處理能力到達(dá)一個長期穩(wěn)定的水準(zhǔn),而不是時好時壞,下面進(jìn)入正題(備注:以下圖片均來源于網(wǎng)絡(luò))。

UI排版設(shè)計 4 大原則

  • 視覺焦點
  • 層次結(jié)構(gòu)
  • 視覺重量
  • 視覺方向

視覺焦點

視覺焦點就是在界面中占主導(dǎo)地位的視覺元素,第一時間進(jìn)入你眼睛,在整個設(shè)計中你不能強(qiáng)調(diào)所有設(shè)計元素。

上圖的界面中作者通過色塊來強(qiáng)調(diào)重要的日期選項記事,這樣能吸引你的注意力,關(guān)鍵重要元素高亮顯示。

這個選座購票中中間座位元素都是同一個,但是選中后的效果突出,形成視覺焦點,右邊的異常界面提示按鈕形成焦點。

這是反面例子,右邊界面所有元素看起來都很重要,沒有一個明確的視覺方向指引,看起來有顏色的都能點擊?

層次結(jié)構(gòu)

在幾秒鐘內(nèi),用戶就能明確知道要點和頁面元素之間的關(guān)系,并且順利完成當(dāng)前任務(wù)。建立視覺層次結(jié)構(gòu)可以通過大小,對比,顏色,肌理,留白,空間,可感知的視覺重要,好的設(shè)計它的視覺層次結(jié)構(gòu)分明且符合用戶閱讀習(xí)慣。

界面中的視覺關(guān)系我標(biāo)注出來了,我們可以思考別人作品是通過什么來表達(dá)這種層次關(guān)系。其實可以直觀看出運用有顏色、大小,明暗對比(列表文字關(guān)系)。

頂部視覺焦點第一也是導(dǎo)航比較重要的一部分,下面介紹設(shè)計師和聯(lián)系圖標(biāo),右邊頁面頂部視覺重量大,里面文字通過明暗關(guān)系區(qū)分層級。

視覺重量

如何去衡量視覺重量,影響視覺重量的因素有大小、對比、顏色、留白、形狀、位置等等,那么在一個界面中如何把握視覺重量的比例,下面看幾個例子:

大家看完有什么感受嗎?他們大小都是120px。

  • 第一個例子為何左邊看起來比右邊大
  • 第二個例子為何黑色視覺重量比較大
  • 第三個例子為何紅紫色比左邊方塊更吸引眼球

上面三個場景我們會在界面中,圖標(biāo)設(shè)計中會經(jīng)常遇到,下圖是調(diào)整后的大小左邊方形大小是108px右邊圓形還是120px

圖左邊為何我會第一時間留意中間logo 而不是大面積的藍(lán)紫色,因為留白,周圍沒有任何元素。圖右邊按鈕第一時間吸引我,這就是通過顏色來吸引我的視覺焦點,需要關(guān)注的重點的地方

圖左邊購買按鈕和評分,購買按鈕第一進(jìn)入眼睛,黑色在白底上視覺重量比較大。圖右邊選座購票區(qū)域,都是圓形,通過顏色來區(qū)分他們之間的層級關(guān)系,重要的內(nèi)容通過顏色強(qiáng)調(diào),次要的通過明暗關(guān)系來表達(dá)

視覺方向

前面講了視覺重量,它能第一時間把你帶到特定重要的位置,那么接下來視覺方向是引導(dǎo)的一個作用,設(shè)計師要做的就是通過視覺引導(dǎo),讓用戶能快速完成任務(wù)和達(dá)到預(yù)期目標(biāo),常用的視覺引導(dǎo)有Fpattern 和 Zpattern,下面來和大家詳細(xì)說下

左邊圖標(biāo)和右邊列表形成一個豎向軸的概念,那么就會有線,線連接元素的方向。右圖再看下形成Z字結(jié)構(gòu) ,就是我們說的Z模式

上圖6個功能入口的圖標(biāo)水平排列,內(nèi)部系統(tǒng)的建立一個平行軸的關(guān)系,所以視覺方向比較清晰

總的來說要形成視覺方向就需要有線,這條線是看不見摸不著,他是通過軸來形成。如何形成軸的概念,那通過對齊,相同形狀元素

總結(jié)

上面一共說了UI排版中常用的四大排版設(shè)計原則,綜合使用能給排版設(shè)計帶來質(zhì)的提升,視覺焦點、層次結(jié)構(gòu)、視覺重量,三者相互影響,最后視覺方向是前面三者影響的結(jié)構(gòu),用戶能否順利在你的產(chǎn)品完成任務(wù),達(dá)到預(yù)期目標(biāo),全靠視覺方向指引,那么這些我們通過大小、對比、顏色、留白、形狀、位置等來協(xié)調(diào)使用他們

推薦閱讀

APP設(shè)計中,小圖標(biāo)的使用場景分析

 

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

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!