Co.cc 域名服务各项参数与支持类型：

1、登陆CO.CC官方网站，如果你是中国用户会自动切换为中文界面，如果没有更换为中文，那么请在右上角的Change Language 中选择“中文-简体”；

2、点击右上角的“现在就创建一个帐户” 开始进入注册；

3、其中有“”符号的为必填，如果不能填写中文的那么请实用pinyin（拼音）代替即可，所有资料填写准确之后在我接受服务条款这个红色字样旁边的协议打上勾，然后点击现在就创建一个帐户；

4、这样就注册完毕啦，在弹出的设置框内，按照自己的情况进行不同操作：

更改指向的形式，选择你需要的指向内容，A、MX、CHAME、NS都能很好的被支持。

不过虽然网站上提示co.cc域名解析可能需要1~48个小时，但落雪的域名指向成功仅用10秒，所以这个也是拼RP的了。请按以上步骤域名解析之后稍安勿躁

点此注册

因为国内使用CO.CC的人过多，其中出现了不少违法分子用CO.CC的免费域名进行一些陷害网民的网站转发，所以前段时间CO.CC的DNS被GFW封了，不过最近好像又开放了，这是个不错的消息。呵呵，大家抓紧吧。

落雪猜您还对以下文章感兴趣：

• 2010/02/05 -- 域名大转移！使用.htaccess进行域名301重定向平滑迁移网站教程

       而 WordPress 3.0 的其中一个非常重要的功能是一个全新的菜单管理系统，这个系统可以让我们创建包含由日志，页面，分类，标签和其他链接组成的完全自定义菜单，并且还支持多级菜单，非常方便和强大，今天就谈谈如果使用 WordPress 3.0 这个全新的导航菜单。

WordPress 导航菜单系统的概述

首先我们简单解释下这个导航系统的几个概念：

主题位置：就是定义导航菜单在当前主题位置的名称，比如你在导航位置定义了一个菜单，名字就叫做导航菜单，那么这里就显示“导航菜单”。你可以定义多个主题位置的名称，也就是说可以在主题多个地方使用菜单系统，比如侧边栏的 Widget 等。

独立的菜单：上面定义了菜单在主题的位置，那么这里就是定义菜单的具体内容。

添加菜单项：会提供一堆选择让你添加，比如分类，页面，标签，日志，其他日志分类，还有自定义链接等。

菜单项：可以对具体的菜单项进行配置，比如设置是否新窗口打开，这个菜单项标题，描述，Class 等等。

使用 WordPress 的导航菜单

如何激活 WordPress 自带的导航菜单

       要使用 WordPress 导航菜单功能，首先要给当前的主题注册导航菜单，从上面我们知道，我们可以注册一个或者多个导航菜单的主题位置，我么可以使用下面两个函数：

register_nav_menu()：注册一个主题位置。
register_nav_menus()：注册多个主题位置（使用数组形式）。

       这里我们只注册一个导航菜单的主题位置：

register_nav_menu( 'nav-menu', '导航菜单');

nav-menu 是这个导航菜单的名字，用来在函数中定义身份的，而“导航菜单”则是名称，在 WordPress 后台使用的时候可见。

添加和显示导航菜单

       注册好之后，就可以到 WordPress 后台 > 外观 > 菜单 添加菜单，添加的菜单的顺序是这样的：

首先定义好一个单独的菜单。

然后吧这个菜单赋给一个主题位置。

接下来就是添加和配置菜单项。

然后我们到主题的显示菜单的位置通过以下 wp_nav_menu() 就能把刚才定义的菜单显示出来，当然 wp_nav_menu() 这个函数可以有非常详细的参数，但是这里只要简单使用就可以，在特殊的情况下才可能使用到。

样式化导航菜单

样式化导航菜单非常简单，你只需要对 current-menu-item 和 current-menu-parent 这两个 Class 进行定义即可。如：

#menu-nav li.current-menu-item, #menu-nav li.current-menu-parent, #menu-nav li:hover {
	background:#1BA6B2;
	text-decoration:none;
	position: relative;
}

然后定义各级菜单的显示和层次效果即可。

落雪猜您还对以下文章感兴趣：

• 2010/07/22 -- WordPress 技巧：不用插件实现 Pagenavi 功能
• 2010/01/24 -- 提高WordPress 博客手机用户的用户体验 MobilePress
• 2010/01/09 -- IE下查看WordPress站点源代码为乱码的问题解决
• 2009/12/21 -- WordPress 2.9 中文版终于发布
• 2009/12/15 -- 在WordPress导航栏高亮显示当前页面
• 2009/08/23 -- WordCampChina 2009 Beijing 清华科技园阳光厅归来与演讲感触

       WordPress 从 2.1 版本开始就提供了 paginate_links 的函数，它可以在任何地方显示页码导航链接。这个函数的基本参数如下：

       其中 ‘base’ 参数用来提供创建页面链接的参考链接，’format’ 参数是用来替换成页码。’total’ 参数是设置页面的总数，’current’ 参数用于设置当前的页码，它们都必须是整数。这些参数我们在使用的时候必须提供的。

‘show_all’ 参数设置为 true 就会显示所有的页面，默认情况它是被设置为 false 的，通过 ‘end_size’ 和 ‘mid_size’ 这两个参数来控制页码显示的规则。’end_size’ 参数是用来控制在开始和结束的两端显示多少个数字，默认是 1 。’mid_size’ 参数是用来显示多少个数字显示在当前页数字的两边，并且不包括当前页。

