Rallentendo http://www.imallen.com/blog Allen's Memories Sun, 06 Feb 2011 05:40:27 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 [转载]每日设计三推（十）2.21-3.10 http://www.imallen.com/blog/2010/03/article-set-about-design-10/ http://www.imallen.com/blog/2010/03/article-set-about-design-10/#comments Fri, 12 Mar 2010 05:23:51 +0000 Allen http://www.imallen.com/blog/?p=239 每日设计三推是不得不看的文集, 现在看来也不得不转了, 每次的推荐都能看上很久, 很有营养~
原文地址: http://blog.xiqiao.info/2010/03/10/653

99 Brilliant Examples of Infrared Photography

99张经典的红外摄影。

红外线指光谱红色以外的部分波长，肉眼无法感知，但特殊装备的摄设备可以记录下这个区域的波长，红外线成像摄影的范围通常在700~900纳米之间。

1960年以来，艺术家们已经开始尝试模拟红外线摄影。一张红外摄影照片乍看，像一张黑白照片，但仔细观察可以发现，那些传统摄影中明亮的东西比如天空，在红外线摄影成像上会呈现暗色，但那些通常看起来比较暗的物体（比如绿色的枝叶）会变得很亮。

记录这种不可见的光对于所有摄影师而言都是富有挑战和趣味的实验。但一直有结果无法预置、昂贵，不可控等因素，所以使用传统的摄影设备来完成这一尝试非常困难，许多摄影师也绕道而行。数码摄影技术的成熟解决了这些障碍，使更多的人加入这一挑战，创作出大量令人惊异的作品。

An Explosion of Adobe Fireworks Resources

Fireworks 资源集中营。Fireworks随着adobe cs4套装的推出，重出江湖，但对应的资源比较难找。本文收集了大量用于fw的紧跟潮流的资源，大部分还是免费的。

50 Inspiring Portfolio Designs

我们一直在寻找灵感，特别是涉及到web设计的适合。我们永不厌倦地浏览众多设计师们的作品，找到任何可以让web设计变得更酷的布局、配色、样式、排版等。这里有我们精选出的50个鼓舞人心的设计，它们包含了众多的可能性。

Showcase Of Web Design In Germany

德国web设计赏析。这是一个诞生了著名哲学家、诗人、作曲家、著名汽车和啤酒的国家，也生活着一批具有才华和高知名度的web设计师。

101 Dizzying Spiral Staircases & Twisted Architectural Art Photos

101款令人炫目的螺旋楼梯及其艺术摄影。

35 Inspiring Examples of Transparency in Logo Design

35个激发灵感的案例：在logo设计中运用透明度

本文展示了设计者们如何创造性地使用透明度和叠合效果，打造出独特的设计风格。

A Myriad of Vintage Grunge Patterns From Across the Web

纹理精选，超过450个免费或收费的纹理设计资源，可以被用于几乎任何风格的图形或web设计中，并可以作为背景来润色矢量文件。它们干净优雅，不会喧宾夺主。

Applying Mathematics To Web Design

web 设计中的数学。

数学是美丽的。而且一直是建筑和艺术设计中的一部分，但一直没有发挥到web设计中。本文打开这个空白，讲解了如何将那些优雅而精巧的比例、秩序、对称和限制运用到你的布局设计中。你可以运用它们，但不要受制于它们。

27 Trendy And Unique Website Header Designs

27个流行而别致的网站header区设计。

网站中最重要的区域，访问者第一眼接触到的地方。除了放下导航、Logo、宣传口号外，别忘了加一些能让人记住你的元素。

30+ Artist Interpretations of Mario and Luigi

你所不知道的超级玛丽。

红帽子、背带裤的水管工和蘑菇，这个人们童年记忆中的经典形象在不同的艺术家笔下有不同的演绎。

50 Inspiring iPhone Application Websites

50个设计惊艳的iphone 应用的网站。iphone应用程序的共同之处是拥有一个设计非常专业的网站。它们看起来如此惊人，配色、优雅的排版、照片、空间以及对比的运用，可以持续激发设计师们的灵感。坐下来欣赏这些鼓舞人心的设计吧。

100+ Resources for WordPress Theme Developers

WP 模版开发者的资源大全。内容多得吓人。

Stunning Infographics and Data Visualization

Infograhic ：用视觉表现信息、数据和知识。使用图形来解释复杂的信息，最常见的应用就是标志和地图。而今天，媒体、技术写作和教育上的应用让infograhics 发展成了一种艺术。

50 Free UI and Web Design Wireframing Kits, Resources and Source Files

50个免费的UI和web设计资源：包括线框图元件包、浏览器窗口、表单元素、网格、Mac OS X 元件，移动UI元件等。产品/原型设计师们拿去吧。

Showcase of Floral Typography

装饰字体设计赏析——字体+藤蔓+花卉的组合变形设计

Choosing The Best CSS Framework: A Complete Guide

css框架选用指南大全

选用css框架来创建网站前端的理由很多，可以加快开发速度，使网站更协调美观，还可以帮助消除那些讨厌的兼容性问题。但也拥有一个陡峭的学习曲线。并没有一个市场上最好的框架，只有最合适的。不同的框架针对不同的类型、需求、设计师。一些框架适合初学者，一些适合需要控制更多的人。

本文告诉你应该如何正确选择框架，并介绍和比较了现在流行的一些框架系统，

66 Examples of Perfect SlideShow Presentation in Web Design

最近的一个设计趋势是 slideshow在web首页上的运用。和tab的流行一样，更少的空间更多的内容，更多的选择。本文列举了66个slideshow的经典设计，这类有针对性的选辑真是实用主义设计师的大爱。

40 Romantic Photographs Shot in the Rain

40张非常浪漫的雨景摄影。 阴雨天对于大部分摄影师而言是出行不宜的天气，但对于有心的人，雨滴、水雾和涟漪都是绝好的场景。

Mobile Web Design: Tips and Best Practices

去年，美国有超过6300万人使用移动设备上网，预测2013年全球将有超过17亿的移动互联网用户。这些数字提醒专业人员应该尽快学习在移动设备进行设计和开发。

大多数情况下你不需要学习任何新的技术，但需要解决标准和设计尺寸的问题，取得一个兼容、友好的界面。本文提供了许多技巧和建议。

Inspiration: Fantastic Logos Across the Color Spectrum

灵感：logo与色系

所有成功Logo的设计有赖于一个伟大的图案组合和非凡的文字设计技巧。设计logo不像表面看起来那样简单，它可能耗费数小时打草稿，经历数小时犹豫、反复和挫折，完稿可能也会花费数小时。本文搜集了一些出色的设计，并按色系分组。

Photoshop Keyboard Shortcuts Cheat Sheet (PDF)

记不住ps的快捷键？那是你方法不对。从重新记忆你的键盘开始吧。准备好打印机~

A Look into Registration Buttons in Web Design

web设计中的注册按钮。用户交互型网站比以信息/内容为中心的网站要难设计得多。该类网站的目标首先是将访客转化为用户。而注册按钮是这目标的第一步。设计师应该和可用性研究者一起努力，利用视觉上的引导、反差、强调、文案、广告等不遗余力地吸引访客的注意。

30 Incredible Examples of Urban Decay Photography

城市里的建筑物或地区，一旦被遗弃就会快速衰老，破败失修。乍看这些废墟充满令人绝望的颓败，但有才华的摄影师却能在这里寻找到美丽而惊人的画面。

60 Excellent Gadget Photoshop and Illustrator Tutorials

60个绝佳的设备鼠绘教程。在ps或AI设计或重绘那些质感惊艳、招人喜爱的电子设备，是一种难以置信的技能，本文提供的60个教程，从Ipad到mp3、CD播放器、数位板、耳机，包含了路径、质感、光阴描绘的诸多技巧，也可以快速提高你的软件使用技能。

27 Best Looking Free Drupal 6 Themes

