CSS3 transform-origin

div
{
transform: rotate(45deg);
transform-origin:20% 40%;

-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */

-webkit-transform: rotate(45deg); /* Safari 和 Chrome */
-webkit-transform-origin:20% 40%; /* Safari 和 Chrome */

-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */

-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}

ps:不支持ie9以下浏览器

64位windows上iTunes12.1升级后iOS真机运行无法使用的解决办法

苹果更新了iTunes12.1,64位windows系统上的底层库发生较大变化。
在这种情况下操作iOS设备真机运行,有几个解决方案可选:
1. 2015年5月6日起发布的HBuilder,在菜单 工具-插件安装 界面中有一个ios连接插件。安装后重启可用。
2. 在本机安装一个iTools工具(百度一下就有),也可以正常真机运行。
3. 或者卸载iTunes12.1,重新安装iTunes12.0。重装时取消自动升级的选项

降级安装的时候,自动更新itunes和Apple软件不要勾;确认安装的版本(附12.0.1.26版本下载地址:http://pan.baidu.com/s/1gdxQ1G3)

真机运行、手机运行、真机联调常见问题:http://ask.dcloud.net.cn/article/97?notification_id-15364

动效集锦

http://www.zcool.com.cn/article/ZMTc5OTg0.html#commentMaoDian
如何快速保存App动效?http://www.uisdc.com/save-design-animation
动效并不是单纯的愉悦用户,更重要的目的是让用户明白这个环节会发生什么。

APP中的基本动作分三类:
指向性动效(滑动,弹出等)
提示性动效(滑动删除,下拉刷新等)
空间扩展(翻动,放大等)

case1:当进行某些操作后隐藏的内容会动态展开,不仅简化了初始界面,也让用户意识到“单击复选框”和“输入联系方式”之间是有联系的。
more

http://www.uisdc.com/animations-improve-payment-experience
http://www.uisdc.com/motion-ui-design-principles
http://www.uisdc.com/the-internet-motion-graphic
http://www.uisdc.com/smart-transitions-in-user-experience-design-1

全屏图片缩放

css:
.test{background-image:url(../images/banner1.jpg); background-repeat:no-repeat; background-position:center top;height:100vh;background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/banner1.jpg’,sizingMethod=’scale’)}

html(IE8中height100%无效解决方案)
<pre class=”html” name=”code”>
<style type=”text/css”>
html,body,.test{height:100%;}
</style>
</pre>

transform图片和文字变形

旋转:
transform:rotate(7deg); /* 顺时针旋转7度 */
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */

缩放:
transform:scale(2,2); /* 水平和垂直缩放2倍 */
-moz-transform:scale(2,2);
-webkit-transform:scale(2,2);
-o-transform:scale(2,2);
http://www.ueoo.me/upload/hover/hover1/index.html
http://www.ueoo.me/upload/hover/hover3/index.html

倾斜:
transform: skew(30deg, 30deg); 水平和垂直倾斜30度

移动:
transform: skew(45px, 150px);

改变基准点:
在使用transform方法进行文字或图像的变形时,是以元素的中心点为基准点进行的。使用transform-origin属性,可以改变变形的基准点。
用法:transform-origin: 10px 10px;
共两个参数,表示相对左上角原点的距离,单位px,第一个参数表示相对左上角原点水平方向的距离,第二个参数表示相对左上角原点垂直方向的距离;
两个参数除了可以设置为具体的像素值,其中第一个参数可以指定为left、center、right,第二个参数可以指定为top、center、bottom。

组合变形:
transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px); 变形的顺序从左到右依次进行,不同的顺序导致不同的变形结果

ios图层转场动画

属性解析
type:动画过渡类型
subtype:动画过渡方向
startProgress:动画起点(在整体动画的百分比)
endProgress:动画终点(在整体动画的百分比)

