Archive for the ‘视觉设计’ Category

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的文轶同学。

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 (more…)

June,24th,2009

实用可用性测试

5月份有幸参加了人因国际的实用可用性测试,主讲人是董建明博士,曾在IBMEbay等公司从事了10多年用研工作。目前国内用研行业尚在兴起阶段,很多大公司已相继成立相关的部门或开设专职,但论经验值几乎为零。大家都知道跟用户打交道是一门很高深的学问,除了靠知识、技术和先进的仪器外,长期实践累积的经验尤为宝贵。现将培训中个人认为重要的部分,结合我们在工作中的实际情况与大家做一个分享,以供需要的同学参考。

我想可能大部分人都听说过可用性测试这一名词,在此就不详解了,首先来说下可用性测试的两种类型和方法。

形成性测试

总结性测试

1.在产品或网站的开发过程中进行

2.用来发现设计的可用性问题

 

例子:在应用中,用户能否找到和使用“按揭计算器”,来顺利输入贷款贴息?

1.在开发后期进行

2.用来确认某个产品已经实现预期的目标

 

例子:新的应用有没有按预期的比率提高了转换率?

                                                        

小规模定性

大规模定量

1.提供许多观察的机会

2.基于专业知识和判断

3.专家观察,解释,决定

4.可以使用小样本

1.定量尺度是重点

2.结果可推广到更大范围的人群

3.需要大样本

如图,形成性测试大多采用小规模定性的方式,目的是为了通过测试研究形成新的东西并对现有的方案进行改进,而总结性测试一般采用大规模定量的方式,在产品完成后做测试,一般不对其进行修改,只是通过测试和研究以得到该产品好与否的结果。笼统的说,定性测试是想知道“为什么”,定量测试是想知道“有多少”。在明白了这两点之后,在拿到需求的时候,我们就可以通过产品本身的进行程度和需求方希望得到的结果来判断采用什么样的可用性测试了。

在实际的操作过程中需求方经常会提一个问题,6-8名被试人就能代表所有用户的问题了吗?其实我们会发现,测试到6名用户的时候遇到的问题已经大同小异,几乎重要的问题都是同样几个,新的问题产生几率已经变的很小。原则一:被试越多,产生的结果越可靠;原则二:被试越多,产生的新结果越少。被试多不能代表结果多,据维茨1992和尼尔森1993的统计表明,通过5名用户就能发现某产品中约80%的可用性问题了。弗克纳2003发现,测试5名用户平均发现85%的可用性问题,而测试10名用户平均发现95%的可用性问题,从6名到第10名用户新增问题几率只为10%,所以一般用户群测试均为6-8名被试。如果需要一个大的样本,可以考虑进行多次小测试,而非一次性测试许多被试人,这是原则三。

我们通常会要求在测试期间不要太多人参与旁听,以免打扰到用户的思路,可能有很多部门的同事不理解这样的举措,甚至认为用户测试看似很简单的事,不需要搞得那么谨慎和神秘,而我们通常最大限度只能允许相关人员在测试结束后才能进行提问,在试中我们要求旁听者留给用户绝对的安静环境。在这里,就为什么测试需要在这样的环境下进行做一个简单的、仅限于个人见解的说明。

作为产品的策划者或运营者,都有希望用户能最大程度接受该产品的主观的愿望,在愿望的驱使下,如果直接让相关人员提问则可能造成对用户的导向性,最终容易得出并不真实的结果。这其实跟用户的心态也有关系,作为被邀请的一方,用户一般会抱着配合的心态来完成测试,同时在操作中用户也会尽量掩饰自己不懂不明白的问题。作为用研人员在过程中要懂得分辨什么是真实的用户情况,而非假象。在这样观察与被观察,询问与被询问的环节中一旦受到干扰,用户的思路会瞬间被打断,从而影响到测试的结果和真实性。

接下来我们来了解下完整的可用性测试步骤

1、准备测试启动会

在该步骤中需求方和用研将进行详细的沟通,用研人员充分理解测试目标,定义用户群和方位,了解技术环境。

2、进行测试启动会

在会议中需要确定测试任务、测试形式、招募被试的标准等相关要素。

3、招募被试

可以根据产品需要来划分多个纬度进行筛选被试,目前我们的被试人员纬度一般由用研决定,需求方直接提供被试人员名单。

4、准备测试材料

材料分为文档部分、工具部分和礼品部分,文档部分一般要准备测试大纲、任务书、知情同意书、测试情景、问卷、记录表等,工具部分为测试电脑、录音、手表等,礼品部分自然是对被测的赠礼,也可以现金代替。这些准备工作一般由需求方和用研共同完成。

5、组织测试设备和角色

这个步骤包含测试环境的安排既测试房间,各种测试用设备安排,角色为测试主持者、参与者,以及被试接待人员的安排。