27款免费的Drupal6 模版。以前推过一篇44 Marvelous Sites Powerd by Drupal 44个使用Drupal系统搭建的不可思议的网站。

Drupal是一个和WP类似但比它繁复得多的开源自助CMS系统。有兴趣的同学可以尝试一下它。



]]> http://www.imallen.com/blog/2010/03/article-set-about-design-10/feed/ 3 Firebug Lite for Google Chrome http://www.imallen.com/blog/2010/02/firebug-lite-for-google-chrome/ http://www.imallen.com/blog/2010/02/firebug-lite-for-google-chrome/#comments Sun, 28 Feb 2010 15:25:52 +0000 Allen http://www.imallen.com/blog/?p=226 做 Web 前端开发的必然用 (过) Firefox 的 Firebug 插件, WebKit 自带的 Developer Tools 固然很美也很好用. 但是还是 Firebug 更顺手, 这样一来统一了测试工具也能提高 Debug 的效率.

不过目前只是 Lite 版的测试版本, 功能较 Firefox 版少一些.

插件一多, 对 Chrome 也是越来越有爱了~ FlashBlock 有了, Firebug 有了, 对我来说只少一个 FlashGot 了~

Firebug Lite for Google Chrome 插件官网地址:
https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench

]]> http://www.imallen.com/blog/2010/02/firebug-lite-for-google-chrome/feed/ 3 JSON 格式的省市信息 http://www.imallen.com/blog/2010/02/province-and-city-inf-in-json-format/ http://www.imallen.com/blog/2010/02/province-and-city-inf-in-json-format/#comments Tue, 09 Feb 2010 03:39:17 +0000 Allen http://www.imallen.com/blog/?p=200 项目里又用到了联动的省市信息, 其实不涉及第三级地区信息的时候, 直接写在 JSON 里要比多次和服务器交互轻量且方便快捷的多. 所以自己转了一组数据, 应该比较精简了. 这里只给了 JSON, 具体怎么联动怎么构造 select 有太多的文章了, 大同小异. 有必要的话再附吧.

最近工作收获很多, 过年放假期间稍稍整理一下~

具体代码请查看全文.

省市信息

var city = [{"n":"北京市","c":["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云县","延庆县"]},{"n":"上海市","c":["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","南汇区","奉贤区","崇明县"]},{"n":"天津市","c":["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","宁河县","静海县","蓟县"]},{"n":"重庆市","c":["万州区","涪陵区","渝中区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","北碚区","万盛区","双桥区","渝北区","巴南区","黔江区","长寿区","綦江县","潼南县","铜梁县","大足县","荣昌县","璧山县","梁平县","城口县","丰都县","垫江县","武隆县","忠县","开县","云阳县","奉节县","巫山县","巫溪县","石柱土家族自治县","秀山土家族苗族自治县","酉阳土家族苗族自治县","彭水苗族土家族自治县","江津市","合川市","永川市","南川市"]},{"n":"河北省","c":["石家庄市","唐山市","秦皇岛市","邯郸市","邢台市","保定市","张家口市","承德市","沧州市","廊坊市","衡水市"]},{"n":"山西省","c":["太原市","大同市","阳泉市","长治市","晋城市","朔州市","晋中市","运城市","忻州市","临汾市","吕梁市"]},{"n":"内蒙古自治区","c":["呼和浩特市","包头市","乌海市","赤峰市","通辽市","鄂尔多斯市","呼伦贝尔市","巴彦淖尔市","乌兰察布市","兴安盟","锡林郭勒盟","阿拉善盟"]},{"n":"辽宁省","c":["沈阳市","大连市","鞍山市","抚顺市","本溪市","丹东市","锦州市","营口市","阜新市","辽阳市","盘锦市","铁岭市","朝阳市","葫芦岛市"]},{"n":"吉林省","c":["长春市","吉林市","四平市","辽源市","通化市","白山市","松原市","白城市","延边朝鲜族自治州"]},{"n":"黑龙江省","c":["哈尔滨市","齐齐哈尔市","鸡西市","鹤岗市","双鸭山市","大庆市","伊春市","佳木斯市","七台河市","牡丹江市","黑河市","绥化市","大兴安岭地区"]},{"n":"江苏省","c":["南京市","无锡市","徐州市","常州市","苏州市","南通市","连云港市","淮安市","盐城市","扬州市","镇江市","泰州市","宿迁市"]},{"n":"浙江省","c":["杭州市","宁波市","温州市","嘉兴市","湖州市","绍兴市","金华市","衢州市","舟山市","台州市","丽水市"]},{"n":"安徽省","c":["合肥市","芜湖市","蚌埠市","淮南市","马鞍山市","淮北市","铜陵市","安庆市","黄山市","滁州市","阜阳市","宿州市","巢湖市","六安市","亳州市","池州市","宣城市"]},{"n":"福建省","c":["福州市","厦门市","莆田市","三明市","泉州市","漳州市","南平市","龙岩市","宁德市"]},{"n":"江西省","c":["南昌市","景德镇市","萍乡市","九江市","新余市","鹰潭市","赣州市","吉安市","宜春市","抚州市","上饶市"]},{"n":"山东省","c":["济南市","青岛市","淄博市","枣庄市","东营市","烟台市","潍坊市","济宁市","泰安市","威海市","日照市","莱芜市","临沂市","德州市","聊城市","滨州市","荷泽市"]},{"n":"河南省","c":["郑州市","开封市","洛阳市","平顶山市","安阳市","鹤壁市","新乡市","焦作市","濮阳市","许昌市","漯河市","三门峡市","南阳市","商丘市","信阳市","周口市","驻马店市"]},{"n":"湖北省","c":["武汉市","黄石市","十堰市","宜昌市","襄樊市","鄂州市","荆门市","孝感市","荆州市","黄冈市","咸宁市","随州市","恩施土家族苗族自治州","仙桃市","潜江市","天门市","神农架林区"]},{"n":"湖南省","c":["长沙市","株洲市","湘潭市","衡阳市","邵阳市","岳阳市","常德市","张家界市","益阳市","郴州市","永州市","怀化市","娄底市","湘西土家族苗族自治州"]},{"n":"广东省","c":["广州市","韶关市","深圳市","珠海市","汕头市","佛山市","江门市","湛江市","茂名市","肇庆市","惠州市","梅州市","汕尾市","河源市","阳江市","清远市","东莞市","中山市","潮州市","揭阳市","云浮市"]},{"n":"广西壮族自治区","c":["南宁市","柳州市","桂林市","梧州市","北海市","防城港市","钦州市","贵港市","玉林市","百色市","贺州市","河池市","来宾市","崇左市"]},{"n":"海南省","c":["海口市","三亚市","五指山市","琼海市","儋州市","文昌市","万宁市","东方市","定安县","屯昌县","澄迈县","临高县","白沙黎族自治县","昌江黎族自治县","乐东黎族自治县","陵水黎族自治县","保亭黎族苗族自治县","琼中黎族苗族自治县","西沙群岛","南沙群岛","中沙群岛的岛礁及其海域"]},{"n":"四川省","c":["成都市","自贡市","攀枝花市","泸州市","德阳市","绵阳市","广元市","遂宁市","内江市","乐山市","南充市","眉山市","宜宾市","广安市","达州市","雅安市","巴中市","资阳市","阿坝藏族羌族自治州","甘孜藏族自治州","凉山彝族自治州"]},{"n":"贵州省","c":["贵阳市","六盘水市","遵义市","安顺市","铜仁地区","黔西南布依族苗族自治州","毕节地区","黔东南苗族侗族自治州","黔南布依族苗族自治州"]},{"n":"云南省","c":["昆明市","曲靖市","玉溪市","保山市","昭通市","丽江市","思茅市","临沧市","楚雄彝族自治州","红河哈尼族彝族自治州","文山壮族苗族自治州","西双版纳傣族自治州","大理白族自治州","德宏傣族景颇族自治州","怒江傈僳族自治州","迪庆藏族自治州"]},{"n":"西藏自治区","c":["拉萨市","昌都地区","山南地区","日喀则地区","那曲地区","阿里地区","林芝地区"]},{"n":"陕西省","c":["西安市","铜川市","宝鸡市","咸阳市","渭南市","延安市","汉中市","榆林市","安康市","商洛市"]},{"n":"甘肃省","c":["兰州市","嘉峪关市","金昌市","白银市","天水市","武威市","张掖市","平凉市","酒泉市","庆阳市","定西市","陇南市","临夏回族自治州","甘南藏族自治州"]},{"n":"青海省","c":["西宁市","海东地区","海北藏族自治州","黄南藏族自治州","海南藏族自治州","果洛藏族自治州","玉树藏族自治州","海西蒙古族藏族自治州"]},{"n":"宁夏回族自治区","c":["银川市","石嘴山市","吴忠市","固原市","中卫市"]},{"n":"新疆维吾尔自治区","c":["乌鲁木齐市","克拉玛依市","吐鲁番地区","哈密地区","昌吉回族自治州","博尔塔拉蒙古自治州","巴音郭楞蒙古自治州","阿克苏地区","克孜勒苏柯尔克孜自治州","喀什地区","和田地区","伊犁哈萨克自治州","塔城地区","阿勒泰地区","石河子市","阿拉尔市","图木舒克市","五家渠市"]},{"n":"台湾省","c":["台北市","高雄市","基隆市","新竹市","台中市","嘉义市","台南市","台北县","桃园县","新竹县","苗栗县","台中县","彰化县","南投县","云林县","嘉义县","台南县","高雄县","屏东县","宜兰县","花莲县","台东县","澎湖县","金门县","连江县"]},{"n":"香港特别行政区","c":["中西区","东区","南区","湾仔区","九龙城区","观塘区","深水埗区","黄大仙区","油尖旺区","离岛区","葵青区","北区","西贡区","沙田区","大埔区","荃湾区","屯门区","元朗区"]},{"n":"澳门特别行政区","c":["澳门市花地玛堂区","澳门市圣安多尼堂区","澳门市大堂区","澳门市望德堂区","澳门市风顺堂区","海岛市嘉模堂区","海岛市圣方济各堂区"]}];

