2020-3-1 ui設(shè)計(jì)分享達(dá)人
42個(gè)設(shè)計(jì)思維中的一個(gè)知識(shí)點(diǎn)~
設(shè)計(jì)思維 - 激活空間
1.激活空間 - 概念
激活空間的意義在于元素與空間的搭配,能讓頁(yè)面產(chǎn)生靈動(dòng)性和活力;另外激活空間還有一個(gè)影響比較難理解;?當(dāng)主元素占用版面的主導(dǎo)位置,其他空間過(guò)大就會(huì)造成觀眾視線的停頓與停滯;?這樣就會(huì)導(dǎo)致主體與次客體不會(huì)產(chǎn)生一定的關(guān)聯(lián)性;?這時(shí)就需要“激活空間”來(lái)使兩個(gè)元素有一定的聯(lián)結(jié);
2.空間的概念
在我們理解“激活空間”的概念之前,先來(lái)理解一下“空間”的概念。因?yàn)槠矫媸且粋€(gè)二維的空間,是二維零曲率廣延的一種面,因此我們?cè)诙x空間時(shí)不需要考慮三維的“第個(gè)三維度(一個(gè)方向的向量)”帶來(lái)的影響,我們只要定義空間中的最小單位與空間的相對(duì)關(guān)系,和定義空間的邊際就可以了。如下圖所示,平面二維空間中x軸與y軸無(wú)限大,那空間也會(huì)隨之變大。而三維空間中z軸的不斷擴(kuò)大,空間就會(huì)隨之變大。
只有在有邊際的空間中置入一個(gè)要素,即使這個(gè)要素是最小要素,空間也能被界定。例如一個(gè)正方塊(一個(gè)要素),被放置到一個(gè)參照的方框中,這時(shí)小的空間就會(huì)被界定。如下圖所示,二維平面和三維中坐標(biāo)軸的范圍就是界定后的空間,而坐標(biāo)軸中具體的一個(gè)單位就相當(dāng)于平面中的單一要素。當(dāng)把要素放入一個(gè)有邊際的空間中,這個(gè)空間就會(huì)被界定。
到這里我們只需要了解當(dāng)我們定義空間中最小的單位,空間也就被界定下來(lái)了,理解這個(gè)概念就行了。這里的空間中最小的單位指的就是“元素”,而元素被設(shè)置好后空間就被界定了下來(lái),這里元素的位置影響著空間,元素激活了部分空間,即激活空間。這了不理解也沒(méi)有關(guān)系,我用簡(jiǎn)單的圖來(lái)進(jìn)行繪制,大家就能理解激活空間的概念了。
3.激活空間 - 理解部分
當(dāng)我們?cè)谝粋€(gè)空間中置入一個(gè)元素(一個(gè)圓),這時(shí)我們就會(huì)發(fā)現(xiàn)這個(gè)元素占了一整個(gè)空間。這里如果不好理解就用生活中的例子舉例,例如大家都站在自己家的臥室里,并且站在中心點(diǎn)也就是正中間,那這時(shí)候給人的感覺(jué)就是你占用的一整個(gè)臥室的感覺(jué),也就是說(shuō)整個(gè)臥室的空間就被你(視覺(jué)元素等于一個(gè)圓)所占據(jù)了。
接下來(lái)大家仔細(xì)看啊,如果當(dāng)我移動(dòng)一個(gè)元素(一個(gè)圓)的位置,大家感覺(jué)一下平面會(huì)有什么樣的變化。是不是感覺(jué)上面有元素,但下面的空間有些空啊。這是因?yàn)橹辉刂患せ盍松厦娴目臻g,而下面就成了空白的空間。
接下來(lái)我再把平面中的這個(gè)元素,向左移動(dòng)一些位置,大家注意看會(huì)有什么樣的變化。是不是會(huì)發(fā)現(xiàn),左面這一小塊的空間被激活了,而右面和下面的一大塊是空白的空間。
這時(shí)當(dāng)我再分裂出一個(gè)相同的元素,并把這個(gè)元素向右移動(dòng),這時(shí)我們觀察后會(huì)發(fā)現(xiàn),上面一整塊的空間都被激活了,而下面的一整塊還是空白空間。并且兩個(gè)元素之間產(chǎn)生了一定的關(guān)聯(lián)性,它們看上去更像一個(gè)整體了。
接下來(lái)我再分裂出一個(gè)元素,并且把它的位置移動(dòng)到最下方,這時(shí)我們觀察就會(huì)發(fā)現(xiàn)下面的空間被這個(gè)元素激活了,但是中級(jí)的部分還是處于空白的,也就是空白空間。如下圖這個(gè)狀態(tài)呢,我其實(shí)可以延伸出另一個(gè)設(shè)計(jì)思維,那就是“把留白當(dāng)做一種視覺(jué)元素”,但今天就不講這么多了。這時(shí)我們?cè)儆^察,三個(gè)元素所占的位置,是不是剛好能填滿一個(gè)版面啊,那也就是說(shuō)他們?nèi)齻€(gè)整合到一起,又占據(jù)了整個(gè)平面。
4.激活空間 - 實(shí)際案例1
如果講到這理論講的就差不多了,像細(xì)節(jié)部分大家通過(guò)類似的想法腦補(bǔ)一下就行了,接下來(lái)我們講一下激活空間的設(shè)計(jì)思維如何應(yīng)用到我們的實(shí)際設(shè)計(jì)當(dāng)中。我們先來(lái)看一個(gè)設(shè)計(jì)作品,如下圖所示,大家通過(guò)自己的思考,想一下這個(gè)作品哪里有問(wèn)題?
這個(gè)作品的問(wèn)題在于,藍(lán)色標(biāo)出的部分的視覺(jué)重量明顯要比紅色部分大,而且紅色部分之間空白空間占的面積太大了,這樣兩個(gè)紅色元素之間就缺少了一定的關(guān)聯(lián)性,整體也會(huì)顯得十分不協(xié)調(diào),那要如何解決這個(gè)問(wèn)題呢?
當(dāng)我們把紅色區(qū)域之間的空白空間,用其他元素把它激活,把這里的空間激活,那上下之間就能產(chǎn)生一定的關(guān)聯(lián)。并且用一個(gè)有顏色的元素,這里的左右的視覺(jué)重量也達(dá)到了一定的平衡。
5.激活空間 - 實(shí)際案例2
再講一個(gè)案例,咱們看一下第二個(gè)案例,我們直接看作品看看它都有啥問(wèn)題?直接這么一瞅是不是標(biāo)題的位置不太合適,似乎位置太高了,而下面的冰山看上去很不舒服,不知道哪里有問(wèn)題,有沒(méi)有這種感覺(jué)?
這個(gè)作品的問(wèn)題在于冰山這塊的視覺(jué)重量偏左,而且冰山的物理重量并不重,再加上企鵝在上面就會(huì)造成物理重量上的不平衡,從自然角度來(lái)看也不是很和諧;另外標(biāo)題與冰山之間的留白太大了,這樣就造成了視覺(jué)停滯,沒(méi)有元素可看了,也沒(méi)有辦法引導(dǎo)視線了,也會(huì)造成觀眾對(duì)作品整體的影響與理解上的差異。
我們要怎么解決這個(gè)問(wèn)題呢,冰山的物理重量不平衡,我們給右側(cè)畫一個(gè)企鵝,讓它把右面的區(qū)域的空間激活,那整體的物理重量相對(duì)就平衡了;另外標(biāo)題與下面元素的距離,可以通過(guò)設(shè)置新元素-太陽(yáng)的方式,來(lái)使上下之間具有關(guān)聯(lián)性。
6.激活空間 - 實(shí)際案例3
再講一個(gè)案例,咱們看一下第三個(gè)案例。我們直接看作品看看它都有啥問(wèn)題?看這個(gè)作品總感覺(jué)太碎片化了,整體性差沒(méi)有統(tǒng)一感,而且也不規(guī)整并很混沌,元素之間的關(guān)聯(lián)性也不強(qiáng),有沒(méi)有這種感覺(jué)?
這個(gè)作品最主要的原因就是留白產(chǎn)生的負(fù)形會(huì)對(duì)作品產(chǎn)生缺乏整體性的影響。因?yàn)檫@些空間看上去是開(kāi)放的,沒(méi)有約束的,零散的且沒(méi)有統(tǒng)一感的,這時(shí)我們需要通過(guò)增加元素,利用激活空間的方法來(lái)布置它們,這樣這些元素就具有了統(tǒng)一性,整體性也就會(huì)更強(qiáng)。
這樣的整體感就強(qiáng)了一些有沒(méi)有~
轉(zhuǎn)自:站酷-羅耀_UI
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.820esy.cn