IT瘾交互设计推荐

交互设计师怎样做竞品分析？

Mon, 08 Mar 2021 08:00:21 CST

前言：做竞品分析包含了太多方面，本文主要是针对交互设计师如何做竞品分析进行分享。

什么是竞品分析？

竞品分析的对象一般是和自家产品存在直接/间接竞争，或者用户人群、产品定位和功能存在重叠的产品。作为交互设计师，我们研究竞品分析时需要从产品概况、功能、流程和交互等方面全方位的分析。并从竞品中得到对应的启发，将其复用到我们自家的产品中，这也是竞品分析的意义所在。

为什么要做竞品分析？

做竞品分析可以快速了解行业头部产品的设计情况，我们选取竞品分析的对象一般都是同行业主流的产品，这些产品对目标用户的认知和使用习惯已经培养起来了，这时候我们分析竞品，可以减少我们设计失误的风险。正所谓知己知彼百战不殆。做竞品分析有助于产品经理和设计师更好的跟进和学习。目前网上的大部分竞品分析主要都做的大而空，好多都是偏行业分析，对于交互设计师而言，看完之后无法得到有用的信息。同时对于交互设计而言，帮助意义不大。

如何做适合交互设计师的竞品分析？

做适合交互设计师的竞品分析，那么主要站在交互的角度来做竞品分析。首先需要弄清竞品的基本情况，例如产品的定义、产品的主要使用场景和产品的目标人群等，这些大前提了解后，那么对于之后的分析才能保证有全局感，避免因为不了解竞品的定位和目标人群导致分析错误。其次是分析竞品的主要功能和主流程操作有哪些，这些是竞品的核心部分。分析竞品的哪些功能和流程做的好，这些流程和功能是否也符合自家产品的定位和目标人群。能否从这些竞品功能和流程中得到启示。然后就是竞品的使用体验，使用体验的好坏，直接与产品的留存率挂钩，用户的使用体验越好，则产品的留存率越高，产品的用户增长会越快。最后就是交互体验，分析竞品在交互方面的优缺点，通过痛点找到其机会点，并运用到自身产品上。

竞品分析内容包含哪些？

竞品分析可以包含四大部分。第一部分讲解竞品概况。第二部分讲解功能与流程。第三部分讲解用户的使用体验。第四部分讲解交互体验。

1.竞品概况

做竞品分析之前，找准目标竞品，然后对目标竞品进行详细分析，避免因为自家的产品和竞品存在明显的产品定义和使用人群等差异而盲目的借鉴，这样“借鉴”的设计反而对我们自家的产品设计有害。竞品的概况可以从四个方面着手，他们分别为产品定义、使用场景、目标用户和特征集合。通过了解这四种情况，可以很好全局观的了解竞品概况。产品定义：了解竞品的产品定义，通过产品的定义可知道竞品的定位。产品的形态是基于产品定位而形成，所以产品定义很重要，它是产品根本。使用场景：分析竞品的主要使用场景有哪些，通过分析竞品的使用场景，看看和我们的使用场景是否存在差异，了解竞品的使用场景，可方便后续我们分析他们的交互设计。目标用户：竞品的目标用户是哪些，了解竞品的目标用户，那么我们分析他们的功能、流程和使用交互的动机可以更好的得到解释。特征标签：竞品的标签化的特征，通过标签化可以快速了解竞品的特征。

2.功能与流程

竞品的功能与流程这是偏产品设计层面的，一个优秀的交互设计师，是完全可以左右产品功能决策。所以掌握竞品和自家产品的功能与流程，对于做交互设计师来说具有重要的意义。产品功能：竞品的功能主要有哪些，功能是否和产品的定义、使用场景和目标用户产品相匹配。操作流程：竞品的操作流程主要有哪些？找出竞品的核心功能和对应的操作主流程。分析竞品的主流程在操作流程是否高效、顺畅。

3.使用体验

这里的使用体验是指用户在使用过程中的整体感受。使用体验包含用户操作过程中的效率，对信息的呈现和布局的理解。是否存在干扰信息导致用户认知和操作出错，使用起来是否存在压力的情况等。操作效率：用户在操作过程中的整体效率度，整体操作流程越简洁，则操作效率度越高。用户满意度也越高。信息布局：产品的信息以何种设计形式展示出来，展示的整体布局是否统一而清晰。信息呈现：信息以何种方式呈现，统一而层级分明的呈现方式可以极大的提升用户获取信息的效率。信息干扰：用户通过展示出来的界面来获取信息和操作，以满足用户的需求，所以设计师做设计本质上是对信息的设计，信息设计的不好，就会出现信息干扰的情况，针对这种情况，如何减少信息干扰是设计师需要时刻思考。使用压力：用户在使用产品的过程中都会存在使用压力的情况。产品的体验越好，则用户使用起来的压力就越小，所以设计师在设计产品的过程中要尽量减少用户的使用压力。使用成本：用户在使用产品的成本情况，使用成本越高，用户越容易流失，产品的留存率也就越低，留存率是产品是否实现快速增长的一个重要指标，所以我们要尽量减少用户的使用成本。

4.交互体验

主要体验产品的交互层面使用情况。交互体验主要和六个方面有关，他们分别是流畅度、反馈、防止错误、一致性、可见性和组件使用。流畅度：用户在操作流程过程中越顺畅，则流畅度越高，流畅度一般和操作路径、用户对界面的认知有关，认知负担越小，操作路径越简洁，则流畅度越高。反馈：产品的反馈直观的表现为界面的变化（少数为声音和震动），通过这种变化，用户能够更加友好高效地与产品进行交互，更加专心地投入到任务流程当中去。及时的反馈响应以确保用户知道自己所处的状态，否则会让用户觉得反应迟钝；另一方面，我们也要避免过度的信息反馈，而尤其注意不要反馈错误信息，错误的信息对用户造成的影响是巨大的。当用户执行完一步操作后，系统没有及时甚至没有给出相应的反馈提示，就会给用户带来疑惑（实现模型与心理模型冲突），让用户不能确定自己的操作是否被执行、执行是否成功、执行整体进度、或者是执行后会产生怎么样的影响、能在哪里查询到结果以及执行后是否可以被撤销等等。而这其中的任何一个环节都有可能影响到用户对当前任务的理解以是否执行下一步操作，从而影响到产品的用户体验。防止错误：设置防错的机制，减少用户犯错。对于用户已犯错提供挽回措施。好的产品都会防止用户犯错，在用户犯错前给予友好提示，挽回犯错。一致性：遵循统一的产品设计规范／逻辑。这里的一致性包含产品和跨平台产品之间的一致性。产品间的一致性，包含视觉和交互的一致性，无论是文案、视觉风格、组件样式等都包含一致性。可见性：对于重要信息，让用户可以清楚的找到，并发现，在用户需要的时候可快速的进行操作/查看。组件使用：产品设计的好坏，组件的使用是重要的参考标准，组件使用的准确统一则交互体验也就越好，所以交互设计师要多分析优秀产品的组件使用。作者 | Echo 来源 | Echo的设计笔记(id:uxecho)

(ノ◕‿◕)ノ*:･ﾟ✧ 查看最受欢迎 301 个设计网站 *:･ﾟ✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论

错误信息提示在表单中的最佳位置

Sat, 01 Jun 2019 17:18:49 CST

在你的表单设计中，你会把错误信息提示放在哪个位置呢？如果它们不符合用户预期，就可能成为用户体验上的障碍。试想，当用户输入错误的信息时，他们首先需要理解错误是什么，然后才是修正错误、重新提交表单。但如果这个过程太费劲，他们可能就会选择放弃继续填写。

表单上方的有效性 VS 内部的有效性

最常见的错误信息提示放置位置是表单的上方或内部，那么哪个位置对用户来说体验更好呢？有研究发现，在表单上方显示错误信息提示，会对用户的记忆产生负担。当填写错误时，错误信息提示在最上方容易让用户在改正信息的时候要去回忆，到底是哪里填错了，怎样才能填正确。而把错误信息提示放在表单内部可以减少用户的记忆负担，用户主要依赖于即时识别而非回忆，所以会更快更简单地改正错误。另一个研究发现，“输入错误和错误信息提示的距离影响错误修正的效率”。把错误信息放在表单顶部或者底部，会导致用户修改错误所需的时间最长，而内联形式的错误信息提示所需要修改的时间是最短的。同时，将错误信息放在表单顶部或者底部在用户侧，错误率最高、修改时间最长，用户满意度也最低。其中，与顶部和内联相比，底部的提示具有最低的纠错成功率。

错误信息提示位置的用户偏好

研究证明，内联形式的错误提示可以得到最佳的用户体验，同时这项研究还给上下左右四个方向排了优先级（如下图）。参与这项研究的用户，对他们最满意的信息提示位置进行了评级，显示出了强烈的用户偏好。放置在左侧的错误消息被评为最差，在上方的被认为难以记忆，下方的被认为比较难记。

输入框右侧是最佳区域

理解为什么放在右侧能够符合用户习惯与期望是重要的。通过这种方式，设计师可以做出体验更好的产品。西方的阅读习惯是从左到右。当用户视线从输入到错误反馈，这是一个非常自然的过程，不需要动脑。从看到错误信息提示到输入改正错误，也需要遵循阅读习惯。

输入框左侧是最差区域

把错误信息提示放在左侧区域，违背了西方的阅读习惯。当错误信息提示出现的时候，用户的视觉动线需要朝着阅读习惯的反方向移动。这会让用户感觉到不自然，而且这会违反直觉，因为用户预期高优先级的元素应该是在左侧。把错误信息提示放在左侧让人感觉比输入项更重要。但是输入内容显然是更重要的，因为用户需要聚焦在输入框上，修正他们的输入。

输入框的上方增加识别负担

当错误信息提示放在输入框的上方，而表格上方有标签项的时候，用户会经历更高的认知负担。这是因为错误信息提示和标签混在一起，很容易让用户产生疑惑。根据临近原则，当用户尝试去阅读错误信息提示或标签的时候，这两个文本会产生视觉混乱，所以结果是难以聚焦而让用户分心。

错误信息提示在移动端表单的最佳位置

手机屏幕缺少横向空间去展示输入框两侧的错误信息提示，这就意味着放在右侧的错误信息提示对于手机端表单来说不是最好的位置。正确的处理方式是把错误信息提示放在输入框下方，这是用户第二偏好的位置。尽管这不符合用户的从左到右的自然阅读流程，但符合从上到下的阅读顺序。当用户阅读文本时，他们的视线是从左到右、从上到下地看。错误信息提示在输入框的下方是符合垂直的阅读顺序的。需要注意的是，把错误信息放在输入框下方时，不要与表单项目标题靠的太近，会容易形成干扰。

输入框的右侧 VS 输入框的下方：哪个是最佳位置？

输入框的右侧或下方都是错误信息提示的最佳位置。选哪个位置取决于你需要做多少工作。如果你想节省时间，桌面端和手机端设同一套的话，选下方位置。如果你有时间和资源为两端做不同的设计，那手机端选下方，桌面端选右侧，这个方案可帮助缩短用户在电脑端的视觉路径。

直觉的错误信息提示位置

总结一下， 错误信息提示的位置应该和用户的阅读流程保持一致，这样错误改正用到的成本最少。当减少用户操作和思考的时间精力，用户就能更快完成表格。没有人喜欢填写表单，因此，帮助用户更快地填写表单，产品的体验才能变得更好。原文：https://medium.com/@uxmovement/the-best-place-for-error-messages-on-forms-6e9e84740be8 作者：UX Movement 译者：胡白白 (公众号：彩云译设计 id:caiyunyisheji)

(ノ◕‿◕)ノ*:･ﾟ✧ 查看最受欢迎 301 个设计网站 *:･ﾟ✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论

用3天时间设计一款完整的APP作品

Wed, 06 Mar 2019 08:00:14 CST

很多人说看过很多设计道理却依然做不好设计，还不如直接看设计案例来的简单粗暴。今天为大家找到一篇实战好文，一个人，3天时间，打造一款APP全流程设计，学起来吧！几周前，我接到一个设计需求是为食品行业设计一套解决方案，甲方给出的时间是必须在3天内完成。乍一听，可能会觉得这几乎是不可能的，但是如果你熟悉“GV Design Sprint ” （译者注：GV Design Sprint就是一个专业的设计流程方案，想了解的朋友请见https://designsprintkit.withgoogle.com/introduction/overview），那么就会明白，这实际上是可以做到的。我发现这是一个非常好的机会，可以在这么短的时间内实践一套设计方法。在这篇文章中，我将逐一向大家分解我的设计过程和每天的设计进展。

项目背景

Common Food是一个使用社区支持农业(CSA)出售水果蔬菜的农场。人们需要在年初提前预定农场一年的收成，然后在生长季节里，社区成员每周都会收到一箱食品。（译者注：CSA的运作过程通常由认同相同理念的社区支持者（个人或单位）采用共同购买的模式，预先支付一笔费用给当地的小农户预约一季或一年的收成，农民收成后，再根据实际产出的多寡分配给会员，如此达到结合社区力量支持在地农民采用有机农耕的积极意义。——百度百科）

设计挑战

设计一款应用，帮助普通农场每周能向会员们卖出更多的农副产品。帮助他们个性化的推荐食品方案，以满足会员们不同的知识水平，兴趣和饮食限制。

第一天：资料收集

研究方法

研究阶段往往会占用一些时间，所以尽可能的利用手头现有信息是节省时间的好办法。市场环境二手资料，竞争对手，用户调研或者直接去App Store中收集用户评论，我需要尽早了解清楚用户的思维模式。

用户调研

Common Food 公司会在每个季度对会员们进行回访，以便能更好的了解他们的喜好，以下是今年的一些反馈：

“我喜欢烹饪和做罐头。我可以多买一些西红柿吗？” “大头菜我不喜欢吃，我把它都扔掉了，不过生菜确实很好吃。” “我儿子对花椰菜过敏，所以我们从不吃花椰菜。另外我喜欢吃蒜蓉，但不知道怎么做。” “我希望我能有更多的大头菜，然后用来做泡菜。” “ 我觉得我们应该需要更多的CSAs，继续扩大农场的规模。我现在看到了很多转基因的怪物农作物，希望有渠道能及时发布最新消息。” “我们能不能弄到更多的甜菜？” “我从来没听过白菜，它看起来很漂亮，但是我不知道怎么做这道菜。”

一份来自Field Agent的最新报告发现，不管是在计划内还是计划外购物的网购者来说，农产品都是一个很受欢迎的类别。65%的受访消费者表示，他们购买的是新鲜农产品，与冷冻乳制品并列第一。31%的人说他们一时冲动买了新鲜水果和蔬菜，超过了零食（23%）和糖果（14%）。然而，39%的网购者并不会在网上购买新鲜农产品，因为他们更喜欢去菜市场。

市场调研

市场研究公司Mintel发现，尽管消费者越来越多的转向网上购物，但只有十分之一的美国人会通过电商购买新鲜的农产品，肉类，家禽和鱼类。该研究建议，为了打消消费者的顾虑，提高销售额，零售商应该多提倡节约成本，并提供更全面的产品信息，以建立信任，提升价值吸引力。研究表明，亚马逊的“购物车和收藏”等功能对于忙碌的消费者来说也是一个很有吸引力的点，特别是女性（48%）比男性（37%）更有可能在线购买，做好功能体验很重要。

头脑风暴

脑暴出的问题 1、我们如何收集用户需求数据来减少浪费和分配食品？ 2、我们如何通过季节性食物和促销活动来增加销售业绩？ 3、我们如何帮助会员根据他们的饮食偏好发掘额外的食物需求？

用户画像

用户调查的结果提供了足够的信息来创建用户画像。我选择创建与年龄和性别都无关的角色，以便能够将更加聚焦在如何平等的实现用户目标上。

用户画像

竞品分析

当我准备进入草图阶段时，我将会研究在相关行业或竞争对手那里类似的问题和解决方案，以确定最佳方案。 盒子大小和内容分类 FarmBox Direct和Farm Fresh to you两款产品分别提供不同的盒子大小和产品选项。（译者注：为什么会定义盒子大小，这是因为他们每周会发放给会员的食品是以盒子来计量的。） 自定义盒子装的食品种类 FarmFresh to You让你定制你的盒子，添加或删除农产品和设置数量。但你必须充会员才能定制它，与此同时，你也可以为排除项创建项目列表。

FarmFresh to You

真实的食品照片 Farmstead 允许添加任意数量的购物清单，你可以添加，删除和浏览，都没问题之后再来结账。Farmstead提供真实新鲜的产品照片，不像其他竞争对手使用库存的照片。

方案思考

我的解决方案是设计一个APP，从会员那里收集数据，比如家庭规模、饮食偏好等等，让会员们可以轻松定制季节性食谱。利用人工智能了解会员的饮食习惯，提供食谱，饮食建议和运营一些有针对性的促销活动，取得双方共赢。这些数据可以帮助我们从会员那里得到反馈，然后就可以知道他们在哪个季节可能会重新订购哪种类型的产品或组合，以及他们实际上最喜欢什么产品。

第二天：草图和设计

我喜欢在自己感觉“明白了”之后开始画草图，我会把自己的想法都画出来，然后再把自己觉得不好的想法剔除掉，保留自己觉得最好的效果。我会通过绘制用户旅程地图来定义用户任务和目标。

用户旅程地图

解决了用户角色，竞品分析和草图方案，接下来，我就开始为注册了这些服务的会员们设计流程。一旦他们通过APP首次下单，我们的数据库中就有了用户的日程安排、发货和账单信息。一旦确认了这些流程信息，我就准备开始画线框图。 线框图 线框图是APP的骨架，这让我在开始做视觉设计之前，能够专注于关键功能、元素和交互。我选择了高保真线框图，这样我只需要在一些色彩，配图，和图标上进一步思考视觉呈现。 风格板 在画好线框图之后，我会找相同行业内的APP视觉做一个风格板来作为设计参考。 配色方案 我选择了鲜红色作为主色。鲜艳的颜色会让人胃口大开，红色也会引发购物欲望（促销、清仓、热闹等氛围）。 字体选择 图标设计 当说到图标和节省时间这个话题时，我不建议把它们都画出来。尽管我很喜欢自己画图标，但是这次时间上并不允许。我推荐一些图标库，比如Material Design icons（https://material.io/tools/icons/），或者我这个应用用到的一个图标库The Noun Project（https://thenounproject.com/#）。在利用这些图标库时，请注意购买版权，如果不想付费，也必须注明图标来源，定稿后有时间再来重新画。 Logo设计 我期望这个APP能有一个清晰易懂的名字，同时也希望能有一个与名字非常匹配的Logo。在思考了很多名字之后，我觉得“FameCrate(农场条板箱)”这个名字非常的适合，通过不断迭代，优化，最终得到了下面这个Logo。 视觉设计 我喜欢尝试不同的风格和设计变化，我对第一稿不满意，因为缺乏整体上的一致性，然后不断优化，直到最终全局页面都能做到统一协调并符合自己的设计预期为止。

第三天：交互原型

到了第三天，我完成了最后的视觉设计，便开始做可交互原型。我等到这个阶段才开始做这事，主要是因为如果在线框阶段就开始做原型的话，尽管它们是高保真的（我经常这么做），但会花很多时间在交互界面上。对于这个项目，我在设计完成后再来添加交互动作，其实是为了节省时间。 最终设计 自动动画 我会用Adobe XD的自动动画（https://helpx.adobe.com/xd/help/create-prototypes-using-auto-animate.html）功能来做原型设计，这是节省交互动画制作时间的好办法，而不是在After Effects上花费几个小时来做这种效果。下一步 可用性测试 找一些真实用户来做这项测试。我个人最喜欢用Maze.Design（https://maze.design/）这款工具来记录测试结果，它易于使用，并能提供有关原型的全面数据分析。 不断迭代 通过可用性测试的一些结论，在设计上进行迭代，改进用户流程。总结在有限的时间内，你绝对不能让自己分心，必须专注于这个项目并管理好自己的时间。我会给自己进行计时，并在每一个步骤上给自己设定时间限制。我试着让APP用起来尽可能的简单，从草图和用户旅程地图就要开始思考，最后这一切才能水到渠成。感悟永远相信你的直觉，不要害怕设计修改。如果你把我的线框图和最终的设计效果图进行比较，会发现我做了很多的选择来改进最终的设计。另外，也可以使用你自己熟悉的软件，或者你自己知道的更快速的方法，而不要太花费时间来确定是不是跟我完全一样。原文：https://uxdesign.cc/ux-ui-case-study-designing-a-food-app-in-3-days-1e2856680205 作者：Paola Ascanio 译者：彩云Sky(微信号:caiyunyisheji) 本文翻译已获得作者的正式授权

(ノ◕‿◕)ノ*:･ﾟ✧ 查看最受欢迎 301 个设计网站 *:･ﾟ✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论

后台产品的容错性设计

Fri, 03 Mar 2017 13:20:19 CST

容错性是什么？

容错这个词严格来说应当是计算机领域的词汇，如果以比较标准化的描述来定义的话，容错指的是“当计算机由于种种原因在系统中出现了数据、文件损坏或丢失等等其他故障问题的时候，系统能够自动将这些损坏或丢失的文件和数据恢复到发生事故以前的状态，使系统能够连续正常运行的一种技术。”这个听着有点绕口，其实简单来说，就是当计算机故障发生或者存在的情况下，计算机系统依然可以正常工作的能力，这就是计算机的容错能力。容错性其实就是可用性之中细分的一个模块，是专门针对用户在使用产品的过程中如何避免出错以及一旦出错如何尽快有效的纠错的研究和设计。

容错包含产品防止错误的程度和帮助用户从错误中恢复。防止错误是通过页面的设计、重组或特别安排，防止用户出错。比出现错误信息提示更好的是更用心的设计防止这类问题发生。纠错设计就是当错误发生时，人们看到的界面，并且提出一个建设性的解决方案。就像对付不该发生的错误一样，容错性设计的关键在于“做好防御”。产品设计者们必须不断寻找可能造成用户困惑和不满的出错点。好的防御性设计决定用户体验的好坏。

为什么强调后台产品的容错性设计 ?

后台产品和前端产品存在很大的差异性。后台多为复杂型交互逻辑，有多分支功能页面多功能交互能力，后台产品更加注重的是业务逻辑的清晰和功能的实现，而前端产品对视觉设计和交互设计有更高的要求。一个完备的后台可能会包括多种类型或者不同权限的用户，在不熟悉业务情况下会产生已知未知错误或误操作等行为。很多后台功能复杂功能之间很多时候并非完全割裂互相交织的，粗暴的将功能堆积在一起自然不太合适，影响用户的操作体验。

容错性的设计分析：

1、操作前-提醒防错

1）详尽的说明文字且引导和提示，突出表现

主要是针对新用户，目的是为了正确引导用户学习使用。引导和提示要突出表现，从而引起用户关注，确保用户在操作前能注意到引导或提示信息。

输入框填写说明可以让用户很容易清晰的识别具体填写内容。

2）当结果不可逆的时候，询问用户让其知道操作的后果

在用户操作前即给出正确且有效地引导和提示，有助于减少错误发生的可能性。如对于比较重要的操作，需要通过二次确认减少错误的发生。

2、操作中-实时提示&实时反馈

1）给用户的操作进行提醒

在后台众多需要填写表单当中，当鼠标聚焦在某一个操作区域时如果没有明确的预提醒，则容易引起误操作。

2）对用户的信息输入进行视觉化呈现，并提供回馈

数据录入是后台交互设计中最为重要的元素之一。对用户输入的信息进行实时检验，并给用户传递回馈，在下面这个案例中，当用户输入自己的邮件信息之后，即被告知用户这个动作的含义，到底是输入正确还是输入错误。

拿1688评价功能来举例，输入评价内容时评价所允许字数会随着输入内容逐个减少，实时的联动表达状态并提供反馈，并且这个操作也提升了用户直接的操作感，然后让用户看到自己的操作结果。

3）适当限制用户的某些交互操作

可以对一些可能造成错误的操作入口设置障碍或直接禁止操作，以避免错误的发生。举个例子：填写完一个模块内容，展开另一模块的同时收起上一个模块。填写过程限制用户某些操作这样始终让用户聚焦在当前内容。

3、操作后-结果反馈&纠正引导

1）错误发生时，即使反馈错误并提供纠错帮助

