JJ.Ying's Skin & Icon Design

“图谈”上海设计师聚会第三季登场！

Thu, 11 Mar 2010 06:49:28 +0000

已经打定主意会切换到IconMoon.com这个新域名，所以目前博客暂停更新，不过“图谈”第三季的通知还是要发一下的～

继上次讨论了“设计前期的准备阶段”之后，本季的主题我们定为"界面设计中的配色方案"。希望上海周边对交互设计有兴趣的朋友能继续来参加我们的聚会。 :D

吸取了上次在复旦校内举办交通不便的问题，本季我们争取到了东华大学的场地，虽不是特别市中心，但是位置非常靠近四号线/三号线的延安西路站，交通很便利。在此特别感谢东华大学服装/艺术设计学院的大力支持

活动安排

时间：2010年3月27日 (周六) 下午2：00 ～ 5：00
活动地点：上海市延安西路1882号东华大学延安路校区逸夫楼二楼演播厅。
（详细地图建议搭乘地铁3号/4号线至延安西路站下来步行至东华大学，地铁站出口离校门约300米）
报名方式：欢迎所有热爱图形设计的设计师和学生来交流，无需报名 :D
备注：本次活动场地由惠普公司提供，现场免费提供饮料和小吃

活动内容

案例分析
经验分享
现场讨论
迷你设计竞赛
现场抽奖

现场抽奖

聚会结束前将照例将进行现场抽奖，大奖为全新 HP Photosmart C4788 彩色一体机一台（由惠普公司提供，价值约1000元人民币）

征稿通知

我们的初衷是加强大家的交流，所以也非常希望所有设计师都能参与我们的讨论。欢迎所有朋友为本次聚会准备一些设计相关内容来和大家分享。内容上只要是围绕本期主题（界面设计中的配色方案）的都可以，时间2到15分钟均可。会场有投影仪、网络和音响器材，所以形式可以是各种各样的，ppt、视频、图片等均可。

详情访问图谈的官方网站：http://tutalk.org
Tags - 图谈 , 设计师 , 设计 , 上海 , 聚会

Switching to new domain: IconMoon.com

Thu, 04 Feb 2010 06:01:51 +0000

For some reason, I will have to change the current domain (jjying.cn) to a new one. I decided to use IconMoon as the name of my new website.

For everyone interested on my works and blog, please go visit the new domain in the future, the update here will be paused.

I've designed a coming-soon page of the new website, go visit it now! http://iconmoon.com

Tags - jjying , domain , switch , iconmoon

(有可能) 准备切换域名

Mon, 01 Feb 2010 16:48:25 +0000

当初也不知道是哪根筋打错了买了现在.cn域名，如今真是遇上恶心事了。

很多朋友可能都知道现在开始.cn域名只能是企业注册的了，哪怕是以前注册的也必须要补交材料（组织机构代码证）。明天要找找朋友看看能不能搞定这个。如果弄不好的话只能换域名了。

其实就如去年最后一天写的新年展望所述，我本来就打算把jjying.cn改成一个studio(One-man sutdio)形式的网站，只是没想到事情来的这么快，如此匆匆地就要改换域名，我连新网站的设计都还没做好。

Anyway，新的域名倒是已经搞好，虽然.cn域名蛮傻的，但是也陪伴我好多年了，PR也有个5（虽然已经没人关心PR这个东东了），说换就换还是不舍啊～

我的新域名是 http://iconmoon.com
Tags - 域名 , 转换

(翻译) GUI设计中的写实性

Fri, 22 Jan 2010 13:41:05 +0000

原文：Realism in UI Design

翻看一下近些年来用户界面的视觉设计你一定会发现“写实风格”正逐步变成主流。我们所使用的电脑越来越强劲，速度越来越快，设计师们也有了更多的发挥空间。为了增加细节，我们已经可以使用3D效果、阴影、透明甚至一些物理特性来修饰界面。这其中有些效果能显著改善可用性，比如阴影能够更好地帮助用户区别激活与非激活状态的窗口、iPhone系统中的丰富但有效的动画效果也能极大减少用户的学习成本。

但在其他方面，这些新技术对可用性却未必作出了多少贡献。图形用户界面基本上就是一堆符号，大部分按钮、图标以及其他控件只是指代了某些概念或某个想法，比如齿轮图标并不意味着一个齿轮，他只是告诉你点击之后可以进行软件的设置。越多的细节和越高的写实性会让用户的关注焦点脱离这些概念。

在此推荐大家读一下Scott McCloud的《Understanding Comics》，和GUI无关，但是每个设计师读过之后肯定都有受益 :D

最左边的图显然是个特定的男士，而右边那个笑脸形象几乎能指代任何一个人。从这个例子看得出来，如果为了表达一个概念而使用隐喻，那视觉上的细节就必须减少。而事实上实际场合中我们所使用的界面控件一般不会去指代一个特定的东西。

当然，细节也不能太少，保证必要的识别性肯定是前提，至少要让用户看得出这是什么东西：

左边这个是人脸，右边这个你就很难分清楚是蛋还是球了。

接下来我们再来看看电脑上的实际例子，一个代表“主页”的图标：

从左到右，我们看到从一间特定的房子到广义上的Home概念的变化，细节越多，越难搞清楚其指代的概念

同样的，细节也不能过少，去掉窗子和烟囱之后这个Home图标就变得像一个 ⇧按键了。

让我们用一个并不太科学的图表来说明问题：

图表上的数值并不是来自实际测试中的数据，我只是想说明优秀的GUI设计应该出现在曲线的中间部分，视觉上只需要保证足够而不花哨的细节就可以了。

那什么样的细节是恰当的，什么样的细节是会让用户分心的呢？

