by ·0评论

最近被甲方客户虐的体无完肤，反复的修改，反复的推翻，在加班空隙之间，正好想到把手上案例拿出来分享，简单介绍一下方寸之间的复杂交互是如何实现。首先看图：

 

 

这块筛选条件逻辑如下：

  1. 先判断有多少条件，如果大于两条，就只显示两条，多余部分隐藏起来，在页面正中显示向下箭头图标；（图1）
  2. （接上条）在只显示两条条件情况下，点击向下箭头，显示所有条件，并把向下箭头改为向上箭头；（图2）
  3. （接上条）在显示所有条件情况下，点击向上箭头，收起到只显示两条条件，箭头仍保持向上；（图3）
  4. （接上条）在只有两条条件且箭头向上的情况下，再次点击箭头向上，就可以完全收起条件区域；（图4）
  5. 条件分为两种情况，正常情况如（图1）第一行“机构级别“，在一行中罗列出所有属性，超出部分隐藏截断，点右侧的”更多“或”多选“按钮才能展示；
  6. 条件的另一种情况，数据海量情况如（图1）第二行”调度机构“，那就按首字母 A~Z 方式，给条件的属性做分类；
  7. 条件的属性选择之后，会在条件区域下方出现选择结果，如（图3）文本框上方，并可点叉叉取消刚才的选择；
  8. 模糊搜索文本框在输入文字时，每输入一字，会罗列出所有首字同输入内容的属性，如（图4），这叫”文本框智能提示“；

 

现在看到的图片配上文字，也许能清楚的说明这块区域的功能，但实际工作中，很难用精准的语言表达清楚要做的事情，所以前端工作量蔓延主要在与这里，经验丰富的程序员会事先把风险点列出来，讨论后再进行工作，新手只能步步趟雷，祈祷好运。

如何解决这个问题？那就需要专业的人事先做好规划，专业人员可绘制出可交互原型（推荐Axure或Visio软件），普通用户可直接在纸上或word中绘制，并在边上加上注释。

为什么要给这样一个区域设计的如此反人类，只有四个字”用户体验“。我个人并不是很喜欢这种交互方式，网页中各个元素互相争夺视觉焦点，其实设计最高境界是”少即是多“，如百度的首页。

正好借这个机会普及下软件（网站）开发的几个岗位：

  1. 写出上文逻辑条件（1）~（8）文案的角色是产品经理
  2. 能用 Axure或Visio画出交互图的角色是交互设计师
  3. 能画出漂亮效果图（1）~（4）的角色是界面设计师（UI、美工）
  4. 能把这些图片转换为HTML页面的角色是前端工程师
  5. 能接入真实的后台数据，并上线让用户看到效果的角色是软件工程师（程序员）
  6. 做好了看看有没有问题的角色是测试员；
  7. 上面每件事都懂一点的是项目经理。
  8. 当最不能忘了最后拍板、掏钱的幕后黑手，甲方！

 

by ·0评论

在线支付的用处越来越多，方式也越来越多，前几天有个朋友问如何给自己的网站添加支付功能，我把交流内容整理出来，方便大家查阅。

一、银行卡种类

  1. 借记卡，就是储值卡，先存钱再消费，不能透支；
  2. 信用卡（包括VISA和MasterCard），先消费后偿还，透支有上限。刷信用卡时银行要向商家收手续费，一般在0.3% ~ 0.7% 之间不等。（简单的说吃个饭100块，老板要交3~7毛钱给银行）

 

二、支付平台

这类平台有很多，比较大有银联、支付宝、微信、百度钱包、京东金融等，需要逐一去接入。一般需要的资料如下，只要齐全基本上都能申请下来，只是时间快慢，申请都是免费的。

支付平台申请资质：

  1. 法人身份证
  2. 营业执照
  3. 组织机构代码证
  4. 税务登记证
  5. 开户许可证
  6. ICP备案号

支付平台优点：

  1. 付款状态可查，每笔交易的时间、金额、付款人信息等都有记录，并和支付宝、微信联动
  2. 无人值守，付款完成之后，执行后面流程。比如虚拟物品购买，支付后可直接发下载链接地址和下载密码，不用人在电脑旁
  3. 安全，这里的安全有三方面，资金流向、网站安全、平台稳定
  4. 正规，可信赖

支付平台缺点：

  1. 开发成本高
  2. 要有正规公司（个体商户也可以）和已备案网站

 

三、扫码支付

扫码支付现在常用的就支付宝和微信，其实就是支付平台的简化版，个人也能方便申请。

扫码支付三种方式：

  1. 固定金额，比如一瓶可乐3元钱，在可乐瓶上贴一张二维码，直接扫码就付款，不用输入金额。
  2. 固定商户，比如吃饭买单，问好价格，扫码输入金额。
  3. 扫码收银，你只要亮出自己手机上的二维码，对方把价格算好后，扫你二维码后扣款。

扫码支付优点：

  1. 无开发成本；
  2. 个人可申请；
  3. 帖近用户支付习惯；（操作简单，付款环节少，跳出率低，容易产生冲动消费）
  4. 偷税漏税？

扫码支付缺点：

  1. 网站不能留下付款痕迹，对帐麻烦；（只能在支付宝、微信帐户中查）
  2. 扫码多用于小额支付；
  3. 安全性问题，如果网站中木马，二维码图片被替换，钱就到别人帐上；
  4. 网站显得不正规、不严谨。

 

 

四、如何选择：