反馈错误及时就能保证用户每个阶段的操作都能得到回馈，避免因为一个小的错误就要修改相关联的一系列内容的情况，提高成功完成任务的效率；反馈不仅要指出有错，还要指出错在哪里。错误反馈文案要清晰、准确，这样便于用户了解错误的原因，方便下一步的修改。

2）允许用户犯错，并使操作者能够撤销以前的指令

Phone手机的还原功能，可以在用户出错时将多种功能设置快速还原到原始状态。

用户选购完商品后完成下单，可以通过“关闭交易”取消该订单。

3）不仅要反馈出错更要给用户解答，给予用户适当指引和建议

在发布供应产品中完成发布信息的编辑添加，点击“商品发布”按钮，如果有错误发生会在发布导航中提醒用户并告知用户导致发布不成功的原因。再比如：检测发布商品质量时，会提示该offer的质量星级以及给用户优化的内容指引与建议等。

4）允许用户犯错，且帮助纠正错误

当用户操作出现错误时允许用户犯错，且帮助将错误的信息纠正同步给用户。拿1688搜索来举例：用户想搜索“连衣裙”这类商品，但输入时用户输入成“连衣”，系统允许用户输入错误并且帮助用户纠正为正确字段。

除了上面讲的设计点以外其他重要的设计方法

1、费茨定律

Fitts定律其实很容易理解的。显然，指点设备的当前位置和目标位置相距越远，我们就需要越多的时间来移动；而同时，目标的大小又会限制我们移动的速度，因为如果移动得太快，到达目标时就会停不住，因此我们不得不根据目标的大小提前减速，这就会减缓到达目标的速度, 延长到达目标的时间。目标越小，就需要越早减速，从而花费的时间就越多。通俗点讲：任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。

菲茨定律的启示： 1）、按钮等可点击对象需要合理的大小尺寸。 2）、屏幕的边和角很适合放置像菜单栏和按钮这样的元素，因为边角是巨大的目标，它们无限高或无限宽，你不可能用鼠标超过它们。即不管你移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面。 3）、出现在用户正在操作的对象旁边的控制菜单（右键菜单）比下拉菜单或工具栏可以被打开得更快，因为不需要移动到屏幕的其他位置。

2、提供非模态的反馈，不打断任务流

模态是指界面中只有提醒弹框才具有可交互行为，其他一切都不可操作；非模态不会把提醒做成弹框，可能会处理成List Notification, Toast list等方式来提醒用户。

3、视觉情感化

心理学把情感定义为：“人对客观现实的一种特殊反映形式，是人对于客观事物是否符合人的需要而产生的态度的体验”。而设计的目标则是在用户接触和使用产品的过程中，激发用户的正向情感，比如愉快，信任，满足；避免用户产生负向情感，比如失望，挫折感，痛苦。正向的情感会使用户更乐于使用产品，遇到使用过程的一些小问题也更加包容。举个例子：网络问题导致加载数据失败404页面，通过友情提示动画的情感表达，这种情感化的语言也能舒缓出错时给人带来的失望，挫折感。

交互设计七大原理

Thu, 30 Apr 2015 03:09:12 CST

NO.1 菲茨定律

它由保罗.菲茨在1954年首先提出，具体内容为：从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小，用数学公式表达为时间：

T = a + b log2(D/W+1)

其中：T代表完成移动所需的平均时间，a代表光标开始/停止时间，b代表光标的移动速度，D代表从起点到目标中心的距离，W代表目标的宽度。

总而言之：目标越大，指向越快，时间越短。同样地，目标越近，指向越快，时间越短。也就是说，定位一个目标的时间，取决于目标与当前位置的距离，以及目标的大小。

菲茨定律对我们设计上的启示：

按钮等可点击对象需要合理的大小尺寸，将用户最有可能点击最想要点击的按钮尽量放大。

NO.2 席克定律

Hick’s Law（席克法则）中说道：一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。

用数学公式表达为反应时间 T=a+b log2（n）。其中a=与做决定无关的总时间(前期认知和观察时间)， b=根据对选项认识的处理时间（从经验衍生出的常数，对人来说约是0.155s）。

转换成我们听得懂的语言就是：当选项增加时，我们做决定的时间就会相应增加。

席克定律对我们设计上的启示：

产品的结构尽量简洁明了，把与做决定有关的选项减到最少，以减少所需的反应时间，降低犯错的概率；也可以对选项进行同类分组和多层级分布，这样用户使用的效率会更高，时间会更短。

NO.3 7±2法则

人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。

假如你的短时记忆像一般人那样,你可能会回忆出5~9个单位,即7±2个，这个有趣的现象就是神奇的7±2效应。这个规律最早是在19世纪中叶,由爱尔兰哲学家威廉汉密尔顿观察到的。他发现，如果将一把子弹撒在地板上，人们很难一下子观察到超过7颗子弹。

用户使用导航是要找到自己需要的内容，这种需求往往非常急切，请不要认为每个用户都会像挖宝一样孜孜不倦，如果还不能快速的找到自己想要看的东西，那么他们就会关掉浏览器跑掉了。简化你的导航使它尽可能的少于九个会让用户对于网站的内容一目了然，更快捷也更加有效。

7±2法则对我们设计上的启示：

1.导航或选项卡尽量不要超过9个；

2.如果导航或选项卡内容很多，可以用一个层级结构来展示各段及其子段，并注意其深广度的平衡；

3.把大块整段的信息分割成各个小段，并显著标记每个信息段和子段，以便清晰的确认各自的内容。

NO.4 格式塔法则

当对象离得太近的时候，意识会认为它们是相关的。

格式塔法则对我们设计上的启示：

接近原则可以应用于页面内容的组织，以及分组设计中。对于引导用户的视觉流及方便用户对界面的解读起到非常重要的作用，通过接近原则对同类内容进行分组，同时留下间距，会给用户的视觉以秩序和合理的休憩。设计者们也经常使用分组框或分割线将屏幕上的控件和数据显示分隔开。

NO.5 泰思勒定律（复杂性守恒定律）

该定律认为每一个过程都有其固有的复杂性，存在一个临界点，超过了这个点过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方。如对于邮箱的设计，收件人地址是不能再简化的，而对于发件人却可以通过客户端的集成来转移它的复杂性。

NO.6 防错原则

防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的，但在交互设计也十分适用。如在硬件设计上的 USB 插槽；而在界面交互设计中也是可以经常看到，如当使用条件没有满足时，常常通过使功能失效来表示（一般按钮会变为灰色无法点击），以避免误按。

NO.7 奥卡姆剃刀原理

奥卡姆原理也被称为“简单有效原理”。后来以一种更为广泛的形式为人们所知——即“如无必要，勿增实体。”也就是说：如果有两个功能相等的设计，那么我们选择最简单的那个。简洁的页面能更好地传达出你所想要表达的内容。

奥卡姆剃刀原理对我们设计上的启示：

1. 只放置必要的东西

简洁网页最重要的一个方面是只展示有作用的东西，其他的都没有。这并不意味着你不能提供给用户很多的信息，你可以用“更多信息”的链接来实现这些。

2. 减少点击次数

让你的用户通过很少的点击就能找到他们想要的东西，不要让他们找一个内容找得很累。

3.“外婆”规则

如果你的外婆（其他老点的人）也能轻松的使用你的页面，你就成功了。

4. 减少段落的个数

每当你的网页增加一段，页面中主要的内容就会被挤到一个更小的空间。那些段落并没有起到什么好的作用，而是让顾客们知道更多他们不想了解的东西。

5. 给予更少的选项

做过多的决定也是一种压力，总体来说，用户希望在浏览网页的时候思考的少一点。我们在展示内容的时候要努力减少用户的思维负担，这样就会使浏览者使用更顺畅，心态更平和。

来源：简书作者：留言乐语

互联网从业者必备微信公众号：woshipm，如果你已经关注了，证明你已经很牛逼了。

抓住用户注意力的10种交互设计小技巧

Sun, 19 Jul 2015 18:40:37 CST

如今，设备的屏幕正变得越来越小。主要的挑战在于在有限的屏幕范围内提供优秀的用户体验。

简单来说2015年的移动设计趋势将是在传递更多信息的同时，尽量保持设计的简单。让我们来看看这些应用是如何抓住用户的注意力的吧。

1.分层界面设计

如同我们所知道的那样，移动设备的屏幕不够大，不能够提供桌面端的那种全景式的浏览体验。然而，移动端设计的主要要求是简洁，但是为了有效传递出所有的服务内容，你需要有技巧性地组织利用这些有限的空间。这促成了分层界面设计的崛起。位于前端层次的元件应该活跃，位于后端层次的原件应当顺从考前层次的原件。

2.扁平化的界面

2015年，我们将更专注于功能的传递而非界面装饰的至臻完美。这就是为什么扁平化设计成为了潮流，因为它能够赋予你的移动 App 一种简明的结构，这种特性能够有效地促进提高网站访问者的用户体验。

3.社交媒体整合

2015年，移动应用将会在很大程度上依赖于诸如 Facebook，Google，Twitter（当然了，在国内就是 QQ，微信，新浪微博）等等的社交网站。整合社交媒体现在在移动 App 中似乎成为了不可或缺的一部分，因为它能够丰富你的 App 的功能。而且，它也能成为一种连接其他用户的工具，因为你的用户们能够让他们的朋友来尝试这款应用，或者至少在社交媒体上面露个脸。它还是一种很重要的营销工具。

4.从社交媒体登录

大部分的 App 设计者或许认为一个很大的 login 表单看起来很酷，但是他们往往没能够意识到用户看见那么恐怖的表单的时候往往会直接崩溃掉。因此，许多用户在他们下完应用后就把它们卸载掉了。为了去除掉这种惹人讨厌的注册表单，你应该允许用户们从社交平台进行登录。这不仅能够帮助用户节省他们的时间，而且免除了用户需要费力记住他们注册的用户名和密码的烦恼。

5.善于使用空格

2015年所有的设计趋势都围绕着传递简单和明晰的外观这个主题。这个主题同样可以被用于移动端 App 的内容设计上，设计师们是用空格将不同的元素或元件区别开来。这可以提升内容的可读性，使得 App 更加好用。

6.使用素雅的、简单的颜色主题

是用丰富的，甚至是艳俗的颜色会使得你的用户分心。因此，如果你不希望你的用户在看到花里胡哨的、扎眼的 App 之后就把它删掉，你就应当使用一种简单的颜色主题。简单的颜色主题同时也是扁平化设计的要求，这能够使得用户在使用你的 App 时能够有顺滑的体验。

7.使用左右横扫的手势操作

现在的很多智能手机都支持手势操作，诸如左右滑动来选择功能。开发者们可以灵巧地使用这些手势来从一个菜单跳转到另一个菜单，也可以进一步拓展到分享或是删除这样的操作。

8.在了解你的用户后再开始设计

在设计 App 功能的同时要把你的目标用户时刻放在心里，这将有助于你达到你的目标。为了让他们下载你的 App，你需要提供他们他们所需要的，真正会喜欢的东西。如果在为一个特殊的年龄群体设计 App，你应当确定你在 App 中所设置的操作方式能够被用户所喜欢。年轻群体会更喜欢炫酷的手势操作方式，而中老年群体会偏向于简单的操作方式。如果你不想让你的用户怒删 App，最好就将他们的喜好纳入你的考虑范围。

9.方便拇指操作

现在，越来越多的用户用一只手握持 iPhone 并使用大拇指操作 App。

人们在他们行走，旅游，甚至是烹饪或者做其他事情的时候使用手机。因此，你需要确保你的 App 在用户只使用单手操作时也能正常使用，而多指手势则属于是锦上添花的功能。这将毫无疑问地提升你 App 的实用性。

10.实体或描边 icon

另外一个2015的设计趋势是使用线性图标，这能够使得用户能够迅速地在活跃和非活跃的 icon 之间进行识别，因而，提高了用户体验。

在以上的所有2015年设计趋势中，我们能够发现的贯穿始终的一点是，更清楚地将你的 App 能够提供的功能传递给你的用户。所有能够简化 UI/UX 设计的东西都被业界所吸收，因而成为了一种设计趋势。所以，尝试着采用更多的简化方式，这样你就能够成为潮流的引领者！

原文作者：Chris O’Sullivan

原文地址： designsphere.info

翻译：设计派_小温

文章来源：设计派

互联网人士必备微信公众号：woshipm，雷军和周鸿祎都关注了，如果你已经关注了，证明你已经很牛逼了。

7大网站设计趋势

Sun, 28 Jun 2015 00:01:49 CST

推荐语：或许已经有许多文章告诉大家什么样的网站设计是最酷的，那么今天我们就一起来温故知新，发掘一些真正的实用趋势。

手势取代点击

我们都已经忘记滚动条曾经是有多麻烦，大多数用户都得煞费苦心地把鼠标移至屏幕右侧来移动这古老的滚动条：

作为一名专业人士，想必你一定用过鼠标滚轮、光标键或触控板，那么你就已经超越了许多用户了。

在当今这个时代，滑动已取代了点击。手机用户轻松滑动手指即可随意滚动页面，相对而言，要精准地点击某一点反倒是变得困难了——完全和以前在电脑上的操作相反。

因此，我们应将网站体验的首要重点放在滚动上，点击为辅。当然，这一特点已经随处可见：

随着手机用户的规模日益庞大，现代化网站都开始尽量减少点击，增加滚动。我们会发现链接越来越少，按钮因为其更大的“点击”区域，出现的频率越来越高。为适应滚动趋势，页面也变得越来越长。

那些多页网站意识到这一点后，开始纷纷合并页面，将单个页面延长，或者干脆像 TIME 杂志，直接做成无限滚动页面：

将来是否能在手表上浏览网页还尚未可知，不过用手势来进行操作，这一点是肯定的。

彻底淘汰网页折叠线

在页面滚动变得如此普遍的时代，各种设备又有着不同的尺寸，网页中的“折叠线”将不再被列入讨论范畴。

设计师们无需再将所有内容都挤在页面的最上端。这一改变便引出了 Medium 曾经推广过的设计趋势——全屏图片加标题，滚动后才可见页面主体内容：

有了这长长的滚动页面，设计师们终于有机会实现梦寐以求的杂志效果：尽情使用美丽的大图片。在2015年的网站设计中，我们尤其可以看到利用大面积纵向空间来展现图片的方式。

操作更快捷网站更简化

现在人人都是网站高手，业余选手也似乎有了专业素质：使用多个标签页及滑动返回上页等都不在话下。

这些特点所带来的结果便是一切都变得更快速了，大家的耐心值都日益降低。试问如何才能惹恼一个好脾气的人呢？很简单，只要稍稍减慢网速，便立刻引爆。

现今的网站所面临的挑战不只是让加载速度更快（技术问题），而且要让页面能更快地被受众所理解。一款无法弄懂的设计和超慢的载入速度具有同等的恼人效果。

简洁的设计更易被理解，也就意味着更讨人喜欢。我们很容易就能区分出下方的两款设计，哪款更现代。现代化网站可以更快帮助用户理解使用方式：

仿真设计被淘汰的主要因为用户敏锐度更高，耐心值降低，杂乱的设计只能减缓一切速度。

移动应用以其美观的极简界面击败了绝大多数网站，事实证明简约界面的表现更佳。

扁平化设计只是一个开端，它所真正代表的是简约和即时性，希望这一走向可以在2015年发展得更深入。

像素的消亡

我们曾经能清楚的知道组成一张分辨率为72 dpi的图片需要多少像素。如今，人们对这一概念越来越模糊。

随着响应式网站的出现，相对于固定数值，我们更趋向于使用网格和百分比。然而，位图图像仍然存在。

几乎所有网站中使用的图片分辨率都只有现代显示器分辨率的一半，并且不按比例调整大小。对于 Retina 显示器和现代化浏览器而言，矢量图形之风正渐渐崛起。

这一风潮在图标字体以及谷歌材料设计中就已见端倪。具此特点的网站通常都具有更快的加载速度，图标在放大后也不损失质量，是现代化浏览器的理想之选。

这些技术均已面世，只是要专业人士为更高标准的显示器来改变工作习惯，尚需时日。当用户的显示器平均标准达到 Retina 级别时（新款iMac显示器），相信设计师们定会追随这一改变。

动画的逆袭

要让网站看起来过时很简单，只要放上一个GIF或Flash格式的“网站建设中”的动画就行。然而近来，却因为几个元素的结合，让动画在现代化网站中实现了华丽的逆袭。

扁平化设计可能会遇到风格重复，甚至略显无趣的问题，这时动画就可以起到点睛网站的作用，同时又可以在有限的空间中纳入更多的信息，一举多得。

移动应用重新定义了用户的需求，其中所使用的各类小动画都传达着自身的意义。现在，网站也开始启用这一趋势。

像CSS动画这类的新技术在强化设计的同时，无需使用额外插件，因此，毫无速度或兼容问题之忧。事实上，网络组件（在第6点中会提及）反而更能加快网页速度。

GIF动画又回来了，甚至变得更具效力。你是否注意到，这篇文章中就大量运用了GIF动画，它的创建过程更为简易，并且方便分享。

组件即是新框架

网络技术变得日益复杂，令人很难咀嚼其中含义。为达成一个简单的效果，例如添加谷歌分析或脸书按钮，设计师们不得不在在页面中嵌入复杂的代码。如果我们可以只写这么简单一句来解决问题就好了：

网络组件就可以实现这个想法，只是对大部分设计师们而言，使用尚有困难。不过，相信在2015年里，它一定会有革命性进展。

谷歌材料设计的出现也许预示着这一变化的开始。谷歌材料设计由 Polymer 提供技术支持，适用于现代化浏览器，它利用简单的标签，即可从安卓应用中提取丰富的动画和互动组件：

如果谷歌材料设计能够开花结果，相信将会有更多组件框架在2015年涌现。譬如：Bootstrap 4.0？

社交媒体的饱和度与邮件的崛起

社交媒体于用户而言固然是个巨大的成功，然而对于广大的原创博主来说，就不那么乐观了。

首要问题就是饱和度。脸书发现，在每日亿万的博文中，用户所感兴趣或转发的只局限于一个固定的范畴。因此，你所发表的内容很不幸地只能被一小部分关注你的受众所见。（当然对此脸书也提供了解决方案：用户付费推广。）

社交媒体风潮并未消退，不过，Tim Ferriss 等一些知名博主已将推广重点从社交网络移至旧时流行——邮件推送。他们意识到电子邮件相比社交媒体，一大至关重要的优点即是：用户量得到大幅提升。

希望这一后社交媒体风潮可以在2015年得以延续，因为它还有一个不容忽视的利器——网络提醒（类似手机中的提醒功能）。

出彩新秀：CSS 形状

除了设计师以外，很少有人会注意到这一超酷技术。CSS 形状可以将排版定义为各类形状，譬如圆形：

这一技术超乎想象，但是在无法保证所有浏览器的支持前使用，仍然过于冒险，因为这意味着为实现一个页面，你需要重复两种完全不同的技术来确保效果。

不过，还是忍不住要重复一遍，它真的超酷。

2015 看点

在2014年，我们看到了手机用户开始超越电脑用户，然而这仍未能改变大众的传统想法，大部分企业机构的第一关注点仍然是桌面外观，而后才是手机界面。

这一策略在2015年可能要开始显得落伍和不专业了。现今，手机已然成为浏览网站的首要工具，“移动界面为主”的策略也将从说说而已，变为真正的需求。

扁平化设计随处可见，当你细细推敲这一现象后，会发现，在幽灵按钮背后，所隐藏着的真正奥秘是——简约站点可更快得到用户的青睐。

简约不只是一时流行，它是未来的走向。相信它会持续发展下去。

将来，会有越来越多的博客使用动画，互动界面会在展现高质量的同时，更优化用户体验。

像素和折叠线开始渐渐退出历史舞台，将由滚动为主，点击为辅的体验占取主导。网络组件将大大简化在网页中引入移动应用体验的工序。

目前，你可以从一些网站设计中发现优秀移动应用的影子。随着时间的推移，相信用户将很难发现移动应用和网站体验之间有任何区别。

朵璞自译，转载请注明出处。

原文来自：medium

原文地址：http://www.zcool.com.cn/article/ZMTY0NjQw.html

互联网人士必备微信公众号：woshipm，雷军和周鸿祎都关注了，如果你已经关注了，证明你已经很牛逼了。

以场景为中心的产品设计：突破你的大脑然后像用户一样思考

Mon, 12 Jan 2015 00:08:29 CST

当第一次开始设计交互式产品时，我是非常挣扎的。小的项目都还好，但是当交互变得复杂时，我注意到工具、团队的交流甚至是我自己的思考都开始失效了。我看到今天许多创业公司面临着同样的问题。所以我想（和大家）分享一些方法，利用这些方法我已经在过去的几年中改变了处理复杂大型产品的设计过程。

过去常常进行页面设计

回顾大学，我们主要设计海报，图书封面，（网站）主页和很多其它页面。我们使用 Adobe Illustrator 和 Photoshop 软件，它们在设计页面时表现都非常棒。同行的批评是非常有用的，因为批评本身就非常类似于使用产品：一个普通的观众走到他们之前没有见过的事物面前，然后看上几分钟。在一个设计工作室看到一张海报就好像走在大街上看到这张同样的海报。

以页面为中心的设计不是服务于 APP 的

一旦你将要处理一个拥有十多个页面和数百个状态的APP时，你不能像（设计）一张海报一样在大脑中 Hold 住整个产品。我注意到我们团队在围绕着单个页面发邮件，讨论着单个页面，给所有页面命名时仅仅只是记录（keep track）。但是我们对如何把页面和特征组合在一起（这件事）没有任何的关注。

我们把产品当作一组页面来思考。但是这种工作方法有一个问题：人们怎样在现实生活中体验这款产品是不重要的。在任何地方人们都在很短的时间流里使用产品，大概从30秒到几分钟。

一个用户可能在一个搜索结果中首先注意到你的产品，花一分钟的时间大概浏览一下这款产品，然后离开。他们可能回来，注册，然后再次离开。他们可能打开来自这款产品的邮件，回来，购买产品，然后离开。每一个这样的小故事都是人们实际情况下体验你的产品的一种方式。

一个产品不是（简单的）一组页面——它是这些页面组成的使用场景。

如果你的团队没有关注这些使用场景，如果你孤立地思考每个页面，那么你的想法将和实际使用你的产品的用户完全不同。

以场景为中心的设计

一旦我意识到使用场景是我们实际上设计的东西，一切都变得简单起来。但是我对保持关注的故事仍然有困惑——我不断地发现自己在思考个别页面。

所以我开始通过不同的方式来突破我的设计过程。我改变了工具，可交付成果，以及如何和我的团队一起工作。这里有我发现的最好的四种可以专注于故事的方法。

方法一：在画线框图之前使用故事板

在开始设计产品之前我会思考它的一个使用场景，这对于产品的成功是至关重要的。产品的核心很有可能是由十几个或是更多的使用场景组成的，但是我只选择一个开始。然后我构建了一个故事板——很像漫画。如果我已经在脑海里有了线框图，那么故事板的每个框架在界面上都会有一个对应的页面。有时候我得到的更多是抽象的使用场景，每个框架都是一个小型交互数据块：用户阅读或点击的任何区域。

好吧，这不是火箭科学，但这门学科在很多方面都有帮助：

1、故事板帮我同样专注于我们需要设计的所有屏幕——其中一些甚至可以被搜索引擎用来搜索信息片段或电子邮件。

2、故事板强迫我去思考用户目标，因为它们显示了如何在产品中完成任务。

3、一旦我们认同故事板是对公司最重要的东西，它们能够帮忙选定所有功能在屏幕上的优先级。

4、故事板真的能够帮助我专注于屏幕之间的切换，一个按钮在屏幕上要有它的意义，但它也需要设定好用户将在接下来的屏幕上看到什么。

而且最棒的部分是，我可以反复使用这些相同的故事板，所以它大幅加快了我的其它工作速度。当我向团队展示UI设计稿时，我需要向他们展示一个故事板。当用户开始使用产品的时候，我们可以在一组屏幕上向用户展示相同的故事板。如果我们做出了一个可交互的demo或者完成了一个产品的介绍视频，就如你猜测的那样——我们需要一个故事板。

方法二：用 Fireworks 渲染整个使用场景

我知道大多数的设计师都使用 Photoshop 或 Illustrator ，况且是视觉设计，没有什么软件比它们更好了。但是如果我们正在设计故事板，那么设计标准应该是将来用户会看到的高保真页面。这些故事板可能需要20~30个页面，如果用 Photoshop 去设计它们会变得很艰难，所以大部分的设计师不会找这麻烦，我们又再次回到设计单个页面。幸运的是， Fireworks 有一些巧妙的功能能够使设计尽可能地保持以故事为中心：

