近期准备将ZBlog整体换到WP上，具体内容请移步本人的新博客地址

原文标题：10 User Interface Design Fundamentals

原文地址：http://carsonified.com/blog/design/10-user-interface-design-fundamentals/

作者：Kyle Sollenberger 版权所有

翻译：UCDChina翻译小组，Roc

设计真正伟大的用户界面没有什么伟大的奥秘可言，做到保持简单易用就可以。

‘保持简单易用’意味着不要让用户分心。恰恰相反，好的UI让用户达成目标。结果如何？你的培训和维护费用降低，并获得更开心、满足和高效率的用户。

当你面对一个全新的界面设计时，别忘了这些原则。

编辑手记：Kyle将在纽约举行的Web设计趋势上继续探讨用户界面设计的内容。

1. 了解你的用户

“关注用户：如果在关注竞争对手还是用户之间选择，答案总是后者。工作总是首先从用户开始。”——Jeff Bezos

了解用户，因为用户的目标就是你的目标。试着重述用户，了解他们的技能水平和体验，以及什么是他们需要的。找出用户偏好什么样的界面，并观察他们在界面中如何操作。不要迷恋于追逐设计趋势的更新，或是不断添加新的功能。首要的任务是关注你的用户，这样才能创造出一个能让用户达成目标的界面。

2. 重视模型

用户的大部分时间都消耗在界面中，而不是他们自身上（Facebook，MySpace，Blogger，美国银行，学校/大学，新闻网站，等等）。我们无需画蛇添足，用户在你正在创造的界面中看到的正是那些（已有的）界面已经解决的同样问题。利用已成惯例的UI模型，你将使用户感觉像在家中一样熟悉。

CoTweet在邮件应用中运用了广为人知的UI模型。

3. 保持一致性

“用户期望越多的被正确验证，用户就越觉得系统在自己掌控之中，从而也就更喜爱它（系统）。”——Jakob Nielson

用户需要一致性。他们需要知道一旦他们学会做某项操作，那么下次也同样可行。语言、布局和设计是需要保持一致性的几个界面元素。一致性的界面可以让用户对于如何操作有更好的理解，从而提升效率。

4. 运用视觉等级

“设计师可以从混乱中找到统一；他们可以通过组织操控文字、图片从而清晰地传达设计意图。”—— Jeffery Veen，Web设计艺术家和研究者

设计时，要让用户把注意力放在最重要的地方。每一个元素的尺寸、颜色还有位置，它们为理解界面共同指明了道路。清晰的层级关系将对降低外观的复杂性起到重要作用（甚至当行为本身也同样复杂的时候）。

5. 提供反馈

界面要始终保持和用户的沟通，不管是当他/她们的行为对错与否。随时提示用户的行为：状态更改、出现错误或者异常信息。视觉提示或是简单文字提醒都能告诉用户，他/她的行为是否能够达到预期的结果。

BantamLive在界面中为大多数行为提供了一种嵌入式的载入提示。

6. （对用户）宽容

无论你的设计有多么的清晰明了，用户都会犯错。你的UI应当允许并宽容的对待用户的错误。要为用户提供可以撤销行为的方式，并且对五花八门的输入数据尽量宽容（没人愿意只是因为填错了生日的格式而重头再来）。同样，如果用户的行为引起了一个错误，在恰当的时机运用信息显示什么行为是错误的，并确保他/她明白如何防止这种错误的再次发生。

如何利用简单的验证码提高注册率一文中讲述了一个绝佳的例子。

7. 鼓励用户

一旦用户对界面有了经验之后,要奖励他/她们，使之进价。把复杂任务分解为若干简单步骤将会更显繁复和让人精力分散。提供更多的抽象方式——如键盘快捷键——完成任务，这样会让你的设计变得简洁易用。

8. 融入用户的语言

“如果你对每个像素、每个图标、每个字体都考虑再三，那么你同样需要斟酌每个词语。” —— Getting Real

