在企鹅村玩代码玩了半年多，玩起psd来都有点生疏了。
最近对设计MM 给的psd文件产生了点暧昧。有感悟抒发一下。看看是不是都有一样的困惑和同样的问题。

如果切图仔死了，死因很可能是一份可怕的psd

• 1. psd 文件尺寸 竟然有71M，(也许看着觉得还好，但是一开ps 就杯具了，内存不够 = =)
• 2. psd 图层上百个，各种看不懂的图层。毫无规律的图层分组让人菊花一紧。
• 3. 设计稿完全是个插画，怎么看都不像个网页，无从下手切图。(恨不得把psd 吃下去 >.<)
• 4. GUI为矢量图，边界不清晰。(切图成果，糊得一比)。

作为切图仔，暂时就列了这么些 碰到的问题。相信有和多人有同感。
那么作为设计师MM的你们又应该如何去避免呢？ 对症下药 一一破解。

合理分层，结构清晰

不管你做的是设计，还是插画。结构设计也是一种设计，当你合理并且清晰的规划好你的设计稿，那么这个设计就有十之八九了。
那么如何对网页设计稿进行分组分层呢？

• 1. 按框架分。(网页分 ，头部head ， 主题 main，底部 foot，以此类推)。
• 2. 按模块分。(每个小原件，小装饰，合成一个大物件就能做为一个模块)
• 3. 按属性分。(这点比较重要，设计师如果做的是web界面，需要了解什么是“图片输出” 和 “代码输出”, 原因是当切图的时候，我们需要将 “代码输出”类型所属的图层隐藏掉，然后再进行导出)。还有一些注释(注释好重要，后面有讲)相关的东西。
• 4. 按状态分，(web设计跟插画设计 一个很大的区别就是 web设计是有交互的，需要针对各个交互状态进行分层分组)

“代码输出” 指的是设计稿中的一些效果是可以使用代码来实现的，如后期可编辑的文字(大段文字，小按钮里的宋体文字)，圆角，渐变效果(高级浏览器可实现)。
“图片输出” 则是指出了代码输出以外的东西，如图标icon，背景效果，以及一些 使用代码不可实现的文字效果(如艺术字体)。

——————————————

减少尺寸，去其痔疮是关键

如果你做的是大喷绘 psd 有个7,80M 可以理解。但是你做的是web设计稿也那么大，就有点不可理喻啦。
毕竟切图仔的电脑总是没有设计师的强大哇，并且我们还要跑个IDE编辑器，跑个虚拟机，再跑N个浏览器。这个时候要是还要打开一个70M的PSD设计稿(预计占用内存1G)，这个时候 谁蛋疼谁知道哇 囧rz

所以对切图仔好点，把psd弄小点。如何弄小点，往下看。(毕竟俺是过来人 ^__^).

• 1.去除没用的大尺寸素材图层，(当设计稿需要交接给切图仔的时候，最好复制一份设计稿，去除psd中无用处的原始素材图)。因为素材图片是唯一难压缩的东西(psd尺寸大很多时候是因为这个)，且运行时占内存大。
• 2.去除无关图层，(这个是禁忌哇，如果跟设计稿不相关的最好删掉，或者新建一个temp组丢那里面，不然很容易误导切图仔，而且还占内存，别以为隐藏掉就不占内存啦 XD)。
• 3.慎用智能图层。(智能图层在CS4的时候就开始有了。) 很好用，因为不影响原素材的质量，如放大缩小，但是TMD 占内存，吃cpu哇 >.<
• 4.合并列表型块状设计，(这点很纠结，也很重要) web设计稿中有一些设计是列表型的。如：文章列表，信息列表。通常设计的时候是先制作一份，然后复制个十几个。 但是。。。。但是，复制太多了占内存哇。0 0，果断保留关键的一份，或者表示几种状态的几份。然后把其他的都合并图层了。 相信我，这样做切图仔会很开心。^__^

边界清晰，不再模糊

web设计中，最忌讳糊糊的感觉了。因为很多东西是需要精确到像素的。

• 1.形状模糊，有些时候使用形状工具因为没有对齐到像素(见配图),导致做出来的形状边缘都糊糊的。
  解决办法很简单，使用选取工具(A)，小移一下形状让它对齐到像素即可，或者干脆栅格化形状擦去模糊的部分即可。
