小猪的博客

用户体验,网页设计,前端开发,网站制作,CSS,ajax

五月 30th, 2011

浅析用户体验评估标准的建立

No Comments, 用户体验, by 小猪.


正如其名称所示,用户体验是一种纯主观的心理感受,存在着许多不确定因素和个体差异,想要精确地评估用户体验是一件不容易的事情

之所以不容易,是因为:

1. 缺乏关于用户体验的标准

1) 关于用户体验的定义,目前始终飘浮在理论层面,缺乏明确的评估标准。
2) 不同产品对用户体验构成因素的侧重点也不同。

2.缺乏有效地评估方法

1) 实验存在不确定因素,用户存在个体差异。
2) 大样本量的评估测试成本较高。

因此,为了能够精确评估用户体验, 评估标准的创建应该注重实用性和可操作性,遵循以下几个原则:

1) 所有评估标准均可量化,能够提供详细的评估数据。
2) 评估标准是可以被实实在在测量和观察的,并且可再现。
3) 评估标准可以按照周期进行复查,验证特定期限内的改善情况。
4) 评估标准应当具备较好的结构效度。

目前对评估标准的研究可以划分为两大类:关注内容的评估标准和关注用户的评估标准。

关注内容的指标体系

如Nielsen提出的4个新的可用性参数,即导航、响应时间、可信度(Credibility)和内容。此外,Agarwal和Venkatesh提出针对网站可用性评价的微软可用性准则(Microsoft Usability Guidelines,MUG),其指标体系中包含5个维度:易用性、针对中等用户(Made for the Medium)、情感、内容和促动性(Promotion)。

受此影响,很多研究者提出了相似的观点,如Turner将可用性分为导航、网页设计、内容、可存取性、多媒体使用、互动性和一致性。部分学者还通过各种实证研究进一步分析了各项网站可用性指标的重要性。如Monideepa Tarafdar等人分析了现有网站可用性设计的指标对于网站的影响,发现网站设计方面的因素,如信息内容、导航系统的易用性、下载速度、网站可访问性等与可用性正相关,网站安全性和定制化程度则与可用性无关。

关注用户的指标体系

就研究思想而言,这部分研究者更多从用户行为分析的角度考察网站可用性评估指标体系的构建问题,一些学者从理论层面对这一问题进行了一些探讨。如Venkatesh等人将技术接受模型(Technology Acceptance Model,TAM)引入可用性研究领域,认为任务的重要性和系统的用户友好性决定了用户接受技术的程度。此外,易用性、用户友好性和客户满意度等指标也被证明对站点可用性具有决定作用。

需要指出的是,将可用性指标研究划分为所谓关注内容和关注用户的两种取向,并不代表前者就不关注用户,后者也不关注内容,而是就这两类研究思想的出发点不同而言的。从具体指标的构成上看,两类研究的区别实际上并不明显。在实际工作中,还是需要根据所评价的具体产品的特征,概括出评价的指标体系,并通过评估指标体系中所包含的各项具体指标来达到评估系统整体的目的。

五月 30th, 2011

移动界面隐喻设计

No Comments, 关于设计, 未分类, by 小猪.

界面是什么?

是的,有些时候,我就在想这个简单的问题,而那时我的答案还是:界面是对软件应用解决方案的显性,使用图形化符号,向使用者解释它的功能与任务。

但最近一些认知却让我对这个问题有了新的回答:界面就是软件应用它本身。它不是一份对软件应用功能的图形化说明书,不是对软件应用功能与任务的图形化翻译,它就是软件应用本身,并且与之浑然天成。

一个简单的问题,仅仅从展开的iPad文件夹时界面的呈现,你觉得,有多少种方法,可以收缩起这个文件夹?

Picture1

方法其实有三种:点击(Tap)文件夹图标或者点击其他区域;向上拖动(Flick)界面;双指在两侧向内滑动(pin close)。

第一种也许你早就知道,但后面两种,你也许会将信将疑地去尝试,相信我的说法。

所以,从我的角度上而言,这也许是人家常说iOS操作简单易懂的原因。在你点击文件夹后,文件夹展开的的这个动画,以及最终他的视觉样式,已经告诉你了,他应该怎么去关闭,你会不由自主的,就学会这些操作。

而这就是隐喻。《iOS Human Interface Guidelines》里面是这样解释隐喻对体验的影响的:当你应用中的可视化对象和操作按照现实世界中的对象与操作仿造,用户就能快速领会如何使用它。(When virtual objects and actions in an application are metaphors for objects and actions in the real world, users quickly grasp how to use the app.)

