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

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

學(xué)習(xí)UI設(shè)計(jì)，這樣的排版技巧不學(xué)就虧了

發(fā)布時(shí)間：2024-03-14 15:53:29 瀏覽量：117次

作者：Sky



隨著今天互聯(lián)網(wǎng)發(fā)生翻天覆地的變化，我們不斷學(xué)習(xí)新的工具和技巧，容易忘掉一些基礎(chǔ)的視覺原則，但是好的設(shè)計(jì)趨勢和風(fēng)格都是建立在基礎(chǔ)視覺原則基礎(chǔ)上，這些規(guī)則是設(shè)計(jì)的一切，那我們今天來聊聊，還有哪些技巧是可以加強(qiáng)視覺層次的。


一、運(yùn)用分組建立層次



在設(shè)計(jì)中，相鄰的元素比分開較遠(yuǎn)的元素會(huì)更加吸引人注意，在做設(shè)計(jì)閱讀順序的時(shí)候，利用設(shè)計(jì)分組是一個(gè)非常有效的方法，將不同信息進(jìn)行視覺間距分組，能提升用戶對(duì)于內(nèi)容上的理解。


如上圖slack的設(shè)計(jì)，插畫引導(dǎo)圖和底部按鈕上面文字拉開了距離，使得內(nèi)容更聚焦。第二個(gè)界面的頂部頭像和下面的文字也是通過分組形成了對(duì)比。



stadium-live的產(chǎn)品設(shè)計(jì)上，登錄頁面按鈕為一組，頂部品牌LOGO和slogan一組，人物為一組，每組信息之間分組非常清晰，每一組都不會(huì)對(duì)對(duì)方視覺互相干擾，間距非常合理，用戶閱讀從一組信息到另外一組信息也很清晰。


后面兩張頁面也是如此，頂部的導(dǎo)航，和下面表單信息，以及頭像和底部按鈕，通過分組處理，內(nèi)容更加符合用戶的視覺動(dòng)線。



在球員定制的處理上，最左邊那張圖，通過卡片和線條分組處理，從視覺上很清晰的看見排名，哪個(gè)球隊(duì)和哪個(gè)球隊(duì)之間比賽。



當(dāng)一組信息比較接近，證明必須是有關(guān)聯(lián)的，如果距離比較遠(yuǎn)，這意味著這組信息和他們是不同的，簡單來說，通過鄰近性，通過分組創(chuàng)造這些關(guān)系，為信息帶來層次。


二、運(yùn)用空白建立層次



空白也是視覺設(shè)計(jì)元素，并不是留白就是空著，如果設(shè)計(jì)中留白運(yùn)用合理，可以幫助用戶理解很多信息，因此任何設(shè)計(jì)都需要通過適當(dāng)?shù)呢?fù)空間來傳遞信息。如上圖我喜歡的一個(gè)應(yīng)用classpass設(shè)計(jì)非常極簡，頁面中大量運(yùn)用留白來凸顯內(nèi)容。



classpass的設(shè)計(jì)不會(huì)使用太多的視覺元素，而是運(yùn)用留白把內(nèi)容進(jìn)行分組，每個(gè)頁面的留白恰到好處，同時(shí)留白本身就是對(duì)信息進(jìn)行分組，所以頁面中減少了很多線條使用，頁面會(huì)更加干凈有品質(zhì)感。



must是一款電影軟件，整體設(shè)計(jì)非常雜志感，頁面就是通過圖文處理，以及留白空間的處理，增加對(duì)比，基本產(chǎn)品體驗(yàn)?zāi)悴粫?huì)感覺到視覺負(fù)擔(dān)，元素之間的信息組織的非常清晰。



在電影展示頁面，信息的處理，以及打分設(shè)計(jì)上，重復(fù)運(yùn)用留白來處理信息層級(jí)，在設(shè)計(jì)中，當(dāng)你元素周圍留白越多，它產(chǎn)品的注意力也越強(qiáng)，如右邊的打分頁面，幾乎所有焦點(diǎn)都在這個(gè)彈窗上。



artsy是一款藝術(shù)品電商網(wǎng)站，整個(gè)app的設(shè)計(jì)也充滿了藝術(shù)氣息，每次我設(shè)計(jì)找不到感覺時(shí)候就會(huì)去打開看看，里面的排版，還有設(shè)計(jì)的細(xì)節(jié)處理，都值得我學(xué)習(xí)，但我喜歡的還是他對(duì)于板式和留白空間的處理。



在首頁設(shè)計(jì)，我最喜歡他相框的設(shè)計(jì)，就像欣賞美術(shù)館的一幅畫，頁面留白也非常大，襯線體和非襯線體的對(duì)比也運(yùn)用的非常好。



