網頁設計師術語:客戶指南

已發表: 2024-09-15

每個行業都有自己的行話。作為網頁設計師,您應該熟悉 UX、CSS 和 HTML 等網站術語的字母湯。但你的客戶呢?對他們來說這也可能是希臘文。

在您深入設計流程之前,向您的客戶介紹最常見的網頁設計術語有巨大的好處。無論他們的知識水平如何,當你跳過基礎知識時,你最終會花更多的時間在電話上翻譯術語,而不是討論你的工作和設計理念。

為了幫助您的客戶加快速度,我們整理了最常見的網頁設計術語並將其翻譯成客戶友好的術語。

以下是 7 個基本的網站設計術語:

  • 英雄形象
  • 使用者體驗
  • 線框
  • 資訊架構
  • 行動響應
  • HTML、CSS 和 JavaScript
  • 內容管理系統

英雄形象

在設計網站時,您經常會聽到提及網站主頁的「英雄形象」一詞。儘管這個術語可能會讓人想起蝙蝠俠和超人的圖像,但這並不意味著您的設計師將超級英雄的圖像放在您的網站上。

網站的插圖草圖,其中英雄圖像(頂部)是網站的主要焦點
英雄圖像是網站主頁頂部的大特徵圖像或影片。

英雄圖像是網站主頁頂部的大特徵圖像或影片背景。人們開始將此區域稱為英雄圖像,因為它是該網站的重要組成部分。這是任何訪客登陸您的網站時看到的第一件事,因此,設計必須引人入勝且有意義。

儘管“英雄圖像”一詞中包含“圖像”一詞,但網站的這一部分不一定需要是靜態圖片。如今,英雄影片非常常見,通常在某些文字後面的背景中播放。根據網站的目標和設計風格,您甚至可能會看到網站此區域使用的動畫。


UX 或使用者體驗

UX 是使用者體驗的簡寫。有些網頁設計師專注於使用者體驗設計,即增強網站訪客對網站的整體體驗的過程。使用者體驗設計被認為是一種專業化,因為設計師不僅創建網站的外觀,還考慮訪客第一次(以及隨後!)造訪網站的體驗。

使用者體驗的一個簡單類比是將其與您在新餐廳中可能獲得的體驗進行比較。食物可能很棒,但如果餐廳要花很長時間才能讓你入座,而且浴室很糟糕,而且停車是一場噩夢,那麼你可能不會再去那裡了。除了食物之外,影響您在餐廳體驗的因素還有很多。

對網站來說也是如此,這就是使用者體驗的意義所在。吸引並留住訪客在您的網站上不僅僅需要良好的設計。了解使用者體驗設計的網頁設計師會考慮網站上的所有內容如何影響使用者的整體體驗。


線框

在大多數網站專案中,您的網路團隊會先建立網頁的線框,然後再建立設計模型。

線框基本上是一個藍圖,它顯示了某些元素和文字將放置在頁面上的位置。

顯示網站粗略佈局的插圖。圓圈顯示徽標的位置,框顯示部分和圖像的位置,虛線顯示文字的位置。
線框是一個藍圖,顯示某些元素和文字將放置在頁面上的位置。

建立網站類似於建造房屋的過程。線框是一個非常有用的工具,因為它允許您與網頁策略師或設計師協作,並且比設計模型更容易移動事物。

如果您曾經看過線框圖的範例,您會發現它與建築藍圖有相似之處;線框通常是黑白的,帶有基本的框和輪廓以顯示元素的放置位置。


資訊架構(IA)

除了線框圖之外,您通常還會在過程的早期為您的網站設計資訊架構。資訊架構,通常稱為 IA,是指對網站內容進行組織、優先排序和標記的過程。

在此階段,您將決定哪些網站頁面將包含在網站的頂部導航中以及內容的結構如何。頂部導航是頁面頂部的一系列連結。此頂部導覽位於網站的每個頁面上,有助於引導網路訪客找到最重要的內容。

與線框圖類似,最終的資訊架構是網站的組織表示。它通常看起來像一個圖表,是指導網路團隊的重要工具,以確保最終網站的導航符合邏輯且直觀。


行動響應

如今,每個網站都需要適用於各種設備,例如手機、平板電腦和桌上型電腦。正是在這種情況下,您經常會聽到網頁設計師使用“行動響應式”一詞。

行動響應意味著平臺本身已經內建了技術。

大多數網站平台(例如 WordPress)都是行動響應式的,這意味著平臺本身已經內建了技術,以便內容自動調整以適應用戶的裝置尺寸。

想想你的手機是如何運作的。如果您水平轉動手機,手機的內容會自動調整。

這與網站上發生的情況非常相似。由於行動響應技術,網頁設計師和開發人員不再需要為較小的設備創建網站的第二版本。相同的內容和設計將在不同的設備尺寸上適當地顯示。

熟練的網頁設計師在設計網站時會考慮到這一點,並可以指導您編寫適用於行動裝置和更大螢幕的內容。


HTML、CSS 和 JavaScript

不要讓這些技術術語嚇倒您。每一個都與您的設計如何從靜態圖像轉變為即時的互動式網頁有關。通常,您將開始與專門研究網站外觀和組織方式的網頁設計師一起建立網站。然後,您將繼續與網頁開發人員或開發團隊合作,由他們對網站進行編碼。

您更有可能在建立網站的開發階段聽到這些術語,但它們也可能會出現在設計討論中。

HTML代表超文本標記語言,它允許網頁團隊告訴網頁瀏覽器如何顯示一段文字。 HTML 使用不同的標籤來表示文字是標題、副標題還是段落。您可能會看到設計師將設計中的標題標記為 H1。這是指 HTML 標籤,該標籤將用於告訴瀏覽器帶有此標籤的所有文字應採用相同的字體大小。

層疊樣式表 (CSS)可協助網頁設計師和開發人員定義網站的外觀和風格。 HTML 本身並沒有吸引力。 CSS 在創建漂亮的網頁設計方面發揮著重要作用。

JavaScript是一種腳本語言,開發人員使用它在網站上創建互動。僅使用 HTML 和 CSS,您就可以擁有一個漂亮的網頁,但僅使用這兩者則不會發生任何事情。在尋找 Web 開發人員或開發團隊時,請尋找不僅僅了解 JavaScript 的人,並確保您的團隊在您建立網站的平台上擁有豐富的經驗。


內容管理系統

我們將以一個非常簡單的術語來結束:內容管理系統,也稱為 CMS。您經常會聽到這個與 WordPress(另一個內容管理系統)相關的術語。

事實上,WordPress 是世界上最受歡迎的內容管理系統。 CMS 是網站上的後端工具,它允許您輕鬆編輯或為網站添加內容。

在 WordPress 等 CMS 上建立網站的巨大好處是,您不必成為網頁設計師或網頁開發人員即可在網站啟動後更改文字、添加圖像或添加頁面。您不必每次需要在頁面上新增逗號時都致電 Web 開發人員。

由於 WordPress 非常靈活且可自訂,因此您可以透過漂亮的網站獲得兩全其美的效果,同時又易於您的企業管理。


看更多 WordPress 內容!

本地 WordPress 開發環境為什麼大

WordPress 是世界上最受歡迎的內容管理系統,每天都被越來越多的創意人士使用。

在此處了解有關 WordPress 的更多資訊。無論您是初學者還是對 WordPress 瞭如指掌,我們都為每個人提供資源和文章!

繼續在這裡閱讀。