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