任何应用，无论界面如何精美，操作如何直观，如果在速度上不能给人以快速的感觉，很容易被用户抛弃。在移动应用中，再没有比不断转动的刷新按钮更让人心烦的了，而移动网络相对来说，速度和不稳定性常常会受到各种因素影响，给开发者带来了挑战。Instagram 宣称自己是“快速的美图分享”，它是如何做到“快速”的呢？这是  Mike Krieger 需要解决的问题：

速度如何成为一个设计特性

设计如何成为一个速度特性

这一切都在细节的实现，而这些细节都需要精心设计。为此，Mike 提出了三个让应用看起来非常快速的三个秘密：

• 应用上的积极操作
• 根据情况提前载入内容
• 背后不可见的数据传输

关于操作的积极性，Mike 举了这样一个例子。从用户点击 Like 到 Like 成功，期间有和服务器交流的时间，但是，在用户提请的要求仍在进行时，移动界面就已经显示了 Like 成功。用户的评论仍在提交的时候，移动界面就显示评论成功。同样，在用户”跟随”请求提交时，界面上就已经显示跟随成功。

关于提前载入内容。最基本的是在用户打开应用时，就开始载入一定数量的图片流，而关键点是不要根据时间顺序，而是根据重要性。用户自然希望看到所有内容，但是他们首先想要看到的是哪些最受欢迎的内容，这正是社交网络的要义所在。

关于背后不可见的数据传输，这是指应用要根据用户的行为作出预测，提前开始传输数据。举个例子，当用户注册 Instagram 之后，决定上传图片，他将一副图片设置滤镜效果之后，可能还需要选择位置，设置各种社交网络的账户等，然后才提交。Instagram 在用户设置滤镜效果的时候，就开始提前上传图片了。

Co.Design 网站将 Mike Krieger 的三条秘密称为“三个善意的谎言”，并将其归结为更容易理解的三个要点：

• Instagram 假装永远在工作
• 根据重要程度而不是次序装载内容
• 考虑用户的每一步动作

这三条秘密，都是在移动网络速度不佳的情况下，为用户制造“应用速度很快”的一种错觉，因此，从本质上的确是“谎言”，但是通过“提前传输”和“随后实现”，Instagram 使用户在操作上更有效率，减轻了等待的烦躁感。即使操作的实际效果是”随后“实现的，但这”随后“也是很短的时间，并不会对用户带来什么损失，因此，这的确是”善意“的谎言。

从 Instagram 的设计上，我们可以看到，设计师是如何利用用户的心理，提升用户体验的。Co.Design 网站对此总结的很精辟。

界面从表面上看起来越简单，便越有更多的工程师在其下面游动，使其得以漂浮起来。

 

题图来自 CSMonitor

您可能也喜欢：
黑色速度仪表盘	25个漂亮的网页页脚设计	10个基于jQuery的超酷动画教程和插件推荐	多彩圆角按钮	漂亮的水晶按钮
无觅

Ⅰ. 什么是原型?

原型的概念说的简单直白些就是用户使用产品的界面模型，原型的设计主要包括三部分：①需求内容的呈现  ②导航和链接   ③数据的交换

①需求内容的呈现

1）文本，多媒体内容的呈现 

最基础的web页面就是文字和多媒体的载体，通过文字和媒体把需求内容呈现给访问者是Web设计最最基础的部分，设计师需要将信息分主次的传达给访问者，这是设计最基本的目的，之前我写过类似的文章《视觉设计是为了表达信息》。其实不管是交互还是视觉，都应该具备排版组织能力，分得清主次，明白目标，懂得用户群，才能谈的上设计。

了解栅格，有排版功底的交互设计师可以省去很多沟通成本：

和传统的视觉排版不同的是，交互设计需要在有限的空间内组织信息，举几个最常用的手法：

在设计布局的过程中，交互还必须要清楚前端实现的方法，基本的html,css和一些常用脚本效果都要有所了解。

2）行为召唤

除了基本的排版布局，交互在需求的呈现方面还需要花点心思。读点心理学，了解数据分析，熟悉用户的行为习惯，想好以何种方式呈现内容才能迎合用户。对待用户，设计师要有一颗奴才的心态去猜测主子的玻璃心。

