推荐阅读
绘制金属质感噪声分贝检测仪图标的PS教程
本教程主要使用Photoshop绘制金属质感的分贝检测仪图标，重点依然是图层样式的运用，而且会多次用到布尔运算，这是PS课程中特别重要的一个知识点，不熟悉的同学建议来练个手。先看看效果图我们从背景的创建开始，我用的尺寸是1000*800像素。创建一个“渐变填充”调整层，设置如下：画一个600*600像素的圆，设置填充为0，并添加一个斜面和浮雕。设置前景色为#312f35，利用布尔运算，画出下图中的这个圆环。这个不多赘述，不懂的可以百度下。
AutoCAD 2007 入门教程-隐藏三维面的边
在前面我们介绍了线架模型的绘制方法，在这里将要介绍表面模型和实体模型的绘制方法。表面模型用面描述三维对象，它不仅定义了三维对象的边界，而且还定义了表 面即具有面的特征。实体模型不仅具有线和面的特征，而且还具有体的特征，各实体对象间可以进行各种布尔运算操作，从而创建复杂的三维实体图形。 隐藏边 选择 “ 绘图 ” | “ 建模 ” | “ 网格 ” | “ 边 ” 命令 (EDGE) ，可以修改三维面的边的可见性。 查看全套"AutoCAD 2007 入门教程">>>>>
活用Firework4制作下拉菜单
Firework4的一个新增加的功能就是能轻易地制作下拉菜单。下拉菜单是目前比较热门的一种网页交互方式之一。仿Windows界面的下拉菜单非常流行。但是由于制作菜单需要懂得一定的javascript语言或者操作步骤比较麻烦。因此在一段时间内还很少有人制作这样的东东。现在有了Fireworks就简单了。 闲话休提，言归正传。新版本的firework4.0，在界面上，跟firework3.0没有多大区别。打开firework4，新建一个文档，（记住页面大少要象素800×600）你利用一些基本作图技术，制作出几个按钮。如图1，我就搞了这样几个按钮。 接着点击左边工具栏slice tool(小刀工具)，将几个按钮割开。如图2：右击“我的历程”按钮，选取add pop-up Menu选项；然后右击“我的历程”，选择“pop-up memu”于是调跳出一个新窗口，如图3： 在文字栏中填上你菜单内容，连接在栏中填入你所要连接的页面，之后按加号添加。按类似的方法，再添加几个，在本文例子中填入四栏！之后，按next键继续。如图4 在此，让我详细地介绍一下以上窗口的内容。Cell栏：那是菜单选项的格式，html是html文本格式，而image是指图片格式。选择不同，会有不同的效果。在此，本人较赞成用图片格式，因为那看起来较漂亮些。下面的是字体和字号的选择，这随你喜欢啦！up state是指鼠标放到按钮时的字体设置和菜单格的设置，overstate是指鼠标放到菜单栏时字体的设置和菜单格的设置。你可以选择一种你喜欢的格式。Preview是预览栏，因为该软件对中文支持不好，所以显示为不正确，你可以不管它，因为导出时是正常的。之后，按“finish”搞定。完成这些设置后，按“文件”菜单的eXPort选项，导出html文件，这样你可以预览啦！哗，是不是很酷呢！如图5
最新发布
详细解析网页重构中页面细节处理心得
一个页面的细节，从重构的角度去看，页面的精细度，代码的可读性、扩展性，为下游服务的代码注释，交互接口样式的书写，代码的压缩，图片的优化等都可以归为细节处理，我的理解是，刚才提到的细节处理是每个重构工程师都应该具备的基本技能，不能算是真正意义上的细节，好的细节处理应该是从用户出发，应该是发自内心对用户的一种关怀。下面有两个小例，都是我们做页面时常见的板块，如果我们细心处理一下，也许会让用户会倍感贴心。轮播图如上图，轮播图上切换按钮(如上图小方块按钮)是用户对轮播图进行交互的重要入操作点，重要程度毋庸置疑，在分析设计稿的时候发现，按钮的可点击区域太小了，只有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种基本的颜色组成。包含三原色，即红、黄、蓝，原色混合产生了二次色，即橙、绿、紫，二次色混合产生了三次色。三原色是色相环中所有颜色的“父母”。在色相环中只有这三种颜色不是由其它颜色混合而成，在色环中的位置是平均分布的。二、色彩情感每个人有自己所喜爱的音乐，同样每个人也有自己钟爱的色彩，每一种颜色都有一种寓意。色彩做为第一视觉语言，当人类初接触到一个事物产生第一印象时，色彩的吸引力往往高于其造型所产生的印象。适当的应用色彩能够增强画面感染力，提升产品印象与感觉，而不同的色彩常常左右了产品最终给人的感受。色彩具有象征性，而且色彩的象征性具有区域性，民族性。说到象征我们脑海里首先会蹦出：红玫瑰象征炽热的爱情，黄色总是与富丽，权利地位相连，白色纯洁，蓝色优雅平静，黑色肃穆，邪恶等。因为颜色具有象征性，所以我们要分场合着装，送礼等。