左边这个按钮太过写实，不适合放到界面当中，而右边的只有一个边框，也很难激起用户的点击欲望。

对于这个开关来说也是一样，过度的细节让左边这个按钮看起来就是一张照片而很难认为是界面的一部分。

合理地运用阴影、渐变等细节，让用户既能分辨得出这个元素又能不分心于图形上的效果能够帮助我们打造美观而可识别的界面。

例外情况

当然也有一个领域是特别的，那就是程序图标，只用来指代你的程序。

Coda的树叶图标不是指代树叶，而是用丰富的细节、形状和颜色特征让用户一眼就看出这是Coda的叶子。而Acorn这个图形编辑软件也正如他的名字所表现的，使用了一个橡果来作为程序图标。在这种场合，我们需要表现的只是一个特定程序而不是广义的概念，最终目的就是把图标和软件的品牌、价值直接联系起来，让用户一看就知道。所以程序图标可供设计师发挥的空间就很大了。

结论

就像开头所说，图形用户界面就是一堆符号，而符号的精髓就是简洁。让用户快速准确地读懂符号以及其背后的含义是我们每个GUI设计师的重要责任，过多华而不实的写实性只能在可用性上带来明显的问题。

在设计中增加细节的目的不是让界面和图标看起来像照片那样真实，而是提高识别性，帮助用户更好地和各种控件进行交互操作

在此特别感谢Max Steenbergen和Cameron Kenley Hunt，第二个Home图标来自Dellustrations的图标集Dellipack

Tags - realism , ui , gui , 设计 , 写实 , 翻译

MS Office 2010 VI

Thu, 21 Jan 2010 03:28:53 +0000

At the first glance, I had to say I hate the new shading of the logo, the yellow-orange gradient really really looks like the pre-set gradient style in Photoshop! But after the ugly Bing logo thing, I can take this....

I love icons in Office, both Win & Mac, but definitely only those tiny toolbar icons! Their sleekness & elegance totally can't be found on these new application icons in my opinion....

Tags - microsoft , office , 2010 , vi , logo

Tutalk.org Web Design

Thu, 14 Jan 2010 03:19:07 +0000

Tutalk is a local GUI designer gathering we've organized in Shanghai, China. I just updated and coded the website homepage yesterday based on a blog system. The character is designed by Leon Gao

For live version please go visit Tutalk.org (in Chinese)

© 2009 JJ.Ying & Tutalk.org

My Icon Design My Portfolio

Tags - tutalk , web , design

图谈启用全新域名Tutalk.org

Thu, 14 Jan 2010 02:43:31 +0000

图谈现在已经启用新的顶级域名Tutalk.org 欢迎大家继续关注我们，加入我们的活动中来 :D

官方网站也摒弃了之前的静态单页，采用和我博客一样的Bo-Blog，以增强互动，同时也希望能够更快速、更准确地传递信息和通知。目前网站正在试运行当中，大家遇到哪些问题或者有哪些意见欢迎留言。

欢迎大家用以下方式继续关注图谈：

订阅RSS：http://feed.feedsky.com/tutalk
订阅邮件列表：http://eepurl.com/gEEh
浏览图谈的Flickr相册：http://www.flickr.com/photos/helloicon/

第三季的图谈聚会正在筹备中，针对之前大家所提到的缺少实力型嘉宾的情况，我们将着重增强。广大设计师也欢迎前来报名，现场自秀，交流个人以及团队经验。
Tags - 图谈 , 上海 , 设计师 , 聚会 , 域名 , rss , 邮件列表 , flickr

The Cove

Wed, 13 Jan 2010 15:26:05 +0000

和之前看过的Earthlings一样，The Cove这部豆瓣高分纪录片同样是用冷冰冰的事实告诉我们这个世界的残酷。。。虽然关于杀戮的片段只有5分钟，但是整部电影给人的震撼是极其强烈的。也许片子里的事情在日本不具有普适性，但是当地人民的种种行为让我们看到了他们的冷漠。。。

虽然豆瓣上骂日本人的朋友不在少数，但是我不禁在想如果捕杀海豚等鲸类是中国人的某种传统，我们能比他们做得更好吗？和很多人一样，我很难改变这样的事情继续发生，现在能做的就像电影官网上所说，Spread the word
Tags - 电影 , 海豚湾 , 自然 , 动物 , 人 , 海豚 , cove

Twitterriffic Bluebird Is Now Available!

Tue, 12 Jan 2010 03:08:52 +0000

Ollie is the bluebird in Twitterriffic logo. Now we can order the Vinyl Figure! The Ollie character and the vinyl toy were designed by David Lanham. I'm definitely going to get one, how about you?

Go get one now! https://store.iconfactory.com/
Tags - iconfactory , twitterriffic , bluebird , ollie , david , lanham

Earthlings

Wed, 06 Jan 2010 16:11:35 +0000

元旦6天假都宅在家里，看了不少电影，最震撼的莫过于这部《地球公民 Earthlings》

在豆瓣上看的了这部电影的介绍，高分并不奇怪，因为发觉好像很多纪录片在豆瓣上有出奇的高分，GF说这是因为淳朴大自然的美好唤起了人们的同情心。确实，之前看过的好几部BBC和探索频道的大自然纪录片，似乎都是用极其唯美的画面来告诉我们世界的美好。而这部Earthlings反其道而行之，用血腥而残忍的片段揭露了人类是怎么利用动物的。

Earthlings几乎成了第一部我几次都不忍心看下去的电影，因为很多场景实在是太残忍了，而比这更残忍的是我知道这就是我们不得不面对，却又难以改变的事实。。。

Tags - 电影 , 地球公民 , 自然 , 动物 , 人 , earthlings