Logo design for two labs of Iowa State University
0

Logo design for two labs of Iowa State University

Just finished the logo designation for two labs of CS department in Iowa State University. Since Professor Carl Chang asked me for help, I promptly implemented it from sketching conception to the final representation. One for Smart Home Lab and the other for Software Engineering Research Group. Here I extract part of the email as a brief description.

smartHomeLab_Logo_V1@2x

Software_Engineering_lab_V3@2x

Smart Home Lab

As referred in

Machine’s purpose 机器意志
1

Machine’s purpose 机器意志

Everything has a purpose, even machines. Clocks tell the time and trains take you places. They do what they are meant to do. Maybe that’s why broken machines make me so sad. They can’t do what they meant to do. Maybe it’s the same with people. If you lose your purpose, it’s like you’re broken.

I’d imagine the whole world was one big machine. Machine never comes with any extra parts, you know. They always come with the exact amount they need. So I figured out the entire world was a big machine. I couldn’t be any extra part. I had to be here for some reason. And that means you have to be here for some reason, too.

Lines from 《Hugo》

这是《雨果》里最触动我的一段台词,小男孩站在望向整个巴黎的窗外,整个世界呈现在眼前的就是个巨大的机器,机器总会按照特定的意愿运转,直到停止。整个世界就像个巨大的机器,机器从来不需要多余的零件,所以你并不是因为多余才来的这里,我们需要在运转的过程中寻找自己的使命。

整个世界就像个巨大的机器,机器从来不需要多余的零件,所以你并不是因为多余才来的这里。

Moves like waver
0

Moves like waver

contact_animation

CodePen Demo: http://codepen.io/anon/pen/gpLQWp

Portfolio的一个小动画,想法的起源是我的portfolio的主题是海洋和星空,首页关于海洋的元素有塔,有船,有海洋生物,有海浪,所以想在contact的地方继续把海洋的想法贯穿下去,就想到了漂流瓶,可以用来通信,四种social icons做为海浪上的漂浮物,随着浪的起伏有着不同的movement,还挺生动的。

实现就是CSS3 Animation,海浪的运动用background-position来控制,icon的运动用transform: rotate(deg) translateX/Y(px),每种形态的律动和浮动需要仔细的考量。

综艺于我,劳于形,观于心
3

综艺于我,劳于形,观于心

《我是歌手》第三季琴键上落下了最后一个音符,勾出了眼泪含在心里,这三季一首歌也没有落下,哪怕是每次采访都要补上,也许又要把原因归结给热爱,不然把这些时间拿来干点别的事倒也不负恩泽。想想我也算是个综艺咖了,芒果台的各种王牌节目基本没有错过的,超女快男,名声大震,舞动奇迹,我是歌手,每一届都有新的宠爱,舞台上的歌在唱,人在换,听歌的人的心也转个不停。这已经不是综艺这么简单了,在娱乐背后,它又影响了多少人的认知,占据了多少人的情感,改变了多少人的格局。而综艺于我,总觉着像是可以相濡以沫的,是瘾,是患,是痴,它像一根管子,灌进来的是现象,吐出去的是消遣,留下来的是价值,就这样,它喂养了我十年,戒不掉的十年,隐隐中练就了一种认知。也许娱乐可以被视为一种催眠,节目中的价值导向或冲撞或洗礼或重塑着我们的意识和判断,浩浩汤汤的,真真假假的,平平淡淡的,劳于形总是胜过观于心。但不能否认的是,表演结束后,宾客散场后,销声匿迹后的那一抹残念,它是可以滴水穿石的,潜移默化的影响着观者的认知和行为,指导着自己的真人秀表演。

综艺对于我更多的是一种感同身受的训练,我能感受到节目中要传达的节奏和情感,尤其是某种情境下该有的一种反应和大众化的判断,比如PK时选手和观众,评委和主持,应该有怎样的立场,分别会导致怎样的结局,通常我们会有一个预想,而比赛的结果会验证了这个预想是否正确。这其实是一种洞察力和理解力的训练,我们可以在一个节目中接触到不同性格的人对事物的理解和反应,并给出自己的判断,当我们尝试着去理解和感受的时候,在设想被真实的情节验证的时候,很有可能会形成一种结论刻在我们的意识里,在下一次有类似情景发生的时候做出回应。这个过程反复的训练,纠错,最终会形成一些定势的思维模式,决定着我们日常的行为和判断。而电视节目有着比阅读更真实的感官传递,对思维模式的培养和训练也有着更强的作用,可能这种力量被我们所忽略了,但却是不可否认的,我们究竟有多少意识的养成是来自于经验的积累,来自于电视节目中潜在的训练。