抽屉的隐喻

对我而言,iOS的文件夹更多的像一个抽屉的隐喻,并且,它的顶部还是玻璃材质的。从拉开的动画当中,他建立了一个类似抽屉的空间,你一看就明白了。

界面与界面之间,并不是简单的线性关系

我们不得不否认的一点是,界面与界面之间其实是应该纯在联系的,我指的这种联系是说,空间感。存在相互之间的层级和逻辑关系的,而且这种关系,越符合现实的,越好。越容易让别人理解,越来越不用让别人学习。

这就是我们需要做隐喻,我们需要通过它,去表现界面之间的关系。

界面环境

隐喻给人以可预测性,用户能够轻易的理解你设计的软件应用。这是一种掌握的感觉,是一种控制的感觉。当用户操作时,他们知道下一步即将出现什么、怎么回去——即使是在第一次操作。

为什么需要在移动界面中注意隐喻设计?

1.导航缺失

一个触摸屏手机的物理尺寸在3.7寸左右,与一张信用卡相当。在这么狭窄的空间内,我们则不能秉着PC客户端“在一个主界面内完成大部分的任务”的思想,去设计移动客户端。我们必须把界面分拆。

与之而来的问题是,分拆后的界面是有逻辑的,但我们并不能照搬PC客户端中的方法:使用任务栏,层叠的模态对话框去表现这种逻辑。

Transform Mail from Mac to iPhone

因为我们根本就没有空间,所以我们得另辟蹊径。

所以,我们把界面拆分得更多独立化,让界面变成卡片式,一个界面只完成一项任务,保证界面之间联系的单一化,避免界面之间逻辑,或者跳转的混乱。

2.缺乏物理力学反馈

传统的手机上,用户使用键盘,去操作屏幕上的视觉对象,键盘在这个阶段中,扮演的其实是用户操作行为的翻译器。而iPhone的出现砍掉了这种操作行为的翻译,变成直接触摸,这是一项伟大的进步。

操作与反馈对比

iPhone虽然缩短了操作行为的执行阶段,但却给操作行为的反馈阶段带来了麻烦:只有视觉反馈,手指触摸的物理力学反馈消失了。

你的手指不再能够感受到键盘按下的物理力学压力,甚至,假设你手指粗壮一点,你就几乎没法看见按钮是否被按下。而在输入时,这种情况尤甚,键盘手机上有着悠久历史的高效的“盲打”输入方式只能进入历史的存档中。

因此,我们更多的需要利用用户的视觉和听觉,去提供反馈。

隐喻设计内容

对于一个产品来说,隐喻设计不仅仅是动画,各种即时状态细节的设计,更多情况下,我们需要按步骤的去完成整个隐喻的系统性与结构化设计。他包含以下几项内容:

1.拟物化视觉外观与听觉反馈

隐喻设计的第一步,从应用的外观着手,如果可以的话,你应该考虑应用的外观表现出真实物理的肌理材质,以及合理的光影效果,并且,得正确的显示界面的元素的相互之间的空间层次感。

拟物化外观

Untitled-3

另外我们不能忽视的一种拟物化设计:音效。它不仅是对缺乏物理力学反馈的一种弥补的手段,在某些情况下,也是一种有效的反馈机制,如当屏幕处于关闭状态下时(这是经常的事情),拟物化的音效更能让用户了解当前用户的状态。iOS解锁屏幕的声音你还记得吗?还有敲击键盘的声音,以及照片拍摄的声音。这都很好的拟物化音效。

拟物化的外观很大程度上降低了用户的认知成本,无需阅读额外的文字,用户只要看到软件的样子,就知道它的用途。

2.即时反馈

假设,你在触摸屏的设备上,使用手势执行某项操作,但界面上没有任何的反馈。你就不得不去猜测一下,你遇到的是下面的那种情况:

  1. 你的操作手势有误,软件无法响应
  2. 程序当机了,暂时没有响应

对于情况二,很抱歉,我们也许实在无能为力。但是对于情况一,我们得有必要讨论一下,如果反馈用户操作手势有误,并指引或者帮助用户到正确的操作中了。

坑爹的错误反馈

由此看来,传统网页上使用的反馈方式,移植到触摸屏设备上,实在是水土不服。移动设备最好的错误反馈,应该是即时跟随用户的手势操作的。

