激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI設(shè)計(jì)應(yīng)該如何有效且充分的利用好空間和布局

發(fā)布時間：2024-02-28 14:16:18 瀏覽量：180次

良好的視覺層次結(jié)構(gòu)并不只是迎合酷炫的視覺效果，它是以用戶的使用性可用，可訪問和邏輯的方式組織信息。UI設(shè)計(jì)中的空間和布局應(yīng)該需要注意那些細(xì)節(jié)？

空間與UI彼此關(guān)系

空間與UI布局和組合相關(guān)，也是設(shè)計(jì)的視覺語言的基本方面，以及顏色，結(jié)構(gòu)和圖像?？臻g有助于設(shè)計(jì)師創(chuàng)造視覺呼吸空間，使用戶希望留在頁面上。并可以創(chuàng)建重要內(nèi)容的重點(diǎn)。

談?wù)揢I設(shè)計(jì)中的空間時，我們通常指的是兩個概念：鄰近和負(fù)空間，或者留白。

UI布局中的鄰近度

鄰近度是UI / UX設(shè)計(jì)中的格式塔理論的設(shè)計(jì)原則。接近原理基于這樣的想法：在屏幕上彼此接近的對象彼此相關(guān)（特別是與那些彼此遠(yuǎn)離的對象相比）。

通常，設(shè)計(jì)將實(shí)現(xiàn)鄰近區(qū)分元素組并為UI元素和圖標(biāo)組創(chuàng)建子層次結(jié)構(gòu)。

UI布局中的留白

留白是屏幕上UI元素之間的空間。充分利用留白有助于消除界面信息承載的擁擠，以便用戶可以更輕松地關(guān)注重要元素和閱讀內(nèi)容（實(shí)際上，留白有助于提高可讀性20％）。

留白不是關(guān)于界面中UI元素的數(shù)量，而是關(guān)于質(zhì)量。過多的元素和信息會導(dǎo)致界面可讀性。

在UI布局設(shè)計(jì)中有效利用空間

如何將空間納入UI布局設(shè)計(jì)因屏幕而異。例如，您可以在主頁上使用大量空白來強(qiáng)調(diào)按鈕，但在列出多個項(xiàng)目的網(wǎng)站上使用較少，例如電子商務(wù)產(chǎn)品頁面。

UI布局對齊

設(shè)計(jì)師構(gòu)建界面時，在畫布上的空間元素對齊，界面會更加整齊。把控元素之間和周圍的空間，創(chuàng)建重點(diǎn)并為用戶界面定義視覺路徑。

組織內(nèi)容和視覺層次結(jié)構(gòu)

視覺層次結(jié)構(gòu)是設(shè)計(jì)中一個有趣的概念。這是用戶處理屏幕上信息的順序。

設(shè)計(jì)時需要注意視覺層次結(jié)構(gòu)，以確保用戶可以輕松地查找和理解信息。

以下是應(yīng)考慮的視覺特性，以使其屏幕盡可能可讀和可用：

  • 1）鄰近 – 放置相關(guān)元素有助于信息劃分；
  • 2）空白 – 適量的空白可以幫助突出重要內(nèi)容；
  • 3）大小 – 大小對比有利于用戶對界面信息的接受；
  • 4）顏色 – 明亮的顏色更容易捕捉視覺（具體根據(jù)產(chǎn)品設(shè)計(jì)語言定義）；
  • 5）對比 – 用戶容易被突出的信息吸引到；
  • 6）對齊 – 界面創(chuàng)建更清晰，增強(qiáng)可讀性；
  • 7）重復(fù) – 重復(fù)一致性并有助于將元素聯(lián)系在一起。

黃金比例黃金比例是各方之間的比為1：1.618。

1）畫一個正方形;

2）從正方形的中間（A）畫一個對角線到對角（B）。

3）得到的對角線是弧的半徑。畫圓圈得到一個矩形。由此產(chǎn)生的正方形和矩形的形狀是“黃金矩形”。

4）如果我們在大小矩形中對角繪制，那么在交點(diǎn)處我們得到一個“焦點(diǎn)”。最重要的界面對象放在這一點(diǎn)附近，以吸引用戶的注意力。

5) 如果在半徑等于正方形邊的圓弧的每個正方形中，我們得到“黃金螺旋”。

6) 可以旋轉(zhuǎn)矩形并將其調(diào)整到所需的畫布和界面的大小。

案例一：以下電商的卡片產(chǎn)品。如果采用“黃金矩形”，那么如何放置元素就變得很明顯了。該結(jié)構(gòu)使得可以在第一屏幕上顯示最合適的用戶數(shù)據(jù)。

可以看到，在“焦點(diǎn)”中，我們有“保存到收藏夾”操作，這是應(yīng)用程序中的關(guān)鍵操作之一。

元素很大，位于彼此之間和屏幕邊緣之間的舒適距離內(nèi)，也可以方便操作，即保障界面信息承載量，有解決了，美觀和易操作性。

案例二：社交類產(chǎn)品界面。頂部大圖和諸多文字以及icon界面信息基于黃金比例處理方式。

右下角的“喜歡”和“評論”元素的位置對界面整體協(xié)調(diào)性。

在這里我相信有很多想要學(xué)習(xí)UI設(shè)計(jì)的小伙伴，我自己是一名從事了多年UI設(shè)計(jì)工作的設(shè)計(jì)師，辭職目前在做自己的私人定制課程，今年年初我花了一個月時間整理了一份最適合2019年學(xué)習(xí)的學(xué)習(xí)干貨，從最基礎(chǔ)到實(shí)戰(zhàn)都有整理，送給每一位想學(xué)習(xí)的小伙伴，想要獲取的可以關(guān)注然后私信我“學(xué)習(xí)”兩個字，即可免費(fèi)獲取資料，伸手黨勿擾~

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定