iPad 的主页竖屏：

iPad 的主页横屏：

iPad 的 Blog 页竖屏：

iPad 的 Blog 页横屏：

点击iPad 上Safari 的分享菜单上面的 “添加到主屏幕” 就可以在 iPad 的桌面上添加本站的快捷访问图标，添加后有惊喜。

夏日要到了，酷热的天气，灿烂的阳光，想在夏日里获得众人的目光和赞美，快试试小白介绍的几招，一起打造清爽的夏日装，让在一切更加舒服，有活力。
嗯…咳咳。这是说视觉界面上设计的事，无论是web、移动或客户端，要想视觉更加清爽下面的建议都会有帮助的。

1.让布局更有空间感

脱掉！嗯…对的…
要想清爽，就得把身上多余的衣物，一层一层的脱掉！
在一个有限的空间里塞满大量的元素和信息，就算设计再华丽，信息再精彩，焦点还是无法长期停留在该空间。对于信息量丰富的界面，要想视觉清爽，空间感显得有为重要，这包括：主次信息之间的比例，各个信息模块之间的距离，单个模块里信息的间距。

2.使用简单的几何元素

曲线！嗯…也不完全这样理解…
脱掉厚重的衣物，身体的线条自然会显现出来，但想吸引更多的目光，那就得把线条练得好点。
在界面中使用简单几何元素做点缀或分割，有助于视觉焦点迅速寻找主要内容，便于信息的传达。
几何元素在人的思绪中是一种没有滞碍的概念，往往传达出干净有力，目的明确的态度和姿态，这最符合清爽的氛围。

3.留白和采用浅色系的邻近色

夏日，海滩上，鲜艳的色彩的确是夺目的主角。
但作为日常着装，那样的色彩就不耐看了，而简单浅色系则显得干净舒服。
色彩在界面的作用是营造体验氛围，为的是更好的突显内容，尽量减小使用中的干扰，建议太强烈的色彩不适于在以大量信息为主题的常用界面设计中。
适合营造氛围的邻近色特点是，层次丰富、活泼，既保持了统一的优点，却没单调、呆板的缺点。而浅色系的色彩与白色相搭配显得界面单纯、柔和、谐调，却有优雅、微妙的色感。

以上是小白的小小建议，愿你在设计界面时，希望界面清爽的时会有所帮助。