先介绍一种内容引导的方法，姑且给这样的设计方法称作为“行为召唤”。所谓的“行为召唤”就是呈现界面的时候考虑到用户心理，能够激发起用户的参与度。一些比较生硬的做法比如：文字加粗加大变色，按钮变大，AD广告做成gif图或flash晃来晃去，增加new,hot等图片标签，或者干脆用性感美女做广告。这些做法虽然破坏了画面和体验，但还是要承认这些比较生硬的设计方法确实能够吸引一部分用户的注意力。

如果将这些方法做一些思考用另一种方式呈现：

上述都是利用心理学的方法做的“行为召唤”，理解用户，站在用户的角度思考问题是交互设计师必须要学习的方法之一。

3）示例引导

如果给用户三个垃圾桶，分类分别是可回收，不可回收，有害垃圾。无论你怎么设计外观，用什么颜色，还是有很多用户不知道该如何分类。但如果垃圾桶内已存在一些垃圾，用户自然会根据上一个人的垃圾来选择分类。这样的引导方法同样可以运用到Web设计中。

看一些例子：

②导航和链接

除了内容的呈现，网页中还存在着大量的导航和链接，也就是传说中的信息架构。信息架构主要目标就是以最短时间，最方便的形式让用户能够快速找到想要的内容，关于结构导航的概念请阅读上篇文章《交互设计的职能》中的<1.关于结构导航的设计>，这里再粗略的讲一下链接，也就是导航中的关联导航。

关联导航主要就是解决用户“下一步”应该做什么，这个分两种情况：

1）产品经理希望用户做什么

产品经理会迫于一些指标压力将业务模式加到网站中，这些内容可能是和用户自己预想的内容毫无关系。那么这一类的链接都统称为业务式链接。

这一类的业务链接内容，交互所需要考虑的就是怎么将这些链接融入到页面中，强调又不至于太生硬。常见的方法基本上就是图文混排，动态播放滚动，AD广告插入。

2）用户到底想做什么

用户想做什么可能他自己都不是很清楚，如何帮助用户发现感兴趣的内容就需要通过元数据自动创建关联内容。元素据包括：时间，类型，主题，兴趣，搜索或购买记录等。这时候的链接是靠程序生成的，交互设计师要能够看的懂数据，给出合适的链接规则。

例如最常见的“猜你喜欢”

如果能够将业务导向和用户的心理模型保持在一个维度，比如google,baidu的个性化广告投放，那么这个产品的体验和转化率自然就会上升，不过要做到这一点，需要数据分析人员，产品人员和交互设计师的共同努力。

③数据的交换

之前所讲的内容都是我们呈现给用户的内容，但产品级的Web的还需要与用户之间有互动，也就是数据的交换。如何让用户参与的更容易，数据交换的更顺利，这就是我们平常所谈到的产品的易用性。那么原型阶段是怎么做到让产品更好用呢？

1）熟悉并运用Web平台的各种标准组件

另外附一个jQuery组件的Demo预览网站http://jqueryui.com/demos/

2）给出合适的即时的操作反馈

3）容错性原则

4）程序能够实现的，尽量不用让用户去操作

类似导入类似产品，选择记录，智能搜索等

Ⅱ. 如何绘制原型

绘制原型当然要先选工具,博主用过以下原型工具：

当然最后还是觉得Axure最好用，工具的使用方法请移步到产品原型设计论坛，本篇就不再赘述了。

Ⅲ. 原型是过程，不是最终结果

我觉得这个观点非常重要，所以单独列出来讲了。我曾经很迷恋工具的使用方法，甚至会利用PS切图将原型做到非常逼真的程度，但时间长了会觉得这样的举动非常没有意义，而且会不自觉的抗拒别人的修改建议。原型只是一个概念到实现的过渡，是不同部门对话的交流介质，最终还是会被开发需求文档和前端稿所取代，交互的重点在于沟通和帮助项目成员理解改进需求。

