Javascript-Selectors-1

未标题-2_03

这次主要拿我们最常接触的“推广页面”来举例。推广页面第一屏就是给用户的肆意印象,一定要抓住用户的心。这就是为什么当我们在做一个页面的时候需求方不停的在强调要热闹,字要大。其实他们想说的是这个页面的视觉要有冲击力,重点的地方应该用抓住眼球的设计元素。现在用户见多识广,什么包邮/免费/搬家/限量这样的词都不足以吸引他们。只有把握住用户的需求点,才有看下的动力。以wonderbra举例来说,这是一个神奇bra的站点,主要是介绍他们家bra的,整个页面营造的是一个封闭但是清爽简洁舒适的室内环境,有点类似更衣室的感觉。使用吊灯/便签/穿衣镜/沙发/等元素来完善整个房间,还有一个诱人的美女穿着bra展现生活中的不同状态(姿势 – -),这样瞬间拉近了用户和产品之间的距离。

444

氛围营造

个人觉得首先营造一个氛围是必须的,这个氛围要很给力。越是富有意境的图形越能抓住用户的视线并快速传递所携信息。文字是直白的,图片是用线序的方式来抽托主题。我们要把这个活动/产品推广出去就好象我们在给用户秒速一个生动的故事。情节生动才会引人入胜。视觉设计师讲故事的技巧就是我们的表现风格。(眩光/实体/手绘/虚幻空间/平面…)

标题凸显

当一个空间氛围搭建好了,接下来所有的元素都要配合这个空间。标题是一个活动的点睛之笔。主标题一般都是精辟简短,概括了整个活动的专题商业需求。副标题一般是起解释说明的作用,描述该活动的利益点。所以在视觉处理上标题是要重点刻画的,将其拆分做一些形状,色彩,大小,字体,质感,排版的变化和突破是必不可少的。但是切记不要做的太过,以上提到的6种选2~3个即可,不然就脱离了整体的页面。

排版设计

人物等细节的素材的选择是根据最先制定的风格样式来完成的。怎样将这些东西结合在一起就是靠设计师的排版组合。这里会涉及到色调,构图比例,质感搭配的经验。
qqq2未标题-2cc
以这个推广为例子,拿到DEMO的时候,主标题是“清凉一夏,日本流行风”要营造一个夏季的氛围,我首先想到的就是沙滩/美女/夏威夷这样的一个场景,长裙/海浪是必不可少的元素,页面承载的都是服装的产品信息,所以要选一个有长裙的美女,接着就是想到木制/相册/便签/手绘风这样的质朴舒服的感觉。我想营造一个清凉的感觉就选用清新的蓝天白云做背景。为了凸显主题将背景颜色调灰然后整片叠底上一层沙滩,两个图层分界的地方不能很生硬,选用了墨迹的笔刷有一个点点沙粒被剥开的过度。
开始做字体的时候想到的是红色,橙色有夏天烈日的感觉,但是因为是清凉,所以颜色不能过重。用夏威夷的手绘花朵点缀字体,在“一”的处理上放上一个实物的海螺,要这个标题更加的生动。下方的利益点文字比较多,不妨选用了手绘的方式表达。

未标题-2_04

查看更多

A/B测试:实现方法

A/B Testing 实现方法

上文介绍了 A/B 测试的基本概念,接下来我们继续探讨如何实现 A/B 测试。

我们先来看一个图:

A/B testing 部署概念图

(注:感谢Algo提供本图。)

上图展示了 A/B 测试的实现原理。从左到右,四条较粗的竖线代表了 A/B 测试中的四个关键角色:客户端(Client)、服务器(Server)、数据层(Data)、数据仓库(Data Warehouse)。从上到下代表了三种访问形式:无 A/B 测试的普通访问流程(Non AB test)、基于后端的 A/B 测试访问流程(Back-end AB test)、基于前端的 A/B 测试访问流程(Front-end AB test)。

一般情况下,用户在一次浏览中,会从客户端(Client)发起一个请求,这个请求被传到了服务器(Server),服务器的后台程序根据计算,得出要给用户返回什么内容(Data),同时向数据仓库(Data Warehouse)添加一条打点信息,记录本次访问的相关信息。这个过程也就是图上横向的流程。数据仓库收集到足够的数据之后,就可以开始进行分析(Analytics)了,这也即是图中右上角的部分。

A/B 测试需要将多个不同的版本展现给不同的用户,即需要一个“分流”的环节。从上图中我们可以看到,分流可以在客户端做,也可以在服务器端做。传统的 A/B 测试一般是在服务端分流的,即基于后端的 A/B 测试(Back-end AB test),当用户的请求到达服务器时,服务器根据一定的规则,给不同的用户返回不同的版本,同时记录数据的工作也在服务端完成。

