November,5th,2009

设计72变——寻求banner制作的变化

每周的《午间欢乐购》和《周末疯狂购》,已经成为视觉组的固定需求。从开始接触到现在5个月的时间里,思维也和这些小小banner逐渐碰撞出火花。

前期~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

 

 

▲初期上手,按照熊猫同学一贯的通用排版去做。始终坚持白底,可以不用抠图,改变丝带的颜色,做做字体变形。

 

 

 

▲组织上下达命令,不能一层不变,需要改变。但是改变在哪里当时还没揣摩透,暂且做些颜色上的尝试。由清爽变成浓烈。

 

 

 

 

 

▲似乎是有那么点想通了,试着做风格上的改变,一次可爱卡通风格的尝试。

 

中期~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

 

 

▲年中清仓,促销必然少不了红色,但是在大夏天用太多红色未免太过浮躁,尝试与蓝色的搭配。总感觉3折吸引不到会员了,1折吧~

 

 

 

 

 

▲因为模特的衣服和鞋子的色彩将这次主题定位紫色。个人比较喜欢需求这次的主题,所以很偏心的把心思用在主题字设计上。^_^

 

 

 

 

▲我只想用这个花花背景玩一下,大家先略过吧= =~

 

 

 

 

 

 

▲荧光粉和黄是经典的促销配色。吐血价放在整个视觉中心。貌似构图上有所醒悟。

 

近期~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

 

 

 

▲好久没玩小粉嫩,顺便做个空间感试试。这是我一贯喜欢的甜美感,曾经有段时间刻意避免使用粉嫩,现在重新回归一下。

 

 

 

 

 

▲看到需求文案就觉得要cool,现在看来,当时想得太简单,欧美范很不够哪!应该力求简洁大气才对。

 

 

 

 

 

▲街拍立马就想到杂志感,需求给的文案是街头达人秀,觉得少了点什么,恩?加上look!才是杂志的范儿。

 

 

 

 

 

▲秋天到了,很庸俗的用了叶子和棕黄色系。个人对模特MM和旁边的箱子很喜欢,秋天是个该拖着箱子去旅行的季节。

 

 

 

 

 

▲在懒惰思维中继续挣扎,还是叶子,还是棕黄色系,唯一有变的是背景格子布和缝纫的线头。

 

 

 

 

 

▲这次是一次品质感的尝试,因为我找到了一个灰常有品质感的背景。hoho~

 

 

 

 

 

▲好玩的主题,所以任何一个元素我都想表现到位,唯一的缺憾是模特的着装不够party。

 

 

关于处理此类需求还有几点小建议:
1.这块banner起到页面中页头的作用,商品基本都是用来做点缀的,listing页面里并没有卖,商品不要打价格会误导会员,如果觉得画面空可以加商品标题。
2.每次根据需求的主题去寻找新的素材,围绕文案制造出一些小情境。放上应季应景的漂亮商品才是最有氛围的!
3.左侧固有的斜角区块可以根据每次排版做些变化,没必要都是丝带+文字。与主标题一起设计整个画面会更融合。

4.在需求文案原有基础上可以稍作调整,加上如“hot”、“至in”、“3折”、“look”、“抢”等煽动性文字。

5.好的素材是可遇不可求的,所以平日的积累才是至关重要的。

 

用心去设计,大胆的玩设计,朝着你感兴趣的设计点出发,寻求banner制作中的变化,让每个banner都是你独一无二的心思!

October,27th,2009

女装类视觉设计分享

10月9日是国庆中秋黄金周后上班的第一天,当天近8亿人次逛淘宝,即淘宝网每分钟完成43.47万元的交易,创下国内网购单天交易最高纪录。从销售的商品种类来看,当天淘宝网上女装以接近6000万元的交易额成为销售冠军,紧随其后的是化妆品和家居用品。

那么如何把握好作为销售榜首的女装类设计呢?很多UI设计的前辈告诉过我,做用户体验,要把看的人当傻子,意思也就是我们的设计要符合大众思维通俗易懂。而在视觉上,我认为绝不能小觑会员的审美及品味。

———————————————————————————————————————————————————–

活动一:100%粉嫩小女人

