推荐阅读

详细解析如何有效的向用户传递信息
在设计产品的过程中,产品经理和设计师的职责之一,是有效的向用户传递信息。在互联网产品中,操作引导、结果反馈、界面呈现的元素、大小、颜色等,都可以看作是信息的传递。高效准确的信息传递,是良好用户体验的基础。下面总结了几种简单的进行有效信息传递的原则:一、使用用户容易理解的语言信息的传递过程就像是一种对话,对话就需要语言。语言的形式可能是文字、图片,也可能是闪烁、变色、大小对比等,但不论采用什么形式的“语言”,一个基本的要求是,确保用户能够“听”得懂。例如,应该尽量避免使用用户不理解的专业术语、含义不明确的符号、表意不准确的动画等。GOOD DESIGN:图标图标是一种经典的传递信息的方式,好的图标设计可以让用户一眼就知道它后面对应的程序是干什么用的,生动并且直观。所以现在流行的系统中,很多都采用了图标的方式来标识程序。上图所示,即便没有文字,我们也能猜到这些图标代表着什么功能。GOOD DESIGN:iBooks的列表界面在iBooks中,显示图书列表的界面并没有做成常规的list的感觉,而是使用了拟物的方式,以一个书架的形象呈现,书架上摆满了用户已经下载的图书封面,就像是你真的面对着一个书架,上面摆满了图书一样。这样的话,用户很容易意识到,只要把书“拿下来”,就可以阅读了。

PS制作卡通鲜花文字
最终效果图 1.新建一个200PX * 200PX 的文件,背景填充白色 ,然后选择文字工具输入"F"文字的颜色为浅绿色(色值:DBF5AD),字体请选择比较宽,粗的字体本教程选择“Arial Black”,文字大小为: 200 pt 如图1。然后删格化图层,用橡皮工具选取适当的大小把文字的各个边角擦出弧度参照图2 < 图1 > < 图2> 2.调出文字的选区,然后新建一个图层,填充深绿色数值:2F8B48,如图3,先不要取消选区,按 Ctrl + Alt + D 羽化数值为:7,再选择菜单: 选择 > 修改 > 收缩 数值也为7,然后按 Delete 键删除选区部分如图4 < 图3> < 图4> 3.再调出文字的选区,在背景图层上面新建一层,选择菜单: 选择 > 修改 > 扩展 数值为3,然后填充浅绿色颜色数值为:A8CFAF 效果如图5 < 图5> 4.在最上面的图层上新建一个图层,按 Ctrl + "+" 把图层适当放大,在文字的下部位置用钢笔工具勾出叶子,然后调出选区填充深绿色颜色数值:2B8E00,效果如图9,再按 Ctrl + Alt + D 羽化,数值为2,再选择菜单: 选择 > 修改 > 收缩 数值也为1,填充浅绿色,颜色数值为:B4FF92,效果如图10 < 图6> < 图7> < 图8> < 图9> < 图10> 5.新建一层,把图层再适当的放大,在空白的图层区域,用椭圆选取工具绘制椭圆,然后用渐变工具绘制渐变如图11,取消选区,按 Ctrl + J 复制图层,选择菜单 :编辑 > 变换 > 垂直翻转 ,再适当哪个的移到之前的椭圆图形下面如图12,同样的方法复制出如图13的四个椭圆小花瓣。 < 图11> < 图12> < 图13> 6.适当的把花瓣旋转一下得到图14的图形,然后把四个小花瓣合并到一个图层,按 Ctrl + J 再复制一层,按Ctrl + T变换45度得到图16所示的图形。 < 图14> < 图15> < 图16> 7.在最上面的图层新建一个图层,用椭圆选区工具绘制一个小正圆再填充粉红色数值:FFC8D4,如图17,选择菜单:选择 > 修改 > 收缩 数值也为2, 然后把前景颜色设置为橙色数值:EA682F,背景颜色设置为淡橙色数值:FF965B,选择菜单:滤镜 > 杂色 > 添加杂色 数量为 17% 效果如图18 < 图17> < 图18> 8.在花瓣的图层上面新建一个图层,用椭圆选取工具绘制正圆如图19,然后填充黄色,在把选区适当的移动位置,按Delete 得到图21所示的图形,取消选区按 Ctrl + J 复制一份,选择菜单 :编辑 > 变换 > 垂直翻转 移到下部位置如图22 ,把这两个图层合并,然后复制变换角度得到图24的效果。合并这些鲜花的图层,调出他的选区,在他的下面新建一个图层 选择菜单: 选择 > 修改 > 扩展 数值为2 填充颜色:E68D00。合并这两个图层. < 图19> < 图20> < 图21> < 图22> < 图23> < 图24> 9.把做好的鲜花移到文字的上面,用同样的方法绘制其他颜色的鲜花,再不断的复制改变大小,最后完成最终效果。如果嫌花朵制作工程复杂,请下载适当的笔刷,和图案。 < 图25> < 图26> < 图27>

