昨天刚吐槽TabBar,今天就要用到Axure制作一个TabBar了..

比较麻烦的是,为了实现高保真的交互视觉合一模型,我需要加入切好的图片。

【错误的尝试】

  1. 建立一个Master并取名为TabBar,这是为了在多界面间实现统一调用
  2. 拖入三个Image类的Widgets,分别Convert to Dynamic Panel,这是为了实现触发和未触发时的状态切换
  3. 每个Dynamic Panel设置两个State,分别拖入对应的Image
  4. 一切准备就绪,然后开始绑定事件,比如对Tab1,对它的OnClick交互绑定事件Set Tab1 to 1, Tab2 to 0, Tab3 to 0,Open View1 in Current Window,其余同理
  5. Preview的时候发现,当切换Page的时候,Master-Dynamic Panel的状态被重置了,并没有保持原来的状态

【官方教程】

查找解决方法的时候,看到了一篇实现Tab切换的官方教程,戳→Tab Control

它实现Tab Control的思路是用Rectangle作为Tab的背景,然后设置它的selected style,然后把它们合并成组,绑定OnClick事件为改变Selected属性

遗憾的是Rectangle暂时不支持以图片为背景的替换,戳→Fill a widget (rectangle, text box …) with a repeated background image

【解决方法一】

我想到的第一个解决方法是把三个View分成三个Page来做,每次在OnPageLoad的时候改变Dynamic Panel的State。这个方法确实可以实现一开始的目标。但是因为三个View被分成了三个Page来做,Page之间切换的时候不能实现交互动画,而且会出现明显的卡顿感。。在每个Page里都要重新绘制一次全局元素,非常麻烦和不优雅。

【解决方法二】

我想到的第二个解决方法是使用global variables,使用变量来记录目前Tab的状态,不管是把内容放在一起还是分成page,都比较容易,思路清晰

Axure做web还行,做客户端真是有些麻烦呢。。

先传个图,到时候做完了再把项目Po上来好了如果可以的话

突然冒出来的一点想法。Tab Bar确实比较适合那些功能多,重量平衡的App,但并不是所有的App都该有Tab Bar。尤其是像最近在做的这种导购类App,或者是新闻类App,都应该跳出原有的想法。
相反,最近我很喜欢那种悬浮式小图标。总是会贪心,想着把更多的空间转化为有用的价值嘛~

唉有空再写写长好了(´・Д・)」

——————————–

UPDATED 8.8

下定决心大做手术了!aitaobao Alpha不用TabBar了

终于明白为什么若汐要我不要那么着急做demo 实现动态效果了

之前她让窝画线框图,窝就在原来那个基础上稍微改了一下

她又叫窝画流程图,窝还是固定在原来那个版本的框架里

直到今天她叫窝写Story Board,窝才发现自己应该把所有的东西都重新考虑过!!

现在有种恍然大悟的感觉呢。。第一天来的时候,若汐要我去看那本《用户体验的要素》,之前看过几遍了,所以没太放在心上。而这个礼拜我的所有尝试都相当于是从五层结构的顶部走回底部,每走一次,就重构一次自己的想法。。虽然费了很大劲。。但至少明白了以后思考问题的时候一定要从底部开始,从最抽象的战略层开始,跳出原有的框架思维,逐步分析。

下周一就要做展示了。。看起来,周末是要回去做的节奏了。。

“没有灵魂,哪有筋骨,没有筋骨,哪有皮囊。”

大雾QAQ

准备 

01  注册成为apple developer

02  Quartz Composer

03  Origami

04 Avocado(可选)

参考

01 次时代交互原型神器Origami档案

02 Two Hours With Quartz Composer + Origami

03 UI Prototyping with Quartz Composer and Origami

04 Facebook小组 Origami Community

第一阶段 – 实现app启动界面和引导界面

第二阶段 – 实现Tab Bar

第三阶段 – 实现交互组件

第四阶段 – 实现二跳页

实现app启动界面

【目标】通过计时器,使启动界面的图停顿2秒之后实现渐隐效果

【用到的Patch】

  Timer

  1. 输入参数 Turn On – 决定Timer是否开始
  2. 输入参数 Duration – 决定Timer的时长
  3. 输出参数 Time – 显示逝去的时长
  4. 输出参数 Done – 初始值为True 到时间了之后值为False

  Transition

  1.  输入参数Progress – 过程比例
  2.  输入参数Start Value – 初始值
  3.  输入参数End Value – 终值
  4.  输出参数Value – 当前数值