过渡效果
fade //交叉淡化过渡(不支持过渡方向) kCATransitionFade
push //新视图把旧视图推出去 kCATransitionPush
moveIn //新视图移到旧视图上面 kCATransitionMoveIn
reveal //将旧视图移开,显示下面的新视图 kCATransitionReveal
cube //立方体翻滚效果
oglFlip //上下左右翻转效果
suckEffect //收缩效果,如一块布被抽走(不支持过渡方向)
rippleEffect //滴水效果(不支持过渡方向)
pageCurl //向上翻页效果
pageUnCurl //向下翻页效果
cameraIrisHollowOpen //相机镜头打开效果(不支持过渡方向)
cameraIrisHollowClose //相机镜头关上效果(不支持过渡方向)

过渡方向
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromBottom

wordpress搬家小记

服务器绑定域名:服务器后台-》主机管理 -》管理 -》绑定域名

狗爹域名解析:manage my domains -》dns zone file -》CName-》edit -》Host: www -》Points to: 服务器IP(解析时间:1-2H,ping www.ueoo.me)

wordpress安装:上传wordpress安装压缩包至ftp -》服务器后台解压安装包-》在线安装

导出xml:wp后台-》工具-》导出 -》所有内容

导入xml:wp后台-》工具-》导入-》wordpress

文章内页404解决方法:wp后台-》设置-》固定链接-》默认

如何给错综复杂的功能做减法?

好的用户体验并不是说设身处地的为用户提供一切尽可能有的功能和服务,你的功能越复杂,也就意味着增加用户每次操作的难度与成本,这和用户流失量成正比。你以为用户会这样、会那样,用户想要这个、想要那个,但是,当你没有真正接触用户的时候,你的想法往往都是错 的。所以,理想状况下,我们需要不断的去从用户那里验证想法。在产品开发阶段,我们没办法从目标用户那里获取用户行为分析时,我们只能通过内部原型测试和 原型评审去验证想法并进行不断的再设计。

定性、定量研究之观察法

使用情景:在原型测试、原型评审期间,观察使用人员的操作流程,他点了哪里,他的集中注意力放在哪里,他的问题数量有多少,从而验证产品想法。
研究得出一条曲线,横轴表示用户数量,纵轴表示用户问题数量,当你面对越来越多用户的时候,你会发现这条曲线逐渐趋于平缓。

给#和风物语#打标签

产品定位:手游  咔哇咿  过家家  女生最爱  男生也玩    旅游城市

产品特征:加好友   探访好友   帮忙打扫   手动捡钱奖励多  扩地  扩建商店

产品特色:简单好玩   离线存储  时间碎片  产品生活化

关于任务:抓各种捣乱鬼  商店大特卖   任务单一  重复

其它:UI比例不协调  卡  包子被吃掉  bug

IE6 fixed

/* 除IE6的通用方法 */
.ie6fixed{position:fixed;right:0;top:50px}
/* IE6的特有方法 */
/* 修正IE6振动bug */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
* html .ie6fixed{position:absolute;right:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}

史上最有效率的一次原型设计

前端设计策划小组成立的第一天(2012.01.13 星期五),由于领导要求,可能对原型设计的概念和工时还不大了解(第一次合作嘛),要求我们当天就出原型,所以大家只好周末加班了。

大家配合得相当默契啊,5个人(一个主策、两个文字策划、两个交互)一人几个页面,不到一天的时间就把商城整站原型给搞定了!而且3个策划都是首次用Axure,太欢乐了~~

苦于没搞定Axure协作功能,未能保证版本统一和一致的输出,平时一个人做原型的时候,想都没想过这个功能。所以大家做完之后,我还要把大家做的整理到同一个rp文件里组装起来。

我们是这么做的:策划已经构思好整站的流程和模块,出的是jpg需求,然后我先画首页原型,包括头部搜索、导航、还有规范(1.统一商品的排列方式,做成公用模块;2.哪些页面使用哪种布局,宽度是一致的;3.全站公用分页;4.统一弹窗表现)等这些全局的东西都确认下来了,接下来的事情就好办了,按照模块分下去,比较复杂的购物车流程由主策来做,其它的我们几个人平均分一下,over~~ 当然在后期,我也偷偷做了很多优化,包括流程优化、模块的架构调整,功能模块增加,还有程序跟进的时候指出的一些遗漏点我们也都逐个完善了。所有的优化记录我都会在原型里做好版本记录,以便后续项目总结,同时告知项目其它成员版本迭代了什么,使得每次修改都有据可查,便于项目管理。