跳至內容

網頁設計

本頁使用了標題或全文手工轉換
維基百科，自由的百科全書

網頁設計（英語：Web design）涵蓋了製作和維護網站的許多不同的技能和學科。它包含了網頁圖形設計、界面設計、編寫標準化的代碼和專有軟件、用戶體驗設計，以及搜尋引擎最佳化。通常許多人以團隊協作的方式來工作，各自參與設計過程的各個方面；但有些設計師會參與到任何方面。[1] 網頁設計這個術語通常用來描述與網站前端（客戶端）設計相關的設計過程，包括編寫標記語言。在更廣泛的Web開發領域，網頁設計與網絡工程（英語：web engineering）存在交集。網頁設計師應該對網絡可用性（英語：Web usability）有一定的認識。如果他們的工作涉及到編寫標記語言，那麼他們也應該遵循網頁親和力的最新指引。

歷史

[編輯]
商店中的網頁設計書籍

1988–2001年

[編輯]

雖然網頁設計約在30年前才面世，但它與許多領域都有聯繫，例如平面設計。從技術角度上來看，網頁設計已經成為人們日常生活的重要組成部分。

網絡和網頁設計的開端

[編輯]

1989年，蒂姆·伯納斯-李在歐洲核子研究組織工作期間提議創建一個全球超文本項目，後來被稱為萬維網。在1991年至1993年期間，萬維網誕生了。可以使用簡單的行模式瀏覽器查看純文本頁面[2]。 1993年，馬克·安德森和埃里克·比納創建了Mosaic瀏覽器。當時有眾多的瀏覽器，但它們大多數都是基於Unix並且側重於純文本，對圖形或聲音等圖形設計元素沒有集成的方法。而Mosaic瀏覽器突破了藩籬[3]。

萬維網聯盟成立於1994年10月，通過開發通用的協議促進互聯網發展並確保其互操作性，來使萬維網發揮它最大的潛力[4]。這阻礙了任何一家公司壟斷一種瀏覽器或網頁編程語言，對互聯網後來的發展產生了深遠的影響。W3C繼續制定標準，現在JavaScript和其他語言都可以看到這些標準。

1994年，安德森成立了通信公司（Communications Corp.），後來被稱為網景（Netscape Communications），並推出了Netscape 0.9瀏覽器。Netscape不採用傳統的標準，創建了自己的HTML標籤。例如，Netscape 1.1包含了更改背景顏色和網頁上的表格格式化文本的標籤。1996年至1999年期間，隨着微軟和網景爭奪瀏覽器的統治地位，瀏覽器戰爭開始了。在此期間，該領域有許多新技術產生，特別是層疊樣式表、JavaScript和動態HTML。整體來說，瀏覽器競爭確實帶來了許多積極的創意，並推動網頁設計快速發展[5]。

演變

[編輯]

1996年，微軟發布了第一款具有競爭力的瀏覽器，該瀏覽器有自己的功能和標籤。它也是第一個支持樣式表的瀏覽器，這在當時被認為是一種晦澀難懂的創作技術。[5] table的HTML標記最初是用來顯示表格數據的。然而，設計人員很快意識到使用HTML table創建複雜的多欄布局的潛力，否則這些布局是不可能的。在這個時候，好的設計和美學似乎優先於好的標記結構，很少注意語義和網頁親和力。HTML網站的設計選項有限，對於早期版本的HTML更是如此。為了創建複雜的設計，許多網頁設計師不得不使用複雜的表格結構，甚至使用空白的spacer .GIF圖像來阻止空表格單元collapse。[6] CSS於1996年12月由W3C引入，以支持演示和布局。這使得HTML代碼具有語義性，而不是語義和表示性，並改進了網頁親和力，請參閱無表格網頁設計。

1996年，Flash（最初被稱為FutureSplash）問世。當時，Flash內容開發工具相對於現在來說相對簡單，它使用了基本的布局和繪圖工具、ActionScript的一個有限的前身和時間線，但它使網頁設計師能夠超越HTML、GIF動畫和JavaScript。然而，由於Flash需要插件，許多Web開發人員因為擔心缺乏兼容性會限制他們的市場份額而避免使用它。取而代之的是，設計師們轉而使用GIF動畫（如果他們沒有完全放棄使用動態圖形的話）和JavaScript來處理widget。但是Flash的優點使它在特定的目標市場中足夠流行，最終大多數瀏覽器都能使用它，並且強大到可以用來開發整個網站。[6]