• 2.素材模糊，素材让人觉得糊糊得看起来不是那么专业？ 简单的锐化一下，会发现很好用(我用的比较多的就是USM锐化)。
• 3.文字模糊，有些时候发现矢量的字体怎么调大小都觉得边缘糊糊的。果断，复制一份(备份用)，然后栅格化，小小的锐化一下。^_^

良好的注释图层，凸现专业气质

代码需要注释，设计稿也同样需要注释。同样是两份设计稿，相信你一定很喜欢带注释的设计稿。
相信我，给你的psd 新建一个组叫注释(comments)，那么切图仔的眼睛里一定闪烁着晶莹的东西。^__^

您可能还对这些日志感兴趣 - 随意

• 神经特长 – lazy hover 延迟激活jquery 插件
• 要的是过程–互联网的用户体验设计过程
• 强悍的javascript — 3D效果
• css心得之善用 position:relative
• 你的名字长啥样.

难度系数：3星。

仔细观察以及分解图层，发现主要难度还是在 光源以及阴暗面的处理，
中间的光圈看起来复杂，其实他就是一个径向渐变效果，要非常有耐心的去调色。
高光部分觉得自己有点没处理好，没有做好那种白白的效果。

PS： 本来想做个教程，但是冷不丁上了下站酷 发现 那些大湿做的icon都华丽丽的不行，觉得自己做得东西还是差距有点大，然后就先丢出个效果图好了啦。
安慰下自己，肿么说我也是个代码仔中做设计还算ok的啦
╮(╯3╰)╭

您可能还对这些日志感兴趣

• 乱翻乱教 – iOS5 通知栏背景制作

PS： 最近开始接触 交互的一些东西，不知道算是进化，还是退化，新建了一个 野谈交互 类目 鼓励自己多接触 分享 交互的一些个人见解，也算是给新人一个指引。当然在大虾面前献丑了··· 就当打酱油好了···^_^

从上次 的 阿里巴巴2010新版首页 看出 阿里巴巴 中文站 首页慢慢年轻化，这次的改版，因为 确定了用户群后，慢慢开始注重交互分享部分发展。听我 慢慢说来。

嗯，很黄，灰常黄~~

上次因为 需要年轻化，将整体色调改成了桔黄色，这次似乎微调了下颜色，也许是上一版太简洁了，我也是这么认为的。这次的配色，有那么点钱的味道，进入首页有一种金灿灿的感觉，冠冕堂皇的称之为 商人的味道。 感觉 这个定位还是ok 的，之前的定位有点太年轻了，商人气息 不足。

挤，很挤，真的有点挤~~

感觉有点回到2010 版以前那版的 拥挤感，第一屏 文字密度很大，我有点乱，因为 第一屏(1024*768) 就中间一推广banner，焦点全给占去了··· 周围的字 有点弱化，而且周围的模块都一样，层次显示的都一样。有点摸不着哪个是哪个，建议 加些可以 可以区分 模块的 idea。PS：发现原先快照的 那样标签 区块挺明显的，不知道为啥子改掉

二级导航，引导更清晰

觉得这次 改进比较好的还是 最吸引人的 导航部分，相比之前的导航（如下图）引导性更强。将商人论坛跟资讯，加强，增加用户粘性。我估计数据里用户有反馈怎么找不到 论坛跟资讯入口了。确实之前的版本，对这两块弱化了很多。

亮点： 利用 公告 来填补导航空白，让其 左右平衡

设计导航的时候，有的时候 因为 主导航的 选项比较少，右边留白会比较多， 会造成视觉上左右失衡，之前的导航因为是通栏橙色，所以没有这样的情况。
正因为说亮点，是因为觉得这样的视觉 能让导航的层次很清晰，从左到右，从上到下 都有一个层次。阅读起来比较方便。
唯一是 有点不完美的是 右侧的 天下网商 和 媒体超市 缺少装饰，使其 在导航上的权重下降了好多。

今日市场 ： 说服力 还不够强

小意见~~ 觉得左侧的 今日市场 表现的数据感 不强，

如果能做成 定时 获取，让人感觉 时时在 变化的效果，会不会更有震撼，当然不做效果 可能是考虑到页面执行效果，以及页面速度等因素。
也许这个是一种点睛之笔，

哈 我就说说····就当打酱油·· 没了···

您可能还对这些日志感兴趣