Google Map for iPad

如上图示意,这才是一个触摸屏上,应该具备的一种反馈,它即时响应了用户的手势动作(即使可能是错误的),而当用户释放操作时,又自动回归到正确的操作结果中来。

对于任何一个软件应用来说,他都是有学习成本的。有的成本高到离谱,比如Office,Photoshop之类的生产力软件,但也有低成本的,如计算器,记事本等。当软件应用而行拟物化设计之后,其实这已经降低了一些学习的成本。但如何继续降低学习成本?让用户犯错,并从错误中学习。

即时反馈缩减了操作与反馈之间的距离,有效降低了用户纠正错误的修复成本,也提高了用户学习的效率。

3.流动式动画

传统的软件界面之间的切换表现得较为粗暴,大部分情况下,他只显示命令执行前和执行后两个界面,而忽略了他们之间的那段过程。而在真实世界中,倘若没有这个过程,你甚至很难理解过程两端的界面,是如何联系起来的。

向上推的界面组合

动画有一种无法比拟的表现力,它是与用户的最有效的沟通方式,一个精致,微细的动画,能够友好的衔接两个界面之间的切换,同时他还有以下的作用:

  1. 表现软件当前状态
  2. 提供对用户有用的反馈信息
  3. 加强用户直接操作的控制感
  4. 通过视觉表现用户的操作的结果

流动式的动画贯穿在整个iPhone操作系统中,也包括在非沉浸式应用程序中。但作为隐喻设计的一种手段,我们需要留意的是:动画只是常用于提高用户体验,它本身并不是用户体验的焦点。

隐喻设计的评判标准

1.符合现实逻辑的界面空间

流动式的动画成为隐喻设计的最后一块拼图,但是我们仅仅把拼图拼起来是不够的,我们还需要检验,这样的拼图是否符合真实世界的逻辑。

Picture1

Flipboard始终如一地采用翻页的动画效果,无论是从首页进入,抑或是从某个订阅源中返回。他甚至还精细的制作了三种翻页动画效果:只翻动一页,翻动两页,翻动三页和以上;他给以用户这样一种感觉:

  • 我订阅的所有内容,是一本杂志
  • 任何页面都没有互相从属的关系,只有先后秩序的关系
  • 在首页上的方块型的东西,等于杂志的目录

杂客的界面空间

而国内的同类产品杂客,他所呈现的界面空间却稍有不同,整体上,他像是一个时刻变换封面的杂志柜。

但个人感觉,从杂志柜进入杂志的过程动画,有点粗暴且难以在现实生活中找到相关性。个人观点,若此过程动画能与iBooks打开书籍的动画类似或相同。也许更加符合现实逻辑。

2.自圆其说

简单来说,你的界面是如何进入用户的视眼,也应该以相反的方式,从界面中消失,并且,这个过程,是能够自圆其说的,且符合真实生活的隐喻的。

新开网页流程

关闭网页流程

3.响应用户的直觉手势

移动设备最大的特点是:直接操作。如果你设置了你的界面是从下方推入,那用户可能会直觉性的认为,我把新界面向下拉,这个界面即可消失。

腾讯爱看直觉性手势

从图可以看到腾讯爱看成功的照顾到了用户从隐喻设计中所得到的直觉性手势,只需向下拉,用户就可以关闭此界面。

直觉手势

从外观上看,评论界面都处于主界面之下,而动画效果都属于主界面向下拉伸,评论界面向上推至界面顶部。但是杂客的同样响应了用户的直觉性手势,只需在正文界面中,向下拖动,即可激活评论界面,这不得不算是在twitter客户端上的一种进步和超越。

总结

其实理解移动界面的隐喻设计,并不是一件非常困难的事情,因为这是一个化繁为简过程后的结果。而困难的是:设计师应该跳出传统的按钮,点击等交互操作的局限中来,更多了考虑到和现实生活的逻辑结合和用户的直觉手势的响应。

对于移动的软件应用来说,隐喻设计的初衷是为了解决导航缺失和物理力学反馈缺失的问题,但同样,这也是移动产品的竞争力的核心体现。如何帮助用户更快的理解你的软件应用,如何帮助用户更顺畅的使用你的软件应用。这是我们每个设计师,都应该去真实生活中去寻找的答案。

五月 20th, 2011

让界面更加清爽

No Comments, 关于设计, by 小猪.

