分享设计|分享代码|分享互联网|DESICODE.CN

Design&Code Studio

2010 年 Web 设计风 （上）

五 7

Posted by Wag Jie in 设计|Design | No Comments

Web 设计是个变幻无常的行业，如今已经成为一个包含了美学体验，功能丰富的富媒体，事实上，当今的 Web 正处在黄金时代，我们拥有强大的新工具，唾手可得的丰富资源，庞大的设计社区，以及主流浏览器对 Web 标准的普遍支持。如今的 Web 风潮云涌，令人目不暇接。本文讲述了2010年最新 Web 设计风，这是第一部分。

1. 愉悦的设计

Web 设计师的工作是有效的传递思想，引导用户完成他们的任务并赢得他们的信任，我们有很多方法实现这些，如视觉之美，之惊奇，之愉悦，之难忘。令人过目不忘的设计会在你的品牌和用户之间建立起坚固的，可靠的情感纽带。


Brizk design studio 拥有令人目眩的设计，精美的动画，漂亮的字体和干净的布局，将鼠标放到底部的小鸟上时，会浮显出 Twitter 消息。

以下的这些示例站点，尽管名不经传，但它们在努力表达一些东西，试图融入我们的感受，它们拥有美丽的外观，而更重要的是，让人过目难忘。

Bounty Bev ： Bounty Bev 是一家软饮料公司，这是一个单页式网站，该站的设计简单，清晰，充满个性。

Analog.coop ： Analog 为访问者带来很个性化体验，根据的 IP 显示你地理位置，并告诉你他们的工作人员中有谁离你最近（不过，根据测试，这个消息似乎并没有什么实际价值，不管访问者来自何地，离他们最近的似乎永远是 Alan 和 Jon – 译者）。整站的设计还是充满了乐趣感。

Forrst ： 漂亮的设计，吸引人的视觉元素，富有创意的导航系统。

Read the rest of this entry »

DD_belatedPNG,解决IE6不支持PNG绝佳方案

四 23

Posted by Wag Jie in 代码|Code | 1 Comment

我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.
然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat.
而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及.
原理
这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.
使用方法
1.在这里下载DD_belatedPNG.js文件.
2.在网页中引用,如下:

<!--[if IE 6]>
<script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>
<script type="text/javascript"><!
<!
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg');
/* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/
// -->

3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.
使用a:hover请留意
5-25更新:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,需要以”a:hover”来作为选择器.否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:

<!--[if IE 6]>
	<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
	<script type="text/javascript">
	DD_belatedPNG.fix('.trans,.box a:hover');
	</script>
<![endif]-->

其他方案
在这里还是提供其他方案供大家参考.尽管我觉得DD_belatedPNG最好

Tags: , ,

CSS半透明效果(IE6/IE7/FF兼容)

四 23

Posted by Wag Jie in 代码|Code | No Comments

CSS代码：

.test {
    background:#000;
    color:white;
    width:200px;
    position:absolute;
    left:10px;
    top:10px;
    filter: Alpha(opacity=10); /* IE */
    -moz-opacity:0.1;    /* FF 主要是为了兼容老版本的FF */
    opacity:0.1;    /* FF */
}

如果想让层变成透明但不想让层里的内容变成透明的，可以用以下的方法(需要用到半透明的PNG图片)：
CSS代码：

#content {
position: relative;
width: 300px;
line-height: 22px;
height: 300px;
background-color: transparent;
background-image:url(img/bg.png);
_background-image: none;
background-repeat:repeat;
}
#content #content-bg {
_background-color: #FFFFFF;
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: -10;
filter: Alpha(opacity=60);
}

HTML代码：

<div id="content">
<div id="content-bg"></div>

网页背景是一张固定图片，其上的方框是半透明的，方框里的内容不是半透明，但内容之外的空白都是半透明可以将底部的图片渐显出来。
</div>

这个方法经测试在IE6/7、FF2、Opera9、Safari3.1下可以正常显示，别的浏览器因为条件原因没有测试，有兴趣的朋友可以测试一下。

Tags: , ,

