亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

前言

在學(xué)習(xí)之前，我們得先思考學(xué)習(xí)的目的。不妨設(shè)想一下，有這么一張海報(bào)，它未經(jīng)任何設(shè)計(jì)，內(nèi)容和元素被隨意堆砌在畫(huà)面上，顯得雜亂無(wú)章，這樣的海報(bào)，能讓用戶心動(dòng)買(mǎi)單嗎？顯然不能。在信息傳播時(shí)，這種海報(bào)會(huì)使用戶找不到重點(diǎn)，缺乏視覺(jué)美感，對(duì)品牌傳播也毫無(wú)益處。

不管是從事UI設(shè)計(jì)、品牌設(shè)計(jì)，還是電商、包裝設(shè)計(jì)等領(lǐng)域的設(shè)計(jì)師，在設(shè)計(jì)過(guò)程中都要以用戶需求為導(dǎo)向。畢竟，所有設(shè)計(jì)最終都要投放于商業(yè)市場(chǎng)。正因?yàn)槿绱?，設(shè)計(jì)的四大基本原則應(yīng)運(yùn)而生。通過(guò)學(xué)習(xí)這四大原則，我們能夠科學(xué)、迅速地進(jìn)行排版布局，提升視覺(jué)效果，豐富畫(huà)面內(nèi)容，從而避免出現(xiàn)前面所說(shuō)的那些糟糕情況。

設(shè)計(jì)的四大基本原則，想必設(shè)計(jì)師們都耳熟能詳，而且在自己的設(shè)計(jì)作品中或多或少都有運(yùn)用。其中的親密性、對(duì)齊、重復(fù)、對(duì)比這四大原則，在日常設(shè)計(jì)中的應(yīng)用極為廣泛。不管是交互崗位、UI崗位，還是產(chǎn)品經(jīng)理崗位，這四大原則都非常實(shí)用，能讓設(shè)計(jì)稿看起來(lái)更加專業(yè)，視覺(jué)效果更加美觀。

那么，到底什么是設(shè)計(jì)的四大基本原則呢？我們?yōu)槭裁匆獙W(xué)習(xí)它呢？學(xué)習(xí)這四大基本原則又能給我們帶來(lái)哪些幫助呢？接下來(lái)，筆者將為大家詳細(xì)講解。

分享目錄

一、什么是四大基本原則

二、親密性原則

三、對(duì)齊原則

四、重復(fù)原則

五、對(duì)比原則

六、結(jié)語(yǔ)

一、什么是四大基本原則

我們先來(lái)了解一下設(shè)計(jì)中的四大基本原則。這四大原則分別是親密性原則、對(duì)齊原則、重復(fù)原則、對(duì)比原則。每一位優(yōu)秀的設(shè)計(jì)師都需要知曉這些原則，并運(yùn)用到實(shí)際案例當(dāng)中。在設(shè)計(jì)時(shí)，這四大原則并非獨(dú)立存在，而是相互嵌套、彼此交融的。

● 親密性：當(dāng)項(xiàng)目彼此關(guān)聯(lián)時(shí)，應(yīng)把它們歸為一組，以此構(gòu)建更緊密的親密性。這樣做有助于梳理信息，減輕混亂感，為讀者呈現(xiàn)清晰的內(nèi)容架構(gòu)。

● 對(duì)齊：要求頁(yè)面上的元素不能隨意放置，每個(gè)元素都要與頁(yè)面上的其他元素建立視覺(jué)聯(lián)系。如此便能夠塑造出清晰、精致且清爽的視覺(jué)外觀。

● 重復(fù)：讓設(shè)計(jì)中的視覺(jué)元素在整個(gè)作品里不斷重現(xiàn)，例如顏色、形狀、材質(zhì)、空間關(guān)系、線寬、字體、大小、圖片等都可以重復(fù)。這既能增添?xiàng)l理性，又可強(qiáng)化統(tǒng)一性。

