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