应用举例

该例初始化省份信息并联动城市信息, 习惯用 jQuery, 其他 JS 框架的请自行修改代码.
额, 写着写着觉得干脆写成 jQuery 的 Plugin 吧…

点此下载本样例
点此查看本样例的效果

文件: js/city-plugin-imallen.js

/***
 * 插件名称: 中国省市信息联动插件
 * 作者: Allen Hsu
 * 网站: www.imallen.com
 * 个人, 商用皆可, 但转载请保留版权信息, 谢谢~
 */
 
$._cityInfo = [{"n":"北京市","c":["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云县","延庆县"]},{"n":"上海市","c":["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","南汇区","奉贤区","崇明县"]},{"n":"天津市","c":["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","宁河县","静海县","蓟县"]},{"n":"重庆市","c":["万州区","涪陵区","渝中区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","北碚区","万盛区","双桥区","渝北区","巴南区","黔江区","长寿区","綦江县","潼南县","铜梁县","大足县","荣昌县","璧山县","梁平县","城口县","丰都县","垫江县","武隆县","忠县","开县","云阳县","奉节县","巫山县","巫溪县","石柱土家族自治县","秀山土家族苗族自治县","酉阳土家族苗族自治县","彭水苗族土家族自治县","江津市","合川市","永川市","南川市"]},{"n":"河北省","c":["石家庄市","唐山市","秦皇岛市","邯郸市","邢台市","保定市","张家口市","承德市","沧州市","廊坊市","衡水市"]},{"n":"山西省","c":["太原市","大同市","阳泉市","长治市","晋城市","朔州市","晋中市","运城市","忻州市","临汾市","吕梁市"]},{"n":"内蒙古自治区","c":["呼和浩特市","包头市","乌海市","赤峰市","通辽市","鄂尔多斯市","呼伦贝尔市","巴彦淖尔市","乌兰察布市","兴安盟","锡林郭勒盟","阿拉善盟"]},{"n":"辽宁省","c":["沈阳市","大连市","鞍山市","抚顺市","本溪市","丹东市","锦州市","营口市","阜新市","辽阳市","盘锦市","铁岭市","朝阳市","葫芦岛市"]},{"n":"吉林省","c":["长春市","吉林市","四平市","辽源市","通化市","白山市","松原市","白城市","延边朝鲜族自治州"]},{"n":"黑龙江省","c":["哈尔滨市","齐齐哈尔市","鸡西市","鹤岗市","双鸭山市","大庆市","伊春市","佳木斯市","七台河市","牡丹江市","黑河市","绥化市","大兴安岭地区"]},{"n":"江苏省","c":["南京市","无锡市","徐州市","常州市","苏州市","南通市","连云港市","淮安市","盐城市","扬州市","镇江市","泰州市","宿迁市"]},{"n":"浙江省","c":["杭州市","宁波市","温州市","嘉兴市","湖州市","绍兴市","金华市","衢州市","舟山市","台州市","丽水市"]},{"n":"安徽省","c":["合肥市","芜湖市","蚌埠市","淮南市","马鞍山市","淮北市","铜陵市","安庆市","黄山市","滁州市","阜阳市","宿州市","巢湖市","六安市","亳州市","池州市","宣城市"]},{"n":"福建省","c":["福州市","厦门市","莆田市","三明市","泉州市","漳州市","南平市","龙岩市","宁德市"]},{"n":"江西省","c":["南昌市","景德镇市","萍乡市","九江市","新余市","鹰潭市","赣州市","吉安市","宜春市","抚州市","上饶市"]},{"n":"山东省","c":["济南市","青岛市","淄博市","枣庄市","东营市","烟台市","潍坊市","济宁市","泰安市","威海市","日照市","莱芜市","临沂市","德州市","聊城市","滨州市","荷泽市"]},{"n":"河南省","c":["郑州市","开封市","洛阳市","平顶山市","安阳市","鹤壁市","新乡市","焦作市","濮阳市","许昌市","漯河市","三门峡市","南阳市","商丘市","信阳市","周口市","驻马店市"]},{"n":"湖北省","c":["武汉市","黄石市","十堰市","宜昌市","襄樊市","鄂州市","荆门市","孝感市","荆州市","黄冈市","咸宁市","随州市","恩施土家族苗族自治州","仙桃市","潜江市","天门市","神农架林区"]},{"n":"湖南省","c":["长沙市","株洲市","湘潭市","衡阳市","邵阳市","岳阳市","常德市","张家界市","益阳市","郴州市","永州市","怀化市","娄底市","湘西土家族苗族自治州"]},{"n":"广东省","c":["广州市","韶关市","深圳市","珠海市","汕头市","佛山市","江门市","湛江市","茂名市","肇庆市","惠州市","梅州市","汕尾市","河源市","阳江市","清远市","东莞市","中山市","潮州市","揭阳市","云浮市"]},{"n":"广西壮族自治区","c":["南宁市","柳州市","桂林市","梧州市","北海市","防城港市","钦州市","贵港市","玉林市","百色市","贺州市","河池市","来宾市","崇左市"]},{"n":"海南省","c":["海口市","三亚市","五指山市","琼海市","儋州市","文昌市","万宁市","东方市","定安县","屯昌县","澄迈县","临高县","白沙黎族自治县","昌江黎族自治县","乐东黎族自治县","陵水黎族自治县","保亭黎族苗族自治县","琼中黎族苗族自治县","西沙群岛","南沙群岛","中沙群岛的岛礁及其海域"]},{"n":"四川省","c":["成都市","自贡市","攀枝花市","泸州市","德阳市","绵阳市","广元市","遂宁市","内江市","乐山市","南充市","眉山市","宜宾市","广安市","达州市","雅安市","巴中市","资阳市","阿坝藏族羌族自治州","甘孜藏族自治州","凉山彝族自治州"]},{"n":"贵州省","c":["贵阳市","六盘水市","遵义市","安顺市","铜仁地区","黔西南布依族苗族自治州","毕节地区","黔东南苗族侗族自治州","黔南布依族苗族自治州"]},{"n":"云南省","c":["昆明市","曲靖市","玉溪市","保山市","昭通市","丽江市","思茅市","临沧市","楚雄彝族自治州","红河哈尼族彝族自治州","文山壮族苗族自治州","西双版纳傣族自治州","大理白族自治州","德宏傣族景颇族自治州","怒江傈僳族自治州","迪庆藏族自治州"]},{"n":"西藏自治区","c":["拉萨市","昌都地区","山南地区","日喀则地区","那曲地区","阿里地区","林芝地区"]},{"n":"陕西省","c":["西安市","铜川市","宝鸡市","咸阳市","渭南市","延安市","汉中市","榆林市","安康市","商洛市"]},{"n":"甘肃省","c":["兰州市","嘉峪关市","金昌市","白银市","天水市","武威市","张掖市","平凉市","酒泉市","庆阳市","定西市","陇南市","临夏回族自治州","甘南藏族自治州"]},{"n":"青海省","c":["西宁市","海东地区","海北藏族自治州","黄南藏族自治州","海南藏族自治州","果洛藏族自治州","玉树藏族自治州","海西蒙古族藏族自治州"]},{"n":"宁夏回族自治区","c":["银川市","石嘴山市","吴忠市","固原市","中卫市"]},{"n":"新疆维吾尔自治区","c":["乌鲁木齐市","克拉玛依市","吐鲁番地区","哈密地区","昌吉回族自治州","博尔塔拉蒙古自治州","巴音郭楞蒙古自治州","阿克苏地区","克孜勒苏柯尔克孜自治州","喀什地区","和田地区","伊犁哈萨克自治州","塔城地区","阿勒泰地区","石河子市","阿拉尔市","图木舒克市","五家渠市"]},{"n":"台湾省","c":["台北市","高雄市","基隆市","新竹市","台中市","嘉义市","台南市","台北县","桃园县","新竹县","苗栗县","台中县","彰化县","南投县","云林县","嘉义县","台南县","高雄县","屏东县","宜兰县","花莲县","台东县","澎湖县","金门县","连江县"]},{"n":"香港特别行政区","c":["中西区","东区","南区","湾仔区","九龙城区","观塘区","深水埗区","黄大仙区","油尖旺区","离岛区","葵青区","北区","西贡区","沙田区","大埔区","荃湾区","屯门区","元朗区"]},{"n":"澳门特别行政区","c":["澳门市花地玛堂区","澳门市圣安多尼堂区","澳门市大堂区","澳门市望德堂区","澳门市风顺堂区","海岛市嘉模堂区","海岛市圣方济各堂区"]}];
 