‘prev_next’ 这个参数是用来设置是否显示上一页和下一页的页码链接，默认是 true，然后我们可以通过 ‘prev_text’ 和 ‘next_text’ 这两个参数来控制上一页和下一页的文本。

       这样我们只需要提供，页码链接的基准链接，替换成页码的地方，以及当前页和总页数就可以实现使用 paginate_links 函数实现 Pagenavi 功能。

function native_pagenavi(){
    global $wp_query, $wp_rewrite;          
    $wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
    $pagination = array(
    ‘base’ => @add_query_arg(‘page’,'%#%’),
    ‘format’ => ”,
    ‘total’ => $wp_query->max_num_pages,
    ‘current’ => $current,
    ‘prev_text’ => ‘« ‘,
    ‘next_text’ => ‘ »’
    );
    if( $wp_rewrite->using_permalinks() )
        $pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg(’s’,get_pagenum_link(1) ) ) . ‘page/%#%/’, ‘paged’);
    if( !empty($wp_query->query_vars['s']) )
        $pagination['add_args'] = array(’s’=>get_query_var(’s’));
    echo ‘<p class="page_navi">’.paginate_links($pagination).’</p>’;
}

将代码复制到当前主题的 functions.php，然后再相关的主题模板文件中使用 native_pagenavi() 函数。

落雪猜您还对以下文章感兴趣：

• 2010/07/22 -- WordPress 3.0 菜单管理系统使用
• 2010/01/24 -- 提高WordPress 博客手机用户的用户体验 MobilePress
• 2010/01/09 -- IE下查看WordPress站点源代码为乱码的问题解决
• 2009/12/21 -- WordPress 2.9 中文版终于发布
• 2009/12/15 -- 在WordPress导航栏高亮显示当前页面
• 2009/08/23 -- WordCampChina 2009 Beijing 清华科技园阳光厅归来与演讲感触

工作地点：杭州 or 北京

岗位1：高级产品经理（偏架构方向） 1人

职位描述:

1、负责消费者门户站内搜索、TAG等底层产品规划和设计，或某条产品线的产品整体规划和实施；

2、负责督促和跟进各个虚线项目部门工作的进展及计划；

3、协调内部及外部需求的优先级，配合运营部门推进运营指标；

4、与公司各个部门紧密配合，共同达成业务指标。

任职资格：

1、 互联网产品设计经验2年以上，有清晰的逻辑思路，当场可画出流程图

2、 独立设计超过100万日pv的产品，并在该产品上线后继续担任该产品的设计师半年以上

3、 熟悉至少一门编程语言和任何一种商业数据库（不一定要互联网相关的，只是考察思路）

4、 架构思路清晰，高度抽象概括能力。有创新意识，主动积极，敢担当，有产品理想。

岗位2：频道产品经理  2人

岗位职责：

1、负责淘宝门户某一垂直消费频道的前端展现、内容规划、产品设计、项目实施等。

2、深入挖掘频道用户需求，与频道运营一起负责需求分析、内容整合，满足用户需要。

3、负责该频道下属子产品、子应用、后台工具的产品形态设计、需求实施和运营合作。

4、其他有助于频道发展的产品运营工作。

岗位要求：

1、  本科以上学历，3年以上互联网产品运营经验，1年以上产品规划经验

2、  大型门户网站频道产品经理，或消费垂直类网站从业经验者尤佳；

3、  有创新意识，主动积极，敢担当，有产品理想。

岗位3：高级产品经理（偏商业运营方向）2人

岗位职责：

1.负责淘宝门户垂直频道类产品的需求分析、规划设计、驱动实施等工作;
2.研究资讯及应用类产品发展方向，提出产品商业计划，项目计划，制定和涉及用户所需要的产品或功能、优化已有功能或策略以提升用 户体验；
3.推动UED、开发、测试、运营等各部门人员紧密合作达成产品目标；
4.负责产品相关的跨部门、跨公司的日常沟通工作，产品运营数据分析、配合运营、市场部活动策划与执行。
5.负责某一频道产品的年度商业战略制定

任职资格：

1.本科及以上学历，5年以上互联网公司从业经验，3年以上资讯社区、SNS相关产品策划经验，3年以上项目管理经验
2.有丰富的互联网产品设计感觉，在新闻资讯、论坛社区、SNS等方面有深刻造诣;
3.优秀的策划能力、优秀的数据分析能力和项目管理能力；
4.优秀的文档书写和表达能力，产品目标明确，有较强的逻辑思维能力。
5.有一定商务合作经验，沟通能力强，拥有强烈的LeaderShip。

6. 有创新意识，主动积极，敢担当，有产品理想。拥有4大门户工作经验者优先

岗位4：网站后台产品经理 1人

岗位职责：

1、负责产品后台等相关应用模块开发需求撰写以及和技术人员沟通开发时间和进度，并跟进开发，保障按时上线。
2、负责网站CMS后台的规划设计，清晰、明确地说明此产品设计的目的、业务逻辑、页面流程及完成时间点。
3、负责门户与各业务部门系统的数据嵌套、接口的规划、需求设计。
4、负责根据前台设计人员的需求，不断对后台进行新功能的添加及更新维护。
5、负责网站数据分析后台的规划和设计，对网站数据进行分析并提出改进意见。
6、负责定期和业务部门进行产品需求调研，独立完成需求分析文档。

岗位要求：

1.  本科以上学历，3年以上互联网产品运营经验，1年以上网站后台产品规划经验

2.  大型门户网站频道产品经理，或消费垂直类网站从业经验者尤佳；

3.  有创新意识，主动积极，敢担当，有产品理想。

岗位5：社区产品经理 1人

职位描述:

