显示标签为“google”的博文。显示所有博文
显示标签为“google”的博文。显示所有博文
2009年6月30日星期二

[翻译]界面提示与感知延迟

对一般的用户而言,速度并不意味着性能。用户对网站速度的感知很大程度上取决于其整体感受,包括他们如何高效的从网站获取所需,以及网站反映出来的易响应性。

当设计 Web 站点或 Web 应用时,谨记用户来你的网站是有目的的。他们能越快(越容易)达到他们的访问目的越好。如果用户在获取内容时遇到了许多困难,他们将会离开你的网站,而去能让他们更快达成目标的其他网站。

节省用户时间,让他们感觉没那么慢有很多工作可以做,本文只涉及提示信息。

提示信息,要考虑三点:

  1. 网站是否足够简单和直观,首次访问者是否可以很容易上手?

    如果不是,花些时间去设计首次运行经验(first-run-experience)提示。

    比方说,你的网站是一个拥有数项功能的强大的 Web 应用。鉴于为此类型的应用程序设计一套直观的“开箱即用”(out-of-the-box )体验并不是一项容易的事情,用户可能需要一个入门帮助。

    首次运行经验简单的为用户说明产品是什么以及/或如何使用其亮点。从长远上看,花一点点时间让用户提前了解产品的一些关键点会给他们节省大量时间。

    提示:不要过头!不要阻止用户获取实际内容,这会令首次运行经验变成额外的一步(a cumbersome multi-step process)。

  2. 提示信息是否会中断或增加用户操作?

    仔细考虑如何显示信息会增加用户的操作流程。在不影响用户操作的情况下可能有更合适的方式去显示提示信息。

    想象一个场景,用户完成一个动作,你认为很完美的。你认为需要二次确认(double-checking)的,为了防止用户意外出错。所以你弹出一个提示“你确定这样做吗?”,这阻止了用户的一个大的错误操作,但对于确定要执行这个动作的用户来说,你增加了一个额外的操作。作为替代,你可以运行操作立即执行,同时在操作后增加一个撤消的功能。

  3. 等待时如何让用户静心(reassure)

    面对现实吧,有些时候用户不得不等待。然而,你可以做一些工作使不可避免的等待时间变得比较好度过(bearable)。

    如果用户等待的时间较长,使用进度条。进度条不只表明必须等待,同时粗略的显示要等多久。如果要更详细一点,甚至可以显示已经完成的数据(例如 40kb of 64kb)。尽量避免估算完成时间,因为连接速度波动时,没有什么比看到完成时间一直在增长更郁闷的了。

    当用户等待的时间较短时,可以用 loading 指示器。loading 指示器通常是一个旋转变化的小东东(a spinning doo-dad of sorts),但也可以是很简单的文字"loading"。

    你也许会问,为什么极短的时间也要显示这些?loading 指示器是给用户的反馈:用户的操作已经通过,网站正在执行。没有指示器的话,用户不确定是否执行,从而可能企图再次尝试。

延伸阅读

这些建议只是为用户设计时需铭记的事项中的冰山一角。下面是一些可以让你入门(get you started)的关于交互设计和 Web 设计原则的资料:

2009年6月4日星期四

Google Reader的新功能?

像往常一样使用GR,不过有时会莫名其妙多出一个搜索框,如图:

不过这个表单还用不了,让我们拭目以待!

2009年4月3日星期五

body标签class属性的妙用(Google Reader前端简单分析)

