对于首屏估计大家都会关注，但设计稿发到不同的人 由于分辨率不同，体验效果其实也不同

正好内部在做新的设计稿也推荐给设计师看了一下 之前注意首屏并没有通过这样详细的统计分析来获得首屏高度

根据内部统计系统中的操作系统、浏览器分布和屏幕分辨率等数据，结合浏览器状态栏、任务栏等高度进行分析：

得出两条首屏线，分别为 580 和 710，对应不同的分辨率。

==

C 再从实际用户的角度出发，在某应用布点进行用户数据的收集，分析用户实际的分辨率和浏览器可见区域：

1. 分辨率

1) 1024×768, 1440×900, 1366×768, 1280×800 仍占了绝大多数
2) 分辨率总类非常多，除上面列出的之外，other 里包含了几十种分辨率
3) 800×600，1024×600 等 600 高度系列的已逐渐推出舞台

2. 用户可见区域高度

具体数据举例：

测试用户总数量为 261645)

1) viewport 高度低于等于 580 的有 116786 个人，占 44.64％
2) viewport 高度低于等于 720 的有 216227 个人，占 82.64％
3) viewport 高度低于等于 800 的有 241420 个人，占 92.27％
4) viewport 高度低于等于 900 的有 259174 个人，占 99.06％

==

接着，D 根据 C 的数据，生成浏览器可见区域的热区图

最后结论如下：

1. 根据 D 的热点图，可以看到如果首屏高于 600 像素会有很多用户看不完整。所以请设计师以 600 像素高为首屏进行设计。
2. 根据 C 的曲线图和 80/20 原则，首屏设为 710 像素可以照顾到 80% 的用户。所以前端开发可考虑把 710 像素视为首屏，对首屏的资源进行优先加载。

如下图：

怎么说呢，我估计是很多企业被逼的没有办法了，我也负责过一段时间设计师招聘，真的是人才难求

在互联网的泡沫下，不光是设计，基本上核心职位都是薪酬暴涨

很多刚刚毕业的学生也开始漫天要价，不知企业其实差的不是那点钱，而是真正能够胜任的人员

招聘市场永远是一大批人找不到工作，一大批公司招不到人才

精品学习网（北京）诚招WEB前端制作工程师

公司介绍：http://www.51edu.com/aboutus/

工作地点：北京海淀魏公村

投递信箱：liug@51edu.com

QQ:76373

导读：在视觉设计过程中，除了一些我们耳熟能详的软件以外，其实还有不少优秀的辅助工具能帮助我们解决实际学习和工作中的问题。这次，我便总结了部分这类型的辅助工具，与大家分享（自己能力有限，如有遗漏，敬请补充）。

————————————————————————————————

做为一名视觉设计师，又一次参与了广州ucd的活动。说实在，自己对这次的活动有点点小小的失望，可能是之前预告的内容与实际情况有些许出入吧。不过这次活动气氛倒是这几次以来最好的，可能mm来的比较多，大家都异常活跃的缘故吧。

几位嘉宾也做了自己精彩演讲，对于我这名已经在职场打滚的人而言无疑是实用之极。不过考虑到，这次到场的部分童鞋都还是在校学生，活动提到的部分内容可能对他们而言还是比较羞涩难懂的。同时，里面提高的部分工作技巧和工具，貌似对比较大型的网站才有实际操作的可能性。

而作为一名有一定资历的门户网站设计师，我也只是能对部分嘉宾提出的观点有较清晰的概念，不过这也不排除自己本身愚笨的可能性存在。那么，借写这篇博文的机会，也分享自己在平时视觉设计工作中一些常用到的部分辅助软件，这些辅助软件主要针对视觉设计师的工作范畴，常用的软件就不在此篇涉及的范围内了。

这里，简单的将这些视觉辅助工具分了个类别：分别是素材生成类，截图取色类，动画辅助类以及格式转换类。这些分类基本涵括了自己的网站视觉设计工作中，常用到的几个范畴了（如有更好的建议，欢迎各位补充～）

素材生成类

·在线生成矢量毛笔字 http://sf.kdd.cc/

在中国，毛笔字体字体是每个设计师应该学习的必修课，不过随着时代的发展，我们这方面的能力都退化了，而且字库里面的毛笔字显然也不能满足我们的视觉要求。这时候，可不试试这个快速毛笔字生成工具呢？内含十几款书法大家习作，相信总有一款适合你。

