爆紅備審資料,編排設計思路全解析!

何浩宇
11 min readJun 8, 2019

--

進入正文

今年(2019)的大學申請入學在四月中告了一個段落,本來今年因為外務太多,不想接觸備審相關的事,但直到看到了這份自帶滿滿經歷的備審草稿,想說是母校出來的優秀人才,決定跳下去協同另外兩位學長一同幫助他好好訓練、幫助他展現這些過人的經歷。

而這位學弟十分佛心,將他的備審資料公開於 PTT ,沒想到被鄉民瘋傳而意外的爆紅,甚至在這幾天連續的登上幾家網路媒體,真的是非常意外。

建議還沒看過的朋友先去看看這份備審資料,再回來看我的分享會更能理解喔!

韋詠祥 交大資工備審資料 完整版:
https://img.sean.taipei/2019/05/nctu.pdf

看完之後不知道你有什麼感覺,我想應該跟我第一次認識他時有一樣的反應。我還是想讚嘆一下韋詠祥的經歷真的十分強大,從國小就發現自己的興趣,接著透過自我學習及用程式解決生活中的問題來豐富自己的經驗,並積極參與比賽以及社群活動 ,讓自己跟更多的同領域人們接觸與交流,真的是一個本身自帶光環的一個少見案例。

那這次我主要以這份備審編排設計的角度,來解析這份案例,準備開始囉!

想要做出好的備審設計,你就得掌握這件事!

根據申請入學的規定,通過第一階段(學測成績篩選)的學生,接著就會進入到需要繳交備審資料、作品集、面試等複雜流程的階段,經過這些考驗並且勝出的人,才有資格成為這間系所的正取生或等待備取。

這意味著教授進入第二階段時,通常要快速閱讀大量雪片般飛來的備審資料,並給這些備審資料進行評分。我曾聽說有教授評分會先快速將備審從超棒到超爛區分為五種層級的分數,之後才較深入的閱讀,去細微的加減分做出分數差異,因此可能在最一開始速讀的階段,就已經被分配在一定的分數層級了。所以要把備審做好除了要提早規劃人生、豐富經歷外,從設計的角度來看的關鍵是……

要讓教授能在快速閱讀的狀況下,馬上看到重點,並且留下記憶。

聽起來像是廢話,但是卻是大部分的人其實根本沒做到這點,因此記得在編排完成後自己看一下或給親朋好友看一下,問他們能不能快速知道你寫了哪些內容。

以下來談談應該怎麼樣做到這件事。

如何做出能夠能夠高效率閱讀的備審?

以韋詠祥的案例來說明,他自帶的經歷內容豐富,但如果沒有經過整理、規劃,如同流水帳般的塞給教授,可能甚至會比起那些經歷少的人來的更混亂。因此好的東西要有好的整理與呈現,才能確實地把內容傳達給受眾,否則可能儘管有教授有從第一頁滑到最後一頁,但問他看到了什麼,有可能什麼都沒讀進去,真正的進到腦中的資訊少之又少。

在我編排這份備審時,主要劃分為五大步驟:

1. 思考受眾閱讀環境
2. 規劃版面視覺策略
3. 架構內容層級
4. 規劃視覺層級
5. 運用圖像幫助理解

第一步|思考受眾閱讀環境

現在的備審資料已經不再像以往需要列印出來,然後到影印店裝訂,再寄送到的大學端,基本上目前除了設計相關科系需要攜帶實體作品集前往面試,其他科系都已經全面改用 PDF 格式線上傳的模式繳交。因此可以合理推斷出大部分的教授會直接以電腦螢幕進行審閱,可能只有部分少數教授會列印出來進行紙本審閱。因此我們可以得出幾件事:

1. 相較於紙本,電子閱讀無法透過翻閱手感得知閱讀進度
2.
相較於紙本橫向翻頁閱讀的模式,電腦螢幕是垂直瀑布式的瀏覽
3.
直向 A4 尺寸文件在電腦螢幕上放大顯示,將無法一次看到整頁的全貌

螢幕閱讀環境示意圖

第二步|確定版面視覺策略

這個階段主要是順應前面所推斷出環境的優勢、劣勢與特性,去進行設計。

第一,因為「螢幕無法透過翻閱手感得知閱讀進度」,因此我們設計了每頁重複出現的「頁眉」,有點類似網頁設計中的「導覽列」,讓讀者能夠掌握整份文件切分為哪些部分,而他現在讀到哪裡了。並且設定每個部分所對應的顏色,並以色塊的方式呈現在頁面的最左側,讀者進到新的部分時能夠明顯感受到變化。另外一個小想法就是,不斷的讓韋詠祥三個字重複出現,應該也能提升教授對於這個名字的印象

