相信身为设计师的我们，在工作中肯定遇到过自己加班加点，绞尽脑汁设计出的方案被质疑、挑战，在宣讲自己设计方案时，总会出现以下声音：
起初的无言以对到有理有据的辨析设计方案都体现出对设计方案更加全面的思考。
想要让自己的设计方案更合理，获得大家认同，可以分为 4 个步骤：
1、 树立自己用户思维
2、充分辨析用户需求
3、严谨打磨设计方案
4、精准有趣的文案
我们常说吃饭不积极，思想有问题。看似玩笑话，但是蕴含的是对于吃饭是本能，是刻在脑子记忆中的。而设计师在做设计时，也需要有这种“本能思维”。
用户思维最基本就是 围绕用户 帮助他们 解决实际问题。如果用三个字来概括的话：人、场、事。
人：目标用户
场：在什么情况下？
事：要干嘛？
例：笔者 因为在家写文章没时间出去吃饭 ，所以需要点外卖 让别人将饭送到家里。
一个合理的设计方案，必然是将人、场、事很顺畅的串联下得出的结果。
用户之所以有需求一定是遇到了问题（需求源于问题），只要找准问题所在就能明确用户需求，那我们的设计便成功大半。辨析用户需求可以从两反面：
2.1、确定问题
2.2、清晰表述问题
2.1、确定问题
除了常见访谈、问卷、测试等调研手段，设计师可以采用【同理心图谱】的方式推导用户需求
从 说了什么、做了什么、想了什么、感觉到什么 四个维度去勾勒用户真实的想法感受。
例：日常支付场景
想要将问题表述清楚，还是回到第一部分我们讲的：人、场、事上，通过陈述句将用户面临问题和期望状态（目标）的差距描述出来。
如：小明在QQ群里抢发红包中，由于当前支付流程冗余导致他支付效率较低，影响了大家氛围。
用户与他们的需求是问题陈述的核心，避免：我们应该怎么做、产品应该...作为开头。
保持陈述的宽泛性，不要过早抛出细致的解决方案、技术限制等内容，避免团队发散受限。
专注一点不要试图在一个问题陈述中解决太多用户需求，一次解决一个就很好了。
在打磨解决方案上，设计师需要考虑 易用性、易理解性、及着力提升用户任务效率，给用户一个更好的体验。在打磨设计方案时，我们不必在一个方案上求多表现，一个方案能能够将你所要表达的设计要点表达清楚即可，主要注意：
健康码主要是为了让工作人员快速辨别人员是否安全，但在众多人中需 快速判断，这个转化到设计上解决方式：通过大面积的 色块直观反馈；通过实时的 滚动时间+滚动背景反馈真实性；在结合下方核酸与疫苗辅助判断，整体非常贴合实际诉求，重点突出，有节奏感。
通过体验核心信息，将内容合理布局，重点突出，操作划分明确，有助于信息获取与确定。
人的认知资源有限，天生不善于处理复杂信息，在面对复杂信息时需将内容以一定秩序逻辑管理，分而治之，减少用户的选择，让正确的行为变得自然和明显。
在58二手车页面的改版中，顶部按钮直接 分流 不同目的用户；中间模块展示用户 最关心的维度：价格、品牌、车类型；下方 透出推荐内容 吸引用户往下逛。
如上图百度网盘的分层设计（图片来源：大牙的设计笔记）中，设计师根据不同的会员周期，改变以往的“多人一面”，打造出“多人多面”灵活分层页面布局，将复杂状态很好的根据不同时期进行拆解。
多考虑用户使用场景，挖掘一些场景是可以通过我们的设计 帮助用户多走一步，帮他们排除障碍，减少负担。
打车软件在特定时间点自动浮出目的地，微信聊天窗自动出现截图、验证码直接在键盘上方等都是通过用户的行为预判了用户下一步的行为，极大的提高了效率。
情感化不一定都是很精美的插画、动效等表现层面上的，有时候 贴心的记录、舒缓的内容、小游戏...... 也可以起到 情绪调节 的作用，提高用户看到复杂信息的 忍耐度。
----------------------------------------------------------------------------------
所以在具体设计方案上，需要不断的去思考打磨设计方案，让自己的设计：
①、显而易见的，让用户体验后觉得「没错，就应该是这样」；
②、有价值的，它为用户解决实际的问题；
③、与用户的心理模型相符，它不意味着更多的设计。
文案这块本应该属于上一个模块额范畴，之所以单独讲是因为文案对于体验而言太重要了，优秀的文案不仅可以减低用户理解成本，还可以让用户感到兴奋、温暖、愉悦，并感叹：卧槽，牛脾。
身为交互设计师，不需要做到像杜蕾斯那样上热搜的文案、solgan，但设计稿中的文案必须要做到：表达精准无歧义、适当趣味化。
我们是通过屏幕与人交流的人，屏幕上的文案触点之一，因此简洁精准的表达出我们要说的内容很重要。这设计中，首先应该避免一些专业术语、“高大上”的词语，应该简单直白，用最简单的词语，去掉那些不需要出现的词。
①、直接告知行动：在微信发语音按钮文案（按住 说话，松开 发送），非常直白的告知用户需要做什么，且文案中的空格这个细节也将先后顺序表达的十分清晰；而QQ在长按时没有进行文案的提示着点体验上就不如微信了。
②、文案尽量简短：成年人 1s 可阅读 7 个字左右，豆瓣的评论引导就非常简短，直接三个字：写评论，明确引导用户点击；而知乎为了营造良好的社区氛围，引导用户言行友善，但文案较长，相比写评论而言显得不够简明扼要，如果改成：友善评论... 是否会更好？
③、避免使用双重否定的句式：在微信撤回的反馈文案中采用了双重否定的句式（是否撤回该条消息）这样的句式容易增加认知负荷；而淘宝删除记录反馈文章中，则直接询问：确认删除？这样的句式更直接，更好理解。这里我尝试将微信撤回反馈改成：撤回该条消息？下方操作文案也直接使用撤回，这样看起来是否更明确了呢？
结合自身产品定位：上述两个案例续费文案都是展示了自身产品的定位进行设计的，相较于冷冷的会员到期提示，这样的方式更显趣味性。
文案适当拟人化：拟人化的文案可以拉近用户距离，会显得产品更有温度而不是冷彬彬的机器，有时还显得有些小可爱~(#^.^#)
----------------------------------------------------------------------------------
所以在具体交互方案上，设计师对于文案的把控记住以下几条原则：
①、字词简单，用用户看得懂的字；
②、表意准确无歧义；
③、字数简短，陈述语句，避免使用双重否定类句式；
④、必要时可适当拟人化、趣味化。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
你是否在面试有中被问到，你设计的页面需求是如何获取的? 需求是如何聚焦筛选的？需求是如何做优先级排期的？在互联网产品的全生命周期里都会涉及到很多的需求。企业的CEO、甲方客户，用户调研各方得到的需求时常扎堆，就算是一个小功能也会有很多问题，呈分散式、零星式。
哪个需求对用户来说最重要？用户对我们的新功能是否满意？我们究竟要先做哪些需求？在企业里，大多数时候项目排期内，我们都面临着开发、设计、测试等人力资源有限的境地。用户什么都想要，但是不可能所有功能都一起开发、上线。作为用户体验设计师或者高级UI设计师，我们有充分地理由掌握一个科学系统的方法可视化需求排期。到底有没有一个科学的方法论把需求划分优先级，去说服你的老板、甲方、产品、技术和你自己？
废话不多说 ，我们直接上干货！
维基百科对KANO模型的定义如下：
The Kano model is a theory for product development and customer satisfaction developed in the 1980s by Professor Noriaki Kano, which classifies customer preferences into five categories.
KANO 模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的有用工具，以分析用户需求对用户满意的影响为基础，体现了产品性能和用户满意之间的非线性关系。
“用户满意度”是用来衡量需求实现后，用户的满意程度。具体可以分为以下几个等级。
“功能完善程度”是用来衡量某个功能被实现的程度。具体可以分为以下几个等级。
通过“用户满意度”以及“功能完善程度”两个维度，我们可以划分五种不同类型的需求：
（M）基本型质量 —— Must-be Quality
（P）期望型质量 —— Performance Quality
（A）兴奋型质量 —— Attractive Quality
（I）无差异型质量 —— Indifferent Quality
（R）反向型质量 —— Reverse Quality
（1）必要型：产品必须要有的功能，属于用户的基本需求，即用户的痛点。需求满足时，用户不会感到满意；需求不满足时，用户会很不满意；当投入达到一定程度时，不需要再过多的投入。
比如：我们生活中常见的必需品。手机要可以打电话，汽车需要能加速和刹车；微信的聊天功能、抖音的短视频功能、百度的搜索功能等等一系列产品必须的功能。
（2）期望型：（线性增长）用户希望有的功能，用户在其他产品上使用过并养成了一定的用户习惯后，作为期望的标准也希望产品能具备此功能。需求满足时，用户会感到很满意；需求不满足时，用户会很不满意；这类需求与用户的期望契合度极高，需求实现程度越高，用户的满意度也越高。我们要集中投入。
比如：手机的储存容量、续航能力越高，用户的满意度越高。当地服务类生鲜外卖产品，骑手的实时定位以及距离送达时间就属于期望型需求。但也随着整体功能不断完善也在慢慢从期望型需求转化为基本需求。
（3）兴奋型：超出用户预期的的功能。是产品差异化的亮点，如果没有该功能，用户的满意度不会降低，但是如果有了该功能用户的满意度则会大大提升。能极大的提高用户的满意度，但是同时也要付出大量的研发成本。兴奋型需求一般是目前市面上没有的功能，用户没有接触过，也没有养成用户习惯。
比如最近网易云音乐、QQ音乐等推出的一起听功能，bilibili推出的一起看功能就属于兴奋型需求。早年间里第一次使用微信便捷的语音交流，第一次使用抖音等，会让我们在初次使用时出乎我们的意料。
（4）无差别型：用户不在意的功能，这类需求的有无对用户来说无关痛痒，用户并不关注。
在APP中一般为特定目的而产生的多余设计，如提醒你续费会员页面，属于引导消费。这类需求要避免投入过多，将精力转移到其它类型的需求上面去。
（5）反向型：会引起用户反感的功能，是指用户不希望出现在产品或服务上的功能。出现时，用户的满意度不增反降。比如在进入一款APP时有四五个弹窗活动入口引导充值和诱导消费，需要逐个点击关闭才能进入页面，这类设计越多用户的负面体验就越强。
Tips：比如我们做一款手机，打电话功能是基本型需求。我们需要花费大量的时间去夯实这个功能，把它做的稳定准确。如果一款手机打电话交流都有问题，而去花费大量精力去优化它的拍照，视频等功能。就是失去了一款手机最基本的使用。这与产品设计初期优先考虑产品的可用性与易用性，是否能打中用户痛点同理，先把精力集中做好基本型需求，而不是过度关注在产品设计细节等期望型、兴奋性需求上。
根据前面“用户满意度”作为纵坐标，“功能完善程度”作为横坐标得到这张Kano品质要素图
Tips：在图像中可以看到，魅力属性和期望属性是会慢慢发生变化的。魅力属性会随着时间推移、用户习惯的养成、竞品的影响等，慢慢转化为期望属性。一部分的期望属性会随着时间推移、用户习惯的养成、操作流程的影响等，慢慢的转化为基本型属性。
首先我们选择要进行排序的需求。
在实际的工作场景中，我们往往在一个工作周期内可能同时会接到很多的需求。我们面临项目时间紧，开发、设计人手资源有限的境况。我们首先就需要筛选出适合Kano模型的需求类型，才能更好的进行下面的评估过程。
我们的需求池中往往有着不同类别的需求，有的是需求是关系到最终用户，有的需求是运营、管理层、甲方客户。按照常规的需求类型大致可以分为这几类：
（1）软件问题（技术类）：这类问题多为软件BUG，这类问题通常涉及到我们的产品是否为用户提供了良好的可用性（产品功能初期一般优先考虑的是可用性和易用性）体验，一般属于基本型需求，因此属于需要紧急处理的问题。
（2）用户问题 （交互体验类）：这类问题多为交互体验问题，例如用户使用产品过程中出现的不知道如何使用某功能（没有做功能引导、不符合用户心智、学习成本高），或者某功能找不到在哪（功能个入口不清晰、信息入口层级过深）等类似问题。
（3）产品建议：这类问题基本上属于期望型需求，例如用户希望增加某某功能或在某个操作流程感到缺少什么功能。
（4）其他问题：Kano模型适合与最终用户可以直接操作、感知、相关的需求。而不是针对于产品的运营人员、管理层、甲方客户等的需求。
Tips：因为KANO模型只从用户满意度及功能完善程度这两个维度出发去分析需求价值，所以并不适用于当价值衡量需考虑其他维度因素，如需要将战略、商业收益纳入考虑等等。
选择我们产品的目标用户。
可以在问卷题目中增加条件筛选，在后续问卷收集后进行数据清洗。比如产品的目标用户为18-36岁女性用户，就可以在问卷中增加询问年龄问题，在收集上来的数据结果中筛选掉这一部分非目标用户数据。为我们下一步的问卷设计投放做准备。
针对第一步梳理后的需求集，进行正反向的发散。KANO问卷每一个功能或需求问题是由正向和负向两个子问题构成，分别是用户在具备或不具备某项功能做出的反应。问题选项按照：非常喜欢、理所当然、无所谓、勉强接受、很不喜欢，进行评定。
对此我们问用户3个问题：
（1）正向问题：
如果我们增加【功能1】，你的感受是?
（2）反向问题
如果我们不增加【功能1】，你的感受是?
（3）重要程度
【功能1】对你来说有多重要？
Tips：在实际调研中，产品具有某个功能，大部分人不会表示“不喜欢”或“无可奈何”。“无所谓”一般是态度的下线，即很少会有人会觉得“很不喜欢”或“勉强接受”。所以在问卷设计阶段为了提高用户填表的效率，在选项设定中正反向只设定3个选项。
可以采用定量调研的方式，使用“问卷星”设置好问题发在产品用户交流群中或私域流量群中。
Tips：
如何向用户提问，如何收集用户的回答将直接影响到需求排序的结果。这一步非常重要。
提醒用户正反问题之间的区别，注意强调“增加”还是“不增加”，防止用户看错题意。
在实际题目设置中，当功能数量比较多（大于5个时），有比较接近类似的，建议对用户进行分组，每个用户最多回答5个功能点，且尽量是区分度大的功能点。
有时需要对功能进行解释，确保用户能够理解。
调研后需要对数据进行清洗，处理掉一些用户乱填或错误的数据。比如所有题目都选一样和一些可疑结果的数据。
基于收集的问卷量化的结果，进行需求分类分析。每组正反向问题的排列组合一共是25种，得到需求类型参照表。这张表格中，将重点关注正向的回答（即 > 0 的部分），这样我们可以帮把注意力放在最重要的正向需求上面。（避免关注到“具备功能时”用户觉得“勉强接受”和“很不喜欢”的需求上）
Tips：Q：代表可疑结果。对于一个功能的提供与否，用户都表现出了很喜欢或者很不喜欢这种自相矛盾的情况。所以，这样的结果在最终统计时，一般都需要排除掉。
需求优先级排序为：基本型 ＞ 期望型 ＞ 兴奋型 ＞ 无差别型 ＞ 反向型
在需求数量不是很多只需确认需求分类时，到这里就可以结束了。只需要基于以上结果进行统计，根据少数服从大多数的逻辑，最多比例的属性作为统计后的结果，即该需求分类。
比如：【功能1】最后收集数据为，基本型42、期望型28、兴奋型0、无差异型7，【功能1】为基本型需求。再根据需求排序确定优先级。
如果涉及到较多需求，或者同类型需求有多个需要优先级排序时，你还需进行下一步。
我们引入better-worse系数的概念，表示某功能可以增加满意或者消除不喜欢的影响程度。
Better系数=（期望数+兴奋数）/（期望数+兴奋数+基本数+无差异数）
= （P+A）/(P+A+M+I)
Worse系数= -1 *（期望数+必备数）/（期望数+兴奋数+基本数+无差异数）
= -1 *（P+M）/(P+A+M+I)
Bette系数，可以简单理解为满意系数，代表如果产品提供某种功能，用户满意度会提升。Better值越大/越接近1，则表示用户满意度提升的效果会越强。
Worse系数，可以简单理解为不满意系数，Worse的数值通常为负，代表产品如果不提供某种功能或服务，用户满意度会降低。其绝对值越接近1，则表示对用户不满意度的影响最大。
1. 横坐标为Better系数，纵坐标为Worse系数绝对值。根据实际得到结果将最大值均分依次放入两个坐标轴上。
2. 分别计算Better系数平均值、Worser系数绝对值平均值，将其作为参考警戒线加入图表中。
3. 将各个需求的对应的Better系数值、Worser系数绝对值放入图像内。
4. 我们将根据需求的重要性，来调整上图中点的大小。这时我们引入功能重要程度概念（在前文问卷问题中有提到），这里可以量化功能需求的重要程度，从“不重要”到“非常重要”，1到9分依次可对应需求点的直径大小，比如“非常重要”点为90px直径的圆，可根据具体情况灵活运用。
5. 根据需求优先级排序为：基本型 ＞ 期望型 ＞ 兴奋型 ＞ 无差别型 ＞ 反向型 。同一需求类型再根据重要程度二次排序。
6. 至此各个功能需求优先级排序一目了然。
最后，我以“呱呱生鲜”产品为例子回顾整个Kano模型可视化需求的流程。
这次我们有10个需求需要做需求可视化。分别为：
Q1：在点击订单结算后提供优惠换购功能；
Q2：询问上次购买订单是否满意反馈弹窗；
Q3：会员每日可领取免费菜功能；
Q4：进入APP提醒不在常用定位地址功能；
Q5：商品详情页面菜品推荐做法功能；
Q6：有辣味的商品图片提醒辣度指数；
Q7：商品详情页面菜品直播功能；
Q8：商品列表显示菜品榜单排名参数；
Q9：购物车结算提示可以免费领取小葱；
Q10：猜你喜欢你的常购清单功能；
因为KANO模型只从用户满意度及功能完善程度这两个维度出发去分析需求价值，以上10个需求功能均为用户可直接感知。符合Kano模型条件。
选择产品的目标用户进行问卷投放。
对此我们问用户3个问题：
（1）正向问题：
如果我们增加【功能1】，你的感受是?
（2）反向问题
如果我们不增加【功能1】，你的感受是?
（3）重要程度
【功能1】对你来说有多重要？
使用“问卷星”设置好问卷问题投放在产品用户交流群中或私域流量中。
对调研后收集上来的数据进行数据清洗，处理掉一些用户乱填或错误的数据。比如所有题目都选一样和一些可疑结果的数据。
（1）基于收集的问卷量化结果，对照需求类型参照表,进行需求分类分析。
（2）结合需求优先级排序：基本型 ＞ 期望型 ＞ 兴奋型 ＞ 无差别型 ＞ 反向型 。
（3）计算better-worse系数，计算Better系数平均值、Worser系数绝对值平均值，将其作为参考警戒线加入图表中。
（4）将各个需求的对应的Better系数值、Worser系数绝对值放入图像内。
（5）我们将根据需求的重要性，来调整上图中点的大小。
（6）得到最终的需求可视化排期图，至此各个功能需求优先级排序一目了然。
我们设计师需要在自我能力范围内，不断提升为企业团队服务，增加自己对内话语权以及对外影响力。成为自我驱动高级体验设计师。在工作中也需要对需求做一个设计价值和优先级的排序，搭建需求可视化体系。对不同的需求进行品质类型划分，列出属于自己排出的需求列表，在更有价值的需求上花费更多的时间精益求精。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
当下互联网进入以内容运营为核心的时代，市场竞争激烈，需要对于市场的热点进行快速反应，持续迭代。不管是大厂还是小厂的UI设计师多多少少需要支援运营需求。U1S1 做简单运营图对于体验设计方向的设计师来说，性价比确实有点低，一般难度较高的运营设计需求都由专业的视觉设计师来做，体验设计师一般接到的都是比较简单或者紧急的需求，这对于设计的能力提升来说是比较有限的，大量的时间被占用在运营设计上，持续被榨干，有些本末倒置，但人生就是这么操蛋，总得想办法解决。
就目前大部分互联产品的Banner而言。
其构成一般由标题文案、主体元素（人物、物品等）、背景（场景、底色等）元素构成。
面向设计师：模板化运营设计 + 素材资源同步盘
第一种方法是本文的核心方法，原理很简单，其实就是利用Sketch和或者Figma的组件化（为了统一语义本文统一称为组件，其子集为用例）进行设计。
我们将这些元素分别打包成组件.
把组件的用例调整后放置在预览区所有不同尺寸的画板中。
当出现需要特殊调整的时候可以解绑微调。如果希望给画面添加一些细节的话，再另外添加即可～
这么一波操作，大概1个多钟就可以输出一整套7个图，足以应付一周22套运营图的需求了（悲伤的故事）
当然要达到这种速度还需要一个通用素材库的加持。空闲时间把一些KV的图素拆出来放到Eagle共享盘，这样你和你的小伙伴们就可以高效愉快地拉图了...
面向运营同学：创客贴等第三方设计平台
在创客贴搞个团队模式，然后设计师把常用的一些模板上传上去，运营同学只要自己改改文案，换换人就可以啦
虽然有了模板化的设计工具，但如果缺少了设计规范的引导，就会宛如脱缰野马，设计出各种偏离业务需求或风格不一致的Banner出来。
设计规范需要与运营同学共同协商制定，比如标题最长长度、排版构图、图素尺寸等等。具体规范需要根据不同的业务需求进行定制化。
下面就以我们团队的制定方式作为范例说明一下。
排版构图
常规的排版构图模式有居中式构图、左右构图。
居中式构图：居中式构图是将主体放置画面的中心进行构图。这种构图方式这种构图方式的最大优点就在于主体突出、明确而且画面容易取得左右平衡的效果
左右式构图：左右构图将文字标题元素和主体物按照比例分割进行位置安排。符合用户阅读习惯：阅读视线要符合用户从左到右或从上到下的浏览习惯。
尺寸
Banner的尺寸需要根据UI界面的需求进行制定。
例如针对我司的产品，一个活动最多有7个运营位的样式，分别在首页、搜索位、文章封面、活动中心、闪屏等。
标题长度限制
由于运营同学有时候对于标题的长度没有经过精简优化，标题特别长长长长长长长长，加上Banner本身就小，在手机屏幕上基本看不清，也就没有意义了。因此需要共同制定好主标题副标题长度限制，超过就直接打回重改。
出血设置
制定出血位的原因是某些尺寸的图素可能出现在多个不同的入口，以及不同尺寸的手机屏幕可能会出现裁剪的现象。
不论是设计师也好，运营同学也好，完成设计之后最好建立一个视觉自查表进行对照，目的是尽量减少一些原则性错误，减少来回改稿的情况。
为了更完美的提升整个流程效率，不仅需要升级中部流程，前后端的流程都需要进行优化。
首先是最好在需求的前端建立需求排期表进行需求的筛选。
分门别类地将需求的详细信息进行可视化展示，对应的需求文档接入。这里不得不吹一波飞书文档，太**好用了。
针对需求的后端即设计交付环节，最好是在设计稿导出的时候使用工具进行压缩，更小的体积意味着更快的加载速度，这对于提升产品的用户体验是毋庸置疑的。这里推荐2个工具：
1.imageOptim
2.Picdiet https://www.picdiet.com/zh-cn (个人推荐JPG使用这个网站，压缩的质量最高)
最后，如果实在人力不足的情况下，就把项目外包出去吧，毕竟占用UI设计师太多时间产出如果没什么价值的话，其实roi也是很低的，设计师的人力成本也是钱！
“能用钱解决的问题，就用钱解决！”—— 鲁迅
如果运营经常提出很多无理的需求，比如量很大，没有什么依据都是拍脑袋想的，那可以考虑把项目外包出去，一旦外包出去，花的就是真金白银，让运营也知道，这是设计师呕心沥血画的，市场的价格就摆在那，整天搞些有的没的是否真的能对项目带来价值。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
我们在设计中经常会遇到新版本或改版的设计，从创意想法到设计初稿的过程可能会花费比较长的时间。而作为设计师除了自己思考设计之外，还需要与产品、设计老大沟通我们的一些设计想法。因此，我们需要在不同的阶段输出不同的内容反馈进度并达成一些共识。
首先我们要明确什么是情绪版？我的理解是：情绪版既不是初稿也不是最终的风格方向，而是设计师在了解了相关的产品背景后，基于自己对于产品的理解给出的一个较为初始的设计建议，并且希望可以通过这个初始的建议与产品侧达成一些相关的设计共识。
情绪版的设计流程大概分为前中后三个阶段，前期：分析-收集，中期：筛选-组合，后期：打磨-呈现。
主要是分析产品相关背景或需求本身的方向，结合产品背景及需求本身再进一步分析大概的设计方向并收集相关素材内容。
当我们收集完成后需要对现有素材进行二次筛选并组合，基于现有素材组合大概的设计方案结构。
基础方案组合完成后需要进行二次打磨，细化方案的内容表现，检查整体的一致性及完整度，最后呈现给产品方。
可能很多设计师会疑惑为什么要做情绪版，直接设计初稿不就好了吗？如果有这个疑问，可能还没实际了解到情绪版到作用。但我们可以试着从我们在设计过程中遇到的痛点来了解情绪版的作用或者意义。
在设计的过程中你是否会存在下面几个问题：
从这几个问题中，我们可以得到一个比较统一的结论就是：前期设计呈现内容不够，导致沟通不足而产生方向不统一。因此基于这个关键点，我们再来看情绪版的作用。
在前期，世界观、背景方面的内容大多是以文字的方式呈现，因此设计师可以通过情绪版的方式，来输出对应的世界观设计表现，这样可以更加直观的表现出对应的视觉语言。
在初期与产品侧沟通时，单纯靠语言表达的方式很难让对方达到一种脑补的状态。因此借助情绪版的方式更加直观的呈现设计想法，通过具象的图形或者图形，大大降低双方的沟通成本。
基于第二点的沟通，我们可以明确的了解到产品侧的一些喜好。为后续设计初稿时起到一个清晰的方向作用。
从零到一设计一套完整的方案往往需要耗费较长的时间，借助情绪版设计的方式来快速响应一些想法及创意，这样可以大大提高前期的输出效率。
从多次的尝试中，我总结梳理了几个基本原则，了解这些原则可以让我们在做的时候更加严谨，输出更加准确的设计方案。
情绪版的设计与我们日常设计一样，需要给出不同的方向建议，单一的方案往往难以抉择。多方案输出除了提升抉择空间之外，还可以增加方案碰撞的情况，往往可能是方案A的某部分内容叠加方案B的某部分内容才能产生最初的方向。
此阶段的所有输出皆属于尝试与探索，因此不必过于考究设计细节，重点在于表达出需要相关的设计概念及思考想法，把更多的时间留作设计思考及方案尝试。
情绪版的输出重点在于前期沟通而达到一个比较好的共识，因此在保证质量的情况下，避免花费过多的时间而影响输出的效率性。尽量做到快与准。在过往中项目组，基本上是以半天（4个小时左右）为一个单位来完成一套方案。
情绪版是一种非常有效试探产品侧想要往那种方向去推动的方式，因为我们在实际的设计过程中，产品侧可能也对整体的设计大调并不少特别有明确的脑补，因此设计师可以借助情绪版的设计来挖掘产品侧想要往哪个方向进行发力。
这里总结情绪版的设计方法大概有这几种：1.借助图像/插图、2.结合实际场景引申、3.借鉴摘取同类型设计、4.绘制草稿。
在我们设计一些专题活动或者绘制插图相关的一些设计时，可以考虑使用这种方法来输出你的情绪版设计，可以通过借鉴一些设计网站或插图网站上的现有素材来拼接，并表达自己在这方法的一些设计意图及想法。
从更概念化的角度出发，通过引用一些实际场景、物品、图像，来拓展相关的图形、质感、色彩方面的设计，并且输出相关的设计雏形。例如我们在设计LOGO或者图形类的一些设计，使用这种方法就可以帮助我们突破一些现有的认知壁垒。
在设计之初，我们通常会有一个大概的思考雏形，但如果直接开始设计往往效率上并不高。因此可以借助一些设计网站上的设计，通过摘取组合的方式呈现自己的初步想法。我通常会在UI新版或者改版的时候使用这种方式，但只能表达大概的想法且不能代表最终的初稿设计。
当我们想要表达一些沟通或者框架的设计时，我们可以使用草稿绘制的方式来表现，这个方式简单快捷，可以很有效率的对齐大部分的设计共识。
基于原则及方法，我们可以来简单了解下情绪版设计中需要注意的一些事项，通过这些内容让你在实际操作过程中少踩一些坑。
设计方案控制在2-3个左右即可，前期大多是属于试探性方案呈现及找方向，太多则容易导致选择困难。
篇幅过长往往容易降低别人阅读的耐心，对于情绪版的输出也是如此。结合过往的经验，建议以16:9的画面为一页来呈现一个方案。
在一页内呈现的方案避免过于平均，可以适当突出某些想要重点表达的内容，例如在这个方案中想要重点突出图标、颜色等，那么这里需要突出这部分在画面中的比例，适当缩小其他模块的尺寸。
在输出情绪版设计方案时还可以适当考虑结合产品的世界观，通过一些具象化的图形或者插图来表现相关的内容。例如我们之前在游戏中心改版的尝试中，就发散了几个相关的世界观，因此我们在输出方案时，则只需要把对应的世界观作为方案，通过情绪版的方式表现出来即可。
一致性是表现一个设计师是否具有系统化、全局观的思考思维，因此我们在表现情绪版时也需要关注这方面的内容，避免整体的调性不匹配。
在呈现方案时，尽量多维度的进行对比，呈现一个完整性、系统性的设计。例如我们在设计UI相关的内容，从图标、颜色、字体等等一系列的内容需要细致的阐述清楚，让人更加能够了解你的意图。
由于我日常以设计UI为主，因此可以给大家重点分享我在UI情绪版设计的经验。希望可以帮助到大家快速上手。
当你在做UI设计情绪版时，需要明确了解UI设计中的结构，更系统性的去思考整体的内容。我们在UI设计中往往需要包含以下这些内容：图形系统（图标+辅助图形）、颜色系统、字体字形系统、质感形态、界面形态、插图风格、动效系统、影像系统，等等这些部分的内容。
案例一：整体风格比较偏个性一些，页面尝试用深色的背景设计
优点：整体风格比较酷，配色比较未来感符合年轻的人的审美，深色的背景让内容更加聚焦。
案例二：整体风格3D化的设计，包括页面的一些体验上都可以增加视察的效果来设计
优点：整体设计风格比较新颖，符合现在的设计趋势，整体感觉也比较年轻多彩
缺点：3D的制作成本相对较大
案例三：整体风格比较清爽，白色融入渐变的设计也会显得比较年轻
优点：整体页面清爽，可以满足任何内容的透出，渐变色的图标和按钮的设计补充了细节
很多时候我们会觉得情绪版设计可有可无，或者因为时间的关系不允许我们经过这一步。但，如我一开始提到的点，情绪版可以在前期帮助我们去打通很多思考的壁垒，辅助设计师在前期直观的与产品侧进行方向上的探讨，从而找到大方向上的共识。
以上都是属于我个人总结的一些经验，因此建议大家在日常项目中多去尝试，并在尝试中找到适合自己的方法。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
信息架构这篇是本人在现阶段觉得较难学习与阐述的知识点，网上关于信息架构的知识内容也是参差不齐。在学习与探究的过程中查阅了很多资料，反复修改多次，尽量用直白的语言结合实例来阐述信息架构。目录如下：
大家可以根据上述目录来进行选择性阅读，当然全文阅读也是极好的～
这篇文章的起源，来源于最近看到的话题“B端设计师会被组件库取代吗？”。从表面上看，在组件库越来越完善的时代，很多页面设计依靠组件库就能够快速搭建。
那么在这种情况下，B端设计师存在的意义和价值到底体现在哪里呢？其实B端设计的重点并不在页面的视觉上，视觉只是作为设计师最终输出成果的一小部分。个人认为B端设计师工作重心体现在做「正确的设计」，比如以下几个方面：
1.这个设计能否完成对应的商业目标和产品目标；
2.我们的信息呈现是否合理以及能否解决当前需求；
3.用户能否在页面上快速找到想要的信息；
而想要弄清楚并解决上述这些问题，在众多的话题阐述之下，我发现其论述本质上都逃离不了「信息架构」这个概念。因此我认为设计师都需要对这个概念有充分的认知，这能够帮助我们做出正确且出色的设计。
关于信息架构的概念，在百科上面的定义大部分都比较晦涩难懂，比如维基百科和百度百科的解释：
相信大部分人都很难明白其中描述的意思。在这里换种思路，将信息架构拆分为信息与架构去理解。
信息指的是内容的载体，常见的文字、图像等都是信息；架构的含义则形容对应的组织和结构。那么信息架构就是将信息通过一定的形式组织起来，然后呈现出来。其本质就是研究信息的表达与传递。
通俗点讲，信息架构就是让用户可以更容易的理解我们的产品，让用户在使用我们的产品时可以更顺利、更自然。因此信息架构没有一个具体的呈现形式，它更多的是体现在产品设计的各方面。具体主要表现为组织系统、标签系统、导航系统和搜索系统。
为什么需要信息架构？我们都知道B端产品设计的核心是「降本提效」，在设计这一侧的可以将其理解为降低认知成本，提升使用效率。
降低认知成本需要我们更好的表达信息，让用户能看明白我们的产品能够做什么，如何用；提升使用效率需要提升信息的传递效率，让用户能够很容易的找到需要的功能；
而信息架构从本质上来讲也正是研究信息的表达和传递。因此我们需要通过它来帮助我们更好的完成B端产品设计。如果没有信息架构来作底层支撑，那么我们在页面上看到的可能就只有功能的堆叠，让产品陷入难以上手或者不知道怎么用的尴尬境地。
一个强大信息架构是产品质量的保证，是作为设计支撑点的骨架，它会减少可用性问题，提升整体导航行，创造对用户友好的体验。比如举一个工具层面的例子：
PS的工具栏堆叠在界面各个部分，而Figma的工具栏则集中在右侧且只出现当前需要的功能。很明显Figma在信息架构中的信息组织部分做得更为友好，PS则会显得逊色一些。这也是我们在学习PS的时候会显得比较吃力的原因之一。
可以说良好的信息架构是高效用户体验的基础。视觉元素，功能，交互和导航都是在信息架构的基础上构建的。因此想要做出体验好且合理的页面设计，我们就需要参与到信息架构这个过程中来，和产品一起完成对应架构的梳理。而不是只完成从原型到页面这个部分。
如果想要搭建一个好的建筑，我们需要知道其建造的目的，是按照什么样的结构搭建，内部有哪些系统，以及最后呈现的模样。
那么信息架构也同理，我们首先需要知道信息是为了什么目标服务，然后我们通过怎样的结构来组织这些信息，以及过程中会用到的信息元素，最后如何呈现它们。这都是我们在搭建信息架构中需要进行的必要步骤。如果某些环节没有做好或者没有了解透彻，那么在输出信息架构时往往会出现方向或者策略上的问题。接下来我们看看这些步骤是如何具体呈现的。
B端行业对于业务理解的要求是比较高的，只有在理解业务的基础上，将业务需求转化为对应的设计目标，我们才能够输出合理的信息架构方案。
个人认为理解业务的基础，就是能够用一句话讲清楚当前设计的产品。这句话可以描述为：谁在什么地方想要完成什么目标。比如「用户想要不出门就能够吃到东西」，这就是外卖软件提供的产品服务。
虽然看上去这句话很简单，但其中包括了三个要素：用户、场景和目标。因此我们在分析和梳理业务的过程中首先要弄清楚的就是这三个要素。
用户永远是排在第一位的，也是我们首先需要弄清楚的。在B端设计中，本质上可以分为两类角色：客户和用户。比如我们常用的钉钉或企业微信，购买客户是企业，实际用户是员工。
对于企业：「我想要有一款软件可以更好的管理员工」
对于员工：「我想要这款软件能够更好地提高工作效率」
客户决定了我们产品的购买（部分情况下也兼顾使用），而用户则决定了后续产品的复购率。因此在业务理解中，我们需要弄清楚当前产品所处的服务阶段，比如初期为了打开市场肯定更倾向于客户，而中后期为了提高产品的使用体验又会偏向于用户。
因此我们首先需要弄清楚的就是当前产品是为哪些「目标用户」服务，这也就决定了我们在设计信息架构时对应的不同侧重点。
场景是指需求产生的某种条件，这个条件包括但不限于环境、时间、地点、空间等，只有上述条件满足，这个需求才能成立。这里可以把场景理解为产生该问题的原因。
比如当用户提出「她需要一件衣服」，那么我们就需要弄清楚用户为什么需要添加衣服，是她感冒了自身觉得冷还是因为外界环境冷。这两种场景涉及到的解决方案是完全不一样的。
在平日的工作中我们可以通过以下两种方式来更好的了解业务场景：
1.通过业务方文档进行业务背景的初步理解。业务文档中一般都会包括需求背景，我们可以通过文档进行初步了解。
2.通过业务沟通进一步加深业务背景的理解。由于很多B端业务离设计师本身的生活比较远。因此对于需求背景中不理解或者比较模糊的部分，我们可以通过与业务方或产品多次沟通来挖掘最底层的背景。
毕竟需求背景是理解业务的重要步骤，我们只有知道需求产生的原因，才能够针对性的给出解决方案。
目标决定了我们的产品最终的方向。我们首先接触到的一般都是业务目标，而我们要做的就是将业务目标转化为我们此次的设计目标。
A.业务目标
业务目标就是此次业务想要解决的实际问题，它通常是一个宏观上的描述。比如打车软件的业务目标简单概括来讲就是让用户能够更快速地打到车，减少等待焦虑。我们一般通过文档或者沟通来了解该目标。
B.设计目标
设计目标是我们基于业务目标而给出的设计策略，是一种更具体的实现方式。比如我们要让用户快速的打到车，那么这个时候我们的设计目标就是通过将用户位置和司机位置进行快速匹配，并通过超时补贴红包的方案来降低用户焦虑。从而实现业务目标。而这一过程涉及到的信息点就有：司机位置、乘客位置、等车时间、补贴金额等元素，并需要思考它们之间的关系和呈现方式。
可以发现从业务目标转化到设计目标这个过程，实际上就是在确定功能和信息点的过程。这样才能让我们更好地设计信息架构。
从前文可以看出我们会在整体设计过程中出现很多的信息元素。如果不经过对应的组织和处理，直接堆叠在一起，那么信息含义会比较乱且难以调用。比如下方：
而右侧图片信息的组织过程可以理解为通过将零散的数据信息进行分类，再以某种结构化的形式将它们重新组合排布的过程，直白一点就是先分类，再结构化呈现。我用一张图来表明这个过程：
那么这个过程中「信息组织」和「结构呈现」到底应该怎么做，也就是接下来要讲的组织方式和结构类型。
组织方式可以分为精确分类和模糊分类。精确分类就是我们会利用物体本身物理属性来进行分类，比如位置、字母表、时间、类别、层级等方式进行组织。一些工具类应用例如滴答清单内容信息都是按照时间来进行组织的：
而模糊分类则是按照更为主观的逻辑对信息进行分类, 如主题、任务、用户、隐喻等来进行归类，比如我们常用的APP商城是按照不同的主题类别来进行区分的。
但在很多时候，产品倾向于将两种组织方式结合起来形成复合型组织方式，从而能够使我们的整体组织形式更符合用户的使用习惯。比如蓝湖的信息组织，其中既包含了模糊分类（按使用类型等分类），也包含了精确分类（按上传文件时间等）。
其实在大部分B端产品中，大都按照模糊分类来进行处理，比如按照任务、流程等方式。而精确分类更多用于在页面内的局部信息模块，比如创建时间和文件大小等。
归根结底，我们分类方式的选择需要结合我们前面提到的用户、场景和目标，这样才能让我们的分类更具说服力。
当信息按照分类维度组织后，我们接下来就是把整体信息进行结构化，这样才可以将信息整体连接起来并呈现出来。一般分为以下四种组织方式：
A.层级结构（最重要的结构）
这是信息架构中最为常见的结构，也是比较符合用户认知的结构。有时也称为「树状结构」。以子父节点的形式一层一层延展。
层级结构的优势就在于可以承载复杂的多层级内容，通过层级递进的方式将复杂的多层级拆解得更简洁。
但我们需要把控好内容的广度和深度，广度指的是在层级结构中每一层的数目，最好控制在7个以内。如果广度太宽意味着每个页面会给用户展示太多的信息，增加寻找内容的负担。深度为纵向结构，建议一般3层，最多不超过5层。过深的层级会让用户点击很多次，且不容易被用户发现。比如飞书的基本信息架构也是主要以层级结构来进行的。
B.矩阵结构（多维度结构）
矩阵结构是各个节点都相互连接的一种信息架构方式，通俗来讲就是用户既可以通过多个维度去触达同一信息，也可以从单个维度连接多种信息。
这种结构其实就更类似于我们在做相关功能时：比如当你进入电影全屏时想要退出时，既可以通过点击按钮退出，还可以通过键盘的Esc返回到，通过多点触达同一操作。
又比如我们的联系人功能，我们既可以通过输入数字拨打电话，也可以查找联系人进行拨打，还可以查询电话记录进行回拨。
矩阵结构最重要的意义在于给用户提供多种路径，使用户能够在不同路径中寻找各自想要的东西。
C.自然结构（随机性）
自然结构不遵循任何一致的模式，节点都是被逐一连接起来的。
自然结构一般都具有随机性和不确定性。这种更倾向于泛娱乐化的C端应用。比如我们常见视频网站的在推荐流都是应用的自然结构。比如打开B站等视频平台，你很难猜到刚进入看到的是什么。
但一般自然结构不会单独存在，比如B站在自然结构中也绑定了层级结构来进行层级上的划分。
D.线性结构（单一性）
线性结构是非常单一的一个结构，整体是一层一层向下递进。比较强调先后顺序的一种结构。
这种结构通常用于我们常见的软件安装程序等，也可以用于部分功能结构，比如网站的视频发布，一般都是经过上传-编辑-发布这三个步骤来依次进行。
大家可以发现在进行信息架构时，我们在很多情况下可能会运用多种组织结构方式，我们需要根据对应的用户决策场景来考虑让最适合的几种方式相结合。但最终目的都是为了让用户能够更快速的获取信息。
在信息的组织过程中，我们需要注意用户的心智模型。比如当我们看到红点就知道有新信息通知，看到下拉箭头就知道可以展开。这是互联网产品在无形中给用户建立的底层习惯认知。用户目前对于普遍产品的一些基础布局、功能名称和交互逻辑都形成了一定的习惯，这都属于用户的心智模型的内容。
因此我们在组织信息时尽可能不要去打破用户常见的心智模型，否则必然会导致用户的不习惯。我们常见的「扫一扫」功能，微信、支付宝和QQ会隐藏在「+」号里面。而微博和抖音却分别放置在了「我的」和「搜索」里面。
这样会导致用户难以发现该功能。因为用户接触新的信息时，会以最初接触的局部信息为依据展开并形成初步认知，而用户认知中的信息组织逻辑和实际信息的吻合度越高, 他在进一步查看或寻找信息的过程中体验会更顺畅, 反之, 若一开始形成的认知与实际信息的差异过大, 在后期的信息搜寻过程中则容易遇到困难。而这个吻合程度其实就是用户心智模型。
虽然建议在一定程度上遵循用户心智，但并不是说绝对遵循。对于用户不熟知的场景或者某些专业术语，我们需要通过灵活有效的提示（比如标记注释等）来引导用户就可以了。比如我们刚才提出的抖音扫一扫，它的应用场景其实是用于抖音官网后台登录，且在后台登录时已经给出了对应提示，那么这样的设计也是合理的。
当经过上面的信息组织，其实我们已经能够归纳出一个大体的信息架构框架。但在信息组织之外，我们还需要关注以下三点：标签、导航和搜索。这对于信息架构的完整性也有非常重要的意义。
标签系统，通俗来讲就是要我们对当前整个系统信息节点的命名，从而让信息的呈现更容易识别。拿个最简单的例子来进行说明：
可以看到左侧和右侧关于卫生间的信息标示，可能左边你能一眼区分，右边可能就需要反应半天才能猜出到底代表什么含义了。
这其实就是关于我们的信息命名是否能够被大多数用户所接受的场景，也就是我们标签作用所起的作用。标签可以分为图片和文字标签，都需要考虑用户对该信息命名的认知程度，也就是前面提到的心智模型。那么如何能够更好的去定义标签名称呢，这里需要注意2个方面：
A.优先选用被行业广泛接受的词或图标
在进行标签定义的时候，尽量选择已经被用户所熟知的词语，比如「工作台」「通讯录」等已经被运用得非常熟练，对于类似功能就直接以该形式命名，比如我们的设计软件中，很多图标和功能名称都是通用的：
这样做能够很大程度减少用户的学习成本。因此在B端设计中我们也需要注意到我们所在的行业，哪些名词已经达成了共识，就无需再造新名词。
B.不确定的词语可以参考竞品或调研来决策
当某类功能或场景的标签难以确定时，我们就可以尝试去找一下竞品是否有类似功能，或者找该行业的领头羊（比如聊天工具的巨头微信），那么在进行标签定义的时候，可以参考它的命名体系。因为它已经替我们教育了一部分用户，会间接降低学习成本。
如果某些标签在上述过程中还是无法确定，那么我们结合自己经验或者与咨询业务相关人员来进行讨论，在必要时候可以在标签旁边添加注释来进一步说明。
导航系统其实应该是大家比较熟知的一个系统了。就像使用导航系统来规划行程一样，导航系统都会存在于每个网站中。比如我们常见的侧边导航、顶部导航等。
因为网上关于导航系统已经有很多资料的讲解了，在这里阐述下四类导航的含义：
1.全局导航：位于页面最上层的导航，用户几乎在页面的每个地方都可以看见，是最高层级的导航系统；
2.局部导航：位于最高导航的下级子类导航，子类导航并不是必须的导航，根据场景进行取舍；
3.情景式导航：通过点击文字链接进行跳转的导航，比如在个人资料里面植入其它网站的链接地址；
4.辅助导航：这里包括网站地图，网站索引，网站指南等辅助类型的导航。
辅助导航的网站指南包括新手引导和演示教程等。现阶段更巧妙的功能引导，是当用户在进行某些功能的操作时及时进行提示，这样不仅达到了为用户引导的效果，还减少了一连串的新手引导对于用户的打扰。比如figma在进行组件更新后，只有当你调用组件功能时，才会及时进行提醒。
搜索，是我们平日最常用的查找信息的功能，它能够帮助我们快速进行信息的检索。虽然搜索功能非常重要，但并不是每个系统每个页面都需要搜索。我们决策是否添加搜索时需要考虑下列三点：
1:内容复杂度：当前页面承载的内容复杂度如果较少，对于简单内容页面往往不需要搜索；
2:内容性质：当前页面的性质是偏向于用户浏览还是查找，根据用户行为来决定是否需要搜索；
3.搜索场景：如果搜索场景很简单，考虑是否只用筛选或分类就能够解决问题；反之如果搜索内容很复杂，我们还可以搜索结合筛选来更好的查找信息；
上述3点决定了我们是否需要考虑搜索功能。而关于搜索的其他细节点，比如搜索规则和搜索结果等，在这里不做进一步的阐述。在这篇文章中更重要的是弄清楚我们何时需要搜索功能。
我们通过上述方法已经知道如何梳理信息架构了，那么我们应该如何呈现它呢。这部分其实也是很多资料中比较模糊的点。
在学习的过程中，发现部分资料认为信息架构就是单纯的指思维导图，但实际上信息架构并不能单纯只用思维导图就能够完全表示。
因为信息架构包含了很多部分的内容。只能说思维导图可以是信息架构的一种表现形式，其可以帮助我们在思考阶段梳理整体产品的信息构成。
这里抛出一个很有意思的观点，那就是「功能结构图」和「信息架构图」到底什么关系，这里用两张图示例：
可以看到，功能结构图更多体现的形式是功能阐述，一般形式为名词+动词，比如头像设置；而信息架构图重点呈现的应该都为信息元素，一般为名词，比如头像图片。
但在大多数时候我们看到的产品架构图，其实更偏向于功能结构图和信息架构图的结合。因为在很多时候阐述信息构成时需要依赖功能进行辅助说明。
因此这篇文章讲述的信息架构更偏向于基于产品的整体架构。其实信息架构对于呈现形式并没有特别的限制，只要能够帮助你清晰表达产品整体结构就行。《信息架构：超越web设计》第4版中其实也并没有对表现形式这一块进行严苛的定义，其用「显示信息元素间的关系——站点地图」的说法概括了信息架构的呈现形式，其表达如下：
可以看到其表达形式包括思维导图和流程图等形式：思维导图的优势是能够总览全局信息，查看信息的深度和广度，而流程图的优势则更能够表达整体的逻辑关系。
因此信息架构的呈现需要根据你的产品场景选择合适的视觉框架表达。不必让形式限制了我们的发挥，而是应该形式追随于我们的架构表达。其只是一个信息梳理结构的说明结果（类似于中间态），我们需要借助它来更好的阐述思路与沟通想法。
在输出信息架构之后，其实这里想聊一聊页面的呈现。因为当梳理好大的框架后，剩余的页面细节其实都需要通过原型图来进行体现。这个过程是从框架到页面的阶段，其实对于设计师来说也是很重要的部分。在这里根据自己的理解列出了以下几方面的注意点：
A.页面能够让用户看懂
这其实就是涉及到我们的信息组织和标签系统。如果当我们的某个页面不能让用户第一时间获取到该页面表达的信息，反思一下是在哪个方面做得不好。是标签系统含义模糊呢，还是信息的组织分类方式不对。从页面呈现倒推信息架构。
综合来说就是设计时的排列要考虑用户的心智模型（比如网页的常规排版和通用名词定义等），对于某些难以理解的地方给予用户帮助和解释。虽然B端产品想要完全避免学习成本是不可能的，但我们可以尽量减少其学习成本。
B.考虑用户的视觉动线
当我们在进行信息排列时，这时需要思考的就是用户的视觉动线，也就是我们常说的视觉浏览「F模型」和「Z模型」。对于不同的信息流来说，采用不同的动线模型能够让用户更好地查找信息。
F模型和Z模型的使用区分其实就是在使用场景上，对于内容页面来说F模型会更为合适（比如文章或者搜索结果），适合文本类的内容。但对于非文本的页面，则更适合用Z模型，Z型模式的设计跟踪了人眼扫描页面时的路线——从左到右，从上到下，能够更好引导用户的视线。
C.掌控好适度的信息层级
B端由于在视觉的发挥空间不多，那么相对来说保持良好的信息层级能够让整体的体验变得更为良好。
不管是原型图还是视觉，整体的视觉层级要体现得更为清晰。按理说最好的视觉层级控制在三级左右。如果发现视觉层级过多，需要考虑是不是因为信息架构设计时纵向层级过深，通过调整架构的形式来更好的呈现信息。以及对同页面的信息进行重要程度分级。
当我们做完或者听别人阐述对应的信息架构时，该如何评判呢，到底怎样的信息架构才算优秀呢。个人认为可以从3方面去进行判断：
业务层：
1.设计目标合理：能平衡商业目标和用户的目标，保证客户和用户都有较为良好的体验；
2.核心任务目标：能够让用户顺利完成产品的核心任务，需要通过用户测试来进行验证
结构层：
1.平衡广度和深度：在进行功能使用时不会隐藏的太深而找不到，是否有冗余步骤
2.保证拓展性：当前信息架构在面对未来新增或者删减信息时能够稳定拓展
体验层：
1.保证易读性：用户不经过介绍，通过页面信息呈现能够看懂该产品是用来做什么的
2.保证易查找性：用户在需要某个功能时能否快捷的找到，是否有多种查找方法（比如搜索或筛选）
合理的信息架构需要具备以上条件，我们需要在做设计呈现时也尽量保证以上条件。但在很多情况下其实并不能完全满足，这个时候我们需要根据业务目标的重要性来选择某些点进行满足。
梳理一下整体文章的架构，其实是按照「是什么-为什么-怎么做」的形式来进行拆分的：
这篇文章想要表达的观点，不是让设计师独立去梳理整体信息架构，而是让设计师拥有信息架构意识，了解其是如何进行并产生的。这样你在看到整体架构时，有足够的理论支撑去判断它的好坏，并通过自己的理论认知去理解和改进不好的地方。
当我们对信息架构有足够的认知时，我们在设计页面时才能有合理的思考方向，做出「正确的设计」，避免成为无情的作图机器。信息架构作为产品交互视觉最底层的支撑，只有骨架搭好，对于用户的使用体验才能够有本质上的提升。
注：文章中不可避免会存在不足之处，如果对文章中内容有更好建议，欢迎随时交流。
参考资料：
《web信息架构》第四版
《信息焦虑》
《用户体验要素》
《信息架构设计》
「从设计前/设计中阶段，了解信息架构知识点」
「互联网产品如何搭建信息架构」
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文章来源：站酷 作者：进击的M
关键词：搜索框，UI，UX交互，用户体验，响应式设计，网页
题外话Tips: 在写Amazon案例时，看到了歪果仁对国货马应龙的评论，简直太欢乐（以前看过人家翻译的帖子，但自己看一遍还是太搞笑了）。于是就写跑偏了，翻译了下贴了上来。随便乐乐~ （CTRL+F页内搜索可直达）
目录：（CTRL+F页内搜索可直达）
第一章 搜索框-默认状态
一、 位置
二、 宽度（包含响应式设计）
三、 按钮样式
四、 展开 or 隐藏？
五、 默认要有提示文字啊！
六、 推荐词
七、 有很多分类怎么办？
八、 一个页面里有2个搜索框怎么处理？
第二章 搜索框-光标触发的状态
一、下拉框中，历史记录+热搜词是标配
二、下拉框中，标配+额外内容
三、下拉框中，纯个性化内容
第三章 搜索框-搜索中的状态
一、 默认交互
二、 个性化交互
三、 搜索下拉框中的多选功能
四、 回车 or 不回车？
正文：
以下都是从Web端角度写的总结，Web的空间比APP大，相对来说，交互可发挥的余地更大。APP端如果有时间，就另外再写吧。
搜索框简单吧，也就输入框+按钮。但是就那么点小元素，里面也是注满了无数的小心思，死光了无数产品经理/交互设计师的脑细胞，只是为了让交互更流畅，产品体验更好。
搜索框的默认UI/UX样式，取决于网站的业务性质，取决于搜索功能的重要性，取决于页面布局。
一、位置
搜索框的位置放在哪里，取决于搜索功能对于网站的重要性。
N年前，就有很多小伙伴引用过如下研究报告了，我重复下吧。
Dawn Shikh 与 Keisi Lenz 的研究：展示了在142个参与者的调查中，网站搜索框的期望位置。研究发现，对用户来说最方便使用的地方是网站的左上角与右上角位置。用户可以使用常见的F形扫描模式轻松找到它。
如图，搜索框要放置在网站的右上角或者中间位置，这是用户所期望的位置。
目前大部分网站在UI布局搜索框时，也是大致遵循这个规则的。但总体来说，搜索框的位置，还是可以分为如下几种：
1. 页面-居中
2. 页面-顶部居中
3. 页面-顶部右边
4. 其他
那么，分别讨论：
1. 页面-居中
为啥居中？当然因为对于网站，搜索是核心功能。如果没有搜索功能的话，业务几乎无法开展。它最最最重要啦！
1）绝对居中
这种一般适用于搜索引擎的首页。页面基本就是一屏，搜索是最主要功能，其他内容不重要。
比如Google, 百度。
Google的界面就相当干净清爽。嘿，我就是纯搜索的，赶紧搜呗！
百度，可以只显示一个搜索框。
如图所示的搜索框下的大块资讯，是可以在设置中隐藏的，不想看，关掉就好。
2）相对居中，垂直略靠上部。
适用于数据库网站的首页。
因为数据库的数据量动不动就是千万、上亿的，搜索是极其重要的功能，99%的用户都是带着目的来的，直接通过搜索找数据的。搜索框需要极其醒目，需要占据首屏大部分的位置。
但考虑到数据库网站的首页也需要展示其他信息，来增加用户粘性，一般会有好几屏，比如最新信息，热点信息之类的。这些就放在搜索框大区块的下方了。
比如 官方司法权威网站-中国裁判文书网，全国的1亿多个案件都在这个数据库里，供免费查阅。搜索数据是核心功能，因此搜索框最醒目，占首屏大部分位置。其他信息依次往下布局展示。
2. 页面-顶部居中
为啥顶部居中？因为网站业务中，搜索是重要功能，但不是全部。不用夸大显示，但顶部的居中好位置要留给它。
一般适用于电商平台，资讯平台。
这些网站中，展示商品、广告、信息才是重点，是为了促成交易，增加流量的。搜索是工具，比较重要，但不是重点，只是为了达成目的的一个手段。因此可以放在页面顶部且居中的显眼好位置，重要，但是不过分夸张。
用户场景：
如果用户是漫无目的的瞎逛，可以随便浏览页面中提供的大量信息。
如果用户是有目的的找某个商品或信息，也能很容易的在页面顶部找到搜索框，定位目标。
比如，电商平台-京东
比如，视频平台-Youtube
看到了吗？顶部中间，不太显眼的那个灰色搜索框。
3. 页面-顶部右边
为啥顶部右边？因为网站业务中，搜索只是辅助功能，居中这么好个位置没必要，放右边看得见就行了。
比如， Dribbble
Dribbble，设计师都知道。一般大家都是去随便看看找灵感的，浏览信息是重点，搜索功能不太重要，放边上就行了。
比如，小米
提问：有同学会问，嗯哼，这是电商网站呀，要卖产品呀。为什么不像淘宝京东一样放顶部居中呀？
回答：因为，这是品牌自己的平台呀，就那么几个品类，在顶部导航条内，侧边导航条内都已经展示得清清楚楚了，鼠标点点就行了。搜索是次要的功能。
根据设计原则——奥卡姆剃刀原理（简单有效原理）
* 只放置必要的东西
* 给予更少的选项
顶部的品类导航条本身就能帮用户找到产品了，可以直达分类页面，是非常重要的入口，也是重要的产品宣传，需要放在顶部首行的位置。
搜索是辅助功能（此处相信小米的PM是分析过search usage的），放在次要位置就可以了。
不需要同时突出搜索框+品类导航条，来增加用户的选择成本。
另外，要是搜索框居中了，那展示品类的重要导航条就得布局在第二行。Web/APP的第一屏都是黄金位置，能省一行是一行。
4. 其他
1）可以放logo的右边。
比如google的搜索结果页
从设计理念上说，google的搜索框和logo放在一起，也能组成品牌和搜索引擎之间的强关系。即google=search. 用户们不也早就说，“你google一下”，而不是“你搜索一下了”嘛!
从UI上说，搜索引擎的内页一般只有列表，这样搜索框也能和列表左对齐，布局清晰。
2）其他位置，根据情况判断。
比如Figma界面，文章最后有图。此处不赘述。
二、宽度
搜索框的宽度（包括input box + search button），同样取决于搜索功能的重要性。其中，大概率取决于上文所述的搜索框的位置。
其次，也需要考虑输入的关键字的字符数。
另外，根据整体布局决定。
一般情况下，220px<宽度<650px。 请注意, 这是建议的相对值，不是绝对值。只表示搜索框在大部分Web中的情况，具体需根据自己的页面情况调整。实际应用中，也有搜索框最长到1000px的情况。也有比220px更短的。
根据搜索框在页面中的不同位置，搜索框宽度分别如下：
1. 如果搜索框位置在页面居中，那搜索功能也极其重要，那当然宽一点。
比如上文提到的google，百度。搜索框宽度通常固定在650px以内，保证在所有分辨率中都能显示全。也保证了可显示的关键字字符数大于60个（即60个字母，30个中文字），大大的足够了。
2. 如果搜索框位置在顶部居右，那搜索就是辅助功能，那当然短一点。
具体宽度，需要考虑顶部UI布局情况。但一般不小于220px（大概数值，自己平衡）. 不然就不太方便输入关键字了，或者关键字就显示不了几个了。
3. 那如果搜索框位置在在顶部居中呢？则可长可短，根据业务情况和页面布局判断。
如果为了用户体验好的话，搜索框宽度也需要考虑「响应式设计Responsive Design」。
既然都说到 「响应式设计」了，那么就提一下吧。
概念：
响应式设计（Responsive Design）是页面布局可以「响应」不同尺寸屏幕的设计方法。通常我们说起响应式设计都是针对网页设计的。同一个页面，随着屏幕尺寸的改变，自适应地改变页面布局。
通俗来说，这个网页就可以自动适应手机，平板，和电脑的各个分辨率。用户在各个设备上浏览这个web页时，页面布局和交互都是自动调节的，相当舒适。
以页面中的单个功能区为例：
* 比如，内容区块的在一定程度上能够自动调整，以确保填满整个页面。
* 比如，网格排布，能够减少/增加排布的列数。如图片布局在“1行1列” 到“1行N列” 之间，自动调整列数。
* 比如，能够适应比例变化的图片。图片自动调整大小。
* 比如，筛选功能在网页里是在页面左侧一列，全部展开显示的，在手机里就可以隐藏显示，通过按钮点击，有滑出菜单之类的。
Tips: 做响应式设计，需要公司舍得投入资源，因为涉及到很多额外的工作量。最起码有以下：
* Designer | 设计——做3套设计。
* Frontend Engineer | 前端——写响应式设计的代码，可写1套，可写3套（方便维护）。
* QA Engineer | 测试——测不同的分辨率，最起码测3套。这还没算fix bug后的retest.
为啥3套？因为针对分辨率需要做2个节点。我司一般是792px<X<1440px
好了，响应式设计就大概讲一下吧。不然又能写好几页。收~
以Youtube为例，大家可以感受下搜索框的响应式设计。
搜索框的宽度是会自动调节的。最小的时候就一个放大镜图标（此时为适应手机分辨率），但最宽也就是固定到640px，不然太宽了，输入关键词时，搜索按钮离得太远，点击也会很不方便。
三、 按钮样式
搜索框的按钮样式，同样取决于搜索功能的重要性。也需要平衡整体页面布局。
按钮样式大致情况，如下图所示：
* 色块带图标的
* 只有一个图标的
* 没有按钮的
* 色块带图标+文字的。
* 其他（比如就一个放大镜图标等。图片中没做展示）
具体怎么应用，详见后文：
四、 正常显示 or 简化显示？
九、 一个页面里有2个搜索框怎么处理？
四、正常显示 or 简化显示？
有些Web中的搜索框，因为各种原因，可能就会做简化。而不是整个显示，这个需要根据情况决定，就是——随机应变~
比如，Apple官网，只显示一个放大镜图标。
此处跟上文提到的小米官网的情况类似。商品品类就这些，导航条突出品类，搜索功能弱化。
但苹果在此处更弱化了搜索，只放一个放大镜图标。（从UI上看，目测是由于导航条中品类太多，放不下搜索框了。） 等用户点击了放大镜图标后，才使用CSS / JS特效，滑动显示完整的搜索框，且居中显示。
再比如，Airbnb 爱彼迎，全球民宿短租公寓预订平台。
网站中，搜索功能很重要，是用户预定，增加销售的入口。因此需要突出搜索框。
* 首页，默认显示完整的搜索框。
* 当页面滚动时，搜索框置顶显示，方便用户查询和预定，增加潜在销售可能。但是这个搜索框的内容太多，硬要在置顶层中全部显示的话，这个始终置顶的层的高度就会很高，会影响用户浏览页面内容。
那么就把搜索框略微简化，相应的高度也就小了。（不建议只放一个放大镜按钮，太弱化搜索功能了。会流失潜在客户，流失潜在销售可能）
* 搜索框在置顶层中居中显示，点击简化版搜索框后，才动效显示完整的搜索框。
五、默认要显示提示文字啊！
在输入框中可以提示搜索示例，告知网站支持哪些内容的搜索，以及如何使用功能。防止用户一脸懵，优化用户体验。
通常适用于数据库，资讯类这些内容类型较多的网站。
比如，天眼查。（垂直顶部居中的搜索框）
比如，网易云音乐。 （右上角搜索框）
六、推荐词
基于业务需要，搜索框内经常会有推荐词，方便用户不用输入关键词就可以直达结果。同时，也是一种对商品的促销，对资讯的推广。根据不同需要，可以有不同的显示方式。
Tips: 推荐词，热搜词，促销，广告都可以这么处理。
1. 框内
1）单个推荐词交替显示
比如，小米官网
截图为动态图哦，大概5秒换一个推荐词。个人觉得间隔时间有点长了。
2）多个推荐词同时显示
比如，LexisNexis 全球顶级法律数据库 中国站
没有和小米一样，做1个推荐词的动态交替显示，是因为用户场景不同。
考虑到LexisNexis的用户都是律师群体，工作中时间宝贵。使用网站不是闲逛，而是为了快速查询数据，没有时间等待。因此一次性显示2-3个推荐词，方便用户直接看到，直接点击。
提示：推荐词可能会大于3个的，比如有8个。那就在用户每次回到首页后，显示一批新的推荐词。
或者，直接显示在框外，如下文所述。
2. 框外
比如，淘宝
七、有很多分类怎么办？
如果要针对很多内容类型分别搜索怎么办呢？搜索框怎么处理呢？有很多方法。
按复杂程度，依次进阶如下：
1. 下拉框型
一般用下拉框了，那通常分类对于搜索不是太重要，不用突出显示。
2.Tab型
如果用tab来展示分类了，那目的通常是：
* 推广产品或内容
* 引导用户，优化用户体验
1）横版显示。比如 某房产网站
2）竖版显示。比如 知网
搜索框的左侧的3个Tab为内容类型分类。
搜索框中展开的下拉框中是字段，此处一并展示。
3）竖版+横板显示。比如 某房产网站
如上图，是竖版分类+横版的两个搜索按钮。
如上图，是竖版的分类+横版的分类。横版的分类还做了2级分类。分类太多，相信设计师们在处理时也挺头大。
八、 一个页面里有2个搜索框怎么处理？
回答：哪个重要，就突出显示哪个呗！
以Amazon为例，
该页为商品评论页面。
* 顶部搜索框为全站搜索，非常重要。因此宽度较长，按钮为亚马逊的主色调黄色，醒目。
* 页面内的搜索框，为针对评论内容的搜索，则相对弱化。
搜索框的默认状态讲完了。那么当鼠标点击搜索框，此时还没有输入任何内容，那么光标触发的状态是怎样的呢？通常，根据业务情况，大多数搜索框都会自动弹出下拉框。
我们此处只讨论下拉框中的显示情况。
一、下拉框中，历史记录+热搜词是大部分网站的标配。
比如，B站。
二、 下拉框中，在历史记录+热搜词的基础上，再添加些网站自己想推广的内容。
比如，Zcool本酷。
三、下拉框中，根据网站自身业务情况，显示个性化内容。
1. 比如 Zillow, 美国知名房产估价网
网站业务就是估房价。下拉框中，第一行就是“当前位置”，点击后跳转到结果页，显示定位地址的相关结果。优化用户体验。
2. 比如，携程。
携程的业务结构相对复杂，搜索也就相对复杂。搜索项同时也涉及到很多字段/参数，其实也类似表单了。后面有机会可以讲下表单的交互，此处不延伸讨论了。大家有兴趣可以去逛逛携程。
在搜索框中，一旦开始输入字符，那新一轮的交互又开始了。
一、 默认交互
目前通用的规则——搜索联想功能，Google已经定义好了。我就不重复写了，如下摘自UXPlanet：
Google自2008年以来掌握并实施了“搜索联想”。
“搜索联想”（自动建议）可以帮助用户通过已输入的文本来预测可以找到的查询结果，为用户节省了时间并创造了更加便捷的体验。
交互细节如下：
* 确保搜索联想是有效的，设计不完善的搜索联想会混淆和分散用户的注意力，所以使用拼写自动更正、词根识别、语义识别和预测，可以改进搜索体验。
（Lu倾倾 注：中文搜索还要识别拼音）
* 尽可能快速的提供搜索联想，例如输入到第三个字的时候，就给用户提供相匹配的联想词汇，以此减少用户数据录入的工作。
（Lu倾倾 注：现在其实输入第1个字就可以提供联想了。）
* 只提供少于10个项目的联想词句（不建议使用滚动条），否则信息将会变得难以承受。
* 允许用户通过键盘的上下键控制选择列表。
（Lu倾倾 注：
百度在使用“键盘”（鼠标不行）上下选择列表时，如果高亮在某个联想词上停顿2秒以上，则等同于“回车键”，整个页面的搜索结果刷新。 Google不支持此功能。
这是用户体验的差异）
* UI上，已输入文本和建议文本视觉上保持差异（例如，通常情况下建议的词汇通过加粗表示）
二、 个性化交互
1. 比如，Google
（Google作为搜索引擎的灯塔，搜索交互亮点的地方太多太多了，这里只举个小例子。）
如上图，不只在下拉框中展示搜索联想的关键词。
还把关键词作为一个词条显示给客户，比如电影，比如品牌。还同时显示各自的参数，比如 图片，字段。
可以帮助用户了解信息，精准定位。
2. 比如，维基百科。
由于网站的定位不同。维基百科是一个百科全书，其中都是各类词条相关的知识/信息。因此下拉框中的联想，都是以词条形式显示的。包含了图片，词条名， 参数/字段。
3. Amazon 亚马逊
亚马逊的用户体验也是做到极致了。搜索下拉框除了提供搜索联想的关键词，还按照不同的特殊关键词，提供不同的参数选项，方便用户一步到位，不用再到搜索结果页里做一次筛选了。优化用户体验。
比如，想搜索“chair”, 输入了关键词“chai”(注意，还没打全 chair)，下拉框中除了显示chair相关的商品。还直接把chair的价格区间显示出来，方便用户点击后，直接显示相关搜索结果。
相信此处亚马逊的PM们是做过usage分析的，chair列表页中，应该是 “价格”筛选的usage是最高的，并且极有可能用户进入chair列表页的第一个用户行为就是对价格做筛选。PM们就干脆把筛选项放到了搜索下拉框中了。
针对关键词”ipad”, 也是同样的交互处理方式，此处是显示“尺寸”区间。
针对关键词“alarm”,下拉框中按照闹钟的不同“功能”，显示“图片+分类“，方便用户直接点击。
【亚马逊篇 番外】
在收集亚马逊案例的时候，好玩就去搜了搜国货之光“马应龙“，歪果仁们的评论简直是太欢乐了，看着看着我都笑出了鹅叫声。
于是就跑偏了，翻译了2个评论，贴了上来。大家看文章看久了，休息下~
以上，讨论的都是输入单个关键词搜索的情况。
那么输入多个关键词的交互该怎么处理呢？
N年前，我在《交互设计稿-纯实例》之前我写过，此处不再赘述了。
如有兴趣，请戳，https://www.zcool.com.cn/work/ZMjY4Nzg3MDA=.html
大部分的网站的搜索功能，都是需要在输入关键词后，点击“搜索按钮“ or “回车”，才展示新的搜索结果页的。（此处不讨论百度中，键盘移动到联想上就刷新结果页等特殊情况）
即一定要有个确认的命令，才触发搜索。这里面有很多考虑。比如：
* 数据量大，如果是实时响应+即时加载搜索结果页，对服务器和代码质量的要求都太高。
* 用户体验不太好。因为用户还没输入完，或者还没确定。页面就在不停的刷新，会干扰用户。
但，也有个别工具软件中，不用按回车，就实时刷新搜索结果。比如，Figma.
在软件中，都是自己的存档文件，数据量本身就不大。此时边输入关键字，边实时响应，刷新搜索结果页，让用户随时看到自己的文档。这种情况下，不用按回车，用户体验还更好。
以上，终于写完了。
暂时写到这吧，总结太累，但是值得！
最后，附上Amazon贝索斯的原话：
翻译如下：（没有太直译，不然有点拗口）
“以用户为中心”有很多优点，但最大的一个就是：用户是美丽的、棒棒的、不会满意的，即使他们说我们的商业很赞，他们表示很开心很满意。但他们其实想要更好的东西，不过他们自己并不知道。那么你的让用户愉悦的渴望，会驱使你代替他们去发明创造。
——杰夫*贝索斯，2016年给股东的信
额，还是拗口。简单来说，就是：
筒子们，为了让用户高兴，发挥你们做产品/交互的主观能动性吧，自己研究创造去，做个好产品出来。不用指望用户告诉你做什么/怎么做，他们也不知道。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
若想战胜竞争对手，产品无疑需要在设计上做好提前规划，并时刻树立优化意识，尽量满足用户的体验期望。然而研发团队有时总容易陷入误区，本篇文章里，作者就产品研发过程中可能忽略的、对用户体验具有破坏性的因素做了总结，一起来看一下。
毫无疑问，要想获得出色的用户体验 (UX) 需要在数字世界中保持竞争优势。尽管如此，由于某些关键盲点，改善用户体验的努力并不总能取得成功。如果忽略这些盲点，那么无论预算大小和团队的努力如何，失败都会预先留存在项目中。事实上，如果实施不准确，可能会导致所谓的“经验差距”造成的设计上的损失。
上图所示的具体案例：某银行投资了近 50 万美元改进其手机银行应用程序，却导致整体客户满意度下降。其根本原因是金融公司未能发现和预防不同级别的内部经验差距。那么，该如何及时识别和避开这些盲点，以保障耗资巨大的大规模数字化项目的成功呢？
在过去十年中，大量研究证实，用户体验对公司市场效率存在优先影响。根据甲骨文的一份报告，如果糟糕的用户体验导致多个业务问题，那么积极的用户体验会增加推荐、保留率和收入，因为 86% 的客户愿意为更好的用户体验支付更多费用。
看起来一切都很简单——只要增加预算和成本，就足以提供最好的体验？但在实际操作中，这并不容易。根据贝恩公司的研究，80% 的 CEO 认为他们提供了卓越的体验，而只有 8% 的客户同意这一点。
其主要原因可以用“经验鸿沟”来解释——这是客户期望的体验与他们从数字服务中获得的体验之间的负面差异。如果体验比预期的差很多，就会产生许多令人不快的后果，比如客户忠诚度下降、大量负面评论，甚至客户决定离开品牌。
在大多数情况下，人们往往无法认识到真正的经验鸿沟。
即使公司的领导和员工觉得有些地方不对劲，他们也往往不明白“要改进什么”以及“为什么要改进”。如果没有意识到某件事，就不可能管理它。
为了解释“经验鸿沟”可能导致麻烦的基本原理，我想分享一个现实生活中的例子。
几年前，一家知名且受人尊敬的中欧银行开始了大规模的数字化转型之旅。当时，该银行的应用程序的评级为 3.5，并且已经过时。所以，为了实现数字化、提升银行形象，并在不断增长的数字市场中获得竞争机会，管理层打算紧急创建并推出一款现代化的银行应用程序。因此，最初的设计和开发周期为 6 个月。
尽管如此，银行还是花了三倍时间（1 年零八个月）自主构建新应用程序。无论从时间来说，还是从投资预算来说，这都可以称得上是一个重要项目。从项目的范围、所做改进和时间表来看，总成本估计在 50 万左右。
然而，结果完全没有达到预期。新应用发布后，它从之前的 3.5 下降到 2.4，并且因为它没有改进，以至一年后，其评分仍在下降，其用户体验也日渐恶化。
银行尽一切努力改善用户体验，整个团队努力工作近两年，怎么会发生这种情况？
这种情况的产生，正是由于“经验鸿沟”的存在。尽管该银行启动数十名顶级专业人士花费了 20 个月和 50 万来改良产品，但它仍未满足用户的期望。
虽然客户不满意的真正原因是无意识的“体验鸿沟”，但公司往往倾向于通过指责外部环境来解释它。例如市场的变化、竞争对手的活动、创新的出现、消费模式的变化。当然，这也是客观事实，但一家适应性强的公司应该考虑将这些因素用于其增长，而不是作为“替罪羊”。
但衡量适应效果的最重要方式是公司服务在多大程度上满足甚至超过了消费者的期望。没有意识到他们服务和客户期望之间存在差距的公司注定无法适应外部环境的变化。
在某些情况下，公司的行为甚至会导致经验鸿沟扩大到临界水平。这通常会导致目标客户对公司产品和服务的需求急剧下降。
如果我们回到这个例子，似乎管理层对重大改进是否可以成功充满信心，并投入了大量资金和精力进行广告宣传。同时，那些宣传此应用程序现代、创新和友好的广告，激发了消费者的高期望，以至于大大超出了其服务的实际质量。
结果，当产品最终发布时，客户惊讶地发现他们的期望落空了，新应用程序比改良前更糟糕。并且相关的负面评论不仅出现在 App Store 和 Google Play 上，也在社交媒体上大量涌现，人们在推特上不断讽刺该银行失败的数字化项目。
接下来，让我们探讨一下数字服务和用户期望之间的鸿沟是如何形成的，以及为什么没有人能够阻止它。
事实上，最大的挑战是大家往往很难注意到这些差距。他们的原因并不明显，并且可以同时存在于各个组织架构之上。此外，它们的影响令人难以察觉，以至于最终会导致意想不到的破坏性后果。最终，直到团队面对产品在市场上的失败，才有人明白原因是什么。
弥合鸿沟的主要困难在于，级别越高，对经验鸿沟的不了解程度越高。实际上，在组织架构的顶部，通常会找到造成鸿沟的根源。级别越低，离用户越近，员工越能觉察到问题和差距，但他们往往没有权力和能力去消除它们，他们受制于文化。
在这种特殊情况下，售后部门每天都会接到数千个关于产品问题的电话，但由于业务流程分散，他们对此也无能为力。
客户的挫败感变得更加强烈。即使是最简单的日常场景，他们面临的问题也难以执行，但他们从银行员工那里得到的反馈是，他们并不是唯一产生困惑的人，而且目前银行正忙于交付新功能，而不是修复当前问题。
使事情变得复杂的是，经验鸿沟背后的内部流程，是由过去促进公司生存和增长的相同机制引起的。该公司受制于过去的成功。就像诺基亚一样，这家全球最大的以硬件为中心的手机工厂，在苹果智能手机引领的软件革命中被彻底击败。
由于任何组织都有惰性，这些机制受到内在信念和价值观的影响，对适应市场和弥合经验鸿沟造成了阻碍。
首先，应该在管理层面解决鸿沟。因此，级别越低，离领导层越远，离客户越近，就越能感受和认识到鸿沟的存在。自然，一线员工将拥有从那些期望没有得到满足的客户那里得到最多的数据。
主要的体验鸿沟可能是由组织中七个层次（文化、反馈、执行、设计、价值、品牌承诺、情感联系）中的一个或几个盲点造成的。
在文化层面缺乏以顾客为中心的理念，员工无法使服务更接近客户期望，导致了“文化鸿沟”。在具有“文化鸿沟”的公司中，有助于以客户为中心的流程和活动都是处于低优先级的，相应的，它们也不会得到相关的资源。
缺乏关于客户期望和他们对产品或服务的体验数据会造成“反馈鸿沟”。在这种情况下，公司可能经常收集数据，但没有对其进行分析，也没有采取任何措施来改善这种情况。
即使优先考虑以客户为中心的方法，并且收集了大量有关客户期望的数据，但在设计能力和方法上仍可能存在鸿沟。拥有合适的专业知识，就可以构建高质量的数字产品生态系统，从而根据客户需求提供最佳服务。
这种鸿沟与糟糕的设计执行有关。如果不优先以用户为中心的来设计产品，那么创建最终产品和服务的决策和努力将注定是低质量和低效率的。这决定了公司在数字时代创造有竞争力的服务和产品的能力。
如果设计生态系统在 价值金字塔的五个层次（功能、可用性、美学、地位、使命）上不符合用户的期望，就会形成价值鸿沟。
正如我在上述银行案例中所表明的那样，如果一家公司只顾着积极推广其服务，承诺一些产品无法提供的东西，它会导致用户对期望的更大失望。因此，由于广告承诺与现实不符，对该服务的负面评价可能会翻倍。
如果品牌传播是纯粹的信息传播，专注于功能特征，那么就无法与用户形成情感联系。由于人类基于情感做出决策，因此基于情感构建服务价值会对客户期望和最终用户体验产生积极影响。
每个客户都会不知不觉地根据自己的期望来评估他们所接受的服务。用户体验质量所引发的情感将形成品牌的声誉。
在现代世界，数字渠道已成为品牌的主要“营销”和公关渠道。
一个应用程序，即使有一百年的服务客户历史和其他渠道的优质服务，负面体验也会破坏品牌推广的所有努力。
这仅仅是因为在数字时代，移动渠道占主导地位，对于某些人来说，它正在成为与品牌互动的唯一途径。这就是为什么了解如何弥合数字产品出现的七个体验鸿沟的方法如此重要。
在文化方面，转型基于高层心态的改变，并将这种影响渗透到整个的公司文化和内部价值观。特别是，可形成“以客户为中心”的体验思维模式。
在银行案例中，开始弥合反馈鸿沟的第一步，是深入了解社交媒体上的负面评论以及致电售后部门的电话。接近这些客户才容易消除反馈鸿沟。事实上，他们比管理层更了解应解决哪些问题，并且往往渴望积极分享自己的情绪并希望得到倾听。如果一家公司足够开放并准备好接受批评，它可以使用这些数据来弥合鸿沟并提高产品迭代的敏捷性。
通过整合设计方法和设计思维来制定弥合鸿沟的策略，可以使用设计金字塔。该框架从五个层次（流程、团队、行动、结果和价值）确定了能够提高公司整体效率的设计集成。
组织必须将经过验证的设计执行方法（例如设计思维、HCD 或 UX 设计方法）与分步系统相结合，以设计符合客户期望并能够弥合执行鸿沟的数字产品。
产品的功能级别为客户创造真正的价值和利益，并通过提供卓越的可用性进行功能扩展；美学 ——令人惊叹的视觉识别；状态 —— 针对产品特定受众的个性化，最后是建立产品的价值观与使命。
数字时代的客户要求透明、关怀、诚实和开放的沟通。由于网络效应，几乎不可能销售劣质产品，因为每个人都可以在社交媒体上发布负面反馈，而这些负面反馈将深深地损害客户的信任。因此，做出不仅可以兑现，甚至可以超额兑现的承诺至关重要。
对客户的同情和关怀比以往任何时候都更加重要。在品牌与客户之间建立情感联系对于确保长期忠诚度和需求至关重要。这种联系是通过之前涵盖的所有阶段建立的——将客户放在第一位的正确心态；收集反馈并在此基础上进行改进；使用正确的工具和方法来创建产品设计和生态系统；创造真正的价值和利益，最后，通过诚实和超额兑现承诺。
该途径涵盖了可能破坏数字产品创造的 7 个主要体验鸿沟，以及可以帮助避免和解决这些鸿沟的 7 个桥梁。如果一个品牌能意识到这些盲点，它可以立即获得比仍处于盲点的竞争对手的显著市场优势。
仅凭意识就可以产生巨大的差异，但将意识与行动相结合会导致长期成功，成为一个需求量很大和深受喜爱的品牌。
本文翻译已获得作者的正式授权（授权截图如下）
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今日，有消息称字节跳动将会推出一款名为“飞乐”的音乐流媒体产品。字节跳动的入局，或将引起音乐行业的新波澜。本文作者对此发表了自己的观点，一起来看看吧。
擅长“四路出击”的字节跳动，又双叒叕出手了……
长期以来，关于字节跳动扩张的消息就一直不断。前有抖音内测“心动外卖”进军外卖领域，后有字节跳动收购VR公司的消息登上热搜……近日，有报道称字节跳动将于今年下半年推出一款音乐流媒体产品，产品的名称暂定为“飞乐”，项目内部代号为“luna”。而字节跳动的再次入局，或将引起音乐行业的新波澜。
今年4月，字节跳动成立了音乐事业部；7月份的时候，字节跳动将音乐升级为P1优先级业务，与游戏业务和教育业务平级；不久之后还内测了音乐代理发行平台“银河方舟”。除了自身做音乐之外，字节跳动还投资了校园音乐平台。这一系列动作无一不展现了字节跳动发力音乐领域的决心，而字节跳动之所以如此看重音乐业务也是有一定原因的。
首先，音乐业务有助于字节跳动获取新流量。据CNNIC发布的第47次《中国互联网络发展状况统计报告》显示，截至2020年12月，我国的网络音乐用户规模达6.58亿，与2020年3月相比增长了2311万，占网民整体的66.6%。其中，手机网络音乐用户规模达6.57亿，与2020年3月相比增长了2379万。随着短视频领域流量见顶，字节跳动亟需找寻到新的流量增长点。
其次，音乐行业用户的付费意愿在逐步增强。据前瞻产业研究院发布的相关报告显示，我国的网络音乐付费用户规模已经由2016年的2017万人，增长至2020年的7192万人，网络音乐付费渗透率也由2016年的4.0%增长至2020年的10.9%。网络音乐用户的月度消费金额也由2017年的8.5元，增长至2020年的9.5元。
以腾讯音乐为例，据其最新发布的二季度财报显示，截至2021年6月30日，腾讯音乐的在线音乐付费用户人数达到了6620万，同比增长了40.6%，与今年一季度相比净增长了530万人；付费率为10.6%，与去年同期和今年一季度的付费率相比均有所提升。
最后，音乐业务与字节跳动旗下的短视频业务相辅相成。配乐是制作短视频必不可少的环节之一，配乐和内容契合度极高的优质短视频往往能收获很高的播放量，但也正因短视频配乐使抖音多次陷入侵权局面，不少短视频也因其所使用的音乐无版权而被做下架处理。倘若字节跳动推出音乐产品，就能够为短视频用户提供更为方便的曲库支持，有利于短视频用户进行创作。
7月24日，国家市场监管总局责令腾讯音乐解除其网络音乐独家版权；8月31日，腾讯发布了《关于放弃音乐版权独家授权权利的声明》。众多音乐平台不再被音乐版权“卡脖子”，字节跳动于此时再度发力数字音乐，自然也能享受到行业大环境变化所带来的重大利好。除此之外，还有其他原因也会对字节跳动发展音乐业务产生积极影响。
其一，是其拥有庞大的流量优势。据抖音发布的《2020抖音数据报告》显示，截止2020年12月，抖音的日均视频搜索次数突破4亿；截止2020年8月，抖音的日活跃用户数量突破6亿。有抖音这一巨大流量池为其引流，无论是音乐流媒体产品的用户获取，还是音乐作品宣发都会容易一些。
9月9日，工信部相关业务部门召开了“屏蔽网址链接问题行政指导会”，提出有关即时通信软件的合规标准，要求9月17日前各平台按标准解除屏蔽。随着屏蔽外链的解除，字节跳动也将从中获益，迎来新一波流量增长。
其二，是创作者扶持计划成效显现。早在2018年，抖音就启动了“看见音乐计划”以扶持原创音乐，随着不断进行的音乐扶持计划，抖音的音乐生态也在逐渐完善。据《2020抖音音乐生态数据报告》显示，2020上半年抖音的音乐人入驻数量增长近3万；近半年抖音音乐人涨粉累计超3亿，其中涨粉超1000万的音乐人有6位，涨粉超500万的音乐人有23位。
而抖音扶持音乐计划的成功，也给字节跳动的音乐流媒体产品打了样。字节跳动在发展音乐业务时，也可以采用类似的策略进行音乐产品内容生态的完善。另外，部分抖音音乐人也可能成为字节跳动音乐业务的潜在音乐人，为字节跳动音乐业务的发展添砖加瓦。
其三，算法优势助力音乐业务发展。众所周知，算法是字节跳动的一大特色，今日头条和抖音能取得当前的成绩，与字节跳动的算法推荐不无关系。据悉，字节跳动的音乐业务主要由前台和市场、算法两大中台支持构成。在中台方面，由抖音的市场团队承担国内音乐人合作与版权宣发，算法团队负责提供智能配乐、安全风控等技术支持。
无论是后版权时代的来临，还是字节跳动自身的优势都对其发展音乐业务大有裨益，但机遇与挑战并存，字节跳动在迎来重大利好的同时，依然面临着不小的挑战。
一方面，腾讯音乐的霸主地位难以动摇。在“取消网络音乐独家版权”尚未落地之前，腾讯音乐凭借海量的正版歌曲曲库以及持续建设的内容生态，稳居行业头部。据腾讯音乐发布的财报显示，今年二季度腾讯音乐的在线音乐月活跃用户数为6.23亿，仅月活跃用户数这一项指标，字节跳动在短时期内就很难与之相匹敌。
另一方面，网易云音乐的音乐社区文化别具一格。在被音乐版权“卡脖子”的时期，网易云音乐凭借其音乐社区文化，成功地从众多音乐平台中脱颖而出，浓郁的社区氛围也极大地提高了用户的黏性。另外，网易云音乐不断推出的扶持计划也增强了其内容竞争力。
网易云音乐的这些特色化优势，也将为其在今后的发展中提供助力，但对字节跳动来说，拥有这些差异化优势的网易云音乐，无疑是一位强劲的对手。
另外，快手也在音乐领域有所布局。早在2018年的时候，快手就推出了一款音乐产品“光音Mulight”；今年2月26日，快手推出了音乐K歌APP“回森”；5月份的时候，快手推出了音乐APP“小森唱”，该软件的核心功能是AI创作词曲用户进行演唱，在演唱之后还可以通过点赞评论等方式进行互动，最终达到社交的目的。随着快手在音乐领域的不断加码，也会对字节跳动音乐流媒体产品的发展产生影响。
目前来看，随着行业大环境的变化，在线音乐领域的竞争愈发激烈已经是无可辩驳的事实。无论是稳居头部的腾讯音乐，还是擅长打情怀牌的网易云音乐，亦或是跨界而来的快手，都是字节跳动音乐流媒体产品的强劲对手。而字节跳动能否在强手如云的音乐行业闯出一片天，仍待时间验证。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
做好行业研究，有助于企业或个体从业人员更好地洞察市场，进一步发现机会，或者找准产品定位，推动企业战略决策和后续实施。本篇文章里，作者就行业研究的分析框架与思考维度做了总结和梳理，一起来看一下。
以始为终，构建行业研究的方法论和分析框架，需要从目的出发，下面列举几类典型的行业研究报告目的。
券商的报告（二级市场），分析某个行业是否有投资价值，从行业赛道的选择过渡到这个行业赛道中的值得被投资的公司，说明这个行业中哪些公司更有投资价值。报告结果是要用于股票投资服务的。二级市场由于公司财务报告的披露性质，公司的财报分析在行业报告中也是重要的构成部分。
互联网战略投资部门/VC的报告（一级市场），互联网战略投资部门通常以公司的战略发展目标为出发点，布局上/下游产业链，或通过收购竞品公司，巩固和发展公司在行业的竞争力，提升市场占有率，开拓新的市场；VC通过布局细分的赛道，选择合适的投资标的，参与风险投资。
值得注意的是在互联网初创企业的财报分析通常不作为重要参考因素，多数互联网公司在初创期将投入大量资金，长期处于亏损状态，此时，市场份额和估值与传统二级市场的分析方式有较大差异。
咨询公司的报告，目的是为行业内的公司服务的，说明该行业的行业规律、行业风险、行业机会、行业发展趋势等。在行业研究的内容方面，咨询公司常见的模式还包括访谈调研行业内公司高管。
基于行业研究的目的，常规的行业研究框架，包括一下几个核心部分：宏观分析、行业分析、公司分析、消费者分析、竞争者分析，其中宏观分析和行业分析的视角都是从赛道链路的角度，进行整体分析，而公司、消费者和竞争者则是从市场参与者的角度进行分析。
1）宏观分析思考的维度
2）宏观分析考虑的内容：
宏观分析中考虑的因素点对行业环境的影响，因素点可采用PEST模型分类，但不必拘泥于PEST模型，因素点间可能是组成多因素，从而对行业环境产生间接或直接影响。基于PEST模型，因素点可以分为：
① 经济类
包括经济发展水平、社会经济结构和宏观经济政策，其中经济发展水平可以通过较为典型的量化指标进行衡量，例如GDP\CPI\进出口规模等；宏观经济政策主要包括货币政策和财政政策；社会经济结构主要体现在经济体制和产业结构构成。
② 政治类
包括政治体制、政局稳定性、和相关的政治政策。
其中政治体制包括资本主义、社会主义和中国特色社会主义等，政治体制对行业的影响为间接影响；政策包括投资政策、环保政策、进出口政策、货币政策和财政政策等，也有针对具体行业的政策，例如近期发布的教育“双减”政策就对在线教育行业产生了不小冲击，网络安全隐私数据保护政策对互联网公司获取用户使用偏好数据，产生了非常大的影响。
其次，除了政治政策，政局的稳定性对行业发展稳定产生重要影响。
③ 文化环境类
包括人口因素、社会流动性和消费心理，此类因素可与消费者分析关联，对消费者细分市场和市场定位产生了重要的影响，主要从聚类的角度，对消费群进行分析。
人口因素主要考虑人口总数、年龄构成、性别比例、教育水平、人口地理分布等，社会流动性主要考虑社会阶级流动性和贫富差距；消费心理主要包括生活方式、文化传统和价值观等，对消费者偏好心理产生影响，从而影响消费者的行为决策。
④ 科技类
主要包括专利技术数量和质量、相关产业技术等，科技对一个产业的生产效率与产品更新，甚至一个产业的萌芽和灭亡都将产生巨大的影响，例如智能芯片对手机行业产生了巨大的冲击，原有的非智能手机迅速被智能手机取代，生产非智能手机的厂商迅速破产。
综上，宏观类因素多数为混合因子对产业产生直接或者间接的影响。
1）产业分析思考的维度
① 整体市场分析
整体市场分析除了关注静态的存量市场，也需要关注动态的增量市场。市场的现有市场规模和增速决定了市场的规模，体现为市场的“宽”度和市场的“长”度，行业壁垒和驱动因素影响参与市场的玩家数量，体现为市场的“陡”度。
② 市场参与者
市场参与者从各个角度，在产业分析上有不同的分析时间，例如从产业链角度，分析上下游供应商和购买者、从行业参与者的角度，分析竞争者和行业集中程度。
③ 影响因素
产业影响因素和宏观影响因素的区别在于，产业影响因素从供给需求、驱动和壁垒的角度分析更为直接的影响因素对产业产生的影响。
2）宏观分析考虑的内容
① 产业规模
产业规模可以从空间维度进行解析，产业的宽度代表现有市场规模，产业的长度以时间为维度，代表增长率和增长率增速，而产业规模=现有市场规模*增速。
由此可见产业规模的衡量有两个重要的衡量标准和指标，即市场规模与复合年均增长率（CAGR），市场有多宽指行业规模有多大、增长的天花板有多高，是衡量一个行业现有市场容量和将来市场发展空间的最重要的标准，现有市场容量决定了该市场有多少蛋糕可以分，而市场增速决定了行业发展潜力，行业增速可与行业的成熟度曲线紧密联系。
② 产业生命周期
产业的生命周期以时间为维度，一般分为导入期、成长期、成熟期和衰退期。产业生命周期在导入期、成长期、成熟期和衰退期的不同阶段，可以从经营风险、财务风险、产品差异、单位利润、产品特征等不同维度进行分析，详见下图。
③ 产业链
产业链分为上游供应商、下游购买者、潜在进入者和现在竞争者，将企业放在产业链进行分析，需要对供应商和购买者有较高的议价权，能有效面对竞争者。
其中，影响供应商议价能力的影响因素包括市场占有率、转换成本和供应商战略，影响购买者议价能力的影响因素包括价格敏感度，相对议价能力等，影响潜在进入者的障碍有结构性障碍和行为障碍，影响替代品威胁的主要因素包括产品同质化程度和劳动生产效率等。
④ 产业驱动因素与行业壁垒
产业的驱动因素主要分为两个部分，第一是生产要素驱动，第二是相关支持性产业驱动，其中，生产要素包括高级生产要素和初级生产要素，而相关支持性产业，则表现为产业链上下游的聚集驱动。
行业壁垒：行业壁垒分为限制性要素和市场壁垒，可以通俗理解为一只“看得见”的手和“看不见”的手，即政策限制和市场限制。
政策限制如进出口限制、许可证、配额等，实现限制如规模效益使得成本降低，对新进入的小规模玩家形成行业壁垒，又比如缺乏品牌技术，而只能成为代加工企业，获取最低的生产制造利润等。
如果行业的门槛很高，竞争者难以进入市场，行业的垄断程度也相应比较高，通常用行业集中度来分析衡量，即CR5（行业中前5名的企业占据的市场份额）。
但是，垄断程度越高，企业越有机会获得超额利润，但行业的垄断程度并非仅仅由行业壁垒所决定，消费者的需求差异也会对垄断程度产生重要影响，例如手机行业的垄断程度较高，而餐饮行业却很难出现寡头垄断，因为餐饮的消费者偏好差异非常大。
⑤ 供求分析
供给侧主要包括产能分析，同时也受行业集中程度的影响，即上文所述的行业垄断程度，产能分析包括产能利用率水平、库存周期、产品使用寿命、订单周期，这里比较典型的行业是电子产品生产制造业。
需求侧主要从消费者市场出发进行分析，同时考虑替代品，需求预测包括消费者整体购买力和细分需求市场，这里的消费者整体购买力受到宏观因素的影响，例如人均可支配收入、贫富差距等；替代品的细分影响因素包括国家进出口和国内市场替代品。
⑥ 产业结构
产品结构：产品结构可以从加工阶段和主导构成不同的视角进行分析，加工阶段主要以产业链维度为分析视角，从初级产品、中间产品和最终产品进行分析，主导构成主要从驱动因素进行分析，分为劳动密集型产品、资金密集型产品和技术密集型产品等。
市场结构：市场结构从分类上可以分为市场主体结构、市场客体结构、市场空间结构和市场 时间结构，从行业集中程度，可以分为完全竞争市场、完全垄断市场、垄断竞争市场和寡头垄断市场等，影响行业集中程度的因素在前文已经提及。
1）公司思考的维度
① 战略
战略需要将企业放置在宏观和产业的角度，通过对赛道、竞争者和消费者的分析，制定战略，从整体分配资源，规划产品和服务。
② 经营分析
经营分析从数据量化的指标，动态指导经营过程中的业务发展。运用定量分析、业务分析和行为分析相结合的方法，对企业进行综合分析的一种现代经营分析体系。包括:经营基础分析、财务分析、市场分析、劳务分析、生产分析、物资分析等。从业务单元的视角优化运营。
2）公司分析考虑的内容
① 战略分析
战略分析包括企业能力与资源分析、价值链分析、产品组合分析、外部分析、内部分析、财务指标分析和商业模式分析等。
② 战略选择
战略选择可以从总体战略和智能单元战略出发，如果业务涉及海外业务，需要分析选择国际化经营战略。
3）竞争者思考的维度
4）竞争者分析考虑的内容
1）消费者思考的维度
细分市场与精准营销：在互联网数字化的革新下，原有的消费者聚类分析越来越精细化，不仅有群体的聚类标签，个体消费者的标签也能层层穿透，为精准营销运营提供了条件。
2）消费者分析考虑的内容
基本属性：基本属性包括年龄、收入、性别、受教育程度和地域分布等。
购买动机和购买行为：根据MBA智库的定义，营销学家把消费者的购买动机和购买行为概括为6W和6O，从而形成消费者购买行为研究的基本框架。
① 市场需要什么（What）——有关产品（Objects）是什么。通过分析消费者希望购买什么，为什么需要这种商品而不是需要那种商品，研究企业应如何提供适销对路的产品去满足消费者的需求。
② 为何购买（Why）——购买目的（Objectives）是什么。通过分析购买动机的形成（生理的、自然的、经济的、社会的、心理因素的共同作用），了解消费者的购买目的，采取相应的市场策略。
③ 购买者是谁（Who）——购买组织（Organizations）是什么。分析购买者是个人、家庭还是集团，购买的产品供谁使用，谁是购买的决策者、执行者、影响者。根据分析，组合相应的产品、渠道、定价和促销。
④ 如何购买（How）——购买组织的作业行为（Operations）是什么。分析购买者对购买方式的不同要求，有针对性地提供不同的营销服务。在消费者市场，分析不同的类型消费者的特点，如经济型购买者对性能和廉价的追求，冲动性者对情趣和外观的喜好，手头拮据的购买者要求分期付款，工作繁忙的购买者重视购买方便和送货上门等。
⑤ 何时购买（When）——购买时机（Occasions）是什么。分析购买者对特定产品的购买时间的要求,把握时机，适时推出产品，如分析自然季节和传统节假日对市场购买的影响程度等。
⑥ 何处购买（Where）——购买场合（Outlets）是什么。分析购买者对不同产品的购买地点的要求，如快速消费品，顾客一般要求就近购买，而选购品则要求在商业区购买，一边挑选对比，特殊品往往会要求直接到企业或专卖店购买等。
综上所述，行业研究的框架可从宏观、赛道、市场参与者进行分析。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
登录是进入一个应用程序 、网站或服务的入口。帮助用户建立他们的账户。
让我们花点时间来定义一下“登录目标”这个术语，这是在做设计决策时的关键。
登录目标是指用户进入登录流程的意愿。以有声思维来表达，它可以是 “我想登录”、“我想检查我的电子邮件”、“带我去那里”，等等。
当用户进入到登录页时，他们可能没有登录意愿。可能会产生“嗯，我不在乎，以后再做”或“这太麻烦了”或“呀，我现在该怎么办？”的想法。忘记密码、半路遇到困难或切换到另一个页面/设备，都可能是缺乏登陆意愿的迹象。
我们得到了登陆目标
保留或增强登录流程中的登陆意愿是很好的目标，下面的准则都是为这个目标量身定做的。
设计熟悉的体验，虽说不是设计师最喜欢的设计准则，但是与整个生态系统中最好的体验保持一致是非常重要的。例如使用简单、公认的布局，使用众所周知的术语和文案，都有助于用户自信而轻松地进行熟悉的操作。
保持通用的设计也有助于将页面轻松扩展到不同的形式和设备。
Pinterest 有一个传统的、居中的覆盖式登录页。它有一个亮红色的主要登录按钮，并提供 Google 和 Facebook 作为额外的社交登录选项。
滑到最后，有我对网络上流行的成功登录经验的总结。这就把我们带到了下一个问题 —— 创新的界限在哪里？
登录是一个品牌展示的绝佳机会点。在视觉上，它可能使用品牌色、品牌照片、品牌插图，甚至是营销信息。和大多数设计问题一样，登录页品牌展示的关键在于平衡。登录操作应该一直占据中心位置。页面上的其他元素必须谨慎规划好，不应该夺走登陆操作的注意力。
一条优秀的经验之谈：用户在登录页面上花费的时间越少越好。帮助他们继续前进，尽快发现产品中的优点和价值。
快速回顾一下：用户在登录页面上花费的时间越少越好。根据这一点，登录（或恢复）操作应当占据用户的全部注意力。
在恢复体验中，将一套复杂的操作分解成多个步骤是很有效的。安排用户一次只做一件重要的事情！例如：输入你的手机号码和输入发送到你手机上的验证码是两个独立的步骤。
Facebook 在页面中保持用户信息在右侧，并将恢复流程分解为多个步骤。
亚马逊把它的恢复流程分解成多个步骤。它将次要的恢复选项设置为 “我需要更多帮助 ”的可扩展部分，这有助于保持注意力集中在主要操作。
保持注意力集中在主要操作的技巧：
在登录过程的每个阶段，用户都可能失败。电子邮件地址输入错误、密码输入错误或忘记密码、网络问题，所有这些都可能导致登录意愿的急剧下降。因此，登录界面以最恰当的方式回应用户是非常重要的。清晰、及时、精心编辑的错误提示信息能起到很大帮助。
错误信息包含有用的提示/暗示，指明你在失败时可以做什么
当你密码登陆失败，但你有一个 Gmail ID 时，Facebook 会增加一个 “用 Google 账号登录 ”的功能
指导用户恢复的技巧：
重点是让用户知道平台识别出了他们，并提供一个欢迎回归的体验。这有助于提升用户的登录意愿。
保留登录痕迹的方法：
对于你的平台应该提供哪些登录方法，没有一个放之四海而皆准的方案。最好是提供一到两种额外的方法（除了用户名+密码），这样用户就有了选择，以防他们忘记密码。这些方法可以是基于电话号码的登录、人脸识别，或最常见的社交登录，如 Google、Twitter、LinkedIn 或 Facebook。如果你正在考虑社交登录，思考为平台添加最流行和最安全的方案。
需要注意的是 —— 增加很多的登陆方法会使页面变得混乱，可能会导致登录意愿降低！将额外的选项限制在 2 或 3 种。
针对最常用的登陆方式进行优化，并明确区分主要和次要方式。这些选项通常被证明是需要重置密码（以防用户忘记密码）的很好的替代方法，但同时也被认为是一个乏味的步骤。情况允许时，应智能地浮现其他登陆选项并进行个性化处理。例如：如果用户是通过电子邮件登录，提供一个带有一次性链接的登录选项可能会有效。
在此提供 Medium 登录页的案例。虽然清晰且设计良好，但它确实有太多的登录方法。不得不回访 Medium 的设计者，如果这个设计对他们来说是好的！
无密码登录正火速流行起来。特别对于只有移动端的应用程序来说，基于电话号码的认证已常态化。指纹和 FaceID 在许多地方出现，使认证流程变得快速、安全。为平台找到最适合（且可开发）的方法，并将其作为主要登录选项。
登录涉及到用户输入敏感的个人数据，如电子邮件、密码和电话号码 —— 这是决定了他们与平台关系的敏感时刻。
登录框代表了品牌，任何视觉上的改变都必须缓慢进行——因为整体的视觉变化可能会失去用户信任。
登录也是（有用的）保障 —— 足以让坏人无法进入系统!
虽然减少普通用户的操作是很重要的，但如果我们怀疑用户可能是黑客，那么出现额外的认证也变得很重要。这可能是一个很好的机会去提醒用户能够采取哪些措施来加强他们账户的安全性 —— 例如：强密码、双重认证等。
之前有提到过，投入足够的时间去调研用户，有助于提高登录意愿！这一点是很重要的。
登录是一种体验，你的用户角色可以是各种各样的 —— 每个人都可能拥有一个你平台的服务账户！如果可能的话，缩小你的角色范围。
情况允许时，像我这样（为社交媒体平台设计），可以尝试以下方案：
以下是我对网络上我最喜欢的登录页进行的总结，包含一些我经常访问的平台。欢迎推荐更多登录页！
Google（谷歌）打破了标识优先的格式 —— 改成了分步式登录模式，在不同的步骤中输入电子邮件和密码。这种模式对于 Google 有安全优势，也可以使他们在接下来的步骤中为用户提供个性化的选择。页面也是最小的、全白的、聚焦的。
Uber 的登录页是简单且聚焦的，允许用户输入他们的电话号码并进入下一步。
Facebook 有几个登录方案，他们用这些方案进行实验和 A/B 测试 —— 这是一个右对齐的登录框案例，它很好地突出了重点。左侧的空间被用来打造积极的品牌形象 —— 总体来说是成功的登录体验。
Pinterest 做了 一个简单居中的叠加表单，有硕大的输入框 —— 不断吸引用户！还有一个亮红色的登录主按钮，以及一些额外的社交登录选项。
尽管 Airbnb（爱彼迎）在很多方面都做得很好，但它的登录页让人感到操作繁多，这也许是因为基于手机号码登录，也许是因为大量的次要登录选项，导致相当多的认知负荷！
LinkedIn（领英）很好地保持登录框的简介、聚焦和居中，有一个醒目的主登录按钮。
我对 Dropbox 的登录页面持犹豫态度——插图很好看，但它的颜色与界面按钮的颜色相似。这是附加元素分散注意力的案例。就我个人而言，我喜欢在界面中大胆使用插图，但评估插图的使用环境也很重要。
Amazon（亚马逊）的登陆页视觉设计上有些老旧，但对于管理用户注意力是一个很好的案例，巨大的黄色“继续”按钮以及页面上没有任何干扰，使登录任务看起来简单快速。
在登录页面上放置广告可能不是一个好主意，但同时 Yahoo（雅虎）有一个与众不同的标识在登录框中，其中设计了一些巧妙的功能，帮助用户减少输入。(参考下图)
我想把 Figma 纳入优秀的登录案例中，该页居中于浮层，Google 登录被突出展示（也许是 Figma 的首选和推广的登录形式？），它非常简洁，几乎是线框式的。用户体验非常好。
感谢我的产品合作伙伴 Apurva 和我一起学习。采取微小的步骤进行用户识别，并且使用户易于接受。这会使你的用户登录成功率越来越高！同时这也会为平台带来更多的活跃用户。:)希望你能从这篇文章中得到启发，并应用于你自己的产品和设计工作中。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com