Dreamer

User Interface

糟糕,我不会买错了吧!——如何避免用户押错队

September 5, 2010 by dreamer

买彩票,最杯具的事情是什么?不,不是中不了大奖,而是明明500万元大奖的号码和昨天打算买的一个不差,你却不小心涂错了号码! 这种错误对于用户是灾难性的。所以为了世界和平,我们应当尽量避免我们的用户遭受这样的打击。 世界杯活动是以竞猜的形式进行的。每一场比赛开赛前48小时,用户需要选择胜负关系和净胜球。一开始,程序给我的原始页面输出是这样的: 11日22:00 南非(A) 墨西哥(B) 净胜球数 胜负关系:A胜, B胜, 平局 净胜球:0个,1-2个, 3-5个, 5个以上 很多用户可能难以在短时间(1-3秒)内做初选择,他们需要记住谁是A谁是B。人脑的短暂记忆容量恐怕只有大约5个单词或者几个字,如果碰上斯洛文尼亚vs阿尔及利亚,用户恐怕还得反复回去对照。而那些过于自信或者抢时间的用户,他们只能凭着感觉走。押错队伍的几率变大了。 让我们做一个简单的调整: 11日22:00 南非(A) 墨西哥(B) 净胜球数 胜负关系:A胜, B胜, 平局 净胜球:0个,1-2个, 3-5个, 5个以上 尽管没有任何排版,似乎不那么容易出错了! 最终这份表单我是这样设计的:用颜色和排版体现队名和字母A B的关系。在竞猜结果那里也用了不同的颜色区分正误(还有图标的大小),这样显得更有感情一些。 正如之前文章提到的,这个专题的时间很紧迫,大概只有2天的时间,其中又有大部分时间用于调整那些静态的企业信息展示的页面。这个真正和用户打交道的页面只留给我2个多小时的时间实现并且与程序对接。确实还有很多地方不够完善。用了一些算不上什么的小技巧。 至于结果,还算欣慰。这次活动或许是我们几年来最成功的一次,有5万多人次参与竞猜,每天都有上千的讨论帖发表,没有人反映他押错了队伍。并且因为明确的颜色区分,表示正确的“绿”和错误的“红”成了论坛中短期的流行词。常常有人抱怨他“全红”,希望能“绿”一下,甚至有人认为是抽多了国内烤烟才导致总是猜错(因为国内烤烟包装大部分是红色的),号召大家抽“小熊猫”(绿色)。还真有人实践了!当然他们不会意识到这和一开始的设计有什么关系,界面设计就是这样,隐形便是成功! ====================== 附上同样是世界杯活动的另一个表单。这是个以下注为形式的活动,需要突出剩余筹码和一些规则、通知。

Posted in: Interaction&Front-end, User Interface, Visual Design, 工作整理 Tagged: web

互动设计是神马?

August 15, 2010 by dreamer

