五个为你的设计添加光影效果的简单技巧

作者：笨活儿  |   发布： (编辑)稻草   |

原文作者：Rob Morris
原文链接：5 Simple Tricks To Bring Light and Shadow Into Your Designs
译者：笨活儿

原文： 5 Simple Tricks To Bring Light and Shadow Into Your Designs

现实生活中无时无处不存在着光照和阴影。你看到的每样东西都是通过光影反射形成它的形象。视觉上，光影帮助我们辨别事物，认知他们的材质、尺度和透视。

所以如果要让我们的网页设计更加自然、有动感且真实直观，正确理解光影效果就变得非常重要。以下是助你更好利用光影的五个技巧，好好运用它们，能让你的设计更加精致，从众多的页面中脱颖而出。

光照与阴影的原理快速剖析

下图中，光源来自左方。高光是光照最强的部分，阴影位于距离光源最远的地方。光影的存在帮助我们感知有关物体表面材质的大量信息。

不过你可能要问，这和网页设计有什么关系？

如果你打算创造丰富、有质感的界面和网站，光影能助你一臂之力。如同许多传统艺术家们在绘画上对光照的运用，你也可以利用光照给你的设计以深度和视觉趣味。

1. 使用光源

应该说利用光照时了解光源在那里是最为重要的基本问题。光源位置决定了高光和阴影的位置（不过在网页设计中你能打破这些规则）。在Photoshop中，你可以利用图层样式中的“全局光照”保证你创造的所有光影效果的光源都在一个位置。

控制好光源位置能够为你的页面设计创造独特气氛（即使仅仅是一个简单的线性或径向渐变也能达到效果）。光影效果还能引导视觉中心的转移。

网络上的例子

Campaign Monitor 使用发散光源，创造出一种日出效果。

Icebrrg 利用光照使页面潜入水下。

Mike Precious 使用了不止一个光源，增加了视觉趣味，而且各处都使用的是桌面台灯的光照效果。

Deaxon 在logo后有一个微弱的光源，使页面的焦点集中在了logo上。

2. 渐变

现实世界中，没有什么事物总是平坦色调。光影附着在一切事物上。利用渐变是创造深度和真实性的好方法。

运用渐变的关键是不要做得太过了。在Photoshop里绘制渐变时，请在图层样式里做渐变叠加，这样能保证你的渐变的可编辑性，而且随着图层的缩放，渐变也能跟着无损地缩放。

网络上的例子

nclud’的网站使用微弱但有效的渐变，用以区分和组织内容。

一眼看去， CSS Ninjas 似乎使用的是平直颜色。不过其实每个色彩区域都有微弱的渐变，创造出迷人的材质效果。

3. 高光

高光能平衡阴影，应该位于物体靠近光源的边缘。高光大部分时候都被忽视了，因为如果用得好的话，你几乎感觉不到它的存在。不过并不是所有情景都适合高光的存在，一个细微的高光就能造成物体表面抛光度的巨大不同。高光越“尖锐”，物体表面的光泽感就越强。

要鉴赏高光，我们需要放大这些细节。做高光设计的时候，把你的设计稿放大一倍以上是个好办法，因为按原始比例显示的时候，你可能都没法弄清自己在捣鼓些什么。

网络上的例子

Icon Dock和Newism 都在页面上边缘使用了半透明的白色制造高光效果。虽然很不起眼，但是却为设计提供了强烈的光泽感。

Apple’s的网站 大家应该都很熟悉。不过你大概没有注意到导航菜单底部的细微高光。正是这一高光，给与菜单以凸出感。

4. 基本阴影

同渐变一样，投影也被网页设计师们广泛运用。当正确使用时，投影的确能为设计增加视觉深度和质感。关键还是不要做的过度或者滥用。

阴影深度取决于光照方向和强度，以及物体和投影面的距离。光照越强，阴影越锐利越暗；光照越弱，投影也就越弱。

网络上的例子

网络上关于投影的例子实在太多了。

LinkedIn在边栏底部添加了极为细微的投影，创造出深度感。

Google — 可能是互联网上最难设计的页面了 — 仍然在搜索页上使用了细微的投影。

5. 高级阴影

要赋予物体立体感，除了简单的投影，你还有很多选择。长阴影能极大地改变页面中物体的空间关系。

下面的例子中，同样的可乐罐，被赋予不同的阴影和暗部之后，整个空间位置就显得完全不一样了。

网络上的例子

Emotions by Mike 聪明地运用了阴影（以及光照），硬是把平面页面转换成了一个地板。

Superkix 使用投影，让运动鞋漂浮于页面之上。当你缩放页面时，投影还能移动，就像光源也在转移一样。

Sofa 在纯白背景上，通过极佳的光影运用，生生造出了一个地板。

更多资源