第一次瀏覽器大戰的結束

[編輯]
主條目：瀏覽器大戰

1998年，Netscape在開源授權下發布了Netscape Communicator代碼，使數千名開發人員能夠參與改進軟件。然而，他們決定從頭開始，這引導了開源瀏覽器的發展，並很快擴展到一個完整的應用程序平台。[5] 網頁標準計劃成立，並通過創建Acid1、Acid2和Acid3測試，促進了瀏覽器對HTML和CSS標準的遵循。2000年對微軟來說是重要的一年。Internet Explorer發布了Mac版本；這是第一個完全支持HTML 4.01和CSS 1的瀏覽器，提高了瀏覽器標準的門檻。它也是第一個完全支持PNG圖像格式的瀏覽器。[5] 在此期間，網景被出售給了AOL，這被視為網景在瀏覽器大戰中輸給了微軟的一個標誌。[5]

2001–2012年

[編輯]

21世紀初以來，網絡越來越融入人們的生活。因此互聯網技術也在不斷發展。人們使用和訪問網站的方式也發生了重大變化，這也改變了網站的設計方式。

瀏覽器大戰結束以來，湧現了許多新的瀏覽器。其中許多都是開源的，這意味着它們往往具有更快的開發速度，並且更支持新標準。許多人認為新的選擇比微軟的Internet Explorer更好。

W3C已經發布了HTML（HTML5）和CSS（CSS3）的新標準，以及新的JavaScript API，每一個都是新的但又各自獨立的標準。雖然HTML5這個術語只是用來指代HTML的新版本和一些JavaScript API的新版本，但是用來指代整套新標準（HTML5、CSS3和JavaScript）的做法已經變得很常見了。

工具和技術

[編輯]

網頁設計者根據他們參與工序的不同，選擇各種各樣不同的工具。雖然這些工具往往會隨着新標準、新軟件的出現而不斷更新，但它們背後的原則是不變的。網頁設計者使用矢量圖形編輯器和點陣圖形編輯器來繪製「網頁格式圖」，也叫做「設計原型」。 創建網站的技術包含了一些W3C標準，比如HTML和CSS。HTML和CSS既可以手動編寫，也可以使用可視化編輯器來編輯。譬如，在使用WordPress內容管理系統搭建網站、製作網頁時，可以運用頁面編輯器插件來快速製作頁面，從而實現無編碼製作網頁；知名的WordPress網頁編輯器有Elementor、Beaver Builder等。 網頁設計者還可能使用其他工具來保證他們的網站符合親和力指引[7]，這些工具包括標記驗證器[8]以及其他用於測試可用性和親和力的工具。建立網站的技術包含了一些W3C標準，比如 HTML和 CSS。HTML和 CSS既可以手動編寫，也可以使用視覺化編輯器來編輯。譬如，在使用 WordPress 內容管理系統搭建網站、製作網頁時，可以運用頁面編輯器外掛程式來快速製作頁面，從而實現無編碼製作網頁；知名的 WordPress 網頁編輯器有Elementor、Beaver Builder等；可以運用 CSS 產生器外掛來協助視覺化的產出 CSS程式碼，知名的 CSS產生器外掛有 CSS Hero 與 YellowPencil 等。[9][10]

技能和方法

[編輯]

營銷和溝通設計

[編輯]

一個網站的市場營銷和溝通設計可以確定什麼樣的產品適合目標市場。目標市場可能是某一年齡段的人群或特定的文化鏈；因此設計師要理解其受眾的趨勢。設計者也要理解他們正在設計的網站的類型，這意味着，例如，B2B網站的設計考慮因素可能與針對消費者的網站（如零售或娛樂網站）有很大的不同。可能需要仔細考慮，以確保網站的美觀或整體設計不會與內容的清晰度和準確性或網站導航的便捷性相衝突，[11] 特別是在B2B網站上。設計師也可能會考慮網站所有者或商業代表的聲譽，以確保他們被描繪得有利。

用戶體驗設計與交互設計

[編輯]