要  求:100%及粉嫩小女人都是在线购物非常吸引眼球,容易引起点击的标题;主题诉求明确,与产品贴合度高。整个活动页面呈现小女人衣柜的感觉。 

 素  材:田园衣柜、珠帘、木质底纹、鲜花、相框、木框等等……<见上图>

连  接:100%粉嫩小女人,线上地址,点击查看>>

总  结:粉嫩小女人,粉红色当然是首选色了。而为了然页面呈现更多的层次,让每个商家的区块划分明显,我只将粉色运用到页头,以下依次变换色调,呈现漂亮的“彩虹色”。当然,页面少不了煽情的小元素,这些元素让整个页面更加剔透可爱。而小柜子的造型则是通过实物素材修改而来,所以,当我们找不到满意的素材时,且可以自己去创造。

———————————————————————————————————————————————————–

活动二:通杀男人绝技!38度熟女穿衣经

要  求:凸显商家“品牌”,提升活动档次,符合成熟女性的消费习惯。整个主题诉求明确,与产品贴合度高。迎合成熟女性的情感需求,打动内心。每个客户都是一本时尚杂志,整个活动页面就是书架。 

 素  材:蕾丝、杂志原型、星星、标签、涂鸦字、虚线、纸质卷角、丝带、渐变背景等等……<见上图>

连  接:通杀男人绝技!38度熟女穿衣经,线上地址,点击查看>>

总  结:和需求方商量后,取消了关于书架的构思,直接将页面以杂志的方式呈现出来。

为了力求在简洁中争取最大的美观度,当时翻阅了不少的时尚杂志。而杂志感觉无非是排版上的设计,追求主标题、副标题的变化,图片美观且突出即可。

———————————————————————————————————————————————————–

活动三:潮流、性感、淑女、知性、可爱,让他神魂颠倒!
要 求:打破原有页面规则的排列方式,突出商品,以点击率、成交量为导向。形式自定。

 素 材:蝴蝶结、藤蔓、珠帘、圆点底纹、珍珠、丝带、眩光背景等等……<见上图>

连  接:让他神魂颠倒!线上地址,点击查看>>

总  结:这个页面算是超级卖霸的一次改版,所以发挥的自由度也更大了。抓住主题“神魂颠倒”,决定整个色调采用颇具诱惑力的紫色。整个版式就像女人的蛋糕裙摆。光晕更是能烘托氛围的好素材。由于这次的目的是为了达到一定的点击率和成交量,所以将商品放大到最高限度,突出价格,将主要精力放在商品美化上,降低素材对商品的影响。最后页面也达到了既定的点击率及成交。

———————————————————————————————————————————————————–

我们的设计其实是为需求而服务,当然一个好的需求会准备好充足的素材资料,也会将自己的思维准确的传达给设计师。那么,需要设计来把握的是:需求需要的是什么?点击率?推广品牌?或者是其他。在这个基础上,再将页面设计得美观漂亮。

另:感谢为此三期活动制作flash的文轶同学。

September,28th,2009

也谈 CSS Sprites

CSS Sprites 简介:通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。随着Web设计向着精致、巧妙的方向发展,设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生。

说白了,CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。
CSS Sprites应用:在这方面,淘宝网做的比较好,我就以淘宝网为例吧。
[实例一:淘宝频道页面导航]
效果图:

sprites图:

[实例二:淘宝首页]
效果图:

sprites图:

CSS Sprites优点:CSS Sprites为什么突然跑火,跟能够提升网站性能有关。显而易见,这是它的巨大优点之一。
1.利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
2.个人认为CSS Sprites能减少图片的字节,我曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
CSS Sprites缺点:诚然CSS Sprites是如此的强大,但是也存在一些不可忽视的缺点。
1.在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好只够的空间,防止板块内不会出现不必要的背景,否则可能会出现出现干扰图片的情况;这些还好,做痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;
2.CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;不过网上已经有高手开发出“CSS Sprites 样式生成工具”,大家可以尝试一下。
3.CSS Sprites在维护的时候比较麻烦,sprites是一般双刃剑,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,有只能(最好)往下加图片,这样图片的字节就增加了,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐,而且重新算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。当然,在性能的口号下,这些都是可以克服的。
4.由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。
CSS Sprites总结:性能压倒一切。CSS Sprites非常值得学习和应用,特别是页面有一堆ico(图标)。总之很多时候大家要权衡一下利弊,在决定是不是应用CSS Sprites。为保持兼容性和维护性,sprites图片中的各个部分保持一定的距离是一种不错的做法。