夏日要到了,酷热的天气,灿烂的阳光,想在夏日里获得众人的目光和赞美,快试试小白介绍的几招,一起打造清爽的夏日装,让在一切更加舒服,有活力。
嗯…咳咳。这是说视觉界面上设计的事,无论是web、移动或客户端,要想视觉更加清爽下面的建议都会有帮助的。
1.让布局更有空间感

脱掉!嗯…对的…
要想清爽,就得把身上多余的衣物,一层一层的脱掉!
在一个有限的空间里塞满大量的元素和信息,就算设计再华丽,信息再精彩,焦点还是无法长期停留在该空间。对于信息量丰富的界面,要想视觉清爽,空间感显得有为重要,这包括:主次信息之间的比例,各个信息模块之间的距离,单个模块里信息的间距。

2.使用简单的几何元素

曲线!嗯…也不完全这样理解…
脱掉厚重的衣物,身体的线条自然会显现出来,但想吸引更多的目光,那就得把线条练得好点。
在界面中使用简单几何元素做点缀或分割,有助于视觉焦点迅速寻找主要内容,便于信息的传达。
几何元素在人的思绪中是一种没有滞碍的概念,往往传达出干净有力,目的明确的态度和姿态,这最符合清爽的氛围。

3.留白和采用浅色系的邻近色

夏日,海滩上,鲜艳的色彩的确是夺目的主角。
但作为日常着装,那样的色彩就不耐看了,而简单浅色系则显得干净舒服。
色彩在界面的作用是营造体验氛围,为的是更好的突显内容,尽量减小使用中的干扰,建议太强烈的色彩不适于在以大量信息为主题的常用界面设计中。
适合营造氛围的邻近色特点是,层次丰富、活泼,既保持了统一的优点,却没单调、呆板的缺点。而浅色系的色彩与白色相搭配显得界面单纯、柔和、谐调,却有优雅、微妙的色感。

以上是小白的小小建议,愿你在设计界面时,希望界面清爽的时会有所帮助。

 

五月 20th, 2011

交互设计的通用原则

No Comments, 关于设计, by 小猪.

从用户角度来说,交互设计是一种如何让产品更易用,让用户更愉悦的产品设计。它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解用户心理和行为特点。

以下就介绍一下在交互设计中一些通用的原则。(欢迎访问3G门户用户体验团队BLOG!地址:ued.3g.cn)

1、就近原则:将同一类的功能都组织放在页面相同模块中。

2、容错原则:必须允许用户犯错,给予用户后悔的机会。

3、帮助原则:为用户提供适量的帮助,必须使用用户语言,不迷惑用户。

4、习惯原则:设计及功能尽量贴近用户的操作习惯,避免用户思考。

5、响应原则:每次用户进行操作后,都需要给用户一个响应反馈,否则用户将不清楚自己操作是否有效,从而进行重复操作,对产品甚至用户带来伤害。

6:精简原则:设计者需要常常向自己提问:是否做出很多用户不需要的东西?有时候,决定不要什么,比决定要做什么更重要。

 

五月 20th, 2011

触屏手机网站设计

No Comments, 关于设计, by 小猪.

随着智能手机iphone和Android的热潮,衍生出基于Safari和Chrome浏览器的触屏手机网站Touch Screen Mobile Website。
触屏手机网站在中国还属于起步阶段,从行业的现状来看,其体验参差不齐,笔者将从设备、系统、浏览器、网络、四个维度来与大家共同探讨触屏手机的网站设计:

一、设备

·分辨率与屏幕尺寸
·触屏机的交互特点
·性能

1. 分辨率是设计师做网站时首要考虑的问题,iphone/ipod touch目前有2种分辨率:480*320、960*640,屏幕的物理尺寸都是3.5英寸,Android由于是开源系统,生产商诸多,导致分辨率,屏幕尺寸非常多,但目前主流的分辨率为:480*320、800*480,根据以上情况推荐以480*320为标准设计,(客户端则推荐以大分辨率来设计,)同时考虑横屏情况下的自适应。

2. 触屏手机的特点是直接通过手指操作对象,因此需要为网站设定一个理想的行高来满足手指的触摸点击。

来自lukew.com 的一份关于触屏点击尺寸数据:
食指点击的间距约为7*7 mm,1mm间距。
拇指点击的间距约为8*8 mm,2mm间距, 当前推荐值为9mm,最小应不小于7mm。
列表选项之间距离最小应不小于5mm。
在设计过程中需要将毫米换算成像素,不同尺寸的屏幕分辨率换算的结果也不一样,换算方法详见(DPI和像素、厘米、英寸之间的关系和换算及CSS中的长度单位) 笔者认为:可按5mm为最低标准设计,使用率较高的可根据测试情况加大。


