浅谈品牌的视觉识别

时间:2009-06-30   分类:视觉设计   作者:三可

 

什么是品牌的视觉传达

品牌,这个熟悉而又陌生的名词,有时总会让人产生误解。品牌很广,广到一个意会颇深的战略发展理念;品牌很小,小到一个清晰可见的图形符号。关于品牌,这里就不详细介绍了。要提到的是一套服务于品牌推广的手段CI系统(Corporate Identity System),即企业形象识别系统应运而生。CI系统是由理念识别(Mind Identify 简称MI)、行为识别(Behavior Identify简称BI)和视觉识别(Visual Identify 简称 VI)三方面所构成。

而今天想讲到的是大家熟悉的品牌的视觉识别 (vI),也就是广义品牌的一个视觉载体,即由视觉感观所接触到的为了区别于其他竞争对手的一套视觉识别系统,它的基本要素部分主要包括企业名称、企业标志、企业标准字体、标准色彩、象征图案、企业提出的标语、企业吉祥物、专用字体。还有一部分就是应用要素,主要包括办公事物用品、企业内外部建筑环境、交通工具、服装服饰、广告媒体、产品包装、赠送礼品、陈列展示、印刷出版物。

查看全部

查看:870  |  评论:9  |  发表留言>>

ISD明星工程还在继续–真人秀第3期

时间:2009-06-25   分类:视觉设计   作者:牛来了

 

三期真人秀
为了响应公司大政策,全面避免低龄化,并使我们设计更加多姿多彩,我们开展了真人素材秀的活动,从08年中至今,真人素材的拍摄目前进行了三期,在同学们共同努力下,有效的改善了产品的视觉体验,而对于素材的拍摄也一次比一次严谨,从模特的甄选,到造型的塑造,都一次比一次详细正规。

查看全部

查看:750  |  评论:4  |  发表留言>>

页面重构中的模块化思维

时间:2009-06-25   分类:网页重构   作者:鬼

 

最近被“模块化”缠身,又是文章又是PPT的,被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考,大多都是我自己从事页面重构这份工作的经验和理解,在一定程度上存在局限性,也希望自己能温故而知新。

“模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓,就像“Ajax”。不过做为页面重构发展的一种趋势,越来越被大家重视,不自觉也满口的“模块化”,只是你真的理解什么是“模块化”吗?

什么是模块化?

对“模块化”的解释,在 CNKI 中就有28种。可见“模块化”思维使用的广泛。最接近页面重构中的“模块化”,现有的解释应该就是软件开发中的解释了。

先看一下百度词条是怎么解释“ 模块化 ”的:

模 块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能,所有的模块按某种方法组装起来,成为一个整体, 完成整个系统所要求的功能。模块具有以下几种基本属性:接口、功能、逻辑、状态,功能、状态与接口反映模块的外部特性,逻辑反映它的内部特性。在软件的体 系结构中,模块是可组合、分解和更换的单元。

相关的书籍也蛮多的,有兴趣的同学可以搜一下。需要强调一点,我们所借鉴的是一种思维的方式。 查看全部

查看:441  |  评论:2  |  发表留言>>

全方位清理浮动

时间:2009-06-15   分类:网页重构   作者:今晚打老虎

 

清除浮动一个凡是做页面的人都会遇到的一个东西,但是是否大家都能够清楚的知道,全方位的了解呢?于是一闲下来了马上写了这样的一篇文章,不能讲面面俱到,然而基本能将我所知道的倾囊相授了。

我们粗略的一起来看看清除浮动的办法一共有多少个(IE里面用zoom:1就不写了,下一个专题再写)。对应的DEMO

  1. 采用伪类:after进行后续空制的高度位零的伪类层清除
  2. 采用CSS overflow:auto的方式撑高
  3. 采用CSS overflow:hidden的方式产生怪异适应
  4. 采用display:table将对象变成table形式
  5. 采用div标签,以及css的clear属性
  6. 采用br标签,以及css的clear属性
  7. 采用br标签,以及其自身HTML的clear属性

