"先让我们看一个例子，了解什么是模式化窗口。\n以下是QQ秀商城在非登录时提示登录的一种状态。当我在非登录状态，通过保存形象的方式买一件衣服时，弹出登录对话窗口提示登录。此时，登录对话窗 口锁定商城页，锁定IE，只有当对登录窗口进行操作后，才能够进行其他操作。譬如：最小化IE、浏览商城等。我们可以说，登录对话窗口就是一种模式化窗 口。\n模式化窗口常常给人“坏”的印象，为什么“坏”？是因为它“长”成那个样子？还是因为它通常都说些没用的话，所以用户都不看其中的内容？如果换成一 个浮动层DIV，它就变“好”了？就模式化窗口的形式和“好坏”问题，我们进行了讨论。\n为什么大家会认为它“坏”？ 西贝：“以前系统弹出对话框，用户看不懂，或者不看，给用户的印象大多是一种警告。因此感觉很坏，对用户来讲，很暴力。”（呵呵，可以引用最近流行的，很 陈，很冠希了。）Eele：“当我在填一些注册信息时，需要从另外一页复制一些内容，这个时候弹出alert无法到另一页。”（这种情况我也遇到 过~~）Hiseven：“以前有一些网站，有bug，弹出‘无数’确定对话框，必须全部确定才能进行下一步的操作，于是开始点击一个又一 …"

"交互设计师的一项重要工作就是进行产品原型设计(Prototype Design)。而产品原型设计最基础的工作，就是画出站点的大体wireframe(框架图)并结合批注、大量的说明以及流程图等，将自己的产品原型完 整而准确的表述给产品、UI、重构/开发工程师等等，并通过沟通反复修改prototype 直至最终确认，然后进入后续的设计开发流程。\n要完成以上复杂的设计和沟通工作，需要一个好的原型设计工具。这里就目前常用的和比较热门的工具来分享一下： Word（产品经理比较常用） Fireworks（交互组内推广的） Balsamiq Mockups（近期曝光率比较高） Auxre RP（业界圈子内广为流传）\n一、优势劣势对比 二、操作界面对比 Word：基本是通过绘图工具栏的各种线框来画wireframe。 Fireworks：通过公共库的WEB原型组件库画wireframe。 Balsamiq Mockups：操作类似FW，通过顶部的控件库拉取到工作区域画wireframe。 Auxre RP：基本操作也和FW，Mockups类似，3是工作区域，从5控件库里拉取到工作区域 …"

"为满足用户的视觉追求及产品的背景图片的换肤功能，设计师难免在设计上会用到半透明的效果。因此页面重构师基于视觉及产品的需要，采用了PNG32 的半透明图片还原设计稿。\n但在IE6中遇到png兼容性，及其延伸的种种问题。如：\npng32的图片上在IE6有兼容性问题，原本的透明显示的背景将会失效。 在问题1的基础上，针对IE6采用了CSS滤镜让其透明，但图片不能应用背景坐标定位的方式只能单张使用，这做法不利于带宽流量和请求链接数之余 也不利样式的管理 在问题2的基础上，意味着要把png图片单张切割，并单张应用CSS滤镜 针对以上问题重构师的解决办法如下：\n把背景图片如常的合并，利用相似于背景坐标的方式调用局部图片位置。最大区别在于分别定义了两个无意义的标签。\n一个标签作为模拟背景的载体标签：定义一个作为载体的标签，针对IE6以滤镜的形式导入图片，宽高与背景一 致。 另一个标签作为截取背景局部位置的截取标签：定义此标签宽高与预想调用背景局部位置大小一致，并隐藏其溢出的 部份。 最后计算出预想调用背景局部位置的坐标，定义在载体标签中。 HTML结构如下：\nview plain copy to …"

"很久之前就知道 宜家 ，以前在广州的时候也去过一次，给我的印象就是：大、贵、巧。地方很大，东西很贵，设计很巧。现在住的地方离宜家不远，这个月找时间去逛了下，地方还是那 么大，东西还是那么贵，设计还是那么的巧。虽然没有买什么东西，不过也还是有所收获的，通过宜家的家具设计方法，我们可以聊聊模块化。\n去过宜家的同学应该都有注意到，宜家的家具基本都是组合的，可拆装。模块化的特点也是这样，可以组合，相对独立，在需要的时候可以很方便的加上。那 怎么写可以基本实现这种方式呢？给个简单的例子：\n`\n模块化Demo 模块化结构的例子。\n`\n对应的CSS可以这么写：\n`.mode-a{\u0026hellip;}\n.mode-a h3{\u0026hellip;}\n.mode-a p{\u0026hellip;}\n`\n其中“mode-a”就是这个模块的名称，表示这是名为“a”的模块，现在这个模块可以被放到你所需要的地方。既然是做模块，就不会只有一个，我们 再加一个“mode-b”：\n`\n模块化Demo 模块化的特点： 相对独立\n可移植性高\n`\n对应的CSS可以这么写：\n`.mode-b{\u0026hellip;}\n.mode-b …"