手机输入xuan.3g.cn体验 3G门户炫版

3. 手机的硬件和网络环境与PC相比还有较大差距,因此手机网站需要高度优化页面性能:
尽量控制页面文件大小,避免使用过多图片,规范html和css  css压缩工具
尽量减少服务器请求,使用css spirit 某些特定css 可直接写在页面文件里….
关于页面性能的具体优化并非三言二句能讲述清楚,这里只做抛砖引玉,欢迎补充。

二、系统

·UI style
·flash

1. iOS和Android OS在设计风格和交互上有较大差异,如果考虑一套UI同时适用多个平台,(网站可跨平台使用,跟APP相比减少了开发和维护成本)在设计时要避免过大的风格偏差和交互上的冲突及误导。Guidelines详见:
iPhone人机界面设计指南
Android人机界面指南

2. iOS不支持flash,JAVA,SVG,Android OS 支持flash10.1以上版本,建议使用gif动画.

三、浏览器

·功能条
·缓存
·HTML & CSS
·JavaScript

1. iphone浏览器自带有功能条,弥补了硬件上的功能缺陷。
这里特别介绍下iOS的一个特点,可将网站添加到桌面,并生成一个APP图标:
<link rel=”apple-touch-icon” href=”icon.png” />
icon.png图片为方形,尺寸57px*57px,iphone4 114*114。

2. 这里将缓存分为组件缓存和页面缓存,组建缓存是指网站元素:图片、CSS、JavaScript等,页面缓存是整个页面作为单独实体来存储,在页面设计开发时要注意组件和页面不超过浏览器的缓存大小:

3.在PC端上显得遥遥无期的html5css3在移动终端率先登场,下面介绍几个实用的css3
渐变:webkitgradient(linear, left top, left bottom, color-stop(0.3, rgb(255,255,255)), color-stop(0.75, rgb(239,242,252)));
圆角:-webkit-border-top-right-radius: 4px;
高级选择器:.list > p:last-child a{} background-image:
避免重力感应时文字随分辨率增大而增大:-webkit-text-size-adjust: none;
屏蔽输入框默认圆角和阴影:-webkit-border-radius:0;-webkit-appearance:none
去除下拉框默认样式:-webkit-border-radius: 0; -webkit-appearance: none;
Safari官方:html css

4. JavaScript

隐藏浏览器地址栏:
window.addEventListener(‘load’, function(){
setTimeout(function(){
window.scrollTo(0, 1);
}, 100);
});

手机识别:
var isAndroid = navigator.appVersion.toLowerCase().indexOf(‘android’) >= 0,
isIphone = navigator.appVersion.toLowerCase().indexOf(‘iphone’) >= 0;
if (isAndroid)
{
window.location.href = ”XXX.html”;
}

Iphone全屏显示:
<meta name=”apple-mobile-web-app-capable” content=”yes” />

四、网络

·GPRS
·3G
·WIFI

1.从速度和资费来看,GPRS是最慢最贵的移动上网方式,该网络环境下页面瘦身无疑是最睿智的选择,建议页面文件大小不超过25K (GZIP后)具体测试数据不做赘述。

2.3G卡速度接近甚至有的超过WIFI上网速度,但同样存在资费问题。

3.WIFI我们可以理解是移动终端通过无线路由连接固定宽带的一种上网方式,资费和速度等同于用PC访问网站的成本。
根据以上3种网络我们可以做一些适配为用户提供最适合的体验。

 

十一月 8th, 2010

调用css时,用link 和 @import url 有什么区别

5,900 Comments, css 应用, by 小猪.

css在页面里面有三种引入方式:

1.在页面里面直接写(在HEADER区)

<style type=”text/css”>
body{margin:0PX;padding:0PX;}
</style>
2.用link进行引用

<link rel=”stylesheet” type=”text/css” href=”my.css”>

3.用import进行引用

<style type=”text/css”>
@import url(main.css);
</style>

第一种是直接在html页面上进行css书写,而第二种和第三种则是采用外部引用样式文件。

那么到底link和@import有什么区别?

其实link和@import的最根本区别就是,link是一个html的一个标签,而@import是css的一个标签,
link除了调用css外还可以有其他作用譬如声明页面链接属性,声明目录,rss等等,而@import就只能
调用css。如果单独从外部引用css来说,他们的作用是基本一样的。

