avatarJhane Chou (⁎⁍̴̛ᴗ⁍̴̛⁎)

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

3017

Abstract

畫面,或是轉移視覺焦點的元素,專注呈現圖片。</p><h1 id="50f6">視覺重心</h1><p id="965a">除了基本的平衡,更重要的是:視覺重心。</p><p id="3b5f">可以練習將元素使用不同的排列組合,並保持視覺重心的平衡,以這樣的練習,訓練自己安排元素的能力。</p><figure id="bb3c"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*mJD4Fr3nU5Qq9Fm1ZYYtLg.png"><figcaption>Design by <a href="https://www.facebook.com/Jhane.Deerlight">Jhane Chou</a> / 試著將不同元素調換位置,練習視覺平衡</figcaption></figure><h1 id="b048">關於文字</h1><p id="18ff" type="7">美好的畫面,配上無法讓人好好閱讀的文字,那這樣的排版非常可惜。</p><p id="b31e">先前在〈<a href="https://medium.com/deerlight/%E5%A5%BD%E8%AE%80%E7%9A%84%E6%8E%92%E7%89%88%E6%8C%87%E5%8D%97-34b9d2a0ca23"><b>好讀的排版指南</b></a>〉提過字距、行距、文字段落的寬度等觀念。</p><div id="97c4" class="link-block"> <a href="https://medium.com/deerlight/%E5%A5%BD%E8%AE%80%E7%9A%84%E6%8E%92%E7%89%88%E6%8C%87%E5%8D%97-34b9d2a0ca23"> <div> <div> <h2>好讀的排版指南</h2> <div><h3>善用好讀的排版指南,提高使用者持續閱讀的意願</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*H9LTjRDjYuYlk9KjlY7mCA.png)"></div> </div> </div> </a> </div><p id="24b6">在〈<a href="https://medium.com/deerlight/%E5%A6%82%E4%BD%95%E5%89%B5%E9%80%A0%E8%A6%96%E8%A6%BA%E5%B1%A4%E7%B4%9A-2d3c71870d5e"><b>如何創造視覺層級</b></a>〉提到如何運用不同方式的對比,創造視覺層級。</p><div id="5199" class="link-block"> <a href="https://medium.com/deerlight/%E5%A6%82%E4%BD%95%E5%89%B5%E9%80%A0%E8%A6%96%E8%A6%BA%E5%B1%A4%E7%B4%9A-2d3c71870d5e"> <div> <div> <h2>如何創造視覺層級</h2> <div><h3>視覺層級並不侷限於平面設計,在用戶體驗及介面上更是一個重要的核心之一</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*JOJMj-8fr7bhkdMfaSY-Mw.png)"></div> </div> </div> </a> </div><h1 id="28ed">字體考量</h1><p id="c503">除了避免混用多種字體,還得考量哪些情境適用哪種字體。字體的樣貌也具有一定程度的影響。</p><figure id="a550"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*_g2TAKFv5Cd6qzkmlV75Pg.png"><figcaption>Design by <a href="https://www.facebook.com/Jhane.Deerlight">Jhane Chou</a> / 左圖少量字體|右圖多種字體</figcaption></figure><h2 id="1aa5">語系差異</h2><p id="17ec">為何美好的英文語系編排,套用中文字後,整個畫面的感覺都不對勁了?</p><p id="7180">並不是單純改變語系,就能完成編排設計。</p><p id="5b3a">中文字體的結構相對統一但缺少節奏感,它需要更多的考量,在編排文字時需要對文字的結構適當的調整,增加文字的節奏,感營造舒適的編排。</p><figure id="ab3b"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*t9GVj5kQ5f0DZsUnj1wNCg.png"><figcaption>Design by <a href="https://www.facebook.com/Jhane.Deerlight">Jhane Chou</a> / 中英文字體</figcaption></figure><h1 id="ad5b">留白與元素擺放位置</h1><p id="93fd">以主角面對的方向、視線,等具有指向的位置,來選擇留白或置放想讓人觀看的元素。</p><figure id="5d6c"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*NENcV9z40jGwcdzEOHR65g.png"><figcaption>Design by <a href="https://www.facebook.com/Jhane.Deerligh

Options

