推荐阅读
(6-9):制作网页翻转按钮
大家经常在一些网页中看到一种会随着鼠标的接触而变色的按钮，参见范例网页。这称之为鼠标翻转效果，这是根据英文rollover翻译而来的，其实不是很符合中文的语境。其原理是利用两张图片，平时显示一幅，当鼠标接触后换成另外一幅图片。如下图。这样看起来好像是鼠标接触的时候按钮变亮了。现在我们来动手制作，首先在Photoshop中将它们制作成图片，然后再做成网页。首先新建一个400×300的白底图像，新建一层，利用形状工具椭圆〖U/SHIFTU〗，在公共栏选择第3种绘图方式(填充像素)，调出信息调板〖F8〗观看数值，用任意颜色在新建层中间位置画一个直径40左右的正圆(按住SHIFT保持正圆)。如下左图。0614【窗口>样式】调出样式调板，点击右上角圆三角按钮，选择“替换样式”，在出来的样式列表目录中选择“Web翻转样式”，确认目前选择的是新建层，然后使用“选中状态的蓝色胶体按钮”样式。如下中图红色箭头处。大家也可以自己选择其他颜色的。0615将新建层与背景层合并，然后【图像>修整】，如下右图所示。确定操作后图像将被裁剪为和所画的圆同等大小。这个命令的作用是根据左上角第一个像素处，或右下角最后一个像素处的颜色，在我们这幅图像中这两个地方都是白色。然后就将画面中连续的白色部分裁剪掉。这就好像现实中打印图像之后将纸张的边缘裁剪掉一样。接着将背景图层复制一层，对复制出来的图层使用曲线工具，合并高光和暗调区域(高光点229,255；暗调点60,0)，形成加亮按钮的效果。如下左图。完成后我们得到两个图层，分别是暗色按钮的背景层，和亮色按钮的背景复制层。如果以上步骤无法完成，点此下载范例文件0616使用【文件>在ImageReady中编辑】〖CTRLSHIFTM〗，或点击工具栏最下方按钮，将会跳转到ImageReady中，这是Photoshop附带的一个软件，用来制作动画和网页。我们找到Web内容和图层两个调板，如下右图。后面的操作就是由这两个调板配合完成。 在完成以上5个步骤后，我们就可以开始制作鼠标翻转效果了。开始之前我们先简要介绍一下制作的原理。范例网页大家也看过，是随着鼠标的接触而发生的。这里涉及一种概念，叫事件和方法。我们的日常生活就是由许多事件和方法组成的，比如口渴是事件，喝水就是解决这个事件的方法。肚子饿是事件，吃东西就是方法。想学习是事件，看《大师之路》就是方法等等。这其实就是一种编程的思想，和人一样，电脑也是由事件和方法组成的一套逻辑系统。所以下面我们也要按照这种思路，去创建一个事件和解决方法。这个事件就是鼠标接触事件。平时鼠标不接触，我们只显示暗色按钮层(背景层)。而在鼠标接触的事件发生后，显示亮色按钮层(背景副本层)。
AutoCAD 2007 入门教程-CAD图形的输入输出
AutoCAD 2007 提供了图形输入与输出接口。不仅可以将其他应用程序中处理好的数据 传送给 AutoCAD ，以显示其图形，还可以将在 AutoCAD 中绘制好的图形打印出来，或者 把它们的信息传送给其他应用程序。此外，为适应互联网络的快速发展，使用户能够快速有效地共享设计信息， AutoCAD 2007 强化了其 Internet 功能，使其与互联网相关的操作更加方便、高效，可以 创建 Web 格式的文件 (DWF) ，以及发布 AutoCAD 图形文件到 Web 页。 AutoCAD 2007 除了可以打开和保存 DWG 格式的图形文件外，还可以导入或导出其他格式的图形。 导入图形 在 AutoCAD 2007 的 “ 插入点 ” 工具栏中，单击 “ 输入 ” 按钮将打开 “ 输入文件 ” 对话框。在其中的 “ 文件类型 ” 下拉列表框中可以看到，系统允许输入 “ 图元文件 ” 、 ACIS 及 3D Studio 图形格式的 文件。 在 AutoCAD 2007 的菜单命令中没有 “ 输入 ” 命令，但是可以使用 “ 插入 ” | 3D Studio 命令、 “ 插入 ” | “ ACIS 文件 ” 命令及 “ 插入 ” | “ Windows 图元文件 ” 命令，分别输入上述 3 种格式的图形文件。 插入 OLE 对象 选择 “ 插入 ” | “ OLE 对象 ” 命令，打开 “ 插入对象 ” 对话框，可以插入对象链接或者嵌入对象。 输出图形 选择 “ 文件 ” | “ 输出 ” 命令，打开 “ 输出数据 ” 对话框。可以在 “ 保存于 ” 下拉列表框中设置文件输出的路径，在 “ 文件 ” 文本框中输入文件名称，在 “ 文件类型 ” 下拉列表框中选择文件的输出类 型，如图元文件、 ACIS 、平板印刷、封装 PS 、 DXX 提取、位图、 3D Studio 及块等。
自己动手制作活动菜单条
用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋友都想在自己的网页中加入类似的东东，经过共同摸索发现用Dreamweaer 就可以实现这种效果，下面我们通过一个活动菜单条的制作来看看吧。 第1步：制作菜单外貌 在Dreamweaer 中新建一个文件，绘制一个层，在该层中插入一个表格（如图1），对该表格进行修饰，然后加入菜单项并建立各项的超链接，为了去掉超链接的下划线，可以编辑超链接的Css样式，在CSS样式面板中通过CSS选择器将“Link”和“Hover”的“Decoration（装饰）”均设置为“None（无）”，将“Hover”的“Color（颜色）”设置为红色，最后将设置好的样式应用到各个菜单条中（可按“F12”键预览效果）。 第2步：设计菜单的动态效果 1、选定层面，当鼠标变成“十”字形时按住左键将层面拖动到页面右上角（使整个菜单条完全露出但上边缘正好靠拢页面上边界），在窗口菜单中打开时间线面板，选定层面将其拖动到时间线上，Dreamweaer会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧。然后在第15帧处单击右键，在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并将层面拖动到适当位置（如图2）。
数码摄影10个技巧
以前一定听过这种话：数码相机(以下用DC)无所不能。你只要按下按钮，一张伟大的照片就会变魔术般展现在你面前。相机越好，照出来的照片越好。果真如此吗?见鬼，当然不是了! 事实是你可以用一个简单的消费级傻瓜DC拍出一张伟大的照片，也可以用最贵的DC拍出一张垃圾照片。漂亮的照片不是相机搞出来的，而是摄影师搞出来的。只要有一些拍摄方面的知识，再加上不断改进的愿望，你可以用你的小DC拍出能登上时代周刊的大照片。 为了帮助你在成为伟大摄影师的道路上快步前行，这里送给你10个技巧，它们会让你即使不花大价钱买昂贵的设备也能像专业人士一样拍照。 1.暖化你的照片 你注意过有些时候你拍的照片有一种冷冷的感觉吗?如果答案是肯定的，那你并不是孤独呵呵。DC的默认白平衡设置是“自动(auto)”，虽然在大部分情况下都是适用的，但有时候却会让景物太“冷”了。 当你拍户外景物的时候，特别是当阳光充足时，试着把你的白平衡调到“多云(cloudy)”那一档。对，就是“多云”那一档，这个变化跟在你的镜头前加一个暖色滤镜的效果是一样的。它使得照片中红色和黄色的更加丰满，从而暖化了这张照片 图1a是在一个山区拍摄的，白平衡设置在“自动(auto)” 图1b 同一个场景，我把白平衡换成了“多云(cloudy)”，同时把一副Costa Del Mar太阳镜放在了镜头前(佳能PowerShot S200,程序模式program mode) 如果你不相信我，那就试试吧。在户外分别用自动白平衡和多云白平衡拍两组照片，然后在你的电脑上对比着看，我猜你一定会喜欢看上去暖洋洋的那一组的 2.用太阳镜做偏振镜
最新发布
如何加强网页设计逻辑性解决这3大难题
交互设计师的核心竞争力应该是什么?对于不同的人来说答案可能不一样，而我认为应该是在发现、分析和解决问题过程中贯穿的设计表达「逻辑性」。在面对复杂信息架构产品的设计时，结构化、强逻辑的设计思考与表达过程也尤为重要。如何提高交互设计过程的「逻辑性」?需要指出的是，这并不能简单地和「逻辑思维能力强」进行等同(事实上，作为非常重要的通用岗位能力，合作的产品经理与开发在这方面完全可以比我们强)。我在两年来的实习 & 工作中，虽然被 Leader 与同事们贴过几次「逻辑思维能力强」的标签，但也同样被挑战过「为什么设计目标是这样的」、「设计目标与解决方案的关联在哪里」、「这里的信息层级有点乱」等问题，也有过在和业务方的「撕逼大战」中溃败、无奈接受自己的创意被砍的经历。反思自己遇到这些问题的原因，还是在设计与表达过程中的「逻辑性」不够强，在思考深度上不够追根究底，前期偷懒跳过了一些需要逻辑推导串联的步骤，才导致了后续的痛苦「掉坑」。而在加强了设计过程的「逻辑性」后，再遇到以下这些问题，也许你可以和我一样变得豁然开朗。为什么他们总是揪着我的设计细节不放？之前我们以设计师的身份作为 Owner 驱动了某业务的首页改版项目，而我身为主交互设计师，在前期的设计分析过程中运用了一套比较合理的方法论和流程，因此改版的整体方向与梳理出的页面内容框架是比较受到业务方的认同的，可最终方案的需求 & 交互评审过程却成了我有史以来最虐心的一次经历。虽然大家都认同页面的基础框架，但对框架里放什么内容、内容的细节该如何设计等却众说纷坛;而我在解释这些细节部分为什么做成这样时，因为缺乏框架设计阶段那样逻辑清晰、有理有据的推导过程，多多少少有些底气不足，最终不得不接受被打回修改方案的结果。问题出在我的「设计逻辑」主要聚焦在宏观框架层面(甚至用了一大堆设计方法论与用研过程来支撑)，但却没有贯穿到对每一个内容模块、每一个交互细节的思考中去。对细节部分的信息归纳与优先级梳理不充分，自然也就难以解释清楚为什么放这些内容、为什么这么排列等问题。但是页面模块的细节太多，每个都像设计宏观框架时那样把用户体验地图、卡片分类等方法祭出来支撑解决方案显然是不现实的，所以我之前设计模块细节时都比较随性，并无太多分析推导流程。师兄在注意到这个问题后，和我讨论提出了「微链路」的解决方案建议，就是在进行每个具体模块的设计时，在确定模块的基础框架布局后，用一套迷你版的用户体验链路(类似流程图，但内容比操作跳转更丰富)来快速梳理用户浏览、分析和进一步探索模块中内容的过程，先看什么、后看什么、可能有哪些条件判断与分支操作等，从中分析提炼出模块中每个具体信息(标题、标签、文本、富媒体等)的优先级，再分类归纳进基础框架，确定最终解决方案。这么一来，模块内的信息优先级就变得和页面一级内容框架一样清晰了，解决方案「为什么放这些内容、为什么内容这么排列」的问题也得到了解答。以上是打码处理过的「微链路」过程图一张……遇到直接给详细线框图的产品经理，我该怎么办？
设计师如何设计优秀的网页导航栏
手机屏幕尺寸越做越大，作为互联网的深度用户，我相信你已经深刻体会到侧抽屉导航在移动(和桌面)端是如何降低用户体验的。先不谈它较低的可发现性和使用效率，拿出你的手机试着只用一手去按屏幕左上角。欣慰的是，越来越多的应用和网站正在尝试用更有效的方法解决这个问题。这里我整理出了市面上能见到的所有方法进行比较。有趣的是，Youtube 作为侧抽屉的开山鼻祖，它也不用了。一、选项卡如果应用的选项不是很多(一般不超过5个)，而且使用频次较高用户需要经常来回切换,选项卡导航是个不错的解决方案：这样做似乎非常行之有效，但是，需要在设计考虑一些事情：选项不建议超过5个选项在视觉观感上应得到强化
10个提高电商网站网页设计商品图片可用性的办法
用户在网上购物的时候，有很多要素会引导转化。比如，有可靠性、网站的设计、加载速度、可用性等等。单单以一个要素作为设计的理由是未经考虑的。假如所说的网站的设计、加载速度、可用性以至于可靠性这些要素，把顾客带到商品页面，商品图片将会变成最大的卖点。商品照片是面向转化的最后一块拼图。这篇文章就是介绍应该如何使用你的商品图片。1.不要吝啬使用图片在EC(电子商务)网站，为了展现商品的外观如何，放上必要且足量的图片是十分重要的。但是，和制作商品图册目录同理，要记住没有必要上传上多余的图片。另外，选用高品质的图片的同时，还必须要保证其在网页的最优化性。近来，由于CDN(Content Delivery Network即内容分发网络)的价格变得更合适了，更有利于高分辨率图像的使用。如果没有高品质的商品照片，就无法吸引客户果断地购买，客户就会离开网站。Source: UrbanOutfitters.com
5种UI设计中实用APP导航菜单设计方案
手机分辨率比桌面平台小很多，所以设计手机网站或是移动应用的时候，导航菜单都需要考虑周全，尽量保持简约和易用性高，这里我们整理了5种实用的移动手机App导航菜单设计方案，你可以尝试这些菜单设计模式用在你的新设计项目上，好用而且有新鲜感。这5种App菜单设计方案也许有很多设计师已经在使用，但不能否认它是目前实用的，而且能提高用户体验的菜单设计方案。下面摘选移动手机UI设计美观、时尚，希望你看了后会有灵感收获，能把你的菜单设计得更棒，好好学习吧。APP导航设计类型：1、列表式菜单2、矩阵、网格式菜单3、底部菜单4、顶部菜单5、扩展菜单一、列表式菜单列表式菜单设计这个从网站到手机APP上都很常用的，遵循由上至下的阅读习惯方式，所以使用起来用户不会觉得困难。另外我们可以通过漂亮的配色、图标组合来设计，使得菜单更多加美观。
2017年5个网页设计可能会成为主流趋势
几何图案与全屏背景图结合、灰色的高级用法、色彩叠加… 这篇总结的这5个网页设计趋势，其实在年底就初现端倪，所以2017年大面积运用几乎势在必行，想不落人后记得打开阅读哟。01. 几何图案与全屏背景图相结合全屏背景图的设计，是最受欢迎的背景风格之一，利用大图将用户的视线集中是最合适不过的了。在多数情况下，利用全尺寸图像作为主页的背景，文字和导航菜单，CTA按钮或信息等会布置在图像的顶部。如果想实现更有趣的视觉效果，我们可以在图上使用重叠几何图案的技术。设计师可以添加各种各样简单的样式和形状。做好这项工作，就要记住目的是利用几何图案。视线集中的几何图案重叠的部分，如果能促使用户进行特定的行为就更好了。在黑色或黑暗系等沉重的背景之中加上颜色，将会起到非常棒的引导视线的作用。02. 灰色的运用
5招技巧帮助您设计出优秀的网页设计
有很多刚入行的设计师，设计稿改了很多次，客户还是不满意、没感觉; 还有些设计师做了很多年设计，还一直在同一个LEVEL上打转。有些人觉得可能自己不适合做设计，有些人觉得自己设计的很不错，只是客户没有欣赏眼光。到底怎么做才能让客户满意?设计老司机从以下五大方面帮你找到久违的设计 “快感”：为什么设计?在网站建设的前期准备阶段，就应该想清楚到底想让用户在网站上做些什么，得到什么?目标的确立不仅需要根据客户的主观意愿，更需要严谨的市场调研与分析，才能保证目标的科学性和准确性，做出的设计才能真的为客户带来价值。客户自身条件的分析，如公司概况、市场优势、可以利用网站提升哪些竞争力; 相关行业的市场是怎样的，有什么样的特点，以及在互联网上开展业务的可能性和前景;网站主要竞争者分析，了解竞争对手网站情况及其网站的功能、盈利模式、用户黏度、发展经营状况等，吸取他们的长处，并找出自己的优势;网站目标用户的确定，明确网站主要面向的访问群体，通过主要目标市场、潜在目标市场、以及其他可能受益于企业产品或服务的人群进行分析，即可对网站的目标受众有个基本的定位。线框图是设计的框架网站的功能和信息架构是网站的核心，一个网站不是单纯的让访问者去感受视觉上的美观，美观永远是第二位的，而功能性却是第一位的。一个企业网站是为了展示企业的形象、售卖企业的产品和服务;一个门户网站是为了更好的提供信息内容，一个个人博客是为了分享个人的观点，树立个人品牌等等，保证了这些功能更好的实现了之后才应该去考虑视觉上是否美观的问题。想要让整个设计项目结构化，线框图是它最早也是最重要的组成部分。线框图向整个团队展示了布局、导航、视觉层次、信息架构和内容优先级等关键的问题，它勾勒出了整个项目的基本轮廓，呈现了关键信息。
8个你需要知道的2017年UI设计流行趋势
2017年马上就到了，今天�心病狂十六夜� 这篇译文总结了明年可能会流行的8个设计趋势，一起来收。UI界面的设计趋势是不断变化的。随着时间的推移也在不断的成长，进化。虽然有些趋势还有待检验，但我们还是需要不断的去学习新的技术。优秀的UI设计是包含了简洁和易用性这两点。这也是每个设计师的职责。但是相反的，如果用户在使用时完全摸不着头脑，对UI设计来说就非常失败了。设计趋势变化的理由需要考虑各种各样的因素。例如2015年推动设计变化的原因是硬件的变化、移动终端的响应能力增强。在已经发布的众多应用中，有人气的功能将迅速转变为必需品。此外当今社会90%的年轻人，都在通过移动终端进行着基本操作。那么，让我们来一起看看2017年的设计流行趋势吧。目录隐藏菜单Touch ID的完全支配
帮你搞定长滚动网页的设计最佳实践
长滚动页面和无限滚动式的网页已经彻底流行开来了，甚至可以说它已经脱离趋势，成为了一种常规的设计，它们的流行并不是巧合。当用户向下滚动的时候页面的时候，所需要的内容与信息会自然的呈现出来，在此过程中通常不会涉及到额外的、多余的交互。长滚动式的页面有着如下的优势：·更为精简的导航·更容易呈现故事，拥有吸引用户的潜质·与移动端设备的良好兼容性长滚动页面的流行和移动端设备的广泛普及有着直接的因果关系：屏幕越小，相同内容所需要展现的页面就越长。移动端设备目前几乎全都是使用触摸屏，交互方式也是以触摸和手势为主。当然，长滚动式页面并非没有缺点，但是接下来的案例和最佳实践，将会帮你在设计长滚动页面的时候，尽量满足用户的期望。使用视觉线索通过视觉线索的暗示，让用户明白绝大多数的内容都位于首屏。
详细解析5个网页表单设计新规则
以前的表单经典原则是“越短越好”，不过随着技术发展，现在有些表单设计已经不适用了，想学到最新的表单设计方法，别错过这篇。每天我们都使用表单进行基本的网上操作。网上购物、注册邮箱、社交网络甚至参与讨论、描述美味的午餐等等都需要我们填好表单。不夸张地说，表单是数字信息分享的生命根基。然而多年以来，表单的体验鲜有提升，仅仅停留在功能足够好却达不到体验上的优秀。然而现在，在使用恰当技术的帮助下，我们可以设计出更快、更简单、更有成效的表单体验。欢迎关注点融设计中心DDC微信公众号：「微信ID：DR_DDC」 原文地址：点进进入在表单体验中一条经典的原则是“越短越好”。耗费用户更少的精力可以带来更高的转化率，这当然看起来符合逻辑，但是这条原则没有考虑到很多因素，比如应用场景，设计方式、表单体验的吸引力等等。举个例子，我发现一个被引用的次数远超其它的报告，它的测试成果被多篇文章和言说提及并被当做“真理”，而可怕的是这个研究成果其实是相当有局限性的。这个报告是Imaginary Landscape(一个开源的网络开发机构)近十年前的一次实验，实验中当表单从11个字段减少到4个字段，转化率增加了160%。但这只是一个页面，一次测试，两个变量得到的实验结果，假设他们进行了多组4个字段的实验，或者做10个字段与11个字段的表单作对比，4个与5个字段表单做对比，也会令实验更加值得信服。然而他们没有，这只能说明仅在这一个特定的情况下，确实减少表单64%的字段能使表格更容易填写。在Call To Action 2015的演讲上,来自Unbounce 的Michael Aagaard分享了类似的案例。以提高一个特定表单的商业转化率作为任务，他首先将表单的字段数从9削减到6，转化率下降了14%。深入研究后他发现，表单中那些被删除的字段构成了一个不太引人注目的体验，而这恰恰是最吸引用户的部分。在第二次实验，他调整了原始表单的组织结构和清晰度，并保持9个字段不变，转化率增加了19%。事实证明，短的表单不总是更好。所以如果不是通过简单的使表单更短，我们怎样用现代技术来设计最好的表单呢?让我们来考虑一些新原则：优先保证表单的可浏览性提供更易填写的表单格式给予恰当的输入限制
9个设计原则快速提高登录的用户体验
能做出酷炫效果的登录界面，却依然成为不了设计师，建议阅读可乐橙_ColaChan这篇译文，看看专业的设计师如何设计简单的登录界面。处理用户验证通常是事后诸葛亮，我们总指望它有用，但很少深入思考它。它应该足够简单，但事实是，无论对于用户还是运营产品的公司，都像是在自找麻烦。登录失败、忘记密码和冗长的交互。登录界面是你的应用中最常展示的界面之一。客观地说，75%的人都在登录时重置过密码，废弃了之前的密码。在企业内网登录中，忘记密码是帮助台每天处理的头号问题。通过清晰的表述和设计良好的流程，能极大的减少这些问题的数量。要提升用户验证的体验，降低服务成本，增加转化率，有几件事情要好好考虑。清晰说明规则△ 亚马逊和阿里速卖通的例子避免使用模糊的规则，表述清楚。不要等到错误验证来警告用户，密码至少要6位。强调密码的最短限制是有意义的，但也不要太复杂。有实际意义的密码，比随机组合的字符更有用。显示密码