Eliza’s Tin

一直不喜欢照搬的转载文章。互联网看似浩瀚无边，事实上一样的内容到处都是。（尤其是那些“号称做过SEO”的站点。）又何必多我一个占用空间。既然有自己的地盘，当然要说自己的话。
但是，但是，今天看到一篇文章，写的真是好。（完全不同于那些“10个人生真理”或“4个一定要做的XXX”之类的总结性屁话。）一针见血的说出了我，或者其他很多小白设计师的处境。很多鸟事都是自己遇过的，那些或者懦弱或者愤怒或者自怨自艾的情绪也都是自己感受过的。（哇靠，我怎么那么多形容词，就不能写简洁点么！）
都是些常识，看懂了，坚持做就是了。

《设计师的勇气》
作者：周陟
转载自周陟-跨媒体设计师
事实其实很明显，每当进行一些团队沟通和行业会议的时候，一群小白设计师坐到一起无论开头多么宏伟，多么富于人文精神，最后总是难免回归到对公司、对领导的抱怨，或者尽情吐露一些对于现状的不满，进而制造出一种相互搀扶的“我们共同努力吧”的心理。
那么，肯定会有人提出问题了：“我除了抱怨现状的不公平，我还能怎么办？设计部门其实经常是公司中的从属部门。”，不幸或者有幸，最近还有人在问我 这样的事情  — 我要告诉各位的是，设计部并非后妈的孩子，爹不疼，娘不爱，是因为这些设计师缺乏勇气，缺乏面对问题解决问题的勇气，而抱怨的情绪往往是最糟糕的体现。
有些火爆的兄弟会说：“你说这些屁话有鸟用，什么时候老板和设计师坐下来PK一下，我看才能解决问题”，恩，你说得好。但是我也有疑问，请问你的老板为什么要和你坐下来谈设计？你是哪儿来的大师？还是有什么特别能赚钱的点子？你不会是以为你真的碰上乔布斯或者马化腾了吧？
我要谈的是部分传统大型企业和中小型企业的问题，这样的环境中，作为设计师你只能进行合理的建议和巧妙的引导，而你的性格与人品决定了你是否值得尊重，抱着怀才不遇的心理等着老板的主动临幸，你可能最后的下场就同后宫的那些佳丽一样 — 只能是妹有情，郎无意。
那么，偏偏你的性格比较内向（我认为设计师没有内向的，只有闷骚的，当然还有为数不少的是愤青的 — 这是让生活压力给逼出来的惨淡现状），那么你如何增加你作为设计师的勇气？我有一些不成熟的建议。
1. 挑战现状
常见的情况是，一旦出现由于产品经理，或者开发人员配合不利的情况，设计师的大爷心态就开始作祟了 — “你们这样搞，老子不管了，看看最后问题在哪里”，其实这就是一种懦弱的表现，如果你给人的印象是一个无法为公司做出正面帮助的人，那么别人只会给你扣上 “愤怒的艺术家”的帽子。
当你面对一些影响到你的工作价值的现状时，你应该勇于站出来挑战，并提出解决问题的方法。公司的流程不合理，你有没有主动给出建议？公司的产品细节 不完善，你有没有主动提出过测试报告？有用户在外面投诉你们公司的产品，甚至质疑功能的缺陷，你有没有马上站出来给用户解释，并且回到公司后向市场部门反 应？公司内部人员散漫，积极性不高，你有没有提出组织一些活动或者交流会议？
如果你什么都没做，而是每天对着电脑屏幕，猥琐的上网贴帖子发牢骚，看看中年不得志的失败者写的所谓人生教训 — 那么你已经和现状无关了，你的价值也在每天的键盘起落之间消失殆尽。
2. 争取利益
在我经验并不算很丰富的设计管理工作中，我发现一个普遍的现象，设计师总是很少从下往上申请一些福利或者加薪，而往往有这种情况的时候，理由也居然 是“应该给我加薪了吧？不加我就准备跳槽了，已经有人给了我offer” — 我靠，这简直是不给人留活路了，我相信有牛B的人物是每天接到猎头电话的，但也不用这么露骨吧。
合理的争取利益，是每个设计师要上的第一堂课，你的个人利益决定了团队的利益，也同时决定了你们是不是可以良性发展，设计师的切身利益包括：职位等级的提升，培训机会，市场考察的机会，团队活动，基本薪资，奖金，项目奖励，其他补助等。
争取的方法是：准备证明工作价值的材料，梳理KPI的准确数据，适当提到你们在行业中的进步和地位，团队的凝聚力，日后的发展计划，对公司成本的考 虑，横向比较其他部门的待遇情况（虽然公司说不能交流薪资情况，但我不相信你居然蠢到观察不出来吧）– 然后向你的领导提出你的要求，你的领导会立刻去做这件事的。

在蓝色理想上看到的漫画，非常好玩又简单明了，转来这里做个记录。
觉着字太小看不清楚的，可以点击打开看大图。
英文版原文在这里。
作者：Jeremy Keith
改编：Brad Colbow
翻译：Kevin Jaw

在DW里，中文字体提示的名称也是中文的，譬如宋体就是”宋体”。考虑到页面编码的关系，css内的中文字体显示最好也是用英文字符来写。
黑体：            SimHei
宋体：            SimSun
新宋体：          NSimSun
仿宋：                 FangSong
楷体：                 KaiTi
仿宋_GB2312：     FangSong_GB2312
楷体_GB2312：     KaiTi_GB2312
微软雅黑：              Microsoft YaHei

