??xml version="1.0" encoding="utf-8" standalone="yes"?>
可见Q目前?00*600的几乎是微乎其微了,1024q是居于上风Q目?9Q?1寸甚x大的昄正在逐步被广泛用,所以Nq前行?78Q?80{等都好像是几个世纪以前的事情了?/p>
再看一l数?/p>
|站 | 首页面宽度 px |
---|---|
Yahoo! | 950 |
淘宝 | 950 |
MySpace | 960 |
新浪 | 950 |
|易 | 960 |
Live Search | 958 |
搜狐 | 950 |
优酷 | 960 |
AOL | 960 |
上面都是Alexa全球排名?00的站?/a>Q而且WordPress的皮肤,癑ֈ?0以上都是960px宽。ؓ什么设计师们都喜欢q个数据(950px/960px)呢?以下部分转自|页栅格pȝ研究Q?Q:960的秘?/a>Q作者:玉伯
设计师们对苹果情有独街在 1024 x 768 的分辨率下,打开FirefoxQ?br />
自然状态下QFirefoxH体的大约?974 x 650. 减掉左右两边7px的边框,|页的实际大ؓ上图中的U色部分Q高宽ؓ 960 x 650.
上面?#8220;自然”出现Q细I自然是不让Z服的。苹果系l的设计者们在没有喝醉酒的情况下选择?60Q而不是其它什?000之类的整敎ͼ自然另有奥妙?/p>
U学界有很多问题都可以归l到数学问题上,我们也从数学着手:
960可以分解??ơ方乘以3?, q?60可以分割成以下宽度的整数倍:
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480
?6U(26 = 7 * 2 * 2 – 2, 减去2是去??60自nQ,我们标记为:
N(960) = N(2^6 * 3 * 5) = 26
Ҏ上面的算法,可以得到Q?/p>
N(360) = N(2^3 * 3^2 * 5) = 22 N(480) = N(2^5 * 3 * 5) = 22 N(720) = N(2^4 * 3^2 * 5) = 28 N(750) = N(2 * 3 * 5^3) = 14 N(800) = N(2^5 * 5^2) = 16 N(960) = N(2^6 * 3 * 5) = 26 N(1000) = N(2^3 * 5^3) = 14 N(1024) = N(2^10) = 9 N(1440) = N(2^6 * 3^2 * 5) = 34 N(1920) = N(2^7 * 3 * 5) = 30
Ҏ直觉Q严D明也不难Q不q还是留l数学系的学生去证明吧)Q我们得C个有的l论Q?/p>
要得N(width)最大,width的取值有两个pdQ?/p>
ApdQ?…, 320, 720, 1440, …
BpdQ?…, 480, 960, 1920, …
N大Q可l合的宽度值就多?strong>Ҏ格系l来_q意味着灵z!
目前l大多数昄器都支持 1024 x 768 及其以上分L率。ؓ了有效的利用屏幕宽度同时保证栅格的灵zdQ可以看?60是非常合适的。这P在目前主显C器下,960成为网|格系l中的最佛_度了。(也许不久的将来,会行1440Q?/p>
以上内容转自http://lifesinger.org/blog/?p=375
从零开始学习jQuery (? 理jQuery包装?/span>
从零开始学习jQuery (? 使用jQuery操作元素的属性与样式
从零开始学习jQuery (? jQuery动画-让页面动h!
从零开始学习jQuery (? jQueryUI常用功能实战
从零开始学习jQuery (十一) 实战表单验证与自动完成提C插?/span>
淘宝|用户体验设计UEDQ?http://ued.taobao.com/blog/
口碑|用户体验设计UEDQ?http://ued.koubei.com/
阉K妈妈用户体验设计UEDQ?http://ued.alimama.com/
阉K巴巴(中国? 用户体验部: http://www.aliued.cn/
阉K软gUED团队Q?http://www.alisoftued.com
19楼UED团队Q?http://ued.dukuai.com/blog/
用户Z心的设计(UCD),UCD大社?http://ucdchina.com/
个h技术博客:
李会军:http://www.dotneteye.cnorg 去过博客园的应该都知道吧Q神仙专家?br />
赵劼Q?a target="_blank">http://www.cnblogs.com/JeffreyZhao/ 同上Qؓ博客员知名专Ӟ特佩服他Q?br />
淘宝玉伯Q?a target="_blank">http://lifesinger.org/blog/ 淘宝前端Q对前端l节研究很深入!博客更新也算频繁?br />
淘宝怉KQ?a >http://www.planabc.net/ 淘宝前端Q花名圆心,博客内容也很值得看?br />
cssrain:http://www.cssrain.cn/ 懒h开发h员一定要ȝ看哦Q资源超多,很多效果例子。特别是jquery?/p>
源码站:
http://www.codeplex.com 微Y?NET源码发布站,很多很好?NET源代?/p>
用户体验QUser ExperienceQ简UUX ?UEQ是一U纯主观的在用户使用一个品(服务Q的q程中徏立v来的心理感受。因为它是纯主观的,带有一定的不确定因素。个体差异也军_了每个用L真实体验是无法通过其他途径来完全模拟或再现的。但是对于一个界定明的用户体来讲Q其用户体验的共性是能够l由良好设计的实验来认识到。计机技?/a>和互联网的发展,使技术创新Ş态正在发生{变,以用户ؓ中心、以Zؓ本越来越得到重视Q用户体验也因此被称做创?.0模式的精髓?#8221;?#8211;癑ֺ癄
现在Q几乎h人都在谈、在做用户体验,有ؓ了用户体验而用户体验的Q有不知何ؓ用户体验Q就乱指挥一通的Q有做了几天可用性改q就宣称飞跃?#8230;..当然Q也有很多是t踏实实为广大h民做实事Q做好品设计的?br />
不管怎样Q以下的思考文字中希望有那么一点点是闪光的?br />
看了癑ֺ癄的词条,l合自己的经验,可以q么理解Q用户体验,是通过接触某样有Ş或者无形的事物后,建立在用戯n上的一个范围比较广的情感叠加,跟乐高积木是一样一LQ堆得好Q可以很高,某一块不EI׃全倒下。那Q到底有多广呢?
l自׃一本书Q我惛_的是淘宝和当当,有h会说Q买书当然去当当或者卓了。我不是q么认ؓ的,首先Q都是网购,淘宝也卖书,q且能讨仯P能了解更多细节,而当当不能,但如果在淘宝上h格太高,没有当当划算Q且不是很急着乎ͼ那我会选择当当?br />
?#8211;q里面有两个点:|络购物习惯L的条件反?/span> ?nbsp; 买卖家之间的交流 Q这两个是体验的一部分?br />
军_上当当后Q打开首页Qlogo旁的“十年品质 攑ֿ低h”Q有ҎQ而导航下左边的这个绿色突出的区域也表明,当当主要核心业务是书!整个配色在视觉上服,而导航和搜烦也让我很快找到我要买的书—《教父》?/p>
——站点的载入速度是个大问题,当当基本能在3U内打开首页Q不错的优化。广告语和用色脓合国内消费h的心理Qv码对于我来说Q觉得:可信赖,不太乱?br />
扑ֈ我要的书后,我点M购买Q进入了我的购物车,有一个疑虑、不舒服Q?/p>
?#8211;不知道这个是好,q是坏,可能对于不同的hQ有不同的感受,q个推荐本n是很好的Q但让我疑惑的是Q它大面U的I间和众多黄色按钮,让我找不着北了Q因为到q步Q我心里想着Q该l算了,但处于商业目的,推荐区域在一定程度上(或许我比较闲的时候,推荐Ҏ有用)q扰了我?br />
接下来的l算程很顺利,我选择的是货到付款Q很好的是:最后提C我Q发货地Ҏq州Q会?-3天后发货Q邮׃很快收到订单生成的邮件。接下来是{待Q三天后Q接到声音不太舒服的电话Q说是当当网的,我想Q应该是书到了。可怜的是,Ҏ攉Ӟ雉不够?br />
?#8211;最l是买到书了Q快递的伙子找不了我的雉Q我也没要了Q书的包装不太好?br />
整个q程QM打分8.5分。ȝ来说Q这本书的购买的体验畅度是很满意的Q没有出现意外的中断Q要知道体验的流E能完整的走完才意味着Q这个品、这个服务,是可用的Q这是根基,其他的视觉效果和折扣{等Q都是徏立在他之上。而流畅度Q就跟用户在q个q程中碰到疑惑和不解的强烈程度是成反比的Q想提高畅度,需要捋清楚Q让q个核心购买程以最短的旉完成Q减干扰?/p>
上面的购书例子,有个地方很重要,那就是最后的U下体验Q我把他作ؓ边缘体验的一U,有别于线上的核心业务?br />
订单下来后,pȝ能根据我提交的送货地址Q选出最q的发货地点Q减物时_q且让购买者知道,q个Ҏ好的Q说明:我一直ؓ你着惟?br />
但快递环节却有点问题Q因为存在一定的不可控因素。送快递的人,需要经q一定的培训Q否则,是在砸当当的牌子。电话中的语气让Z舒服Q书的包装问题也让h不安Q书角磨破了Q就q两个点Q购买者就有可能把整个交易撤销?br />
属于边缘体验范畴的还有很多,例如Q你C友商|D办的一个论坛,门前的v报是否能够传递本ơ论坛的信息、是否能够将友商|的品牌q行诠释Q给你的良好感觉有多?再例如市销人员的着装和谈吐Q在用户眼里Q在一定程度上Q也在间接体验他们的产品Qv码,I着拖鞋的营销Q不会给人好的感觉?br />
边缘体验Q一样重要?/p>
无Ş的体验有两种Q一U是某用户在使用、体验品后得出口碑传播l另外的用户或者潜在用P对于后者,他已开始无形情感体验;另一U是用内而外的,是生产此产品的团队或者说q个企业由内发出的一些信息,有意的或无意的信息?br />
对于W一U,有时候口会军_了某个用h否与产品有缘QD个例子,姨C一个xx牌子的冰,用了两个月,灯管坏了Q打开冰箱门灯不亮了,联系l修后好景不长,q是坏,于是她对d_以后打死也不会买xx牌的东西了,q个d有可能以后就跟这个牌子绝~了Q因为她?#8220;?#8221;的无形体验很不好。当Ӟq个口碑产生的根源,是产品质量本n?br />
而第二种范围包括的就比较大了Q如果是上市公司Q那么你的胦务状冉|否良好;l织l构是不是频J大调整Q员工整体对外的信息攑ְ是否正面Q网l媒体,传统媒体传播的信息是否有利公司发展(不管是不是Y文)Q这些,都是用户或者潜在用戗普通h可能接触到的一面,q也是一个无形的体验?/p>
在初步发展阶D,无数产品和服务都是跟随用户需求,用户需要什么,q什么,以找准需求点为重中之重,q个是对的,但到了品成熟期Q到了市场占有率_高后Q需要考虑的,是引导潮流Q引领用h双赢的方向。web中的视觉概念设计Q汽车中的概念RQ走的,是q个路线?/p>
q个攑֜最后是因ؓ是h都知道,核心产品Q必d好可用性,通过不断q代Q适当做好减法Q提供一个体验好的品。具体到各个产品和服务各不相同,无需展开?br />
MQ?strong>用户体验设计q不复杂Q但需要耐得住性子Q需要注意触角,因ؓQ从接触q个品牌那一刻vQ用户体验就在进行,是叠加还是消耗呢Q就看能否尽量做Ch人UEQ能否将q些好的idea引导、聚合?/strong>2.边缘体验Q一L重要
3.无Ş的体?/h3>
4.引领用户?#8220;体验”
5.核心产品体验
1Q?/span>Ps或者其他图像处理Y件做一个如囄渐变按钮
2Q?/span>Flash做一个简单的囑Ş遮罩效果
3Q把|站童R列表늚l构感重新设计
4Q用ps或?/span>Fw{图像处理Y件对一个网^面图做切片(例图为:Q?/span>
?/span> |页设计分析能力
1Q?nbsp;购物|站的主色调应该是什么样Ԍ交友|站Q体育网站?软g|站Q年ȝ互联|?搜烦引擎Q?/span>
2Q?nbsp;一个网站最多有几种色彩
3Q?nbsp;癑ֺ?/span>googleQ你看哪个觉得更舒服一点?
4Q?nbsp;列出你所知道的几U图像格式,q说出它们之间的不同点和大部分的用?/span>
5Q?nbsp;一般网站的版式有哪几种Q?/span>
6Q?nbsp;如果背景是黑Ԍ那么字体用什么颜色能H出字体Q且不显得刺|
7Q?nbsp;?/span>在红色中加入量的黑Ԍ你觉得应该是U什么感觉?
?/span> |页制作能力
1Q?nbsp;?/span>table?/span>div分别设计一个三行三列的|页Q头?/span>,w体,底部;w体部分Z列)
2Q?nbsp;列出你所用过?/span>Html元素
3Q?nbsp;?/span>li做一个横向的D菜单Q不于三个菜单
4Q背景的哪个属性来定背景囑փ是否固定Q?/span>
?/span> 高应用能力Q选做Q?/span>
1Q?nbsp;?/span>js代码写出一个页面加载后能不断变换背景的效果
2Q?nbsp;利用DOM知识是列Z?/span>ul?/span>li的LQ?/span>li中的内容
3Q?nbsp;写出你会用的兼容个中不同览器的hack css代码Q如IE7 FF
4Q?nbsp;说出你所知道?/span>web标准斚w的知?/span>
5Q?nbsp;高囑փ处理Q可|上查询教程Q:模仿例图
6Q?nbsp;Form表单的哪个属性是表单数据的传送方式?
7Q?nbsp;/images/123.jpg ?/span> images/123.jpg,那种写法是相Ҏ目录的?