推荐阅读
详细解析排版设计中的点线面使用技巧
每个设计师多少都有一点强迫症，有时候会为一个像素的间距而纠结，有时候又会割舍不下自己做的元素，满屏的信息都想突出，导致画面混乱。设计师培养自己对画面的全局观是很重要的，所以我们的脑子里时刻都需要有一把“尺子”在，这把尺子，就是“点线面”。在使用这把“尺子”的时候，抛开那些装饰和颜色还有材质，将画面抽象成点线面来把控你的设计，也许会有不一样的启发和看到画面不和谐的原因所在。设计师对版面的全局观，就是“点线面”的处理。“点线面”是所有视觉画面的基本结构，点线面可以把不同的部分或者元素组合成一个整体，进而打造一个视觉舒适平衡的版面。一 . 点的运用点，单独存在时，是空间的一个痕迹;点也可以作为线的开端。很多点聚在一起可以组成韵律和图案，点的疏密，重复，规模和数量变化都能对画面效果起到很关键的作用。点成线，线成面，点是几何中最基本的组成部分。比如，在基本平面设计当中，你可把点当做一个文字或单独小元素，线是一句文案，而面，则是一段文字等等。不同形状的点圆，平稳，完美无瑕疵的，给人的感受是饱满，有力量的。方形，除了平稳外有端庄，大方感，在给人的感受踏实依靠的。
Photoshop绘制Q版调皮小公主插画图片教程
作者在绘画之前，已经构思好想要的画面，画出了线稿，并把要表现的内容大致画出来；然后由主体开始慢慢上色，画面较为复杂，要画的细节也比较多，绘制的时候一定要细心。最终效果1、新建文件 首先第一步就是打开photoshop，新建文件，一般我们是新建300分辨率，国际标准纸张A4大小的页面文件，【颜色模式】一般是RGB或者CMYK。2、在建立好的页面里新建图层。新建图层，我们尽量多分图层画画，方便修改，能节省不少时间呢。3、草稿绘制：起草稿要现在脑海中构思整个画面想要表达什么，这幅画想要绘制成明媚的阳光下，小公主在荷花池旁边想要亲吻青蛙，而冷落了在一旁偷窥的王子殿下，充满调皮情趣。构思好画面后在新建图层里绘制，我们绘制出的这张粗略的草稿，画出大概的构图，公主的动态姿势，以及周边的花草树木，抓狂的王子殿下和他的小侍女。这是第一步的草图，接下来我们还会在后面的绘制过程中做调整。4、初步草稿完成后，降低图层【透明度】，作为辅助，新建图层，在新建的图层画画。
绘制立体圆润iTunes软件图标的PS教程
现在扁平化时代，很多同学可能都忘了怎么用图层样式塑造拟物效果了，今天这枚教程带同学们来回顾一下，作者是P大点S微博里的高手，对于图层样式有很多精辟独到的见解，让人大开眼界，来学习一下。Projava：在Photoshop中，图层样式是最为直观的东西，所有的效果都能量化，以数值的形式表现出来，就是各种晦涩难懂的等高线也可以用数字来表现。利用图层样式中的混合模式可以得到千变万化的效果，很多的UI和icon绚丽的效果大多数是靠图层样式来实现的。今天的iTunes图标是一个非常经典的icon，不过现在你们看不到了。现在的版本只能说是走火入魔，推崇扁平化，说它漂亮也谈不上，说难看也不至于。下面是我完成的效果图，不过我对它的外轮廓作了一些恶搞性质的变化。这个外形介于正方形和圆形之间，它跟圆角矩形不是一个概念，迎合了现在的“审美观”：下面开始制作过程，首先我百度了一张原图作为参考～新建一个1000*1000的新画布~粘贴刚才复制的iTunes原图，移动到角落上作为参考~
Coreldraw中设置Word类型文本框
CorelDraw疑难杂症速查手册》收集了作者木平与各位平面设计同仁相互探讨提出的问题以及百度CD吧的提问，结合实际操作和工作中遇到的问题整理而成。其中有些问题参考了吧中好友和网络上同道中人的回答，对于一些不清楚或有疑问的问题作者都亲自用CorelDraw 9和CorelDraw X3分别验证了操作性与真实性。 本教程为分期连载教程，欢迎大家持续关注。 问：Coreldraw中如何设置WORD类型的文本框? 在Coreldraw里可以像word里那样改变文本框的类型吗？比如说改虚线或者删除，在coreldraw里的文本框只是属于辅助线吗？ 答：不可以，CorelDraw中的虚线段落文本框实际上是不存在的，它是作为一个定位和排版文字的辅助工具存在，在任何输出结果上都是看不到的。 如果需要文本框要自己动手画上去，而且跟文字是脱离的，文字的改变后需要手动调整文本框的尺寸。 另外，亦可以先画好需要的框架，然后点击文本输入工具，在此框架中单击，即会自动生存跟框架一模一样的段落文本框，以适应特殊编排的需要。 下节问题：如何改变Coreldraw位图背景为透明色？
最新发布
详细解析网页表格设计的5大要素
现在老板对注册量抓的很紧，当注册里的表单设计的太过繁琐或缺乏人情味，会直接让访客不想和你交朋友，哪怕是留虚假信息。我只想说，网页中的快速填表功能非常重要。而国情却是很多网站没有快速注册表单。千万不要觉得注册只是开发者的工作，这也需要设计师的积极参与，设计可以极大的提高可用性。优秀的填表设计，能够清楚的让用户明白：我输入的东西准确无误的填写到输入域了、我填写的注册信息正在处理中。作为设计师，我们的任务便是：让用户看到清晰、保证用户输入的过程中是愉悦的。在细节方面，那些错误提示，以及填写时的友情贴士都带有足够的人情味!指示帮助有的时候用户对表单很厌烦，我们大可以在设计的形式上给用户带来新颖的视觉冲击。这可不是无关痛痒的小问题，这关系到用户体验，表单填写作为用户交互中的第一环，体验一定要优秀。为了给予用户提示，应该在表单域下方或者附近添加帮助性文本，这叫做Microcopy(缩微文本)排列与对齐我们也可以通过设计控制用户填表速度。我们可以通过标签排列和输入域的对齐来提高用户填表速度。
16个能有效学习着陆页设计的经典案例
这篇文章中，我们为大家精心整理了一些有趣且富有创意的着陆页面设计案例，帮助你快速掌握着陆页设计技巧。大家都知道着陆页面(Landing Pages)需要特殊的设计，才能抓住目标受众的注意力。着陆页对于帮助网站把访问者转换成销售非常重要。因此，产品的消息必须明确，设计必须能吸引人且简单易懂。来看看这些优秀案例获取灵感吧。PreziinDineroLatteShipment
设计大师浅谈如何理解用户的眼
生活中很多人会调侃道：“每天手指在手机屏幕上滑动的距离比走路的距离还长!”随着指尖上的浏览融入到生活的方方面面，如何让用户手指滑动的更有效率，在滑动手指的同时看到更多想看的内容，而不白白滑动手指，是提升手机APP用户体验的重要方面。为深入理解人们的APP浏览行为，我们使用专门用于追踪移动设备注视行为的眼动仪对用户浏览社交APP的习惯进行了研究，试图更加直观地展示人们浏览APP的特点，以及由此引发的对于优化APP浏览体验设计的思考。如果你有时间，并且想了解更多交互设计相关的知识手机与PC浏览，区别在哪里?我们曾先后针对QQ空间PC版和QQ空间手机版进行了眼动测试，让用户登录自己的QQ空间自由浏览好友动态，对比两次测试的结果(如下图)，可以发现，相比于使用电脑浏览好友动态，用户在手机上浏览好友动态时手指滑动更频繁，经常是在滑动手指的同时浏览内容。在进行基于电脑网页的眼动数据分析时，我们主要关注用户的注视焦点和轨迹，但对于手机来说，只分析用户看了什么和不看什么是不够的，有必要兼顾眼睛注视和手指滑动，来分析用户的浏览特征，并评估用户的浏览效率。在对QQ空间手机版进行眼动测试的过程中，我们发现，有时用户明明对某一条动态感兴趣，却只是滑动屏幕而不看上面的内容，直到把内容调整到一定范围内的时候才开始看，这种情境显然降低了用户的浏览效率，增加了手指的滑动距离，却没有因此看到更多的内容(如下图)。在该研究中，我们将这种情景称为“低效滑动”。低效滑动的情景让我们不禁思考：既然用户不是自上而下将整个屏幕的内容浏览完之后才向上滑动屏幕，那么，用户的注视范围究竟有多大?如何基于注视范围来优化设计以减少用户的低效滑动?用户的注视范围能否改变?
详解完成简单网页的设计上传和发布
这是一篇由 Chris Kellett 为大家带来的教程，只需利用Ai CC 以及Muse CC，就可以在一行代码都不写的情况下，完成简单的网页设计和发布。不过本文仅仅简单的介绍了大体的操作流程，更多细节还需诸位仔细研究一下。01. 用AI进行基本布局工作流程的第一步是使用AI CC，进行基本的布局，并且创建基本的矢量图标。完成后，在图层面板中选择释放到图层(顺序)。这样就能将设计导出，以供PS编辑。02.用PS完成设计根据AI导出的图层，用PS进行视觉设计。03. 命名图层
如何为原生表单控件穿上美丽外衣
在互联网成熟的今天，大家对网站的要求不仅仅在功能实现上，也开始注重视觉设计，多终端用户体验等等。表单控件是web页面上重要的组成元素，具有非常高的功能性。交互设计师为它设计更加方便的操作方式，视觉设计师也会绞尽脑汁设计出更加夺人眼球的视觉展现。可是由于表单控件自身的局限性，不能很好地自定义外表，所以就诞生了一系列的由聪明的前端同学模拟出来的以假乱真的表单控件。让我们从一个真实的“栗子”开始。视觉设计师提供了一张设计稿：作为前端同学，我在收到稿子的一瞬间，其实内心各种想法交织:这样设计很好看，只是需要模拟控件，看样子还要切图，下拉效果也是要模拟的，最重要的是要考虑兼容性，此外做完还要留下详细文档解释用来与团队沟通。这样的模拟需要在兼顾实现设计的同时，还要保证网站的性能和可用性。这时我不禁开始怀念那些看起来平凡却非常实用的原生表单控件。如果用他们几乎可以解决以上所有问题。一、说服设计师用原生控件，原生控件好处一箩筐我们从美观性、易用性、可用性、愉快感、忠诚度等几个维度对一个web产品评价，美观是其中的一环， 但是更好的功能实现、更高的效率会比华而不实的设计更加有利于产生愉悦的用户体验。1.1 节省团队沟通成本
详细解析网页全屏设计的心得技巧
晋小彦：时代在变规则也在变，网页设计师刚入行的时候都会被告知信息内容需要摆放在800或1000的宽度以内，但是今天不论在网络速度还是硬件、显示屏都有了不同程度的更。面对伴随而来的多终端显示。如何让我们的网页有一个良好的第一视觉?如何让各类的用户特别是宽屏的用户在自己的显示器上看到完整的视觉盛宴?而非仅停留于1000宽度的切糕网页。我们需要全屏大视野。那么，全屏画幅和自适应的信息设计成为了关键。说说——不做1000 小切糕还给宽屏大视野大家应该都会有这样的经历，在我们入行网页设计时首先会被告知的潜规则就是，页面的内容一定要设计在1000(1000～1004)的宽度以内，这个规则并没有错误，特别是在过去的几年中。不过随着硬件和网络的发展，网页显示的终端也在发生着快速的变化，从宽屏到超宽屏，从手机到IPAD。如果网页设计固守着1000宽度的话，也就相当于放弃其它终端用户的视觉美感。所以多终端响应式全屏设计成为必然的趋势，当然或许这对您也许并不陌生。如果我们翻阅08年之前的页面就会发现过去些年网页设计的特点。从缩略图中就可以发现，当年的页面通常将内容设置在800或1000宽度以内，背景则选择纯底或渐变或纹理平铺。而今天如果用大屏显示器来浏览这类型的页面，就会发现，它们如同一块*切糕。当然我们是可以完整的浏览页面的全部内容，但1000的设计在宽屏用户看来却略显局促。(那些年我们做过的切糕)
浅谈游戏官方网站的设计风格
还有人不喜欢玩视频游戏吗?好吧确实有人不喜欢，但是我相信不喜欢玩游戏的人不多，游戏技术一直在不断的发展，每一年我们都会看到很多图像效果惊人、愉悦性极佳的游戏新作。但是”酒香不怕巷子深”的时代已经过去了，优秀的产品要配以优秀的宣传。游戏的网页设计，就是宣传的重中之重。本文通过游戏类网站的界面来展示：网站是如何与游戏完美的结合，从而达到对游戏产品的宣传。对于设计师：在游戏类网站中，你会了解那些传奇游戏背后的团队与设计师。你会从他们的故事中得到灵感。对于用户：网站将会对游戏内容进行一个预览，吸引用户的兴趣。这些游戏类网站基本都很注重功能性和目标，这也是技术重要之所在。但是从网页设计的角度来看，游戏类的网站不免太注重视觉，装饰过度。但是本文的案例中的游戏类网站也有那么几个紧跟了网页设计的趋势，注意到了网页设计中的极简主义和信息指向。1.星球大战：旧*
那些令人赞不绝口的创新型HTML5网站
如果你对HTML5的了解还不深，建议可以先阅读：一张图读懂HTML5 。当然，我们也为您准备了40个超赞的HTML5教程。在过去的10年里，网页设计师使用 Flash、JavaScript 或其他复杂的软件和技术来创建网站。但现在你可以前所未有的快速、轻松地设计或创造互动的、有趣好看的网站。如何创建?答案是HTML5。这篇文章向大家展示12个创新的HTML5网站。看看这些惊人的 HTML5 网站，从这些优秀的 HTML5 网站获取灵感并应用在自己的网站中。希望你会喜欢这个集合。网站细节丰富，动画强悍，网速着急的童鞋请稍等下，等待加载。Wildlife这个网站一定要试试从上滚到下，感受一下页面里的动效，十足令人震惊!Saucony Kinvara 3VlogArt Ingenious
盘点注册和登录产品设计路上爬过的坑
作为最基础的常备功能， 注册/登录往往是产品第一个版本中最容易被忽视的环节，越是看似容易，陷阱越多。介绍相关产品思路的文章很多，讲交互的多，结合运营的少。一. 非常基础1.1 因「私有化」而存在不是所有的产品都需要注册/登录，除非[私有内容/私有操作]具有足够的吸引力。注册：用户告诉系统Who is Tom，系统记录Tom和口令。登录：用户告诉系统I am Tom，系统辨别Tom和口令。1.2 Passport产品线及近亲通常把注册、登录、找回密码、修改密码、账户关联这几件事归为Passport产品线。它的近亲是Profile产品线，包含用户资料、个人设置等。1.3 登录是高频，其他是低频注册、找回密码、修改密码都是低频操作，但都属于迫切程度比较高，也最容易引发挫败感，导致用户投诉及放弃使用产品。