$.initProv = function(prov, city, defaultProv, defaultCity) {
	var provEl = $(prov);
	var cityEl = $(city);
	var hasDefaultProv = (typeof(defaultCity) != 'undefined');
 
	var provHtml = '';
 
	provHtml += '
<option>请选择</option>
 
';
	for(var i = 0; i &lt; $._cityInfo.length; i++) {
		provHtml += '
<option selected="selected" value="' + i + '">' + $._cityInfo[i].n + '</option>
 
';
	}
	provEl.empty().append(provHtml);
	$.initCities(provEl, cityEl, defaultCity);
	provEl.change(function() {
		$.initCities(provEl, cityEl);
	});
};
 
$.initCities = function(provEl, cityEl, defaultCity) {
	var hasDefaultCity = (typeof(defaultCity) != 'undefined');
	if(provEl.val() != '' &amp;&amp; parseInt(provEl.val()) &gt;= 0) {
		var cities = $._cityInfo[parseInt(provEl.val())].c;
		var cityHtml = '';
 
		cityHtml += '
<option>请选择</option>
 
';
		for(var i = 0; i &lt; cities.length; i++) {
			cityHtml += '
<option selected="selected" value="' + i + '">' + cities[i] + '</option>
 
';
		}
		cityEl.empty().append(cityHtml);
	} else {
		cityEl.empty().append('
<option>请先选择省份</option>
 
');
	}
};

文件: sample.html

 
<script src="js/jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="js/city-plugin-imallen.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></script>
 
<select id="prov"></select>
<select id="city"></select>

简要说明: JS 文件里定义了该插件的主体部分, 引用了 jQuery 以及该 JS 文件后, 使用方法如下.

$.initProv('#prov', '#city', '上海市', '闵行区');

其中 #prov 为省份信息的 select, #city 为城市信息的 select, 可以改为你的页面里相应元素. 可以是任意 $() 能识别的选择符, 例如 “#my_form select[name=prov]“.
后面的 “上海市” 和 “闵行区” 为可选的默认值, 用于在例如修改个人信息的页面里传入当前值.

本样例没有加 CSS, 样式方面自己把握吧.

上述例子最后传递的是 int, 你可以在后台程序里构造同样的序列, 也可以修改一下我的程序直接传字符串到后台.
只是花 10 分钟抛个砖, 不够完善的地方见谅.

]]> http://www.imallen.com/blog/2010/02/province-and-city-inf-in-json-format/feed/ 3 比较完整的 YouTube IPV6 地址 http://www.imallen.com/blog/2010/01/complete-youtube-ipv6-address/ http://www.imallen.com/blog/2010/01/complete-youtube-ipv6-address/#comments Sat, 30 Jan 2010 18:02:09 +0000 Allen http://www.imallen.com/blog/?p=196 嗯, 可以用上 IPV6 的同学改 hosts 就可以看 YouTube, 教育网真好~

  • 2010-03-09 更新 IPV6 地址为 2001:4860:4001:402::10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213

