萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 網頁設計中如何運用幻燈片布局清晰傳遞信息

網頁設計中如何運用幻燈片布局清晰傳遞信息

  本文選摘來自《演說:用幻燈片說服全世界》一書第六章。

網頁設計中如何運用幻燈片布局清晰傳遞信息 三聯教程

演說者依賴於創意、圖形和舞台發揮。

  成功的演說者從不會照著幻燈片來念,而是花心思把內容轉變成易懂的視覺故事,進而支撐他們的觀點。好的視覺故事可以傳遞給聽眾最清晰的信息,而這需要合理的幻燈片布局支撐。

  不懂得合理布局的演說者,把所有內容都堆砌到一張幻燈片上,並且不突出重點。其實,確定哪些元素應該重點突出相當關鍵,重點展示關鍵信息,弱化次要信息,才能吸引觀眾的眼球。

  只有懶人才會把所有內容塞在一張幻燈片上。

  幻燈片的不同布局,能給觀眾帶來緊張,困惑,以及焦慮的不同感受。想法,如果運用一下原則,則可以使信息最清晰地呈現:

  1.對比:觀眾可以迅速定位重點。

  2.流程:觀眾了解信息傳達的次序。

  3.層次:觀眾可以看到元素之間的關系。

  4.一致:觀眾明白信息之間的一致性。

  5.距離:觀眾從元素的分布中理解其意義。

  6.留白:給觀眾留下視覺上的呼吸空間。

  如何在幻燈片中制造對比?

  通過對比,觀眾可以很快發現事物間的不同之處,並在此集中注意力。

大小、形狀、陰影、顏色以及間距的差別

  大小、形狀、陰影、顏色以及間距的設置差別,都可以起到突出重點的作用。

大字號總是更能吸引人的眼球

  正如圖中的例子,大字號總是更能吸引人的眼球,它就像標題或段落主旨,讓人覺得更重要。同時,顏色也能制造出對比效果。

  在使用對比時,請牢記切勿漫無目的地運用對比。元素之間視覺和風格上的差異,都會有意無意地影響觀眾的認知。隨意地運用對比,輕則模糊願意,重則歪曲願意。所以,一定要明確意圖後再做設計。

  如何傳遞信息給觀眾?

  觀眾會先掃視幻燈片內容,直到讀完為止。有時,為了強調觀點,可以讓觀眾按相反的順序來閱讀信息,讓觀眾跟隨你設計的順序來理解內容。或者使用標記,箭頭指明起始點,這樣觀眾也可以按照指向來接受信息,不易迷失。

使用標記,箭頭指明起始點

  組織好幻燈片,引導觀眾流暢地理解信息。也同樣適應於圖表和圖像。

組織好幻燈片

  如何讓觀眾看出內容間的關系?

  如何定義一組元素之間的關系架構?以標題和正文之間的關系為例,在這樣的層級中,標題是父節點,正文是子節點。

標題和正文之間的關系

  如何通過大小和間距的變化改變表達的含義?

  視覺結構可以明確地映射出其代表的信息結構。如下圖,就很好地展現了重心輻射的關系。此中心將所有元素聯系在一起,並建立了一個父子關系。

元素大小和間距的關系

  元素大小和間距的改變,也改變了相互間的關系,並點明了元素的重要程度。

  如何讓觀眾明白信息間的一致性?

  可以通過網格結構,圖形樣式的外觀和天馬行空的創意主題來達成。

  為什麼要用網格?

  使用網格系統來固定元素,可以讓它們看起來更井井有條而不是雜亂無章。此外,網格還可以確保多張幻燈片之間平滑過渡,減少視覺上的跳躍感。比如,如果三張連續的幻燈片都使用了數據圖表,那麼即使每張圖的數據都在變化,圖表的位置以及坐標軸仍應保持固定。

  一旦勾勒出簡單的網格後,請標記出圖片,文字,以及其他元素的位置,確保有足夠的留白。

  如何讓觀眾從元素的布局中理解其意義?

  隨意安放元素和人物與精心設計給人的印象是不一樣的。

  元素之間的排列會傳達不同的信息:如下圖,對立或支持,混亂或有序,降低或增長等等。

元素之間的排列會傳達信息

  人物的呈現方式要本著,即使沒有上下文的解釋,沒有旁白,觀眾依然可以正確理解我們想表達的信息的目的來設計。

  為什麼要留白?

  首先,留白並不一定是白色的,它是指幻燈片上未使用的空間。可以是間隔其他元素的空間,也可以是某一元素置於廣闊空間時所產生的劇場感。

  有效運用留白很大程度上決定著整張幻燈片的好壞。寧可將內容分成三張幻燈片,也比塞在一張幻燈片中的效果要好得多,將元素依次排列更有助於觀眾逐步接受信息。

  一般來說,那些犧牲了留白,塞得滿滿的幻燈片,內容都過於密集了。如果一頁幻燈片承載的內容超過它的容量,那麼它就不再適合做演說工具。

  學會留白——塞滿內容是失敗的設計。

  試著問問自己:“哪些東西我即便刪了也不會改變原意?”或者“是不是可以把一頁內容分成幾頁來講呢?”切記幻燈片的價值取決於能否清晰地傳遞信息,而不是承載最多的信息。

學會留白——塞滿內容是失敗的設計

  以上就是幻燈片設計的必備工具。成功的演說絕對離不開它們。

  下載《演說:用幻燈片說服全世界》第六章PDF文檔:下載一,下載二。

  文章來源:http://www.mifengtd.cn/articles/slideology-chapter-6.html

copyright © 萬盛學電腦網 all rights reserved