● 對(duì)比：需避免頁(yè)面元素過(guò)于相似，若元素不同，就應(yīng)讓它們有顯著的差異。對(duì)比能讓頁(yè)面吸引眼球，同時(shí)也使頁(yè)面內(nèi)容結(jié)構(gòu)清晰，易于閱讀。

二、親密性原則

信息關(guān)聯(lián)性高時(shí)，距離應(yīng)接近，像一個(gè)視覺(jué)單元；關(guān)聯(lián)性低則距離遠(yuǎn)，像多個(gè)視覺(jué)單元。親密性原則就是把有聯(lián)系的獨(dú)立元素組合成視覺(jué)單位。

親密性原則是UI設(shè)計(jì)的基礎(chǔ)且必須掌握的設(shè)計(jì)原則，在排版中常用。它能讓元素更有條理、具組織性和統(tǒng)一性，處理好界面信息層級(jí)關(guān)系，使信息錯(cuò)落有序。這有利于用戶閱讀，提升視覺(jué)層次，讓用戶清晰區(qū)分信息，避免信息干擾。

1.用間距區(qū)分層級(jí)

1）橫向間距

在組件內(nèi)部，元素的橫向間距不應(yīng)千篇一律。如今，許多應(yīng)用為適應(yīng)不同屏幕尺寸，在橫向布局時(shí)采用柵格布局來(lái)排列組件，這一做法極大地保障了布局的靈活性。

2）縱向間距

在縱向間距中，信息層次可通過(guò)小間距、中間距、大間距三種規(guī)格來(lái)劃分。像單個(gè)元素間距設(shè)為24px（小間距），組件間距為40px（中間距），模塊間距達(dá)80px（大間距），這些間距的設(shè)置都是有規(guī)律可循的。

2.用分割線/色塊/留白區(qū)分層級(jí)

留白與分割色塊是界面設(shè)計(jì)里常見(jiàn)的信息區(qū)分手段。留白能賦予界面呼吸感，降低割裂感。分割線多用于內(nèi)容中的信息區(qū)分，當(dāng)前市場(chǎng)主流app大多以留白為主進(jìn)行區(qū)分，分割線與色塊作為輔助。

3.用卡片區(qū)分層級(jí)

卡片的運(yùn)用日益廣泛，在當(dāng)下設(shè)計(jì)中卡片式樣式占據(jù)主導(dǎo)地位?？ㄆ苁共煌畔鎵K的區(qū)分更為顯著。

三、對(duì)齊原則

對(duì)齊原則在界面設(shè)計(jì)里是非常關(guān)鍵的基礎(chǔ)準(zhǔn)則，也是大家耳熟能詳?shù)脑O(shè)計(jì)原則。它要求界面中的元素不可隨意放置，每個(gè)元素都要與頁(yè)面上的某個(gè)內(nèi)容存在視覺(jué)關(guān)聯(lián)。就好像有一條“無(wú)形的線”把這些元素串聯(lián)起來(lái)，成為一種視覺(jué)紐帶。

這一原則與“格式塔學(xué)派”中的連續(xù)性原則相契合。它強(qiáng)調(diào)，人們會(huì)通過(guò)感知事物的形狀和運(yùn)動(dòng)方向?qū)⒎稚⒌脑剡B接在一起，使直線繼續(xù)成為直線、曲線繼續(xù)成為曲線。在界面設(shè)計(jì)里對(duì)元素進(jìn)行對(duì)齊，這既貼合用戶的認(rèn)知習(xí)慣，又能引導(dǎo)視覺(jué)的流向，從而讓用戶更順暢地接收信息。

對(duì)齊原則蘊(yùn)含著秩序美，是維持界面整潔、有序的利器。它能讓界面保持統(tǒng)一、有條理，有效組織頁(yè)面信息，使頁(yè)面看起來(lái)干凈整齊，進(jìn)而減輕用戶的閱讀負(fù)擔(dān)并減少焦慮感。左對(duì)齊、居中對(duì)齊、右對(duì)齊、兩端對(duì)齊等都是常用的對(duì)齊方式。

1.左/右對(duì)齊