• OH YEAH — 阿里满周岁 感言
• 从淘宝透露出的那些设计细节
• 丫 越来越年轻 – 阿里巴巴2010新版首页
• 拥抱变化 – C2J – 我们的后天很灿烂
• 飞鱼在滨江 – 网商路699号

传送门: iPhone GUI PSD Version 4

PS:最近开始忙项目了。很多半成品的文章堆在后台米放出来，大伙久等了,所以放出个东东来，证明这里还没长野草~。^__^

您可能还对这些日志感兴趣

• 满月狼吼 — 入手iphone 娘一月记
• iphone ipad,itouch添加到主屏幕后自定义屏幕图标的方法

但是我还是比较纠结于，站上的一些交互，也算是做为一种总结，或者说是一种发泄也好。

总的来说，从交互设计去看待这个产品，我给自己打个不及格。
因为这个上面有太多东西需要去纠正， 有太多交互需要去否定，但是因为某些客官的因素，我对此无能为力。

既然如此，我们就退一步用一种学习的眼光去分析这个页面：

这个版本的淘日本的原型是上一版的淘宝商城，所以出处都有淘宝的些许气息。但是在此之上增加了一些杂乱的风格，
如：
页面设计元素中的字体选择过多，页面参差不齐。

部分元素模糊太深，导致页面不精致，边界不清晰。

图片上的字体没有经过锐化处理，降低了可识别性，显得不精致。甚至有些12px 的字可以直接使用，code 就可以实现。

区块中元素过多，用色过多，眼花缭乱。

交互部分太隐秘。我想一般人是不知道这里有个tab 切换 按钮，甚至这东西不是定时滑动，还有就是 箭头太小，我想一般有钱人都点不到 – -

链接的下划线，是强调这个是一个链接，还是告诉用户，样式出问题了？
已经有不少开发同学询问我 ，这块是不是 样式还没写好，咋觉得没有样式一样，我知道这是日本网站的链接风格（日本的网站，一般都在链接下增加下划线以告诉用户这个是一个链接，非常遥远的历史，也不知道是谁起头的，也不知道什么时候会改革），但是你要知道，连开发这样不懂设计的都以为是没加样式，意思是他们的潜意识里，中文链接下面不加下划线看着会舒服些。既然要做一个中文的网站，一个链接有没有下划线，不能突出什么，何不考虑其他样式来突出 链接的 重要性，以及层次性。

交互设计不同于视觉设计，交互是为了帮助用户实现某些功能的便捷设计，仅仅是为了好看，牺牲用户体验是不可取的。

另外，想说的是，一个面向用户群是中文用户的网站首页（首页完全可以人为控制），竟然用了如此多的日文设计，甚至影响到样式的 字体设置（当前页面的默认字体，是优化日文显示的），牺牲了中文，以及数字英文的显示效果。非常不可取。

好了 末了~
总结了这么多。祝愿：淘日本能走远点，不要停下来，要飞快的，想淘宝一样。

您可能还对这些日志感兴趣 - 随意

• zoom:1 引起的bug 一则
• 脱去你的外套, 让我看看你有多美
• 乱翻乱教 – 时尚导航设计 – 傻瓜版教程
• 风格变了 – 换设计师了？
• 杯具时常有 – 巴士特别多 – 丫破相了

就像标题说的，中文站这次改版 越来越年轻化了，也可以说是被淘宝同化了。呆呆的看了5分钟写下些体会，如下：

• 简洁了很多， 咋一看以为是淘宝，因为色彩用的是淘宝的那种很活泼的橙色，用色很简洁，导航用像素渐变取代了 原先的平滑渐变，去掉了很多 复杂的东西，页面看上去 像个脱胎换骨的 全新网站，没有原先的那般浓厚繁杂，不知道是不是寓意着新公司新形象。
• 更年轻化了，不知道是不是因为淘宝改版的影响，新版中增加了很多标签式的浏览，个人觉得这样的浏览方式更加省空间，并且很时尚，也将页面从原来的平面型 转化成 跟 富有层次的 多平面型，这样的效果，最早是从yahoo新版开始的(我比较后知后觉，一向很崇拜yahoo而已，嘎嘎~) 。好处是很多，但是不知道是适不适合 刚接触网络的那些 土老板 当时在国际站的时候是怎么称咱们的中文站用户的。这样的设计可以告诉我一个很大的信息可能是：中文站的 用户群也越来越年轻化了。
• 像淘宝，第二次乍一看看是觉得好像淘宝，一直以来中文站的视觉冲击带给我的是：繁华，热闹，商务气息，但新版似乎摒弃了这3个元素，简洁的界面让它看起来很冷静，活泼的淘宝一样的视觉冲击更像是一个B2C的网站，商务气息不是那么浓厚，看来淘宝 太深入人心了，给设计师也带来不少的困惑。当然我只是个非专业滴
• 补充用色亮了好多，发现除了 导航用色比较鲜亮外，其他的如边框的颜色用的灰阶都很淡，怀疑可能在某些早起的液晶屏上看不到那边框，小灰狼都被扼杀了，觉得这个问题需要重视，不然页面看起来会很囧rz