说到底,综艺节目和文学、艺术一样,是一种信息的载体,所有的传达都需要出口,都会产生价值,作为一个伴随着电视节目成长的综艺爱好者,我只能说综艺于我,是一种共生,我需要有不间断的输入来延续我赖以生存的感同身受和嗤之以鼻的困顿无知。

Why we are called designer?
1

Why we are called designer?

Because we grasp the design thinking and skills to deal with specific requirements based on scenarios which gets us designers so brave to encounter the unfamiliar cases, maybe are beyond our experience and comprehension.

That’s why we should learn to empathy and distill the personas from the context-based requirements. Besides, we need to design the behaviours how personas interact with product to reach their goals and desires.

I think the design process can be divided into two parts: mental definition and behaviour representation. As mental determines behaviour, an unified design is required to build the connection between mental model and represented model. So users’ complaint is always a good reflection of where the design goes wrong.

QC + Origami练习生II:Swipe实现右滑返回
0

QC + Origami练习生II:Swipe实现右滑返回

SwipeNavigation

继续官网第三个Demo,主要练习Swipe Patch的使用,练习的交互场景是点触进入界面然后右滑返回,右滑返回可以说是个很原生的操作,在demo中做了一点视觉上的优化。

在滑动的这个场景中,核心交互是Feed和Detail这两个界面的切换,Feed界面里有零散的界面元素,所以在切换的过程中,一定是一个整体参与变化。动画可以分解为两个部分实现: 一是点击Feed中的图片,对应的Detail从右侧滑入,同时Feed缩小状淡出;二是在D界面右滑划出,F界面放大状淡入。在这个过程中变化的参数有F界面的ScaleOpacity和D界面的X Position,而且是同时变化。

为了改变X Position,可以用到的Patch有Scroll和Swipe,Scroll在上次练习中用于控制Feed的Y Position,Scroll虽然可以Scroll Paging,一次滚动一屏幕的宽度,但是Swipe更加符合场景下的用户习惯。Swipe Patch,入口参数中有起始位置,可以控制回到起点和到达终点,尤其是Jump To Start很适合右滑返回这个操作,出口参数Position选择是水平还是竖直方向。所以利用Swipe去控制F界面的Scale和Opacity和D界面的Y Position,在这之前应该先把F界面Group,组合后Viewer中的界面黑掉了,是因为这个Group没有对应Layer,在Image上悬停按L键接入一个Layer Patch,正好可以利用黑色底做F界面的淡入淡出,然后分别连接好控制关系就可以实现左滑右滑了,但是呢会出现一个问题,因为给F界面在左滑右滑的时有Scale,在D界面还没有滑出来之前执行左滑会使F界面Scale,因为在左滑时,Scale Transiiton Patch的Process会从1开始变大,这个变大的值会直接影响F界面的Scale值,这不是我们想看到的结果,处理这个问题可以借鉴上次练习中的Range,在Transition的下一级接一个Range Patch,将Scale控制到约等于1,这个地方是官方的Tutorial里面没有提到的,算是一个小创新吧。

搭好了Swipe模块,在进入和返回的过场中能调用。入场的时候是点按F界面上的图片,需要使用一块虚拟区域覆盖在图片上方来模拟点触事件,使用Hit Area来实现,H是一个特殊的Layer,Status Mode可以控制区域的可见性,有自己独立的Position,而模拟要求这块区域和真实区域有相同的位置,所以要把它们俩放在同一个坐标体系下,方便的做法是把Feed Image Layer和Hit Area组合起来,两个可以一起Scroll。

因为组合增加了一个层级,那么H绑定的Tap事件怎么连接到控制F和D切换的Swipe Patch上呢?现在H所在的层级和Swipe所在的层级隔了两个层级,要想发生点关系还需要漂洋过海一...
唉,悲剧,点标题继续读下去哦!

QC + Origami 练习生 I:可收缩的导航栏
0

QC + Origami 练习生 I:可收缩的导航栏

