![成功案例](https://linxingbaozhuang.oss-cn-guangzhou.aliyuncs.com/upload/admin/20210806/202108061656226821.png)
![策划阶段](http://www.wintour.net.cn/public/uploads/pull_images/e7633c5bda5d1af9e8710ef6764dedb0.jpeg)
策划阶段
我在准备制作这个网站时,其核心就是以“平面设计自学者的福音”为宗旨,希望解决初学者自学平面设计时需要的资源难题。所以就策划了职业路径、设计教程、设计书籍几个主要栏目,这是学习平面设计补给知识最为迫切的三个需求。
![交互设计](http://www.wintour.net.cn/public/uploads/pull_images/c2719ee7215c260353ea3a25261ca232.jpeg)
交互设计
网站的交互设计,整体结构相对简洁明了,层级结构最多三级。没有什么华丽的特效,但是唯一定要确保:鼠标滑过时一定要有明确的反馈,以告诉读者你正在经历什么。
![视觉设计阶段——这是由网页设计师为主导的环节。](http://www.wintour.net.cn/public/uploads/pull_images/f1805a607aa54c2c158e9dca5d1f5826.png)
视觉设计阶段——这是由网页设计师为主导的环节。
我在设计这个网站时,主题色选用了纯度和亮度都比较高的蓝色(#0f88eb),希望用蓝色寓意设计知识的理性,同时蓝色也是我个人比较喜欢的色彩,所以选用了它作为主色调。
![【A色彩】](http://www.wintour.net.cn/public/uploads/pull_images/df0492bbbbab915093b19a6c6e79c056.jpeg)
【A色彩】
我在设计这个网站时,主题色选用了纯度和亮度都比较高的蓝色(#0f88eb),希望用蓝色寓意设计知识的理性,同时蓝色也是我个人比较喜欢的色彩,所以选用了它作为主色调。
![【B字体】](http://www.wintour.net.cn/public/uploads/pull_images/d8e186632b59e8d1ac7dfdc22ad1cf71.jpeg)
【B字体】
全局字体选用的是最常见的微软雅黑(备选:宋体),因为大家电脑都有,选用这两款字体不会出太大差错。
![【C完善设计稿】](http://www.wintour.net.cn/public/uploads/pull_images/c8ddf5e173aafb6edd2f0fc228aa60cf.jpeg)
【C完善设计稿】
在确定了色彩、字体的规范后,接下来最重要的就是,沿用这样的规范重复执行下去。并逐步细化到字体的行间距(line-height)、字间距(letter-spacing)的调整上。期间有不妥的预设可以适当修改,但是类似的页面之间一定要有相同的规范,确保视觉的统一。
![【D关于动效】](http://www.wintour.net.cn/public/uploads/pull_images/ba405bbb105d627ffbe6610853cda4dc.jpeg)
【D关于动效】
动效这玩意,主要是用作优化页面阅读体验的,适可而止、越简单越好。一些个性化的页面可以适当炫酷一点,但主要的内容呈现页面还是越朴素越好。
![前端制作](http://www.wintour.net.cn/public/uploads/pull_images/d854a07079facea87a38d103fba6e9ea.jpeg)
前端制作
我敲起代码来,可真是龟速那种,我用一周的时间,完成了前面的策划设计工作,用了两周敲完所有页面的代码。这个过程就是反复输入、测试,然后IE、Google、火狐这三个主流的浏览器,也要测试一遍,确保没太大差异就可放心了。