暂时写到这里,待续

重构了三次之后……终于是把场景设计与表现的大作业完成了!完结撒花!

初步熟悉了maya建筑模型制作、模型贴图以及静态帧渲染等过程,感觉很有趣呢。

今天先把最终结果图po上来,具体技术细节考试周结束了之后再补充。

【最终渲染结果】

【部分细节】

【制作过程截图】

    前段时间帮别人做了一份40来页的宣传册,初步学习以及使用了一下Adobe Indesign,写一写感想和体会。

    Adobe系列的工具都比较容易上手,大概是因为经常在使用Photoshop的缘故,界面风格、交互风格都比较相似,所以前期好感度+50…看一小段官方入门视频,就可以熟悉基本操作了。

    先来说一说Indesign的视图模式,Indesign的视图模式比较直观,正常模式中可以清楚看到参考线、非打印对象、空白粘贴版等等,左右两页也可以便捷地操作,出血模式则可以看到最终输出的显示文稿,在出血线外的打印对象也会被输出,预览模式中可以看到最终输出的显示文稿预览效果。

    再来说一说Indesign的工具栏,如同Illustrator一样,Indesign也有黑键头和白键头之分,也有简单的几何图形绘制工具,如线段、矩形之类的,比较厉害的是文字工具,关于对齐、缩进、大小写转换、字符挤压间距、字偶间距、字符间距、字符样式都可以灵活地设置,这里值得一提的是其字体加粗模式,是通过窗口-描边操作而非文字工具的子菜单来实现的。

     Indesign对于图片操作也很友好。插入一张图片之后,可以对其进行简单的风格处理,如透明度、羽化等等,也可以右键-编辑工具-使用AI或者PS对其进行再操作,还可以通过改变链接地址来做到只改变图片内容,不改变图片位置、尺寸和风格。

    Indesign最好用的地方之一在于一个文本框可以贯穿全文,不管在前几页对文本内容如何增删,后几页都会自动受影响,还有一点就是Indesign可以方便地定位文本内容,可以拉全局辅助线和分页辅助线,也可以方便地查看左右页面的辅助线,其对齐模式也比较齐全。

    Indesign还支持交互pdf的制作,可以通过内嵌JavaScript或AppleScript来实现交互的过程。以后有机会也可以试一试,感觉蛮有趣的!

学习资料:

        http://helpx.adobe.com/cn/indesign/topics.html

        http://www.hopestudio.org/Item/76269.aspx

