设计与开发
设计与开发

有关开发的一些疯言疯语

设计与开发

有关开发的一些疯言疯语

设计与开发留下评论

移动端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

未完待续…

javascript 设计与开发留下评论

如何判断微信浏览器？

最近围绕微信工作平台的需求越来越多，所以就需要判断访问者是否为微信浏览器。

PHP方法：利用PHP的“_SERVER ”数组“HTTP_USER_AGENT”项，获取该页面的用户代理的信息，来完成这个工作。

<?php
echo $_SERVER["HTTP_USER_AGENT"];
?>

【winows/chrome】 输出结果：

weixin

Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36

而【ios7/weixin】下输出结果：

viewfile

Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Mobile/11B554a MicroMessenger/5.0.3

在字符串中可以看出“MicroMessenger ”为微信浏览器版本，所以可以使用“MicroMessenger”参数，来判断访问来源是否为“微信浏览器”。

if(strpos($_SERVER['HTTP_USER_AGENT'],"MicroMessenger "))
{
	echo "Hello Weixin";
}

Javascript方法：

function is_weixn(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
}
php 设计与开发留下评论

PHP QR Code类库生成二维码

由于二维码被广泛使用，现在在web开发中不得不经常生成各种二维码。可以利用PHP类库“PHP QR Code”来生成一种常见的二维码——QR码。

类库下载URL: http://phpqrcode.sourceforge.net/

qrlib.php 是完整版，官方的调用实例：

QRcode::png('code data text', 'filename.png'); // creates file 

QRcode::png('some othertext 1234'); // creates code image and outputs it directly into browser

phpqrcode.php 是合并版，只有一个文件，但生成速度较慢且不太准确。使用方法：

//
include "phpqrcode/phpqrcode.php; 

$data=“http://www.hiheng.com”;  //二维码数据

$filename = $errorCorrectionLevel.'|'.$matrixPointSize.'.png'; //生成的文件名

$errorCorrectionLevel = 'L';   //纠错级别 L | M | Q | H
$matrixPointSize = 4;    //每个黑点的像素 1~10
QRcode::png($data,$filename,$errorCorrectionLevel,$matrixPointSize);
//
design 设计与开发留下评论

广告创意中的3B原则

3B原则是从创意入手提出的beauty（美女）、beast（动物）、baby（婴儿），以此为表现手段的广告符合人类关注自身生命的天性，最容易赢得消费者的注意和喜欢。也被称为“ABC原则”，即animal、beauty和child。

Google Images 日本 广告 《Fashion Show with Google》
“谷歌搜索”跟“时尚”有什么关系？ 看日本导演Kosai Sekine用“美女”来解决这个问题的。广告清新亮丽，创意让人眼前一亮，顺便还介绍了Google强大的图片搜素、色彩搜索、相似图片等功能。

design 设计与开发2条评论

IOS7发布后关于“扁平化”与“拟物化”的思考。

设计十诫的第一条和最后一条：

1、好的设计是创新的。
……
10、好的设计是极简的

IOS7的发布让“扁平化（Flat Design）”和“拟物化（Skeuomorphism）”的争论变得愈演愈烈，这比上次微软发布Metro 来的还要强烈。

为何IOS的改变会引起这样的争议？
我想这跟苹果公司一直以来作为的“拟物化”设计的的领军形象不无关系。我们可以回想，iphone发布时，将手机的物理拨号键以触屏软件的形式植入ios系统开始，或者从imac桌面那一个个跳动的水晶图标开始，再或者在ibook像翻开一本真实的图书一样来阅读，苹果公司一直在引领了“拟物化”设计的浪潮。而新发布的IOS7现在开始推动“扁平化设计”，这样颠覆性转变必然会引起大家的争议。

拟物化的优势是什么？
“当你应用中的可视化对象和操作按照现实世界中的对象与操作仿造，用户就能快速领会如何使用它。（ iOS Human Interface Guidelines）” 也就是说以模拟实物的视觉设计和交互体验，让用户完全不用去抽象的理解就可以直观的认知和使用。
拟物化设计在视觉上有着很高的识别性，让原本抽象的产品形象变得具有亲和力，更加优雅，在使用上降低用户的学习门槛。

推荐我最喜欢的拟物化设计App：Paper by FiftyThree

拟物化的劣势是什么？
在追求拟物化设计的浪潮中，出现了另外一些的问题。
一、视觉设计：上面有说，拟物设计具有很高的识别性、质感、亲和力。
但是盲目的追求拟物化设计需要付出更高的开发成本，在移动设备的小尺寸屏幕里不能高效的利用的有限的空间。
二、移动设备上的平面操作毕竟与现实生活中有着巨大的区别，盲目的拟物有时候反而会对用户造成困惑。
三、既然拟物是一个模仿过程，这就限制了开发者的创新和想象间，产品容易臃肿且局限。

拟物与极简是矛盾的吗？
我不这么认为，苹果公司是一家崇尚极简主义的公司，在过去的一段时间里，苹果以优雅的拟物设计和极简的产品体验，真正的做到了简单而丰富，我的小外甥女拿到IPAD不需要教她就可以自己玩的不亦乐乎。

扁平化设计的优势和劣势
扁平化设计就是用最简单、最轻量级甚至抽象的方法来传达产品本身核心内容或功能，也就是说“扁平化设计”并不追求画面的质感、重量感、甚至产品的实际形态。优秀的扁平化设计给人感觉简洁、整齐、清晰，所有的功能一目了然，没有什么是多余的。因此“扁平化”可以更高效的利用空间，给用户最少的干扰去理解产品内容。

但是扁平化设计太过简洁，识别性极差，容易审美疲劳，缺少亲和力。最重要的是，抽象的表达提高了学习成本。举一个例子大家就明白：拟物化设计就像“象形文字”，全世界人不用学习都能猜出它所表达的大概意思，但是它的表达却非常模糊和局限，而扁平化设计就像抽象的现代文字，你必须通过学习才能理解它所表达的意思，但表达精确而丰富。（PS:我并不是说“拟物化设计”原始，而是举例说明他们之间直观的感受）

推荐我最喜欢的扁平化设计App： Any.do

为什么IOS7开始推动扁平化设计？

“It’s very easy to be different, but very difficult to be better（标新立异、与众不同，这很容易做到，但要做到比现有的更好，这很难。）”
——Jonathan Ive

我在本文开头所引用的设计十诫中的两条描述，在IOS7发布后似乎给人传达了这两个信息：创新、极简。
同时，我也有个猜想：Google glass已经公测，传说中的Apple iWatch也越来越近，电子产品似乎正在往穿戴市场发展。穿戴式的电子产品体积更小，屏幕空间有限，而扁平化设计恰恰能够更好的利用空间。

设计与开发留下评论

IFTTT，用微信更新facebook

IFTTT ，通过API授权，根据“if this then that”的逻辑，自动帮你完成不同应用之间的互联。通过IFTTT，可以在不翻墙的情况下，使用“微信”来更新你的“facebook”。就像这样：

iphone-ifttt

配置教程请戳这里：http://www.zhaoyuhao.com/work/show/90

另外在配置过程中需要还是翻墙授权，可以看下之前的博文：《正常使用GOOGLE及facebook的hosts文件》。