September,28th,2009

javascript反拦截可调节弹出频率背投广告

背投广告特点:
对于背投广告的原理来说并没有什么难度,无非打开的窗口失去焦点(blur),而原来页面得到焦点(focus)。但对于流行的浏览器来说,如果非用户行为的弹出窗口(即onload时,直接window.open),会被浏览器默认拦截。
背投广告,既然被称为广告,那如何才能让广告主的钱花得实在,花得乐意呢?
我们可以增加判断,如果该弹出窗口被浏览器拦截,则只要用户点击页面(onclick)就触发window.open事件,这样一般不会拦截,浏览器会认为这是用户的默认行为。
同时,如果广告总是不断弹出,我想这是对用户的一种折磨,因此设计可调节的弹出频率,比如利用cookie控制一天只可以弹出一次就比较好。

阿里妈妈背投广告代码:

<script type="text/javascript">
//全局变量
var val_pop_w = 950;//广告页面的宽度
var val_pop_h = 90;//广告页面的高度
var val_pop_id = "mm_13250138_1917484_7967317";//广告id
var val_pop_t = 0;//广告距顶top距离
var val_pop_l = 0;//广告距左边left距离
var val_pop_day = 1;//广告频率天
var val_pop_num = 2;//广告频率次数

//添加监听事件
function addListener(element, e, fn){
 element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn)
}
//删除监听事件
function removeListener(element, e, fn){
 element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn)
}

function openWindowBack(){
 var adPopup = window.open('', '背投广告', 'width=' + (parseInt(val_pop_w) + 1) + ',height=' + (parseInt(val_pop_h) + 1) + ', left=' + val_pop_l + ',top=' + val_pop_t);
 //设置广告页面内容
 var adhtml = "";
 var adjs = "";
 adjs += '<script type="text/javascript">';
 adjs += 'alimama_pid="' + val_pop_id + '";';
 adjs += 'alimama_titlecolor="0000FF";';
 adjs += 'alimama_descolor ="000000";';
 adjs += 'alimama_bgcolor="FFFFFF";';
 adjs += 'alimama_bordercolor="E6E6E6";';
 adjs += 'alimama_linkcolor="008000";';
 adjs += 'alimama_bottomcolor="FFFFFF";';
 adjs += 'alimama_anglesize="0";';
 adjs += 'alimama_bgpic="0";';
 adjs += 'alimama_icon="0";';
 adjs += 'alimama_sizecode="15";';
 adjs += 'alimama_width=' + val_pop_w + ';';
 adjs += 'alimama_height=' + val_pop_h + ';';
 adjs += 'alimama_type=2;';
 adjs += '<\/script><script src="http://a.alimama.cn/inf.js" type=text/javascript><\/script>';
 adhtml += '<html><body style="margin:0;padding:0px;text-align:left;">' + adjs;
 adhtml += '</body></html>';
 adPopup.document.write(adhtml);
}

var pop_back_ad = function(){
 openWindowBack();
 window.removeListener(document, 'click', arguments.callee);
}