1、负责淘宝消费者社区某条产品线的整体规划、设计和组织资源实施，如：帮派、论坛、淘心得等等；

2、持续关注和改善淘宝社区产品的用户体验，不断优化业务流程；

3、协调内部及外部需求的优先级，组织资源实施产品规划，督促和跟进UED\开发\测试部门需求的进展及发布计划；

4、与社区运营部门紧密配合，共同达成业务指标。

任职资格:

1.大学本科及以上学历，计算机相关专业，3年以上互联网产品或增值业务产品设计、规划、实施工作经验。

2.熟悉互联网的发展，常规网络技术，涉猎广泛，对电子商务、客户端、社区等都有一定的了解；

3. 熟练使用各种网络产品设计软件，具备较强的项目管理、数据统计分析、用户需求分析、产品流程规划、项目提案和实施能力；

4、工作态度积极主动、认真仔细、执行能力强，为人踏实，有良好的学习能力和团队合作精神；

5、有创新意识，主动积极，敢担当，有产品理想。

落雪猜您还对以下文章感兴趣：

• 2010/04/06 -- 大淘宝电子商务生态圈深度分析(一) by P迪
• 2009/06/28 -- 2009年淘宝UED团队招聘

“有一点”旨在促进UED（用户体验设计）和PM（产品经理）之间的沟通 ，让用户体验的思想升华到所有产品设计人员的心里，并最大化的实践应用。

2010年07月12日下午14点，沉淀半年的《有一点》在阿里巴巴滨江新园区隆重发布。

阿里巴巴ITU UED（有一点）经理陈晓华致辞。

中国美院传媒动画学院网游系系主任路海燕讲话。

阿里巴巴ASC UED尹欢密讲话。

阿里巴巴淘日本UED赵怡梵讲话。

中国美院传媒动画学院多媒体与网页设计专业教研室主任李轶军讲话。

中国美院为阿里巴巴颁发特聘讲师证书，积极推进院企互动。

《有一点》执行主编蔡景助（柱子）在签名墙上留言，是他！以惊人的毅力和严格的执行力保障了杂志顺利发布。面对这本磨砺半年之久的杂志，个中滋味只有付出的人最能体会！谢谢！

《有一点》封面设计&视觉总监徐巍（皮卡丘）在签名墙上留言，他一个人承担起了整本杂志80%的视觉工程，实属不易！（有一点爽！哈哈~他绝对是今年互联网上的一道亮丽风景）谢谢！

《有一点宣传片》&《生活中的用户体验》导演赵盛（片儿）在签名墙上留言，是他！让《有一点》变得更精彩。谢谢！

发布会后，来自阿里巴巴和网易杭州研究院的资深人士与中国美院师生齐聚一堂，展开互动交流。

网易杭州研究院UED经理郭冠敏与学生们认真交流。

热情的中国美院学生。

其他下载地址：
完整版
http://www.rayfile.com/zh-cn/files/f658452e-8d92-11df-a634-0015c55db73d/

无视频版：
http://sunpea.qupan.com/4614817.html
http://www.rayfile.com/zh-cn/files/dc3c93c5-8d93-11df-a4df-0015c55db73d/

落雪猜您还对以下文章感兴趣：

• 2010/04/07 -- 淘宝网用户体验团队（UED）视频 -不只只是招聘广告
• 2010/03/31 -- 交互设计实用指南—减少记忆负担
• 2009/06/28 -- 2009年淘宝UED团队招聘
• 2010/06/20 -- 手机产品交互设计的几点原则与基础
• 2010/06/18 -- 十条互联网产品设计的可用性标准
• 2010/04/07 -- 产品经理的角色定位

        文章里面涵盖了一些对用户行为、用户分类的调研内容，同时对于不同场景、不同交互形态与基本的用户需求进行了推敲，手机互联网是未来的发展趋势，手机产品也对交互设计提出了更多的要求，从用户体验出发来进行手机产品交互设计的方法原则，之后还是需要一个比较成型的交互体验评估体系的。；

一、用户行为习惯信息收集

       在讨论手机的交互设计方法之前，需要先对手机的用户使用习惯有一些基本的了解，需要对手机的用户体验信息做一些收集整理。收集用户体验信息首先需要确定两个问题：一是确定目标用户群体；二是确定信息收集的方法和途径。

       在确定目标用户群体的时候，很显然的是，已有产品有过使用和交互经验，具备该产品或系统的交互体验的用户，相比较于那些没有体验的用户，可以为设计提供更多更有效的信息。因此在收集用户体验信息时，应该首先考虑所需设计的产品的用户或是有过类似产品使用经验的用户。在理想的情况下，当用户体验产品的交互时，设计师可以通过某种技术或是研究方法获得用户的全部感官印象，掌握他们的情感体验。然而这些主观的体验信息很难用实验室的方法收集或是客观的科学描述表达出来。因此我们只能寻求贴近实际的近距离接触用户体验的方法，就是深入访谈和现场观察。

我们需要调研的信息有：

1.硬件部分：

• 手机的持机模式（右手操作、左手操作、双手操作）；
• 手机的操作模式（手指触控、笔触、按键、滚轮、长按）；
• 两种操作模式下的输入方式（全键盘、九键、触屏键盘、手写）；
• 信息反馈形式（屏幕信息输出、声音、振动、灯光）对用户的影响；

2.软件部分：

• 用户对屏幕信息结构的认识（空间位置、信息排列顺序、信息的分类）
• 用户对信息导航的使用（菜单、文件夹管理、搜寻特定文件）
• 用户对信息传达的理解（图形信息、文字信息）
• 用户对交互反馈的获知（每个操作是否有明确的反馈）