16个Photoshop教程来帮助你成为一个更好的设计师

四 4

Posted by Wag Jie in 设计|Design | No Comments

16个Photoshop教程来帮助你成为一个更好的设计师，稍微有点E文水平的人都应该看得明白什么意思，我就不一一翻译了。

如果你有不明白的，可以使用google翻译，或者其它翻译软件。

Read the rest of this entry »

Tags: , ,

msn.com网站新版设计的分析

四 4

Posted by Wag Jie in 设计|Design | No Comments

本文转自【51flash.cn】

微软在今年的三月九号公布了其对MSN网站的新设计构思。
经过无数个小时的奋战以及分析了超过70000用户的反馈后，最终通过四个月的赶工，完成了对现行版本的改良。 http://www.msn.com
msn网站改版
Read the rest of this entry »

Tags: , ,

网页设计中Typography的完美应用

三 28

Posted by Wag Jie in 设计|Design | No Comments

我们都知道typography多么重要。搭配合适的字体、颜色和特殊效果能极大地帮助你向网页的浏览者传递信息。下面展示的这些网站大多在Header中运用了大字号的typography，也有的在子标题或者其他位置运用typography来吸引读者的注意力。让我们看看其中最好的这些。

STACKOVERFLOW DEV DAYS

Stackoverflow Dev Days

GET FINCH

Get Finch

CARSONIFIED EVENTS

Carsonified Events

POLARGOLD

PolarGold Read the rest of this entry »

Tags: , ,

Microsoft ,Apple,Google用户体验设计原则

三 16

Posted by Wag Jie in 用户体验|UE | 1 Comment

[版权声明]:版权归作者Alite所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.alitedesign.com/

细致的Microsoft

减少概念……增强信心

  • 你是不是引入了新的概念？为什么？真的必要吗？
  • 你能去掉这些不需要的概念吗？
  • 其中的区别有意义吗？
  • 用户体验会延续同样的概念吗？

小的好或坏也很重要

  • 哪些重要的“小事”是经常会碰到的？
  • 哪些小问题是你在着手解决的？
  • 少做一些更好。
  • 不要把小事从你的体验中去除。
  • 为深思熟虑的细节制订计划。
  • 修正小的错误。

看起来和用起来都很棒

  • 你的用户体验哪里最棒？它看起来有那么好吗？
  • 用户第一眼看到的东西能够让人觉得它用户体验很棒吗？
  • 用户体验符合期望吗？
  • 用户很清楚能做什么吗？
  • 是不是只提供了必要的步骤？

要解决的是让人分心的事，而不是可发现性

  • 减少令人分心的事情。
  • 不要让功能自己之间进行竞争。
  • 致力于新的功能。
  • 下列方法不能解决糟糕的可发现问题：
    • 在开始菜单上添加图标。
    • 在桌面上放置图标。
    • 在通知区域放置图标。
    • 使用通知。
    • 提供首次运行体验。
    • 提供功能教程。

旋钮和问题前的 UX

  • 调低问题的音量。
  • 只问一次。
  • 不要要求配置来获取数据。
  • 这个问题是不是已经问过了？
  • 寻找合并统一的机会。

个性化，而非定制化

  • 这个功能是否能让用户自己来表述元素？
  • 你是否能够区分个性化和定制化？
  • 个性化是需要成为新的功能，还是可以利用现有的功能和信息（如用户的位置、背景图片或排列方式）？

体验的生命周期

  • 考虑下列各个阶段下的用户体验：
    • 安装与生成
    • 首次使用与定制
    • 常规使用
    • 管理与维护
    • 卸载或升级
  • 以一个已经使用了 12 个月的用户身份来审视整个体验。它是否具有：
    • 合理的内容
    • 合理的“音量”

为移动人士建造

  • 所有的 UX 原则对于 12 英寸和 20 英寸的屏幕都是等价适用的。
  • 允许用户被打断。
  • 考虑启动和中断（快速恢复，不要妨碍其他用户体验）。
  • 考虑获取或失去连接。
  • 性能永远是用户体验的杀手。

ps:微软的细致可以渗透到产品中的每一个环节，或组成人机界面的每一个像素，实在令人钦佩。