❀❀面试完阿里之后就蛮想写一些感想的,直到今天才在孙4权学长和渣渣提到的时候想起来还欠自己一些文字…不管怎么说都是一次不错的经历,虽然不同人类肯定会遇到不同情况,但窝还是蛮想写下来,给明年的自己看看也好的呢(●′ω`●)

猜不到开头的开头

在听渣渣讲起阿里面试报名之前,没有想过会在大二暑假实习,所以自然没有太多关注实习招聘的事情,也错过了正常的暑期实习报名,笔试也没有参加…感觉蛮可惜的TAT…所以给明年留下的经验教训就是早做准备早报名…

所以我会说真·儿报名是在正式面试前两天晚上吗…参考campus.alibaba.com…看了交互设计师的介绍,感觉蛮想去的ww…虽然过了截止日期,但还是要线上报名的哟…需要填蛮多信息的,如果有担任百度贴吧吧主的经历,也可以写上去哟(。▰‿‿▰。) ❤//淡淡的一笑…

霸面←听起来有点可啪

个人信息填写完了之后,大家还是觉得就这么去霸面了会不会不太礼貌,会不会留下一些黑历史什么的..也听说阿里有内推名额,所以打电话给大师兄了解情况。大师兄好像不太了解暑期实习的情况,他说他组里缺人啊什么的,不过如果要去实习的话,貌似就不是一个月的事情了哟…

于是,窝萌毅然决然地决定组团去霸面……

//窝萌指我,孙4权学长,渣渣,马大神,曾大神和邦邦

简历←论衣冠对禽兽的重要性

既然是去面交互的话,应该要注意一下自己简历的排版了..

挑了个适合桃子的颜色,加上一些图形化的装饰和排版,一份简陋的简历就做好了……

因为针对的是阿里的面试,所以简历上大致写了一下内容

  1. 个人信息(出生、毕业年份、专业、履历),我把它们做成了timeline的样子,更加直观~
  2. 项目经历,大致写了一下自己都参与过哪些项目,项目规模、开发周期之类的,感觉面试官会比较注意看这部分呢!
  3. 技能状态,把所有的主动技能被动技能都写上了..还给自己打了评分..噗…感觉很中二..
  4. 社交网络账号…窝也不知道当时为啥要写这个上去..喔!好像是交互设计师的岗位介绍里面提到了“如果你拥有乐观开朗的个性,热爱生活,关注细节;善于合作,充满好奇心,在每一个有趣的网站都注册了帐号”……

这里比较值得一提的是,打印真是一件很头疼的事情……学校的彩打质量太不乐观了……哭……

一面←脑洞大开的一小时

我们起了大早,吃了早饭,打着车来到了位于支付宝大楼附近的tangmiao路huayang宾馆……

等候室里有好多准备面试的人类,我们先去接待处签到……因为没有通过正确的方式打开阿里面试,所以我们的报名表上被写了两个大大的霸面,然后塞到了一堆报名表中。

小小地瞥了一眼交互设计师的报名表,厚厚的一打……天呐噜……

渣渣和马大神他们陆续去面试了……

当我还在纠结与恐惧今天能不能轮到一面的时候,接待处的姐姐喊了我的名字……交互设计师的一面是6人一起群面的,所以也许比较快一些吧=w=

群面是去酒店的一间小包厢里,小圆桌,两名面试官,八人局……噗我在说些什么……

首先,我们做了自我介绍……关于面试中的自我介绍,我一直是觉得,要说一些面试官感兴趣的事情,从交互的角度来讲就是,不同的用户有不同的需求,就应该提供不同的展示…比如阿里的面试,差不多就简单说一下自己的学校,专业,毕业年份,以及项目经历就好噜……和我一组的其他五名女士和先生,有三位都是浙大的,两位大三工设的,一位研二计科的,还有一位浙传媒的女士和一位美院的先生。

第二个环节就是workshop……猜得到呐~三人一组,我和浙传媒女士和美院先生一组,我们的题目是,现在需要开发一款个人健康管理类app,请给出设计思路,针对的用户群,创意说明,功能,到最后的线稿图,一共40分钟的时间。美院先生自告奋勇当了组长,我们开始了漫长的讨论……这里我就不赘述我们的讨论过程了……总之是不太顺利的……包括画线稿图也是……差一点就来不及了TAT……我们讨论的过程中两位面试官问大家有没有带作品过来,我突然记起来之前首席设计师评选的时候,我做了一个ppt,虽然没有收录自己全部的作品,但至少也是一个能拿得出手的东西了,所以蛮庆幸带着电脑的QAQ……最后我们给出的方案是这样子的:我们想要针对大学生及青年群体开发一款个人健康管理类app,主要分为记录、评估、分享三个方面,创新点在于把这种个人记录类型的app社交化了,从而增加了用户粘性(题目出来的时候我就觉得这是这道面试题的雷区..一定要准备好怎么回答面试官的提问–如何增加用户粘性?),主要是通过记录饮食、运动,加入简单的评估功能,增加趣味性,又增加分享功能(好友间分享、app间分享)。相比我们这一组,另外一组就比较惨了……他们踩了好几个雷区……比如用户群体……比如用户粘性……

也许很多人会觉得workshop的面试题更像是给产品经理的面试题,只是给大家开开脑洞而已,其实我觉得完全不是的,交互设计师的侧重点和思考问题的方式,与产品经理完全是两个思路,通过讨论的侧重点就可以很好地看出两者的区别,再加上线框图,我觉得这道题其实是蛮好的一道小组面试题吧~

第三个环节是面试官提问,面试官真的是提了很多奇奇怪怪的问题……比如,为什么别人都穿了长袖,而我穿了短袖……//因为用户需求不同……比如这家饭店的厨师,有的顾客口味重,有的顾客口味清淡,他该怎么做菜……//用户分群……

面试完了之后,在门外等了一会儿……被告知进了二面( /) V ( ),可是时间太晚了,于是是第二天

二面←说了好多话呀

二面是进去一个很大的会议室,一位比较年轻的先生坐在我对面,首先还是自我介绍……然后我向他展示了我的作品,他只是听着,然后淡淡地微笑……然后他问我,我有什么问题要问他,我忘了我说什么了……

三面←聊聊天呐

三面是hr面……和hr面的时候就是她问一个问题,我回答一个问题。虽然聊的都是蛮轻松的话题,甚至会被问到有没有男朋友什么的,但是感觉每一个问题都是用来判断个人性格的吧~大概只要没有什么太消极的地方,都是可以被接受的呢。

四面←进击的二面

四面的那位面试官给人的感觉明显比二面的那位多了一些压迫感,在听完我的项目经历之后,又看了一些我的作品,我们针对wp版qsc-mobile的交互细节进行了讨论,唔那位先生提出了一些不同的看法,但都蛮有道理的,而且他最喜欢说的话就是,你可以自己想一想,这里面有什么矛盾的地方吗。我们聊了蛮久蛮久的,后来还是有我提问他问题的机会,我问他,交互设计,现有学校课程和专业都不是特别对口,对于自己做工程,自己摸索学习,他有什么看法,他说,他不是很喜欢学院派的作风,交互设计更多是在实践中总结的,他说可以多看看别人的博文之类的……

❀❀差不多四轮的面试经历都写下来了,最后的录取结果大概是在两三个礼拜之后,hr打电话来通知。唔,感觉这篇博文差不多就写到这里了,等实习结束了之后再写一写实习感想好了,喵~″

直接 动物: 腾讯。。安卓机器人?。。worktile 长颈鹿。。百度贴吧熊。。美团刷新小人。。微博不明生物。。
水果:apple?
物品:小浪花

大众审美 偏爱于可爱 明亮 缤纷 清爽

设计师和艺术家的区别

先有图案 再有文字

图案是最原始的表达

用户是有情绪的

辨识度

字母统一天下?No..

万物皆萌。。

//路上随便想到的 恩。。连提纲都算不上吧。。想到啥说啥。。

帮同学写的DJJ论文…算是半译了Adobe&HTML的官方文档…

终于要发一篇干货了不容易….

Adobe change the world
—简述Adobe & HTML 及其相关

Adobe ,中文名奥多比,创建于1982年,是世界领先的数字媒体和在线营销解决方案供应商。据说Adobe的名字来源于创始人老家背后那条流淌的小河。
毋庸置疑Adobe为人们提供了许多优质的工具软件,Adobe彻底改变了人们展示创意,处理信息的方式。比较广为人知的有图像处理软件Adobe Photoshop, 矢量图形处理软件Adobe Illustrator, 网页制作软件Adobe Dreamweaver, 视频制作软件Adobe Premiere, 杂志制作软件Adobe Indesign, 照片批处理软件Adobe Lightroom, 多媒体处理软件Adobe After Effects等等。
目前,无论是Google, 还是Mozilla以及苹果,似乎都准备将HTML5作为下一代网络视频播放的主要手段,HTML5和flash的交替之战正激烈地进行着。苹果公司认为Flash是一种过时的技术,而HTML5才是未来。苹果的iPad和iPhone等产品中无法显示Flash动画。HTML5在视频播放流畅度上远胜于flash,越来越在网页开发设计上表现出优于flash的性能,Adobe作为老牌工具供应商,也决定积极拥抱HTML5技术,不久前推出了一系列HTML5开发工具——Adobe & HTML系列。

这篇文章就来简单介绍一下Adobe & HTML 系列。

Adobe&HTML的主推产品集Adobe Edge是Adobe公司的一款新型网页互动工具。它允许设计师通过HTML5、CSS和JavaScript制作网页动画,无需Flash。Adobe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏。目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等。它也支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各个平台。

Adobe & HTML 的宗旨是传达更优雅的网页设计理念和设计规范,使其能够充分表达,也使设计师和工程师能更好工作协作交流。网页是很重要的创意表达形式,网页平台在过去的十年里变得更加先进、更加丰富和更加具有互动性。在Adobe各款软件都日趋成熟的当下,Adobe & HTML便是综合这些不同功能的软件进行设计理念表达的关键。

Adobe & HTML有如下几点先天优势。

第一,健壮的图形基础。Adobe支持设计师用Photoshop和Illustrator做出的东西能够直接在网页上使用,同时也保证了更方便地在HTML,CSS,SVG之间实现几何图形的转换、动画的应用。
第二,灵活的排版模式。Adobe & HTML基于InDesign为设计师提供复杂的图层机制和丰富灵活的排版方式。为了更好地实现目标,Adobe向W3C提交了一些建议,包括CSS Region, CSS Shapes都做了一些改进, WebKit project CSS Regions 已经可以适应Chrome以及IE10
第三,像电影一样的视觉特效。为了增加更好的用户体验,Flash,After Effects提供了复杂又引人注目的视觉特效,Adobe为了把这些用户体验移植到Web上,从CSS Custom Filters开始加快硬件的图形滤镜处理和网页视觉特效
第四,更多的素材。Adobe提供了很多更适合在网页上使用的优雅而开源的字体,Source Sans Pro和 Source Code Pro,还有一个实验室Adobe Edge Web Fonts,里面有很多免费的字体
第五,通过Creative Cloud,用户可以在线获取素材资源,也可以公布自己的作品并与别人交流,同时通过与Behance社区的关联使设计师们更好地交流沟通。

网页设计需要考虑很多要素。
网页设计需要考虑一致性。网页制作标准的一个重要特点是网页的多样性和透明性,对于网页制作者来说网页的设计规范必须很好地统一。
网页设计还需要考虑App平台。网页必须适应外部平台,通过app实现,特别是在手机、平板上。网页平台的丰富性使其必须适应不同的用户体验。Adobe将会继续参与Apache Cordova项目的开发。同时在Adobe & HTML里也贡献了Adobe Phonegap。Adobe在创建某些工具和服务就直接使用了网络平台,比如Brackets,Edge Code和Edge Reflow就是用HTML,CSS,JavaScript(使用CEF开源项目)来构建的。

Adobe & HTML致力于创造更好地内容需要更好的工具和服务。希望能够为网页设计师和工程师们提供世界上最好的工具支持来制造出漂亮的响应式布局网站和app应用。

另外,Adobe制定了开发工具应该遵循四个原则——Edge Tools & Services Principles.
 Be focused 开发工具在与其他工具一起使用的时候必须做到接口方便,利于使用
 Stay up to date with evolving web standards 网页变化很快,新的设计标准和技术随时都在出现,网页设计师和工程师需要现代网络的访问工具,所以开发工具应该随时与新标准新技术保持同步
 Let designers and developers choose which framework to use 新的网页框架也是在不断产生的,为了适应和调整不同的用途和开发风格。开发工具不应该限制你所使用的框架,而应该让工程师、设计师自主选择他们需要的框架
 Make the web platform transparent 网页设计师也是希望看到CSS,HTML,JavaScript的,他们理解并且希望操作这些模型,查询媒体。他们的工具应该让他们更好得使用这些东西,而不是把他们藏起来。

Adobe使用这些准则开发了Edge Tools& Services,提供了网页设计师和工程师在创造环节需要用到的全面的工具箱和服务。通过Adobe Creative Cloud可以很好地得到。和其他adobe的工具结合起来,他们代表了世界上创造响应式布局网页和应用的最好的工具

Adobe Edge Tools & Services还包括如下几个子产品。
 Adobe Edge Animate: Edge Animate是Adobe最新出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro,保留AdobeCC酷炫黑色风格,符合用户使用习惯,十分容易上手
 Adobe Edge Reflow: Edge Reflow CC可用于响应式设计的可视化创作,提高通过HTML5和CSS3技术在不同设备上所进行的网页开发效率。
 Adobe Edge Code: 这是一款方便优雅的编辑器,能够实时查看颜色、字体等样式,不用再想之前一样调好颜色再去修改颜色代码了
 Adobe Edge Inspect:方便查看网页代码,方便在各种的移动终端上查看网页效果
 Adobe Edge Web Fonts:提供了很多免费的创意字体
 Adobe Typekit:网页字体库管理软件
 Adobe PhoneGap Build:跨平台移动应用开发工具

不管怎么说,Adobe在更好地把HTML5与设计结合在一起这条道路上所产生的理念和创造性尝试是十分值得继续期待和关注的,期待Adobe & HTML 技术更加成熟。

image