3.积极的用户体验：

• 特殊交互模式带来的新奇感受——有趣
• 简洁的操作步骤和有效的信息提醒方式——信任感
• 软件运行速度，信息处理过程——操纵感和成就感
• 允许误操作，有效引导——安全感
• 交互过程中的完美感官体验（视觉、听觉）
• 类似于电脑操作过程的交互（有电脑使用经验的用户）——熟悉感和成就感
• 品牌元素在交互上的延续性——熟悉感和优越感

4.消极的用户体验：

• 系统出错、没有提示信息——压力、紧张和茫然
• 缺少误操作的补救机制——挫败感、压力
• 交互步骤的繁复难记——挫败感
• 提示信息的不明确（不符合用户模型）——茫然
• 过程处理时间过长——焦虑

二、用户分类

1.依据用户的需求可将智能手机的用户分为两类：

       1.1 过程为主的用户(processoriented end user)

       过程为主的用户的典型例子是电玩族，他们追求的终级目标就是视觉听觉的冲击和享受，最终游戏的结果反而变得不是那么重要了。此类设计对视觉和创意的要求是极为挑剔的，绝大多数设计师都有深厚的美术功底。

       1.2 结果为主的用户(result oriented end user)

       然而，与结果为主的用户设计相比，过程为主的用户的市场和受众都要小的多。结果为主的用户不在乎用什么样的方式完成任务，但是任务必须以最短的时间，以最简洁的方式，最精确的运算结果来完成。对于此类用户的交互设计人员来讲，更重要的是设计更合理的任务逻辑流程(logical task flow),以期最大幅度的符合人脑的思考方式和认知过程(cognitive process)。

2.依据用户的使用经验可将用户可以分类为：

       2.1 新手用户

       指刚刚开始接触和使用智能手机的用户，对智能手机的操作系统没有过使用经验，对计算机及应用程序的一般用法也没有太多的了解，但有一定的手机使用经验。

       2.2 中级用户

       使用智能手机有一定的时间，换过至少一个智能手机。对智能手机的部分操作相对熟悉，但经常使用的软件数量较少，并不完全熟悉智能手机系统的所有功能，对界面交互所必需的语法信息了解较少。

       2.3 专家用户

       有过相当长时间的智能手机使用历史，更换过几次智能手机，对手机的交互和电脑的操作都非常了解，经常主动寻找更简洁和快速的交互方式。

       一般来说，中级用户和专家用户在长期使用某部分交互时遇到的问题更具有代表性，而新手用户提出的问题则更有利于设计人员认清用户与智能手机交互时的认知过程。

三、交互设计原则

       对应用户体验信息的收集和用户分类，我们可以总结出来智能手机上交互设计的方法和要点。

1.硬件交互设计

• 根据人机工程学原理设计按键大小等硬件交互要素；
• 尽可能提供多种输入方式，包括键盘输入和手写输入，键盘包括数字键盘和全键盘。合理设计键盘使其符合用户的使用习惯；
• 考虑环境对用户操作的影响。例如嘈杂的环境下提供震动的提示方式，黑暗又需要保持安静的环境下选择指示灯闪烁发光的方式提示用户。
• 同样需要考虑环境因素对用户的影响，利用机械结构多样化设计实现单手操作模式和双手操作模式的切换，需要设计切换的便捷方式、屏幕方向的变化和键盘的转换等等硬件交互要素的变化。
• 设计新奇的交互模式，将大大提升用户体验，例如sony的滚轮导航模式，和苹果的触点导航键（旋转和点击），都获得了巨大的商业成功。

2.信息交互设计

• 信息项目的排布密度合理，字体排列、图标排列的方式具有可调性，设计合适的方式来突出重点信息；
• 使用用户的语言来传达信息，而非技术的语言。有效地使用“隐喻”。例如windows里面的“记事本”就是一个很好的隐喻例子，因为它和人们熟悉的日常概念联系在一起，所以用户可以很容易的理解这是一个什么工具。好的隐喻可以起到快捷的说明作用；
• 字体大小、颜色、图标设计等，都决定可读性的好与坏；
• 需要保持一致性的不光有每个功能软件或是服务的图标外观，更包括开机动画、细节元素和无形框架的一致，都需要贴合用户行为习惯进行设计；
• 尽量避免同一个元素包含太多的信息，例如，颜色的使用不要包含太多信息暗示，因为用户不一定会注意到或是理解某种颜色所包含的暗示。

3.软件交互设计

• 导航功能。随时转移功能，很容易从一个功能跳到另外一个功能；
• 允许工作中断。例如当用户编辑短信的时候，收到短信或电话，完成后回来仍能够找到刚才正写的短信息；
• 方便退出。例如，提供两种退出方式，按一个键完全退出，或是一层一层的退出。
• 让用户知道自己当前的位置，使其做出下一步行动的决定；
• 提供快速反馈，减少不必要的潜在等待时间。在任务交予系统处理或计算的时候，会有一段潜在的用户等待时间，一般我们会通过合适的等待提示让用户知道现在正处于系统潜在工作状态，而不至于让用户频繁地重复操作，使系统更慢；或者合理通过多任务切换处理避免这样的等待间隔。通过这些方法可以让用户回避这种的无效时间，从而提高交互效率。
• 良好的防错机制。误操作后，系统提供有针对性的清晰提示。即使发生错误操作，也能帮助用户保存好之前的操作记录，避免用户重新再来；
• 提供了解用户操作行为的途径，可以更好的帮助改善系统的操作；
• 通过缩短操作距离和增加目标尺寸来加速目标交互操作。

4.体验交互设计

