Hiheng

Hiheng

【转】5种实用App导航菜单设计方案

手机分辨率比桌面平台小很多,所以设计手机网站或是移动应用的时候,导航菜单都需要考虑周全,尽量保持简约和易用性高,这里我们整理了5种实用的移动手机App导航菜单设计方案,你可以尝试这些菜单设计模式用在你的新设计项目上,好用而且有新鲜感。

【转】新的APP演示良方:GIF动画

原文作者:Nataly Birch 译者:十萬個為什麼

每种事物都有回归的本能,长期以来,GIF动画在开发者当中,失去了它的统治地位,不再受欢迎,不再通用,近期它摆出了回击的姿态。尽管还是一如既往展示图像序列,但它不再像当年那些生硬的低画质视频,没有粗糙简陋的过渡效果。如今,GIF动画能够通过抢眼的效果和流畅的过渡,有效地聚集人气,给最终的动画一种柔滑精致的感观。

UI/UX开发者迅速估量了这种动画图片的潜力,它们虽小却非常有效,极具解释性。我们都知道,有时向客户或最终用户解释APP最后看起来将是什么样,会是多么困难、气人且耗时的事情;没有华丽的高质量截屏,精心绘制的用户界面配上一大堆解释和“手势”说明效果,并不怎么管用。只有视频和这些简短的GIF动画,才能轻松展示操作流程,并传达一款“活”APP的所有魅力,在众多功能组件之间,有效地展现交互。

颇具讽刺意味的是,我们的展示工具集中,最近补充了一种新工具,而它实际上一直以来就近在咫尺。

今天,我们汇集了一系列GIF动画作品,愉快地展现了各种移动应用的操作流程。

第一件作品是Dmitriy Chuta的Chapps,你可以欣赏它整个漂亮的动画效果,一组不同职业人员的照片卡。这张GIF图片展示了一种讨人喜爱的方式,通过令人愉快的视觉表现,来在数据库中进行选择和搜索。

First shot in Chapps

jQuery 1.9版本的变化

项目终于面临jquery 版本升级问题了,又要开始读各种文档,写各种demo。话说也很久没静下心来写码了。

.toggle(function, function, … ) 方法移除
toggle() 方法: 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
在 jQuery 1.9 版本中该方法被移除,未提供替换方法。

$.browser() 方法移除
在 jQuery 1.9 版本中该方法被移除,需要另写插件来完成。

.live() 方法移除
.live()方法:为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
在 jQuery 1.9 版本该方法被移除,升级后的方法用 “.on()” 来替换。

.die() 方法移除
.die() 方法:移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序。
在 jQuery 1.9 版本中“.live()”方法被移除,因此该方法也一样被删除。 由“.off()”来替代。

.sub() 方法移除
.sub方法: 可创建一个新的jQuery副本,不影响原有的jQuery对像。
在 jQuery 1.9 版本该方法被移除。


ajax事件需要绑定到document上
如.addBack()、 .addStart(),需要绑定在document。

jQuery官方文档:http://jquery.com/upgrade-guide/1.9/

【阅读】你开玩笑的,还是真觉得自己老了?

最近在学吉他,原因和动机都极简单,听了一段和旋演奏就发自内心的喜欢。喜欢就学,还需要其他理由么?学琴过程中恶补乐理,处处醍醐灌顶的快感。买琴选购仔细琢磨琢磨,都快能徒手画个结构图出来,这些都是收获。当然更多的是交流学习,自娱自乐带来的精神收获。

现在才开始学,有什么实际用处吗? —— 没有。
同样,为什么要每天阅读大量跟自己看似无关的文章?为什么吃美食要品品怎么就酸甜苦辣的恰到好处?为什么去逛完宜家还要琢磨商场是如何设计成一条路线无死角?看完春晚除了意料内的四面骂声是不是还要品品有那些亮点和改变?

这些都有什么实际的用处吗? 累不累啊~亲

没有,但是,我愿意相信任何丰富生命色彩的事物终将融进人的思考与认知。
—— hiheng

读到这篇文章有着强烈的共鸣感:学些有用的,是社会的要求。而上帝给我们智慧,应该更希望我们去学那些“没用的东西”。
原文作者:张佳玮

移动端WEB开发常见问题

项目的移动端开发工作量剧增,解决各种问题又没有时间去系统整理,在这里先做一个持续的碎片记录笔记。

一、meta标签声明移动端布局
常用的声明方式:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=2.0, user-scalable=1" />
  • width:控制 viewport 的大小,可以指定的一个像素值,如“1024”。常用特殊值: device-width (设备的宽度)。
  • height:同 width。
  • minimum-scale:允许用户缩放的最小比例,如:1.0(不可缩放)。
  • initial-scale:初始缩放比例,常用:1.0
  • maximum-scale:允许用户放大到的最大比例。
  • user-scalable:用户是否可以手动缩放。 值:0/1

二、移动端浏览器javascript判断方法:
《javascript判断手机/平板电脑浏览器》

二、微信浏览器的判断方法:
《如何判断微信浏览器?》

三、IOS下表单按钮显示默认风格(如图),无法按设计需求显示。
ios_submit
解决方法,取消IOS默认风格:

input[type=subimt],input[type=button]{-webkit-appearance: none;}

四、移动设备横竖切换时,页面字体变大问题。

CSS
-webkit-text-size-adjust: none;
text-size-adjust: none

未完待续…

【视频】我恨 “帕赫贝尔的卡农”!

作为史上最有名的半曲天王(为什么是半曲天王而非一曲天王,后面会解释), Pachelbel 一生致力于教会音乐的写作,J.S.巴赫的哥哥曾是他的学生。不过比较遗憾的是,他最传世的作品却是这样一首小曲,不知道 Pachelbel 地下有知的话,是否又会高兴呢?

现在网上所讲的这首「卡农」,正式的名称为 Canon and Gigue in D major。如今大多数人听到的都是卡农的那部分,吉格的那部分现在很少有人听。所以我说 Pachelbel 算是「半曲天王」。

还有,卡农其实是曲式的名称。它是用对位法写的一种复调音乐,一个旋律在数个声部依次出现,交叉进行,互相追逐,到最后的和弦合在一起。
——luckystar