WFU

2018年11月5日 星期一

2018 / 11 / 3(六)最佳網站設計大獎:林星帆顧問、魏幸怡執行長






怎樣的細節,能讓網頁的穿透力更好?怎樣的文章,能讓傳播效益最大?為什麼這次的封面,照片選這張呢?XD

我們一起看看「那些還能改進的細節」,然後看看這次得獎的作品吧!


那些還能改進的細節






建議背景還是用白色。主要的原因是,使用任何的中間色,都會使得文字與背景的對比不夠,對讀者的眼睛與大腦造成壓力,傳播力自然會下降。例如上圖,小字與綠色背景的對比不夠,粉紅色文字更可能消失在綠色背景中,除了對比不夠的問題,畫面對紅綠色盲患者較不友善。

建議背景還是用白色,文字純黑,或深灰。超連結則用深色系。





注意到粗體字那行的第一個標點符號了嗎?雖然他是全形的上引號,但其右邊有一半是白的,導致視覺上有點怪。建議使用「」這樣的引號,較為美觀。這行粗體的上方,也建議加上一個空行,與上段隔開。上段最後一個字「說」之後,建議改為全形標點「:」。

「抱著嚇呆了」一段,出現了 BBS 式換行法,也就是遇到逗號或句號的時候,作者自己強迫換行。這個習慣要考慮漸漸改掉,因為友善的網頁必須符合各種寬度的 device,包括:各種不同解析度的手機、平板、電腦。我們寫段落,寬度由瀏覽器自行決定即可。BBS 換行法,會導致句子破碎、在奇怪的地方換行,閱讀體驗是比較不理想的。





我的瀏覽器(Chrome)已經改成全面顯示黑體,因為黑體才是 LCD 時代最適合的字體。所以,當在我的畫面上出現新細明體時,就表示作者強迫他顯示成新細明體。其背後原因,是因為從 Word 複製文字過來後台貼的時候,忘了按下「移除格式」按鈕,導致許多從 Word 複製過來,編輯器上不可見,要到 html 模式才能看到的代碼,沒被清乾淨。

建議依照互動實作的步驟,確實移除後,就能解決這個問題。





圖片上方,建議放兩個空行。注意圖片的左右,仍有白色空間,建議放進 PowerPoint 處理時,使用「滿版出血」的處理法,並保持圖片比例。相當於對中央的示範者做「格放」。如果不確定怎麼操作的同學,請在 Dropbox 裡頭寫下您的提問,我在週四回饋的時候,會錄影操作,給各位參考。





除了文字為新細明體的問題之外,段落第一行有 5 個半形空格。這種首行縮排的作法,是稿紙時代與印刷時代留下來的習慣,為了節省紙張,我們讓段落接在一起,連續書寫或印刷,但又必須告知讀者換段了,所以用縮排的方式做區別,告訴讀者「這裡是新一段的開始喔」。

但網路時代,按 enter 不用錢,我們改用空行分開段落。因此,縮排失去其存在意義。進一步,針對網路讀者的眼球分析也發現,人的眼睛幾乎都一直盯在最左方,第一行縮排這樣的設計,會導致你前幾個字,甚至整個第一行都被漏看,有明顯的負面效果。建議移除。


林星帆顧問






林星帆顧問的網站,光是 banner 就贏一半。他所選的照片非常適合,上頭有演講的主題,說明自己的專業,以及常演講分享的特質,舉手的動作,也告訴大家,他的演講很有活力,值得一聽。

進一步要調整的話,可以考慮移除左上角加上去的字,畢竟在照片右上方的電視中已經有名字,不見得需要特地重複。人的部分,若能用修圖軟體調整亮度,會更成為視覺的焦點。

這告訴我們,照片選得好的話,連設計都不用,直接就能把部落格的精神傳遞出去!





文章中,所配的示意圖很清楚,顏色簡潔,與頁面有類似的風格。上下各有兩個空行,讓圖片有足夠的空間,可以說自己的話。

右側邊欄的「關於我自己」建議移除,因為這個小工具的問題實在很多,不建議使用。首先,照片被「不等比例縮放」,其次,「檢視我的完整簡介」點進去後,其實並不完整。這不是同學的錯,而是每個部落格平台,總有些功能不太適合我們,移除就好。





星帆顧問在表格部分處理得也不錯,在多屏網路時代做表格,不建議用網頁的表格方式作,而應該是在自己的文書編輯軟體做好後,直接輸出成圖片,才能確保顯示正常。





參考文獻的部分,建議去掉每項之間的分段空行後,使用「項目編號」功能,讓電腦替你排 1 / 2 / 3,縮排會非常漂亮,對得整整齊齊的。





文章結束後,建議使用大字、置中、子標題的方式,作個 call-to-action,讓認同你文章的人,能有進一步探索的機會。像是自己提供的統計服務,或相關聯絡方式,都可以。

清晰的 banner、有效的圖表、簡潔的排版,只要這幾個因素做到,就是個很棒的網站。恭喜星帆顧問!


魏幸怡執行長






幸怡姐的部落格,一樣選了很棒的照片作為 banner,文字方塊也使用類似的色系,一致感更好。

目前仍能調整的,是文字方塊擋住了視線,比較可惜,下方頁籤列的顏色也與藍色系不一致。





文章排版很棒,照片、子標題,都不錯!右側邊欄的關於我自己,也建議可以移除,理由同前面在林星帆顧問部分的講評。





內文部分做得特別好的,是超過 3 行就考慮換段,目前這些都在第 4 行就換段,很不錯。標點符號的部分,多為全形,是正確的,不過重複使用的如~~~與???,建議可以縮減成一個,會增加可讀性。





最理想的,是幸怡姐放上了「旅展線上訂」的 call-to-action,讓對本文有興趣,想知道這樣的團隊所提供的是怎樣的服務或產品的人,可以前往看看。

建議 call-to-action 的上下,各留兩個空行。





這是 call-to-action 連結點過去的樣子。表示實際可用,而且這表單作得相當美觀,是一頭牛團隊所做的。網路的概念,最重要的就是「連結」,把我們提供的服務,跟我們的個性和特色,做適當的串連,這部分幸怡姐在網頁上,做得很好。

作為集團創辦人兼執行長,親自來學,而且三個小時內就完成網站,還得獎。更厲害的是,當天講評時段所提到的,週一前都已經修正完畢,更補上許多全新文章,實在非常用心!

在 Facebook 上,我也前往留言

幸怡姐在一天內,就把很多細節都修過了,學習力超強!

如果我在幸怡姐手下工作,看老闆都這樣幾天內能上手一項技能,說自己什麼事情不想學,都好像沒藉口了 XDD

恭喜幸怡姐!


最新活動