雖然頁眉在書籍中也常見,但我認為數位載具上是更需要這個來引導讀者,因此稍微設計得比一般書籍頁眉大,且是同時存在著完整架構的。

備審左側頁眉

接著,「電腦螢幕是垂直瀑布式的瀏覽」的特性,也是為何我在設計頁眉時要設計在左側,因為這樣才不會重複地橫向出現,打斷垂直的閱讀動線。另外因為這個特性的關係,在設計時就不要安排跨頁的設計。(這可能比較常出現在設計相關領域的人會做的事,因為習慣於用 Adobe Indesign 之類的軟體進行書籍編排就會忘記這是要在螢幕上閱讀的這件事)

最後,「螢幕瀏覽無法一次看到整頁的全貌」的特性,在設計時就要有效的使用文件區域,不要讓讀者觀看時還要時不時跳過一堆沒有內容的部分(滾輪滾得手會很酸啊!)。這特別是在一些對設計有概念的人,知道要「留白」,但這是不適合螢幕的閱讀載具的。

版面過多無資訊空間,不一定是白底,只要沒字沒照片都算無效區
觀看時就會不斷出現沒資訊的空間,產生了閱讀斷層

綜合上述所說,適合螢幕瀏覽的備審資料的三大重點:
1. 用頁眉 (標籤列/導覽列) 及色塊,
區分段落
2. 頁眉 (標籤列/導覽列) 放於側邊,
保持順暢的垂直閱讀
3. 有效使用版面,
避免過多留白空間,以免閱讀時產生斷層及感到疲憊

第三步|架構內容層級

雖然這部份跟設計稍微偏離關係,但我認爲是最重要,也是我接到這個案子後最先提醒他的一件事。

最常見的備審基本架構脫離不了家庭、學習歷程等項目,但許多人就單純以這樣的結構下去寫了長篇大論的內容,導致整個版面看上去都是字,缺乏層級感,讓人抓不到重點,不知道從何讀起,除非得完整讀過才能了解在講什麼。

但是如同本文開頭所說,教授閱讀備審資料的時間非常短,在快速瀏覽內文時勢必無法細細閱讀內文每個文字,因此我都會建議在撰寫內容時要「提出小標」,把這個段落所在講的事精煉成一句話,放在整個段落前方呈現。好好的把大標題、小標題、內文等層級區分出來,如:自傳>學習歷程>資訊安全 。

韋詠祥備審資料(自傳部分) 架構圖

而小標要怎麼寫也是學問,目標是讓閱讀者儘管不用看內文的敘述,也可以透過看小標題了解全貌,要下得足夠命中重點,且有明確表達個人故事,才是個好的小標題。

錯誤示範X
「我的家庭」、「國中時期」、「高中時期」、「啟蒙」等

每個人的備審都長這樣,看完什麼資訊都沒得到。

正確示範O
資訊安全 — 始於偶然的發現漏洞

教授OS:「哦哦!原來是偶然發現了漏洞開始踏入資安領域,這小孩不錯,懂得在生活中找到問題並且解決……」 (中了)

韋詠祥備審資料(自傳部分) 小標題與內文段落

第四步|規劃視覺層級

對應到前一個步驟所整理出的內容,在視覺上也要有相對應的處理,才能有好的呈現。主要可以選用不同的字型、字重(字的粗細)、顏色、項目符號來規範出相對應階層的字型樣式。使閱讀者在閱讀時能夠因為版面中元素的強弱分配(例如:粗體>細體、有顏色>黑色、字級大>字級小),影響閱讀順序以及對於版面上文字的層級認知。

而色彩上使用,建議維持整份或是整個段落的單一標準色彩,黑白以外再搭配一個顏色即可,切勿使用過多顏色,以免造成視覺效果臨亂,且盡可能避免使用高彩度色彩,如:程式內建的正紅色等,以免顯得過於俗氣。

案例中主要分為五種文字層級樣式:
1.
大標題 | 30點 / Helvetica / 粗體 / 深藍色
2.
中標題 | 18點 / Helvetica / 粗體 / 深藍色
3.
小標題 | 12點 / Helvetica / 粗體 / 深藍色 / 加項目符號
4.
內 文 | 10點 / Helvetica / 黑色
5.
內文重點 | 10點 / Helvetica / 粗體 / 深藍色