基于后端的 A/B 测试技术实现上稍微简单一些,不过缺点是需要技术部工程资源介入,另外收集到的数据通常是比较宏观的PV(Page View)信息,虽然可以进行比较复杂的宏观行为分析,但要想知道用户在某个版本的页面上的具体行为往往就无能为力了。

基于前端的 A/B 测试则可以解决上面的问题。它的特点是,利用前端 JavaScript 方法,在客户端进行分流,同时,可以用 JavaScript 记录下用户的鼠标行为(甚至键盘行为,如果需要的话),直接发送到对应的打点服务器记录。这样的好处是不需要技术部(如果你们和我们一样,前端工程师与后端工程师分属不同部门的话)参与,并且可以比较精确地记录下用户在页面上的每一个行为,甚至包括后端方法难以记录到的无效点击!

下面,我将重点介绍一下我们在基于前端的 A/B 测试上的一些实践。

查看更多

Javascript-Selectors-0
未标题-2_01

未标题-2

来公司刚好一年了,接触了不同的视觉需求这里做一个小分享。

首先我说一下阿里巴巴B2B视觉设计的分类,主要分为产品视觉和推广视觉,产品视觉锻炼人的逻辑思维能力/细节的处理/规范执行。推广视觉更加偏向展现层,对视觉表达的能力要求很高/培养色感/有效的提高视觉设计师的表现技巧。个人觉得只有纵向发展到达一定的深度才有基础对横向扩展,所以最基础的是视觉表现力提高。

查看更多

Banner设计

Banner设计

前几天,我受到了一次打击,之前海盐的紧固件的专场上线后,实际的效果与我原本的设计相去甚远。究竟是什么原因造成了这样的差异呢?在经过一些对照比较后发现,问题就出在“Banner的设计”上。线上的版本只是将一些简单的未经处理的图片放了上去,话说术业有专攻,倒也是为难了运营的同学。一个好的页面是由若干个优秀的点组成,今天在这里就以首页Banner工业品类为例,进行模板化的粗浅总结,以期望对往后在保证Banner设计质量的前提下提高工作效率有所帮助。

我将一块好的Banner设计总结出了3大条件:

1.明确的信息传达;之所以将这一条列为第一点是因为Banner最主要的目的在于告

诉用户我们要干什么,我们要告诉他们什么。在网络世界里,我更倾向认为其是一个能真正体现个人意志的地方,如果我们不能在最短的时间内把我们想说的传达给用户的话,那用户会毫无顾虑的选择离开,而不用考虑什么“情面”。在具体的Banner设计中,信息的传达方式无外乎2种——图片和文字;图片是一种最直接的传达模式,也是用户理解成本最低的信息接受渠道,因此图片一定要选择明晰的,一眼看上去就知道到底在卖什么,要表达什么。

而文字,是要进一步的告诉用户,我们这个是干什么呢,能给用户带来什么,是打折呢还是新货上市?因此,我们要按照我们的利益点的轻重来依次展现,例如我们最大的卖点就是“2折销售”,那么毫无疑问,“2折销售”的字样一定要大,要醒目,其余的则需要相应的弱化。

2.合适的创意;一直以来我都认为我们做的其实是“戴着脚铐”的设计,我们需要在一定的框架内进行设计,否则网站的整体性从何谈起,毕竟我们做的是设计不是艺术。

那Banner具体如何来“创意”呢?(之所有选择“创意”这个词,是因为“设计”包含文字排版,整体创意等,而这里说的是具体的创意)也许Banner的创意有千万种,但是有一种是较容易实现并能在之后的其他设计中通用的,这便是“氛围的营造”。所谓“氛围的营造”就是指根据具体产品的特性来烘托周围的气氛,这个气氛可以是一个很小的相关元素,例如下图,所有的设计都在于机器迸发出的火花,这虽然只是一个元素,但是却可以让死气沉沉的工具“活起来”,最为关键的是这个元素承载了多种电动工具的“共性”,换句话说就是在不同的电动工具的Banner设计中都可以使用到。

图片1

3.优良的素材;很多时候,一个拙劣的素材会毁掉一个很好的创意,可以说素材是Banner设计中的点睛一笔。那么什么样的素材算是好的素材呢?我个人觉得有2点:一是较好的摄影效果,虚实有别才能形成较好的空间感;二是要靠设计师自身去辨别寻找。我总是认为,没有丑陋的事物,只是我们没有发现独特的美。就拿下面两幅图来说,同样的元器件,差别在哪里?

