這樣O那樣X馬上學會好設計-初學者的好書推薦(上)

Lena 哩那-avatar-img
發佈於UI/UX 設計 個房間
更新 發佈閱讀 5 分鐘


我是Lena,這是我 2018 年時自學設計時發布的第一篇文章,搬家後把內容也保留了下來。


自學的路上不斷地爬文,找尋任何能獲取知識、技巧與經驗分享的管道,也讀了一些和設計相關的書籍,這篇文章的主角—這樣O那樣X馬上學會好設計,想以初學者的角度和大家分享關於此書的心得筆記,寫這篇文的同時,我也再次複習了這本書的內容。

這本書章節清晰,每一篇幅都不會太長,圖片很多,書上提及的內容都能有相稱的圖片解說,方便讀者對照理解,也更加深印象。以下會依章節紀錄分享我的心得筆記。

CH1. 開始設計之前

設計只是完成作品的方法,而非目標。

設計開始前,最重要的是事先確定「設計目的」,因此先得整理手上擁有的資訊,了解目標對象的特質。

自問「為什麼要製作這個?」來確定設計的目的,再依目標對象角度設想並條列整理資訊。

  1. 何時(When)
  2. 何人(Who)
  3. 在哪裡(Where)
  4. 做什麼(What)
  5. 怎麼做(How)
  6. 目的為何
  7. 結果
以店家週年慶活動為例我們可整理出:
  1. 何時:活動日期、時間
  2. 何人:某店家
  3. 在哪裡:店家位置
  4. 做什麼:週年慶活動
  5. 怎麼做:發放傳單
  6. 目的:宣傳活動與促銷訊息
  7. 結果:吸引顧客來店

基於以上整理,再加以安排優先順序,將必要資訊傳達給目標對象。

CH2. 版面編排的基本法則

版面率影響版面印象。

本章節提及版心設定、網格應用、對齊、出血配置、留白及黃金比例等等的相關法則,以下提出其中幾個篇幅與大家分享。

一、版心與邊界

「版心」是指「文字內容與照片、插圖等要素的配置區域」,也稱為「版口」,而沒有配置這些要素的區域則稱為「邊界」或「留白」。

而版心佔整個頁面的比例,即稱為「版面率」。根據需要刊載的資訊量多寡,可以分為兩種類型:

  1. 刊載資訊量較多:版面率高
  2. 刊載資訊量較少:版面率低

而帶給目標對象的印象也截然不同:版面率高給予目標對象相對熱鬧、歡樂的印象;版面率低則較成熟、穩重,賦予高質感。

二、群組化(接近律)

其也可稱為「親密性」,將具有相同意義或作用的要素放置在鄰近的位置,能夠提高閱讀的容易性,使目標對象直覺地理解內容。

raw-image

圖一、群組化示範(來源:自行整理)

以名片為例,上圖左方案例將資訊混雜在一起,使其較難理解;右方案例將資訊以「公司」、「個人」、「聯絡資訊」分別,並間隔群組使其閱讀及傳達上更容易。

三、對齊

對齊在設計中是非常重要的原則,整齊的事物本能地讓人覺得舒服與美觀,當然也有為了在版面增添動感而採用「刻意」不對齊的手法,在此篇不另外提及。對齊手法可分為:居中對齊、靠左對齊、靠右對齊。

四、對比

對比可以運用於文字大小間、圖與文、色彩、密度高與留白之間,對比的重點是:清楚凸顯想要強調的要素,避免曖昧不明的差異。

raw-image

圖二、對比示範(來源:自行整理)

以文字大小對比為例,上圖左方第一眼較難了解重點資訊;右方案例則將促銷重點突出,增加易讀性。

五、重複

重複能夠產生統一感,將相同的設計原則套用在同樣性質的要素,營造出規則性與整合感。

無論是運用相同的字體、字級、顏色或框線等,都能使看起來更一致,常見於商品目錄等設計。

CH3. 照片與圖像

