設計畫面太凌亂?這個原則肯定沒學會!

2020-12-21 大眼妹紙說說

重複、對比、對齊以及親密性是版式設計中的四大原則,各種排版形式與規則都是基於這四大原則衍生而來,而掌握這些具有指導性的設計原則,能夠幫助我們在短時間內,更快更好的達成設計目標。本期給大家講解四大原則之——對齊原則。

對齊原則是指:「任何元素都不能在頁面上隨意安放,每一項都應當與頁面上的某個內容存在某種視覺聯繫」。

在四大原則中,對齊應當是最容易理解的了,因為在我們的生活中對齊幾乎就是無處不在。

不管什麼樣的環境,只要有各種各樣的事物存在,它就需要一個秩序,人類的環境如此,設計元素的環境照樣如此。左下圖設計元素參差不齊,畫面顯得雜亂無章,沒有美感,影響閱讀;而右下圖運用合理的對齊可以帶來秩序感,看起來更加嚴謹、專業,信息傳達效果更好。

為什麼要對齊?不僅僅是對用戶視覺瀏覽習慣的考量,還是對頁面中信息組織的考量。一方面利用對齊,符合用戶的視覺慣性,降低用戶閱讀負擔;另一方面利用不同的對齊形式,能有效組織信息,讓頁面規整有序、嚴謹美觀。

文字編排常用的對齊方式有:左對齊、兩端對齊末行左對齊、右對齊、居中對齊、兩端對齊、頂對齊和底對齊等。在進行設計時要根據構圖形式選擇合理的對齊方式,每種對齊形式所傳達的視覺感受也不一樣。(對齊名稱只是為了便於講解和記憶,不一定與軟體中的名稱一致)

左對齊

由於我們的閱讀順序大多是從左往右,所以左對齊是閱讀效率最高的對齊方式,也成為了排版中最常見的一種對齊方式。

左對齊的缺點是容易造成右端留白過多,整體視覺失衡。但是這種對齊方式不破壞文字本身的起伏和韻律,能保證較好的閱讀體驗。還可以避免英文因單詞所包含的字符數量不等而不便於左右對齊的編排難題。

兩端對齊末行左對齊

在進行大段的文字編排時,常會遇到這樣的情況,無論你怎麼拉動文本框,文字的兩端都無法對齊。

這時可以強制左右兩端都對齊,最後一行靠左對齊。這是最常用的段落性文字編排形式,多運用於雜誌、畫冊、報紙等多文字信息內容的編排。使段落文字嚴謹工整,讓版面清晰有序而有條理,提高閱讀效率。

居中對齊

多用於居中對稱式的版面,給人莊重、肅穆、經典的感覺。因為大段的居中對齊文字會造成分行和閱讀困難的問題,所以常用在標題、導語和短篇文字編排中。

右對齊

右對齊的編排方式與人的視線移動方向相反,而且每一行起始部分的不規則增加消耗了閱讀的時間和精力,這種格式只適用於少量的文字。

右對齊使用的頻率不太高,往往會與圖形、照片建立某種視覺聯繫,獲得排版上的平衡。使用右對齊會給人一種人為幹預的感覺,因此這種對齊方式會顯得比較個性。

兩端對齊

兩端對齊是指將文字通過調整間距的方式使得兩端完全對齊,強制處理成四方形,這樣可以達成工整嚴謹的效果。

頂對齊

頂對齊是縱向排版才會用到的對齊方式,起源於古代的書簡,因此採用縱向排版雖然不利於閱讀,但是可以營造出復古的文化氛圍,有著濃濃的中國味。

底對齊

底對齊也使用在縱向排版,每一行起始部分的不規則增加消耗了閱讀的時間和精力,是最不適合閱讀的對齊方式,一般只用於少量文字或作為裝飾性元素使用。

非橫向和縱向對齊

排版不一定只有橫向和縱向的視覺方向,也會有其他的方式,在這些視覺方向上,也要通過對齊的原則來規整設計元素。

傾斜對齊

分散對齊

在設計時常會根據構圖和空間分割使用多種對齊方式的編排組合,如下圖版面中每個信息群組使用的對齊方式也不一樣,可以讓信息層級更清晰,信息傳達效果更好。