用戶對網站內容的理解往往取決於用戶對網站工作原理的理解。這是用戶體驗設計的一部分。用戶體驗與網站的布局、明確的說明和標籤有關。用戶對如何在網站上進行交互的理解程度也取決於網站的互動設計。如果用戶意識到網站的有用性，他們更有可能繼續使用它。儘管熟練且精通網站使用的用戶可能會覺得，一個與眾不同但不太直觀或用戶友好的網站界面比較有用。但是，經驗較少的用戶不太可能看到一個不太直觀的網站界面的優勢或有用性。這推動了更加普遍的用戶體驗和易於訪問的趨勢，無論用戶技能如何，都能夠容納儘可能多的用戶。[12] 許多用戶體驗設計和交互式設計在用戶界面設計中得到了考慮。

如果沒有高級編程語言技能，高級交互功能可能需要插件。選擇是否使用需要插件的交互性是用戶體驗設計中的一個關鍵決策。如果插件沒有在大多數瀏覽器中預先安裝，用戶可能既不知道如何安裝，也沒有耐心安裝插件來訪問內容。如果該功能需要高級編程語言技能，那麼與功能將提升用戶體驗的增強量相比，寫代碼在時間或金錢上可能成本太高。發布不可靠的功能對於用戶體驗而言可能比不嘗試更糟糕。這取決於目標受眾是否需要或值得冒險。

頁面布局

[編輯]

部分用戶界面設計受到頁面布局質量的影響。例如，設計師在設計頁面布局時可能要考慮網站的頁面布局是否應該在不同的頁面上保持一致。在布局設計中，頁面像素寬度對於對齊對象也是至關重要的。最流行的固定寬度網站通常具有相同的設置寬度，以匹配當前最流行的瀏覽器窗口，在當前最流行的屏幕分辨率，當前最流行的顯示器尺寸。在大屏幕上，大多數頁面也是中心對齊的，以確保美觀。

流體布局（fluid layout）在2000年左右開始流行起來，作為HTML表格布局和網格布局的替代品，在頁面布局設計原則和編碼技術方面都是如此，但是採用起來非常緩慢。[note 1] 這是由於設計師無法控制屏幕閱讀設備和不同的窗口大小。因此，一個設計可能會被分解成單元（側邊欄、內容塊、嵌入式廣告區域、導航區域），然後發送到瀏覽器，最好的方式是通過瀏覽器適配到顯示窗口中。由於瀏覽器能夠識別讀取器屏幕的詳細信息（窗口大小，相對於窗口的字體大小等），因此瀏覽器可以對流體布局進行用戶特定的布局調整，但固定寬度布局就不行。雖然這樣的顯示可能經常改變主要內容單元的相對位置，但是側欄可以在主體文本下方而不是在其側面上移位。這種顯示方式比起不能適配設備窗口的寫死的基於網格的布局要更加靈活。特別是，內容塊的相對位置可能會發生變化，同時不影響塊內的內容。這也減少了用戶水平滾動頁面的需要。

響應式網頁設計是一種基於CSS3的新方法，通過增強使用CSS @media規則，在頁面樣式表中提供更深層次的針對每種設備的規範。2018年3月，谷歌宣布將推出移動優先索引。[13] 使用響應性設計的站點能夠很好地確保它們滿足這種新方法。

字體設計

[編輯]

網頁設計師可以選擇將網站字體的種類限制為僅有少數具有相似風格的網站字體，而不是使用各種字體或字體樣式。大多數瀏覽器都識別特定數量的安全字體，設計者主要使用這些字體來避免複雜性。

字體下載後來包含在CSS3字體模塊中，並已在Safari 3.1，Opera 10和Mozilla Firefox 3.5中實現。這之後人們增加了對Web字體排印以及使用字體下載的興趣。

大多數網站布局都包含負空間以將文本分解為段落，並且還避免使用居中對齊的文本。[14]

動態圖形

[編輯]

使用動態圖形也可能影響到頁面布局和用戶界面。是否選擇使用動態圖形可能取決於網站的目標市場。娛樂導向的網站預期或至少更容易接受動態圖形。然而，一個更嚴肅或正式的網站（如商業、社區、政府網站），可能就會覺得出於娛樂或裝飾目的的動畫沒有必要，還會分散人們的注意力。這不是說比較嚴肅的內容不能用與內容相關的動畫或視頻演示來提升。無論哪種情況，動態圖形設計都可以使更有效的視覺效果或分散注意力的視覺效果有所不同。

