推荐阅读
详细解析网页初级学习者如何学习
嗨少年，你是否下定决心学习网页设计？那就恭喜你了！网页设计可能是你职业生涯中让你满血复活的技能之一了。路漫漫其修远兮，在这漫长的学习中,开始的30天是至关重要的，因为很多人仅仅坚持了一两个星期就放弃。在这篇文章中，我将传授你一些有用的知识和技巧，让你更好的开始网页设计之路，并长久的留在这个赛道上。向上吧，骚年！网页设计是一个涉及面很广的领域“我想学习网页设计”这句话就像“我想学习如何烹饪”一样,你知道吗？做饭有成千上万的食谱,很多不同的烹饪风格。每个成为设计师的人都应该知道,网页设计有成千上万的特定工具和一般原则。也正因为网页设计是这样一个广泛的领域,许多人就简单地问：叫兽，我该如何开始？这个问题虽然只有六个字，却能阻挡了人们的网页设计之路：有这么多工具可以选择,那我到底该选哪个呢？我真的无从下手。我的网页设计之路在网页设计大军中,我也曾是一个被如何开始和从哪里开始弄的不知所措的菜鸟。我不知道是该先学习Dreamweaver呢还是photoshop ? 或者先学习如何用JavaScript编程?其实这些事情我都可以做,但当学习的资源很多的时候,我们中的许多人就会面临着过载的选择,当你有很多选择时,你会烦恼,最终一个也不想选了。你有过这种经历吗？Dreamweaver是一个很基本的程序,它可以帮助你更快编写HTML和CSS代码。它的优点是简单,缺点是你会花更多的时间去编码。所以Dreamweaver只能是一个节省时间的好方法,而不是学习网页设计的好开头。这就是我已经吸取的教训。所以我的选择是:首先学习HTML和CSS. 为什么要从HTML 和CSS开始?
CS5新增功能实例精解1. 新增的“Mini Bridge中浏览”命令
2010年4月Adobe公司传来喜讯，Photoshop推出了CS5版本，软件中增加了很多动人的新增功能。为了让大家快速掌握这些功能的使用方法，在此我为各位朋友整理了几组实例操作，供大家学习和研究。在Photoshop CS5版本中，软件的界面与功能的结合更加趋于完美，各种命令与功能不仅得到了很好的扩展，还最大限度地为用户的操作提供了简捷、有效的途径。在Photoshop CS5中增加了轻松完成精确选择、内容感知型填充、操控变形等功能外，还添加了用于创建和编辑3D和基于动画的内容的突破性工具。下面将带领读者一起体验Photoshop CS5中的新增功能。开始阅读之前，请先下载练习文件然后配合下面的操作进行学习。在Photoshop CS5中，单击应用程序栏中的图标，在展开的菜单中选择“CS5新功能”选项，更换为相应的界面。此时任意单击菜单，在展开的菜单中，Photoshop CS5的新增功能部分显示为蓝色，更加方便用户查看新增的功能，如图1-1所示。图1-1借助更灵活的分批重命名功能轻松管理媒体，使用Photoshop CS5中的“Mini Bridge中浏览”命令，可以方便的在工作环境中访问资源。（1）执行“文件”→“Mini Bridge中浏览”命令，打开“Mini Bridge”调板，如图1-1所示。图1-1（2）在“Mini Bridge”调板中，单击并拖动其右下角，可调整调板的大小，如图1-2所示。
在InDesign中对行距、字偶间距和字符间进行调整
图4-29所示出示了行距、字偶间距调整和字符间距调整的对照图。图4-29 对照图相邻行文字间的垂直间距称为行距。测量行距时是计算一行文本的基线到上一行文本基线的距离，如图4-30所示。基线是一条无形的线，多数字符的底部为基线，均以它为准对齐。图4-30 行距（1）在“字符样式”调板中，双击“标题”样式，打开“字符样式选项”对话框，选择“基本字符格式”项目。（2）单击“行距”选项的下拉按钮，在弹出的下拉列表中选择“自动”。然后设置“大小”选项为24点，如图4-31所示。图4-31 设置行距
HTML教程:无序列表
原文：http://andymao.com/andy/post/102.html段落已经讲完了，那么一些基本的应用方式也讲了一些，那么是否已经应用了呢？当然应用可以更为丰富，那么这些就需要自己在实际工作中不断的摸索与思考，然后创新并总结得出新的应用形式。当然了段落不能当作万用膏药一样倒处使用，不过相信大家也都知道现在“DIV”这个标签的作用已经被扩大化了（POPO曾有一篇文章《<DIV>不是万能膏药》），更已经被一些人拿来与CSS一并说事。这里呢还是要重新强调一次：DIV只不过是HTML中的一个无语意标签，他可以用来布局或是作为无语意部分的处理，而CSS则是一种样式语言。名不正则言不顺，我这里不是古板，而是这种说法会让大家对于标准的理解会产生偏颇。基本的等级都弄不清楚，把标签功能无限放大，这些都不是一个正确的学习态度。我这里细细讲解各种标签以及用途其中一点也是希望大家正确理解WEB标准的意义。正确的说法应该是“xHTML+CSS”或是“WEB标准”简称为“标准”也可以。今天不是为发牢骚的，还是讲今天的主题《无序列表》列表，相信大家都已经用过了，Word里也有，很多文档编辑里也都有。而在HTML中的列表则有三种类型：无序列表、有序列表、定义列表。饭要一口口的吃，事要一件件的做，今天只讲无序列表，并且今天所讲的列表不会涉及到CSS的美化工作。说到这里大家应该也明白了，我的讲解都是分开来的，并不以样式美化为主，这也是要告诉大家标签代码非常重要。那么我们首先就要来理解列表。我们日常生活工作都是琐碎而没有条理的，而要想得到一个高效的友好的信息互通那么就要梳理信息，做好归类。这样才能有效传达信息。用列表把同类的内容进行简单的归纳，我认为这是列表的一个基本作用。常见的用途有：图书目录、饭店菜单、人员名单、待办事宜等等。而这些信息大多不是大篇的信息内容，而是简要的标题。当然列表的用途不是说只能是归纳标题信息，列表并没有去限制内容的多少。只是我们常用列表去归纳的多是些标题信息罢了。那么我们又如何去理解无序列表呢？无序的对应就是有序，从字面上去理解就很容易，有序就是说他本身就标明了前后顺序的，这是严格的，并且这些信息本身就有着顺序特性。比如我们写操作步骤那就就需要明确第一步第二步，这样的信息必然是有序的，而无序呢？也就是说其本身就是无序的没有任何顺序可言。这里要举个实例让大家思考一下：*部门的领导名单前后顺序是他们最头疼的事，虽然他们有时会写着排名不分先后，但是实际上依然是有排名的，那么这里我想提出问题：这样的名单应用有序列表还是用无序列表呢？当然这个没有标准答案，各人都有各人的思考方式，那么你是怎么想的？不妨在评论上留下你的想法。这里我就不说我是怎么想的，希望大家能多动动脑筋，多思考。列表的标签形式是：<ul> <li>这就是列表的内容了</li> <li>这就是列表的内容了</li> <li>这就是列表的内容了</li> <li>这就是列表的内容了</li> </ul>这里我们要注意到，列表有两个部分，一个是最外面的一个标签<ul></ul>，一个是里面的内容<li></li>。我们可以这样去理解，<li></li>是一个个标准化的小盒子，他们主要存放着列表信息，而<ul></ul>则是个大箱子，他的作用就是存放小盒子。这些一个个的小盒子只有放在大箱子里他们才不会弄丢了。整齐而有利于运输（移植）、存放（定位）。那么列表与段落一样可以有很多属性在其中，比如，我们可以为<ul></ul>设置一个id或是class或是title等属性，其特点功用与段落中的一样。而<li></li>也可以有这些属性，但是一般情况下来说列表即然是同类的一般也不作特殊化处理。那么无序列表基本上也就算是讲完了，其实这篇最重要的内空就是什么样的信息应该用无序列表，而这些则需要在实际应用的时候多分析多思考。那么对于还没使用列表标签的朋友，开始使用列表标签，放弃用DIV代替列表标签的做法。或是用表格来表现列表的朋友也可以试着改变一下。从现在开始使用无序列表标签。当然如果你已经用了发现这样还不能满足你，那就等后面讲解如何用样式去开发出列表的潜力吧。今天讲的内容虽然比较简单，但是还是希望来读本篇文章的朋友可以思考一下上面我提出的问题。
最新发布
基于Edge Animate可视化工具开发CSS3动画
今天这篇文章主要介绍透过Adobe Edge Animate这款可视化工具操作CSS3的动画，与前一篇文章的根本区别就是Edge Animation制作动画是可视化的，操作CSS3动画的方式是和JavaScript的JQuery相结合完成动画控制的过程。Edge Animate 工具包含了一套称为Runtime的运行时环境，包含了可以触发鼠标，触摸和时间轴多种方式的交互API，这些交互操作命令可以被应用到独立的可视化的对象上，或者用于时间轴上一系列的可触发对象上。注：下载Adobe Edge Animate 1.5需要注册成为Adobe Creative Cloud成员，点击这里注册下载。Adobe Edge Animate是一个提供可视化设计UI的应用开发软件，界面有很多地方跟Adobe其他的工具如After Effects或Flash Pro类似，如果你以前操作过这些软件，那么Edge的用户界面你将会感觉非常熟悉。Edge Animate这款软件最早的一个原型是基于Adobe AIR制作的，2010年5月时，Adobe在全球的MAX大会上展示了它，通过它，可以制作输出由HTML,CSS和JavaScript组合控制的浏览器动画内容，而不需要可以播放SWF的Flash Player。经过近1年多的反复修改，Edge Animate近期发布了它的1.5版本，功能和稳定性上已经跟最早的那个Prototype完全不同。Edge Animate主要使用HTML5,CSS3和JavaScript。HTML5是其用于创建的doctype，2D的transform，translate，rotate，scale，skew等特效都是渲染为CSS3，如果是最新版本的浏览器，可以操作纯粹的CSS3，如果是主流大众浏览器，Edge Animate则会通过JavaScript库的配合来保证HTML和CSS的显示兼容性。Edge Animate里嵌入的JavaScript库主要是JQuery。在开始玩Edge Animate前，你可能有个顾虑，就是Edge Animate如果要做交互动画，生成的内容是否会打破已有的HTML文件代码结构？答案是不会。通过Edge Animate生成的HTML代码少之又少，几乎都可以用下面的代码表达方式来概述：<div id=”Stage” class=”EDGE-xxxxxxxxxx”></div>而相关的动画内容则会全部以代码块的形式嵌入上面的div中，修改和删除都不会影响原有的HTML项目代码，对HTML中元素的操作都通过JSON对象和引入的JavaScript来完成。上面提到了，Edge Animate中主要嵌入了JQuery库，业界跟JQuery有功能上类似的大大小小的开源库有几百个，选择嵌入JQuery就是因为JQuery库的成熟程度，被采纳的程度，成功案例数量都处在世界一流水准。可能有人说，它在性能上，不如某些库；在兼容性上，不如某些库；在文件大小上，又不如某些库，但是Edge Animate作为一款通用型的工具，嵌入JQuery是处于各种设计考量平均后得出的选择，另外，JQuery对于不会写代码的设计师也非常友善，这也是很重要的一点。其实Adobe Dreamweaver CS6内也有很多功能依赖于JQuery库。Edge Animate使用JSON来存储元素的定义和属性。举个例子，下列的JSON代码段就是在Stage上定义一个椭圆对象： content: { dom: [ { id:'Ellipse', type:'ellipse', rect:['206px','76px','179px','181px','auto','auto'], borderRadius:["50%","50%","50%","50%"], fill:["rgba(77,214,240,0.76)",[270,[['rgba(136,92,204,1.00)',0],['rgba(255,255,255,1.00)',100]]]], stroke:[0,"rgba(0,0,0,1)","none"] }], symbolInstances: [] } 而这个椭圆对象，在Edge Animate的Stage上体现出来的是下图的样子。
15个精美时尚风格WordPress主题预览下载
Metro风格的设计在移动应用和 Web 设计领域成为流行趋势，在过去数月被讨论得非常多。Metro UI 的设计带给你的第一印象是彩色方块和简约的设计，这有利于以文字为主的界面导航。Metro UI 是一种界面展示技术，和 iOS、Android 界面最大的区别在于：后两种都是以应用为主要呈现对象，而 Metro 界面强调的是信息本身，而不是冗余的界面元素。显示下一个界面的部分元素的功能上的作用主要是提示用户“这儿有更多信息”。同时在视觉效果方面，这有助于形成一种身临其境的感觉。微软认为 Metro 设计主题应该是：“光滑、快、现代”。下面15个精美 Metro UI 风格 WordPress 主题体现了这一设计理念。在线演示 主题下载 在线演示 主题下载
网页设计与其让界面扁平不如让信息层级扁平
如果UI 界面使用了拟物化的风格，看起来跟生活实物一模一样，你一定会有按下去的欲望;而扁平化思想是一种让设计者在界面设计过程中减少信息层级的思想。当下 UI 设计的扁平化浪潮可谓如日中天，从微软的 Windows 8 开始，还有后来 Google 的 Android，到现在的苹果 iPhone 的 iOS，都采用了扁平化的设计理念。可是，你真的理解什么是扁平化吗?这不禁要画上一个大大的问号。在开篇之前，我先来卖个关子：我更喜欢拟物化的界面风格，和扁平化的设计思想。(请揣摩这句话)很多人眼中的扁平化 UI 设计就是：界面被设计成扁的平的，并且无立体感的。仅仅是这些吗?有这些就够了吗?如果 UI 界面使用了拟物化的风格，那么意味着人们对产品使用的学习成本大大降低，老少皆会用，因为界面看起来跟生活实物一模一样，看到界面中拟物风格的按钮，你一定会有按下去的欲望。如果是“扁平”的按钮呢?抱歉，你一定会听到很多抱怨：啊，原来这个还能点?在继续阅读本文之前，请先欣赏一张拟物风格的 UI 设计图：这个界面很明显是用户在注册时会见到的，左侧有一个信封样子的输入框，并且右侧有一个“注册”的按钮，当你输完邮箱账号并点击注册以后你会发现，这信封被塞了进去，塞到哪里去呢?一定是网站当中了，而且注册完又马上显示 Hello, Alex )) 以表示对用户的欢迎。不得不对这种设计感到赞叹，实在太精妙了，看到这个信封被投了进去，让人有一种被接受了的愉悦感，让人感觉到非常的自然，非常的舒适，马上就对这个网站产生好感。不是每个人都有丰富的电子产品的使用经历，所以，缺乏这些经历的人初次使用该产品的时候，就会更倾向于点击那些拟物化的按钮，因为，人生来如此，用手“按”得如此自然，如此舒心;而“扁平”的按钮则会让那些没有电子产品使用经历的老人或者儿童感到迷惑，这个能按吗?啊!原来这个还真能按!或许对于我们这些电子产品熟客来说，这个按钮可以点已经是常识之中的事了，但是过度扁平的界面会让人感到疑惑，增加人的反应时间。因此，拟物化图标设计势在必行。那么扁平化呢?我们应该抛弃吗?请注意，在之前一段当中，我没有用到“扁平化”这三个字，而是用“扁平”二字代替。这有什么区别吗?…… 有的!“扁平”二字特指的是视觉上图标或者界面的扁平，像在张白纸上做设计一样，没有任何的立体感;而“扁平化”这三个字呢?这正是今天要讲的主题：扁平化是一种内在的设计思想。扁平化思想是一种让设计者在界面设计过程中减少信息层级的思想。
50个超好用的字体设计工具与资源
漂亮的字体设计总是招人喜欢的，感谢那些创造这些神奇设计技巧和工具的大神们，还有那些乐于分享他们所知的设计师。我们不断地寻找优秀的资源，进行编辑，并精心挑选其中最好的呈现给大家。接下来就为大家展示一些新鲜出炉的与字体设计相关的资源。为了帮助大家改善字体在设计作品中的运用，我们在这里提供一些与字体设计相关的文章、工具以及资源。在这里可以学到字体设计的一些基本原则，学到如何将不同的字体结合起来，以及在选择字体的时候需要注意的事项。我们也会展示与字体设计相关的幻灯片、相关术语、排版设计以及一些实验。 字体设计：参考与资源字体的分类—— The Taxonomy of Type这篇文章的目的在于帮助设计师们识别不同字体的基本属性。它解释了不同字体的分类并且给出具体例子。是一篇简短实用的文章。 Typedia: 共享的字体百科——Typedia: A Shared Encyclopedia of Typefaces
一个成功电子商务网站网页设计的四大特点
电商网站的设计是最复杂且交互性最强的，对于一个不谙此道的人的来说将会是一个艰巨的任务。即使你在网站设计圈子里混迹多年，你也可能不知该从何处下手。所以一旦你下定决心要趟这一趟“浑水”，牢记以下几点将会使你在设计道路上事半功倍：1、面向合适的用户群在浩瀚网海，你可以找到任何你想要的东西，那么是什么使用户能来网上光临你的网店，而不是去大型零售专营店血拼呢?为用户提供良好的用户体验，使他们相信并且尊重你在这方便独到的眼光就显得尤为重要。如果你能给用户博学可靠的印象，那么用户也更愿意花时间同你一起购物。认清你的电商网站的闪光点，然后在你的设计中将其突出放大。例如Kiki &Bree专注于双胞胎婴儿装的设计。或许你也可以在专营连锁店找到类似的产品，但是K & B提供的网站设计和产品描述，会让你觉得他们的产品经过设计师的精雕细琢，是其他三俗网站无可比拟抄袭不来的。2、遵守常规的导航元素一个电商网站也是最需要讲求实际的网站之一，对于其他网站的设计(比如作品集和博客)，一些规则可以被打破，但是对于电商网站，“形式遵循功能”的设计理念需要严格遵守，如此才能将用户的困惑和不满降低到最小。应遵从的设计理念如：导航栏需要在左边或者右边可快速识别的搜索栏
手绘涂鸦元素在网页设计中的运用
涂鸦是上课的时候给历史书的古人加两撇胡子;涂鸦是在一面空白的墙上刷出斑斓的花纹;涂鸦是将线稿扫描进电脑然后用手绘板在PS里润色……涂鸦早已走进我们每个人的生活，从服装到装潢到海报广告，到处都有那些温暖可爱的线条。手绘是应用于各个行业手工绘制图案的技术手法，设计类手绘，主要是前期构思设计方案的研究型手绘和设计成果部分的表现型手绘，前期部分被称为草图，成果部分被称为表现图或者效果图。手绘内容很广阔，所以言语无法尽善表达。曾经，手绘的应用局限于前期的构图，线稿，而在中后期的制作中会被完全的擦去，不留下一点痕迹，登上台面的是那些严谨的色块与真实的3D模型。而随着时间推移，设计的趋势趋向于极简的界面，富含感情的自然动物主题，简约整体下给人惊喜的精致细节，现实写真与手绘线条的搭配等等，都悄悄站在了设计的前沿。在环境表现的手段和形式中，手绘的艺术特点和优势决定了在表达设计中的地位和作用，其表现技巧和方法带有纯然的艺术气质，在设计理性与艺术自由之间对艺术美的表现成为设计师追求永恒而高尚的目标。设计师的表现技能和艺术风格是在实践中不断地积累和思学磨练中成熟，因此，对技巧妙义的理解和方法的掌握是表现技法走向艺术成熟的基础，手绘表现的形象能达到形神兼备的水平，是艺术赋环境形象以精神和生命的最高境界，也是艺术品质和价值的体现。
Edge Animate为ios设备开发HTML5动画
在IOS设备的网页体验中，HTML5可以替代Flash的缺失（某种程度上）。然后，HTML5动画制作过程中各种苦逼之处，无法一一描述。主要痛点在于缺乏如Flash Pro这样的殿堂级制作工具。Adobe推出的Edge Animate有望成为HTML5动画设计师新的神器。 在之前的文章中，我们介绍了如何Edge Animate的一些基本用法。在本教程中，我们将学习如何如何使用Label，Trigger以及JavaScript脚本来控制Edge Animate动画，并响应用户在IOS上的手势操作，比如滑动。你可以使用ipad等移动设备访问DEMO项目文件下载：http://vdisk.weibo.com/s/uVPKa在本教程发布的时间，Edge Animate版本为1.5，可以在Adobe云创意平台上免费下载。 您只需要在注册地址注册即可登录下载。制作上述动画，要完成三个任务：本文不会逐一介绍每一个步骤的详细操作过程，而只就关键点进行解释。如果你不甚了解如何使用Edge Animate，可以参考本站其他教程。在舞台中导入Edge Animate元件（可在上述下载的项目文件，解压后的image目录中找到），通过Ctrl+Y/CMD+Y转换成元件，命名为symLogo。之后，可以删除舞台上导入的图片元素，然后编辑symLogo元件。在本教程完成的示例中，当鼠标或者手势向右滑动，logo将顺时针旋转，而向左滑动，logo会相应逆时针旋转。因此，在symLogo的元件编辑状态下，我们需要为其加入两端动画：“0.5秒内顺时针旋转360度” 和 “0.5秒内逆时针旋转360度”。你可以很容易的使用Transform下的rotate属性来实现，或者使用右侧面板上方的“Transform Tools”来制作。为了未来能够方便的通过JavaScript脚本来控制旋转，在时间轴上，我们需要在每段动画的起始位置加入标签Label：分别为rotate和rotateReverse。你只需要把播放头移到动画的起始位置，然后点击时间轴左侧如下图标志的小箭头按钮即可插入并编辑标签。
浅谈网页与APP中那些优美的登陆表单
我从Dribbble收集了20个漂亮的登陆表单案例。希望你看后能从中受益，并对你以后的登陆表单设计有帮助。设计一个登陆表单看上去非常容易，但大多设计都很糟糕、毫无亮点。无论如何，这篇Dribbble案例集锦绝对走的是另一个极端。希望它们能赢得你的青睐!来一起欣赏吧。继承了iOS7的精髓，这件登陆界面作品将iOS7微妙的动画背景上升到一个新的层面。此处的背景完全是一张动画图片——甚至可能是GIF。尽管这背景事实上没有那么精致，但这一定是你平时不常见的设计。你几乎很难见到这样的APP，还有如此卖弄的首屏设计。同样秉承着iOS7的精神，这个登陆界面和它的附属界面采用了彩色模糊背景，令一切都保持绝对简洁。我得说这两个界面都相当极简化，实际的输入框被细线所取代。不过美妙的多彩背景增添了个性化色彩，令作品亲切美观。如果说有令人愉悦的设计，那这一件就是了。蓝色背景图与明快的白色LOGO、文字和输入框形成强烈对比。绿色按钮看起来像个真实的按钮——尽管界面的其余部分都是扁平的——色调也与蓝色搭配地非常好。真是醒目的配色!当然，它是从另一个角度思考登录框的产物。这不是一个通常意义上的登录窗，因为它在易用性方面仍存在瑕疵。但是在设计方面，我们尽可以跳出条条框框来思考登陆界面。与之前那些相比，这件相当平静和简洁。颜色选得非常棒。页面也很切中要害，它没有任何不必要(甚至扰乱注意力)的小把戏，任何一个登陆界面都不应该有。
浅谈网页设计中的对称与不对称
小时候，很喜欢蝴蝶，感觉这是大自然最神奇的赋予，当它们双翼张开，总是禁不住欣赏它们那种美丽的优雅以及多姿的色彩。更重要的是，这种天生的对称感，美得令人窒息。对称风格完形主义——一种人类行为理论，描述了人类排列视觉数据的思维结构——认为人类会很自然的把看到的东西按顺序排列。换句话说，我们的眼睛倾向于捕捉那些组织有序、风格圆满的视觉元素。这也就是我们所谓的对称感。对称风格的物体有一种天生的平衡感、优雅感，对称在设计中能体现出一致、有序、稳定的特质。很多知名品牌都采用了对称式设计，虽然不是很独出心裁，但是至少让人感觉大气、稳重。摩托罗拉麦当劳奔驰
浅谈网页用户体验中的表单设计技巧
网上挤满了各种各样的UI设计方案，事实上我们已经有一套套的方案可遵循。但!设计永无止境!哪怕是一个注册表单，也值得再细心研究。下面给出注册表单设计5个小技巧：1、别让用户重复填写相同的内容几乎每个人都经历过这样一个事实：注册时被要求填写邮箱地址两次或重复输入密码。但是这其实是没有必要的。仅填写一次，因为用户一般都记得自己常用的邮箱地址和密码。假设哪天用户忘记密码了可以通过邮箱找回，再多此一举填写两次反而更加容易导致用户流失。下面是一些非常值得参照的表单设计：2、突出必填字段从用户体验的角度来看,最好是没有可选字段,不需要去做假设。如果一块信息毫无意义，那么只会浪费用户的时间。不过对于商家就不同了，搜集必要的信息更能促进业务成功。