自由對齊

打破秩序,沒有明確的對齊線,是崇尚隨興,自由活潑,具有詩意、感性的排列方式,為版面設計提供無限的可能性。

為了讓大家加深對對齊原則的理解,提取本期文章的主要內容做為原始資料,運用對齊原則進行設計示範。

按照上一期親密性原則總結出來的規律,把版面中的文字信息進行分組,使它們各自成為一個視覺單元,建立起條理性和組織性。並按照「字間距< 行間距< 段間距< 組間距」的規則進行親密性設置,保證各個間距組合之間的相對性比例。

把「標題」、「對齊原則簡介」、「對齊方式」,

三組信息分別進行對齊設置

「標題」按照兩端對齊的形式,調整文字間距使得兩端完全對齊,強制處理成四方形,這樣可以達成工整嚴謹的效果。並把字體改為思源宋體,與正文的思源黑體增加字體對比:

「對齊原則簡介」文字採用左對齊格式,可以保持文字本身的起伏和韻律,還能保證較好的閱讀體驗。另外文字較多的一段,可以採取兩端對齊末行左對齊格式。使段落文字嚴謹工整,讓版面清晰有序而有條理,提高閱讀效率。

「對齊方式」信息組使用右對齊形式,增加對齊方式的多樣性。雖然每一行起始部分的不規則增加消耗了閱讀的時間和精力,但是也增加了排版的節奏感。

把設置好的文字信息放置到版面中,並使用網格進行規範和輔助對齊,使用網格可以快速分割版面以及找準對齊關係,輔助我們的設計更嚴謹。

沿用上期使用的孟菲斯風格元素豐富畫面。給各個信息組加入偽立體效果的外框,讓信息分割更明確,加入外框後畫面也要遵循對齊原則。

加入小圓點當做背景機理,並增加各種幾何形狀來豐富畫面。增加活潑感和趣味性。方案一設計完成:

嘗試使用其他對齊方式和構圖形式設計另一個方案:

加入孟菲斯風格元素豐富畫面,遵循對齊原則進行排版,方案二設計完成:

總 結

視覺規範最基礎的要求就是:整齊、規範、有條理。大多數情況下,設計做的不美觀,很大的原因就是在排版方面過於隨意,尤其是很難或者沒有意識做到對齊。

無論版面的信息多少、位置如何變化,只要遵循對齊原則,保證元素間的對齊關係,就能夠使版面統一、簡潔、更有條理,還可以引導視覺流向,有助於信息更好傳達,當然也更美觀。在進行設計時必須先掌握最基本的程序化的美,才可以升華到最「隨意」的原始美。