• 让用户控制交互过程。“下一步”、“完成”，面对不同层次提供多种选择，给不同层次的用户提供多种可能性；
• 预设置的默认状态应该具有一定共通性和智能性，并对用户操作起到协助或提示的作用；此外，还应留给用户修改和设置默认状态的权限；
• 图标、多媒体设计、细节设计和附加功能设计为体验增值，有效提升体验度；
• 视觉设计，例如开关机动画、界面显示效果等；
• 多方面考虑用户信息的私密性，提供有效的保护机制，例如指纹识别密码模式。

四、总结

       体验是一个比较虚的概念，很难量化很难评估，所以也导致很多小的无线产品开发团队干脆放弃了对产品用户体验的把握，甚至不需要设置一个专门的呃交互设计师职位来改善产品的交互体验，这对于成长型的公司是可以容忍的，但是对于要想做出精品，长期处于市场不败之地的公司就显得不够严谨了。手机互联网是未来的发展趋势，手机产品也对交互设计提出了更多的要求，简单探析了一下从用户体验出发来进行手机产品交互设计的方法原则，之后还是需要一个比较成型的交互体验评估体系的。

落雪猜您还对以下文章感兴趣：

• 2010/06/18 -- 十条互联网产品设计的可用性标准
• 2010/05/24 -- web交互设计方法-交互模型
• 2010/04/07 -- 产品经理的角色定位
• 2010/03/31 -- 交互设计实用指南—减少记忆负担
• 2010/01/08 -- The Story of Mr.Gray — Web 交互设计“灰色”的8类应用 [ 推荐 ]
• 2009/11/11 -- 以用户为中心的PM与产品设计 装B

        一些设计相关的工具，在线生成器，免费字体站点，模板站点都将帮助你更有效率测试和管理站点。记住，并不是什么都亲自完成才是最好的方式，一定程度的借鉴将会让 你以更轻松的方式完成任务。

1. Deviantart

Deviantart是互联网站最大的艺术展示站点之一。你可以在这里找到好灵感。

2. Web design library

Web Design Library是一个提供设计研究平台的资源站点，覆盖了大量的理论知识和实战方面的信息。

3. Stylevault

Stylevault.net 是一个设计展示站点，设计师可以在上面展示才华的同时其他人也可从中获益。

4. Behance

Behance 是找灵感的好去处，因为他们的设计更加专业。

5. The design inspiration

The Design Inspiration 是一群整日寻求设计灵感的设计师所创建的。

6. Colour lovers

Colour lover 是一个国际性的设计师社区，不同行当的艺术家到此寻找色彩方面的灵感，想法并对这些专业的或个人项目发表发聩。

7. Adobe kuler

Adobe kuler 是奥多比公司推出的web程序，旨在帮助你创建和分享颜色主题。

8. Color hunter

Color Hunter 可以通过图片来创建配色。

9. Colorotate

通过Colorotate，可以实现以3D的视觉效果的方面来迎合人脑的颜色处理过程。

10. Stripemania

Stripemania 是一个用于生成纹理的在线web2.0工具。纹理大小、缝隙都可以调节，还可以选择色彩过渡效果。

11. Fontstruct

FontStruct 可以通过绘制网格来绘制出自己的字体。

12. Dafont

一个可以通过字母，主题，更新日期排序的字体站点，大多数字体可以免费下载。

13. Icon finder

一个收录了十万个免费图标搜索引擎。

14. Whatthefont

看见了一个好看的字体，但是不知道它的名字？

把字体图像提交到WhatTheFont，它将会在数据库中查找与你的字体最接近的字体名字，或者让字体爱好者在WhatTheFont论坛中帮忙。

15. Lorem Ipsum

Lorem Ipsum是打印排版工业的无意义文本，这是一个Lorem Ipsum生成器。

编码工具

16.Typetester

Typetester是一个在线字体比较工具。

17. Typeface.js

通过typeface.js，你可以在网页中嵌入自定义字体，从而免去了文字到图片转换的麻烦。

18. Firebug

Firebug是Firefox浏览器的一个网页开发的扩展，你可以在任意网页中编辑，调试，监视css,html,javascript。

19. Smush.it

Smush.it通过对特定图片格式的优化技术来减小图片大小，这是一个“无损”的工具，也就是说在优化图片的同时，图片样子和视觉效果没有发生改变。

20. pForm

在线HTML表单创建工具。

21. Zend Studio

Zend Sudio 7.0是一下代专业级的php程序开发环境。其设计可以最大化开发者的效率，同时可以更快的开发和维护代码，解决程序问题并且提高团队合作效率。

22. Fire FTP for Firefox

FireFTP是一个Mozilla Firefox扩展，是一个免费、安全、跨平台的FTP客户端。

23. Expandrive

ExpanDrive 就像是你MAC或者PC上的U盘。可以在远程计算机上打开、编辑、保存文件。

24. W3C Validator

W3C校验器是W3C的免费服务，用于检查网页的标签的有效性。同样还有一个CSS校验器。

25. jQuery UI

jQuery UI 是一个开源的接口组件库-互动、小工具、动画效果，基于jQuery javascript库。每个组件都是基于jQuery的事件驱动构架编写，并且相当主题化，使开发者和任意技术层次的人都能整合到自己的代码中去。

26. Clean AJAX

Clean是Ajax的开源引擎，提供了一个Ajax技术的高级接口。

27. Reflection.js

Relection.js 可以让网页中的图片呈现发射效果，它使用整洁的javascript代码，使你的代码更干净。

28. Blueprint CSS