轻巧的Apple

注重设计过程

  • 在设计过程中引入用户交互的5个目标：
    • 了解您的目标客户
    • 分析用户的工作流
    • 构造原型系统
    • 观察用户测试
    • 制定观察用户准则
  • 做出设计决定
    • 避免功能泛滥
    • 80% 方案
  • 优秀软件的标准
    • 高性能
    • 易于使用
    • 吸引人的界面
    • 可靠
    • 灵活
    • 互操作性
    • 移动性

人机接口设计准则

  • 人机接口设计准则：
    • 隐喻（尽量使用隐喻来描述程序的概念和功能，这样可以利用一些已有的概念和知识。）
    • 反映用户的心智模型（用户的心智模型应该在产品的用户接口的设计中体现出来，主要体现在应用程序窗口的布局，工具栏上图标和控件的选择和组织，以及面板的功能等。）
    • 隐式和显式操作（显示的操作清楚的表明了对一个对象操作的结果。隐式的操作通过一些可视化的线索或者上下文来表达结果。）
    • 直接操作 （直接操作是隐式操作的一种，它会让用户觉得可以直接控制计算机显示的对象。）
    • 用户控制一切（允许用户而不是计算机来启动和控制操作。）
    • 反馈和交互（反馈和交互意味着通过合适的反馈以及和程序之间的交互从而让用户时刻知道现在发生了什么，而不仅仅是当事情出错时显示一个警告。）
    • 一致性（在用户接口上的统一可以让用户使用从其他应用程序学到的知识和技巧。）
    • 所见即所得（用户应该可以找到程序的所有功能。）
    • 容错性（提供充分的容错性以鼓励用户使用程序的各种功能─也就是说，大部分的操作都是很容易恢复的。）
    • 感知的稳定性（为了给用户一个稳定的感知，对于对象以及实施在这些对象上的操作，Aqua接口提供了一个清晰的限制集合；为了不破坏用户对稳定性的体验，程序应该保留用户更改过的配置，例如窗口的大小和位置等；提供程序运行的状态和反馈让用户知道程序正在进行的任务，同样能提高感知的稳定性。）
    • 整体美学（整体美学意味着信息经过良好的组织并且和视图设计一致。）
    • 避免“模式”（尽可能的让用户在任何时候都能做他们想做的事情。避免使用模式对话框来将用户锁定在某个操作中，以至于在当前操作完成前用户不能做别的事情。）
    • 管理程序的复杂性（开发一个易于使用的程序的最好办法就是设计得尽可能的简单。）
  • 设计的优先级
    • 满足最低限度的要求
    • 发布用户期望的功能
    • 让您的程序与众不同

ps:苹果的轻巧不仅体现在它的工业设计上，更多的是它的操作系统和软件的用户体验层面。

简洁的Google

Jon Wiley- Google User Experience Designer 在一次专业分享中,提到了Google 的用户体验设计原则:

  • 1. 有用（Useful）：以用户为焦点，关注他们的生活、工作和梦想。
  • 2. 快速（Fast）：争取节省每一个毫秒。
  • 3. 简单（Simple）：简洁就是力量。
  • 4. 魅力（Engaging）：能够唤起新手的好奇心，能够吸引资深用户。
  • 5. 革新（Innovative）：勇于创新。
  • 6. 通用（Universal）：全世界适用的设计。
  • 7. 盈利（Profitable）：为现行的和将来的商业模式做好安排。
  • 8. 优美（Beautiful）：外观具有视觉愉悦性，但是不会令用户分心。
  • 9. 可信（Trustworthy）：值得用户信赖。
  • 10. 人性（Personable）：加入人性化因素。

ps:谷歌的简洁永远是它的产品特色，从谷歌网站的每个界面到浏览器chrome的用户体验与交互，都尽力把复杂问题设计得让用户感觉到最简单。

Tags: , , , ,

塔防游戏：大树防御（BigTree Defense）

三 14

Posted by Wag Jie in 分享|Share | No Comments

