排版微調 VOL.1-詳細解說版

更新於 發佈於 閱讀時間約 4 分鐘

排版微調是我社群的一個系列內容,這篇則是提供給訂閱會員的詳細解說版,會說明為何調整的原因跟我的看法,以及原本設計可能有的問題,如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱會員


以下內容會說明每個設計調整的原因跟優點,部分內容也會解釋原有設計的問題


raw-image

1.這張設計調整了二個部分,第一個是 100% 與柳橙原汁對齊,可以讓整體視覺更協調外,100% 也能更突出。

顏色的調整這邊是想要傳達大家可以依照「整體視覺配色、品牌配色、產品顏色」來去調整,例如柳橙汁橘色,那我使用橘色就可以搭配,或是使用對比色、近似色也可。

相較於胡亂搭配,特意去注意這些小細節地方的色彩可以讓整體更有一致感,不過有些情況也是可以使用黑或白這類配色,就是這個資訊不是重點,甚至你可以不想要突出,那就可以使用黑白搭配,讓資訊不會太搶眼。



raw-image

2.這張調整的地方也有二點,一點當然也是對齊,還有一點是營造「層次感」,這邊我把「2024 年度交流活動」給加粗,這樣跟上面比較細的文字有差異,能夠有層次感。

另外則是我判斷這是一個更需要突出的資訊,原因在於依照文案判斷,這應該是給「中小企業主與新創團隊」這群 TA(目標對象) 看的活動,所以更重要的是告訴這群人這是什麼活動。

假設這是組織一年有很多活動,「中小企業主與新創團隊」可能會重複出現,但活動名稱不會,這時活動名稱就比較重要,像是這類資訊的安排有時也是設計師要注意的。



raw-image

3.這邊想講的是如果你今天的情境是要凸顯產品價格,讓大家知道多少錢,相較於左邊,右邊把金額「放大」、「加粗」、「換色」都可以讓資訊更被凸顯。

設計中要凸顯一個元素跟另一個元素不同,就要創造出「差異」,上面這些方式都是創造差異的技巧。



raw-image

4.我們通常會從行銷人員那邊收到「文案」,但他們就只會像下圖上方是一整個句子,排列組合沒有變化,甚至行銷不會給你案例,你需要把這單調的文字變化。

通常我在收到這類內容時會分析,看一下句子中有什麼重要資訊,「重要資訊」部分就可以變成設計的重點,去做一些變化。

像是這邊「贈送的東西」就是重點,所以我就安排把他突出,像是我這樣的呈現還有破圖效果,會讓重點更被凸顯。



raw-image

5.設計的呈現中,我們有時不一定所有文字都放或隨意拿掉,而是在不扭曲原意的狀況下給出最適合的設計安排。

像是這邊「免費運」,我知道講免運就好,而且第一個想到就是這跟前面「全管滿 500 元」可以分開成二個資訊,免運也讓我想到購物商城常看到的「免運標籤」,所我就拆成二組資訊,然後把免運變成標籤。

另外這邊我加上「FREE」是為了讓標籤更精緻,如果我只塞免運二字,除了文字要放很大外,也很單調。



raw-image

6.這邊想要展示的是「列點的排法」,在呈現資訊上,如果想要讓不同文字長度的資訊好閱讀,多數時建議齊左會比置中好。

另外列點項目前加上符號可以更好閱讀,因為符號跟文字差異大,觀看者的視覺比較好重新定位查看,且使用符號也能讓設計更不單調。

以這張圖為例,如果是飲料還能用像是「飲料杯」這樣的圖示來設計,另外如果你有特別想突出的選項,可以單獨把那個選項前的符號做差異化。



raw-image

7.對齊、營造層次這個就不用多講,這邊還有二點調整,一個是加上國旗,一個是文字顏色,加上國旗是因為我在資訊中讀到「國家」這個元素,竟然文案會特別強調,通常我要介紹起司,我就直接講就好,不用多個國家,會講通常就是特色。

而美味起司我想要用不同顏色創造區隔,在選擇顏色我就會從相關元素來選,這邊很明顯的元素是國旗,上面有三色,白色沒有特色且跟底色搭配會看不清楚,紅色太搶眼,藍色就會是我覺得更適合的選擇。

當然這邊插畫也能使用「起司」,但是相較於國家的特色,起司就比較普通,除非今天是介紹「食材」,其他介紹項目也是食材,像是「來自美國的牛肉」、「來自日本的水果」,那比起用國家當標誌,食材就更適合,因為這邊「主體是食材」。