1、内置网页：您可以在一个文件中建立一个完整的故事。上下方向键可以很容易地翻阅故事班，看看到底用户将看到什么。

2、母版：如果页眉或图标出现在多个页面，你可以把它做成一个母版。然后，如果你需要在用户测试之修正一个图标，你不必单独修改20个文件。

3、查找和替换：团队可以在设计进程的中途修改一个功能的名字吗？没问题。

4、高保真：您可以在同一个工具中把一个粗糙的线框图变成一个好看的线框图，一旦故事板是固化的（solid），你可以为了更好的细节设计而回到 Photoshop 软件中。

方法三：在纸上回顾整个使用场景

当我们团队到了需要审查设计稿的时候，我几乎从来不展示孤立的一个个页面，相反，我将会把一个故事板里的所有页面都打印出来，然后把他们铺在很长的会议桌上或者用胶带把它们贴在墙上。

这样的工作方法非常好，因为团队人员可以近距离地看到一个页面上的所有细节。他们可以往后退一步，看到相邻的页面，想想页面之间的交互切换。甚至他们可以后退更多以看到整个故事板，这有助于让每个人对页面上需要有的内容的用户目标和任务保持相同观点。

当我向其他设计师展示工作内容时，我将跳过图纸仅仅是在电脑上点击屏幕——他们将获得所需信息。而且我发现打印的这种方法对工程师和PM们来说是非常有帮助的，他们不会像我一样花整天的时间来研究交互设计。哦对了，在设计的时候你可以直接用纸做笔记，并且可以把他们带回你的办公桌上作为下次的迭代素材。

方法四：不要发送 mockups ，记录屏幕录像。

这是我所知道的最奇怪又是最有帮助的设计交付物。我过去常常通过电子邮件来解释交互细节。我会附上一组页面，然后努力去解释它们是如何组合在一起的。这写起来很痛苦，而且阅读起来也不是那么轻松。所以我开始用ScreenFlow录制故事板的视频。由于每个页面已经建在Fireworks中，我只需要假装去点击用户会点击的地方，跳转到下一个页面，然后对着相机描述正在发生什么。第一个视频我花了很长的时间去录制，并且通过实践的方式克服了我的怯场，不久之后，我录制视频的速度要比写邮件快得多了。

我常常惊讶于真正的产品是如何从这些视频当中感受到的。因为它们可以很好地模拟最终的产品是什么样的。它会成为收集反馈的一个很好的工具，它几乎像再次批判了一个简单的海报。

以上这些仅仅是一些我已经改变的工作方法，它们能让我和我的团队专注于故事场景。我很好奇是否其他人已经注意到了以页面为中心的设计和以场景为中心的设计之间的不同？你有学到什么方法可以让你在设计过程中专注于故事这些故事场景吗？

译文地址：点击查看

本文由 @沈晓马投稿发布，本文禁止在本人未允许的情况下，任何形式的全文转载和部分转载。

互联网从业者必备微信公众号：woshipm，如果你已经关注了，证明你已经很牛逼了。

浅析数据化设计思维

Tue, 06 Jan 2015 09:47:02 CST

1、做设计为什么还需要看数据？

很多设计师从来不看数据，要么是因为没有数据可看，要么是根本不想看，但是也一样把设计做的很好啊！设计本来就是有感性的一面，为什么非得要和数据扯上关系呢？我们不妨先看看设计的本质是什么。设计不同于纯粹的艺术，艺术源于艺术家对现实的观察和思考，以及对这种观察和思考的自我表达；设计天生就是为别人在做事情，纵然同样需要观察和思考，但是这种观察和思考不是为了表现设计师的自我，而是为了更好地服务于某个用户群，因而设计师了解用户就变得非常重要。尤其是要了解用户的目标、行为、态度等相关的情况，我们这里说的数据其实也就是对用户的目标、行为、态度等情况的量化，因此，通过对这些数据的分析，我们可以更好地挖掘用户的需求，进而为用户提供更好地体验。

简单点说，设计是服务于用户的，了解用户才能更好地做设计，数据是了解用户的一种途径。

2、数据在项目中的作用有哪些？

要了解这个作用，我们先回到设计师看数据的主要场景，总结起来无外乎两类：一个是因为项目的需求，通过数据的论证，让设计走得更从容，有理有据，而不是设计师自己的YY；另外一个是日常监测的需求，自己做的产品，总要知道大概有多少人在用，使用的情况如何，用户的行为和预期是否一致。也就是说要了解你的设计被使用的情况，否则你怎么知道设计的好不好，是不是达到了设计目标，是不是真的帮助用户解决了问题。

先来分析下项目中看数据的场景。几乎整个设计的过程都可能会用到数据，概括起来可以把这个过程切分成三部分：

设计前数据帮你发现问题：所有设计开始之前的研究和分析，都是为了更明确用户的需求，明确为什么要做这个设计？从业务的角度来看，这个产品对公司有何价值，此次设计要达到什么目的；从用户的角度来看，这个产品对用户有何价值，此次设计要为用户解决什么问题；在了解业务诉求和用户诉求的过程中，我们难免要用到数据，这个阶段，数据的作用就是为了“发现问题”，看看设计可以解决什么问题，从而更佳明确设计的目标。

当然具体的工作中，多数设计师都比较纠结，既要考虑业务诉求，又要考虑用户诉求，如果这两者不能完全匹配的时候，我们该咋办，是两者的相加吗？还是我们就只考虑用户诉求，对业务诉求看看就行了。我个人的理解是，现实工作中我们都不是在追求最完美的设计，更多的是在做平衡，如果是一个用户型的产品，比如偏向于为用户提供某个功能的平台，本身就是完全从用户的角度出发，通过为用户提供功能帮助用户解决问题的，应该向用户诉求靠拢多一些；如果是一个商业型的产品，比如偏向于为用户提供某些内容的平台，那么在为用户提供主动查找的入口的同时，可以适度的向着业务发展需求倾斜，做适度的业务层面的引导；当然这个也不是绝对的，往往同一个平台，同一个产品，在不同的发展阶段也有不同的需求，如果是一个全新的产品，业务的生存就变得格外重要，这个时候设计应该多一些考虑业务诉求，先帮助业务生存，否则，这个产品都要挂了，还怎么为用户提供服务呢？

当然，好的设计师总是能在业务和用户之间找到巧妙的平衡，找到二者的交集，举个例子，假如这个产品这个阶段就是要做用户规模，而用户诉求是享受个性化的服务，看似完全不关的两个诉求，实际上我们完全可以通过更好的个性化服务提升用户满意度，获得好的用户口碑，再间接地借助用户口碑提升产品的用户规模，这二者之间并不是完全的不相干，更多的时候看能否找到他们的关联性，抓住阶段性的设计目标。

通过一个具体的例子看看如何利用数据来发现问题？数据代表的是用户的目标、行为和态度，但是单独看一个数字是没办法发现问题的，数据的对比是最简单有效地手段。我们知道交易关系买家所产生的交易对1688网站有着非常重要的意义，我们想提升交易关系型买家的交易体验，但是不知道从何入手，因此做了大量的数据分析。交易关系买家是通过什么方式找到老卖家?不同路径的转化率如何?不同用户查找方式与转化率有什么差异?

首先，通过用户群的细分，我们发现，交易关系买家通过搜索支付订单转化率是搜索整体支付订单转化率的2倍。因此,在搜索结果中增加老买家标签,方便找到老卖家。

此外，我们还发现，普通会员、1-2星会员等级,是提升交易关系交易的关键用户。通过以上的数据分析，我们找到了目前主要的一些问题，围绕着这些问题，后续做了优化方案。

设计中数据帮你判断思路：因为设计师的个人经验不同，创造性思维不同，因此不同的设计师面对同一个问题，解决方案也很可能差别较大，即便是同一个设计师也会想到不同的解决方案，到底哪个方案更合适，有些情况下数据可以给你参考意见，为你提供“判断思路”，协助你做决策；条条大路通罗马，但是哪一条路才是当前最合适的呢？

通过一个具体的例子看看如何利用数据来判断思路？有一个批发类的电商网站（1688.com）的频道首页（ye.1688.com），我们发现用户的转化率很低，就去研究了数据，然后结合了对典型用户做的用户访谈的结论，最后发现转化率底的原因其实很简单，这个频道的首页入口主要是来源于整个网站的首页，而整个网站的首页是一个全行业品类的页面，用户如果是女装行业的买家，她从一个全品类的首页点击一个链接进入另一个全品类的页面，再艰难的找到女装这个类目，再点击进入List页面查看商品，这个路径是非常深的，那么怎么解决这个问题呢？那就是要避免做女装的用户从网站首页进入这个频道之后还要再次选择女装类目，才能看到女装的商品！

解决这个问题的思路有哪些？可以在网站首页增加入口，让用户直接点击女装类目进入频道首页，给用户展示女装商品；可以在用户进入频道首页之后，根据行业偏好的个性化数据来推荐商品，推荐的不准确，用户也可以去定制；到底哪个更靠谱？两个思路各有利弊，鉴于前一个思路需要有外部依赖，要改动网站首页，所以我们内心都很期望后一个思路能跑通，但是怎么知道这个思路行不行？首先我们需要知道行业的个性化推荐能覆盖多大的人群，又有多少的人愿意去定制行业偏好？

对于普通的网站来说这个可能是一个不够明确的问题，但是1688.com是一个会员用户早就过亿的B类电商网站，有着如此庞大的用户规模，较高的用户覆盖率，这就意味着对用户行为数据的积累，再者B类的用户有一个显著地特征就是在一个较长的时间里，行业的偏好相对比较稳定，如果是一个主营女装的买家，那么她的偏好一般会以女装为主，不会超出服装的范围，最多会有少量的服装周边配套的采购。

如上图，通过行业偏好的个性化算法，我们追踪了一段时间来访这个频道首页（ye.1688.com）的用户数据，我们发现大约2/3的用户是有着非常明确的行业偏好的，那么这基本可以断定做行业偏好的个性化推荐是靠谱的！但是剩下的1/3用户愿意去定制行业偏好吗？我们当时因为时间原因，无法直接从这1/3无明确偏好的用户中去判断他们是否愿意定制偏好，但是通过整个用户群的问卷抽样调查发现，大约3成的用户表示定制行业偏好是很好的服务，基于这些情况，我们判定基于行业偏好的个性化推荐能够解决绝大部分用户的行业偏好问题，提升了内容的相关性。这个方案最终上线后，实际上有大约10%的人真正找到定制入口并且产生了定制行为，70%的人不用定制，实现了默认的精准推荐。

设计后数据帮你验证方案：我们的设计方案到底做的好不好呢？衡量标准就是看设计方案是否能够达成设计目标？这也需要数据来量化，通常会用GSM的模型来支撑设计的验证。G（Goal）设计目标、S（Signal）现象信号、M（Metric）衡量指标，所谓的设计目标，就是要确定设计要达成什么结果，要解决什么问题；衡量指标，我们不能凭空猜想，必须建立在设计目标的基础上，先假设设计目标会实现，那么会出现什么现象或信号呢？列举出所有的现象或信号，选择我们可以监控的到的，然后对这个现象或信号产品进行量化，自然就得到了衡量指标，但是指标的波动幅度往往要依赖经验来定。

比如说，某个产品的设计目标是通过设计的引导，让更多的买家产生购买，想象一下，如果设计目标实现了，会有什么现象呢？可能会有更多的人有购买意愿，看了商品详情页，点击了购买按钮等等，最终也产生了购买，那么，衡量指标是哪个？设计只是改变了商品信息的呈现方式，并不能改变商品本身的质量或背后的服务，所以我们应该重点考察设计是否强化了引导，提升了购买意愿，是否激发了用户进一步了解的行为，主要是指浏览行为，最典型的就是到达了商品列表页或者商品详情页等，量化的结果就是看又进一步行为的用户的比例；

通过一个具体的例子看看如何利用数据来验证你的设计方案是否达成设计目标。曾经有一个找产地的功能模块，我们在设计前进行了调研，用户告诉我们他们需要找产地，而且比较习惯于用地图来找产地，我们欣喜若狂，照着这个方向做了个产地直达的楼层，我们坚信用户告诉我们的肯定是对的！但是这样的设计真的能达到帮助用户高效找产地的需求吗？来看下面的数据分析。

用户的目标不是要找产地吗？还告诉我们用地图找产地很符合他们的习惯呢？为什么上线后，用户却不怎么使用这个版块？？？我看到这个数据非常的意外，一时之间根本摸不着头脑，后来再去看了看这个板块的热力图，一下子恍然大悟。通过数据分析得出，地图纵然符合用户习惯，但是才这么狭小的地图上进行如此复杂的操作，其效率是非常底下的，因此将地图找产地的功能保留下来，只是不作为默认的方式，采用了按照热门的、区域的、附近的、可搜索的、地图的方式综合承载，最后取得了较好的效果！

3、如何利用数据做日常监控？

作为一个设计师，你的作品上线后，有多少人用？这些用户是谁？有什么特征？用户具体是怎么在使用你的产品的？你的设计是否还有优化的空间？如何才能为用户打造更好的使用体验？怎么才能知道这些数据好不好，有没有问题呢？主要是靠比较、靠经验，靠对这个产品长期跟进产生的直觉，只有在对这个产品非常熟悉的前提下，你才有可能对数据的变化给予比较靠谱的解读。

日常监控中用于发现问题的主要手段就是做数据的对比，但是如何具体的作对比呢？主要有三种最常用的最简单的对比方式：a、横向比较，和类似的产品去比较，看相对的状况，进而推测出自身是否存在问题；b、纵向比较，和自己的过去比较，看看从历史的发展规律中是否能得到某些启发，主要是看自身的变化趋势；c、用户细分，这个就是把用户按照不同的分析需要，拆分来之后来看数据，看看各个群体之间的差异在哪里，有没有一部分用户和其他用户表现出不同的行为，进而找到问题所在。当然除了这三种常用的对比之外，我们还可以做一些配套的定性研究，进而把问题搞得更透彻。一些统计学的工具有时候也能起到作用，比如说用SPSS做数据的因子分析、聚类分析等等，也可以有一些意想不到的收获。

4、数据不是核心价值，你才是！

说了这么多，我并不是要强调数据有多么的万能，但是在互联网领域，任何一个具有一定用户量的的产品，你都不得不去了解数据，这些数据中有一些是宏观的，作为设计师我们可以当做是背景知识，应该去了解了解，但是设计师更多的是应该关注用户的目标、行为和态度等相关的数据，关注那些微观的、和用户、和设计方案息息相关的数据，这样才能更好的了解我们的用户，了解用户对我们的设计方案的反馈，以帮助我们更好的发挥自身的价值！

让你事半功倍的交互体验自查清单

Thu, 29 Jan 2015 21:16:26 CST

东东推荐：刚画完的原型自我感觉良好，当到了评审的时候发现在用户体验槽点非常的多。如果你遇到上面的情景，那么这篇文章对你绝对有用。事不宜迟，请看下文。

体验清单起因

去年底看朋友出国前用‘穷游清单’给自己列清单，她说列的清单可以帮她在出行前检查一下是否有遗漏东西，避免因遗漏东西使整个旅行变得很糟。既然旅游清单可以使旅游提前避免问题发生，是不是我们在工作中也可以采用这种方式使自己的产出物交付前保证万无一失。

在平时设计过程中会遇到这样的问题：考虑某个模块流程了，却把特殊状态给忘了；改的版本多了，漏掉了原备注的内容，自己却没看出来。记得带实习生的时候就遇到过交付的原型同一个界面，在这个功能里顶栏有标题，在另外一个功能里顶栏没有标题，让检查一遍也没有发现问题所在。

经过这段时间思考、整理和实践，按照《用户体验要素》所提到的体验设计框架总结了一套体验清单设计方法。虽然用户体验要素这本书是以网页设计为主，但所提到的用户体验层次，在移动端设计中依然有效；只是移动端设计中需要考虑更多的场景、硬件设备、特殊因素、交互方式等问题。今天分享给大家移动端体验清单的设计方法，方便大家平时在做完交互稿后进行自查。

体验清单如何设计

为了适用于大多数移动端应用，这套方法是按照需求（战略层、范围层）-流程及内容（结构层、框架层、表现层）-特殊因素的思路来设计的，主要分为三步：

第一步：明确用户在什么场景下完成什么操作；

第二步：从框架流程再到内容细节，如：框架导航、流程、布局、转场、反馈、文字等；

第三步：重点关注特殊因素，如：网络、硬件设备、数据网络、模式、空值、交互方式等；

平时常用奇妙清单来规划自己一天的任务，就尝试用该App来制作移动端体验清单，使用之后感觉挺便捷的。下面就以奇妙清单为工具来举例子：

一、明确完成什么操作及主场景

不同的产品、需求对应的用户场景和操作流程是不同的，每次在自查前先明确需求，然后明确用户是在哪些主场景下完成什么任务；主场景有什么？操作是哪些？罗列在清单里。简单举个例子如阅读小说，子任务添加场景，备注写完成什么操作，如下图：

二、按照操作流程及界面内容，从流程到细节逐一梳理

按照要完成的任务梳理一下流程，随手画一下流程图。流程图可以让我们对原型流程有一个整体把控，防止出现逻辑问题。自查的过程中从具象到细节，先保证大流程没问题，再细化细节问题。

框架导航

框架结构是否合理、能承载产品功能结构
导航广度、深度是否适中，易操作，拓展性好

流程

操作流程从头到尾是否能顺畅的串下去
返回从哪里来是否可以回到那里去

从状态A到B

A.操作时

触发源待操作按钮在当前界面中是否明确
触发区域待操作按钮是否易操作

B.操作之后

加载状态状态改变的等待时间是否超过2S左右，如果太长是否需要加入加载状态
反馈是否有反馈，反馈是否备注清楚
转场动效是否需要添加有趣的转场动效
成功与失败、空值是否考虑且有相关的提示
提示类型选择轻（tip/小红点）、中（Toast）、重（提示框）提示优先级别是否恰当
中间过程是否可以取消，例如更新应用、导入本地文件，此时是否允许用户取消

布局内容

信息层次是否清晰，重要的信息是否优先显示
相关信息是否可合并，没有重复信息
功能操作是否易操作，重要、频繁触发的功能按钮是否在手机的可操作区域
文字是否通俗易懂、有趣
界面内容是否完整，例如：顶部标题、按钮里的文字等

三、特殊因素再复查

移动端产品的环境、场景复杂，硬件设备多样；需要考虑的因素很多，很容易疏忽某些细节；所以需要对于特殊因素再次复查是否遗漏。下面是一些常见的特殊因素：

硬件设备

横竖屏是否需要锁屏，横竖屏时布局及功能是否完整
分辨率高低分辨率情况下是否会有适配问题，是否备注清楚
SD卡文件导入本地时，没有SD卡、SD卡储存已满、储存位置等情况是否考虑并备注
硬件、系统版本不同手机的物理按键、系统等不同，是否需要备注
应用版本新增功能是否影响老版本，是否需要升级

模式

夜间模式是否需要考虑夜间模式（有没有光线较暗的场景）
编辑模式编辑模式下出现意外情况是否提示保存或自动保存已填信息

网络

网络超时
网络太慢
网络环境变化从WiFi到2/3G网络环境时是否需要切换视图（有没有从室内到室外的场景）
无网络
缓存有无缓存内容，区分是否清楚

账号相关

随便看看/未登录需要登录后才可操作的功能是否备注

通知机制

消息推送是否需要消息推送，调用系统通知还是其他方式
推送策略是否备注通知的推送时间、表现形式、失效策略

硬件交互

定位定位是否打开
相机相机是否允许使用
其他硬件设备双屏幕互动、二维码登录等操作时，与其他设备互联、同步、完成操作是否引导、备注
等等…….

以上是移动端体验清单的设计方法及考虑因素，每个移动端应用都有自身特有的场景和特定影响因素，除了你需要考虑以上列举的，还会遇到一些未知的因素；对于新因素要分析后进行添加。不是所有项目都需按照这个清单逐条去检查，有的项目可能没有框架导航就可以直接忽略；有的只是一个小的优化，需要着重考虑空值、网络特性、特殊情况等。有的人善于把握大框架的东西细节考虑不全，就主要检查细节问题。这份清单可以因实际项目、人而定。

总结

产品开发中有QA测试环节，交互设计完也需要一个自检的环节，减少在设计评审和开发过程中消耗。建议使用奇妙清单制作项目的体验清单，并将这套自检方法应用到实际工作流程中，在项目迭代过程中不断完善形成自己的清单表；随着时间推移考虑的问题会越来越细，做的交互方案也就越来越完善，工作的效率也会逐渐提升。

本文作者：@墨子巨；转载自：互联网早读课

互联网从业者必备微信公众号：woshipm，如果你已经关注了，证明你已经很牛逼了。

windows 10 新特性变化研究

Thu, 29 Jan 2015 15:47:51 CST

早在win10刚出消息的时候，笔者就一直有对它进行关注，而笔者对win10的有些猜测居然和前几天发布会上的版本不谋而合。趁着微软这股势头，我们也来看看究竟win10有哪些新的变化，趁此机会也分享一些个人对这些新变化的理解和对设计的启发。（多图、多文字预警）

Windows 10作为微软新一代系统的统一品牌名称，将覆盖所有尺寸和种类的Windows设备，贯彻了 “移动为先，云为先(mobile first, cloud first)”的设计思路，是一个跨平台最广的操作系统。主要的几个变化如下：

一.自动选择默认桌面

熟悉的默认桌面重新回到用户的第一视角。Win10将会自动判断用户的硬件设备，来决定默认进入的是经典的操作桌面，还是支持触屏手势的开始屏幕。

变化分析：

很多传统的PC用户不懂得如何使用Win8的开始屏幕（metro UI），白领或办公用户无疑更喜欢传统桌面，可以随便按意愿摆放自己的文件文档。因此经过win8、8.1的版本验证，微软作出让步，想通过把熟悉的桌面回归到传统用户的第一视角，弱化开始屏幕，赢回用户口碑。

二.开始菜单回归

Win10里开始菜单真正回归，并在菜单的左边新增win8开始屏幕的磁贴显示功能。

菜单演变过程：

变化分析：

从win8~10的变化中，笔者大胆猜测微软不会放弃磁贴的设计。毕竟移动是主流，PC市场在衰弱，而微软又想所有设备使用一个系统，磁贴设计无疑更适合在移动端上使用。甚至可能等磁贴的体验成熟后，开始菜单有可能会逐步退出用户的视线（以后的开始菜单=苹果的home键？开始屏幕=iOS的桌面？），大家也不妨对未来的windows菜单进行大胆猜想。
因此笔者也认为微软是想通过传统开始菜单和磁贴的整合，让用户逐渐适应过渡，培养使用习惯，也算是微软作出让步的折中方案。

三.智能分屏

通过拖拽窗口到桌面左右边缘的方式来进行左右分屏放置。

win10里如果将窗口拖拽到屏幕四角，会有对应的划分提示，可以把桌面分成四块使用。
当划分出最后一个窗口时，就会在当前未分配窗口的空白区域出现窗口列表供用户选择。

变化分析：

大屏幕里如果只是执行单个任务，效率偏低，因此微软提倡用户在大屏幕里执行多任务。
定义四角有可能是帮助用户更好地利用桌面空间，尽管提倡多任务，但微软可能觉得4个任务目前足以让用户使用。
目前的主流显示器同时放4个窗口也显得相当憋屈，参考设计师已有的多个显示器的工作方式，未来可能会出现更大尺寸或超大尺寸的显示器？（PS:就在得出这猜测的后几天，微软就在它的最新发布会上发布了一款大屏硬件：Surface Hub）
单任务适合小屏设备，多任务适合大屏设备。业界消息说今年苹果将会推出12寸的ipad平板，如果是真的话，这个尺寸已经相当接近小尺寸的手提电脑，触屏和传统鼠键的硬件临界点将会来临，大胆猜测其临界点可能就在12寸大小左右诞生？或者说触屏平板和传统鼠键电脑将进一步融合？

四.虚拟桌面

win10在任务栏上新增了Task view按钮（快捷按钮win+tab），点击后可查看当前桌面正在运行的程序，在底部区可快捷添加、切换、关闭虚拟桌面。另外触屏设备也能通过边缘左侧单指划入也可进入Task view。

变化分析：