粗略的看,他们都能将问题解决;然而他们另外一方面又有着各自的利弊。(一一对应)

  1. 优点结构语义化完全正确,不会产生其余的怪异问题。
    缺点复用方式不当容易造成代码量急剧增大。
    建议最外层轻浮动时使用,或清晰模块化复用方式的人使用。
  2. 优点结构语义化完全正确,代码量极少。
    缺点多个嵌套后,点击最外层的轻浮动框会遭成最外层至最内层内容全选(FF);或者在mouseover造成宽度改变时会出现最外层模块有滚动条(IE)。
    建议内个模块使用,请勿嵌套
  3. 优点结构语义化完全正确,代码量极少。
    缺点内容增多时候极易不会自动换行而内容被隐藏掉。
    建议宽度固定时使用,请勿嵌套
  4. 优点结构语义化完全正确,代码量极少。
    缺点盒模型属性已经改变,可想而知奇异事件自然多得你数都数不到。
    建议如果你不想改Bug改死你的话,最好不要使用;不过可以作为alpha版本当中临时性的忽悠下测试。
  5. 优点代码量极少,复用性极高。
    缺点完全不能完美的适应语义化,不利于改版以及需求变更。
    建议初学者使用,可以让你快速的解决浮动问题。
  6. 优点语义化程度比第5种情况要更优;代码量极少,复用性极高。
    缺点语义化依旧不完美,不利于改版以及需求变更。
    建议初学者使用,可以让你快速的解决浮动问题。
  7. 优点语义化程度比第5、6种情况要更优;代码量最少,复用性极高。
    缺点语义化依旧不完美,不利于改版以及需求变更。
    建议引导初学者思维升级时使用,让其明白与其用classname来控制一种表现,倒不如回归到WEB1.0的时代的网页直接用html属性来控制表现,毕竟后者的代码量更少。

最后,列举完毕。然而我想有必要和大家道歉,关于之前转载鬼的那篇文章;非常后悔的是当初改了鬼的标题将“最简单”改成了“最优”,以致于后面误导了很多的同学。所以重新写了一篇给大家分享。

查看:1,005  |  评论:14  |  发表留言>>

关于交互设计在QQ秀赠送流程中的优化

时间:2009-06-09   分类:交互设计   作者:西贝

 

赠送QQ秀流程是QQ秀商城关键流程之一,占了收入最直接的一部分。它的优化是后续商城流程优化的重要参考。OK,现在就用TA做例子,分享一下流程优化中,交互设计的分析过程。

先大概了解一下优化前的流程。

第一步:触发用户赠送
图片

第二步:填写赠送物品信息。需要手动输入好友QQ号码等信息后,点击“立即赠送”进入购物车页面。
图片

第三步:页面跳转到购物车页面,进行支付金额。点击“确认支付”。
图片

第四步:对方收到获赠的物品。可以直接保存此形象。
图片

改版前存在的问题:
• 流程中的“立即赠送”按钮表达不清晰,容易造成误解。
• 支付需要进入购物车。用户看到的信息过多,焦点不集中。
• 对方获赠后,没有给赠送者提示,赠送者不清楚赠送是否成功。 查看全部

查看:954  |  评论:9  |  发表留言>>

模式化窗口

时间:2009-06-09   分类:交互设计   作者:臭鱼

 

先让我们看一个例子,了解什么是模式化窗口。

以下是QQ秀商城在非登录时提示登录的一种状态。当我在非登录状态,通过保存形象的方式买一件衣服时,弹出登录对话窗口提示登录。此时,登录对话窗口锁定商城页,锁定IE,只有当对登录窗口进行操作后,才能够进行其他操作。譬如:最小化IE、浏览商城等。我们可以说,登录对话窗口就是一种模式化窗口。

QQ秀商城提示用户登录的模式化窗口

模式化窗口常常给人“坏”的印象,为什么“坏”?是因为它“长”成那个样子?还是因为它通常都说些没用的话,所以用户都不看其中的内容?如果换成一个浮动层DIV,它就变“好”了?就模式化窗口的形式和“好坏”问题,我们进行了讨论。 查看全部

查看:776  |  评论:9  |  发表留言>>

图片投射方法在会员官网视觉风格调研中的运用

时间:2009-06-09   分类:交互设计   作者:hiseven

 

图片投射是一种定性分析技术,源于心理测量中用于人格评估的投射技术(Projection Technology)。投射是指人们把自己的态度、愿望、情绪等不自觉地反映在外界事物上的一种心理现象。所谓投射技术是指通过分析人们对于外界事物的反应,而去研究产生这种反应的内在的态度、愿望和情绪等内在心理活动。

在图片投射中,所采用的投射工具是一系列图片,分析人们对这些图片的反应,帮助获得人们内心想法。

在市场研究中运用图片投射技术,主要有以下几个方面优点:

(1)形式比较新鲜活泼,敏感度较低,便于营造有趣轻松的氛围,使被访者处于放松状态,更容易表达出内心想法;

(2)图像是感性的、直觉的加工,不同于言语理性的、逻辑的加工。图片投射将被访者从理性思维中拉开,更深入地挖掘其情感及喜好;

(3)对于一些受教育程度不高或习惯图像思维的被访者,图片可以突破言语表达障碍,辅助思维并传递他们的想法。

图片投射方法在最初可以很好的指导品牌的设计,在会员官网的视觉风格调研中,主要就是通过这种方法了解目标用户对于会员官网所要传达的“尊贵”“活泼”“独特”“安全”的理解,提取满足QQ会员品牌特点的视觉元素和QQ会员用户“色彩”、“质感”偏好关键点。 查看全部