不由站點訪問者發起的動態圖形可能產生可訪問性問題。萬維網聯盟的無障礙標準要求網站訪問者能夠禁用動畫。[15]

代碼質量

[編輯]

網站設計者可能認為符合標準是良好做法。這通常通過描述說明元素在做什麼來完成。不符合標準可能不會使網站無法使用或容易出錯，但標準可能與頁面的正確布局有關，以便於閱讀，並確保編碼元素適當關閉。這包括代碼中的錯誤，更有條理的代碼布局，以及確保正確識別ID和類。編碼不佳的頁面有時俗稱tag soup。只有在做出正確的DOCTYPE聲明時才能通過W3C進行驗證[8]，該聲明用於突出顯示代碼中的錯誤。該系統能識別錯誤和不符合網頁設計標準的地方。這些信息可以幫助用戶改正錯誤。[16]

生成內容

[編輯]

網站的生成方式有兩種：靜態或動態。

靜態網頁

[編輯]

靜態網頁多數為單一的超文本標記語言文件，每次請求該頁面時，都會返回相同的內容。在網站設計期間內容只需創建一次。它通常是手動編寫的，儘管有些站點使用類似於動態網站的自動創建工具,其結果將長期存儲為完成的頁面。這些自動創建的靜態網站在2015年左右變得更受歡迎，其中包括Jekyll和Adobe Muse等生成工具。[17]

靜態網站的好處在於它們更容易託管，因為它們的服務器只需要提供靜態內容，無需執行服務器端腳本。這可以降低網站維護的工作量，並且由於靜態網站不需要數據庫，所以可以極大的避免暴露系統安全漏洞。[18]他們還可以在低成本的服務器硬件上更快地加載頁面。隨着便宜的網絡託管擴展到提供動態功能，這些優勢變得不那麼重要了，虛擬服務器可以以低成本提供短時間的高性能的服務。

幾乎所有網站都有一些靜態內容，因為主要的輔助性資源（如圖像和樣式表）通常是靜態的，即使在頁面HTML代碼幾乎全是動態生成的網站上，也不例外。現今不少網站也皆傾向把動態網頁靜態化，從而進行SEO優化。

動態網頁

[編輯]
主條目：動態網頁

動態網頁是服務器通過應用程序服務器處理服務器端腳本生成的網頁。它們通常從一個或多個後端數據庫中提取內容:一些通過跨關係數據庫的數據庫查詢，用於查詢目錄或匯總數字信息；另一些使用MongoDB或NoSQL等面向文檔的數據庫來存儲更大的內容單元，例如博客文章或維基文章。

在設計過程中，動態頁面通常使用靜態頁面進行模擬或線框化。開發動態網頁所需的技能比設計靜態網頁來得更多，因為其同時涉及服務端設計、數據庫設計和客戶端設計。即使是中等規模的動態網站項目，也因此通常需要團隊協作才能完成。

首次開發動態網頁時通常直接用Perl、PHP或ASP等語言。其中一些，特別是PHP和ASP，使用「模板」方法，其中服務器端頁面類似於完成的客戶端頁面的結構，數據被插入到由「標籤」定義的位置。這是一種相比Perl這樣的純過程語言更快捷的開發方式。

對於很多網站來說，「標籤」方法、「模板」方法這兩種實現大多數已經被例如內容管理系統等高階的、面向應用的工具所替代。這些工具建構在一些通用的代碼之上，並假設網站提供的內容遵循幾種既有的模型，例如按時間順序排序的網誌、一個專題雜誌或新聞網站、一個共筆網站或是一個用戶論壇。這些工具讓網站的搭建變得更加容易，僅僅需要純粹的設計和內容組織，不再需要任何編程。

編輯網頁內容本身（包括模版頁面）既可以通過站點本身，也可以使用第三方軟件完成。編輯所有頁面的功能僅提供給特定類別的用戶（例如，管理員或註冊用戶）。在某些情況下，允許匿名用戶編輯某些Web內容，這種情況較少（例如，在論壇上添加消息）。維基百科是一個可以匿名修改網頁內容的網站的例子。

首頁設計

[編輯]