·在线位图转矢量文件 http://vectormagic.com/home

一般在学习和工作中，不免会碰到一大堆图片等着我们处理。特别是处理标志时，客户提供的标志基本上都是以图片为主，而且有时候由于图片过小，质量极差。这时候，将文件转换成矢量可能是我们首要处理的问题。当然，你也可以要求客户提供矢量标志素材（有时候客户只是销售人员，可能并不了解什么是矢量标志，沟通过程会比较麻烦）…也可以通过常用的设计工具完成这个转换过程。

不过从方便程度而言，我跟推崇这个在线转换的工具。

截图取色类

·Picpick

网页设计师平时工作免不了截取各种各样的图片。除了利用浏览器截取网页外，似乎还有很多东西需要我们收集起来。那么这款小巧的工具可能适合你，它可以执行截取全屏、活动窗口、控件、指定区域、手绘区域等操作。支持双显示器，内置多种输出模式。

同时别以为PicPick只能抓图，它还内置有图像编辑器，截图后可进行简单图像编辑。它提供一系列辅助工具，主要包括：取色器、调色板、放大镜、屏幕标尺、极座标和直坐标、白板等等，尤其对网页制作非常有帮助，可谓是网页设计师的全能工具箱。想具体了解请点击【详细】     

·QQ截图

别以为我写错了，其实qq截图是个强大的工具。除了带有简易的截图功能外，我最需要的还是其计算截取范围像素的功能。这能方便在写代码，迅速计算元素（div）与元素（div）之间距离，提高工作效率。

动画辅助类

·SWiSHMax3

快速解决动画创作设计的工具 高级的 Flash 创作设计工具提供给绘图设计者或网站的专业设计师，超过350种默认的媒体效果，超过180种立即可用的组件和向量图形，可导入图片、图形、声音效果和影片，还可导出简报到Flash影片、执行文件、GIF动画或图像顺序，另外全新的项目模板及精灵面版立即呈现设计成果…，简单易懂，创作令人惊艳的Flash动画与网站就是那么简单！

·硕思闪客精灵

方便学习优秀动画制作思路的软件。它的专业版不但能捕捉、反编译、查看和提取shockwave Flash 影片（.swf和.exe格式文件），而且可以将SWF格式文件转化为FLA格式文件。它能反编译一个FLASH的所有元素，并且能完全支持动作脚本AS3.0。

格式转换类

·IcoWorkshop图标制作

对于常用的图标而言，图像编辑软件都不能很方便的编辑它们。而IconWorkshop的推出为我们解决了这一难题。这一全功能图标编辑软件除了可以让你自由编辑创作各种XP样式图标外，还可以在各种图标文件间互相转换。

在工作的实践中，最常用到的是其将任何的图像格式轻松转换为图标格式，一般为ico格式。其兼容性较好，支持透明通道，适用于各电子杂志，网站站标，桌面图标的生成工作。

转自：http://drizzlep.blog.sohu.com/158082019.html

先看看是什么人在反对（非Web设计不纳入此列）：

1.没有UED团队（不包括曾经呆过UED团队的）的；
2.自己总是对的（包括在和队友合作中）；
3.广告、VI、产品或其它设计领域转过来做Web设计的；
4.不重视交互和视觉；
5.无法脱离“临慕”或“拿来主义”者。

1.受设计周期限制；
2.非团队主管（或上级）插足；
3.设计者情绪因素；
4.没有规划好；

看到网易这篇文章就像看到前几天腾讯CDC的那篇专题banner设计一样激动，无论哪个网站对于banner的设计都格外重要

写在前面的话