界面中的文字對(duì)齊方式，左對(duì)齊較為常用。我們閱讀習(xí)慣是從左至右、從上至下，常見(jiàn)的F布局模式和Z布局模式便遵循此習(xí)慣，這兩種布局模式下視線會(huì)自然移動(dòng)，且它們都采用左對(duì)齊形式。左對(duì)齊對(duì)用戶很友好，能讓用戶迅速找到閱讀起點(diǎn)。

在處理大段文字時(shí)，有個(gè)容易被設(shè)計(jì)師忽略的要點(diǎn)：應(yīng)保持文案左右兩端對(duì)齊，標(biāo)點(diǎn)符號(hào)避頭尾，最后一行文案左對(duì)齊，以此減少邊緣起伏。這里的邊緣起伏指的是一段文字的邊緣形態(tài)。當(dāng)視線從行尾移到下一行首時(shí)，若間距一致，大腦就能快速判斷下一次跳躍的角度和距離，從而使用戶快速定位閱讀起點(diǎn)，提升閱讀速度。

2.居中對(duì)齊

在UI界面設(shè)計(jì)里，居中對(duì)齊方式使用相對(duì)較少，大多使用在圖文組合類型的組件中。另外在運(yùn)營(yíng)設(shè)計(jì)或者專題卡片樣式中也會(huì)用到，例如彈窗常常采用居中對(duì)齊形式。

3.兩端對(duì)齊

兩端對(duì)齊，也被稱為方形左右對(duì)齊或者塊對(duì)齊，其特點(diǎn)是文本兩端均對(duì)齊，這種方式常見(jiàn)于信息列表中的文本內(nèi)容。

4.其他對(duì)齊方式

1）文本-首行縮進(jìn)

當(dāng)存在大量文本內(nèi)容時(shí)，基本上會(huì)采用左對(duì)齊方式，并且為了方便用戶區(qū)分不同段落的起始點(diǎn)，通常會(huì)設(shè)定兩個(gè)字符的首行縮進(jìn)。

2）表單-輸入框居中對(duì)齊

輸入框的居中對(duì)齊方式大多出現(xiàn)在網(wǎng)頁(yè)界面中，以輸入框?yàn)橹行?，左?cè)文字右對(duì)齊、右側(cè)文字左對(duì)齊，這有助于用戶操作時(shí)在同一縱向位置落點(diǎn)，進(jìn)而提高填寫(xiě)效率。

四、重復(fù)原則

重復(fù)原則，簡(jiǎn)單來(lái)說(shuō)，就是讓設(shè)計(jì)中的視覺(jué)要素在整個(gè)作品里反復(fù)出現(xiàn)。這些要素涵蓋顏色、形狀、材質(zhì)、空間關(guān)系、線寬、字體、大小以及圖片等。當(dāng)相同元素在整個(gè)界面不斷重現(xiàn)時(shí)，畫(huà)面會(huì)更具條理性，統(tǒng)一感和秩序感也得以增強(qiáng)。這不僅能大大降低用戶的學(xué)習(xí)成本，還能助力用戶識(shí)別元素間的關(guān)聯(lián)。

然而，重復(fù)并非對(duì)某個(gè)元素或樣式進(jìn)行機(jī)械的重現(xiàn)。我們要有目的地去運(yùn)用重復(fù)原則，要結(jié)合界面元素和頁(yè)面效果來(lái)操作。通過(guò)重復(fù)來(lái)沉淀和規(guī)范設(shè)計(jì)組件，從而提高設(shè)計(jì)效率。這樣的設(shè)計(jì)方式，能夠讓我們?cè)谧裱欢ㄒ?guī)則的基礎(chǔ)上，打造出更加優(yōu)質(zhì)的用戶體驗(yàn)。

1.顏色重復(fù)

在同一個(gè)應(yīng)用里，往往會(huì)固定使用幾種顏色。其中，品牌色會(huì)在界面設(shè)計(jì)的諸多元素上重復(fù)使用，像圖標(biāo)、按鈕、卡片、頭圖、banner等地方。