新添2个在线的网格设计工具：
Grid Design Tool
http://lifesinger.org/lab/2008/grid_design_tool.html
Grid Designer 2
http://grid.mindplay.dk/
第一个是淘宝UED的“射雕”先生写的，第二个是一个老外做的。个人觉得第一个更好用些。
虽然我还是不会严格的遵守网格标准来做页面，因为觉得实在没有必要，而且做的时候缚手缚脚。但无可否认，在建大框架的时候，有网格做辅助还是很方便的。

转载一篇装备文，看了以后突然好想念我那一盒马克笔和网点纸阿。然后很感谢大学里教网页的老师，因为她教我们的第一课，就是一定要画草图，而不是直接写代码或做PSD。
当然了，草图只是草图，这些都只是表达我们想法的工具，如果只用1只铅笔就能达到目的，那也ok。对于装备本身太执着很容易走火入魔的。

Adaptive Path版权所有
作者：Adaptive Path
译者：UCD翻译小组，JunChen
原文地址：http://www.adaptivepath.com/ideas/newsletter/archives/031109/index.php

有件事呢本应该是显而易见的，我是指如果你用恰当的工具，那么画起草图来会变得相当、相当简单。
我不会穿着网球鞋去滑雪，但我却常常假想自己可以用蜡笔、羽毛笔或者用剩的铅笔头画出工业级效果。喔，太蠢了。最近我才意识到，拥有一套良好的“装备”是多么重要，真是杀牛要用牛刀啊。
下面就是我的“装备”，看看它们是怎样帮助我成为一个更好的用户体验设计师。
 
1. 网纹收纳袋
我知道你在想什么。收纳袋不是一个画草图的工具。那你就错了，因为：它可以将你的所有工具收纳在一起，方便拿取和带走。这意味着你更可能将它们随身携带，并且因此能够在更多情况下使用。
如果你能够在人们讨论过程中为讨论的对象画一些草图，那么你通过绘画就可以阐明人们所表达的意思，并且可以使每一个人有相同的认识。这种交流过程中实时产生的草图，在促进想像力方面具有无与伦比的力量，并且会被不断地引用、引用、再引用。比如，“记得那天我们画的一个框和两个圆圈。我想我们漏掉了另外一个圆圈…”
2. 暖灰色马克笔
如果你犹豫踌躇于将看上去挺搞笑的线条草图作为专业的业务交付物，那么一支暖灰色的马克笔立即能够使草图更加美观。我通常用灰色来描绘重点，加一些简单的阴影、细微地区分出前景和背景。这样可以使草图更有层次感，并且可以使眼睛更容易解读具体的情景。
 

从表格时代遗留下来的布局习惯，是将页面切成一块块的小图，用table拼合。比如著名的9宫图。后来知道这样一张张的小图片增加了用户请求的http连接数，页面打开速度不会比一张大图更快。所以在控制图片size的条件下，干脆使用整张的图片。到现在，是流行把所有页面上用到的小图标整合到一张图片上，然后用CSS里的background-position控制背景图片的显示位置。
前台显示很正常：

后面的图片是这样子哒~~~

n个小图标被合并到了一张大图上，通过css控制在页面上单独显示每一个小图。对于大访问量的网站来说，吞吐量的提升是显而易见的。小网站（还有小小网站譬如说我这种的）这么做就没太大必要了。
CSS代码部分：
background-image: url(http://tieba.baidu.com/tb/cms/img/index/sprites.png);
background-repeat: no-repeat;
background-position-x: 7px;
background-position-y: -253px;
关键在background-position-y，这里是负值，表示背景图的左上角的纵坐标值x减去背景开始显示的位置的纵坐标。计算起来还是有点麻烦。
这里有一个在线的css图片拼合生成器
http://spritegen.website-performance.org/

做页面布局的时候总会碰到这样一个问题：当一个页面的内容很少，不足以撑满一屏大小的时候，紧接着正文内容的footer就会“浮”上来，留出底部一大片空白。
为了让footer固定在浏览器窗口的底部，之前会自己乱写一个：“position:absolute;bottom:0px”来固定。但这样写有个bug，就是当窗口高度变小时，footer会和正文重叠。前两天找到了一个比较完美的解决办法，而且是纯CSS实现。
HTML代码:

<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>

说明: 使用这个布局的一个要点，就是footer要在总的div容器之外。footer使用一个层，其它所有内容使用一个总的层。如果确实需要到添加其它同级层，那这个同级层就必须使用position:absolute进行绝对定位。
CSS代码:

html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */
#footer {position: relative;
margin-top: -150px; /* footer高度的负值 */
height: 150px;
clear:both;}

很简单吧。最后再使用clearfix hack 来兼容浏览器，这里重点是为了Goolge Chrome。并且解决页面悬浮布局问题。
Clearfix Hack:

.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End [...]

看到一篇“CSS规则层叠时的优先级算法”，写的超玄妙，直接把人搞到晕菜。还是greengnn的评论写的好“不用刻意去计算，知道几个最基本的样式优先级就行了”。
1.内嵌“style=”的优先级最高
2.id的优先级大于class
3.同样一个文件或片段内的选择符，写在下面的高于上面的。
4.后台选择符的优先级是累加的，多采用.class1 .class2 {}的后台选择符方式组织class，子孙的优先级就不会低。
5.link多个css文件,同样的选择符，下面的css文件优先级比上面的高
6.不要用!important ，会让自己彻底晕掉。