卡片式设计对于我们来说并不陌生，从设计类网站上或市场上的一些 APP 中也会看到很多的卡片式设计的案例，卡片式设计也是 UI 设计中最常用的方式之一。 来源于日常在现实生活中的卡片式设计可以说是无处不在，例如身份证、交通卡、银行卡、名片、便利贴、扑克牌、游戏卡……诸如此类的生活常见品都是以卡片的方式存在，其共同点都使用一个容器承载着内容，并且具有「便携性、信息简洁和相对独立性」。 UI设计中卡片的使用场景1. Feed流卡片式的 feed 流设计是一种非常常见的设计，早在前几年 Facebook、Google+ 等产品就使用了这一方式，Feed 流作为一种长内容的媒介，用户需要长时间的滑动看内容并筛选有效信息，卡片式设计很好的解决了内容与内容的区块分隔，让用户在长屏幕滑动中依旧可以很好的明确识别每一块的内容。 实际案例-淘宝微淘 瀑布流设计瀑布流的出现让单屏区域内显示更多的内容，而内容较多的情况下，使用卡片式设计可以较好的对内容进行了区域划分，让上下左右的内容从整体中具有相对独立性。实际案例-Pinterest 左右滑动组合型内容卡片式设计具有较强的层次感，相比 ...

  之前提到过交互设计师的职责，现在来具体说一下交互设计师的工作内容和产出。   交互设计师的工作，不仅仅是输出设计方案，还需要参与前期的需求讨论、后期开发、测试验收等等产品设计与实现的多个环节。拿到一个新的项目需求后，从设计思考开始，产品前期分析，设计产品，设计评审，用户测试，直至产品上线。项目展开的过程中，必然会产生一些输出物 需求分析阶段需求分析是软件计划阶段的重要活动，也是软件生存周期中的一个重要环节，该阶段是分析系统在功能上需要「实现什么」，而不是考虑如何去「实现」。需求分析的目标是把用户对待开发软件提出的「要求」或「需要」进行分析与整理，确认后形成描述完整、清晰与规范的文档，确定软件需要实现哪些功能，完成哪些工作。此外，软件的一些非功能性需求（如软件性能、可靠性、响应时间、可扩展性等），软件设计的约束条件，运行时与其他软件的关系等也是软件需求分析的目标。 越是高阶的交互设计师，越要有产品思维，越要从产品全局、产品源头去考虑用户的诉求。所以这个阶段虽然是产品经理、产品设计师更偏重的知识点，但作为交互设计师也应该逐步积累这方面的技能。 用 ...