今天把Origami官网上Tutorial的第二个Demo从头到尾自己做了一遍,中间遇到了问题,最终还是解决了。

先说碰到的问题:
1. 没加Range Patch前,把Process直接指向了Nav Bar的Layer,使Layer原本的height变成了128,初始值是0(问了一下M大神,这里的0表示的是一个状态,设为0就是原始大小,赋值以后就会变成相应的px值),结果在scroll的时候就出现了怪异的问题。

2.在用Process的patch时,设Start Value和End Value,如果Process上级传过来的value超过这个阈值的时候,被操控的元素会还原到他们的初始状态,要想不让value超过这个阈值,解决办法就是用Range Patch,在(0,1)之间取值,所以当我们用了Range以后Scroll超过End Value时,就不会回到原始状态了。

3.再说一下Scroll这个Patch,左边的是入口参数,拉不出箭头,我想把Scroll的Image和实际的Image连在一起的时候,发现拉不出来箭头,结果发现方向反了。所以从这一点总结出来了一个,对任何Patch、Layer还是Layer Group来说,所有的参数都会分布在左右两边,左边的参数是入口参数,那么右边的参数是出口参数,入口的只能接受参数,右边的可以传递参数,也就是说从这个出口可以拉出箭头连接到另一个patch的左边参数。其实这种连接可以有几个含义:Value的传输、Action的传输以及Object的传输。

Value的传输,比如Process,入口进来是Value,从Process出去传到一个Layer的Height,二者的连接传输的就是这个Value值,是个赋值的过程,Range也是。

Action的传输,传输的是事件或者动作,比如Interaction 2 Patch,Down/Up等出口参数到下一个Patch或Layer,是把Down的这个事件与下一级绑定起来,是一种事件的链接,类似jQuery里的原型链。

Object也就是对象的传输,最简单的例子就是拖进来一张图片,这张图片自动的和Layer的Image连接在一起,我理解这就是一种对象的传输,把图片这个对象传给了Layer的Image属性,而且Image后面的参数也不是数值。

Origami-value传输Value的传输

Action的传输Action的传输

总结:
1. 加强了对Range Patch的理解,建立一个安全阈值,控制上级传过来的Value值,使得动作可以持续稳定,不发生突变。
2. Patch和Layer的左边入口参...
唉,悲剧,点标题继续读下去哦!

优雅的控制
0

优雅的控制

人机交互中一个重要的设计原则就是人对机器或者工具的控制,人机界面的产生也是为了更高效的达成这种控制,可穿戴设备则进一步通过延伸身体来施展更优雅的控制。那么如何通过界面的交互设计实现人对实体的控制?有个实例触发了一点想法的输出。

今天刚拿到Kindle PW2就在想一个问题,除了体积小大容量这些优点外,kindle是通过什么方式弥补体验上的缺陷呢?比如纸质书的快速翻书体验。从交互设计的讲这个问题,还是要回到人对工具的控制上,翻书就是一种人对书的控制行为。纸质书,翻书的体验,阅读者通过翻书的动作快速获取每页书的内容。在Kindle上如何实现这种控制呢?翻书的过程中,核心操作是翻,在书页间完成动作,看到对应页的内容,这是几个关键的行为和目标。翻在移动设备的交互上常用的操作是拖拽和滑动,从第一页到最后一页数字化为一条数轴,基于数轴的选择,自然应该选择拖拽的操作行为,那么如何实现对应页内容的预览?预览的内容是否影响当前页内容的阅读?当用户产生翻书的动机之后,则表明对当前页的内容暂时不感兴趣了,所以当前页阅读内容的展示空间自然可以被即将预览的内容所替代,更有效的利用屏幕空间。Kindle的page flip功能就借在数轴上拖拽的交互方式很贴合的移植了翻书的动作,同时也完成了阅读者对于书的控制。

歪歪一下进一步的需求,在数轴上打点完成重要页的标记,对应到现实场景中,我们经常会在看书的时候把精彩或者重要的那一页折一个小角,方便之后快速的翻阅。长按数轴上的某个点会在上方出现一个标记,表明这页有重点哦,回头看的时候直接拖到这个标记这里就好啦。

优雅的控制仍然是产品的体验设计中容易出彩的设计原则,目前越来越多的智能设备都逐步走在兼备优雅追求灵性的路上了。

