想要版面統一?用這九種手法盤它! - 優設網 - UISDC

                想要版面統一?用這九種手法盤它!

                2019/02/17 31000評論 10

                @研習設K先生?:有一位同學向我們咨詢,他的問題大概的意思是,類似網站或者淘寶詳情頁的那種長圖怎么設計能好看?我們在之前的分享里是經常強調設計規則的普適性,看似是不同品類的設計作品,其實這里面的絕大多數規則都是在其他的品類中同樣適用的。如果說有不同的話,這里面的不同,也只是側重點有一些不一樣而已。

                比如說這個問題里提到的長圖,想做好,視覺的統一性在這里起到了主導的作用,不光是長圖,其他的海報、畫冊、DM 甚至空間裝飾等都是一樣的。統一性能做好,這個設計才能算及格。

                什么是統一性

                既然統一性這么重要,那么什么是統一性呢?用一句話來概括,視覺的統一性指的是各個元素之間明顯的和諧一致。也就是說,統一意味著協調一致。在同一個框架內,元素之間沒有做到這種協調一致的話,設計作品就會變的支離破碎。如果有人說你的設計做的很亂,那90%的問題就是出在統一性上。

                打個比方,在高冷的狼群中,出現了一只哈士奇,就算它長得和狼很像,但是給人的感覺還是怪怪的,這就是不協調的元素亂入,給我們帶來的直觀印象。包括別人開會穿正裝,你穿著拖鞋、大褲衩就去了,效果也是一樣的。

                統一性的作用

                了解了什么是統一性,下面我們再來看看統一性的作用有哪些,主要的作用有4點。

                ? 1. 規律與秩序帶來美感

                由于所處環境的影響,人類天生就對統一、秩序有著很深的偏愛。就像松塔、向日葵、多肉植物,研究過比例的同學應該知道,他們的生長軌跡都是按照黃金比例來走的,這種美學比例帶來的統一性就會很自然的給我們帶來美的享受。

                ? 2. 通過統一性引導視覺

                引導視覺和我們人類的視覺習慣有關,通過統一性可以把相似或者處于同一層級的設計元素聯系到一起,能夠優化信息向外傳遞的效率與清晰度。

                像書籍雜志的目錄,用簡單的大小對比,梳理好這里面核心內容的層級關系,就能讓讀者更快更清晰的了解這些內容。

                ? 3. 加深用戶印象

                這點是品牌視覺形象的統一性,通過某種視覺元素的不斷重復,能夠加深受眾對品牌的印象,在這里給大家看一套 VI,還是很容易理解的。

                ? 4. 節省時間提高效率

                統一就意味著這里面存在重復。讓我們做這種變化很多的設計容易,還是做這種有規律有秩序的形式容易?各種炫酷的效果加進去還是挺累的,右邊的這個就簡單的多,相信大多數人都會選這種簡單的對吧。

                提升統一性的九種方式

                構成版式的常見元素:字體、文字組、圖形、圖片、背景,如果能把這些元素統一性增強,就可以避免大部分版面混亂的問題,那么如何強化這些元素的統一性呢?這九種方式就能幫到你,大小、重量、間距、方向、對齊、色彩、形狀、布局、風格。下面我們來了解一下這九種方式在設計中的應用。

                ? 1. 大小

                在這些方式里,用控制設計元素大小的方式來強化作品的統一性,應該是最簡單常見的。

                看這組文字,文字的大小參差不齊,有的人這樣做可能是為了強調這里面的關鍵內容,但是這種形式的變化就會造成文字組參差不齊,產生很多沒有必要的負空間,讓文字組變碎。把這樣一組文字填充到版面中,這種不和諧會更突出。

                如果調整成右邊這樣,統一性就會好很多了。設計要局部服務于整體,不能每個小局部都做很多變化,變化多了就會難以控制,控制不好整個版面就會混亂。文字以外的元素同理,這是版面中元素大小的統一。

                ? 2. 重量

                注意看這組文字,他們放在一起給我們的感覺是統一的嗎?不是,他們的粗細度都是不一致的,如果一個版面中存在著大量的粗細對比,統一性就很差了,這也是很多同學沒注意的地方。

                為什么大部分常用的字體都會有字體家族,這些不同粗細的字體就可以幫助我們控制字重。在處理文字組的時候,字重要調整勻稱,比如這個文字組,已經出現大小對比了,我們再做字重對比,對比就太多了,對比過多就意味著混亂、難以控制,把它們調整勻稱就可以了。

                ? 3. 距離

                了解了重量的均衡,再來看看間距統一和沒有秩序的有什么區別。

                如果在版面中同時出現了多組文字,有的人就會忽略這個細節了,特別是在這些文字處于同一個層級下的時候,更要注意。

                字與字是這樣,同一層級的文字組之間的距離同樣是這樣,包括圖形、圖片,道理都是一樣的,看似簡單的距離統一,同樣重要。

                ? 4. 方向

                方向的統一,這個好理解,同一個層級下的幾組文字,或者把它想成單獨的文字、圖形、圖片也可以,他們在版式構成中的方向要是統一有規律的。

                如果版面中加入這種不穩定的形式,就會變得很難控制。

                ? 5. 對齊

                還是以文字組為例,常見的對齊方式就是左對齊、右對齊、居中對齊,在同一組文字中,相同的對齊方式很自然的會帶來統一的感覺。

                就算在這些文字組的基礎上,加入其他的圖形或者圖片,讓這些所有的元素進行對齊,整個的結構仍然會很和諧。

                反過來,就算是同一層級下的文字組,我們保證了大小、重量、距離和方向的統一,如果對齊的方式不一致,也會破壞版面的統一性。

                ? 6. 色彩

                色彩的統一性也很好理解,像我們做設計,一般不會把文字弄得五顏六色的對吧?包括版面中背景的顏色,使用單一的顏色或者近似色都是比較好控制的,顏色越多,越難控制,想做出統一的感覺就越難。

                ? 7. 形狀

                這個形狀的統一性我們可以拿圖形、圖片來做例子。圓形、橢圓、方形、菱形、三角形、多邊形很多基礎的形狀,在這些形狀中置入圖片,就算圖片一樣,統一性都不見得有多好。

                更何況在多數情況下,這種置入的圖片都是不一樣的。我們在統一的形狀框架內使用圖片,就可以有效的避免這個問題,讓圖片或者圖形,形成秩序,保證圖形圖片元素之間的和諧統一。

                ? 8. 布局

                布局指的是所有的設計元素在整個版面中的合理布置安排。這種布局和上面提到的設計元素的大小、方向、距離、對齊等等都有關系,是對他們的一種統籌組合。特別是網頁長圖,布局的統一會節省我們設計師很多的時間,也會讓整個作品具有很強的統一性。

                通常使用網格來約束,控制版面中的這些設計元素會很方便。網格系統的使用可閱讀→《高手的平面課堂!網格系統的入門基礎知識+案例演示》

                ? 9. 風格

                最后一點風格的統一,字體、圖形、圖片、顏色包括布局等等都會影響到風格統一。而且同一種風格,就有著極強的統一性。

                簡單來說,就像我們想設計類似無印良品的那種大留白的極簡風格,就不能把作品做的和電商活動的感覺一樣。這完全是兩種風格的東西,使用的字體、圖形、圖片、顏色包括布局都會有很大的差異。至于選擇什么樣的風格,一般根據項目的主題和客戶的要求來選就可以了。

                案例演示

                這個網頁作品的設計就遵循了上面提到的那9種方式,包括里面使用的設計元素也都在上面出現過,雖然里面使用的設計元素很多,但是他們看起來還是一個整體。對于這個案例,網格與風格的統一可以拿出來單獨看看。

                這里截取了案例中的一部分網格,可以研究一下網格與對應元素之間的關系,整個案例都是在這同一種網格框架下進行布局的,這樣從布局上就能保證案例整體的統一性。包括這里面出現的圖片,風格都基本趨向一致。

                統一與變化

                在設計的過程中,能夠注意到上面這九點,就能讓作品具有統一性,看起來、讀起來很舒服。當然這種絕對的統一也會給人帶來死板、缺乏變化的感覺,設計作品中是需要變化來調節的,不過這種變化也是在統一的基礎上進行的。加入變化可以再得10分,變成70分的作品,但是你加入了變化以后,控制不好,這個分數很可能會變成50分,甚至更低,那可能就不合適了。

                這就好比這張人臉,現在的狀態很完美很自然,右下角還有一顆美人痣,統一和變化都很好。如果把這張臉變成左右完全對稱的,很完美,但是就沒有之前那么自然了。完全對稱的人臉就是絕對的統一。

                如果長成這樣的話,就是變化太多的后果。

                總結

                你說你這兩張臉都不喜歡,就是想要這樣自然完美的狀態,其實不容易。長相看命,設計作品就要靠你個人的努力了。做人還是要現實一點,能做好統一,達到及格標準以后,我們有機會再聊聊這個變化的問題。

                歡迎關注研習設的微信公眾號:「Yanxishe2017」

                優設大課堂

                非特殊說明,本文版權歸原作者所有,轉載請注明出處
                本文地址:http://www.zbnk.tw/unification-of-layout-design

                發表評論 加載中....

                評論加載中....

                uisdc

                評論區都快餓癟了,看看我期盼的小眼神...

                轉場動效 優設專訪 設計師 扁平化設計 交互設計師 優設大課堂 界面設計 排版布局 職場 配色 視覺設計 素材下載 web前端開發 設計流程 設計師專訪 AI教程 設計理論 平面設計 神器下載 字體下載 用戶體驗設計 設計趨勢 psd下載 海報設計 設計規范 動效設計 圖標設計 logo設計 產品設計 ICON 神器推薦 App設計 職場規劃 字體設計 酷站推薦 交互設計 ui設計 設計師職場 優秀網頁設計 ps技巧 用戶體驗 酷站 PS教程 網頁設計 經驗分享

                您還沒有登錄

                優設啟用更安全省心的 微信掃碼登錄

                微信掃碼

                300萬設計師聚集地!優設網是極具人氣的設計師平臺
                2012年成立至今,一直專注于設計師的學習成長交流

                把好文章收藏到微信

                打開微信,掃碼分享
                學設計 優設網 在這里

                盈彩彩票aqq靠谱吗