Learning Web Design (I)

现在正式快速吸收一下 WEB 设计的内容,补一下自己的短板,用的是《Head first Web Design》这本书:

一、设计网站的第一步

IA(Information Architecture)

先要搞清楚网站要有什么内容,要用哪些页面将这些信息组织起来;

就像是一个建筑的蓝图,无论如何,先思考做一个页面结构树先;

也就是说:先解决这个问题:有哪些页面,按什么层级显示。

然后,想一想第一层是哪些页面,想一想用什么方式表现“主导航栏”;

主导航栏有横向、纵向两种,又可以有 Tab、按钮、文本链接、菜单栏这几种选择。

各种形式一级导航栏的特点:
  1. 水平 TAB:节省空间;
  2. 水平按钮:看起来比较有“触感”;
  3. 垂直菜单:比较常规传统;
  4. 垂直 TAB:感觉比较像笔记本

想好这个之后就应该动手画一个草图。

先用笔纸或者绘图软件划,确信感觉对了之后,再用 HTML 做一个原型;书中介绍可以截一幅浏览器的图,把里面挖空之后再画进去。

要使得你的网站“可扫视”,一般来说可以用以下的方法强调这些内容:

  1. 突出的 Header;
  2. Introduction 第一段是眼球率比较高的;
  3. 强调内容(例如加粗);
  4. 小段文字比大段文字更容易被阅读;
  5. 带有列表符号(譬如前面带个点)的内容比较容易被阅读;

总结下来,做一个网站开头的几步就是:

  1. Pre-production: 先做 IA 规划,画一个树状的网站内容规划(导航图),决定有哪些页面(内容),以及它们的组织层级;
  2. Navigation: 决定一个导航栏的样式;
  3. Layout: 画一个草图,然后生成一个 html+css 的原型;
  4. Writing: 仔细考量填充的内容,要充分考虑便于用户扫视内容;

当然,这里每一步都是很多工作要做的,但整体来说我们心中要有大概这样一个流程。

二、


【转载请附】愿以此功德,回向 >>

原文链接:https://www.huangwenchao.com.cn/2014/05/web-design-1.html【Learning Web Design (I)】

发表评论

电子邮件地址不会被公开。 必填项已用*标注