查看:787  |  评论:0  |  发表留言>>

谈CSS书写风格

时间:2009-06-09   分类:网页重构   作者:慕斯

 

随着公司业务的增加,需求变的越来越多,团队也因此在不断的扩大,我们经常会遇到几个人协同工作来完成同一件作品或者维护修改别人作品的时候,那么是什么最让你最感到困扰呢?我们在实现一个表现复杂的页面的同时,CSS文件就会比较繁琐,众多的选择符、属性让人眼花缭乱,那么如何更快的定位、如何更高效的编写样式呢?CSS的书写被很多人所忽略。关于书写风格,翻看了一些知名网站的作品,发现横向连排几乎成为各大产品项目的主流,然而,每个人对于CSS的写法各异,这就导致我们工作效率的降低。为了更好的协同工作,保持团队内CSS书写的一致性,几经波折后达成共识,具体书写方法如下:CSS属性横排书写,选择符纵排书写,每个”,”(逗号)后必须换行;

重构组代码书写规范示例:(其中数字只用做示范,实际应用中不建议用数字命名。)

.class_name_1 .class_name_1_1,
.class_name_2 .class_name_2_1 .class_name_2_1_1,
.class_name_3{style1:value; style2:value; styel3:value; }

有人说,好代码就是用记事本打开也是艺术品,而样式文件本身就是设计作品。目前并没有一个权威来界定这种规范,我们只能对两种写法做个简单的总结。 查看全部

查看:903  |  评论:15  |  发表留言>>

IE8面向Web开发人员的功能改进

时间:2009-06-09   分类:网页重构   作者:小树

 

 2009年3月20日,微软向全球发布了Windows Internet Explorer 8(IE8)正式版,成为人们关注的焦点。IE8迄今最符合标准的版本,它完全支持级联样式表 (CSS) 级别 2.1,并加强了对 CSS 3、HTML 4.01 的支持,也能很好地支持 HTML 5。由于改进了对这些 HTML 元素的支持,Web 开发人员现在可以构建更具表现力和可访问的 HTML 标记。本文将探讨对IE8中关于 HTML 和 CSS 支持行为的更改,以及这些更改如何影响 Web 开发人员。

HTML改进
 为了帮助开发人员充分利用 HTML 4.01 提供的元素和更好地解释 Web 开发人员期望表达的语意含义,Windows Internet Explorer 升级了对下列表示性元素的支持:
P 元素:表示逻辑段落。
OBJECT 元素:可以表示任何对象,包括图像。
button元素提交其 value 属性,而非 innerHTML,这意味着现在可以使用跨浏览器 FORM 方案的 button 元素。
getElementByIdNAME方法现在区分大小写,不再使用属性进行不适当的搜索。
setAttribute 方法现在不区分大小写,这意味着指定属性时不必再使用“驼峰式”大小写格式(如“camelCaseWord”)。它也可以正确标识 HTML 属性,如 CLASS 和 FOR。

查看全部

查看:533  |  评论:4  |  发表留言>>

创意方法杂谈

时间:2009-05-12   分类:视觉设计   作者:kevin_chung

 

图片

写在前面的话:
Part 1
记得刚毕业那时,常幻想着自己是个大艺术家,满怀憧憬的想找一份理想的工作。后来入了行,慢慢的发现自己好像不是这块料;不但没有好的想法与创意,而且软件也不懂得怎么去操作,再后来接触多了、看多了、被蹂躏得多了、想法也慢慢的多了;却又发现,在天马行空的想法面前,却根本不知道怎么去实现,从一个痛苦的坑里跳回了另一个坑中。后来记得有位前辈告诉我说,做这行是需要慢慢沉淀和积累的,形成风格是需要时间的,在职业生涯的前几年里,都是布满荆棘的学习和积累的过程。现在慢慢的开始明白,原来在我们年轻的时候,我们总是把我们的创作冲动当作是创作才华,发现自己才智平庸没有好创意、理想与梦幻破灭时,内心会是那样很痛苦。
图片

Part 2
常常会想,什么样的设计才是最好的设计(其实本来就没有最好的)。常常觉得,这个表现已经很完美了(其实还很有差距)……事后抽身回来再看,还是有很多不如意的地方。类似的问题想多了,渐渐的觉得,一个好的作品是由多方面组成的,比如色彩、布局、构成、风格、细节等。而在现下的互联网环境下,只要有足够的时间,我们都可以将自己的想法做到尽善尽美。但其实我们不难发现,设计工作中的创意才是设计作品成功与否的关键,如果我们在设计创意上出现了偏离,那所有的努力,也就付之东流了。
图片

这篇探讨并没有能上升到理论的高度,每个设计师都有自己独到的创意方法。这些文字仅是我在平时工作中的一些方法与认识,与大家分享。 查看全部

查看:2,512  |  评论:34  |  发表留言>>

共 5 页12345»