除此之外，常用的無(wú)彩色文字，例如＃333、＃666、＃999、＃CCC，也會(huì)依據(jù)不同文字的視覺(jué)權(quán)重被反復(fù)運(yùn)用。顏色的這種重復(fù)使用方式有著重要意義，它不僅能助力用戶迅速定位重要信息，而且有助于加深用戶對(duì)品牌的印象。

2.圓角樣式重復(fù)

界面中的卡片（不管是大圓角還是小圓角）、圖標(biāo)、按鈕等元素，也會(huì)固定采用幾個(gè)數(shù)值，這在很大程度上能夠確保設(shè)計(jì)風(fēng)格樣式的統(tǒng)一。不過(guò)，像健身、運(yùn)動(dòng)類的應(yīng)用，為了塑造力量感和硬朗感而不設(shè)置圓角，這屬于特殊情況。

3.漸變方向重復(fù)

漸變這種設(shè)計(jì)手法在很多地方都可能被用到，像圖標(biāo)、按鈕、卡片等。為了維持統(tǒng)一的視覺(jué)調(diào)性，漸變方向最好保持一致，常見(jiàn)的方向有從上到下、從左到右、從左上到右下等，選定一種漸變方向后，后續(xù)重復(fù)使用就行。

4.間距重復(fù)

間距的重復(fù)使用在設(shè)計(jì)中常常被忽視。我們可以借助柵格系統(tǒng)，保持頁(yè)面間距的規(guī)律性，從而讓界面有節(jié)奏、有秩序地展開(kāi)。

間距的重復(fù)使用數(shù)值要結(jié)合親密性原則，在2倍圖設(shè)計(jì)時(shí)，通常會(huì)以5、6或者8的倍數(shù)作為增量，然后設(shè)定幾個(gè)常用的間距數(shù)值，比如以8的倍數(shù)為例，就有8、16、32、48、64等。

五、對(duì)比原則

對(duì)比堪稱增強(qiáng)畫(huà)面視覺(jué)效果的最有力方法。它的作用可不少，既能吸引眼球，又能對(duì)信息進(jìn)行有效組織，讓層級(jí)更加清晰，還能在頁(yè)面上引導(dǎo)讀者閱讀，并且制造出焦點(diǎn)。

產(chǎn)生對(duì)比的方式多種多樣，例如，通過(guò)字體大小對(duì)比，大字與小字的組合能迅速拉開(kāi)視覺(jué)差距；字體粗細(xì)對(duì)比，粗體與細(xì)體的搭配會(huì)讓元素特征更鮮明；冷暖色對(duì)比，冷色與暖色相互映襯可產(chǎn)生強(qiáng)烈的視覺(jué)沖擊力。

要達(dá)成有效的對(duì)比效果，關(guān)鍵在于對(duì)比必須足夠強(qiáng)烈。若是在對(duì)比時(shí)過(guò)于小心翼翼、畏畏縮縮，那么元素之間的差異就難以凸顯，對(duì)比的諸多作用也就無(wú)法實(shí)現(xiàn)，畫(huà)面的視覺(jué)效果也就無(wú)法得到有效提升。

1.主次對(duì)比

在UI設(shè)計(jì)中，為了讓用戶能夠在操作時(shí)迅速作出判斷，這就需要突出那些相對(duì)更重要或者使用頻率更高的操作元素，像按鈕、圖標(biāo)之類的。而達(dá)成這種突出效果的方法是多樣的，既可以強(qiáng)化重點(diǎn)項(xiàng)，也可以通過(guò)弱化其他項(xiàng)來(lái)實(shí)現(xiàn)。

2.狀態(tài)關(guān)系對(duì)比

通過(guò)改變顏色、增添輔助形狀等手段來(lái)構(gòu)建狀態(tài)關(guān)系的對(duì)比，有助于用戶更好地對(duì)信息加以區(qū)分。

3.粗細(xì)/大小對(duì)比