有人觉得做个banner放2张图，排几个字的事，一点技术含量都没有，像其他门户banner基本上都是编辑们自己做的。我觉得这么说是不对的，其实一个banner可以研究的东西还是很多的，而且做一个banner是不难，难得是在短时间内做一个出彩的banner。门户的专题一般是编辑套模板拼成的，比较重要的专题，banner部分是由设计师来完成，一个banner的品质上去了，整个专题的质量感就上来了，所以这部分交给设计师来做也是重视品质的表现，这个毋庸置疑。但banner毕竟不比大型项目，从设计成本上说不可能给太多的时间给设计师，于是乎，设计师有时候是靠经验积累，有时候妙手偶得，质量也是时好时坏，更害怕的是当没有经验没头绪没有心情时，胸中无物，不知道如何下手，于是越急越乱，越乱越急，最后匆匆了事，这种状态下估计也出不了好的东西。在排除技术手段的前提下，如何通过一些经验的思考，让banner达到通情达意效果，也是我下面要说的，个人经验之谈，供大家参考。

·顾及需求方的频道定位

因为包含内容不同，门户网站各个频道有着不同的风格，所以设计师们做设计的时候也要考虑到如体育频道的运动感，财经频道的国际和高端等。

图2
/历史频道的专题，做出厚重沧桑的历史感还是很切题的。
/banner 赞助  10

·顾及此专题的定位

专题的定位有时候和频道的定位偶尔是有冲突的，如女人频道一贯的知性理性的大风格下，有时候会来一些可爱小女人，有时候有做温馨浪漫，在这种有风格冲突的情况下，我们还是以贴合专题的定位为主，当然也尽量做到不能背离频道风格太远。

从构成上讲，一个banner分为2个部分，一为文字，二为辅助图。辅助图虽然占据大多数的面积，但是不加以文字的说明，很难让用户知道这个banner要说明什么。要读一个人的喜怒哀乐，只要读其五官即可。在一个banner里面，标题文字起着五官一样的作用，所以个人觉得文字才是整个banner的主角。所以对于文字的处理，显得尤为重要，在文字处理时有几个小技巧，与大家分享。

·分清主标和副标，从主次上来说，主标为主，字体要大颜色要醒目。副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较饱满，比较集中。

·如果主标太长，需求方不舍得删文字的情况下，对主标中重要关键字进行权重，突出主要的信息，弱化‘的’、‘之’、‘和’‘年’‘第X届’这种信息量不大的词。

·如果需求方整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。如加点英文，域名，频道名等。

一个banner最主要的是标题，但辅助视觉起着烘托标题文字的作用，然而这也是最有难度的一个活，设计师的个人风格和变现力在这里能够淋漓表现。文字和辅助视觉的关系，我这里列举了3个常见搭配方式，这几种方式搭配分别有不同的效果，从而产生不同感觉。

3种文字和辅助视觉常见的搭配方式：

1，   文字+背景陪衬两段式。特点突出文字，视觉集中文字，报道感强。

图9
/banner 赞助 胡子

图10

2，   文字+主体物的两段式，文字图案相辅相成，起到文字言事图案帮助理解的效果。这样的banner适合做介绍类或者产品类。

图11
/banner 赞助 淑华

3，   主体物+背景+文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。

图13

1，严肃话题也能做出新感觉

做新闻报道的时候，遇到严肃话题，一般的设计师，都会比较拘谨，不敢也不愿去做视觉上的创新。所以配到这种话题，画面效果一般都会比较模式化，信息量弱，感染力不足。这时候，设计师如果敢解放思想，去动脑子做一些创新，其实严肃话题做上新感觉，能够达到意想不到的效果。

图16
/主题文字埋没在洪流之中，让其有一种融入感。洪流、闪电、阴暗的天空、淹没的城市，画面灾难感很强，角落处的武警官兵抗洪，让整体灾难中透出希望，哀而不伤。设计师有时候不仅仅应拥有对画面掌控力，对专题主题的把握，也是作为一个设计师应该具备的素质。

2，轻松话题可以做出幽默感

有时候也会做到一些轻松感娱乐感的专题，在做这些专题的时候，设计师们就能更加放开了。

图19
/这个专题banner，做的很轻松很幽默。编辑说他的频道群里发，整个频道的人都笑翻了。

3，作品也能带点小情调

有时候来一些小的创意也会让banner增色不少。

图21
/摇滚的不是乐器，还是文字
/banner 赞助 竆

后面的话

