Cola Chan

可乐橙是一名设计师
这里是我记录生活和成长的地方

关注微信公众号[可乐橙]
一座见证我成长的后花园

金雀花与大宪章

昨天看了部纪录片,也查阅了一些文字材料,对诞生大宪章的金雀花王朝有个初步认识。在此粗略梳理一下,以作备忘。

背景

金雀花王朝开端于公元12世纪,结束于14世纪,大宪章诞生在王朝前半段历史中。

在此之前,英格兰国王亨利一世活着的子嗣中没有男丁,他打算将王位传给女儿玛蒂尔达,却遭到了贵族们的反对。亨利一世死后,大权旁落,继承王位的是玛蒂尔达的堂兄史蒂芬。她打算夺回王位,双方各自坐拥部分领地,王国陷入一场分裂。

玛蒂尔达有她自己的办法,她把自己嫁给安茹伯爵。年轻的安茹伯爵获得了玛蒂尔达手中的大量军队、领地与财富,自己夺取了诺曼,占领了王国在欧洲大陆上的领地。可惜他英年早逝,没有......

3

可乐橙UI中国专访

前阵子接受了UI中国的专访,为了方便大家了解可乐橙,原封不动搬到博客上来,以下是采访稿正文:

采访:UI君 肚脐美少年&

十萬個為什麼,又名可乐橙,UI中国会员,IFEC译文团队核心成员之一,每周发布UI设计领域的译文。