(via:http://uedc.163.com/5394.html)

现在要花这个春节的时间重新思考一下自己走的路子和对待事情的态度。现在的这个主题就是在这段时间的一个表示了。先这样吧。

这次改版是一个新的开始，所有文章需要点击导航栏的 Blog 链接进入才能浏览到了。还有 20%的东西没有完成。那也就等到春节过后再补上了。一切细节我就先保留了，等春节后把余下的20%完善了再透露好了。

使用过 Apple 产品的用户，都或许会注意到其包装和产品上的行小字“Designed by Apple in California”。我们或许会稍微留意下它的用意，然后这注意力可能稍纵即逝，无法深究其真正的含义。

我们都或许能够了解 Apple 是家注重细节的公司，自然它的产品和包装印制上这段话自然有其含义。这篇文章或许可以从设计师角度部分诠释 Apple 此做法的用意。
此篇为转载的译文，原文在： http://37signals.com/svn/posts/2710-designed-by-apple-in-california

– Split –

我曾经在很多场合中提起：“‘Designed by Apple in California’ 这段字，我是见过的所有包装上最为夺目的字符”。我的其中位读者迈克尔问我：

我同意您的看法，我第一眼看见这段字就让我难忘。
…
不过我很好奇，为什么您会相信“这些夺目的字符注
定会出现在不起眼的包装上”。

这句简单的标签出现在 Apple 的产品及其包装上至少已有十年的历史。（其实，我无法明确准确的时间说明 Apple 是从什么时候开始，但我记得在 2000 年的时候，苹果就在其 iPod 的包装上打上这行字了。）

这说明这句短语的历史是多么的悠久，同时对于 Apple 而言是多么的重要。

背景

“Designed by Apple in California” 这段字是多么的显眼。

当你拿到 Apple 产品的时候，打开包装的皮瓣或者内页那一刻，这段字通常会独立一行印在简洁的包装上 — 它太显眼了，你几乎不可能错过它。

然后，你缓缓的翻开包装，继续拿出你梦寐以求的设备 — 这个过程是多么的自然，同时这个体验让你近乎难忘。

情感

Apple 的使命之一是唤起了人们对艺术的感受。Apple 的每件产品，就好比匠人精心制作的作品，被精心包装后安全地送到家门一样。这件产品似乎顷刻间就被赋予了情感，就犹如它是被你所爱的人制造出来一样。

匠人们都会在自己得意的作品上签名。克莱默大师会将他自己的名字篆刻在每把他经手的刀上；佛蒙特设计的家具，在其每个产品不起眼的位置都留下自己的印记。爱德华建议每个设计师将他们设计的产品署名 — 这表明你是精心的造就了该产品，并赋予它最好的品质。

或许，我们能了解 Apple 这行字的用意即为如此。

此外，它标注的不是“Made by Apple in California”，而是被设计（Designed）的。我很难想到还有其公司会将设计（Design）放在如此高的地位。它的每件产品似乎注定是被设计出来而非制造。同时，这也是该公司使命的最好表述。

此时无声胜有声

平面设计领域中有句这样的话：

如果你想让它显眼，那么就把它放大吧！如果你想将其变
得更突出，那么加边框！仍然不够？那么就把他标红。

放大、加边框、标红，这些技巧明显是那些懒惰的设计师常用的伎俩。我们之所以认为这很愚蠢，原因之一就是它过于明显的表达了自己的意图。

话到此，我们或许能 Apple 熟谙这种微妙。Apple 通过突出传达这句话（绝对不会存在任何无视它的机会），来突出产品。这段文字小而优雅，就想是与产品本身浑然天成。我们感觉不到任何的意外和惊讶。

在我们阅读它以后，Apple 不需要任何过多的言语，去复述传达自身产品的品味和价值。因为，此刻用户已经了解。

那么， “Made in China” 呢？

– EOF –

(via:http://ucdchina.com/snap/8891)

PS：那么 “Designed by Warpflare” 呢？

关于成都一名的来历，据《太平环宇记》记载，是借用西周建都的历史经过，取周王迁岐“一年而所居成聚，二年成邑，三年成都”因此得名成都。五代十国时，后蜀皇帝孟昶偏爱芙蓉花，命百姓在城墙上种植芙蓉树，花开 时节，成都“四十里为锦绣”，故成都又被称为芙蓉城，简称“蓉城”。2001年出土的金沙遗址，已经将成都建城历史从公元前311年提前到了公元前611 年，超过了苏州， 成为中国未变遗址最长久的城市。

这个以成都的风景为主题的主题，武侯祠、杜甫草堂、宽窄巷子、锦里，16 张亲自拍摄的城市风景图， 10 张景点水印背景，也不能表达出我对这个城市的喜爱。这个是一个城市系列的主题。第一弹就给了成都。

之前发布过一个简化版。现在发布的是完整功能的版本，这个版本里面内置图片表情支持、主题后台设置选项、文章随机背景、内置 2 个自定义边栏(SideBar)。

内置 4 个配合主题功能的小工具(Widgets)：

评论图片表情：

其他主题细节：

1. 自带主题选项设置;
2. 随机背景;
3. 文章随机背景;
4. 支持 WP3.0 的自定义导航菜单;
5. 自带评论表情支持;
6. 预留广告位;
7. 预留统计代码位置;

想要看 DEMO预览点这里，购买点这里。

all because of you,CD will be better.
成都将会更加美丽,只因我们深爱这座城.

这是一个收费主题。要是不愿意购买的那就不要说别的什么打击的话了。光制作也是很花时间的。当然你有选择等待我的下一个免费主题的权利。

购买链接在左边边栏的顶部。

#2011-01-10 UpDate: City:ChengDu 1.2 更新内容:

• 使用横向多极菜单;
• 可以通过给主题选项设置背景图片显示;
• 添加对语言支持;
• IE6下修复的部分PNG透明问题;
• 添加编辑器的CSS样式支持;
• 部分CSS样式修复;

#2011-06-15 UpDate: City:ChengDu 1.3 更新内容:

• 修正主题自带的挂件的函数的显示问题;
• RSS 的太阳神鸟飞起来了；
• 添加相关文章支持；
• 更新最近评论函数；
• 更新最近访客函数；
• 添加 HTML5 数据存储；
• 使用新的 CSS 重置;
• 替换部分背景图片；

已购买了这个主题的用户请注意查收这个更新包。

这个怎么说呢。这是一个以成都的风景为主题的 WordPress 主题——成都，现在提供简化版下载了。不想提供太多的多功能，只是为了兼容老版本的 WordPress。这个主题会有个收费版的，不过需要 3.0 以上的 WordPress 支持了。

收费版的名字叫 “City Of Hibiscus”。收费版的细节就下次先不透露了。这是一个主题系列里面的第一个。

提醒一下：发布的这个版本和我现在使用的这个版本有不同之处，若需要我这个版本那就请等待收费版了。还有这个主题不支持 IE6。

想要看 DEMO预览点这里，下载在这里：

PS：近期 iStudio 将作最后一次更新。我们要和 iStudio 说再见了。我不会把主题提交到主题目录了。他们太恶心了。

今天收购 Warpflare.com。并把 Warpflare.com 所有的员工收入囊下。

从此Warpflare(曲速耀斑)工作室于今天成立。Warpflare 致力于为企业客户提供专业的网络完整解决方案。我们精通网站设计、实现以及国外主机租赁，保证从前期到后期的无缝衔接。

现在就去瞧瞧

有时css文件里面用到中文字体的时候由于字体编码的关系要使用到中文字体的英文字体名字.

然而有些中文字体的英文名字却不是那么好记. 所以我这里就搜集了一些.

中文名	英文名	Unicode	Unicode 2
Mac OS
华文细黑	STHeiti Light [STXihei]	\534E\6587\7EC6\9ED1	华文细黑
华文黑体	STHeiti	\534E\6587\9ED1\4F53	华文黑体
华文楷体	STKaiti	\534E\6587\6977\4F53	华文楷体
华文宋体	STSong	\534E\6587\5B8B\4F53	华文宋体
华文仿宋	STFangsong	\534E\6587\4EFF\5B8B	华文仿宋
丽黑 Pro	LiHei Pro Medium	\4E3D\9ED1 Pro	丽黑 Pro
丽宋 Pro	LiSong Pro Light	\4E3D\5B8B Pro	丽宋 Pro
标楷体	BiauKai	\6807\6977\4F53	标楷体
苹果丽中黑	Apple LiGothic Medium	\82F9\679C\4E3D\4E2D\9ED1	苹果丽中黑
苹果丽细宋	Apple LiSung Light	\82F9\679C\4E3D\7EC6\5B8B	苹果丽细宋
Windows
新细明体	PMingLiU	\65B0\7EC6\660E\4F53	新细明体
细明体	MingLiU	\7EC6\660E\4F53	细明体
标楷体	DFKai-SB	\6807\6977\4F53	标楷体
黑体	SimHei	\9ED1\4F53	黑体
宋体	SimSun	\5B8B\4F53	宋体
新宋体	NSimSun	\65B0\5B8B\4F53	新宋体
仿宋	FangSong	\4EFF\5B8B	仿宋
楷体	KaiTi	\6977\4F53	楷体
仿宋_GB2312	FangSong_GB2312	\4EFF\5B8B_GB2312	仿宋_GB2312
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312	楷体_GB2312
微软正黑体	Microsoft JhengHei	\5FAE\x8F6F\6B63\9ED1\4F53	微软正黑体
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1	微软雅黑
Office
隶书	LiSu	\96B6\4E66	隶书
幼圆	YouYuan	\5E7C\5706	幼圆
华文细黑	STXihei	\534E\6587\7EC6\9ED1	华文细黑
华文楷体	STKaiti	\534E\6587\6977\4F53	华文楷体
华文宋体	STSong	\534E\6587\5B8B\4F53	华文宋体
华文中宋	STZhongsong	\534E\6587\4E2D\5B8B	华文中宋
华文仿宋	STFangsong	\534E\6587\4EFF\5B8B	华文仿宋
方正舒体	FZShuTi	\65B9\6B63\8212\4F53	方正舒体
方正姚体	FZYaoti	\65B9\6B63\59DA\4F53	方正姚体
华文彩云	STCaiyun	\534E\6587\5F69\4E91	华文彩云
华文琥珀	STHupo	\534E\6587\7425\73C0	华文琥珀
华文隶书	STLiti	\534E\6587\96B6\4E66	华文隶书
华文行楷	STXingkai	\534E\6587\884C\6977	华文行楷
华文新魏	STXinwei	\534E\6587\65B0\9B4F	华文新魏

]]> http://xuui.net/ui-design/english-name-of-chinese-characters-table.html/feed 11 http://xuui.net/ui-design/15-useful-html5-tutorials-and-cheat-sheets.html http://xuui.net/ui-design/15-useful-html5-tutorials-and-cheat-sheets.html#comments Mon, 10 May 2010 10:13:23 +0000 Xu.hel http://xuui.net/?p=1753 了解更多]]> 和以前的 HTML 版本不同，HTML5 带给网页设计师和开发人员更多幻想新事物的能力。使用符合语义结构的特定标记，使得现在的网页更符合语义化的需求。如内建的圆角视觉元素、以及对拖放式交 互的原生支持。尽管 HTML5 并没有完全得到主流浏览器的支持，但有些已经在尝试推进和试验新功能。为了鼓励对 HTML5 进行试验性的应用，也为将来更加丰富的应用做足准备，芒果整理收集了 15+ 有用的 HTML5 教程和参考手册。

