口碑UEDTeam -- IT技术博客大学习 -- 共学习共进步！

• 平板电脑使用场景研究

最近几年，在iPhone、iPad的推动下，移动互联网发展迅猛，越来越火，各种App大战也随之越演越烈，越来越多的互联网公司想进入这块领域并分得一杯羹。而要推出占领市场的移动产品，首先得先了解用户通常或可能会在什么情况下用到移动产品。基于这样的目的，我们做了本次研究。而研究的第一步就是尽可能全面的梳理出了目前平板电脑的各种使用场景；第二步则是将梳理出的各种使用场景跟我们的业务形态和产品架构相结合，经过讨论，挑...

• 首页大屏广告交互设计探讨

一、使用场景用于大型活动推广，频率控制在一季度或一年度一次为宜。二、设计目标 1、效果好！尽量让每位用户都注意到这个活动。 2、干扰小！把对活动不感兴趣的用户的干扰降到最小。三、设计要点 1、是否要遮盖网站内容？不要遮盖。从我们监测的历次大屏广告点击数据来看，广告的点击在首页总点击的占比分布在2%

• 浅议Wap网页设计中的锚点链接

最近做了wap站中的搜索结果页的改版，记录一下关于锚点链接的心得~ 锚点链接一般用于比较长的网页，使用内部链接建立页内目录。单击目录跳转到文本的相应位置，最常见的如“回顶部、模块间跳转”等。关于锚点链接，可用性研究的宗师Jakob Nielsen写过一篇名为Avoid Within-Page Links的文章，排斥锚点链接，认为它有害页面健康，最典型的例子是“返回顶部”，反对原因大致可归纳为：・干扰用户浏览页面；・认为没有必要，浏览器...

• 使用Apparat框架优化你的Flash

诞生背景 Adobe的Flash编译器(ASC, ActionScript Compiler)表现得实在太“昨天”了，加上Flash虚拟机在性能上还有很大的提升空间，Flash很多时候被当做玩具或者被戏称为CPU hog。一般来说，我们很少会手去工优化一个SWF，大多数情况下，它都能良好地运行，但是当一个SWF文件尺寸过大导致加载时间过长或者代码执行时间过长导致帧频过低时，我们就需要考虑对SWF进行优化了，例如代码的精简，静态资源（图片、视频等）的压缩。但是手...

• 跨域资源共享的10种方式

同源策略在客户端编程语言中，如JavaScript和ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？当两个域具有相同的协议(如http), 相同的端口(如80)，相同的host（如www.example.org)，那么我们就可以认为它们是相同的域。

• 优雅地扩大链接响应区域

合理地扩大页面链接响应区域可以提高网页的易用性。同时还要兼顾到链接的交互一致性以及视觉上的平衡，就需要做一些特殊的处理。 .entry p {text-indent:0} 实例一：一张图配一个链接。常规的做法有以下几种：第一种是最常规的，只有链接可点，但整张图不可点，点起来还蛮累的。第二种是把整张图作为一个链接，链接响应区域是够大，但其实那个链接就比较尴尬，不够优雅。第三种是需要前端开发兄弟比较费劲点，设计师要求...

• 多栏自适应布局问题浅谈

在网页局部的布局上，需要采用大量的自适应，来满足不同长度数据、内容的合理呈现。以此保证页面不至于因为内容过多等原因，导致重叠、溢出、撑开等破坏整体视觉效果的情况。这里就简单谈谈几个自己碰到过的自适应问题。 1、两栏自适应布局在实际项目中，常常遇到如红色线框部分的两栏自适应问题。其关键点是，左右两栏均不定宽，右侧栏条目数量不定。针对这种场景，可以采用两栏均浮动的方法。参考 Object-oriented CSS 中应用...

• 三谈Iframe自适应高度

解决跨域、同域、高度不断变化等情况下iframe高度自适应的问题。

• Velocity：TCP与低带宽网络的性能【译】

John的总结是：TCP缓启动意味着网络延迟严格的限制了新链接的吞吐量。他针对这种情况给出以下的建议：非常小心的考虑每一个字节的内容考虑什么应该放在最前面的部分数据包保持你的cookie足够小在前面的三个数据包里为有用的资源打开链接先下载小的资源接受光的速度（使内容更贴近用户）

• 异步完成后新开窗口