以下内容为英文：

• Photoshop Cafe
  在Photoshop中创建光影的教程
• Advanced Shadow Techniques
  在Photoshop处理阴影
• PSDtop Blog
  理解投影
• Peachpit
  在Photoshop处理光影
• Aviva
  创建真实阴影
• PSDtuts
  用光影赋予文字以生命
• Build Internet
  光照与阴影：Photoshop中的高级渐变
• PSDtuts
  用简便制作光影效果... 以及一个咖啡杯！

另外推荐：35个极佳运用光影效果的网站（英文）

关于作者

Rob Morris是在日本工作的澳大利亚设计师。作为自由设计师，他的别名是 Digitalmash，客户遍及世界各地。你可以在 Twitter上关注他的冒险。

关于译者及版权

译者笨活儿，以学英语为目的为大家翻译优秀的外国教程。你可以订阅我博客，或者加我饭否。

本文遵循CC协议 [署名-非商业性使用-相同方式共享] 原则。转载请注明原文以及译文的原始出处。

谷歌历年母亲节Logo一览

除了第一年外，谷歌每年母亲节都会更换主页的logo以向全世界的母亲致敬。虽然2000年和2001年母亲节的logo图片看起来没什么不同，但是如果你仔细分辨的话，你会发现一个小而有趣的差异。

我们下面时候的这张图片来自谷歌澳大利亚的主页，但是很快你就可以看到所有谷歌站点都会换上这个logo。

2009年母亲节时的谷歌logo

2008年母亲节时的谷歌logo

2007年母亲节时的谷歌logo

2006年母亲节时的谷歌logo

2005年母亲节时的谷歌logo

2004年母亲节时的谷歌logo

2003年母亲节时的谷歌logo

2002年母亲节时的谷歌logo

2001年母亲节时的谷歌logo

2000年母亲节时的谷歌logo

祝读写网所有读者以及天下所有母亲，节日快乐！

当设计师遇上前端开发(转)

前言：
转自淘宝UED；
读完这篇
1、思考团队的重要性；
2、由于设计人员和制作人员的立场不同（考核也不同），导致会有这样那样的磨擦；
3、如何协调设计、制作是管理者必须考虑的。

作为互联网产品设计师，在和前端开发人员沟通时你是否常常会听到这样的声音：

—— “大姐，给点专业精神好不好，这个表格是自适应的，你这样设计页面不好扩展啊…”
——“用ajax不是不行，不过你要事前给我说嘛，你不说我怎么知道呢，你说了我就知道了嘛…”

面对这些回答，除了欲哭无泪，你有没有想过是什么原因导致出现这样沟通偏差，有没有解决的办法呢？设计师需要了解哪些知识才能和前端开发人员来更好的合作呢？

首先得从这两者之间都有哪些不同说起。我认为最主要原因在于设计师和前端开发在部门中不同的职责划分。通常情况下，产品设计师的产出物多是线框图 （wireframe),视觉设计稿（mockup）等，前端负责编写HTML,CSS等代码（demo），有时还会根据需要编写程序代码（如 JSP/ASP/PHP/Rails),光看这些分工，就知道不同的角色对产品的理解和着重点是截然不同的。

按照正常的项目流程，设计团队通常需要先设计出界面mockup或demo（HTML/CSS),接着开发人员才开始正式编写代码。然而多数情况下 为了保证项目进度，需要开发人员和设计师在项目前期就介入进来，不同的是，开发人员多是审核通过项目计划书（PRD）和原型评审，她们更关注于技术可实现 性；而设计师更倾向理解产品经理的项目需求以及通过什么样方式来解决需求从而达到提升用户体验的目的，她们更关注创意的可行性。

更令人纠结的是前端开发对“界面元素”和“交互动作”的理解和设计师有很大不同。统一的界面元素对网站的前端架构也会很有好处，他们更关注代码的可 重用性。 一方面是CSS：前端开发要实现设计师（或者自己引以为自豪）的界面设计，如果新页面的设计和原先页面中相同功能元素的设计有出入，哪怕是一点出入，都有 可能带来很多重复的工作，将CSS文件变得越来越臃肿。另一方面是JavaScript：对于很多应用型网站，会有很多需要JavaScript的页面交 互元素。这些交互元素的视觉或者行为设计与之前的有出入，也会让前端工程师为了既保证代码的健壮性来方便后端工程师的开发，又为了实现一些设计上的差别而 对现有代码修修补补忙得不可开交，最可怕的是最终淹没于bug的海洋…而交互设计师的侧重点并不在程序的编码实现，而注重于用户如何最好地与系统交互操 作，在设计中重点需要考虑的是界面元素的易用性：比如他们会考虑到并非每个用户都是计算机的熟练用户，面对隐藏的层和特殊设计的菜单可能会抓瞎，用户不见 得能明白双击左键能自动滚屏或者怎样能让自动滚屏停下来，直接看最下面的结果？总之，设计师（完美主义者更甚）会不断完善产品，来满足更好的用户体验。

