01

D-School 臺大創新設計學院:

https://dschool.ntu.edu.tw/course

課程頁
課程頁

選單
選單

這是臺大創新設計學院的網站,以大量簡單幾何圖形,再搭配大量良好設計的文字權重,突顯重點及內文。

選單的部份是點下後才出現,點擊後消失,不佔用螢幕空間。

02

NCKU Hub

https://nckuhub.com/

資訊頁
資訊頁

這是成大課程資訊網,因為資料量大,在一開始的時候有做載入動畫,以免使用者久等。

雖然是個有大量資訊的網站,但每一個資訊都有清楚的結構、顏色。按鈕的 hover 雖然不是很明顯,但基本上都有起到作用。

03

HowsWeather

https://www.howsweather.today/

HowsWeather
HowsWeather

一樣也是一個有大量資訊的網站,但是善用字體的排版、大小,可以適當的劃分重點。使得畫面不會過於雜亂。

04

Savebox - 記帳也可以很簡單

https://www.savebox.tw/

Savebox
Savebox

大量運用簡潔的 icon ,幫助表達意思。一開始在畫面就可以看到大大的手機模擬圖,讓使用者很快就可以知道實際使用畫面。

05

2018 成大單車節

https://davinlin.github.io/showcase/ghost

2018 成大單車節
2018 成大單車節

利用手繪風格的插畫,讓整個網頁有清新的風格。也善加利用左右讓多個學院分開,不讓空間擁擠。

時間表
時間表

卡片的利用讓各個項目獨立開來,讓整個時間表更加清晰。

6~10: 購物網站

6

蝦皮購物

https://shopee.tw/

7

露天購物

https://www.ruten.com.tw/

8

Pchome 24h

https://24h.pchome.com.tw/

9

淘寶

https://world.taobao.com/

10

amazon jp

https://www.amazon.co.jp/

前面三個我蒐集了台灣常用的購物網站,後面兩個則是台灣人常使用的兩個境外網站。由圖可見,所有網站中最為簡潔的是 amazon jp 以及蝦皮兩個網站,在整體排版上也因為這兩個晚站資訊量更小,更可以突顯出他們想要突顯的重點。在搜尋欄位的部份,除了 Pchome24h 以外,倒是都做的非常突出、顯眼,可能是購物網站的使用者在瀏覽網站時目的性更強。

在登入註冊的部份,對於購物網站而言也是很重要的部份,因為過於繁瑣的流程會導致大量客戶的流失,在五個網站中,只有 Pchome 24h 需要多跳轉兩次才能到登入或註冊的頁面,體驗沒有那麼好。

11~15:學校網站

11

台大

https://www.ntu.edu.tw/

12

師大

https://www.ntnu.edu.tw/

13

交大

https://www.nctu.edu.tw/

14

清大

https://www.nthu.edu.tw/

15

成大

http://www.ncku.edu.tw/

學校首頁常是各學校用來宣傳、宣導事情所用,一般除了各處室網站外,放最多的就是關於學校的最新消息。在整體排版上,師大與成大用了較大的螢幕寬度 (80%, 100%),留白的部份較少,我個人覺得可以善用螢幕空間,尤其現在電腦螢幕多是 16:9 或是 16:10 的比例,若能使用較大的空間能看起來不那麼突兀。在最新消息的部份上,成大、師大、交大都用了輪播圖來宣導事情,是能快速抓住注意力的方式,相較之下,台大與清大則用了較多的文字,或許會讓人抓不太到重點。

16~20:銀行網站

16

台新銀行

17

國泰世華銀行

18

中國信託銀行

19

第一銀行

20

台灣銀行