前些天我有些纠结,每次逛一圈互动设计的社区都有一种想死的感觉。一是从平面或者动画的视觉角度而言,和国内交互设计师差距实在是太大了,令我羞愤难当。二是即使是我觉得很有差距的作品,在评论里仍有很多尖刻的批评⋯⋯真是杯具啊。 忽然回过神来,那些成功的“互动设计”作品并没有引起我强烈的想要为之奋斗的欲望。我甚至都不知道什么是“互动设计”,听起来很像“交互设计(Interactive Design)”,而实际上又不是。看起来这是一个流行在国内的设计(广告)圈子的词,以我所见过的作品来理解,我先擅自下个定义: 传统媒介上的广告在互联网上的延伸。多用大量的flash动画表现,内容常常为广告、活动。它并非是界面设计中的某一个环节,更像是广告营销的网络产品的整个设计过程。 互联网比传统媒介的广告有什么优势? 成本低,而且用户随时随地都能自主获取 能够反馈用户的操作(鼠标、键盘)做出酷炫的动画效果 用户能够成为信息发布者。以此为基础开展活动能得到及时的反馈。 我想这其中2、3条应当是“互动设计”与传统广告相比显著的不同点。 而实际上“互动设计”是什么?我只能先求教于伟大的维基百科,维基告诉我: 交互设计,又称互动设计,(英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面。 维基认为互动设计就是交互设计,看来维基是不知道的。我应该找万能的百度知道。全知全能的度受说: (友情提示:这整段话可以直接被忽略,我想你和我一样都看不太懂) 互动设计是一个新的领域:是审美以及文化、技术以及人类科学的融合。他所关心的设计是包含这些技术是否能给予服务,以及和他们互动经验的质量。 人类的生活就是一个互动和生活。从出生开始,我们就和人们以及我们所处的环境,使用我们的感官、我们的想象、我们的情感以及我们的知识直接进行互动。 但是到今天,计算机以及电传沟通允许人们间接的互动。透过我们和其它的以及我们所处的环境进行互动,互动技术已经变成一个媒介;以及他们已经转换我们生活的各个层面。 正如工业设计让机械符合我们的互动,建筑让我们在城镇中来符合社交生活的质量,互动设计以互动的气数来符合我们生活,并且就像是建筑以及工业设计,他们也是关心文化以及技术。 互动设计也显示出新的商业模型,他需要被发表这些服务以及经验。 在这世界上每个人都拥有12的计算机芯片;从而同现在在幼儿园要离开学校开始,没个人都将拥有数千个芯片。在如此复杂、以及和这些技术互动的世界中将会定义他们居住的生活质量。在如此复杂、好的互动设计的世界中未提得数字技术更容易进入到各个年龄层、以及他们的教育之中。 尽管百度百科中通篇都在解释“互动设计”而非“交互设计”,但我还是没有明白它指的是什么。在百科的最后,甚至给出了一个更骇人的定义: 他们称呼关键的人为「使用者接口发展者」,我相信这是和在网站世界中的「互动设计师」是相同的人。 好吧,我们终于可以从「使用者接口发展者」中提取出,互动设计师应该就是用户界面开发人员(User Interface Developer)。互动设计或许可以理解为用户界面设计。 回到之前的现实,我认为现在社区中大量讨论的用户界面设计更多是广告营销产品,甚至90%是flash动画来表现的广告和活动。社区中的讨论主要集中在策划、营销、视觉体验。这更像是在讨论一个传统的广告,不是么?只不过它被放在互联网上了。而我们平时理解的“用户界面设计”,常常是包含“前端实现”、“视觉设计”、“交互设计”、“信息架构”多个环节的工程性的东西。至于那些策划营销应该是在系统范围之外的~当然在用户界面设计中依然要体现策划营销的精神和目的。 单就设计社区当中所说的“交互设计”,我依然希望现在的情况能够有所变化,不要只是广告营销指导、设计师程序员执行的另一种广告,而应该成为一个吸取多领域精华的产品。 在人与互联网之间,好的表现形式并非只有flash。互联网用户拥有电视机前所没有的主动权,它们可以任性地点开这个超链接,也随时会点击窗口上的关闭键。他们或许更喜欢“我要做什么”的模式,而非“你们像让我做什么”。那些酷炫的动画,带着强烈自信,认为用户一定有兴趣继续看下去。实际上在那漫长的flash加载过程中就可能流失相当一部分人。或许有人说,那么我们将flash再优化一些,loading时间更短,不就行了么?再短也比不上纯html呀⋯⋯5秒的延迟对于一部分想要获取信息的人来说已经是忍受的上限。更重要的是,展示动画是一种“想让用户做什么”的模式,即使加入了鼠标键盘响应互动,也改变不了这个本质。 现在有了web2.0,有sns,有了90后,似乎一切都有了一些变化。有人说,用户喜欢展示自我,喜欢个性,我们结合web2.0讨好他们吧!互动设计作品中,很大一部分是在线活动,活动不外乎几种类型:上传照片、上传视频、上传文字、有奖问答、游戏。且不说这样千篇一律的活动是否真能达到目的,这样的活动是否就能够激起人们的参与热情?我仍然坚持flash长动画并不是一个好的吸引人参与的表现方式。况且,上传自己的照片或者视频就能让用户有很强烈的融入感么?还是纯为了活动奖品而特意去做(这就又陷入了那种“你们想让我做什么“的模式)。 要说现在最红火的活动是什么?前些日子恐怕得是”全民调戏凡客“吧⋯⋯我不知到这个活动是否和凡客有关,如果不是,凡客真该向发起活动的人付钱。尽管没有什么奖品,有着各种各样爱好的人们还是乐于参与。有讽刺时政的,有关于娱乐圈的,有体育圈的,有很正经的,有很YY的⋯⋯ps好的简直像凡客的官方版,ps不好的依然有一种强烈的戏谑意味,总是能找到让你印象深刻的~后来在公交车站看到韩寒的那个凡客广告,忽然发现相比广大人民群众,这个文案做得真得好苍白~这个活动没有flash,没有炫目的动画和华丽的介绍文字,你甚至不会留意到参与活动时用户界面的存在⋯⋯⋯⋯我想这才是我理想中的用户界面设计。当然,这样的概念也很契合凡客网站的风格~~再次呼吁凡客给活动发起人付钱吧! 这张照片来自喵啦个咪哒 (这种阵容的巴萨在我手里都能输球)。虽然不算很好的作品,但旁边那个酱油瓶深得我心,gj!

Posted in: Interaction&Front-end, User Interface, 工作整理 Tagged: 互动设计, 凡客

Designing Interfaces-那些书本教会我们的事

August 15, 2010 by dreamer

Designing Interfaces中文版 它是关于界面设计模式的。在网上看到有人抱怨它太过简单,没有意义,对此也挺无语的⋯⋯至少它对我来说已经很够用了。一个模式的价值并不在于你把它记在脑子里,而是投入实用。在遇到碰到那些恼人的环境时,我们往往已经把各种需求利弊分析得很清楚,此时只需要它浅浅的点明,引入某一种模式便是顺理成章的了。况且我也并不认为Designing Interfaces仅仅是在蜻蜓点水,实际上它只是不愿说得太细。无论如何界面设计都只是一个相对较新的领域,那些准则并没有明确的对与错,具体的方法也五花八门,真正的细节还是需要我们自己去探求~ 一目了然 传说中的界面入门圣经。对于观念上的启发非常大。适合于界面产品开发相关的任何人阅读。它很薄,也很有趣。它的主旨就像它的标题一样(这个主旨确实是从头到位都被贯彻了),界面应当是”Don’t Make Me Think”的。在我看来它依然是一部“观念”上的启蒙书,在实际工作里,我们往往会体会到过程并不能那么完美,但即使不完美的过程依然能得出能够接受的结果。总之,学习他们的精神,走我们自己的路吧。 瞬间之美 如果这本书有腰封,我想一定会被写上《Don’t Make Me Think》作者最新大作或姊妹篇。但实际上它们的内容并不一样。《瞬间之美》更像介于《Don’t Make Me Think》和《Designing Interfaces》的过渡教程。作者漫不经心地带领我们走过一个个界面,述说着他思考和工作的过程,我们会发现一个让人心动的界面是如何从观念变成现实的。

Posted in: User Interface, 工作整理 Tagged: Designing Interfaces, Don't Make Me Think, 瞬间之美

http协议复习笔记摘要

August 8, 2010 by dreamer

基于网络的应用永远离不开网络,尽管工作内容大部分在前端,也不可避免地需要了解网络。上周工作中,我不止一次地想要再复习复习http。周一时,我们讨论用wml还是xhtml mp制作wap网站页面。负责服务器段程序的小盆友有些担心他原l来针对wml做的一些东西要重来了。我突然有点蒙,但还是告诉他用xml还是xhtml mp并不太影响他的工作,只影响我的工作,服务器和客户端之间的沟通主要是遵守http协议,他那边需要改动的不大。接下来的工作涉及到需要判断客户端可接受的mime类型、客户端是否为移动设备的问题,这些需要通过读取http请求报头中的内容。周五碰到最大的问题,恐怕一部分还需要通过http内容来解决:我们的编码为utf-8的页面在ucweb下显示乱码,opera mini和nokia自带浏览器正常,目前不知如何解决。距离计算机网络的考试结束大概有四年的时间,当时这门课程并不太受重视,而现在看来真怀念书里的那些东西。周末特地花了一些时间把http部分重新复习了一遍。 1. HTTP是什么 http即超文本传输协议,是一个应用层的协议。它由两部分实现: 客户端程序 ————– 服务器程序      |——交换http报文——-| http规定了报文的格式和交换方式 1). web文档 web文档由对象组成。对象即文件,可以是html、图像、多媒体⋯⋯对象可以通过url寻址。 2). url 主机名/路径名 3). 浏览器 web应用的用户代理,实现了http协议的客户机端 4). web服务器 用于储存web对象,实现http的服务器端 2. http采用tcp传输 clint 《》 socket —tcp—-socket 《》 server (《》表示投递、获取数据) 3. http是无状态协议 因此需要保存状态时,需要通过cookie、session等才能实现 4. http三次握手 client:发起tcp连接 client:通过连接发送http请求 server:接受报文,取出文件,封装在http响应报文中并发送 server:通知tcp断开 client:收到响应报文,tcp关闭。提取对象,读取,得到另外n个对象的引用(例如其他的图像、css文件) client:对每个引用重复前4步 http并不关心client如何解释web页面,client往往会并行连接n个连接。 5. http报文格式 这部分其实是我现在最需要复习的,结果摘录得太多了⋯⋯干脆就不放上来了。下面是一些对于前端来说可能比较有用得一些参考说明: List of HTTP status codes List of … [Read more…]