我觉得有几个问题能确定下，就可以做出选择。（前4点是硬性条件）

  1. 有没有正规公司和网站，没有用扫码；
  2. 准备花多少钱，开发费10000元以下用扫码；
  3. 是否是实物，是否支持退款，是的用平台；
  4. 需不需要财务分析、统计，需要要用平台；
  5. 支付频率多少，多的用平台，少用扫码；
  6. 支付金额大小，大额用平台，小额用扫码；
  7. 是否是虚拟产品、服务，是用扫码；

 

五、支付平台要联带开发哪些功能

  1. 会员模块，只有登录才能记录支付信息。会员模块包括注册、登录、找回密码、修改密码、用户资料、角色权限等
  2. 支付模块，包括订单生成、确认订单信息、付款方式选择、付款结果等
  3. 订单管理，包括查看订单、退款、统计等
  4. 商城模块，包括购物车、评价、信用、产品分类、物流、高级搜索等

 

 

 

by ·0评论

读书：《长安乱》70%

​出行：

技术：

游戏：《漫威：未来之战》

没有最惨淡，只有更惨淡，工作需求很多但不给时间，时不时加班，生活规律紊乱。本周接了一个兼职，谈了另一个兼职。

by ·0评论

 

《仙境传说RO：守护永恒的爱》手游版，以下简称RO。

很早以前玩过一款电脑网络游戏RO，好像是2000年左右，想想已经事隔16年了。那时候的网络游戏无非打打杀杀，画面暴力、语言粗鄙，都是一群屌丝玩来玩去，比如《千年》、《传奇》、《奇迹》。这款游戏的出现让人眼前一亮，日系可爱风格、暖心的语言、丰富的表情，让人时时忘了这是一款网络游戏，更像是一个网络大社群，大家在里面游来游去，互相聊天。

有许多有趣的故事，现在想想还能会心一笑。游戏里有一个职业是服待，是给人加血的职业，我有个朋友选择在玩，因为一来平时打怪不用加血，二来魔法值总是不够用，所以总是坐在地上（回复魔法值更快一些）看大家打怪，不过总坐着会很无聊，我们在忙着打怪也没什么空陪他聊天，有一次他从家里旁了一本《圣经》来玩游戏，说无聊时给我们念念，就这样我们断断续续的看完了一本《圣经》。有时旁边的路人也会停下来听两耳朵，还有人问这是不是NPC？（游戏设定的人，就是假人）

有一次我和波波在挂机，打出一张青骨卡（骸骨士兵卡，暴击+9%），盗贼的最爱。那时还没有交易所，我摆摊叫卖一个下午卖了600万，我和波波一人300万。那种巨款在手天下我有的感觉，那种拆迁一夜暴富的感觉，太美妙了！后来，波波花了75万买个苹果头饰（上面还插一根箭）到处得瑟。我有钱后，看这个也舍不得买，看那也舍不得花，最后买5000瓶红药水存在仓库存着。再后身上揣着几百万游戏没玩了，这种钱没花出去人没了的感觉好落寞。

还有法师雷电越级杀蜈蚣，下水道杀盗虫拣垃圾，跑地图总是迷路，普拉德隆到处是摆摊，那种赶集的感觉，真是历历在目。可惜这款优秀的游戏最后被外挂毁了！

 

 

这次RO手游90%还原了当年的PC版内容，画面精美、声音动听、操作方便、人气爆棚。不但让当年的老玩家重温经典，也让新玩家认识了这款游戏。虽然游戏非常优秀，可是我玩了两天就没玩了，不是我不想玩，是不忍玩。如果想在游戏中展露头角，只能不停的打怪升级，打怪升级的最好方法就是挂机，不停的挂机，挂机让等级提高，等级提高就可以换个更强怪物区域挂机。然后用不同的装备和技能搭配去挂机，和别人组队去挂机，不挂机就没有等级、没有卡片、没有装备。手机24小时开着挂机，都怕电池过烫会爆炸，后来听高人说用安卓摸拟器来挂机，这样手机就能歇着了。我深深的觉得这款游戏就是永恒的挂机！

还有一点就是没有朋友一起玩，没有朋友再好玩的游戏都是孤独的。有朋友一起哪怕扫雷、打80分也好玩。

总之《仙境传说RO》是一款不错的游戏，重拾精典，良心作品，我给8分。

 

by ·0评论

读书：

​出行：

技术：

游戏：

本周是最惨淡的一周，除了加班没有任何事发生。周三通宵后第二天继续上班、周六白天加班晚上还通宵。这是第一次这样高强度加班，但实际产出的价值和效率是个问号，这可能就是国企特色吧。

 

by ·0评论

上次年会有个同事抽奖得到一个小米手环，我比较感兴趣去官网上查了查些参数功能，觉得价格不贵便入手了一款试试，现在使用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元卖出去。我觉得电子产品主要是体验服务，不像手表、乐器、首饰、衣物等买新的有纪念、情怀、卫生、热爱等元素附加其中。

by ·0评论
最近刚完成一个“复杂”的项目，其实项目本身不复杂，只是需求没有计划，跟着领导思路不停的变化，并且只给我们正常开发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;}

总结，IE6并不可怕只是繁琐，掌握了IE6的调试方法和思想，基本上其它浏览器都可以搞定，只是时间和工作量问题。前端技术对一个人的综合能力要求非常高，需要的不单是技术能力，更多是方法、心态、规代等综合能力。

by ·0评论

读书：《魔兽世界》–06永恒之井

​出行：南京军区总院，老朱草莓园

技术：

游戏：《仙境传说RO：守护永恒的爱》

 

 

采草莓是一项很有趣的体验，有大有小、有红有白，刚采下的草莓没有一点破损，表皮微硬、口感鲜美。第一次能敞开畅吃草莓，第一次把草莓当苹果来吃。