t">Jhane Chou</a> / 左圖以人物的視線留白與擺放物件|右圖則否</figcaption></figure><h1 id="6312">運用疏密表現關係</h1><p id="961c">先前的〈<a href="https://readmedium.com/layout-1-5cbd59c6226b"><b>淺談版面設計的觀念</b></a>〉提到:若能將完形心理運用在排版上,就能引導視覺動線,達到很棒的效用。</p><div id="7465" class="link-block"> <a href="https://readmedium.com/layout-1-5cbd59c6226b"> <div> <div> <h2>淺談版面設計的觀念</h2> <div><h3>透過適當的版面安排、組織元素,有效地傳達訊息</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*r1u7p_6cnfG5FDiArq39vw.png)"></div> </div> </div> </a> </div><blockquote id="476d"><p><b><i>完形心理原理:鄰近性(proximity)</i></b></p></blockquote><p id="d4e3" type="7">元素彼此靠得越近,關係就越強烈。在排版設計中,我們會將關係接近的元素組合在一起,讓畫面有組織。</p><h1 id="6ed9">最後的碎碎唸</h1><ul><li>了解原理,才能真正融會貫通;在這之前,必須多多練習</li><li>除了編排設計,也必須了解視覺設計,學習不同表現技巧</li><li>避免過度依賴版型,可嘗試不同的排版方式與實驗</li><li>可透過襯底色塊、線段等方式點綴畫面,讓畫面更聚焦</li></ul><div id="2015"><pre>訂閱作者 ✶ 𝘚𝘜𝘉𝘚𝘊𝘙𝘐𝘗𝘛𝘐𝘖𝘕 透過連結訂閱我,新文章將同步發送通知至你的信箱,邀請你參與我的每一刻。 — — — — — — — — — — — — — — ➟ 推薦連結 ✶ 𝘙𝘌𝘍𝘌𝘙𝘙𝘈𝘓 讀者以我的推薦連結加入 𝘔𝘦𝘥𝘪𝘶𝘮 付費會員,我就能在每月收到分潤(讀者只需支付官方的會員方案,不須額外花費)如果你已是付費會員,想以行動支持我,需重新加入。 — — — — — — — — — — — — — — ➟ 支持鼓勵 ✶ 𝘌𝘕𝘊𝘖𝘜𝘙𝘈𝘎𝘌 如果你喜歡我的個人文章,可以多拍幾下 :) — — — — — — — — — — — — — — ➟ 𝘔𝘢𝘵𝘵𝘦𝘳𝘴|𝘋𝘦𝘦𝘳𝘭𝘪𝘨𝘩𝘵|𝘐𝘯𝘴𝘵𝘢𝘨𝘳𝘢𝘮|𝘍𝘢𝘤𝘦𝘣𝘰𝘰𝘬|𝘎𝘶𝘮𝘳𝘰𝘢𝘥</pre></div><p id="b97c">感謝你的閱讀及支持,任何問題都歡迎來信交流|<a href="mailto:[email protected]">[email protected]</a></p><div id="2a95"><pre>相關文章:#美感養成#設計指南</pre></div><p id="5bef">透過下方的 Like 拍手(<a href="https://liker.land/civic?from=jhane_chou"><b>註冊 Liker 完全免費</b></a>)讓創作者獲得額外收入 :)</p> <figure id="b6bf"> <div> <div> <img class="ratio" src="http://placehold.it/16x9"> <iframe class="" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fbutton.like.co%2Fin%2Fembed%2Fjhane_chou%2Fbutton&amp;display_name=LikeCoin&amp;url=https%3A%2F%2Fbutton.like.co%2Fjhane_chou&amp;image=https%3A%2F%2Fstorage.googleapis.com%2Flikecoin-foundation.appspot.com%2Flikecoin_store_user_jhane_chou_main%3FGoogleAccessId%3Dfirebase-adminsdk-eyzut%2540likecoin-foundation.iam.gserviceaccount.com%26Expires%3D2430432000%26Signature%3DBJgEhGMTqQRCn2Wbz20NrlI%252BI6zlPSm6ywhOUXor6hCHIfQ16VUfEDunUjbOW8TBmNOJqqhtqnNQL7Be27VbnfL1%252BS6Z9xDT1vUpKzFATieASBx3C5fW%252FggCss1XX1gS6S%252FJeuHc479nw7WzqN%252BZo4%252F%252BchiTfz3F0vYyLtgF27Ykcw%252BjMYHSFAoJM8D%252Bg8S%252BS3mAXBsAJePqRzmM83hL4P2Q14cSN6%252BGGf9sEL1lHZre5p6DLkzxQKZg34QchM6mpw%252BvTp3jTLxCvz8cJH6RDlGd4K1PbpgJNHMPXaslB9HxbjTzWXC%252BqKnuM%252FEuaUbHGNRSjr3iNAWRt5YMXCCHFg%253D%253D&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=like" allowfullscreen="" frameborder="0" height="212" width="485"> </div> </div> </figure></iframe></div></div></figure></article></body>

Design by Jhane Chou

#美感養成#設計指南

淺談版面設計的運用

整理編排設計上可運用的技巧,遵循幾個基本原則,也能營造出良好的視覺效果

非付費會員點我 👉 免費閱讀此文章

版面設計有許多脈絡可循,不論是市面上或任何找到的資料,內容都大同小異的,幾乎遵循幾個法則。

點出幾個常見的方式,有技巧的將元素安排於畫面中。

大綱
1. 元素安排
2. 佈局選擇
3. 視覺重心
4. 關於文字
5. 字體考量
6. 留白與元素擺放位置
7. 運用疏密表現關係
8. 最後的碎碎唸

元素安排

有時候,使用少量的元素,哪怕只有一張圖片,甚至是文字,也能透過編排設計,製作視覺;明白各元素擔任的角色,遠比塞滿畫面重要。