Posted in: Mobile, User Interface, 工作整理 Tagged: http

xhtml mp初体验

August 6, 2010 by dreamer

用xhtml mp顺利写了一个“你好手机!”页面后,几个非常棘手的问题就扑面而来,手机网站开发中遇到的繁琐挑战与我们终于开始了正面接触。用了一天的时间好好看了一下XHTML 移动概要 (XHTML MP) / WAP 2.0 教程 。下面是一些些笔记摘要。~( o . o )~ 1. 什么是XHTML mp XHTML mp即XHTML Mobile Profile(可扩展标记语言移动概要)。它是XHTML的完全子集,它是XHTML Basic + XHTML完整版一部分可用于移动设备的属性。 XHTML mp不支持客户端脚本,因此一些基本的验证也要放在服务器端进行。将来可能会有ECMAScript Mobile Profile-ESMP。 相关的一些概念 xhtml – 可视为用xml规范对html进行格式化 xhtml basic – xhtml简化版,无css、框架、script,由w3c规定 wcss/wap css - css2的简化版,有针对移动的扩展(实际开发实践中这些扩展并不太常用),由oma规定,与w3c的css mobile是不同的。 2. MIME类型 MIME即Multipurpose Internet Mail Extensions。 WAP2.0规定的MIME类型:xhtml, html, htm application/vnd.wap.xhtml+xml - OMA指定的MIME,N60系只能查看该类型。 application/xhtml+xml – … [Read more…]

