推荐阅读
精选国外非常吸引人的旅游门户网站设计欣赏
其实酒店和旅游类的网站最能体现多媒体内容和文字的搭配技巧了，这类网站通常需要营造氛围，展现美感，体现吸引力，优秀的案例比比皆是。今天我们就来看一组优秀的案例。现如今的旅游和酒店类网站设计的越来越带感了，壮美的风景和精致的界面融为一体，优质的服务和梦幻般的界面让用户在网站中流连忘返。这些网站以惊艳的图片和视频立足，配合以突出的现代网页设计技术，结合当下的设计趋势，视差滚动、全景图片、响应式布局、动态图片一个都不缺席。这些网站巧妙地将多媒体技术、文字排版和特效平衡为一体，为用户提供了身临其境的体验。>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
最新发布
详细解析网页重构中页面细节处理心得
一个页面的细节，从重构的角度去看，页面的精细度，代码的可读性、扩展性，为下游服务的代码注释，交互接口样式的书写，代码的压缩，图片的优化等都可以归为细节处理，我的理解是，刚才提到的细节处理是每个重构工程师都应该具备的基本技能，不能算是真正意义上的细节，好的细节处理应该是从用户出发，应该是发自内心对用户的一种关怀。下面有两个小例，都是我们做页面时常见的板块，如果我们细心处理一下，也许会让用户会倍感贴心。轮播图如上图，轮播图上切换按钮(如上图小方块按钮)是用户对轮播图进行交互的重要入操作点，重要程度毋庸置疑，在分析设计稿的时候发现，按钮的可点击区域太小了，只有22×2!要用户完成图片的切换显然是一件非常痛苦的事，这会给用户带来不愉悦的心情。因此，我们得想办法让点击区域变大可能的解决办法：1、建议产品让视觉设计师把按钮改大一点。知会产品后，我们会先用代码把按钮调大，给出截图让视觉设计师看。高为3像素，视觉没问题，但点击区域还是太小，如下图：
10个好用的集资网站博客系统主题模板
如果你想建立集资网站，本文将为你介绍10个强大的博客系统主题模板。集资最近成为一个热门的趋势，随着Kickstarter的成功，很多人都开 始想创建自己的集资网站了。有什么方式能比直接使用博客系统主题模板更节约开发成本呢？网上开发所耗费的步骤减少，才能使你投入更多的精力用于开发市场， 寻找更多的用户。当你获得一定成功的时候，你就可以考虑定制特殊的方案，更好的满足你的需求。Franklin是一个制作精美的模板，它能100%响应。它的特点是既可以针对单独的对象又可以针对社区导向的集资。Astoudify主题是针对单个筹款活动的。不同于Kickstarter，Astoudify提供给你所有的总控制权。然而，你不能使用Astoudify创建类似于kickstarter一类面向社区的网站。此主题采用了时下流行的全屏幕风格呈现。FundingPress是另一个强大的主题，允许任何人创建Kickstarter的克隆。它有一个响应式的设计，页面生成器以及这类网站所有的付款方式选择。2013年5月推出的CrowdPress主题模板，已经从客户那里获得了5星评价，可见这个主题有多么好用。它使用支付自适应支付方式来收钱，能减轻你的工作。
详细解析简洁风格在网页设计中的应用
有一些设计者，经过一轮艰辛做了一个很少元素并看上去不错的网页，或者他们做的网页最后看上去不会很”复杂”。网上有很多关于极简设计用在网页上的文章，这篇文章目的是指导你如何让你的网页设计做到华丽却不失内涵。最重要的是，我们将为你展示一系列的设计，让你从中体会为什么一些设计可以做到这样的效果而另外的一些却不能。什么是极简设计?极简设计被描述成将最基本的元素呈现，并摒弃所有多余结构，色彩，图形和其他素材的设计方法。其目的是使主要内容浮出并成为聚焦点，从视觉角度出发，极简设计意味着要沉静并将最基本的元素作为中心思想。设计起源于瑞士而后广泛应用各种媒介：平面设计，建筑，音乐，文学，绘画等等领域，而最近更在网页的设计上盛行。尽管极简设计已在数十年前起步，早期的互联网并没有把它付诸实践。没有旋转的图形，选取框和夸张的色彩，网页设计混乱而沉冗。我们将为你介绍极简设计的基本准则。即使你不是追求极简审美，你也会通过这里来简化你的设计。少即是多就如人们常提及的那样，极简主义会在最前部带出最重要的内容并为用户最小化一切干扰。如果某一页有过多结构，用户会对每个元素的位置感到疑惑并曲解其本意。一个极简设计会将焦点直接放在内容上。举例说，任何黑白组合的设计都会吸引用户的注意力。颜色自身会成为焦点。让我们看看这个特别的例子。
10个经典的提高网站可用性的经验指南
我想每个人都会赞成，网站的可用性是它能否受欢迎的一个重要方面，无论你进行的是公司网站、在线商店还是其他，让你的界面变得容易操控，使用时令人舒服是关键，近几年已经有很多针对网站界面优化的研究，而且这些研究的成果对于提高网站可用性是非常有价值的。现在这里有10个超实用的经验分享，相信我，这些建议会极大地提高你那个网站的用户体验，让用户爱上你的网站!这是一篇09年的老文章咯，但是这些技巧和经验并没有过时，所以我们依然翻译出来，推荐您仔细阅读。一、善用人物配图，使用户专注于你想呈现的当进入你的网站，我们会本能地关注网站上人物图片中的脸和眼睛，这倒是为我们提供了一个想法，是不是可以用人物配图吸引小伙伴的注意力呢?当然，但这仅是第一步，我们还可以这样做，你瞧，是不是大不相同!(见下图)这是第一步：「根据眼球追踪的研究，我们先会关注这个直望着我们的小萌孩」「现在，小萌孩是仰望着右边文字的，与此同时，你是不是也把注意力转移到右边的内容呢?」这里是原始的研究报告 → usableworld.com，实践证明，如果其他人往某个方向望，那么人们也会跟着望同一个方向(参照脑筋急转弯：大街上有，有一个人仰着头站着。旁边的人以为天空中有什么好看的东西，都跟着往天上看，可天空中什么都没有。你猜那人怎么说?答案附最后..)基于这个特点，我们可以利用人物配图来呈现你想要让用户关注的内容。
浅谈如何更贴切的来设计手机产品
笔者身为音乐产品的设计团队中的一员，也同意这个道理，并且朝着这个方向使劲儿设计。然而，道理都知道，设计却很糙，要问怎么糙?一用吓一跳。先从自己说起，下面是某Q音乐产品某时期的歌单推荐样式，当然了，我们能见到的很多音乐产品也用着大同小异，换汤不换药的此类推荐样式。而下面这个某度音乐产品的瀑布流样式看起来更加上档次，颇有Pinterest的设计风格。再看看叫卖很努力的某易云音乐产品，果然有态度，洒家很多图。看完了中国互联网三座山的音乐产品的这几个例子，大家用脚都能发现我们面临的问题了，那就是我们成功地动用了各种专业设计力量和高雅音乐品味设计了一款款精美的,令人陶醉的，并且锲而不舍卖力迭代的“看图软件!!!”(其实躺枪的不仅仅是音乐产品，电商产品的各类美图图库更加让人心醉神迷，目不暇接，还请自备防弹衣，下回再表)
CSS实现用户界面开发和交互式布局
近几年的前端工程师接触页面编码的时候，Table布局的时代已经没落了，取而代之的是习惯用DIV来布局组织页面架构，当然这是大势所趋。更何况HTML5+CSS3的黄金组合已经越来越被推崇!而Table只能做回老本行：去组织和展现数据信息。今天我们要谈到是CSS里的display。算是另辟蹊径来谈谈tables吧。本文提供了简单可靠的UI布局解决方案，因为CSS tables十分简单易懂，因此在交互式设计中用起来十分方便。下面我们来具体介绍这些超赞的CSS属性。CSS 属性/值 模式能够实现很多用其他方式(如Flexbox)实现比较麻烦的布局。本文主要介绍display: table 和 display :table-cell。首先我们要解释一下这里没有任何新的技术，其实人们已经讨论这些技术很多年了。只不过很少有人知道它们并真正去使用它们。CSS tables首先大家要清楚，CSS tables只是用来展示的。也就是说，CSS tables 和 HTML table 标签没有任何相关联性，它们之间的使用互不影响。有些读者可能认为使用CSS tables是不好的，希望我们这篇文章能够澄清开发者概念中的一些混淆。我们以前常用的是将一个标签属性设为’display:block’，所以类似的我们只需要用’display:table’或’display:table-cell;’就可以了。这些属性纯粹是用于布局设计。为什么CSS tables 很棒CSS table 不是新的东西，它是CSS2.1章程里的内容。它的兼容性很强，除了IE7及以下版本，其他的浏览器它都可以使用。我第一次看到CSS table是在我读的一本书里，这要追溯到2008年，那个时候很多人认为这个技术不好用(那个时候IE8其实也只是刚刚出现)。但如今CSS table已经相对容易维护和开发。常见问题及实例让我们来看看这些CSS属性能做什么。
45个新鲜的Web和移动设备用户界面PSD素材
我们都知道，都清楚移动端这两年发展的速度。各大互联网公司甚至非互联网公司都在争夺移动端的入口。分析统计也显示人们使用移动设备的数值在直线上升。看看我们周边的朋友也会发现，习惯已经开始形成。人们更喜欢在移动设备上完成工作和娱乐。PC的黄金时代似乎就这样匆匆结束了。移动端的屏幕越做越大。设计和交互都是吸引用户的第一要素。如何设计出优秀的界面和完美的交互是很多产品经理掉尽头发的根源！今天我们分享出45个新鲜的WEB和移动设备的用户界面PSD套件。希望能让更大设计人员和爱好者以及产品经理得到更大的启示和更好的灵感。iPhone UISearch UIPolaris UI Free – User Interface PackFree PSD: Anarchy UI KitPSD User Interface Kit
推荐大家使用的CSS书写规范和顺序
写了这么久的CSS，但大部分前端er都没有按照良好的CSS书写规范来写CSS代码，这样会影响代码的阅读体验，这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考，这些是参考了国外一些文章以及我的个人经验总结出来，我想对写CSS的前端用户来说是值得学习的。1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, transition等)CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
99个漂亮的网页注册和登录页设计PSD素材
我们之前有介绍过一些很漂亮的网站登录界面，登录和注册是获取用户的第一步，是最能体现网站用户体验的地方。 这里我们又收集了更多的登录和注册界面设计，它们来自于国外优秀的设计师们，而基本都是设计稿，附带PSD，你可以下载下来用在自己的项目中。Wooodapp sign in pageSign In WidgetElegant Login Form DesignSimple Login FormLogin Form
当用户体验设计遇见色彩情感
小C：有一段时间没分享东西了，记得上次与大家分享过“情感化设计中的手绘应用表现”。今个再次煽情一下，与大家分享一点关于色彩情感的那些事儿，可能前部分的色彩介绍大家有了解过。但任何事情有因有果，所以还是先让大家了解下关于色彩的组成和色彩的情感等，再来简单说说在我们生活中和界面设计中的运用所带来的感受，以及人们对色彩的喜好偏差和色彩的决定性作用等等。一、关于色彩1、色彩色彩，对于人类而言，始终属于自然界最神奇的奥妙之一，永远都在激发着我们的好奇心和创造力。在我们生活中无论何时何地，充满着各种多采多姿的色彩，哪里有光，哪里就有颜色。有时我们会认为颜色是独立的：天空是蓝色的、植物是绿色的、而花朵是红色的。但事实上，其实色彩并不会单独存在，漂亮的色彩搭配常常可以让画面更加吸引人你的目光。色彩就像是音符一样，没有某一种颜色是所谓的“好”或“坏”，唯有一个个的音符组合起来才能谱出美妙的乐章，才能说是协调或者不协调。2、色相环色相环告诉我们颜色之间的相互的关，在很多关于色彩文章中，都可以看到色相环的身影，它是我们选择颜色的一个强有力的工具。色相环是指人类的肉眼可以辨识的色彩色相所组成的色环，它由12种基本的颜色组成。包含三原色，即红、黄、蓝，原色混合产生了二次色，即橙、绿、紫，二次色混合产生了三次色。三原色是色相环中所有颜色的“父母”。在色相环中只有这三种颜色不是由其它颜色混合而成，在色环中的位置是平均分布的。二、色彩情感每个人有自己所喜爱的音乐，同样每个人也有自己钟爱的色彩，每一种颜色都有一种寓意。色彩做为第一视觉语言，当人类初接触到一个事物产生第一印象时，色彩的吸引力往往高于其造型所产生的印象。适当的应用色彩能够增强画面感染力，提升产品印象与感觉，而不同的色彩常常左右了产品最终给人的感受。色彩具有象征性，而且色彩的象征性具有区域性，民族性。说到象征我们脑海里首先会蹦出：红玫瑰象征炽热的爱情，黄色总是与富丽，权利地位相连，白色纯洁，蓝色优雅平静，黑色肃穆，邪恶等。因为颜色具有象征性，所以我们要分场合着装，送礼等。