-
2009-05-04
当设计师遇上前端开发 - [工作在淘宝]
作为互联网产品设计师,在和前端开发人员沟通时你是否常常会听到这样的声音:—— “大姐,给点专业精神好不好,这个表格是自适应的,你这样设计页面不好扩展啊…”——“用ajax不是不行,不过你要事前给我说嘛,你不说我怎么知道呢,你说了我就知道了嘛…”面对这些回答,除了欲哭无泪,你有没有想过是什么原因导致出现这样沟通偏差,有没有解决的办法呢?设计师需要了解哪些知识才能和前端开发人员来更好的合作呢?首先得从这两者之间都有哪些不同说起。我认为最主要原因在于设计师和前端开发在部门中不同的职责划分。通常情况下,产品设计师的产出物多是线框 图(wireframe),视觉设计稿(mockup)等,前端负责编写HTML,CSS等代码(demo),有时还会根据需要编写程序代码(如 JSP/ASP/PHP/Rails),光看这些分工,就知道不同的角色对产品的理解和着重点是截然不同的。按照正常的项目流程,设计团队通常需要先设计出界面mockup或demo(HTML/CSS),接着开发人员才开始正式编写代码。然而多数情 况下为了保证项目进度,需要开发人员和设计师在项目前期就介入进来,不同的是,开发人员多是审核通过项目计划书(PRD)和原型评审,她们更关注于技术可 实现性;而设计师更倾向理解产品经理的项目需求以及通过什么样方式来解决需求从而达到提升用户体验的目的,她们更关注创意的可行性... -
2008-09-12
做中国的资深交互设计师 - [工作在淘宝]
工作总结(同时也是对自己的勉励)