虚拟桌面能让用户拥有更多自由的空间处理执行多任务。一台机器也能有类似接入多个显示器的体验。
苹果Mac OS早就有这样的体验，微软这一变化算是针对桌面功能的完善补充，并跟上竞争者的步伐。

五.Metro应用桌面窗口化

在win10中，Metro应用默认以窗口化方式运行，在应用标题栏图标右侧的“…”菜单中可点击“全屏显示”来全屏化。

有趣的是，当窗口全屏化以后，开始菜单也会相应全屏化（如果再激进些把左侧一栏干掉…）

变化分析：

既然传统桌面回归了，面对传统PC用户，相应也必须弱化应用全屏的概念。
metro窗口化了，自然能提高用户的使用率，用户上去了，也能重新吸引开发者的回归。
配合传统桌面回归，窗口化的展示更适合多任务。
保留全屏按钮，方便用户沉浸式处理任务（与最大化的差异？后面最大化按钮会消失？）。
菜单全屏后其实就是win8 的metro UI了，因此猜测是在培养用户对磁贴的使用习惯？

六.窗口自适应

当对窗口进行拉伸缩放时，窗口内的元素会跟随窗口的变化进行自适应调整。

变化分析：

界面自适应有利于提高智能分屏下的窗口体验。
更有利于多终端的统一体验。
关于多端自适应的技术可以多关注。

七.通知中心

点击任务栏右下方入口，可呼出新的通知中心。目前程序的更新、系统更新、以及程序或日历中的提醒，都会在通知中心中出现。

变化分析：

对一些像应用更新、安装、提醒等通用的信息进行归类梳理。
像邮件、聊天等软件，提供了更快捷直观的外显方式。

后续对通知中心的猜想：

支持快捷回复。
给应用的某些核心能力提供快捷入口。
多个平台终端的通知功能体验对齐。
进一步向android或iOS借鉴对齐。（PS：最新的通知中心已变成侧栏打通，如下图）

八.强化全局搜索

任务栏上新增了搜索按钮，点击后会打开一个小的搜索窗口。默认先搜索本机程序，然后再搜索互联网内容，也会给出相应的搜索建议。

变化分析：

落后于竞争者的能力完善补齐。

九.语音助手Cortana

任务栏上新增了搜索按钮，点击后会打开一个小的搜索窗口。默认先搜索本机程序，然后再搜索互联网内容，也会给出相应的搜索建议。

在最新的win10版本里搜索入口变得更加显眼，界面也有了明显的优化。

变化分析：

未来智能AI的战略部署。
落后于竞争者的能力完善补齐。

十.新增“主页“文件夹

点击任务栏上的文件资源管理器按钮，默认会进入一个名为“主页”的文件夹，里边包含了一些用户文件夹。相关资料有待补充。

十一.Charms bar默认被隐藏

Windows Charmsbar默认被隐藏，但可以通过快捷键呼出，并且依然为触摸用户保留。

变化分析：

Charms bar的功能与任务栏左侧的能力重复，因此隐藏或去掉更为合适。
保留charms bar是为了照顾触屏用户的使用。

十二.UI变化

图标扁平化，图标间距有所调整。

窗口去边框（左：win10 右：win7）

变化分析：

凸显信息，追赶设计趋势。
在适合鼠标点击和触屏这两者之间进行摸索。
整体风格不统一，部分因为还原不到位，部分是因为兼顾鼠标点击和触屏体验，因此还有漫长的路要摸索。

十三.程序云管理

据说Win10可以通过远程的方式关闭本地运行的应用程序，而通过任务栏里面的小图标还可以时刻提醒还有哪些应用在云端运行。相关资料有待补充。

总结

win10在变化上的一些缘由和启示：

照顾传统PC用户。
迎合扁平的设计趋势。
功能在部署完善，跟上竞争者步伐。
微软在不断优化大屏系统体验。
跨终端统一体验。
云端化的部署。
Win10依然在摸索过渡中，相对成熟的系统估计还需要2~3个大版本的改进。

在设计上一些可关注的方向：

终端系统趋向大同小异。
关注自适应的设计（包括框架、UI、及相关技术）。
面板设计更加趋向一体化。
在系统的变化和设计理念上，可多看一下微软、苹果和谷歌这几家巨头的设计理念和定位，会有很多相似或有趣的地方值得深入研究。

因为这是在21号发布会之前整理的内容，东西较多。整理下来也需要一定的时间，某些内容和还有所欠缺，如Surface Hub、HoloLens 智能眼镜、新浏览器Spartan等待。本人后续也会不断对win 10的内容进行补充，对其特性变化背后的缘由进行深入挖掘，欢迎感兴趣的同学一起交流讨论。

最后，不关微软是否能打成这场翻身之战，我还是挺欣赏能看到它作出的改变和尝试。尽管目前我还不是太认同win 10的大一统体验， 但梦想终究还是要有的，万一实现了呢亲~

能坚持看下来的同学都是棒棒哒，最后友情附送，Win10消费者预览版发布会全程视频中文字幕版（由于1个多小时的发布会视频时间较长，请大家点击链接跳转到视频网站观看）： http://v.qq.com/page/y/w/s/y0015bl4ews.html

最受欢迎的前端UI框架推荐

Sun, 08 Feb 2015 21:31:21 CST

前端UI框架越来越受到新人追捧，下边小编为大家列出目前最受欢迎、最优秀的前端框架以供大家选择。

Bootstrap

目前开源社区最受欢迎的项目之一，可谓大名鼎鼎了，最新版本3.x兼容IE9+，用于开发响应式布局、移动设备优先的Web项目。

官网： http://getbootstrap.com/

Semantic UI

UI框架的后起之秀，UI动画效果很棒，一个很有潜力的项目！兼容IE9+。

官网： http://semantic-ui.com/

Pure

大名鼎鼎的Yahoo!支持开发的UI框架，其特点简洁小巧，对于喜欢简洁的朋友来说是一个不可多得的好项目！兼容：IE7+。

官网： http://purecss.io/

AmazeUI

Amaze UI 是一个轻量级（所有 CSS 和 JS gzip 后 100 kB 左右）、 Mobile first 的前端框架，基于开源社区流行前端框架编写

官网： http://amazeui.org/

交互设计原则有哪些？

Sun, 08 Feb 2015 14:03:02 CST

笑天涯说：交互设计直接决定用户使用你的产品过程中体验，其重要性不言而喻。那么我们做交互设计的时候该考虑哪些交互设计原则呢？

知乎问题：交互设计原则有哪些？

问题虽然有点久远，但是知乎用户向华胜的回答还是很干货，感兴趣的读者可以仔细看看。

知乎回答：

产品设计的原则有点太泛哈，这里想结合自己的工作心得来小结一下手机无线设计8原则：

原则 1 ：用户界面应该 是基于用 户 的心里模型，而不是基于工程 实现模型

就是把后台本来很复杂的事情通过设计符合用户日常生活中常用的浏览方式或操作方式。其实这一点是设计师把生活中的细节和数据结合的凝聚点，用户的心理模型抓的越准，界面就会越优秀。

#左边界面#：大众点评新版的价格的搜索就比之前改得更符合用户心里模型；#右边界面#：食神摇摇的摇动手机找餐厅更加符合大众用户的心里，大家应该都有那种中午不知道去哪家餐厅就餐，那么就摇一摇来随机抽出一个附近的餐厅。

原则 2 ：培养用 户 使用情景的思 维 方式做 设计

要做到这个原则其实是很难的，需要长期的实战经验才能做到这点。
那我们都知道米聊出的比微信早，但后来被微信反超，个人认为不光是QQ帮了微信很大忙，比如用户登录门槛低，用户来源，广告打得响之类的，其实在用户使用情景方面米聊研究的没有微信透彻。

对于一个社交即时通讯产品，添加好友的功能是好友汇聚的来源，虽然米聊微信都绑定手机通讯录，但话又说回来，用户找手机通讯录联系人语音聊天的还是比较少。添加好友是引导用户去发现好友，找好友, 碰好友的一扇门。所以对于这么重要的功能放置在应用程序的哪个位置，在产品前期就会让用户明显的去选择用哪个应用，因为聊天工具的前提是要有人和你聊天。再回到现实的界面中来，看看下面的对比：

微信1.0的时候（我这里只截了4.0的图）把添加好友放置主Tab上，方便用户很快的添加好友

米聊2.0时还是把添加好友放置在好友列表的第一排，用户很难发现

原则 3 ：尽量少的 让用户输入，输入时 尽量多 给 出参考

移动端的虚拟键盘一直是科技界无法解决的一个难题，虚拟键盘的主要缺点：1.输入定位无法反馈，所以无法形成高效的盲打；2.虚拟键盘的空间限制，手指的点击经常造成误按。光是上面这两点就让虚拟键盘在输入上大打折扣，所以我们在设计应用程序时，只要遇到Input Box的控件时，首先就要想到尽量让用户少输入，或者智能的给出参考。

百度音乐

搜索先是把近期最热门的歌曲依次排列在列表中，当有字输入时，会出现歌手的候选词，这里值得称赞的是百度音乐的搜索能根据用户输入的字来判断用户是搜索歌手还是歌名。

百度地图

是我用得比较顺手的一个地图导航应用，在减少输入方面也做的比较出色，百度地图拥有cookies功能, 另外就是百度搜索的技术应用在地名的匹配中也很让人欣喜，在用户输入到一半的时候，下面的候选列表就出现了目标地址，用户直接停止输入点击列表即可。

原则 4 ：全局导 航需要一直存在， 最好还能预览 其他模 块的动态

全局导航在Web交互设计中比较容易做到，在手机移动端全局导航要看产品设计的需求，什么功能需要全局导航，社交应用通常是：消息，通知，请求；音乐视频应用通常是：下载，搜索；工具类产品经常是核心工具条（tool bar) 比如浏览器，语音助理，音乐识别应用等等。

全局导航的价值在于可以让用户在使用过程中不会丢失信息，减少主页面和次级页面之间的跳转次数，当然全局导航中的info-task要能在当前页面完成，如果需要跳转到新界面，就会失去全局导航的意义，因为当出现多个info-task的时候，就需要用户不停的进入全局导航页面来完成。

Facebook 的朋友请求，消息，通知都是采用全局导航的方式，就是面板设计的丑了些~

米聊的通知中心，里面包含的通知类型蛮多的，显得有点凌乱，希望下面的版本会筛选归类

原则5： 提供非模 态的反馈， 不打断任务流

模态弹出框的书面名称在iphone OS中称作：Alert-box，在Android OS中称：Pop-up box, 我们都知道弹框会打断任务流，所以在有限的屏幕上怎样让这些弹框弱化，或者说优雅、绅士的提醒用户，这个需要设计师来定义。

Gmail是第一个把删除的模态弹框设计成List Notification这种方式的，提醒用户撤销刚才的删除操作，这种非模态的处理，让删除的流程更加顺畅和轻松自如。

K歌达人第二版的弹框就是模态处理，界面很不友好，用户在K歌过程中要被打断三次才能发表一首自己唱的歌曲，所以降低了用户的参与度。

原则6： 不要让用户等待任务完成，用户还要发现更多有意思的地方

移动互联的核心就是给用户带来移动体验的方便和高效，这是移动互联网Apps需要考虑的，用户在使用你产品在很多情况下都是碎片时间，所以在设计上尽量让用户在短时间内熟悉我们的产品，知道这个产品的诚意，特别是某些等待界面需要设计，不能把一个很枯燥的等待界面呈现在用户的面前，那用户很快就会换其他apps。

在Instagram 拍完照片后，点击上传后，它的处理方式是回到首页的位置，告诉你的照片正在提交，并不是显示一个上传进度的界面，让用户看那上传百分比。因此，我们在设计米吧上传歌曲文件时也只是告知用户后台正在帮你上传，叫用户放心，用户自然就会去玩其他的功能，没有让用户焦虑的等待，等上传完毕时，我们再用Toast list通知用户已经上传成功，这样把查看上传结果的主动权交给用户。

原则7： 自动保存用户的输入成果

在移动端，由于输入面板的复杂性，而且触摸输入没有物理按键的反馈自然，特别是手机上去输入一段文字或者信息，对用户而言本身就是一件很痛苦的事情；对产品而言，用户的在你的产品中输入是一个很值得庆幸的事情，所以设计人员需要让你的apps自动保存用户的输入成果。

微博官方的手机客户端在用户输入信息后，点击左上角的叉时会弹出Action sheet来询问，确认是否要放弃，或者保存为草稿；path的处理则更为人性化，在处于断网的情景下，用户依然可以发布照片和文字，当然后面联网成功后，系统会自动上传，只是发表时间是连网后发布的时间点；Instagram的评论也很友好，在断网或者网络情况不稳定的情景，用户输入的评论依然可以发布，后面会有一个叹号提醒用户稍后发布或者重试，提升了用户参与的积极行，同时活跃了社区。

原则8： 为了程序响应的速度，设计有时候需要担任掩护的作用

科技并不是万能的，技术依然是移动互联网应用程序最需要优化和完善的，作为技术的盟友我们设计人员也需要辅佐他们，让用户觉得程序原本就应该是这么运行的。特别是程序响应的速度很多时候不光是技术的问题，与网络环境也有很大的关系，这时候设计人员需要考虑这些客观存在的情况，帮助程序来掩护这些瑕疵，让用户感觉到在使用时是流畅的。

#随后实现# Instagram帖子“赞” 不管对参与者还是帖子作者都是激发其积极性活跃社区氛围的重要功能，所以在程序的响应方面一定要具有可用，易用的特性，我们看左图中，“赞”的按钮已经现实“已赞”，同时我们看红色框内的“菊花瓣”就知道后台在loading赞的数据，所以这就是设计的巧妙之处，先让用户感知到程序是非常快速的，而不是等loading完之后再显示“已赞”；

#提前传输# Instagram中发布帖子的时候，用户处理完照片点击“上传”按钮就看到中间的界面，这时候界面是让用户去为自己的帖子输入一个主题，或者去设置分享等功能，同时我们可以看到红色框中的“菊花瓣”，很明显后台已经开始传输刚才上传的照片了，所以当用户在点击“完成”时，数据只需要上传剩下的一部分，让用户感知上传很迅速；

#边唱边完成# 把伴奏和用户的歌声合成为一首音乐时需要后台处理大量的数据，如果分步做就要让用户等待比较长的合成时间，为了让用户不用枯燥的等待合成，我们需要后台在用户唱歌的同时，后台就已经开始把唱过的伴奏和歌声合成。

以上八项原则是我在工作中体会比较深刻的交互设计原则，希望能对观看到这篇博文的朋友有所帮助。当然设计原则是随着时间的变化而不断变化的，所以也请各位朋友完善和补充，谢谢！

本文整理自知乎问答，转载请注明出处和原作者 @向华盛

互联网从业者必备微信公众号：woshipm，如果你已经关注了，证明你已经很牛逼了。

5种实用App导航菜单设计方案

Thu, 08 May 2014 09:04:28 CST

手机分辨率比桌面平台小很多，所以设计手机网站或是移动应用的时候，导航菜单都需要考虑周全，尽量保持简约和易用性高，这里我们整理了5种实用的移动手机App导航菜单设计方案，你可以尝试这些菜单设计模式用在你的新设计项目上，好用而且有新鲜感。

这5种App菜单设计方案也许有很多设计师已经在使用，但不能否认它是目前实用的，而且能提高用户体验的菜单设计方案。下面摘选移动手机UI设计美观、时尚，希望你看了后会有灵感收获，能把你的菜单设计得更棒，好好学习吧。

APP导航设计类型：

列表式菜单
矩阵、网格式菜单
底部菜单
顶部菜单
扩展菜单

一、列表式菜单

列表式菜单设计这个从网站到手机APP上都很常用的，遵循由上至下的阅读习惯方式，所以使用起来用户不会觉得困难。另外我们可以通过漂亮的配色、图标组合来设计，使得菜单更多加美观。

GIF Aimation

Elevatr

HabitClock App

Instagrab for iOS

二、矩阵、网格式菜单设计

网格式菜单就类似于metro UI的堆砌色块，优点简约而不简陋，导航清晰、明显，并能提高效率。但设计时切记不分青红皂白的去使用色彩哦，这可能会让用户不知所措和产生疲倦感。

Vectra

Arrivo Mobile App

Abracadabra App

TRAVERSE

三、底部菜单

底部菜单主要是列出应用程序重要的功能。

Badoo concept

Animated sliding tab bar

四、顶部菜单

顶部菜单和底部意义差不多，把菜单放在顶部，可以遵循上至下的阅读习惯，不过我认为有个缺点就是不能单手操作。

Horner

Discovery Channel

Air flow calculation app

Shario App

五、扩展菜单

扩展式菜单设计现在连网站也很常用，当我们觉得菜单比较点用位置的时候，可以尝试用这种方式来隐藏菜单，需要注意的是设计展开菜单按钮大部设计在左或右上角这些显示的位置。

MuSeek

Univit UI

SVOY app design

Időkép

总结

从上面5个菜单设计方案中可以看出都有自己的优缺点，所以我们应该选择对你项目最为有效的方案，并能提高用户体验。

原文地址：shejidaren

您可能也喜欢：
手机界面常用导航设计分析	APP 创业煎熬生存的持久战	Web导航设计二三事	在屏幕上画个C—基于人机工程学的安卓导航碎片化解决方案	如何输出有效的设计方案
无觅

（关注更多人人都是产品经理观点，参与微信互动（微信搜索“人人都是产品经理”或“woshipm”）

高效设计三步曲

Mon, 05 May 2014 13:54:03 CST

设计本就是不局限章法的事情，追求百花齐放，那么灵感的来源自然也就不受限制了，各有各的道理。但是设计不=艺术, 要的是众乐乐.是为了让想法最终变为现实,要求的是结果,否则方案永远会停留在概念阶段而不可实施。既然如此,如何成体系的思考 , 高效完成设计并对产品的最终形态负责任?这里总结了高效设计三步曲:

第一步:明确设计目标,摸清边界 第二步:多层面多维度思考 第三步:有理有据的表述方案

一、明确设计目标,摸清边界

1\明确设计目标

交互设计作为典型的目标导向型设计，越接近目标，也就越能得到最终方案。（图2).那么在设计之初明确设计目标就显得非常关键,Ta 是设计方案的评判标准.举个浅显的例子,任何一个比赛都是要先说明主题和缘由,为了什么而比赛,不然就变成了天马行空无从评判. 但实际情况中,往往没有特别明确的设计目标,需要设计师理解和挖掘。

我们将目标进行拆解,大体上设计需求来源于三方面,用户需求\公司需求\和自发需求。

a)用户需求

就是我们所说的用户体验设计的主要来源,用户在真实的使用场景中有需求,现在没有很好的解决方案,需要我们来提供.这类需求往往对应着相应的使用场景,我们往往称为痛点场景,找到并移情用户,找到真正痛点才能真正满足用户需求.

关键词:尽可能找准痛点且挖掘深层次需求

b)公司需求

需求都是人提出的,而提出的人可能是一些特定用户,为了实现特定的目的(有可能是非体验层面的)而提出的设计需求,这种需求比较不明确和可控,往往是经过多层转述而来的需求.对于此种需求的理解,要尽可能找到需求的源头,带个人思考和判断的理解.公司或者 Leader 要求做这样一个产品是为了实现怎样的目标,为什么要做等等。

关键词:找到需求源头并思考分析

c)自发需求

设计师本身也是产品的用户,并且有着较为超前的视角,那么在日常生活中经常会衍生出设计需求,这时候来源于内部自发的设计需求一般比较明确,这种设计方案在阐述的时候就需要先让人理解设计需求,所以首先要能验证或者说服别人认同你的需求点,其次需要在设计过程中不断明确目标,不忘初心以免偏离了设计最初的目标。

关键词:明确需求且可被理解

以上是关于明确目标,对需求理解越透彻就会越容易接近最终方案.还有一点摸清边界也很重要。

2\设计之初摸清边界

设计不同于艺术,最终是以实现为目标的,所以不可能无限制的思考,那么就需要在设计之初抓住核心问题点及设计中的关键性限制因素，比如上线时间,开发成本,产品预期等,在可突破的地方突破,合理利用空间最大化实现方案。这一点对于高效设计尤为重要,它让你的设计更可控和可行.减少后期收敛想法时的不断反复,前置理解设计限制。

二、多维度多层面思考

设计方案从雏形到最终成型过程,往往是一个黑盒子,每个设计师有自己的方法,而且很多感性的行程过程也无法描述.

这里根据个人经验总结出一个通用的设计方法,就是分层拆分设计需求,逐层找到最优解决方案.

a)拆分设计需求

前面提出的设计目标,往往不是单一的,是由多个维度指标组成的,比如我们需要减少用户的使用步骤,同时增加操作过程中的乐趣.这里就可以拆分为两个问题来解决,一是减少使用步骤,提升核心流程的易用性.二是同时考虑情感层面, 怎样通过有趣的方式让用户操作更爽.

b)有针对性的逐个解决

对于减少使用步骤的问题,首先梳理现有流程,然后思考哪些关键步骤是必须的,哪些可以省略和合并,换个思路来设计流程.

对于增加操作乐趣,首先了解现在是怎样的操作方式,然后分析为什么枯燥无趣,哪里还可以提升,有没有新的交互形式引入.

如此拆解设计需求,就会让每一步的目标变得相当明确,解决方案自然可以高效得出.

三、有理有据的表述方案

经过以上两步的设计,最后一步是表述方案并找到最终答案,那么如何表述方案能够让人快速认同.凭借个人魅力是一方面,另一方面需要有理有据的表述方案,因为人们往往更容易认同经过思考的方案（图3).

1\设计维度评估

从上面了解需求,拆解目标并找到解决方案,可能会遇到一个问题,就是设计师本身往往无法决策哪个层面更为重要,也就是维度的权重,而这最终决定了方案更偏向于哪个层面.而最终的评估过程可以保证最终方案更接近设计目标.

2\维度从哪里来

从MECE穷尽的角度来说，用户层面、成本层面和公司价值等附加值三个层面，基本可以包含互联网产品的评估依据（图4用户、成本、价值三个层面）

以某输入产品为例,我们在针对输入进行扩展功能设计的时候,制定了如下维度评估表:

这里有以下几点需要注意

a)维度确认

要想使评估结果得到更大认可，在维度确认之初要与评估方确认，对重点维度达成共识，无遗漏等。

b)数量应遵循7+2原则，方便评估

c)推荐方案

最终输出的是配合产品文档的一份维度评估表，若几个方案都能满足核心需求，那么可以通过明确的综合分数来推荐方案，若方案差别较大，可以抓住几个核心维度，推荐评估较高的方案。

d)形式不限，但要可以多人量化（比如五分制方格）

四、总结

设计是一门理性与感性,科学与艺术相融合的学科,如何自如的穿梭与两种思维模式中,让别人认可方案,是我们每天都在思考的问题.

小结一下本文的核心要点:将设计拆分为前中后三步, 通过前期明确目标,过程中拆解分层思考,最后有理有据的阐述,环环相扣让别人认可你的方案.
转载请注明出自”百度MUX”

交互设计用户模型建立

Fri, 27 Mar 2015 16:55:00 CST

Persona交互设计用户模型建立：

一、什么是用户模型？

