建站常识
向细节挖掘灵感:网站设计剖析
2005-12-28 13:59:00
这是一个不受形式拘束自由发挥的设计，最初寻找创作的灵感的阶段最折磨人。一般这个时候，我会看看网站、听听歌，一个人静静地期待火花闪过的那一刹那，然后捕捉住它。
面对着空白的工作区，我习惯马上添加点什么，即使是乱画也好，我觉得由小到大，从细节到宏观也是个设计的好办法，特别是在这个宏观无迹可循的情况下。如果要做传统的三栏式的页面，那就是宏观已经定好了，页面的亮点应该就是对于细节的描画了。我把背景改成比较深点的灰色，再拉出两条辅助线夹出760px的主页面区域，并且填充了白色。其实这个作品右上角的几个按钮是我在之前在其他设计中制作好的。我很早的把它添加到这个设计中，就是想让这个既成的细节元素带动我整个的设计过程。事实证明，它的加入，确实比一片空白更加能带动我的思维。所以我想现在平面设计中流行的箭头，小十字，六边形等元素的意义应该不止于装饰而已！
在不断的乱画的过程中，终于诞生了第一个我比较满意的版本。在颜色的选择上，我不敢做大胆的尝试：对于这种企业类的网站，应该是蓝色会比较顺眼。而在蓝色的选择上，我考虑到灰色区域的存在，于是参考了RealOne Player的配色。这种配色比较亮，搭上我的深灰色背景，应该会是不错的选择。其实颜色应该算是我的弱项之一，到目前为止，在这种情况下，借鉴好的配色方案既是解决之道也是一种学习方法。 （图片均可点击放大 ）
整体差不多已经完成了，接下来是刻画细节的时间。其实我认为细节刻画是个很重要的步骤，它既可以让一张大众脸变得与众不同，当然也可以使个性变得更丰满。
中间的那幅图片颜色不是很顺眼，在上面加了一个蓝色图层，改图层混合模式为Color。这是个比较方便的方法，不喜欢可以很快的改回来。当然也可以用调整图层，不过个人觉得不是很容易调节。再把那些比较刺眼的橙色改掉，这样页面又不够生动，没有了焦点。于是又添上了橙色的“FC”，并制作了投影。整体看上去已经比较丰富了。这个阶段一个不断尝试的过程，主要原则是丰富视觉。比较忌讳的是细节抢走了视觉的焦点，所以要时刻记住应该突出什么部分。
再经过最后的修改，作品已基本成型。
把PS设计稿转成网页，再看一看，整体还缺乏一些动感，加上一个Flash是个不错的选择。这里我用了透明背景的Flash，因为那个部分的背景和之下的背景是一体的，这样可以免去要对齐背景带来的麻烦。
至此，这个作品算是完成了，这里可以看完整的页面。
对于这种“自由发挥”的设计，我倾向于从小处搜寻灵感，进而设计出整体，最后再进行小处刻画。这个时候，最初的细节如果不合整体，完全可以弃之不用，这就是我的设计主线，希望大家能从我的这篇文章里收获一些东西。
面对着空白的工作区，我习惯马上添加点什么，即使是乱画也好，我觉得由小到大，从细节到宏观也是个设计的好办法，特别是在这个宏观无迹可循的情况下。如果要做传统的三栏式的页面，那就是宏观已经定好了，页面的亮点应该就是对于细节的描画了。我把背景改成比较深点的灰色，再拉出两条辅助线夹出760px的主页面区域，并且填充了白色。其实这个作品右上角的几个按钮是我在之前在其他设计中制作好的。我很早的把它添加到这个设计中，就是想让这个既成的细节元素带动我整个的设计过程。事实证明，它的加入，确实比一片空白更加能带动我的思维。所以我想现在平面设计中流行的箭头，小十字，六边形等元素的意义应该不止于装饰而已！
在不断的乱画的过程中，终于诞生了第一个我比较满意的版本。在颜色的选择上，我不敢做大胆的尝试：对于这种企业类的网站，应该是蓝色会比较顺眼。而在蓝色的选择上，我考虑到灰色区域的存在，于是参考了RealOne Player的配色。这种配色比较亮，搭上我的深灰色背景，应该会是不错的选择。其实颜色应该算是我的弱项之一，到目前为止，在这种情况下，借鉴好的配色方案既是解决之道也是一种学习方法。 （图片均可点击放大 ）
整体差不多已经完成了，接下来是刻画细节的时间。其实我认为细节刻画是个很重要的步骤，它既可以让一张大众脸变得与众不同，当然也可以使个性变得更丰满。
中间的那幅图片颜色不是很顺眼，在上面加了一个蓝色图层，改图层混合模式为Color。这是个比较方便的方法，不喜欢可以很快的改回来。当然也可以用调整图层，不过个人觉得不是很容易调节。再把那些比较刺眼的橙色改掉，这样页面又不够生动，没有了焦点。于是又添上了橙色的“FC”，并制作了投影。整体看上去已经比较丰富了。这个阶段一个不断尝试的过程，主要原则是丰富视觉。比较忌讳的是细节抢走了视觉的焦点，所以要时刻记住应该突出什么部分。
再经过最后的修改，作品已基本成型。
把PS设计稿转成网页，再看一看，整体还缺乏一些动感，加上一个Flash是个不错的选择。这里我用了透明背景的Flash，因为那个部分的背景和之下的背景是一体的，这样可以免去要对齐背景带来的麻烦。
至此，这个作品算是完成了，这里可以看完整的页面。
对于这种“自由发挥”的设计，我倾向于从小处搜寻灵感，进而设计出整体，最后再进行小处刻画。这个时候，最初的细节如果不合整体，完全可以弃之不用，这就是我的设计主线，希望大家能从我的这篇文章里收获一些东西。
上一篇：网页编辑常用表现的实现方法
下一篇：网页制作之“事不过三”
近期更新
- [2025-02-11 14:34:54] 青岛品牌网站定制化设计
- [2023-06-25 23:22:29] 优秀网站设计的五大特点
- [2023-04-27 14:05:55] Html 5 响应式网站设计制作
- [2023-04-10 11:07:30] 网站建设制作流程知多少
- [2022-10-14 10:11:30] 做网站设计应该更看重框架搭建还是视觉观感？
- [2022-08-09 15:57:48] 以“产品”思维搭建网站！
- [2022-08-08 09:12:57] 一家公司的网站应该有哪些板块内容？
- [2022-08-05 09:28:06] 企业网站建设为什么要设置新闻板块？
- [2022-07-04 15:58:06] 网站首页设计的好看，这个网站就成功了一大半！
- [2022-05-20 09:34:19] 网站后台管理系统是什么？有什么作用？
- [2022-05-17 11:29:32] 作为消费者，应该如何选择一家水平高的网站建设公司
- [2022-05-17 11:27:01] 品牌网站定制与模板化网站应该怎么选择？
延伸阅读
- [2007-07-11 22:23:00] 韩国在线配******页
- [2010-12-17 08:28:00] 关于WEB登录注册系统的下午茶
- [2007-11-12 22:11:00] 产品初期的用户群划分
- [2009-05-05 09:57:00] 当设计师遇上前端开发
- [2007-05-15 16:23:00] 网页信息的表现类型和常见的排版方式
- [2010-11-15 08:26:00] 读设计看需求
- [2009-10-11 22:29:00] 让复杂变为清晰
- [2006-01-08 20:59:00] 菜鸟创建优秀网页的6个好习惯
- [2007-03-26 09:48:00] 注册/登录方式
- [2020-11-25 15:03:59] 青岛网站建设时如何选择图片？
- [2009-12-04 08:23:00] 轻设计，让网站灵敏轻便的6个技巧
- [2011-01-10 17:17:00] 网站“注册流程”如何“照顾用户”？
