推荐阅读
电商设计师总结的8条产品设计趋势分析
这5年时间，我呆过已经倒闭了的小电商平台，做过腾讯电商的外包，也真正近距离参与过京东大大小小的各种活动设计，亲眼目睹了天猫双11成交额从2011年的52亿一直增长到2015年的912亿，直到现在，我把我的部分关于电商的思考和观察总结写成文章近百篇分享给大家。写在前面2011年那会儿，我还是杭州某互联网公司的一名ui设计师，那年双11我亲眼目睹了我们整层办公楼500多人都在买买买的壮观场面，不过那时候的我对电商没有任何概念，甚至对网购都不熟悉;2012年年初，我阴差阳错地接触到了电商设计，爱上电商设计并一直坚持到现在，已近5年时间。这5年时间，我呆过已经倒闭了的小电商平台，做过腾讯电商的外包，也真正近距离参与过京东大大小小的各种活动设计，亲眼目睹了天猫双11成交额从2011年的52亿一直增长到2015年的912亿，直到现在我把我的部分关于电商的思考和观察总结写成文章近百篇分享给大家。这几年，电商的发展速度是惊人的，我觉得有必要对自己的观察和体会做一个小结，于是就有了这次的话题：“入行电商设计近5年，写文近百篇后，我给大家总结了这8条趋势分析和建议”。这篇文章也许对正在电商设计这条路上或即将迈入这条路的人有所启发，接下来我们直接进入正题：少数人会驱动多数人的行为和想法这个少数人是指什么人呢?指某一个行业领域里走在最前面的人，再或者是某一个圈子里最活跃的那一批人，毫不夸张地说，这些人的一举一动都会牵涉到其他人的发展方向，这种现象在炒股行业也许最为明显，知名企业或知名投资人的稍微一点动作就会对相关公司或行业的股价产生不小的影响。那么在设计圈里其实也是一样的道理，比如现在在设计圈很火的C4D，三维建模和渲染，虽然这个在工业设计领域是非常常见的一项技能，但是不知是被谁引入到了电商设计行业，然后大家开始纷纷效仿三维的效果。还有合成效果早几年前比较常见于创意互动广告界，一开始一些简单的合成效果也只是常见于一些比较追求炫技和非主流效果的店铺(因为那时候的效果都做的比较粗糙所以看起来有些俗气)，其实对于天猫或者京东这样的平台页面设计里是很少会用到这些效果的，因为这种效果对于动辄就是好几十个不同会场的平台活动来说，很难进行品牌视觉延伸，再一个就是合成玩的好需要很强的绘画功底和想象力，处理不好容易变得非常俗气。
CorelDRAW绘制日式卡通美女教程
在本节实例的学习中，将制作一幅具有日本卡通绘画风格的漫画。日式卡通中对人物的塑造具有很鲜明的特色，归纳性很强。在制作过程中可以很容易的抓住人物特征。整个画面用色鲜明，女孩飘动的头发与背景中舞动的枫叶，使画面充满了动感。如图1-89所示，为本实例的完成效果。图1-89 本实例完成效果1.4.1 技术提示为了节省篇幅，实例的背景图形和卡通女孩的轮廓图形，使用了导入的素材。实例的制作过程将重点讲述角色的绘制、润色、细节刻画等方面操作。如图1-90所示，为本实例的制作流程。图1-90 本实例制作流程1.4.1 制作步骤：刻画角色五官(1)启动CorelDRAW，新建一个空白文档，参照图1-91所示设置文档属性。
PS简单几步为照片增加对比度和层次感
原图效果1.磨皮:这个为什么第一步磨皮呢，个人习惯吧..呵呵。我习惯用Topaz 2. 复制一层，模式为滤色，不透明度视情况而定别太白了3.向下合并图层，然后选择图像-调整-可选颜色，先分析这张图，红色占大部分所以不用大范围地调整红色通道.参数设置如图2,效果对比如图3
PS烟雾笔刷应用：制作出逼真火焰效果
先看看效果图：下面是制作的步骤：1、新建一个文档，拉出一个径向渐变，颜色如图： 2、新建图层，将前景色设为跟火焰接近的颜色，选择一些烟雾笔刷，画出一团火焰。烟雾笔刷下载：http://www.86ps.com/Soft/ShowInfo.asp?InfoID=3753
最新发布
safari：webkit
支持CSS属性Safari和WebKit实施大子的CSS 2.1规格所界定的万维网联盟（ W3C ） ，以及部分的CSS 3规格。 。这个CSS属性本条划分的群体界定由W3C的CSS规格：1,webkit Box模型 CSS定义：-webkit-border-bottom-left-radius: radius; CSS定义：-webkit-border-top-left-radius: horizontal_radius vertical_radius; CSS定义：-webkit-border-radius:radius; CSS定义：-webkit-box-sizing: sizing_model; 边框常量值：border-box CSS定义：-webkit-box-sizing: sizing_model; 内容常量值：content-box CSS定义：-webkit-box-shadow: hoff voff blur color; CSS定义：-webkit-margin-bottom-collapse: collapse_behavior;常量值：collapse CSS定义：-webkit-margin-bottom-collapse: collapse_behavior;常量值：discard CSS定义：-webkit-margin-bottom-collapse: collapse_behavior;常量值：separate CSS定义：-webkit-margin-start: width; CSS定义：-webkit-padding-start: width; CSS定义:-webkit-border-image:url(borderimg.gif) 25 25 25 25 round round; CSS定义:-webkit-border-image:url(borderimg.gif) 25 25 25 25 stretch stretch;
IETester兼容win7
IETester兼容win7啦，http://www.my-debugbar.com/wiki/IETester/HomePageIETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.New in v0.5 : IETester now working on Windows 7 !This is an alpha release, so feel free to post comments/bugs on the IETester forum.Requirement : Windows 7, Windows Vista or Windows XP with IE7 (Windows XP/IE6 config has some problems and IE8 instance do not work under XP without IE7)Download IETester v0.3.5 (24MB)(IETester v0.3.5 zipped intaller for people unable to download .exe files due to proxy limitations)
优秀产品设计中的9点良好的用户体验设计
我们在研究网页的用户体验时，不因该仅仅局限与网页的范围，在很多优秀的产品和设计中都体现出许多好的用户体验设计，我们来看下以下的九点，他们都代表了一些出色用户体验方式，当然这些在网页设计中也是通用的。1.依赖第一印象：酒店了解这一点，因此，良好的酒店都会在酒店大堂提供微笑，在您的枕头准备巧克力和书面说明。2.发现和注重细节：apple公司通过对细节的努力考虑，并考虑的结果应用到他们产品的包装上，从而实现了差异化。结果就是他们的用户从ipod的包装拆起就开始拍照，记录哈。3.个性化和自定义的matter： 星巴克允许他们的顾客自主自定义coffee,任天堂和其他的一些游戏公司也允许用户自己创建游戏角色。Second life（第二人生–备注：一个游戏）公司拿走这一创意，并且把它作为一个新的标准满足用户需求并且主张用户的个性化。对于web开发者来说，有些事情也 是一样简单，比如在网站的欢迎词中使用用户的名字，会让用户有感觉更受欢迎，跟喜爱你的网站。4.(dripfeed your information)—这里可以理解为分类或者分级。我理解的意思就是信息不能一次大量的冲击波似的提供给用户那样用户会一下接受不了。最好就是有选择性和针对性的提供给用户，可以让用户自己操作细化选择自己需要的信息比如：Basecamp提供给用户根据video特征去任意选择video，雅虎网站也会用一些的lightbox（广告灯箱）形式去解析他们网页重新设计的一些特点。5.照顾世俗6.使他更充满乐趣：在一些文案或者操作的提示的时候，让用户感觉更亲切，更感兴趣的做法。比如Moo在他们发给客户的邮件中会这样说：hi，您好主人我是小MOO，我会按照您的指示管理。。。。
网页设计中的标点符号应用规范
网页中的标点符号经常会被很多人忽视，其实无论是英文还是中文网站，短句还是长句，标点符号的应用在一定程度上也影响着网站用户的体验。包括我们在设计页面时，不仅要注重网页的布局，颜色，设计等，另外对于文字的标点符号也要引起足够的重视，具体标点符号会起到什么作用在下文中我们一一解说：标点符号的作用标点符号大致来说有三种作用：表停顿；表语气；表词语的性质。1、表停顿，用来表明句子的结构。2、表语气。通常交谈的语气有三种：陈述预期，告诉别人一件事情；疑问预期，向别人提出一个问题；祈使预期，要别人做一件事情。这几种语气在交谈中用语调来表示，在书面上用标点符号表示。3、表词语的性质。某些词语加上某种标点，词语的性质就会发生变化。如“高兴”指的是一个形容词；而《高兴》就表示一部电影或书籍或文章的名字。中英文标点符号的差异1、汉语中某些英文中所没有的标点符号。a) 顿号（、），英文中分割居中的并列成分多用都好。b) 书名号（《》），英文中没有书名号，书名、报刊名用斜体或下划线表示。在英文中文章、诗歌、乐曲、电影、绘画等名称和一些专有名词也常用斜体表示。c) 间隔号（·），英文中需要间隔时多用逗号。
微软IE团队开始注重HTML 5规范
本周五微软表示，IE团队正在详细查看HTML 5规范现有草案，并汇总自己的意见。此举显示，微软开始认真对待这一新Web标准。HTML标准上一次正式更新发生在1999年。Google、苹果、Opera和Mozilla等公司一直在致力于创建新一代HTML标准，但微软的参与热情一直不高。不过，本周五IE开发经理艾德里安·巴特曼（Adrian Bateman ）表示，IE团队希望分享自己对HTML 5的看法，并参与制定该标准的讨论。巴特曼表示，尽管目前IE团队更多是提出问题，而非给出解决办法，但是公开讨论正是推动HTML 5发展的最佳方式。目前HTML 5规范草案中已经包含了许多重大改进功能，例如内置支持视频和音频，以及可以将数据存储于本地计算机的功能。在Google、苹果和Mozilla的最新版浏览器中，一直在宣传HTML 5功能，但是微软在这方面一直保持谨慎态度。
iframe自适应大小
页面域关系：主页面a.html所属域A：www.taobao.com被iframe的页面b.html所属域B：www.alimama.com,假设地址：http://www.alimama.com/b.html实现效果：A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小.问题本质:js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑，使js跨域访问受限,读取不到b.html的高度和宽度.解决方案:引入代理代理页面c.html与a.html所属相同域A，c.html是A域下提供好的中间代理页面，假设c.html的地址：www.taobao.com/c.html,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽度和高度.代码如下：
HTML网页制作教程:谨慎使用iframe标记
使用 iframe 可以轻易的调用其他网站的页面，但应谨慎使用。它比创建其他 DOM 元素（包括 style 和 script）多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示 iframe 是多么耗费性能：使用 iframe 的页面通常没有这么多 iframe，所以创建 DOM 的时间不用多虑。更值得关心的是 onload 事件和连接池。iframe 阻塞 onloadwindow 的 onload 事件尽快执行非常重要。这会让浏览器的载入进度指示器完成，用户依据此判断页面是否已经加载完。而 onload 事件延迟，会让用户感觉页面变慢。window 的 onload 事件直到它所包含的所有 iframe，以及所有 iframe 中的资源完全加载完成后才会触发。在 Safari 和 Chrome 中，用 javascritpt 动态的给 iframe 的 src 赋值可以避免这种阻塞行为。一个连接池对每个 web 服务器来说，浏览器只打开极少的几个连接数。老的浏览器，包括 IE 6/7 和 Firefox 2，每个主机只有2个连接。在新的浏览器中，连接数增加鸟。Safari 3+ 和 Opera 9+ 增至4个，Chrome 1+ 、IE 8 及 Firefox 3 增至6个。人们可能期望每个 iframe 有单独的连接池，但并非如此。在大多数浏览器中，连接被主页面和它的 iframe 所共享，这意味着有可能 iframe 中的资源占用了可用连接而阻塞了主页面的资源加载。如果 iframe 中的内容同等重要，或比主页面更重要，这很好。然而在通常情况下 iframe 中的内容对页面来说不太重要，iframe 占用连接数是不可取的。一个解决方案是在优先级更高的资源下载完成后再动态的给 iframe 的 src 赋值。美国的10大网站中有5个使用了 iframe。它们多数用来加载广告。这不是很合适，但可以理解，这是一个简便的在内容中插入广告的途径。在很多情况下，使用 iframe 是合理的。但要意识到这对你的页面的性能影响。非必要时，请谨慎使用。
HTML减肥:精简HTML标记制作网页
改善网站速度的一个很明显的方法是减小 HTML 文件的大小。有一些方法，比如：硬压缩（rigid compression），acupuncture-like ID 及改变 class 名。下面是一些我们总结的使 HTML 标记更精简的方法。HTML 4HTML （非XHTML），MIME type 为 text/html ，允许省略一些标签。通过 HTML 4 DTD，你可以省略以下标签（那些所谓可避免的元素，这里用删除线加以标记）</area> </base> <body> </body> </br> </col> </colgroup> </dd> </dt> <head> </head> </hr> <html> </html> </img> </input> </li> </link> </meta> </option> </p> </param> <tbody> </tbody> </td> </tfoot> </th> </thead> </tr> 比如，你的代码是<li>List item</li> 可以写为<li>List item 又比如段落要以</p> 结尾，你可以只写<p>My paragraph 甚至可以去掉 html，head，body（把这作为你的编码规范之前请确保这会令你舒服）。省略标签后 HTML 依然有效，同时减小了文件大小。对一般的页面来说，可以节省 5-20%。HTML 5
HTML 5解析规则
HTML 5推荐标准的成功之一是提供了一个详细的规范来说明如何解析HTML文档。一直以来，浏览器提供商都试图猜测和拷贝其它浏览器的实现，寄希望于他们的解析器在处理HTML文档的时候不产生过多的问题。尽管HTML 5中的一些部分目前争议比较大，关于解析的这部分得到了浏览器厂商的一致认同。一旦浏览器开始实现它，用户就可以从所带来的兼容性提升中获益。HTML 5解析规则的最初实现之一是为了支持HTML 5验证器而开发的。（如果你想测试这个验证器的话，http://ejohn.org应该是合法的HTML 5。）这个实现是用Java开发的，提供了SAX和DOM的接口，并且是开源的。有趣的是Henri Sivonen（验证器的作者）最近为Gecko开发了一个全新的HTML 5解析引擎，会在下一个版本的Firefox中使用。这个实现实际上是通过把Henri的HTML 5解析器的Java实现自动转换为C++来完成的。这个转换是自动完成的，所有的改动都会提交到Mozilla的代码库中。一般来说，当提到这种大规模的程序式的把Java代码库转换到C++的做法时，我会跳出来。不过结果非常的出人意料：页面加载的性能提升了3%。这些是建立在该代码库会提供的一连串的bug修正和一致性检查的基础上。你可以在Mozilla的bug库中查看该补丁的进度。如果你想尝试新的解析器的话（你不太可能发现很多明显的变化，但是任何寻找bug的努力都是值得感谢的。），下载一个Firefox的每日构建版本，打开about:config，把html5.enable设成true就可以了。如果想升级到HTML 5，那么现在就是时候。因为HTML 5是HTML 4和XHTML 1提供的功能的超集，所以升级是非常容易的。只需要把目前的(X)HTML文档类型声明换成HTML 5文档类型就可以了。
IE 下的只读 innerHTML
今天做东西遇到一个问题，我试图动态为一个表格添加多行数据，先定义了一个table：1 2 3 4 5 6 <table> <thead> </thead> <tbody id="filelist"> </tbody> </table> 然后在JavaScript 中这样操作：1 2 3 4 5 for(var i in entries){ ... var filetable = document.getElementById('filelist'); filetable.innerHTML += '<tr><td>111</td><td>222</td></tr>'; } 在FireFox 下这么干是没有问题的，但是放到 IE 下面就死活不行了，问了下同事+搜索了一下，发现在 IE 下 COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 这些元素的 innerHTML 属性都是只读的，不能直接操作。但是也不是没有解决办法，TD 的innerHTML 还是可以操作的，上面的代码可以这样修改：1 2 3 4 5 6 7 8 9 10 11 12 for(var i in entries){ ... var filetable = document.getElementById('filelist'); var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = '111'; var td2 = document.createElement('td'); td2.innerHTML = '222'; tr.appendChild(td1); tr.appendChild(td2); filetable.appendChild(tr); } 可以先使用 DOM 的 createElement 方法创建 tr 和 td，然后对 td 的 innerHTML 进行相应操作，最后用 appendChild 方法把创建的元素添加到 DOM 树中。这样在 IE 下就可以正常运行了。需要注意的是，如果你的 table 没有 tbody，而是这样：1 <table id="filelist"></table> 这个时候就不能对 table 直接使用 appendChild 方法了，因为IE6 下 table 元素是不支持 appendChild 方法的(IE8 貌似已经支持了)。网上也有人提出用 insertRow() 等方法来做，不过这个方法对不同浏览器的兼容也是有问题的（在FireFox 下就需要使用 insertRow(-1) ），所以就没用。BTW，虽然之前也有意识地看了不少 JS 的资料，但还是实践出真知啊，现在刚开始手忙脚乱的，学习淡定ING