網站的設計元素

想瞭解設計清爽簡潔的網站版面和元素的小撇步嗎?您來對地方了!

Adobe Illustrator 提供像素級最佳化的設計環境,讓您建立靈活流暢的網頁元素。您可以獲得所需的各種工具,建立乾淨俐落的網頁版面,例如:向量圖形、回應式媒體圖示、可縮放元件、CSS 產生功能、SVG 轉存功能、線框,以及可重複使用的符號。

網站設計

強力推薦

Adobe XD – Adobe 最新版支援向量圖形的全方位 UX/UI 解決方案,可供您設計網站、行動應用程式及其他更多項目。

5 大原則建立成效出色的網頁版面

若要建立優質的網頁體驗,務必特別留意以下網頁設計元素:

  • 無須數次點按的輕鬆導覽方式
  • 完美平衡地運用螢幕空間,並依裝置提供最適合的顯示方式
  • 極簡且整齊的結構 - 使用格點、拼貼、卡片
  • 吸睛又動人的視覺圖像
  • 清晰又具藝術風格的印刷樣式

開始之前

您在 Illustrator 中設計的圖稿通常會與以下設計主題有關:

  • 形狀和路徑
  • 顏色和圖樣
  • 文字和字體
  • 影像和特效

想瞭解更多資訊嗎?請參閱網站的基本元件

設定網頁文件

若要設定網頁文件:

  • 選擇「檔案 > 開啟舊檔」。在「新增文件」對話框中,按一下「網頁」標籤。從預設集清單選擇符合您需求的網頁文件。
  • 預視並下載範例範本。 
選擇網頁文件
選擇網頁文件

設計回應式網頁

隨著技術不斷成長,針對各種作業系統平台、螢幕尺寸和裝置方向,設計能流暢回應的網站至關重要。

若要建立回應式網頁版面,請考慮使用下列元素:

  • 具彈性的格點和版面可讓您針對各種螢幕寬度 (例如桌上型電腦、平板電腦和行動電話),設計能重新調整大小的網站版面。
  • 可縮放的媒體,包含影像、視訊和類似格式。
  • 動態媒體查詢可讓您為網頁瀏覽器和裝置新增特定樣式。

建立網站線框或結構

簡潔且架構完善的網站能吸引更多訪客。在您設計網站版面時:

  • 請先設計網站線框,以視覺效果呈現各種畫面元素,然後井然有序地在網頁上置入這些元素。
    秘訣:您可以新增拼貼或卡片,設計輕鬆的導覽方式和具現代感的外觀。
  • 建立第一層級的使用者介面後,繼續填入內容和其他美術元素。
網站結構
適用於不同螢幕的部分網站範本

建立組織化網頁版面的秘訣與技巧

  • 若要設計流暢的外觀,請將網站切成相關聯的區段。選擇「物件 > 切片」
  • 使用尺標、格點、參考線來檢查和測試參考區域,以及調整畫面元素。
    • 選擇「檢視 > 參考線」
    • 選擇「檢視 > 顯示格點」
    • 選擇「檢視 > 尺標」
  • 若要建立精確的視覺大綱,請在網頁上置入矩形物件或文字元件,將畫面分割成相關聯的區段。
  • 專注於建立網頁的主要內容時,也別忘了新增創意標誌、激勵人心的主圖影像、標語、使命宣言等任何適用的內容。
  • 若要儲存網站結構,請選擇 「轉存 > 儲存為網頁用 (舊版)」。您也可以選擇要在儲存的檔案中顯示的切片。

另請參閱:

切片和影像地圖

設計網頁橫幅

想要在網站上展開行銷活動,來推廣產品或服務及刊登相關廣告嗎?只要幾分鐘即可建立吸睛橫幅!

若要建立網頁橫幅,請執行下列操作:

  • 選擇合適的文件大小,A4 規格的文件通常最適合用於橫幅。
  • 使用「矩形」工具建立橫幅外框,並指定適當的尺寸。
  • 新增圖形、文字和漸層,然後盡情揮灑創意。
網頁橫幅

另請參閱:

設計社交媒體橫幅

相關資源

Adobe 標誌

登入您的帳戶