所有的界面或多或少都有文字在其上。让文稿尽量口语化，而不是华美辞藻的堆砌。为行为提供清晰、简明的标签，保持简朴的文字叙述。用户对此将会很赞赏，因为他们不再是听命于他人的官腔——他们听到的是如朋友般甚至自己说话的表述方式。

9. 保持简洁

“一个现代的悖论就是：创造复杂的界面很简单，因为复杂到必须简化它们”—— Pär Almqvist

正所谓：大音希声、大象无形。最上乘的设计中，你看不到华而不实的UI修饰，或是用不到的设计元素。换而是，其必须的元素一定是简洁且有意义的。当你想着是否要再界面上加一个心功能或是元素的时候，问问自己，“用户真的需要这些吗？”或者是“为什么用户想要这个小巧的动态图标？”。你是否只是因为出于自我喜好而添加这些元素？记住，永远不要在UI设计中给自己出风头。

10. 不断向前

爷爷：如果每次失败我都放弃的话，那么我将永远不会发明耐火裤！【这时裤子烧光了，露出了底裤】

爷爷：接缝处还在改良中……

节选自《未来小子》

《未来小子》一片是我最喜爱的电影之一。贯穿影片的主角Lewis一直在挑战着“不断向前”。这正是UI设计的关键准则。

人们常说，当开发界面的时候，你往往需要失败的快一点，这样就能频繁迭代。当创建UI之时，你总会碰到错误。没关系，只要不断向前，并且要牢记让你的UI简单易用。

原文：Creating a Vinyl Record In Photoshop

作者：Arik

先来看看效果：

步骤1：

新建一个300x300像素的文档。填充一个柔和的渐变背景。

步骤2：

接着新建组“黑胶唱片”，在组内新建一个图层“黑胶盘面”，从深灰色（#111111）填充图层。

步骤3：

对该图层使用滤镜效果：滤镜>杂色>添加杂色。参数设置如下图：

步骤4：

继续应用滤镜>模糊>径向模糊，参数设置如下图：

步骤5：

复制刚才“黑胶盘面”层，重命名为“黑胶盘面 调节层”，混合模式改为“叠加”，最后调节一下亮度/对比度（目前看上去黑乎乎一片）。

步骤6：

选择形状工具（U）中的椭圆工具，记得选择形状，而不是路径，以便我们后面进行图层对齐。

填充的颜色任意，只要能区分背景方便我们辨识就行。然后把它对齐到整个画布的正中央。

接着复制这个“遮罩层”，将得到的“遮罩层 副本”缩小到5%的大小，得到中央的孔洞。将这个路径复制到“遮罩层”路径中，利用形状工具的布尔运算（重叠形状除外），得到合并的形状。

步骤7：

按住Ctrl键点击“遮罩层”的缩略图，获得选区。再点击到“黑胶唱片”组，点击“添加图层蒙版”，让整个图层组置于蒙版之下。

然后，我们要开始制作盘面上的反光效果。

新建一个长方形的形状，命名为“反光”，填充改为0%，图层样式中设置如图的透明到白色的线性渐变。

步骤8：

栅格化“反光”图层后，Ctrl+T对该图层进行透视变形——按住Ctrl键，将鼠标移至左上的控制点上，按住鼠标向下移动，直到如图的交叉效果出现。

步骤9：

把“反光”图层混合模式改为柔光，隐约的光影效果便出现了。

将“反光”图层复制两次，你可以根据自己的喜好调整旋转角度和不透明度，或者更改其大小。最终得到如下效果：

步骤10：

为了让唱片更加真实，我们继续给它添加一些附加的修饰。

步骤11：

你可以在盘面中央添加你喜欢的图案，这里我添加的是披头士的Logo。

最后，扩大画布，增加一个投影让唱片看上去像是浮在空中。OK，完工。