Posted in: Mobile, User Interface, 工作整理 Tagged: wap, xhtml mp, 手机, 手机网站

成为一名手机党

August 5, 2010 by dreamer

如果不是一名手机党,你永远不能体会手机党的悲哀。手机,又称受机、爪机。在相当一部分的手机党面前,视频、动画、图片,以及一部分的网站就是杯具⋯⋯然而,无论是用户还是网络内容/服务提供商,都无法拒绝爪机们的诱惑——它们小巧、随时随地、人手一台⋯⋯ 为了网站开发wap版做准备,今年年初我换了新的3G手机。我的6700c屏幕分辨率是320*240,s40系统,装了opera mini,这样的配置在将来应当算是主流中超级低端了吧。因为web开发本身就常常需要考虑各种兼容性,手上留一台环境最苛刻的设备应该靠谱吧。5月底,开通了联不通的GPRS 500M套餐,打算先多了解手机网站的情况。事实上我把大部分的流量都用在了看世界杯新闻上⋯⋯晚上没有看比赛,早晨醒来一伸手,就能看到比赛结果和最新的消息;上班的路上能接着看一些图片和评论,真的很方便。 一直一直到昨天,我正式接触了手机网站开发。用xhtml mp写了一个简单的查询页面。嗯⋯⋯我一直期待的手机网站开发,正式成为手机党,就从这里开始吧!

Posted in: Life, Mobile, User Interface, 工作整理 Tagged: xhtml, 手机, 手机网站

gallery页面三步走(完成)

July 28, 2010 by dreamer