在最近一次项目有一个需求，点击按钮――异步提交――异步响应返回――根据响应返回值新开窗口。这有两个要点：异步响应之前不知道要打开窗口的URL；在异步响应事件函数中再去打开新窗口――winodw.open(url)时，一些浏览器会拦截新窗口；第一个约束条件没有突破口，而第二个问题如果仅仅是指让浏览器不拦截JS的新开窗口也比较好处理，这里可以借鉴提交target属性为“_blank”的form表单（对应的blog）或者淘宝怿飞的一篇博客...

• [关注细节的最佳方案]有效期时间格式的展现

最近设计一个优惠券列表，有个属性是有效日期，因为空间有限，必须要把开始日期和结束日期在一行显示，这样就出现一排的数字，日期有好几种我们习惯的格式，哪个更好？上图说话：虽然只是小小的有效期，但列出不同的展现方式，能帮我们找到最佳的方案；平时我们的设计也是如此，常常做了一个方案后，因为花了很多精力，总会不自觉认为它已经够好了；当我们放下包袱，好好听取其他同事的建议，也许会看到很多自己没有考虑周全的...

• 获取Dom元素的X/Y坐标

现在Web页面的交互方式越来越多样化，其中拖放页面元素也是一种很常见的操作。在这类操作当中有两个主要问题需要解决，一个是事件的注册方式，一般处理拖放元素的事件顺序是：捕获鼠标正键按下――注册鼠标移动事件――捕获鼠标正键抬起――注销鼠标移动事件；另一个问题就是拖放元素的位置，即X/Y坐标。这里我主要来讲述后面的问题：如何获取一个Dom元素的坐标。当今已有很多的JS框架封装了获取Dom元素的坐标的方法，我们可以直...

• 重新认识视觉设计

视觉设计是什么，人们怎么认为它的，自己又是怎么对待和理解它，它的核心价值是什么。视觉设计，冒似很艺术，跟艺术相关的职业，给大多数人的印象是做美化工作的，他们比其他人更懂得搭配颜色，PS图片等等诸如花匠般的工作。把它归结为美化，单就这个形容词看来自然变得不那么重要，在很多时候，被认为是个不重要的职能。也许有很多从事设计的人也对它的理解是模糊和不肯定的，那么更加不用说其他人能了解多少，这样的种种导致很...

• 用于打印的页面设计

在网站的一些应用中需要提供用户直接打印页面的功能，最明显的就是电子优惠券，商家根据网站提供的模板输入内容，然后生成优惠券页面，用户打印这个页面即是优惠券。当然最优的做法是根据这个页面生成一个图片文件，用户下载这个图片再去打印，打印的效果就不会受浏览器的设置而受影响打印出来的效果。但如果由于一些原因，为了快速或者节约成本，不去将页面存为图片文件的操作，那么就只有直接将HTML页面直接打印下来，这样就需...

• 双屏显示提升前端开发10%工作效率

双屏不是什么新鲜事，不过相信国内前端工程师还是用单屏的多，前端开发需要同时开启的屏幕太多了…你有没有迷失windows任务栏下n个窗口和ALT-TAB的频繁键盘操作中？利用双屏显示让你从中解脱出来！我也刚用上了双屏开发，效率提升感觉值能有10%，所以来鼓动下大伙都来用双屏吧。 windows的双屏显示有很多种模式，我用的模式是主屏辅屏模式，两个屏是独立的窗口，可以进行窗口全屏。桌面和任务栏之显示在主屏，可以把主屏的一...

• 如何做好一份前端工程师的简历？

春节前在蓝色理想上发了个“雅虎口碑招聘前端工程师 ”的启事，节后收到很多简历，加之HR通过专业招聘网站得到的简历和朋友同事推荐的简历，数量上是相当的多，把这些简历一一看完真是一个漫长而幸苦的体力活，何况我还要仔细认真的去提取和核查有用信息评估其能力，尽量不错过任何一个埋藏在大量简历中合适的人，这绝...

• 如何设计注册激活邮件

最近做了一次口碑网注册流程改造，简单说一下激活邮件的设计上的一些小心得： 1、尽量不要用图片，尤其是别把激活链接做成一个点击按钮。 2、尽量少的给链接，最好只有一个显眼的链接。其他链接一律变短，弱化。链接明文显示。以上两点，都是基于激活邮件的第一要素：简洁，省去所有不必要的干扰元素。让用户打开邮件，快速点击激活链接走人，符合用户的利益，也符合网站的激活达成率要求。这里有个小技巧，可能有些设计师仅从设...