在這五間銀行中除了台灣銀行以外,其他的都使用了大量的插畫以及簡單的排版來突顯資訊。在 Nav Bar 的部份,中國信託銀行的網站在把滑鼠移上去的時候,會把其他地方上個淺灰色的遮罩,讓用戶能更專注在 Nav Bar 的內容上。台灣銀行的設計上就與其他四家截然不同,不確定是不是因為官股銀行較為保守的緣故,整體風格、設計感覺是十年前的設計,也很難以尋找資訊。綜括前四個網站,在資訊的權重(利用字體顏色或大小做區別)我覺得都很不錯,是未來可以學習的對象。

21~25:咖啡網站

21

星巴克

https://www.starbucks.com.tw/home/index.jspx

22

路易莎咖啡

https://www.louisacoffee.co/

23

怡客咖啡

http://www.ikari.com.tw/

24

伯朗咖啡館

https://www.mrbrown.com.tw/

25

丹堤咖啡

http://www.dante.com.tw/

對於我而言,如果會逛咖啡店的網站,通常是找優惠訊息或是菜單等… 但其實不算太常瀏覽,在星巴客以及路易莎兩家咖啡店的網站都有一個佔據整個螢幕的輪播圖,用來放一些主打的飲品或是優惠,其他的部份更像是一個形象網站。怡客咖啡的網站稍微往下滑即是主打的餐點,點進去後會有更多的介紹,同樣的,星巴客也是類似的設計,能讓首頁有更多發揮的空間。

手機版

這學期後面開始學一些關於 RWD 的知識,因此下面來分析看看前面 20 個網站在手機版是如何排版,又是如何下斷點的。

26~30 購物網站

26

蝦皮購物

27

露天拍賣

28

Pchome 24h

29

amazon jp

30

淘寶

除了 amazon jp 以外,其他四家看得出來與 APP 的界面較為相近,而不是單純的下斷點來為手機版用戶提供更好的體驗。但在手機版界面上,把文字連接換成圖片連接,減少不必要的文字,可以讓觸控用戶更容易點擊到想要的元素。在 amazon jp 的作法看起來除了下斷點以外並沒有太多改動,下斷點的方式與最後一次課程所學類似,從一列五個商品縮為一個或兩個商品,讓畫面不會過於擁擠。

31~35 學校網站

31

台大

32

師大

33

交大

34

清大

35

成大

就五間學校的官方網站而言,我覺得成大的 RWD 做的最完整,台大、師大的網站在 Nav bar 都有點小瑕疵,清大在小螢幕的時候,仍然在文字框外面使用了較小的容器,導致文字容易換行,不利閱讀。對於 Nav bar 五間學校皆有使用 toggle btn 隱藏起來,需要時才顯示。在其他內容的部份也多使用斷點處理,不像購物網站甚至另外寫了手機頁面的版形,可能是 RWD 處理起來比較省事。

36~40 銀行網站

36

台新銀行

37

中國信託

38

國泰世華

39

第一銀行

40

台灣銀行

在這五個銀行網站中最讓我驚訝的大概就是台灣銀行居然有 RWD ,不過 Toggle Button 有兩個也蠻吊詭的就是了。台新銀行在寬度小於 1024 時會有下載 APP 的提示,在寬度小於 1023 時 Nav bar 會被縮為 Toggle button ,其他的銀行也大多在 1000 左右當作電腦與手機介面的分界點。其他的部份也是斷點處理,不過在一些 icon 沒有處理的很好,在寬度太小時會直接隱藏。第一銀行則在輪播圖的尺寸沒有處理的很好。

41~45 咖啡網站

41

星巴克

42

路易莎咖啡

43

怡客咖啡

44

伯朗咖啡館

45

丹堤咖啡

除了伯朗咖啡以外,皆有做適當的 RWD ,但丹堤咖啡在縮小後有些內容間的 margin 更顯得擁擠,其他的三間咖啡店的網站都做的不錯,值得校仿。

後記

這學期學的 RWD 還不是很多,目前只會看看斷點下在哪裡,大概寬度多少的時候會被視為手機裝置,希望以後能多接觸一些 RWD 的排版知識,在設計網站時才能給用戶更好的體驗。