第五步|適度使用圖像幫助理解資訊

注意!在此只是分享在這個案例為何這樣呈現。
筆者近期發現不少人看過此篇文章後,也模仿在自己的備審資料上用圖標,我不鼓勵大家氾濫的使用這個手法,建議自己思考更適合自己的表現方式。

圖像化的資訊比起文字更加容易被吸收,此份備審中前段利用了 icon (圖標),呈現了學習歷程的流程圖,讓教授在閱讀前便可先了解這大段落將會有什麼內容。本備審所使用之圖標源自於一名為 Flaticon 的素材網站,內有大量的圖標素材供大家免費下載,建議存在瀏覽器書籤中,無論製作簡報還是像此案例製作時都十分好用。

Flaticon 免費圖標素材
https://www.flaticon.com/

在選用icon時則需注意整系列圖標的風格一致性,如本篇中所使用的都為黑色粗線條的icon,則全系列都應該選用一樣黑色線條的圖標。

錯誤示範:選用了各種不同風格的圖標將無法搭配

若內容有需要,也可善加利用表格、折線圖等圖表將複雜的資訊視覺化,但於使用時必須注意是否符合圖表本身使用情境,如:圓餅圖適用於各項目相加等於 100% 之資料,詳細圖表使用規則請上網搜尋相關資訊,在此不過多贅述。

總結

好的東西要有好的包裝才能賣得出去、賣得好,但爛東西儘管有了好包裝,也終究是個爛東西。

希望此案例的爆紅,能夠意識到「設計」真正的意義是什麼,套用本次案例台灣知名小說家朱宥勳於自己社群上所做的評論:「他不是因為「排版很華麗」所以上的,而是他把資料分門別類,排得很清楚。」千萬不要認為加了豐富的顏色、各種插圖、花俏的字型,就能十分吸睛或是讓教授感覺很用心,應該真正仔細思考什麼樣的設計是符合這個目的(資訊傳達),在製作時在「風格」與「功能性」上有意識地拿捏平衡。

花了那麼長篇幅解說這份備審資料的編排思路,並不是看完這篇文章就能做出一模一樣水準的備審資料,本文也還有許多設計上的觀念沒有提及,單純希望能夠給大家在排版時一些參考,看完之後自己也能透過這些想法,排出簡單且一目瞭然的版面,也絕對不是在鼓勵要花大錢請槍手協助代工。

最後再次強調,這案例所以會順利錄取、引發鄉民討論熱潮,絕對不是因為編得備審多好看,而是因為他明確的瞭解自己的人生目標對於自己喜愛的領域有強大的熱忱超越一般高中生甚至大學生的程度與經歷,使他有這麼多「料」來豐富備審資料,呈現給交大資工。如果沒有這些東西,就算再厲害的編輯或設計,也無法幫他變出什麼名堂來。

感謝整個專案的團隊,大家完美的分工以及對於自己領域強大的專業,才能夠促成了這次的成功:

本次專案主角 韋詠祥 (Sean)
升學輔導志工 黃政嘉 (Andy)
專業內容顧問
鄭仲倫 (Mars)
編排設計製作
何浩宇

另外,因為太多人私訊或寄信問我這份備審是用什麼軟體製作的,就在此統一回答,這份是全部的作業都在蘋果 MacOS 系統中內建的文書處理軟體 Pages 中進行的。但不要以為有了這個軟體就可以一鍵生成套模板,這些都是一個一個畫出來的啊!會在 Pages 做單純因為我們團隊的每個人都是使用Macbook,用 Pages 可以互相共用協作,最原始的文字稿也是在這上面寫的,因此為了方便就直接用原來的軟體調整、設計編排。

我認為這些軟體只是一個工具,最主要還是要有設計的想法、對美感的掌握及熟悉軟體的使用,相同的東西在 Word、PowerPoint 也絕對能做到的!

我只是個在設計路上的小菜鳥,第一次花那麼多時間整理分享案例,希望能引導大家有一些想法,「切勿直接模仿本案例的設計」、「切勿直接模仿本案例的設計」、「切勿直接模仿本案例的設計」,因為很重要所以說三遍。

如果喜歡這篇文章,歡迎在下方給我1–5個拍手。
如果覺得超實用,解決了你的問題,可以給我5下以上的拍手,給予我支持喔!

作者資訊
何浩宇 haoyuhe2018@gmail.com

--

--