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

前言

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

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

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

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

分享目錄

一、什么是四大基本原則

二、親密性原則

三、對齊原則

四、重復原則

五、對比原則

六、結(jié)語

一、什么是四大基本原則

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

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

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

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

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

二、親密性原則

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

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

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

1）橫向間距

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

2）縱向間距

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

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

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

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

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

三、對齊原則

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

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

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

1.左/右對齊

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

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

2.居中對齊

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

3.兩端對齊

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

4.其他對齊方式

1）文本-首行縮進

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

2）表單-輸入框居中對齊

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

四、重復原則

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

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

1.顏色重復

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

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

2.圓角樣式重復

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

3.漸變方向重復

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

4.間距重復

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

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

五、對比原則

對比堪稱增強畫面視覺效果的最有力方法。它的作用可不少，既能吸引眼球，又能對信息進行有效組織，讓層級更加清晰，還能在頁面上引導讀者閱讀，并且制造出焦點。

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

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

1.主次對比

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

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

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

3.粗細/大小對比

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

4.色彩對比

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

5.形狀對比

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

6.面線對比

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

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

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

六、結(jié)語

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

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

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

Powered by Froala Editor