Blueprint是一个CSS框架，旨在削减开发时间。它通过网格、排版、插件、打印的CSS给你的项目提供一个坚实的基石。

29. CleanCSS

CleanCSS是一个强大的CSS代码优化器和代码格式化工具。

30. XHTML Character Entity Reference

这个页面包含了HTML 4 和 XHTML 1.0 所允许的252的特殊字符，W3C官方HTML 4规范中的第24部分有所阐述。

31. Pingdom

Pingdom是一个站点监视工具，可以7X24小时全年监控，有在线时长、响应时长的统计，还可以通过Email和短信来发送警告。

32. Lightbox 2

Lightbox用于图片在网页上叠加显示。设置及其简单。

33. WIX

免费的flash网页创建工具。

34. Best free templates

BestFreeTemplates.info 优秀的CSS模板供您下载。

测试管理站点

35. Browsershots

BrowserShots是一个基于web的浏览器兼容性检查工具，可以清晰的预览您站点在各种浏览器上面的显示效果。不需要注册，直接提交url，然后等待3-5分钟，BrowserShot就为您生成各种浏览器下面的效果图。

36. Browsercam

在任意操作系统任意浏览器上查看你的web设计，检查javascript,DHTML,表单和其他动态功能。

37. Are my sites up?

Are my sites up是一个简单的服务，当你网站下线是会及时的通知你。

38. Google analytics

Google Analytics 是一个企业级的网站分析解决方案，让你对自己站点的访问状况了如指掌并且有效的进行市场推广。强大、灵活、易用的特性使你分析网站流量的方式耳目一新。通 过Google Analytics，你可以推广更有针对性的广告，占领市场主动权，创建更高回报的站点。

39. W3Counter

W3Counter是一个免费的站点分析解决方案，可以回答你的以下疑问：网站用户是谁，他们怎么找到你的站点，他们感兴趣的是什么。

40. eLogic

跟踪和监视站点活动。了解站点数据是建立成功在线商务的关键。

落雪猜您还对以下文章感兴趣：

• 2010/06/18 -- 十条互联网产品设计的可用性标准
• 2010/06/20 -- 手机产品交互设计的几点原则与基础
• 2010/05/24 -- web交互设计方法-交互模型
• 2010/04/08 -- 互联网产品需求管理思考——统一需求管理
• 2010/04/07 -- 产品经理的角色定位
• 2010/03/12 -- 创意搜狗输入法设计理念 搜狗输入法成功路

不要把它当作教程来看，它只是思想精髓的提炼。在各式各样的项目中，会遇到千奇百怪的情况，会跟各种角色的人一同协作完成目标。只有当大家达成共识，才能更好地提高效率，这10条启发正是纽带。

其实，这是10条关于界面设计的基本准则。之所以称之为“启发”，是因为它们来源于实际经验，而非枯燥的理论知识。

系统状态的可见性
应始终让用户了解当前发生的事情，并在恰当的时机给予反馈。

系统与现实世界的匹配
讲用户听得懂的语言，无论单词、短语还是阐述一些概念，把术语留给机器去读。遵循现实世界的准则，让信息表现的自然、符合逻辑。

用户控制和行动自由
用户在功能选择上犯错是常有的事儿，这就需要为其提供一个“紧急出口”，不必再通过额外的对话就能离开那里。提供撤销和重做功能。

一致性和标准
别让用户为不同的文字、状况和行为是否代表同一件事情而产生疑虑。要遵循平台的思想。

错误的预防
一个能在第一时间防止犯错的设计，总好过一堆漂亮的错误提示信息。应当在用户行动以前，就消除能诱使犯错的条件，必要时提醒用户确认操作。防患于未然。

系统去识别而不是让用户记忆
尽量降低用户对目标、行为和可见选项的记忆成本。不要让他们去记忆信息该从哪段到哪段。同时系统的使用说明应当可见，并在必要时，提供适当的提示信息。

灵活性和使用效率
快捷键——对初级用户不必特殊说明——但可以提高专家级用户的使用效率，这种交互兼顾了有经验和没经验的用户。同时允许用户定制频繁动作（译注：允许用户将使用频率较高的操作集中，或将功能按个人习惯排列）

简约设计美学
对话不应该包含不相关或不需要的信息。因为每一个额外的信息单元，都会一定程度上削弱原本相关信息单元的相对可见性。

帮助用户识别、诊断，并从错误中恢复
错误信息应当使用简单的语言（别用代码、编号，这种东西只有工程师能看懂），有针对性地阐明问题，并带有建设性地解决方案。

帮助文档
即使一个系统很棒，不用依赖帮助也能使用，但它可能仍然需要帮助文档。诸如用户重点任务方面的任何信息都应该能被方便地找到，并提供有简明的具体行动步骤。

via useit.com
image：www.gettyimages.cn

落雪猜您还对以下文章感兴趣：

• 2010/06/20 -- 手机产品交互设计的几点原则与基础
• 2010/06/19 -- 互联网产品设计的40个超实用的Web设计工具
• 2009/11/11 -- 以用户为中心的PM与产品设计 装B
• 2010/07/12 -- 强势打造《有一点》（UED）杂志破茧而出——来自阿里同事奉献
• 2010/05/24 -- web交互设计方法-交互模型
• 2010/04/08 -- 互联网产品需求管理思考——统一需求管理

1.  双面板展示（Two-panel Selector）

【形式】把两个相邻的面板放在界面上，在第一个面板显示一组对象，用户可以从中任意选择，在第二个面板上显示选中对象的内容。

