May 2013
1 post
用文字做设计
“Since copywriting is interface design. You can do an awful lot of great design in a text editor. Don’t worry about how things will go, or how they will fit. Worry about explaining it clearly and then build the rest of the interface around that explaination.” — by Jason Fried 内容大致是:由于文案写作是界面设计。你可以通过文本编辑器制作大量优秀的设计。别担心元素(个人认为比译作”事物“更为贴切)如何摆放,或者如何搭配。考虑如何将话说清楚,然后再对话语所在的界面进行构建。 ...
May 11th
August 2012
2 posts
[转]中村勇吾,网络互动力学
via http://amagzin.com/2009/11/tha-jp/ SCR Project 研发的 DROPCLOCK,Helvetica 字体所呈现的时间缓慢落入水中 大约读完《佐藤可士和的超整理术》,惊诧广告界的顶尖人物,居然是志同道合的整理癖。不同的是佐藤兄比我做得更加极致、到位,无法企及。在 UNIQLO 诸多成功的营销案例背后,佐藤可士和定当是最先被提及的。而在这之后,应当还须多加片山正通和中村勇吾俩君。若再补上现已贵为全球首富的柳井正,就刚好凑成了已经休刊的《TITLE》杂志于 2006 年 9 月刊载的 “こんな会社で働きたい!” 特别专辑。这其中,佐藤可士和的创意案例众多,风头正盛;片山正通也因设计 BEAMS、Bape、UT 及 UNIQLO...
Aug 17th
[转]中村勇吾,网络互动力学
SCR Project 研发的 DROPCLOCK,Helvetica 字体所呈现的时间缓慢落入水中 大约读完《佐藤可士和的超整理术》,惊诧广告界的顶尖人物,居然是志同道合的整理癖。不同的是佐藤兄比我做得更加极致、到位,无法企及。在 UNIQLO 诸多成功的营销案例背后,佐藤可士和定当是最先被提及的。而在这之后,应当还须多加片山正通和中村勇吾俩君。若再补上现已贵为全球首富的柳井正,就刚好凑成了已经休刊的《TITLE》杂志于 2006 年 9 月刊载的 “こんな会社で働きたい!” 特别专辑。这其中,佐藤可士和的创意案例众多,风头正盛;片山正通也因设计 BEAMS、Bape、UT 及 UNIQLO 纽约的旗舰店而名噪一时;总是穴居幕后的中村勇吾,则是网络互动力学的教授级人物,特别在移动互联网正将崛起的今天,不得不多提几句。 几年前开始,UNIQLO...
Aug 17th
July 2012
1 post
[转]Tumblr首席設計師Peter Vidani 專訪:「推出」真實的自我?
彼得‧維達尼(Peter Vidani)是微型部落格Tumblr的首席設計師;從我的Tumblr首頁(Dashboard)上的圖示,到整個網站的美學設計全都由他一手包辦。身為一個網路愛好者,彼得非常了解如何使一個網站,變得有如超級病毒般地具感染力。 維達尼簡短地和知名科技部落格團隊The Verge談到如何創造具獨特性的網站,為何圖片分享這項功能如此重要?以及BMW的設計缺失為何?現在,你隨時都能在Tumblr上見到他。 今天做了些什麼事呢?去了哪些地方? 我才剛到公司,正坐在辦公桌前。今天不知怎地,在F站我搭上了每天早晨乘坐的C路公車(或:電車等其它交通工具)。我在西4街下車並轉車,我問車長是否有經過23街,她說有。但正當我想上車時,她卻將車門關了。現在我剛從辦公室的廚房裡拿了杯咖啡,還有汽泡礦泉水。我想,現在我已經回答完你的第一個問題。 ...
Jul 28th
May 2012
2 posts
May 7th
465 notes
May 7th
11,237 notes
March 2012
10 posts
1 tag
信息组织与可读性
曾经听说过别人抱怨,百度的搜索结果页设计得很土鳖,和谷歌相比是一眼立判高下。当时我稍微对比二者,发现在样式上二者相差无几,却说不上为什么可以感受到好坏优劣。究竟是什么“东西”,影响了具有大致相同式样的两个页面的显示效果?今天我打算拿它们俩再加上bing,就页面设计上,对比三个主流搜索引擎的搜索结果页的可读性。 首先,在firefox浏览器下,我对三个搜素引擎的搜索结果页缩小显示(“ctrl+-”按5次);然后按一个较合适的大小(200x360 px)截取下来。如下图所示,从左至右分别为:google,baidu,bing。可知,google与baidu的列表区域占比相近,bing的占比最大。 一、内容与顺序(单条搜索结果) google一般有四行。 1.标题链接; 2.来源网址、快照、翻译; 3.两行内容预览; 4.辅助信息(偶尔出现) baidu一般有五行。...
Mar 9th
1 tag
为什么要阅读
我们已经进入到了一个新的媒介时代,一个使用数字化媒介的新生态正逐渐形成,人们的行为、心智也将因习惯这变化而产生变化。变化总免不了新旧冲突,其中有一个一直争论不休的话题,则是围绕纸媒的存亡,以及纸媒上深层次阅读的式微。 在谈论纸媒与阅读的问题之前,我先说说媒介的发展的一些观点。关于媒介技术对人类社会的影响的观点大致能分为三种:1.积极。技术的进步象征生产力的发展,新技术只是给予人类更多选择,既然人类选择新的则说明此技术的作用是积极的;2.中立。工具论。媒介归根结底是一种手段,正负两面的效果依赖使用者。3.消极。这种观点主要针对电视等电子媒介的出现,较为有名的观点有“容器人”一说,即人成为媒介传播的信息的容器,缺乏自主思考的能力。 ...
Mar 9th
1 tag
从设计到执行都不足好的案例
这个是我接手自上一位设计师的项目宝安地产,后来按照客户的修改还是改成几乎全新的一个网站…当时我偶然发现利用客户提供的效果图和国画虚实结合,能获得浓重的中国风,因此比较有信心做得好。当时我是因个人原因没等到完成就辞职,后来发现上线效果还是与设计稿有差距,充分暴露出当时的我对设计细节的把握的种种问题。 其中这个loading动画我是做了比较大胆的尝试,不过因为很复杂直接给动画设计ban掉了…圆形中的背景是水墨山水与宝安地产标志的叠影。动画开始时,“loading”字样出现,园内是一个水池的效果,鱼从上方入镜、游到中间后缓慢摆动,水面上散落花瓣轻微抖动;外面的圆环型进度条则顺时针转动,当进度条读完后,“loading”会以水平方向散去,鱼往下游出镜;然后整个动画淡出,网站首页淡入。 ...
Mar 9th
1 tag
简单设计也可以有好效果
虽然项目不大,但我个人对Natural Home的网站制作到现在还有种“亲切感”。因为这是我从一开始提案到视觉设计到动画制作再到上传数据一条龙做下来。期间还是少不了叶同学的指导,这网站有不少改进都是出自她的专业意见。 另外一个原因是,这网站实现了我对它的一种设计期望,通过颜色和质感等细节的向客户和使用者传达轻柔、舒适的体验。从main page的微风轻拂用棉被做的草地的动画,到home page的通过渐变融合了导航的形象广告,不需要太多的交互,返璞归真,让接触到网站的人亲切感油然而生。 交互具有能够反映逻辑、节省操作等好处,但也存在某种“成本”——“重量”。我认为,这个概念就像管理之于公司。流程管理、规章制度等可以用于提高工作效率,然而当管理过多了,就会造成公司偏“重”,反而会制约效率。不同公司要应不同分量的管理。 ...
Mar 9th
1 tag
没有弄不清楚的需求,只有没确认好的要求
这是我加入牧星的第一个项目,一份船务公司的内刊。很典型的企业内刊,目标受众是来访公司的客户,使用情景比较流动、碎片化,因此如何快速向客户传达专业、可靠、完整的企业形象是它的基本使命。 在我接手这项目前,公司已经有相当一部分的设计师中轮番设计过几次,到我手上的版本也是参差不齐。由于公司的客服、策划和设计部门分工较细,设计师不常与客户打交道,客户的需求往往不能最有效地传达给设计师。而我是比较幸运,新兵一名身上没其他项目,于是经常让客服去向客户提问题,这样折腾久了造就我很快地能够与客户面对面交流。 ...
Mar 9th
1 tag
代码这东西我真是学完就忘啊
在加入Inde-X之前的我,还是一名普通的平面设计师,虽然已经开始接触交互和项目管理,但作品还是以平面为主。而在Inde-X的工作很大程度地提升了我的技能和思想,其中一个是苏荷文化网站的项目。 当时这项目的时间预算比较紧张,于是由三个人分工各个击破,其中我负责网站首页的图形和网站的导航。为了让网站配合VI的浓重的传统色彩,我们采用了“荷”元素,利用不同姿态的荷花代表不同的选项。考虑到这网站的定位,我们决定用简洁的的工笔画来勾勒荷花以显得更具现代感。 ...
Mar 9th
1 tag
一时技痒暴露绘画基本功不足
这张作品是比较久之前的练习之作。妹妹有买青年视觉的习惯,我也会在每次回去的时候翻翻它们来获取一些灵感。以下这幅水彩正是出自于青年视觉中。 作为一本有自己脾气的时尚先锋杂志,青年视觉在摄影作品上总能有不错的表现。照片原作在光的运用上都很细腻,利用白色背景做出稍微曝光的感觉,白色花瓶被融入背景中,只凭微蓝的高光辨认其轮廓,瓶面上暗色的花与实物相映成趣。这些效果在上面的画中恐怕看不见,画作的感觉曝光不自然,枝叶处的层次扁平,瓶身的图案未能表现圆润的立体感,总体效果散乱、不干净,没能达到照片的效果。
Mar 9th
1 tag
网站的交互细节
以上这几个带有蜗牛、大象甚至草泥马形状的折纸, 是我在Inde-X期间参与的一个网站项目中设计的图形设计。由于对方是影视制作公司,会有诸如展示解决方案、品牌设计与推广、顾问等等的服务,为了使用户在匆匆浏览网站后能迅速记忆、辨别不同服务,我们采用了为服务引入“折纸”这一图形识别的方法。 默认情况下,Service页面陈列着包括所有不同服务的不同形状的折纸,用户通过点选右侧导航的子选项快速筛选服务项目——被筛选走会从底下的洞掉下去,重新筛选出来又会从中跳出。来自叶同学的奇思妙想,简单的交互带来了很好的体验。给人以在一桌子折纸中挑选的感觉,虚拟实景的引入使得抽象的服务概念更好辨认——抑或保持全部服务项目的列表。用户可以凭折纸下面的标题引导点击查看。 点击后,如上图所示,图形展开为有简要说明的纸张,用户可以通过这步骤判断需不需要进一步查阅。 ...
Mar 9th
1 tag
什么是交互设计?
回想起来,大概是在我暑期实习的时候,开始渐渐接触到“交互设计”这一新颖的概念。当时我在设计网站的过程中,遇到很多不能通过视觉设计解决的问题,例如注册表格设计、SNS社区设计、订票流程设计等等。在我实习后进入在读兼职期间,利用图书馆的便利开始知道问题的解决方法——交互设计。 交互设计(Interaction Design),它是由IDEO的一位创始人比尔·莫格里奇在1984年一次设计会议上提出,“是定义、设计人造系统的行为的设计领域。…在于定义人造物的行为方式(the ‘interaction’,即人工制品在特定场景下的反应方式)相关的界面”(wikipedia)。 ...
Mar 9th
每天写点什么吧
此博客的用意就是要自己每天能写点什么。 …
Mar 9th