设计网站元素

想要学习设计清爽的网站布局和元素的技巧?您来对地方了!

Adobe Illustrator 提供了一个完美的像素级设计环境,您可以在其中创建灵活且流畅的 Web 元素。它为您提供了创建清爽利落的 Web 布局所需的一切,包括矢量图形、响应式媒体图标、可伸缩组件、CSS 生成、SVG 导出、线框以及可重复使用的符号。

网站设计

值得一用

Adobe XD – Adobe 最新推出的基于矢量的一体式 UX/UI 解决方案,可用于设计网站、移动设备应用程序等。

获得完美 Web 布局的五大原则

要创建优质 Web 体验,请特别注意以下 Web 设计元素:

  • 用尽量少的点击操作即可实现轻松导航
  • 均衡使用屏幕空间,优化不受设备影响的显示效果
  • 保持结构的简洁,数量最少 - 使用网格、拼贴、卡片
  • 创建有吸引力、有参与感的视觉图形
  • 确保排版清晰美观

开始之前

您在 Illustrator 中设计的任何图稿通常都围绕以下设计主题展开:

  • 形状和路径
  • 颜色和图案
  • 文本和字体
  • 图像和特殊效果

想要了解更多信息?请参阅网站的基本组件

设置 Web 文档

要设置 Web 文档,请执行以下操作:

  • 选择文件 > 打开。在“新建文档”对话框中,单击 Web 选项卡。从预设列表中,选择符合要求的 Web 文档类型。
  • 预览和下载示例模板。 
选择 Web 文档
选择 Web 文档

设计响应式网页

随着技术的不断发展,在设计网站时非常重要的一点是,无论任何操作系统平台、屏幕大小和设备方向,网站都能无缝响应。

要创建响应式 Web 布局,请考虑以下要素:

  • 灵活的网格和布局,设计可调整为任意屏幕宽度的网站布局,例如台式机、平板电脑、移动设备的屏幕宽度。
  • 可缩放媒体,包括图像、视频和类似格式。
  • 动态媒体查询,可以针对 Web 浏览器和设备添加特定样式。

创建网站线框或结构

简洁有序的网站可吸引更多访客。在您设计网站布局时:

  • 从设计网站线框着手,呈现不同的屏幕元素并将它们有序地放置在您的网页上。
    提示:您可以添加拼贴或卡片以便导航更加轻松,并让外观更加新颖,符合当前设计趋势。
  • 创建第一级用户界面后,请继续填充内容和其他艺术元素。
网站结构
用于不同屏幕的网站模板

编排网页布局的提示和技巧

  • 为获取更加顺畅的观感,可以将网站切分为几个相关部分。选择对象切片
  • 使用标尺、网格和参考线,检查和测试参考区域并调整屏幕元素。
    • 选择视图 - 参考线
    • 选择视图显示网格
    • 选择视图 – 标尺
  • 要创建精确的视觉轮廓,请在网页上放置矩形对象或文本组件,以便将屏幕分为几个相关的部分。
  • 当您专注于网页的主要内容时,请不要忘记根据您自己的需求,添加创意徽标、鼓舞人心的主题图像、标语、使命陈述等内容。
  • 要存储网站结构,请选择导出 - 存储为 Web 所用格式(旧版)。您也可以选择要显示在已存储文件中的切片。

另请参阅:

切片和图像映射

设计 Web 横幅

要开展营销活动以在您的网站上促销和宣传产品或服务?几分钟之内即可制作一条引人注目的横幅!

要制作 Web 横幅,请执行以下操作:

  • 选择合适的文档大小,通常 A4 文档比较适合横幅。
  • 借助“矩形”工具创建横幅轮廓,并指定适当的尺寸。
  • 添加图形、文本、渐变,并根据需要发挥创意。
Web 横幅

另请参阅:

设计社交媒体横幅

相关资源

Adobe 徽标

登录到您的帐户