raw-image

8.這邊有三個調整重點,一個就是加上插畫,讓資訊上更容易解讀,這邊說一下插畫的選擇要注意二點,一點是「風格」,如果你的整體設計風格是水彩,那用我圖中這種元素就不適合,另一點是「造型」,你今天是紙盒牛奶,用玻璃罐插畫也會很奇怪,這些小地方都是要多注意的。

再來就是我把「全新」變成標籤「新」,因為「新、NEW」這類是比較常被製作成標籤的元素,所以我使用大家會容易看懂,也不是任何資訊都能隨意這樣變換。

最後是字體選擇,我這邊使用「金萱那提體」,原因在於牛奶給我的「質地」,是比較「柔順的」,所以我就選擇也有類似質感的字體,當然這不是絕對,更多時候還是看整體設計、品牌調性搭配。




以上就是完整的微調內容詳解,這篇為「免費試閱」,如果你接下每週都想要看我分析這系列內容,歡迎訂閱我的會員。

訂閱會員:https://vocus.cc/salon/kevin_learn/plans/content



創作邦致力分享設計新知、創作工具、高效工作方法,我們的沙龍提供各種給設計師和創作者的實用知識與資源,如果你付費訂閱我們,還會提供你更深度的內容分享、專屬討論區、會員購買數位商品限定優惠等福利。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
報價書需要具備的內容有哪些呢?關於設計報價書製作的二三事在這裡!
Thumbnail
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。
Thumbnail
善用好讀的排版指南,提高使用者持續閱讀的意願。主軸將圍繞於好讀,雖與視覺排版相近,卻有些許的不同;本文所提及到的任何觀念,來自於經驗或是過去所學,不須奉為圭臬,而是理解與體會。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
排版視覺調整的重要性及基本原則 在印刷排版的藝術中,視覺調整是一項不可或缺的技術。它的核心在於如何讓每一行文字更加協調、美觀,同時確保整體版面的和諧。這種調整可以分為兩類:「段落視覺調整」和「單行視覺調整」。段落視覺調整專注於整個段落的文字排列,而單行視覺調整則聚焦於單獨一行的調整。兩者各有特點,
Thumbnail
製作簡報前,我們先認識基本的排版觀念,掌握幾個大原則,就可以讓簡報看起來很專業囉!
前言 那麼今天要來教大家,如何實現各種排版,以及不同的 CSS 可以做出怎樣的效果。 整理好你的思緒,深深吸一口氣,讓我們在 2024 這嶄新的一年當中,開始新的學習之旅吧。 字體相關 color 設定文字的顏色。 <p style="color: blue;">這是藍色文字。</
Thumbnail
整本書的設計偏向日系清新風,書籍設計色彩明亮、和諧,排版小裝飾具有巧思。適合新手學習的設計工具書。
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
報價書需要具備的內容有哪些呢?關於設計報價書製作的二三事在這裡!
Thumbnail
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。
Thumbnail
善用好讀的排版指南,提高使用者持續閱讀的意願。主軸將圍繞於好讀,雖與視覺排版相近,卻有些許的不同;本文所提及到的任何觀念,來自於經驗或是過去所學,不須奉為圭臬,而是理解與體會。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
排版視覺調整的重要性及基本原則 在印刷排版的藝術中,視覺調整是一項不可或缺的技術。它的核心在於如何讓每一行文字更加協調、美觀,同時確保整體版面的和諧。這種調整可以分為兩類:「段落視覺調整」和「單行視覺調整」。段落視覺調整專注於整個段落的文字排列,而單行視覺調整則聚焦於單獨一行的調整。兩者各有特點,
Thumbnail
製作簡報前,我們先認識基本的排版觀念,掌握幾個大原則,就可以讓簡報看起來很專業囉!
前言 那麼今天要來教大家,如何實現各種排版,以及不同的 CSS 可以做出怎樣的效果。 整理好你的思緒,深深吸一口氣,讓我們在 2024 這嶄新的一年當中,開始新的學習之旅吧。 字體相關 color 設定文字的顏色。 <p style="color: blue;">這是藍色文字。</
Thumbnail
整本書的設計偏向日系清新風,書籍設計色彩明亮、和諧,排版小裝飾具有巧思。適合新手學習的設計工具書。