function SetCookie(name, value, day)//三个参数,一个是cookie的名字,一个是值,一个保存天数
{
 var Days = day; //此 cookie 将被保存 1 天
 var exp = new Date(); //new Date("December 31, 9998");
 exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
 document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
function getCookie(name)//取cookies函数
{
 var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
 if (arr != null)
 return unescape(arr[2]);
 return null;
}
function delCookie(name)//删除cookie
{
 var exp = new Date();
 exp.setTime(exp.getTime() - 1);
 var cval = getCookie(name);
 if (cval != null)
 document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}

function chkpopad(n, d){
 var i = 1;
 if (getCookie('popnum') == null){
 pop_back_ad();
 SetCookie("popnum", i, d);
 }
 else if (getCookie('popnum')<n){
 pop_back_ad();
 SetCookie("popnum", parseInt(getCookie('popnum')) + 1, d);
 }
}
try{
 chkpopad(val_pop_num,val_pop_day);//设置背投广告的次数和保存cookie的天数
}catch(e){
 window.addListener(document, 'click', function(){
 chkpopad(val_pop_num, val_pop_day);
 });
}
//delCookie("popnum");//删除cookie
</script>

在写的过程中遇到一个问题,就是IE和FireFox对document和window的解析不一样,刚开始我一头雾水,就请教克良同学,他老人家也是头一回遇到,google了很久,终于
在一个外国论坛上找到解决方案,但具体的原因还是不清楚。

//兼容IE和FireFox的监听事件的写法
//添加监听事件
function addListener(element, e, fn){
 element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn)
}
//删除监听事件
function removeListener(element, e, fn){
 element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn)
}
//删除监听事件:
window.removeListener(window, 'click', arguments.callee);//这种写法只有IE支持
window.removeListener(document, 'click', arguments.callee);//这种写法兼容IE和FireFox
//添加监听事件:
window.addListener(document, 'click', fn);

背投广告相关问题:
当然如果用户浏览器安装了拦截插件,那很有可能不会弹出(比如Firefox的noscript插件,就不允许任何弹出窗)。方法不是绝对的,也不是最好的,只是用最少的时间来做最效率的事情。
可以通过模拟form提交的方式来弹出窗口,穿越性(相对于一般拦截弹窗的插件)很好,不过无法设置sFeatures参数内容。
demo页面:
http://img.alimama.cn/cms/images/1256207772626.html

September,27th,2009

谈谈互联网营销

营销这个字英文叫Markerting,对这个词概念上有很多定义,例如:“在合适的地点,合适的时间,合适的价格出现的合适商品”这是一个运用在麦肯锡的简单现实的定义。“营销从本质上来说就是一个将所有资源进行整编以便满足大众消费者不断变化的需求行为。”这个是我认为更加贴切的市场营销定义。其实不管是什么定义,都是关注于消费者定位以及如何满足消费者需求的。
那么互联网营销呢?简单来说,互联网营销就是利用互联网为手段开展营销活动。我最近两年一直在做互联网营销推广产品。发觉电子商务相对传统行业模式来说,更应注重营销。经常有卖家用户来问我,我要怎么推广我的东西?你们这什么推广产品能适合我用?特别是在人人都有了营销意识的时候。
首先我认为卖家用户必须要先“修炼”。修炼啥?修炼内功,也就是你的产品和服务,这是基础。只有这个保障了,接下去做营销才能顺风顺水。接着说到营销推广具体的招式。也就是做广告的形式。不外乎四种:1、按点击付费,2、包时付费,3、千次展现付费,4、按成交付费。不管是google的Adwords,Adsense。还是百度的竞价词,新浪的媒体广告,阿里妈妈的全国联播,淘宝的直通车,淘宝客等万变不离其中,都包含在这四种形式里。但什么方式适合你,这就是个需要好好研究的问题。这里我拿淘宝现有的几个推广产品分析下。“品牌广告”顾名思义适合那些比较大型的企业。”直通车”适合做单品推广,用户目的明确。“超级麦霸”以主题推广的形式推出,在主题切合的情况下,也同样适合单品推广。“淘宝客”更多的带来长尾流量,并且成交了才付费,相对成本低廉。“钻石展位”适合有了一定的基础,想要建立品牌形象的。对于卖家来说明确自己推广目标和预算,才能更好的帮助其选择推广产品。建立推广目标的依据来自于平时对用户数据的分析和积累。目标定制的越细越清晰,营销方案就会越切合你的推广方向。同时广告的创意能否吸引眼球决定了其转化率。最后说说运营营销,在互联网上,光靠广告推广暂时的曝光已远远不够。建立圈子,发展渠道,树立品牌,扩展影响力和口碑是其想要长久发展必须去跟进的事。
说了一大堆很多人一定觉得奇怪,这貌似不是一个ue来写的东西。我想要做好UE又或者产品设计师,必须深度的了解这个行业的用户需求,行业规则和其特点,你首先要成为资深用户才能更好去支持产品的发展。

August,31st,2009

画好线框图的20个步骤