来淘宝也快半年时间了,从开始不知道交互设计师做什么到慢慢适应并了解工作的范畴,也做过了一些项目,每次在做的过程中有兴奋,困惑,不解,重新反思,这期间的经历也教会我很多。
记得原来再看Allan Cooper在他的书中把设计师和程序员完解成完全不同的两种人,其实我是非常赞同的。其中有些精彩段落让我十分激动。但是在实际工作中的情况让我重新反思这句话,有的时候常常“眼睁睁”看到一些体验自己都不能忍受,却因为一些CSS Hacks实在无法实现而放弃;常常“眼睁睁”看见前端他们许多JavaScript实现的交互无比笨拙,却不敢提出,因为我发现他们跟我一样,已经从早干到晚了。更何况我还在“学习”。我所作的只是把对照着别人产品依葫芦画瓢出来的一张一张PSD图,变成可以在浏览器中显示的“新产品”,我想没有哪个优秀的交互设计师愿意称呼这样的互联网作业为“产品”。技术是每一个交互设计师要过的第一关,而且也意识到:一个完全不知道什么是div+css布局或者完全不懂JavaScript语法的人很难成为一名好的交互设计师。
我给自己的定位是做一名中国的资深的交互设计师,而交互设计师就是在人与机器之间找到最好的平衡点,对代码不了解让我深深感觉工作的受限。另外我也在想,现在的前端都是在沿用外国人的语言写我们自己的东西,由于这样的原因有代码所实现的交互方式自然也是外国的已经发展成熟的东西,而真正适合中国人的交互方式并不一定适合。我想,如果能够站得更远一点,从我们国人自己的特点考虑,创造出真正适合我们的交互方式,我觉得这才是作为中国的交互设计师应该做的。当然这也是建立在对计算机(科技)和产品深刻理解至上的。
说到人,就不能不说用户体验。曾经我有一段时间我也觉得自己是用户,可以代表用户,但是在跟轻侯做了一些可用性测试之后,发现自己的想法和用户的想法还是有不同的。我也总结为什么会出现这些问题,我想主要有3个方面:
1、没有真正了解用户;(这些需要多注重用户研究和积累足够的经验)
2、理论没有做到联系实际,或者说理论的理解不深;(对产品理解力以及和需求方的沟通能力)
3、对可用性测试的数据缺乏足够的能力和手段分析;(需要扎扎实实的理论基础和一套科学的方法)
记得在研究生阶段看过不少关于心理学和设计调查之类书籍,一值深信一个好的设计公司需要大量的设计数据,以及能够进行设计调查和科学实验收集设计数据,而实现这个数据需要大量的设计调查工作,这个领域很新也很有挑战性。我认为淘宝是面对中国的用户,不能抄袭amzon,也不能随便就拉来一个韩国网站上的东西。我们团队现在的用户体验已经着手在做这些事情,但我觉得还远远不只这些,因为很多都是在设计完成后进行的调查,他的局限性是不能很好的指导设计师去进行前期的设计以及帮助他们了解用户需求,设计师仅仅依靠个人“灵感”,他们应该思考不依靠灵感如何能够设计出好用的东西。这个工作需要大量的时间和精力,而且不像其他工作在很短的时间内能见到成果,但我深信他是很有意义的工作。需要我希望在成为一个自身的交互设计师之后,同时积累了很多资源来做这件事情,静下心来专注这方面的领域,去调查文化与消费的关系,使用动机,生活方式,设计审美,可用性等等。
PS:这段时间又拿来李乐山老师的书来看,每次看每次都在学习,也在反省自己的思路。是的,有的书需要不断的反复的阅读才能慢慢理解其中的内涵。
作者:李乐山ISBN: 9787112085378
页数: 446
定价: 50.0
出版社: 建筑书店(原建筑社)
装帧: 平装
出版年: 2007-6-1 -
2008-06-30
Axure的富交互应用实例 - [工作在淘宝]
最近在学习Axure,越来越觉得这个软件很好很方便,交互设计师可以用它快速开发出流程图和原型图。尤其是Axure的富交互功能非常强大,用它生成的 HTML文件具备了所有的UI演示功能,可以演示鼠标响应动作,页面关联效果,大部分的处理响应。由于axure上手很快,熟悉office操作界面的基 本能掌握它的主要功能,所以我想通过一个实例来重点介绍其在富交互功能中的应用,以便帮助大家快速掌握它的核心功能。它的详细教程可以登陆axure的官 网:http://www.axure.com/expert.aspx,在这里就不一一累述啦。好了废话不多说,请跟我一起来试做下面的实例。
先看看轻侯出的一道考题:
建立一个登录的页面,包括用户名和密码域,要求:- 密码域输入的时候为***
- 只有当用户输入名字xiaoxiao,密码hello123的时候,系统才允许通过,否则会在本页提示出错信息。
- 按钮提交的时候,按钮文案变为“等待中”,在1秒钟之后,才变为成功页面。
- 仔细斟酌提示和出错的文案。
另外在sucess页面建立注册成功面板。
先实现功能1。选择密码输入框“codefield”,右键选中“mask ”这样就给输入框增加了遮罩面板,屏蔽了要显示的信息。
再实现功能2。选择登陆按钮,双击右侧interaction动作属性栏“on click”或选择“On click”>“Add case”弹出动作列表,点击“Add conditions”编辑事件。
PS:事件里的共有6个属性很强大,这里介绍一下每个属性的用途,供大家举一反三
。- Text on widget:Text field或Text area中输入的文字
- Check state of:复选框(Checkbox)或单选框(Radio button)的选择状态
- Selected option of:已选的Drop list或List box中一项
- Value of a Variable:变量值
- Length of a Widget value:变量域长度
- Length of a Variable value:组件属性的长度
我们可以点击每个事件后面的添加和删除定义多个不同的事件,另外“satisfy”属性用来判断不同事件之间的关系。“all”表示同时满足所有的事件,相当于“and”;“any”表示只需满足其中一种事件状态就可以了,相当于“or”。
定义好 事件确认,选择动作列表中的“Open link in current window”,选中链接页面“sucess”双击,我们就定义好了功能2。
现在实现功能3。选中按钮>"edit case">勾选“wait time(ms),注意这里的时间设置1000,因为单位是毫秒。
在实现功能4。这里的提示框后面文案我分成了两种情况:
- 当输入用户名正确显示xiaoxiao,显示“用户名正确”
- 用户名为xiaoxiao,密码输入不正确。显示“密码不匹配”
选择组件“dynamic panel”,拖动到信息面板中,命名info。双击弹出状态编辑栏。可以进行状态添加,状态名修改等操作,我先后添加“name info”和“password info"两个状态为后面的动作切换做准备。选中“name info”点击“edit state”进入编辑面板,在虚线框内输入相关信息,其他状态也是相同操作。

-
CMS是Content Management System的缩写,意为"内容管理系统"。
CMS具有许多基于模板的优秀设计,可以加快网站开发的速度和减少开发的成本。
CMS的功能并不只限于文本处理,它也可以处理图片、Flash动画、声像流、图像甚至电子邮件档案。
CMS还分各个平台脚本种类的。
内容管理系统是企业信息化建设和电子政务的新宠,也是一个相对较新的市场,对于内容管理,业界还没...


