#Copy following lines into %windir%\System32\drivers\etc\hosts
#YouTube IPV6 Address
2001:4860:c004::68 www.youtube.com
2001:4860:c004::68 youtu.be
2001:4860:c004::68 gdata.youtube.com 
2001:4860:c004::68 help.youtube.com 
2001:4860:c004::68 upload.youtube.com 
2001:4860:c004::68 insight.youtube.com 
2001:4860:c004::68 img.youtube.com 
2001:4860:c004::68 s2.youtube.com
2001:4860:c004::68 youtube.com
2001:4860:c004::68 apiblog.youtube.com
2001:4860:c004::68 clients1.youtube.com
2001:4860:c004::68 d.yimg.com
2001:4860:c004::68 s.ytimg.com
2001:4860:c004::68 i.ytimg.com
2001:4860:c004::68 i1.ytimg.com
2001:4860:c004::68 i2.ytimg.com 
2001:4860:c004::68 i3.ytimg.com
2001:4860:c004::68 i4.ytimg.com
2001:4860:c004::68 qwqy.vp.video.l.google.com
2001:4860:4001:402::10 v1.lscache1.c.youtube.com
2001:4860:4001:402::10 v1.lscache2.c.youtube.com
2001:4860:4001:402::10 v1.lscache3.c.youtube.com
2001:4860:4001:402::10 v1.lscache4.c.youtube.com
2001:4860:4001:402::10 v1.lscache5.c.youtube.com
2001:4860:4001:402::10 v1.lscache6.c.youtube.com
2001:4860:4001:402::10 v1.lscache7.c.youtube.com
2001:4860:4001:402::10 v1.lscache8.c.youtube.com
2001:4860:4001:402::10 v2.lscache1.c.youtube.com
2001:4860:4001:402::10 v2.lscache2.c.youtube.com
2001:4860:4001:402::10 v2.lscache3.c.youtube.com
2001:4860:4001:402::10 v2.lscache4.c.youtube.com
2001:4860:4001:402::10 v2.lscache5.c.youtube.com
2001:4860:4001:402::10 v2.lscache6.c.youtube.com
2001:4860:4001:402::10 v2.lscache7.c.youtube.com
2001:4860:4001:402::10 v2.lscache8.c.youtube.com
2001:4860:4001:402::10 v3.lscache1.c.youtube.com
2001:4860:4001:402::10 v3.lscache2.c.youtube.com
2001:4860:4001:402::10 v3.lscache3.c.youtube.com
2001:4860:4001:402::10 v3.lscache4.c.youtube.com
2001:4860:4001:402::10 v3.lscache5.c.youtube.com
2001:4860:4001:402::10 v3.lscache6.c.youtube.com
2001:4860:4001:402::10 v3.lscache7.c.youtube.com
2001:4860:4001:402::10 v3.lscache8.c.youtube.com
2001:4860:4001:402::10 v4.lscache1.c.youtube.com
2001:4860:4001:402::10 v4.lscache2.c.youtube.com
2001:4860:4001:402::10 v4.lscache3.c.youtube.com
2001:4860:4001:402::10 v4.lscache4.c.youtube.com
2001:4860:4001:402::10 v4.lscache5.c.youtube.com
2001:4860:4001:402::10 v4.lscache6.c.youtube.com
2001:4860:4001:402::10 v4.lscache7.c.youtube.com
2001:4860:4001:402::10 v4.lscache8.c.youtube.com
2001:4860:4001:402::10 v5.lscache1.c.youtube.com
2001:4860:4001:402::10 v5.lscache2.c.youtube.com
2001:4860:4001:402::10 v5.lscache3.c.youtube.com
2001:4860:4001:402::10 v5.lscache4.c.youtube.com
2001:4860:4001:402::10 v5.lscache5.c.youtube.com
2001:4860:4001:402::10 v5.lscache6.c.youtube.com
2001:4860:4001:402::10 v5.lscache7.c.youtube.com
2001:4860:4001:402::10 v5.lscache8.c.youtube.com
2001:4860:4001:402::10 v6.lscache1.c.youtube.com
2001:4860:4001:402::10 v6.lscache2.c.youtube.com
2001:4860:4001:402::10 v6.lscache3.c.youtube.com
2001:4860:4001:402::10 v6.lscache4.c.youtube.com
2001:4860:4001:402::10 v6.lscache5.c.youtube.com
2001:4860:4001:402::10 v6.lscache6.c.youtube.com
2001:4860:4001:402::10 v6.lscache7.c.youtube.com
2001:4860:4001:402::10 v6.lscache8.c.youtube.com
2001:4860:4001:402::10 v7.lscache1.c.youtube.com
2001:4860:4001:402::10 v7.lscache2.c.youtube.com
2001:4860:4001:402::10 v7.lscache3.c.youtube.com
2001:4860:4001:402::10 v7.lscache4.c.youtube.com
2001:4860:4001:402::10 v7.lscache5.c.youtube.com
2001:4860:4001:402::10 v7.lscache6.c.youtube.com
2001:4860:4001:402::10 v7.lscache7.c.youtube.com
2001:4860:4001:402::10 v7.lscache8.c.youtube.com
2001:4860:4001:402::10 v8.lscache1.c.youtube.com
2001:4860:4001:402::10 v8.lscache2.c.youtube.com
2001:4860:4001:402::10 v8.lscache3.c.youtube.com
2001:4860:4001:402::10 v8.lscache4.c.youtube.com
2001:4860:4001:402::10 v8.lscache5.c.youtube.com
2001:4860:4001:402::10 v8.lscache6.c.youtube.com
2001:4860:4001:402::10 v8.lscache7.c.youtube.com
2001:4860:4001:402::10 v8.lscache8.c.youtube.com
2001:4860:4001:402::10 v9.lscache1.c.youtube.com
2001:4860:4001:402::10 v9.lscache2.c.youtube.com
2001:4860:4001:402::10 v9.lscache3.c.youtube.com
2001:4860:4001:402::10 v9.lscache4.c.youtube.com
2001:4860:4001:402::10 v9.lscache5.c.youtube.com
2001:4860:4001:402::10 v9.lscache6.c.youtube.com
2001:4860:4001:402::10 v9.lscache7.c.youtube.com
2001:4860:4001:402::10 v9.lscache8.c.youtube.com
2001:4860:4001:402::10 v10.lscache1.c.youtube.com
2001:4860:4001:402::10 v10.lscache2.c.youtube.com
2001:4860:4001:402::10 v10.lscache3.c.youtube.com
2001:4860:4001:402::10 v10.lscache4.c.youtube.com
2001:4860:4001:402::10 v10.lscache5.c.youtube.com
2001:4860:4001:402::10 v10.lscache6.c.youtube.com
2001:4860:4001:402::10 v10.lscache7.c.youtube.com
2001:4860:4001:402::10 v10.lscache8.c.youtube.com
2001:4860:4001:402::10 v11.lscache1.c.youtube.com
2001:4860:4001:402::10 v11.lscache2.c.youtube.com
2001:4860:4001:402::10 v11.lscache3.c.youtube.com
2001:4860:4001:402::10 v11.lscache4.c.youtube.com
2001:4860:4001:402::10 v11.lscache5.c.youtube.com
2001:4860:4001:402::10 v11.lscache6.c.youtube.com
2001:4860:4001:402::10 v11.lscache7.c.youtube.com
2001:4860:4001:402::10 v11.lscache8.c.youtube.com
2001:4860:4001:402::10 v12.lscache1.c.youtube.com
2001:4860:4001:402::10 v12.lscache2.c.youtube.com
2001:4860:4001:402::10 v12.lscache3.c.youtube.com
2001:4860:4001:402::10 v12.lscache4.c.youtube.com
2001:4860:4001:402::10 v12.lscache5.c.youtube.com
2001:4860:4001:402::10 v12.lscache6.c.youtube.com
2001:4860:4001:402::10 v12.lscache7.c.youtube.com
2001:4860:4001:402::10 v12.lscache8.c.youtube.com
2001:4860:4001:402::10 v13.lscache1.c.youtube.com
2001:4860:4001:402::10 v13.lscache2.c.youtube.com
2001:4860:4001:402::10 v13.lscache3.c.youtube.com
2001:4860:4001:402::10 v13.lscache4.c.youtube.com
2001:4860:4001:402::10 v13.lscache5.c.youtube.com
2001:4860:4001:402::10 v13.lscache6.c.youtube.com
2001:4860:4001:402::10 v13.lscache7.c.youtube.com
2001:4860:4001:402::10 v13.lscache8.c.youtube.com
2001:4860:4001:402::10 v14.lscache1.c.youtube.com
2001:4860:4001:402::10 v14.lscache2.c.youtube.com
2001:4860:4001:402::10 v14.lscache3.c.youtube.com
2001:4860:4001:402::10 v14.lscache4.c.youtube.com
2001:4860:4001:402::10 v14.lscache5.c.youtube.com
2001:4860:4001:402::10 v14.lscache6.c.youtube.com
2001:4860:4001:402::10 v14.lscache7.c.youtube.com
2001:4860:4001:402::10 v14.lscache8.c.youtube.com
2001:4860:4001:402::10 v15.lscache1.c.youtube.com
2001:4860:4001:402::10 v15.lscache2.c.youtube.com
2001:4860:4001:402::10 v15.lscache3.c.youtube.com
2001:4860:4001:402::10 v15.lscache4.c.youtube.com
2001:4860:4001:402::10 v15.lscache5.c.youtube.com
2001:4860:4001:402::10 v15.lscache6.c.youtube.com
2001:4860:4001:402::10 v15.lscache7.c.youtube.com
2001:4860:4001:402::10 v15.lscache8.c.youtube.com
2001:4860:4001:402::10 v16.lscache1.c.youtube.com
2001:4860:4001:402::10 v16.lscache2.c.youtube.com
2001:4860:4001:402::10 v16.lscache3.c.youtube.com
2001:4860:4001:402::10 v16.lscache4.c.youtube.com
2001:4860:4001:402::10 v16.lscache5.c.youtube.com
2001:4860:4001:402::10 v16.lscache6.c.youtube.com
2001:4860:4001:402::10 v16.lscache7.c.youtube.com
2001:4860:4001:402::10 v16.lscache8.c.youtube.com
2001:4860:4001:402::10 v17.lscache1.c.youtube.com
2001:4860:4001:402::10 v17.lscache2.c.youtube.com
2001:4860:4001:402::10 v17.lscache3.c.youtube.com
2001:4860:4001:402::10 v17.lscache4.c.youtube.com
2001:4860:4001:402::10 v17.lscache5.c.youtube.com
2001:4860:4001:402::10 v17.lscache6.c.youtube.com
2001:4860:4001:402::10 v17.lscache7.c.youtube.com
2001:4860:4001:402::10 v17.lscache8.c.youtube.com
2001:4860:4001:402::10 v18.lscache1.c.youtube.com
2001:4860:4001:402::10 v18.lscache2.c.youtube.com
2001:4860:4001:402::10 v18.lscache3.c.youtube.com
2001:4860:4001:402::10 v18.lscache4.c.youtube.com
2001:4860:4001:402::10 v18.lscache5.c.youtube.com
2001:4860:4001:402::10 v18.lscache6.c.youtube.com
2001:4860:4001:402::10 v18.lscache7.c.youtube.com
2001:4860:4001:402::10 v18.lscache8.c.youtube.com
2001:4860:4001:402::10 v19.lscache1.c.youtube.com
2001:4860:4001:402::10 v19.lscache2.c.youtube.com
2001:4860:4001:402::10 v19.lscache3.c.youtube.com
2001:4860:4001:402::10 v19.lscache4.c.youtube.com
2001:4860:4001:402::10 v19.lscache5.c.youtube.com
2001:4860:4001:402::10 v19.lscache6.c.youtube.com
2001:4860:4001:402::10 v19.lscache7.c.youtube.com
2001:4860:4001:402::10 v19.lscache8.c.youtube.com
2001:4860:4001:402::10 v20.lscache1.c.youtube.com
2001:4860:4001:402::10 v20.lscache2.c.youtube.com
2001:4860:4001:402::10 v20.lscache3.c.youtube.com
2001:4860:4001:402::10 v20.lscache4.c.youtube.com
2001:4860:4001:402::10 v20.lscache5.c.youtube.com
2001:4860:4001:402::10 v20.lscache6.c.youtube.com
2001:4860:4001:402::10 v20.lscache7.c.youtube.com
2001:4860:4001:402::10 v20.lscache8.c.youtube.com
2001:4860:4001:402::10 v21.lscache1.c.youtube.com
2001:4860:4001:402::10 v21.lscache2.c.youtube.com
2001:4860:4001:402::10 v21.lscache3.c.youtube.com
2001:4860:4001:402::10 v21.lscache4.c.youtube.com
2001:4860:4001:402::10 v21.lscache5.c.youtube.com
2001:4860:4001:402::10 v21.lscache6.c.youtube.com
2001:4860:4001:402::10 v21.lscache7.c.youtube.com
2001:4860:4001:402::10 v21.lscache8.c.youtube.com
2001:4860:4001:402::10 v22.lscache1.c.youtube.com
2001:4860:4001:402::10 v22.lscache2.c.youtube.com
2001:4860:4001:402::10 v22.lscache3.c.youtube.com
2001:4860:4001:402::10 v22.lscache4.c.youtube.com
2001:4860:4001:402::10 v22.lscache5.c.youtube.com
2001:4860:4001:402::10 v22.lscache6.c.youtube.com
2001:4860:4001:402::10 v22.lscache7.c.youtube.com
2001:4860:4001:402::10 v22.lscache8.c.youtube.com
2001:4860:4001:402::10 v23.lscache1.c.youtube.com
2001:4860:4001:402::10 v23.lscache2.c.youtube.com
2001:4860:4001:402::10 v23.lscache3.c.youtube.com
2001:4860:4001:402::10 v23.lscache4.c.youtube.com
2001:4860:4001:402::10 v23.lscache5.c.youtube.com
2001:4860:4001:402::10 v23.lscache6.c.youtube.com
2001:4860:4001:402::10 v23.lscache7.c.youtube.com
2001:4860:4001:402::10 v23.lscache8.c.youtube.com
2001:4860:4001:402::10 v24.lscache1.c.youtube.com
2001:4860:4001:402::10 v24.lscache2.c.youtube.com
2001:4860:4001:402::10 v24.lscache3.c.youtube.com
2001:4860:4001:402::10 v24.lscache4.c.youtube.com
2001:4860:4001:402::10 v24.lscache5.c.youtube.com
2001:4860:4001:402::10 v24.lscache6.c.youtube.com
2001:4860:4001:402::10 v24.lscache7.c.youtube.com
2001:4860:4001:402::10 v24.lscache8.c.youtube.com
]]> http://www.imallen.com/blog/2010/01/complete-youtube-ipv6-address/feed/ 5 [转载] iPhone应用设计趋势 http://www.imallen.com/blog/2009/11/iphone-app-design-trends/ http://www.imallen.com/blog/2009/11/iphone-app-design-trends/#comments Fri, 27 Nov 2009 19:19:33 +0000 Allen http://www.imallen.com/blog/?p=185 转载自：http://blog.b3inside.com/design/iphone-app-design-trends/

