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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

活动一：100%粉嫩小女人

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

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

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

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

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

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

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

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

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

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

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

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

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

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

连  接：让他神魂颠倒！线上地址，点击查看>>

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

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

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

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

<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的监听事件的写法
//添加监听事件
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

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

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/

实现效果：
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代码

b.html代码

c.html代码

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

只有您是淘宝旺铺会员就可以免费登录使用了
登陆地址：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

因为艺术来源于生活，只有你的作品让大家能看见自己生活的点滴能引起共鸣的才是好的设计。随着“意象”一词被广泛的使用，意象的含义也在不断的变化之中。因为它不是一个静止的概念，而是观察者、观察对象和环境双向作用的结果。“环境存在着差异和联系，观察者借助强大的适应能力，按照自己的意愿对所见的事物进行选择、组织并赋予意义。……因此对于一个特定现实的意象，在不同的观察者中会迥然不同。”“意象”的表现不仅在不断的变化，同时它还是一个非常抽象的概念，很难用一句话来概括。在我们的日常设计工作中，“意象”被理解为“字体外在的型和人们生活中对该字的理解的形象”，这显然是我们设计在创作的一个很好的方式方法。“字体外在的型”更多的被用来表达设计者的想法和渲染大环境，而我们所说的意象更多的是用来形容那种自发的、随手而来、随心而发的一种感觉。在汉字的发展过程中，其形态始终与其意义纠结在一起而无法摆脱。这也是汉字最终没有转化成为拼音文字的一个重要的原因。由于其字体具有图像的基础，致使人们在书写它时很容易形成其形象的特质；但是这种形象又是不拘泥于实物而带有较多抽象性的，因而更易于宣泄出书写者的心灵意象。

汉字的自身特点赋予了它“可意象性”――这是一种将人们心中意象的个性和 结构 特点与汉字本身联系起来的物质特性。汉字形体中，蕴涵着一种对于任何观察者都很有可能唤起强烈意象的特性。它不仅仅是被看见，而且是清晰、强烈的被感知，并且加入了创作者自身的心灵感受。汉字的这种特性，在汉字图形中得到了充分的体现。汉字图形的意象设计，也可称为意象变化字体图形。“其特点是把握特定文字个性化的意象品格，将文字的内涵特质通过视觉化的表情传神 构成 自身的趣味。” 意象化的汉字赋予文字以字面外的强烈意念，通过丰富的联想别出心裁的展示浪漫 色彩 对文字进行再创造。所变化出的意象文字超脱了具体的“形似”，而是提炼出了抽象的“意”，从而获得媒体功能意构传神的表达。由于汉字的意义的多样性，以及创作者心灵意象的多变性，意象设计的方法呈现出多种多样的面貌。根据设计中所采用的字义的不同，和借用的象征物的不同来对汉字图形的意象设计方法进行一些分类，其中也借用了一些我对现代汉字意象设计的一些分类方法。字义意象设计是指在汉字艺术设计中借用字本身的含义特征，将所要传达事物的属性表达出来。这是意象设计中最简单的一种，它只要直观的表现出汉字的意义就可以了。当然，不同的人表现出来的同一个汉字又有所不同。介绍了这么多，你肯定也想设计一款好看的字体抓住客户的眼球了吗？下面根据我的学习过程总结的一些经验和实例和大家分享。

实例1

实例2

实例3

实例4

实例5

实例6

1~4是设计的女装banner，大家可以看到在用色和样式上很好的渲染和融入了环境通过丰富的联想别出心裁的展示浪漫色彩 对文字进行设计，在造型上的变型把握住女性的固有特征柔美，尽量去用曲线表现，在字的结构上加以变型。

5例是家居环境的设计，此例是要说明上文说的设计前要了解设计词的含义和构造，运用了日常生活里对其形态的影响变型，设计来源于生活，我们在做字体设计时也不能松懈对平常生活中的细心观察，我一直都认为作为一个设计师日常生活中的细心观察对设计的帮助是很大的，可以从日常生活的观察中提取灵感和元素运用到设计中来，当人们在看这个设计时能和平常的生活联系起来，产生共鸣的才是好的设计。

6例是男装的banner设计，大家在设计男装时可以很好的妙用直线条，因为直线条是最好表现男性特征的一个设计元素。在生活中不难看见直线是众多的男性品牌logo设计的根本元素。

（PS:在字体变型上要切记2点：一是变形要在笔画的末端或起笔处变型才不会有突兀;二是整体的去设计，要把文案当做一个整体去设计和考究，这是前期变型时需要注意的）

好的创意要靠平时生活的不断积累和思考，以上是我对日常工作的一点总结，总之，字体的应用效应已越来越被人们所重视，无论是对字体的选择或是对字体的使用都构成了衡量一个设计师的标准。我们可以这么说，一个好的设计师既能很好地针对需要选择字体，又能对字体进行很好地设计安排与控制。字体设计的感染力是巨大的，世界上无所谓好看的文字或不好看的文字只在乎设计师如何对文字进行创意产生富有魅力的字体。新世纪设计师要运用崭新的观念去表现字体的时代性，设计和组合上都要带给其他人清新的感觉。设计大多是为商品宣传服务，所以设计师要为客户打算，考虑有什么可运用的资源，客户预备在这个设计上投资多少等，当然最重要的是这个字体的设计可否增加商品的吸引力。大自然无形之手给我们展示一个色彩缤纷的世界，千变万化的色彩、形态配搭令人着迷；同样，一个成功的字体设计，它拥有生命力，可以感染观众情绪。设计师对字体运用多作深入的了解和研究，才能摆架字出更精彩的作品。