Koubei UED

2009新年快乐，你一点红@^注1

领衔主演：乌.web2点雷.龙茶 导演：西芹点击看大图

阅读全文»

在我们的生活中，需要接触大量的带有机械按键的物品。当你用手指按下按键的时候。都会或强或弱的感受一股（嗯，也有可能是一丝丝）反作用力传递到你手指的神经末梢。这是一个完整的反馈过程。

我们把从开始按到按下的过程关键帧分解模拟下。

图1：

阅读全文»

两年前发表的《The visual design of Web 2.0》中提到“Rounded everything”，圆角因使人感觉舒适的友好风格而变得无处不在。这个无处不在也让很多前端工程师累个半死，YAHOO Performance Research Engneer Team的Nicole在讲演《Designing Fast Websites》中用的副标题是don’t blame the rounded corners!，从侧面也说明了圆角给实现者带来的困扰：实现麻烦、兼容困难、性能不佳。而W3C早在2002年的CSS3草案中就加入了一个叫border-radius的属性，通过它可以直接来定义HTML元素的圆角。 阅读全文»

哪行哪业都少不了基本功，都说“马步”要扎得稳。在都快说烂了的以目标用户为中心设计的今天，还是要勤练基本功的。不多说了，先了解下“设计的3个C”：

一、构图(Composition)：
一个设计的构成因素如何在视觉上结合安排。构图中包括放置、组合、排列、视觉流动，以及布局上的空间区分。

二、构成因素(Components)：
它们是设计中使用的视觉因素。照片、图画、图标、排版、划线、装饰、边缘和背景，全都是构成因素。

三、概念(Concept)：
主题、内涵、信息和风格方面的抽象归纳。一个设计或一个形象的这种难以明说的意蕴，对于它的视觉表现和信息传达至关重要。

利用以上3个领域的一些基本原则，对于你的创造过程——无论是提取概念还是建构布局，或者是设计作品的最后定稿——都会提供一些实用的、通用的思路。

对于一个设计来说，当它的构图、构成因素和概念都已到位，并且协调一致地为目标观众与目的服务时，它就成功了。
阅读全文»

阅读全文»

在日常的前端开发工作中，我们会经常的与HTML、javascript、css等语言打交道，和一门真正的语言一样，计算机语言也有它的字母表、语法、词法、编码方式等，在这里我简单的谈一下前端HTML与javascript日常工作中常碰到的编码问题。

在计算机中，我们储存的信息都是用二进制码表示的。我们认识的、屏幕上显示的英文、汉字等符号和储存用的二进制代码的互相转换，就是编码。

阅读全文»

有没有想过用尺子来直接量网页上的区块间距，文字行高？屏幕标尺就是干这个的。

这个功能非常适合F2E在调试样式尺寸的时候使用。
阅读全文»

最近对list设计感兴趣，今天说的是list视图方式的设计。感觉有些细节非常有意思，拿出来跟大家讨论。

首先我们来看下windows下文件夹管理的查看模式选择（xp为例）：
这个功能带给用户更多个性化和便捷的选择。比如我选择的是图片文件夹。系统这时候自动新增加了幻灯片查看模式，非常的人性化。除此之外经常用到word软件也提供多种视图选择。

示意图：

阅读全文»

设计创新源于生活
——从生活中寻找灵感

对于这个话题的探讨网上比较多，很多人都聊过，在很多分享中，都会出现这样的话题，但还是值得我们去不断的探讨下去。前不久同事做了个类似的分享，08年的UPA会议主题也是创新,为亚洲创新。今天也想谈谈自己的感想。

每天忙忙碌碌的设计同伴们，大家可以一起来想想这个问题，你有没有在做某个产品的时候（或曾经的某些时候）有过这样的感受：“今天做的东西没什么感觉”，然后就开始漫无目的寻找，寻找触发自己灵感的源泉，这样的漫无目的有两种情况一种是还没有把产品需求了解的很清楚，这里更想说的是第二种，知道了产品的需求和其要表达的目的，但还是没感觉，不知道通过什么样的方法和表现去更好的呈现出来。这样的无助需要平时的积累、观察、思考，这个谁都不会否认。
阅读全文»

文本的排版依据语言的不同会有一些格式上的要求，比如简体中文中类似逗号、分号等标点符号不会出现在一行的开头，对于英文来讲就是一个完整单词不会在两行显示，浏览器会依据类似这样的原则来显示文本。但是由于网页有宽度限制的，连续的超长的字母、数字或标点符号超出其所在区域宽度的限制而导致影响页面视觉，如例1所示。这个问题在显示用户输入信息时尤为突出，这里就是要说如何解决这个问题。

在CSS3草案中，对文本的处理新增了两个新属性word-wrap和word-break来解决这个问题：

1. {word-wrap:break-word;} ：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行，且允许非亚洲语言文本行的任意字内断开
2. {word-break:break-all;} ： 内容将在边界内换行，如需要则词内换行（word-break）也行发生

阅读全文»