有时候我觉得做一个banner，如做一篇文字，文字可以是小说，可以是诗歌，也可以是散文，形式多样；可以用比喻、也可以拟人，也可以排比，手法也是多样。做一个banner，有时候需要字斟句酌，有时候则要点到即止；有时候该放，有时候该收；有时候可以如苏东坡般登高望远、举首长歌，有时候又可如柳永般娓娓道来、触动心灵。你可以用不同形式和手法来表现，但相同处，通情达意，揭露主旨。本文主要从定位、文字、辅助图和艺术性上表达了我对于做一个通情达意banner的一些见解，让大家能从我的理解中对做banner有新的看法，当然，水平有限，不足处，欢迎指正。

转自网易UEDC http://uedc.163.com/2044.html

情况往往是这样的：
视觉设计师：设计稿被批说很难看，我都是按照原型图做的啊
交互设计师：我把产品文档中的功能、流程都顺利的实现了，且比较合理吧
产品设计师：哭了。。。

还有一种情况：
产品设计师：这个功能很重要，希望用户能明白且觉得有意思
交互设计师：我的原型图把这个功能的来龙去脉都写清楚了啊，视觉设计师你发挥吧，这里需要设计一下
视觉设计师：我的设计稿又被要求反攻了，到底要做成什么样啊？

这里其实提到了两种情况，一种是没有思考的结果，一种的没有共同创造的结果

很多大公司组织结构很复杂，每个人都负责自己流水线上的那一块方寸地，每一个流水线上的工人只需负责自己这一段的事情，按照规矩，接上游的结果完整的实现自己的部分即可。殊不知这种方式对设计师来说是自杀式的行为。如果以这种态度来对待设计，那其实称不上设计师，充其量是个美化技师而已。

别把自己当成某个特定的身份对你来说绝对是有好处的，在需求被实现之前，你应该既是产品设计师，又是交互设计师，还得是视觉设计师，你需要同时拥有这三种意识去处理事情。大家是在一起创造，而不是单纯的完成工作。

所以，多去参加产品方案会、交互方案会，拿到原型图或者产品文档别急着动手，想想为什么产品这么考虑、交互原型这么设计，一定就是最好的方案了吗？是否还有更好的方式来表现？整件事轻的来龙去脉是什么？用户将要怎么接受我做出来的这个东西？把自己当一个混合体来看待。

每个人应该都是创造这个生命的一员，而不是完成这项工作的其中一个工人。
转自：http://ucdchina.com/snap/6710

