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

更新於 2024/07/09閱讀時間約 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
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
PPT中最基本的幾何元素線,這一條線在PPT中竟然是輔助排版的神器,一起來看看這條線如何搖身一變,變成排版神器的 今天分享一條線的5種功能 文字連接線 分割線 對齊線 時間軸 裝飾線 ▶️影片展示教學 觀看影片前可以打開PPT跟著練習,這樣學習效果會更好哦
Thumbnail
用一個職場常用的循環PDCA當作舉例,那PDCA循環是什麼?其中最著名的例子,是由日本樂天社長三木谷浩史說過的「每天改善 1%,1 年強大 37 倍。」其中蘊含的道理,即是每天「持續改善」的PDCA 循環(PDCA Cycle)。 所以企業常常會針對PDCA循環進行介紹與訓練,如果介紹時一打開PP
Thumbnail
先來看官方文件 https://developer.apple.com/documentation/swiftui/spacer Spacer A flexible space that expands along the major axis of its containing stack
Thumbnail
在今天的數位世界中,Word排版不僅僅是專業文書處理的一部分,也是最常用到的文書工具。然而,許多人在使用Word進行排版時,常常遇到了刪不掉的謎之空白頁的問題,不論怎麼按下"Delte"就是刪除不掉,硬生生就多出一頁,看起來既不美觀又不專業,今天一起來學學怎麼怎麼刪除。
Thumbnail
能夠把主版設定好的設計師,也要有很好的版面規劃的能力,以及要有對所接收到的內容資料有一定的敏銳度做出最好的拆解與歸納,才能設定出最符合一本書或是一個文宣的版面及規則!
Thumbnail
用對方法工作,你就不會那麼討厭工作;思考如何提升效率,你才會有更多時間生活!(時間,都是自己找出來的,共勉之!)
Thumbnail
indd排版就在滑鼠與鍵盤中進行,孩子好奇以前沒有電腦時,印刷品是怎麼產生的,當然印章是一種,但意義上還是有些不同。偶然看到這有趣的鉛字排版工具(嗯,姑且稱它為工具書吧)就和孩子一起來試試,並說一說如
Thumbnail
大部份的人都討厭重複,覺得「重複」就是代表著無聊、乏味、沒有變化性,其實排版設計上的「重複」並不是無趣、乏味、簡單,而是要給人統一、整體、相互關聯的感覺,讓視覺內容產生一種規律,使消費者可以更好閱讀,更快速的理解你想要傳達的訊息。
Thumbnail
視覺排版一直以來,都是設計師必備的重要技術之一,也是最常被人拿來討論、批評的話題,雖然不管是客戶或是一般民眾,大家通常都會覺得排版很簡單,自己來也可以,但其實如何把排版跟美感以及成效,一起發揮到極致,並不是人人都可以做得到的!
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
PPT中最基本的幾何元素線,這一條線在PPT中竟然是輔助排版的神器,一起來看看這條線如何搖身一變,變成排版神器的 今天分享一條線的5種功能 文字連接線 分割線 對齊線 時間軸 裝飾線 ▶️影片展示教學 觀看影片前可以打開PPT跟著練習,這樣學習效果會更好哦
Thumbnail
用一個職場常用的循環PDCA當作舉例,那PDCA循環是什麼?其中最著名的例子,是由日本樂天社長三木谷浩史說過的「每天改善 1%,1 年強大 37 倍。」其中蘊含的道理,即是每天「持續改善」的PDCA 循環(PDCA Cycle)。 所以企業常常會針對PDCA循環進行介紹與訓練,如果介紹時一打開PP
Thumbnail
先來看官方文件 https://developer.apple.com/documentation/swiftui/spacer Spacer A flexible space that expands along the major axis of its containing stack
Thumbnail
在今天的數位世界中,Word排版不僅僅是專業文書處理的一部分,也是最常用到的文書工具。然而,許多人在使用Word進行排版時,常常遇到了刪不掉的謎之空白頁的問題,不論怎麼按下"Delte"就是刪除不掉,硬生生就多出一頁,看起來既不美觀又不專業,今天一起來學學怎麼怎麼刪除。
Thumbnail
能夠把主版設定好的設計師,也要有很好的版面規劃的能力,以及要有對所接收到的內容資料有一定的敏銳度做出最好的拆解與歸納,才能設定出最符合一本書或是一個文宣的版面及規則!
Thumbnail
用對方法工作,你就不會那麼討厭工作;思考如何提升效率,你才會有更多時間生活!(時間,都是自己找出來的,共勉之!)
Thumbnail
indd排版就在滑鼠與鍵盤中進行,孩子好奇以前沒有電腦時,印刷品是怎麼產生的,當然印章是一種,但意義上還是有些不同。偶然看到這有趣的鉛字排版工具(嗯,姑且稱它為工具書吧)就和孩子一起來試試,並說一說如
Thumbnail
大部份的人都討厭重複,覺得「重複」就是代表著無聊、乏味、沒有變化性,其實排版設計上的「重複」並不是無趣、乏味、簡單,而是要給人統一、整體、相互關聯的感覺,讓視覺內容產生一種規律,使消費者可以更好閱讀,更快速的理解你想要傳達的訊息。
Thumbnail
視覺排版一直以來,都是設計師必備的重要技術之一,也是最常被人拿來討論、批評的話題,雖然不管是客戶或是一般民眾,大家通常都會覺得排版很簡單,自己來也可以,但其實如何把排版跟美感以及成效,一起發揮到極致,並不是人人都可以做得到的!