【优点】

       这种模式由于两个面板相邻摆放，用户可以很快把他们的注意力换来换去，一会看着列表的整个结构（比如图中显示了哪些是最新的应用），一会查看一个对象的详细信息（这个应用是做什么的，有哪些内容等等）。与单个窗口相比，这种紧密地集成有几个突出的好处：

•        减少体力开支，两个面板距离很近，用户的眼睛不需要进行长距离的穿梭，可以通过用一次鼠标单击或按键来改变选择的项目，而不是首先要在窗口和屏幕之间选择；
•        减少了可视化的认知负担，当一个窗口弹出到最上面，或当一个页面的内容完全改变时，用户就得花额外的注意力到现在要看的东西上，如果窗口本身一直不变，用户就可以把注意力集中在一个较小的变化范围内；
•        它也减少了记忆负担，这里左侧的列表充当了“路标”的角色，因此用户完全明白自己当前是在哪个应用下。

【用法】

       整体布局：把可以进行选择的列表放在上面或左边的面板上，显示详细内容的面板放在下面或右边，这样做利用了绝大多数用户的视线流动方向，根据用户从左到右的语言阅读习惯让用户方便找到自己需要得到的信息。

       列表的布局：一般有四种布局方式：线性列表，通常是排序的；二维表格，可以排序，也可以让用户通过列或行的标题进行过滤；空间组织方式，如地图、图表以及类似桌面的区域，让用户可以按自己的需要放置对象。

       操作：当用户单击列表中的一个对象时，在第二个面板中立即显示它的内容或详细信息。同时最好能支持键盘操作以改变选择的方式，如上下箭头键；

       视觉：让已经选中的对象在视觉上突出显示，如给选中的列表对象换一种颜色和亮度。

【例子】

       Qzone中的双面板应用，当从左侧列表选择出信息以后，右侧会显示该对象的详细内容，并且采用了主题类别的信息切分形式，如果从常用模式的基本应用模式来看，当用户选中左侧列表对象后，如果在视觉上能够对该对象进行突出显示，可能会更友好一些。

2.  画布加工具条（Canvas Plus Palette）

【形式】

       用于图形编辑器上，把一个带图标的工具条放在空白画布旁边，用户单击调色板工具条上的按钮，在画布上创建对象。通常工具条用来创建对象，画布用来摆放对象。

【优点】

       这个模式来自于人们的日常生活经验，画布、调色板，就是这样的样式，因此用户在使用时容易理解；同时画布加工具条也利用了可视化识别的好处，最常用的图标（画笔、手型图标、放大镜等）在各种不同的应用系统中一次又一次的得到重用，而且每次都是同样的用法，减少了用户记忆和学习的成本。

【用法】

       工具条本身应该是一个图标按钮或者看起来像按钮的网格，由于中文本身词汇的表达比较强，所以工具条里用图标加文字的形式会更容易理解。

       工具条放在画布的左边或者上面，当工具比较多时，可以吧工具条的图标分成几个小组，比如用（card stack）模式的TAB来表示这些分组。

【例子】

       QQ秀泡泡日志的编辑框正是一个画布加工具条的用户， 通过Icon加文字的形式组成了工具条，并用分割线将工具进行了分组。

3.  向导（Wizard）

【形式】

       在界面上一步步引导用户按预定的顺序完成任务，把任务分成一系列步骤，在每个步骤里让用户集中处理一件事情。如，Qzone个人空间的注册页面：

【优点】

       对于较长的任务，在设计用户界面时如何让用户明白操作的步骤，向导的优点正是让用户按照预先规划的路线图来组织这项任务，而不用了解整个任务的结构，用户要做就是按顺序执行每个步骤，相信他们如果遵循指示，就会成功完成。

【用法】

       把组成任务的操作分成几个部分或几组操作，各个部分的次序排列可能必须是严格限制的，也可以是能够由用户选择的。

       Qzone的的注册过程包括 选择风格样式、填写个人信息、补充资料和完成四步，用户必须依次填写，而不能先填写后面的步骤再回来写前面的；而对于一些在线支付类的流程，从产品挑选、支付信息、支付地址、送货地址等步骤，它们的顺序并不重要，因为后面的选择并不依赖前面的选择，把相关的选择放在一起只是简化了人们填写表单的工作。

       任务拆分后步骤的数量和粒度往往需要很好的权衡，如果只有两步，那会显得很傻，如果有十五步，就会显得乏味枯燥；但是每个步骤也需要保证不能太复杂，不然失去了向导的意义。

【页面表现】

1）多页面表现形式

       从页面表现上来看，最简单的实现方式就是将每个步骤放在一个单独的页面上，用前进和后退按钮进行控制，但这种形式也有缺点，每个独立的界面不能显示上下文，用户不知道前面和后面分别显示的是什么，因此这样的形式最好能够允许用户在进行过程中能够随时向前或者向后移动。因为如果不能让用户可以改变前面的选项而必须重新开始那就会让人受不了。从这点来说，如果是多页面的向导，它的标准的配置应该是：

或者结合双面板选择模式：

2） 单一页面表现形式：

       第一种 带标题的栏目：标题上有固定编号，因为一眼就可以看到所有的步骤，所以这个模式适合用在分支不多的任务上。

       第二种 响应式允许或响应式展开：在用户完成前面一个步骤之后才把后面的步骤显示在页面上，如果向导的步骤不多,采用这样的方式会让页面更简洁一些。

总结：

       以上三种常用的模式：双面板选择、画布加工具条以及向导是我们经常会在网页设计中见到的模式，平时的使用中我们已经在不知不觉中认识并习惯它们了，通过这些基本的模式，在设计加以变形和创新就可以创造出更有趣和方便的交互方式。下面的例子是一个综合了以上三种交互模式的例子：