看到这篇文章感觉很亲切，为什么呢 因为昨天下午刚刚给公司视觉设计师讲了一下交互设计的重要性，并让他们更多的接触交互设计，理解交互设计的思想 才能更好的通过视觉表现传达给用户最好的体验

  视觉设计师就是把视觉传达给用户、给观众，我们是视觉信息的发送者，把准确的内容发送给我们针对的接受者，也就是把我们的情感，我们的认知，传达给我们的用户，这就是视觉设计师的工作。交互设计师的工作是让产品易用、有效的让人愉快的去使用产品,他们也致力于去了解用户的心里期望，从而设计出用户所需要的产品。其实交互设计师与视觉设计的目的都是一致的，都是让用户来喜欢上我们设计的产品。说回来，我的职业是一位视觉设计师。从一位艺术设计师到一位产品界面设计师。在职位转变的过程中，也慢慢开始接触交互设计这一块，也对交互产生一些理解，我觉得视觉设计师也应该略懂交互设计。

    我接触互联网也有4、5年了。做过几年的网页设计师，是否我们一定就没有去接触过交互呢？对于互联网，使用过Blog、论坛、管理后等等一些有交互行为的互联网产品，我自认自己是Web的一位高级用户了，下意识中其实也了解了很多互相网站的产品，只是我们没有把过往所看的，所接触到的综合起来而已。我相信在中国很多接触了互联网几年的网民们也有这种下意识。所以对于交互我们是有模糊的理解的，我们知道按钮是长得有立体，是可点的。还有那凹进去的是一个输入框，那些信息防阻我们去浏览的，我们都对这些控件在下意识中都有一定的认知。

    大家都知道WEB交互设计这个行业是一个新兴的行业，在前几年，在互联网上，我们都没有想过交互设计会成为一个职业,在中国，这个新兴的职业专家也是比较少的，从事这方面的人群也同样，但是随着公司意识到交互设计的重要，交互设计的待遇有可能会比现在的视觉设计师更为丰厚。从而令很多视觉设计师或者从事互联网行业的人都纷纷转到交互设计师这条职业线上。实际上，交互设计的工作在视觉设计的前期，在前期的投入和产出在交互设计上比视觉设计更容易去衡量。而那么视觉设计只是支持交互设计师的工作？把交互设计的原形视觉加工？我觉得视觉设计师不仅仅是图形设计师，因为视觉设计师也包括了产品界面设计的工作，整个产品的项目过程中，视觉设计师应该去参与用户调研、商业分析和MRD与PRD的评审会（并不是全部会议都参加，可以排除技术上的会议），因为视觉设计师他也要了解市场定位，了解用户使用产品的习惯与爱好，了解那些功能对我们做设计的时候是否有限制的，了解这些为我们的产品给他在视觉风格上准确的定位,在前期的工作会更让我们去熟悉产品。如果产品是新产品，或者是比较重要的项目，我们应该为我们的产品制定产品风格的关健词，情绪版,前提我们一定要明确我们的商业目的和使用人群，这样设计出来的产品我们都有根据有理由的。这同时也为了我们的设计负责任，为我们的用户负责任，当你的老板和PD在无理由之下说你的设计不“漂亮”的时候，你回答的时候心里有底的，因为背后有一套科学的设计方法在支持着你,在这点说回来也是对应了我们视觉设计不仅仅是图形设计，我们也应该去了解用户的心理需要，能用视觉元素，颜色，布局来传达给用户我们产品的一种情感，让用户在使用我们的产品的时候，会用视觉给用户留下深刻而愉快的印象。让设计师与用户之间产生共鸣，这也让视觉设计师很有成就感的一件事。

    在视觉设计师眼中对交互其实也是有一定模糊的理解的，在项目中，因为视觉设计师们都会接触到交互设计的原形，经过对交互设计师原形的理解，才很好把原形和交互的思想用视觉的手法去传达给我们的用户，比喻：一个页面那部份是需要突出，视觉设计师应该把视觉重量加重，我觉得一个时间做得比较久的视觉设计师其实他也有一种本能反应，就是在下意识中了解到使用产品的过程以及控件的设计，而在一些规模比较小的UED里，其实视觉设计师也是在做交互设计师的工作，这有一个很好的优势就是他们能很好的去理解交互所表达出的重点和思想。心里已有视觉上的模型。在这点，视觉设计师应该去了解基本的交互设计知识，去了解交互设计师的想法，使得视觉跟交互之间的配合更为紧密。而不是一拿到原形立刻”美化”，我们视觉设计师并不是美工，也不是用我们设计习惯或者自己觉得美的风格来套用我们的产品。我们是要为我们的产品解决视觉上的问题，解决正确性产品情感传达的问题，使产品更能达到预期所期待的效果。
    在这里我并不是说视觉设计师要去抢交互设计师的饭碗，交互设计师是专业的，我们要相信他们，作为视觉设计师应该也要去了解交互设计的想法，了解他们，才能把他们的想法准确用视觉传达给我们的用户，除了你本身专长技能之外，其它也略懂一些，对工作，对生活会更美好。

转自：http://www.thedaxiong.com/archives/13

原始人带骨制的项链，为的是看上去很美。在身上弄纹身，显然也不是拿自己的皮肤当记事本用。（现代人中，michael scofield是个例外。）

现代人新修缮的前门大街。这条大街的北段，基本上是依照原有建筑翻新的，可以理解为新古典主义吧。南段则是新建的房子，由于没有明确的参照，设计师可以自由发挥，这给饱学了现代主义理念的设计师提供了机会，设计了很据现代主义的房子—无装饰的，平顶，方方正正的（也许可以节约建筑成本，至少在现代主义兴起的阶段是这样考虑的）。作为一条传统商业街上的建筑，使用了与周围大杂院一致的灰色，门窗上适当使用了一些传统元素。大概应该算是后现代主义吧。

前门大街南段

前门大街北段

由南至北走过来，明显能感觉出，南段显得更为冷漠，没人气，虽然最高只有两层楼，但走在其中还是会觉得压抑。与北段相比，同样是作为商业街，南段显得缺少亲切感，没有繁华闹市的氛围。当然这差异和在营业的店铺数量也多少有些关系。（前门大街重修后，正在招商，很多铺面都还没有商家入住，北段入住率更高些。）现代主义、后现代主义对追求纯粹的视觉效果“不感冒”，这使得这类风格的建筑视觉效果上相对单调、枯燥。