整個(gè)APP的設(shè)計(jì)被大量留白包圍，雖然現(xiàn)在流行各種質(zhì)感，各種光感，C4D的設(shè)計(jì)，很多設(shè)計(jì)師認(rèn)為設(shè)計(jì)越多越好，但是大量視覺元素會(huì)讓頁面過于飽和，如果沒有很好的視覺引導(dǎo)，用戶會(huì)感到不知所措。


三、運(yùn)用氛圍建立層次



有設(shè)計(jì)感的紋理從視覺感受上比簡約主義更能吸引用戶注意力，但是背景紋理運(yùn)用不能為了設(shè)計(jì)而設(shè)計(jì)，而是需要和產(chǎn)品內(nèi)容有關(guān)系。比如紋理和文字內(nèi)容，和信息是密切相關(guān)的。如上圖，是一款打車軟件，背景結(jié)合了打車的地圖，公路線路，用車場景，讓頁面對(duì)比和設(shè)計(jì)層次更加突出。



jour這款產(chǎn)品在設(shè)計(jì)上，背景通過有層次的氛圍紋理和質(zhì)感，使得頁面氛圍感很強(qiáng)，層次細(xì)節(jié)更加豐富，當(dāng)然在設(shè)計(jì)的時(shí)候切忌對(duì)于設(shè)計(jì)氛圍過度運(yùn)用，那樣會(huì)讓用戶分散注意力。



其它場景上氛圍紋理的運(yùn)用，卡片上通過系列插畫的塑造，頁面雖然有很多插畫，但是頁面平衡感同樣重要。需要考慮用戶在界面看見的和其它頁面視覺感受是一致的。



氛圍除了圖形，其實(shí)色彩也是很重要一種方式，我很喜歡的ASANS的設(shè)計(jì)，在背景上就是運(yùn)用了一些幾何圖形的肌理效果讓整個(gè)空間感更加豐富，這些幾何圖形豐富細(xì)節(jié)同時(shí)也讓整個(gè)內(nèi)容更加凸顯。



如上圖是他里面一個(gè)注冊(cè)登錄場景，在界面中，除了背景灰色底紋通過幾何圖形來烘托視覺層次，同時(shí)在插畫上也是非常巧妙，用戶輸出，完成后，整個(gè)插畫到品牌圖形的連貫變化體驗(yàn)非常好。




Sift是一款新聞?lì)愰喿x產(chǎn)品，這類型產(chǎn)品設(shè)計(jì)一般就是文字排版，設(shè)計(jì)簡約為主，但是sift運(yùn)用了一種大膽的設(shè)計(jì)，背景氛圍上采用一些點(diǎn)線底紋的肌理效果，和內(nèi)容結(jié)合的很平衡。



Lugg是一款貨車APP有點(diǎn)像國內(nèi)的貨拉拉，整個(gè)設(shè)計(jì)也氛圍感非常強(qiáng)，運(yùn)用的全插畫設(shè)計(jì)，在頁面每個(gè)細(xì)節(jié)，從引導(dǎo)頁，讓頁面核心功能設(shè)計(jì)都能看見完整插畫的運(yùn)用，我目前我看見運(yùn)用插畫氛圍作為主設(shè)計(jì)最好的產(chǎn)品。



感興趣的同學(xué)可以去美國蘋果商店去下載使用，頁面中增加氛圍是一種增加層次很好的方式，但是同時(shí)需要主要好視覺平衡，不要做到本末倒置。


四、運(yùn)用襯線字體和無襯線字體建立層次



字體對(duì)比，運(yùn)用襯線字體和非襯線字體對(duì)比是非常常用的方式，如上圖運(yùn)用了Adelle Sans字和Tiempos字體這兩款字體的對(duì)比讓頁面內(nèi)容結(jié)構(gòu)非常清晰。



上圖官網(wǎng)的設(shè)計(jì)，干凈的排版，通過字體大小，字型進(jìn)行對(duì)比，體現(xiàn)出視覺層次。



字體的選擇本身也是設(shè)計(jì)中很重要的因素，好的設(shè)計(jì)不僅能提升設(shè)計(jì)品質(zhì)，同時(shí)也能讓頁面視覺層次更加分明。


五、結(jié)語


回歸設(shè)計(jì)本質(zhì)，其實(shí)我一直覺得設(shè)計(jì)這個(gè)工作就是一個(gè)翻譯官，我們的使命是讓用戶使用產(chǎn)品過程中更加易懂，同時(shí)我們能方便地解決他們的問題，而不僅僅是專注在界面美觀本身上，今天分享的這些提升設(shè)計(jì)層次的一些技巧，也是為了讓頁面有更好的體驗(yàn)。

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定