对于任何一个开发项目来说最大的错误可能就是没有计划。最近,有些人认为开始前无需计划,一个优秀的开发者需要的是随机应变。我敢肯定这样的做法最后注定是要失败的。

线框图是计划中的第一步也是最重要的一步。这是将创意转换成客户使用的程序的第一步。本文将要带你了解线框图整个的流程;包括涉及参与人员,工具等,以便您能够更好的制作计划。

1)了解自己的目标
作为一个开发人员我想大家都有马上坐下来开始编码的冲动。通常最初的想法都很简单,那么你真的可以坐下直接开始吗?答案是否定的,项目很少有那么简单的,任何有经验的人都知道这样做将会有 很多这样的那样的问题等着你。

一个线框图可以有效的提供您的工作效率。修改计划内容远比在工作开始后在更正要来得更容易。

这个过程也有助于对项目更深的理解。事先作出计划,提出问题、意见,以便解决问题。

最终制定一个工作计划,规划设计者,开发者,工程师以及项目经理各自的工作内容,并且要保证各个环节的配合。

2)重功能,轻外观

计划展示的效果不同主要体现在所采用工具的多样性。其实从根本上说都是介绍有关功能部分的应用,例如,一个网页将有3个文本框和2个按钮。 这是功能而不是形式。

在Howard Baines我们严格按照这一原则进行,并且我们的线框图只包括一些功能要素(线框,按钮,下拉菜单等)。我们忽略任何视觉和布局的东西。其他人可能会做的更多一些,包括了布局和其他视觉的元素。这取决于你自己。

3)积累自身经验

并不一定要求您具备设计和开发的能力,而需要的是在网页应用或者网站上的经验。当然经验越丰富越好,并且你不需去理解关系型数据库只要画线框。

4)确定负责人

确保有人对整个计划负责。他们负责跟进和管理反馈,变化等。如果一个项目,那么通常负责人是发起人,因为他们更清楚目标所在。如果为客户提供服务,我们将会负责计划的进程。不管是谁,只要有人负责。

5)涉及每个人

也许不是第一次会议,必须在纸上锁定一个简单的方案并且是涉及关键利益者的想法。很少,参与的人们加快设计进程。同时,线框图的开发涉及你的团队和客户团队。例如,你正在用你现有的数据库整合你的应用程序或者网站,然后确保数据库所有者可以检测所有数据库中的数据字段在你把他们加入到你的线框之前。收集用户的传真号码如果无处存放是不好的。同水平的设计师对用户体验有很好的理解,并且在早期流动时会存在潜在的问题。

6)完成期限

预先留出时间和交付期限,对保持项目运行是非常重要的。最初线框图会议可以是一天或是几天,具体取决于应用程序的大小,但都需设定一个时期并且坚持下去。会后按记录跟进,以保持项目进程。

7)保持清洁

如果一个特别的网页要求两个文本框和一个按钮,那么只要有这些即可,不多不少。

8)避免设计的线框图太多

线框图只要阐述如何达到所需功能,不包括任何介绍和设计的内容。应尽量避免任何有关设计的内容,这样很容易分散客户的注意力。例如:为了更生动而增加一些蓝色,那么有可能需要半小时的时间 去解释关于蓝色的用意。这些设计的内容应该是设计师的工作。

9)记住用户界面不是用户体验

想一些使用的介绍方法是极其诱人,比如AJAX。注意:线框图是关于功能元素而不是方案展示或者互动的方法。为了更直观的展示应用,应尽量避免AJAX,应侧重于线框图。

10)想想用户

这是很显然的,但是在规划线框图过程中还是很容易忽略这一点。我们的重点是功能,但是同样要考虑用户的体验。例如,如果你做了一个三页长的注册表单,可能发现很多人都是无法完成的。

11)不要懒惰

我们常听到:登陆页面是简单,可以不用写在线框图内。确保线框图包含计划的所有内容。在项目的末尾你应该有一个详细的说明。每一步都不应被忽略。

12)将线框图分成几个部分

一个网站地图或者应用被经常分为几个部分,比如新闻,产品,和用户账户。这样做更容易理解。

13)页面的数量

一个网页的应用往往包含了若干程序;结算就是一个很好的例子。通常是线性的,但是有时用户会选择不同步骤,例如跳过一步。显然你文档中的一些页面和页面中的标签(例如点击按钮)让用户跳转。