包括Jakob Nielsen和Kyle Soucy在內的可用性專家經常強調主頁設計以確保網站成功，並聲稱首頁是網站上最重要的頁面。[19][20][21][22] 不過，2000年代的從業者開始發現，越來越多的網站流量繞過主頁，通過搜索引擎、電子新聞稿和RSS源直接進入內部內容頁面。[23] 使得許多從業者認為首頁沒有大多數人認為的那麼重要。[24][25][26][27] Jared Spool在2007年提出，網站的首頁實際上是網站最不重要的頁面。[28]

在2012年和2013年，輪播（Carousel）已經成為極受歡迎的設計元素，經常用於在有限的空間展示特色或最近的內容。[29][30] 許多從業人員認為輪播是一種無效的設計元素，會損害網站的搜索引擎優化和可用性。[30][31][32]

工作

[編輯]

建設網站涉及兩個主要工作：網頁設計師和網頁開發者，他們經常在建站時緊密合作。[33] 網頁設計師負責視覺方面，包括網頁的布局、着色和排版。儘管所需的具體知識因具體的網頁和不同設計師的要求而異，網頁設計人員都需要具備HTML和CSS等標記語言的應用知識。特別是在較小的組織中，一個人需要同時掌握開發網站和必要的設計網頁技能，而較大的組織則可能會專門指派一個負責視覺方面的網頁設計師。[34]

可能參與建站的其他工作包括：

  • 圖形設計師（英語：Graphic designers）為網站創建視覺效果，例如Logo，布局和按鈕。
  • 互聯網營銷專家通過在互聯網上使用營銷和促銷技術、針對網站的受眾定位的戰略解決方案來幫助維護網站。
  • 搜索引擎優化專家研究和推薦一定的關鍵詞，納入特定的網站，使網站更容易訪問，並在眾多搜索引擎上找到。
  • 互聯網文案人員撰寫網站中的文章，以吸引網站的目標受眾[1]。
  • 用戶體驗設計（UX設計）以用戶為中心考慮多種設計因素，包括信息架構、用戶測試、交互設計等以用戶為中心的設計，有時也會參與視覺設計。

另見

[編輯]

另見

[編輯]

有關行業

[編輯]

注釋