"随着公司业务的增加，需求变的越来越多，团队也因此在不断的扩大，我们经常会遇到几个人协同工作来完成同一件作品或者维护修改别人作品的时候，那么 是什么最让你最感到困扰呢？我们在实现一个表现复杂的页面的同时，CSS文件就会比较繁琐，众多的选择符、属性让人眼花缭乱，那么如何更快的定位、如何更 高效的编写样式呢？CSS的书写被很多人所忽略。关于书写风格，翻看了一些知名网站的作品，发现横向连排几乎成为各大产品项目的主流，然而，每个人对于 CSS的写法各异，这就导致我们工作效率的降低。为了更好的协同工作，保持团队内CSS书写的一致性，几经波折后达成共识，具体书写方法如下：CSS属性 横排书写，选择符纵排书写，每个”,”(逗号)后必须换行;\n重构组代码书写规范示例：（其中数字只用做示范，实际应用中不建议用数字命名。）\n.class_name_1 .class_name_1_1, .class_name_2 .class_name_2_1 .class_name_2_1_1, .class_name_3{style1:value; style2:value; styel3:value; }\n有人说，好代 …"

"做为一个专职的页面重构者，我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程 师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是 一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不理会下面的内容。\n单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=\u0026gt;切图=\u0026gt;写HTML和CSS”，虽然看 起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给 三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成 了重构工作者（也许是所有参加工作的人）应该具备的能力。\n跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要 …"

"“这是什么啊，用不明白，体验太差了！”、“在哪里登录？找不到啊！”、“谁知道这是个按钮可以点啊，像个图片！”在产品体验中，我们经常会听到这 样那样有关产品体验的声音。而主动并客观地去发现这些问题（可用性问题）的方法之一，就是我们今天要介绍的用户研究方法之一——用户测试法。\n什么是用户测试？通俗地讲，用户测试就是通过给用户制定任务，在用户执行任务的过程中，发现产品设计的不足，并为产品优化提供依据的一种方法。\n通常情况下，根据目的不同，用户测试可以是定性地发现问题、也可以是定量地比较两个竞品的优劣。根据测试产品特点不同，可以采用边做边说的用户测 试、也可以采用回顾式用户测试、甚至可以采用协同式用户测试等。用户测试可以用于产品设计阶段测试产品低保真原型、也可以用于产品测试阶段在发布前发现重 大的可以优化的可用性问题、还可以用于产品发布以后，为下一个版本的优化提供依据。\n一般情况下，根据ISD产品特点、时间等条件的限制，在产品测试阶段或者产品发布以后以发现可用性问题为主的边做边说用户测试较为常见。下面将以迷 你屋用户测试为例，来说明如何进行一场简单的以发现问题为主的边说边做法用户测试。\n迷你屋 …"

"许多网站缺乏针对性和友好的导航设计，难以找到连接到相关网页的路径，也没有提供有助于让访客/用户找到所需信息的帮助，用户体验非常糟糕。这篇文 章，我们尝试就网站导航交互做一些探讨。\n首先对于WEB交互设计师来说，解决上面遇到的问题，使之简单的方法是设计一套完善的网页导航系统。\n优化网站导航设计的目的 一个网站导航设计对提供丰富友好的用户体验有至关重要的地位，简单直观的导航不仅能提高网站易用性，而且在方便用户找到所要的信息后，可有助提高用 户转化率。 如果把主页比作网站门面，那么导航就是通道，这些通道走向网站的每个角落，导航的设计是否合理对于一个网站是具有非常大意义的。\n1） 决定用户在网站中穿梭浏览的体验，这一点是最基本的。 2） 网站导航设计合理，可以将网站的内容和服务最大面积的展现在用户面前。 3） 合理的导航设计可以增加用户黏性，提高网站的浏览深度，从而提高网站PV值。 4） 促进用户消费，提高网站盈利。引导用户消费，将用户真正需要的产品和服务展示在他面前，甚至用户想不到的服务你也呈现。 5） 提高网站广告价值，增加网站广告收益。 ……\n网站导航的常见结构 雅虎的网页设计一直是国内 …"

"清除浮动一个凡是做页面的人都会遇到的一个东西，但是是否大家都能够清楚的知道，全方位的了解呢？于是一闲下来了马上写了这样的一篇文章，不能讲面 面俱到，然而基本能将我所知道的倾囊相授了。\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）； …"

"最近被“模块化”缠身，又是文章又是PPT的，被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考，大多都是我自己从事页面重构这份 工作的经验和理解，在一定程度上存在局限性，也希望自己能温故而知新。\n“模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓，就像“Ajax”。不过做为页面重构发展的一种趋势，越来越被大家重视，不自觉 也满口的“模块化”，只是你真的理解什么是“模块化”吗？\n什么是模块化？ 对“模块化”的解释，在 CNKI 中就有28种。可见“模块化”思维使用的广泛。最接近页面重构中的“模块化”，现有的解释应该就是软件开发中的解释了。\n先看一下百度词条是怎么解释“ 模块化 ”的：\n模 块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体， 完成整个系统所要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体 系结构中，模块是可组合、分解和更换的单元。\n相关的书籍也蛮多的，有兴趣的同学可以搜一下。需 …"