Design by Jhane Chou / 文字排版
Design by Jhane Chou / 惡趣味的圖片搭配手寫文字

佈局選擇

依據呈現的內容,選擇合適的佈局安排,儘管排版的呈現相似,依然能變化多種可能。

使用自己在九份拍攝的風景照,製作風景內頁的設計範例:

🧿 將元素安排於畫面中,以周圍的留白營造窗外的意象

Design by Jhane Chou / 將元素安排於畫面中,類似窗框的意象

畫面中的所有元素都擁有自己的空間,彼此不重疊,讓人有豐富感,整體精緻。

🧿 將圖片放大,展現「飽覽美景」的感受

Design by Jhane Chou / 試圖將圖片放大,表示飽覽美景

有時依據圖片的性質,決定裁切的比例,在此範例中,使用修長的裁切,營造出優雅的感受。讓人想待在民宿或是咖啡廳裡,望著美景的感受。

🧿 設計「明信片」風格的排版

Design by Jhane Chou / 明信片的呈現,增加圖片的比重

我喜歡明信片的直觀、大方,它充分展現照片,明顯感受「身在這裡」。越優秀的攝影,需要的編排與額外修飾就越少,盡可讓減少干擾畫面,或是轉移視覺焦點的元素,專注呈現圖片。

視覺重心

除了基本的平衡,更重要的是:視覺重心。

可以練習將元素使用不同的排列組合,並保持視覺重心的平衡,以這樣的練習,訓練自己安排元素的能力。

Design by Jhane Chou / 試著將不同元素調換位置,練習視覺平衡

關於文字

美好的畫面,配上無法讓人好好閱讀的文字,那這樣的排版非常可惜。

先前在〈好讀的排版指南〉提過字距、行距、文字段落的寬度等觀念。

在〈如何創造視覺層級〉提到如何運用不同方式的對比,創造視覺層級。

字體考量

除了避免混用多種字體,還得考量哪些情境適用哪種字體。字體的樣貌也具有一定程度的影響。

Design by Jhane Chou / 左圖少量字體|右圖多種字體

語系差異

為何美好的英文語系編排,套用中文字後,整個畫面的感覺都不對勁了?

並不是單純改變語系,就能完成編排設計。

中文字體的結構相對統一但缺少節奏感,它需要更多的考量,在編排文字時需要對文字的結構適當的調整,增加文字的節奏,感營造舒適的編排。

Design by Jhane Chou / 中英文字體

留白與元素擺放位置

以主角面對的方向、視線,等具有指向的位置,來選擇留白或置放想讓人觀看的元素。

Design by Jhane Chou / 左圖以人物的視線留白與擺放物件|右圖則否

運用疏密表現關係

先前的〈淺談版面設計的觀念〉提到:若能將完形心理運用在排版上,就能引導視覺動線,達到很棒的效用。

完形心理原理:鄰近性(proximity)

元素彼此靠得越近,關係就越強烈。在排版設計中,我們會將關係接近的元素組合在一起,讓畫面有組織。

最後的碎碎唸

  • 了解原理,才能真正融會貫通;在這之前,必須多多練習
  • 除了編排設計,也必須了解視覺設計,學習不同表現技巧
  • 避免過度依賴版型,可嘗試不同的排版方式與實驗
  • 可透過襯底色塊、線段等方式點綴畫面,讓畫面更聚焦
訂閱作者 ✶ 𝘚𝘜𝘉𝘚𝘊𝘙𝘐𝘗𝘛𝘐𝘖𝘕
透過連結訂閱我,新文章將同步發送通知至你的信箱,邀請你參與我的每一刻。
 — — — — — — — — — — — — — — ➟
推薦連結 ✶ 𝘙𝘌𝘍𝘌𝘙𝘙𝘈𝘓
讀者以我的推薦連結加入 𝘔𝘦𝘥𝘪𝘶𝘮 付費會員,我就能在每月收到分潤(讀者只需支付官方的會員方案,不須額外花費)如果你已是付費會員,想以行動支持我,需重新加入。
 — — — — — — — — — — — — — — ➟
支持鼓勵 ✶ 𝘌𝘕𝘊𝘖𝘜𝘙𝘈𝘎𝘌
如果你喜歡我的個人文章,可以多拍幾下 :)
 — — — — — — — — — — — — — — ➟
𝘔𝘢𝘵𝘵𝘦𝘳𝘴|𝘋𝘦𝘦𝘳𝘭𝘪𝘨𝘩𝘵|𝘐𝘯𝘴𝘵𝘢𝘨𝘳𝘢𝘮|𝘍𝘢𝘤𝘦𝘣𝘰𝘰𝘬|𝘎𝘶𝘮𝘳𝘰𝘢𝘥

感謝你的閱讀及支持,任何問題都歡迎來信交流|[email protected]

相關文章:#美感養成#設計指南

透過下方的 Like 拍手(註冊 Liker 完全免費)讓創作者獲得額外收入 :)

Design
中文
設計
Art
Creativity
Recommended from ReadMedium