所以我一直觉得交互设计就是一个有产品思想的需求翻译，比视觉更懂产品，比产品更懂设计，是承担起概念到实现的沟通桥梁。所以，广泛的接受修改建议，有选择的对原型不断的做改进，利用原型引起项目成员的讨论，每次的原型修改都是一次理解上的进步，这样才能发挥交互设计的真正意义。

最后写点总结：

原型的制作是一项比较复杂的工程，没有捷径和速成的方法，能力上的差别基本上在于项目经验的积累和对业务的熟悉程度,当然个人的感悟认知能力也很重要。博主也是一名入行不久的交互菜鸟，写这样的文章基本上都是自己对交互设计的个人理解，希望能够起到抛砖引玉的效果。

您可能也喜欢：
与瀑布模式说“再见”：5 个步骤实现响应式 Web 设计	浅析·平面与网页设计的差异性	响应式网页设计（Responsive Web Design）	移动网站设计要点及建站工具	20个帮你提高移动网页设计的教程
无觅

当然，对象绘制、变换时像素对齐网格并不是PS CS6独有的功能，只是更智能更好用了，PS CS6的像素自动对齐网格功能在绘图过程中，无疑方便了很多，不必再担心图形边缘会出现模糊，但是我们在实际的图形设计过程中会发现，还是会经常需要调整一些路径没有完全对齐到网格产生的半透明的过渡像素，用来平滑图形边缘减少锯齿感，或让图形看上去更饱满、更细腻，我们称其为次像素 (或亚像素，Sub-pixel，一般用于屏幕显示技术等领域)，如下图所示。

图1-消除锯齿的次像素

趁着 PS CS6正式版还未普及，以PS CS5为例，和大家探讨矢量路径图形绘制时如何让像素对齐网格，如何利用路径调整次像素改善图形的饱满度的一些经验，希望对大家有所启发和帮助。

一、像素对齐网格

1. 对象绘制时像素对齐网格

像素对齐网格最大的作用就是避免绘制图形时出现虚边，解决图形模糊的问题，尤其是将画布放大数倍去抠界面、图标细节时，精度可以达到像素级，让设计师将精力更多的集中在创意表达层面，不必因为担心模糊而谨慎的去操作，从而提高工作效率。

在PS CS5初始状态时，只有当画布在100%比例下，也就是实际像素比例时，画出来的图形才不会模糊，放大或缩小画布到其他比例下，即使打开网格进行辅助，画出来的图形也会模糊，如图2所示，蓝色图形与紫色图形分别为100%画布下不打开网格，和非100%比例画布下打开网格随意绘制的相同大小的矩形，我们能明显的看到紫色图形边缘非常的模糊。

图2-对齐像素图形和未对齐像素图形的对比

这时的网格没有起到作用，是因为在PS CS5初始状态时，网格的参数不是以像素为单位，而是毫米，如图-3，首选项窗口可以通过主菜单中“编辑>首选项>常规”或快捷键Ctrl+K来打开。

图3-初始状态下的网格参数

想要在常规图形 (矩形、圆角矩形、圆形) 绘制过程中，使像素在任何情况下都对齐网格，在PS CS5的首选项窗口中，对“参考线、网格和切片”选项卡的网格参数进行简单的设置，并配合快捷键就可以做到。

图3中可以看到网格线间隔的默认值是25毫米，将单位改为像素，这时单位前面的数值会自动变为1，这时的网格线并未与画布上的像素格对齐，需要手动重新输入数值，且网格线间隔数值与子网格数值必须相等，图4展示的是在3200%比例下，两种不同数值网格所呈现出的效果，可根据自己的喜好进行调整。网格可通过主菜单“视图>显示>网格“来显示或隐藏，快捷键为Ctrl+’(回车左侧的引号键)。

图4-不同网格参数呈现的效果

完成了如上设置，最后确保”主菜单>视图>对齐”及“对齐到>网格“两个选项已勾选，“对齐到>网格“选项在打开显示网格的情况下才可编辑。

图5-对齐功能及相关选项

像素对齐网格设置完成，以后在非100%视图下绘制常规图形，只要打开网格辅助，就不会出现模糊情况。像素对齐网格在PS CS5中还是存在一定的局限性，受到图形形状的约束，当使用线条工具、多边形工具、自定义形状工具绘制一些带有倾斜边缘或非直角的图形时，还是无法保证所有角点和边缘对齐网格，当然这里的模糊更多的是防锯齿效果，可以利用网格手动调整。

