推荐阅读
CorelDRAW设计电脑宣传海报教程
该实例制作的是一幅电脑产品宣传海报，通过绘制简单、生动的电脑图形，再加以轻快、活泼的色调，使整个画面给人来带科技、时尚、前卫的视觉感受。图12-2所示为本实例完成效果。图12-2 本实例完成效果技术提示该实例主要通过绘制准确的图形轮廓并填充颜色，从而制作出生动、形象的电脑图形。在绘制轮廓图形时主要使用了“贝塞尔”工具，并配合使用“形状”工具对其进行编辑调整，从而绘制出准确的轮廓图形。图12-3出示了本实例的制作流程图。图12-3 本实例制作流程制作步骤1.制作海报背景(1)启动CorelDRAW，新建一个工作文档，单击属性栏中的“横向”按钮，将页面横向摆放，其他参数保持默认设置。
Photoshop制作扁平及长投影的视觉效果
目前很流行的一种扁平化的设计，现在在设计当中使用的相当频繁，过程很简单，很快就能学会，工具以photoshop CS6为主，有什么不懂的地方可以下载源文件，我分享一下在网上下载的长投影，其实如果不按这个的教程来，基本上10分钟就可以搞定。最终效果第一步 创建一个背景新建画布，尺寸为840*400可以使用纯色做为背景，或是用渐变工具创建，这里的色值为#e0e0e0 这里就不多更描述了。第二步 创建一个形状选择矩形工具。大小为100px，半径为20px，色值：#4ac9b4
创意人像创作分享：少女和玻璃
拍摄前的设想与策划 拍摄这组人像作品的重要关键，就是玻璃镜子碎片的运用，首先必须注意摄影师与工作人员安全，摄影师要求工作人员全程穿戴护目镜、长袖衣服、长裤，以防止飞溅玻璃镜子碎片割伤工作人员。碎玻璃的布置过程中，必先使用黑色布幕为基底，并铺在墙上、地上，一来可以衬托光影与人像主体，二来在拍摄完毕后，也可以方便收拾玻璃镜子碎片。 锋利的玻璃镜子碎片，也能创造出极具视觉效果的摄影背景。 拍摄前的准备工作 将一整块玻璃镜子摔碎之后，利用胶水把适当形状大小的玻璃镜子碎片，一片一片手工贴合在布幕上，并在布幕前方使用透明塑料细绳，也挂上一些玻璃镜子碎片，营造出前后景的空间立体感。 先准备一大片完整的玻璃镜子。 接着把它摔个粉碎。 选出适当的玻璃镜子碎片，然后在背后涂上胶水。
GIF Animator 5.0轻松动画制作
Ulead GIF Animator 5.0大家可以在友立公司的主页上下载得到，文件大小8.96MB，现在真正可以说是一个成熟、出色的动画制作软件了。令人感到兴奋的是，国内的汉化新世纪之ＹＹ工作室（http://www.YY-china.com）对这个软件的新版本作了汉化，你可以在那里下载汉化版本进行试用，我们下面的讲解也将以这个汉化版作为范列。现在你大可以将枯燥的英文抛之脑后，投入到我们熟悉的使用环境中来。 软件的安装很简单，使用默认的设置就可以，在这就不多做介绍了，运行GIF Animator，在程序的启动时会有一个新建方案供你选择，如图一所示 我们选择打开一个样本文件Fruit，这是一个24位真彩色的动画文件，一对儿蝴蝶在餐桌上飞舞，程序界面如图二所示， 我们用鼠标选择相应帧数，然后在画面上就可以对里面元素的位置、大小以及运动方向进行修改，如果觉得画面太单调，我们还可以点击工具栏里面的字母“T”插入文字，选择好字体和大小，切换输入法输入“飞吧飞吧！”点击“确定”按钮，看！文本已经插入完成了。如图三所示输入好文本之后就可以设置视频效果了，选择菜单栏中的“视频效果”选项，在“效果类型”中选择一个合适的效果，如图四所示 完成后按左下角的播放键观看一下最后的效果，然后点击菜单栏下方保存的快捷键，就是那个磁盘图案，如图五所示
最新发布
详解网站登录页面设计与分析
前面我分享过《漂亮的网页登陆/注册表单设计》一文，里面有很多优秀的网页登录页和注册页设计，而今天一文主要是和大家分析网站登录页面设计，通过登录页的元素、风格进行分析。登录页是用户进入网站的入口，就像是我们进家、进公司的”门”一样。试想我们处在一个四周都是门的环境，我们会选择推开哪一扇门?这一扇门哪些地方有吸引我们推开的魅力?我们能否准确找到这扇门的把手?其实这些问题同样适用于登录页面，对于登录页面，是否有足够的魅力让用户在登录过程中不感到烦躁，是否能准确的区分所要填写的信息(如：是填用户名或是电话，快速切换的按钮在哪等)，是否能准确找到登录或注册按钮，这些元素的视觉层级与交互关系，直接影响着整个页面的体验。登录页的元素如上图所示，一般登录页都会包含上面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闪闪的，漂浮框乱跳的。然后就是套各种网页设计模版，做出很多复杂的类似于右边这种典型的*网站出来。美工时代：