原文标题：3D Textured Text Effect

原文地址：http://photoshoptutorials.ws/photoshop-tutorials/text-effects/3d-textured-text-effect.html

难易度：入门

首先看最终的效果

步骤1：

打开illustrator，用文字工具输入一个你喜欢的字母，比如本例中的“C”，这里使用的是Adobe Caslon Pro字体，你也可以使用任意其他字体，只要保证有点厚度即可。设置文字大小为400pt，长宽各拉长到150%，不用担心字体过大，因为它作为智能对象粘贴到photoshop里的时候，我们可以任意调整其大小。最后，字体颜色设置为淡绿色（#8CC63F）。

步骤2：

点击菜单栏的效果>3D>凸出和斜角，勾选“预览”选项。如图设置各个角度的位置，斜角样式选择为“长圆形”。以下设置取决于你选择的字体，所以你可以根据具体情况设置不同的参数，虽然我通常都不建议把斜角设置调节到夸张的数值。当然，你依然可以通过增加“高度”来提升字体的厚度感。

步骤3：

AI完事之后，我们要移步到PS里继续后面的工作。Ctrl+N新建一个文档（大小任意），把AI里的3D字母复制到PS里，选择“智能对象”，确定。

步骤4：

接下来就是在PS大展身手的时候了，我们将要加入多种多样的纹理图案，并且赋予不同的混合模式。关键点就是，不断的尝试、调整，直到你满意为止。

从deviantArt上下载第一个纹理图案（这里是包含了多个图案的压缩包，使用的是其中一个图案，下同），在PS里打开图案，全选、复制后回到刚才建立的文档中，我们要将纹理粘贴到字母C之上，但是我们必须告诉PS如何粘贴纹理——按住Ctrl键，然后点击字母C所在图层的缩略图——我们可以看到围绕着字母形状的选区被建立出来，接着点击编辑>粘入，纹理图案就成功的添加在字母之上了。

混合模式选择“叠加（Overlay）”，此时效果应该如下图：

步骤5：

接着添加第二个纹理图案，操作和步骤4一样，打开我们想要的图→复制→选区→粘入。

唯一不同的是混合模式改为“正片叠底（Multiply）”。

步骤6：

添加最后一个纹理图案，步骤同上。

还是在最后把混合模式改为“柔光（Soft Light）”。

步骤7：

创建一个渐变的背景，从深绿色（#020400）到墨绿（#304708）。方式任意（个人推荐对背景图层应用图层样式，这样后面可以随时修改）。

步骤8：

把如图的四个图层全部链接。同时点击图层缩略图和图层蒙版中间的空白，将其链接。

步骤9：

主要的工作都完成了，接下来的都是些调整工作。给字母所在的图层添加一些图层样式。

至于修饰的文字，字母的倒影，都可以根据个人喜好来完成。

凡是你目光所及——光线和阴影无处不在。你看到的任何东西都反射回光线，也都或多或少产生阴影。光线和阴影帮助我们去感知我们的所见，并且帮助我们理解材质纹理、尺寸大小以及位置空间。

所以，当我们试图让Web页面设计更加自然生动、栩栩如生的时候，对于光线和阴影的透彻理解就显得相当重要了。以下5种利用光线和阴影的技法让你的页面得以重塑，使它们在屏幕上变得引人注目。

光线和阴影的快速解析

在下面这个简单的图例中，我们可以看到，光源从画面左上方投射过来，高光在光线最强的那一面上，而阴影则落在离光源最远的那一面。在这张图片中，通过光和影的表现，我们得以了解物体的外观和纹理质感。

但是你有疑问了，这些和Web设计有什么关系?

如果你正尝试投身入丰富、真实的界面和网站设计，那么光线和阴影无疑是你的良师益友。同样的，许多传统艺术家运用此法让笔下所画之物跃然纸上，你也可以利用光影让你的设计空间感十足并博得人们的视觉兴趣点。让我们开始吧。