BigTree Defense，又是一款经典塔防游戏，跟植物大战僵尸很相似。但是其不俗的游戏创意，以及富有操作性的玩法，加上漂亮的美术和震撼的音乐，可以说是塔防游戏的经典。

游戏以环保为题材，可恶的害虫吃掉了绿色的植物，环境会变的更糟糕，为了创造更好的环境，大树要不断的成长，利用自己的枝干以及各种植物元素组成具有战斗力的大树。你需要合理安排枝干，让树苗成长成一棵最佳的战斗大树。

BigTree Defense攻略初探：鼠标点击选择武器和升级，鼠标可以拖拽树干，空格键选择主干，滚轮调整屏幕大小，方向键盘控制镜头移动。当血条快没的时候，最好选择升级主干，这样血条会全满，尽量延伸枝干，不断的升级武器。你可以用鼠标拖拽枝干去根据情况调整射击范围。更多攻略，大家好好探索吧！也希望分享下。

开始大叔大树防御

还是有点大，需等待（叔强烈推荐）

游戏视频（在等游戏载入的时候先看看视频）

Tags: , , ,

从输入网址到显示网页，这个过程究竟发生了什么？

三 11

Posted by Wag Jie in 分享|Share | No Comments

作为一个软件开发者，你一定会对网络应用如何工作有一个完整的层次化的认知，同样这里也包括这些应用所用到的技术：像浏览器，HTTP，HTML，网络服务器，需求处理等等。

本文将更深入的研究当你输入一个网址的时候，后台到底发生了一件件什么样的事～
1. 首先嘛，你得在浏览器里输入要网址:

2. 浏览器查找域名的IP地址

导航的第一步是通过访问的域名找出其IP地址。DNS查找过程如下：

* 浏览器缓存 – 浏览器会缓存DNS记录一段时间。 有趣的是，操作系统没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。
* 系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）。这样便可获得系统缓存中的记录。
* 路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
* ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
* 递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。 Read the rest of this entry »

完美解决IE6不支持PNG和hover等BUG兼容到IE7,IE8,IE9

二 24

Posted by Wag Jie in 代码|Code | 3 Comments

一直没用Google code，用了才知道Google的强大之处！

Google代码里很有很多开源的项目，还有一些牛人分享的JS代码

我发现一段代码只要沾到你的页面中去就可以完美的解决IE6上的一下BUG

只是可以解决PNG不透明，tr：hover等无效的BUG

使用办法如下：

http://code.google.com/p/ie7-js/
IE7.js

Upgrade MSIE5.5-6 to be compatible with MSIE7.

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE7.js"></script>
<![endif]-->

IE8.js

Upgrade MSIE5.5-7 to be compatible with MSIE8.

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></script>
<![endif]-->

You do not need to include IE7.js if you are using IE8.js

IE9.js

Upgrade MSIE5.5-8 to be compatible with modern browsers.

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE9.js"></script>
<![endif]-->

You do not need to include IE7/IE8.js if you are using IE9.js PNG The script only fixes images named: *-trans.png If you want the fix to apply to all PNG images then set a global variable as follows: var IE7_PNG_SUFFIX = “*.png”; You must set this variable before including the IE7 script. Alternatively, you can set the variable inside the IE7 script element:
The suffix will ignore query string parameters. For more fine-grained control you can also set IE7_PNG_SUFFIX to a RegExp object. If you want to use an alternative PNG solution then set the suffix to something that cannot possibly match:

var IE7_PNG_SUFFIX = “:”;
By default, the PNG will be stretched (this simulates tiling). If you want to turn this off then set the no-repeat property as follows:

div.example {
background: url(my-trans.png) no-repeat;
}
Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.

Download

You may link directly to these files if you wish:

http://ie7-js.googlecode.com/svn/version/

Or go to the downloads section to download the current version.

Getting Started

Here is a nice introduction:

http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html

Demo

http://ie7-js.googlecode.com/svn/test/index.html

The demo pages are currently not reflecting the latest changes. Hopefully this will resolve itself in the next couple of days.

Tags: , , , ,

Get Adobe Flash playerPlugin by wpburn.com wordpress themes