維基百科

網頁設計

網站製作和維護方面的技能和紀律

網頁設計（英語：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://zh.wikipedia.org/w/index.php?title=网页设计&oldid=80036955」