14)重复性

应用中的一致性可以有效地帮助用户,开发和设计者。组的重复元素是一件好事。例如,无论用户输入一个地址,将会是同样的地方在同样的命令。在规划线框图时就可以将其表示出来。

15)全部检查是有意义的

最终文档应该让任何人都能简单的操作。如果只是一个开发可以理解你的线框图,那么肯定是有问题的。最后问一下对这个项目什么都没有做的人,他们是否能理解。

16)广告也是功能

很多网站都有收费广告,这可能和google的广告一样简单,但他是功能而不是设计,所以也包括在内。

17)这不仅仅是公开网站

很多网站有一个管理区域用来管理内容,浏览注册用户概况,重设密码等。这个功能许多人都用不到,但是也很重要。很多时候这可能包含一些不公开的数据(例如用户账户启用按钮)。这对于开发在设计数据库时是很重要的信息。

18)知道什么时候结束

确保所有的利益相关者有机会去给反馈,但不把这种锻炼成画西斯廷教堂。通常情况下,可以说三步就能把工作确定下来。第一,把想法写在纸上;第二,从其他人那里得到反馈意见,比如,开发和设计者;第三定稿。

19)选择正确的工具

用纸和笔比用电脑更能抓住你的想法和创意。

一旦你开始设计你的文档我们建议使用你更喜欢的工具。例如,开发者可以用Microsoft Visio,项目经理用PowerPoint,设计者用AdobeFireworks。

我认为线框图应该是一篇文档而不仅仅是交互交流(像设计,可能被分散注意力)因此设计html可能不是最好的。

有很多线框图的工具,例如Balsamiq提供环境帮助很快的增加和自定义普遍的界面元素。他们可以给它一个手绘的感觉,提供一个视觉工具而不是真正开始的设计。

20)考虑相依性

每个人都知道一个购物车的流程是什么吧?因此很容易画成线框图并且放在一边。如果你用第三方支付工具例如PayPal?那么也许影响部分网站的工作。研究相依性,做出相应的修改。这在开始时更容易做到。

希望这篇文章可以提供一个清晰的画线框的思路,谁参与,如何完成,工具如何使用,最后的输出怎么样。最终的事情是,好的完整的线框可以节省你的时间。

你有其他什么秘籍,可以更快的画出线框图吗?

 英文原文:http://carsonified.com/blog/features/20-steps-to-better-wireframing/

July,31st,2009

利用location.hash实现跨域iframe自适应高宽

页面域关系:
主页面a.html所属域A:www.taobao.com
被iframe的页面b.html所属域B:www.alimama.com,假设地址:http://www.alimama.com/b.html

实现效果:
A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小.

问题本质:
js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑,使js跨域访问受限,读取不到b.html的高度和宽度.

解决方案:
引入代理代理页面c.html与a.html所属相同域A,c.html是A域下提供好的中间代理页面,假设c.html的地址:www.taobao.com/c.html,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽度和高度.

代码如下:

a.html代码

首先a.html中通过iframe引入了b.html
<iframe id=”b_iframe” height=”0″ width=”0″ src=”http://www.alimama.com/b.html” frameborder=”no” border=”0px” marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes” ></iframe>

b.html代码

<iframe id=”c_iframe”  height=”0″ width=”0″  src=”http://www.taobao.com/c.html” style=”display:none” ></iframe>
<script type=”text/javascript”>
var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
var c_iframe = document.getElementById(”c_iframe”);
c_iframe.src = c_iframe.src+”#”+b_width+”|”+b_height; //http://www.taobao.com/c.html#width|height”
}
</script>
<!–js读取b.html的宽和高,把读取到的宽和高设置到和a.html在同一个域的中间代理页面车c.html的src的hash里面–>

c.html代码

