网络编程
位置:首页>> 网络编程>> 网页设计>> 5个有效改进网页UI设计的技巧(2)

5个有效改进网页UI设计的技巧(2)

 来源:801锅胆 发布时间:2008-12-19 12:04:00 

标签:用户体验,ui,设计,技巧

       4.利用颜色来引起注意
       当然,颜色的不同也可以有效地吸引用户对重要及可操作元素的注意力。举例来说,在前段时间美国总统候选人提名期间,很多候选人的页面上都有红色的“捐助”按钮,在页面整体是蓝色或其他冷色调的时候,鲜明的红色能够很有效的吸引访客的注意力。
       像红、黄、橙等暖色调,天生就有较强的吸引眼球的能力,而且这种能力在对比蓝、绿等冷色调时就更为突出。有趣的是,这种差别会让人产生空间上的想象,比如蓝色背景上的橙色按钮会给人凸起的感觉,相反情况下会给人凹陷的感觉,详见下图:

  大头:由于国内应用深色背景的网站较少,下面挑选一些大家熟悉的例子来展示一下颜色的应用。同时通过颜色区别来吸引用户注意也不必拘泥于冷、暖色调的对比。

  上图中:豆瓣首页的"马上注册"按钮,以及登录区域都用粉色重点表示,由于豆瓣采用白色背景,所以淡淡的粉色也能起到突出的作用。

     对于上线不久的
虾米,凸显导航、.了解更多”以及”软件下载”都有明确目的。
    
需要注意的是,尽量避免利用颜色凸显过多的元素,这样反而会让用户无所适从。

       5.空白-不仅仅用来分隔
       内容元素之间的空白也是设计中需要注意的问题之一,比如像按钮、导航条、文章内容、标题等等元素之间的空白都有必要关注。有效地利用空白,我们可以明确的表现出页面元素之间的关系。
       举例来说,标题与内容相近可以表示之间的所属关系,但文字内容与其他元素有一定距离会方便阅读。请看下面的例子:

       上面的图例看起来没什么问题,但仔细看可以发现,每个标题上下的空白是相等的,这样就没有明显的区分每部分内容。我们可以通过调整段落间的距离或段落中的行距来解决这个问题:

       上图是否变得更清楚些?好的设计师通常会眯着眼或从远处来看看自己的作品,这样会有效的发现内容显示是否清楚的问题。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com