读书：
出行：扬州瘦西湖（陪宝宝周末美术写生）
技术：
游戏：
我竟然把两周当成一周来过，三月第二周做了什么事情，完全回忆不起来，我觉得我的时间被偷走了，太恐怖！
我必须多写文章，让我的生活有所索骥。
作者： zhaofuqun
方寸之间，细节见功夫！用实例解析交互设计
最近被甲方客户虐的体无完肤，反复的修改，反复的推翻，在加班空隙之间，正好想到把手上案例拿出来分享，简单介绍一下方寸之间的复杂交互是如何实现。首先看图：
这块筛选条件逻辑如下：
- 先判断有多少条件，如果大于两条，就只显示两条，多余部分隐藏起来，在页面正中显示向下箭头图标；（图1）
- （接上条）在只显示两条条件情况下，点击向下箭头，显示所有条件，并把向下箭头改为向上箭头；（图2）
- （接上条）在显示所有条件情况下，点击向上箭头，收起到只显示两条条件，箭头仍保持向上；（图3）
- （接上条）在只有两条条件且箭头向上的情况下，再次点击箭头向上，就可以完全收起条件区域；（图4）
- 条件分为两种情况，正常情况如（图1）第一行“机构级别“，在一行中罗列出所有属性，超出部分隐藏截断，点右侧的”更多“或”多选“按钮才能展示；
- 条件的另一种情况，数据海量情况如（图1）第二行”调度机构“，那就按首字母 A~Z 方式，给条件的属性做分类；
- 条件的属性选择之后，会在条件区域下方出现选择结果，如（图3）文本框上方，并可点叉叉取消刚才的选择；
- 模糊搜索文本框在输入文字时，每输入一字，会罗列出所有首字同输入内容的属性，如（图4），这叫”文本框智能提示“；
现在看到的图片配上文字，也许能清楚的说明这块区域的功能，但实际工作中，很难用精准的语言表达清楚要做的事情，所以前端工作量蔓延主要在与这里，经验丰富的程序员会事先把风险点列出来，讨论后再进行工作，新手只能步步趟雷，祈祷好运。
如何解决这个问题？那就需要专业的人事先做好规划，专业人员可绘制出可交互原型（推荐Axure或Visio软件），普通用户可直接在纸上或word中绘制，并在边上加上注释。
为什么要给这样一个区域设计的如此反人类，只有四个字”用户体验“。我个人并不是很喜欢这种交互方式，网页中各个元素互相争夺视觉焦点，其实设计最高境界是”少即是多“，如百度的首页。
正好借这个机会普及下软件（网站）开发的几个岗位：
- 写出上文逻辑条件（1）~（8）文案的角色是产品经理
- 能用 Axure或Visio画出交互图的角色是交互设计师
- 能画出漂亮效果图（1）~（4）的角色是界面设计师（UI、美工）
- 能把这些图片转换为HTML页面的角色是前端工程师
- 能接入真实的后台数据，并上线让用户看到效果的角色是软件工程师（程序员）
- 做好了看看有没有问题的角色是测试员；
- 上面每件事都懂一点的是项目经理。
- 当最不能忘了最后拍板、掏钱的幕后黑手，甲方！
某医疗网站界面设计
17年3月第一周
读书：
出行：车管所、交通执法大队（年检）
技术：尽用周末时间，把两个兼职主体功能完成。
游戏：
如何为网站添加支付功能
在线支付的用处越来越多，方式也越来越多，前几天有个朋友问如何给自己的网站添加支付功能，我把交流内容整理出来，方便大家查阅。
一、银行卡种类
- 借记卡，就是储值卡，先存钱再消费，不能透支；
- 信用卡（包括VISA和MasterCard），先消费后偿还，透支有上限。刷信用卡时银行要向商家收手续费，一般在0.3% ~ 0.7% 之间不等。（简单的说吃个饭100块，老板要交3~7毛钱给银行）
二、支付平台
这类平台有很多，比较大有银联、支付宝、微信、百度钱包、京东金融等，需要逐一去接入。一般需要的资料如下，只要齐全基本上都能申请下来，只是时间快慢，申请都是免费的。
支付平台申请资质：
- 法人身份证
- 营业执照
- 组织机构代码证
- 税务登记证
- 开户许可证
- ICP备案号
支付平台优点：
- 付款状态可查，每笔交易的时间、金额、付款人信息等都有记录，并和支付宝、微信联动
- 无人值守，付款完成之后，执行后面流程。比如虚拟物品购买，支付后可直接发下载链接地址和下载密码，不用人在电脑旁
- 安全，这里的安全有三方面，资金流向、网站安全、平台稳定
- 正规，可信赖
支付平台缺点：
- 开发成本高
- 要有正规公司（个体商户也可以）和已备案网站
三、扫码支付
扫码支付现在常用的就支付宝和微信，其实就是支付平台的简化版，个人也能方便申请。
扫码支付三种方式：
- 固定金额，比如一瓶可乐3元钱，在可乐瓶上贴一张二维码，直接扫码就付款，不用输入金额。
- 固定商户，比如吃饭买单，问好价格，扫码输入金额。
- 扫码收银，你只要亮出自己手机上的二维码，对方把价格算好后，扫你二维码后扣款。
扫码支付优点：
- 无开发成本；
- 个人可申请；
- 帖近用户支付习惯；（操作简单，付款环节少，跳出率低，容易产生冲动消费）
- 偷税漏税？
扫码支付缺点：
- 网站不能留下付款痕迹，对帐麻烦；（只能在支付宝、微信帐户中查）
- 扫码多用于小额支付；
- 安全性问题，如果网站中木马，二维码图片被替换，钱就到别人帐上；
- 网站显得不正规、不严谨。
四、如何选择：
我觉得有几个问题能确定下，就可以做出选择。（前4点是硬性条件）
- 有没有正规公司和网站，没有用扫码；
- 准备花多少钱，开发费10000元以下用扫码；
- 是否是实物，是否支持退款，是的用平台；
- 需不需要财务分析、统计，需要要用平台；
- 支付频率多少，多的用平台，少用扫码；
- 支付金额大小，大额用平台，小额用扫码；
- 是否是虚拟产品、服务，是用扫码；
五、支付平台要联带开发哪些功能
- 会员模块，只有登录才能记录支付信息。会员模块包括注册、登录、找回密码、修改密码、用户资料、角色权限等
- 支付模块，包括订单生成、确认订单信息、付款方式选择、付款结果等
- 订单管理，包括查看订单、退款、统计等
- 商城模块，包括购物车、评价、信用、产品分类、物流、高级搜索等
17年2月第四周、3月第一周
读书：《长安乱》70%
出行：
技术：
游戏：《漫威：未来之战》
没有最惨淡，只有更惨淡，工作需求很多但不给时间，时不时加班，生活规律紊乱。本周接了一个兼职，谈了另一个兼职。
《仙境传说RO：守护永恒的“挂机”》 7.5分
《仙境传说RO：守护永恒的爱》手游版，以下简称RO。
很早以前玩过一款电脑网络游戏RO，好像是2000年左右，想想已经事隔16年了。那时候的网络游戏无非打打杀杀，画面暴力、语言粗鄙，都是一群屌丝玩来玩去，比如《千年》、《传奇》、《奇迹》。这款游戏的出现让人眼前一亮，日系可爱风格、暖心的语言、丰富的表情，让人时时忘了这是一款网络游戏，更像是一个网络大社群，大家在里面游来游去，互相聊天。
有许多有趣的故事，现在想想还能会心一笑。游戏里有一个职业是服待，是给人加血的职业，我有个朋友选择在玩，因为一来平时打怪不用加血，二来魔法值总是不够用，所以总是坐在地上（回复魔法值更快一些）看大家打怪，不过总坐着会很无聊，我们在忙着打怪也没什么空陪他聊天，有一次他从家里旁了一本《圣经》来玩游戏，说无聊时给我们念念，就这样我们断断续续的看完了一本《圣经》。有时旁边的路人也会停下来听两耳朵，还有人问这是不是NPC？（游戏设定的人，就是假人）
有一次我和波波在挂机，打出一张青骨卡（骸骨士兵卡，暴击+9%），盗贼的最爱。那时还没有交易所，我摆摊叫卖一个下午卖了600万，我和波波一人300万。那种巨款在手天下我有的感觉，那种拆迁一夜暴富的感觉，太美妙了！后来，波波花了75万买个苹果头饰（上面还插一根箭）到处得瑟。我有钱后，看这个也舍不得买，看那也舍不得花，最后买5000瓶红药水存在仓库存着。再后身上揣着几百万游戏没玩了，这种钱没花出去人没了的感觉好落寞。
还有法师雷电越级杀蜈蚣，下水道杀盗虫拣垃圾，跑地图总是迷路，普拉德隆到处是摆摊，那种赶集的感觉，真是历历在目。可惜这款优秀的游戏最后被外挂毁了！
这次RO手游90%还原了当年的PC版内容，画面精美、声音动听、操作方便、人气爆棚。不但让当年的老玩家重温经典，也让新玩家认识了这款游戏。虽然游戏非常优秀，可是我玩了两天就没玩了，不是我不想玩，是不忍玩。如果想在游戏中展露头角，只能不停的打怪升级，打怪升级的最好方法就是挂机，不停的挂机，挂机让等级提高，等级提高就可以换个更强怪物区域挂机。然后用不同的装备和技能搭配去挂机，和别人组队去挂机，不挂机就没有等级、没有卡片、没有装备。手机24小时开着挂机，都怕电池过烫会爆炸，后来听高人说用安卓摸拟器来挂机，这样手机就能歇着了。我深深的觉得这款游戏就是永恒的挂机！
还有一点就是没有朋友一起玩，没有朋友再好玩的游戏都是孤独的。有朋友一起哪怕扫雷、打80分也好玩。
总之《仙境传说RO》是一款不错的游戏，重拾精典，良心作品，我给8分。
17年2月第三周
读书：
出行：
技术：
游戏：
本周是最惨淡的一周，除了加班没有任何事发生。周三通宵后第二天继续上班、周六白天加班晚上还通宵。这是第一次这样高强度加班，但实际产出的价值和效率是个问号，这可能就是国企特色吧。
小米手环2使用感受
上次年会有个同事抽奖得到一个小米手环，我比较感兴趣去官网上查了查些参数功能，觉得价格不贵便入手了一款试试，现在使用18天，说说这段时间的感受。
小米手环的优缺点：
（1）小米手环2相对与小米手环1最大的提升，就是多了个屏幕，当然价格提高了100块。这个体验提升的投资是非常必要的，让手环有了手表的基本属性，也加入了交互的方式。还能看日期和星期，这点就超越了普通手表。
（2）步数、热量、心率测量，只能说能用，不能说好用，因为不够专业。步数只能计算全天走动步数，不能单独计算跑步、散步步数，热量也是同理，心率测量非常不准，同时测两次就会有很大的误差，这是BUG。久座提醒，没什么用，如果能改成番茄时间钟就好了，长按圆点开始计时，25分钟后震动提醒，或可在手机端设置提醒时间，作为魔兽世界打BOSS、洗衣机晾衣服提醒都不错。
（3）睡眠统计功能很有趣，能看到每天入睡、醒来时间和深睡时长，但只是看看，还没想到有什么具体作用。
（4）手机手环解锁没用过，我对手机设锁无法理解，使用起来只能给自己找麻烦，是为了防止另一半查岗，还是防止手机丢失信息泄露，可能对高端人士有用吧。从看官方照片来看，要两个手靠近才触发解锁，是不是有点不傻？
（5）来电震动功能不错，能防止漏接电话，很实用！
（6）防水功能也很不错，从外观看就比较“防水”，洗碗、洗头时都带着手环，洗发水、洗洁精粘上都没太大问题，洗澡时拿了下来，主要是防止水蒸气渗入。
（7）佩戴最大的感觉就是没感觉，除了打键盘稍微有点“磕碰”，结触皮肤的地方没有留汗留痕，表带柔软佩带舒适。
（8）我用的是小米手机，自带小米运动软件，对手环的应用对接无缝，用起来很方便，软件界面美观，操作方便。
（9）抬腕显示功能我不是很喜欢，第一在交流、思考时容易分神；第二费电；
（10）电池续航很不错，我没开抬腕显示、中度使用，使用17天后还剩下20%电量，非常省心。苹果手表最大的问题就是电池！
对比苹果手表的对比感受：
（1）价格方面，苹果手表是小米的20倍！所以对苹果手表的要求也要提高10倍以上才合理；
（2）苹果手表的app应用有很多，功能很花哨，但95%很不实用、不好用，学习成本高；
（3）佩带感受小米比苹果轻、舒适；
（4）打电话功能苹果手表做的很不错，但几百元的其它智能手表和手环也能实现的不错，所以不加分；
（5）运动记录和交互做苹果手表做的很好，各种定制、推送、统计，让运动变的有趣，这是无法超越的；
（6）消息提醒苹果做的很好，微信、QQ、邮件都可以定制，还有快捷回复，app通知也可以定制；
（7）导航和定位，苹果有但不好用，最大问题是不能脱离手机和速度慢、费电；
（8）防水、防摔不如小米手环，毕竟有液晶屏。小米手环一来是塑料包裹，二来就算摔坏也不心痛；
（9）苹果手表有siri功能，识别度一般，但学习成本比较高，我一般用来打电话、开导航、问天气；
（10）苹果手机最大的问题是电池，待机一天都不到，都不敢使用各种功能，生怕到了晚上黑屏，如果这点不撤底改变，苹果手表这条路会走死。我相信50%用户因为电池问题不用苹果手表，也我是如此；
整体来说在149元的价格前提下，小米手环拥有手表功能，并且防水待机时间长，有来电震动，还有一些步数、心率、热量、睡眠统计锦上添花，性价比很高，值得推荐。
我的小米手环是在淘宝闲鱼上买的二手，原价 149元，二手95元，运费10元。我心里没有使用障碍，也许用一段时间不喜欢了，再50元卖出去。我觉得电子产品主要是体验服务，不像手表、乐器、首饰、衣物等买新的有纪念、情怀、卫生、热爱等元素附加其中。
IE6调试心得
最近刚完成一个“复杂”的项目，其实项目本身不复杂，只是需求没有计划，跟着领导思路不停的变化，并且只给我们正常开发1/2~/1/5时间，使得技术人员疲惫不堪，现在开发基本完成，突然说因某重要领导使用IE6浏览器电脑，并且分辩率是 1024×768，要求我们对所有页面ie6支持，最变态的是只给不到一周时间。这个消息惊得我们措手不及，我明确表示一周时间完成不了，最多只能完成 60~80%或。然并卵！
即然事实已经摆在面前，挣扎无益，就开整吧。首先到哪里找IE6浏览器！
1、ieTeset 软件在现在的win10 64位电脑上，打开就崩溃（以前win7或xp时，是可以用的）；
2、用IE自带的调试工具下的仿真模试，几台不同电脑展求效果各不相同；
3、只能用一台电脑装系统，或用虚拟机的方式。考虑到同时操作两台电脑不方便，最后确定使用虚拟机。
我尝试安装了 VMware 和 oracleVM 两款虚拟机，VMware 普及度比较广，资料文档教程比较多，oracleVM性能更优，速度目测快50%，推荐oracleVM。
然后就是装系统，第一次我装的是ghost版winxp sp3，装机后看到是IE8，无法降级，失败。难道IE6是 win98系统自带，第二次尝安装win98，看到熟悉的图面，自己都有点感动，不知不觉已过了20年，20年前的我在做什么？装好之后发现是IE5，再次失败。第三次我安装的是 winxp 安装版，成功。
oracleVM 虚拟机开源免费全中文，使用无难度，只需要注意“网络 – 连接方式”，我选择“网络地址转接（NAT）”，就可以共享上网。另外，在菜单项“设备”-“安装增强功能”，就可支持当前电脑与虚拟机之间复制粘帖和文件窗口拖动。
运行方法就比较简单，如果是 tomcat 运行java，只需在IE浏览器输自己电脑的IP、端口号、路径。如果是调试静态页面，点开始-运行菜单，输入 \\自己的主机IP，就可以访问自己的电脑（要开共享，不然看不到硬盘），直接运行HTML页面。
注意IE6是没有f12、firebug、开发者工具等，只能装一个 Debugbar，定位JS问题位置和报错提示，HTML和CSS问题，只能凭感觉。
对于IE6具体调试细节，这里就不展开介绍，只说一下思路：
1、如果明确需要完美支持IE6，那建议在IE6开发，向上做版本扩展；（基本低版本支持，高版本不会有问题）
2、如果是开发完成，需要追加支持IE6，建议用判断浏览器的补丁方式追加，不要动结构，做好注释，注意解耦；（具体判断方法见下文）
3、复杂位置，可以用表格来布局，不用太拘泥规范标准；
4、jquery 只支持 1.4以下版本；
5、不支持 css3、html5，最好不用滤镜 filter，会使页面假死、崩溃；
6、良好的代码写写规范，扎实的前端功底，能免去很多奇萌问题。
HTML 的 IE6判断方式：
<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”common/css/ie6.css”/>
<![endif]–>
CSS 的 IE6判断方式，用HACK解决
javascript 的 IE6判断方式：
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
if (isIE6){
//代码
}
jQuery 的 IE6判断方式：
if ($.browser.msie &&
($.browser.version == “6.0”) && !$.support.style) {
//代码
}
一些小问题：
1、border-bottom:1px solid #CCC 不起作用，但border:1px solid #CCC 起作用。 解决方案，追加一条_display:inline-block；
2、我一直以为 background-color有一条属性 none，实际上只有 transparent 透明（无），或 inherit （继承）属性，只有display 有 none 属性；
3、z-index 无效问题，最好的方法是直接调整代码先后顺序，或把浮动层停在页头或页尾，用JS定位；
4、png图片半透明解决方法，图片少用gif代替，图片多用DD_belatedPNG.js ；
5、清除浮动方式有多种，ie6 推荐用伪类方式。见下文：
伪类清除浮动方式：
.clearfix:before,.clearfix:after{display: table;content: ” “;}
.clearfix:after{clear: both;}