身为greader的重度用户,之前写过stylish,今天来简单分析下其中关于body的一点小技巧。

  1. 区分不同浏览器

    IE6:

    <body class="ie ie6 loaded">

    IE7:

    <body class="ie ie7 loaded">

    IE8:

    <body class="ie ie8 loaded">

    GECKO内核(firefox/flock等):

    <body class="gecko loaded">

    WEBKIT内核(safari/chrome等):

    <body class="webkit loaded">

    以上值通过JS判断当前浏览器后给body的class赋值。

    当然,并不是每种浏览器都利用到了相应的class,部分是预留的,CSS中只用到了以下部分:

    .gecko .goog-inline-block{display:-moz-inline-box;}
    .gecko .goog-inline-block{display:inline-block;}
    .ie6 .goog-inline-block{display:inline;}
    .ie7 .goog-inline-block{display:inline;}

    这段代码是为了实现跨浏览器的display:inline-block,其中只用到了gecko/ie6/ie7这三个class

  2. 布局切换

    当界面隐藏侧边栏时(以firefox为例):

    <body class="gecko loaded lhn-hidden">

    body增加了lhn-hidden的class:

    .lhn-hidden #chrome-lhn-toggle-icon{border-color:#ebeff9 #ebeff9 #ebeff9 #68e;border-width:5px 0 5px 5px;}
    .lhn-hidden #chrome-lhn-toggle:hover #chrome-lhn-toggle-icon{border-left-color:#fff;}
    .lhn-hidden #nav{display:none;}
    .lhn-hidden #chrome{margin-left:0;}
    .lhn-hidden #chrome-title{display:inline;}
    .lhn-hidden #entries .entry-body{max-width:100%!important;}

    通过给body添加/删除class="lhn-hidden"来实现侧边栏的显示隐藏,实现了结构、表现、行为的高度分离!

    用jquery的话则变得更加简单,JS只需以下几句:

    $('#chrome-lhn-toggle').click(function(){
        $('body').toggleClass('lhn-hidden');
    })

    这样书写及维护起来非常方便。

  3. 换肤

    众所周知的GR彩蛋:上上下下左右左右BA,就是通过给 body 增加 class 实现的

    <body class="konami">

    konami 的 css 如下:

    .konami #sub-tree{background:#006f89 url(/reader/ui/1466947354-ninja-sidebar.gif) repeat-y left 0;}
    .konami .lhn-section{background-color:#006f89;}
    .konami .scroll-tree li{background:transparent;}
    .konami .entry .entry-actions .star, .konami .entry .entry-actions .like, .konami .entry .entry-actions .read-state, .konami .entry .entry-actions .broadcast, .konami .entry .entry-actions .broadcast-with-note, .konami .entry .entry-actions .email, .konami .entry .entry-actions .item-link, .konami .entry .entry-actions .tag, .konami .entry .entry-icons .star, .konami .entry-likers-n .number-of-likers{background-image:url(/reader/ui/3207170781-konami-action-icons.png);}
    .konami-like-image{position:absolute;}
    
2009年3月5日星期四

去除Gmail右侧广告/隐藏聊天/隐藏邀请

预览:

安装地址:

http://userstyles.org/styles/15631

最新源码:

/*加大正文字体及行高*/
.ii.gt,.ii.gt *{font-size:14px !important;line-height:1.5 !important}
/*隐藏读信广告*/
table.T1HY1.nH.iY{width:100% !important;}
table.T1HY1.nH.iY td.tELAdc:first-child + td.tELAdc, table.T1HY1.nH.iY td.tELAdc:last-child .VB6tt + div > div:first-child > div:first-child + div,table.T1HY1.nH.iY td.tELAdc:last-child .VB6tt + div > div:first-child > div:last-child{display:none !important}
/*设置快捷操作位置*/
table.T1HY1.nH.iY td.tELAdc:last-child{position:absolute !important;top:-37px !important;right:0 !important;}
table.T1HY1.nH.iY td.tELAdc:last-child .nH{width:auto !important}
table.T1HY1.nH.iY td.tELAdc:last-child .hk{float:right !important;margin-left:1em !important;}
/*隐藏聊天*/
.nH.pz.pA.pX + div + div + div{display: none !important;}
/*隐藏邀请*/
.nH.pz.pA.pX + div + div + div + div{display: none !important;}

源码分析:

Gmail的HTML写的非常之“变态”且没有语义,导致我的选择器也跟着一起“变态”,⊙﹏⊙b汗~~

我们首先来看下Gmail左侧导航的HTML结构(为了方便,将注释写在了title属性中):

<div class="nH nn" style="width:155px;">
<div class="nH">
    <div class="nH pz pA pX" title="撰写邮件" />
    <div class="nH pp" title="收件箱等" />
    <div class="nH pp ps" style="-moz-user-select:none;" title="标签" />
    <div class="nH pp ps" style="" title="聊天" />
    <div class="nH pp ps" title="邀请" />
</div>
</div>

隐藏聊天:

.nH.pz.pA.pX + div + div + div{display: none !important;}

以撰写邮件为基准点,向下查找同级第三个div,将其隐藏。

这里的要点是相邻同胞选择器“+”

隐藏邀请同理。

读信页面的HTML结构如下:

<table cellpadding="0" class="T1HY1 nH iY">
<tr>
 <td class="tELAdc" title="邮件正文"></td>
 <td class="tELAdc" title="间距空白"></td>
 <td class="tELAdc" title="广告单元格">
     <div style="width: 0px;"
class="VB6tt" />
        <div style="width:
189px;" class="nH">            
<div class="nH">                
<div class="nH" title="快捷操作" />                
<div class="nH" title="广告" />                
<div class="nH u8" title="关于这些链接" />            
</div>
     </div>
 </td>
</tr>
</table>

去广告:

table.T1HY1.nH.iY td.tELAdc:last-child .VB6tt + div > div:first-child > div:first-child + div{display:none !important}

先找到该表格的最后一个单元格下的class="VB6tt"的元素,在找同级元素下的第一个div下的第一个div相邻的div(好绕口啊,+_+),将其隐藏。

其余同理....

2009-3-8更新:

  1. 加大正文字体至14px,加大正文行高至1.5
  2. 隐藏聊天

2009-3-7更新:

修复邮件新窗口中打开时正文显示不出来的BUG

2009-3-6更新:

  1. 去除读信页右侧广告
  2. 将读信页右侧快捷操作位置放到邮件与搜索栏之间靠右的位置
  3. 隐藏左侧邀请
2009年3月3日星期二

139邮箱集成Google Reader

下载地址:http://userscripts.org/scripts/show/43488/

友情提示:您需要使用Firefox,并安装Greasemonkey扩展(需重启),之后进入http://userscripts.org/scripts/show/43488/,点 Install 就开始安装了。

配合这个使用更佳:Stylish脚本:Google Reader

2009年2月28日星期六

精简Google Reader

早先为Google Reader写了个Stylish脚本,主要更改了以下地方:

  1. 将左侧导航宽度由260px减小至200px
  2. 隐藏了Logo,搜索框,头部两侧的链接
  3. 将右侧常用按钮与标题栏合二为一
  4. 减少杂色:改变展开模式中未选中项目的边框颜色,改变左侧订阅标题鼠标滑过的背景色
  5. 去除展开模式正文处标题和内容的最大宽度限制
  6. 将展开模式正文的字体增大至14px,行高改为1.5倍行距
  7. 图片显示不了在Firefox中不会有IE中的叉叉标记,于是给图片加了个灰色边框

效果预览:

下载地址:

http://userstyles.org/styles/14058

友情提示:

您需要使用Firefox,并安装Stylish扩展(需重启),之后进入http://userstyles.org/styles/14058,点 Load into Stylish 按钮就开始安装了。