当前位置:首页 >> 网页制作

网页设计中的细节分析详谈

在设计的工作中,很多时候会听到参加评审的设计师或者是某些领导说,这设计稿细节不够啊。设计师有时就会很委屈:"我都已经细化到像素级别了啊,为什么还说细节不够呢?什么是细节呢?"这篇文章,结合一个具体的示例来描述下我对设计细节的理解。
  先说下设计细节具体是什么。其实这是一个很广义的概念,一个设计作品如果成功,细节方面一定是到位的,但是细节不仅仅是指细小的东西,比如说像素级别的对齐,到位等等,还包括:这里如果不用这种形式,稍微加点纹理或者质感会不会更好,与整体是否协调,光影关系是否与整个图标或者整个界面一致等等。
  在抠设计的细节的时候,一定要戒骄戒躁,即使是很小的一个点上,也需要多思考,如何让这个点更符合整个设计作品的气质,确定之后再去动手去实现。而不要说因为需要做的事情很小,而且没什么技术难度,就直接去几下画完,然后再一次次的评审中去修改,这样花的时间很有可能更多,而且达不到想要的效果。那接下来就以一个具体的设计案例去具体讲述下什么是设计的细节,以及在设计的过程中如何去把设计的细节做好。
  有一个需求是这样的,界面上有一个弹出框,如图1:
网页设计中的细节分析详谈
  图1 设计原稿
  为了适应产品的新特性,我们需要在这个弹出框上加一个小的抓手,可以拖拽这个弹出框,需要设计侧给这个弹出框加一点修饰,让它看起来是可以拖拽的。
  需求其实很简单,而且有很多现成的例子可以参考。如果是一个稍微有些经验的设计师,基本上就不需要再找什么参考就可以直接几分钟画出一个抓手。这里为了说明整个设计需求的流程,找了些参考图,如图2。
网页设计中的细节分析详谈
  图2 抓手参考
  对比现有的比较成熟的软件,大家的做法就是把可以抓取的部分加入凹凸的颗粒,看起来好像摩擦力很大的样子,这样来示意这个区域是可以抓住拖动的。所以我们沿用这个规则就可以了,由于我们需要做的需求中可以拖拽的部分是边而不是角,所以可以加入横线的方式来做。好,我们来细化到像素级别来完成这个需求吧J
网页设计中的细节分析详谈
  图3 设计效果图
  设计稿很快就出来了,我们还可以放大看下细节。
网页设计中的细节分析详谈
  图4 设计效果图放大400%效果
  能够很明显的看出来,这个是用铅笔画了3个像素的线,然后加了投影,我们再放大些看看。
网页设计中的细节分析详谈
  图5 放大1600%的效果
  现在已经很细节了吧?在三个像素高度的图形上加入了高光,阴影还有过度,这个细节是不是已经做的很好了呢?呃,从放大图上来看,好像,没什么问题,但是,这个时候我们回过头来看看整个界面,忽然觉得有那么一点"缺少细节",这…什么情况…
  我们明明已经是细化到像素级别了,为什么还有些不安呢?仔细思考下,大概是这样的:这个界面的元素都是圆润的,包括投影,边角都是一点点过度的,而我们的抓手部分却是用像素直接一点点画出来的,所以,气质上本身就有点问题。但是,三个像素的高度上,我们可以做出圆润的感觉吗?实际上,你可以的。
  先仔细思考下怎么做会更好一点。因为这个需求属于延续设计,所以需要先揣摩现有界面的设计思路。界面属于拟物风格,上侧稍微有点翘起,所以上边缘有一个像素的高光,然后是自阴影,圆角也是很明显的。所以我们需要做的,应该是一个拟物化的,圆润的抓手。为了让抓手区域更明显一点,我们甚至可以加入一点底色。
  好,先看下完成稿。
网页设计中的细节分析详谈
  图6 设计定稿
  现在看起来比较靠谱了,然后我们来看下"细节"实现。
网页设计中的细节分析详谈
  图7 400%放大效果图
网页设计中的细节分析详谈
  图8 每个元素的实现示意
  其实在第一稿上,大部分的东西我们都注意到了,只是再深入细化了一下,用路径来勾勒圆润的角度,用photoshop图层样式中的斜面浮雕,内发光来模拟凸起物本身的质感,而不是用一条条像素点来生硬的勾勒。高光层做了细化,中间亮,两边暗一点。投影也用了投影和外发光两层来模拟更真实一点的投影效果。至于新添加的底色,因为是贴在界面上的,所以需要顺应界面本身的质感,顶层有一个像素的高光,然后是区域内阴影等等。
  到这里,这个界面细节优化就差不多了。总结起来,所谓细节,一个层面是指,这个设计作品上,像素级的东西有没有用心去做,另一个层面,细化到像素级别之后,回过头来看看,细化完的部分跟整个作品是否气质统一。在这两个层面上,第二个层面其实会更重要一点,但是往往会被忽略掉。设计师在做一个作品的时候,需要时刻注意,细节与整体的关系,细节是为整体服务的,所以需要在理解整体的基础上再去深化细节部分。
  以上是我个人对设计细节的理解,有什么意见或者建议欢迎大家一起讨论