[編輯]
  1. ^ <table>-based markup and spacer .GIF images
  1. ^ 1.0 1.1 Lester, Georgina. Different jobs and responsibilities of various people involved in creating a website. Arts Wales UK. [2012-03-17]. （原始內容存檔於2013-05-31）. 
  2. ^ Longer Biography. [2012-03-16]. （原始內容存檔於2018-03-03）. 
  3. ^ Mosaic Browser (PDF). [2012-03-16]. （原始內容 (PDF)存檔於2013-09-02）. 
  4. ^ Zwicky, E.D, Cooper, S and Chapman, D.B. Building Internet Firewalls. United States: O』Reily & Associates. 2000: 804. ISBN 1-56592-871-7. 
  5. ^ 5.0 5.1 5.2 5.3 5.4 Niederst, Jennifer. Web Design In a Nutshell. United States of America: O'Reilly Media. 2006: 12–14. ISBN 0-596-00987-9. 
  6. ^ 6.0 6.1 Chapman, Cameron, The Evolution of Web Design, Six Revisions, [2018-12-02], （原始內容存檔於2013-10-30） 
  7. ^ W3C. Web Accessibility Initiative (WAI). [2018-12-02]. （原始內容存檔於2008-09-04）. 
  8. ^ 8.0 8.1 W3C Markup Validation Service. [2018-12-02]. （原始內容存檔於2011-02-22）. 
  9. ^ 不懂程式也能寫 CSS？. 2019-07-09 [2022-01-25]. （原始內容存檔於2022-01-25） （中文（繁體））. 
  10. ^ YellowPencil：WordPress主題的自訂不會用，幫你寫CSS改樣式！. 2021-06-25 [2022-01-25]. （原始內容存檔於2022-01-25） （中文（繁體））. 
  11. ^ THORLACIUS, LISBETH. The Role of Aesthetics in Web Design. Nordicom Review. 2007, (28): 63–76 [2014-07-18]. （原始內容存檔於2021-02-24）. 
  12. ^ Castañeda, J.A Francisco; Muñoz-Leiva, Teodoro Luque. Web Acceptance Model (WAM): Moderating effects of user experience. Information & Management. 2007, 44: 384–396. doi:10.1016/j.im.2007.02.003. 
  13. ^ Rolling out mobile-first indexing. Official Google Webmaster Central Blog. [2018-06-09]. （原始內容存檔於2021-04-29） （美國英語）. 
  14. ^ Stone, John. 20 Do’s and Don’ts of Effective Web Typography. 2009-11-16 [2012-03-19]. （原始內容存檔於2015-06-23）. 
  15. ^ World Wide Web Consortium: Understanding Web Content Accessibility Guidelines 2.2.2: Pause, Stop, Hide. [2018-12-02]. （原始內容存檔於2017-12-15）. 
  16. ^ W3C QA. My Web site is standard! And yours?. [2012-03-21]. （原始內容存檔於2017-12-31）. 
  17. ^ Christensen, Mathias Biilmann. Static Website Generators Reviewed: Jekyll, Middleman, Roots, Hugo. Smashing Magazine. 2015-11-16 [2016-10-26]. （原始內容存檔於2020-12-05）. 
  18. ^ 静态网站是一种新的动态. 王會的博客. [2020-08-23]. （原始內容存檔於2021-01-19）. 
  19. ^ Soucy, Kyle, Is Your Homepage Doing What It Should?, Usable Interface, [2018-12-02], （原始內容存檔於2012-06-08） 
  20. ^ Nielsen & Tahir 2001.
  21. ^ Nielsen, Jakob, The Ten Most Violated Homepage Design Guidelines, Nielsen Norman Group, 10 November 2003 [2018-12-02], （原始內容存檔於2013-10-05） 
  22. ^ Knight, Kayla, Essential Tips for Designing an Effective Homepage, Six Revisions, 20 August 2009 [2018-12-02], （原始內容存檔於2013-08-21） 
  23. ^ Spool, Jared, Is Home Page Design Relevant Anymore?, User Interface Engineering, 29 September 2005 [2018-12-02], （原始內容存檔於2013-09-16） 
  24. ^ Chapman, Cameron, 10 Usability Tips Based on Research Studies, Six Revisions, 15 September 2010 [2018-12-02], （原始內容存檔於2013-09-02） 
  25. ^ Gócza, Zoltán, Myth #17: The homepage is your most important page, [2018-12-02], （原始內容存檔於2013-06-02） 
  26. ^ McGovern, Gerry, The decline of the homepage, 18 April 2010 [2018-12-02], （原始內容存檔於2013-05-24） 
  27. ^ Porter, Joshua, Prioritizing Design Time: A Long Tail Approach, User Interface Engineering, 24 April 2006 [2018-12-02], （原始內容存檔於2013-05-14） 
  28. ^ Spool, Jared, Usability Tools Podcast: Home Page Design, 6 August 2007 [2018-12-02], （原始內容存檔於2013-04-29） 
  29. ^ Bates, Chris, Best practices in carousel design for effective web marketing, Smart Insights, 9 October 2012 [2018-12-02], （原始內容存檔於2013-04-03） 
  30. ^ 30.0 30.1 Messner, Katie, Image Carousels: Getting Control of the Merry-Go-Round, Usability.gov, 22 April 2013 [2018-12-02], （原始內容存檔於2013-10-10） 
  31. ^ Jones, Harrison, Homepage Sliders: Bad For SEO, Bad For Usability, 19 June 2013 [2018-12-02], （原始內容存檔於2013-11-22） 
  32. ^ Laja, Peep, Don’t Use Automatic Image Sliders or Carousels, Ignore the Fad, ConversionXL, 27 September 2012 [2018-12-02], （原始內容存檔於2013-11-25） 
  33. ^ Oleksy, Walter. Careers in Web Design. New York: The Rosen Publishing Group, Inc. 2001: 9–11 [2018-12-02]. ISBN 9780823931910. （原始內容存檔於2020-09-24）. 
  34. ^ Web Designer. [2012-03-19]. （原始內容存檔於2020-09-25）. 

參考文獻與延伸閱讀

[編輯]
  • Nielsen, Jakob; Tahir, Marie, Homepage Usability: 50 Websites Deconstructed, New Riders Publishing, October 2001, ISBN 978-0735711020 

外部連結

[編輯]

維基學院中的相關學習文章：Web前端

取自「https://wiki.zwnes.eu.org/w/index.php?title=网页设计&oldid=80036955」