教程

利用 HTML5 创建 iPhone 应用程序

使用 HTML5 和 CSS3 组合，编写向后兼容的代码

使用 HTML5 设计和编写超酷的 iPhone 应用程序网站

从零开始编写 HTML5 布局

HTML5 和 CSS3：即将使用的新技术

利用 HTML5 表单大做文章

使用 HTML5 设计博客

触摸未来：使用 HTML5 和 CSS3 创建一个优雅的网站

HTML5 的结构标签

编写基于 HTML5 和 CSS3 的单页面网站模板

如何使所有浏览器正确渲染 HTML5 – 甚至是 IE6

参考手册

HTML5 参考手册

HTML5 视觉参考手册

HTML5 图形参考手册

HTML5 袖珍手册

英文原稿：15 Useful HTML5 Tutorials and Cheat Sheets | Web Designer Ledger
翻译整理：15+ 有用的 HTML5 教程和参考手册 | 芒果

做得好一点的公司，一般是项目经理/部门主管+投资方（项目管理中的投资方，实际上就是老板，反正就是决定你要做什么并给你钱的人）来承担产品工程师的角色，由美工来承担Web前端工程师的角色，特别是Web前端工程师，是最容易被忽略的角色。

企业想挤出利润，无非两个方面，一个是开源，另一个是节流。而这两个角色，恰恰可以用开源节流来比喻，产品工程师可以设计出更好的产品，这就是开源，Web前端开发工程师可以精简网页代码，提高用户访问速度，减小企业带宽上的支出，甚至可以减小服务器上的支出，这不是节流是什么？相比有些企业，以靠克扣员工工资来实现节流，这个节流要节省得多。