2. 对象变换时像素对齐网格

PS CS5中，长宽都是奇数或都是偶数时，进行90°变换时都可以对齐像素，当长宽数值分别是奇数和偶数时，再进行顺时针或逆时针90°变换就会使图形模糊，无法对齐到像素，这时可以先旋转，然后打开网格进行辅助，不要退出自由变换模式，拖动对象，这时边缘就会自动吸附对齐网格，如下图：

图6-变换图形时对齐网格

二、利用次像素让图形更饱满

举个小例子，看看次像素在图形设计中的作用，抛砖引玉。

在界面设计中，经常会绘制下拉菜单等控件上的三角形箭头形状，最常见的做法就是用铅笔工具点象素画出来，如图7-a所示，看上去很清晰，但在分辨率较小的屏幕上看，会稍显生硬、有锯齿感，影响界面的细腻度；用路径对齐网格绘制箭头，如图7-b所示，解决了锯齿问题，但看上去体量感被削弱了，不够饱满；图7-c中所示的效果，是对次像素微调后的效果，既消除了锯齿，而且在体量感上不输第一种方案的效果。

图7-三种不同方法绘制的箭头

没看出差别？我们将三种方案放在一起对比下，见图8，从左至右依次为图7中的a、b、c方案，我们看到中间的b方案虽然没有了锯齿，但体量上明显小于a、c方案，而c方案同时具备无锯齿、相等的体量感两个优点。

图8-下拉箭头效果对比

通过放大图片我们可以看到在次像素上的差别，要达到方案c的方法其实很简单，看看下图放大的效果和路径你就明白了。

图9-使用路径改善后的次像素

只要将角点上的路径锚点分别向外移动一点，让原本颜色比较淡的次像素稍微加深就可以了，操作时，放大画布让调节更细微和精确，选中锚点，轻点多次键盘上的方向键来移动即可，这个方法不局限于箭头形状，大家可以开启像素眼去发现更多的应用场景。

总结

啰嗦了这么多，希望这些小的点能对大家工作有所帮助和启发。我们总是希望利用现有的资源做更多的事，不断的探索设计中的更多可能性，关注设计细节的展现，无论是PS CS5还是即将发布的 CS6，每一项功能改进都激动人心，使操作更加得心应手，也帮助设计师能够在更智能的环境中专注于创意表达，提高输出效率，相信Adobe CS6设计套装在各个方面都不会让人失望，让我们一起期待。

您可能也喜欢：
2012年10大科技趋势预测：触摸、声控和可弯曲屏幕	绿色主题的联系表单	两款圆形进度显示条	清新简洁UI主题包	The Expressive Web：最具创意的HTML5和CSS3特性展示
无觅

本文整理了16款非常实用的jQuery导航插件，你可以轻松将它们添加到你的网站中，以便为你的网站用户带来更好的浏览体验。

点击下面的这些标题，可以在打开的页面中查看插件演示或下载插件的源码。

1. Slide Down Box Menu with jQuery and CSS3

2. Professional dropdown

3.  Designing the Digg Header

4.  Sherpa 

5.  FooBar 

6.  Mega Menu Reloaded 

7.  LeTabs 

8.  QuickAccess Menu 

9.  PathD!

10.  LiimeBar

11.  Create Vimeo-like top navigation

12.  SmartAjax – Smart, Powerful and Easy to setup AJAX

13.  Quick & Pro Menu Navigation jQuery Plugin

14.  Sticklr – Sticky Side Panel CSS3 + jQuery Plugin

15.  Menu Maker CSS3 jQuery

16.  jDropDownMenu

原文：Useful jQuery Navigation Scripts

转自：ITeye

您可能也喜欢：
7款基于JavaScript/AJAX的文件上传插件	10个简单易用的 jQuery 拖放插件推荐	10个让人印象深刻的 jQuery 手风琴效果应用	20个超强的jquery图片和多媒体展示插件	10款基于jQuery的切换效果插件推荐
无觅