iPhone App Design Trends
Smashing Magazine版权所有
作者：Smashing Magazine
译者：UCD翻译小组，波希米亚
原文地址： http://www.smashingmagazine.com/2009/10/09/iphone-app-design-trends/

在过去的两年里，你能想象的一些很烂的应用设计也入驻了优雅的iPhone。通过它周边的宣传，使得世界各地的设计者们都利用这个新的移动工具来一展身手。结果虽搞出了成千上万的iPhone应用，但通常不好用也不直观。然而有些设计师则是花费大量时间为创造更好用的界面而努力着（是的，这些都是好用且有创意的界面）。

本文探究了如何让设计师利用图形元素和屏幕交互，制作出易识别又易操控的iPhone应用。目的在于揭示iPhone应用设计的普遍趋势和设计方法——请注意，这些未必是设计和可用性中的最佳观点。

1. 镜像iPhone原生界面元素

“告诉他们你要告诉他们的，去告诉他们，然后告诉他们你告诉过他们。”（译者：作者在表达她当时的感受吧） 在你的应用中创建一套新的OS可能很有趣，但在移动设备上处理时，人们只想简明扼要。简明扼要的意思是，设计师得遵循OS的流程，创建一个无说明的应用，给最终用户去操作。镜像出用户熟悉的布局和界面元素可以节省时间和精力。所以这看起来是设计iPhone应用时的一个便利途径啊。

Facebook (iTunes Link)
在新版Facebook 3.0中，你会发现这样一个栅格布局，用户可以通过左右滑动屏幕进入更多分类。因为它镜像了苹果的原生界面，所以用户根本不用再学如何使用。网页设计中存在类似方法：用户会预料到logo在左上角，导航也在上面，等等。Facebook把这它延续到了移动应用上，用大按钮可以轻松的被识别和点击。

facebook

Where (iTunes link)
Where使用了相同的概念，它允许用户通过左右滑动屏幕来获取更多信息。

where

Tweetdeck (iTunes link)
Tweetdeck是用户界面设计中一个很好的例子。高亮显示的最近更新多吸引注意力啊。此应用能以归类或标签列表形式，在新窗口中显示更新。但不会替换掉一个已显示的对话菜单，它可以作为跳转到具体类目或清掉消息提醒的跳板。

tweetdeck2

2. 简化界面