Persona（[pə:'səunə]）：(Persona是用户模型的的简称)是虚构出的一个用户用来代表一个用户群。一个persona可以比任何一个真实的个体都更有代表性。一个代表典型用户的persona的资料有性别、年纪、收入、地域、情感、所有浏览过的URL、以及这些URL包含的内容、关键词等等。一个产品通常会设计3～6个用户模型代表所有的用户群体。

用户模型（任人物角色）不是用户细分

用户模型看起来比较像用户市场细分。用户细分通常基于人口统计特征（如性别，年龄，职业，收入）和消费心理，分析消费者购买产品的行为。用户模型更加关注的是用户如何看待、使用产品，如何与产品互动，这是一个相对连续的过程，人口属性特征并不是影响用户行为的主要因素。用户模型是为了能够更好地解读用户需求，以及不同用户群体之间的差异。

用户模型（人物角色）不是平均用户

某个人物角色能代表多大比例的用户？首先，在每一个产品决策问题中，“多大比例”的前置条件是不一样的。是“好友数大于20的用户”？是“从不点击广告的用户”？不一样的具体问题，需要不一样的数据支持。人物角色并不是“平均用户”，也不是“用户平均”，我们关注的是“典型用户”或是“用户典型”。创建人物角色的目的，并不是为了得到一组能精确代表多少比例用户的定性数据，而是通过关注、研究用户的目标与行为模式，帮助我们识别、聚焦于目标用户群。

用户模型（人物角色）不是真实用户

人物角色实际上并不存在。我们不可能精确描述每一个用户是怎样的、喜欢什么，因为喜好非常容易受各种因素影响，甚至对问题不同的描述就会导致不同的答案。如果我们问用户“你喜不喜欢更快的马？”用户当然回答喜欢，虽然给ta一辆车才是更好的解决办法。所以，我们需要重点关注的，其实是一群用户他们需要什么、想做什么，通过描述他们的目标和行为特点，帮助我们分析需求、设计产品。

用户模型（人物模型）能够被创建出来、被设计团队和客户接受、被投入使用，一个非常重要的前提是： 我们认同以用户为中心的设计理念。用户模型（人物角色）创建出来以后，能否真正发挥作用，也要看整个业务部门/设计团队/公司是否已经形成了UCD的思路和流程，是否愿意、是否自觉不自觉地将用户模型引入产品设计的方方面面，否则，用户模型始终是一个摆设、是一堆尘封的文档，纸上画画，墙上挂挂。

所以，在创建人物角色之前，我们需要明确几个问题：谁会使用这些用户模型？他们的态度如何？将会如何使用？做什么类型的决策？可以投入的成本有多少？明确这些问题，对用户模型的创建和使用都很关键。

二、为什么要创建用户模型？

创建用户模型的目的是：尽可能减少主观臆测，理解用户到底真正需要什么，从而知道如何更好为不同类型用户服务。

1.带来专注 人物角色的第一信条是“不可能建立一个适合所有人的网站”。成功的商业模式通常只针对特定的群体。一个团队再怎么强势，资源终究是有限的，要保证好钢用在刀刃上~

2.引起共鸣 感同身受，是产品设计的秘诀之一。

3.促成意见统一 帮助团队内部确立适当地期望值和目标，一起去创造一个精确的共享版本。人物角色帮助大家心往一处想，力往一处使，用理解代替无意义的PK~

4.创造效率 让每个人都优先考虑有关目标用户和功能的问题。确保从开始就是正确的，因为没有什么比无需求的产品更浪费资源和打击士气了。

5.带来更好的决策 与传统的市场细分不同，人物角色关注的是用户的目标、行为和观点。

三、什么时候可以用到人物角色？

在制定产品策略时

在讨论产品需求时

在项目优先级排序时

在进行任务分析时

在琢磨交互流程时

在选择设计风格时

在用研项目招募用户时

在锁定推广目标时

在完善运营方案时

总之，在各种讨论、脑暴、pk时，在我们想冲口而出”用户xxx”的时候，用户模型都可以派上用场。

四、如何创建用户模型（人物角色）？

按用研类型和分析方法来区分，人物角色可以分为：定性人物角色，经定量检验的定性人物角色，定量人物角色。三者的步骤、优缺点和适用性。

Alen Cooper的“七步人物角色法”：

界定用户行为变量

将访谈主题映射至行为变量

界定重要的行为模式

综合特征和相关目标

检查完整性

展开叙述

制定任务角色模型

Lene Nielsen的“十步人物角色法”：

1. Finding the users 发现用户

目标: 谁是用户？有多少？他们对品牌和系统做了什么？

使用方法: 数据资料分析

输入物: 报告

2. Building a hypothesis建立假设

目标: 用户之间的差异都有什么

使用方法: 查看一些材料，标记用户人群。

输出物: 大致描绘出目标人群。

3. Verifications调研

目标：关于persona调研（喜欢/不喜欢，内在需求，价值）。关于场景的调研（工作地环境、工作条件），关于剧情

的调研（工作策略和目标、信息策略和目标）。

使用方法：数据资料收集。

输出物：报告。

4. Finding patterns发现共同模式

目标：是否抓住重要的标签？是否有更多的用户群？是否同等重要？

使用方法：分门别类。

输出物：分类描述。

5. Constructing personas构造虚构角色

目标：基本信息（姓名、性别、照片）。心理（外向、内向）。背景（职业）。对待技术的情绪与态度，其他需要了

解的方面。个人特质等。

使用方法：分门别类。

输出物：类别描述。

6. Defining situations定义场景

目标：这种persona的需求适应哪种场景？

使用方法：寻找适合的场景。

输出物：需求和场景的分类。

7. Validation and buy-in复核与买进（可忽略）

Questions asked: Do you know someone like this?

Methods used: People who know (of) the personas read and comment on the persona descriptions

8. Dissemination of knowledge知识的散布（可忽略）

Questions asked: How can we share the personas with the organization?

Methods used: Fosters meetings, emails, campaigns of every sort, events.

9. Creating scenarios创建剧情

目标：在设定的场景中，既定的目标下，当persona使用品牌的技术的时候会发生什么？

使用方法：叙述式剧情，使用persona描述和场景形成剧情。

输出物：剧情、用户案例、需求规格说明

10. On-going development持续的发展

Questions asked: Does the new information alter the personas?

Methods used: Usability tests, new data

Documents produced: A person responsible for the persona input from everybody who meet the users.

五、 如何使用用户模型？

用户模型（人物角色）清晰揭示用户目标，帮助我们把握关键需求、关键任务、关键流程，看到产品必须做的事，也知道产品不该做什么。人物角色不是精确的度量标准，它更重要的作用是作为一种决策、设计、沟通的可视化的交流工具。

丰满而有真实感的人物角色比正确的人物角色更有用。所谓正确的100%符合实际情况的角色是不存在的，我们应该尽可能丰富、形象化我们的目标用户群，让它在设计决策过程中发挥作用。

如何保持人物角色的活力？这个问题绝对不容忽视，尤其是当团队首次创建和使用用户模型。用户模型不只是未某个项目、某次特殊需求而创建的。持续使用和更新，将核心用户的形象融入到每个成员开发、设计思维中，才是人物角色的使命。我们需要不断地完善、展示、解释、使用它：

建立人用户模型文档

展示用户模型

与用户模型一起生活

来源：后时代

原文地址：http://houshidai.com/product/persona.html

互联网从业者必备微信公众号：woshipm，如果你已经关注了，证明你已经很牛逼了。

我们为什么需要动效设计

Fri, 12 Jun 2015 20:47:33 CST

推荐语：最近越来越多的国内公司开始关注动效设计了，越来越多的团队意识到动效在产品用户体验中的重要性，下面就看下动效设计的意义。

随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的射鸡师们也开始投身动效设计领域。

但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。（文中部分案例为设计师个人作品，部分为线上产品，都是我非常非常欣赏的作品。如不慎冒犯请戳我替换掉）

一、加强体验舒适度

嗯，就是让用户更加爽更加爽的用你的产品。

具体表现在：

1.表现层级关系

为了展现层与层的关系，是抽屉，是打开，还是平级切换等等，让用户知道这个界面和上一个、下一个的关系。这已经是非常最常见的运用了。

2.与用户手势结合，更自然的动画表现

当用户手势操作的时候，让界面的动态走向更符合手指的运动，从而让用户感觉到是自己控制了界面的动向，而不是机械化的跳转。

City guide app 用手势可以向左向右扔卡片

3.愉快的提示功能

在某些需要提醒的时候能吸引用户的注意，但是又不会生硬，符合预期的出现。

Action button feedback出错提示

City GUIdes启动时提示用户可以左右滑动卡片

4.额外增加界面的活力

在用户预期之外增加的惊喜，可以是帅气的，可以是卖萌，可以有些物理属性，总之让用户感知到产品的生命力。

readme.io 萌萌的输入框

amazon Q弹的菜单

tumblr不喜欢我心都碎了呢~

5.吸引用户持久的注意力

也是属于增加用户的惊喜感，在某些数据量较大的界面中添加一些动效，让用户保持注意力。

Bubbles以动态的形式展现数据点

二、减弱不可避免的不适感

虽然我们的产品，我们的交互，我们的设计，我们的工程狮都在努力把产品打造的更加优秀，更加完美，但是总有一些无法避免的问题、或者有可能会出现的bug、外界条件的不给力等因素，造成我们的产品体验下降。这些时候适当的增加一些动效可以弥补在出现这些情况时的不适体验。

比如下面这些：

1.让等待变得更愉快

常出现在加载、刷新、发送等界面中，让等待变得可视化，甚至不再那么无聊。

Download让下载不再枯燥

App loader有趣的loading动画

gear-powered拉了还想拉的下拉刷新

2.失败界面的动效

比如刷新失败、页面错误、未联网提示这些。

download就算失败了还是感觉萌萌哒~

3.增加界面与界面衔接的延续感

界面的跳转不可以避免，但是如果让本来分别独立的2个界面或者事件拥有了某种特定的联系，可以显得更加好玩，不再是生硬的跳转。

IOS Animation Download界面跳转时保留部分元素到下一个界面

Filter Menu保留需要的条目移走不再用的

Elevate

三、不易被察觉的动效

特意把这一类单独说一下，由于不容易被发现，普通用户通常会忽略它们的存在，但很多时候这些小细节让交互变得更加有趣。

1.默默增加反馈感

为用户的操作提供有趣的正反馈。

Twitter收藏的点击反馈

2.去除用户不再需要的元素

随着用户的操作，有的内容已经是用户不再关注的。这时候可以将他们隐藏起来。

CityHour Calendar Animated Interaction

Steller

上面的例子大部分都是比较特色鲜明的，但是大多数实际情况中的优秀动效设计都会涉及到好几点同时都满足。总的来说动效还是为用户体验而服务的，动效设计师尤其要注意交互逻辑，才能让你的作品看起来不但动效帅气逼人而且真正发挥了实际的作用。

最后要提醒的是，千万不要牺牲了用户宝贵的时间用来看你毫无目的的动效。

文章总结了一些自己的想法，有不足之处希望各位可以指出~

作者：cardist

来源：UI中国

原文地址：http://www.ui.cn/detail/54562.html

互联网人士必备微信公众号：woshipm，雷军和周鸿祎都关注了，如果你已经关注了，证明你已经很牛逼了。

论Web App、Hybrid App、Native App设计差异

Mon, 01 Dec 2014 12:07:01 CST

目前主流应用程序大体分为三类：Web App、Hybrid App、 Native App。

一、Web App、Hybrid App、Native App 纵向对比

首先，我们来看看什么是 Web App、Hybrid App、 Native App。

（1）Web APP

Web App 指采用Html5语言写出的App，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。

 优点
（1）开发成本低，
（2）更新快，
（3）更新无需通知用户，不需要手动升级，
（4）能够跨多个平台和终端。

 缺点：
（1）临时性的入口
（2）无法获取系统级别的通知，提醒，动效等等
（3）用户留存率低
（4）设计受限制诸多
（5）体验较差

（2）Hybrid App

Hybrid APP指的是半原生半Web的混合类App。需要下载安装，看上去类似Native App，但只有很少的UI Web View，访问的内容是 Web 。
例如Store里的新闻类APP，视频类APP普遍采取的是Native的框架，Web的内容。
Hybrid App 极力去打造类似于Native App 的体验，但仍受限于技术，网速，等等很多因素。尚不完美。

（3）Native App

Native APP 指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强。需要用户下载安装使用。

 优点：
（1）打造完美的用户体验
（2）性能稳定
（3）操作速度快，上手流畅
（4）访问本地资源（通讯录，相册）
（5）设计出色的动效，转场，
（6）拥有系统级别的贴心通知或提醒
（7）用户留存率高

 缺点：
（1）分发成本高（不同平台有不同的开发语言和界面适配）
（2）维护成本高（例如一款App已更新至V5版本，但仍有用户在使用V2， V3， V4版本，需要更多的开发人员维护之前的版本）
（3）更新缓慢，根据不同平台，提交–审核–上线等等不同的流程，需要经过的流程较复杂

二、Web App、Hybrid App、Native App 技术特性

由上图可见，Web APP 的开发基于Html5语言。而Html5语言本身又有着不可避免的局限性。正是这些局限性的存在，使得Web App在体验中要逊于Native App。

三、Web App受限制因素及设计要点

相比Native App，Web App体验中受限于以上5个因素: 网络环境，渲染性能，平台特性，受限于浏览器，系统限制。

（1）网络环境，渲染性能

Web APP对网络环境的依赖性较大，因为Web APP中的H5页面，当用户使用时，去服务器请求显示页面。如果此时用户恰巧遇到网速慢，网络不稳定等其他环境时，用户请求页面的效率大打折扣，在用户使用中会出现不流畅，断断续续的不良感受。同时，H5技术自身渲染性能较弱：对复杂的图形样式，多样的动效，自定义字体等的支持性不强。
因此，基于网络环境和渲染性能的影响，在设计H5页面时，应注意以下几点：

 简化不重要的动画/动效
 简化复杂的图形文字样式
 减少页面渲染的频率和次数

从下图移动Web版 jing.fm和Native版jing对比后可以看出：Web APP首页去除冗余的功能，回溯本源，只给用户提供了jing.fm最初的本质需求—电台。既符合H5精简功能又达到了突出核心功能的设计原则。无疑给用户眼前一亮的气息。
正如书中《瞬间之美》的一个核心观点：重要的并不是我们提供的信息量有多大，而是我们能否给他们提供真正需要的信息。

再如：百度最新推出的直达号，以良子健身为例：
从Native App和Web App（百度直达号）的对比中，我们可以看出Native良子以九宫格的形式展现，且属于双重导航，功能入口太多；弊端是用户不知道聚焦在哪里，分散用户的注意力。而Web版良子整合并减少了导航的入口，增强用户的专注度；界面清爽，整洁，很好地传达了良子本身的寓意——轻松、愉悦、休闲、舒适。

（2）受限于浏览器

通常Web App生存于浏览器里，宿主是浏览器。不同的浏览器自身的属性不尽相同，如：浏览器自带的手势，页面切换方式，链接跳转方式，版本兼容问题等等。
例如下图：UC 浏览器和百度浏览器自身支持手势切换页面。手指从左侧滑动页面，返回至上一级。百度手机助手H5页面，顶部Banner支持手势左右滑动切换。这一操作与浏览器自身手势是冲突的。

再如，基于浏览器的Web APP在打开新的模块中的页面时，大多会新开窗口来展现。例如用户在使用购物类APP时，浏览每日精选模块时，每当打开新的商品时，默认新开一个窗口。这样的优劣势显而易见：优势是能够记录用户浏览过的痕迹，浏览过的商品，以便后续横向对比；劣势是过多的页面容易使用户迷失在页面中。

正如Google开发手册里描述：当用户打开一个Web App的时候，他们期待这个应用就像是一个单个应用，而不是一系列网页的结合。然而，什么情况下需要跳转页面，什么情况下在当前页面展示则需要设计师细致考量。

因此，Web App基于浏览器的特性，从设计角度应该遵循以下了两点：
 少用手势，避免与浏览器手势冲突
 减少页面跳转次数，尽量在当前页面显示。

（3）系统限制，平台特性

由于Html5语言的技术特性，无法调用系统级别的权限。例如，系统级别的弹窗，系统级别的通知，地理信息，通讯录，语音等等。且与系统的兼容性也会存在一些问题。以上限制通常导致APP的拓展性不强，体验相对较差。例如百度地图：

Web版地图基于浏览器展现，因此，不能全屏显示地图，给用户的眼界带来局限感；相反，Native 版地图以全屏展现的形式，很好的拓展了用户的视野。整个界面干净简洁，首页去除冗余功能。
在制定路线的体验中，如图：

Web 版地图耗费的流量大于Native版，且不能预先缓存离线地图。对于地理位置的判断也是基于宿主浏览器，而非Web地图本身。获取路线后，对于更换到达方式，相对来说是不便利的。
相反，Native 版地图，能够直接访问用户的地理位置，能够很清晰的为用户展现App规划的路线，并能轻松的查看多种路线方案，以便做出符合自己的最佳方案。对于切换公交，走路，自驾等路线方式也是只需一键操作。Native 版地图相对于 Web版地图增加更多情感化，易用的功能，如：能够记录用户的生活轨迹，记录用户的点滴足迹，能够享受躲避拥堵方案等。而Web版地图基于技术框架，很难实现以上功能，从用户体验角度来看，弱于Native版地图。

四、小结

综述所述，在设计Web APP时，应当遵循以下几点：

（1）简化

简化不重要的动画/动效
简化复杂的图形文字样式

（2）少用

少用手势，避免与浏览器手势冲突
少用弹窗

（3）减少

减少页面内容
减少控件数量
减少页面跳转次数，尽量在当前页面显示

（4）增强

增强Loading时的趣味性
增强页面主次关系
增强控件复用性

最后：小编给大家推荐一组优秀的Web APP
forecast.io/
m.ftchinese.com/phone.html
thenextweb.com
jing.fm
yuedu.fm
mail.google.com
plus.google.com
snowbird.com
everthing.me
m.vancl.com
pattern.dk/sun/

转载请注明出自”百度MUX”

搞懂数据可视化的五虎将，做热门信息图！

Sat, 20 Sep 2014 18:45:00 CST

【Martin导读】数据可视化（Data Visualization）技术指的是运用计算机图形学和图像处理技术,将数据换为图形或图像在屏幕上显示出来,并进行交互处理的理论、方法和技术。通过数据可视化技术输出的图象通常具有交互性、多维性、可视性的特点，能清晰有效地传达与沟通信息。

本文从面积&尺寸、颜色、图形、地域空间、概念五个方向阐述了数据可视化的要点和心得，值得认真品读。

因为接下来要做卖家后台数据纵横的改版，对数据可视化这块儿又进行了研究和心得的整理，跟大家分享下数据可视化常用的五种方式，希望能给大家带来思路的拓展。

概念

借助于图形化的手段，清晰、快捷有效的传达与沟通信息。从用户的角度，数据可视化可以让用户快速抓住要点信息，让关键的数据点从人类的眼睛快速通往心灵深处。

数据可视化一般会具备以下几个特点：准确性、创新性和简洁性。

常用五种可视化方法

下面从最常用和实用的维度总结了如下5种数据可视化方法，让我们来一一看一下：

一、面积&尺寸可视化

对同一类图形（例如柱状、圆环和蜘蛛图等）的长度、高度或面积加以区别，来清晰的表达不同指标对应的指标值之间的对比。这种方法会让浏览者对数据及其之间的对比一目了然。制作这类数据可视化图形时，要用数学公式计算，来表达准确的尺度和比例。

a: 天猫的店铺动态评分

天猫店铺动态评分模块右侧的条状图按精确的比例清晰的表达了不同评分用户的占比。从下图中我们第一眼就可以强烈的感知到5分动态评分的用户占绝对的比例。

b: 联邦预算图

如下图，在美国联邦预算剖面图里，用不同高度的货币流清晰的表达了资金的来源去向，及每一项所占金额的比重。

c: 公司黄页-企业能力模型蜘蛛图

如下图，通过蜘蛛图的表现，公司综合实力与同行平均水平的对比便一目了然。

二、颜色可视化

通过颜色的深浅来表达指标值的强弱和大小，是数据可视化设计的常用方法，用户一眼看上去便可整体的看出哪一部分指标的数据值更突出。

a: 点击频次热力图

比如下面这张眼球热力图，通过颜色的差异，我们可以直观的看到用户的关注点。

b: 2013年美国失业率统计

在图中可以看到，通过对美国地图以州为单位的划分，用不同的颜色来代表不同的失业率等级范围，整个的全美失业率状况便尽收眼底了。

c: 美国手机用户城市分布

图中红点是用iPhone的人，绿点是用安卓的人。这两张在微博上看到的图，第一张是美国一个城市的一览，第二张图特写了纽约的市中心，尤其是曼哈顿地区。我们可以看到在市中心和主干道的人用iPhone居多，而用安卓的人都在郊区。这也引起了人们的热议，有的说在美国富人都住郊区别墅，所以富人爱用安卓手机；有的反驳说曼哈顿地区的人几乎都用iPhone，说明富人喜欢用iPhone手机。不管结论如何，都足以说明用户都被这些图所吸引，所以可视化的方式效果真的很直观。

注：科学家统计了2年里30亿条含有地理数据的twitter推文，根据客户端总结出来的数据。

想知道数据可视化可以干嘛吗？热门信息图就是从这里诞生的！《经验分享：一幅热门信息图诞生的前世今生》

三、图形可视化

在我们设计指标及数据时，使用有对应实际含义的图形来结合呈现，会使数据图表更加生动的被展现，更便于用户理解图表要表达的主题。

a: iOS手机及平板分布

如下图所示，当展示使用不同类型的手机和平板用户占比时，直接用总的苹果图形为背景来划分用户比例，让用户第一眼就可以直观的看到这些图是在描述苹果设备的，直观而清晰。

b: 人人网用户的网购调查

下图可以看出，该数据可视化的设计直接采用男性和女性的图形，这样的设计让分类一目了然。再结合了颜色可视化（左面蓝色右面粉色），同时也采用了面积&尺寸可视化，不同的比例用不同长度的条形。这些可视化方法的组合使用，大大加强了数据的可理解性。

四、地域空间可视化

当指标数据要表达的主题跟地域有关联时，我们一般会选择用地图为大背景。这样用户可以直观的了解整体的数据情况，同时也可以根据地理位置快速的定位到某一地区来查看详细数据。

a: 美国最好喝啤酒的产地分布

下图中，通过以美国地图为大背景，清晰的记录了不同州所产啤酒在1987-2007年间在美国啤酒节中获得的奖牌累计总数。再辅以颜色可视化的方法，让用户清晰的看到美国哪些州更盛产好喝的啤酒。

五、概念可视化

通过将抽象的指标数据转换成我们熟悉的容易感知的数据时，用户便更容易理解图形要表达的意义。

a: 厕所贴士

下图是厕所里贴在墙上的节省纸张的环保贴士，用了概念转换的方法，让用户清晰的感受到员工们一年的用纸量之多。如果只是描述擦手纸的量及堆积可达高度，我们还没有什么显性化概念。但当用户看到用纸的堆积高度比世界最高建筑还高、同时需砍伐500多颗树时，想必用户的节省纸张甚至禁用纸张的情怀便油然而生了。所以可见用概念转换的方法是多么的重要和有效。

b: Flickr云存储空间达1TB的可视化描述

Flickr对云存储空间升至1TB确实是让人开心的事情，但相信很多人对这一数量级所代表的含义并不清晰。所以Flickr在宣传这一新的升级产品时，采用了概念可视化的方案。从下图可以看出，用户可以动态的选择照片的大小，之后Flickr会采用动态交互的方式计算和显示出1TB能容纳多少张对应大小的图片。这样一来，用户便有了清晰的概念，知道这1TB是什么量级的容量了。

注意事项

在总结了常见维度的数据可视化方法和范例之后，要再次总体强调下做数据可视化设计时的注意事项，总结了三点如下：

1）设计的方案至少适用于两个层次：一是能够整体展示大的图形轮廓，让用户能够快速的了解图表所要表达的整体概念；之后再以合适的方式对局部的详细数据加以呈现（如鼠标hover展示）。

2）做数据可视化时，上述的五个方法经常是混合用的，尤其是做一些复杂图形和多维度数据的展示时。

3）做出的可视化图表一定要易于理解，在显性化的基础上越美观越好，切忌华而不实。

总结

作为设计师，除了掌握方法来有针对性的设计之外，还要在平时多留心积累素材，同时培养自己的创造力和专业素养，保持一颗好奇心，才能真正的设计出样式精美又实用的数据可视化图表。

文章来源：优设

互联网从业者必备微信公众号：woshipm，如果你已经关注了，证明你已经很牛逼了。

表单设计中8个不能不忽略的技巧

Mon, 28 Jul 2014 15:51:47 CST

表单应该就像个温柔又有礼貌的服务生。想象你走进一间超级市场，走过两旁堆满商品的走道之后，左转右转，看到你想买的果酱并且挑选了两罐放在购物袋中。

终于你走向结账柜台，一个笑容甜美的收银人员对你温柔的问好，并接过你手中的果酱，告诉你价钱，帮你包装，然后找给你零钱和发票并且愉快的说再见。

现在你来到一个购物网站，在首页看到许多特价商品，你点选了食品的分类选项，来到果酱的分类。稍微看了一下果酱的介绍文章，然后点击鼠标把果酱放到购物车中，并点选结账：结果出现的是一个冷淡又死气沉沉的表单（Form）。

表单绝对是网站中用户和系统互动的最主要的元素，网站透过表单向用户提出问题，用户则透过表单向网站表达他的想法。标单又可以细分成三种元素：1、说明目的的标签；2、提供响应的输入方块或选单；3、以及提交表单的按钮。表单的设计就可以想象成一个称职的服务生，他的服务应该要符合下面几个项目：

1. 标签要清楚

标签就像是服务生的问候语和问题，应该要有礼貌、清楚、简单而且容易理解。

2. 仔细决定表单项目

绝对不要问一些不该问、或是不需要问得问题。例如：在不需要手机号码的情况下，要求用户输入手机号码。这种冒犯隐私的行为，是很容易招致网络用户厌恶的。

3. 标示清楚

卷标应该将「一定要输入」的项目标示清楚。如果一个表单有十个需要输入的项目，其中有三个一定要输入，那么就应该将「＊」或其他符号标记在一定要输入的卷标的旁边（标记在输入框旁边不容易阅读），反之亦然。

4. 清楚提示的输入框

提供使用者输入的输入框的大小应该要经过设计来符合所需要输入的数据，输入地址的方框应该要比输入名字的方框要长一些。输入电话号码的方框应该适当的分成区码和号码两隔，让用户透过输入框的大小就可以了解所需要输入的格式。

5. 常用的默认值

表单在一些常用的项目上，应该要填好许多用户常用的默认值，让用户不用一隔一隔慢慢的填写。如果你的表单是用户每天都要使用的，那默认值则可以大幅增加使用效率。

6. 提供良好的限制

如果有一个输入数值的方格，而输入的数值有大小限制，则可以考虑改用滑杆或旋扭取代。如果一定要采用输入框，则至少把数值的限制标示清楚，避免在使用者输入错误之后才跳出错误的对话框。

7. 不要预设寄送广告信

许多表单的最后都有一个选项：「我要收取 xxxx 网站的广告信件。」相信我，九成的使用者都不喜欢你默认这个选项给他们。当个有礼貌的服务生，不要强迫推销，让使用者决定自己喜欢的东西吧！

8. 千万不要随便清除输入的数据

这是表单最容易让用户生气的一个问题了！许多网站的表单写完并按下提交之后，画面上跳出了输入错误，然后就还我们一个空白全新的表单。这简直就像是 Alan Cooper 说的：「 就好像我写错一个字，然后服务生就把整张纸揉成一团丢在我脸上一样。」

原文地址： http://dclick.fourdesire.com
作者： Taco Chen

提高Axure设计效率的10条建议

Tue, 01 Jul 2014 23:08:30 CST

Axure 是创建软件原型的快速有力的工具。上手很容易，但是，其中存在一个危险。这款软件是如此的直观以至于很多用户可以在没有接受过任何正式培训的情况下进行使用。他们可能不知道的是他们可能没有以恰当的方式来使用 Axure。

作为一位有经验的用户体验设计师，我很少在画一页的时候第一次就能把它设计正确。大部分时候，我要经历5到10次的反复迭代（iterations）。当你的用户体验设计是用来作为敏捷项目（agile project）的蓝图，那你可能需要在项目周期内跟上整个项目。有时候，这些变化将会影响到十几页或是更多的设计页。正是在这种情况下，Axure 的一些不太明显的特征可以为设计师节省巨大的时间。

我一般在团队中的工作是创建线框图和原型。为此，我会使用Axure 中的「共享项目」功能（在Axure 7中叫做「团队项目」）。能多人实时协同设计一个项目是我最喜欢Axure 的地方，但它的确要求简洁的和结构化的工作方式。毫无疑问，你将会发现别人正在你设计过的设计稿上工作，或者你正在别人的设计稿上工作。我已经把这些使用Axure的准则记在了心里，因为那是我现在工作的工具，而且我相信这些建议也同样适用于其它软件工具。

从长远角度来看，我认为我提出的这10条建议是节约时间的重要方法（crucial techniques）。这种工作方式并不总是在短期内体现它的优势，但是它确实可以比正常情况更加具有灵活性（But it does allow for optimal flexibility further down the line.）。

一、用一个控件就可以完成的事永远不要用两个控件

我看到的最浪费时间的行为是 Axure 的初级和高级用户都在使用不必要的控件。我发现自己仍然在犯这个错误，所以必须不断提醒自己这是第一条准则。每一个你添加到项目中的控件，当在未来需要改变时都要耗费更多的工作时间。所有这些工作在经过十次迭代后会逐渐增加。举个简单的例子，两个在视觉上完全一样的对象怎样能够用不同的方式被建立起来呢？

上面两个例子说明了一种情况，即有些人使用一个文本标签加一个按钮这种分离式的控件。当这个人想对整个对象添加 OnClick 事件的时候，他们有两种选择。第一个方法是在整个部件上添加一个热区，这种方法使得三个控件都需要被维护。第二种方法是为每一个元素添加一个 OnClick 的交互事件，这种方法使得两个交互动作需要被维护。

当部件需要被修改的时候，这两种方式都会花费不必要的时间。一个更为简单的方法是通过在矩形框上添加文字的方式来创建对象。

那么你的文字可以使用「对齐和填充」工具栏进行调整位置。你现在只有一个控件需要维护而且只需要一个交互事件。

二、不要复制对象，而是把对象转成母版

当我发现自己处在一个设计阶段的后期且我们需要改变每一页主导航的时候，我体验了巨大的喜悦。不是因为我喜欢一大堆（a big pile of）的重复性工作，而是因为我所要做的仅仅只是编辑单个母版，然后很快（presto）整个项目就被更新了。

为主导航使用母版似乎是相当平淡无奇的，但是创建一个母版是值得的，当你使用任何操作超过一次的时候。无论何时你发现自己一直在复制和粘贴一组控件，永远记住，创建一个母版可能是更好的选择。

创建了母版后，例如上面的产品展示图 "tile" ，如果你决定改变按钮上的文字为 "Buy now" ，你将只需要编辑一次，然后发现模板中的每个实例都发生了改变。

记住，不要把太大的组合对象变成母版。越是大的组合对象，越是有可能需要在母版的很多地方做出修改。把一些母版和另外一个母版合并起来一般会是更好的办法。当你只需要在一个母版中做些改变的时候这种方法就变得很方便。也就是说一些元素一直被包含而其它一些元素一直要变化，比如下图：

这个基础母板没有包含价格的信息，但是它可以结合另外一个母版来为所有的产品展示图创建新的母版。

三、在创建母版之前要设置好样式（Place Styles）

母版对于创建需要重复利用的元素是很好的，但它们不允许变化。一个母版的每个实例都是一模一样的。这个时候样式来了。假设你有一个按钮需要被复制到多个页面，但在按钮上的标签需要修改，样式可以帮你很容易地完成。每个按钮的属性可以通过样式去设置，你需要做的就是修改文本标签。

按钮的作用往往是增加鼠标悬停等相关事件。在 Axure 中，这些事件往往通过使用动态面板来创建。不同的状态被放置在不同的动态面板和脚本中。然而，使用这种方法你将要进入每个动态面板的状态来修改这个按钮。

一个更快的方式来处理按钮的事件是使用「交互样式」对话框。使用这个功能，仅仅需要为不同的事件状态设置不同的样式（With this feature, simply set different styles for each behavior state），然后只需要复制按钮和设置大小一次。

提示：可以在按钮上使用在 Axure 7中介绍的「自动适应宽度」的功能。如果你在样式中使用了左右填充的功能，你要修改的是仅仅是按钮的文本，然后按钮的大小会自动适应。

四、保持项目的组织性和命名的清晰性

Axure提供了许多选项来保持项目的组织性。你放置在页面上的每个元素都拥有独一无二的命名。页面可以被命名然后组织成一个树状结构。例如母版可以被命名然后在文件夹中排序等等。但是为什么要花费力气来给每个对象一个清晰的命名呢？

1）保持东西的组织性

当你有一个精心制作的网页，然后你想通过动态面板来创建一个交互，你将不得不通过一长列表的元素来找到你想要的那个。你可以使用搜索框——但这只是在你已经考虑周到地为你的项目命了名的情况下。

2）允许团队成员介入

可能像我一样，你在团队中，你的项目总是会发生意料之外的事情。你或你的同事可能会生病或意外地必须工作在另一个项目中。至关重要的地方是这个项目建立得非常清晰以至于他人可以顺利地介入然后接管事务。由其他人添加的交互事件可以完成得特别复杂。

3）可以和第三方分享

一般我参与的项目中，我的线框图至少需要和10位同事分享。有些人会坐在我桌旁，然后我可以指导他们。其他人，我们永远不会见面，然后我不知道他们对线框图的理解情况。理想状态下，一个原型应该是清晰易懂不需要解释的（viewable autonomously）。

我会做如下的事情来完成任务。

1)创建一个登录页面