google的产品是清晰、简单的，它的设计是不特意追求视觉美感的。

adobe.com网站信息传达清晰、明确，同时通过视觉设计使网站看上去科技、有品味、有现代感、有… 在保证了信息传达准确性、高效的基础上使浏览者得到更好的体验。

对美的视觉效果的追求是人本能的需要。

然而，由追求视觉美感所引发出的一些问题又使得我们不得不提出一些要求、建议、原则来限制那些不恰当的视觉设计。

以下是我们已有的一些观点：
● 避免使用纯粹装饰性的图标。

● 链接应该用蓝色，非链接不要用蓝色。

● 不要使用英文作为装饰性元素。

……

这些纷繁的观点是不是可以再概括？
可以这样概括：
为了追求视觉效果的设计过程中，不应产生新的信息。

图标不可避免的会传达信息，无论是画个小旗子还是整个小房子，都会代表特定的含义，传达了特定的信息，所以我们之前说到，不要使用装饰性的图标，要用图标就是用图标表示特定的含义，比如，“添加”使用一个加号，“关闭”使用一个叉子…

蓝色在网页上通常表示链接，这个惯例使得蓝色也传达了特定的信息。那么，文字颜色不可以滥用蓝色。

英文也是文，虽然看着不如中文明白。对于绝大多数比较年轻的中国人，多少都懂些英文，在中文标题旁边加上英文译文，翻译的不准确反而会让用户误解，即使翻译的正确也是在增大信息量，显然没必要一个标题写两边吧~
这样说来，如果用大家都看不懂的阿拉伯文之类的放在中文标题下做装饰或许倒更好些，全当是个花边儿了…

“是否传达这个信息”应该是有计划的、理性的，而不应该是在设计视觉效果的过程中high着决定的。不应该在追求视觉效果的过程中产生新信息。

（本文转载自腾讯ISD交互设计组月报第九期）-臭鱼的交互设计

【译者的话】很 多网页都有一个醒目的大横幅区域，但设计上大都千篇一律，如果你访问FACTOR DESIGN网站，你会发现，该区域的变化比你想象中要丰富得多——并不是通过特效，而是通过版面设计，他们对横幅的间隔设计让你在任何平面设计中都能获 得灵感。

由图片构成的区域显得结构清晰、重点突出及信息有效传达，并且具有多种意 想不到的功能。

Factor Design网站令人一见难忘，其版面结合了作品展示及手册设计的特点形成漂亮的效果。白色的 开阔区域，高度简洁及最小化的构成，柔和的颜色搭配，通过一些隐藏的表格整洁清晰地呈现出来。

这个版式结构我们有两点是特别欣赏的：一是它采用了印刷类的平面设计风格，使用衬线字体， 文字颜色对比低调柔和，不同文字栏宽度形成强烈对比。二是上面的水平图片区域设计，使整个版面显得优雅漂亮。这个图片区域只看上一眼，你可能不能一下子认 识它的所有优点，但我们之所以深入讨论这个区域是因为如果从技术上来说，你采用了同样这种方法，就可以得到同样漂亮的相似效果——无论是网站设计还是其它 平面设计。看一下我们能够从这个网站设计中学到什么。

版面结构：

书本状的页面版式结合了印刷及网站设计的风格，只使用一种衬线字体，而文字尺寸只有两种。

点击上图看大图

颜色：

在开阔的白色背景上，两种文字颜色已经可以传达出一种清新及悦目的效果。

点击上图看大图

文字颜色对比：

不同的背景颜色有不同的栏目文字名称颜色，但文字与背景的颜色却保持了低对比度的关系。

图片区域：

放置图片的横幅区域的大小及位置是固定的，但里面却可以有千变万化。设计从最基本的空间分 割开始：

充满表现力的变化：

在下面，我们将会看到图片通过结合、搭配、剪切及组织可以有非常丰富的变化，而让人印象深 刻的是这些效果都只是在这个简单的横幅中实现。

本文所用颜色数值（RGB）：

原文出处：www.bamagazine.com

转自：http://www.logosky.net/webpage/artreview/3_panels_banner.html