在大数据盛行的今天，人们不仅仅讲究以事实说话，更愿意以数据讲话。数据作为结果的直接衡量指标，更真实、也更具有说服力，那如何直观的展示数据，帮助决策者做出正确决策或行动，发挥数据最大的价值？可视化数据大屏应运而生，让我们一起来谈谈吧
说到数据大屏的时候，我们要先了解一下数据可视化，那什么叫做数据可视化呢？比较专业的解释是利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示出来，并进行交互处理的一种理论、方法和技术，它为我们研究、处理、分析数据提供了理论依据。
我们人的大脑处理视觉信息的速度比文字快几万倍，将抽象的数据转化成图表、图形能更快速帮助我们更快理解数据中的含义，趋势以及相关性。
简单来说，可视化数据大屏，将我们难以理解的抽象的数据概念以图形化的形式展现，方便我们快速理解这些数据的含义，也方便这些重要的信息在最短的时间内传给最重要的人。
数据大屏可分为信息展示类、数据分析类、监控预警类，多展示酷炫的效果，数据之间有层次区分，好的数据大屏是布局、色彩、图表、动效的综合运用。
数据可视化，让很多员工从繁琐复杂的数据工作中解脱过来，那它到底有什么优点呢？
近几年来，国家的相关法律政策相继出台，大数据企业的技术研发水平不断提高，促使大数据行业市场规模从 2014 年的 212.5 亿元增长至 2020 年的 548.5 亿元，数据可视化对于公司发现解锁数据潜在价值意义重大。
有研究表明，人类可以用比处理文字快60000倍的速度来处理图像，可视化能直观呈现大量数据，以前企业员工检测到数据进行汇总分析需要数小时，可视化通过特定的格式来呈现大量数据几乎不费时间。
视觉形式的数据更易理解，数据可视化能快速显示操作、运营与结果之间的关系。企业管理不是凭空作决定，正确的方式应该是，依据所获得的数据信息来做辅助分析，数据可视化内容能让管理人员和决策者清楚看清数据趋势，快速制定及消化关键指标。
比如当上图科学决策平台的网络总数特别时多，决策者可以快速调取相关数据找出异常原因 —— 是上次活动运营推广到位，故增加了很多用户？也就是决策者可以通过异常数据快速钻取数据，用来解释正在发挥作用的运营条件或决策与所遇到的指标之间的关系。
根据Aberdeen报告收集的信息，利用数据可视化的组织能够及时访问信息的可能性比其他组织高28％。数据可视化有助于我们以客户和投资者能理解的方式向他们提供信息，它比PPT更容易让人理解，也能吸引那些对企业内容运作了解甚少的人。
比如上方的区域经济地图，通过地图与定位街道区域内容、颜色结合的展示样式，很容易看出各街道产值、税收等，也更有场景感；居民可支配收入版块，通过颜色区分、大小圆形、时间线来直观展示居民收入变化内容，形象且清晰。
制作数据可视化的工具有很多，最常见的就是Excel工具，非常容易上手，基本人人都会，操作简单，但它的缺点也很明显，没什么特色，静态数据展示过于死板，样式老旧。第二类是Python等编程类工具，这类优点是码数据速度快，自动获取，看起来很高端，但缺点也很明显，如：学习成本高、学习比较困难、很难比较熟练的掌握等。
第三类就是SAAS类可视化工具，这类工具容易上手，操作简单、动态数据自动获取、动态效果无敌炫酷，不需要下载安装，缺点就是部分渲染组件比较耗费电脑配置。那我们今天就来推荐几款常用的SAAS工具。
网易有数大数据是一个企业级的大屏大数据可视化展示系统平台，具有深度的交互式数据探索。它有丰富的使用场景，支持数据接入、数据导入处理、数据分析生成报告等，用户无需编程，简单拖拽即可生成可视化图表。缺点是数据探索性分析能力有限。
网易有数可视化实战案例——业务安全大屏。通过大屏进行业务安全监控，清晰的展示各业务分布要点的数据情况，顶部实时更新各重要区域数据情况，销量对比、售后情况，产品产比，以及用户分布也有清晰的直观展示。
FineBI作为一款商业智能（BI）软件，拥有丰富的报表编辑和数据分析功能，同时它也支持可视化大屏的编辑。决策报表采用了画布式操作界面，通过拖拉拽可以想成一个强大的、全面的可视化大屏，能实现在一个页面整合不同的数据，完美的展示各类业务指标，实现数据多维度分析。缺点是大屏组件不够丰富，开发拓展性不强，不支持云端托管等。
帆软可视化实战案例——银行大屏驾驶舱。通过大屏直观展示银行存款、贷款数据，业务办理详情等，图表形式展示内部管理、外部管理情况，分行放贷统计情况等，便于数据管理查看及决策制定参考。
Data V是阿里云内部的可视化大屏开发平台，同时面向开发者和零基础用户，支持大屏图形化编辑和在线编程开发，可帮助非专业的工程师通过图形化的界面搭建专业水准的可视化应用。
它有海量行业模板，DataV数据可视化设计团队会定期从大量真实项目中寻找优质场景，制作为模板，涵盖媒体、零售、工业、电商、金融、防疫、气象等多个行业，为用户提供会议展览、业务监控、风险预警、地理信息分析等各种设计参考。
产品功能方面，它有丰富的可视化编辑工具，提供多种业务模块级的非图表组件，只要通过拖拉拽便可创造出专业的可视化应用，另外丰富的组件库与模板库包含多种场景模板，简单修改即可快速投入使用。智能化工具拥有主题配色，一键美化、大屏智能生成等工具，快速解决在搭建可视化应用时遇到的整体样式配置困难。专业的地理信息可视化，支持地理轨迹、飞线、热力分布、3D地球等效果，同时数据驱动三维世界生成，低代码交互配置将复杂逻辑可视化呈现，整体效果更炫酷。它还有灵活开放的部署方式，支持多种发布方式，如：链接分享、二维码发布；支持自定义组件接入；支持云上部署，也支持线上开发。
DataV数据可视化实战案例——智慧工厂生产控制大屏，综合呈现了每个生产阶段的生产状态参数，将整个车间的情况汇总到一个调度控制中心，方便管理人员了解各阶段的工作情况。
袋鼠云数据可视化EAsyV，拥有业内领先的数据可视化大屏故事策划、视觉设计、前端和数据开发技术实力，尤其擅长3D模型展示，基于GIS地理信息展示等。它里面有丰富的组件，样式制作精美，支持多种不同类型的数据导入，还有动态面板和交互功能，让大屏看起来更灵动。
EasyV数据可视化实战案例——宁波图书馆可视化平台。大屏包含人流分析监测、读者画像分析、借阅行为洞察等，从多角度全面的帮助用户及时把握场馆运营效果，为其提供馆内建设与活动运营的监控分析服务。
深色的大屏设计能让其数据显示更明显，也方便营造科技感，另外大屏设计图表文字的颜色要统一，避免出挑的内容分散用户注意力，使用图片或者是动态的背景，也可以让大屏更有氛围感。那除了这些，好的大屏还有哪些特质呢？
首先是策划有故事。从客户的真实需求去梳理数据可视化内部的视觉传达，确保内容传达克制有条理，有重点、有故事。尽可能让用户花费更少的时间获取更多信息，完成数据空间到图形空间的映射，让数据的价值被看见。
如上方的品牌销售数据大屏，销售额与门店数，数据明显，与销售额相关内容有季度线上线下销售额，会员数、款式数量、爆款排行等，故这块内容排在左侧。右侧就是区域订单、毛利统计。中间放用户关心的地图区域分布、爆款分析等内容。
其次是可视化要有效率。通过工具软件，数据可视化变得更简单高效，变得灵活易实现，多端适配，加入组件化的拖拉拽操作，加入了多种交互和远程控制，能有效率的实现海量数据实时同步，实现高效率、高质量大屏交付。
最后是大屏要有数据价值。数据可视化最重要的还是要落实到数据上，脱离数据谈美观是不切实际的空想，数据可视化就是要充分利用并方大数据的价值，保证数据实时、全域、精准、让数据讲话。
设计可视化数据大屏时我们设计师要抓住问题的重点，即这样设计出来的内容能不能真的让数据产生价值，能否经得起业务部门推敲？是否为企业经营提供了帮助？思考完这些再去做的大屏更有价值，大屏做的酷炫是其次，能够让人一目了然的看见关键信息，联想到业务实际，才是我们设计师最需要关注的方向。
文章来源：站酷 作者：知果日记YRrui
费茨定律(Fitts'sLw)是一个描述人类运行学的经验公式，用于计算人们移动手指或鼠标等设备到某个目标的时间，以考虑目标大小和距离为主。
费茨定律的公式是T=a+blog2(D/S+1)，其中T是时间，a和b是实验测得的常数，D是目标的距离，S是目标的大小。说明了在给定目标情况下，目标距离越远，需要的时间越长；在给定距离的情况下，目标越小，需要的时间越长。
费茨定律广泛地用于人机交互界面设计中，例如在B端常用的设计按钮上，可根据该定律来选择适当的目标大小和间距，以使用户更好地达到业务目标。
比如在B端产品弹窗界面设计中，确定和取消按钮都会放在右下角，使得用户更容易点击。确定按钮更高频故放在最右边，视觉表现更明显，使其更容易一眼点击。此外，两个按钮之间的距离也很重要，因为它会影响到用户的点击时间，为了让用户更容易进行选择，按 钮间保持12px距离，避免用户误触。
1956年美国心理学家乔治·米勒对短时记忆能力进行了定量研究，他发现人的短时记忆能力广度为7±2个信息块，记忆信息超过了该范围就容易出错。因此心理学家把这个神奇的记忆容量规律称为“7±2法则”。 在人机交互设计界面中，如果要引入新的元素或操作，应该尽可能地减少其数量和复杂性，以便用户更容易理解和记忆。
比如在B端卡片设计中的操作按钮一般会控制在7-2法则即5个操作按钮，若有其它操作会隐藏在更多按钮里面，把频次较高的按钮放在一级展示中，频次较少的按钮放在二级浮窗展示中。通过分解复杂的任务和信息，减少冗余内容使得用户更容易理解且更快完成业务过程。
格式塔原理是心理学的一个概念，也广泛应用于设计领域中。该原理认为人类大脑在处理感知信息时，会自动将信息组织成具有整体性、完整性和结构性的形态，即所谓的“格式塔”。
在设计中，格式塔原理有几个常见应用：
1.相似性原则：相似的事物更容易被视为一组，与不同的事物分离。因此，设计师可以使用相似的颜色、形状、大小等元素来将相关的信息组织在一起，提高信息的可读性和易用性。
2.接近性原则：接近的事物更容易被视为一组，与远离的事物分离。因此，设计师可以使用空间布局来将相关的信息组织在一起，提高信息的可读性和易用性。
3.对称性原则：人类大脑喜欢对称和平衡的形态。因此，设计师可以使用对称的布局来吸引用户的注意力，提高视觉吸引力和美感。
4.闭合性原则：人类大脑倾向于将不完整的形状视为完整的形状。因此，设计师可以使用封闭的形状来强调信息，使用户更容易理解和记忆。
相似性原则的应用比如在B端的卡片设计中，所有的卡片样式相似在人脑理解中默认会视为相同的一组数据。
接近性原则比如在B端的表单设计中，常常会将一组数据通过接近性原则组织在一起，提高信息易读性。
对称性原则常用在大屏与报表设计中，通过对称性布局提高视觉美感，吸引用户注意力。
闭合性原则常用于连续性表格或图形等设计中，通过不连续性来让用户大脑形成封闭路径强调后续可读信息。
比如在下面的表格中通过形状的不连续性反而让用户大脑更快感知到还有信息可以滚动查看。
雅各布定律(Jacob'sLaw)是一条常被引用的交互设计法则，它由美国心理学家Donald Norman提出。该定律指出，人们在使用任何新系统时，都会将他们以前所经验过的类似系统的知识应用于新系统。
雅各布定律的核心思想是，在设计新系统时，应该考虑到用户的现有经验和期望，并尽量避免创造完全不同的界面模式。这样可以使用户更容易理解和掌握新系统，并减少学习成本。
比如在B端设计中常用到的图表编辑快键可以延用用户在其他系统常用到的快捷键，如win或mac系统都常用到的快捷指令可复用到B端产品的快捷操作中。
防错原则(Principle of Fail--Safe or Fault-Tolerance)是一种设计思想，其目的是减少或避免因错误或故障而导致的不良后果。它通常被用于设计高度可靠的系统或设备，以确保在错误事故发生时，系统或设备仍然能够继续正常运行，或者能够平稳地停止运行，以避免进一步的损害或危险。
在界面设计中如设计可撤销操作，通过系统中允许用户执行可撤销操作，以避免因误操作而导致的不良后果。
或在界面设计中常用到的反馈和提醒弹窗等操作，以帮助用户及时发现错误或故障，并采取适当的措施。
泰思勒基本定律(Tesler’sLaw)由Larry Tesler于l984年明确提出，也称 「复杂性质量守恒」。
该基本定律觉得：该定律认为每一个过程都有其固定的复杂性，存在一个临界点，超过这个点过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方。
可以通过简约至上的隐藏、转移、删除等原则进行用户体验的提升。
早在14世纪，哲学家、圣方济各会修士奥卡姆的威廉提出来了奥卡姆剃刀原理，这个原理说的是“切勿浪费较多东西去做较少的东西同样可以做好的事情”，后来以一种更为广泛的形式被人们知晓“如无必要，勿增实体”。
奥卡姆剃刀常用于两种假说的取舍上：如果对于同一现象有两种不同的假说，我们应该采取比较简单的那一种。对于几个功能相同的设计，在设计都可用的情况下，则选择视觉干扰较少的设计。
在设计上则能够指导我们对产品做减法，去减少不必要的元素，在进行设计的时候，先分析用户的的主流程是什么，流程内的引导尽量弱化，没有必要则不增加。
比如在B端产品设计中的登录页面以登录流程为核心，不需要增加其它没必要的流程。
除了以上七大定律外，也有尼尔森的10大设计原则，与以上定律基本一致。总而言之，交互设计规律的宗旨都是帮助设计师创造易用、高效、愉悦的用户体验。在B端产品设计中，将交互定律贯穿于产品设计中可以提升产品易用性，降低学习成本，使产品更规范，对企业用户的工作效率与商业价值都有积极的影响
文章来源：优设网 作者：丽创轻文
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
六、B端C化未来的设计方向
文章来源：优设网 作者：酷家乐UED
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
相信很多设计师同学都接触过B端产品，对于很多设计师而言，遇上B端产品是一件令人又爱又恨的事情，爱是因为目前市场上大多数的公司主要经营的都是B端系统，B端系统相对于C端来说UI界面显得并没有那么的重要，所以设计师的责任也相对没有那么重，而恨是因为目前大多数B端系统页面都是由前端UI框架搭建的，前端同学很多时候直接套用组件即可，所以UI设计师对于整个系统来讲也显得可有可无，导致设计师话语权也特别的低，甚至有些做B端系统的公司压根不用UI设计师也能完成项目开发。
但是作为交互设计师(小公司一般是产品经理)在B端却特别吃香，并且拥有主要的话语权，因为我们主导这整个系统的基础逻辑与业务逻辑设计，所以无论是前端还是后端同学都需要根据我们的设计进行开发，最终完成整个系统。
因此，今天这篇文章并不是告诉大家有哪些前端UI框架或后台组件等..（相信这些大家也看得太多了，工作中都是套框架，能用得上的没几个），而是从交互上如何去看懂B端后台的基础逻辑以及以后自己晋升成产品经理或者交互设计师时，怎样去设计一个完整闭环的系统。
B端产品和C端不同，C端产品大多数都是针对个人用户，设计的关系结构相对来说比较简单，每一个用户拥有的权限都是一样的，例如微信、淘宝等，我能看到的页面你都能看得到，很少不存在权限差异问题。
而B端产品的用户一般都是企业，企业用户一般会管理着多个角色，也就是角色多元化（例如一些校园系统角色就分为：普通教师、级长、主任等角色），不同的角色对系统的需求和职能也不一样，我们需要根据角色的需求去划分不同的权限，让他们互不干扰但又满足他们的需求问题，因此B端产品的基础逻辑比C端产品相对复杂。
看完上面文字的同学可能蒙了，又角色又权限的，能不能说点人话？
行！其实很简单，B端系统无非三个逻辑（也是三个页面）：用户管理、角色管理以及菜单管理。（有些系统因为业务需求可能有部门管理，那么算上部门管理就四个）
为什么我把菜单放到最前面跟大家讲？是因为菜单管理比前面两个相对简单，而什么是菜单也特别好解释，大家可以直接认为系统左侧的页面列表就是菜单，系统中拥有多少个页面那么就有多少个菜单，你的菜单越多就以为着你的权限就越多。
菜单管理的作用就是用于管理员对整个系统页面的管理（管理最主要就是增删改查），而有一些公司为了减少开发工作量会直接不要菜单管理，有多少个页面都由代码直接写死，管理员不能通过页面进行人工配置，这样会导致以后扩展会非常麻烦，当然了，有一些系统的菜单几乎不改的话，代码写死也没问题。
在讲解用户之前我需要提前跟大家讲一下什么是权限，准确来讲应该是权限分为哪些？
在目前的后台系统中，权限一共分为三种权限，分别是菜单权限（也就是上面介绍的）、数据权限以及操作权限。
菜单权限决定了用户有没有这个页面，例如学校系统中，主任有看到所有教师的教学数据的界面，而教师却没有这个功能，那么在给主任新增账号的时候就应该把对应菜单赋予进去。看上去很复杂，其实具体操作就是新增的时候把对应的菜单勾选上就可以了。
数据权限则决定用户能不能看到对应的数据。还是学校系统的例子，初中部主任只能看到初中部所有教师的教学数据，而高中部主任也只能看到高中部教师的教学数据，不同用户能看到的数据也是不同的，所以在新增的时候需要给用户配置（一般配置就是勾选）好对应的数据权限。
但是这里有一个问题，配置数据权限时我们如果一个一个人去勾选配置的话会特别的麻烦，假如初中部主任只能看到初中部的老师，那么我在给他配置账号的时候需要一个一个的初中老师勾选上，张三、李四、王五..等等，如果人多的话可能需要勾选成百上千次，用户体验就会变得特别差，因此现在的系统在配置数据权限时都是以部门为单位进行配置，也就是说，直接选择部门就代表着拥有整个部门的数据权限。
最后操作权限即决定了用户有没有对数据进行操作（一般是增删改查）的功能。还是上面的例子，初中部主任拥有查看教师的页面以及数据，那么他能不能对教师们的数据进行增删改查或者导入导出呢？这就取决于操作权限的配置了。目前很多的后台系统在配置菜单权限的时候同时需要把操作权限进行配置（因为只能先有页面才能进行操作），操作权限一般就是增加、删除、修改以及查询，当然如果页面还有导入导出或者其他功能，这些也需要在操作权限中进行配置。
用户其实也很容易理解，B端系统的用户其实就是需要登录进系统的账号，所以有一些系统的用户管理也叫账号管理。
因此用户管理的作用就是对登录进系统的账号进行增删改查等，当我们需要对别人提供一个账号时，我们就新增一个用户的账号密码给他们，直到他们用完了再把他们的账号进行删除。
那么问题来了，上面我们说到，不同的用户可能有不同的需求问题，那么就意味着我们每一个用户给要他们分配不同的菜单去做他们的事情。
例如在学校系统中：普通教师只负责自己班级学生的成绩录入，所以普通教师只有班级成绩录入的菜单，但是学校主任却不一样，他不仅仅能看到各班学生成绩，还能根据各班成绩进行对比分析，年级学生排名等等..
因此在刚开始的传统权限系统中，我们会直接把相应的菜单权限、数据权限、操作权限赋予给用户，每新增一个用户我们就选择好所有的权限都勾选上赋予给用户，最后提供给用户进行操作。
然而这种操作方式有一个弊端，就是如果每新增一个用户，系统管理员就需要重复进行勾选相同的权限，那么就会耗费大量的精力（一个用户要配置的权限特别多，如果用这个方式操作的话新增一个用户可能就需要花费很长时间）。因此，为了解决这个问题，我们在用户与权限之间建立了角色管理。
系统中角色的定义其实跟生活中是一样的，我们把固定的权限集合到一起从而形成了角色。例如，生活中UI角色就负责页面的视觉设计，而交互设计师则负责了产品的逻辑或者用户体验设计，这些角色拥有的权限一般很少变化，也几乎不会进行删除或者修改，就好像UI设计师或者交互设计师这些角色不会一时半刻就被完全消灭一样。
有了角色，我们可以先把对应的权限集合赋予给角色，然后新增用户时，再选择用户对应的角色即可。
这样做的好处是什么呢？好处就是当我们新增用户的时候，如果是相同角色的用户，我们不再需要重复去大量勾选相应的权限了，只需选择好该用户是那个角色就可以间接对用户赋予权限，并且后续要对用户进行权限的修改也十分便捷。因此，在现在的后台系统中，大多数都是采用权限赋予角色，然后新增用户时再选择用户对应的角色的方式。
如果看完上面的知识点还有点懵的话也没关系，这部分给大家展示在后台系统中菜单管理、角色管理与用户管理的实际应用是怎样的。
第一步先查看菜单管理有哪些内容，一般情况下，一个成熟系统的菜单页面几乎是已经固定不变的，那么也就是说菜单管理列表中所拥有的菜单都不需要怎么操作，列表中有多少数据就代表着系统总体有多少菜单。
第二步进行角色管理，如果是成熟系统的话，角色管理的角色也早已经分配好了，我们并不需要过多的进行操作，但如果是刚研发完成的系统，那么我们就需要根据现实的用户需求进行角色的设置，具体添加角色的主要参数包括角色名称、菜单权限、数据权限以及操作权限（其实也就是上文介绍的三种权限），其他的参数都是根据自身业务进行添加。
最后一步就是用户管理，配置好角色后，我们就可以根据需求进行用户的新增操作，例如现在我们需要新增一个账号进行登录系统，那么在用户管理页面中点击新增按钮，随后填写用户名称与密码，最后选择用户角色，点击确定按钮即可完成（因此，新增用户的三个必要参数是用户名、密码以及角色，有部门的需要填写所属部门，其他参数根据系统业务进行添加）。添加完成后你们可以试一试使用自己所填写的用户名密码登录后台系统，随后体验一下作为其他角色是否能完成自身需要的业务。
用户管理、角色管理以及菜单管理是B端系统最基础的逻辑，也是同学们将来需要转岗B端交互设计师或者产品设计师所必须掌握的知识，上面所介绍的仅仅是RBAC模型中最简单的一种，现实设计中可能出现各种情况，因此关于这次的B端产品设计我想给大家几点Tips：
1、在现实开发中，后台系统并不一定像我上面所说的那么完善，有些系统并不需要菜单管理，老板要求直接代码写死就好了，又或者有些系统就只有一个角色，那么角色管理也不需要了，这些情况都是有可能发生的，所有我们做设计的时候除了运用自己的知识以外，更多的是工作经验，知识是死的，人是活的，永远别忘了设计的本质是解决用户需求问题。
2、很多时候后台的逻辑管理会比我上面说的要复杂的多，例如一个用户可以拥有多个角色吗？不同角色能不能有相同的权限？如果有角色被删除了，那么该角色关联的所有用户应该怎么处理？可能你认为这些并不是自己目前需要考虑的问题，但是除非你以后并不想晋升到更高的位置，不然这些问题以后肯定会遇到的。
3、上面介绍的管理操作都是基于超级管理员账号（admin）进行操作的，如果你拿一个普通账号的话一般是没有对应的菜单权限，我担心有同学看完文章后马上登录自己的后台系统进行操作，接着登录进去找了半天都没有找到对应的菜单在哪里。
好了，最后希望文章能让大家有所收获，如果大家有不明白或者其他想法的话，欢迎大家一起探讨，共勉。
文章来源：优设网 作者：北沐而川
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计规范是指对设计的具体技术要求，是设计工作的指导规则。一般包括总体目标的技术描述、功能的技术描述、技术指标的技术描述,以及限制条件的技术描述等。
Design System 最开始是 Guide 演化而来，Guide 是一套可指导、可延续、可扩展、可统一的、可区分的视觉指引手册，指导相关设计结构完成统一性与对外区分性。具象层，它是一种设计方法；抽象层，它是一种思考模型。
设计规范一般会具体到公司级别、某一类产品线、某个产品等。今天主要讲具体某个产品的设计规范，主要是为该产品制定统一的用户体验、品牌、视觉等方面的规范，当然是在满足以上公司级别和某一类产品线层次的设计规范的基础上。
设计规范由设计原则、设计语言和组件库构成，在设计原则的指导下使用设计语言和组件库创建体验一致的用户界面。
设计原则是指：整个设计体系所要遵循的全局原则，是为我们设计提供方向指导的。
设计语言：是指设计所包含的语言体系。具体包含了：色彩、字体、图标、布局等。
组件库：相当于积木玩具的一个个积木，每个组件就是一块积木，通过组件的拼搭可以迅速搭建出一个个页面。下面我会具体说明组件库。组件库具体包括：按钮、导航、表单、数据等等。
B端产品和C端产品制定设计规范差别还是蛮大的，最主要的差异大致是：
C端产品的设计规范：目标几乎都是为了更好的打磨用户体验的一致性和标准化；
B端产品设计规范：由于用户体验更复杂，学习成本更高，所以它的目标侧重点是：除了布局的不同外， 相同业务场景下，相同产品功能需要有一致的，标准化的体验，降低学习成本，提高工作效率，即统一体验。
创建原型时可直接调用组件库，能搭建出高保真的原型。
与设计师和前端沟通更加顺畅，小的修改可以直接和开发沟通不需要通过设计师出图，极大增加了前期的节奏，提升沟通效率。
对于只有一个设计师的项目：可以让那个设计更加规范，有些简单功能迭代可以直接个研发沟通，不用再单独出图，减少重复性的工作。
对于同一个项目由多个设计师共同协作时：可保证设计各方面包含体验、设计、交互等等的统一性。减少设计成本，提升设计及沟通效率。
对于接手新项目，能尽快的了解产品，快速入手。
对于开发完成验收走查，有了前期的规范及比较详细的设计尺寸，开发的设计还原度会更高，减少重复及没必要的设计走查。
开发可以按照设计规范建立好公共组件库，极大的提升开发效率。
可复用的东西确定了下来不会频繁改动，设计走查的问题也会逐渐减少。
对于模棱两可的交互可以有地方看交互样式了，不需要再询问设计师。有更多的时间专注于测试功能上的问题了。
通用的组件前期测试后了以后，后续就不需要重复测试，极大的提升工作效率，避免重复工作。
前期制定及评审设计规范以后，有一套笔记明确的规范，可减少各个职位方面的沟通成本，提高沟通效率。
目前市面上有很多多的第三方设计规范，比如：antdesign，element，那有人就会问有必要自己重复造轮子做一遍吗？
我觉得是非常有必要的，为什么呢？
1、每个产品有各自独有的品牌调性，如果都用第三方 的设计规范，那同质化会很严重，很难做到差异化，也就很难在竞争中脱颖而出。
2、 世上本没有万能的设计规范，那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范，在此基础上进行修改，效率很低，适配的复杂度和重新开发相差无几。
3、第三方的的成熟的组件库，我认为应该把它当成模式，在他们的基础上去做自己的设计规范。
个人工作中总结出两个比较建议的规范建立时间点，探索期和成长期。
产品在导入阶段，产品还在处于极大变动的时候，这个时候做设计规范，其中就蕴含可极大的风险。但是也不是不做规范，这阶段规范主要涉及到色彩，字体，间距，布局，栅格等通用设计原则以及常用业务组件的定制。此阶段搭建的规范具备高效性以及灵活性的特点。
不适合搭建特殊的业务组件，比如：当领导想要突然调转方向也不会很慌，改动较小就可以完成整体的规范转向）此时搭建规范组件库需要考虑到预留后续更改的空间。
当产品进入成长期处于较为稳定的版本，整个团队对业务的理解也都很熟悉了，这个适合创建符合业务场景的组件库，有了前期的积累这个组件库会更加符合产品及业务逻辑。
在制定规范前，设计师需要明确产品中主要有哪几种分类，将最基础的分类定义好方便后续针对分类内容进行整理。B端产品与C端产品既有共同性也有着很大的差异化，可以借鉴但是切忌生搬硬套C端的设计规范。
Ant Design是由蚂蚁集团体验技术部经过大量的项目实践与总结，逐步打磨出来的，基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验，是非常完整的一套设计规范。
TDesign是腾讯企业级设计体系，也是去年才发布的。虽然才发布，但是作为一款诞生于腾讯内部开源，却是经过了超500项内部业务检验的企业级设计体系，TDesign 汇集了腾讯众多优秀组件库能力和设计研发经验。
内含丰富可复用的设计组件资源，如色彩体系、文字系统、动效设计等，覆盖支持 Axure、Sketch、Figma、Adobe XD 等各大产品设计软件。可以按照需求查看对应组件的使用教程和代码演示，只需简单的引入操作，即可搭建属于自己的产品界面。
Element是由饿了么公司前端团队开源一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源。4、AT-UIAT-UI 是一款基于 Vue 2.x 的前端 UI 组件库，主要用于快速开发 PC 网站产品，在众多的的组件库中，AT-UI 属于视觉风格比较清新的一款。
是有赞 PC 端 Web UI 规范的 React 实现版本，提供了一整套基础的 UI 组件以及常用的业务组件。通过 Zent，可以快速搭建出风格统一的页面，提升开发效率。目前有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中广泛使用。
谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目标是创造一个将经典的设计原则和科技、创新相结合的设计语言，并且在不同设备上提供一致的体验底层系统，并同时支持触摸、语音、鼠标、键盘等输入方式。
iOS 的人机规范指南，保持了苹果一贯的风格。虽然没有 Material Design 规范那么细致全面，但是核心的设计原则在每个组件的设计说明中都有渗透。作为 iOS 系统的设计基础，建议每个设计师都需要仔细研究。
Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。
NutUI-JDL 是一套基于京东物流视觉规范的移动端组件库，包含了36+高质量组件和详尽的文档和实例。
设计师在开始准备设计规范时，首先需要确定设计风格和设计尺寸，页面布局是做居中固定式，还是全屏响应式。如果是全屏响应式的网页设计，那要选择怎么样的屏幕来做效果？等等这些问题
接下来分别来展开说明。
纯白风（网页大背景是纯白色;文字背景是线框，轻淡色（灰）;文字一般用深色）
轻淡风 (网页大背景是浅灰色;文字背景是白色;文字一般用深色）；
深色风（网页大背景是深色;文字背景是带有透明度的纯色；文字一般用白色）
我们在开始设计之前，要确定好使用哪种风格，一旦确定下来，后面的所有页面和元件的设计，都得基于这个风格来设计。
据数据显示，目前市面上比较流行的是：轻淡色背景风+全屏响应式的设计风格，也是相对比较保守安全的设计。
接下来需要考虑尺寸是做居中固定式，还是全屏响应式。全屏响应式的网页设计，选择怎么样的屏幕来做效果。
设计规范中，分辨率尺寸的问题，一直以来是我们设计师讨论最多的。
决定产品设计尺寸分辨率大小的因素大致包含以下两点：
目前市面上主流的排在前3的屏幕分辨率为1920*1080，1440*900，1366*768。
做B端产品时，现在市场上的设计师一般都会采用的是1440*900。为什么不用市场占有率最高的1920*1080和1366*768呢？
1、由于B端产品的特殊性，它的尺寸分辨率大小，是取决于用户使用的电脑设备条件。由于员工电脑显示屏大部分都是统一采购的，尺寸也就大致统一，所以开发适配的分辨率可以按这个统一尺寸进行设计。
2、因为它的兼容能力会比较强，向上适配或者向下适配误差会比较小，不管是市场占比最高的主流1920*1080尺寸，还是一般般的1366*768尺寸，都完全可兼容。
注意：别忘了设计出极端情况（宽度为1280，以及宽度为1920）的效果图，力求前端开发实现的效果和高保真设计图误差最小。
假如你产品的用户用的设备主要是市面上占有率最高的24寸办公室显示器，也就是1920*1080分辨率的话，那毫无疑问，在选择设计尺寸上，直接选择1920*1080分辨率。
比如我现在做的产品，除了移动办公，web基本都是固定办公，管理人员使用的办公设备（电脑）屏幕一般都是台式电脑，那这个时候，我们在设计时就会同时考虑它的占有率和兼容能力。所以我们采用的是：1920*1080分辨率。
所以设计师们在选择尺寸上，一定要灵活使用，不能一味的认死理只选择1920 或1440某一尺寸，而是要对您的产品用户的具体情况做好分析，从而得出最适合你们产品的设计稿的尺寸。
注意点：
如果希望设计稿完全还原程度高的话，还特别要考虑浏览器的适配，比如说它的顶部固定区域（当前网址，书签栏等的高度）必须排除在外，剩余的部分才是我们设计稿的真实高度。
拿我们常用的谷歌浏览器举例，如下面公式所示：设计实际高度=电脑分辨率 -（网址栏+书签栏+页签高度)
上下布局包括："顶部菜单栏、主体内容"两大区域。其中顶部菜单栏是固定不变的，主体内容根据不同分辨率进行自适应动态缩放。另外还需要把主体内容左右两边空白区域最小值确定好；
优势：内容区域可操作空间大。
劣势：导航区域限制数量，如果导航选项内容比较多，用顶部横向导航的话，就会显得很拥挤。另外，横向导航一般有“展开”，“折叠”，和“收起”三种状态，加上内容很多的情况下，横向导航就特别难做到尺寸适配。
左右布局包括："左侧菜单栏、顶部栏、主体内容"三大区域。其中顶部菜单栏、左侧菜单栏是固定不变的，右侧主体内容根据分辨率进行自适应动态缩放。
左右布局时，左侧菜单是支持收缩或展开，收缩状态下也需要有固定的宽度。
优势：导航部分可扩展性强，适合导航选项内容都是比较多的情况。且只有“展开“和”收起”两种状态，在不同屏幕情况下，宽度的自适应也能更加得心应手。
劣势：相对内容区域空间变少。
现在很多后台管理系统采用，"顶部一级导航栏、左侧二级菜单栏、主体内容"三大区域。其中顶部菜单栏、左侧菜单栏是固定不变的，右侧主体内容根据分辨率进行自适应动态缩放。
优势：结构更清晰。可承载更多层级内容。更适用于复杂且层级多的产品。
所以，可以得出结论：设计师在选页面布局的时候，要全局考虑产品框架及内容。
1、如果导航选项内容比较多的话，或者不确定有多少内容的情况，从美观和操作难易程度、可用性来评估的话，选择第二种左侧导航是最适合B端产品使用的。
2、如果内容选项确定很少，就没那么多限制，“左侧纵向”"顶部横向"都好使
特别要注意
1、同一个产品需要考虑它的统一性，不能这里使用顶部横向，那里用左侧纵向。
2、如果是个更新迭代的版本，就还得考虑老用户之前的使用习惯，避免引起不必要的麻烦。
在确定好导航的布局后，就基本上能确定整个产品的页面布局了。
B端产品，一般会在整个页面的左上角放企业的LOGO，顶部栏高度48+8n，侧边栏宽度200+8n。
我常用的是顶部栏高度：56px或80px，侧边栏宽度：200px，侧边栏收缩状态宽度：56px或80px，右侧的侧浮窗宽度：400px。（具体高度宽度尺寸，设计师可根据具体情况来定，不需要按部就班这么死板）。
同时需要确定好主体内容的上下左右边距，以及主体内容区域中各模块的安全距离，内容超出区域的，通过滚动查阅更多。
Windows系统：中文Microsoft YaHei(微软雅黑），英文Arial；
Mac字体：中文PingFang SC（平方字体），英文 Helvetica；
常见的字体大小为：12px、14px、16px、18px、20px、24px、26px、28px、30px（一般都是采用偶数字号，文字大小12+4n）。
注意：
在设计过程中，设计师对字号应该有一个全局观，在同一个界面内，尽量少用大小太接近的字号。比如一个页面中，如果同时用了12px、13px、14px、15px、16px、18px排版，文字的层级对比会比较弱，没有主次之分，用户阅读困难，视觉效果也显得凌乱。
所以，刚接触B端产品的小白设计师，如果不知道怎么运用不同字号字体的情况下，可以直接以这组字号12px、14px、16px、20px、34px的字号为参考使用，这样的分布会层次明晰，能够有个比较不错的布局结构。
“行高”根据文字大小和使用场景来定，公式如下，
行高=文字大小+8px（或6px，视情况而定，我常用8）
例如：12号字体的行高=12+8=20px
同一个界面中，一定不要出现多个不同字体。尽量选择用户设备里自带的字体来进行设计，比如说WIN系统默认用系统自带的“微软雅黑”，不能使用特殊字体。
如果必须要用特殊字体，建议用图片替代。如果用户的设备里没有你使用的这些字体的话，会默认显示设备的系统自带字体，最终效果就会和你的设计稿相差很多。
从视觉方面来讲，为了让整体界面更简洁具有美感，体验感更好，在使用字体方面，一般字体种类不超过2种，越少越好。因为页面的层次感主要是靠字号大小及颜色拉开层次，如果字号在变，字体种类也各种变化，整体就会感觉很凌乱，没有统一性。
颜色规范包含“品牌色”、“辅助色”、“中性色、图表色”四部分。
品牌色系：即产品主色调，主色调的设定直接影响产品气质和直观感受，也是产品的对外的形象。品牌色是根据这个产品的特征和定位、用户群，以及使用场景等综合考虑最后确定的。
品牌色的一般用于LOGO 、操作状态、按钮颜色、其他一些可操作图标等。
1、品牌色一般建议选择冷色系。这样有效避免与“错误提醒”的红色、黄色相冲突，让人误解。但要是被硬性要求必须选暖色系作为主色调，就得格外注意调节好主色调与错误提醒的区别了。
2、注意选的品牌色（主色调）不要太刺眼。要保证用户长时间使用也不至于颜色太亮太刺眼，而产生的视觉疲劳。
辅助色系：辅助色一般用于“提示”。类似：成功、失败、警告、无效等内容等。
中性色系：中性色涵盖黑、白、灰三个不同层级，通常在文本、背景、边框、分割线用到它们。同一色相，只要改变它的透明度就能表现出不同的层级。
B端产品的文字中，一般会有：一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字、说明文字等。
为了区分层级，提升用户的阅读体验感，通常会根据具体需求，把字体颜色的深浅，大致分成3到5个层级。常见的有#333333、#666666、#999999这个组合，这个组合的层级区分比较分明，适应性比较广，设计师在设计时可以直接作为参考。
图表色：我们常见的后台管理类产品， 像数据可视化、统计图、多个标签的不同配色方案，所以一般还会设定图表的颜色。
按钮是任何用户界面不可或缺的交互元素，B端产品中用到按钮的场景特别多，类似：登录注册，保存，表单，弹窗，导航，提交，确认等等。
常见的按钮形式包含这六大类：图标文字组合的按钮 ，主按钮，次按钮（线性按钮），按钮菜单，文字按钮，图标按钮。
常见的按钮交互状态包含六种：
正常状态、聚焦状态（使用Tab键或方向键来对网页进行访问输入的聚焦状态，在设计时很多设计师都会把这一状态忘记，导致用户无法用方向键控制光标位置，会降低用户的使用体验感）
悬停状态（鼠标正在按钮上，但不点击，需要注意的是平板电脑和移动端设备上不会展示悬停状态，因为手指跟光标不一样，无法在屏幕上进行悬停 ）
激活状态（点击按下状态）
加载状态（等待期间不可操作，在B端产品中Loading状态特别重要，能缓解用户的焦虑情绪）
禁用状态（不可操作状态，置灰显示和透明度（40%）代表不可操作状态）
按钮圆角：在开始设计产品之前，设计师都需要对按钮圆角有具体的规划。按钮四角都是直角会比较有距离感和强烈的引导性，容易分散用户注意力，所以我们一般会采用视觉上给人比较柔和亲近感觉的圆角按钮。
但按钮的圆角并不是越大越好，因为在相同尺寸下，按钮圆角小的，操作热区会更大，页面的使用效率也会更高，更容易操作。同时还要特别考虑到下拉菜单的设计，所以圆角大小一般采用偶数：2px,4px,6px,8px,16px为宜，不宜过大（这里的圆角弧度的值有一定的倍数关系或基数关系，例如：4/8/16, 4/6/8，4/8/12，都是可行的）。
注意：圆角大小也会跟着按钮尺寸的大小有相应的变化。
在B端产品中，当确定好网格基数时（通常网格设定为：4px。按钮的高度会分两种情况：
1、一种是宽度为高度的倍数关系。
2、第二种是如果宽度为高度的倍数关系，从视觉上看达不到想要的效果的话，设计师就可以灵活设置。
讨论到按钮的尺寸，我们需要大致知道如何设置网格基数。
在设计中，我们需要在常用的绘图软件（如：Ps、Sketch）里找到我们的网格功能，设定好一个数为基数，然后按照这个基数来进行按钮的绘制，按钮就相对比较规范了。
那如何用绘图工具设置网格基数呢？方法如下：在Sketch绘图工具中找到：【视图】-【画布】-【网格设置】- 弹出网格设置对话框进行设置就好了
把网格基数设置为【4】的原因：它是谷歌Material Design绘制小组件的规范，模块之间定义的基数就是【8】。
假设我们定这个基数为4，那采用的尺寸数值就需要是基数4的倍数。比如B端产品中，常用的按钮高度尺寸有：24px、32px、36px 、40px、48px，这些都是可以整除基数4的值。例如：32/4=8，40/4=10，这里的4为基数。
按钮的宽度尺寸，一般是确定好文字到边框左右两边的距离（例如如图Padding值为12px)后，开发会根据文字内容的多少自适应的。
按钮间距，按钮之间的间距也遵循基数为4的倍数，比如：16，24，32，40，48等。这里的基数定为偶数（一般为4或8）
从广义的定义来讲，表单是指用于数据录入的一切形式。从狭义上来讲，表单在大家更广泛的认知印象中，表单则是一类包含输入框、下拉选择框等常见控件的组合形式的页面才属于表单。表单的本质核心是提交数据，所以凡是具备采集数据并完成采集后提交数据的交互形式均可称之为表单。
表单在设计上的结构有：1、标题；2、表单标签；3、占位符；4、表单域；5、提示信息；6、操作按钮；
表单的设计必须优先考虑为用户减负，提高效率并简化填写流程。另外表单中组件的选择需要依据具体的数据类型和具体的业务场景进行合理正确的选用，为用户提供高效的数据录入表单，降低用户操作成本、认知负担，并提高数据采集效率才是表单设计的根本目的。
可交互输入域，是构成表单的核心内容，是表单用来采集数据的入口。输入区是用户交互最多也是最能影响使用体验的区域，不同类型数据选择与之相应的录入方式，对提高表单操作效率和用户体验大有裨益。
表单并不是把一些不同类型的输入框排排版、标清楚必填非必填、哪些表单比较复杂适当的加个说明就完了
其实，表单设计远远不止这些，表单本身也是一个小产品，它也需要有需求的支撑、也需要嵌套使用情境、也需要考虑用户的心理模型；从表单的产生到表单在页面上如何呈现，再到使用表单时与表单之间的交互，每一步都需要投入大量的思考来做好表单。
后面我会专门有一篇16000+的文章聊聊这个B端产品中比较核心的表单，有兴趣的朋友可以关注一下，大概五月份就会发。
表格在整个B端产品比较常见的，它的地位也是相当重要的，我们在设计表格时需要注意一下几点：
一般以左对齐为准。与左边表格边距尽量保持在10px以上的间距。（特别注意：金额和操作的标题和内容需要右对齐）
默认展示的列数为3-8列，如果需要展示更多列数，则需要优先固定展示重要列，其余的列的内容会以滚动条滑动而展展示出来。
宽度的尺寸大小自适应，但需要根据文字的重要性显示，重要文字内容优先完整显示。
字符不要多，最多可输入8个。如果文字太多，就需要做文字信息精简化。
表格内容超过一屏，就需要显示竖向滚动条，注意：表头需要固定，但表格内容可滚动展示。
表格的某些单元格无数据内容时，需要用“—”表示，需要区别于“0”。
标题栏高度（标准高度为56px）；内容栏（标准高度为56px，偏大的标题栏高度为80px），内容区和标题栏水平居中对齐。
列的对齐方式（垂直方向）除了需要始终保持“右对齐”的：金额，最右侧操作列内容外，其他的内容可自行左对齐或右对齐。行的对齐方式（水平方向）
当表格栏的高度尺寸小于80px 时，一般只有一排内容，内容水平需要居中对齐。当表格栏的高度尺寸大于80px时，如果是有两排内容，所有的内容需要顶对齐；但是如果既有一排内容 又有多拍内容的话 ，内容水平则需要居中对齐。
表格中的内容，会根据字段的长短定义所占的百分比，完成表格占比，从而达到希望实现的最佳效果。
滚动条分为横竖两种，当表格内容超过一屏时，就需要显示滚动条。竖向滚动条时， 需要固定表头标题栏和页码。只需滚动表格内容部分即可。横向滚动条时， 需要固定第一列 和 正在操作的项列。只滚动表格内容部分即可。
仅提示用户相关内容，不需要用户做任何交互动作。类似：toast弱提示通知提示等弹窗（（一般3-5秒会自动消失：包含普通信息，成功信息，失败信息，警告信息）。
另外还有，鼠标经过的时候即可出现而不用点击的弹窗（这个弹窗通常会设计一个浮动带有阴影效果的框，不需要遮罩）。比如提示说明，显示更多信息，鼠标移过后立即消失，它不会影响下一层（当前页面内容）页面的视觉效果和操作。弱弹窗尺寸一般根据文字多少自行适配。
第二种是强弹窗。它是一个需要用户必须对这个对话框进行操作后才可以离开。
例如弹出的列表，详情，表单等的确认信息弹窗、错误提示弹窗。这些强弹窗一般会对下面一层的页面做一些遮罩处理，例如添加上一层有透明度（例如30%，50%都可以）的黑色/白色，给下一层页面的内容做模糊滤镜等等；
在写弹框规范时，应了解各自项目中需使用弹框的有哪些内容，给出相关大小弹框的比例，哪些为固定尺寸，哪些为适配比例。以及对于通知提示给出停留多少时间后自动消失，弹窗弹出状态等等相关的交互规范。
缺省页是互联网中常见的场景，当遇到网络不好、页面中没有内容数据、暂无资料等等情况，所导致的空白页面。
大致分可为：系统类缺省页，信息类缺省页，空白类缺省页。
遇到这些情况时，设计师一般采用一些插画&文字的组合放置本来空白的页面中提示或引导用户进行下一步操作，以缓解用户的焦虑情绪。（也就是我们常说的情感化设计的一种方式）
设计规范很大一部分是组件库，所以就把组件库单独拎出来聊聊。
做一个比喻，组件库相当于积木玩具的一个个积木，每个组件就是一块积木，通过组件的拼搭可以迅速搭建出一个页面，而设计规范就相当于搭建的“说明书”。
通常我们将组件库分为基础组件和业务组件两大类，前者是系统通用组件（图标/按钮/输入框等），后者是由业务决定的相对更复杂的组件模块。
而对于B端产品和C端产品，二者的组件库又有些许差异。C端的组件库更追求极致的交互和视觉体验，因此需要考虑视觉、性能、实现、兼容性，另一方面，C端会根据活动、节日切换不同的主题，也要考虑组件视觉上的个性化扩展。对于B端而言，组件库更看重可复用性和稳定性，保证可以支持业务快速迭代。另外B端会涉及到各种各样的数据录入与展示，因此相对更高的要求是大而全，覆盖面广。
在业务已经发展到一定体量情况下，需要将项目中具备复用性及拓展性的模块进行拆解，对于B端产品来说筛选的时候会依据之前迭代的版本内容，把页面一一罗列出来，将可替换与相似的模块提取，并利用思维导图的方式统一归纳，并做成可以被替换的组件。组件的替换建议合成一个大的排期进行替换，避免了线上组件不一致导致体验问题。
以我们现在的产品为例：依据产品类型将组件拆分为：基础组件 、业务组件、数据可视化组件、常用模块。
将产品拆分后，此时得到很多可复用组件。我们再依据原子设计理论针对性进行拆解直至拆分出5个层面：
从原子开始重新依据定好的视觉规范进行更改，再由原子组成新的分子。
在与开发沟通设计规范制定的过程中，常提到他们写CSS样式的时候是采用盒子（box）去写的。通过一个个盒子填充来将我们的组件元素放入其中，最终形成前端展示的页面。
走查时使用浏览器我们也可以看到开发写的盒子，了解盒子也可以方便我们走查时知道问题在哪。
搭建组件库的步骤
对于新产品来说，业务体量较小，较难抽取共性，组件也不全面，因此较好的方式是参考大厂的组件库确定要做哪些组件，它们的相对成熟，参考价值较高。
对于已经成熟的产品来说，我们可以直接全面体验查看页面，找出所有用到的组件，除基础组件外，提炼出复用率高的业务组件进行结构化和组件制定。
以提示弹窗为例，演示单个组件的建立方法。
1. 定义组件：根据业务定义提示弹窗使用场景，用于重要信息的提醒，且需要用户自己关闭操作。
2. 拆分组件：这一步是将组件拆分为元件。对提示组件进行拆分后得到如下：
3. 重组输出根据业务场景，我们把各个元件重组为组件，建成组件集，并定义各种组件的使用规则。
在组件库建立完成后，只有在日常设计中真正使用组件库，提高组件库在设计稿中的覆盖率，才能真正达到组件库的效果。这就要求我们要输出一份完整的组件库描述文档，在团队中进行推广，加强设计团队的公用意识。设计团队内部可以直接维护一套组件库，设计师设计时直接调用公共组件库组件使用。
另外，我们还要与开发工程师配合逐步完成现有页面的组件替换。
组件库的内容并非一成不变，而是在不断地更新，以保证所包含的组件都是最新和有用的。与其他数据一样，组件也会有增删改。我们需要定期对组件库进行维护。
增加：当有新的组件产生时，我们需要通过判断它的拓展性和复用率，以确定是否将它入库。
删除：随着产品的不断升级迭代，如果某个组件已经不用或复用率很低时，我们可以考虑是否要将它删除。
改：不可避免的，组件会随着业务而进行升级，我们可以通过数据埋点和A/B test的方式来确定某个组件是否要进行改动。
组件扩展性弱：
有时候设计师做出来的组件虽然看着很好，但是实际上使用时，适配效率很低，用组件去扩展和重新做的效率差不多。
大部分时候设计师手中都有任务，于是这个任务就落在了相对不是那么忙的设计师手里（一般是新设计师），但是新设计了解业务相对来说是不够的，做出来的东西就像是是空中楼阁，抛开业务谈设计规范的都是很难落地的。
设计师不了解开发的实现方式，可能会做出来以后，开发较难实现，然后开发也就不会做。
首先，设计规范的作用是巨大而延迟的，不能即时产出很大的价值，另外一方面，设计规范的落地会增加开发工程师很多的工作量，且无法量化成果。这也导致很多时候设计师无法争取到足够的开发资源来做这件事，所以，很难导致达到预期的效果。
设计师需要更加全面的了解产品及业务流程。
前期需要做好用户画像，弄明白产品的目标用户的差异，不同用户的使用场景。只有弄清楚各个角色的关系以及功能设计的逻辑，具体用户年龄，解决什么问题，才可以产出更符合用户需求的设计。
如果是新的产品，那就需要去详细的看类似的竞品的功能及业务流，并且了解公司产品的定位及方向，所以就大致清楚设计的大方向。
系统整理产品情况，最好是做思维导图形式，可以更好的梳理同类型的产品功能及组件，也就能更好的提高组件的复用性。
在制定规范前，需要明确产品中主要有哪几种分类，将最基础的分类定义好方便后续针对分类内容进行整理。
团队沟通其实是一门艺术，那需要如何做呢？
首先，写一份设计规范的价值的提案给领导，争取到足够的资源，包含设计资源、开发资源。如果领导的主导参与，那这个事情就好推动多了。
然后，把设计规范的设计工作交给熟悉业务的设计师来做，通过业务提炼复用率高的典型元素，优先开发，最大化投入产出比。
搭建设计规范和我们日常处理工作需求类似，并非输出一份文档就结束了。我们还需要将做好的设计规范推广给各个职能部门的同事包括设计小伙伴，PM和开发小伙伴的团队内外，并且需要得到团队内的一致认可才算是初步完成。
召开专门的设计规范会议，以清晰明确且有效的方式把详细的内容传达给各个相关人员，在一致认可规范的情况下，以达到内容的传达到位。同时，这个时候，就可以依据开发人员的反馈，做落地的修改规范文档。
1、如何推广给PM
利益点：提升协作效率，减少工作成本
在启动设计规范的整理之前，内部宣讲让PM对于设计规范的搭建已经有了一个基础的概念。然后争取到更多的开发资源。否则PM不会分配资源给予时间去搭建整体的设计规范。
可以从提升PM与设计的效率和降低原型搭建成本作为切入点，通过组件库以及通用模版的搭建，PM只需要极低的成本学习一下组件库怎么使用，即可搭建高保真的原型界面。甚至完善好组件库后直接不需要设计的参与，开发通过原型组件库搭建页面。
利益点：提升设计效率，减少人力损耗，保持体验一致性
设计规范一般由团队内小伙伴共同制定，基本上已经对规范的优势达成共识。因此主要讲讲如何更好在团队内部使用规范。
团队设定主要负责维护的设计人员，其他人员在设计时候，通过Sketch Library 共享组件库可以直接调用组件，并建立更新日志规范项目流程提升效率，定期维护的时候其他人员统一告知负责维护的设计人员，统一定期修改更新升级维护。
利益点：封装组件，更少的更改，提高验效率，缩短研发流程
需要研发团队认可设计规范，前期前端的参与是必不可少的。
在制作规范时设计师了解了前端开发的一些简单原理，前端开发也能及时了解设计师的想法，大家不再是各司其职而是串联起来共同协作，当规范确认下来前端就不会频繁改动组件，而且在有限的项目时间中。设计规范的统一极大缩短了设计和前端开发所需的时间，为后面的项目争取了空间。
一套完整的规范包含内容是非常多的，难以在1个版本迭代里面修改完。
因此可以采用敏捷开发的思想，小步迭代快速推进，将设计规范的覆盖放在每次迭代过程中。设计师需要将自己作为设计规范这个项目的产品经理，针对现有的需求进行拆分，并排出优先级分版本迭代进产品里面。
可以依据从大到小的原则进行优先级排序。对产品设计风格影响大的先排，影响小的后排。
设计规范的制定不单单是对于设计师，在嵌入版本里面要随时与产品和开发多沟通，以便达到更好的落地效果。
接近1.5万的文字梳理，感谢你看到了最后。接近尾声了，制定及梳理设计规范对于设计师来说个人成长有哪些方面呢？我个人觉得可以从这几个方面来说；
通过整理规范，需要收集目标用户，使用场景、前期调研、产品功能梳理等众多资料，这期间我们需要去发现信息以及整理信息。庞大的信息收集，那对于个人的收集整理信息的能力是一个很好的提升，同时对产品会有更全面的认识。
归纳总结能力
将收集好的信息进行分类整理，这要求需要一定对逻辑性。在设计基础框架时合理对分类可以协助我们处理好每个控件对层级，这项能力无论实在工作还是日常中都有着巨大对好处，可以帮助我们从一堆繁杂的事物中“提纲挈领”，换言之就是“化整为零”，做减法，提取出最关键对因素。
将信息归纳整理好后，需要对全局进行思考，全局的设计及交互都需要考虑到位，比如什么情况下适合跳转页面，什么情况下适合给与用户弹窗。大体符合什么交互原则。
除了对大体交互需要考虑到位，细节上也不可以忽视，比如异常情况，极端情况该如何去处理，组件之间该怎么去配合等。在日常工作中我们也可以逐渐有意识去培养此类技能，对项目全局思考的越多，那么对整体项目对把控能力也就越强，与他人合作也会越显得专业。
在整个推广设计规范的过程，就是提升沟通表达能力的过程。
另外，整理设计规范时，难免会遇到模凌两可举棋不定的时候。此时可以寻求向上或者向下的资源寻求帮助，具备良好的表达能力能迅速帮助我们将问题阐述清楚，表达能力是设计师需要具备的重要技能之一。
我们每次在求助他人或向他人汇报，都需要在全面复盘问题过后做到心里有数，将问题自己复述一次是否有漏洞或者没考虑清楚的地方。长此以往你表达的事情会更清晰，别人也更容易听懂你说的事情快速理解内在逻辑，那么说服别人推动工作的难度也会越小。同事对自己的逻辑思维，表达能力都是很好的锻炼。
这里总结了几个工作中与上下游沟通的小技巧希望能帮助到小伙伴们：在开始与他人沟通之前我们需要搞清楚我们沟通的原因与对象
原因里面包含：
对象里面包含：
当然在沟通时还需要考虑方式和语气，这些都需要好后斟酌。如果遇到情绪不太好的开发，这个时候反倒我们更不能将情绪激化，一般这些情绪化对态度过一会都会消散，可以采取冷处理等情绪过后换一种方式沟通看看。
由于产品性质和业务阶段，身为B端设计师更加需要贴近一线场景，深入了解业务逻辑和用户使用场景，在不断深入的用户调研中，也收获了一些心得和经验，所以和大家分享一下我常见的三种用研方式，相关物料可以通过文章底部的原文链接得到获取方式
1.1设计师为什么需要了解用研
我们对产品进行设计探索的本质是利用已知信息去挖掘未知信息，最终利用获得的信息进行决策的过程，信息的完整、准确程度与判断力、等共同决定了决策过程中错误决策的概率高低
用研的过程就是一个信息的收集与处理的过程，在信息不足时我们可以通过同理心来“侧写”用户心智推测信息，这一点从事C端设计的小伙伴应该感同身受，但由于B端用户画像与设计师自身往往偏差较远，单纯的通过同理心来感知用户心智的门槛和难度较大
此时我们就需要通过用户研究的手段获取更准确更完善的信息，通过用户研究，设计师可以贴近一线场景，了解用户的真实场景和工作诉求，切身感受到产品的业务逻辑和使用链路，以便我们进行更准确的设计决策，同样的，这样也可以让我们的设计方案在讲述时有理可依，有据可靠，更容易获得上下游的信任
接下来是我对于可用性测试、用户访谈、问卷调研的学习总结，简单与大家分享，大家有什么见解也可以互相交流
1.2用研的纬度
这是《赢在用户》书中经常被人用到的用户研究二维分布图，这幅图很好的展示了用户研究的纬度，横轴是研究用户的结果；纵轴是理解用户的方式，行为、态度，即观察用户做什么、听用户说什么，因此，用研主要通过定性调研和定量调研分别关注用户的行为或者态度
那么什么是定量，什么是定性，行为和态度之间又有什么样的关系，在正式进入用研工作之前，有必要对这四个方向进行一个简单的了解
定性与定量
定性与定量是用户研究中常用的两种方法，两者之间性质和分析方法有一定的差异
定性研究主要回答“是什么”和“为什么”的问题，是对种类或者质的差异的分析，说白了就是通过经验、逻辑、同理心等非量化的方式去分析【主观】的信息
定量研究，除了能告诉我们是什么以外，还能告诉我们“是多少”，一般指具体【客观】的数据信息
通过上述示意可以发现，定量更加在意得出的数据，至于为什么会得出这个结果，就需要通过定性数据去验证，因此定性分析在一定程度上会更偏向于阐述某件事物的意义
二者是站在不同的角度看待问题——定量关注数，定性关注人，在实际工作中定性与定量往往相互配合，例如通过定量挖掘关键数据，再用定性剖析原因，最后定量进行验证，两者结合以求得研究效果的最大化
行为和态度
行为主要是指用户的某种动作，比如操作时的点击、滑动，以及视觉的关注点、肢体语言等，这些都是下意识，无需思考的行为数据，这些数据可能与信息层级、传递效率、操作时长、交互链路等息息相关，观察收集这些行为数据的最终目的是了解用户为何按照自己的方式进行操作，与我们预期设想的路径有什么不同之处，进而探究是什么促使用户做出的行动
态度则是用户的主观想法或者情绪，情绪会诱发用户产生一系列行为，例如操作遇阻时的焦虑，对产品体验不满的愤慨或者Aha moment时的惊喜这些都反映出了用户对于产品当下体验的一个态度，关注这样用户态度就能收集到产品体验的信息，所以，用户行为导致了某种结果，态度则揭示了影响行为的根本原因
在了解了定量与定性，行为与态度之后，我根据目前工作中常用到的可用性测试、用户访谈、问卷调研，并对每个方法的适用场景和进入调研的关键动作进行详细分析
在开始进行用户调研之前，我们需要根据具体情况确定调研形式，以便实施后续的展开工作，根据用研目的、产品设计阶段、频次、所需样本量和成本等多方面因素进行考虑，选定适合当下情况的调研方式
1.1明确测试目的
首先应该以目标为导向，确定需要测试的产品是什么，想要验证什么样的结论或者达到怎样的预期，是为了发现产品或原型中可用性的问题，还是借此与竞品进行有效性、效率、满意度的比较，或是对某些功能点进行测试
1.2设计测试任务
在明确测试目的后开始设计测试任务，测试任务是可用性测试的核心内容，需要根据已经确定的测试目的结合用户在实际使用过程中可能存在的场景和需求，将任务场景化，然后对复杂任务的整体流程进行拆解，列出任务列表，以此来编写任务提纲
任务包括场景，操作和具体目标，设计的任务要有代表性，对应的功能或模块必须是功能使用的典型场景、尽量模拟用户真实的使用场景；在任务描述时做到语言简洁，避免指定的操作或引导用户，若任务流程较长，可以进行拆解形成多个用户触点，但触点操作不需要告知用户，仅在用户操作时进行观察即可
1.3 设定衡量指标
在设计好测试任务后，我们需要为任务匹配对应的可用性指标，目的是为了通过指标反应测试内容的可用性问题，帮助实施者有重点的进行观察和记录，还可以结合ASQ量表帮助测试者对每个测试任务的完成情况和满意度进行反馈
可用性指标主要包括有效性、效率性、满意度；这三者构成了衡量指标的一级指标，而每个一级指标下还包括更加细分的二级指标及衡量方式和标准，这就构成了可用性指标对照表；我们依照可用性指标对照表对每个任务的重点有了基本的概念，并且可以根据具体任务描述和衡量指标得到测试记录表
现在我们对每个任务的可用性指标有了基本的概念，但是可用性问题除了从实施者角度去观察用户行为和结果，还需要帮助测试者结合任务进行自评和反馈
而在帮助测试者进行任务反馈时，需要将有效性、效率性、满意度站在测试者的角度进行更加通俗易懂的拆分和信息传递，并且能够做到量化分析，这也就是ASQ评估量表的作用和目的
有效性可以理解为任务的完成情况，即成功完成、求助后完成，未能完成
效率性则是针对特定任务，观察其完成时间是否在正常范围内，其任务完成路径是否符合标准路径，是否存在偏离和犹豫的地方，在进行定量研究时常用指标有任务完成效率、理想路径偏移率等
满意度则是用户自我报告数据，包括任务完成难易度评价、任务完成满意度评价、及评价原因
根据场景描述、测试任务、节点反馈和ASQ评估量表，我们可以得到“任务卡片”，“任务卡片”可以帮助用户快速进入角色，明确内容，量化反馈，在每次任务完成后，将测试者所勾选的ASQ选项对应的分值相加，便可以得到任务评估分值
1.4准备测试脚本
可用性测试一般情况下需要两人协同配合进行，通常一人安排任务鼓励用户发声，一人观察记录，由于涉及内容较多，成本高样本含量低，对被试用户进行的活动任务也比较复杂且环环相扣，所以为了保障测试任务更好的实施，一般情况下会准备一份较为完整的测试脚本以供团队更好的配合
一般测试脚本包括自我介绍、访谈预热、测试规划、测试任务、量表问卷（可选）、结束语、记录文档、相关文档
1.5准备测试原型
1.6招募用户
用户可以大概分为新手用户和专家用户两种类型，当然也可以进行更精细的划分，例如（萌新、高浅、活跃、专业）在招募时为了结果可靠，应避免产品设计相关人员的参与，选择有代表性的用户，其中真实的产品目标用户为最佳，测试者不宜过多，一般5名左右就够了
例如调研XX产品的直播教室的可用性问题，就需要招募已在平台入驻且售卖直播课的老师，在招募时还需要进一步的筛选，如果招募的5名老师都是长期使用平台产品进行直播上课，用户对于产品功能足够了解，关注点会与新手用户会产生较大的差异
1.7准备场地
包括预约测试场地、记录设备、分配主测员和观察记录员、准备相关话术及活动礼物
测试场地：一般选择安静明亮的房间/会议室进行，访谈者和用户最好呈90度的座位
记录设备：安装测试产品的电脑、手机；记录设备可以使用录音笔、相机或DV。设备要稳定，电量充足
2.1暖场
在了解用户情况和布置任务前，不要太直接的进入测试氛围，营造一个相对轻松的交流环境。先聊点轻松的话题，“您从哪里过来的呀”“平常工作忙不忙”等问题，缓解气氛，把用户带入测试场景。可和用户聊聊被测产品相关的小问题，平时怎么用的？一般什么时候用？感受怎么样等等
2.2布置任务
向测试者发放任务卡，结合任务卡中的角色和使用环境对任务进行简单的介绍，如果是专家用户任务就不用过多描绘场景，可以具象更具体的任务——“上传一门新的课程、将课程分成基础班和进阶版分别售卖”等等
2.3观察并记录用户使用过程
这个过程观察记录和引动测试者随时的发声很重要，与其他用研方式不同的地方在于可用性测试可以了解到用户在操作时的想法和行为，用户的发声思考可直接影响可用性测试的效果和结论
我们可以适当引导用户进行思考发声，甚至可以为用户做一些简单的示范，例如 在新建时，可以说“我准备新建一门课程”，“我正在寻找建班功能，我现在遇到一些问题”等等，将自己操作时的想法表达出来，不需要刻意去思考，这有助于主测员去了解测试者的想法和感受
每个任务完成后，通过“任务卡片”重点回答测试者任务的完成情况，遇到的问题，询问测试者的态度和感受，还需记录任务完成的时间；与任务不相关的反馈可以记录在备注中，而在记录时尽量采用词组、短句的快速记录方式记录核心内容，整理后作为优化任务帮助产品进一步提升可用性和易用性
2.4进行量表问卷
ASQ量表
上面在介绍可用性指标及任务卡片时我们有提到ASQ量表，其主要涉及有效性、效率性、满意度3个方面，安排在用户完成单个情景任务之后，这时用户对于任务流程的操作感受是最明确和清晰的
SUS量表（可选）
SUS量表一般在相对完整产品整体的大型可用性测试后才会使用，因为一般的中小型测试任务比较集中和针对，用户无法感知整个系统，量表针对测试设置10个问题（有效性、效率、满意度），包含5个选项：1分（非常不同意）、2分（不同意）、3分（一般）、4分（同意）、5分（非常同意）
在布置问题时，奇数问题采用正面阐述，偶数问题采用反面阐述，以此来确保用户评价的可靠性
单个测试者提交量表后，我们需要计算量表分值，奇数项计分采用“用户打分”-1，偶数项计分采用“5-用户打分”，由于是5点量表，每个题目的得分范围为0-4，共10题，所以最大值为40，而SUS的范围在0-100，所以需要将所有转换分相加后乘以2.5，即可获得SUS分数
3.1问题归类分析
简单测试直接根据发现的问题优化设计即可；如果目的是用于讨论和汇报，需要对记录内容进行整理和输出，这时需关注问题的出现频次、优先级和用户反馈，按照问题维度分类，将不同用户暴露的相应问题进行合并，罗列问题所对应的功能点、可用性指标、用户比例、用户反馈及相关现场记录文件，之后基于问题对业务和体验的影响划分优先级并且标出对应的PM同学，最后针对这些问题给出优化建议
问题优先级的划分方式
通过前期记录观察以及录音录屏我们可以发现用户在任务测试中遇到的问题，根据问题对任务完成度的影响，我们可以划分为P0（紧急问题）、P1（重要问题）、P2（次要问题）的方式对问题进行优化和排期
P0：用户遇到阻力且无法解决，未能完成任务的问题
P1：用户遇到阻力且反馈频次较高，在求助后完成任务的问题
P2：用户遇到阻力但可以自行解决，完成任务但感到不顺利的问题
3.2输出测试报告
较大的可用性测试在得出结果后需要向团队内的成员分享，所以需要进行一次报告输出做到内容对齐，一般包含整体概括、重点发现、项目背景、测试过程、测试结论、优化方案几个模块，具体汇报形式是不受限制的，一般文档形式输出较为高效，keynote汇报从内容和形式上会更加丰富
整体概括可以将测试背景及测试结论简单的阐述，其中测试背景包括（项目背景、测试内容、施测情况），测试结论包括（测试结论、优化建议）
项目背景就不必多说了，将业务背景和测试目的进行简单概括即可
测试过程包括准备阶段（如何招募用户、招募了多少名、用户的基本信息和类型；有哪些测试任务、如何进行测试和记录形式）及测试阶段（本次测试安排的任务、设计的量表问卷、现场的录像照片）两个环节进行展示
测试结论需要将暴露的问题进行问题描述，结合整理的文档表格详述问题未读和用户反馈
最后，结合问题提出完整深入的优化建议和解决方案
3.3后续跟进方案
探讨解决方案：协调产品、设计等多个角色来探讨合适的解决方案，要注意，设计时要思考新方案是否会带来新问题，并再次通过可用性测试来验证新的方案。
持续跟进：了解项目结果的落地情况；已改进的问题或遗留的问题可在下个版本的测试中继续跟进
在进行问卷调研之前，我们需要认识到问卷调研包括两种调研类型，定量调研与定型调研，实际上大部分的问卷都是定量调研，需要大量的用户样本，在收集问卷后需要分析数据占比来验证用户想法，另外小部分就是定型研究，一般原因是因为用户样本量较小，通过小样本量来研究产品的可用性问题
1.1明确调研目的
问卷调研中设计者并不直接接触用户，所以在问题的深度和广度上是有限的，一份问卷不能解决多个问题，通常会围绕解决1-2个核心问题去研究，在设计问题之前需要明确此次问卷调研的目的，然后围绕这个目的去思考各种问题，通过怎样的问题达到怎怎样的结果
例如通过思考和确认，针对我们这款由0到1的知识教育平台型产品，其调研的目的主要在于
需求验证，包含对用户进行市场分析、了解现状、发现问题，从而提供解决方案，再到两端用户是否满意现在的解决案
用户接受并付费的意愿如何。收集用户信息、挖掘分析用户的付费意愿以及付费习惯
问卷的目的一般可以分为六个方面：
1.2目标用户分析
对调研用户进行分类是较为重要的环节，用户类型不同，问题内容也不同，只有在不同角度不同用户下设计的不同问题才会获得有价值的结果
这种情况在问卷中还是比较常见的，例如我们填完问题一后，根据选择的不同，可能会跳转到问题三或者问题五，这就是问卷设计者根据不同用户分类进行的多种问题设计
例如在收集知识平台满意度和相关竞品使用习惯时，个人机构和组织机构的视角是不一样的，B端客户和C端消费者的视角也是不一样的，所以在问题设计时需要分开对待
问题根据用户分类设计的好处在于问卷后期可以快速验证产品的用户类型和比例，提高调研质量和数据可信度，便于后期对用户进行更加深入的调研
举例
结合上面调研的目的及用户分类，以此我们思考在问卷的设置方面：
对于B端（老师）来说，首先要了解的是客户目前是否有在使用我们提供的服务、什么时候会使用、使用的频率是多少、目前使用的体验如何、有没有遇到什么问题、有什么建议、对我们提供的解决方案是否愿意接受
对于C端（学生）来说，首先需要了解的是用户基本信息，是否使用过课程相关的服务，用过哪些竞品、吸引用户的点在哪等等
1.3内部需求对齐
当需要有问卷调研的需要时，首先应该与团队内部各合作方对齐调研意向，一方面是为了避免过量的问卷投放打扰到用户，另一方面问卷调研属于团队项目，在团队内部充分讨论调研目的后或许你会了解到各业务方当下最关心的用户问题从而调整调研问卷的内容甚至得到更好的解决办法，这样一来才能将问卷调研的价值最大化
例如教育平台侧在新版本上线前为了调研售课老（机构）师对平台使用的满意度和深层次的需求问题，那么在发起调研之前，需要跟产品、教研、客服等业务合作伙伴对齐需求
2.1划分问卷模块
设计具体问题之前，我们需要预设几个问卷的模块，通常围绕几个类型：用户类、行为类、产品类、态度等，在得出完整的问卷之前，我们不需要考虑问题的先后逻辑是否合理，先根据调研目的和模块类型进行问题穷举，当用户模块相关问题写完后再继续写下一个模块的问题，直到所有模块的问题都已经设想完毕，在对问题进行重组
用户类：收集用户基本情况，方便我们了解用户群体，比如：职业、学历、团队构成
行为类：了解用户的行为或者与围绕产品相关但不涉及产品本身的问题。比如：有没有在其他平台入驻、售课时视频课比较多还是直播课比较多
产品类：了解用户直接与产品相关的体验问题。比如：对产品印象如何、一般使用某产品的哪些功能、频率怎样、还用过哪些竞品、喜欢哪些功能
态度类：用户对产品的看法。比如:评价、好感、想要的功能；尽量避免提一些无法判断、没头没尾的问题，一方面对产品优化没有帮助，另一方面会降低用户的的期望
2.2衡量问题类型
问卷的问题形式是多样的，题目类型主要有封闭/半封闭问题、量表式问题、开放式问题组成，需要根据具体目的来选择相对应的问题
封闭/半封闭题型的选择在于能否将答案穷举，避免出现用户因为没有合适的选项而随便勾选答案的情况
量表题型在答案上有明显的程度高低区分，设计者对该问题有进行统计的需求
在问卷中应尽量避免较多的开放问题，一般在针对某种方向/某个定性的问题做预探索时使用
这里只对问题的类型做简单的概述，具体的形式是多样的，例如选择题可以有单选、多选、图片选择；量表题除了打分之外，还有排序和点数分配等其他形式
2.3问题重组
在得到具体的问题后，我们需要对问题进行重新编排，通过改变问题的前后顺序来保证用户在可控的情况下进行真实的问卷回答，除了按照问题的难易度之外，还需要根据问题的属性由浅入深的重组问题
例如问卷开始先安排过滤题用于过滤用户，识别用户是否符合问卷的目的来保证问卷数据的质量，然后按照暖场型问题、渐入型问题、高难度问题、敏感问题来对问题进行重组，当然这些顺序并不是固定的，需要依据具体的问卷内容进行调整
关于过滤问题：
用户在实际问卷回答中，受到各方面因素的影响有很多，例如有时用户出于自我暗示、自尊心或者时间紧张状态下，很难根据自身实际情况完成问卷调研，而是随机挑选或者作出相反的选择，这种问卷在回收后会对定量分析造成干扰，所以我们需要依据问卷重要程度，安排适量的过滤题来避免此类情况的发生
比如在对于关于产品改版的满意度调研中，向用户询问有关产品功能的问题
如果用户回答“某某功能”，但在是否知道时选择了否，或者使用时长很久，但却不知道某某功能时，在后期数据中，可以将这部分无效问卷去除
问题注意事项
3.1问卷评审
一切准备就绪，是不是准备投放问卷了？别急，许多问卷在投向用户之前，往往会忽视通过内部手段进行问卷自评，通过问卷自评可以发现这份问卷有没有偏离最初的调研目的，你所设想的问题用户是否可以正确理解、问卷是否有可优化的空间等
一般自评包括3个环节：问卷自审、问卷内审、问卷内测
问卷自审
问卷设计完毕之后，需要根据最初确定的调研目的对问卷进行自审，可以站在用户的视角对问卷进行第一次填写，确定问题是正确有价值的，是有其他选项，也可以估算回答问卷所用时间，问题中的词语是否能被用户理解且没有歧义等
问卷内审（可选）
不少公司内部有设立专门的用研团队，在确立调研需求初期就应该与需求方深度绑定，有明确的需求认知，有句话叫当局者迷，邀请用研团队参与审查可以从专业角度把控用研目标，评估问题是否能被用户接受等，他们可以从一些不同的角度发现问题
问卷内测（可选）
内审之后，可以借助产品的代表性用户（一般3-5人）进行问卷内测，通过观察填写情况来检验问卷设计的合理性，例如观察答题时间、用户类型与题目是否关联等等，确保证问卷上没有其他问题
3.2预计采集样本量
内测完毕之后，就可以向用户投放问卷了，为了避免给过多的用户造成打扰，我们需要根据产品的用户数量判断问卷的投放数量
一般没有明确规范多少用户投放多少问卷，基本都是自己判断，一般如果总用户量不足30，需要至少覆盖50%（15个）；如果总用户量30-100，30人以上就可以；如果是总用户量100-1000，覆盖20%-50%就可以。
3.3选择投放渠道
我一般常用投放渠道有：1）飞书推送；2）站内公告；3）其他内部资源
问卷调研基本分为线上调研，线下调研两种方法，线上通常是问卷投放或者电话询问的形式，线下一般与用户访谈相结合，做到定性定量相结合；选择投放渠道时，一般根据调研目的、投放预算、预计采集样本量、统计分析成本来进行判断
一般用研团队会使用专业的解决方案快速作出数据分析，比如SPSS，而设计师在实际工作中很少会接触到此类工具，因为此类视角下探索的方向和内容更加具体，变量在可控范围之内，不太需要复杂的分析模型，较为常见的更偏向Excel或者问卷平台自带的分析功能，所以我们可以对分析思路做一个简单的了解
4.1数据清洗
前面在问题设计时我们有讲到筛选题相关的内容，加入筛选题的目的就是在数据分析前便于我们将异常问卷剔除出去，保证最终结果的准确性，除了观察筛选题的选项之外，我们还可以根据问卷填写时长、量表打分规律、问卷填写完整度等几点进行问卷筛选
4.2问卷分析
看整体
还记得我们设计问题的第一步划分问卷模块吗？模块通常围绕几个类型：用户类、行为类、产品类、态度等，在分析问卷时可以基于这些结构得出一个较为整体的情况分析，例如用户群体结构（用户类）、存在的问题和新的诉求（用户建议）等，通过对比相同角色的回答，找出共性的问题和信息
看差异
在得出整体结论之后，我们可以通过差异分析深入挖掘更多信息，例如观察不同用户角色对于产品的建议或者评分，会发现用户角色对于产品的建议和需求是不同的，这种分析方法重点在于找到两个可能存在关系的因素，通过对比不同角色的回答，找出差异和影响因素，根据上述举例就是将（是什么）（怎么样）进行差异对比
问题归类
根据反映问题的模块对用户问题进行归类分析，写明用户的问题描述和具体模块，并且对后续优化提供解决方案
4.3产出报告
问卷报告一般包含调研背景、问卷回收情况、调研结论（功能优先级、用户反馈、数据展示等）、整体评价（功能评价、体验评价）、等，分析时从数据出发找出差异，分析原因，给出结论，在具体汇报时可以按照先结论后具体问题的方式呈现报告，同时可以结合数据提供相对应的解决方案
1.1明确访谈目标
明确访谈目标，可以保证访谈内容在大方向上是一致的，例如调研班主任实际外呼的场景及外呼时关注的信息，在访谈时就不会去问关于主讲排课的问题，也可以防止访谈过程中遇到富有表达欲的用户偏离主题，在访谈过程中难免有用户兴致勃勃的谈论自己对产品的看法，在这种情况下，拥有明确的访谈目标可以保证深陷用户的情境中不迷失访谈方向，保证访谈的最终结果是有价值的
1.2确定访谈类型
根据不同的访谈目标，可以分为三种访谈类型：
开放式访谈
在围绕的主题和问题上都是开放的，没有固定的问题也没有固定的答案，采访者可以根据受访者的表现进行相应的问题补充，受访者可以充分表达自己的观点和意见，氛围最为轻松，接近人们日常的对话，适合进行定性研究。但即使是选择了开放式访谈也需要事先准备访谈提纲来确保此次访谈是有效的
结构式访谈
有严格的问题顺序，采访者必须按照顺序和题目提问，受访者回答的答案都是固定的A、B、C、D，这就需要采访者必须有一个很清晰的目标，在问题的设计上要仔细推敲和打磨受访者可能回答的形式，当然，再缜密的设想在实际访谈中也会有意外，所以也会设置一些开放性的问题让受访者可以自由的进行表述，并给出更加开放和深入的回答，适用于定量数据的研究
半结构式访谈
是实际工作中运用的最多的一种形式，在形式上是结构式与开放式的结合，包含了固定的的问题之外，也设置了开放式的问题，根据访谈时的受访者的实际情况进行问题的增减，适合定性+定量研究
按照访谈的途径来划分，又可以分为线上和线下两种，在受访者不方便的情况下可以进行电话访谈的方式来进行，但是如果访谈包含较为复杂的经历和过程的询问，线上访谈比线下访谈要逊色不少
1.3设计访谈提纲
明确访谈目的与访谈类型后，就要基于访谈目的，拟定访谈提纲，访谈提纲是方便与用户交谈过程中抓住核心，保证访谈高效有序进行的关键，就类似一个标准流程，保证需要研究的问题都可以包含在内，访谈提纲一般包含五个部分，分别是访谈目的、开场白、提问访谈、用户演示、结束语（基本信息、过往经历、产品感受、流程体验、竞品体验），其中提问访谈可以根据具体的访谈内容展深挖细节或者发散问题
提问访谈是提纲中较为重要的一环，问题设计要由易到难，由浅入深，由边缘到核心，在开始阶段设计一些简单的开放式问题来营造访谈的氛围，这个过程中可以了解用户的基本情况或者对产品的使用情况，等访谈向一个方向聚焦时，再逐渐收缩问题范围，逐步追问核心问题
设计好的问题还需要整理成访谈记录表，在进行访谈、时，一方面按照访谈清单大纲尽可能的进行脱稿提问，另一方面则需要记录用户对于问题反馈，记录问题时记录员最好记录用户的逐字稿，以便于后期进行记录整理时不与用户表达产生偏差
1.4招募用户：
用户招募是较为重要的一环，承接访谈前后两个阶段的关键节点，用户招募准确，后面的访谈才有实际意义，招募哪些用户是由访谈目的所决定的，一般招募环节分为三部分
1.41.明确目标用户
招募用户的选择是由访谈目的决定的，不同的访谈目的所招募的用户是不一样的，一般按照使用产品深度的纬度来划分用户
核心用户：产品中较为活跃的用户
边缘用户：产品中即将流失或者已经流失的用户
潜在用户：当前并不是产品用户，但在产品定位的用户群体中
而访谈目的一般有两种情况
研究产品所存在的问题，例如研究一下最近用户活跃度为什么下降
研究产品目标用户所存在的需求，例如研究用户对新功能的满意度
所以如果访谈目的是发现产品现存的问题，那么应该去寻找核心用户，他们那对于产品有着明确的认知；但如果为了增长，则应该寻找边缘用户和潜在用户，他们会告诉你他们需要什么，你需要做什么
1.4.2多渠道招募
面向内部用户的产品进行用户访谈时，一般直接找对应访谈者的leader或者pm沟通即可，而在对外产品时则需要根据确定的筛选条件进行用户招募工作
核心用户的招募相对边缘用户较为简单，一般可以通过行为日志数据、登录时留下的联系方式、产品用户群或产品内运营推送推送来招募核心用户
潜在用户由于对产品接触较少，一般通过问卷、外包招募、熟人推荐的形式进行招募
1.4.3验证目标用户并邀约
在得知用户是否愿意接受访谈后，需要再次验证这些用户是否真的符合样本特征，要注意的是，筛选访谈对象要注意平衡，避免同一类型的对象占了过多比例，导致访谈结果不全面
例如做一次关于学习平台APP的功能优化访谈，就要避免对象大部分是管理者、80后的情况，因为用户不是目标用户、80后用户的需求频率不大
很显然，90后/95后/00后、大学生/刚进入职场的职场新人才是我们的目标用户，那就根据这类人群的角色模型来筛选邀约对象
1.5准备场地和物料
场地选择
用户访谈的可选场地有很多，大部分是请用户到公司来使用公司的会议室，或者有的公司拥有休息区或者共享空间，环境较为舒适和温馨，也是可以的
需要注意的是，场所的选择也会对访谈有些影响。应该尽量选择温馨舒适的环境来打消用户的紧张感
物料
采访者需要提前准备好物料，包括访谈记录表、访谈提纲、录音设备；访谈时可以一人负责提问，另一人负责记录，在使用录音设备对受访者进行录音时，需要提前告知并取得同意
2.1开场白
在一切准备工作ready之后，可以进行访谈了，访谈中难免遇到一些不善表达的用户，如果一开始就切入正题进行访谈，访谈者可能在紧张的状态下无法与采访者达成信任关系，气氛就会有些尴尬
所以需要先进行简单的寒暄和自我介绍让气氛轻松起来，还可以简单介绍访谈的背景、流程、内容、时间，告知受访者今天只是探讨问题，没有对错之分，所以希望畅所欲言，不要掩饰真实想法
2.2访谈并记录
还记得咱们前面准备的访谈提纲吗？在进行简单的暖场之后，我们可以先对用户的基本情况和使用经历进行询问，从职业、流程、爱好等基础信息作为切入点，为用户营造特定的使用场景，然后再进入访谈环节
访谈时，抛出问题的目的不仅仅是得到用户的一个结论，而是希望用户借此将自己的体验和前因后果告诉采访者，然而很多时候，用户告诉我们的信息都比较浅显，比如“我想要个xxx功能”“我觉得xxx挺好的”，这时我们需要对用户想法刨根问底，从而证实用户说的“想要xxx功能”是否合理，或者看能否想到其他解决方案
如何刨根问底？
1、结合梯子理论，通过问用户以下4个层层递进的问题，来了解用户需求和用户心理
属性：对于这个产品，你最在乎什么功能？
利益：你为什么在乎这个功能，它可以解决你什么问题？
心理：解决这个问题，可以达成你什么目标？
价值观：你为什么在乎这个目标？
2、情景再现
回答提问时，用户很少会去主动联想具体使用场景下的体验问题，比如当你问“上次旅行去哪玩了？”用户大概率会回答“去环球影城玩，人特多排队两小时，玩了个什么叫鹰马过山车，20秒，下次去绝对买优速通...”并不会告诉你怎么去的、以什么标准定的酒店、为什么选择这个项目/地点，等等这些更想要了解的问题告诉你
我们需要帮助用户在基本体验之上还原体验的动机，引导用户对使用场景进行还原，了解用户当时场景下的行为，再针对场景和行为去挖掘用户产生这种体验感受的动机
3、鹦鹉学舌
复述的时候，有时用户还会根据你的复述追加一些他当时没有想到的关联信息，比如“你的意思是。。。我的理解是。。。对不对？”这样可以避免双方理解的偏差，还可以总结提炼用户的观点。这样又可以挖掘到更多内容
2.3结束语
在访问结束后，我们可以与用户一起快速回顾访谈的内容，如果用户有提出一些意见或者建议我们可以再复述一遍进行查缺补漏，并将事先准备好的礼物或者酬劳送给用户表示感谢，向参与度高，善于沟通的优质用户表示保持联系，留下联系方式方便后续进行可用性测试或者再次访谈
3.1整理访谈内容
一般是在两个用户访谈之间的间隙进行笔记的整理， 将用户的口头语言转换为书面语言，这样一方面减少后续因访谈内容大量堆积而形成的整理压力，另一方面可以根据上一场访谈进行复盘，从而对下一场即将开始的访谈进行内容调整，在整理时我们需要将重点放在用户的提出的问题和负向反馈上
3.2问题归类分析
整场访谈结束之后，我们会发现用户会提出各种各样的问题，我们需要依据问题的纬度进行分类，将不同用户遇到的相同问题进行归纳
问题归纳主要包含两个部分，主要问题和具体问题，主要问题就是访谈中出现的较为明显的反馈问题，例如“超7成用户对首页推荐的内容并不感兴趣”，而具体问题则需要明确用户反馈原因、对应的功能模块和问题类型
3.3产出报告
访谈报告是至关重要的，一方面可以和大家共同讨论发现用户真实想法，另一方面也方便产研团队根据问题关键点投入人力作出进一步优化，一般在访谈当天完成结论报告，时间有限是以关键结论为主，具体问题可以后续补充。访谈报告一般包含访谈背景、参与人员、用户信息、主要问题、具体问题、用户建议、优化建议
本篇文章是我学习到的用户调研的三种方式，调研方式不重要，重要的在于如何理解用户需求，真正了解用户想要的是什么，无论B端还是C端，产品最终还是要服务于用户，作为设计师同样需要了解用户研究，只有对用户足够了解才能作出高体验质量的产品
以上就是我关于用户研究的学习和分享，欢迎大家一起交流讨论~
文章来源：站酷 作者：Hi阿良
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
相信网站视觉设计的重要性大家应该都清楚，对于普通访客来说，网站的框架、交互逻辑等这些都是其次的，访客首先感受到的是网站的视觉设计，同时视觉也能够直观地表达出我们所要传递的价值。因此，我们在建设网站时，一方面需要确保网站的视觉效果足够优秀，另一方面需要保证视觉能够传递正确的商业价值。
艺术与商业的本质其实是感性与理性，两者之间没有绝对的好与坏，相辅相成才是发挥价值的关键。
企业以盈利为目的，其网站不可避免地也附带了商业属性，甚至是网站本身就是为了商业而创造出来的，其商业价值占比也更重。但人类作为视觉动物，视觉感受对于访客来说尤为重要，视觉上的演绎比起网站其他内容，更会影响网站的可信度，因此，网站的视觉起码需要保证符合受众群体的基础审美。
增长超人这些年接触了大大小小几千家企业及企业官网，深入探究之后我们找到了一些规律，网站的视觉设计其实关键在于：
·品牌基础 VI 设计的应用；
·平衡艺术与商业的网站设计思维。
我们常见的企业网站存在着一个严重的问题，缺乏品牌辨识度，假如把网站左上角的品牌 LOGO 遮住，可能完全看不出这是哪家公司的官网，又或者把品牌 LOGO 替换一下，就成了别家公司的官网。
这是网站严重缺乏品牌视觉识别所导致地，这种网站无法让访客记住其品牌，更无法在访客心里占领一席之地。
品牌基础 VI 设计的应用是最基础也是最容易忽视的细节，它不仅是存在于初期建站，更是在网站迭代中，持续保持企业网站差异化的关键。
VI（视觉识别系统）是品牌的视觉符号化，是品牌识别中最具传播力和感染力的部分，它可以将品牌识别系统的非可视化内容，转化为静态的视觉识别符号，它包含了品牌 LOGO、标准色、象征图形、标准字体等等。另外还会包含品牌核心价值和个性，不同的品牌 VI 是各个品牌之间形成差异化的根本原因之一。
因此，我们可以通过与品牌 VI 相结合的方式进行设计，品牌 VI 可以有非常丰富多样的应用形式，在广泛的层面上进行直接的传播，能够在不同场景中进行应用，让人们快速辨认出该品牌。
品牌 LOGO 则是最具辨识度的视觉符号，通过提取 LOGO 中的基因，延用到我们网站中，更有助于提升品牌辨识度。我们可以从两个维度来提取：
·LOGO 的“形”
·LOGO 的“色”
首先，我们可以通过提取 logo 的形状作为网站视觉设计中的「视觉符号」，也可以参考 VI 手册中的「象征图形」进行延展，提取 logo 外形结构做成相应的 icon 或是动效等是 logo 元素的直观体现。
举个例子，天虹的 logo 是一抹橙色极简的彩虹形状，天虹企业简介的Banner 以及每个页面的底部导航，都有将 Logo 这一特征延展出来的图形设计。
▲天虹官网页面 Banner 展示（增长超人出品）
▲天虹官网底部展示（增长超人出品）
这种方法需要我们很好地提取 logo 中的部分结构 , 或根据造型转变为动效、icon 等，这样在网页中的融入感十分可观。
提取 logo 中的标准色或代表性的颜色与网页元素相呼应，也是一种常见的方式。将 Logo 颜色通过网站中的文字、页面板式、icon 设计表现出来，这是很好的一种呼应方法。
比如：绿色是绿革的标志性颜色。打开绿革官网，可以清晰直观地看到绿革将 logo 中的两种绿色元素，融入到网站界面 UI 中，需要突出的文案也会运用这两种绿色去做表达和强调。
▲ 绿革LOGO
▲ 绿革官网首页展示（增长超人出品）
在网站设计中，我们可以将标准色换到标题文字、icon、控件。访客打开网站时会很容易被这些颜色吸引，也不会感到突兀，合理运用 logo 颜色，可以统一网站的整体视觉且做到突出重点与更有效地传达信息。
品牌 VI 可以在三个维度应用到网站设计，来提升网站的辨识度：
品牌 VI 的应用常见的方式就是在 icon 图标的设计上。icon 作为网站的重点图形，能够让访客感知品牌，精致的 icon 可以让表达更简单高效，要打造一套精致的 icon，我们可以从识别性、规范性、整体性和品牌感四个方面着手。
识别性：icon 的作用即是帮助访客理解网站信息，特别是在没有文字说明 的情况下，icon 的设计需要具备让访客快速认出的高识别度，不能让访客 产生疑惑。
规范性：每个 icon 要保持视觉大小、色彩等一致性，以及图标饱满度等细 节都需遵循同一规律，例如：绘制风格是否一致，使用的圆角或直角是否统 一等等。
整体性：除了 icon 自身的设计之外，整体的设计风格要与网站基调达成一 致，不同网站有不同定位，面向的目标访客群体自然有所差别，那么整个网 站的 icon 设计也不一样。
品牌感 : 提升品牌辨识度离不开品牌感， icon 设计要与品牌调性、理念相 符合，传达给访客一致的感受。比如：提取品牌色、采取品牌图形作为图标设计视觉元素，从而加深访客对品牌色的感知。
icon 设计中的品牌感是将品牌 VI 应用到网站的关键，比如上方的那套icon，是由增长超人根据英威腾本身的品牌色彩和品牌调性进行设计，应用于官网是这样的：
另外，icon 是网站中不可或缺的元素，充当路标，让访客能知道点击后下一步是什么，也就有明确的心理预期。如果 icon 按钮不够明确，访客可能会不知道下一步是要购买产品还是注册用户，并且可能直接浏览网站后就直接离开。
版式如何融入品牌调性是很多设计师会忽略的一点，访客来浏览网站时，首先感受到的第一点是色彩，第二则是版式，也就是整体给访客的感觉。符合品牌定位且具有辨识度的网页版式设计应该怎么做，它更需要从品牌特性中提取，无法像 icon 一样从品牌 logo 和标准色中提取元素就可以做到的，更多是一个风格化的设计。
除了静态的图形设计，品牌 VI 也可以融入网站动效，利用品牌 LOGO 的设计元素和结构进行设计的动效，可以让整个网站更有品牌风格。一个好的动效能够满足网站功能的表达，强化品牌特质，而不是只追求表面炫酷花哨的效果。
▲天虹部分动效展示（增长超人出品）
在网站视觉设计中，品牌 VI 的应用不仅能够形成区别于同行的差异化为品牌赋能，还能通过规范化的 VI 应用，提高访客对其品牌的信任度。
品牌的基础 VI 设计应用于网站是我们的常规操作，但要注意细节，别忽视了其作为网站基础的重要性，对于网站视觉设计，我们在保证基础设计无误的情况下，需要深入到思维上，一个网站的设计看似简单，像是色调、排版，都是设计师的基础功夫，但是要真正做到一个优质的网站，其实并没有想象中那么容易。
开头我们有提到：视觉设计如何平衡艺术与商业？大多数设计师在初入职场时 , 都不具备商业思维，首先会经历一段自我怀疑的过程：完成一个稿件后，反反复复被要求改稿，始终无法达到上级的要求，个人价值开始逐渐模糊，沦为一介改稿工具人。
在我们看来，企业网站的视觉设计必须具备商业思维，也就是视觉设计需要体现其想表达的商业价值。因此，在建设企业网站时，我们需要记住以下几点。
不为设计而设计不是将艺术“一棒打死”，也并非抛弃创新创意，而是应该更注重于强化产品，给满足需求的产品力加持。市面上有很多花里胡哨的网站，第一眼可能会惊艳到你，但是再深入浏览发现内容很空洞。事实上，能够让访客长时间记住你的并非第一眼，而是其内在，也是我们一直坚持的长期主义价值。
过于强调设计、艺术、创意，不仅会给网站带来开发难度，也给访客浏览带来沉重的负担。
商业环境下，视觉设计的本质应该是强化产品，升华价值，实际上，设计同样需要具备产品思维。增长超人在建站中已将产品思维全流程化，这种模式下，每一环都串联起来，不管是用户体验，还是价值传递都非常有利。
产品思维全流程化
设计需要理解功能目的，为什么策划这个功能？如何通过设计让访客使用更顺畅？如何让访客爱上这个功能？这都是设计需要不断探讨和思考的问题。设计与产品之间通过产品思维进行联动，能够确保核心目标一致、步调一致，真正创造出一个有价值的网站。
我们始终要对设计的结果负责，各个环节的品牌维护及更新必须形成闭环的设计思考，最终达到“设计应时输出，信息精准传达，符合结果预期”，在落地层面始终执行着的“四环建设”：
第一环：让出品更好看（视觉侧）
第二环：让出品更好用（体验侧）
第三环：让出品高转化（营销侧）
第四环：让出品高价值（品牌侧）
我们一直在讲视觉设计，视觉设计不仅是静态形式，还可以是动态形式，也就是网站上的交互动效，交互不可避免涉及到的领域就是「用户体验」。08年苹果推出 AppStore，App 兴起至今，用户体验就广为人知，在 App 的设计领域更是奉为“宗旨”，当然，在网站设计上同样如此，“以用户为本”就是产品的关键价值，这是我们不可忽视的方面。我们可以参考以下提高用户体验的关键因素：
有用：内容能够满足需求。
可用：网站的内容应该很容易被找到。
可取：设计元素应该贴合情感且具备可欣赏性。
可发现：网站内容容易被定位、被找到且可导航。
无障碍：为有障碍的用户提供帮助。
可信：网站内容应该有权威性且值得被相信。
网站的视觉设计一方面需要服务于内部，另一方面则服务于用户，内部指的是内部需求，比如上级、老板等他们的视觉审美，这是不可避免的，其中平衡的技巧在这里就不过多讲解了。
重点还是在于用户身上，也就是访客。先通过市场调研分析出访客画像，可以掌握对访客的审美基础和交互逻辑认知，结合起来进行设计，当然我们也提倡尽可能简化交互，并且让网站贴合访客喜好，内容一目了然。
举个例子：儿童教育服务的品牌网站，在惯性思维中，大多数人会将其设计得更偏向儿童 , 迎合儿童的喜好 , 但是真正浏览这个网站的访客其实是父母。
因此，从偏向儿童的思路一开始就是错误的，这也是很多企业建设网站的时候会掉入的误区，了解用户是设计不可缺少的一步。
增长思维作为增长超人网站建设三大思维之一，也是三大思维中最能激发网站商用价值的思维。在视觉设计当中，运用增长思维能够有效强化网站，加强网站价值。
我们需要先探讨“网站内容中哪些信息最重要？”“传递这些信息的目的是什么？”例如，一个促销活动版块的营销点是免费领取资料，我们需要理解：最打动访客的是资料还是“免费”，是资料的图片需要更突出还是“免费”的文案更突出？在商业之下，设计也需要理解营销，也需要懂增长。
理解了基础逻辑，就需要进行下一步——强化它们，有效传递价值，实际落地可以参考两个基础理论：
·视觉动线
·视觉层级
视觉动线是指人们在阅读时，视觉移动时所形成的方向路径。早在十多年前，用户体验专家雅各布·尼尔森博士提到“人们很少逐字阅读网页，相反，他们扫描页面，挑选单个单词和句子”。正是如此，人们在阅读的时候才会形成几种常见的视觉动线规律。
Z 型
F 型
基于这两种常见的视觉动线，我们在做网站的版式设计时，可以更合理地策划视觉动线，其好处不仅能够帮助访客快速阅读，快速获取信息，提升用户体验，还可以帮助我们引导访客阅读预设的信息，高效传递高价值信息，提高营销效率。
视觉层次应该很好理解，即人们在阅读时，能从视觉中感受到信息的层次，优秀的视觉层次能够非常高效地引导访客阅读更多内容，并且通过信息的优先级设计更直观地帮助我们达成相应的数据指标。
比如下面两个示例：
视觉动线可以作为网站整体的版式设计思路，而视觉层次则是单个版块的设计方向，版块的视觉层级设计应分为三层：
第一层：访客扫一眼就能理解整个版块的主要内容；
第二层：访客通过仔细浏览能够获取关键内容；
第三层：访客想深入了解可以查看更多，引导深入。
通过上述三层，能有效实现我们增长的目的。 常见的设计技巧为 : 通过「大小」、「色彩」、「重量」形成信息之间的层级对比，建立信息优先级。
除此之外，我们在策划一些网站转化路径时，还涉及到了「 CTA 行动号召按 钮」的设计，这在网站的增长思维中是常见的应用，我们必须确保 CTA 足够 显眼、突出、目标清晰，常规技巧包括：颜色对比、放置显眼位置、层级引导、 文案简洁清晰。
通过这两个基础的设计理论与增长思维的结合，我们可以延伸出很多合理的设计思路，形成有理有据的设计语言，有了方法论才是真正的有效设计，而非“摸瞎过河”。
网站的视觉设计可以被视为一种艺术形式，但与纯艺术截然不同，网站的视觉设计需要建立在牢固的科学基础之上，以理性客观去审视这样设计是否真的能有效传递价值。
视觉设计的本质是什么？很多人认为只是单纯的美，或者无非就是关于审美的答案。其实，这种理解是十分表象的，大多数人并没有理解视觉设计的根本价值。
视觉设计是网站的一个重要层面，网站作为互联网产品，其视觉设计的本质是价值传递，我们一直以增长思维和产品思维与视觉设计相融合，就是为了实现高效传递高价值信息。
访客通过对视觉信息的感知，来决定自己的行为。当我们从信息的角度去理解视觉设计时，可以打破惯性思维对我们的限制，因为视觉设计是一个由抽象信息转换为图像信息的过程，理解这层道理才能真正打造出一个具有高颜值和高价值的网站。
文章来源：站酷 作者：增长超人
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用户喜欢在网上收藏各种东西，把收藏到的东西占为己有，满足自我的占有欲，每个用户都为此而乐此不疲。
很多互联网产品在用户点击收藏后，让用户去选择收藏夹。其实用户并不喜欢去选择，他们只想简单的把自己喜欢的东西收藏下来。
选择本身并不是一件很容易的事情，尤其是对于那些有选择困难症的人来说。实际上，我每次都是选默认那个。
这并不是一个好的用户体验。
当然也有一些做的很好的体验，比如微信的收藏，收藏后会出现一个“收藏成功”的非模态反馈。
同时可以添加标签，但这个并非强制，为了满足那些有这种需求的用户。添加标签的目的是为了方便用户在日后的检索。
在收藏列表，微信会根据收藏的内容自动分成链接、文件、图片和视频等，最近使用位于第一位。
也就是说并不需要用户去创建自定义分类。
你也可以搜索标签来找到之前收藏的内容。通过这些方式基本上满足了大部分用户的需求。
网站会根据你采集的图片在极短的时间内，自动识别出图片对应的收藏夹类型。可以直接采集到对应的文件夹。
然而经过测试，经常会出现误差。因为图片的分类其实很复杂的，属于高度自定义，很显然，智能识别并不是一个好的解决方案。
花瓣是一个设计师收集灵感的网站，该网站常见的用户使用场景是，设计师在浏览素材时，会大量采集自己感兴趣的素材，但每次都要选择文件夹，非常繁琐且低效。
后来花瓣网加入了快速采集的功能，其逻辑是网站会默认选择上一次采集的收藏夹，这大大提高了用户采集图片的效率。
而如果你需要选择其他文件夹则可点击普通采集。这两种采集方式满足了设计师的不同需求。
社区类产品有各种点赞，收藏等互动信息，但用户又不想被别人知道这些信息。
因此，在规划产品时需要考虑到用户互动隐私的保护，这是用户侧的刚性需求。
抖音个人主页的点赞列表，我记得刚开始是公开的，且不能设置为私密。
用户点赞的视频会出现在这里，却少有人希望这些信息被别人看到，总有些点赞视频你并不想被别人看到。
如果点赞列表可见，那么用户在点赞的时候就会有所顾虑，这不利于平台的互动率。
特别是随着抖音上熟人也越来越多，强关系社交场景在渐渐加强。
抖音后来也发现了这个问题，把它设计成了默认隐藏。（当然可以自己设置为公开，但只有极少数用户会这样做。）
由于点赞是私密的，用户可以随心所欲的点赞自己喜欢的视频，毫无社交压力。
这是为何？
源于人性心理学：窥私欲。人人都喜欢窥视别人的隐私，而不喜欢自己的隐私被窥视。
不然为何如今的QQ空间基本上都设置了权限，毕竟，谁想被别人窥视当年那个煞笔的自己呢？
现在订阅号打开率越来越低，朋友圈分享曾是订阅号流量来源的一大入口。
朋友圈早已沦为了一个人设打造的阵地，现在的人发圈越来越谨慎。
用户似乎越来越不愿意在朋友圈分享文章了，除非是有利于自己人设打造的内容。
为了减轻用户的这种社交压力，微信推出了“在看”的功能。
用户点了“在看”后，此文章会出现在看一看这个模块，且七天前的分享将不可见，这就相当于一个弱化版的分享功能。
这将大大减轻用户分享的社交压力。对于公众号主来说，相当于增加了一个流量入口，激发他们创作更多的内容。
视频号点赞也是同理，会被朋友看到，导致用户在点赞的时候就会有所顾虑。
他会考虑，我点赞了这个视频，我老师、上司、父母、亲戚、朋友会不会看到？他们会怎么想？
但他在抖音上点赞是没有这么多顾虑的，单纯的喜欢就行。
第一，抖音是弱关系平台；
第二，抖音上的点赞默认是私密的。
因此，微信才推出了私密赞的功能，需要长按才能触发。
这并是一个优雅的解决方案，一是操作成本有点高，二是用户存在较高的学习成本。
微信作为一个强关系社交场景，这正是微信与抖音不一样的地方。
以上两者的目的都是一致的，那就是为了减轻用户的社交压力。
同时用过mac OS和windows系统的用户不知是否发现，这两个操作系统的弹窗按钮“确定”和“取消”的位置是不一样的？
mac的弹窗按钮确定在右，取消在左；而windows的刚好反过来，确定在左，取消在右。
为什么会有这样的差异？哪一种更加合理？
在交互设计中，这种弹窗叫做模态反馈，艾伦·库珀在《About Face 4》中提到：模态模式一种临时模式，它通过遮罩将用户当前看到的内容和之前看到的内容区分开来，界面中只有 popup（弹出层）组件具有可交互行为，需要用户操作才能退出该模式。模态的优势在于让用户专注于完成某个任务而不被干扰。
首先我们要明白这两个按钮哪个使用率更高，一般来说，“确定”的点击率要远远高于“取消”。这是因为大多数用户对于自己的操作行为是明确的。
所以这两个按钮在视觉上一定要做出差异化，“确定”的视觉层级要高于“取消”，这样用户才会一目了然，不会感到困惑。
回到刚才的问题，逆向思考这两者背后的逻辑差异。
windows弹窗的背后逻辑：
人的阅读习惯是从左到右，所以把点击率更高的按钮放在左边更加符合人的正常阅读习惯。
mac弹窗的背后逻辑：
根据一般的任务的流程，“取消”在左代表返回上一步操作，而“确定”在右代表进入下一步任务流程。
看上去似乎都有道理，这两种交互方式本身没有绝对的对与错。只要在整个系统中保持一致性，让用户形成操作习惯就没有啥问题。
从个人的使用习惯而言，个人更倾向于mac的这种方式。
手机上的实体按键电源键和音量键通常有两种分布方式，放在左右两侧或都放在右侧，前者以iPhone为代表，后者以安卓手机为代表。
这两种方式有什么区别？哪种方式更加合理？电源键和音量键属于完全不同类型的两种按键，且都是高频使用，它们的功能自然不用赘述。
我们先来看看都放在右侧会有什么问题，以下使用场景相信用户不会陌生：
用户a，在地铁上玩王者，声音有点大，想把声音调小，结果不小心按到了电源键，导致手机息屏，而此刻你正在激烈的团战，内心有一万只“草尼玛”奔腾而过……
用户b，每次按电源键（解锁或锁屏）都会不小心同时按到音量键，结果直接就截图了！这种情况发生了不止一次，因为这两个按键离的太近了……
用户c，自家的小米11，电源键位于中间位置，右手拿时大拇指会触碰到，左手拿时中指刚好会触碰到，而电源键又有指纹锁功能，导致手机在不断的解锁，而你毫无察觉……
通过上面的案例，可以得出结论：若按键都放在右侧，会导致用户经常误触而造成不必要的麻烦。
放在两侧就不会有这样的问题。可以有效防止误触，尤其是盲按，不用担心按错，减少误操作的几率。
值得一提的是，iPhone手机的电源键一开始是位于顶部位置，这是为何？
因为刚开始时手机都是小屏幕（3.5～4寸左右），对于iPhone5S及以前的手机来说，单手操控，拇指Home，食指电源，刚刚好。
所以电源键放在顶部既按得到又可以减少误操作。
后来随着手机大屏的趋势（4.7寸以上），这个时候单手已经不方便按到顶端了，从6代开始就把电源键放在右侧了。
但无论是哪种方式， 两个按键都是分开放。
还有一个小细节，iPhone的实体键不是在右侧正中间，而是在靠上的位置。
iPhone设计理念是单手持握，并且大多数人右手握手机，大拇指经常会碰到右侧边框，若果放中间，这样会造成误触音量键和静音键。
其实上面的案例3就已经说明了按键放在中间的弊端。
我想起了当年的锤子T1，左右按键一样大且位于两侧的中间，这是典型的为了追求完美的对称而向用户体验妥协。
iPhone从初代开始就已经建立了自己的设计理念，不管是工业设计还是界面设计，并沿用至今。
从初代开始，iPhone机身左侧音量键上方就有一个静音键。
这些年来，iPhone一直在减少各种实体按键以及外部接口，比如3.5mm耳机孔、home键。
但直到如今这个静音键却一直保留下来，为何iPhone对于这个按键情有独钟？
静音键开启后，任何来电或通知都是无声的，震动也会消失。
在无需点亮屏幕的情况下实现一键静音，方便快捷，深受用户的青睐。
根据自身的使用习惯以及用户研究，无非以下几种使用场景，比如看电影、开会、上课等：
1.进电影院看电影前，我一般都会拨一下，避免在看电影的过程中被来电铃声打扰，影响了自己和别人观影。
2.开会的时候也会拨一下，以防在开会的时候突然被来电铃声所打扰，避免不必要的尴尬。
3.学生党在上课前一般也会开启，这样整节课都不怕打电话进来了。
总之，就是不希望自己的手机铃声打扰到自己和别人，带来不必要的麻烦。
如果是虚拟静音键，需要先解锁手机，对着手机屏幕一顿操作。
而实体键不需要这么麻烦，可以盲操作，放在裤兜里都不影响操作。
这个按键这么重要，却很少看到安卓手机上有（除了一加基本上没有）。
实体静音键并非苹果首创，之前的Palm、Blackberry（黑莓）早已有这样的设计。
可能的原因是安卓控制中心很早有静音按钮，甚至有些定制系统还可以把静音按钮直接放在桌面上，设置静音非常方便，也就没必要再多加一个实体键了，显得多余又徒增成本。
上面提到过的，作为安卓阵营唯一的静音键，一加手机引以为傲的三段式按键，该设计可以通过物理键直接实现在静音、免打扰与正常模式当中快速切换。
但个人认为这个设定复杂了，三种模式远比两种模式复杂。用户并不一定能搞明白，有一定的学习成本。
在早期，iPhone的控制中心并没有静音按钮，想要设置个静音并不是一件容易的事情，而这个功能又是必须的，苹果索性直接做了一个实体物理键。
这样静音的时候只需要把静音键拨过来就可以了，一步到位，使用体验也很好，所以一直保留至今。
虽然现在iPhone的控制中心已经加入了勿扰模式，但考虑到老用户的使用习惯，以及品牌调性，苹果对于这个实体按键的去掉还是显得很谨慎。
考虑到之后iPhone在防水、机身内部空间的改进，不排除苹果终有一天会取消iPhone上这个静音键。
静音键虽好，但也并非没有缺点。用户有时候会无意中触发这个按键而不自知，或者开启后忘记关闭，导致错过了一些重要的电话。
虽然开启了静音键，但并不是绝对的静音。如果是闹钟，铃声还是会响起，因为闹钟的优先级要远高于静音模式。
苹果这是考虑到了如果有用户不小心触发了静音键，或者开启后忘记了关闭，害怕用户耽误了重要事情。
这就很好的解释了为何明明开启了静音模式，却还可以调解音量大小的原因所在。细微之处方见真功夫。
在日常生活中，旋钮是个很常见的东西，比如音箱，微波炉，收音机，老式电视，车载旋钮……
在机械产品上，旋钮凸起的把手和它下面的圆盘刻度，是最明显不过的旋转暗示，符合人的自然感知。
旋钮式交互是个人非常偏爱的一种交互方式，我认为这种交互跟iPhone的home键一样经典，主要原因有三：
旋钮操作简单，看到这种按钮，一岁小孩子都会忍不住用手去抓。对于用户来说，几乎不需要学习成本。
在旋转的过程中，可调大调小，一切尽在用户的掌控之中，用户感觉到有十分的安全感。
在调节的过程中，调大调小都能立刻收到即时的反馈，这是用户最喜欢的交互方式。
我们在触摸屏上很少看到这种旋钮式交互，因为这种交互是要建立在抓住旋钮实物的感受。
而触控屏是个二维的世界，没有真实抓握的手感，无法还原出三维世界的真实手感。
汽车上最常见的旋钮就要数音量和空调了。然而自从特斯拉在车上推广大屏幕后，越来越多的国内厂家开始盲目跟风，把绝大部分的功能按钮集成到屏幕中，比如空调，不仅不方便，行车中使用还容易造成危险驾驶。
车上的触控体验跟手机上是完全是两码事，使用场景也完全不同。最大的区别在于后者没有安全问题。
都知道开车不玩手机，可是行车时操作中控屏跟玩手机有什么两样？
对于驾驶员来说更加安全，通过旋钮调节空调，熟悉后完全可以实现盲操，边开车边操作毫无压力。
如果是触控屏，你必须看着屏幕，一顿操作猛如虎，而在开车过程中眼睛哪怕离开前方一秒钟就意味着危险。
而安全是汽车驾驶的重中之重。
用户的操作有真实的物理反馈，旋钮阻尼。
屏幕上虚拟按键反馈根本无法与实体旋钮相提并论。
软件系统用久了会变卡，可能会死机，难免会有bug。而这些不稳定因素将成为汽车驾驶的潜在危险因素。
一旦屏幕失灵，或者系统死机了，那所有按键都失效了。
虽然特斯拉为了提升其车载系统的稳定性下了很大功夫，但是问题从来都没有停止过。
但是硬件基本上很少会出问题，物理旋钮才让人100%放心。
无论厂家如何吹嘘，虚拟屏幕按键在大多数情况下都不会比实体按键有更好的使用体验。
因此，有一些实体键出于安全驾驶的考虑还是应该保留，将各种功能按钮都集成在屏幕里并不见得是一个明智的选择。盲目的把实体按键变为触摸按键存在安全隐患。
后记：
以上产品体验涉及到3个软件层面，3个硬件层面。其实产品体验从来就不是软件产品的专属，而是体现在日常生活的方方面面。不要把自己仅仅局限于互联网，不要老是沉浸在虚拟世界，回归于现实世界，多观察生活、体验生活。
文章来源：站酷 作者：CdzhcHappy
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这虽然是交互基础的概念但对我们设计师来说也极其重要，概念虽然很简单，但实际在设计中也会频繁的遇到问题。我们先用比较正紧的文案来描述一下这些比较“枯燥”的概念，映射是一个术语，从数理理论借用而来，表示两组事物要素之间的关系。（书中诺曼先生的原话）
上两篇文章我们说的示能和意符，表示了事物本身具备或传达的功能和被交互性，而映射则是表示了控制器和被控制对象的关系。
好的示能和意符的设计，可以让映射变的自然。
第一篇示能我们举了一个开关的例子，多控开关之所以让人抓狂首先是缺少了意符的表达，其次是映射的不合理。就如同我们在书中见过的一个煤气灶的案例，4个灶头下方有4个控制开关，左右两种不同的排列方法，体现出好的映射有多重要。
诺曼老师在如何设计映射中提到，自然映射设计可以分为3种层次
这三种映射的层次在体验中的满意度与效率一次递减，我们依次在举例说明
例如门把手在门上，我们就觉得这映射设计的很自然，通过转动把手可以对门进行开和关。再例如我家的洗衣机上有一个用来选择洗涤模式的旋钮，洗涤模式围绕在旋钮的周围，旋钮上有光点，旋转旋钮光点就会旋转到我们需要的洗涤模式上，这也是控件与对象一体的形式，满足用户对控制器与被控制对象的心理预期。
那在数字产品中我们也会遇到类似的情况，例如我们想展开放置在一个卡片中的文字，我们通常最好的方式是在文本的边上设计一个提示展开的“可点击按钮”，再次的方案是放在文案的下方，最不可取的就是放在卡片以外的区域，因为映射关系逐渐减弱到无关。
再举个例子iOS系统中如果要调节音量，可以在音量模块中直接通过手指的滑动来调节，而不需要在模块中或者模块外部加上两个用来增减音量的按钮。不过说实话，华为的曲面屏双击侧边唤出音量控制模块，个人觉得成本还要比物理实体按键更高一点。
除此之外，智能手机在逐渐演变进化的过程中，手势操作功不可没，利用手势代替按钮也节省了更多的成本并且在效率方面也得到了提升。例如视频播放器的应用中，会有相应的控件用来控制视频的播放、暂停、声音、进度、亮度、横竖等等，这些按钮其实就是最佳的映射设计
这个也就是我们常说的格式塔心理学中的接近原则，因为越靠近越相关，很好理解。某些物件在设计时无法将控件和被控对象结合设计，那么我们只能退而求其次，让他俩能更靠近一些，在映射关系上可以更清晰。
接下来我会给大家看我家的冰箱和电饭煲的操作界面，大家就知道，次佳的映射如果不好好设计，也会显的很糟糕。
如图所示，其实界面的信息设计无非就是这样，如果你可以把这些界面的信息设计的有逻辑有层次，那么在其他的用户界面中也能够如法炮制。
例如电饭煲的烹饪模式和其对应的按钮，都是通过点击多次按钮进行控制，而不是在单独的模式中具有单独的按钮，而最好的方法那肯定就是想选什么模式直接选，而不是做一个按钮来多次切换。
这里是因为本身这款电饭煲没有智能面板，所以通过物理按钮只能这么做，否则，按钮一多就更难操作了。那有小伙伴问他能不能和洗衣机一样做个旋钮呢？当然也可以，因为旋起来也比多点几次按钮来的方便，只不过旋钮做上去之后其他的按钮可能也要变成旋钮，在产品设计上就有更多的问题要探讨啦。
所以我们再来看它的按钮分布，发现其实控制按钮和被控制的参数其实缺少了距离关系，当你看着想要控制的参数却找不到控制按钮的时候就会比较抓狂，因为在这个布局中既没有满足最佳也没有满足次佳，甚至连在空间分布上也无法产生对应。
然后我们再看这个电冰箱，这个西门子电冰箱的用户面板我也属实没有看懂，但距离关系已经做的比咱电饭煲要好一些了，至少左右两侧的按钮应该是控制左右两侧不同的温度。
左右两侧分别是冷冻和冷藏的设置，但是中间只有两个温度，一共4个按钮和两个温度，这显然在自然理解下是不能理解的，这就和艾尔登法环里的boss们的关系一样混乱，那4个按钮为什么只有2个温度呢，因为左侧的两个按钮分别是切换不同的温度设定，而右侧的一个按钮和温度并没有任何的血亲关系，因为它就是一个锁！不仔细看还以为它是用来控制温度的，因为和其他三个按钮太像了！这不就是在滥竽充数么。
这里的两个案例我们发现，在次佳的映射中，其实就对格式塔心理学里的原则应用的比较多，为了让控制器和被控制对象的关系更紧密。
在某些场景下，我们是无法通过设计让控件与对象满足1、2两个要求，所以就会有第三种，在空间分布上一致，例如在一个大空间中的灯与开关，开关不可能做在灯本体上，也没有办法让它俩靠的更近，所以只能在空间分布上更加一致，才能够让映射关系合理。
其实数字产品的用户界面设计，基本上我们可以做到1、2点，因为本身区域有限，控制器和对象也几乎在弹丸之地互相映衬，大部应用的控件操作起来也都很简单，但是不外乎一些较为复杂的工具类产品，例如车机系统，通过中控屏来控制车辆的一系列功能例如：空调、座椅、车窗等等，那我们也发现其按钮的分布也是满足了这样的交互映射，将物理按钮变为虚拟按钮集成在中控屏幕中，为了让用户更好的映射出它们之间的关系，于是我们就需要利用空间分布的关系，来让用户明白，按钮与控制对象的关联逻辑。
例如在特斯拉的UI界面中，将整体分为3块区域，左边是形式仪表右侧是多功能区域底部则是车辆相关的控制功能，你想控制前后车灯，那么按钮就会在车辆模型的前后两侧，如果你想打开空调则在底部工具栏的中间即可打开，如果你想给座椅加热那么也可以像图片中那样在4个座位的图片中进行交互就可以实现。这样的设计让控件与被控制的对象能够远距离在控件上形成一个映射关系。
还有在日常生活中，大家家里是否用过升降式晾衣架，通过旋转把手来操控升降，这里其实也很难应用到空间部分，因为两者所处的平面不同，就更加无法对应起来，有没有一种比较好的方式来解决这个问题呢，我觉得可以用颜色或者标记来做映射的对应。所以为了映射的相关性、同型、同色、靠近等方式都可以用来提升二者的相关性。
数字产品中的映射也是关于控制器和被控制对象的故事。数字产品中也有不少的控制器我们就称之为控件，例如一个图标按钮、一个下拉列表或者一个滑块，它们都有各自的控制对象。而我们常说什么样的设计满足用户心智，指的就是让用户觉得当他操控控件后带来的结果与反馈是他预期之中的，这就会让其觉得是合理的、自然的。
例如在这个案例中，设计师其实是想通过按钮来控制车中相关的功能，但是大家能发现问题吗？映射的前提是控件要先满足示能和意符的表达，其次再通过映射告诉用户，谁控制谁。但我们发现这个界面中的按钮其实在示能和意符上出现了歧义，例如热车的图标，我们通常认为这样的宫格形式布局都是以入口形式存在，点击后会进入下一个界面，但是设计师在这里其实把一些情况搞混了。
所以我们仔细看，这些图标就像是电饭煲上的按钮，只要点击就会触发车辆状态的变化，相当于一个开关，咱们先不说这样的设计是否方便用户，我们看映射其实就会发现用户其实很难做到空间布局上的对照，从而更高效的来对车辆进行控制。并且也存在一定的逻辑错误，例如热车和解锁是什么逻辑，车窗开到一半想停止怎么办，空调要调节冷热和温度怎么办，所以这里不再单纯的是一个开关集合的区域，会遇到很复杂的情况。
我们再来看一个案例，其实在数字界面中很多映射并非有直接对应关系，而是需要用户通过交互来触发。在下面的界面中，是一个课程的详情页面，用户可以发布自己的学习笔记通过音频的方式发布在该页面中，而底部的工具栏在当前的设计中就会出现映射相关的问题。
我们即然要发布音频那么我们有这些问题可以提前预设好
1.需要有什么控件来控制吗？例如一个按钮
2.那么这个按钮是点击后松开再开始录音，还是需要长按开始录音，亦或者点击之后进入一个编辑页面，再通过录音或者上传音频的形式来编辑呢？
3.点击麦克风录完音频后页面会怎样显示
4.能否试听、编辑，边上的输入框和麦克风有关吗？
5.我可以直接输入文字再点击发布吗或者直接点发布会出现什么呢？等等
不管如何我们从需要有一个入口，所以这个入口比较关键。通过这个入口（按钮）来触发上传音频的整个交互流程，它也是一个映射关系，只是没有全部展开，因为这里无法展开。
有同学想问，为什么不能展开呢？其实这个很好理解，就像我们做登录和注册的时候不会把两个流程做在一个界面中一样，造成页面的复杂、不兼容。所以如果这里不需要音频以外形式的发布内容那么就无需把麦克风、输入框和发布按钮拆解开来做，造成了没有必要的浪费。
一个按钮可以作为一个入口来开启一个单独的任务流程，但是如果这样拆解开那么任务流程就无法再高效的完成，并产生很大的歧义。数字化产品的映射往往是线性的
再说一个类似的案例，这个也是小伙伴做的一个界面。初学者的问题就比较明显，在于他们没有分步和阶段性控制的概念。总想着一个界面能完成多个任务，当然在这里也没有考虑好映射怎么做。
从这界面我们能很明显的看出来这其实是一个发布的界面，从外部一个按钮中进行跳转而来的。
如果让你去评价你会怎么说，是不是哪里都想说一点，好像里面的信息、按钮、功能就不应该在这个界面？
你可能会有这些问题：怎么把视频、音频、图片做成tab，选择不同的类型去发布？点击录制后音频会出现在哪里？录好一条后录制按钮还在不在？录好一条后我切换到图片再传一张图片再点击下一步会出现什么？点击草稿箱又会进入什么界面？我什么都不操作直接点下一步会怎样？这些问题都将困扰我们完成一个发布任务。
将一个交互流程做清晰，就需要让用户有一个清晰的功能映射。所以点击发布后，按钮应该要先控制发布类型这个对象，让用户选择发布类型，然后再跳转出对应类型的发布流程。
3.总结
映射在交互体验的设计中也是很重要的概念之一，要结合示能和意符一起思考。同时剩余的概念我们也会在下期一起分享给大家，对于初学者来说，这些概念很重要，在我们设计案例的时候务必要时刻思考与结合。
听到“约束”这个词，但从字面意思大家可能会觉得它有多层含义，比如你小时候，妈妈总是约束你不能吃很多的糖，不能在地上滚来滚去，这是来自父母的约束。那么我们在生活中还有很多的约束，比如道德约束、法律约束、规则约束等等。
所以从字面意思上约束的意思就是：限制管束使不越出范围。在体验设计中，约束也被分为了4个大的类型，分别是：物理约束、文化约束、语义约束以及逻辑约束。接下去我们通过对这四个约束类型来聊一聊在设计中，如何利用这些约束来提升用户体验。
这个很好理解，一个圆形的井盖只能用对应尺寸的圆形来覆盖住，其他形状或者尺寸就不能匹配。一把锁也只能通过相应钥匙才能打开。所以物理约束取决于物体本身外部的特性，决定了其操作方法。设计师们在设计一些产品、界面的时候，务必要考虑物体的物理特性，例如不同的设备、不同的材料等等。
诺曼老师在设计心理学中举了一个电池正负极放置的例子，我打算换一个手机的例子。大家是否有想过为什么手机是竖着操作的，横着操作不行吗？当然不排除我们在玩游戏看电影时一些特殊场景需要将手机横过来，但是日常我们通过手机来使用应用的时候为什么不是横过来的。
大家可以尝试着单手横过来去发一个微信给好友信息，或者在淘宝买一件商品，首先这俩产品在移动端的手机上都没有支持横版适配的设计，因为横置无法有效进行导航，而且很难浏览内容，更不要提用单手横过来去做一些交互行为。
所以我们发现移动端手机本身的物理特性和受到的约束来自于我们人类的手，四根较长的手指在一侧，一根较短的拇指在另一侧，这种自然生物的进化就告诉我们，我们的祖先是习惯通过“握”这个行为来对物体进行交互的，而手机除了满足人手的特性约束以外，也要满足日常使用的场景：单手手持（单手握比单手托省力很多）、打电话（如果你的听筒和麦克在屏幕的两侧，脑补一下打电话的样子）......
所以手机的外形设计，是受到了使用者本体的物理约束，我们的手、我们的耳朵、嘴巴等等，大家也可以再试想一下，如果我们要设计一款专门为没有手的残障人士用的通讯工具，我们该怎么设计？例如他们习惯用鼻子操作、用脚掌操作等等。
好了，讲完了人类对手机的约束后，我们再来看手机本身对我们数字界面有哪些物理约束。即然手机现在被设计成了竖着的样子，于是我们的口袋也变成了竖着的，同时我们数字界面的内容也变成了自上而下的内容显示顺序。触摸式智能手机也将原来只支持点击操作的手势进化出支持滑动、3d触摸的更丰富的交互手势。
我们在设计界面中元素、组件的时候其实也可以把他们理解为一种“物体”，既然是“物体”那么必然有其特性，例如属性、状态、布局规则....，具有一定特性的组件就只能使用在其固定的位置，并给予一定的尺寸范围和交互方式。
例如现在我们有这样几个信息，人物头像、人物昵称、个人简介、关注按钮这四个元素，我们需要做一个用户信息模块，我们会怎样布局。很显然将这几个元素通过排列组合放进一个容器里，有无数种排列方法，但如果我们提前给这个模块加上一些物理约束，比如它的高度和宽度是30px*100px，同时满足信息阅读的顺序和效率最优，那就只有一种排列方式。如果这个容器的尺寸变成100px*100px，那么就会有更多的布局，例如居中对齐，个人信息与关注按钮上下分布等等。而且不同的排列布局、呈现位置给受众带来的视觉感知、浏览效率也是不同的。如果这个容器是可折叠、可滑动的呢？那么布局又会发生什么变化？
所以物理约束在生活中可能是一种硬约束，但是在数字化设计中，我们用的更多的是“偏软”的物理约束，例如一张卡片的大小、图文的间距、控件的展开面积等等，无法用硬约束来控制，因为受到更多因素的影响，不适合用硬约束来规范这些设计元素。
设计师们在做方案的时候要学会寻找最优解，做设计不像是用钥匙开门或者拼图这样每一块都有他固定的位置，有时候就像是你身边有几根不同粗细和长短的木棍，你需要插到一个洞里，不可能有非常完美契合的情况，那我们就要考虑你更在乎的是插紧？填满？还是堵住？要灵活运用。
文化约束在书中的原话是：每种文化都有一套社交行为准则，如果置身于不熟悉的文化环境，原有的准则和行为就会不适用。
例如大陆的驾驶室在左侧，但是香港地区就是在右侧。再例如日本东京和大阪搭乘电扶梯的站位也有左右的区别。所以文化的约束就更像是不同的社会认知、习惯、历史造就人群的行为差异。
例如在不同文化中，信息阅读的顺序并不一样，就像阿拉伯地区在阅读时顺序是从右往左。再例如国际版本的amazon在新增收货地址的时候，无论哪个国家，只提供输入框让用户自己填写，但是在本地化产品中，就会针对中国用户的特殊地址进行设计。
文化差异还有很多，例如不同国家有不同国家的禁忌和喜好，例如颜色，俄罗斯比较极忌讳黑色、黄色，巴西比较禁忌紫色、黄色，而英国则不喜欢墨绿色。同样还有手势、动植物、数字、肢体语言、信仰等等。
文化约束不仅仅存在于国家、宗教之前，人与人之间都会有不同的文化差异。所以文化说白了就是不同群体的认知与共识。说起文化约束让我又想起了设计师与业务方之间的交流，为什么总是会存在障碍。或许一部分原因就是因为我们各自有着文化差异和立场。业务方在自己的文化认知中会提出同时放大并缩小、五彩斑斓的黑这样的需求，而设计师听到这样的需求就会觉得有点无理取闹，其实这很正常，这就和我们在装修时给设计师提出的要求一样，想要在10平方米的空间打造出多个大面积的空间一样。其实这些都是我们对另一方的一种期望，只是在表达的过程中不那么专业，作为专业的设计师，我们要学会理解客户/业务的真实需求，并帮助他们去拆分目标，一步一步接受最后的结果。
语义约束在书中提到的不多，但是我想展开聊一聊。诺曼老师在解释语义的时候是这么说的：语义约束是指利用某种境况的特殊含义来限定可能的操作方法。举了一个例子就是摩托车的挡风玻璃之所以这么设计是因为人驾驶摩托车的方向位置从而使得挡风玻璃必须这么设计。所以一个事物被设计后的结果取决于它是为谁而设计的，同时语义约束依据的是我们对现实情况和外部世界的理解。
现在我们可以通过门把手的转动来开启门，那么如果我通过人脸识别认证后，是否可以自动开门而不需要再设计一个门把手呢？这种案例其实很多了，例如医院的手术室等场所。随着科学技术发展，人与物的交互方式在不断的改变，从小屏幕到大屏幕的发展，我们观察到移动端设计中的返回上一页、滚动至顶部、键盘的拆分等等设计应运而生。
我再拿数字产品中的一些组件给大家举个例子，在以前的文章中，我找到了一个产品的交互有些问题，就是在某个界面的顶部导航中嵌入一个下拉的控件。
在这里，无论该控件本身示能表达还是用户的预期理解，都表示这当我们点击下拉按钮后，会展开更多同类型的选项，并且导航栏是保持固定位置的，而不会将导航栏给顶下去，出现原本不存在的新模块。那么为什么就不可以像后者一样，点击下拉控件后将导航给顶下去呢？
这就要归结于顶部导航和下拉控件本身的用法与规则。
导航栏嵌入下拉实际上就是导航+下拉控件，那么该控件就具备了两个属性，那就是原本导航栏的属性和下拉控件的属性，导航栏需要固定在顶部。
在移动端本身的组件定义中，它是一种固定在顶部不可动摇的一个bar，所以很早以前的移动端、web端设计的时候，顶部导航栏在视觉上也是优先级很高的，例如微信、淘宝等顶部导航栏在旧版本都是带有颜色的，就像是一个盒子必须有一个盖子，没有盖子的容器不严谨，不安全。
同时这个“盖子”有几个作用：
1.当前定位/说明 ，可以放单个页面的标题也可以放几个tab来切换页面
2.当前界面辅助操作 ，例如分享
3.可以嵌入入口，例如搜索框、设置等等。
即然是一个下拉控件，那么你要下拉的是你本身，而不是整个导航。所以导航本身就有它自己语义，导航+下拉控件，也必须满足这些约束条件。
语义约束需要设计师们时刻观察当下用户的认知水平以及设计的发展阶段，去做更合理的运用，我们之前说创新，其实也只是在不断的跟着科技、文化、用户习性在进行同步更新，保守未必是错的，但是想要有所突破不能一味墨守陈规。
这个概念诺曼老师在书中举的是一个修水龙头的例子，说的是当你把水龙头修好，最后发现有一个零件没有安装上去，那么显然是装错了。这个和我们之前讲的映射是一个道理，自然映射为我们提供逻辑的约束，元素的组成可能存在空间或功能上的逻辑关系，例如不同的开关控制不同的灯。
那么我们还是简单的来看一下“逻辑”这个概念，我们是不是经常会遇到这样的场景，当我们把方案或者一个事情讲述给别人，会听到别人说：你这个逻辑不对，那到底什么是逻辑呢？这里不进行长篇大论的解释，逻辑的概念很大，但是我们可以来比较形象的了解一下。
首先我们要知道在逻辑推理的过程中需要先对概念进行客观描述，例如男人喜欢女人，这是一种自然的客观规律。其次我们要对事物中的对象进行判断是否为真，例如，老王是男人。当我们已知这两个条件后，可以推导出一个结论，那就是老王喜欢女人。但是这样的推理并不严谨，因为老王可能喜欢女人或者都喜欢。如果有其他的条件，结论才会更准确，例如老王交往过5个女朋友。
设计中，也会存在很多的逻辑，例如业务逻辑、交互逻辑、视觉逻辑等等。业务逻辑指的是商品的展示排列规则、每签约一个供应商就会展示该供应商的详情、权限角色的类型不同导致判断顺序不同等。交互逻辑指的交互过程中出现的状态变化和规则，例如点击卡片跳转至xxx界面，点击后若用户未登录则跳转至登录页。而视觉逻辑则是指根据用户的浏览顺序和信息的优先级进行视觉布局的设计。
这里我们来举一个美食产品的智能组菜的功能设计，来看看在这个方案中，逻辑约束是如何影响到我们整个设计过程的。智能组菜这个功能是这样的，用户可以将想要烹饪的食材进行自由组合成为一道美食，进而衍生出了该功能。在做这个方案之前，我们要对这些概念进行描述和解析
1.解析概念
智能组菜：
1.智能：通过什么算法，如何通过算法呈现给用户？如何让用户感知到智能？（业务逻辑）
2.组菜：组是什么意思？（把食材搭配到一起）怎么组？（用户选择食材后生成）组什么（各种食材）？（交互逻辑）
2.设计策略与交互逻辑的思考
1.怎么把食材搭配到一起：让用户自由选择食材
2.怎么才能让用户自由选择食材：提供食材的搜索、分类
3.怎么提供食材的分类和搜索：设计搜索功能流程、食材分类功能流程
特殊场景思考：对于食材的名称用户是否知道，如果不知道该如何搜索？可以提供食材分类和拍照识别这样的功能。
我们先做的简单一点，只做食材的搜索。然后接下去思考他的交互逻辑
当用户进入搜索流程后状态会发生什么变化？选择的食材会出现在哪里？如何新增继续新增、删除食材？这里有两种做法：
1.用户选择完食材后就进入一个新界面，界面中可以继续添加食材。
2.用户选择完食材后在当前界面出现“菜篮”模块用来承载已经选择的食材
如果是你会选择哪种方式？这两种交互方式在逻辑上都是正确的，但是逻辑正确并不意味着交互体验和效率是最优的。
例如搜索场景中需要考虑键盘遮挡的问题，如果是第一种，那么没有键盘遮挡的困扰，但是每次选完都要重新点击新增按钮，并且新页面的版面利用率很低。而第二种在当前界面出现菜篮则会被键盘遮挡，只能在页面上方出现，但上方的内容比较饱和，需要再进一步思考。那么当前遇到了两个问题比较难以权衡，于是我们需要根据更多的条件来约束最后的结果：
1.用户在选择食材的时候大概率是目标明确的，搜索类目不会很宽泛，例如青菜、排骨，所以搜索结果不会很多。
2.大部分用户的手机为某为p40、某果12，页面较长，空白区域比较充裕。
3.大部分情况一道菜的主要食材在3种左右。
也有小伙伴会问，会不会出现批量选择的情况。基本不会，因为就像我们刚才说的，组菜是基于用户对当前已有的食材进行组合的行为，所以用户的目标是单一、明确的，我有什么菜，我看看能组合出什么。而不是直接搜一个蔬菜，然后批量选择蔬菜类目下的其他食材，这不符合用户场景。所以不需要提供批量选择。
最后结论是第二种方式有足够的区域来放置需要选择的食材。
3.最后的方案
当我们确定好了策略后，我们可以大致绘制一下原型方案。用户通过在当前页面搜索后选择搜索结果的食材，显示在键盘上方。键盘收起后会置于底部。食材搜索的结果不需要分类，用宫格形式铺开，尽可能的利用顶部的面积去展示，不要用列表。然后不需要做搜索按钮，因为这里的数据量很小，直接输入完文字后就可以自动联想匹配。同时我们再把组菜记录和拍照识别的功能放进去。
做完这些基本的交互后我们不要忘了思考一些异常流程和场景，例如搜不到内容怎么办？用户同时搜索了两种不同的食材怎么办？用户第二次选择了同样的食材怎么办？选择超过5个怎么提示？等等。
好了，这个案例讲完后，大家有没有发现，其实一个方案的产生，其中要思考很多的条件、逻辑来约束不同的设计结果。
假如我们需要加入食材的分类模块，那么现在的方案和流程还合适吗？如果业务觉得用户使用智能组菜是不知道吃什么，一种“穷途末路”的场景，那么我们是不是可以提供一种送即食菜肴的服务，例如最近在电梯广告里看到了一个“舌尖英雄”的app，他就是将一道菜的食材进行单独包装，然后卖给用户，把烹饪的步骤也用线上视频的方式教给用户，用户一学就会。这也是一种业务创新，同时在智能组菜的场景种插入也不失为一种办法。
文章来源：站酷 作者：应骏
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
你们会发现其实想做交互设计比UI设计难很多，那为什么交互设计比较难呢？因为UI设计相当于从0.5到1，而交互则是从0到1。但并不意味着UI就比交互来的层次低，交互注重逻辑，UI注重对品牌和质感的表现，没有孰优孰劣，但是在入手和执行层面，UI相对简单一些。
交互设计也可以说是体验设计的核心。我们需要根据已有的“材料”来进行任务流程、用户行为的设计，以确保用户能高效、满意的完成任务达成目标和解决问题。所以在这整个环节中，要思考的信息和判断的逻辑会更复杂。交互设计往往觉得很有成就感的地方在于自己设计的流程或者一些创新的交互能够获得用户的好评以及业务数据的提升，在这个方面UI设计的成就感知会来的不够明显，因为视觉表现很难量化，用户也只能通过好不好看来表达，所以UI设计师们也希望通过一些方法来找到属于自己的成就感，例如我们也会选择一些平台发表自己的视觉创意来获得同行们的认可等等。
那么今天我们一起来聊一个交互案例，来看看需求从“材料”到具象化表现都需要思考什么。当然，学案例是为了扩充自己的知识面，但是想要真正学会，我们要从底层开始学。
首先来讲一个发布菜谱的功能：一个美食类产品中需要设计一个用户自己创建菜谱的流程，基于这个概念我们可以如何设计流程。我们都知道商业设计离不开业务，那么这里我们先不考虑这么多，只考虑如何将流程设计做到最高效，有需要的时候再将业务加入进来。
这里和工作中常规的步骤不一样，在工作中我们往往第一步都是去分析这个需求的背景、用户的定位、业务目标什么的，但是这里不用，我们只单纯的做交互方案，所以就不去啰嗦那些了。
在脑爆前，准备好3个问题：
1.什么是菜谱
2.为什么要发布菜谱
3.怎么发布菜谱。
通过这3个问题我们就可以大致知道这个任务所包含的信息、形式、流程。
1.什么是菜谱：菜谱是通过图文、视频等方式给用户提供做菜步骤的教学内容
2.为什么要发布菜谱：希望通过用户自主发布内容的形式来提高整体用户的活跃度以及平台对用户个人品牌的塑造。让用户之间产生更多的互动。
3.怎么发布菜谱：这里要根据第一个问题脑爆之后再进行流程的设计。
接下来我们根据菜谱这个概念进行拓展：1.菜谱的基本介绍 2.菜谱的制作流程 3.其他支线选项。
在真实工作中其实产品经理会把这个流程要包含的功能和信息点都列举清楚，只是我们现在自己来从0到1设计一次。
菜谱的基本介绍可以包含菜谱的封面、菜谱的名称、菜谱的简介、难度、时间、食材，菜谱的制作流程可以包含需要的图片、文字描述。但是这里的颗粒度大小不一，例如难度、时间颗粒度小，但是食材我们可以再继续细化拓展：食材的名称、用量。菜谱的其他编辑选项，例如菜肴的口味、菜系的分类，编辑这个选项是有助于其他用户在筛选菜系和分类的时候更快的找到这个菜谱。
例如菜谱的封面，那么我们就需要一个容器来上传图片或视频，可以用一个占位图image来代替，先不用考虑放什么位置以及在哪个节点，先将每一个信息点都进行控件化。接下来菜谱的名称和简介都是输入模块text。难度和时间有两种形式：输入和选择，那我们当然用选择，因为操作和理解成本更低，能用选择就不要用输入。选择用什么形式呢？可以用picker、actionsheet动作面板、展开单选，那哪个更方便高效呢？这里如果需要选择的选项不多，也不需要滚动、联动，那么用actionsheet就可以了。如果你想让选项更直观更方便操作那么你可以把选项直接放出来。
接下来是食材，食材又分为食材的名称和用量，那么也是一个输入的行为，需要两个输入框，这里就不能用选择的交互了，因为在这个场景中选项是根据用户需求随机、特定的，需要用户自己输入。
最后是菜谱制作流程中的图片和文字描述，也是图片和视频的上传和文字输入模块。这样我们就把这些控件具像化了，就更直观的帮助我们进行接下来的操作。
根据用户的操作习惯和场景，我们将操作顺序捋一遍。什么样的操作顺序更符合我们上传的习惯呢？先填写制作顺序吗？不对，应该先编辑基本信息，也就是我们通过烹饪的流程，先想好要做什么菜，再去准备食材，再开始一系列烹饪的步骤。
所以我们要先让用户去添加封面编辑标题和介绍，烹饪难度和时间其实放在开头和末尾都可以，但是考虑到这些信息在列表中会一起展示，那么我们索性就在开头就直接一起编辑。
接下来是添加食材，添加食材的场景中会涉及到对食材的添加、删除、清空以及智能编辑（类似添加收货地址），所以这里的场景不要漏掉。那有的小伙伴要问是不是可以再加一个拍照识别食材的功能？其实不需要，因为我们在准备做菜谱之前肯定对这道菜有了解，知道每一个食材的名称我们才会去做菜，否则连什么食材都不知道就去做，那万一有毒呢？所以这个场景是不存在的。
再接着是编辑制作步骤，依然是思考用户场景，除了上传图片和文字以外，还需要提供步骤添加、删除、调整位置、批量传图等功能。这些场景我们在脑爆的时候或多或少会遗漏掉。
移动端产品的层级和路径主要是根据页面来划定的，所以页面越多路径就越深，但是路径深并不意味着一定就多余，路径少也并不意味着操作就简单。路径阶段的划分主要是根据这几点来考虑的：
1.当前页面内容是否溢出、符合场景、满足预期也就是说当前页面中的内容是否符合当前场景的用户，以及是不是过载了。例如我们去购买电影票的流程，当我们在查看电影详情的时候，不会出现电影院和电影场次的选择，因为不符合当前场景的用户需求。
2.场景是否独立我们在选择回收自己的手机时，在选择型号页面不会再让用户编辑估价信息。这个场景是独立的，并且只有完成了前置操作步骤后才能进行下一步。
3.任务是否需要阶段性结束 为什么需要进行新建界面，是因为当前界面在满足1和2两个约束后，要考虑第一个步骤是否阶段性完结了，例如我如果把菜谱编辑基础信息界面单独做一个界面，而编辑步骤再单独做一个界面，这里第一界面是否阶段性完结呢？还没有，因为你可以随时要去修改标题、封面、食材等等，而经常返回上一页并不是一件很简单的事，用户也会担心我编辑好的步骤会不会保存等一系列问题。
这里再用一个蔚来app中选购车辆配置的流程举个例子。他这里也将选择配置流程划分成了几个界面，但这个流程结构就不是单纯的线性结构了，虽然他每个不同的配置单独做成一个界面但是顶部利用tab来切换不同配置选项的界面。
所以当任务需要阶段性完成时候，例如只有先输入手机号点击发送验证码之后才能收到验证码，在这样的流程中我们可以使用下一步来进入下一个环节。如果要分不同的界面，而又没有出现阶段性完结的情况，那么前一页的内容编辑再下一页也需要有，例如我们把标题编辑单独做一个界面，但是下一个编辑基本信息界面也依然要能够编辑标题。
通过对用户场景和触点的分类，以及对第四步的思考，我们可以发现其实编辑基本信息和编辑步骤是需要放在同一个页面中去完成的，因为没有阶段性结束。但是放在同一个界面也有一些问题比如单个界面需要编辑的信息太多，比较繁琐，再次编辑需要上下滑动浏览不方便等问题。所以我们也可以看一下市面上的竞品都是怎么做的，有一些产品会将编辑标题单独划分出一个界面，这其实没改变前者的问题，单独作为一个页面或许是基于这两点考虑：
1.希望用户通过认真对待标题来提高菜谱的点击率和引起别人的兴趣
2.业务需求，通过让用户了解优质内容的协议来谨慎对待上传菜谱的质量
3.对于一个复杂操作前的一个准备和引导，让用户更容易接受接下来的大量表单的填写。
接下来是填写的界面，那么我们就可以根据信息展示的优先级和第三步设定好的控件进行布局，这里涉及到的原理就不讲了。我们主要来分析一下某些功能在布局的时候为什么这么放。
首先封面和标题还有简介从上至下应该没有什么问题，因为有两个输入模块咱就无法左右放，因为这3者是强关联信息所以是一个整体。其次是难度和时间，这两个字段包含的内容和形式我们在之前的步骤中提到有两种形式，一种是actionsheet还有一种是选项标签化平铺，前者的好处是节省空间，易扩展，后者则更加直观和方便选择，另外也要考虑类似控件在整个产品中的统一性。
接下来是食材添加和编辑，这里涉及到食材名称和用量的文本输入，这里可以直接用一行输入模块来放单个食材的编辑，因为整个页面表单很长所以尽量简化上下空间。同时还有对食材的删除、清空、调序和新增。那这三个按钮怎么放比较合理呢？我们要看用户使用的场景，可以考虑的维度有：操作频率、操作优先级以及任务的主方向。
所以在食材编辑这个模块中，最高频的是新增其次是删除再次是调序最后是清空。而当食材新增后内容会向下延伸，所以新增的按钮不适合放在上方，也不适合放在每个输入模块的右侧。删除和调序则是最某个食材信息的编辑所以是针对单个输入模块的，那必须跟在后面。最后的清空可以放在新增按钮的左侧。这样就完成了添加食材的模块。
再接下来是烹饪步骤。上传图片和编辑文本没什么问题，上下布局是因为在正式浏览的时候需要大图和文字搭配的形式，所以为了形式统一就只能这样布局。
目前调整步骤在最底部，同时删除操作也需要点击调整步骤后才能出现，这里因为调整步骤和删除不是高频操作，弱化层级可以理解，但是如果放在底部那么如果我想要删除第一步和调整前2步顺序的时候，就要上下来回滑动，不是很方便。
那其实我们可以这么做，把烹饪步骤作为一个bar，在页面向上滑动的时候置顶，添加食材也可以这样操作。就是为了让用户在上下滑动的时候可以随时进行一个编辑，步骤在任何位置都可以直接进行换位和删除。另外由于是大图模式，在换位的时候进行长按拖动其实对拇指的操作有一定的要求。既然这样为什么不用上下切换的按钮进行调序。
我们来看一下拇指拖动要激活两个阶段，首先要长按激活拖动，然后需要按住不放进行拖拽，由于卡片面积较大拇指滑动的距离就要长，对于手小的用户就不太方便了。那我们是否可以做成一个上下切换的按钮，这样只要通过单击就可以完成顺序的调换，并且通常调换顺序并不需要跨越多个步骤进行，一般也只是相邻两个步骤的顺序换一下即可。所以这里首先我会把编辑按钮和批量传图都放在烹饪步骤bar右侧并置顶。
最后再补上剩余的选项模块和发布、预览、草稿的按钮即可。预览和草稿必须放在导航栏，因为这俩功能是随时需要进行操作的所以不能在页面底部，而发布按钮可以放在最底下。也有小伙伴想问，为什么不在底部做一个固定的bar来放这些按钮呢。因为页面纵向信息很复杂，不仅底部占用了高度也容易误操作，在没有编辑完时，发布按钮还是比较鸡肋的，所以是不会出现一个底部固定的bar。
好啦，今天分享的交互流程案例大家学废了吗？我们下期再见，有更多想法和交流欢迎在留言区留言！
文章来源：站酷 作者：应骏
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com