利用大小對(duì)比與粗細(xì)對(duì)比來(lái)區(qū)分信息層級(jí)是兩種極為常見(jiàn)的手法。在界面設(shè)計(jì)里，這兩者常常被同時(shí)運(yùn)用，從文字的大小和粗細(xì)，到圖標(biāo)的大小、線條的粗細(xì)，再到圖片大小的對(duì)比，都能夠用來(lái)彰顯重要的內(nèi)容。實(shí)際上，幾乎在所有的app或者版式設(shè)計(jì)中，我們都能發(fā)現(xiàn)這兩種對(duì)比手法的身影。特別在文字的大小對(duì)比時(shí)，對(duì)于重要內(nèi)容不僅要增大字號(hào)，還需增加字重，這樣才能更有效地突出重點(diǎn)。

4.色彩對(duì)比

色彩對(duì)比也是一種常用且巧妙的手法。它既能突出重點(diǎn)內(nèi)容、區(qū)分信息層級(jí)，又能起到修飾的作用。在界面設(shè)計(jì)中，除了文字顏色的對(duì)比之外，在UI設(shè)計(jì)中還可以大膽地將其應(yīng)用于卡片顏色、模塊底色等方面，從而突出重要信息，制造視覺(jué)焦點(diǎn)。

5.形狀對(duì)比

元素形狀樣式的差異同樣能夠體現(xiàn)優(yōu)先級(jí)的不同。在設(shè)計(jì)中，有一些常規(guī)的形狀樣式，像頭像做成圓形、圖片流制成圓角卡片、卡券樣式為剪口的擬物卡券等。如果想要讓界面設(shè)計(jì)更具獨(dú)特性，可以尋找更具個(gè)性與亮點(diǎn)的形狀。例如在tab欄樣式設(shè)計(jì)中，經(jīng)常把重要的圖標(biāo)形狀進(jìn)行差異化處理以達(dá)到突出的效果。

6.面線對(duì)比

線和面之間的對(duì)比也不容忽視，這種對(duì)比常用于圖標(biāo)、按鈕、標(biāo)簽或者模塊之間，由于面的比重大于線，所以這一手法在UI設(shè)計(jì)中被頻繁運(yùn)用。

7.質(zhì)感肌理對(duì)比

質(zhì)感肌理在UI設(shè)計(jì)中也有著獨(dú)特的作用。這里的質(zhì)感肌理并非僅僅局限于擬物設(shè)計(jì)，只要是有畫(huà)面感、色彩重量或者紋路的都可算在內(nèi)。質(zhì)感肌理對(duì)比能夠使設(shè)計(jì)更加細(xì)膩，在視覺(jué)上非常出彩。比如在“我的”背景板和一些卡片背景設(shè)計(jì)中，帶有質(zhì)感肌理的設(shè)計(jì)往往比扁平設(shè)計(jì)更具吸引力。

六、結(jié)語(yǔ)

學(xué)習(xí)的方法很簡(jiǎn)單，在做設(shè)計(jì)時(shí)，想到并運(yùn)用這些原則即可。熟練之后，憑借條件反射就能輕松地將它們?nèi)谌朐O(shè)計(jì)。四大基本原則有助于我們解決排版難題，防止畫(huà)面內(nèi)容與元素雜亂無(wú)章。它能更清晰、迅速地展現(xiàn)產(chǎn)品功能特性，助力我們打造出更優(yōu)質(zhì)的畫(huà)面，提升視覺(jué)層次感，嚴(yán)謹(jǐn)科學(xué)地呈現(xiàn)我們想要的元素。

實(shí)際上，親密性、對(duì)比、對(duì)齊、重復(fù)這四大原則的應(yīng)用并不復(fù)雜，不過(guò)是按照特定規(guī)則擺放界面中的元素，這些規(guī)則相互依存、彼此影響。它們是設(shè)計(jì)最基本的原則，掌握好對(duì)界面設(shè)計(jì)有著積極的意義。

需要說(shuō)明的是，本文只是筆者依據(jù)自身經(jīng)驗(yàn)整理總結(jié)，其內(nèi)容還有很多不足之處，如果想要更深入的了解，也可以去看看《寫(xiě)給大家看的設(shè)計(jì)書(shū)》這本書(shū)。

Powered by Froala Editor