• 分享

    前端如何提升设计能力

    by on 2013年05月15日

前言

如果你认为设计对于前端来说没有多大用处,那么这篇文章就可以不必往下看了。如果你的设计能力已经不错,那么下面有不足的地方也请指出。虽说做专业的设计师还需要一些装备、工具,如画板、photoshop、Illustrator等,但是我想讲的主要是围绕photoshop来讲,讲一些。作为前端不要求会画矢量图、会画精细的图标元素,但如果你愿意学,那么就更好啦。与前端相关的设计,是我们前端最为关心的也是需要掌握的。当你阅读了下面的内容之后,如果你也对网页设计有所感悟的话,说明这篇文章还是有用的。由于网页设计已经从传统的web设计逐步转变为普通基于PC的网页设计和基于移动端的网页设计。后面我将在一些内容里面进行特别标注。

布局

一、web端设计布局

在讲布局之前,我们必须了解屏幕分辨率的情况,这个对于我们的设计有至关重要的作用。

通过收集的用户数据我们可以得出如下数据:

1) 1024×768, 1440×900, 1366×768, 1280×800 分辨率是大部分客户端的设置;

2) 客户端分辨率总类非常多,不常见的分辨率比例里面占了相当多的种类;

3) 随着硬件的升级换代800×600,1024×600 等600px高度的分辨率在逐步消失。

这告诉我们在进行网页设计的时候,主体内容的宽度要控制在1002px以内。这个1002px是在1024*768分辨率下去除滚动条宽度(大概22px)而来。

有人做过调研,通过对大于30W台客户端用户进行测试,得到用户的viewport(屏幕可视区域)的测试数据如下:

1) viewport 高度低于等于 580 的有 116786 个人,占 44.64%

2) viewport 高度低于等于 720 的有 216227 个人,占 82.64%

3) viewport 高度低于等于 800 的有 241420 个人,占 92.27%

4) viewport 高度低于等于 900 的有 259174 个人,占 99.06%

这告诉我们在进行网页设计的时候,首屏内容的高度要控制在700px左右。我们需要了解,用户的浏览器多数是IE,而IE上是有工具栏,也可能有收藏栏,甚至还有第三方工具条,这些都会导致用户的可视区域高度变小。这个状况我们需要了解,可以帮助我们设计出更好的作品,但不一定非得遵守,这个远远没有前面提到的1002px的宽度重要。

我说一些常见的情况来说明网页设计宽度该如何确定:

1、文字内容为主的

如新闻、资讯、文学等主体内容宽度首选960px,其次980px、1000px、950px、920px、900px,这些宽度其实是很有讲究的,特别是960px,需要进一步了解的请移步神奇的960,需要注意随着低分辨率越来越少,部分网站已经大胆使用1000px的宽度了,如qq.com、duowan.com

下图是当前最新版的网易门户的首页

2、背景可重复的设计

这类设计是比较好的,在主体内容区域外的部分还可以重复显示背景颜色或图片,增强设计效果。

如下图中,中间的这些图片元素是不可重复的需要一个固定显示的区域,但是两边的格子状图是可以作为背景图重复的:

3、背景不可重复的设计

这样的设计可以打破对称形状的常规设计,但是需要慎重,这种设计,目的是为了让用户能看到一个占满屏幕宽度的效果,但是很容易带来的问题就是,用户只能看到中间部分,超出屏幕的内容都是无法看到的,因此超出的部分一定不能有重要信息。也正因为如此,无规则的设计就显得没有多大意义了。

另外,这种做法需要将图片设计得足够宽才能保证在多数分辨率上显示完全,大概1900px,这样做会大大增加图片的大小,对于网络不好的用户来说这真是个噩梦

4、内容区域宽度根据分辨率情况调整的设计

这在web端是需要通过javascript来动态调整的,但是对产品设计以及内容区域的规划都会有影响。

二、移动端的网页设计布局

对于移动端,通常需要设计自适应的布局,不能自适应的那么需要考虑最常见的屏幕宽度的设计320px

如人人网触屏版:

需要特别注意的是,手机端需要考虑高清屏的设计。

在photoshop中进行设计的时候,画布的大小应该为640px宽度,而不是320px,这个是为了兼顾高清屏幕的。但是前端在实现的时候需要通过代码将图片缩小1倍(iPhone4,iPhone5),因为屏幕的实际宽度为320px。我们需要了解这么做的目的,如果你非得了解个究竟的话,请百度“像素密度”。

注意:640px和320px都是适中的数字。有更小的屏幕也有更大的,这个就像我们前面提到的1002px一样的道理。

元素

接下来说一些稍微具体一点的设计观点。我们做一个网页的设计,一定要像我们写css的base样式一样做好规划。在正式动手之前,我们清晰地明白以下信息:

1、页面宽度

2、模块间距

3、主体内容以及各种标题文字字体、大小、颜色、链接颜色、链接是否有下划线、文字行高。

以上信息一旦确定,就最好不要打破规则

一、模块设计

首先,我这里所说的模块是指页面中的相对独立的各功能区域,比如topbar,banner,login area,search area等,这些功能模块大小的设计就需要适当考虑前面提到的700px左右的首屏高度了。另外具体的模块尺寸最好都是偶数大小,模块与模块间的间距最好都统一,如:外间距10px,内间距10px。