1、使用光源

也许运用光线的最重要的一点就是要了解光是从哪里来的。光源的方向几乎决定了高光和阴影投射的位置（虽然在Web设计中你可以适当的调整一下规则）。如果你使用的是Photoshop，使用“全局光”可将所有的光照效果遵循同一个光源方向。

在设计中（哪怕只是线性或径向渐变）控制光源有助于为你的设计增添一种环境效果。当然也可以为设计添加一个视觉焦点。

案例

Campaign Monitor 运用一个放射性的光线以表现一种太阳在页面后升起的效果。

Icebrrg 运用光线让网站有种处于水面之下的感觉。

Mike Precious 使用了多处光源以增加视觉兴趣点，并且风格上合（右上角的）工作灯联系起来。

Deaxon在其logo背后运用一个细微的光源，起到了突出logo视觉效果的作用。

2、渐变

在真实世界种，几乎没有什么是单一色调的。光影无处不在。巧妙的渐变运用是让设计具有深度并让设计在屏幕之上变得真实生动的绝好方法。

渐变的关键点是不要太过生硬。如果你使用Photoshop，可在图层样式中添加渐变。你可以随意的设置渐变的起始点；如果你改变了元素的大小，那么渐变也将重新调整。

案例

nclud’s website 是渐变运用的经典教案，它告诉我们即使细微的渐变也可以在分割和组织内容版面上取得非常好效果的。

CSS Ninjas 给人的第一眼印象是单调的颜色，但细看之下每种颜色都有着细微的渐变，使其变得具有质感。

3、高光

高光可以平衡阴影，并且需要在靠近光源的物体边缘上使用。巧妙的设计之下，高光往往被忽略掉，因为你甚至没有注意到它。虽然不是每一处设计都适用，但是一个细小的高光往往可以让界面在光亮度上显得不同。高光越“明晰”，界面呈现上就越显光亮。

要细致的体会高光，我们需要放大拉近观察它。添加高光的一个妙计就是在200%或者更大的放大比例下工作，因为原始尺寸之下你很难清楚地观察你所做的一切。

案例

Icon Dock 以及 Newism 两者都运用一个半透明白色线条以给页面元素的顶端边缘添加一个高光。几乎难以察觉的效果却让设计十分出彩。

你也许已经去过Apple的网站。但是，你也许没有注意到它导航栏中元素底部的漂亮的高光效果，这让导航文字变得凹凸有致。

4、阴影基础

就像渐变一样，阴影也是Web设计师手中“常用武器”之一。如果运用恰当，阴影可以很好的增加立体感和质感。关键是不要用过火了。

阴影的特征取决与光线的方向和强弱，以及物体和阴影投射面之间的距离。光线越强，阴影随之越深和明显；光线越弱，阴影随之越柔和。

案例

由于应用起来十分简单，当阴影效果在网上崭露头角时，无数的网站便开始选择使用这种设计。如果经过巧妙运用的话，哪怕是很细微的一处设计也能让空间感油然而生。

LinkedIn 在它侧边栏的底部添加了一个非常细微的阴影，从而产生立体感。

Google —— 也许是互联网上最忙碌的页面 —— 依然在它的搜索页上加入细微的阴影效果。

5、阴影进阶

你可以用很多方式超越基础的阴影效果，从而赋予一个物体以三维空间感。拉长投影是一种在页面上改变物体空间位置关系的很好的途径。

在下面这个例子中，同样一听可乐罐依靠阴影呈现出完全不同的空间位置感觉。

案例

Emotions by Mike 很聪明的用阴影（以及光线）将一个原本是平面的背景变成地面。

Superkix 运用阴影让运动鞋像是“浮”在网站之上。当你改变页面大小的时候，阴影也跟着改变，好像光线在移动一样。

Sofa 在光线和阴影的优秀运用下，白色背景上产生了地面的空间感觉。