April 13, 2010
你是一个职业的页面重构工作者吗?
"做为一个专职的页面重构者,我们从事的工作简单的说就是“将设计稿转换成WEB页面”,这一过程可以很简单到直接把PSD从PS里导出成网页;也可复杂到需要考虑页面中每个标签的使用,考虑“页面性能”。以“前端工程 师”为目标的同学可能会不愿承认将页面重构这块分出来,但随着工种的细分,加上页面重构本身的专业性,独立为一个职业也不是不可能,至少我现在从事的就是 一个专职的职位。如果你觉得一个前端工程师必须去画设计稿,可以不理会下面的内容。\n单纯的页面重构,所涉及到的工作内容一般是“分析设计稿=\u0026gt;切图=\u0026gt;写HTML和CSS”,虽然看 起来很少,但要做好这份工作,绝非所想的那么容易。原因很简单:工作内容单一,在时间和工作量上必会很苛刻,往往跟设计师的工作时间是3:1,即设计师给 三天的时间,制作只给一天的时间完成;在这种工作强度下,很多人都是靠着对这份工作的喜爱在维持着,一旦工作热情消失,很容易就会变得枯燥,保持热情也成 了重构工作者(也许是所有参加工作的人)应该具备的能力。\n跟“前端工程师”所要求的有所不同,“页面重构”虽然也是“前端工程师”的一个范畴,在职业化中,对专职的页面重构者,要 …"
April 13, 2010
用户研究方法——用户测试法
"“这是什么啊,用不明白,体验太差了!”、“在哪里登录?找不到啊!”、“谁知道这是个按钮可以点啊,像个图片!”在产品体验中,我们经常会听到这 样那样有关产品体验的声音。而主动并客观地去发现这些问题(可用性问题)的方法之一,就是我们今天要介绍的用户研究方法之一——用户测试法。\n什么是用户测试?通俗地讲,用户测试就是通过给用户制定任务,在用户执行任务的过程中,发现产品设计的不足,并为产品优化提供依据的一种方法。\n通常情况下,根据目的不同,用户测试可以是定性地发现问题、也可以是定量地比较两个竞品的优劣。根据测试产品特点不同,可以采用边做边说的用户测 试、也可以采用回顾式用户测试、甚至可以采用协同式用户测试等。用户测试可以用于产品设计阶段测试产品低保真原型、也可以用于产品测试阶段在发布前发现重 大的可以优化的可用性问题、还可以用于产品发布以后,为下一个版本的优化提供依据。\n一般情况下,根据ISD产品特点、时间等条件的限制,在产品测试阶段或者产品发布以后以发现可用性问题为主的边做边说用户测试较为常见。下面将以迷 你屋用户测试为例,来说明如何进行一场简单的以发现问题为主的边说边做法用户测试。\n迷你屋 …"
April 13, 2010
关于导航的探讨
"许多网站缺乏针对性和友好的导航设计,难以找到连接到相关网页的路径,也没有提供有助于让访客/用户找到所需信息的帮助,用户体验非常糟糕。这篇文 章,我们尝试就网站导航交互做一些探讨。\n首先对于WEB交互设计师来说,解决上面遇到的问题,使之简单的方法是设计一套完善的网页导航系统。\n优化网站导航设计的目的 一个网站导航设计对提供丰富友好的用户体验有至关重要的地位,简单直观的导航不仅能提高网站易用性,而且在方便用户找到所要的信息后,可有助提高用 户转化率。 如果把主页比作网站门面,那么导航就是通道,这些通道走向网站的每个角落,导航的设计是否合理对于一个网站是具有非常大意义的。\n1) 决定用户在网站中穿梭浏览的体验,这一点是最基本的。 2) 网站导航设计合理,可以将网站的内容和服务最大面积的展现在用户面前。 3) 合理的导航设计可以增加用户黏性,提高网站的浏览深度,从而提高网站PV值。 4) 促进用户消费,提高网站盈利。引导用户消费,将用户真正需要的产品和服务展示在他面前,甚至用户想不到的服务你也呈现。 5) 提高网站广告价值,增加网站广告收益。 ……\n网站导航的常见结构 雅虎的网页设计一直是国内 …"
April 13, 2010
全方位清理浮动
"清除浮动一个凡是做页面的人都会遇到的一个东西,但是是否大家都能够清楚的知道,全方位的了解呢?于是一闲下来了马上写了这样的一篇文章,不能讲面 面俱到,然而基本能将我所知道的倾囊相授了。\n我们粗略的一起来看看清除浮动的办法一共有多少个(IE里面用zoom:1就不写了,下一个专题再写)。对应的 DEMO 采用伪类:after进行后续空制的高度位零的伪类层清除 采用CSS overflow:auto的方式撑高 采用CSS overflow:hidden的方式产生怪异适应 采用display:table将对象变成table形式 采用div标签,以及css的clear属性 采用br标签,以及css的clear属性 采用br标签,以及其自身HTML的clear属性 粗略的看,他们都能将问题解决;然而他们另外一方面又有着各自的利弊。(一一对应) 优点结构语义化完全正确,不会产生其余的怪异问题。 缺点复用方式不当容易造成代码量急剧增大。 建议最外层轻浮动时使用,或清晰模块化复用方式的人使用。 优点结构语义化完全正确,代码量极少。 缺点多个嵌套后,点击最外层的轻浮动框会遭成最外层至最内层内容全选(FF); …"
April 13, 2010
页面重构中的模块化思维
"最近被“模块化”缠身,又是文章又是PPT的,被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考,大多都是我自己从事页面重构这份 工作的经验和理解,在一定程度上存在局限性,也希望自己能温故而知新。\n“模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓,就像“Ajax”。不过做为页面重构发展的一种趋势,越来越被大家重视,不自觉 也满口的“模块化”,只是你真的理解什么是“模块化”吗?\n什么是模块化? 对“模块化”的解释,在 CNKI 中就有28种。可见“模块化”思维使用的广泛。最接近页面重构中的“模块化”,现有的解释应该就是软件开发中的解释了。\n先看一下百度词条是怎么解释“ 模块化 ”的:\n模 块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能,所有的模块按某种方法组装起来,成为一个整体, 完成整个系统所要求的功能。模块具有以下几种基本属性:接口、功能、逻辑、状态,功能、状态与接口反映模块的外部特性,逻辑反映它的内部特性。在软件的体 系结构中,模块是可组合、分解和更换的单元。\n相关的书籍也蛮多的,有兴趣的同学可以搜一下。需 …"
April 13, 2010
用CSS 3将我们带入下一个高度吧!
"“ CSS 3 不是新事物,更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里,已经准备好了首次登场,呷着咖啡,等着浏览器来铺上红地毯。 你看,浏览器需要跟上了…… ”\n–谨以此文纪录ISD WEBTEAM 09年Q2力作:CSS 3.0 中文参考手册\n背景\n苏昱的《样式表中文手册》为代表的 CSS2.0参考资料伴随了国内众多web设计师们走过了近10年的时光,这种影响是深远的,但随着CSS技术的不断发展,设计师们多受传统资料的影响, 不能超脱现有的篱笆,给自己背上了沉重的包袱。你是否已注意到CSS 3已经蓄势待发?你是否渴望开始使用它们却又不知从何下手呢?正当CSS 3新特性备受期待的时候,我们的CSS3.0 中文参考手册就应运而生了……\n什么是CSS 3?\nCSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。\nCSS3.0 则表示下一版本的CSS,3.0是版本号。\nCSS 3 给我们带来了什么惊喜?\nCSS3.0对于我们Web设计人员来说不只 是新奇的技 …"
April 13, 2010
[译]Efficient, maintainable CSS
"翻译自 Russ Weakley 的 Efficient, maintainable CSS 翻译自Russ大师的一篇关于如何书写高效、可维护、组件化的CSS的演示文档。Enjoy~"
April 13, 2010
深入 CSS 行高
"翻译自 Russ Weakley 的Line Height\n一个简单的, step-by-step 关于 CSS 行高的演示文档, 涵盖行间距, 如何应用各种类型的行高值, 当然还有 inline box 模型介绍, 希望能满足您 (但实战应用在中文字体或中英文字体混合,以及IE678,XP win7里,行高规则又有所不同,泪流满面)"
April 13, 2010
mysql中的表分区
"表分区为海量数据的存储提供了一种更有效率的储存方式,可通过分区将表的数据分开存储在不同的磁盘上,提高数据检索和操作的效率。\n在SQL Server中进行表分区操作,包括三个步骤:\n创建分区函数 CREATE PARTITION FUNCTION FN_Partition AS RANGE LEFT FOR VALUES (N’2008-01-01T23:59:59′, N’2009-01-01T23:59:59′, N’2010-01-01T23:59:59′)\n此分区函数采用时间进行分区,共有4个分区,边界值为括号里的时间值\n第一个分区为: 时间 第二个分区为: N’2008-01-01T23:59:59′\u0026lt; 时间 第三个分区为: N’2009-01-01T23:59:59′\u0026lt; 时间 第四个分区为: 时间\u0026gt;N’2010-01-01T23:59:59′\n创建分区方案 CREATE PARTITION SCHEME [SE_Partition] AS PARTITION [FN_Partition] TO ([xmsddgroup1], [xmsddgroup2], …"
April 13, 2010
web组件分离
"这里Web组件指Web服务器提供的所有基于URL访问的资源,比如动态内容,图片,Javascript脚本,CSS样式表\n我们可以从以下几个方面来看这些Web组件的差异\n文件大小\n文件数量\n内容更新频率\n预计并发用户数\n是否需要脚本解释器\n是否涉及大量CPU计算\n是否访问数据库\n访问数据库的操作主要是读还是写\n是否包含远程调用(RPC)\n值得一提的是,即便是同一Web组件,显然也存在特点的差异,比如负责呈现内容的动态网页和负责用户注册的动态网页,可以\n视为不用的用户组件,再比如由用户上传的大尺寸照片和站点网页的小尺寸修饰图片也存在以上方面的差异,也可以将它们区分对待。\nweb组件分离的目的是便于采用针对性的方法,使得各种Web组件能够充分利用服务器资源。如何实现web组件分离呢?\n最常见的做法是拥有不同的域名:\n如:img.run21.cn\n存放网页中的图片,指向服务器A\nupload.run21.cn\n存放用户上传的照片,指向服务器B\nstatic.run21.cn\n存放静态化的网页,指向服务器C\njs.run21.cn\n存放javascript脚本文件,指向服务器D\n当我们用不同的域 …"