2)给页面一个独一无二的、可以自我解释的命名

如果页面的命名是清晰的而且说明了每个页面的内容，那么这个原型将更容易理解。人们也会在以后的交流中使用这些名称。举个例子，如果一位平面设计师基于你的设计做出了一份样稿（comp），他们可能像你一样为页面使用相同的命名。如果一个页面的名称不是独一无二的，那么将会出现一个页面有两个不同的名字。

3)创建最常见的流程图

大多数的人不把设计页做成树状结构，他们喜欢根据活动流程图来设计。你可以在 Axure 中创建流程图来反应重要的用户流程，并且链接到相关页面。然后你会提供额外的方式浏览原型。（流程图上的名称是基于那些站点地图的名称。因此，你是否命名清楚就变得很重要了。）

五、养成使用全局辅助线和网格的习惯

Axure 允许用户创建两种辅助线：一种是局部辅助线，只存在于一个页面上，一种是全局辅助线，存在于全部的页面上。辅助线可以使用「创建辅助线」对话框来设置。例如，如果你设置了一个960px 的网格，然后再在不同的页面定位元素就变得容易多了。与此同时，你的团队成员将在一个共享项目中看到这些全局辅助线。

使用网格可以帮助你保持设计的整洁和结构化。我经常设置我的网格是10×10px ，然后以10的倍数的尺寸来创建我的对象。例如，60×20像素的按钮，而不是55×18像素。当你把这些对象放在网格上的时候，一切变得更容易对齐了，而且可以满足你的任何强迫症。当然，允许那些需要不同尺寸的特殊对象偏离网格。

提示：在Axure 7中，你可以为移动端和网页端建立不同的全局辅助线。下面是我喜欢用的一个移动端网格的应用实例：

六、不要忘记导入功能

在大多数项目中，人们制作的元素对其他项目也都是有用的。不需要重新发明轮子，而是重复使用那些在过去工作中使用过的元素。许多基础的东西在整个项目中都要保持一致，例如样式，辅助线和母版。虽然复制粘贴一个项目从这一个 .rp 文件到另一个 .rp 文件是可以的，但并不是所有的信息都会在。当你粘贴一个具有独特风格的按钮，样式并不会跟着一起粘贴过去。

重复使用元素的最好方法就是使用超强的导入功能。这使您可以导入页面和母版，还有样式和辅助线。

提示：创建一个「母的」.rp 文件来导入新的项目，在那儿你可以保持标准的母版。

七、要保留网页的旧版本

我经常发现自己需要回到一个项目的一个旧版本。在过去的日子里，我经常需要在Visio中创建线框图，管理有很多页面的项目是困难的，所以我最终会丢失页面。

在Axure中，追踪旧版本是容易的。仅仅是创建一个命名为 "Bin" 的文件夹（或者在Axure 6.5 或更早的版本中创建一个页面）。

把旧版本的页面放在那儿，以便于当你需要及时返回去的时候能很容易找到。当需要导出的时候，只要选择部分就行了，不需要全选页面。这样的话，你可以向您的客户分享一个简洁的版本，而且旧版本任然可以被直接访问。

八、不要设计不必要的交互动作

Axure 的初始用户通常对Axure 可以很轻松地将交互动作添加到原型中留下深刻印象。一开始的时候，我忍不住对我创建的每一页添加交互动作。然而，在许多情况下，我可以清楚地传达设计而不需要任何交互——仅仅是静态图像。现在，我只会对下面这些问题当中有一个回答"Yes"的时候才增加交互动作。

1. 「我确实要交互动作才能明确无误地表达我的设计吗？」

如果你提供的仅仅是静态图像而没有交互元素的时候，你的设计会被错误理解吗？这可能是一个需要依赖于一定的动画才能被理解的情况。

2. 「从长远角度来看，这个交互设计节省时间吗？」

创建一个元素的交互会比展示不同页面的不同状态更快吗？比如，创建和维护一个交互式网页的标签会比为每个页面创建多个标签更容易。

3. 「我需要说服某些人一些交互元素的概念吗？」

我拿出了一个我认为是问题的最佳的解决方案，但我知道这个方案很难被推进发展，那么我需要别人支持我的想法。我发现做交互原型可以帮助我传播想法。

但是，如果所有这些问题的答案是否定的，那么我宁愿去创建仅仅显示一个交互元素不同状态的多个版本。

九、要使用字体图标（Icon Font）而不是图片

另一个简单的但经常被忽视的保持 Axure 项目可管理性的方式是使图片的数量最小化。在一个原型中想要改变一个图片的颜色，你就不得不经过好几个步骤。你需要打开一个图片编辑器，对图片进行更改，再导出一个新的位图，最后导入您的 Axure 项目。

另一个选择是使用一个字体图标。一，你可以在 Axure 中改变颜色和图标的比例。一个很棒的基本的字体图标资源站是 http://copypastecharacter.com/ ，它的图标在很多平台上都能立即使用。

对于字体图标，你可以在一个按钮上添加一个图形，但是任然需要听从第一条建议。

十、在浏览器或是设备上预览原型

如果设计师得知他们的原型在 Axure 中和在浏览器中看到的不一样时，他们会感到沮丧的。尤其是文字的间距和位置不一样。更糟糕的是，它们在不同的浏览器中显示得也不一样。为避免差错，你需要在浏览器中不断地预览你的原型，如果是移动端原型则在设备上预览。

即使你永远不能消除 Axure 和浏览器之间所有的差异，下面有一些减小差异的方法。

文字环绕

下面是文字如何环绕：

下面显示浏览器如何文本换行：

为了防止文本框从环绕变成到了下一行，请确保你的文本框有足够的冗余空间。最安全的方法就是给文本框可能需要的足够大的空间。因此，如果将来你需要编辑这个文本，你将不需要改变文本框的大小，它将使用文字环绕的方式。

垂直间距

垂直间距可以看出浏览器和 Axure 之间的不同。你可以在 Axure 里微调间距，直到你发现文本在浏览器中看起来很好，但是这是相当努力然后换来了一个不确定的结果。确定文本位置的唯一方法就是要么 break up the copy into chunks ，要么把文字转换成图形。不幸的是，第一个选择打破了第一条建议，然而有时候它是不可避免的。

总结

从短期来看，这些建议很少能显示出效果，但是从长远来看，它有很多好处。也许更重要的是，缩短工作时间能使你工作更快乐。

我希望这些建议像对我一样对你们也是有帮助的。我相信，有人会认为其他的一些规则会更重要，我们很乐意听到它们，所以请在下面的评论框发表您的想法。

如果你还没有 Axure 的话，试试 Axure 7 测试版。一些变化真的有助于保持工作的组织性。

最后一点：这些规则，像任何其他的规则一样，是用来被打破的。不要让它们影响你的工作。聪明的设计师们，我们需要知道何时打破规则。

本文由 @沈晓马原创翻译，转载请注明出处并保留本文链接

原文地址： The Ten Commandments Of Efficient Design In Axure

（关注更多人人都是产品经理观点，参与微信互动（微信搜索“人人都是产品经理”或“woshipm”）

浅谈极简主义设计

Wed, 28 May 2014 11:38:41 CST

说到极简主义设计，相信网页设计师们都不会陌生，本期我们就从这方面说起…

起源

极简主义设计运动始于瑞士，然后被用于多种媒体：图形设计，建筑，音乐，文学，绘画，以及网页设计。

极简的网页设计的最终目标是帮助用户去快速的关注焦点，并尽快实现他们的目的。

概念

在最纯粹的样式中，还原其最基本的东西。

从一个视觉的角度来说，极简主义设计意味着平静和将思想带回本真。

极简绝不是简陋。

为什么要极简？

当我们被眼前多元化的图形和繁杂的颜色搅乱到找不到北的时候，重新回到最原始的画面，也许它像一张白纸，从最本质最原生的状态出发，足以让它生根发芽，甚至开花。

在这个浮躁的城市，周围越来越多的事物被简化包装、摒弃华丽的外衣，以它特有的低调、简约和实用，打动了用户的心。

极简的网页设计

极简的思维是现代网页设计的基础

极简的网站，往往会产生较少的CSS规范，HTML元素，镜像，JavaScript等等。这最终意味着增强了前端Web性能，进而提高了可用性和得到更好的用户体验。

大面积的留白，使图、文、底主次分明，更具有强烈的视觉冲击力。页面设计中整体运用极简设计手段，阅读省力和信息获取快捷，白的透气，可以让用户有很大的空间呼吸并保持欢快的情感进行浏览。

极简网页设计视觉呈现技巧

产品原型视觉转化

确定你绝对需要的内容

在一个列表里面，区分内容的优先级

给予你的列表绘制线框的草图以实验最佳的视觉层级

网页布局

排版布局中的平衡、对齐及对比关系，对页面视觉效果至关重要

如果画面效果头重脚轻，或者左右不均衡，会让用户感觉到压迫感，从而影响到浏览信息的顺畅

生动的排版

基于排版网站设计和极简主义紧密的联系到一起

当设计师乏于用别的方法激发用户，他们往往会利用有趣的排版。

用排版作为唯一的视觉元素你甚至可以走得更远

色彩的应用

色彩丰富会导致作品的多义性，会导致用户与用户之间的理解有差异。

极简设计使用原色，偏向明亮色和无彩色系中的白灰色，满足极简主义追求的简单明了的，将元素精简至原始状态。

另外从人对于世界的认知过程中来看，最早在儿童时期喜欢需要简单的、新鲜的、强烈刺激的色彩，随着年龄的增长，色彩感觉相应趋向于成熟和柔和些，对于色彩的理解差异也就越来越大。极简设计使用原色试图剔除时间因素对于色彩认知程度的影响。

色彩的应用——简约通透的白

白色，因其明度最高，无色相，明亮干净、畅快、朴素，永恒无暇，在自然界象征着极致的纯净与贞洁。

白色优雅、平和而简单，没有强烈的个性，因而网站设计中，白色具有高级，科技的意象，是永远流行的主色调。

轻快的白色可以给人很好的轻快速度感，运用得当可以让其它任何浅颜色及亮颜色呈现出其深度、明度和饱和度的不同，通过对比让其亮色更加明快、专注和舒适。

整洁、大空白的同时让用户保持欢快的情感进行浏览。

色彩的应用——精致高雅的灰

灰色也是极简主义网站设计的首选色彩，这类网站通常会选用浅灰色作为背景色彩，然后选用深灰色作为主要的字体颜色。

灰色与黑白照片、大量留白，还有一小段有活泼手写体的文字，给网站一种高雅的感觉

图形

以理性的几何图形或符号为表现形式，产生一种理性的秩序感，在此同时空间也被压缩至二维化，采用简单平凡的四边形或立方消隐具体形像传达意识的可能性

极简设计使用重复和均等分布的表现手法，减少元素的数量并且不以衬托的手法去突出某一个元素

极简主义是一种理性设计，其布局要求对于数学计算能力有一定要求，如网页设计中有栅格系统，每一个元素的位置都经过严密的计算，杜绝设计的随意性

文字

当图形简化之后，文字变的更为重要。一方面，文字有成为视觉元素可能性。另一方面，各种形式的文字可用于传达信息，比图形更为快捷和精确，如黑色文字为正文，灰色文字为辅助信息，蓝色文字为链接，红色文字为提醒类文字。

极简网页设计的一些思考

极简设计不等于简约设计

极简设计秉承了极简主义的思想，并以造型、色彩、图形和文字等视觉元素体现出来。极简设计与简约设计虽有形式上的相似性，但两者并不等同，简约设计是为了反对过度装饰而产生的，其范围更广，不可混为一谈

极简设计是趋势

极简主义可以是很漂亮的而且将会在未来几年内出现，所以学习它的一些技术会不能相信的有益，无论对你的客户或你自己的项目。

极简设计的悖论

极简设计作品品位高雅，摒弃陈俗和浮华，直至本质，却不适用于大众化设计，因为其形式去除了具有视觉冲击力的元素，这与一些商业目的相违背的。

原文地址：http://ued.focus.cn/wordpress/?p=2963

（关注更多人人都是产品经理观点，参与微信互动（微信搜索“人人都是产品经理”或“woshipm”）

用户界面设计原则

Mon, 09 Jun 2014 10:04:26 CST

“设计绝不是简单的拼合，排列甚至编辑；设计是通过阐明，简化、明确、修饰，使之庄严，有说服性，甚至带一点趣味性，来赋予其价值及意义。”——保罗·兰德（Paul Rand）

1.“明确”应该放在设计的首要位置

对任何界面而言，“明确”是首要的也是最重要的一点。人们必须能够辨别出它是什么，才能有效地使用你设计出来的界面。设计师们在设计的时候，要去关心人们为何会使用这个应用，去了解什么样的界面是能帮助他们与之互动的，去预测人们在使用时的行为并能够成功地反馈给他们。这样做了之后，界面中再出现的需要推理的地方以及延时反应都是可以被容忍的，但是绝对不能出现让用户困惑的地方。明确的界面能够给使用者进一步操作的信心。一个应用就算它有一百张页面，但是每一页都是清晰明确的，它也远胜于只有一页却不知所云的应用。

2.界面是为了交互而存在

界面的存在是为了让人和我们的世界产生互动。它可以帮助人们厘清，明白，使用，展示相互之间的关系，他能够把我们聚集在一起可以将我们隔开，实现我们的价值并为我们服务。界面设计不是艺术设计。界面设计也不是用来标榜设计师的个人。界面的功用和效果是可以被测量的。但是它们不是功利性的。优秀的界面不但能够让我们做事有效率，还能够激发、唤起和加强我们与这个世界的联系。

3.不惜一切代价吸引用户注意

我们生活在一个容易被打扰的世界。我们很难在一个不被干扰的环境中静下心来阅读。用户注意力是非常宝贵的。所以，不要在应用的周围丢一些容易令人分心的东西……

要把设计这个画面最初的目的时刻放在首位。如果用户正在阅读，那先让他们专心的读完之后再弹出广告（如果一定要放广告的话）。尊重用户的注意力，不仅仅会让用户感到高兴，你本身的设计也会收获好结果。如果在界面设计中，用户使用是首要目标的话，那么尊重用户的注意力是先决条件。要不惜一切代价保护它。

4.让用户掌控一切

人们会在自己能掌控的环境中感觉最舒心，最放松。设计草率的软件应用不但剥夺了这种舒适性，还会迫使人们面对毫无预期的互动，困惑的流程和意外的结果。通过定期的梳理系统状态，描述因果关系（如果你这个做了，就会被体现出来），并且在每一步操作都给出提示，让用户感觉每一步操作都在他的掌控中。不要担心说，这不是“显而易见”的吗？因为世界上从来没有显而易见的事情。

5.直观操作是最好的

好的界面是无意识的，就像我们在实际生活中直接操作的感觉一样。这并不是那么容易实现的，并且随着元素和资讯的不断增加，这就变得更难，所以我们设计界面来帮助我们去和它们互动。要想在画面上添加一个不必要的东西是非常简单，例如，加个华丽的按钮，镶边，图形，选项，偏好，窗口，附件和其它一些冗余的东西。以至于我们一头扎进处理界面元素细节的怪圈中而忽视了最重要的事情。取而代之的，你应该抓住直观操作这个最初的目标……界面设计要尽可能的简洁，更多的可识别的惯用自然手势。理想情况下，界面会变得非常细微，用户在会有直观操作的感觉。

6.一个页面一个主要操作

我们设计的每一个画面，都应给用户提供有实际意义的单一操作。这一点，令界面更快上手、易于操作，如果有需要的话，新增或扩充也更简易。如果一个画面上有两个或两个以上的主要操作，瞬间就会让用户感到困惑。就像写文章要有单一的以及强有力的论点一样，界面设计中的单个画面，也都应该有单一且明确的操作，这是它存在的理由。

7.让次要操作在次要位置

画面在包含一个主要动作的同时，可以有多个次要动作，但尽量不要让它们喧宾夺主！就像你写一篇文章的目的，是为了让人可以阅读可以了解，而不是为了人们能够把它转载在社交网络上……让次要得动作放在次要的位置，削减它们的视觉冲击力，或是在主要动作完成后再显示它们。