要用javascript进行样式选择
这个时候就要用link,因为link是html元素,可用javascript去控制dom元素最后达到改变样式的效果。
看下列代码:

Code
1 <link rel=”stylesheet” href=”/css/styles.css” type=”text/css” media=”screen” />
2
3 <link rel=”stylesheet” href=”/css/orange.css” type=”text/css” media=”screen” title=”orange” />
4
5 <link rel=”alternate stylesheet” href=”/css/blue.css” type=”text/css” media=”screen” title=”blue” />
6
7 <link rel=”alternate stylesheet” href=”/css/pink.css” type=”text/css” media=”screen” title=”pink” />
8
9 <link rel=”alternate stylesheet” href=”/css/slate.css” type=”text/css” media=”screen” title=”slate” />
10
这是一段很经典的改变页面风格的代码,因为我们今天主要讲的是link和import,所以我这里只列出了引用css部分。
我们先来看看link里面各个属性都有什么含义:
[1]rel:用来声明链接对象的作用或者类型。
譬如上面的的代码:”stylesheet”表示链接一个默认的css,而”alternate stylesheet”则表示备选的css
[2]href:这个就不用我说了吧,引用css的文件路径。
[3]tyle:文件类型
[4]media:应用的设备,”screen”是说明应用在屏幕上。
[5]title:是css的名称。
这段代码中一共有5个css,第一个是基本样式,而其他四个是风格样式,利用javascript去控制默认显示的样式title就ok了。

我要在应用打印样式:
打印样式顾名思义就是打印页面时候的样式。
这个样式在普通浏览下是没有效果的,只有在打印的时候生效。
如果要为页面单独引用打印样式的话,link和@import都可以的。

link代码

<link rel=”stylesheet” href=”/css/styles.css” type=”text/css” media=”print” />

@import代码

<style type=”text/css”>
@import url(print.css) print;
</style>

另外对于多样式还有一种 link 和 @import 的组合用法。
先用link引用一个css文件:

<link rel=”stylesheet” href=”/css/styles.css” type=”text/css” media=”screen” />
然后在这个css文件里面再引用

<style type=”text/css”>
@import url(../css/base/my.layout.css);
@import url(../css/base/my.typo.css);
</style>

这样做的好处是,如果你一个站点所有页面引用的样式都是一样的,而有又多个css,如果你每个页面都加4,5个一样的css样式,却是浪费代码和精 力,所以莫不如这样做,所有一个页面都引用一个css,然后一个css在引用多个css,方便管理和维护。

下面对@import url()做一下总结:

1,@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)。

2,@import 是css2里面的,所以古老的ie5不支持。

3,当使用javascript控制dom去改变样式的时候,只能使用link标签,因为 @import不是dom可以控制的。

4,link除了能加载css外还能定义RSS,定义rel连接属性,@import只能 加载css

所以我认为结合来使用就最好,比如:<link href=”css/main.css” rel=”stylesheet” type=”text/css”>

引用了一个main.css文件,在main.css里面再引用@import url(footer.css);@import url(head.css);

这样达到一个清晰明了的作用.

十一月 3rd, 2010

6种lightbox效果源代码下载

6,056 Comments, ajax效果, by 小猪.

关于lightbox,第一次看到他是在一个设计师的博客里,窗口黯淡下来,图片缓缓的打开,美丽的效果让我为之震撼!于是,追寻这它;而自蓝色理 想有人汉化lightbox使 用方法之后,这两年来已经是广为人知。

我因为之前曾长期追寻lightbox,收集到了六种lightbox效果,可见设计师对他的喜爱程度。以下,就我收集的lightbox中提 出六种完整的lightbox效果做出介绍和评价,提供给喜欢lightbox效果的朋友;安装什么的就不再多做介绍了

lightbox原版
这个是最早的版本,也是第一个让我震撼的网页特效了。基于prototype, 效果流畅,支持键盘翻页,缺点是必须在网页中所有元素载入完毕后才可以使用,最新版本是2.03.3,演示里是最新版本。103K的体积,稍微有些大了。

litebox
据我所知这个算是比较早的打着精简优化口号的lightbox了,好家伙,直接减肥到24K了,减了79K呢,精简掉了键盘翻页,图片组和单一图片的 功能保留,滑动的特效以缩进缩出为主。

