網頁設計

網頁設計設計相關的設計過程，包括編寫標記語言。在更廣泛的Web開發領域，網頁設計與存在交集。網頁設計師應該對有一定的認識。如果他們的工作涉及到編寫標記語言，那麼他們也應該遵循網頁親和力的最新指引。歷史.1988–2001年.雖然網頁設計約在30年前才面世，但它與許多領域都有聯絡，例如平面設計。從技術角度上來看，網頁設計已經成為人們日常生活的重要組成部分。網路和網頁設計的-{zh-hans:開始; zh-tw:開端}-.1989年，蒂姆·伯納斯-李在歐洲核子研究組織工作期間提議建立一個全球超文字專案，後來被稱為全球資訊網。在1991年至1993年期間，全球資訊網誕生了。可以使用簡單的行模式瀏覽器檢視純文字頁面。 1993年，馬克·安德森和埃裡克·比納建立了Mosaic瀏覽器。當時有眾多的瀏覽器，但它們大多數都是基於Unix並且側重於純文字，對圖形或聲音等圖形設計元素沒有整合的方法。而Mosaic瀏覽器-{zh-hans:打破; zh-hant:突破}-了藩籬。全球資訊網聯盟成立於1994年10月，透過開發通用的協議促進網際網路發展並確保其互操作性，來使全球資訊網發揮它最大的潛力。這阻礙了任何一家公司壟斷一種瀏覽器或網頁程式語言，對網際網路後來的發展產生了深遠的影響。W3C繼續制定標準，現在JavaScript和其他語言都可以看到這些標準。1994年，成立了通訊公司，並推出了Netscape 0.9瀏覽器。Netscape不採用傳統的標準，建立了自己的HTML標籤。例如，Netscape 1.1包含了更改背景顏色和網頁上的表格格式化文字的標籤。1996年至1999年期間，隨著微軟和網景爭奪瀏覽器的統治地位，瀏覽器戰爭開始了。在此期間，該領域有許多新技術產生，特別是層疊樣式表、JavaScript和動態HTML。-{zh-hans:總的; zh-tw:整體}-來說，瀏覽器競爭確實帶來了許多積極的創意，並-{zh-hans:幫助; zh-tw:推動}-網頁設計快速發展。演變.1996年，微軟釋出了第一款具有競爭力的瀏覽器，該瀏覽器有自己的功能和標籤。它也是第一個支援樣式表的瀏覽器，這在當時被認為是一種晦澀難懂的創作技術。 table的HTML標記最初是用來顯示錶格資料的。然而，設計人員很快意識到使用HTML table建立複雜的多欄佈局的潛力，否則這些佈局是不可能的。在這個時候，好的設計和美學似乎優先於好的標記結構，很少注意語義和網頁親和力。HTML網站的設計選項有限，對於早期版本的HTML更是如此。為了建立複雜的設計，許多網頁設計師不得不使用複雜的表格結構，甚至使用空白的spacer .GIF影象來阻止空表格單元collapse。 CSS於1996年12月由W3C引入，以支援演示和佈局。這使得HTML程式碼具有語義性，而不是語義和表示性，並改進了網頁親和力，請表格網頁設計。1996年，Flash和JavaScript來處理widget。但是Flash的優點使它在特定的目標市場中足夠流行，最終大多數瀏覽器都能使用它，並且強大到可以用來開發整個網站。第一次瀏覽器大戰的結束.1998年，Netscape在開源授權下發布了Netscape Communicator程式碼，使數千名開發人員能夠參與改進軟體。然而，他們決定從頭開始，這-{zh-hans:指導; zh-tw:引導}-了開源瀏覽器的-{zh-hans:開發; zh-tw:發展}-，並很快擴充套件到一個完整的應用程式平臺。 網頁標準計劃成立，並透過建立Acid1、Acid2和Acid3測試，促進了瀏覽器對HTML和CSS標準的-{zh-hans:遵從; zh-tw:遵循}-。2000年對微軟來說是重要的一年。Internet Explorer釋出了Mac版本；這是第一個完全支援HTML 4.01和CSS 1的瀏覽器，提高了瀏覽器標準的門檻。它也是第一個完全支援PNG影象格式的瀏覽器。 在此期間，網景被出售給了AOL，這被視為網景在瀏覽器大戰中輸給了微軟的一個標誌。2001–2012年.21世紀初以來，網路越來越融入人們的生活。因此網際網路技術也在不斷發展。人們使用和訪問網站的方式也發生了重大變化，這也改變了網站的設計方式。瀏覽器大戰結束以來，湧現了許多新的瀏覽器。其中許多都是開源的，這意味著它們往往具有更快的開發速度，並且更支援新標準。許多人認為新的選擇比微軟的Internet Explorer更好。W3C已經發布了HTML的做法已經變得很常見了。工具和技術.網頁設計者根據他們參與工序的不同，選擇各種各樣不同的工具。雖然這些工具往往會隨著新標準、新軟體的出現而不斷更新，但它們背後的原則是不變的。網頁設計者使用向量圖形編輯器和點陣圖形編輯器來繪製“網頁格式圖”，也叫做“設計原型”。建立網站的技術包含了一些W3C標準，比如HTML和CSS。HTML和CSS既可以手動編寫，也可以使用視覺化編輯器來編輯。譬如，在使用WordPress內容管理系統搭建網站、製作網頁時，可以運用頁面編輯器外掛來快速製作頁面，從而實現無編碼製作網頁；知名的WordPress網頁編輯器有Elementor、Beaver Builder等。網頁設計者還可能使用其他工具來保證他們的網站符合親和力指引，這些工具包括標記驗證器以及其他用於測試可用性和親和力的工具。建立網站的技術包含了一些W3C標準，比如 HTML和 CSS。HTML和 CSS既可以手動編寫，也可以使用視覺化編輯器來編輯。譬如，在使用 WordPress 內容管理系統搭建網站、製作網頁時，可以運用頁面編輯器外掛程式來快速製作頁面，從而實現無編碼製作網頁；知名的 WordPress 網頁編輯器有Elementor、Beaver Builder等；可以運用 CSS 產生器外掛來協助視覺化的產出 CSS程式碼，知名的 CSS產生器外掛有 CSS Hero 與 YellowPencil 等。技能和方法.營銷和溝通設計.一個網站的市場營銷和溝通設計可以確定什麼樣的產品適合目標市場。目標市場可能是某一年齡段的人群或特定的文化鏈；因此設計師要理解其受眾的趨勢。設計者也要理解他們正在設計的網站的型別，這意味著，例如，B2B網站的設計考慮因素可能與針對消費者的網站有很大的不同。可能需要仔細考慮，以確保網站的美觀或整體設計不會與內容的清晰度和準確性或網站導航的便捷性相沖突， 特別是在B2B網站上。設計師也可能會考慮網站所有者或商業代表的聲譽，以確保他們被描繪得有利。使用者體驗設計與互動設計.使用者對網站內容的理解往往取決於使用者對網站工作原理的理解。這是使用者體驗設計的一部分。使用者體驗與網站的佈局、明確的說明和標籤有關。使用者對如何在網站上進行互動的理解程度也取決於網站的互動設計。如果使用者意識到網站的有用性，他們更有可能繼續使用它。儘管熟練且精通網站使用的使用者可能會覺得，一個與眾不同但不太直觀或使用者友好的網站介面比較有用。但是，經驗較少的使用者不太可能看到一個不太直觀的網站介面的優勢或有用性。這推動了更加普遍的使用者體驗和易於訪問的趨勢，無論使用者技能如何，都能夠容納儘可能多的使用者。 許多使用者體驗設計和互動式設計在使用者介面設計中得到了考慮。如果沒有高階程式語言技能，高階互動功能可能需要外掛。選擇是否使用需要外掛的互動性是使用者體驗設計中的一個關鍵決策。如果外掛沒有在大多數瀏覽器中預先安裝，使用者可能既不知道如何安裝，也沒有耐心安裝外掛來訪問內容。如果該功能需要高階程式語言技能，那麼與功能將提升使用者體驗的增強量相比，寫程式碼在時間或金錢上可能成本太高。釋出不可靠的功能對於使用者體驗而言可能比不嘗試更糟糕。這取決於目標受眾是否需要或值得冒險。頁面佈局.部分使用者介面設計受到頁面佈局質量的影響。例如，設計師在設計頁面佈局時可能要考慮網站的頁面佈局是否應該在不同的頁面上保持一致。在佈局設計中，頁面畫素寬度對於對齊物件也是至關重要的。最流行的固定寬度網站通常具有相同的設定寬度，以匹配當前最流行的瀏覽器視窗，在當前最流行的螢幕解析度，當前最流行的顯示器尺寸。在大螢幕上，大多數頁面也是中心對齊的，以-{zh-hans:保證; zh-tw:確保}-美觀。流體佈局已經成為極受歡迎的設計元素，經常用於在有限的空間展示特色或最近的內容。 許多從業人員認為輪播是一種無效的設計元素，會損害網站的搜尋引擎最佳化和可用性。工作.建設網站涉及兩個主要工作：網頁設計師和網頁開發者，他們經常在建站時緊密合作。 網頁設計師負責視覺方面，包括網頁的佈局、著色和排版。儘管所需的具體知識因具體的網頁和不同設計師的要求而異，網頁設計人員都需要具備HTML和CSS等標記語言的應用知識。特別是在較小的組織中，一個人需要同時掌握開發網站和必要的設計網頁技能，而較大的組織則可能會專門指派一個負責視覺方面的網頁設計師。可能參與建站的其他工作包括：維基學院中的相關學習文章：