網站的設計元素

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

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

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

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

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

開始之前

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

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

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

設定網頁文件

若要設定網頁文件：

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

另請參閱：

• 建立文件
• 建立新文件
• 檔案和範本

設計回應式網頁

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

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

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

建立網站線框或結構

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

• 請先設計網站線框，以視覺效果呈現各種畫面元素，然後井然有序地在網頁上置入這些元素。
  秘訣：您可以新增拼貼或卡片，設計輕鬆的導覽方式和具現代感的外觀。

• 建立第一層級的使用者介面後，繼續填入內容和其他美術元素。

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

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

另請參閱：

切片和影像地圖

設計網頁橫幅

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

若要建立網頁橫幅，請執行下列操作：

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

另請參閱：

設計社交媒體橫幅

相關資源

• Adobe Create 雜誌的部落格文章：專為網頁設計人員而生的 Adobe Illustrator
• 教學課程：
  
• • 建立網頁圖形的最佳作法
  • 設計社交媒體橫幅
  • 為您的網站設定搶眼標語
  • 為您的網站設計標誌