产品工程师

很多公司的流程基本上是这样的，由需求部门（一个或者多个，如果公司小，可能就是老板等几个人）提出需求，提交到项目经理或者IT部门主管，然后 IT部门主管根据需求进行开发，这中间可能要判断是做还是不做，判断的依据主要是开发难不难，麻烦不麻烦，很少去考虑合不合理。各位，看到什么问题没有，很多IT的部门主管，他只是一个管理者+项目经理的组合，或者干脆就是一个项目经理。需求部门交给我的需求，我按照要求按时按质做完就OK了。但时，需求部门往往是不懂互联网的，这种情况很多公司大量存在，对于一些老板本身就是做互联网的，或者较大的公司，这种情况会比较少。

问题就来了，一个不懂互联网的人，根据自己的喜好或者自己的判断来提出一些需求，有些需求可能很无理，有些时候可能是自己的喜好，有些时候可能是违背互联网的基本准则的。而技术部门往往是只要没有技术难度就开发吧，反正我就按你要求做了，这个中间，没有一个懂互联网的人来把关。注意，懂互联网的人，不是懂技术的人，懂技术的人很多都是不懂互联网的。比如说我曾经见过有公司的老板要在网站的两边加一副对联，结果别人说像灵堂一样，也曾经有公司的老板要把网站做得像电视一样（不是视频网站，就是一个非常酷的过场动画这样子，想法是好的，可惜不适合大型网站，不利于访问也不利于SEO）。

这个时候一定要有一个产品工程师或者产品组来承担这个中间人，注意，还没有到美工的层面，他需要根据需求方的需求，再加上自己对互联网的了解，来设计这个产品。他要考虑到浏览器、带宽、用户习惯等等内容，以确定如何布置页面中的内容，确定功能之间的关联。在这个时候，如果产品工程师不懂技术，可以邀请Web前端工程师和项目经理/部门主管参与，因为某些地方为了用户体验可能要使用到一些技术，需要由这些人来确定是否要行。