6、在以上环节做完后就可以进入测试了。

以上的步骤是根据培训和工作中的实际情况结合而成的产物,仅供参考!我们一般做测试基本都是按照以上步骤来走,这些还只是提要,如果详细的将每一个步骤展开,相信很多人都不会轻松地说用户测试很简单了,呵呵。

今天整理的也不少了,大段的文字怕大家看了眼花(估计已经花了),就此先告一个段落吧,结束前突然想起我们老大说的一句话,他之前做了一个项目,在被测前他不太相信可用性测试的作用,结果出来后,他意味深长的对我说,“我想到的问题,用户都想到了,我没想到的问题,用户也想到了,看来用户测试还真是会带来意想不到的效果啊”。。。。。

May,31st,2009

博客换肤这些事儿

2月13日,阿里妈妈UED的博客换肤项目正式启动,博客对于团队宣传的重要性可想而知,而博客皮肤就像人的外表,没人不希望自己的漂亮些,何况这皮肤是可以主观改变的。翻着这些资料和草稿,我们今天抖一抖,回顾一下换肤的过程吧。

既然要换肤当然得有个目标,作为UED团队,视觉上拉风抢眼,操作上良好的交互性是团队成员一致认同的。

OK,做事从收集情报资料开始。我们首先收集了一些国内比较有名的设计类交互类团队博客的截图,就皮肤的视觉效果和交互性上做了一定分析。从视觉上来看团队博客在设计上特别拉风的并不多,大多是选用稳重干净的颜色与质感。这时矛盾产生了,同样作为团队博客,妈妈到底是要拉风抢眼的外观还是随大流。先不管那么多,两条路都走走,于是有这样一些草稿。


01第一稿,只做到了头部设计,似乎有那么些思路,但又没完全放开。

02第二稿可以说是第一稿的延续,想法也较为简单,拉风嘛,顶部如果有一幅插话就好了,大致用素材摆弄了一下,如果这稿要深入下去顶部插话至关重要。颜色方便没有过多的考虑,并没选用阿里常用的橙色。

03往集团颜色上靠一靠。但似乎一切的一切和UED团队没什么关系,这个思路PASS掉。

04 继续拉风着,拉风导航,试验一下罢了。

 05阿里妈妈文化衫中大鱼吃小鱼概念的引入,把这样有故事的图案放在博客顶部,博客在设计上会有一些阿里妈妈的味道在。

06 念念不舍异性导航条,将其简化一下再加入小鱼概念,整体感觉“妈妈”了。


07 抛弃异性导航,纯色简化版小鱼皮肤。

08接下来是在白板小鱼的大框架下做了一个小调整的草稿。主要在于导航,标题栏背景以及各标签之间排列的一些尝试。

09橙色微玻璃质感,和谐型设计。

10干练的橙色风

11 紫色版,由于色彩的原因被PASS掉,最终版选用了他的框架结构。

12

最终版,还是选用了稳重的色彩,顶部的小鱼LOGO显出妈妈团队特质,局部的结构上做了些小创新。

July,22nd,2008

阿里妈妈帮助页面上线!~


页面功能采用流行的搜索查询答案样式!在内容部分采用伸缩方式改变,浏览方式,很多时候解决办法多是一两句话,才用这样的方式更为简单易用!

July,2nd,2008

妈妈1周年快乐^V^


阿里妈妈已经一年了!一年的收获,一年的成长,在这里见证妈妈的点点滴滴!

July,2nd,2008

阿里妈妈文化T恤


阿里妈妈文化T恤,经过威客创意投稿,经过内部投票,经过设计师修正,创意搞终于有些眉目了!

May,23rd,2008

阿里妈妈一年时间首页改版8次

这次改版已经是阿里妈妈自成立一年来的第8次改版,很多人觉得阿里妈妈为什么要这样改,每次改版处于什么目的,
  
阿里妈妈正处于高速的发展阶段,公司每一个月都有大型产品上线,每一星期多有用户关切功能改进,每一天都有着很多的变化和改进!

每次的改动多希望能通过首页来体现阿里妈妈的变化,所以对于阿里妈妈来说,不变的永远是变化!

这次改版的体现:
1、阿里妈妈“测试版”去掉,一个标志性的意义、也说明阿里妈妈网站日渐成熟

2、版面有更多的内容来吸烟和针对用户需求,增加了
  (1、全国联播
  (2、最新成交
  (3、广告推荐细化显示
  (4、社区热贴
  (5、广告类目细化显示
  (6、成交能力排行
  (7、站长信用排行
  8、站长信息发布、等用户较关心的版块,也满足运营部门对首页资源的需求

3、类目改版,这次尝试性对广告类目的展示形式做了竖排的样式,更清爽,更容易阅读的方式来表现!这超传统的排列方式希望大家喜欢*v*