图片2

查看更多

GC与JS内存泄露

Javascript-Selectors

Javascript有没有内存泄露?如果有,如何避免?鉴于最近有好几个人问到我类似的问题,看来大家对这部分内容还没有系统的研究过,因此,打算在这里把个人几年前整理的一些资料和大家分享一下。

首先,可以肯定的说,javascript的一些写法会造成内存泄露的,至少在IE6下如此。因此,在IE6迟迟不肯退休的今天,我们还是有必要了解相关的知识(虽然大部分情况下,js造成的这点内存泄露不是致使电脑运行变慢的主要原因)。相关的研究主要集中在05-07这几年,本文并没有什么新的观点,如果当年有研究过的朋友,可以直接忽略。

作为前端开发人员,了解这些问题的时候,需要知其然也知其所以然,因此,在介绍js内存泄露前,我们先从为什么会有内存泄露谈起。

说道内存泄露,就不得不谈到内存分配的方式。内存分配有三种方式,分别是:

一、静态分配( Static Allocation ):静态变量和全局变量的分配形式。如果把房间看做一个程序,我们可以把静态分配的内存当成是房间里的耐用家具。通常,它们无需释放和回收,因为没人会天天把大衣柜当作垃圾扔到窗外。

二、自动分配( Automatic Allocation ):在栈中为局部变量分配内存的方法。栈中的内存可以随着代码块退出时的出栈操作被自动释放。这类似于到房间中办事的人,事情一旦完成,就会自己离开,而他们所占用的空间,也随着这些人的离开而自动释放了。

三、动态分配( Dynamic Allocation ):在堆中动态分配内存空间以存储数据的方式。也就是程序运行时用malloc或new申请的内存,我们需要自己用free或delete释放。动态内存的生存期由程序员自己决定。一旦忘记释放,势必造成内存泄露。这种情况下,堆中的内存块好像我们日常使用的餐巾纸,用过了就得扔到垃圾箱里,否则屋内就会满地狼藉。因此,懒人们做梦都想有一台家用机器人跟在身边打扫卫生。在软件开发中,如果你懒得释放内存,那么你也需要一台类似的机器人——这其实就是一个由特定算法实现的垃圾收集器。而正是垃圾收集机制本身的一些缺陷,导致了javascript内存泄露。

查看更多

DIY简易抢答器

DIY简易抢答器

部门的竞赛活动有抢答的环节,但是没有抢答设备,于是google了一下相关的软件,发现现行软件都是依赖于硬件的。

偶然发现有人提到可以多个键盘操作一个文档的概念,于是突发奇想,这种方式稍微改进一下其实就是抢答器的原型嘛。
查看更多

A/B测试:基本概念

1-1

网站设计中,我们经常会面临多个设计方案的选择,比如某个按钮是用红色还是用蓝色,是放左边还是放右边。传统的解决方法通常是集体讨论表决,或者由某位专家或领导来拍板,实在决定不了时也有随机选一个上线的。虽然传统解决办法多数情况下也是有效的,但A/B 测试(A/B Testing)可能是解决这类问题的一个更好的方法。

所谓 A/B 测试,简单来说,就是为同一个目标制定两个方案(比如两个页面),让一部分用户使用 A 方案,另一部分用户使用 B 方案,记录下用户的使用情况,看哪个方案更符合设计目标。当然,在实际操作过程之中还有许多需要注意的细节。

查看更多

浅谈按钮分组和位置

1-2

按钮分组

按钮的分组可以让一个界面变得具有自我描述能力.在复杂的布局中,组织良好的各组按钮用以选择,而且因为很明显,这样可以很快告诉用户有哪些功能可以使用。

几个按钮放在一起,因为它们可能完成类似的功能。我们可以看范例iTunes的主窗口,四个角分别放置了一组按钮,界面中间的歌曲也有很多的行动点。加上滚动条,该界面只有有14个按钮。确实有很多的功能,不过因为视觉上和语言上的巧妙组合,并不会给用户很乱的感觉。

查看更多

YQL介绍

1-9

Neo是一个小公司的Web工程师,老板Morpheus需要Neo开发一个Web程序,这个程序要求:

1.用户能够根据关键词获取Flickr上的图片信息,如搜索瀑布(waterfall)就能获得与瀑布有关的图片;
2.如果图片有地理标识,根据地理标识,获取这个地方的相关信息;
3.顺便向用户显示当地最近的天气情况,说不定用户想去旅游哦。

查看更多