推荐阅读
9款服装穿搭技巧轻松搞定专题页设计
到目前为止，我已经写了好几十篇关于Banner设计的文章了，目前应该还没有人把Banner设计讲出这么多门道出来吧，但是我今天想升级一下，不讲Banner设计了，而是给大家讲一下Banner设计的进阶版-专题页设计，做好专题页的前提就是做好Banner设计，这也为什么我会在前面那么大篇幅讲Banner设计的原因咯。在开讲之前呢，我依然是给大家列了一个提纲：一、专题页设计的作用是什么？二、专题页由哪些部分组成？三、专题一般都有哪些布局形式？四、做专题好比穿衣搭配，它们有哪些基本规则和技巧呢？五、总结接下来我们一个个内容单独来讲：一、专题页设计的作用是什么？专题页一般有3类：信息展示类型/纯卖货类型以及两者的结合。
Photoshop鼠绘实例：健身球
今天给大家介绍一种绘制健身球简单的方法――只需要使用Photoshop的一个滤镜，再旋转画布，就可以制作出一个珠光健身球。 在Photoshop中新建一文档，要求宽和高相同，新建立一个图层，填充为黑色，然后执行“镜头光晕”滤镜。 接着执行“极坐标”滤镜，设置如下。 然后执行“图像”-“旋转画布”-“180度”，设置如下。 再继续执行“极坐标”滤镜，设置如下。 然后圆就出来了!我们使用椭圆选框工具，把它选择出来。接着可以按Ctrl+U着色，喜欢什么颜色就着什么颜色吧!
CS5百变画笔系列19：毛刷扫尾笔触特效
本期教程中通过设置画笔样式中的“平钝形短硬”笔刷，并配合“极坐标”滤镜，制作出了就像毛刷笔在纸上涂抹产生的扫尾效果，操作上比较简单并容易实现。下期教程中我们将通过设置画笔的“纹理”参数，来绘制出真实的金属铁锈效果。希望大家能够关注下期教程《CS5百变画笔系列20――绘制金属表面真实铁锈》！开始实例的学习之前，可以先下载实例的配套素材，然后跟随操作步骤进行学习。（1）运行Photoshop CS5，执行“文件”→“打开”命令，打开素材文件“水彩画.psd”文件。（2）设置前景色与背景色。选择“画笔”工具，指定画笔样式。
单反相机曝光补偿的正确使用方法
曝光补偿的方法： 曝光补偿、调整的手段很多，一般的有闪光灯、摄影灯、反光板的外源光线补偿;调整光圈值、曝光时间的光通量参数补偿。上面这几种补偿的方法，从严格意义上讲应该分类到“光线补偿或曝光控制”的概念中去。还有就是EV的调整补偿。 外源光线类的闪光灯光线补偿，在缺乏其他补光光源情况下补光偏硬，往往会在被摄对象的背景上留下明显的阴影，同时会使被摄主体高反射部分失去层次，失真严重，所以一般很少采用。 摄影灯可以营造出很好的拍摄效果，但由于条件的限制，往往局限于摄影棚之内。 补光效果柔和的反光板对于小场景人像类摄影应用广泛，常用于主体面部补光，其局限性不言而喻。 光圈以及快门的光通量参数调整，往往由于拍摄过程中需要考虑景深，以及运动物体因素影响，实际运用中会有捉襟见肘的感觉。 对于现在普及设备来讲，最常用到的手法是进行EV的调整，以期达到曝光补偿的目的。 消费级数码相机大多具备±2.0EV调节范围，高档些的DC可达可达±3.0EV。考验一台DC的指标之一就是它的手动调节功能，而在EV调整中调整精度也是一个比较重要的因素，一般的以0.3或0.5为级别。级差越小越能满足拍摄者的创作意图。 小知识：包围式测光模式 一些高档的DC提供了新的测光模式：包围式测光，所谓包围式测光就是相机在计算正常曝光量后，分别以加减一个档次的曝光量对被摄物体进行多张拍摄，以获得不同曝光量的照片，这其实是对曝光补偿EV进行了程序化的自动设置，精简了手动功能，有利于即时抓拍。
最新发布
详解网站登录页面设计与分析
前面我分享过《漂亮的网页登陆/注册表单设计》一文，里面有很多优秀的网页登录页和注册页设计，而今天一文主要是和大家分析网站登录页面设计，通过登录页的元素、风格进行分析。登录页是用户进入网站的入口，就像是我们进家、进公司的”门”一样。试想我们处在一个四周都是门的环境，我们会选择推开哪一扇门?这一扇门哪些地方有吸引我们推开的魅力?我们能否准确找到这扇门的把手?其实这些问题同样适用于登录页面，对于登录页面，是否有足够的魅力让用户在登录过程中不感到烦躁，是否能准确的区分所要填写的信息(如：是填用户名或是电话，快速切换的按钮在哪等)，是否能准确找到登录或注册按钮，这些元素的视觉层级与交互关系，直接影响着整个页面的体验。登录页的元素如上图所示，一般登录页都会包含上面5个重要元素：LOGO、登陆框、广告图、帮助中心、底部导航。在这五个元素中，Logo与登录框是必不可少的两个重要元素。Logo体现了产品的品牌，登录框是用户进入这个页面最终的意图。Logo与登陆框已经构成了最简单的登录页面。随着用户体验的提升已经情感化的设计，广告图、帮助中心与底部导航也逐步的体现在了登录页面。登录页的风格1.体现品牌类
详细解析网页设计大型网站导航设计指南
对于大部分网站，导航并不算是个挑战。一条主导航加条二级导航支撑，通常就足够了。典型的做法是，二级导航显示出父、兄及当前子菜单。常显的主导航条显示最顶层的菜单，允许用户在菜单间切换。然而，有一类网站让这种传统的导航样式承担有些吃力。这就是我要提的大型网站。定义大型网站一个大型网站由结合了综合服务和产品的典型大型组织所有。这个组织通常也服务各色用户。拥有大型网站的组织，包括BBC这类机构型的，类似微软这种项目多样化的公司型的，*部门，高等教育类的以及运作多种活动的慈善组织类的，比如世界自然基金会。这些网站：庞大，层级多而深，由多个小网站和频道组成，迎合受众众多，许多入口，这种规模级的复杂网站导航颇具挑战。大型网站上的导航挑战在我们公司，我们花费了大量工作在这类大型网站上，尤其当我们想使用传统的导航时特费劲儿。传统的导航无法负担深层级传统的导航随着网站层级越深变得越难用。传统导航很容易应付三层;超过的话，问题就会暴露。即便拓展到页面众多的房产类网站导航，他们会更致力于导航多过内容(大型网站里页面太多让问题变得更糟)，或更顶层的页面不再出现在导航中。在后者中，如果用户处于网站的深层级页面，他们将搞不清上上下级关系，因为无法看见当前页面在整个网站中的所处位置。
网页设计中的那些不容忽视的细节
这篇文章说实际问题的，所以不多强调，下面是我总结的一些比较突出的细节问题，而且我一直认为这些问题比较严重，正因为这些都是基本问题，很容易解决的，但把这种忽略养成一种习惯性的”经验”那就”杯具”了，然而这些细节问题也不同程度的代表了你的工作态度。1)调整后的毛边当对一个位图的大小进行调整后，正常情况下会留下1px的毛边(如果你注意的话)，边界会变得模糊，如果继续调整模糊度会加大，这个问题太不起眼了，以至于你无法用肉眼来理绘，我们先用商品图片举例子：也许单张小图还不够显注，下面对比一个列表图和大图，当然了除非你故意想要这种效果。放大2倍后对比
解析网页设计扁平化设计VS拟物化设计
这篇小短文是关于最近很火的扁平化风格的深度探讨。我可以听到你们脑袋里不耐烦地抱怨：“Brah，这种事情随意啦!”。但是如果你想做一个有品味的设计师，还是看看为好。当然，我会尽可能得快点讲完。我从不认为哪种风格或哲学立场更正确或者说更优于其他，我更中庸一些，我认为答案通常不是极端的;我也认为，使用得当的就是好的。当下被讨论的很火热的用户界面设计风格有两种：扁平化设计和拟物化设计。在实际的案例中我们应该怎样取舍呢?简单说来，设计师的品味决定了他如何在实际案例中灵活运用这两种设计风格。在iOS客户端的Dropbox中，这两种设计风格被很好地融合在一起。我要说的第一件事，过犹不及。iOS中Header的特点是它有十分丰富细腻的渐变等特效，而扁平化设计则完全摒弃了这些特效。如果我们像iOS那样使用更多的特效，制造更多的细节和对比，最终会得到下图中第一个Header;如果我们去掉全部的渐变和效果，我们会得到一个像Windows8一样扁平的结果，即下图中间的Header;最后，如果我们在Header上加入一点点不易察觉的、十分微妙的渐变和特效，我们就会得到下图第三个Header和《三只小熊》(The Story of the Three Bears)里的小菇凉一样，我个人更喜欢第三个效果。我要说的第二件事，还是过犹不及。检查一下UI视图中“选中”状态的设计。我们使用浅蓝色的背景来表明这个部分被选中了，而不是复杂的特效。这个设计很好地给了用户操作反馈，既不会太显眼，又不会引不起用户的注意。我们需要有目的性地、科学合理地使用扁平化和拟物化风格，而不是生硬地套用某种风格，更不是一条路走到黑。这样才能让我们的用户界面设计看起来更高端!更大气!更有品味!更国际范儿!亲，你们懂的!
网页设计10个精致的导航菜单欣赏及点评
这些导航菜单来自于Dribbble网站，出自于世界各地的优秀设计师之手，涵盖了各种不同的风格，个个都非常精美。这里我将这些导航菜单展示出来，依据自己的想法总结它们的可取之处，演示其中一些用得上的技术方法。这样比起简单粗略的看过就忘，更能在网页设计上让我们获取很多的灵感，提高我们的设计水平。一、木质页面上的抽屉创意不看这个案例话，你能想到将木质页面上的导航菜单做成类似这样抽屉式的样式吗?我自己反正是没想到，这就是值得学习的创意。我们不要一做导航菜单就想也不想的画一个直角或者圆角的矩形背景，将文字放在上面，用竖线隔开文字。这就落入了程式化的束缚之中了。看过这个案例后，你可以明白一点，就是根据已有的东西(这里是木质的页面材质)去展开思考元素样式的可能性。以这个案例为例，你可以思考一下在一个木质的页面上，如果能将抽屉的开合作为导航菜单的两种状态的话，那么暂时不考虑技术上的实现问题，还可以通过什么样式来实现?弹孔?刻痕?油漆?这里你就可以放开你的想象力了，这时候就是创意迸发的时刻。有了创意之后再考虑技术的问题，而不能让技术上能否实现限制住了我们的想象空间。关于木质材质的创建我建议使用素材来实现，高分辨率的素材不仅细节丰富而且风格多样，上图的材质属于比较细腻的风格，这样的素材其实有很多，一搜一大把，但是关键在于平时的积累，有了不同风格的素材在手边，实现这样的效果其实非常快。二、重复和对比原则的应用垂直导航也是网页设计中常见的设计元素。在上面的设计中，我们能够看到设计师对于重复和对比原则的充分理解和应用。其中，一级导航的样式都很类似，左边是文字，右边是简洁的小图标，每个图标虽然不同，但是风格都是统一的，这正是多样性的重复原则。所以这些父导航按钮会让人感觉是平等而有某种联系的。而当前所在的位置以非常醒目饱和度较高的黄色显示，明显区别于一般状态的导航按钮，让访问者清楚的知道自己当前所处的位置，提高了用户体验并且增强了设计感。子导航既然和父导航不属于同一层次，那么必然要在视觉上和父导航有所区别，所以在背景颜色和文字颜色以及样式上你就能看到这种差别所在。另外，我将这个导航按钮重新做成了PSD文件，放在这里供大家下载，你可以学习一下如何使用杂色滤镜、图层样式来实现这样细腻的导航菜单，以及如何使用铅笔工具以像素级的标准画出文字旁边那个小小的三角图标并且还要给它应用图层样式。以下是PSD文件预览图。
网页设计中色彩的运用心得技巧
一个好的网页设计会给用户带来记忆深刻，好用易用的体验。从网页设计的版式、信息层级、图片、色彩等视觉方面的运用，直接影响到用户对网站的最初感觉，而在这些内容中，色彩的配色方案是至关重要的，网站整体的定位、风格调性都需要通过颜色，给用户带来感官上的刺激，从而产生共鸣。从色彩研究的方向来看，色彩分为色调、饱和度、明度三方面，颜色的运用是纯色之间的关系，以及它们混合在一起的效果。我们可以从当前众多的网络应用中的实例，找到色彩运用的一些广泛的色彩关系和配色方案，通过这些色彩的关系，可以作为实际工作学习中配色的指南。单色：使用一种色调不同的饱和度与亮度近似色：使用色盘中的邻近色调互补色：使用色盘中的相反色调分割互补色：使用一个色调和两个与它的补色邻近色调
详细解析网页设计如何设计实用的网页表格
想必多数同学曾经学习计算机就是从Word开始，其中一项重要的学习任务就是创建表格，如今在网络页面里表格随处可见，尤其是商业产品里充满了大量的数据，要没有这些表格估计看内容得吐血…… 表格形形色色，默默无闻的呈现着数据，阅读起来如何最为顺畅，如何才能从表格里发掘出重要信息，有哪些可以对表格进行的操作，梳理一下以供参考。在后台界面，表格对数据的维护和体现是最常见的，那么也推荐您看看一组惊艳的后台管理界面设计1.行高是表格浏览时的重要参数行高是表格非常重要的参数，行高间距直接影响着阅读的体验，有如同Omniture为了最大限度的放置数据内容，强化数据显示效果而降低行高的情况，也有SugarCRM一样的行高较高可以放置更多文本信息的表格。2.斑马线更好的引导阅读斑马线和悬停时的整行变化也是表格中能引起视觉变化的重要元素，斑马线会使得行与行的界限更为分明，尤其对数据列较多时的横向引导得到加强，这样看行内的内容时不容易错行，而悬停变色行主要是配合操作交互，为了明确区分出光标所在的行。3.选择和操作提升使用效率对表格数据的选择会有单选多选或者全选的情况，如果遇到数据项很多有翻页，全选的位置就会增加一些选项来确定是当页全选还是整表全选，如同Gmail和SugarCrm里的效果，这种表格是将选择区域放置在表格的左侧第一列，也有表格的设计是将选择放在右侧最后一列，像Campaign Monitor就是这样设计的，好处在于浏览完一行的信息就可以确定是否需要选择该行内容进行下一步操作。
浅谈如何提高网页设计垂直方向上的阅读节奏感
多掌握点字体设计知识是好事。良好的字体基础能帮助你挑选字体，理解字体本身的意义。挑选合适的字体，想必对很多设计师来说，都是一件棘手的事情。我们今天就来谈谈垂直方向的阅读节奏感。对!你没看错，韵律感也决定了字体是否适合设计。界面设计，尤其是网页设计的字体选用上，垂直阅读的节奏感是重中之重——而且能够搭配视觉元素，打造优秀的阅读韵律感的字体不是很好筛选，耗时且需要实验多次。实际上，很多手段都能帮助我们打造阅读的节奏感。与这些很难关注到的设计细节相比，或许还有一篇超有意思的文章值得您观看《四大秘要!让用户第一眼就爱上你的网站》何为垂直节奏?节奏就是…一种强烈的，有规律的，重复的声音或者运动模式。如果节奏一致且令人熟悉，那么节奏感会非常强烈。我们将节奏原理应用到将诶面设计中，便产生了垂直节奏——我们一般是从左到右，从上到下进行阅读，我们要以此阅读习惯为基础，打造一致的视觉阅读节奏。一致的垂直节奏才能保证视觉效果更放松，达到更好的阅读体验，让用户感到安心，没有阅读障碍，没有违和感，可读性自然强。打造优良的垂直节奏可不是一件容易的事情。设计师需要协调好元素与元素(图像，文本)，元素与整体之间的关系。
详细将诶系我们应该如何优化网页转化率
本文来自Facebook、Twitter 及Quora 用户增长团队的产品大牛Andy Johns在Quora所写的文章。千万不要将所有建议照单全收,做出一个四不像网站。你应该将此看作测试网站的技巧工具箱，了解对你的产品与用户而言使用这些技巧的优点与缺点何在，以及如何使它们符合你的宏观产品愿景。“优化注册转化率”这个话题可以扯出一本百科全书的篇幅来。因此我会花大量笔墨来阐述。在此先提醒你们，这将是一篇长文。。(译者注：差不多等于一章书了，所以拆分成上中下三篇)(Damndigital注：这里将上中篇合并为上篇)我认为优化注册转化率的方法概括起来主要就是两大类：第一大类，站内优化。包括网页设计/文案/布局等。这是个值得深入探讨的话题，这也是后面一类方法的基础。第二大类，访问来源优化。有许多种方法可以提升访问来源的转化效果(比如SEO，邮件，社交网络，等等)，对此我不会太多展开。但从”访问来源→用户最终转化页”之间的过程优化同样很重要。讨论站内转化率优化不可能抛开访问来源。因为早在用户进入落地页之前就已经要开始优化转化率了。站内转化率优化定义：改善网页的设计与功能，提高用户在页面上执行关键行为的可能性。转化节点：最常见的转化节点包括：注册、登录、购买、订阅、分享等(社交媒体增长带来的结果)。还有其他更加细化的转化节点，但我主要关注这几个核心的指标，因为优化的方法可以适用到其他转化节点上。1. 按钮vs. 文字链接按钮比文字链接能获取更多的点击率，原因很简单，因为”更显眼”。当你需要用文字链接的地方，尝试用按钮去代替。因为已经有无数的测试证明了少用文字链接能让CTR提升 20%-200%。
详细解析网页交互设计的那些事儿
阿里巴巴资深交互设计师 ：这是一次内部分享，新部门的同学们希望我聊聊我过去从事的交互设计，做个了面对入门者等级的PPT，和各位简单聊了聊。发到微博上，也敦促自己对交互设计从业经历做个简单总结。一. 什么是交互设计要谈什么是交互设计，先要了解这几个概念。网页设计年代，大概是从2004年开始热起来了，等到我毕业的2006年，满大街都已经是电脑培训机构，记得当时北大青鸟的百日千才培训就在我每日下班必经的十字路口。网页设计年代重视的是特效，说白了就是特效背后的技术，君不见当时的网页是让人看得眼花缭乱啊，这里bling bling闪闪的，漂浮框乱跳的。然后就是套各种网页设计模版，做出很多复杂的类似于右边这种典型的*网站出来。美工时代：