优雅的控制

写给24岁的情书
3

写给24岁的情书

感动的要哭,但却没哭。
想要在踏入24岁前写点话给自己,这么多年,算不算是勇敢的?算不算是优秀的?算不算是不随波逐流的?
如果把自己放在星空中,也许是渺小的,但却拥有一个星辰的模样,即使不那么美丽。
看向未来,我能感受到此时此刻更需要的是什么,一个能装的下自己的世界,委屈感动寂寞欣喜还有沉寂。
可能需要更大胆一点,不要让进步束缚了想象,不要让容忍抑制了自由。
让我亲手将这样的感触记下来,当一份礼物,送给自己。
不为别的,只为那天回首时,不是只有想象。
生日快乐,今天,不吹蜡烛。

记李荣浩《我是歌手》返场表演女神王菲的《笑忘书》
2015年1月24日 12:24

星星月亮2014
1

星星月亮2014

临近圣诞的一个周末,在Wagon Coffee回忆2014留下的指纹。指纹里写着音乐和设计还有旅行,我持续热爱的事情,想起他们始终让我觉得温暖。

这一年,想想能回忆起的时刻,还真是折腾呢,不间断的fresh air让我不至于缺氧挂掉。大概是好久没有写过文字了,却也生疏的有些词穷,就像在一年结束的时候,和自己约会,熟悉的有些羞涩,不管怎么说,还是好好对话吧,难道遇见一次可以安静下来聊聊彼此。

工作,像惯性一样堵在心门,似乎需要把他们清理干净才可以梳理出一条通道,才肯为另一个我放行。持续忙碌,交叉穿越,让我进步了很多,也滋生了不少厌倦。谁说工作不是个无底洞的,有的是在不知道何时结束的情况下突然断片,有的是从一开始就想放弃,支撑的是创作的花样和不屑一顾的责任,有的有像是在慢性自杀,走的缓慢折磨,渐渐失去心智。总说下一个一定可以成功,每当有一个brand new project,多半是抗拒,消极的说服自己将以怎样的姿态踏入又一场战争,前几天心里满是迷障,直到梳理出灵感消散这场看不见的大雾,然后屁颠屁颠的战斗。说服自己往往需要的是一个不像理由的理由,趁着没有防备溜进去不留情面的击垮坚强的堡垒。一旦投入进去,也不完全都是不散的烟硝,多半还是晴天。

设计对我而言,是粮食,是骨子里的东西,要流进血液,滋养全部思维和行动。我也是最近才明白,不是我选择了设计,而是设计在出生前就选定了我,种下了设计的基因,生是如此,在这22年里,总有一些时刻预示着这个必然,我也很欣然的接受,这就是我啊,有什么好质疑的,花了这么久才认定了,我能做的就是让自己用力的绽放,我也就此明白这大概就是天赋。小时候就对电视台的台标,天气预报里天气的图标,手抄报,黑板报,…,直到第一次真正意义上的设计作品,再到现在职业的设计师,一直走的半信半疑,我很开心寻找了一圈,答案其实早已经写在心里多时。

客观的评价一下今年的设计,从设计效率上讲,快了不少,快的原因在于对设计的控制,可以快速的定位到自己想要的样子,定稿后很少改动。依然是延续了高产的战绩,今年也是硕果累累。4个完整APP的设计,4个Web设计,还有一部分平面设计。持续做一个产品的设计,APP或者Website,在不断迭代的过程中,设计量还是挺大的。从表面上看,是一种重复,从设计模式上讲是重复的,但是在面对不同设计时,找准设计定位,并且定制专属的package会面临挑战,没有哪一个现成的设计可以完全移植到当前的设计上。在这个过程中,如果能做出合适的设计,还是会有很大的收获的,设计有趣和耐人寻味的地方也在这里,和音乐很像,数的清的音符和音节,能玩出太多的花样和伟大的作品。高产也建立在科学的设计模式上,我已经形成了一套适合自己的设计体系,设计的开始可能会花多一点时间,刚开始的一周左右也是要把自己逼疯了,Key Words - Art Board - Icon Set - Package,今年IxDC参加了Tmall韩国设计师Kate的workshop,结合了一些她的设计方法,也实践了几个项目了,内功心法也算正统。我很乐意听到其他人看到我的设...
唉,悲剧,点标题继续读下去哦!