litebox超级精简版
怎么说呢,这个只调用了一个16K大小的JS文件,也算是目前最精简的ligtbox效果了,同之前的litebox一样,没有键盘翻页,其余没有什 么变花,特效依然是缩进缩出为主,推荐使用!

moobox
来自基于mootools的特效库,使用的js只有6K大小,效果比原版的lightbox感觉更是流畅,滑动十分有质感!底部感觉好像是下拉出来的 一样;I like mootools!!

有保留键盘翻页功能,并且页面图片不载入完毕也可以使用(网页必须载入完),推荐使用!!

slimbox

同moobox其实是一个妈生的,基于mootools的特效库,使用的js同样只有6K大小,但js内部有少许不同,不知道是不是改良版,是 本站现在在使用的效果,呵呵,不仅底部是以下拉的方式出现,还可以完整的切换会lightbox原版的效果^_^

lytebox

OK,最后这一个,保留了lightbox所有的同时,还支持换肤功能,支持自动播放功能,支持嵌入页面功能,支持嵌入页面组的功能,功能强大 配合lightbox的效果,酷毙了!!这么多的效果你担心他的体重吗?完全不用担心,lytebox仅仅只使用一个38K大小的JS就能完美的工作,让 你享受更多的功能!特别推荐!!

OK,暂时就介绍到这里,lightbox的版本远远不止这些,今天挑选的六款都是保留了lightbox招牌的滑动效果的版本,还有各种的 lightbox效果在被创作出来,再此之前,提供以上六种版本的lightbox给大家,好好的享受lightbox带来的视觉冲击吧!

八月 16th, 2010

10个最佳Mootools Lightbox效果脚本收集

No Comments, ajax效果, by 小猪.

大家都很喜欢Lightbox弹框效果,这种效果在很多地方都很有用。而原始的Lightbox脚本已经被无数次的克隆到了所有的流行 Javascript库中。上周我们看了10个最佳 jQuery Lightbox效果插件收集,现在,让我们看看Mootools框架下的10个最佳的Lightbox效果插件收集。

Smoothbox

Mootools lightbox script

支持媒体: Images, Inline HTML, Ajax, iFrame

查看演示

下载

Multibox

Mootools lightbox script

支持媒体: Images, Inline HTML, AJAX, iFrame, Flash, Video

查看演示

下载

RoeBox

Mootools lightbox script

支持媒体: Images

查看演示

下载

Litebox

Mootools lightbox script

支持媒体: Images

查看演示

下载

Milkbox

Mootools lightbox script

支持媒体: Images, Flash

查看演示

下载

Slimbox

Mootools lightbox script

支持媒体: Images

查看演示

下载

ImageZoom

Mootools lightbox script

支持媒体: Images

查看演示

下载

mediaboxAdvanced

Mootools lightbox script

支持媒体: Images, Inline HTML, AJAX, iFrame, Flash, Video

查看演示

下载

QuickBox

Mootools lightbox script

支持媒体: Images

查看演示

下载

ReMooz

Mootools lightbox script

支持媒体: Images, Inline HTML

查看演 示

下载

七月 28th, 2010

前端开发人员的发展方向

5,658 Comments, 其他应用, by 小猪.

腾讯ISD页面重构组leader TwinsenLiang
在《一专多长》中介绍了“前端架构人员的能力模型”

greengnn在上次的演讲中,又提到了这个问题,并将开发人员分为两类:
一类是xhtml+css+js等狭隘的理解前端工作人员,另一类就是我们上图中提到的几个方面。
原文如下:

小页面观点,div+css等狭隘的理解前端页面重构工程师
大页面观点,从产品诞生的流程,分析页面人员的能力模型,应该具备一专多长,要熟悉项目管理,产品,设计,后台开发,产品运营等,作为研发中的一个衔接 层,更好的像产品构想和设计付诸实施。

实际工作中,前端开发人员的工作性质,决定了他们需要跟方方面面的人打交道。

一、先从“产品”说起

良好的用户体验,在“静态设计稿”上往往得不到直观感触。
通过与前端开发的协作,可以把“各个流程”搞的很顺畅:

  1. 直接在前台验证注册表单,即时反馈输入错误的信息;
  2. 同页无刷新弹出提示层
  3. 购物车,按照cookie记录用户购买的商品;
  4. 提升页面开启速度。
  5. 综上所述,前端开发人员发展的方向之一,是做好产品,掌握并提高“用户体验”。

二、运营推广方面