那么设计师怎样来解决这些问题呢？我觉得最重要的就是“沟通”，这是最根本的解决办法。在原型设计前期就要针对自己想法的询问前端开发在技术上的可 行性，在界面设计过程中会有很多精确到像素级的标准，同样要和他们沟通了解代码的实现方式，不然很有可能做无用功。在提交界面设计之后，交互设计师也要主 动出击，不定时的去关注demo的实现效果（mockup和demo多多少少存在不一致，在后期需要跟进；另外涉及到复杂的交互方式前端很可能会忘记或者 搞混，也需要不断的去核查）。另外建立标准的文档管理和设计规范也很重要，好在我们开始建立设计规范和标准(淘斯基和TPL 模式库）的文档管理方法（SVN)，包括：

• 制定文件命名标准
• 设定文件统一路径
• 保存原始创作文件（例如PSD、Fla源文件）
• 最终完成文件（经过产品经理认可的文件）
• 视觉模式库和与其对应的代码模式库

当然，前端都很忙的，经常去“骚扰”他们会被鄙视的。跟他们沟通也需要技巧和一些基础认识，我总结了以下几点需要谨记：

1. 网站的页面是动态的。
   photoshop呈现的是静态的东西，而网站页面是动态的展现内容、布局和交互。设计师过多关注用户体验层面，很难对所有的细节做到面面俱到。而前端（包括开发）需要照顾到所有的功能点涉及到的页面，因此在前期要考虑的尽量周全，别让别人帮我们收拾烂摊子。
2. 关注新技术。
   网页设计缺少技术支持永远只是艺术。设计师必须经常关注新的技术和交互方式，这样才能在设计的时候提供多种解决方案，才能权衡利弊找到最优化的方案。
3. 界面元素的标准化和统一。
   前端关注代码的可重用性，设计师关注新创意。因此在设计前期就要考虑哪些元素和交互方式既可以满足用户体验又能够被重复使用，以此来提高效率。
4. 团队合作很重要。
   设计师很容易沉浸在自己的小世界里不能自拔，这是我们经常犯的通病。“沟通”是团队合作的关键，一切皆在沟通。
5. 相信自己。
   前端通常出于不同的原因对一些交互方式可行性做出判断，比如代码复杂程度，技术可实现性等等。好的设计师需要有一些 超前意识和冒险精神，当他们受 新技术的激发，认为它能够大大提升用户体验的时候，就需要把它当作挑战来实现。在对技术的深入了解后去说服前端一起努力实现。

好了，这些血和泪的经验是我工作一段时间慢慢总结的，如果你有更多的方法，希望能一起分享。

原文：http://ued.taobao.com/blog/2009/05/03/conmunicate/

[转]web专题设计模板化可行性研究

什么事情不能一味的强势，也不能一味的妥协，在双方都僵持不下时，只能采取折中法才是解决矛盾与争端的最优方法。引用冯小刚《非诚勿扰》中最经典的一句话：21世纪什么最贵？“和谐”.

专 题设计一直困扰着我们，以至于经常会跟需求、开发产生摩擦和矛盾，而影响我们的工作效率。针对我们目前工作中专题设计存在的问题我做了一个ppt进行分 析，并结合同行的设计总结了我们需要如何改进和完善的措施，希望在今后的工作中能真正执行，减少不必要的资源浪费，以提高我们的工作效率。现将ppt内容 展示如下：

会后我们又进行了补充
我们的专题设计支持可提供2种方案：
1、可以专门定制设计风格
2、可以选用模板

具体定制还是用模板，由策划师决定，设计师建议。
1. 策划师首先要根据内容和人群定位确定整个专题类别，是纯粹的活动营销类，还是战略发布、高端理论的官方、政府类等等。2.根据时间、重要系数来确定是否使 用模板，比如，重要系数一般、时间紧迫的，建议使用模板；时间不是很紧迫、非常重要的大型宣传项目，可以专门定制。特殊的紧要题材除外，如大地震那种。
3.策划师根据类别来确定“基调”，如果用文字无法描述，最好能提供直观的可以参考的同类的网站或图片，这样设计师能更快理解策划师的用意，尽快达成共识，确定设计风格。
4.如果选用模板的话，模板会根据几种常用的内容形式提供几套风格，冷色系，暖色系，2-3种质感，活泼的，正式的。默认提供3-5种，隔一个季度再更新。模板资源可积累重复使用。

为了提高我们的工作效率，减少沟通成本，必须规范我们的流程，所以请经常参与此项工作的同学能积极配合，为共同的目标而努力！：）