相關焦點

  • 點評3張照片,學會「設計」畫面
    2.畫面缺乏故事性故事性的營造就要依靠畫面中的人物了。但由於人物過多,所以照片不但顯得有些凌亂,還無法讓觀者聯想到畫面中人物之間的聯繫。3.拍攝角度有提升空間在重點表現線條感的畫面中,往往不建議其與照片四邊是平行的關係,因為這樣會顯得畫面很呆板。這張照片在拍攝時應該也注意到了這個問題,但如果向右多傾斜一點相機,可以讓線條顯得更生動一些。
  • 聚焦哥:PPT排版設計原則——對比
    「今天來說說設計原則四要素的對比吧」聚焦哥一、對比>那個案例上去我們可以看得出上面沒有經過排版的文字,為選擇更加凌亂,別人是不願意看的,反而經過排版的文字,他得一個對比度是非常高的,我們可以清晰地知道他想表達出什麼意思出來那接下來我們就分析一下對比到底有哪些方法?
  • 特沒譜「原則上」同意TikTok雲上加州方案,強烈diss「原則上」這個翻譯
    我看標題時候就覺得有些出戲,「原則上」是什麼鬼?到底是同意還是不同意,一點也不爽快。然後再看到全文裡特沒譜的原話:「我已經對這筆交易表達了祝福」,「我在原則上同意了這筆交易」。我不禁陷入了好奇,「原則上」是多麼中國特色的詞彙,難不成對外輸出到了美國,特沒譜也學會了這一套?
  • 學會「藍斯登原則」,成功反擊
    我聽完以後暗自搖頭,在前幾年的飯局上,老李對待朋友都會說那樣的話,顯示出自己很厲害的樣子,那麼在工作中對員工態度肯定也不會好。聽到老李的故事,我不禁想到了「藍斯登原則」,他的遭遇真是這個原則的典型案例。「藍斯登原則」的含義是什麼?
  • 平面廣告設計中的一些流程和原則
    上覺今天講的平面廣告是指品牌的傳播主畫面,一般常見的傳播物料都是圍繞主畫面來延展設計的,比如海報、易拉寶,弔旗、地貼……等,了解了主畫面的創作方法,大多數的平面廣告也就搞懂了。一、創作的基本原則:1、品牌核心信息曝光為第一原則;什麼是品牌的核心信息呢?
  • 想要字體設計不凌亂?排版很重要
    想要字體設計不凌亂?排版很重要。字形排布是指將一定數量的漢字進行排序的一種字體設計表現形式。在字體設計過程中,字形的整體排布對視覺審美的影響至關重要。 一、有序排布 有序排布是最為常見的種字形排布方式,它的易讀性高且排列整齊,使用時往往不容易出錯,適用於字數為雙數的詞語或短句且題材較常規的字體設計
  • 界面設計方法(9):界面設計的原則與標準
    編輯導語:前幾篇文章中,我們已經了解到了許多關於界面設計的相關知識。今天這篇文章讓我們回歸一下界面設計本身,談一談其設計原則與標準,希望對你有幫助。前面介紹了5種基本的界面形式,如果從構成界面的要素(構件)層面看,實際上所有的界面都是一樣的,因為它們都是由同樣的控制項構成的,只是控制項的位置不同而已。
  • 毛坯房設計大跌眼鏡,布置太凌亂引熱議
    毛坯房設計大跌眼鏡,布置太凌亂引熱議 說到馬天宇相信對於90後來說都是回憶,當年憑藉著一首《該死的溫柔》順利的火到大江南北,也算是圈中非常有名氣的歌手,馬天宇給我們的第一印象就是非常帥氣而且很內斂,這幾年也轉行當演員,相信很對人都看過電影《悲傷逆流成河》 《決勝時刻》等也給我們留下很多深刻的印象。
  • AR特效相機:設計原則和設計架構
    本文作者從AR特效相機的基本概念出發,對其設計架構、設計原則、設計價值和發展前景展開了分析,與大家分享。根據具體實現的效果方向,大致可分為:濾鏡-改變畫面藝術效果:濾鏡主要修飾畫面、呈現整體藝術效果,統一畫面風格,如:白皙濾鏡、復古濾鏡、油畫風濾鏡等貼紙-豐富畫面主題:貼紙大致分為2D/3D元素,可豐富畫面視覺效果,使得主題特色鮮明,如:頭飾、臉飾、耳飾、前景貼紙等
  • 包裝設計的基本原則!
    商品包裝設計仍然是一項具體的和具有一定範圍的工作,它既包含著思維的也包含著技能的,更存在著一定的設計原則。安全原則是要求設計要遵循保護商品、防止洩露和外溢的客觀規律,來設計容器的各個部位的位置和比例等。
  • 頭等艙偶遇彭于晏,被美女包圍頭髮太過於凌亂
    頭等艙偶遇彭于晏,被美女包圍頭髮太凌亂啊啊啊太驚喜啦」。哈哈,這小姐太雞凍了!,頭髮都凌亂啦!其實彭于晏是非常喜歡和粉絲合影的,就算小姐姐們主動要求合影,他肯定也會答應的。這麼成熟帥氣的男人怎麼會沒人相伴呢!小編希望他能早日找到屬於自己的愛情!怎麼樣大家感覺彭于晏帥嗎?
  • PPT頁面太散?太滿?你需要這個原則指導一下
    想要解決這個問題,就需要我們今天提到的,平面設計四原則的第三個原則——親密性。 所謂「相關元素」,不用說就是兩個元素關係比較密切的元素;「組織」就是指兩點:符合閱讀邏輯;遠近距離要符合一定的規則,既不能太遠,也不能太近。 通俗點來說就是「關係好走得近,關係差離得遠」。
  • 電商美工設計有哪些基本規範原則
    很可能是你家電商設計師裝修的時候是隨意發揮,看心情設計,並沒有遵從電商設計的基本規範,那麼電商設計的基本規範有哪些呢?  首先PC端頁面的尺寸寬度1920px,高度尺寸按照頁面所需信息來定即可,顯示尺寸1920×1080px;手機端頁面的尺寸寬度750px,高度尺寸按照頁面所需信息來定即可。
  • 室內設計三部曲:《家居室內空間設計原則》
    而一個好的裝修設計無疑是能錦上添花。而一個好的家居設計一般都會根據戶型的不同和其功能分成客廳、餐廳、廚房、臥室、陽臺、衛生間、書房等等,每一處都是必不可少的。即便是一些戶型較小的房子也可以通過設計,從有限的空間圖騰出一些其他空間,用來滿足我們的居住需求。不同的空間都有各自需要注意的事項和要遵守的原則。
  • 文字設計原則!值得一看
    因此,文字設計是增強視覺傳達效果,提高作品的訴求力,賦予版面審美價值的一種重要構成技術。在這裡,我們主要談談在平面設計中文字設計的幾條原則,以及文字組合中應注意的幾點。特別提醒一下,這部分工作應該是人腦完成的工作,電腦是無法代替的。
  • 這個PPT圖片處理的方法,簡直太贊了,一定要學會!
    當然,身為一位 PPT 定製設計師,吸引我的不單單是節目的內容,還有這檔綜藝節目的視覺設計。比如節目一開始的導演介紹,圖疊字的處理形式,讓畫面很有層次:當然,這並不是平面設計中所獨有的設計手法,在 PPT 設計中也會經常用到這樣的處理方式。比如 2020 年夏季奧運會的 PPT 設計:
  • 園林景觀設計原則
    三、設計的基本原則1、首先要尊重場地、因地制宜、實時造景、就地取材,植物造景,四時爛漫。並且要符合當地的人文景觀和節令氣候。比如西安有一些大的主題公園,如大雁塔、南湖、大唐芙蓉園等,這都是一些大師的作品,給遠道而來的遊客帶來美的享受。園林設計師要有一雙發現美的眼睛,而不是標新立異,不尊重客觀地形,刻意打造一個出奇的景觀。
  • 迪麗熱巴凌亂風寫真
    「慵懶」最大的特點就是凌亂和隨意,所以迪麗熱巴並沒有拿一頭秀髮示人,而是讓頭髮更加彭松、更加凌亂,看起來就好像剛剛起床沒睡醒的樣子,所以仙女連起床的樣子都這麼美嗎?迪麗熱巴超級適合這種抬頭俯視的視角,既有一種御姐範,更能散發女人味。
  • 上海交大設計學院與上海市建築學會聯合成立「上海國際建築與設計...
    上海交通大學設計學院聯合英國皇家建築師學會RIBA,美國建築師學會AIA上海分會共同主辦主題論壇「CONNECT|城市·聯結:如何與城市共生——國際建築師論壇」,邀請上海市建築學會理事長曹嘉明、英國皇家建築師學會中國委員會榮譽副會長Peter Marshall、美國建築師學會(上海)副會長Hugh Whitmore,以及Chapman Taylor、Gensler、MVRDV、PCPA、華建集團華東建築設計研究總院
  • 邋遢媽媽+凌亂不堪的家,對孩子影響大嗎?據說娃沒啥大成就?
    記得之前也看有人問過一個問題說:邋遢的媽媽和凌亂不堪的家庭,會對孩子有什麼影響?先說說我身邊的幾個朋友:1.想一想,軍人和護士的結合,肯定家裡也是非常乾淨的了。2.還有一個朋友,是我一個高中時的閨蜜,之前上學時沒覺得她有多愛乾淨,畢業後她就去了南方,很多年沒見過了,後來有一次我去了她家裡,她家裡被她收拾得一塵不染的樣子,非常的清爽。