網頁設計 VS. 平面設計

網頁設計 VS. 平面設計

如何將訪客轉化為客戶這篇貼文中藉由『產品型錄』來分析網站與印刷品的差異與其所發揮的功能。

平面設計師和網頁設計師之間有什麼區別?

儘管兩個職業的所做的內容乍一看似乎相似,事實上平面設計師和網頁設計師之間存在一些顯著差異。
根據美國勞工統計局的分類,平面設計屬於“Arts and Design.”(藝術與設計)類別,網頁設計屬於 “Computer and Information Technology.”(電腦與資訊科技)。
這樣的類別歸屬表明平面設計師主要關注的項目在視覺和藝術方面,而網頁設計師則關注在程式運用等相關技術。但這並不表示平面設計師從不使用技術或網頁設計師很少使用平面藝術。

網頁設計和平面設計之間的差異

1.視覺元素

  • 顏色

網頁設計 平面設計
紅綠藍(RGB三原色) 印刷四分色模式(CMYK

平面設計著重視覺衝擊引導視覺流動順序,設計作品透過印刷輸出,因此採用印刷四分色模式(CMYK:Cyan = 青色、M:Magenta = 洋紅色、Y:Yellow = 黃色、K:blacK = 黑色)。
網頁設計透過電腦或智慧型手機等行動裝置呈現,採用RGB三原色光模式。
由於網頁內容更著重在梳理資訊結構(對於產品類別)之間的關係,若網站使用過於強烈的顏色容易引起訪客的視覺疲勞。

什麼?顏色也會影響SEO優化?

  • 字型

在設計過程中,相較於網頁設計,平面設計在字型的選擇上可以更自由, 因為沒有必要擔心最終效果的呈現。
但網頁設計在字型的選用上卻不能“只要我喜歡,有什麼不可以”,只能在有限的字型裡做選擇,通用字型(例如:細明體(MingLiU)、標楷體(DFKai-sb)、微軟正黑體(Microsoft JhengHei)是保守的選擇,否則將不利於網頁速度、也增加伺服器負擔及流量。此外,您挑選的特殊字型,用戶使用的電腦未必支援。

千萬別再用這5個方式做網頁設計

  • 圖像

平面設計透過Illustrator或Photoshop等繪圖軟體,在設定的範圍內進行視覺設計,最終透過印刷輸出。要求的解析度需要300dpi(像素)以上,使用物理尺寸的概念,例如英寸,厘米,毫米等,或者使用印刷紙張規格,如A4、B5等。
平面設計的輸出印刷與設計作品完全一致,無需考慮最終效果,而網頁設計師在設計的過程中必須考慮各種瀏覽器的呈現效果(除非網站不是RWD響應式網頁設計)。
考慮到網頁的開啟速度,圖片的解析度只要求在72dpi以內即可。在電腦版以滿版呈現的圖片將以1:1的比例縮小在智慧型手機裡,因此若圖片內有文字,手機版恐怕很遭遇難以閱讀的問題。

偶而遇到公司有設計部門的客戶,通常會好心地提供美工圖給我們使用。老實說,上傳一張圖片到網頁上只需要1秒鐘的功夫,但若要將圖片轉換成程式碼,需要花上好幾倍的時間。居於職業道德,原則上我們選擇犧牲客戶的美意,而花更多的時間將美工圖的內容轉換成網頁內容。
【實際案例解說】
如果您正用寬度僅有320pix的智慧型手機瀏覽,您可能看不出下面這張圖到底是什麼,且字體比螞蟻還小,無法閱讀。因此平面設計師精心設計的圖像在網頁上變得毫無意義。

如下圖所示,如果以網頁設計的技術來處理,就可以滿足所有不同尺寸的瀏覽器。
因此我們常向客戶說明:『越好的網頁設計,越少的平面設計』;『文字不要做到圖片裡』。
Image from Gyazo

2. 呈現方式

網頁設計 平面設計
呈現方式 動感元素,視覺效果更加生動。 引導用戶操作,增加互動 靜態的
視覺焦點 受瀏覽器尺寸限制。 重要資訊顯示在網站首頁,完整性比平面設計弱。 完整性強,更直觀
後期製作 涉及後端開發,伺服器等運用程式,網絡信號和其他第三方資源的支援。 依靠印刷,以及不同的材料和媒體

3.資訊載體

網頁設計 平面設計
媒材 電腦,智慧型手機等行動裝置 紙,布等材料(不同材料發揮不同效果)
資訊數量 取決於HTML,可提供無限的資訊 由材料大小決定
更新與反饋 1.容易更新
2.可及時糾正錯誤信息
3.易於收集用戶的反饋
1.無法更新
2.無法及時獲取用戶反饋

 

4.瀏覽模式

平面設計的作品:可能是大樓的巨幅招牌、捷運站內的電子廣告看板、賣場的傳單、一本月刊,或是一本書籍。
網頁設計的作品:透過桌電、筆電、平板或智慧型手機瀏覽,透過滑鼠或手指頭上下滑動,鏈接跳轉,以瀏覽更多樣化的資訊。

5.資訊傳播

平面設計是一種傳統的資訊媒體設計,它通常通過發布,銷售,郵件傳遞和其他形式的通信來傳播。 這種行銷方式僅適用於高成本的小範圍。然而網際網路有低成本及無遠弗屆的功能, 網頁設計資訊傳播能力大大地強於平面設計。但前提是網站容易被搜尋到,因此網頁設計師還要具有SEO的基本知識。

完整收錄Google排名的200+個因素

網頁設計師與平面設計師之間的差異是什麼?

平面設計師把藝術放在第一位,更具藝術性,在設計中強調視覺理論,與觀眾保持單向關係,當作品完成印刷輸出,即任務完成。
網頁設計師所需技能包含JavaScript,Jquery,PHP,Web應用程序開發,UI設計。網頁設計師在設計過程中必須注意的事項如下:

  1.  意識到這是個多螢幕(智慧型手機、平板、電腦、電視)時代。
  2.  注意文字大小與改行之後的行距的變化
  3.  注意容量大小,不使用過大的圖片,上傳前先壓縮
  4.  注意字型的使用,避免對伺服器造成負擔
  5.  盡可能透過HTML語法呈現,避免使用美工圖(把文字變成圖片)
  6.  網頁是動態的,可超連結的文字,要使用一致的顏色與其他文字區別
  7.  意識到網站是否容易更新
  8.  顏色使用:紅綠藍(RGB三原色),不是CMYK。單位使用:pixel
  9.  網頁設計簡單,不需過多的裝飾
  10.  設計要有一致性,字型要統一
  11.  有適度余白,更容易閱讀
  12.  意識網頁導覽的流暢性、與其個性表現,要更重視用戶的理解度

More from our Article

See all posts