谈谈CSS Sprites技术及其优化

|页面构建|2012/05/15

CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题，我们又怎样合理使用这个技术呢？下面让我们详细的聊聊。

在大家还在拨号上网的“远古时期”，由于网速的限制，页面开发者都喜欢把网页里面的图片字节数控制的非常小，往往在一个图片文件夹里散落着n多的小碎图。随着网络技术的发展，网速的提升，大家越来越重视页面的加载速度，页面效率问题，过去的那些小图便成为了前端开发者的眼中钉，因为每加载一张图片都会产生一次浏览器请求数，发起的请求数越多那么页面加载的速度也越慢。还有当页面加载时，图片一个个的零星显示，鼠标经过时候背景闪白等也都是我们不能忍受的。于是乎将页面中的背景图整合到一起，利用“background-image”，“background- repeat”，“background-position”的组合进行背景定位的技术被广泛使用与了页面构建中，这就是CSS Sprites。当然CSS Sprites技术也存在着维护不便，内存占用大等等的缺点。

好了，如果我只说这些，那么这篇文章就有点太水了。前面那些只是对CSS Sprites技术的一个普及。作为一个开发者我们应该对它有一个更全面的认识，挖掘深度内容，这样才能有利于我们效率开发，团队协作。 more »

23
 1,995

Little Truck诞生记

|视觉设计|2012/05/10

Hello,everybody。本来我也计划跟大家聊聊“那些事”和“那点事”，无奈时间太紧无法梳理成章，便将自己最近一个习作的绘制步骤与大家分享一下。共同交流，进步：）OK，开始。

哦，忘记说明这不是一个icon，不方不正不圆不规矩不黄金比例也不像一个icon。

首先，确定光源，角度，我选择了比较容易出效果的侧面来绘制。不过如果时间、精力充足，建议大家还是多尝试下不同角度（做icon的时候也是，当你觉得画不下去，画的平庸，没有感觉，没有G情，总监不满意的时候，也许，该换一个角度了。） more »

10
 1,577

不插电游戏

|视觉设计|2012/05/03

桌面游戏在欧美地区风行三十多年，给众多玩家带来了无穷乐趣，亦早已是风靡社会的社交活动，大家以游戏会友、交友。在国外，已经成为与书本一样的出版物，内容涉及战争，贸易，文化，艺术，城市建设，历史等多个方面。以各种不同的主题、游戏规则以及回合规定，变化出至今已超过3000多种脍炙人口的游戏。其游戏的过程多是注重思考如何利用有限的资源达成既定目标，直接地锻炼了参与者多方面的思考能力，而且以游戏的方式表达，过程生动有趣，能锻炼思考能力而又不失吸引力的选择。 more »

7
 1,041

浅谈ipad阅读类应用设计

|交互设计|2012/05/02

自古以来，人们从阅读中了解最新资讯，学习知识，陶冶情操。随着社会和科技的发展，新的阅读设备，阅读方式，丰富的多媒体展示，让阅读这一人类行为更加高效化和多样化。对于平板电脑这个较新的媒介，我们如何能进一步提升用户的阅读体验，这需要我们对用户使用场景，任务规律，操作习惯以及信息展示特点进行更深入的分析。本文旨在以分析阅读行为为基础，配合时下iPad端阅读类应用的分析，与大家共同探讨升阅读体验的设计心得。

让用户享受加载过程

当我们打开一个应用时，面临的第一个问题就是加载。优化你的加载过程，提前显示部分信息或者做个合适的loading动画效果，让的用户知道你的应用已经在一步步执行他的操作，给予他应得的反馈，如此也让用户更有耐心等待加载。 more »

10
 1,102

页面构建的审图与细节

|页面构建|2012/04/19

作为专业的页面构建工程师，除了在专业技能上有很高的要求以外，还需要具有一定的对设计图的审稿能力。审图，并非是意味着追求跟PSD一模一样，甚至耗费大量时间截屏跟PSD去“对像素”。在我的理解中，审图是通过对UI设计稿的分析，充分理解UI设计师的意图，再结合UE的交互状态，从中做到真正的“还原设计稿”。 more »

36
 5,337

社交型网站首页面设计分析

|交互设计|2012/04/10

本文希望通过对社交型网站主页进行的对比分析得到一些思考，并和大家分享探讨提升社交型网站的注册转化率的优秀设计原则。

一般来说用户注册转化流程大致由以下几个部分组成：

1. 能吸引用户注册的主页内容；

2. 简便、快速的注册流程；

3. 有效的寻找、邀请朋友机制；

4. 吸引新用户注意力的引导。 more »

15
 5,395

外面的那点事er

|视觉设计|2012/03/28

从小喜欢艺术的我，一直希望有机会能走出去看看，看看外面的世界和自己想的有什么不一样。

大学毕业工作了一年后，某一天突然想明白了自己内心的追求，毅然辞职从北京飞到伦敦去学习我喜爱的插画。

从北京到伦敦，从陌生到熟悉。生活了三年，有趣的事很多，找了几个自己感兴趣的点先和大家分享下~

more »

25
 1,684

别担心，有HTML5,CSS3在

|页面构建|2012/03/22

HTML5和CSS3热潮正横扫网络，从事互联网行业，特别是前端工作者，大家或多或少都有了解、学习和使用，HTML5和CSS3包含丰富的技术内容，在每周的技术分享交流会中，页面构建工程师@Sunshine珍兒 同学，从三个特别的角度出发，配合丰富的实例，概括了HTML5与CSS3对页面工作带来的息息相关的变化和精彩。
more »

17
 1,269

任务转场

|交互设计|2012/03/19

作者：Mark Cossey
译者：@财布当月光西皮地上霜 
原文：smashingmagazine 

生命和自然是一个很大的转场效果。太阳徐徐升起标志一天开始然后缓缓落下标志白昼结束夜晚来临。我们诞生于子宫起源于微小细胞，慢慢成长渐渐老化，直至死亡。

有时，当一件东西从一个状态突然跳到另一个状态，感觉上可能还行但就是不太对。

故意设计的比较慢的转场效果感觉很糟。当设计一个应用、界面或者任意类型的结构化内容时，我们必须要确保当用户抵达一个新页面或新状态时知道他们从哪里来。从一个屏幕或一组内容到其他地方的转场效果应该自然且应该在各种配置下的设备上进行测试以得到更宽泛的效果感受评估。转场太快，可能令人有断裂或跳跃感；太慢，用起来很绝望。

当讨论到设计时，“转场”这个词通常会唤醒人们对于ppt或用廉价视频编辑软件做出来的自制电影的印象。但所谓转场过渡不仅只是如此。

more »

2
 506

从苹果标志演变——谈品牌标志发展

|品牌创意|2012/03/16

在今年3月，苹果iPad发布会上我们看到彩色的的苹果标志。从彩色回归到彩色，苹果标志在设计上的一次回归，彩色的晕染渐变给人带来一种千变万化的感觉，使标志更富有质感和艺术气息。也许是在向苹果前任CEO乔布斯致敬，也许是代表了新一代的iPad选用了更为惊艳的高分辨率视网膜屏，也许是苹果下一个产品的发展方向……

而这一新标志显然与以往苹果标志风格不同，在当今品牌标志发展趋势中苹果并没有一味的追求简约，这是为什么呢？

more »

2
 1,001