通过W3C验证,本身就为SEO做好了基础,掌握了这项技术,可以有效的降低网站推广所花费的成 本。从运营角度上来说,前端开发可以辅助企业完成一小部分的推广工作。另外,可以有效降低页面产生的流量。成本的节约就是收益,能省一点是一点,每天在关 键字购买、流量购买上投入的成本,累积起来决不是个小数目。这也是前端开发人员所具备的价值之一。

三、设计

跟设计师打交道的几率,实在太高了。经常可以看到愤怒的工程师在怒吼“又给我设计了一个圆角结构,实现太麻烦了”,而实际上,如果前端开发掌握一下 设计方面的技巧,对工作是很有利的。大多数设计师,不会提供详尽的稿子,例如内容页面,往往仅提供一个模板。于是有很多工作,都浪费在沟通的成本上。“帮 我美化个按钮”“我需要设计一个提示层”。其实这些东西,自己做很快就可以搞定,如果设计师刚巧在忙别的项目,就为了一个美化的效果,需要等待很长时间。 那如果你自己掌握了设计的技巧,可以把“圆角”结构改成漂亮的“直角”结构,岂不是很爽?

四、后台

页面制作每个公司的情况都不一样,我们是提供static静态文件给程序员,程序员改好后,放到templates目录下。如果是不懂程序代码、不 会配环境的员工,修改一个东西,需要改完static下的静态文件后,预览效果,再告诉程序员,他改了什么什么,再让程序员去调templates模板 页。这样一来一回,浪费时间不说,程序员也会很不爽,“丫的,什么前端,狗屁不会改”。不利于提高自己的工作地位。

总结

人无完人,我们往往没有大量的“时间、精力”去学习这些额外的东西。
但是,前端开发这个职业特点,要求我们在精通本行业知识的基础上,尽可能的去了解其他行业的知识。这样,才能在与其他部门打交道的过程中,占据一个有利的 地位、降低沟通成本。在管理体系里,你的个性决定了你的位置,想要做的更好、得到更多。直白点,想要提升职位、涨工资,就需要一个理由。做前端,就要做一 个优秀的前端。技术技能只是做事实施的必需。“一专多长”是前端的王道。

别一口一句“我没空学那些,我要专精xhtml+css”,你有空泡妞、看2012、打游戏,没空学东西?

七月 27th, 2010

小工具和素材下载站

No Comments, 网页素材, by 小猪.

1.图片素材收集技巧
我们很多时候看到一个别的站点里面的图片和动画,怎样能方便拿到?
有一个简单的技巧就是,打开IE的 internet选项->internet临时文件,删除所有脱机内容 , 然后把这个网站浏览一遍,再打开IE的 internet选项->internet临时文件,点设置,查看文件 (就会看到刚才该网站的所有素材和动画,复制出来就可以直接使用了)

2.在线图片处理工具
http://www.simwebsol.com/ImageTool/
做网站时,需要制作网站标题的特殊效果,可以用下面这个工具,比一些专业文字工具还要方便

attachments/201007/3728130034.jpg

http://www.makepic.com
制作个性印章

attachments/201007/2522614663.jpg
http://www.buttonator.com/
按钮图片制作工具

http://www.eoool.com/
在网页中直接留写邮箱,容易被一些邮件收集软件扫描而收到垃圾邮件,这个在线工具可以帮助
生成邮件地址的图片

http://lab.rails2u.com/bgmaker/
背景图片制作工具,我们经常需要制作一些颜色渐变的背景图片,用这个工具很方便

http://www.ajaxload.info/#preview
动态进度条图片生成工具,如果你希望显示动态的进度条图片,这个工具一定可以帮到你,

http://www.web20badges.com/
制作奇形怪状的标志图片

http://www.photofunia.com
可以将直接对相片进行换脸图片工具,可以制作很多有趣搞笑的个人相片图片。

attachments/201007/5070239419.jpg

3. 网站发布服务软件
http://www.snpsoft.net
30M的绿色免费软件,可做WEB服务,还打包了一个内容管理系统,支持视频,多国语言,模板更换

素材网站

http://www.flickr.com
http://image.baidu.com/
http://images.google.com.hk
平时需要大量的图片素材,除了baidu,google外,最喜欢下面这个flickr.com图片搜索 因为是专门的图片搜索,所以质量高很多

图标类网站下载
http://iconfactory.com
http://interface.com/
http://pixelgirlpresents.com
http://deviantart.com
http://fasticon.com
http://fasticon.com