UI設(shè)計(jì)中的組合與重復(fù)

UI設(shè)計(jì)中的組合與重復(fù)大家好，隨著著陽光明媚的周三夜晚，本貓又和大家見面了，之前有篇文章具體介紹了排版中的兩大基本原則【對比】與【對齊】，那么本篇文章介紹余下的兩大基本原則【組合】與【重復(fù)】，他們一起構(gòu)成了設(shè)計(jì)排版中的四大基礎(chǔ)原則，但愿大家喜歡！組合即成組，也叫做親密性，就是將有關(guān)的信息成組，建立一種聯(lián)系感。在一種版面上距離越近的元素就越有關(guān)聯(lián)性，因此有關(guān)的信息應(yīng)當(dāng)彼此靠近形成一種組合；不有關(guān)的信息則應(yīng)當(dāng)互相遠(yuǎn)離加以分辨。組合玩的就是關(guān)聯(lián)性與分辨性，有關(guān)信息成組建立關(guān)聯(lián)性，不有關(guān)信息不擇手段的加以分辨，也就是我們常說的信息的貼近與遠(yuǎn)離。那么建立組合的方式有哪些呢？本貓?jiān)谶@里列舉幾個慣用的吧第一種自然是通過留白建立距離關(guān)系進(jìn)行分辨，留白是設(shè)計(jì)中通用的萬金油原則。其它的某些建立組合的方式也是建立在留白之上的。第二種則是分割形式建立組合關(guān)系，分割的類型有諸多個，能夠是線條分割，也能夠是形狀與色塊分割等。第三種慣用的建立組合的方式是通過色相的對比。不同色相的信息組會暗示觀者這是不同的信息。不同的編排方向也可較好的分辨信息組。通過分欄的方式分辨不同的信息也是較好的選擇，有關(guān)信息分成同一欄，不有關(guān)信息分成不同欄。幾乎全部的排版都會用的組合的原則，下面看這幾個案例說完了組合再來說一說剩余的重復(fù)原則吧重復(fù)就是作品中的視覺要素要在整個作品中統(tǒng)一，涉及色彩方案、字體字號、文本行距、項(xiàng)目符號等，也能夠是某種個視覺符號。就拿此篇文章來說，此文的配圖主色都是綠色系的，正是用了重復(fù)的原則，因此整篇文章視覺與閱讀上統(tǒng)一感。如若忽然出現(xiàn)一種黃紫配色的模塊標(biāo)題，則顯得格格不入與整篇文章風(fēng)格不搭因此這張模塊標(biāo)題的圖出現(xiàn)在這篇綠色系文章中就是重復(fù)沒用好的背面教材。固然，除了配色尚有標(biāo)題、符號那些，重復(fù)的元素能使版面更加統(tǒng)一。左側(cè)這個每段標(biāo)注的符號不同，有圓有菱形有三角，正是不夠統(tǒng)一，沒有做到用同一元素。另外對齊方式也用了三種，沒有重復(fù)使用一種對齊方式，因此顯得雜亂無章。右側(cè)的圖只使用了一種標(biāo)注符號，一種對齊方式，瞬間就好了諸多。那我們再來看看重復(fù)的應(yīng)用案例吧。這是往期周練群里的一種作業(yè)，出現(xiàn)了哪些問題呢？1、主體不對，主題是噪音，而不是木魚，因此放這個木魚的圖片是毫無意義的。2、對齊方式不統(tǒng)一，左對齊不嚴(yán)謹(jǐn)，另外尚有一種莫名的右對齊很突兀。3、中英文不搭調(diào)，如果掌控不了能夠只做中文的。4、文字組解決不好，出現(xiàn)了字體粘連的狀況。做東西之前我們要先分析，任何設(shè)計(jì)都是如此的，前期的分析調(diào)研尤為重要。由于這是一種藝術(shù)展的海報，因此我準(zhǔn)備偏向藝術(shù)一點(diǎn)。此案中用噪音的不規(guī)則波段來體現(xiàn)噪音，從微觀出發(fā)。將主題“噪音”置于版面之上，由于是主題，因此一定要是文字組中最大的。為了更加契合主題，將主標(biāo)題柵格化，并用選區(qū)工具節(jié)選移動，營造故障的感覺。為了使之與噪波風(fēng)格更統(tǒng)一，給主標(biāo)題加入風(fēng)的效果，這樣主標(biāo)題與圖形風(fēng)格特性就統(tǒng)一了。將副標(biāo)題與編排好的時間至于畫面中，統(tǒng)一左對齊。將其它信息作為更小的層級縮小解決，同樣左對齊置于畫面中。注意用留白的距離分辨組合關(guān)系。另外小標(biāo)題前統(tǒng)一加了圓點(diǎn)的重復(fù)元素，使之更統(tǒng)一。最后將主標(biāo)題和圖形用重復(fù)解決的形式放于空白處，這個海報也就完畢了。接下來看一看動態(tài)gif吧最后看一下修改前后的對比1、版式中要用組合與重復(fù)的原則