（网址：http://www.mrpicassohead.com/create.html）

       显而易见的，这个工具运用了画布加工具条的模式，由两组工具条和一个画布组成。同时，这个网页工具还结合了双面板选择模式，通过TAB把工具条进行了分类，当单击“face”、“noses”、“lips”时，工具条一次变化，并显示这些对象：

       并且在操作步骤的提示上，采用了向导模式的响应式展开：当用户第一次选择TAB中的类型是，会提示用户从工具条中选择合适的元素到画布当中，而当用户作出选择之后，则会显示下一个步骤的提示：

本文出处 : http://isd.tencent.com/?p=1894

落雪猜您还对以下文章感兴趣：

• 2010/06/20 -- 手机产品交互设计的几点原则与基础
• 2010/04/07 -- 产品经理的角色定位
• 2010/06/19 -- 互联网产品设计的40个超实用的Web设计工具
• 2010/06/18 -- 十条互联网产品设计的可用性标准
• 2010/04/08 -- 互联网产品需求管理思考——统一需求管理
• 2010/03/31 -- 交互设计实用指南—减少记忆负担

Open Source （开源）

As a group of young people, we are glad to find that our flagship product can be accepted by so many people. We hope XMind can power our mind, save our time. We also hope to see more XMind-based tools to raise our community.

Awards Winner （获奖）

XMind is the best Eclipse RCP application 2008 in the Eclipse community, and the best project for academia 2009 in the SourceForge community. Thank you all.

Easy-to-use （易用）

With XMind, you can just double-click to create and edit topics anywhere on the map. Drag-and-drop for reorganizing topics, moving markers, taking a mapshot, and adding attachments. You can even search on topic with Google and drag images into your map without leaving the working window.

Easy-to-share （分享）

XMind.net is the best place to share your ideas and thoughts with the world. Adding an embedded mind map viewer into your blog will enable more people to visualize and learn from your ideas. If you want to share privately, or brainstorm ideas with selected friends, just upgrade to XMind Pro.

Brainstorming （头脑风暴）

XMind is a great brainstorming tool for your team. And XMind Pro provides a special brainstorming editing mode to offer you a place to focus on recording and organizing sparkles.

Manage Tasks （风险管理）

With Gantt View in XMind Pro, you can easily manage and adjust your tasks in a single view. And with the mix-usage of structures, multiple sheets in one file, and other features, you can plan and track projects fast.

Export to PDF/Office （PDF、Office 格式导出）

XMind’s intuitive design and powerful features let you focus on your work and share it easily with others. You can export maps into a variety of popular formats such as PDF, Word and PowerPoint.

Meeting Presentation （会议纪要）

XMind Pro makes it easier to express your ideas and share your information in your meeting presentation. Your audiences not only see the ideas, but also follow a logical progression of them. And you can also record what they say as MP3.

下面我们来看看Xmind可以为我们做点什么吧：

设计思维导图
思维导图是最受欢迎的一种图形模式，其结合了“全脑思维”的概念，更接近于人脑思维方式的放射性“网状思维”，能够极大地激发用户的想象力。

设计组织结构图
XMIND完美地支持了组织结构图。从而XMIND的使用者可以很方便地构造出清晰准确地组织结构图形，为您的工作带来一份促进。

设计树形图
树形图通过向一边的集中发散可以帮助用户换一个视角看待自己的思考内容。并且由于在XMIND中各种架构转换的便捷性，用户可以更好更贴切的展示自己的思想。

设计逻辑图
从左向右（或者从右向左）的线性发展结构，有时会给我们的思考带来意料之外的帮助，而这就是XMIND的逻辑图，一种符合大脑思维习惯的结构。逻辑图不仅仅丰富了XMIND的架构体系，也为用户带来了另外一个方式来拓展和完善自己的工作。

设计鱼骨图
类似项目管理以及进程管理的工作，其共同点都是需要有很好的时间管理帮助——这正是鱼骨图的长处。在鱼骨图中，您可以很好的勾画出各项工作在整个项目中的 时间顺序，由于各个得分支可扩展性，更多的资料也可以很好的展现出来。这样您就可以得到整个项目的一个“鸟瞰”图，从整体上进行把握，并可以及时调整。 XMIND的鱼骨图还有一个与众不同的地方，用户可以同时把各个分支按照实际的需要进行调整。譬如某个分支使用思维导图更好的为人接受，就可以直接对某个 分支单独进行“变形”。

设计二维图
二维分析，一个商业决策经常使用的方法，也经常使用在平时的各种决策时刻。直观、简单、有效是它的特点，也是它的优点，可以让我们很快就能够对所有的要素 进行分类，帮助我们找到并分析各个要素的性质。而这些也正是XMIND的二维图将为我们带来的。二维图将秉承二维分析的优点，真正为用户带来使用价值的提 高。
概念图

相对于思维导图，概念图则是另外一种非常实用拓展思维的工具。凭借自由主题以及强大的联系，XMIND可以很好的支持这样一种思考方式。通过对一些快捷操 作，包括对主题的拓展，联系，您就可以在看似杂乱的思想火花之间建立关系，辅以逻辑性的整理，一个充满着智慧的方案抑或构思即呈现在您的面前了。一切就是 如此的简单！

Xmind官方下载地址

落雪猜您还对以下文章感兴趣：

• 2009/08/04 -- 关于思维导图 关于MindManager
• 2009/06/24 -- 基于Android 国内eoeAndroid 团队打造豆瓣手机客户端
• 2009/06/15 -- Get Fedora ！ Fedora 11桌面版正式发布