秋日私语 Photoshop绘缤纷水晶枫叶
1、在Photoshop中将前景色定义为绿色(#00ff00),选用“自定形状工具”,画出一个枫叶的形状,起名为“枫叶”。 2、点击“图层”面板下方的“添加图层样式”按钮,选择“内发光”一项。 3、设置和效果。为了大家观看方便,我把背景色换成了黑色。使用“内发光”是为了使风叶的边缘的颜色更自然一些。 5、选择钢笔工具,把枫叶的主经络钩出来。 6、将路径转为选区,填充深绿色(比浅绿深的绿色就是深绿,哈哈 开玩笑。其实这里的颜色并不重,要到后面会调整的)。 接着将此层复制出来一层,将两个图层的“混合模式”都设置为“柔光”。

给爱旅行摄影女孩的忠告
我写这篇文章是受到世界旅行者、国家地理专栏作者Daisann McLane接受的一篇访谈的启发,她的采访主题是“旅行对于女人们来说难不难?”McLane小姐向正在旅行的女性们提出了一些忠告,尽管她的文章是从绝大多数旅行者的角度出发的,我的这篇文章面向的是那些既想旅行又恰恰想成为摄影师的女性朋友。所以如果你是那些现正在考虑采取行动到陌生国度去旅行的女 摄影师,我希望你能从文中有所收获并最终激发你去实现自己的梦想。 那么,当一个人是女性的时候,旅行对她来说有所困难呢?从某种程度上来说,是的。但是你可以让旅行变得更简单,只要你采取一定的防范措施,并且有所计划。 作者作品 泰国 一个女人孤独的旅行不一定是无所畏惧的。相反,独自一人在一个谁也不认识的陌生国家的时候我会感到害怕和脆弱,想想吧,在凌晨四点(甚至更早)或是晚上十点(或是更晚),你拿着你那昂贵的器材到处乱转。我觉得恐惧,可我疯狂到愿意去做这些事情,为啥?因为我爱摄影,我甘愿为我所做的奉献。我还知道如果我不能从让我舒适安逸的国度之外去发掘(美好),在别的地方那就更不可能了。 像其他严肃的摄影师一样,不管是女性和男性,我的目标是拍摄伟大的照片。问题是如果你想拍这样的照片,你需要完美的光线。不幸的是,风光摄影或是城市摄影里那些最好的光线来自于一天之中最让人(女人)难受的时间(作者通常在黎明傍晚时拍摄)。 威尼斯 意大利 我并不是一直一个人旅行,但是我已经这样旅行过很多次了,当我独自一人时,我就要自己保护自己。我喜欢在水边和桥上去拍摄,这种情况下我经常越过肩膀回头看,以防一些疯子把我推下去。我并不认为我是偏执狂,因为我要照顾自己以便让我安全回家。 当然,其他黑暗或是遥远的地点,或者为了一个更好的有利位置,你必须要攀登或者跋涉下到一个小山丘上,这种情况下意味着潜在的危险。如果男摄影师担心这些事情(我相信他们一定会的),我确信女人们要考虑的事会更多。 那么怎样才能让你远离危险呢? 伦敦塔桥 英国
最新发布

CSS3动画运用得不错的网页设计作品
最初我们是使用Table来布局网页,动画就用FLASH代替,而现在这些都要过时了,网站的排版布局使用DIV+CSS,动画和其它交互使用CSS3、HTML5和JavaScript结合来实现,这些都是未来发现的趋势,而我们也必须跟着这些趋势走。CSS3是一门样式语言,学习它并不是很困难,但怎么去使用它却有很大的学问哦,今天我们整理30个CSS3动画运用得不错的网站,这些作品中有很多通过样式或是结合jQuery脚本来实现交互,十分有新鲜感觉,下面大家一起来欣赏这些优秀的网页设计作品吧。来自巴西的创意设计工作室官方网站。 浏览网站网站中间的圆圈是可以左右拖动的哦,拖动的同时人物会自动换装… 浏览网站这是一家控股及投资类公司网站。 浏览网站 浏览网站组织活动类网站。 浏览网站

详细解析百货大类页网页如何打动用户
项目背景:随着易迅用户基数不断扩大,由于易迅用户本身对百货类商品有需求,且该类商品的客单价低、购买频次高、能够快速增加易迅的单量并能够拉新客户,基于此,百货类商品为易迅扩充品类打响了头阵。借着扩充品类的机会,参与了其中一些项目,在此就百货大类页的设计思考稍作总结。一、大类中间页的机会小瓶儿:首先从中间页说起,互联网商品信息的爆炸发展导致用户从海量的商品中找到自己的需要变得十分困难,从人类理解事物的有效方式来说,按照一定的逻辑归类才是靠谱的做法,大类页应运而生。这种“类”包含的不仅仅是商品本身的属性(比如个人护理>男士护理>剃须等),还包括用户特征(如母性驱动购买宝宝商品)、行为特征(喜欢新的东西)、产品本身特征(如除湿功效)甚至是商业赋予它的属性(热捧的苹果等)。相比较易迅原有的数码家电类商品而言,百货类商品的类别和数量非常庞杂,对于用户而言,要买一样东西的成本很低,但是能够想要到易迅来买百货商品并转化为老用户甚至活跃用户,并不是一件容易的事。目前百货类的商品更多零散地分布在页面的非核心位置,用户更多是通过分类去找,而大类页可以承载不同用户购买商品的不同需求,具有针对性的内容搭建有利于形成用户回访。对于运营而言,需要固化页面承载流量并且分配到给重点单品、搜索、活动、专题等等,大类页可以通过丰富购物线索使用户分流到下一流程。对于平台而言,品类的扩充势必会带来女性用户的增长,她们在购买时的非理性因素意味着在挑选时没有那么强的目的性,并且容易受推荐性内容、口碑性内容、新鲜内容的影响,这类人在挑选时更加需要一些商品属性以外的东西来帮助做决策,通过常规品类细分和不断搜索已经不能够满足她们的需求,那么大类页可以提供这类用户一个稳定的、可以通过多元化线索找到商品的地方。二、百货类商品用户类型百货类商品跟日常生活、跟自身的身体需要和心理需要紧密联系。通过挖掘用户对于不同品类的不同诉求以及诉求的不同程度,可以看到,会产生逛大类页需求的用户主要集中在基于某种身体需求(清洁皮肤、清洁环境、饮食……)或者某种心理需求(学习、扩充视野、尝鲜……)上的目标不太明确、以及跟风从众的人群上。比如,才烫了头发,不想去洗发店修护太贵,就打算在网上找找好一点的洗发水,具有修护作用的;再比如,换季了,看看有啥新出的护肤品刚好可以用的。

40款新鲜的WEB开发人员开发框架和工具
对于现在很多WEB开发人员来说,项目的效率就是一切,因为时间就是金钱。很多人都不在自己的模式里捣鼓研究了,而是用各种流行的框架和第三方平台去让项目更快的推进。今天我们要分享给大家的就是一些新鲜的WEB框架和开发工具。这些工具也是一些GEEK长时间的总结研究出的一套体系。用框架的好处就在于,只要你是正确的架构就能不用担心太多自身的漏洞和BUG。可以避免走很多弯路。好好研究使用起来吧。会让你事半功倍的!PhalconPhalcon is a web framework delivered as a C extension providing high performance and lower resource consumption.YARDYARD is the only Ruby documentation tool that supports storing metadata alongside your documentation. This metadata can be used to create consistent documentation in any format you wish. YARD also comes with a powerful templating system to quickly modify existing templates. And for the simple case, you can even add custom metadata to your docs with nothing but the command-line.KoalaKoala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.

韩国电商网站与国内电商的差异化分析
关于视觉理论分析的文章有很多,我们从目标与设计关系来讨论一些东西吧。shopping.naver.com是目前屈指可数的购物站典范之一,也有很多人对其进行了剖析,今天,我们来尝试挖掘一下这个站体验设计与目标呼应上的关系。当然也有一部分是对产品的分析。看看到底是怎么好的,这次的分析过程、方向、方式,希望能帮助一些朋友在参考其他优秀案例时择优去糟。需求假设NAVER的购物站与国内电商比起来,对商品的展示过程,用户的使用过程大体相同,寻找目标>梳理对比>展开详细>购买行为…(NAVER以大搜索业务为核心,针对电商,购买行为应该是在第三方平台进行的,基于这个不同,我们仅仅讨论购买行为之前的一些层面)视觉美观性,舒适性,合理性,信任度横向对比其他国内的电商站,你不难发现,视觉美观性上他们之间大概差了两个级别,就算有区域性审美特点的原因,大部分人也会觉得NAVER的购物站更美观,更舒适,在这点上,NAVER的设计师已经将设计价值更大化。

10个人人必知的网页设计术语分享
想要获得快速成长,我们就必须要知道一些网页设计的术语。和众多其他行业的发展一样,网页设计刚开始还处于起步阶段,但是到现在它已经有太多的术语缩写,有一些简单的技术和理念是必须懂的。今天的环境相比过去已经是一百倍的复杂,因为我们在网络上使用工具和框架,语言和库的开发使得一切进步飞快。设计师 —— 即使是专业的网页设计师,也必须努力保持对所有不同的专业术语和技术的理解,所以在这里我们给出了10个最重要的网页设计方面的术语,每个人都应该有起码的了解。(HTML表示超文本标记语言,而HTML5是最新版本)HTMLHTML代表超文本标记语言,而且是web语言。简而言之,HTML为网页设计师提供了一种方式,告诉浏览器如何处理一个特定的内容。HTML包含许多不同的标签,允许设计师通过语义标记使段落被识别为浏览器文本,而且允许图像输入等。CSS

40个非常优秀的网页界面设计分享
一个良好的用户界面应具有高转换率,并且易于使用。但要用户体验良好并不容易做到,下面我们整理了40个良好用户界面Tips,希望能对你有帮助。单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮。给用户一份精美小礼品这样的友好举动再好不过了。具体来讲,送出礼品也是之有效的获得客户忠诚度的战术,这是建立在人们互惠准则上的。而这样做所带来的好处也是显而易见的,会让你在往后的活动进展(不管是推销,产品更新还是再次搞活动)中更加顺利。在整个产品开发期间我们会有意无意地创建很多模块,版面或者元素,而它们的功能可能有些是重叠的。此种情况表明界面已经过度设计了。时刻警惕这些冗余的功能模块,它无用且降低了电脑性能。此外,界面上模块越多,用户的学习成本就越大。所以请考虑重构你的界面使它足够精简。在获得项目机会或提高项目转化率时客户的好评是一种极为有效的手段。当潜在客户看到其他人对你的服务给予好评时,项目机会会大增。所以试着提供一些含金量高的证据证明这些好评是真实可信的。多次重复主旨口号这种方法适用于界面很长或者分页的情况。首先你肯定不想满屏刷出相同的信息,这样会让人生厌。但当页面足够长的时候这些重复就显示自然多了并且也不显得拥挤。所在在页面顶部放一个按钮然后在页面底部再适当放个突出的按钮的做法没有什么不妥。这样当用户到达页面底部在思考接下来该做什么的时候,你提供的按钮就可以获得一个潜在的合同或者即使用户不需要你的服务这个按钮也可以起到过滤的作用。

精选国外功能强大的WordPress企业主题
关于买模板来做网站,听起来有点贬义,觉得模板就是模板,千篇一律,其实这是因为你找不到好的而已,不信?你看看今天设计达人网为你整理的功能强大的WordPress主题,这些主题采用了流行的网页布局以及前端技术制作而成,不怕过时而且质量靠谱。主要功能特色:如此强大的模板,你说是不是心动呢?我是设计师,我只要原创,没关系,这些主题除了设计美观外,还包含有很多创新的交互设计给你学习参考,我想它会给你带来很多好的创造灵感哦!这个wp主题可以用视觉来做网页的背景,是不是很有新鲜感呢?当然在使用的时候注意优化你的视频。在线演示 主题下载网站整体设计简约,多种网页配色方案给用户选择,含多语言功能。在线演示 主题下载这个WordPress主题适用于图像展示,比如展示设计师作品、摄影师的照片等等有很好的视觉效果。

如何在响应式网页中安置图片及视频
响应式网页设计,是一种正在流行的网页开发思想,它是利用灵活可变的栅格系统,令网页的显示模式可以根据访问设备的屏幕尺寸规格而进行自适应。预计2015年的时候,移动端的用户数量将会从目前的8亿,增长到19亿,而这也意味着目前我们为桌面浏览器而设计的网页,将会在他们的手机和平板上呈现出非常糟糕的使用体验。但是随着实际应用状况的改变,响应式网页设计还是会出现一系列复杂的并发症。本文余下的部分,就是详细阐述如何在响应式网页中安置和处理多媒体元素,诸如图片和视频,最终的目的是帮你做出一个靠谱的网站,能让这些元素无缝地在各种手持设备上加载运行,提升用户体验。响应式网页设计中的图片处理先说说响应式图片的处理方法。在响应式网页设计中,图片处理的问题或多或少地和传统网页中的导航栏设计有相似之处。随着新的移动设备的普及,更高像素密度的屏幕使得网页的任何一个瑕疵都显得无比明显,因此,图片处理的核心问题在于如何确保网站(尤其是图片)的各个方面都能尽可能灵活,并且确保每个像素不会在高分屏下模糊。图片显示的问题首先,当网页对设备响应时,并不存特定的图片发布标准。并且针对这一问题,有大量的可选方案供你选择。不过,这个时候,问题出现了:3G模式下,在视网膜屏幕下的移动设备上图像应该如何处理。在网速较差的情况下,图片的尺寸大小是否应该自动优化(降低)?这就是所谓“美术设计”的问题。网站提供的图片在不同屏幕的设备上都能够显示,还是远远不够的。小屏幕设备的用户可能完全看不清图片的细节,那么,就应该在“能正常显示”的基础上,为这块小屏幕单*剪一个版本,让用户看清细节。有人提出,开发者应该将所有不同尺寸大小比例的图片都预先上传到网站页面中,并且设置好CSS与媒体查询功能,将过大或过小的图片都隐藏起来,让浏览器就下载像素完全匹配的图像。然而,实际状况并非如此,浏览器在加载CSS类之前,就已经将所有的相关图片都下载下来,这使得网页更加臃肿,加载时间更长。图片问题可能的解决方案在继续探讨之前,先明确一点:让每块屏幕都完美显示图片的解决方案是不存在的。可是我们能够不断探索可行性更高的方案,尽可能地提高精度,以下是我们为响应式网页的图像问题,找到的可能的解决方案:Bootstrap

2014人气网站界面设计PSD免费素材
网站模板一直很流行,因为它可能帮助一些企业或用户快速搭建一个专业的网站出来,模板听起来有点不舒服,也许你见太多山寨作品了吧。在设计达人网这里你可以看到很多专业设计师制作的作品,即使是模板也会很漂亮。对于没设计能力或者想投入更少资金来建站,那么选择模板是最好的了,比如购买高级版的WordPress主题或使用免费HTML模板都可以。今天我们主要分享PSD格式的模板,界面设计不错,就算你不用也可以参考参考。页面布局友好的,时间线的设计很漂亮,用来做介绍自己的个人主页是不错的选择。进入下载页漂亮的作品集网站PSD源文件。进入下载页这个页面的设计比较简约,喜欢简单的用户可以用它。

淘宝设计师经验分享之APP的栅格试验
这里专门说一下关于WAP App的栅格设计。以下相关都是基于一淘H5和一淘App总结得出。先介绍三个名词:Wap App;Native App;Hybrid App(融合体,H5页面嵌套在Native中),之所以说这三个,是因为它们相互之间的联系在某种程度上制约了Wap App 的栅格设计。下面详细说下栅格试验。Phone栅格和PC栅格,本质上没有区别,一样的计算方式,无外乎屏幕大小的差别,但这屏幕大小,就有很多细节需要结合手机用户习惯来判断和取舍。我们试验的Phone栅格都是流体栅格,简单说,就是不定义具体尺寸,而是屏幕占比。说到屏幕占比,我们需要设定基准屏幕(这个可根据某些具体数据确定,比如我的目标用户群使用的手机屏幕尺寸占比最多的是1136*640,即可定位基准屏幕),这里假定基准屏幕是960*640 。通常栅格的计算公式 (m+a)*n-a=640-2b (m 栅格宽;a 槽宽;b 留白宽;n栅格个数)试验 1m=40 n=12 a=10 b=25(我们通常定义栅格数目n是2,3,4,6的整数倍,12栅格算是最简单的栅格结构)。试验1的栅格是沿袭PC的思想,但在后来应用到越来越多的页面时,这种栅格做2,3,4,6等分都很OK,但不做等分时,灵活性就很差,也算是一个致命的缺点,对于视觉设计师来说有很大的局限性。所以不建议在手机上使用12栅格。