设计网站外观
本节主要讨论:编写代码之前如何做好计划和设计工作。包括:“网页要提供什么信息?”、“要用什么字体和颜色?”、“网页是用来做什么的?”。
第一步:做出计划
做任何事之前都需要一些想法。你的网站要达到哪种目的?任何 1 个网站均具备基本作用,但首先你应该保持简单。我们要先写出包含了标题、图像,以及数段文字的简单网页。
开始之前,请考虑以下问题:
- 网站的主题是什么?是狗、上海城市还是吃豆人?
- 基于所选主题要展示哪些信息?写下标题和几段文字,构思一个用于展示的图形。
- 网站采用怎样的外观?用高阶术语说就是,选什么背景色?什么字体(正式的还卡通的,粗体还是细体)?
注:复杂项目需要更详细的指引,包括颜色、字体、间距、编写规范等等。亦称为设计指南、设计系统、品牌手册,参见: FireFox Photon Design System 。
绘制草图
接下来,拿出纸笔画出网站草图。虽然第一个简单网页能做的不多,但最好在一开始就该养成这样的习惯。画草图很有用,而且并不需要梵高的手法。
注:即使在现实的复杂网站中,设计团队也是首先在纸上画出草稿,然后在图形编辑器中或者使用 Web 技术作出数码模型。
Web 团队通常包括一个图形设计师和 用户体验设计师 。图形设计师的作用很明显是将网页视觉部分组合在一起。用户体验设计师则以一种更抽象的模式来定义用户的浏览和交互。
选定内容
此时可以开始组织网页上的内容了。
文本
准备好刚才撰写的标题和文字。
主题颜色
打开 色彩选择器 挑选心仪的颜色。选中某种颜色时,你会看到一个六位神秘代码,类似于 #660066
。它是一个十六进制数,用于表示颜色。将其复制并暂存。
图像
访问 Google 图片搜索 来搜索合适的图片。
- 找到心仪的图片时,单击放大。
- 右击图片(Mac 用 Control + 点击),选择 “另存图像为...”,然后选择一个安全的位置存放这张图像。也可以复制你的浏览器地址栏上的图像地址以便后来使用。
请注意大多数网络图片(包括 Google 图片)都是受版权保护的。为了降低盗版风险,可以使用“Google 许可证过滤器”。点击“工具”按钮,然后在使用权限的选项下选择类似“标记为可再利用”的选项:
字体
要选择一种字体:
- 访问 Google Fonts 。打开右侧边栏可现实选中的字体家族。
- 可通过 Categories(类别)、Languages(语言)、Font Properties(字体属性)过滤想要的字体。
- 在列出的字体风格列表中,选择合适的粗细、是否倾斜等信息。
- 在右侧边栏中可以看到 Google 给出的代码片段,将其复制到文本编辑器就可以使用了。
译注:若无法访问 Google Fonts,可参考 阿里字体素材平台。