8.提供自然而然的下一步操作

很少有交互是故意被放在最后的，所以要为用户精心设计交互的下一步操作。你要预期用户下一步的交互是怎样的，并且通过设计将其实现。就像我们的日常谈话，要为深入交谈开一个好头。当用户已经完成要做的操作后，别让它们不知所措的停留在那……提供自然而然的下一步，帮助他们完成操作。

9.界面外观遵循用户行为

人总是对符合期望的行为最感舒适。当某人或某件事的行为始终按照我们所期望的那样去进行时，我们会感觉到和他们之间的关系不错。因此，设计出来的元素，看起来，应该像它们本身特征一样。在具体操作中，这意味着，用户只要看到这个界面元素，就应该能猜测出这个元素是做什么的。如果看起来是个按钮，它就应该有按钮的功能，不要在基本的交互问题上耍小聪明……把你的创造力留到更高层次的需求上吧。

10.前后一致的重要性

遵循上一规则，画面中，视觉元素的外观不应该是一样的，除非他们的功能相近。如果是功能相同或相近的元素，那么它们外观就应该是类似的，反之，如果元素各自的功能不同，那么它们的外观也应该不同。为了保持一致性，新手设计师通常在会把相同的视觉处理 (重用代码) 方式用在，应该用不同的视觉处理方式的元素上。

11.强烈的视觉层次会让效果更好

强烈的视觉层次会让画面有清晰的浏览次序。也就是说，当用户每次都用相同的顺序浏览同样的东西，微小的视觉层次令使用者不知道哪里才是需要注意的重点，最后只会让用户感到困惑和混乱。在不断变化的设计环境中，保持强烈的视觉层次是很困难的，因为所有元素视觉上的重量是相对的：当所有文字都是粗体，那就没有所谓的"粗体"了。如果要在画面中添加一个视觉强烈的元素时，设计者应该要重新调整页面上所有元素的重量分配，来达到强烈视觉层次的效果。大多数人都不会注意到视觉重量这一点，但它其实是强化（弱化）设计的最简单的方法。

12.巧妙的布局减轻用户认知负担

正如约翰前田（John Maeda）在他《Simplicity》书中所说的，恰当地编排画面上的元素能够以少见多，帮助他人更加快速简单地理解你设计的界面，因为你已经用你的设计清楚的说明了她们彼此之间的关系。用方位和方向上的编排可以自然地将相同的元素联系在一起。通过对内容的巧妙编排，可以减轻用户的认知负担，他们不再需要花时间去思考元素之间的关联，因为你已经做好了。不要迫使用户去思考……用你的设计直接呈现给他们看。

13.重点不要总是用颜色来强调

物体的色彩会随光线改变而改变。艳阳高照下与夕阳西下时，同一棵树，也会呈现不同的景象。在自然世界中，色彩很容易受环境影响而改变，所以在设计时，色彩不应该占很大的比重。作为辅助，我们可以用高亮的颜色，吸引注意力，但这不是区别这些的唯一方法。在长篇阅读或是长时间对着电脑屏幕的情况下，可以使用柔和的背景，降低亮度，当然也可用活泼亮丽的色彩当背景，但是要确保适合你的读者。

14.逐步说明

只在画面中显示必要的信息。如果用户需要作出决定，只要展现足够的信息供其选择，然后他们会到下一页去寻找更多的细节。避免一次呈现或解释全部的信息，如果可以的话，将选择放在后面的画面展示。这会使你的界面交互更加清晰。

15.内置帮助

在理想的界面设计中，「帮助」选项是没有必要，因为界面操作是有引导性的。「帮助」的下一步，实际上是，内嵌在上下文中的“帮助”，只有在用户确实需要的时候才显示，平常应该是隐藏的状态。让用户自己去寻求帮助，。重要的是你要保证用户可以顺畅的使用你的界面。

16.重要时刻：初始状态

第一次使用界面的体验是非常重要的，而这却常常被设计师忽略。为了让用户更快的上手，最好在设计的时候保持初始状态，也就是还没开始使用过的状态。这个状态不是一张空白的画布……它应该要提供一个方向和指引，令用户迅速进入状况。在初始状态下的互动过程中可能会存在一些摩擦，一旦用户了解了规则，那将会有很高的机会获得成功。

17.好的设计是隐形的

好的设计有一个奇怪的特性，它通常是会被用户忽略的。其中的一个原因是，一这个设计非常的成功，以至于用户完全专注在他想要达到的目标，而不是这个界面……当用户顺利的完成目的，他们会感到很满意，并不需要反映任何问题。作为一名设计师，这样会很困难……因为我们很少收到正面的回应，我们很少知道哪些设计是好的。但是优秀的设计师是满足于设计出好用的界面……并且他们知道满意的使用者通常是沉默的。

18.从其他设计领域下手

视觉，平面设计，排版，文案，信息架构和视觉设计……所有这些学科都是界面设计的一部分。他们都是可以被涉猎和研究的。不要企图跟他们划分界线，或看不起其他的领域：从学到学到很多知识可以帮助你的工作推动你成长，还可以从看似无关的学科学起，接触你不熟悉的领域……我们能从出版、编程、书本装订、滑板、消防，空手道中学到哪些知识呢？

19.界面的存在是为了被使用

在大多数设计领域，有用户使用就是界面设计的成功。就像是一个漂亮椅子，虽然漂亮，但坐起来不舒服，用户就不会选择它，它就是一个失败的设计。因此界面的存在就为了尽可能多的创造好用的环境让用户使用，就像你设计了一个好用的工艺品。设计师设计作品如果仅仅是拿来满足自己的虚荣心，那是远远不够的：它必须要被使用！

source:UI中国

（关注更多人人都是产品经理观点，参与微信互动（微信搜索“人人都是产品经理”或“woshipm”）

回归用户价值的体验设计

Mon, 06 Jan 2014 21:30:30 CST

2013年，用户体验设计开始重新回归到它的本质：为用户提供价值。这次回归，即有在iOS7引导的扁平化设计，突出界面内容弱化设计形式；也有在精益创业的假设验证，通过最小可用产品来尽早把握飘忽不定的用户需求。设计师们不再简单地重复做着画图的工作，开始把注意力重新投向真实的用户生活。

曾几何时，界面细节的丰富与否是评价它是否足够优秀的重要标准。软件的界面都是被纹理、材质、颜色、光感装扮起来的。这些靓丽的细节让软件的内容不再显得单薄。但是随着内容的逐渐丰富，华丽的外观反而开始与内容在竞争用户的注意力。扁平化就是这样一场革命。在苹果和Google的引领下，界面纷纷脱下了华丽的外衣，将简单雅致的素颜展示在用户面前。

精益创业风潮的涌起则打了很多创业者的巴掌。大家这才幡然醒悟，以往拍拍脑袋就开始规划产品功能，然后闷头赶上大半年再发布产品的工作方式是多么的背离真实用户。精益创业让设计师们认识到产品经理提出的功能很可能只是他的主观猜测。所有的主观猜测都必须被最小可用产品验证后才值得进一步为它设计好用好看的界面。这解决了产品经理和设计师之间素来已久的矛盾：产品经理不断改变产品的功能所导致的设计资源浪费。

借助精益创业的理念，产品经理和设计师得以在产品初期就频繁地接触用户，验证自己的想法。每一次将产品展示给用户，都是一次对主观猜想的磨练。如果用户不买单，果断地把产品转型就能帮助团队规避掉一条死路走到底的风险。同时来自用户积极的认可也能帮助设计师树立对产品的信心，愿意投注精力去用心打磨产品。

以往的体验设计主要服务的对象是“产品”。设计师用心设计出一个工具，确保用户拿到它就会使用，满足他们的需求。这就需要设计师考虑到在任何一个产品与用户的接触点上，用户的感知是怎样的，想要怎样操作这款产品。这种分析用户与产品接触点的思路也可以运用到服务设计上。服务与产品最大的不同是“服务不能被储存，即产即用”。在这样一个全新的领域里，设计师同样可以通过对用户的观察，打磨掉他在享受服务时会产生的任何毛刺。

当软件不足以帮助用户满足需求时，我们就需要硬件的辅助，去拓展向用户传递价值的机会。当我们为用户的某个需求寻找解决方案时，可以不必再受限于用户是否在电脑前，也不必再受限于手机的传感器了。软硬结合的解决方案在未来会展现出极大的想象空间。

当设计开始回归用户价值的时候，设计师也就变得比以前更加懂用户了。他们知道自己的付出将会转化成用户每天的欢笑，也就明白自己的价值所在。回归了真实的用户，设计师才有了话语权的底气。这段旅程，也才刚刚开始。

Human Center Design – 一种为用户创造价值的创新框架

Thu, 16 Jan 2014 23:22:19 CST

当我们想要去为某类人群去解决一个实际问题时，时常会陷入混乱。不知道这类人是怎样的，不了解他们的生活，不知道哪个点是问题的七寸，不知道自己YY的解决方案是否真的有效。Human Center Design是一套解决问题的思维框架，Acumen这家公开网站提供了这套方法论的培训课程Guide。

今年8月在成都出差时，我曾经和一位美国的同事召集公司内外的很多人一起用每周四的晚上3个小时学习它。我参与了其中“如何帮助青年成为社会企业家”的小组。当时第一次学习，一套流程走下来乱乱的，有很多点吸收的不够。所以11月在西安，我又召集了10来位同事一起重新学习它。这次五周的课程走完，才比较透彻地明白每个环节的价值，同时也发现了这个框架的诸多缺陷。待组织下一次Workshop时，试试改良后的。

1. Discover

在行动之前，我们希望能从诸多备选问题中寻找一个目标。这个目标必须是大家都比较感兴趣的。经过两轮投票，我们从十几个问题中选定了一个：

“如何帮助那些晚上不睡，早上不起的人早点睡觉”

针对这个问题，我们首先需要把我们所知道的真实的知识分享出来。这些知识需要涵盖这样几个方面：

什么样的人受这个问题困扰？
他们想早睡的愿望有多强烈？
他们现在尝试用什么方式解决这个问题？
哪些事导致了他们晚睡？

在把已知的知识挖掘并分享出来后，对这些问题我们还可以拍脑袋猜想一些答案。如果对某个问题既没有已知的知识，而且连猜都猜不出来，留空也可以。接下来我们可以把这些猜想和留空转换成第一次调研时所需要验证和发掘的对象。

由于我们对问题空间不足够了解，所以需要走出办公室去开拓视野。但人们有个坏习惯，总是倾向于去寻找能支撑自己已有观点的实例，所以切记放下已有成见，清空大脑去接受信息，尤其是超出自己预期的事。

做调研的方式主要有以下几类：

访谈受此问题困扰的人
访谈已经成功克服这个问题的人
去场景中自己体验这个问题
到其他面临类似问题的场景中观察

第4点最有意思。比如说你要解决火车站买票的插队问题，就可以去看看银行是怎么处理排队的。比如，我们这次就去医院观察了一下病人晚上的睡眠情况，这的确能够带来很多启发。

2. Ideate

通过各种渠道获取了足够的信息后，我们需要先分析出导致人们晚上不睡的原因，再有的放矢地去攻克。

首先，每个人会介绍一下在上周的调研中发现的故事。所有的听众在听的时候需要记下有启发性的信息写在便利贴上。待所有人把故事讲完后，我们会对贴在墙上的便签进行梳理，归纳出一些主题。这些主题就是等待我们去解决的挑战。比如，我们发现人们之所以晚上不睡觉，最主要有以下三个原因：

想做点事：白天都在工作，晚上才有时间做自己想做的事。但由于拖延症等原因，半夜也没啥进展，会觉得去睡觉是浪费生命，想再搞会儿。
身体不累：一整天都没啥体力劳动，也懒得锻炼，身体不会有疲惫想睡觉的状态。
想玩手机：躺在床上睡不着，无聊地想玩手机，刷个微博很快时间就过去了。

基于这3个归纳出的主题，我们将其转化为3个挑战：

我们如何能让人们不要做事做太晚
我们如何能让人们累一些，以促进睡眠
我们如何能让人们晚上不要玩手机

针对每一个挑战，我们会轮流脑暴想解决方案。这个阶段我们完全欢迎任何疯狂的想法。比如，甚至有人想到小偷偷换手机服务：每天下班公交车上，小偷会把你的智能机偷出来换成Nokia1100；第二天上班时会把你的智能机还回去；每天晚上诸多智能机会被拿去租赁给APP开发者做测试以盈利。所有颠覆性的点子一开始看起来都是可笑的，也是不能用既往经验去做评估的。点子可以尽可能都提出来，后面会再有专门的落地环节。大胆设想，小心求证。

最终罗列出来的点子会从可行性和创新型两个角度去做主观的评估，大致筛选出最有希望的几个，用于后面做出原型去测试其可行性。受限于时间精力，我们最终只选了两个点子去展开。实际上在这个阶段，用主观经验的辨别好点子的正确率很低，应该多保留几种可能性，都做做测试。

我们最终选择的想进一步展开做原型的两个点子是：

早睡基金：开发一种基金让大家投钱，早睡的人赢钱，晚睡的人输钱。
不能用手机：小偷偷换手机家政服务。

3.Prototype

做原型的目的是用尽量低的成本做出一个能够被检验的东西，拿给真实用户去测试，从而快速收集反馈。只要能够实现这一目的就行，不用急着去写代码。我们采用的方式是绘制故事板，描述出一个用户是怎样使用我们的新服务去满足需求的。在这个流程上的每个环节，在实施上都存在不接地气风险，可以先把自己的担心明确写出来，留待做用户测试时验证。

每向用户验证一次，都是主观猜想和客观实际的一次碰撞。使用原型进行低成本验证的好处就是，一旦发现之前的猜想不对，就可以立即转型，不用受太多沉默成本的羁绊。我们的两个idea在向客户展示来验证时都受到了极大的挑战，但经过几轮快速转型，也都变得有模有样起来。

一起来看看璞玉是怎么在没有写一行代码之前就一步步被打磨的吧。

方案1：

V1：开发一种基金让大家投钱，早睡的人赢钱，晚睡的人输钱。

反馈：把钱投到一家创业公司太不放心了，不敢用。

V2：请一家基金公司发布一种“早睡基金”，收益率随早睡时间上下略有浮动。

反馈：感觉变成以赚钱为目的了，会吸引很多人来Hack，故意捣乱

V3：和餐馆等商家合作，获取他们的优惠券。想早睡的人在周一选择自己喜欢的优惠券，保持5天早睡，就能获取优惠券。

反馈：sound great！

方案2：

V1：小偷在您下班路上把智能机换成nokia，第二天早上换回来。

反馈：成本太高太不靠谱了。

V2：在智能机里内置软件，晚上自动加锁，只能用来打电话发短信，和Nokia一样。

反馈：玩手机只是导致晚睡的原因之一，还有电脑、iPad呢。

V3：做一套智能锁，在电脑、手机、平板上都有，定时一起锁定。

反馈：听起来不错，可以试试哦。

4 总结

这个框架可以帮助我们在尝试去为目标用户解决实际问题时，可以做出更加接地气的创新方案。因为它包含两次对问题空间和解决方案的猜想和求证，所以可以既允许天马行空，也能收敛回生活。

但同时，HCD公开课里提供的这套框架也有诸多弊端，比如：

耗时5个晚上，提高了参与学习的门槛。
借助主观经验去评估筛选时太过粗略，极有可能会判断出错。
对知识的梳理没有结构化，有些散乱，也会导致不知道该调研些什么。
调研缺乏辅助，走出办公室面向真实的人时，自由度高的有些失控，后期不好整合。
偏游戏化，到Prototype阶段就停了，后期如何拆分功能、排期实现没有涉及。
如何融入到实际项目中？什么样的问题值得（或有必要）这样去投注精力？需要思考。

这些问题会在下一期的Workshop里加以优化。

5 动画演示

最后我们分别为两个解决方案做了广告动画演示，生动地讲述了这两项产品会怎样改变你的生活，先睹为块吧：

早睡基金（<– 这里是视频链接，hiahia）

手机锁(<– 这里是视频链接，hiahia)

产品原型应该做到什么程度？

Fri, 28 Feb 2014 17:47:03 CST

　　[导读]最近在对产品客户端进行了一次大的改版，修改的地方涉及产品的功能以及客户端界面。无论是功能的设计、改变还是还是客户端界面的改版。在立项前就必须经过一道道的关口。“互联网的一些事”推荐此文，为各位交互设计师提供参考。

　　最近在对产品客户端进行了一次大的改版，修改的地方涉及产品的功能以及客户端界面。无论是功能的设计、改变还是还是客户端界面的改版。在立项前就必须经过一道道的关口。尽管你是这款产品的产品经理，但是要对产品进程设计是需要经过评审，在立项到评审到最后的项目周期评估，你都必须要用到的是产品原型。因此对于产品原型，我有一些不大不小的感悟。

　　产品的原型有很多种形式，一般形式有基本的草图到线框图，再到绝大部分的功能交互都能实现高保真原型。这些原型在产品设计的每个阶段都是必须的。

　　产品的草图，通常是你的灵感所在，只要有笔和纸就能做到，这些草图一般画在你的笔记本或者一些空白的纸上面，据说很多产品经理身边都会带着纸和笔，特别对于那些对于产品十分执着的人，整天都带着问题去思考，遇到有灵感的时候，可以就此记下自己的想法。这些草图经过后续思考和测试后会形成基本的产品。什么是基本产品，基本产品就是只满足基本需求(可行性，可用性以及价值)的产品，去掉了任何一个元素，这个产品都是不完整的。产品的草图确定后，这个阶段还只是你的一个产品概念，在确定这个概念是否可行，你需要跟产品的技术人员讨论关于这个产品的可行性和研发周期，研发周期可能在早期的产品草图里还无法确定，因为一款产品能否成功上线，功能的研究还远远不够，其中还要涉及到产品的UI设计，产品的可用性设计等。笔者最近的一个产品改版，基本功能的增加和改变在开发的同事们看来都不算是很大的工作量，但是界面UI的调整有时候却要花费很多的时间。产品的可行性确定后，你需要向你的领导以及老板讲述你的想法，以争取更多的资源和让你的老板知道你的产品思路。因为在很多公司，你的产品想法必须要经过上层的首肯，毕竟资源是老板给的。给老板和你的上司看的原型图，最好是产品的草图或者是低保真的线框图。这样他们才能从战略层这样最核心的角度去想问题。对于你的上司，也就是产品总监，他通常是一个对于产品经验十分丰富的人，在产品这方面，他能提出很多十分有意义的问题，这时也是加深你对于你产品思考的一个好机会。

　　产品的线框图，产品的线框图用处不同的公司可能不同，笔者所在的公司，确定了基本产品后，你的想法就要向整个产品团队评审，在很多公司里这称为是需求评审。线框图的画图软件有很多种，有的产品经理用word画，有的用photoshop画，笔者用的是AXURE这款软件画的，工具只是为我们服务，能清楚的表达想法的工具就可以了。在这个阶段，功能的优先级会摆在重要的位置。产品是迭代的，你的功能优先级是怎样?在这过程中，你需要经过产品团队里成员的质问，你需要一一解答，有时候，遇到分歧还必须进行PK，如果有数据说明这个功能的必要性，这很好，但是通常，你要做的很多功能，没有数据支撑，只有需求。这个时候，你对于产品的理解和产品战略目标的把握就显得相当重要了。在产品的需求评审阶段，我最怕的事情就是，团队的某些成员就你所设计的一个按钮的位置或者文字提出一些意见，并且引起大家的讨论，这时候，产品经理要适当的将问题的重心转移到产品的需求上来，不要在需求评审上讨论过多的细节。否则会造成丢了西瓜捡了芝麻的结果。我在产品设计的过程中，很赞成jssses james garrett 所著的《用户体验要素》这本书的观点。产品的设计过程，必须是底层决定上层。因此讨论的过程中，产品经理要适当的引导并主持评审会。

　　确定了产品的整体思路后，高保真原型就势在必行。高保真的原型图的用途有几大方面，一、开发人员需要参与高保真原型图的设计当中，同时，他需要对这款产品的交付期作一个判断，而产品经理根据开发人员的判断，对于整个产品的周期做一个监控;二、高保真原型图还需要给你的总监以及老板看，让你的管理层知道真实的产品的样子;三、用于产品原型测试，把你的产品创意真正的传递到用户眼前。相对于写在纸上的产品设计文档，产品原型更加有效，因为这可以让所有的测试人员以及用户知道你的产品创意所在。

　　在制作产品高保真原型的时候，你需要密切的与产品交互设计师进行合作，以将产品设计的尽量的简单和易用。产品经理与交互设计师最好能在同一处的办公室办公，因为这样能方便对于产品的交流。在有些公司，产品的交互设计以及产品高保真原型通常也由产品经理来完成。高保真原型的制作涉及的东西更多，不仅仅只是核心功能的设计，有时候一个按钮是设计和文字的描述就很要命。相信很多产品经理都设计过一些按钮，如果一个按钮既要表达状态也要表达操作，那么这类的按钮是十分费神的。

　　高保真原型的制作软件目前较为流行的是AXURE，这款软件设计绝大多数的交互内容。并且使用起来也十分方便。笔者也十分喜欢。在完成高保真原型图后，你需要做的就是，可用性测试，也就是确定你的设计方案能满足用户一看就懂的基本需求。原型的测试有很多方式，如果某些产品已经拥有自己的用户群，可以直接在用户群当中进行测试，如果你的产品没有，那么简单点，公司的同事就是你的测试用户。在公司中，找出你的目标用户，用你的高保真原型图让她们用用。她们提供的一些建议，你会觉得获益良多。

　　制作一个高保真原型图很耗时间的。但是用户测试也是必须的，在产品还没有进入开发前做用户测试会让你的产品后续的逻辑更加清晰。无论是客户端产品还是web端的产品，能用高保真原型做用户的可行性测试最好还是用原型进行一次的测试。

　　产品原型，不同的阶段，不同的程度.

　　产品原型，不同的团队，不同的环境，不同的针对点，不同的程度.

　　本文链接： http://www.yixieshi.com/ucd/16283.html

　　===============关于互联网的一些事===============

　　 互联网的一些事 （ http://www.yixieshi.com ） —— 专注于互联网产品设计的媒体平台，报道互联网前沿资讯，分享产品设计经验、用户体验心得。为产品策划和产品运营人士提供专业的产品资讯文档，以及产品设计、策划、运营、交互设计、用户体验、电子商务信息、互联网创业信息、移动互联网等专业信息服务。

　　 官方微博： @互联网的一些事

　　 官方微信： 互联网的一些事(ID：imyixieshi)

　　如果您对互联网产品有独特的想法和见解，欢迎给我们投稿。投稿信箱：tougao#yixieshi.com （自行将“#”修改为“@”）

扁平和简约来袭

Wed, 12 Feb 2014 10:30:54 CST

　　译者注：本文作者 Adrian Taylor 是一位交互创意总监并且是 Pushstart Creative的创办人,专注于多种研究，如物理聚合、人机交互技术和品牌体验等。尽管他目前工作的重点是产品研发、战略发展、UX等，但是对pixels却一往情深。想了解更多可以去 designtaylor.com或者上 Twitter查找 Adrian Taylor。

　　原文地址： http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/

　　在过去几年里，软件和APP的界面设计风格发生了迅速变化，由3D、拟物发展到扁平、简约。尽管这一趋势普遍存在，我们还是思考下是如何发展至此的，以及它对整个界面设计领域有何影响。另外，我会分享扁平界面设计的一些技巧和注意问题。

Windows Phone 8 和 Apple’s iOS 7的用户界面

发生了什么？

　　那么，为什么群体意识从喜爱带纹理、有透视和阴影的设计转变喜爱扁平色彩和极简图形的设计呢？当然导致这一转变有很多因素，但是有一些因素更为突出。

信息过载

　　随着世界联系越来越紧密，我们不断地接受大量信息，一些信息是重要的、相关的，但大部分不是。我们不断地评估其价值，过滤无用信息，或创建新的内容，所有这些都使我们精疲力竭。还有，大部分内容消费已转移到小屏幕设备，更是加剧了超负荷现象。这样我们就很容易就淹没在信息中，砍掉用户界面（UI）的繁杂元素才是视觉设计的王道。

摆脱混乱: Geckoboard的设计使关键数据被一目了然呈现，并易于理解

简约就是金科玉律