<script type=”text/javascript”>
var b_iframe = window.parent.parent.document.getElementById(”b_iframe”);
var hash_url = window.location.hash;
var hash_width = hash_url.split(”#”)[1].split(”|”)[0]+”px”;
var hash_height = hash_url.split(”#”)[1].split(”|”)[1]+”px”;
b_iframe.style.width = hash_width;
b_iframe.style.height = hash_height;
</script>
a.html中的iframe就可以自适应为b.html的宽和高了.

其他一些类似js跨域操作问题也可以按这个思路去解决

July,31st,2009

好的产品设计并非始于图片,而是对人的理解

今天想围绕“产品交互设计”说说一些我们的想法,一说到产品设计,我想在坐的各位脑海里肯定联想到了很多表单设计、导航设计、界面布局等等,但是今天我这个篇文章里面没有准备一张截图;这是因为我认为除了这些之外还有更重要的东西值得我们去关注:

那就是我们今天要讲的主题:“好的产品设计并非始于图片,而是对人的理解”。用户喜欢什么、用户来你网站的目的是什么,他们的习惯是什么、他们将如何与之交互。作为设计师,你只有对使用的人了解越多、你才会越对他们移情,这样才能进行更有效的设计。从某个角度上说用户访问你这个网站只是其达到某种目的的一种途径,并非其真正目的,如淘宝客用户到阿里妈妈平台上来获取推广代码,其目的并不是享受一次流畅的取代码过程,而是怎么拿到一串能够容易推销出去的商品推广代码,从而赚到钱。赚到钱才是淘宝客的真正目的;我们只有了解了用户的真正目的,然后更好的帮助用户达到其目的,才能使用户更加喜欢。更加忠于我们的网站!
可以说了解用户是“产品交互设计”的核心,那么如何才能了解用户呢?在此我要和大家分享一些书中的用户调研方法。
1、探索用户心智模型
心智模型是由“Mental model”翻译过来,也可以称为概念模型,说的通俗一点,其实就是人是如何认识、定义一个事物的。在交互设计中很核心的一个环节就是要理解用户的心智模型,因为只有理解了用户是怎么样定义表征一个产品的,才能更好地去挖掘和预测用户的态度,期望,行为。
但是,应当如何理解用户的的心智模型呢?
“The deepest form of understanding another person is empathy…[which] involves a shift from…observing how you seem on the outside, to…imagining what it feels like to be you on the inside.”
上面一段话的意思是说,要理解一个人,最深入的方式是“移情”,不仅要细致地观察,还要将自己代入其中,感受和体会。前断时间吵得沸沸扬扬的百度俞军,他就是一个对产品特“移情”的人,他每天用搜索引擎搜索词汇几百次。站在用户角度充分体验产品,寻找产品可能存在的问题及可以改进的地方;但是需要强调的是这种“移情” 并非简单地研究他人是如何使用产品的。而是要更深入地了解人们要使用产品完成什么,也就是理解人的目标,动机,情感以及其所遵从的哲学和程序。
所以当我们在和用户接触的过程中通过提出一些正确的问题有助于把用户最终目的和设计过程相结合,提高设计的有效率;
曾在书中看到一个关于用户对电子邮箱地理解我觉得很有意思:
1)为什么一位中层经理要使用邮件客户端呢?---当然是收发邮件。
2)那为什么他要收发邮件呢?---当然是为了和别人交流。
3)同别人交流可以通过其他方式达到阿;如:电话、走廊谈话或着什么正是地文件什么的;但是很显然邮件满足了一些其他方式不能满足的需求,那么用户看重电子邮件的哪些特性呢?保护用户隐私、安全性、保留对话内容等等。
4)为什么不在这些特性的基础上加上一些别的通讯工具的特性来完美电子邮件呢??
通过简单的多问几个为什么我们不难找出中层经理要使用电子邮件的真正目的;而Gmail貌似就是根据这样的一条思路在发展其的产品,在最初的收发邮件,到和Gtalk功能结合可以聊天,再到现在邮件可以安装很多插件。Gmail在主功能框架下细化用户的需求,提供更多的可选择性功能来丰富用户需求。
总归一句话:设计师在设计前期的用户调研时要保持好奇心,悉心研究、找出你的用户真正喜欢什么,他们的真实想法和真实感受;
2、用户研究时需要了解的一些基本信息:
背景:用户背景信息是什么?年龄、职业、喜好。
归类用户背景信息,我们可以经验地分析出该人群的特性,宏观的得出一些用户群的行为习惯、喜好等等。
1)动机:是什么需求驱动用户来使用这个产品;
(每个产品的诞生都是迎合用户普遍存在的某种种需求,就象开心网的快速成长就是因为其的许多在线web小游戏能很好的填补许多白领上班时间的空虚和无聊;深入了解用户的潜在需求对产品的发展有很深远的意义。)
2)特性:用户关心这个产品的哪些特性;
(了解产品的特性,做好做强用户关心的特性是留住用户、壮大用户的基础。淘宝客的特性:背靠淘宝大环境,拥有海量的可推广商品,较低的门槛,基本上能上网且在网上有一定社交圈,或着说有一定活动能力的就能使用;)
3)情景:用户在什么情况下来操作;
4)行为:用户如何与产品交互;
5)目标:用户最终想要得到什么;
(淘宝客的最终目标就是能赚钱,而我们是要帮助用户如何赚到钱,如何让用户能很简单的在淘宝客平台拿到一串能使用户赚到钱的商品代码。如何为用户建立更多的信息平台,让用户可以根据自身的情况,找到推广途径和推广商品)
6)习惯:用户一般得操作模式或者说习惯是什么;
一般用户在初次使用软件或网站时候的一些模式:
(1)安全探索 (2)既时满足 (3)满意即可 (4)中途变卦 (5)延后选择 (6)递增构建 (7)习惯 (8)空间记忆 (9)前瞻记忆 (10)简化重复工作 (11)只支持键盘 (12)旁人建议
July,28th,2009

