CSSer课堂

我们是师徒六人组,以Design, CSS, JS, web标准化为爱好。

User Experience(UE)用户体验

用户体验(User Experience,简称UE)是一种纯主观的在用户使用一个产品(服务)的过程中建立起来的心理感受。因为它是纯主观的,就带有一定的不确定因素。个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲,其用户体验的共性是能够经由良好设计的实验来认识到。

用户体验主要是来自用户和人机界面的交互过程。

在早期的软件设计过程中,人机界面被看做仅仅是一层包裹于功能核心之外的“包装”而没有得到足够的重视。其结果就是对人机界面的开发是独立于功能核心的开发,而且往往是在整个开发过程的尾声部分才开始的。这种方式极大地限制了对人机交互的设计,其结果带有很大的风险性。因为在最后阶段再修改功能核心的设计代价巨大,牺牲人机交互界面便是唯一的出路。

这种带有猜测性和赌博性的开发几乎是难以获得令人满意的用户体验。至于客户服务,从广义上说也是用户体验的一部分,因为它是同产品自身的设计分不开的。客户服务更多的是对人员素质的要求,而已经难以改变已经完成并投入市场的产品了。但是一个好的设计可以减少用户对客户服务的需要,从而减少公司在客户服务方面的投入,也降低由于客户服务质量引发用户流失的机率。

现在流行的设计过程注重以用户为中心。

用户体验的概念从开发的最早期就开始进入整个流程,并贯穿始终。其目的就是保证

  1. 对用户体验有正确的预估
  2. 认识用户的真实期望和目的
  3. 在功能核心还能够以低廉成本加以修改的时候对设计进行修正
  4. 保证功能核心同人机界面之间的协调工作,减少BUG。

具体的实施上,就包括了早期的focus group(焦点小组),contextual interview,和开发过程中的多次usability study(可用性实验),以及后期的user test(用户测试)。在设计–测试–修改这个反复循环的开发流程中,可用性实验为何时出离该循环提供了可量化的指标。

CSS像素图制作攻略

首发蓝色理想WEB标准化专栏
BI帖子对应地址:http://bbs.blueidea.com/viewthread.php?tid=2927758

先看CSS像素图的效果:

提示:你可以先修改部分代码再运行。

对比下像素图的原型
像素青蛙

16X16的像素图,所以使用了如下的命名方法:

r N c N - NN = r[0-15]c[0-15]
(r = rol, c-col, N为自然数:0-15 )

1.命名的规则抄袭了XXX栅格化的那篇文章。

r0c1 即表示:0 横列 1 纵列,也是top跟left的值
NN表示:W H (宽和高)

(觉得最好是使用连字符这样对于10以上的数字,可以直接看出来宽和高的数值,我的这个就不优化了 :P)

2.使用相对定位给个基点,然后使用绝对定位的topleft来控制数值,直接对应rNcN,方便快捷的对应起来。比如:

.r0c8-21{
top:0; /* 对应row的第0行 */
left:8px; /* 对应col的第8列 */
width:2px; /* 对应width的2px */
height:1px;/* 对应height的1px */
background:#000;
}
.r2c0-14{
top:2px;
left:0px;
width:1px;
height:4px;
background:#000;
}

3.使用PS的信息结合坐标方便查找r和c的值
放大的像素图

第 12 页/共 12« 首页...89101112