很多时候我们最纠结的却是模块的圆角设计以及背景图的设计,因为圆角和背景图的设计在页面制作以及用户访问成本都要付出代价的。跨浏览器的圆角和背景图都是需要图片来实现,除了考虑成本和代价之外,还得考虑是否可以适应内容的变化,特别是区域内信息增多,你的设计是否还能保持。很多设计师不会认真去替用户想,只为着好看,但实际上很多时候却是画蛇添足,将不重要的内容修饰得花里花哨的,所以慎重选择。

对于像“首页”这样结构略微复杂的设计,一般说来主要是考虑到美观和占用比例的合理性就可以了。大部分设计是左右结构的两列式布局,然后在比较宽的一边又可以再分成两列,比如qq.com首页。需要值得一提的是,在移动互联网时代,我们需要适当考虑web网页在手机端的体验情况。比较典型的例子就是一篇资讯文章页面,也就是我们常说的内容页,这种页面通常也是左右结构,左边内容,右边是辅助的推荐的热门的各种信息。在手机端特别是ios中,双击屏幕的时候可以把web页面放大一倍,这个时候我们期望看到的恰好是左边那块的内容。因此这里就需要知道左边这块的内容区域宽度为:640px

二、文字元素设计

先吐槽:很多设计师喜欢随意地使用乱七八糟的字体,这里,你需要明确,你到底是想给前端工程师传达的信息是要让前端将这块文字信息做成图片呢还是做成文字?如果是图片,那么你就需要考虑用户访问成本,否则你就使用下面列出的文字字体。另外见过太多的设计师给文字打上平滑、浑厚、犀利或锐利的效果,这个在网页中是不存在的,也就是说普通文字是做不到这样的效果的。当然如果支持css3的话那么可以模仿成接近的效果。

首先,要明确需要使用的字体,一般需要分别确认中文字体和英文字体,中文字体通常只有两种选择“宋体”和”微软雅黑”,对于普通以阅读信息为主的网站,建议还是使用宋体。部分以宣传推广引导为主的页面设计可以使用微软雅黑。需要知道的一个事实是,部分用户并没有微软雅黑字体,就算有这个字体但是也可能因为屏幕,浏览器的原因导致显示效果非常糟糕。也可以组合使用,主体内容部分使用宋体,一些特殊的标题可以使用微软雅黑。对于英文字体,通常可以选择Arial,Verdana,Times,Helvetica,serif,Tahoma等。其他不常用的中文或者英文字体都需要慎重考虑,因为那些字体在很多用户那里可能都没有安装。

其次,要明确文字的大小,一个网站通常不能只使用一种大小的文字,通常需要三到四中大小的文字,这样才可以体现出主次和层级关系。比如页面中的网站标题名称,可能需要最大,辅标题次之。主体内容的文字大小需要确定好是使用12px还是14px,主流的都是12px,比如人人网、新浪微博都是以12px为主,但是新闻资讯类的已经有部分网站在尝试14px作为主体文字大小了,这样在屏幕分辨率越来越宽的趋势下会使得阅读更容易更有效。

在网页设计中,还需要适当地选择文字加粗,特别是模块的标题文字。

一般说来,禁止使用斜体。

三、图片元素设计

先吐槽:好多设计师都是随意的乱拉图片大小,也从来不考虑尺寸是否为偶数值或者整十整百的问题,以致在代码实现的时候要做一些揪心的处理,但这个不是重要的,重要的是没有经过规划的设计是有很多瑕疵的。

页面中通常都会穿插着各种图片,有普通的图片,也有作为网页设计时所需要的图标元素,形象元素,背景图片,底纹等等,我专门说一下普通图片的处理。图片设计的大小一定不是随便拉大拉小的,是根据网站自身的情况以及比较常见的尺寸来定的。比如人人网上的头像图片是50*50像素的(但不是全部),那么我们在设计的时候就不能自作聪明地去弄个70*70或者55*55的了。没有这种产品层面的限制的话,我们该定多大的尺寸才合适?下面举个例子:

这个是qq.com首页上的一个模块,模块的宽度是1000px。图片的宽度应该定多少才合适,那么我们需要努力做到的事情是:

1、图片宽度高度都是偶数

2、图片与图片之间的间距是个固定值最好也是偶数

3、图片区域与左右两边的距离相等

对于这类设计,模块的宽度是固定不允许改变的,减去左右边框的宽度实际上还剩下998px,接下来就需要优先处理图片的大小了,图片宽度高度为偶数算是个基本原则,然后将5张图片对于摆放上去,此时就可以考虑图片与图片间的间距以及与外框的左右距离的问题,图片与图片的间距在可能的情况下尽量保持偶数,因为这个在css实现的时候可以使用margin:0 14px,即图片左右14px的margin值,是偶数的话才方便计算图片区域左右两边的“箭头”按钮所占用的宽度。

我们的原则:均分

四、可点击元素设计

吐槽:好多人在进行设计的时候都只会考虑到默认的情况,完全不考虑交互情况,想做一个合格的设计师在交互方面也需要考虑很多。

1、链接的颜色要区别普通文字、链接是否需要下划线、鼠标划过的时候链接是否变色,是否需要下划线,是否需要背景色,是否需要显示提示文字(title),链接点击过后是否需要变色等等

2、表单元素在聚焦时的样子,在点击按下时的样子,在鼠标划过时的样子,这些也都需要考虑进去

3、可点击的图片元素在鼠标划过时是否需要有特别的样式,如边框变色,背景变色等

理论上,任何可点击可操作的元素都需要有不同的效果来进行区别,需要重点考虑的是鼠标划过(hover),以及链接的点击过效果(active)

未完—-精彩还在后面…..