推荐阅读
精选国外非常吸引人的旅游门户网站设计欣赏
其实酒店和旅游类的网站最能体现多媒体内容和文字的搭配技巧了，这类网站通常需要营造氛围，展现美感，体现吸引力，优秀的案例比比皆是。今天我们就来看一组优秀的案例。现如今的旅游和酒店类网站设计的越来越带感了，壮美的风景和精致的界面融为一体，优质的服务和梦幻般的界面让用户在网站中流连忘返。这些网站以惊艳的图片和视频立足，配合以突出的现代网页设计技术，结合当下的设计趋势，视差滚动、全景图片、响应式布局、动态图片一个都不缺席。这些网站巧妙地将多媒体技术、文字排版和特效平衡为一体，为用户提供了身临其境的体验。>Pygmy ElephantPygmy Elephant 是一个旅游机构，网站为用户提供了逼真而难忘的视觉体验。其中涵盖的多媒体类型丰富，通过丰富的视觉体验鼓励游客踏上旅程。网站使用了视频背景，漂亮的图文混排，精致的交互细节。>Cruise Me为了让项目效果突出，设计和开发团队使用了诸多先锋的技术。当用户打开网站的时候能够看到首页上交互性极强的地图，每个地标都能够为用户提供丰富的信息以便浏览和了解。再向下，用户可以翻看不同主题不同旅游项目的卡片，有目的和针对性地了解具体信息。整个网页的设计友好而令人愉悦。>Bird Luxury Travel PR
PHOTOSHOP绘作逼真蕃茄
4.画个大椭圆，羽化20，反选，增加亮度30。 5.取消选择后，用加深和减淡工具处理周边，上面和两边减淡，底部加深。使用加深和减淡工具的时候，需要不断的尝试，这时最好给图像做个历史快照，或是复制一层来做，这样便于修改，涂抹时次数是很多的，不一会就数十次了，在历史记录中可恢复不了。 6.蕃茄有几个瓣，现在来做这几条陷下去的纹。画个椭圆，用选择-变换选区旋转和移动到适合的位置，羽化1，在凹纹的位置用减淡工具檫。 7.反选后用加深工具檫。 8.同样方法做出余下的陷纹。观察整体，再对局部作一些加深增强立体感，可加轻微杂色，数量约1。 9.给这个层命名“蕃茄”，新建一层，在上部画个小椭圆，羽化3，填充灰白性线渐变，将图层模式设为“颜色加深”，作为蒂部位下陷的暗调。向下合并到蕃茄。 10.新建一层，命名“茄蒂”，用钢笔仔细钩出蒂的形状，填充绿色（46/77/27）。 11.绘画实物时，离不开我们的好帮手――加深和减淡工具。刚接触时，我也是极为头痛的，它们不象图层样式那样，调节参数就可以得到效果的，不容易掌握。但只要经过耐心的练习和尝试，你会发觉它们实在是可爱极了。处理茄蒂时可用钢笔辅助钩出叶瓣，也需要载入茄蒂的选区，用轻移、旋转、羽化、反选等动作来得到我们需要的工作选区。完成后加杂色1.5%。
Photoshop打造斑驳压纹镂空文字效果
简 介】 利用PS可以打造出各种各样奇特的文字效果，下面我们来制作一款压纹镂空文字…… 先看一下效果： 效果图 制作工具：Photoshop CS 制作过程： 1、新建一个宽度为100像素，高度为100像素，分辨率为350像素的文件。 2、新建图层1，单击工具箱中的“自定义形状工具”，在其属性栏中单击路径按钮，并在形状下拉面板中选择五角星图案，然后在窗口中拖拽创建一个五角星路径，如图01所示。
自己动手用Dreamweaver制作活动菜单条
用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋友都想在自己的网页中加入类似的东东，经过共同摸索发现用Dreamweaer就可以实现这种效果，下面我们通过一个活动菜单条的制作来看看吧。 第1步：制作菜单外貌 图1 在Dreamweaer中新建一个文件，绘制一个层，在该层中插入一个表格(如图1)，对该表格进行修饰，然后加入菜单项并建立各项的超链接，为了去掉超链接的下划线，可以编辑超链接的CSS样式，在CSS样式面板中通过CSS选择器将“Link”和“Hover”的“Decoration(装饰)”均设置为“None(无)”，将“Hover”的“Color(颜色)”设置为红色，最后将设置好的样式应用到各个菜单条中(可按“F12”键预览效果)。 第2步：设计菜单的动态效果 1、选定层面，当鼠标变成“十”字形时按住左键将层面拖动到页面右上角(使整个菜单条完全露出但上边缘正好靠拢页面上边界)，在窗口菜单中打开时间线面板，选定层面将其拖动到时间线上，Dreamweaer会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧。然后在第15帧处单击右键，在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并将层面拖动到适当位置(如图2)。在时间线窗口中的第15帧处再次单击右键，在弹出的快捷菜单中选择“添加动作”，为该帧添加一个交互行为，Dreamweaer将自动打开行为面板。单击行为面板中的“+”按钮，从弹出的菜单中选择“Timeline/Stop Timeline”，打开“Stop Timeline”对话框，选择“Timeline1”后单击“确定”按钮关闭该对话框。交互行为的事件为“onFrame15”，动作为“Stop Timeline”，这样当时间线运行到第15帧时，动画将停止播放，这样就实现了菜单条弹回的功能。图2 2、用同样的方法在时间线的第30帧处也添加一个“Stop Timeline”的交互行为，这样就实现了菜单弹出的功能。添加了这两个交互行为后，在时间线窗口的相应帧上面都出现了一个蓝色方块，它代表一个交互行为。选择“自动播放和循环”复选框，使动画能够自动循环播放(如图3)。图3
最新发布
格式塔在网页页面设计中的应用
什么是格式塔?格式塔心理学诞生于1912年，是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。本文作者：搜狐畅游视觉设计中心团队，@畅游VC 欢迎关注：)最重要的格式塔原理接近性原理;相似性原理;连续性原理;封闭性原理;对称性原理;主体/背景原理;共同命运原理。>接近性原理接近性原理说的是物体之间的相对距离会影响我们感知它是否以及如何组织在一起。互相靠近(相对于其它物体)的物体看起来属于一组，而那些距离较远的则自动划为组外。如上图所示，左图中的圆相互之间在水平方向比垂直距离近，那么我们看到了四排圆点，右侧则看成四列。接近性原理案例
详细解析网页扁平化设计与可访问性
这几年互联网变化好多，我们在网上浏览的方式也一样。在本文中，我们将看一下最近扁平化设计带来的可访问性提升以及使得互联网或多或少更开放和可用性。扁平化元素拟物化设计模仿颜色、纹理、形状甚至实际生活中特定的实际形状，因此能对不喜欢新技术和更喜欢仿现实环境的人非常有帮助。然而，对视障用户能有多少用户呢?坚持这种设计方法对他们会有价值吗?好吧，和拟物化设计相对应的，扁平化设计，有很多优势可以帮助到这些特殊需求。因为扁平化设计使用基本的形状，比如，正规/不正规的多边形，它们更容易识别。在上图中，左边的，扁平化设计展示了方形/矩形元素和高对比色的按钮。而右侧的拟物化计算器，使用了低对比色和大量的立体和阴影元素。扁平化和拟物化的两个计算器对比展示了两种技术之间的不同。扁平化设计给予按钮本身较小的重要性同时增强了内容(本例中的数字和数学符号)。另一方面，拟物化设计通过给予按钮更大的重要性而使得它们很突出，而内容却因为低对比度而不太醒目了。上面的例子展示了扁平化设计如何提升和给予内容更大的重要性，从而能证明对视障用户是有帮助的。大字体和小图标不只是在扁平化设计中，极简主义设计也一样，大字体元素是最重要的一种表现。字体能让用户聚焦在内容，从而成为设计流程中最重要的一部分。当前设计中的趋势包括高对比色的大字体、清晰的自定义字体和平衡的段落的使用——基本上就是，把传统印刷排版带到Web中来。这些原则增强了易读性和可读性，提高了易用性的另一个方面。毕竟，高对比色的自定义字体能提升可访问性是一个众所周知的事实。
详细解析杂志化的网页设计趋势
继微软推出win8操作系统后，扁平化和拟物化的讨论就没有停止过。2013年6月11日，WWDC 2013 发布会苹果推出iOS7，颠覆性的界面设计，使”扁平化”和”拟物化”再次被推到风口浪尖上。这篇文章我并不想讨论”拟物”和”扁平”哪个好?它们都可能好，也都可能不好。先来看看几组变化：过去的很长一段时间内,界面设计的风格都处在循序渐进的改变，”扁平化”的设计却是在短短十几个月的时间内迅速流行起来。从本质上看，这不仅仅是一种视觉风格的改变，而是一种设计语言和思维方式的演化。就像上个世纪在建筑领域极简主义运动对过度装修的冲击，扁平化设计可能是一个对已经被使用多年的过度设计、或者过于花哨的网站和界面的一个颠覆。
详细解析如何有效的向用户传递信息
在设计产品的过程中，产品经理和设计师的职责之一，是有效的向用户传递信息。在互联网产品中，操作引导、结果反馈、界面呈现的元素、大小、颜色等，都可以看作是信息的传递。高效准确的信息传递，是良好用户体验的基础。下面总结了几种简单的进行有效信息传递的原则：一、使用用户容易理解的语言信息的传递过程就像是一种对话，对话就需要语言。语言的形式可能是文字、图片，也可能是闪烁、变色、大小对比等，但不论采用什么形式的“语言”，一个基本的要求是，确保用户能够“听”得懂。例如，应该尽量避免使用用户不理解的专业术语、含义不明确的符号、表意不准确的动画等。GOOD DESIGN：图标图标是一种经典的传递信息的方式，好的图标设计可以让用户一眼就知道它后面对应的程序是干什么用的，生动并且直观。所以现在流行的系统中，很多都采用了图标的方式来标识程序。上图所示，即便没有文字，我们也能猜到这些图标代表着什么功能。GOOD DESIGN：iBooks的列表界面在iBooks中，显示图书列表的界面并没有做成常规的list的感觉，而是使用了拟物的方式，以一个书架的形象呈现，书架上摆满了用户已经下载的图书封面，就像是你真的面对着一个书架，上面摆满了图书一样。这样的话，用户很容易意识到，只要把书“拿下来”，就可以阅读了。
究极解读网页渐变背景技巧大揭密
渐变在我们生活中随处可见，是一种很普遍的视觉现象。这种现象运用在视觉设计中能产生强烈的透视感和空间感，是一种有顺序、有节奏的变化。渐变作为视觉设计师经常使用的手法之一，几乎每个设计师在页面中或多或少都会做一个渐变(绝不夸张。。。)大家都知道渐变是PS里的基本功能，而且 十分简单，在渐变工具设置好不同颜色，一拉就出来了，这还需要研究吗?实际上,如何选用一个合适的渐变是设计师的基本功，也更是一门艺术。渐变幅度在设计中非常重要。渐变的幅度太大，速度太快，就容易失去渐变所特有的规律性效果，给人以不连贯和视觉上的跃动感。反之，如果渐变的幅度太 小，会产生重复之感，但慢的渐变在设计中会显示出细致的效果。所以，就有人把渐变分成强渐变和弱渐变。从功能角度上，也有人分为效果渐变和功能渐变两类， 个人觉得，到底哪一种分类更准确无可厚非，其目的还是希望设计师能够了解各种渐变的特点、使用场合以及制作技巧等等。一、效果渐变(强渐变)这种渐变主要运用在一些需要展示效果的页面上，比如风格夸张迥异的专题设计和banner，炫酷的游戏界面、时尚的娱乐性软件等。这些页面需要在短 时间内抓住用户眼球，吸引用户继续阅读。这种渐变饱和度高、跨度大，亮暗部色相可以不一致，塑造的质感比较厚重，往往营造的氛围十分强烈。专题页德州扑克游戏界面banner图
网页设计可用性指导之如何成功使用图片
nornor 俗话说，一图胜千言。无论这是真是假，图片都是网页中重要的组成部分。自从嵌入图片步骤变得简单，我们可以看到很多网站都内嵌了许多图片，其中一些 网站从不同角度展示了正确利用图片的好处，然而，大部分网站则不是如此。尽管这对于一款设计来说，并不是多大的影响，但是这些图片可能会减少你销售产品的 机会，除非你有一个很好的诱导用户的页面或者创造了很好的阅读流条件。图片是细节胜于原则的问题，处理图片应该是设计师们更加需要理解和掌握的能力。网页设计可用性指导-处理图像实际上，用户更想看到与他们想找的信息相关的图片，因此他们更青睐一个没有图片的页面而不喜欢那种充斥着无关图片，显得臃肿的页面。根据研究，在网页中使用图片的关键，是基于以下几则基本的思路：图片基本因素：尺寸，组成元素，质量，曝光率是衡量一张好图片的四大因素。用户关注图片的质量，甚至连对比度都能产生很大的影响。效率：如果一张图片令人兴奋或者让人产生兴趣，那么它就成功了。一张高效的图片包含几个特点：情感：图片中，你的产品能让激发用户使用的欲望?合理：图片展示了产品的优点?品牌：图片符合你的品牌风格?传递信息： 图片能传递正确的信息给网站的读者。
浅谈网页设计提高表格可读性的一些技巧
表格的应用DLIN：由于工作原因，经常接触到表格。我们发现，表格不但广泛的运用在各类数据收集和分析，同时通过表格这样一种二维矩阵来整理和陈列信息时(即便最后的展示方式并非一个典型的表格样式)，能够很好的表达信息之间的逻辑关系，易于帮助理解横纵信息之间的关系。在实际的网页设计应用中，表格横纵相互独立又相互关联的模式尤其适用于：1.组织和展示大量的信息表格简单的结构不但能包含大量的信息，且同时保证信息的可读性,便于读者快速扫描信息、从大量的条目中找到所需的信息。2.展示对比性信息通过合理的布局，表格能清晰的展示出同类对比信息，便于读者分辨不同条目信息之间的关联和区别，从而关注到关键、问题条目。总的来说，一个构造清晰的表格布局，将大大提升读者对信息的接收速度和理解程度例如下图中苹果官网对不同型号mac book的信息陈列方式，就采用了表格的结构，清晰的展示了4款不同的macbook，及各自的性能、售价等属性，同时读者第一眼就可以扫描到并理解表格 结构，横向是4款macbook的排列，纵向分别列出了各自的属性，然后进一步就可以根据自己的兴趣点就4款macbook的不同属性进行对比，信息完整 且便于扫描。
详细解析网页设计的分割布局秘密
随着互联网的高速发展，各种各样的网站层出不穷。在这样的环境下，用户是如何在浩瀚的互联网海洋中快速挑选网站的呢?网页设计师又如何能让自己的网站在用户匆匆一瞥后就迅速吸引到他们进一步注意的呢?本文作者向用户介绍了一种简单的页面布局方式——分割布局，这种布局方式试图让用户初览页面时感受到一种友好的浏览体验。作为网页设计师，我们可以参考的设计范例和布局原则有很多，比如说：栅格化、纵向一致性、F型布局、Z型布局、三分法则、黄金分割法等等。注重这些原则将会给你的设计带来视觉吸引力和功能性——现在让我们来看一种简单的方式，将页面两等分。虽然在一开始听起来有点傻，但是这种基本布局确实能起到非常好的效果。当我们通览一个页面时，我们的视线常常会沿着一个“之”字形移动。而如果用户的视线是沿着一条水平线移动时——就像在Z型布局里一样，那么他/她就会很专注(或者说尝试着专注)。但由于初来你网站90%的用户都不会很仔细的去关注你的页面，因此让你的设计“浏览起来友好”肯定会获得不错回报哦!眼动和“之”字形从雅虎的眼动追踪研究可以发现：·人们通过扫视页面的主要部分去判定这是个什么网站以及他们是否想在这多呆一会。·用户仅仅在三秒内就会对页面做出决定·如果用户决定留在页面，他们会最关注屏幕顶部的内容。网站的用户总是很匆忙，他们有其它的事情要做，你不要指望他们会停下来去欣赏你网站的美学。虽然良好的美学设计是非常重要的，但是这并不能完全激发访问者去采取行动——去点击“立即购买”或者“了解更多”按钮。
2013年的13个优秀的网页设计趋势
1、扁平设计扁平化设计正好是苹果一度推崇的拟物主义skeumorphism的反面极致。有一家公司尽管不是第一家实现这种风格的公司，但把它推向全新高度的却是这家公司无疑。这家公司就是微软。似乎 Windows 8 整个操作系统都是围绕着彻底扁平的 UI 来开发的，随处可见 Metro 和 Live Tiles。这种风格有利有弊，应根据需要权衡。最近采用了这种扁平化设计的是一颗冉冉升起的新星，它的名字就叫做Rise—一款闹钟 app。它的整个 UI 都没有一丁点的三维元素，简洁贯穿着整个应用，跟灰度结合起来之后，我们看到的是以一个外观漂亮的闹钟。当然，扁平化设计并不适合于所有的应用，但是越来越多的设计师和开发者仍将会把极简主义作为 app UI 设计的方向。2、更少按钮，更多手势一旦应用缺少了各种按钮和可视化维度的东西，用户不自觉地就会求助于手势。Clear就是一款出色地运用了手势的应用，彰显出四维思考的魔力。Google 最近发布的 Google Maps 想要同时做到扁平化设计和运用手势这两点。手势将会是 2013 年的设计趋势。3、辅助动画：功能可见
16个天马行空令人印象深刻的CSS3 HTML5实例
关于CSS3我们已经说了很多年了。现在终于看到很多童鞋开始深入研究并将一些高效有意思的功能放进各自的项目中去，看了很高兴。这两年随着HTML5的迅速崛起。这两者的结合将是未来不可避免的一个趋势。网页设计在沉静的N多年后终于开始诠释了设计的概念。很多公司也开始考虑深入交互和体验。这是互联网的一小步，网页发展的一大步。关于未来总是在超乎我们想象中的未来。很多可能都是在现在懵懂后的不断尝试中发现和得到的。今天我们要分享的是16个天马行空的CSS3&HTML5的尝试。这些尝试让人印象深刻。希望大家能够喜欢。Css3d CloudsExperiments Wave 03One Hour Per SecondClock