也许简化用户界面听起来像是个机械任务，但在用户界面设计背后又隐藏着什么呢？答案很简单：就是用户。用户需要什么？什么令他们感到友好和模糊？你如何提供他们所需的东西，以便不用时刻去关注那些重要的信息？

提到在小空间内展示大量核心功能，Facebook的第一版就做的非常到位。当然，这里指的是展示所有信息和拥有直观的界面。3.0与之相比，你会发现它使用“跳板”的方式来简化界面，既保持了直观又维护了功能。

Facebook Animation in iPhone App Design Trends

Flickr (iTunes link)
Flickr 对功能、视觉设计和小屏幕移动设备显示这三者间平衡上的处理同样出色。试想之：Flickr的核心是什么？照片。它的用户或许不希望看到又大又笨的导航；他们想要的是照片。Flickr已经设法调整核心功能，去掉那些标题和该死的导航。事实上，很多导航元素已经在照片本身的交互上实现了。真是个既简单又聪明的办法。

flickr

3. 模拟硬件界面

不少应用程序打破了传统iPhone界面的操作，利用它独特的手指手势进行控制。它们中一些是用户熟悉的硬件界面，光鲜亮丽的外表不禁让人回味起那种第一次点击的新鲜感。但应用程序不会因为你玩的多而变脏。

Convertbot (iTunes link)
Convertbot的轮盘让我们想起小学时候，不同的是它更具特色、更新颖、更有创意。

convertbot

Little Snapper (iTunes Link)
Little Snapper模拟的就是一台普通数码单反的旋钮。

littleSnapper

iHandy Level (iTunes Link)
iHandy Level的样子和功能都仿至一个真实好用的水平仪。

iHandy_level

Where To? (iTunes Link)
这个应用看起来像是属于奔驰车的。豪华的皮革、磨砂的按钮：上乘的技术。我们可以想象，每个按钮按下去都那么结实，都那么有力道。

where_to

4. 丰富、漂亮的列表视图

当你对列表设计的最新趋势感到兴奋时，你已经被确诊为一位“geek designer”了。人们遇到一个列表时会做些什么？当然，只是略读。那怎样把人们决定什么有趣变得更轻松？没错，更多的视觉暗示！

基本上，用户通过寻找下一步的快照，来决定是否需要了解更多。而又大又漂亮的按钮就是途径之一。通过色彩、图标和排版让人感觉这个大按钮背后隐藏着好多信息。

Delivery Status Touch (iTunes Link)
看看Delivery Status是怎样通过不同颜色的大按钮来区分不同品牌的。并用良好的排版建立起信息层次。

delivery_status

Be Happy Now (iTunes Link)
Be Happy Now的大按钮通过柔和的色彩体系与明亮清晰的字体传达“be happy”的主旨。

beHappyNow

Next Read (iTunes link)
Next Read这个应用允许在朋友间分享图书。在这里所有书都是关于时下某一特定话题的，包括书名、封面、评分以及评论数。注意看每个导航选项的间隙和留白，它让这个区域更容易被点击。

nextRead

Nike (iTunes link)
Nike为女性开发了这个应用，精致的视觉元素和插画都很符合它的品牌。在设计上打破了传统界面的束缚，充分表达了品牌，不让用户为如何使用它而感到困惑。

nike

Borange (iTunes link)
Borange是一款“社交情况”的应用，它可以帮你统筹与朋友们的约会。列表展示了很多信息：要一起出行的朋友，本地会议，并可以形象的表示哪个朋友有空。

borange

5. 分层的界面

一些应用把界面设计成层，利用iPhone本身独有的特性让其固定，或垂直、水平滚动。这种方法有几个好处：

  1. 减少了必要的传统导航元素数量（即更少的按钮有助于避免界面混乱）
  2. 为用户获取信息提供了快速通道
  3. 有更多屏幕空间承载有用信息

Tweetie (iTunes Link)
Tweetie利用层把具体信息传递给你每位Twitter好友。你看，所有信息都装在这一个屏幕里！

tweetie

Barnes & Noble (iTunes link)
Barnes & Noble让你可以快速的通过上面的层进入新商品，通过下面的层切换到更多分类。

barnesandnoble

USA Today (iTunes link)
USA Today在它的图片一栏中对层做了细微改变：利用滑动面板显示信息区块。尽管第一眼看上去很乱，但能很容易跳过它。最有趣的部分在于，在每个面板里，都可以通过左右滑动来查看更多图片。

usaToday1

myPantone (iTunes link)
我们何尝不希望色卡少一点？上面的拾色器就是一个层，你可以通过色彩范围、类别来取色，也可以通过滚动打开/关闭细节窗口。

pantone

6. 在列表中使用图标

在小屏幕上，图标可给应用的可用性和导航性带来巨大提升。让我们通过几个应用的例子看看它的优势。

iStudiez (iTunes Link)
这个应用利用各种不同的教学用具图标，清晰地表达了应用的目的。通过这些具象的暗示，学生瞄一眼就知道今天发生了什么。

istudiesz

Top Floor (iTunes Link)
Top Floor利用简单易识别的图标，快速引导用户进入他们选择的类别。

topFloor

New York Times
应用可以让你想做什么就做什么，是不是很不可思议哦？对于一个像纽约时报样的应用，用户必然有他喜欢的章节。你猜怎么着？纽约时报这样做：它让你自定义标签栏，把你喜欢的章节都加进来。拖动一个图标到标签栏即可。不过这样做也不是十全十美，在视觉呈现上打了折扣。

wallStJournal

Filemaker(iTunes link)
另一个漂亮图片的案例，说它好是因为图标的使用上不混乱、不混淆。设计师永远不要为了使用图标而使用图标。作为设计师，我们希望图标能够尽可能的反应出用户所选的内容。Filemaker，干的漂亮。

filemaker

7. 插图的使用

依赖图形的应用程序越来越受欢迎，因为开发者试图让她们的应用与众不同。偶尔奏效，但不经常。越是传统的设计就越可能存在可用性问题。在推出一个“有创意”界面的产品前一定要进行可用性测试。

Magnetic Personalities (iTunes link)
这是个非常好的例子，看看如何让按钮变得不像标准按钮那么普通。

magneticPersonalities

SugarSync (iTunes link)
这个界面可以轻松地走遵循传统列表视图的路线。但设计师没有这么做，而是通过一个漩涡将视觉连接在一起来传达这个应用。这很不寻常，同时需要花点时间来适应它。

sugarsync

Mom Maps (iTunes link)
另一个使用插图取得成功的例子，它将很多概念都融入了这个应用。

momMaps

8. 使用手势

经典的线性导航看上去很枯燥：一个按钮连一个按钮，来表现一堆东西的列表，或表现这样那样的交互。事实并非如此壮观，只是比喻一下。在公共事业的应用上使用有创意的交互可能性很大。

Mover (iTunes link)
Mover列举了如何使用手势来分享联系方式、照片和书签。打开两个设备，把文件从这个共享到那个里。

mover

ABC Animals (iTunes link)
这个应用寓教于乐。用手指在屏幕上书写字母是另一个通过触摸iPhone控制的例子。

abcanimals

All Recipes (iTunes link)
此应用可以让你通过手势来混合众多元素，作为你的美餐。

allRecipies

]]> http://www.imallen.com/blog/2009/11/iphone-app-design-trends/feed/ 1 iM Pinyin – 在线 JS 拼音输入法 http://www.imallen.com/blog/2009/10/im-pinyin-js-ime/ http://www.imallen.com/blog/2009/10/im-pinyin-js-ime/#comments Sun, 18 Oct 2009 17:48:55 +0000 Allen http://www.imallen.com/blog/?p=177 测试地址: http://www.imallen.com/pinyin/