Web前端工程师

相对于产品工程师，这个职位显得很加缺乏，因为产品工程师很多时候可以由项目经理或者部门主管兼任，但Web前端工程师这个职位，是很多公司都不重视的职位，很多公司是这样的，Html和CSS由美工负责，而Javascript由程序员负责。但问题是，很多美工对Html/CSS只能实现，至于规范也速度很少考虑，而程序员对Javascript就更加了，从我接触过的程序员中，绝大多数人觉得Javascript是一个比较简单的语言，没什么前途，看不起这种语言，也认为Javascript只能实现一些交互而已。

所以实际上，很多企业是用两个懂一点点的人，来做这个重要的工作。如果让我来选择，我愿意放弃一个，甚至两个程序员，来换一个Web前端工程师。为什么要这么做？我认为，一个网站两个非常重要的地方，就是他的交互性与速度。很多程序员喜欢划分前台与后台，他们都认为前台不重要，只要后台功能完成了，前台不是很简单的事么！不！不是这样的，前台比后台重要，为什么这么说？你想想，一个用户是通过什么接触到你的网站的，是前台，是Web页面，而不是后台冷冰冰的程序。你有再强大的功能，如果用户操作起来很复杂，那么用户也会抛弃你的，除非用户别无选择，比如说工信部的备案，但问题是，现在互联网同质化越来越厉害，抄袭也变得风行，你真的有这么高的技术壁垒让其它公司没有办法做到和你一样的产品么？

注意，不要钻牛角尖，我并非说后台完全不重要，你要非说就算你前台再好，我后台一个死循环出不来，那不是也没戏，这是抬杠！除了大型网站和逻辑错误，现在多数网站并不存在后台影响速度的问题，或者说影响不是那么明显。前台所带来的问题，要比后台带的问题多得多，也容易解决得多，往往是可以花少量的代价来解决大问题的，可是往往很多企业愿意去花钱买带宽买服务器租CDN以提高速度，却不愿意请一个Web前端工程师来解决这个问题。同时，请注意，就算你服务器再快你的带宽再高，用户的带宽是不变的，如果你超出了用户带宽的阀值，你所做的一切将都是豪无意义的。

程序员往往可以实现Javascript的功能，但是由于Javascript的特殊性，他们很难以最优化的方式来开发Javascript代码，就可能就造成他们去网上Copy一段Javascript，然后只要实现效果即可，大量重复的甚至是有Bug的代码被应用到网站中，这些代码将会影响到用户的执行效率，降低用户体验。在HTML方面，这也是程序员的弱项，他们也觉得这个东西太简单，实现起来很容易，但是HTML和Javascript都是入门易深入难的东西，如何合理地组织Html+CSS，让浏览器更快更有效率地执行，这个也是需要很多年的经验的。

在用户体验方面，大公司可能用UE/UI等部门，而小公司的话，一定要有Web前端工程师，美工只是设计页面，很难照顾到用户体验这个层面，当然不排除有些美工已经有这样的水平。实际上用户体验也和产品设计一样，都属于开源的一部分，因为如果用户体验好就能带来更多的用户，不是开源是什么。

最后，我想分析一下造成这两个职位被忽视的原因，产品工程师一职，往往被项目经理或者部门主管+投资人代替了，一般来说，做到主管级的人对行业多多少少算比较了解，所以这个职位的缺失可能不会带来大问题，但也有时候会因为这个职位的缺失而导致项目失败的安例发生，这就要求主管同时也要有产品工程师的能力。

Web产端工程师是最容易被忽略也是最不好招聘的职位，究其原因，是因为部门主管往往是做技术出身的，而技术人员常常会轻视或者忽视前台的工作，也正是这个原因，造成了Web前端工程的工作比较低，所以很多人不愿意去做这个职位，我就常常看到新人如果让ta学习Html/CSS /Javascript，ta就会问你，什么时候我才可以真正编程啊，这样就形成了一个恶性循环，企业不重视，工资上不去，程序员也就不愿意学习了。然后，这个职位可以给公司省下非常高的费用，可以节省数个程序员，减少带宽及服务器。不信？试试看吧！

(via)