十个有效改进网页UI设计的技巧(下)

上篇:十个有效改进网页UI设计的技巧(上)

       6.字符间距
       web页面设计中的排版通常受到很多限制。虽然只有很少的字体可以安全的用于web设计并且可控性很低,但我们仍然可以做一些有价值的事情。除了文本间的行距,我们也可以通过CSS的\”letter-spacing”属性来控制字符间距。
      通常字符间距的设置用于标题文字,对于正文的文本,还是建议采取默认设置,因为对于较小字号的文本,默认设置的可读性是最好的。请看下图示意:
letter_spacing
可以通过如下CSS代码实现:

h1 {  
font-family: Helvetica;  
font-size: 27px;  
}  
h2 {  
font-family: Helvetica;  
font-size: 27px;  
letter-spacing: -1px;  
}  
h3 {  
font-family: Georgia;  
font-size: 24px;  
letter-spacing: 3px;  
font-variant: small-caps;  
font-weight: normal;  

注意:即使只微小的调整几个像素,也会给字符的外观带来很大的变化。

       7.让输入框自动获得焦点
       很多网站都需要提交表单,比如搜索、用户登录等功能都需要一个或多个输入框。如果某个表单是当前页面的主要功能,那么考虑用户体验,就应该在页面载入时将输入焦点自动的置于首个表单项。这样用户就可以直接输入而不需要再使用鼠标点击了。比如大家使用baidu、google都会发现,打开页面后,光标就自动处于了输入框中。
google 
      自动获得焦点可以通过Javascript来实现,当然有很多种具体的实现方法。下面列举一种简单的:

     <body onLoad=”document.forms.form_name.form_field.focus()”>

      同时,表单中需要加入如下代码:  

<form method=”get” name=”form_name” action=”#”>
<input type=”text” name=”form_field” size=”20″ />
<input type=”submit” value=”Go” />
</form>

      现在,当页面载入完成,form_field这个input空间就会自动获得焦点,用户可以直接输入了。
      大头:通常在拥有多个输入框的场合,比如登录需要输入用户名、密码,一些用户习惯通过Tab键来切换输入框,同样为了避免用户需要用鼠标点击来选择输入框,应该注意检查通过Tab键切换的顺序。
                      263 
       上图263邮箱的登录界面,Tab的切换顺序安排就不是很合理。
       本着精益求精的原则,对于输入框还可以进一步优化,比如可以设置on_over事件,当鼠标移到input上时就自动获得焦点,省却了用户“点击”的操作。

      8.自定义输入框
      虽然表单元素的默认样式可以满足绝大多数要求,但我们经常会需要更漂亮或者更个性的输入框,有时也需要统一不同系统、浏览器上的表单样式。一般通过定义input的id、class后,通过CSS控制输入框的外观。代码及效果如下:

input {  
border: 2px solid #888;  
padding: 4px;  
font-size: 1em; 
background-color: #F8F8F8;  

styled_input_field
 有趣的是,通过设置”:focus”,可以设置获得焦点时的input外观,如下图:

input:focus {  
border-color: #000;  
background-color: #FFFE9D;  

input_focused 
    应用input背景后,某些浏览器下input会显示边框,加入代码”outline: none;”即可解决。

      9.鼠标移过的效果
      有些时候要设计一些额外的功能控制,比如说修改、删除按钮,这种类型的元素其实没必要在每个条目上显示。隐藏一些操作元素可以简化页面显示,让用户将精力放在主要内容和功能上。如下图:
twitter_hover_controls
  上图中效果可以通过简单的CSS实现,根本不需要JS。通过父div(移过区域)的hover来定义子div的显示状态:

.message .controls { display: none; }  
.message:hover .controls { display: block; }

      说明:message定义为父DIV的class,controls定义为要隐藏DIV的class,此效果不支持IE6
      对于隐藏内嵌的<DIV>来说,可以有很多方法,比如用margin来将它\”挤\”出页面(例:left-margin:-9999px);将内部文本与背景同色;在上方另外添加一个DIV也很简单。
      如果这种技巧运用得当,可以有效的移除一些不需要重复显示的多余信息,使你的页面看起来简介明了。

       10.需要用户确认时尽量用动词!
       页面设计中经常会有提示用户操作的弹出窗口(或浮动层),改善这时出现的按钮或链接的文字也是很有必要的。通常这种情况下使用的文字多是”确认”、\”取消”、\”是\”、\”否\”等等,用户需要仔细阅读提示内容来选择操作,很多网站都这样,不是吗?
如果我们用动词或动词词组来替代简单的是、否文字,就会减少用户的负担和迟疑,方便他们快速的作出决定。看看下边两个例子:
save_dialogs
     可以看到,使用动词让按钮的意义更加明确,用户不需要阅读提示文字即可作出正确的判断。

十个有效改进网页UI设计的技巧(上)

      大头译自SM,过程中发现 幸福的收藏夹 已经译完了上半部分,感兴趣可到这里看他的版本

      从某种意义上来说,页面设计(web设计)也就是用户界面设计。有许多技巧可以帮助我们制作出漂亮、实用的界面,这里收集的10个小技巧就会对你有所帮助的。这些技巧并不依赖于特定的主题或模板,所以会适用于多数情况下的设计。不罗嗦了,我们开始吧!

      1.改善链接体验
       网页中的文字链接通常标有下划线,表示文字是可以点击的,但可点击区域不会超过字符的宽、高范围。设计类似这种带有超链接的可点击区域的时候,都可以通过一些小技巧来提高可用性,比如:增加间隔,有些情况下甚至可以把链接转换为块元素。如下图,用高亮来区别可点击区域。

padded_links_diagram
       显然,可点击的区域越大,用户点击就容易。在没有指定宽度的时候,将链接转换为块元素,可以使文字链接的可点击区域扩大到为整个容器的宽度,这样的设计尤其适用于侧边栏的链接。这个技巧可以通过如下CSS实现。

a {
 display: block;
 padding: 6px;
 }  

注意:由于转换为块元素只对链接的宽度起作用,所以需要设置间隔(padding)来保证块在纵向的间距。

      2.按钮也需要排版!
      设计的每一个细节失误都有可能把完美的产品变成平庸,比如按钮、Tab这样简单的界面元素,由于用户每天都会点击无数次,也需要适当的进行排版。请看下面一些例子:
 badly_typeset_buttons
    乍看起来上图没有什么问题,仔细观察可以发现,按钮和select的文字都偏上,原因就是将小写字母作为了排版的基准,小写字母居中时,整个文字的位置就会显得偏上。如下图:
button_typeset_1 
      就像上图中,如果按钮上的文字包含大写字母或一些较高的小写字母,如”t,d,f,h,k,l”的时候,文字就会显得偏上。所以,通常应该把大写字母作为定位的基准,或者在小写字母较多时,稍微将文字的位置向上移动。
button_typeset_2 
      上面的文字排版使按钮看起来更舒服,注重像这样的小细节对界面设计大有帮助。
      大头:虽然中文没有大小写字母的问题,但也有很多页面设计时不注重按钮的文字排版,导致错位。

     3.利用对比来控制焦点
      与上面两个技巧类似,我们也可以通过页面元素间的对比来控制用户关注的焦点。下面的例子关于文章标题与日期、作者等信息之间利用对比突出重点的例子。
headline1
    上图中所有文本都是黑色,让我们试着来调整一下日期和作者文字的颜色看看
headline2
      文章标题的对比度最高(颜色最重),所以感觉凸显出来。同时,通过对比度的不同,将作者与日期也体现了区别。相比于字体、字号的设置,对比度(颜色深浅)更能凸显出不同。下面让我们改变一下对比度高低的顺序:
headline3
       可以看到不同的对比度设置会有明显的效果,上图这种效果可能会用在一些显示大量信息的场合,如blog、论坛或SNS网站。凸显某些信息可以让用户快速的浏览、找到自己所需的内容。大头:我能想到的比如搜索结果页,将搜索条件突出显示可能会好些。

       4.利用颜色来引起注意
       当然,颜色的不同也可以有效地吸引用户对重要及可操作元素的注意力。举例来说,在前段时间美国总统候选人提名期间,很多候选人的页面上都有红色的“捐助”按钮,在页面整体是蓝色或其他冷色调的时候,鲜明的红色能够很有效的吸引访客的注意力。
       像红、黄、橙等暖色调,天生就有较强的吸引眼球的能力,而且这种能力在对比蓝、绿等冷色调时就更为突出。有趣的是,这种差别会让人产生空间上的想象,比如蓝色背景上的橙色按钮会给人凸起的感觉,相反情况下会给人凹陷的感觉,详见下图:
colors 
  大头:由于国内应用深色背景的网站较少,下面挑选一些大家熟悉的例子来展示一下颜色的应用。同时通过颜色区别来吸引用户注意也不必拘泥于冷、暖色调的对比。
douban 
  上图中:豆瓣首页的"马上注册"按钮,以及登录区域都用粉色重点表示,由于豆瓣采用白色背景,所以淡淡的粉色也能起到突出的作用。
xiami 
     对于上线不久的
虾米,凸显导航、\”了解更多”以及”软件下载”都有明确目的。
    
需要注意的是,尽量避免利用颜色凸显过多的元素,这样反而会让用户无所适从。

       5.空白-不仅仅用来分隔
       内容元素之间的空白也是设计中需要注意的问题之一,比如像按钮、导航条、文章内容、标题等等元素之间的空白都有必要关注。有效地利用空白,我们可以明确的表现出页面元素之间的关系。
       举例来说,标题与内容相近可以表示之间的所属关系,但文字内容与其他元素有一定距离会方便阅读。请看下面的例子:
bad_whitespace
       上面的图例看起来没什么问题,但仔细看可以发现,每个标题上下的空白是相等的,这样就没有明显的区分每部分内容。我们可以通过调整段落间的距离或段落中的行距来解决这个问题:
good_whitespace
       上图是否变得更清楚些?好的设计师通常会眯着眼或从远处来看看自己的作品,这样会有效的发现内容显示是否清楚的问题。大头:本篇博客也很好的做到了这一点:)
         
          继续阅读,后半部分更精彩

网站策划和5W2H

转自xiaoxiao的博客
有一些感想,稍后再说。。。

先给出一个概念:5W2H。 什么是5W2H,看这里 http://zhidao.baidu.com/question/604273.html

  这两天比较忙,Alpha说这两天为什么没有新的Blog出现,刚好在一个同事谈到网站策划。于是想起来可以用5W2H的方法来描述一下网站策划和一些即将从事或已经是策划人员的朋友分享一些个人经验。

  先看下
  1) WHY 为什么?为什么会有网站策划,为什么要做网站策划。这里先提一下产品策划(或产品经理),互联网本身有很多产品,比如:Live在线;Delicous;Flickr;Imop;inout;再近一些,比如蓝色的城面城市,数码频道,Page。这些产品本身一开始被定义出来的时候并不是体现在网站上,而是在整体的规划和对市场的把控上。而策划人员在接到产品的时候,需要把产品经理的产品来表现到网站上,而最终达到盈利的目地。为什么有网站策划,实际上是策划产品在页面上的体现。

  2) WHAT 是什么?策划人员在拿到产品的方案时,首先要明白这个产品到底是什么。很多人可能会一拿到方案就开始做,这个应该是错误的。余世维举了个例子,拿出一张纸,对所有人说,把你们面前的纸给撕了。。话没说完,有人开始撕,横着、竖着,什么样的都有。这个时候又说话了:请把你们的纸从下往上,45度的撕成两半。这个例子简单,说明了人和人的理解会有不同,不同的人有不同的想法,至于方案就更不能这样。积极的沟通和交流,是策划人员和产品人员这个时候要做的重要一步。

  3) WHERE 从哪里着手? 沟通到了深入的一步的时候,应该把握产品的重点方向是什么,何时开始或准备盈利。(当然影响这些的因素有很多,比如渠道等。)了解这些东西,可以开始着手重点的表现层的东西,也就是说可以开始网站的流程上的思考了。这个时候大都是这么开始,从个人的经验上来看,人的因素占了很多,所以进行到Where的时候要了解具体哪个人负责哪件事,做好下一步的沟通准备。

  4) WHEN 何时?什么时间完成?什么时机最适宜? 我想针对于网站策划,什么时候完成似乎变得不重要了。什么时候是死线往往成了最重要的时间。我列出来一些网站策划要考虑的几个关健时间:何时开始、何时进行原型设计,何时进行讨论,何时完成设计稿,何时开始制作,何时开始开发,何时开始联调,何时进行测试,何时进行发布。

  5) WHO 谁? 其实这个部分从一开始就应该考虑到,涉及网站的相关有多少人,每个人都是什么类型。有的设计师比较有经验,不用讲太多就能明白你想要的效果;有的不喜欢产品,确能很按时的完成任务;有的产品经理不是太懂,确能对产品付起责任。每个人都是不同,针对不同的人要多沟通,多了解对方总有好处。看一下合作成功的两个公司的领导或相处很好的朋友,总能笑西西的一起吃饭喝酒。

  6) HOW 如何去做? 网站策划不是口头表达,总有一定的规律性和可操作的流程。写好一份完整的网站策划书实在不简单。我想谈的有几个关健点。一是简述产品的概念和要达到的目的,让相关人士进行初步了解;二、规定好时间段,特别是Deadline,把项目的执行力体现在时间段上;三、规划好网站的布局,从二级开始到一级;从流程到整体,让项目人员完全了解网站的概况及操作;四、描述产品定位给网站所要求的风格,这个时候可以给设计师一些参考的元素,设计师对理性的东西往往不是太重视,给他们感性的元素会很快的上手网站设计;五、网站的内容是什么,要确定下来,此时的定义对于网站上线后的测试和修改都相当重要,如果一个产品上线后还改来改去,用户不知道会烦到什么程度。

  7) HOW MUCH 在这里我想谈一下质量控制。有次工作中上线后出现了一个错别字,查到最后,原来是产品经理打错了一个字。追其过程,策划人员拿到文案,然后Copy到策划书里,然后交于设计师,设计师再Copy,再交于制作人员,再交于开发,再交于测试,再交于上传。完了,整个过程没有一个人看到这个错别字。日本人在这里做的非常好,由西方提出来的质量管理他们延伸到全面质量管理\\\”Total Quality Management”. 我并不在于夸日本人,而是全面质量管理确实有利于网站策划人员,用TQM的思想来把控网站的质量问题。如果是这样,那么测试人员是不是要下岗了?

  总的来说,网站策划不是一项轻松的工作,与人要沟通,要了解整个产品,身上背着运营压力。本文总结了我个人的一些经验和理解,难免有失误或不正确的地方,欢迎各位来此交流。