场景一自适应与响应式都是什么，又有什么区别？很多人会对响应式布局和自适应式布局产生混淆，确实他们的原理是非常相似的，都是检测设备，根据不同的设备采用不同的 css。 至于他们的区别，有个很简单的方法：同一个页面在不同尺寸的屏幕上访问时，看网址是否一样，只有一个网址为响应式，有多个不同的网址为自适应。另外的区分点是：是否需要一对一的设计界面，是则为自适应。例如下图： 自适应与响应式选择用哪个？如果页面功能不多，用户交互少，不需要经常升级，响应式设计从运营的难易和维护的便利性考虑会更好，只要搞定网页端，其他的也都搞定了。如果从页面个性化多功能方面考虑，自适应设计更合适，因为这样可以更好地为用户提供功能全面，体验更好的界面。例如功能复杂、用户交互频繁的网站、电商类网站，用户量较大的网站选择自适应更合适。 场景二做响应式页面的条件是什么？响应式可以响应的前提有两点： 页面布局具有规律性，必须建立灵活的网格基础，元素宽高可用百分比代替固定数值；网页图片必须是可伸缩的（页面中图片不固定宽/高）。这两点也是栅格系统本身的典型特点，所以利用栅格系统进行响应式的设计是顺理成章的，也比较高效快捷，所以响应 ...

  框架是整个或部分系统的可重用设计，表现为一组抽象构件及构件实例间交互的方法。   这是官方的定义，翻译成人话就是搭建一个产品能够使其可拓展，规范化，有条理，可快速迭代优化的方法。好像还是不好理解，举一个通俗易懂的例子：假如现在有个空房子，要重新改造它，那么首先要考虑的就是其房间结构（也就是框架），比如要设计几个卧室，几个客厅，分别占多大面积，在什么位置等等（信息架构）；然后还要考虑如何设计门和窗户，怎么能够在不同房间互通（导航方式）；接着再思考每个房间里面分别需要怎么布局，分别需要哪些家居和电器，具体在什么位置（页面结构）；然后再不停的细分下去，直到考虑全每个细节，那么一个产品完整的框架就基本上搭建出来了~   理解了框架的概念后，可能还是会有疑问：为什么要做框架设计？   还是上面房子的例子，假如不考虑房间布局，随心所欲地将家具和电器到处摆放，将卧室放在房子的最里面， 需要依次穿过客厅、厨房、洗手间才能到到达；将马桶放在卧室，把床放在客厅，把厨具放在洗手间，把衣柜放在阳台，把洗衣机放在厨房……各位可以 ...

  日常工作中，经常听到交互和视觉同学有着如下对话： 视觉同学：「这个内容我想换个位置，可以吗？」「我可以用另外一种布局方式嘛？」… 交互同学：「你这里的表达有些歧义，用户容易误解，需要修改。」「这里层级关系不太对，应该更强调XX内容。」…可以看到，无论交互还是视觉同学的提问，其实都是围绕「信息」表达的逻辑。视觉同学设计过程中，应该如何理解交互稿件，并进一步体现交互的层级逻辑？是否可以对交互稿的布局进行调整发挥？通过案例来一起看看。 目前，页面类设计一般分为运营型和平台型。 运营型关注重点：「活动利益点」「模块内容顺序」「视觉发挥空间大」 活动页设计中，信息的层级表达相对简单，一般分为主氛围图-体现活动主题、内容展示区-直接转化、尾部兜底区-相关扩展。这类型需求，重点在理解交互稿中主题的表达、内容区的分类及重点元素体现。视觉设计师在该类型的设计中，发挥度是很大的。 平台型关注重点：「层级结构」「浏览顺序」「视觉在信息逻辑之上发挥」 平台类设计项目，交互设计师通过页面框架、模块设计来表达产品/运营的策划思路，涉及内容及模块更多，且包含着复杂的逻辑关系。一个优秀的平 ...

  在互联网和信息化高度发达的今天，我们都是B端和C端产品的用户，能切身体会到产品的好坏，那么两个完全不同类别的产品放在一起时，会有什么新发现呢？ C全称是Customer即消费者（泛指用户）的产品，个人用户或终端用户，使用的是客户端。例如：微信、网易新闻、网易云音乐、有道翻译官、网易考拉等等。 B全称是Business即商家（泛指企业）的产品，通常是企业或商家，为工作或商业目的而使用的系统型软件、工具或平台。例如：京东云、阿里云、网易云、网易有数或企业内部的ERP系统等等。 相同点都要给人使用小到打车、外卖和购物软件，大到逻辑复杂连产品经理有时候都犯糊涂的企业级业务系统，无论你个人用户、还是企业用户，本质都是由人来使用，只不过产品类型不同罢了。 都要兼顾用户体验和业务之间的平衡既然是给人来使用的产品，就要兼顾用户体验和业务之间的平衡。无论是C端orB端，谁都不愿意使用一个不好用且耽误效率的产品，当然还是会有一些用户体验较差，用户又不得不使用的产品存在，因为它可能具有一定的垄断性质，或者在某些场景下被强迫使用，用户本身是别无选择的。但不能说用户体验就不重要，只能说对 ...

  分析产品，很多人认为这属于产品经理的工作，但实际上 UI 设计师也离不开使用产品分析的技能来处理日常的工作，以及提升自己的产出质量。 产品分析是什么产品分析，顾名思义，就是对某互联网产品，进行系统的、多纬度的分析，并最终完成一份逻辑清晰，符合客观事实的商业报告。 为什么需要这个报告？那是因为对于工作的决策来说，获取越多有效的参考信息，就越能帮助做出正确的选择。举个例子，如果我准备做一款针对定制奶茶外卖的 APP，那么就要了解这样的 APP 产品通常有哪些模块和功能，通过 APP 下单的流程是什么样的，以及用户更喜欢什么样的设计或者交互。这时候，光靠我自己脑补是没用的，我得分析同行或者相关外卖 APP 产品，才能得到明确的结论，然后作为依据开始设计我自己的产品。 有时候，在面试或者客户谈判之前，有认真地分析过对方的产品，那么在沟通过程中就可以让的处境更有利，能进行更有质量的沟通和探讨。 产品分析的好处很多，不仅能帮助解决当前的问题，也可以帮助设计师锻炼自己的逻辑思维能力，产品能力以及业务能力，是升职加薪的必备技能。 产品分析的目标接下来，可能很多同学已经忍不住摩拳 ...

  在做交互文档之前，我们先要明白什么是交互文档、为什么要做以及做了给谁看。 什么是交互文档交互文档，即交互设计说明文档。英文 Design Requirement Document ，简称DRD。主要是用来承载设计思路、设计方案、信息架构、原型线框、交互说明等内容。 为什么需要交互文档有些人可能对文档这种东西比较反感，尤其是从事工作不久的朋友。其实工作得越久，越会发现文档的重要性，它可以帮助你理清思路，并记录下来，便于回顾。 工作上而言，有一份规范的文档可以让你的设计更有说服力，也易于工作对接，提高彼此之间的沟通效率。 交互文档给谁看的交互文档其实要说给谁看，其实具体情况具体分析。有的公司老板也要盯交互文档，以及甲方爸爸、运营部门同事，都有查看的可能。 「产品经理」产品经理与交互设计师可能是沟通最多的人，产品经理主要在文档中确认设计思路和业务流程，然后过一下页面交互模块。 「视觉设计」UI设计师通常最关注的是页面交互模块，有着产品思维和体验思维的设计师也会仔细看一下设计思路和产品背景，以便于自己更了解产品业务逻辑和用户心理。 「开发人员」前端的开发同事和UI设计师 ...

  作为设计师，首当其冲的就是界面的设计效果，但真正能拉动用户多次使用你的产品的核心并绝对是界面的美观度，而在心理。这里就包括我们今天要说的心理认知的其中一种，叫做「酬赏」。听到这个词，大家可能觉得就是奖品，其实不然。给大家举一个例子，现如今国民大妈大姐买实惠的软件：拼多多。这款产品为什么能很好地不停地调取新用户，并留住老用户，就是因为它很好地运用了刚才提到的「酬赏」。 但酬赏方式又分很多种，并不是单纯发个红包、发个代金券这么简单。在「酬赏」方式中，存在三大原则，下面就介绍下相关方案案例。 酬赏是什么？酬赏，是运用不同的酬赏方式方法，调取用户心理的不同火花点，包括刺激大脑的多巴胺，来刺激用户不停地使用，并不停地想要获得酬赏方式，也就是「奖励」。 酬赏的目的酬赏的目的是什么？其实，酬赏根本的目的就是想让用户产生欲罢不能的习惯养成，因此粘住用户，使用户不停地投入精力、时间、金钱等等，最终使用户产生习惯。 多变酬赏的三大原则酬赏只是简单的概括，如果要与三大原则关联，它的全名是「多变的酬赏」。 多变酬赏的三种表现形式：社交酬赏、猎物酬赏、自我酬赏。 社交酬赏首先是社交酬赏， ...

  一个互联网公司能否在用户体验方面做到更极致、更专业，交互设计在其中扮演了一个重要的角色，那么交互设计师到底应该做什么呢？   不同公司的交互设计岗位根据公司发展阶段、组织结构等不同而存在很大差异。但在理想情况下，承接到完整的、全流程的项目时，交互设计师负责的内容和产出物可以包括： 项目背景分析  项目背景分析不是市场调研，它主要包括目前要设计的产品所属市场当前情况、项目要实现的目标、要解决的用户痛点、能否满足市场需求等方面。   这个背景分析的工作产出物没有量化的指标要求，但一定要清晰明白，让查看这个分析的人能否马上了解设计思路和分析结果并能给出直接反馈，可以考虑是把这些点记在一个项目的Axure文件包首页，作为完整的项目产出物的一部分。这样层级推进，每一步都是需要前面的论证来验证设计，让整个设计过程基础坚实、无可挑剔，这样即便碰到了比较喜欢开脑洞的需求方，也很难把设计推倒。 竞品分析  竞品分析主要是研究市场上同类产品的发展现状、市场占比、功能特性、该领域用户主要需求痛点、用户类型 ...

  在日常的产品设计中，交互上的表达（反馈、动效）能将信息很好地展示给用户，而无论什么样的交互表现，都是对用户的操作效率、业务目标的提升有很大帮助的。 实时更换效果  在需要用户进行多项内容的选择时，可结合具体场景，向用户展示选择后的效果预览。将用户的选择内容「可视化」，帮助用户进行决策与配对内容。   如首次进入 UC 浏览器，用户在选择不同的兴趣类型时，会同步展示对应的标签形象。这种优化方式，极大提升了用户对资讯类型的筛选，方便产品推送对应的资讯信息。 跟随用户的操作  大部分产品的功能都是「固定好位置」的，但用户的手指操作区域却是灵活多变的，为了进一步提升用户操作效率，有些产品会把功能设置跟随用户的操作而展示。   如夸克浏览器，在观看视频时点击屏幕右侧，就会出现操作图标；而点击屏幕左侧，操作图标则在左边出现。  还有抖音，会根据用户手指的点击/长按位置，来实时展示操作信息和入口。 更直接的引导  很多 APP 会在用户首次使用功能时，用一张 ...

  越来越多的企业开始使用数字化的解决方案来助力企业发展，包括日常管理、运营、统计等等。或者通过互联网的方式开发出新的业务形态，进行产业升级，如这几年风头正劲的「新零售」领域，即通过互联网对传统零售业升级和改造的尝试。  和移动互联网大潮一样，企业互联网化也是大势所趋，是公认的万亿级市场，而这场改变才刚刚进入初级阶段，充满了非常多的机遇与想象空间。   所以 B 端的产品和需求在近两年呈井喷式的发展，对于 B 端界面的视觉和交互要求也与日俱增。掌握 B 端的设计，是今天 UI 设计师的必要条件，也可以增加我们的求职广度和职业竞争力。 B端产品是什么  在国内，行业习惯将互联网产品划分成「B2C」或者「B2B」，B2C 全称是 Business-to-Consumer 即企业到客户的服务，B2B 全称是 Business-to-Business，即企业对企业的服务。还会进一步缩写成「2C」或「2B」。   C 端产品，是面向终端消费用户的产品，对于使用者而言主要是用来满足自己的日常生活实践 ...