Gabriel
2010年01月26日
分享
据国外媒体报道，“每个儿童一台笔记本电脑”(One Laptop Per Child,OLPC)项目委员会今日公布了其下一代产品XO-3平板电脑的最新细节信息，包括有几张这款机型的产品概念图片以及几种新功能。这款平板电脑仅有信封大小，背部将设置摄像头设备。不仅如此，这款机型还会采用无线式电源进行供电，充分体现了该项目发起人尼古拉斯·尼葛洛庞帝(Nicholas Negroponte) “无插孔”设计理念。
这种对弈的设计是不是很容易让人联想到surface？
该平板电脑的设计者、FuseProject创始人叶维斯·贝哈尔(Yves Behar)表示，希望研发出来的XO-3平板电脑屏幕看上去就像被绿色橡胶垫圈包裹着一样。他称：“尼可拉斯·尼葛洛庞帝就希望研发出来这样简单的产品，且无框架。主要的可视元素就是计算机上的媒体或内容。”为了减少对视觉带来的复杂感，尼可拉斯·尼葛洛庞帝希望OLPC的廉价平板电脑采用新外观，使界面更加友好。不仅如此，尼可拉斯·尼葛洛庞帝还希望去掉XO-3的显示屏的外框。键盘方面他也建议用虚拟键盘替代物理键盘，并且不添加任何按钮。
有了这个小环，电脑就真的可以拎着走了，或者拴在裤腰带上，总之用户体验又提升了一步。
按照研发进度，XO-3有望在2012年推出。OLPC组织计划在此之前将现有的XO机型升级到XO-1.5版本，增加内存、硬盘容量，提升处理器性能。新版本机型将配备威盛新款处理器。与旧款处理器相比，该处理器的运算速度比其快接近两倍。内存/闪存容量也将提升到原来的四倍左右。而2011 年，OLPC委员会计划换用与威盛处理器相当的ARM处理器，但功耗仅为原来的1/4左右，并推出该机型的XO-1.75版本。OLPC委员会希望能将整体售价控制在150美元或更低的水平。
这个设计方案看上去很新颖，其实现在的很多手机都是这么做的，让整个显示器成为取景器：）只不过大家可能从来没见过如此巨大的取景器，呵呵。
据了解，目前大部分Windows平板电脑以及尚未上市的JooJoo平板电脑产品以及市场上的其他平板电脑产品售价基本都在数百美元左右。这些机型除了价格昂贵以外，还很难满足户外使用的需求和发展中国家用户的需求。尼葛洛庞帝表示，对于这款平板电脑是否能按预定计划如期上市他并不能保证，但同时称OLPC的影响力不能小视。他还补充称：“如果我是一个寻找投资的商业实体，那么在我实现承诺之前你们不会再次投资。但我们并非是一个商业性组织，因此，只要我们的计划能有一半实现，都将对社会带来很大的影响。”
既是屏幕也是键盘，触摸屏嘛，呵呵
可以当电子书看，很适合孩子们用
当用户手里有一个如此巨大的GPS会是怎样的感受？
PS：看完这些图片，让人不得不感叹科技的进步带给我们的震撼，突然觉得也许以前科幻电影中的片段成为现实就在不久的将来。
OLPC， 平板电脑， 设计
Gabriel
2009年12月09日
分享
Windows 7在之前版本Windows系统的基础上更加精致，对细节方面的设计也让人耳目一新。Window设计研究团队高级UX(用户体验)主管Denise Trabona近日在接受采访时介绍了Windows 7登录界面和默认背景的设计历程，并且提供了登录界面、默认背景的很多原型设计，来看一下视频：
http://ecn.channel9.msdn.com/o9/ch9/8/1/0/1/1/5/Win7IconicBackground_ch9.wmv
Trabona表示，用户在接触Windows时最直观的第一印象来自于系统登录界面(logon screen)，因此开发团队对登录界面花费了很大心血。登录界面的设计之初的理念是给用户带来清爽愉悦的感觉，很多设计初稿中都采用了鲜亮的色彩、流动的视觉效果，最终选定了一款基于天蓝色背景的设计，并在此基础上进行了加工，最终就是大家见到的这款简洁而生动的登录界面。
继前一阵Windows 7的LOGO设计草图曝光之后，又有国外媒体针对Windows 7的登录界面由来“刨根问底”。采访中Window设计研究团队高级UX(用户体验)主管Denise Trabona介绍了Windows 7登录界面和默认背景的设计历程，并且提供了登录界面、默认背景的很多原型设计。
微软公布的Windows 7Logo草图
Windows 7登录界面设计原稿1
Windows 7登录界面设计原稿2
Windows 7登录界面设计原稿3
Windows 7 Beta登录界面
Windows 7登录界面设计最终稿
Windows 7零售版最终登录界面
windows7， 背景， 设计
Gabriel
2009年11月24日
分享
最近一年来，随着各大现代浏览器的纷纷升级，对CSS3的支持渐渐被提上议程。这些浏览器中，支持最多功能的当属Gecko和Webkit两个内核的浏览器，其中Webkit支持的功能要更多一些。尽管它们一般都采用私有属性的方式来提供对CSS3的支持，但这并不影响网站重构者们对那些新功能的追捧和研究。
前几天CSS Globe上推荐了一个CSSwizardry上的页面，是对一些CSS3属性的试验性范例，并且遵循了渐进增强的原理，在不支持高级功能的浏览器（如IE6、7、8）下能看到正常的页面，而在支持CSS3特效的浏览器上可以呈现出更华丽的效果。那些效果挺不错的，在这里和大家分享一下。
第一个例子是关于分栏的：
CSS3里直接设置样式就可以产生分栏的效果了，像这个例子，就是设置了
column-count:3;
column-gap:20px;
第二个例子是鼠标触发表格行和单元格状态的：
这个例子展示了transform的其中一个方法：scale，也就是缩放，配合border-radius和box-shadow，制作出了这种效果。
第三个例子是一个竖向的导航菜单：
这里利用了更多的高级特性，例如颜色渐变背景及动画切换效果，这两个特性只有Webkit内核的浏览器才支持。
第四个例子是图片的展示效果：
这里用到了transform的另一个方法：rotate（旋转），配合box-shadow和transition的动画，做出了以前只有flash才能实现的效果。这个例子同样需要用Webkit核心的浏览器才能看到动画效果。
具体请点击这里观看实际效果，记得使用Firefox3.5以上、Safari4或者Chrome浏览。
想研究CSS3具体内容的，可以参考用CSS3将你的设计带入下个高度，还有腾讯ISD Webteam的同志们归纳总结的CSS3.0中文参考手册。
CSS， 渐进增强
Gabriel
2009年09月01日
前端开发
现在网络上有许多用JS实现的动画效果，有些甚至可以和Flash的绚丽相媲美，如果使用纯JS来实现，那么必然要在setTimeout、setInterval和散落在程序各处的判断操作中来回反复，可能一不小心就迷失了方向。
幸好现在有很多JS库包含了动画组件，实现动画效果更加轻松自如。现在最流行的jQuery就包含了这样一个动画组件，它可以帮助我们简洁、高效地实现很多复杂的动画效果。
大家一定有见过谷歌中国的那个导航动画效果吧？没错，就是那个纯JS实现的帧动画。最近在我们的网站改版中，就有一个类似那样的动画，最终效果是这样的：
大家一看就知道了，这个动画就是鼠标移动到某个导航项上面的时候，把当前这一项的说明文字渐显，并把上一次的说明文字渐隐。下面我们就一步一步地把这个效果制作出来。
搭建HTML结构并增加样式
很简单的HTML结构，最终代码如下：
<div class="strongfunc" id="FuncDiv">
<ul>
<li class="funcfirst">
<div class="funcimg">
<a href="#"><img src="images/ico_mailfunc1.png" alt="35EQ" /></a>
</div>
<span class="functxt"><a href="#">35EQ</a></span>
<div class="floatinfo" style="left:-32px"><p><span>企业级即时聊天工具</span></p></div>
</li>
<li>
<div class="funcimg">
<a href="#"><img src="images/ico_mailfunc2.png" alt="多线接入" /></a>
</div>
<span class="functxt"><a href="#">多线接入</a></span>
<div class="floatinfo" style="left:-28px"><p><span>彻底解决南北互通问题</span></p></div>
</li>
<li>
<div class="funcimg">
<a href="#"><img src="images/ico_mailfunc3.png" alt="全球转发" /></a>
</div>
<span class="functxt"><a href="#">全球转发</a></span>
<div class="floatinfo" style="left:-38px"><p><span>多IP发送规避IP地址被封</span></p></div>
</li>
<li>
<div class="funcimg">
<a href="#"><img src="images/ico_mailfunc4.png" alt="手机邮箱" /></a>
</div>
<span class="functxt"><a href="#">手机邮箱</a></span>
<div class="floatinfo" style="left:-14px"><p><span>邮箱随着手机走</span></p></div>
</li>
<li>
<div class="funcimg">
<a href="#"><img src="images/ico_mailfunc5.png" alt="短信提醒" /></a>
</div>
<span class="functxt"><a href="#">短信提醒</a></span>
<div class="floatinfo" style="left:-38px"><p><span>让您随时随地把握商机！</span></p></div>
</li>
<li>
<div class="funcimg">
<a href="#"><img src="images/ico_mailfunc6.png" alt="邮件监控" /></a>
</div>
<span class="functxt"><a href="#">邮件监控</a></span>
<div class="floatinfo" style="left:-20px"><p><span>Boss的第三只眼睛</span></p></div>
</li>
<li>
<div class="funcimg">
<a href="#"><img src="images/ico_mailfunc7.png" alt="自摧毁邮件" /></a>
</div>
<span class="functxt"><a href="#">自摧毁邮件</a></span>
<div class="floatinfo" style="left:-6px"><p><span>发送隐形邮件</span></p></div>
</li>
</ul>
</div>
大家应该注意到了里面包含了内联的style部分，其实是因为这一块提示文字准备用绝对定位实现，而每一块文字的长度又不一样，所以必须单独定义，给每一项添加ID，然后在样式表中设置也是可以的，这个就让大家自己去权衡吧。
然后对这部分结构添加样式，在处理了主流浏览器的样式兼容性之后，最终样式如下：
<style type="text/css">
body{ font:12px Arial, Helvetica, sans-serif;}
a{ color:#5d5d5d; text-decoration:none;}
.strongfunc{ position:relative; zoom:1;}
.strongfunc ul{ margin:40px 0 0 80px; zoom:1; list-style:none;}
.strongfunc li{ position:relative; float:left; width:70px; height:75px; padding-left:9px; background:url(images/ico_funcpoint.png) no-repeat left 27px; text-align:center;}
.strongfunc .funcfirst{ padding:0; background:none;}
.funcimg{ position:relative;}
.funcimg a{ display:table-cell; vertical-align:middle; width:70px; height:60px; line-height:60px; *display:block; *font-size:45px;}
.funcimg a img{ vertical-align:middle; border:0;}
.functxt{ white-space:nowrap;}
.floatinfo,.floatinfo p,.floatinfo p span{ background:url(images/floathint_bg.png) no-repeat; line-height:23px;}
.floatinfo{ display:none; position:absolute; bottom:60px; white-space:nowrap; background-position:0 -7px;}
.floatinfo p{ margin:0; padding:0; margin-left:12px; padding-right:12px; background-position:right -7px;}
.floatinfo p span{ display:block; background-position:center 22px; height:29px;}
</style>
接下来就是最后的步骤了，为这个页面添加脚本行为：
$(document).ready(function(){
//缓存外层容器及动画列表项的jQuery包装集
var funcdiv = $("#FuncDiv"),actAreas = funcdiv.find("li");
//给动画列表项增加鼠标移入事件
actAreas.hover(function(){
showFloat($(this));
},function(){});
function showFloat(actArea){//定义显示提示信息动画的方法
var floatdiv = actArea.find("div.floatinfo"); //获取当前提示信息
var curfloat = $.data(funcdiv,"curfloat"); //获取上一次鼠标移入时弹出的提示信息
if(curfloat){
if(curfloat[0] == floatdiv[0]) return;
curfloat.stop()
.animate({opacity:0,bottom:"60px"},200); //如果已经有信息显示并且不是当前鼠标处的这一条，就用动画使它渐隐
}
$.data(funcdiv,"curfloat",floatdiv); //标记当前提示信息
floatdiv.stop()
.css({opacity:0,display:"block"})
.animate({opacity:1,bottom:"70px"},200); //用动画使当前鼠标处的信息渐显
}
showFloat(actAreas.eq(0)); //页面加载完成后默认显示第一项信息
});
注意到curfloat.stop()和floatdiv.stop()这两个地方，为什么要用stop()呢？因为jQuery的动画机制是默认把动画加入队列里顺序播放的，一段动画播放完才会播放下一段，如果不加stop()的话，当鼠标在各个项之间来回移动时，就会出现提示信息此起彼伏了好几遍才结束的现象，就像酱紫：
好了，页面完成了！点击这里查看最终效果
其中涉及到一些jQuery的基本函数和方法，不了解的可以去这个中文API查看：http://jquery-api-zh-cn.googlecode.com/svn/trunk/xml/jqueryapi.xml
或者英文原版的：http://www.visualjquery.com/
动画 jQuery Javascript
35OpenID
您还没有登录，请登录后继续操作。