没有太多的说明, 在线 JS 中文输入法, 词库是另一个 JS 输入法上搬过来的, 代码重写了.
功能更强, 使用更方便, 浏览器兼容性更好.

]]> http://www.imallen.com/blog/2009/10/im-pinyin-js-ime/feed/ 8 作品留档 – 上海诚鑫科技印务有限公司 http://www.imallen.com/blog/2009/09/web-design-5151print/ http://www.imallen.com/blog/2009/09/web-design-5151print/#comments Mon, 21 Sep 2009 09:54:04 +0000 Allen http://www.imallen.com/blog/?p=161 上海诚鑫科技印务有限公司

项目名称: 上海诚鑫科技印务有限公司网站

语言平台: HTML (纯静态)

网站地址: http://www.5151print.com

开发说明: 08 年暑假 Kenmars 地方搞来的单子, 时间比较短, 资金比较少, 项目也比较简单. 我出的 PSD 和 HTML, 纯练手. 正式上线时有所改动. Kenmars 在首页给 Logo 加的 Flash 效果也很有灵气.

截图

[nggallery id=5]

]]> http://www.imallen.com/blog/2009/09/web-design-5151print/feed/ 0 Smart Video – WordPress 视频分享插件 http://www.imallen.com/blog/2009/09/smart-video-plugin-for-wordpress/ http://www.imallen.com/blog/2009/09/smart-video-plugin-for-wordpress/#comments Fri, 04 Sep 2009 07:37:40 +0000 Allen http://www.imallen.com/blog/?p=103 写在前面

心血来潮更新了原来的 aVideo 插件, 因为比原来的更 Smart 了, 而且 aVideo 这名字不咋滴, 干脆改名叫 Smart Video 了. 实现方法不是原来的 filter 了, 因为 WP 有了 “add_shortcode” 这么个好用的 API. 另外参考 NextGEN Gallery 的 TinyMCE 插件, 写了一个 TinyMCE 的插件, 用来更快捷地插入视频.

突然发现官网有个叫 Smart Video Plus 的插件, 虽然他是 Plus, 但是不要搞混.

下载地址

点击这里下载 Smart Video 1.5.1 (smart-video-1.5.1.zip)

更新记录

= 1.5.1 =
* 屏蔽了视频中的官网连接.
* 修正了优酷视频无法全屏的问题.

= 1.5 =
* 加入对 Mofile 魔方网视频的支持.
* JW FLV Player 升级.

= 1.4 =
* 加入对 Vimeo 和搜狐视频的支持.

= 1.3 =
* 加入了 JW Player, 自定义的 Flash (swf/flv) 均自动添加 JW Player 以提供进度控制. (感谢世风的建议)

= 1.2 =
* 修正目录结构错误, 第一次传 WordPress Plugin 的 SVN, 结构没搞清楚, Sorry.

= 1.1 =
* 修正了土豆视频的识别错误.

= 1.0 =
* 第一个版本的 Smart Video 发布.

安装方法

同一般的 WP 插件, 解压到 “wp-content/plugins” 后在后台激活即可, 等我传到 WordPress 官网插件列表后也可以直接通过后台安装 (WP 的这功能真不错).

使用方法

纯代码的使用方法和原先的 aVideo 类似, 但有所改动, 即视频 ID 需要通过 id=”theid” 来指定, 例如:

1
2

[youku id="XMTA3MzUwMjcy"]
[tudou id="J-2bug0o0u4"]

而 Smart Video 较 aVideo 的改进主要在于 TinyMCE 插件的加入, 在文章编辑页面, 可以看到这个图标:

Smart Video for TinyMCE

点击后会弹出 Smart Video 的插入窗口, 分三个 Tab, 分别用于智能分析, 手动插入以及 Flash 插入.

1. 智能分析

Smart Video Magic Insert

通过智能分析的方法插入视频, 只需要直接将该视频网址 (是观看该视频的网址而非网站提供的转载地址) 复制到网页地址栏, 点击插入, 后台就能自动分析网址并转换成相应代码, 目前支持 YouTube, 土豆网, 优酷, 酷6, QQ Video, 新浪视频. 视频的尺寸可选, 若未指定, 默认按该网站提供的默认尺寸展示.

2. 手动插入

Smart Video Manual Insert

手动插入和智能分析的最终代码是相同的, 但是视频 ID 部分则是用户手动输入的. 以上网站的 ID 如下面列表中花括号标识的部分:

1
2
3
4
5
6

http://v.ku6.com/show/{nNjHZUTAi79x3atP}.html
http://v.youku.com/v_show/id_{XMTE2ODE2MjUy}.html
http://www.tudou.com/programs/view/{J-2bug0o0u4}/
http://video.qq.com/v1/videopl?v={6mkvdlafJbU}
http://www.youtube.com/watch?v={-v4osKSQrrk}
http://you.video.sina.com.cn/b/{24114739}-1371694022.html

3. 插入 Flash

Smart Video Insert Flash

用于直接插入 Flash, 输入 Flash 地址及 Flash 尺寸 (可选), 就可以方便地展示 Flash.
自 1.1 版本起加入了 JW Player, 自定义的 Flash (swf/flv) 均自动添加 JW Player 以提供进度控制.

当然你也可以完全不用这个插件手动输入代码.

写在最后

最后, 您可以随意转载, 但转载请保留出处及必要的作者信息, 谢谢. 如果有什么问题或者意见/建议, 请在这里留言告诉我.

]]> http://www.imallen.com/blog/2009/09/smart-video-plugin-for-wordpress/feed/ 75 瑟米莱伯公司网站完工 http://www.imallen.com/blog/2009/08/semilab-official-site-finished/ http://www.imallen.com/blog/2009/08/semilab-official-site-finished/#comments Mon, 10 Aug 2009 10:51:17 +0000 Allen http://www.imallen.com/blog/?p=88 瑟米莱伯贸易有限公司

项目名称: 瑟米莱伯贸易有限公司网站

语言平台: PHP + MySQL

网站地址: http://semilab.vicp.net (临时, 待顶级域名转入)

开发说明: 项目时间较短, 因此选择了比较快捷的开发方式. 导致最终成品的质量也有所降低. 开发中对于功能的需求出现过误解产生了一定量的返工, 所以开发前的沟通和策划还是非常重要的. 开发过程中也有很多收获, 想办法解决了一些小问题, 比如文件下载的重命名等等, 想必在以后也会用的到.

下面是一些截图

[nggallery id=4]

]]> http://www.imallen.com/blog/2009/08/semilab-official-site-finished/feed/ 2 给 TEE7 加了 Sitemap 和 RSS http://www.imallen.com/blog/2009/08/updated-tee7-with-sitemap-and-rss/ http://www.imallen.com/blog/2009/08/updated-tee7-with-sitemap-and-rss/#comments Mon, 10 Aug 2009 07:00:33 +0000 Allen http://www.imallen.com/blog/?p=74 七潮网已支持 RSS 订阅

闲暇给 TEE7 (七潮网) 加入了 Sitemap 和 RSS, 一方面方便用户的订阅, 另一方面也有利于 SEO.

TEE7 的 RSS 地址是 http://www.tee7.com/rss

订阅方法

1. Google Reader

TEE7 Google Reader

进入 Google Reader, 点击左上方的 “Add a subscription”, 在弹出的对话框中输入 “www.tee7.com”, 并点击 “Add” 添加, 即成功订阅了 TEE7 的 RSS.

2. QQ 阅读空间

TEE7 QQ 阅读空间

首先进入 QQ 邮箱, 点击左下的 “阅读空间” 进入 QQ 阅读空间. 然后在右侧找到添加订阅的连接, 同样输入 “www.tee7.com” 后点击订阅完成订阅.

3. 抓虾

TEE7 抓虾

进入我的频道后找到左上方添加博客的连接, 同样输入 “www.tee7.com” 后点击订阅完成订阅.

4. 其他

其他的 RSS 阅读网站, RSS 阅读软件, 或者是 RSS 阅读的 Widgets 中可以通过类似的方法订阅 TEE7 的更新.

]]> http://www.imallen.com/blog/2009/08/updated-tee7-with-sitemap-and-rss/feed/ 0