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

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