其实这仨改版都有一个共同的特点就是都向简洁靠拢，能不渐变就不渐变，能方的就不用圆角的理念。

让我想起 设计的3句真言：

• 看山是山，看水是水。
• 看山不是山，看水不是水。
• 看山还是山，看水还是水。

从简单到复杂，然后又回归简单，但其实不简单。

= 。=得扯远了。

拍个照留念~ 点击可查看大图

改版后~

您可能还对这些日志感兴趣

• 野谈交互 – 巴巴2011版 – 有点黄
• 从淘宝透露出的那些设计细节
• 有一种美叫洁白– iriver改版好久
• 大步向前走-YOHO改版

还有就是打开速度，也是为什么我一直都不想用Firefox 来上网的原因了。

您可能还对这些日志感兴趣 - 随意

• 乱翻乱教-使用JS输出HTML串最快的方法
• 那些新增的标签 — html5 学习笔记
• 系统级应用项目中的函数命名冲突问题
• Say NO to 还可以
• 简单？不简单 – M8 coin 开发心得

有图有真相，如果感兴趣 也帮忙一起整 嘎嘎···

您可能还对这些日志感兴趣

• Google Chrome浏览器 真邪恶

年末了，公司忙 – - ，都不知道在忙什么，只知道一直在接需求，一直开会，一直总结。
总之，换产品线之后，就木有停下来过。果然跟当初想象的一样。

好了绘画少说。
喜欢这个皮 点这里下载。
Janblus

还有大图

您可能还对这些日志感兴趣

• 仅仅是比较忙 – 即将毕业ing
• 一张皮惹的血案，不是《画皮》

很少在blog里谈论工作上的事情，基本上都是发些技术类的文章。

今天C2J团队架构整改，部门按产品线划分了，改动空前庞大，咱们UED，也被分开了。县(产品线：线)长不再是 李sun，位置也变了，内牛满面，这大概就是阿里六脉中的拥抱变化吧。

上面的图是上个月一次半夜发布的时候，跟同事 在聊 c2j(阿里巴巴 日文站) 的未来的时候，突然灵感一发，通宵做的一个c2j的首页。

经过一个星期的修修补补，整出了一个demo版首页。然后给运营团队发了群邮件，激发了一浪大改动的风波。

=============以下引用一下当时邮件的一些内容=============

首先从个人观点来看当前C2J首页有以下不足之处。

从设计角度讲

作为交互设计师，个人感觉C2J 首页目前的显得太“简陋”，

1. 包含的信息太少。

2. 第一屏最有价值的信息是“自己看过产品”，

3. 类目模块占据了“第二屏”(淘宝和中文站都爱这么做)

4. 页面丰富度还欠佳，供应商推广，和产品推广，在第3屏以下，曝光量太低。

从网站运营角度讲

首页作为一个网站流量最高的页面，当前C2J首页 dump 给用户的信息太少，且导向性欠佳

从供应商角度讲

供应商希望自己的产品最大限度曝光，

==============================

作为现在的C2J， 我感觉是在创业一样，有太多新鲜的东西等待着我们去改进，这是一个很激动的事情。

好吧 – 拥抱变化就到此为止吧。

我有预感，接下来的半年将是辛苦的又快乐的，因为我们在创造，像神一样。

PS: 花花~ 39°C了，在此祝福一下，祝早日康复。^_^

您可能还对这些日志感兴趣

• OH YEAH — 阿里满周岁 感言
• 野谈交互 – 巴巴2011版 – 有点黄
• 飞鱼在滨江 – 网商路699号