淘宝千万卖家翘首期盼的BannerMaker店招招牌生成器,终于上线啦!

这个凝聚着小二的心血、被淘宝卖家给予了厚望、日产广告牌数超1.7万的新功能,就像是为平凡人插上了一双艺术的翅膀,充分体现了bannermaker的宗旨,为每个梦想成为设计师的有志之人搭建了更加快捷、迅速和充满个性的平台。

只有您是淘宝旺铺会员就可以免费登录使用了
登陆地址:http://ishop.taobao.com/tadget/single_tadget-2692.htm

卖家留言:
upcjokey(设计师)
这样下去 我们是不是要失业了 呵呵,淘宝太绝了

微夏设计
我们还太稚嫩,需要学习,刚看到这个生成器的时候,我们被你们的技术实力震撼了。

风涧凌
看着觉得旺铺的功能还不错啊。有点心动想订购了。

美丽屋369
真的是很实用,以前都不会,现在可是方便多了,天天变化招牌都没问题了。真是感谢那些辛苦制作招牌的亲们了

99蓝兔
已经用上了,这个功能真不错,不用再花钱装修了,还可以经常换,有空到我店里看看效果吧

宝贝尽情淘
很好啊,现在什么都是智能的了,以后就不用学习太繁琐的东西了

好机汇168
大力支持!旺铺可以免费使用,哈哈,省时又省力,对卖家来说是个福音。

supercat77
要是其他页面也能在线制作就好了。其他页面只能更改呢。然后要上传图片。

查看更多淘宝社区的会员,留言总数超过1369次
http://bangpai.taobao.com/g/MTE0MDA5/thread-272442-88-0.htm

做广告牌用“阿里妈妈广告牌生成器”详情地址:http://banner.alimama.com

July,4th,2009

文字彬彬——banner字体设计与应用

字体设计是人类商业活动的需求,它随着时代和科学技术的进步而不断地变化着。被广泛应用于网络生活的各个方面。现代字体设计在电脑技术的应用中已经深入到日常工作、生活的每一个角落。随着工作中各类需求的增多,越来越多类目的广告banner设计对字体的要求也越来越多。要想设计出较好的作品,从电脑里调出来的任何一种标准字体都是不适合的,因为那会造成千遍一律,设计“撞车”的事故,识别性不强的弊端。它要求设计者根据不同需求,不同的设计氛围、生活常识,去捕捉具有准确性、关联性、独特性、可开发性的不同个性的字体,以传递需求的意思和商品特征,这也是平面设计中字体设计的关键所在。可以说认为进行字体设计的训练其本身就是加强设计师的观察能力、思维能力、艺术创造能力培养。同时激发设计师端正字体设计学习热情。music Continue reading “文字彬彬——banner字体设计与应用”