　　同样有个趋势就是，颠覆性的网页应用和服务正提供高度专用化的工具，只设计少数功能。虽然传统软件开发员倾向于为产品加载过多功能，以期获得高价定位；但目前变化趋势专注于微应用，偏爱功能简洁。简单的应用意味着有简单的界面。

美观且精致：由Oak.设计的 Blue 天气应用程序

又一次，以内容核心

　　新设备和新技术涌入市场时，常常会出现这样的情况，我们热衷于思考于它们能做什么，我们又怎样才能提高交互性。但关注界面设计这一狂热之后又 回归专注于内容。媒体资源的消费，不论文字、音乐还是视频、音视频，等我们设备上最常用的活动，在你乐享其中时，肯定不希望被无关的界面元素打扰。

技术水平

　　随着智能手机和平板电脑已渗透到千家万户，显性操作正在逐渐减少。过去，如果弹窗没有从屏幕跳出来，我们曾担心用户会错过操作，而现在，我们更愿意让用户去探索这种细微的交互体验。鉴于此，很多互联网产品已经支持没有任何视觉引导的触碰指令。

Fitbit的仪表盘的视觉设计清爽,、胆大,和亲和力

技术的影响

　　大部分软件受限于运行平台。屏幕尺寸和像素密度也受限于硬件设备条件。一个简约的界面需要十分有限的设计元素，这意味着每一个元素都要有所发挥。排版布局和字体粗细在很大程度上决定了扁平设计的美观和易用性。

　　如果你的目标设备不能处理好这方面的细微差别，你就不太幸运了。随着屏幕尺寸和像素密度不断增加，更细、更小的样式也能呈现最佳的清晰度。当然，对 @font-face属性的支持，提高了对文字间距的集中处理，也增加了极简排版的吸引力。

Wallmob的市场数据监控应用：从任何一个有一个浏览器的设备上都可以检测到数据

响应式设计

　　随着各种尺寸联网设备的普及，交互界面变得更需要强调适配性，响应式设计也就应运而生。虽然响应式设计并不要求特定风格，但扁平的交互界面显然比其它样式要更容易处理。简约设计的另一种优势就是，能见降低页面重量和缩短加载时间。

无重量的响应设计: OnSite. ( 大尺寸展示)

勇于实践

　　好了，不唠叨理论了。让我们看看实践上的操作吧。设计一个有效的简约风格很具有挑战的。当你抛弃界面上那些花哨的装饰元素（下拉阴影，透视关系，纹理材质等），立马就会意识到剩余的元素关键且重要。以下几个技巧在设计中普遍很实用，特别是针对扁平UI设计：

开始设计之前

　　任何项目开始第一步，就是确保你选对风格。深入设计之前，确保风格符合目标用户的感知需求，适应目标平台、承载设备和应用类型。如果该方案风格与项目不匹配，那么接下来的导向则毫无意义。

流程

　　设计流程非常重要，无论选择何种样式！简约设计时记住以下几点：

　　1. 设计minimal界面时，我会从pre-pc时代寻求灵感，那个时候的艺术大师，用少量的资源做了大量的设计。例如：Josef Müller-Brockmann 和Wim Crouwel，重温这些大师的作品是很好的学习机会。但是有时我也会参考minimal画家的作品，如Ellsworth Kelly，建筑师，如Mies van der Rohe 和工业设计师，如Dieter Rams。

　　2. 放下工作，休息一下很有帮助。扁平和简约设计的一切均关乎到细节的差异。因此小憩片刻后再回到工作，带着全新的眼光工作，比长时间冥思苦想更有效。

　　3. 并排比较各个版式 同样有帮助。哪怕花20分钟前将一个线条下移各5个像素分别保存，对比两个版式就能很快分清孰好孰坏。

　　4. 由于实物展示的相对比例至关重要，所以要及早在不同的目标设备上测试。

　　5. 整个设计过程中不断问自己“真的需要吗？” 。支撑项目时候，找一些讨巧的办法，例如，添加一些有趣的元素、样式会这样会很容易也会很吸引人，但必须始终注意剔除不必要的元素，不断精简。甩掉你费尽心血的部分总是难以割舍，但修改过程必须挑剔。

Global Closet: 由 The Workshop为美国地理杂志教育板块设计的一个互动游戏

网格

网格在界面设计中扮演很重要的角色，这里也不例外。如果你想通过建立视觉规范使整个设计次序化、直观化，那么网格就很有帮助。

　　 1. 网格不仅仅能展现视觉次序。还可以使用网格划分内容和功能组。你可以不用总是使用直线或框划分对象组，其实简单的对齐和间距设置也能帮助用户理解界面结构。

　　 2. 试着打破网格的结构，突出重要的元素来吸引用户眼球。告别虚假的3D元素装饰后，实物比例和定位等基本布局原则就是展现视觉次序的关键。

　　 3. 尝试一下你不习惯的更密集的网格设计。当你大量减少视觉配色这些元素时，又会发现这种设计方式可以承载更复杂的结构，也不显得凌乱。如果你有想表达的额外的内容信息你可以单独放置。

Rossul 设计的 Live School iPad app

颜色

当然，颜色在视觉设计中角色很重要，对minimal界面更为关键。

　　1. 考虑更宽泛的配色方案。如果你们像我一样，那么就会明白相近的配色往往使界面功能性更强。而以强烈的宽泛的配色来设计就更容易了。现在是你发挥的机会，只用少量的元素，扩展配色方案会让你感觉很好。

　　 2. 设置配色方案时，测试所选色调要在很宽的色谱内进行，才可保证用明暗对比来表现画面。

　　 3.如果你想试试同系配色和鲜明对比。要及早测试配色，以确保微妙变化和高对比度元素都能有足够的选择空间。

TriplAgent‘的视觉设计使用了丰富的配色

文字排版

以内容主导的扁平式网页而言，文字排版就是大英雄，功不可没。

　　 1.衬线是一种选择，无衬线则会显得更干净。

　　 2. 在品种繁多，粗细和样式各有差别的字体系列查找你需要的字体。当然不是使用全部，而宽泛的选择帮你更准确的定义出层级关系，同时你也会发现某些字体会更适合特定环境。

　　 3. 不要顾忌把大小和粗细差别悬殊的字体搭配在一起就一定会造成视觉凌乱。用超大、超细的字体做标题而用中等粗细的小号字体做正文其实也是一种尝试。

　　 4. 要注意字体便于阅读。我知道听起来可笑，但人们会对你选择的字体产生很多质疑，所以确保按任何比例缩放时均能阅读

Siteleaf的设计，文字呈现干净且易读

交互

在扁平设计中，证明元素的交互性会显得很棘手。这是我采用的几个方法。

　　 1. 对比很关键。如果构图留白比较多，你可以给可操作元素一点彩色；如果是文字为主，可以使用简单的配图；如果标题是大号小写字母，链接可以用小号大写字母；就是这个意思。

　　 2. 传统布局也很有用。如果你要放置一个返回按钮，那就将其放置在用户期望找到返回按钮的位置上，左上角。

　　 3. 当页面堆叠更多功能时，把每个交互元素设计成按钮没意义。界面尽量设计直观一些。但如果交互特别复杂或者出乎意料，提供简单的错误恢复功能。

　　 4.下拉框、模式窗口、弹出框等层级元素在扁平设计中一般比较难处理。而对鲜明的对比、边框、着色的处理，也能从视觉上区分出交互层级。

简洁的构图和鲜明的对比: Taasky.

总结

我不相信设计有固定规则可循。看到设计师呕心沥血只为构建干净、简洁的用户界面，实在令人叹服。扁平就真的不需要渐变和阴影了吗？当然不是。实际上我见过最引人兴趣的工作，是那种能明智的呈现内容、同时能够保持交互直观性和平衡维度。

在我们这个高度联系、资讯丰富和功能齐全的数字世界里，简约设计又重新广泛兴起。而它并不能解决一切，但如果考虑周全、应用得当，也同样能给我带来易用和愉悦的数字体验。

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=7951)

手机产品交互体验评估方法

Fri, 07 Feb 2014 09:46:16 CST

　　一、评估的目的

　　交互设计是一个迭代过程，通过交互设计评估，可以及早发现设计中缺陷，进而能进一步完善交互流程。通过评价，也可发现交互设计中可行、友善、合理或优秀的地方，从而为后续产品的交互设计提供借鉴。

　　二、评估的标准

　　手机产品交互设计的评估标准还是是否满足用户体验，当然，体验是一个很虚的东西，没有一个具体的量化标准，那我们就落在实处，从可以量化的维度打分。具体从那几个维度入手，我认为可以分为如下几个，见图1：

图1 交互体验评估维度

　　1、产品架构是否清晰

　　无论是九宫格式的架构还是标签页式的架构，都需要让用户一进入产品，就可以一目了然的知道产品是干什么的，有几个功能模块，模块之间怎么切换。

　　同时，产品层级较深的，设计师要清楚的了解有产品有多少个二级页面，多少个三级页面。这些二级页面和三级页面的架构，是复用一级页面的，还是有自己的架构。

　　有如下几个评估标准：

　　产品结构清晰，没有不必要的层级

　　能快速了解产品有几个主要页面

　　所有主要部分都能够通过首页访问

　　清晰的指示了当前的位置

　　2、产品流程是否清晰

　　要想表现层越简单，背后的逻辑层可能就越复杂。那么我们评估流程的时候，不是以背后的逻辑层复杂度来评估，而是以表现层的简洁度来评估的。比如说一个发布帖子的流程，总共需要几个步骤，涉及到几个层级(一级页面到二级页面到三级页面…)。当然，不是说步骤越少、层级越浅就是好的设计。而是要简单、明确、清晰。没有不相关的干扰分支，没有经常会出现的误操作，没有提顿思考的空间，没有操作之后无反应的疑惑。

　　有如下几个评估标准：

　　明确产品有几个主要的任务流程

　　每个任务流程清晰，没有太多分支

　　任务流程符合用户操作流程

　　用户可以取消正在执行操作

　　操作成功或失败都有明确的反馈

　　在每个层级，都可以找到回到上一级的方法

　　预防出错，如出错要帮助用户从错误中恢复过来

　　复杂的交互是否有很好的引导和帮助

　　3、控件使用是否准确

　　手机产品涉及到很多的控件。一级标签栏、二级标签栏、列表、按钮、对话框、提示框、发布框等等，这些控件使用的是否到位，是衡量一个设计师细节设计能力的重要标准。比如说两个二级页面都需要二级标签栏，如果你设计出来两个样式的话，那么说明你没有用控件的思想来做设计，不仅设计师要设计两套二级控件，程序人员要重复劳动，用户也会疑惑这两个控件是不是同一个含义同一种操作方式。再比如说，这个二级标签栏，它的从属内容是否在样式上跟他有从属关系，这个细节，如果不把握好，用户很可能把这个二级标签栏看成了按钮。

　　有如下几个评估标准：

　　控件使用准确性(比如是否混淆了单选框和复选框，对话框层次过多等)

　　控件的复用(比如两个页面都用到tabbar，不用设计两个)

　　控件的状态(比如不可点状态、可点状态、按下状态、长按状态)

　　链接色的准确使用

　　焦点状态的准确使用

　　4、信息传达是否到位

　　信息传达包含产品文案引导、按钮文案设计、列表文字布局、内容页排版、提醒文案设计等等。文案的梳理，有些公司是专门有内容编辑来做的，但是大部分公司，都是产品经理或者交互设计师直接完成的。那么文案是否准确，是否能有效的传达意思，也是衡量交互设计的一个重要标准。文字长度限制、特殊情况处理是否考虑到位，也是衡量设计师工作的基准。而列表文字的布局、内容页的排版，则是信息布局的重中之重。

　　有如下几个评估标准：

　　布局清晰

　　文案简洁

　　没有术语(比如“拉取失败”这种文案)

　　合理排版(标题、作者、时间的字号、字色，页边距的运用)

　　标签和内容的从属关系(能否看出当前标签页，和当前标签页的从属内容)

　　三、评估的方法

　　交互体验评估还没有一套成型的方法，传统的评估都是靠直觉经验，那么能否通过探索共性，转化成一种科学的有效的评估方法呢?

　　传统的方法有：实验方法(随机和重复测试)，监测方法，调查方法等。

　　科学的评估方法：

　　1.设计原则评价(guidelines Evaluation)

　　为自己的部门或者项目写一个设计原则，从架构、流程、控件、内容等多个维度来构造一定的设计要求，一套成型的设计原则诞生之后，可以让设计师在设计过程中进行自我评价，也可以让设计师完成设计之后交付其他设计师进行协同评审。

　　2.启发式评估(euristic Evaluation)

　　启发式评估是指少数几个评估者检查界面，并判断界面是否符合公认的可用性原则。

　　具体的方法见 Jakob Nielsen写的How to Conduct a Heuristic Evaluation一文，中文翻译见初心不忘翻译的如何进行启发式评估。

　　3.可用性测试(usability Testing)

　　测典型用户执行典型任务时的情况，测试指标包括用户出错次数，完成任务的时间等。典型的可用性测试是在实验室环境中进行的，被测试人员受到评价人员的密切控制。可用性测试主要是量化用户的执行情况，测试的结果通常被表示为统计值。

　　具体的方法见小胖翻译的了解可用性测试。英文原文链接已经挂掉。

　　四、评估的结果

　　可以产出一份详细的评估报告，分别阐述四个维度上，交互设计中存在的亮点和问题，亮点加分，问题扣分，最后绘制成蜂窝图，如图2。四个维度的分加起来除4乘10是最后的总得分。

　　图2 交互体验评估结果蜂窝图

　　最后总结一下，体验是一种很虚的东西，难以靠数值量化出来，就如同情感无法量化一样。所以本文旨在提供一种客观一点的思考方法。

　　本文链接： http://www.yixieshi.com/ucd/15941.html

　　===============关于互联网的一些事===============

　　 官方微博： @互联网的一些事

　　 官方微信： 互联网的一些事(ID：imyixieshi)

　　如果您对互联网产品有独特的想法和见解，欢迎给我们投稿。投稿信箱：tougao#yixieshi.com （自行将“#”修改为“@”）

交互式UI设计指南

Fri, 07 Feb 2014 09:52:10 CST

　　Web开发社区有着大量的交互式设计轻松解决方案。虽然现在大多数网站都能够做到交互性了，但是我们需要不断向前、创新。我们很容易将注意力集中到编码方面，但是有时候不同屏幕尺寸的实际设计考虑却往往被忽视。

　　很多交互式设计学习资料都谈到了基础的方面，比如利用桌面的多余空间，使手机上的显示更简单。然而，很多东西没有超出这些基础知识。随着各种尺寸屏幕的出现，我们需要进一步思考设计和用户体验这些方面。

　　1.桌面

　　大多数用户体验原则都是有关桌面网站的。市面上用户多使用键盘，触摸板，鼠标，这使我们有更多的设计可能性来坚持优质的用户体验。然而，我们仍然要坚持一些指导原则，交互式设计方案就能够保证我们的设计在不同的屏幕尺寸之间完美切换。

　　桌面设计有以下几点考虑：

　　• 延展式网格设计，这种设计能够让用户轻松找到感兴趣的内容 • 水平式导航，子菜单，大下拉菜单来轻松过滤内容 • 交互式和延展式页面更适合桌面式网站 • 为广告，侧边内容，额外介绍，电话应答留下足够空间 • 导航条可以用来引导用户点击，但在小屏幕上不适合用 • 掌握了解新的技术，包括那些能够影响设计和用户体验的 • 宽的页脚，页边等等

　　网站应该利用桌面强大的可扩展性来给用户提供更多选择。在用户使用过了手机或者平板应用之后，他应该被引导去使用桌面版应用，这样才能获得更多的功能和更完善的用户体验。

　　从用户体验角度来说，一定要确认桌面设计是弹性化的，可以在不同屏幕尺寸大小之间无缝切换，并同样拥有键盘等传统桌面操作功能。上网本虽然没有以前那么流行，但是同样需要考虑其体验，它同传统电脑比只是尺寸上小了一点。

　　2.平板

平板电脑越来越流行，而且平板电脑很可能不是一个瞬间即逝的流星，它将作为一个新的网络交互的发展趋势长时间发展下去。所以在做平板的用户体验时我们一定不要把它的设计理解为”第二名”的桌面设计。它的设计完全可以独立于桌面设计，我们应该独立寻求新的用户体验交互方式。

　　平板电脑的最大特性就是触摸性。这要求我们用新的方式去开发新的用户体验。然而目前很多用户仍停留在基本的上网、点击上面。所以我们有责任去开发越来越多的触摸式用户体验。

　　需要考虑的几点：

　　在平板开发时我们一定偏像app意识的开发、设计，尽量不去贴近桌面设计：

　　• 更大的触摸空间，尤其是导航键。能用一只手指头操作，这在平板开发中太重要了。

　　• 标签栏、折叠式菜单在触屏式设计中尤为重要。因为这样能够节省大量空间。而且不要只是仅仅把它们用在侧边栏上，而是把它们融合到整个网站上。 • 千万不要认为平板设计只是把桌面网站设计整体缩小简化，否则你将会失去很多实用性。 • 用按钮或者按钮类设计来完成简单操作，比如链接。 • 不要认为所以用户跟你用同样牌子的平板，甚至要考虑作出后退前进的按钮来。 • 设计应该针对视网膜显示进行优化，虽然目前只有iPod拥有视网膜显示，但是我们不得不承认大多人还是在用iPod的。

　　3.手机，移动端

　　节省空间不得不说是最重要的。在开发时同时要永远记得，可能一个桌面用户更倾向于网站的功能性，交互性，然后一个移动用户更多的只是为了看到内容，做一些简单操作，但一定要快。

　　除了大的触摸屏按钮设计需要考虑外，移动手机端开发应注意以下几点：

　　• 使用最简单的交互方式，尽量减少额外的功能性。让用户集中在最重要的操作上。 • 对于内容很多的网站，尽量将过滤器做的友好，用户不喜欢在屏幕上敲字，最好能够让他们直接选择一些分类类别。 • 尽量用最少的设计展示自己的网站，别占用太多功能性区域。 • 大点的字体和更好的类型显示。尽量不要让用户放大放大再放大! • 在一些大块内容前加摘要，从而方面他们删选内容。

　　• 标签，伸展式菜单，导航永远都很重要! • 尽量不用弹出框，通知，广告，如果有请尽量做得友好。 • 如果可能，尽量保重移动端网站上一直保持最少数目的页面。当然这个不是在所有的网站上都通用，但是如果考虑到，最好用javascript开切换内容，避免过长内容。

4.结论

　　平板和手机用户预计将在2015年超过桌面用户。考虑到这点，我们不仅仅需要学会交互式设计。我们更要对三种不同平台的设计拥有不同的设计理念，但同时也要保持不同平台间的一致性。我要记住图片显示要友好，触摸方式也要有好，内容显示要合理。当然，最大的问题就是解决不同屏幕尺寸之间怎么组织和显示网站内容。

　　本文链接： http://www.yixieshi.com/ucd/15942.html

　　===============关于互联网的一些事===============

　　 官方微博： @互联网的一些事

　　 官方微信： 互联网的一些事(ID：imyixieshi)

　　如果您对互联网产品有独特的想法和见解，欢迎给我们投稿。投稿信箱：tougao#yixieshi.com （自行将“#”修改为“@”）

综合下拉菜单：下一个网页设计趋势

Wed, 26 Mar 2014 17:54:17 CST

就目前而言，“综合下拉菜单”这种设计模式还是相对少见的。但是我确信，不出半年，它将会普及开来。

什么是的 “ 综合下拉菜单 ” ？

大型网站的导航系统一直是一个难点。当然你可以试图创建一个庞大的站点地图一样的导航菜单来链接到所有的页面，但是实际上，当页面越来越多而且不断增加的时候，这种做法将会变成一个不可能完成的任务。

一般情况下，设计师会有两种做法：

1.设计一个轻巧简洁的主导航菜单，链接到各个主要的页面，并在主要页面上添加附加的导航菜单，以便链接到更深的层次。这种方式很容易实现，可用性也不错。但是如果访问者想要看到的页面藏得比较深，那么就只好多点几次鼠标了。

2.采用动态下拉或展开式菜单，这种模式可以让访问者无论在浏览哪个页面时，都可以直接到达另外更多的页面。它提供了一种快速导航的模式，然后，在可用性方面，如果访问者的浏览器没有开启JavaScript的支持，他们有可能根本就看不到下拉或展开的菜单。
( 仅用 CSS 实现的下拉菜单也是可以实现的，但是 :hover 这个鼠标悬停的伪类并不是每个浏览器都能完整支持的 …… 比如 …… 万恶的 IE6 ！ )

综合下拉菜单，则是上面两个模式的一种折衷方案。它的效果类似Microsoft Office 2007里的Ribbon菜单。

( 示例： Office 2007 Ribbon)

( 示例： actionenvelope.com)

综合下拉菜单有哪些特点？

通常，一个综合下拉菜单:

1.是一个通过鼠标悬停感应来展示和隐藏的下拉菜单。

2.在一个较大的面板上显示所有的项目。

3.这些项目根据相关性进行了分组排列。

4.使用图标和图形来帮助访问者更好地识别项目。

为什么综合下拉菜单会流行？

有很多理由可以预示综合下拉菜单将会在许多网站成为主流的设计：

1.它提供了在简单导航和复杂的动态菜单中的一个折衷方案，既不会显得信息量太少，也优化了信息结构，不会显得太复杂而难于访问。

2.它实现方便，仅需考虑到极少的可用性问题。

3.它给了设计师更多的空间和视野来发挥自己的创意，而且通常看上去都很吸引访问者。

或许更引人注目的一点是， web可用性专家Jakob Nielsen也推荐使用综合下拉菜单！一般来说，他对很多新的web控件、模式都持批评态度，但是这次他也认为综合下拉菜单是一个好的模式，并建议设计师们可以尝试使用这种模式来增强自己设计的网站的导航系统。

你怎么看？综合下拉菜单会变得无处不在吗？你是否在使用他们了呢？还是说你会在你的网站尝试一下呢？

via Mega Menus: the Next Web Design Trend by Craig Buckler

微信号：woshipm，干货天天推荐，欢迎关注

IT瘾交互设计推荐

交互设计师怎样做竞品分析？

什么是竞品分析？

为什么要做竞品分析？

如何做适合交互设计师的竞品分析？

竞品分析内容包含哪些？

1.竞品概况

2.功能与流程

3.使用体验

4.交互体验

错误信息提示在表单中的最佳位置

表单上方的有效性 VS 内部的有效性

错误信息提示位置的用户偏好

输入框右侧是最佳区域

输入框左侧是最差区域

输入框的上方增加识别负担

错误信息提示在移动端表单的最佳位置

输入框的右侧 VS 输入框的下方：哪个是最佳位置？

直觉的错误信息提示位置

用3天时间设计一款完整的APP作品

项目背景

设计挑战

第一天：资料收集

研究方法

用户调研

市场调研

头脑风暴

用户画像

竞品分析

方案思考

第二天：草图和设计

第三天：交互原型

后台产品的容错性设计

交互设计七大原理

抓住用户注意力的10种交互设计小技巧

1.分层界面设计

2.扁平化的界面

3.社交媒体整合

4.从社交媒体登录

5.善于使用空格

6.使用素雅的、简单的颜色主题

7.使用左右横扫的手势操作

8.在了解你的用户后再开始设计

9.方便拇指操作

10.实体或描边 icon

7大网站设计趋势

手势取代点击

彻底淘汰网页折叠线

操作更快捷 网站更简化

像素的消亡

动画的逆袭

组件即是新框架

社交媒体的饱和度与邮件的崛起

出彩新秀：CSS 形状

2015 看点

以场景为中心的产品设计：突破你的大脑然后像用户一样思考

浅析数据化设计思维

让你事半功倍的交互体验自查清单

体验清单起因

体验清单如何设计

总结

windows 10 新特性变化研究

一.自动选择默认桌面

变化分析：

二.开始菜单回归

菜单演变过程：

变化分析：

三.智能分屏

变化分析：

四.虚拟桌面

变化分析：

五.Metro应用桌面窗口化

变化分析：

六.窗口自适应

变化分析：

七.通知中心

变化分析：

后续对通知中心的猜想：

八.强化全局搜索

变化分析：

操作更快捷网站更简化

一、什么是用户模型？

二、为什么要创建用户模型？

三、什么时候可以用到人物角色？

四、如何创建用户模型（人物角色）？

一、加强体验舒适度