欢迎登录UI中国网站 www.ui.cn,进入十萬個為什麼个人主页(http://i.ui.cn/ucenter/93876.htm......

5

小白的视角

最近工作比较闲散,又有些私事要忙,有一阵子没有理会科技与设计了。持续几天后感觉不太对,与世隔绝的状态下,创造力与洞察力正在一点点流失。

以往这种情况,我会立刻回归工作状态,或者开始探索一些新的设计领域。然而这回,我打算玩大一点。因为我猜测,两耳不闻窗外事的心态,其中必定藏着非常重要的事实。

近2个月时间,不看设计资讯,不在意科技新闻,不关心行业动态。将自己与设计、与互联网尽量隔绝起来。做最基本的工作内容,维持每周的翻译,除此之外什么也不做。业余时间一心一意处理私事,与朋友聊天胡扯,出门吃吃喝喝,在家睡懒觉、打游戏、看小说、看电影。不得不说,这样的日子过得实在逍遥,但心里并不好受......

6

机械的永生

今年杭州夏天很短,一会儿就凉快下来了,进入阴雨绵绵的季节。走在路灯下,城市夜景在涟漪中闪烁。我忽然注意到手中的伞,一把米色的格子折叠伞,本身平淡无奇。雨伞这件创造物,春秋时期就已经诞生,为鲁班的妻子云氏所创。最早的伞目的很明确,就是遮阳避雨,形态类似于油纸伞。雨伞到今天有3000多年的历史,形态并没有发生太大的变化,怎么回事?

看看伞字的演变,非常有说服力,从古至今就是......

4

灵感库的故事

开门见山,这是一篇广告文,分享一款设计师灵感库管理工具。诶,先别急着开骂,我可没有商业化的打算。可乐橙打广告一定要严格满足三个条件:【朋友】推出的【好产品】,【无偿】广告。

不过,在做广告之前,我有故事要讲。

设计师的职业生涯就像一棵树,素材库与灵感库交织出了年轮,从某方面反映着你的成长经历。不知道大家的灵感库经历了怎样的演变与迁徙,至少我的是几经辗转。

起先根本没有收集意识,需要什么临时找,几个网页书签就是全世界。从实习公司的老师那里拷来一套商业图库,10几个G。看得心花怒放,每件素材看着都精美无比。很长一段时间,那个文件夹就是我全部的上升空间,探索没有尽头。然而这个......

5

移动端尺寸基础知识

初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白,感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起,理清关于尺寸的所有细节。由于是写给初学者的,所以不要嫌我啰嗦。

现象

首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片化严重。尤其是Android,你会听到很多种分辨率:480x800, 480x854, 540x960, 720x1280, 1080x1920,而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了:640x960, 640x1136, 750x1334, 1242x2208。

不要被这些尺寸吓倒......

147

我们是否高估了科技?

身为从业人员,这么问多少有点大逆不道,不过这确实是我近来思考的一个问题。从工业革命到今天,科技确实大大刷新了我们对世界的认知。标准化生产、交通网络、计算机、互联网……都是前人无法想象的成就。

从朋友那里听来一个词——“吓尿指数”,它的含义是这样的:古人穿越到未来某个时期,那里的生活水平足够把他吓尿所需的年代差。想像一下,中世纪的人向前穿越了500年,仍可以适应新时代的生活。因为这黑暗动荡的500年里,文明近乎停滞。要把他彻底吓尿,或许得到工业革命之后,让他看一眼汽车。那可是1000多年。但如果500年前的明朝人穿越到今天,吓尿他绰绰有余。别说明朝,民国也没问题。现代摩天大楼足以令他颤抖......

3

AE环形进度条

【补充:本效果证实有更简便的实现方法,详情请直接看末尾。不过本文的解法中用到的一些技巧还是很实用的,可以作为一种练习。】

可乐橙过去这一年才开始接触AE,确实是很有意思且实用的一门技能。AE入门挺简单,如果学过FLASH,上手会更快。其实任何复杂的UI动画,都是通过最基本的位移、旋转、缩放、透明度颜色变化的组合来实现。网上这些基本技巧的学习资料非常丰富,比如我就是靠这个系列视频入门的。

不过,今天要分享给大家的这个环形进度条,制作起来需要花点心思。

63

可乐橙译文背后的故事

可乐橙默默的翻译着文章,除此之外,个人网站越来越少出现其他内容。可能业余时间都用来睡懒觉了。既然这样,唯一能讲的故事,就只剩翻译背后的故事了。

从2013年7月开始,心血来潮翻译了第一篇文章,就爱上翻译这件事。和设计一样,它也是一种创造。但是来得更纯粹,抛去了设备、媒介、载体的考量,只剩语言和思想。日积月累,从中收获了很多,设计水品、英文水品都有提升。还有一些意外收获,......

10

material design学习笔记

图多,耗费流量7.6MB,请在WIFI下打开

自从material design发布以来,可乐橙就在一直收集相关素材与资源,研究别人的作品。这套设计风格非常鲜明,带有浓郁的Google式严谨和理性哲学,深得我心。实际上,光是研究素材和别人作品,就能发现一些明显的规律,做出几分相似的设计。这样半吊子的状态一直保持到现在,最近有时间通读一遍官方的设计指南,终于有了深入的......

72

蓝草庄园:巧用PS匹配颜色给照片调色

今天心血来潮给以前做过的梦配了一张图。梦中那个叫做蓝草庄园的地方,是未来世界的一处度假圣地,漫山遍野盛开着蓝紫色的草。

不过这样一张图并不好找,直接用普罗旺斯的薰衣草田就太不负责任了。可乐橙索性自己PS了一下,顺便在此分享一下PS过程。

关键词:匹配颜色、替换颜色

这个技巧可以很轻松地把一张图片的色调,印到另一张图片上,产生神奇的效果。下面开始示范:

3

设计师在创业团队中的角色

可乐橙与小伙伴们出来创业已经有一年多了,真是一段愉快的日子。这份奇妙的经历可以和各位朋友分享一下,给大家讲讲可乐橙作为设计师,在创业团队中扮演的角色。

我要说的并不是什么普适规律,设计师在创业团队中的角色取决于一些设计之外的因素。假如你有信心和成熟的想法,能够把控产品的走向,那或许你还会成为产品的主导者,你要操心的事情,有一些会很远大。也可能你没有那么强的大局观,却是一个不折不扣的像素眼细节控,同样能找到自己的位置。总之,创业不是个人能力的简单加法,而是一个在变化中主动寻找自己角色的过程。

起步阶段

我们团队的主要产品是一款停车App,所以我绝大部分的工作都围绕App的产品设计展......

18

一张图告诉你 iPhone 6 (plus) 多难搞

虽然从屏幕长宽比来看,16:9可以说是手机界的共识,可不要高兴得太早,有个更大的坑在等着我们。

iPhone 6 (plus)的问世让我们不得不重新考虑,iPhone的UI要怎么做?画布设多大?

根据以往Android的经验,尽管屏幕物理尺寸多如牛毛,但是除以相应的倍率,得到的逻辑像素比较统一,不同屏幕上显示的信息量是一样的。少数另类也是即将淘汰的老旧设备,稍稍......

5

可乐橙网站改版啦!

欢天喜地告诉大家,经过近一个月的奋战,可乐橙凭自己那一点点蹩脚的前端技术,终于把网站的改版搞定了!特别提醒一下,这一版是响应式的噢!在手机和平板上访问试试,个人感觉手机端的体验做得比PC的好 →_→

好啦,无论大家喜不喜欢,可乐橙都希望你吱个声。如果有改进的建议,可乐橙非常欢迎!

其实到目前为止,改版只完成了第一阶段。首页、列表页、日志详情页已经实现了响应式,不过日志分类、电影收藏等几个特殊页面暂不支持移动端,在手机上会比较挫。还有404页面,可乐橙会尽快补上的。

在此公布一下将来的计划:

第二阶段:网页加载速度让人捉急,可乐橙尽量想办法吧……另外还会把几个特......

6

选择哪种博客?

上周末做了很多事情,一切都围绕博客展开。起初是@caicai同学推荐了两套博客系统给我,ghost与farbox。在此特别感谢一下他,一位年轻有为的设计师兼产品人。

稍作了解之后,顿时觉得自己太缺乏匠人精神,怎么就能忍受Wordpress这么久呢?博客经营了这许多年,Wordpress逐渐演变成了一个臃肿的cms,编辑器的体验也不尽人意。看来即使身为互联网人,严重依赖某个产品后,一样会无力抽身,哪怕它已经罄竹难书。

既然意识到这点,再不做点改变,就太对不起我的职业与行业了。果断装起了ghost,进后台一看才知道什么叫简洁和极致,而且很重要的一点,它让我学会了markdown语言......

5

一个图标背后的心理暗示

可乐橙在做一个推拉式信息栏的设计,向上滑动,可以显示更多信息。这个再寻常不过的动作,怎样准确传达给用户?怎样让用户知道这里是可以拖动的呢?

可乐橙第一反应就是画出了这样一个图形,似乎有那么点意思。

5

易停车icon变形记

可乐橙是头一回主导移动APP的UI设计,与一伙志同道合的朋友反复讨论打磨,不知不觉,我们的产品就快1岁啦!接下来还会有个大版本更新,带来一项神奇的新功能和诸多细节优化,杭州的车主旁友们请多多捧场昂!

APP的UI博大精深,着手设计易停车之后,接触到了很多从前做网页不曾触及的知识与技巧,一言难尽,本篇我们大致回顾一下APP的门面——易停车icon背后的故事。

一代icon

首先介绍一下项目背景,易停车顾名思义,核心功能一定和停车有关,它是一款查看实时停车位数据的APP,这也是我们想传达给用户的核心信息。之前翻译的一篇LOGO设计终极指南里讲过,LOGO(icon同理)可以大致分为文......

4

iOS系统默认字体对照表

工作中需要对比iOS系统默认字体,于是拖着开发同学写了一段代码逐个输出,再自己稍作调整修饰,在此分享出来。

22

主流Android分辨率简报

Android设备的碎片化众所周知,分辨率、长宽比千变万化,让设计师与开发者头疼不已。由于工作需要,可乐橙对其简略分析了一下,希望对自己与广大设计师和开发者们的工作有帮助。

3

设计师的自我提升

过去一年感触良多,深深体会到作为设计师的不易,一度觉得自己的水平没多大长进,有些低落。同时也收获了一些至关重要的情报,都是关于自我提升的。今年将是付诸实施的一年,争取通过努力打破瓶颈。当然,我很乐意将它们与所有热爱设计的朋友分享:

1. 分享精神

分享本身就是自我提升的第一步,阐述自己所学是整理与回顾的过程。虽然无法从中直接获得新技能与水平的提升,却能让一味赶路的自己停下......

3