除了依據欲傳達的目的挑選適合的照片圖像外,如何運用及裁切也會影響整體給人的感覺,以下同樣提出幾個篇幅作分享。

一、照片的基本編排

1.非滿版配置

適用於文字要素較多的情況,而其中分成多種編排方法,若圖像呈現矩形,通常可表達穩重感;也可運用去背方式處理照片,凸顯主體,添加一點躍動感。

2.滿版出血

將照片填滿版面的編排方法,適用於文字要素較少的情況。

二、照片的關聯性

若需編排多張照片,且照片的重要度相等時,照片主體的大小一致能增加易讀性,固定視覺動線,常見於菜單、商品目錄等多物件的設計。


因為篇幅關係,剩下的章節會整理在下一篇文章(到時會在此篇附上連結),謝謝大家。

留言
avatar-img
留言分享你的想法!
avatar-img
Lena 哩那 | UIUX 設計 | 生涯設計
26會員
59內容數
跨領域自學轉職的 UI/UX Designer,目前是名自由工作者,善於輔導零基礎新手轉職成為 UI/UX 設計師。另外也喜歡不斷探索生涯,挖掘不同的可能性! E-mail: ahri.lena.ty@gmail.com | ig: lenaaaa.design
2025/04/04
有越來越多人選擇 UI/UX 做為轉職的目標,但也發現許多學員在不全然了解 UI/UX 設計的情況下,就花了大筆金錢買仿間的各種課程了。沒有一個領域是絕對的好與壞,以下這些特性,你能接受嗎?
Thumbnail
2025/04/04
有越來越多人選擇 UI/UX 做為轉職的目標,但也發現許多學員在不全然了解 UI/UX 設計的情況下,就花了大筆金錢買仿間的各種課程了。沒有一個領域是絕對的好與壞,以下這些特性,你能接受嗎?
Thumbnail
2025/03/03
一起來了解一個專案是如何開始的,以及設計師可能會需要參與的部分
Thumbnail
2025/03/03
一起來了解一個專案是如何開始的,以及設計師可能會需要參與的部分
Thumbnail
2025/02/07
這篇整理了許多初學 UI/UX 設計的學員們,最常詢問的 8 個快問快答。
Thumbnail
2025/02/07
這篇整理了許多初學 UI/UX 設計的學員們,最常詢問的 8 個快問快答。
Thumbnail
看更多
你可能也想看
Thumbnail
厭倦了管理眾多信用卡以追求最高回饋?玉山Unicard權益切換信用卡應運而生,讓您輕鬆切換消費方案,從1%無上限基本回饋,透過三種方案任意切換,最高可享4.5%回饋,更有限時核卡加碼至7.5%。本文深入解析各方案優勢、設定方式,並提供日常與旅行配置建議,讓您成為聰明消費的「回饋金獵人」。
Thumbnail
厭倦了管理眾多信用卡以追求最高回饋?玉山Unicard權益切換信用卡應運而生,讓您輕鬆切換消費方案,從1%無上限基本回饋,透過三種方案任意切換,最高可享4.5%回饋,更有限時核卡加碼至7.5%。本文深入解析各方案優勢、設定方式,並提供日常與旅行配置建議,讓您成為聰明消費的「回饋金獵人」。
Thumbnail
話說身為短線交易者,每天要作的事情就是從盤勢觀察、到籌碼流向,再到經過多維度資料數據交叉比對,盤中盯著分K、江波圖和五檔報價,算計著每一分K線的轉折,雖能換來即時驗證判斷的快感與成就,但長期下來,卻也衍生眼睛與肩頸卻成了抹不去的職業病。
Thumbnail
話說身為短線交易者,每天要作的事情就是從盤勢觀察、到籌碼流向,再到經過多維度資料數據交叉比對,盤中盯著分K、江波圖和五檔報價,算計著每一分K線的轉折,雖能換來即時驗證判斷的快感與成就,但長期下來,卻也衍生眼睛與肩頸卻成了抹不去的職業病。
Thumbnail
快要年末了,對於即將要出國的我,即時來了這張信用卡真的很不錯。認識我的人都知道我因為工作常常要出國,所以這次感謝玉山銀行合作邀請,讓我可以體驗這張卡的美好。
Thumbnail
快要年末了,對於即將要出國的我,即時來了這張信用卡真的很不錯。認識我的人都知道我因為工作常常要出國,所以這次感謝玉山銀行合作邀請,讓我可以體驗這張卡的美好。
Thumbnail
《這樣那樣生活的訣竅 人生のこつあれこれ2012》 作者:吉本芭娜娜 譯者:張致斌 語言:繁體中文 出版社:時報出版 出版日期:2015/07/27 📖書籍簡介(摘錄自書背封面): 胖得快活?還是長壽飲食?交給安寧照護能放心嗎?客訴還是找碴?   書腰有幫助嗎?跟計程車司
Thumbnail
《這樣那樣生活的訣竅 人生のこつあれこれ2012》 作者:吉本芭娜娜 譯者:張致斌 語言:繁體中文 出版社:時報出版 出版日期:2015/07/27 📖書籍簡介(摘錄自書背封面): 胖得快活?還是長壽飲食?交給安寧照護能放心嗎?客訴還是找碴?   書腰有幫助嗎?跟計程車司
Thumbnail
你的第一句話決定99%的人是否留下。無論在哪個平台發文,開頭不夠吸引人,讀者就會直接滑掉,你只有一秒抓住目光。運用「意義重大、可控管、神秘」三大框架,讓讀者停下來,提升你的內容的影響力!
Thumbnail
你的第一句話決定99%的人是否留下。無論在哪個平台發文,開頭不夠吸引人,讀者就會直接滑掉,你只有一秒抓住目光。運用「意義重大、可控管、神秘」三大框架,讓讀者停下來,提升你的內容的影響力!
Thumbnail
在某圖書館發現《請照顧我媽媽》一書。幾年前中譯本出版時,曾風行一時,我當時錯過了。礙于阮囊羞澀與家中空間有限,這幾年我已很少買書,自然錯失許多好書,幸好有圖書館,使我仍有機會閱讀沒買的書。儘管晚了幾年,沒看過的書便是新書,遲看好過沒看。 連不熟悉韓國文化的我,都知道申京淑在韓國鼎鼎大名。這位知
Thumbnail
在某圖書館發現《請照顧我媽媽》一書。幾年前中譯本出版時,曾風行一時,我當時錯過了。礙于阮囊羞澀與家中空間有限,這幾年我已很少買書,自然錯失許多好書,幸好有圖書館,使我仍有機會閱讀沒買的書。儘管晚了幾年,沒看過的書便是新書,遲看好過沒看。 連不熟悉韓國文化的我,都知道申京淑在韓國鼎鼎大名。這位知
Thumbnail
有些人可能覺得美感是天生的才能,會說自己沒有天分啦,沒辦法從事藝術、設計類工作,但我的經驗與知到的一些真實案例來看,美感是可以後天加強的。 如果你真心喜愛設計這件事,但覺得自己缺少一點美感,請不要放棄,我這邊會分享一點我的經驗跟方法,來告訴大家如何讓自己更進步。 下會分享幾個我長時間下來
Thumbnail
有些人可能覺得美感是天生的才能,會說自己沒有天分啦,沒辦法從事藝術、設計類工作,但我的經驗與知到的一些真實案例來看,美感是可以後天加強的。 如果你真心喜愛設計這件事,但覺得自己缺少一點美感,請不要放棄,我這邊會分享一點我的經驗跟方法,來告訴大家如何讓自己更進步。 下會分享幾個我長時間下來
Thumbnail
《自學人類設計》系列,正是為了讓大家自學及自行實踐HDS,讓大家活出設計本質。
Thumbnail
《自學人類設計》系列,正是為了讓大家自學及自行實踐HDS,讓大家活出設計本質。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News