benny说我写的东西太没条理了,好吧,这次我就尽量一点一点的来说。 gallery是网站中用于显示产品的所有照片的页面。产品照片是通过这样的流程产生的:网友自主提交->管理员人工审核->设计手工加上水印->上传。gallery已经有3个版本,下面会仔细地说说这三个版本,纪录我在做这些工作时候的考虑,从中总结一些可用的方法。 gallery v1.0 启用时间:2006.6-2009.10 页面元数据: – 产品名称 – 当前图片(800px × 600px) – 其他图片的缩略图 2009年bing的图片搜索提供了一种新的界面设计模式——无翻页的缩略图列表(即用一个页面将所有的缩略图列出来,摒弃盛行数年的“分页”模式),分页模式产生于那个屏幕小、用户对信息掌握程度低的年代,它将大量的信息切割成用户容易消化的长度,一段一段的推给用户。时光飞逝,2010年的今天,屏幕变大了,用户页习惯了在屏幕上阅读大量的信息,一个页面呈现所有的信息对他们来说理解起来没有那么困难了。分页反而给他们增加了点击的负担。现在看来我们在4年前就已经有这种理念了嘛⋯⋯Orz⋯⋯ 因为我们并没有一个“缩略图”集合页面,所以“查看大图”的页面也需要至少提供一种提供给用户“浏览全部照片”的可行途径。现在看来,第一版gallery是一个非常“简单”、“实用”的作品,在这个页面能直观地看到所有的缩略图。这个页面并不是我设计的,它工作了相当长的一段时间。 gallery v2.0 启用时间:2009.10-2010.7 页面元数据: – 产品名称 – 当前图片(800px × 600px) – 其他图片的缩略图 v2版本的元数据与v1时并没有变化。改版的起因是我们计划在此页面加入“用户评论”功能。在v1中,每个页面都会在页面下方显示全部图片的缩略图,“用户评论”只能放在这个不定高度的缩略图列表之下,大家感觉这样不太合理。我们同时也希望这个页面“用起来更方便一些”。v2的主要改动在于: 将产品名称单独放在页面顶部中间 将缩略图放入一个固定面积的“窗口”中 将上述窗口放到当前图片(原图)的右侧。 在v3里我又将这个窗口挪回了大图下方⋯⋯ o(>。<)o…… 后来我也扪心自问,为什么要放在右侧……我其实只是参考了无节操百度的图片搜索。更深层的原因是: 大图的宽度仅有800px,小于主流宽度960px,完全有空间在右侧加入缩略图列表;右侧的列表能减少用户浏览图片时垂直方向的滚动;同时,用户在查看大图时就能看到这个列表,他们可能马上就意识到还有其他很多图片可供查看。 带有缩略图的,尺寸很大的“上一张”、“下一张”按钮。这两个按钮是相册潜规则了吧,用户习惯了……所以大大方方show出来吧! gallery v3.0 启用时间:2010.7-? 页面元数据: – 产品名称 – 当前图片(1024px × 768px) – 其他图片的缩略图 任何一次改版都可以看成是要解决某些需求,在v3的设计前,我意识到首先要整理一下我们的需求。 1 gallery页面改版需求分析 1)用户的需求 用户进入这个页面的原因,往往反映了用户的需求。我会经常尝试通过“列出页面入口”的方法来了解用户“为什么而来”。进入gallery页面有三种方法: 点击product页面仅有的一张产品图片(该图片尺寸为240px … [Read more…]

Posted in: Interaction&Front-end, User Interface, 工作整理 Tagged: css, gallery, html, web, 产品, 相册

product页面的Realign

July 24, 2010 by dreamer

早些时候完成了网站中浏览量非常大的product页面的改版。这次改版,在我看来并不属于redesign,应该算是realign。这项工作其实完成有一段时间了,现在看来当时的一些做法还比较幼稚,现在整理一下主要是记录~~当然也还有一些些可以借鉴的经验~ 在此之前,product几乎延用了06年的页面代码,无论从设计还是别的角度看都有很多的不足。4年前的页面是由程序员负责实现(甚至是设计)的,遗留下来的主要问题是: 1 主次不清晰。 2 样式混乱:正文和超链结都是棕色,区分度不大。颜色、字体样式使用的比较随意,和逻辑层次没有必然联系。各个元素的间距有些过紧,也不统一,各个块之间不整齐。 3 大部分元素都是随手写进去的,结构不清晰 4 大面积没有太大作用的flash广告。 5 发表评论部分不明显,看起来不太像能发表什么东西 6 代码比较混乱,基本难以修改⋯⋯所以从06年到现在一直没有改。 当时的版面截图(不过看起来没当时那么难以接受⋯⋯) 由于product页面的浏览量非常的大,几乎是大部分用户接触网站的第一个页面(通过搜索引擎搜产品),需要有一个更为友好的界面,便于用户了解信息,吸引用户评论、驻留、参与到网站的其他活动中。这是第一次进行比较复杂的页面修整,我比较保守滴保留了原来页面中出现的95%的元素,只删除了几个被要求从页面去掉的flash广告。先在ps里弄出预期的效果图~参考了zol、京东商城、豆瓣三个网站(其实对比学习的过程蛮漫长的,但是我真的都忘记了!)。这是v1.0的效果图: 接下来就要下手啦,第一步是便是抛弃原有css,重新整理了一遍html,清理掉所有的<b>、<font>,统一页面的正文和超链结颜色,并使二者有比较明显的区分。按照页面的信息大概分块来重新调整元素和元素间的结构,分配更为合适的id和class。然后样式表~后来还加入了产品相关贴子列表版块,加强产品与论坛内容的联系。我个人认为如果能在论坛的贴子中加入对产品的反向联系效果会更好。这是v2.0版的效果图啦,根据内部反馈,对个别元素的样式进行了改动。 这是最终实现的“产品信息”、“产品评价”部分。相关的贴子部分去掉了图片,改为全文字,这是考虑到筛选出合适图片需要更多的人力~ 在“产品信息”部分,真的有很多很多信息!除了理化数据表格外,还有图片、销售区域、价格、厂家信息、提交报错链接、访问人数和分享按钮(他们在原来的布局中就紧挨着理化信息)。从逻辑分类上看,首先将不属于产品信息的访问人数和分享扔到外边去,他们属于“页面”。再把图片相关的划到一边。销售区域、价格、厂家信息、提交报错链接这几个东西让我有些犯难,各个都需要被强调(他们都是希望被用户注意到的功能),空间却只有2行左右。最后我用了按钮样式来强调他们。这个结果并不太理想,有一个反馈意见认为它们仍然不够“强”,我认为它们能够出现在第一屏就已经有天然的优势了,现在这种情况还能够接受。总之这块暂时就这么地了,是否有更好的改进方法?我还会慢慢想的。 这是产品评价部分: 评价,是产品口碑的指标,更是吸引用户更深入参与网站的活动。因此,它最好是“低门槛”的,只需要点一两下就能完成,不需要被“对不起,您还没注册”之类的失败信息打扰。当然,在指标的计算上,我们实际上是排除了那些“游客”打分和一些被怀疑为是“刷分”的打分,具体是怎样判断的,并没有公开,这样是为了防止有人有针对性地绕开规则刷分。评价部分的交互行为其实是以豆瓣评分为原型设计的,用灰常菜的js搞完了,可喜可贺。一开始打算用ajax的,这样打分体验好一些(感觉门槛更低),不过因为没有时间跟负责后台的程序员好好交流下,作罢。评分条的行为,除了hover状态,有两种unactive状态:1 原先的打分,暗色;2 本次已经评价,但是还未提交的打分,用了比较跳跃的亮色。亮色和右下角的提交按钮颜色近似,这样能在视觉上形成一种联系,暗示用户需要点那个提交,以及两个指标都需要打分。 产品评论的部分模仿了豆瓣的评论,可以原地展开全文。下方留有大大的白色输入框来诱导用户参与评论。察看全部评论的链结被反馈不够明显~~这个页面当中有太多被认为不够强调的地方了~~路曼曼其修远兮 与产品页面配套的还有一些子页面,不一一赘述了。 关于web界面设计,大道理往往很容易懂,可实际做起来很难一蹴而就。一开始往往只是靠自己的感觉和经验,一点一点的改善。自己在一点点进步,整个网站也在一点点进步。可能步伐并不大,还追不上大部队,至少我们正在往前走。

Posted in: Interaction&Front-end, User Interface, 工作整理 Tagged: realign, web, 产品

Papervision3D Tips(持续更新)

March 28, 2010 by dreamer

why PV3D? 这个问题有些些纠结 – 。- Papervision3D(下面简称PV3D),是一款比较老牌的Flash 3D引擎。PV3D除了比较老牌之外,与其他引擎相比并没有太多出众的特点,甚至可以说缺点明显,它的渲染效率比较低,对于第三方模型文件的支持也不完善。但是PV3D是完全免费的,而且使用人数也比较多,尤其是在国内使用的人数相对别的引擎要多一些,参考资料也相对多一些。 对于刚刚入门Flash3D的童鞋来说,PV3D或者Away3D是比较合适的选择,因为它们都是免费的,这个优势是绝对的。而其他的优缺点都是相对的。- -||| 例如从效率上考虑,目前Flash runtime都不涉及GPU,在硬件层面并没有支持3D的机制,所以任何Flash 3D引擎的效率都不太好。你很可能常常为了飙升的CPU占用率而绞尽脑汁。在此基础上,一些后开发的,或者商业引擎效率较高。PV3D则很容易让你被主管念叨“拜托不要搞这么占CPU的东东”。 而从参考资料上考虑,Flash3D算是非主流应用,任何一款引擎的参考资料都不多。资料较多的PV3D,国外的参考书籍寥寥无几,国内就更不用说了(据我所知目前只有台湾有一本讲PV3D商业应用的书)。网络上的英文资料主要来自于开发团队的博客,国内主要是一些论坛(例如flash天地会,Flab3D),在个人博客上零零星星有一些针对具体问题的解决例子。总体来说,国内只有初步的介绍,并没有太涉及核心;国外的实例很丰富,也比较系统(很容易举一反三),但是真的涉及到核心问题还是得自己钻研。另外说说文档,嘛,开源的项目,文档嘛,不可不信,不可不信(点到为止)……出现诡异的问题时建议直接看引擎源码吧…… 那么究竟为什么还是选择了PV3D呢?没什么特别的,很多引擎都是在它基础上开发的,所以一通百通啦。什么引擎不重要,重要的是对三维世界的理解嘛。至于效率问题,相信会随着Flash runtime和引擎的更新换代得到解决滴~ 加载第三方模型文件 dae是xml的子集,很容易阅读。 将dae导入pv3d中需要注意UP_AXES的值,它指定了模型中竖直向上的坐标轴。在PV3D理解的三维世界中,采用的是左手坐标系,竖直向上的是Y轴,而用Sketchup建模导出的dae中,默认的UP_AXES值是Z_UP的(诡异吧,我YY了很久才了解到的诶)。如果直接导入,会发现原本模型中的Z轴变成了Y轴,整个模型相对于其原本pitch了-90度。因此需要手工滴将dae文件中的UP_AXES的值修改为Y_UP,与PV3D统一。 PS.不推荐保留UP_AXES值,而直接旋转模型文件。因为从PV3D的文档中能看到,引擎本应该读取UP_AXES值,如果不为Y_UP,则需要对模型的坐标进行转换。例如上面提到的,Z_UP的模型,在PV3D中会将其Z坐标转为Y坐标,Y坐标转为Z坐标,实际渲染的结果与建模软件中所见相同(不会出现pitch-90的情况)。注意这仅仅是文档中写的……而实际上不知道为什么,引擎在导入模型时并没有进行这个处理,我们就暂时猜测这是一个未完成的功能吧。为了向后兼容,令模型的UP_AXES和PV3D统一是比较妥当的做法。即使将来引擎实现了文档中提的功能,我们原来的模型也依然能够像以前一样被正确滴渲染出来。 (待续)

Posted in: Flash3D Tagged: flash, papervision3d, PV3D

控制MovieAssetMaterial中MovieClip播放的方法(PV3D)

October 16, 2009 by dreamer

# // material类型转换 # var movieMaterialInDo3d:MovieAssetMaterial = do3d.material as MovieAssetMaterial; # // movie属性是DisplayObject类型的,需要转换 # var movie:MovieClip = movieMaterialInDo3d.movie as MovieClip; # movie.gotoAndStop(30); MovieAssetMaterial类中有一个公有属性movie,类型是DisplayObject,将其进行类型转换就行了

Posted in: Flash3D Tagged: flash, papervision3d, PV3D
« Previous 1 2 3 Next »

Categories

  • ACG
  • Flash3D
  • Interaction&Front-end
  • Life
  • Mobile
  • User Interface
  • Visual Design
  • 工作整理
  • 懒人食谱
  • 服务器

Recent Comments

  • dreamer on Kill IE6?
  • 曉行 on Kill IE6?
  • Benny on 互动设计是神马?
  • 人人都爱vancl | Dreamer on 互动设计是神马?
  • dreamer on http协议复习笔记摘要

Tags

3dmax 3Z 403 960 Grid System acg android apache call to action code collada css CSS framework dae diy Don't Make Me Think flash httpd.conf papervision3d programing PV3D web wordpress xhtml xhtml mp 互动设计 产品 便当 凡客 咖喱 应用 快速阅读 懒人食谱 手机 手机网站 搬家 泰式 炒方便面 烟盒 界面 相册 瞬间之美 破面 虾 说明 银魂

Copyright © 2026 Dreamer.

Mobile WordPress Theme by themehall.com