推荐阅读
详细解析网页初级学习者如何学习
嗨少年，你是否下定决心学习网页设计？那就恭喜你了！网页设计可能是你职业生涯中让你满血复活的技能之一了。路漫漫其修远兮，在这漫长的学习中,开始的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代替列表标签的做法。或是用表格来表现列表的朋友也可以试着改变一下。从现在开始使用无序列表标签。当然如果你已经用了发现这样还不能满足你，那就等后面讲解如何用样式去开发出列表的潜力吧。今天讲的内容虽然比较简单，但是还是希望来读本篇文章的朋友可以思考一下上面我提出的问题。
最新发布
浅谈如何让网页设计中图标更有吸引力
图标在网页设计中用途广泛，几乎每个网站中都存在着图标。通过这些小小的图标，可以方便的实现视觉引导和功能划分。如果选用恰当，图标能和页面中的图片有机融合，保持视觉上的一致性，同时也能够和整个网站的风格相契合。图标并不是华而不实的小玩意儿，小图标有大用处。在网页设计中，如果设计师并不擅长图标设计，那么就需要在图标选择上下功夫了。一般来说，根据使用手法、使用场合的不同，一张图像可以有多种解读，图标亦如此。图标不但能够吸引用户的注意力，还能分割页面中的区域，最为重要的事，图标能够提供一种视觉隐喻，能赋予物体某种含义，这样用户扫一眼便能知晓功能，因此，图标是一种提高用户体验的工具。图标在网页设计中的作用图标可以说是一种不稳定的视觉元素，因为图标包含了太多的意象，可以扮演不同的角色。一个铅笔的图标，就能代表很多意义，可以代表设计，也可以代表出售铅笔，也可以代表素描。图标最主要应用于：视觉上分割内容:让内容更具有吸引力和可读性。经常被应用到网站的主体、列表、或者其他文本较多的元素中。作为概念的视觉参照物，快速引导用户:这在导航元素中最为常见(上图)——比如放大镜代表搜索——非常简单，有时候连文本注释都不需要。效果突出，因此图标被广泛使用。因此可以在网页设计几乎每个元素中都找到图标的身影：标题、脚注、导航条、列表;图标可以大幅提升页面中元素的浏览效果。
浅析网页设计中图片的使用基本原则
设计师都知道，行业的核心追求便是打造优秀的视觉效果。实际上，之所以能够成为设计师，是因为我们具备一种技艺，能够满足用户的视觉感受和视觉需求。我们可以听、读、想，我们可以想象出概念、物体以及人;但是这些感受都很抽象，只有实实在在地看到，印象才能定型。你遇到过从来没见过雪的人吗?可能你也从来没见过雪花飘洒在天空的景象。所以这些人无法理解，到底什么是雪?他们可能会知道原理是因为寒冷而凝结了空气中的水分，落下便形成了雪，可是他们无法真正明白，到底何为雪。我也遇到过一些第一次见到下雪的人;我见证了他们的异常惊奇的表情，他们对这种第一次看到的、从天空中飘落下来的白色物体着了迷。可能会有见过雪的人对未曾见过雪的人进行描述，可没有见过雪的人不相信前者的描述。他们会觉得前者在耍他们。所见即所得。视觉元素，诸如照片和视频，会让我们感到最亲切，因为它们和我们的生活最为接近，我们感同身受。当你为网站配图的时候，你添加的并不是一堆美丽的像素块。实际上，每一幅图片，都可以看做现实生活的缩影，而用户喜欢这种熟悉感，所以能够营造良好的用户体验。需要我为你们指点一下其中的技巧吗?开始吧巧妙用图也算是一种设计即便是内容主导的网站，也需要图像作为润色，每次设计这种网站，我都需要寻觅一些优秀的照片或者插画。这种图像搜寻对我来说至关重要，因为我不会画画，如果你会画画，或者你的团队中有有天赋的绘画能手，那你真的太幸运了!我都有点嫉妒你的好运。良好的照片运用能够成就优秀的设计。人都是视觉动物，在浏览网页时，对于图像有一种渴望，因此添加图片非常重要。而且，一定要是合适的、相关的图片。对比
8个创意风格的网页页面设计心得技巧
工作中，网页设计师经常会遇见这些状况：时间这么短又要出彩、即要大气又要有气氛、各个游戏风格要准确把握、内容多页面长……方方正正，四平八稳的排版又显的呆板，估计连设计师自己都会觉得越做越没趣了。因而每个设计师都需要丰富的创造力，下面就看看这八大创意理论能不能给你下一个专题带来些想法吧。设计师们在思考的问题：1.怎样在满足需求的情况下，做设计;2.怎样更快的抓住用户的眼球;3.怎样突破常规设计;4.怎样让自己的设计引起用户共鸣。八大创意理论字体图形化理论、神秘理论、留白理论、幽默理论、最大化理论、组合理论、分子理论、空间理论。>字体图形化理论
针对超大网页布局的一些思考和建议
对于有些设计项目来说，老套的设计模式并不奏效，你需要设计的大点，要比以往设计的元素还要大，因此就非常适合采用超大网页布局。无论是采用大块大块的背景照片还是背景视频，超大网页布局的效果非常显著：极具视觉冲击力，吸引用户注意力。但是超大网页布局有什么诀窍呢?这里我们通过案例给出一些建议。大的好处joeseone-timecrema-coffeelrxd
如何设计新闻类型的门户网站设计心得
新闻类网站的设计秘诀最近，一个朋友建议我写点关于新闻类网站的分析：什么是正确的新闻类网页设计，什么是错误的。他认为现今的线上新闻用户体验非常落后，让人感到厌倦无比，而且只是他们不用心做罢了，采用AJAX或者类似的技术就能把内容呈递的完善，而且导航做得十足精美。一开始我非常赞同他的观点。我认为新闻类网站的约束在于：过去传统的报纸以及杂志均为纸媒，动辄就在页面里融入了那些根深蒂固的惯例。因此用户在浏览时会发现，这类网站的感觉很熟悉，但是却限制了视觉表现。与此同时大部分新闻类网站的用户体验设计非常差，经常会出现令人阅读困难的小文本。从《互联网设计之道》开始，我知道这句话已经别人重复无数次了，如果把网络比作一种媒介的话，那么网络是流动的，是复杂的，也是美丽的。而且网络的威力超出了大多数人的意料。所以我们一起来看一下这些国际知名的新闻类网站，看看他们的优点与缺点。其实，主要还得是移动端用户的体验。然而很多新闻类网站并没有将此类用户纳入考虑。当然，确实很多新闻网站已经出了iOS或者Android版本的原生应用，可惜效果并不理想，大部分的用户下载完之后，用几次就基本废置到一旁了。我们获取信息的途径是什么?因为太过官方，内容太过常规，现在的用户很少主动浏览新闻类网站。他们通常是通过点击朋友、亲戚、网友的分享来得到信息。通过社交网络，E-Mail，RSS Feed以及新闻源中的链接来得到信息。而链接导向的往往是网站，而不可能是应用。因此，每个新闻类网站都必须要注重移动端的用户体验。现在用手机浏览消息的人实在是太多了。那么问题又是什么?为什么新闻类网站不改进呢?路很漫长，前方有两块绊脚石有待清除。
5个网页设计师不应该犯的可用性错误
没有想打造糟糕用户体验的网页设计师。糟糕的用户体验通常并不只有一个——大量微小的体验问题在整个用户界面中重复出现，最终汇聚成一种巨大的、让人讨厌的体验。让我们学习一下那些会让你的用户讨厌的可用性错误。1. 忽视“空数据”时的页面设计(Neglecting the Design of Blank Slates)空白页(blank slate)是当用户没有添加任何数据，或者删除所有页面相关数据时他看到的页面。让我们看看空白页的例子——FreshBook的项目估算(item estimates)界面：FreshBooks的空白页面例子我们可以看到他们是如何在空白页面放置一些简单的元素来大大加强了页面的可用性的。即：着重描述(Prominent des cription)：在页面的顶端，有一个对该页面功能的明显描述。可交互组件(Actionable components)：为用户提供三条途径进行交互操作，并能立即开始。空白页面指示(Blank slate indicator)：为了不让人疑惑，页面提供了状态描述，告诉用户现在页面上没有数据。
详细解析网页设计中的细节分析
最近看了一些教程，总结一下学到的东西，分享给大家。细节1：中间部分的圆角矩形，如果是纯色的话会使画面有些呆板，处理方法是画一个圆填充执行“滤镜-模糊-高斯模糊”，适当调节数值，并将图层的色彩叠加模式改为颜色减淡，适当调节图层的不透明度。细节2：对于图片中的那种五角星的画法，只需要画一个矩形，执行"ctrl+t"，并将中心点移动到正下方，并将图像旋转72度，点击确定后，执行“ctrl+alt+shift+t”,就可以达到相应的效果。细节3：虚线的画法。我们需要定义画笔预设，然后调节画笔的间距调大，同时将画笔的角度抖动选为“方向”。细节4：质感按钮的制作。对于这种质感按钮，调节图层样式，加渐变，加一点点的投影效果就可以。细节5：对于这种向下凹陷的效果或者向上凸起的效果都是使用图层样式中的斜面浮雕实现。细节1：对于外圈的多角形，使用多边形工具，选择星形模式，将边数调大，适当调节缩进边依据的数值就可以达到想要的效果。细节2：虚线的画法，只需要注意调节画笔的一些属性后对路径进行描边接可以了。
几种方法简化网页使内容更具可读性
今天我们继续来聊聊为网页如何“减负”。很多时候，设计不可避免的会变得复杂。因为按照客户的要求去设计，往往会添加大量元素，使得页面变得较为臃肿，内容过载，让人难以理解，因此我们就需要通过设计手段，来个网页”减负”。作为设计师，我们懂得如何有创意的解决客户的问题。问题是什么并不重要，无论是为客户设计响应式网站，还是通过设计吸引用户，增加客户的销售量，重要的是网页的核心元素，通过手段凸显这些元素，让网站更好的工作，更好的服务客户、用户。给网站”减负”就是个不错的方法。如何让界面看起来更直观、不含”赘肉”?请看本文。oak.is 充分利用了空间，让整个页面看起来干净，而且易于浏览。怎样才叫复杂?怎样才叫简约?这之间的界限似乎很模糊也很抽象。因此网页设计中的复杂性很难于驾驭，也很难于发现。当你设计完网页后，你会觉得”存在即合理”，你觉得页面中的每个元素都能流畅运作，都有存在的意义，但是在用户看来，整体的交互性不是那么好——等到这个时候再去发现问题已经晚了，差评已经产生了。如果设计过于复杂，那么这对客户还有用户来说，都是个麻烦。降低了网页的可读性以及可用性，也增加了导航的难度，用户体验随之降低。综上所述，给网页”减负”是大势所趋，尽管很难去实现，但是为了网站的性能，为了加速开发周期，为了简约，我们必须”忍痛割爱”。简化网页简化网页，要求设计师回归基本，先考虑设计的核心，然后再考虑添砖加瓦。简化网站不意味着完完全全的简化，去除所有的装饰和视觉修饰。实际上，简化网站的目的在于打造更整洁的界面，这就够了!
3原则在网页设计更好的导航菜单
导航菜单可能是网页设计中最重要的部分了。每个用户浏览网站时一定有所需，因此导航菜单能够帮助用户寻找信息。好的导航菜单像是导游，告诉用户网站是干什么的，内容分类有哪些，在哪里可以找到什么信息。而且导航栏也是整体布局的重要组成。总结一下，导航栏的重要性。1. 浏览完Logo后，导航栏是用户第一个看到的组件。2. 导航栏的作用是引导用户。3. 导航栏的作用也类似于索引，快速帮助用户找到所需信息。想让导航栏更加优雅、美丽、响应式么?看看导航栏设计的三大要点吧!1) 别再让导航胖下去了，给导航减个肥导航菜单重要性不言而喻。一些设计师往往使用一些繁杂的装饰来做突出。其实大可不必，通过字体、悬停效果、留白可以设计出简约、优雅的极简主义风格导航栏，看看下面的案例。Design Instruct
详细解析网页水平横向设计的一些技巧
老实说，你浏览过几个水平滑动的网站?如果让我来回答这个问题，我得说我没浏览过几个。而且水平滚动网站似乎在网页设计中并不流行。或者会被一些专家说这是反人类的浏览体验。好吧，对无创意毋宁死的设计师来说。咱们就是爱打破常规，弄点新颖奇特的设计出来。不过不得不说，水平滚动网页设计有点命途多舛，刚出来的时候短暂流行过一阵子，但后来渐渐消隐于大众视线，有人说这种风格的网页，浏览起来非常不顺畅，有人说他们就没见过认真设计的水平滚动网站。但是本文将介绍几例优秀案例。随着设计技艺和风格理解的提高，优秀水平滚动设计渐渐多了起来。当然，还有重要的一点需要考虑，不是每一种内容都适合用水平滚动的布局方式呈现。大多数采用水平滚动方式设计的网站，内容一般都是图片和简洁的文字资料。相较于垂直页面设计，图片展示是水平滚动设计唯一具有压倒性优势的地方。在众多的垂直布局网站中，如果出现一款水平滚动设计的图片网站，就会有鹤立鸡群的效果。Samuel EstevesSamuel Esteves是采用水平滚动设计的图库类网站范例。该网站中的很多图库都很有趣。