设计过程被描述为多个阶段，每个阶段都包含不同的活动来完成该阶段，它没有统一的标准流程，每个公司和设计师都有自己的流程版本。
尽管存在多个流程，但一般流程和阶段类似于以下内容:
了解问题：初步了解问题。观察、采访和倾听用户。
定义问题：解释和定义要解决的问题。
构思：通过头脑风暴产生尽可能多的想法。
原型设计：构建原型并与其他人分享（ 再次缩小解决方案空间，为实验阶段 ）。
测试：测试可能的解决方案、实施、改进或重新设计。
传统的问题解决采取有条不紊而又科学的形式。该过程从一个问题开始，定义要采取的步骤以及达到解决方案的工具或方法。
设计思维是一种创造性的策略，可以产生创造性的未来结果和/或创造性的问题解决方式，它应该被认为是一种以解决方案为中心的思维策略。
它通常被描述为一种创造性、主观和感性的对许多大型组织的分析逻辑（ 布朗，2008 年 ），或作为分析和创造性推理模式的组合（ 邓恩 & 马丁，2006 年；利特卡，2015 年 ）。
设计思维来源于常规问题解决方法，常规问题解法是设计思维的基础。
从解决问题到设计思维，Liedtka (2013)
结果发现，设计思维实际上也是一个解决问题的过程，而不仅仅是一个创新过程（ 利特卡，2013）
一个例子是，丰田采用设计思维从头开始分析其西海岸的一个客户联络中心，在重新设计过程中，组建了一个由一线呼叫代表、软件工程师、业务主管和变革代理组成的跨职能团队，这一举动最终改变了客户和员工的服务中心体验。
我们每天都会遇到问题，但是当我们解决同样的问题时，它们就成了例行公事（ 似乎已经忘记它们是问题了 ），我们甚至都没有意识到正在解决这些问题。例如，我的办公室在 30 分钟路程之外，该怎么到达那里？开车、坐火车或巴士到目的地；除非车子轮胎被刺破，否则你就需要弄清楚如何到达办公室。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 与 Roger Martin 共同创造了特定术语：“设计思维”，并将多年来酝酿的方法和想法封装成一个统一的概念。
设计思维是以人为中心、开放式、基于问题的方法论。这种方法最初是为了改变工程教育中的教学方式，而工程师处理和解决问题的方式有其设计思维的基础。
设计思维一词可以追溯到 1987 年 Peter Rowe 的著作：“设计思维。” 他描述工程师和建筑师处理问题的方法有很大不同。
90 年代初，认知科学家 Don Norman 加入 Apple 团队，担任他们的用户体验架构师，这使他成为第一个在职位中包含 UX 的人。他提出了“用户体验设计”这个术语，因为他想“涵盖人们对系统体验的所有方面，包括工业设计、图形、界面、物理交互和手册。” 从那时起，这些领域中的每一个都将用户体验，扩展到了自己的专业领域。
设计思维在解决“棘手问题”时特别有用。
棘手问题的特征
“棘手问题”一词是由设计理论家 Horst Rittel 在 1972 年创造的，用来描述本质上非常模糊 \ 特别棘手的问题。棘手问题，有很多未知因素，没有确定的解决方案。问题或解决方案可能与另一个棘手的问题有关，因此这是一个需要设计思维的持续过程。贫困、饥饿和气候变化是一些现代的棘手问题。
设计主题的范围是普遍的，因为 设计思维可以应用于人类经验的任何领域。
它可以用于：
符号和视觉传达：这包括平面设计的传统工作，如排版和广告、书籍和杂志制作、科学插图、摄影、电影、电视和计算机显示。
材料：这包括对日常用品的形式和视觉外观的传统关注 —— 服装、家用物品、工具、仪器、机械和车辆。
人类活动和组织性服务：包括对物流的传统管理关注，结合物质资源、工具和人类低效的序列和时间表，以达到特定的目标。
复杂的系统或环境：生活、工作、娱乐和学习。这包括系统工程、建筑和城市规划的传统关注点，或复杂整体部分的功能分析及其随后在层次结构中的集成。
设计思维起源于设计师的培训和专业实践，但这些原则可以被每个人实践并扩展到每个活动领域。（布朗，2013 年）
在企业中，设计过程可以为企业环境中的问题解决带来创新思维。它还可以用于医疗保健，通过向护士、医生和管理人员教授设计思维技术，我们可以激励相关从业者贡献新的想法。
不管是什么设计，理解和研究问题是必不可少的，因为我们能够从其出发，从而进行以用户为中心的设计。
设计思维的最早阶段是搞懂你能带来的情感价值。设计思维方法迫使你停留在提问与质疑阶段，而不是准确定义出问题后进入下一阶段。我们都有过快进入解决方案模式的倾向，所以设计思维方法迫使你真实地存在于这个不清楚、有时还非常混乱的时刻，从而使你对要解决的问题产生更好的理解。（利特克，2013）
传统的问题解决涉及提出一个解决方案，但设计思维首先使我们发散，试图为问题生成各种可能的替代解决方案。然后让我们进行收敛性思维，缩小多种可能性，找到单一的最佳解决方案。
根据利特卡和奥美 (2011) 的说法，设计思维的全部意义在于学习一种新的、系统的解决问题的方法。正如我们思考创造力一样，即使是设计思维也可以通过实践来教授和改进。
设计过程从来都不是线性的，它由多次失败和迭代组成（布朗，2018）。
首先，设计师试图将问题与过去的类似案例联系起来。如果这种方法不能提供任何解决方案，下一步就是使用知识和创造力作为一种实验思维形式来产生新的想法。使用决策矩阵对这些想法进行评估，从而会产生被进一步分析和测试的解决方案。如果成功，它将被实施。如果不成功，则需要重新表述问题，并重复该过程。这是一个迭代过程，即循环方法。
这一持续不断的重新再设计过程，源于和客户亲密接触的洞察。
学习设计思维不仅仅意味着学习一套新的工具。它还意味着：学习收集和分析大量数据；学习挖掘对象可能的形态而不是自主认为他是什么；学习管理不确定感，以及与许多新的伙伴合作（ 利特卡和奥美，2011）。你可以进行的研究类型分为三类：生成性研究、评估性研究和验证性研究。
一种常见的表述 —— 实际上是设计思维的另一种视角 —— 即设计师应该预料到会“很快失败或经常失败”（布朗，2009）。
当过程早期发生故障时，例如被拒绝的原型，实质上它可以为有效解决方案提供关键见解。这种观点与传统的先形成理论，再检验正误的方式相矛盾。
Airbnb、Braun 和百事可乐等多元化公司都在 采用设计思维并将其作为核心战略。例如，IBM 为全球旗下的 44 个设计工作室聘请了 1600 名设计师，并且正在培训数以万计的设计师员工建立深度创新能力 ( O'Keefe, 2017 )
设计思维为我们解决问题添加了以人为本的元素。当我们试图通过牢记人们的想法来解决问题，并使用基于直接观察乃至访谈的研究时，我们便会捕捉到与消费者需求一致的意外见解和创新。
它有助于将成功的产品更快地推向市场，最终节省企业资金。
IBM 的健康和人类服务组织的设计思维实践，通过有效使用设计和设计思维帮助企业将缺陷数量减少了 50% 以上。这种更高效的工作流程导致计算出的 ROI 超过 300%。
由于复杂的问题从来不能被所有人完全理解，因此在尝试设计解决方案时，处理歧义和多个并发的思路方向的能力是至关重要的素质。
设计思维通过综合和归纳思维，帮助实现质的飞跃。它允许通过解构来测试约束，并允许通过多样性思维和批评思维，来拥抱和探索歧义。
消费者通常不知道他们有什么问题需要解决，或者他们无法用语言表达出来。只有经过仔细观察，设计者才能根据真实消费者行为中看到的东西来识别问题，而不是简单地根据对消费者的想法来确定问题。这有助于定义模棱两可的问题，并找到解决方案。
该方法鼓励“跳出框架思考”（“疯狂的想法”）；它蔑视显而易见的事物并采用更具实验性的方法。
在早期的流程阶段鼓励大胆的想法，以产生创造性的解决方案。使用它是为了让设计师可以尝试开发新的不受约束的思维方式，或对常见问题的创新解觉方法。
根据大多数设计学院的说法，具备特定特质的人能够更好地发挥设计思维的作用。
同理心：从多个角度想象世界 —— 同事、甲方客户、实际使用者和消费者的角度。要成为更好的同理心，必须倾听和观察他人的行为，注意并获得洞察力。
综合思维：重要的是不仅要有分析能力，而且要能够提出新颖的解决方案，还要凭直觉。
乐观：除非你相信有解决方案，否则在遇到挑战且解决方案遇到瓶颈时，你可能会放弃。
实验主义：重大创新并非来自渐进式调整。设计思想家以创造性的方式提出问题并探索限制因素，并朝着全新的方向发展。
协作：产品、服务和体验日益复杂，因此必须拥有一支具有不同背景的团队，以帮助从多个角度看待问题。
当我们想到一个问题的多种解决方案时，对我们解决问题会非常有帮助，因此“功能固定性”阻止了我们以新颖的方式使用旧工具解决新问题。想要摆脱功能固定，首先是要让人们可以使用“改造后的衣架进入上锁的汽车”。这也是盗贼第一次可以用信用卡撬开简单的弹簧门锁。
为了帮助设计师利用文科和技术理论，整合多个领域的知识以找到创新的解决方案，我们采用设计思维来获得洞察力。该方法侧重于可视化和操作，因而帮助我们更容易地了解实际解法，而不仅仅是理论模型。
第一批美国公司在 2000 年代初期开始实施设计思维，这一概念引起了德国投资者 Hasso Plattner 的兴趣，他于 2006 年资助创建了两所设计学校（d.schools），其中一所位于波茨坦大学（德国），另一所位于美国斯坦福大学。由于两所学校都成功地为大型组织提供了高管设计思维培训，因此该研究重点关注这些国家，以寻找早期实施者。
设计思维通常涉及希望参与整个设计和开发过程的庞大利益相关者团队。
观点、才能和经验的多样性被认为是注入新思维的部分重要来源。多样性确保通过融合不同的观点、技能和知识来产生创意（卡振思，2018 年；萨梅和德拉赫-扎哈维，2013 年）。设计思维的协作方法和工具可帮助团队以积极的方式利用他们的差异。
决策是平等的，因为每个成员的意见都被征求和使用（卡尔格伦等，2016）。
当 IDEO 去 Apple 展示他们的鼠标时，它不是什么花哨的设备，而是一个用胶带粘起来的原型。
低保真原型制作起来既快速又便宜（ 想想几分钟和几分钱 ），但可以从用户和同事那里得到有用的反馈，这符合快速验证、廉价试错的原则。为每个想法投入尽可能少的资源意味着前期投入的时间和金钱更少。此外，将多个原型带到现场进行测试为用户提供了比较的基础参考，同时也有助于揭示某些需求。
为了创新，设计思维意识到认知和行动对创新过程很重要。认知包括接受度、乐观和创造性的信心（ 凯莉 & 凯莉，2013；郑，2018），而行动包括快速原型设计、旅程地图和假设浮现（ 假设浮现：assumption surfacing，这是一种评估技术，涉及写出潜在的假设和反假设。）（ 卡尔格伦等，2016；利特卡，2015）
如果领导层不欢迎风险、模棱两可和风格的改变，实施起来就会变得更加困难。它会被管理者“质疑”其具体指标
沃尔特斯 ( 2011 ) 声称，由于设计思维的模糊性，它与组织文化相冲突。
据受访者称，在日常业务中使用设计思维之所以不会是最优选项， 因为它是资源密集型的，增加了工作量。（ 丽莎等，2016）
在医疗保健等规避风险的行业和公司中，“经常和早点失败”的方法被认为是非常困难的。
许多设计师反对设计思维这一观点，设计思维不仅关乎一个过程，而且关乎改变思维过程并提高人们可能提出的解决方案的创造力。
“设计思维”的推广已被大型全球公司用来增加业务。不过，在更广泛的设计世界中，我甚至会说“设计思维”的过度宣传导致了所提供设计质量的下降。—— Yasushi Kusume
弗吉尼亚理工大学科学、技术和社会助理教授 Lee Vinsel 在《设计思维运动是荒谬的》中写道，“归根结底，设计思维与设计无关。这与文科无关。这与任何有意义的创新无关。如果这意味着重大的社会变革，那肯定不是关于“社会创新”。这是关于商业化的。”
观察人们的行为以及他们如何与环境互动，可以为你提供有关人们想法和感受的线索。
你可能认为你知道问题所在，但只有通过观察才能了解消费者真正需要什么。
宜家派设计师到人们家中，观测他们的互动行为来了解他们的需求。这将使设计者能够推断这些经历的无形含义，以发现洞察。这些洞察提供创新解决方案的构思方向。而事实上，最好的解决方案来自于对人类行为的最佳洞察。
Good Kitchen 是一家为老年人和体弱者提供膳食的社会服务机构。起初的问题似乎是设计不当的膳食菜单。然后设计思维揭示了无数问题，所有问题都源于服务本身的性质。因此，经由对服务进行了彻底改革的之后，最终提高了客户和员工的满意度（利特卡，2014）
对于设计师来说，遇到设计瓶颈期很正常，入行一段时间后所具备的能力就会达到峰值，无法突破峰值就会遇到瓶颈。主要在设计思维和设计技法层面受限，打开设计思维才能突破瓶颈期，通过积累优秀的案例并进行总结分析，可以更快的打破思维限制。
分享目录
一、趣味性的登录设计
二、瓷片区的趣味性手势交互
三、营造怀旧感的温馨体验
四、趣味性的进度提示设计
五、场景感的点击操作
六、动效引导用户发帖
七、卡通形象强化瓷片区视觉感
八、不改变布局的曝光强化
九、可以晃动的 Banner 图
十、场景感的底部标签栏设计
一、趣味性的登录设计
登录是进入产品的第一道防线，也容易让用户产生排斥感，降低用户的防备心理才能提高登录的意愿度。
盯潮 App 在登录界面中，以潮流元素和商品等内容进行设计，使得页面视觉感丰富。晃动手机时元素也会移动，在掉落或者碰撞手机边缘时配合震动感，让体验变得非常有趣。趣味性的设计降低了用户的排斥感，提升了登录的意愿度和体验感。
二、瓷片区的趣味性手势交互
瓷片区、Banner、金刚区是产品中的三大运营模块，起到提高曝光度达到引流的目的。瓷片区在页面中的布局比较灵活，设计表现也非常丰富。
盯潮 App 在首页瓷片区设计中，以栅格式布局进行区块划分，占比较大的模块类似于 Banner 式表现。通过手势可以任意拖动实现切换，趣味性和互动性相结合，提高了用户的使用乐趣。
三、营造怀旧感的温馨体验
童年的记忆是我们逝去的青春，每每看到小时候的画面，总能勾起我们童年的回忆。最近发现一款结合怀旧感营造设计风格的产品，名字叫“软眠眠”。
这是一款拯救失眠者的治愈系睡眠 App，以一幅小时候生活的环境插画填充界面背景，图标设计也是提取小时候的玩物或者生活用品，视觉风格营造极强的怀旧感。无论是画风还是配色、配乐等，都勾起了我们满满的回忆，带给用户温馨的体验。
四、趣味性的进度提示设计
在完成步骤化和消耗数据等内容表达层面会选择进度条，通过可视化的表达提高用户的理解，减轻信息认知负担。
软眠眠 App 在定制睡眠计划的过程中，完成选项时的进度条设计非常有意思，是一个小孩通过拉动绳子移动。拉动过程中结合动态表达，配合手绘风的表现让人感觉轻松愉快，趣味性的设计也提高了完成选项任务的意愿度。
五、场景感的点击操作
在保障底层操作体验的基础上，设计会越来越讲究细节的体验，逐步强化情感化的融入和场景感的体验。
最近在体验小雞上工 App 时，在找工作的列表设计中加入了“抢”按钮，在点击列表时按钮会有按压的动效过程。模拟抢拍按钮获得机会的体验，营造场景氛围感，提高了设计表达的趣味性。
六、动效引导用户发帖
微动效可以提高功能的吸引力，也能让互动体验变得更有趣，可以通过动效引导功能操作和提高关注度。
腾讯动漫 App 在圈子栏目中，以 IP 形象结合动效强化发帖按钮，以此引导用户参与发帖。动效不仅突出了发帖的关注度，也让发帖按钮设计更有亲和力，进而提升用户的点击欲。
七、卡通形象强化瓷片区视觉感
瓷片区起到强化曝光达到流量引导的作用，提高该模块的吸引力至关重要，视觉感的突出也尤为重要。
会玩 App 在首页“一起玩”的瓷片区设计中，以卡通形象结合丰富的色彩进行表现，各种装扮的形象丰富视觉感。卡通形象设计风格统一，卡片色彩丰富且协调，整体瓷片区视觉冲击力十足。
八、不改变布局的曝光强化
在当前产品结构不变的基础上，如何提高局部内容或者主推内容的曝光度，是产品设计师不断探索的方向。
爱奇艺 App 首页推荐栏目 Banner 图下方，默认情况下以宫格布局推荐影片。前段时间在打开时发现了一个临时设计表达，保持当前结构布局不变，放大了图片填充和推荐影片，整张画面填充宫格，视觉张力十足。该设计表达既不会干扰当前布局，也能强化推荐影片的曝光度，解决方案值得探索。
九、可以晃动的 Banner 图
Banner 可以在创意、造型、互动形式等方面进行设计发挥，也呈现了许多优秀的方案，产品设计师也在不断尝试更多的可能性。
最近在体验盯潮 App 时，发售栏目顶部 Banner 图设计引人关注。当用户左右晃动手机时，Banner 图背景层不动，而文案和产品等元素层会跟着晃动的频率左右移动。可以晃动的 Banner 图非常有意思，成功地吸引了用户的关注度和点击欲。
十、场景感的底部标签栏设计
底部标签栏设计可以在背景、造型、图标等元素中发挥，其中图标设计中的发挥相对更多一些，在背景和造型层面的案例较少，不过最近也发现了一个解决方案。
在体验云游万里长城小程序时，进入之后的小程序底部标签栏设计结合了长城墙面和结构，非常有场景代入感。设计了深色版和浅色版，图标造型设计也融入了长城元素，不失为一种优秀的差异化设计探索。
小结
希望本期的分享可以开启大家更多设计思维，从优秀的设计方案中发现设计的轨迹，复用到后期的项目设计中。本文描述属于个人理解和总结，不足之处欢迎大家留言补充，我们互相进步。
形状设计可以影响整个界面的视觉效果。通过选择适当的形状和排列方式，可以创造出令人愉悦、易于使用和富有吸引力的界面。
在UI设计中，形状设计是一个至关重要的环节。对其选择和排列会直接影响到界面的美观度和用户的交互体验。接下来将详细探讨UI设计中的形状设计，包括其重要性、基本原则和实际应用。
形状可以帮助用户理解和操作界面。一个优秀的形状设计应该具有清晰、简洁和易于理解的特点，我们在平时做设计中，需要将这些原则深入到每一个细节中。
在设计中，形状的识别和理解是至关重要的。一个成功的形状设计应该能够快速地被用户识别并理解。例如，一个常见的形状可以使用不同的颜色和大小来区分主要内容和次要内容，从而引导用户的注意力。
1、形状的一致性
在UI设计中，一致性是一个非常重要的原则。一个好的形状设计应该在整个应用程序中保持一致，从而使用户可以轻松地导航和操作。例如，闲鱼APP里的所有的按钮可以使用相同的形状和颜色，以便用户可以轻松地识别并操作。
2、形状的个性化与品牌识别
一个独特的形状设计可以帮助品牌在竞争激烈的市场中脱颖而出。一个好的形状设计应该能够体现品牌的个性和价值观，从而增强品牌的识别度。使用独特的图标和标志来传达其品牌形象和价值观。例如：小米的logo、京东狗、淘宝天猫。
1、按钮设计
按钮是UI设计中最重要的元素之一。一个好的按钮设计应该具有清晰的形状和易于理解的标签。
按钮形状主要有直角、小圆角、全圆角三种样式。
① 直角按钮具有严谨、力量、高端的特点，适用于大牌美妆、奢侈品类产品；
② 小圆角按钮具有稳定、中性的感觉，适用于用户跨度较大的常规类产品中，例如微信、滴滴、抖音等；
③ 全圆角按钮更加温和、亲切，适用于电商类和儿童类的产品中。
按钮尺寸和比例根据iOS和Android的规范，按钮尺寸至少高于5.5毫米（36 pt），否则用户点击时会较为困难。同时，按钮长度固定，文字长度变化或是按钮长度根据文字长短而变化的设计方式也需要考虑文字距离按钮上下左右边距的比例关系。
总的来说，UI中按钮形状的设计需要结合具体的产品属性和界面风格，以及用户的使用习惯来进行综合考虑。
2、图标设计
图标是UI设计中另一种重要的具有高度概括性和视觉传达性的小尺寸图像元素。可以帮助用户快速地识别和理解功能和信息，是靠文案无法实现的。
例如，天气图标通过其形状、色彩和设计元素直观地传达不同的天气状况和气象信息，帮助人们更好地了解天气状况。又如卫生间男女图标的设计让人们易于识别和理解。
在UI设计中，图标的圆角度通常是怎么定义的呢？
① 大圆角：应用在以圆润、可爱为主要风格的UI设计中，以营造出更加柔和、亲切的视觉效果。
② 小圆角：小圆角作为一种微妙的细节元素，可以增加图标的层次感和细节。在追求设计质感的界面中，适当添加小圆角可以使图标更加精致和有品质感。
③ 无圆角：应用在科技或现代感的UI设计中，以营造出更加硬朗、冷峻的视觉效果。但使用需要克制，过多的直角可能会让整个界面显得生硬和冷感。
补充一点，我发现一个重要细节，就是很多人在计算内圆角数值时都存在困扰。自工作以来，我注意到这个问题影响了很多人，他们不知道如何正确地计算内圆角的数值。为了解决这个问题，通过以下方式帮助大家更好地掌握计算内圆角数值的方法。
3、输入框设计
输入框是用户输入信息的重要区域。在UI设计中，输入框的形状设计可以根据实际需求和设计风格进行变化。以下是一些常见的输入框形状设计：
① 方型输入框：这是最常见的输入框形状，它以方形的形式呈现，可以在其中输入文本或信息。这种设计简单明了，易于使用，适用于大多数场景。
② 圆角矩形输入框：这种输入框在四个角上采用了圆角设计，使得整个输入框看起来更加柔和、友好。这种设计在一些需要强调用户输入的场景下较为常见。
③ 下拉菜单输入框：这种输入框可以让用户从下拉菜单中选择一个选项，而不是直接在文本框中输入。这种设计适用于一些固定选项的场景，可以减少用户的输入操作。
④ 按钮式输入框：这种输入框将输入框和按钮结合在一起，用户可以点击按钮来输入信息。这种设计适用于一些需要强调点击操作的场景，例如站酷的登录。
⑤ 语音识别输入框：这种输入框允许用户通过语音来输入信息，而不是手动输入。这种设计适用于一些需要快速输入或不方便手动输入的场景，例如驾车、写字等。
总的来说，输入框的形状设计应根据实际需求和设计风格来进行选择，同时也要考虑用户的使用习惯和操作体验。
4、导航栏设计
导航栏是UI设计中重要的组成部分之一。它帮助用户在不同的页面之间进行切换和导航。在设计导航栏时，应考虑其位置、颜色和形状等因素。以下是一些常见的导航栏形状设计：
① 顶部导航栏：这是最常见的导航模式，位于页面顶部，可以包含网站的名称、主要的导航选项、搜索框等元素。这种设计简单明了，易于使用，适用于大多数场景。
② 侧边导航栏：这种导航模式位于页面左侧，通常用于二级导航或辅助导航。侧边导航栏可以以垂直或水平方向呈现，根据实际需求进行选择。
③ 底部导航栏：这种导航模式位于页面底部，通常用于一级目录的导航。底部导航栏可以包含网站的名称、主要的导航选项、搜索框等元素。这种设计操作方便，用户体验好，适用于大多数场景。
④ 弹出式导航栏：这种导航模式通常用于移动端应用，通过点击或滑动屏幕上的按钮或图标来唤出导航菜单。弹出式导航栏可以以垂直或水平方向呈现，根据实际需求进行选择。
总的来说，导航栏的形状设计应根据实际的导航模式和设计风格来进行选择，同时也要考虑用户的使用习惯和操作体验。好的导航设计应该简单明了、易于使用，能够提供清晰的信息架构和层级关系，帮助用户快速找到所需内容。
5、作为底纹设计
将形状用作底纹，可以增加图形的视觉层次感和趣味性。尤其是当使用如圆圈、条纹、曲线等形状时，可以使底纹呈现出动态感和动感。
也可以强调文字或图片中的某些元素，用来引导观者的视线，以创造出视觉焦点。比如，在一个沉闷的黑色背景上使用鲜艳的彩色形状作为底纹，可以将观者的注意力集中在那些形状上。
但是，必须着重强调的是，底纹的使用应当与整体的设计风格和主题相得益彰。若应用不当，可能会对画面的整体美感产生破坏性的影响。因此，在决定是否使用底纹时，必须慎重考虑其与整体设计的和谐度。
1、动态形状设计
随着技术的不断发展，动态形状设计已经成为一种趋势。通过使用动画和过渡效果，可以创建更具吸引力和互动性的界面。例如，使用渐变效果来平滑地转换不同的页面或状态。
2、3D和立体形状设计
3D和立体形状设计为UI设计师提供了更多的可能性。通过使用阴影、光照和深度效果，可以创建更立体、更有层次感的界面。例如，使用3D旋转效果来突出主要内容或使用阴影效果来增加界面的深度感。
3、可定制形状设计
随着用户对个性化需求的不断增加，可定制的形状设计变得越来越重要。用户希望根据自己的喜好和需求来调整界面。例如，允许用户自定义选择自己喜欢的页面主题风格。
在UI设计中，精美形状设计的关键是深入理解用户需求，注重细节，保持一致性，勇于创新，不断提高技能水平。这样才能创造符合用户口味的界面，提升用户体验。简洁地说，好的形状设计来源于用户需求、细节、一致性、创新和自我提升。
以上总结仅代表个人观点，如有不足欢迎大家补充互相进步。
那么什么才是对企业和用户最有效的？什么情况下把所有的信息直接呈现比逐渐呈现信息更加合理？
网页 ( Web ) 和应用 ( App ) 虽然不能像报纸一样折叠起来，但将重要信息显示在页面重要位置的案例依然存在。有的企业仍然希望读者能一眼看到所有东西，就像在你面前说全都在这里，我们称之为主页体验当中的“蓝色药丸”。还有一种主页体验被称为“红色药丸”，例如 Facebook 的无限卷轴，就像一粒神奇的药丸，可以让你无限投入其中。那么什么才是对企业和用户最有效的？什么情况下把所有的信息直接呈现比逐渐呈现信息更加合理？
这取决于你的企业想要达到的目标。你是希望你的访客去选择他们自己想要的内容（ 例如 TED 演讲 ) ，还是你想要帮他们作出选择（ 例如 Netflix ）？也可能无需涉及任何决定，你希望人们因为好玩而在你的主页上长久地停留（ 例如 Pinterest ）。你的商业目标将会帮助你决定主页内容将持续多长时间：
如果你想要你的客户自己去决定，就提供他们蓝色药丸。在页面中直接展示所有选项，那么故事就结束了。
如果他们想要一个惊喜，那么红色药丸就是最好的选择。就像在仙境中无限探索，向他们展示这兔子洞有多深。
如果你想为你的客户选择所需的路径，那么请在无限卷轴中编织一个扣人心弦的故事，让他们沉浸在你为他们优先安排的体验当中。
你希望你的访客首先选择他们想要的。只有这样，你才能更加深入的了解他们所选择的道路。
这取决于你的企业正在努力要实现的目标。什么情况下让访客先做决定比较合理？
你仍然可以帮助人们作出正确的选择。关键点就是不要过早的深入细节，也不要挑出最喜欢的。尽管会巧妙的突出其中一个，但依然要将所有的选项以直观的、无优先级的、单一视图的形式呈现给客户。
你希望创造一个充满了偶然性探索和发现的体验旅程，就如爱丽丝准备进入兔子洞。你的用户不需要去寻找任何具体的内容，也没有详细的目标或特定的规则，无限卷轴就是这里的答案，用户可以沉浸在内容的海洋里。就像 Pinterest 和 Facebook 这样的网站，伴随着大量用户生成的内容而使用无限卷轴。
尽管惊喜是主旨，但是人们依旧需要时间感和空间感。一方面，用户必须知道还存在多少信息，即使它正在下载；另一方面，用户必须知道他们所在的位置，这样更容易向两个方向导航（ 前进或后退 ）。如果你的目标只是为你的客户安排一个旅程的优先级而不是一个无止境的旅程，那么你该怎么办?我们需要第三个药丸.....
绿色药丸主页 —— 长卷轴
你希望为访客们安排一条线性路径的优先级，你为他们省去了选择的麻烦。想象一下你的衣橱是根据你今天要穿什么来安排的，还是为你即将到来的旅行计划来安排的?
在什么情况下这是一个好的主意?
图片来源：http://www.rleonardi.com/interactive-resume/
长卷轴在你的内容里提供了一个连续的、自然流动的节奏。回想一下你在阅读纸质书时获得的乐趣，在鼠标上轻轻滚动或按下小键盘就像翻页一样，它是毫不费力的、自然的和无干扰的，前进和后退都很容易。当然，你的故事需要足够扣人心弦才能读到高潮。你的观点有多连贯和一致，这将决定你故事的线性流程。交叉引用或任何干扰都会打乱流程。即使你正在为你的访客们推广一条线性路径，但是也不要忘记为其他可选择的项目提供一个附属选项。总有一些人会选择很少有人走的路。
决定在于内容的广度，就像沉浸感是内容的深度。最大的问题是你希望你的主页有多宽和多深。
作者：三分设
链接：https://www.zcool.com.cn/article/ZMTQyOTQxNg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
对于很多设计师来讲在设计界面过程中往往会忽略掉很多的细节，比如卡片的排版、文字的排版、各种状态的反馈等等，特别是刚入行的设计师在做页面时往往是直接拿到竞品的页面搬运到自己产品上，这种做法理论上不会让自己的页面出错，但是很多人往往忽略了一点，就是别人这么设计的目标是什么，是否会匹配自己的设计目标，如果不了解这些贸然的去搬运设计，那么时间久了会养成一个不好的习惯，需要设计师去进行设计时可能就会遇到很多难点，作为初级设计师或者刚入行的设计师，前期可以去进行搬运设计，但是一定要了解别人为什么这么做。
接下来将分享12个设计上的小技巧，大部分在日常设计中都会遇到，了解到这些设计细节，可以让我们的界面更加高效、易用、美观提升用户体验。
一、快捷交互
二、提升交互路径
三、问题前置
四、提升可读性
五、点击引导
六、注意饱和度
七、禁止特殊字体
八、按钮也要有层级
九、图标保持一致
十、利用对比
十一、图文叠加
十二、注意遮罩透明
我在做界面时可以时常利用交互手势去帮助用户提升操作效率，避免繁杂小操作步骤
左侧为什么错？？
左图中针对单条消息的操作汇聚到了icon内，对于用户理解成本比较高，当用户想要去删除或者屏蔽消息时需要通过聚合入口才能完成操作，大大的提升了用户操作成本。
建议正确做法～～
我们可以在类似的消息场景或者其他列表形式的场景中，添加一些交互手势，随着手机系统的更新，用户的操作习惯已经被各大产品培养的非常成熟，并不用担心用户无法操作的情况，增加手势有弊端也有优势，右图中手势增加了用户首次使用的学习成本，但是降低了高频功能的操作成本，这个理论上是可以接
受的。
实际产品中的运用
利用拇指定律把关键的操作入口元素等，放置右侧提升用户操作效率。
左侧为什么错？？
左图中把按钮放置了模块左下侧，这样是不利于用户进行操作，当然如果整个模块的热区都是同一个，这样并没有什么问题，用户点击卡片区域任何位置都能够完成下一步操作，如果出现一个模块内存在多个热区入口，而用户想要到达目标必须通过按钮点击才能进入，那么左图中的排版位置就会提升用户的操作时间。
建议正确做法～～
当一个页面内出现多个相同模块或者一个模块出现多个热区入口时，按钮点击区域有限，我们设计时就可以利用拇指定律进行排版，如右图中布局，将按钮放置右侧可以便于用户在右手操作时快速到达目标，因为国内使用右手的人数远远大于左手用户，所以我们需要满足大部分的体验，合理利用拇指定律。
相关定律：费兹定律、拇指定律
实际产品中的运用
对于我们来讲很多东西是简单的，但是不乏会有一些用户是陌生的，对于他们来讲可能会有填写成本。
左侧为什么错？？
左图中理论上并不是错，我们经常设计表单时都会用的提示话术，但是我们需要考虑更多维度的东西，对于我们来讲填写这种表单非常简单，例如个别用户，可能会临时忘了邮箱格式，又或者输入手机号时多填了一位数等等情况，用户错误一次操作步骤就会多一步，反之就是降低使用产品时的体验。
建议正确做法～～
如右图中，我们设计时可以更改提示的话术，帮助用户把问题前置，当用户看到提示邮箱时就会按照格式去填写，通过把手机号的位数拆分，让用户更好的记忆数字，这样无论对产品还是用户都没有任何损失，反而能降低错误频率。
实际产品中的运用
无论是页面还是模块，用户在阅读时是已扫读的方式进行浏览，我们需要保证页面的文字元素具备一定的规律，以此来提升阅读效率。
左侧为什么错？？
左图中可以看到，文字与输入框放在同一列进行展示，这样一方面不利于后续的文字扩展，通常这种表单填写的页面，在页面中都是具有很大的空间位置，这样排布会造成视觉上的不规律和拥挤，降低了筛选效率，当然如果是模块区域很小的情况下，可以适当的进行使用。
建议正确做法～～
右图中我们把文字与输入区域上下排布，虽然文字长短不一，但依据对齐原则在竖列情况看是具备对齐规律的，有效的提升信息筛选效率。
实际产品中的运用
我们在做系统功能模块时需要注意添加功能点击引导，用户对此类消息模块认知上会默认不可点击，因此需要我们加以引导。
左侧为什么错？？
我们常见的消息模块内容为两种，一种是互动类消息即用户与用户，另一种时是系统消息即产品推送的内容，前者基于用户习惯而言用户已经没有使用成本默认是可以进行点击交互，后者因为部分产品会把系统消息作为展示的形式给用户，但是有些产品的系统消息却是可以点击交互，这就导致了用户认知上出现了混乱，左图中像系统通知功能通知其实从视觉上看，并不具备点击欲望，因此可能会对用户造成错误的理解。
建议正确做法～～
当我们在设计时需要注意，若消息列表中存在系统类消息并且可以进行交互，在设计时可以添加向箭头、红点提示等方式告知用户可以点击，如果该功能有数据指标，这种方式也同样能赋能产品指标。
实际产品中的案例
目前市场上产品几乎都有深色版本，我们在设计时深色版本的颜色时需要注意饱和度的高低，同样的饱和度在黑色背景上会比白色背景上更加亮，这跟人的视觉感官有很大的关系，因此我们在做黑色版本时需要注意是否调整饱和度。
左侧为什么错？？
在黑色背景中使用过高的饱和度会刺激眼睛，很多深色版本都是从白色模式通过反向颜色直接调整，而彩色元素会直接运用到深色中，那么就会造成一个问题，因为我们习惯在白色模式下看颜色，忽然切换到黑色中看彩色刺激程度非常高“就像黑夜中忽然打开手电筒”，对眼睛的伤害很高。
建议正确做法～～
我们在设计深色版本时可以根据产品主色降低饱和度，包括图标等元素，以此来缓冲对用户视觉感官的刺激，目前很多大厂的处理方式是直接在彩色元素上添加一层黑色透明遮罩进行处理，这样无需在添加更多的颜色规范。
实际产品中的案例
在设计模块或者页面时不建议使用特殊字体来突出文字层级，这样会导致视觉不统一，以及开发成本增加。
左侧为什么错？？
左图中灰色字使用了特殊字体，看起来虽然好看，但在实际开发中会导致开发成本增加，我们产品一般使用的是系统字体，若使用特殊字体需要让开发同学添加对应字体包，这样会导致我们的产品包的内存过大，除非产品中默认一直使用该特殊字体，这样才有使用的价值。
建议正确做法～～
一般系统字体就能够满足我们的设计需求，在UI设计中我们可以通过不同的字体粗细来调整文字层级，这样能够保证视觉更加统一，减少产品包大小。
实际产品中的案例
在设计时需要注意多个入口在同一位置时，需要把它们进行层级划分，避免影响用户决策
左侧为什么错？？
图中可以看到，两个面性按钮非常明显的在模块中，当用户在浏览页面中很容易出现困惑，到底需要点击哪个才能购买预定，因为两个都是面性无法快速进行定位入口，这样不仅影响用户决策效率，还会影响产品点击率。
建议正确做法～～
建议设计类似模块中时，无论是pc还是移动端都需要对入口进行结构划分，这样能够使用户在浏览页面时快速定位到入口，提升决策效率，做体验是解决用户的思考时间。
实际产品中的案例
在UI设计中使用图标时，要保持一致性，确保他们共有相同的视觉风格，相同的重量，填充和描边。不要混搭。
左侧为什么错？？
可以看到左图中的图标并不统一，线性里面掺杂着面性点缀，这在UI设计中严重违背了一致性的原则，会导致我们的页面不够严谨专业。
建议正确做法～～
在设计图标时，首先要保证图标风格一致，其次在这个基础上保证图标的描边粗细、视觉占比重量、颜色等，不要出现混搭风格。
实际产品中的案例
在设计页面模块时，可以多利对比度的方式来体现设计的表现力，鲜明直接的色值能够直接表达事物的性质以及特点，通过对比，也能够更加清晰的强调设计中的重点，这样给用户的印象会更深刻，同样会给产品带来一定的趣味性。
左侧为什么错？？
左图中单看视觉也没问题，只是在表现上图标与背景融入到一块了，导致视觉表现力较差，在设计中如果符合产品风格的前提下，我们可以避免这种方式，这种方式虽然具有视觉效果但不够强，对用户的记忆点不够深刻。
建议正确做法～～
设计到类似的模块时我们可以利用对比的关系，以此突出视觉元素，通过颜色焦点引导用户关注，强化用户印象同时还能增加页面的视觉表现力和氛围感。
实际产品中的案例
在设计图文叠加的卡片或者页面时，我们需要注意不同明度的图片上，文字识别是否有阻碍，一般情况会通过遮罩方式避免这个情况。
左侧为什么错？？
左图中在深色图片下字体的可读性是没有问题的，但当出现文字底部区域的图片相对复杂时便会影响识别，第二种情况当图片明度过高时文字同样无法识别，试想一下，一张白色调性的图片上放文字，那基本无法看清，严重影响阅读体验。
建议正确做法～～
在界面设计时如果遇到类似的卡片，建议在文字区域添加渐变遮罩的方式，以此保证文字的识别度，或者添加纯黑色透明遮罩进行处理，这样可以兼容不同环境的图片与文字的重叠，保证基本的阅读体验。
实际产品中的案例
UI设计中经常会遇到弹窗，弹窗是需要配合页面遮罩来让用户进行专注操作，不同的遮罩透明度所带来的专注度也不同。
左侧为什么错？？
左图中我们看到，遮罩的透明度过低，我案例设置的是17%，此时弹窗内容与页面内容结构上区分并不是很明显，一般弹窗是用来让用户跳脱页面内容，从而浏览弹窗内容，转变用户目标，当弹窗无法聚焦时便很难达到目标，并且视觉上层级更加混乱。
建议正确做法～～
右图中案例我把透明度调整到了37%，我们此时再看弹窗很容易就忽略页面内容，因为灰色越高，遮挡度越高，用户跳脱感就越强，这样我们可以让用户专注弹窗内容，同时视觉结构上也区分很明显。
实际产品中的案例
企业多产品线模式下，UI体验文化打造、UI设计质量品控5个方面阐述项目快速、规模化提升多产品线整体体验中的方法论和实践经验。
SaaS 产品体验要求越来越高，用户体验已经成为产品竞争力的重要组成部分，怎样在多业务线的产品环境中做好体验设计，本文从贴合业务线的设计规范、敏捷易用的前端组件库、产品研发协作流程保障、UI体验文化打造、UI设计质量品控5个方面阐述项目快速、规模化提升多产品线整体体验过程中方法论和实践经验。
关键词：
用户体验设计；UI设计规范；多产品线；体验文化；UI设计落地
面对多产品体系，多产品线，需要积极寻找和探索适合我们客观情况的最佳实践，我们面临的问题有：
1.过往以功能堆砌为主、基本“能用”，缺乏平台规范和一致性，体验不足。
2.产品线多、体量大。
3.客户对产品体验要求越来越高。
4.产品历史包袱、修复改动困难。
5.对用户体验认知不一，协同、沟通成本高。
6.重复的开发成本。
7.第三方组件与业务的匹配度不佳。
解决以上几大难题，我们启动了UI 设计规范的搭建、UI组件库的开发等，让规范和组件库成为各产品线坚实底座的一部分，使用户体验文化赋能前端和产品经理，协同 QA 力量一起推动产品体验升级，以下整理分享的实践方法适用于中小型UED团队支撑复杂、多业务线的企业，本文尝试从以下几个方面总结和提炼实践经验，跟业界同行探讨。
设计规范体系的搭建对于新的团队，如何从复杂海量的业务场景中制定出一套适用于自己产品的UI设计规范，是第一道待翻越的高墙，完整的设计规范应该是包含视觉规范与交互规范，本文主要针对设计规范实践过程进行阐述。
贴合场景的设计规范：
虽然市面上已经有众多成熟的设计规范体系可供使用，但是当前我们所处的产品阶段、多业务 线以及复杂的业务场景等综合因素，决定了需要重新搭建一套符合我们自己业务场景的设计规 范体系。
UI规范效益最大化：
一旦我们决定制作规范，就要把规范当成一个产品去做。去梳理一套高效合理、可复用的制作流 程，去分析产出什么样的「规范产品」才能产生最大的价值。 依据规范效益模型，在规范的制定中尽可能的提高规范的通用性至90%，先解决统一性，再解决场景细分，打造高质量通用的模式库以提高质量和效率，并力求让更多人从这套设计体系中获益， 从而让规范体系发挥更大的价值。
UI规范制定的策略：
明确用户对设计规范的诉求，构建适合产品的UI设计规范，首先，需要明确规范体系的用户群体经过设计团队多轮调研，确定设计规范面向的目标用户群、基于核心用户的诉求，为后续规范内容框架的制定提供依据。
确定UI设计价值观：
产品历史包袱重，系统结构复杂，在提升用户体验时，内容表达「清晰明确」是第一要务，例如尊重已经形成的用户习惯，优化改造时，注意版本之间的衔接，让用户「清晰明确」，这也是为什么将「清晰明确」作为价值观之首，另外提升效率是企业级产品用户体验的永恒主题，同时兼顾系统的简洁与一致。
梳理UI规范框架：
UI设计规范包括设计价值观、全局规则、组件库、模式库、典型页面、移动端规范和设计资源框架整理主要从以下3个方面进行：
1.梳理现有组件，剔除不使用的部分 。
2.同类竞品的框架借鉴，查漏补缺。
3.场景验证，与业务场景深度结合经过充分论证和梳理，对规范框架做了重新定义，增补了业务缺少的内容。
如上图所示，例如对高频的工具栏组件的补充，典型页面的补充，增加模式库以及全局规则，当前第一个版本的规范框架是基于业务场景优先级最高的内容进行制定，更多的规范内容的增加依托于不断的迭代，逐渐完善规范框架。
规范内容的制定及评审：
组件规范包含：变更记录、组件定义、何时使用、组件的类型、组件的响应。
规范内容制定的原则：
1.有明确场景可依。
2.精简不必要的分支 例如在定义表单规范时，对于表单标签的对齐方式做了统一的约束，标签右对齐，输入框左对齐全局保持统一。
逻辑正确、规则明确易懂：
例如常见的alert （警告提示）名称调整为常驻提示，语义更贴合场景，便于理解。
规则的可拓展性，多场景的兼容性：
产品架构是PC端到移动端的自动适配，因此在组件设计的时候需同时考虑PC端与移动端的对应关系以及两端场景的兼容性。
协作及敏捷迭代：
规范发布后，伴随着实际项目的检验，业务场景的扩充变化，如何高效的对设计规范进行迭代，决定了设计系统能否持续的走得更远，规范内容定期评审，必须通过业务、技术、设计评审，确保规范是可用的、可落地并且易于使用的规范后期不同的规范模块专属人负责，同时有backup，可以帮助走查复盘双重保障规范的质量。
敏捷易用的前端组件库：
复杂的业务场景和多产品线特点，快速打造一套敏捷易用、高质量并符合实际业务场景的前端组件库，是提高产品研发效率、改善UI质量、提升用户体验的关键。
复杂的业务场景和多产品线特点，快速打造一套敏捷易用、高质量并符合实际业务场景的前端组件库，是提高产品研发效率、改善UI质量、提升用户体验的关键。
前端组件库建立目标：
1.提高开发效率，对高频使用、通用组件进行代码化封装，避免重复开发工作。
2.提高开发质量，通过各类业务场景和业务线的锤炼，沉淀组件代码最佳实践。
3.提高产品体验，组件封装代码化，减少在多角色协同中因为理解偏差、信息传递问题等导致的不确定性和结果不可控性，不同业务线、不行项目、共用一套基础代码，保证体验的一致性，组件的组织形式： 结合实际业务场景和原子设计理论，将组件划分为不同颗粒度：基础组件、业务组件、典型页面 组件，以适用于不同研发场景使用。
1.基础组件，基础组件为组件库最小颗粒度，构成系统界面的基本构件。
2.业务组件，在基础组件的基础上，结合具有共性业务特征的业务场景，梳理出具有业务特征的 业务组件。 3.典型页面组件，梳理具有业务特点的典型页面，相比基础组件和业务组件，典型页面更加具体， 为用户提供具有代表性的内容和框架，并准确描述用户最终看到的内容。如列表和左树右表典型 页面组件，作为最为常见的页面结构，各业务场景可复用页面组件，保证了页面组件内各基础组 件的一致性，最大程度的实现不同产品线产品中页面体验的一致性。
推进前端组件库落地执行：
前期设计规范落地到组件库过程中，面临诸多问题和阻碍，比如开发落地质量不高、内容遗漏、 各方理解不一致、验收及修复问题不到位等问题。处理这些问题对UI团队资源造成很大消耗， 通过总结复盘前期组件库落地时的经验和教训，梳理落地执行流程，在新的协作流程下，新一 批的组件开发不论在协作效率和开发质量上都有质的提升。
分层推进：
组件库开发是一个持续迭代的过程，考虑到组件库开发资源极为有限且无专职负责人员，在跟组 件库开发团队协同过程中，我们通过分步开发来解决组件库更新优化的问题并通过不断优化协作流程来助力组件库高效落地。
前端组件库分步开发原则：
1.优先级原则，优先开发适用于业务线普适场景的组件。
2.紧急性原则，对于急需的业务线所需组件优先开发。
3.快速可实现原则，开发实现成本高的组件暂缓处理。
自查走查验收：
组件UI责任人梳理出下属组件需开发落地的细节点，整理为文档，待开发人员完成组件开发后，自行参照UI提供的自查文档，查漏补缺，保障进入UI验收环节的前端组件不会出现较多的缺陷，降低后期走查和沟通修改的工作量，同时监督开发人员提高组件落地还原度和质量。
组件库的持续迭代：
UI团队通过一套标准的流程来把控组件库迭代的质量，在日常工作中经常会收到产品经理或项目 方提出新的组件需求或对现有组件的优化。UI部门作为推动组件库搭建的核心环节，需要以全局 和更深入的视角加以判断把关，保证前端组件库内容的普适性和高质量，避免组件库内容冗余， 降低研发维护成本。
产品研发协作流程保障：
好的过程是好的结果的有力保障，一个业务需求从产生到开发落地需要经过多角色协同、一系 列环节。必须依靠规范的研发协作流程，确保各角色清楚自己职责以及如何跟上下游衔接，同 时我们也希望协作流程能够确保设计资源可以向重点业务模块倾斜，以及发挥各个角色可以发 挥的作用去共同提升产品体验。
UED团队建立之初，我们面临的首要问题是：需求随机，完全取决于各产品线和产品经理 个人，为了解决这个问题，我们制定了UI融入研发体系的流程以解决合理、有效利用UI资 源的问题。
企业级产品特点、多业务线、大量面向管理员用户的具有相似页面结构和交互模式的业务 模块、产品经理跟交互团队人员配比等因素都决定了并非所有需求都需要流转到UI团队进 行设计，在判断哪些需求需要流转至UI团队设计时，我们给出了如下指导性方向：
1.用户量角度，大量终端用户使用的场景，例如订票、报销、采购页面 。
2.用户重要程度角度，核心、重要用户使用的场景 eg.公司领导、决策层。
3.通用性角度，通用组件或框架，需要UI通盘考虑各个业务线场景需求进行设计。 其他需求则主要由产品经理进行设计，UX以评审方式轻度参与。
协作流程迭代，UI验收成为必要一环： 随后我们又面临新的问题：设计还原度差，被公司老板生动的形容为：看设计稿是“精装修”， 开发落地后就成了“毛坯房”了。为尽可能确保设计还原质量，我们在研发流程中明确了所有涉 及前端页面的功能需求都需要在研发协同工具中流转到UI负责人验收，在产品团队TAPD中记 录UI缺陷、标明严重程度，对于 “严重” 级别以上UI缺陷，禁止发版。
UI工期评估合理化：
为了既能尽力配合各产品线迭代计划又要争取合理UI设计时间、保证产出质量，合理评估设计周期对UI人力管理尤其重要。对此，我们对设计需求分成了ABC三级进行评估。 对于A和B级需求，通常模块较大，先有UI设计方案再去分期迭代开发，对于这两类需求，在评估 模型中给出了大致工期概念，比如以月为单位，大于1个月或2个月。
对于C级需求，通常为产品经理先排进某个迭代再来提UI设计需求，设计范围相对明确，我们则结合典型页面数量因子和设计难度因子给出了UI工期大概评估公式，以天为单位。
1.设计难度因子：根据业务线的复杂程度而定，范围为（0.8~1.5）。
2.典型页面数量因子：评估需求范围规模（N）。
UI设计团队在协作过程中面临诸多挑战：产品线多、产品逻辑复杂、研发链路长、各级人员对产品认知及重视程度不一、好的体验设计难落地、沟通成本高等问题，想要解决这些问题，若仅靠UI团队自身力量是不够的，需要动员公司各个环节和人员重视用户体验，共同促进产 品体验提升。
搭建体验文化灌溉机制：
UI部门通过多维度的体验知识内容矩阵、多渠道多场景全员覆盖，普及和加深各级对产品体验 价值的认识，提升产品体验思考力和洞察力，帮助企业以新的视角思考业务、产品研发和用户 体验的关系，赋能产品经理及研发人员高质量的输出，“以用户为中心”和“打造产品极致体验” 的价值观根植与企业文化中，指导研发流程中各项工作最终影响到产品的战略层、范围层、结 构层、框架层和表现层这5个产品体验维度，以实现企业产品的“极致产品体验”目标。 通过搭建体验文化灌溉机制，提升全员体验意识，能为产品研发带来长久的价值：
1.提高设计还原度
2.减少培训成本
3.提升跨部门沟通效率
4.提升UI团队影响力
5.提升客户满意度
体验文化落地实践：
针对不同类型的体验知识，我们采取不同的传播渠道进行透，以期达到最好的效果，避免形式化， 将体验文化渗透、学习落到实处，最终影响产品研发的各个环节。
以下为UI团队在企业体验文化 推广的主要渠道和方法：
极致体验公众号主要发布产品体验的基础原理，体验价值、项目复盘、常见体验问题等深度长文。让公司各级人 员认识用户体验及价值，让用户体验理念深入人心。
体验知识小卡片整理产品体验小的知识点，阅读学习成本低。利用员工碎片时间，对细小体验知识点的学习，积 跬步，至千里。
直播宣讲针对重点且复杂的产品体验内容，如交互规范宣讲、重点问题复盘、产品经理及开发人员应知应 会的知识点，采用宣讲直播的方式，更好的对内容进行详细解说和疑难问题沟通。
体验调研分享UI部门成员对核心竞品进行体验调研，整理分析后对产品经理及相关人员进行分享，赋能产品经 理，为产品的体验设计提供新的思路。
UI团队专业水平一定程度上决定了公司产品体验的上限，持续提升UI自身专业输出能力可以从源头提升公司产品体验。
设计自查：
企业级产品的大量体验问题都是设计基础问题。因此需要设计师不论在内审前，还是内审过程中都要牢记设计原则，查漏补缺，守住底线。我们在部门内部制定了一套适合企业产品的UI自查表来检查设计方案，通过这些自查点来避免产品中出现基础体验问题，从UI设计师自己这里 把好第一道关。
在日常工作中，UI自查表始终占据工区的醒目位置。在评审过程中，大家也会通过线上文档的形 式来对设计原则的条目进行逐一检查。
做好UI内部评审：
设计团队内评审（Design critique）是几乎所有国内外设计团队的普遍、经典做法，可以有效提 高设计产出水平、保证团队对外输出质量。方法是普适的，但具体执行时如何做才能有更好的效果却各有各异。 在如何做好内部评审上，我们进行了如下尝试。 从“全员参与” 到 “组成内部评审委员会” 团队内评审时邀请全员参加，但发现只有少数同事发言，另外一些同事因资历浅、不了解评审产品或者积极性不高给不出建议。同时随着团队成员数量从几个增加到十几个，评审会议的时间成 本大大增加。
选取团队内相对资深和积极提出问题、建议的同事组成内部评审委员会，以月为周期轮流进行， 可以有效分散评审委员在团队内部评审上的工作负荷，并明确一次UI内部评审除了内部评审委员 会还有哪些关联同事需要参加。 关于邀请评审内容关联同事，比如“消息中心” UI评审跟另外一位同事负责的“讨论消息”有关联，则需要邀请这位同事一起评审，以便发现关联问题，整体考虑设计方案。
以上参与评审机制明确在团队内部协作工具上，做到人人清楚。另外，对于评审建议，要做到有 记录、有回应、有跟踪，确保有效发挥了内部评审的价值。
UI设计师的能力模型：不言而喻，UI设计师自身能力的培养是UI品控的重要一环。因此对于设计师能力培养通道上，我 们引入了以下模型。
我们将UI设计师能力归纳成了3x3能力矩阵。这可以设计师在工作中也可以有目的提升自身薄弱环节，同时也让企业对UI设计师的要求更加清晰，除此之外，我们要求UI设计师也需要多了解业务和前端知识，往前多走一步，跟上下游角色更好的衔接，一方面，UI设计师需要理解业务，要能够有半个产品经理的业务知识储备， 如果能站在更高的行业视角对自己所服务的业务领域（向 业务产品经理再迈进一点）有一定的理解是更好的了，另外一方面，UI设计师跟自己的下游-前端 开发工程师也需要很好的衔接上，知道相关前端技术概念、基本页面布局和交互实现逻辑、方法，能够无缝地将界面和交互设计翻译成前端可理解的语言。
2022 原创输出第 15 篇，我们互相努力。
作为设计师都会时刻关注设计趋势，以 UI 设计来说每年都会出现很多相关的趋势总结，基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向，带给用户更好的感官体验。
最近黑马哥结合落地产品所呈现出来的设计趋势，进行了这方面的探索，今天以其中之一的趋势-极光风和大家先聊一聊。
一、极光风趋势的来源
二、UI 场景中的极光风设计
三、实现极光风设计的方法
四、极光风案例实战
五、小结
极光（Aurora），是一种绚丽多彩的等离子体（发光）现象，在夜间出现灿烂美丽的光辉。在南极被称为南极光，在北极被称为北极光，视为自然界中最漂亮的奇观之一。（来源于百度百科）
这样的自然奇观被摄影师捕捉到静态的影像中，设计师再结合这样的影像作品，视觉化之后出现在了一些设计作品中。在 2021 年被广泛运用，形成一种流行的视觉风格。在众多的互联网产品设计中，也经常运用这种类似极光的视觉影像风格，称之为 Aurora UI。
在产品设计底层需求获得满足之后，感光体验的提升被重视，视觉感的强化对 UI 设计师来说至关重要。基于不改变本身的结构层，在背景层和装饰性元素上面发挥，使得 Aurora UI 得到了发挥的空间。
富有创意的极光风在背景层和装饰性元素上面发挥得淋漓尽致，助推了其成为 UI 设计趋势的关键，下面就让我们一起来看看落地产品中的 Aurora UI。
由于在众多落地产品中被广泛运用，形成了近些年影响 UI 设计趋势的风格。极光风和弥散光在表现形式上类似，也有设计师将该风格归类为弥散光，下面就看一下具体的运用场景。
2.1、强化导航栏设计的视觉感
如果想要强化顶部导航栏的视觉感，通常是利用品牌色作为背景颜色，这样也会显得顶部比重较大。通过白色或者浅灰色作为背景属于比较弱化的处理方式，而极光风的处理形式处于轻重之间的理想状态。不仅可以丰富视觉表现力，也能使得整体风格更加年轻化。
2.2、强化个人中心顶部视觉区域
随着互联网用户年轻化的趋势，在配色上面逐步趋近于年轻化，众多产品在个人中心界面的设计上面亦是如此。利用极光风效果呈现出的设计比较符合年轻化的趋势，可以是同色系的饱和度变化，也可以是不同色相的相互融合。利用低饱和度高明度的配色原则，使得整体的视觉感更加轻量化，视觉效果清新自然且通透力更强。
也有基于品牌色结合极光风进行融合，相对单色来说效果更加丰富自然，使得背景的变化更加多样。
2.3、丰富背景设计的视觉感
除了在顶部区域进行运用以外，也有一些产品会在背景层面进行强化，相较于白色或者浅灰色的背景来说色彩感更丰富。运用到整个界面背景层相对比较少，在局部背景层上的运用比较多些，可以强化局部模块的视觉感。
2.4、点缀弹窗设计局部
极光风的设计表现也会出现在一些局部功能的细节处，比如运用到弹窗的色彩处理中，作为背景局部或者插画部分等的衬托。带来的视觉感更加亲和自然，也不会过度干扰其他元素的呈现。
2.5、强化卡片式设计局部
卡片式设计也是近些年运用比较多的设计趋势之一，基本是以白色卡片居多，具有整合信息的好处。在卡片的边缘位置强化色彩，可以使得卡片色彩更加丰富，也有一些电商产品是起到与商品形成色彩呼应的作用。
2.6、突出搜索设计的差异化
搜索框的设计在大部分的认知里面都是白色或者浅灰色，也有一些是带有边框的形式，利用低饱和度高明度的配色原则来进行设计，带来的效果更加年轻化。也是一种差异化设计的尝试，打破常规的设计认知。也可以举一反三，在一些按钮或者标签设计中运用。
2.7、分类标签的装饰设计
这是一个装饰性的设计尝试，在突出模块分类的当前状态时，通常都会通过装饰元素来进一步强化。可以通过字体粗细、颜色深浅、字体大小和装饰元素来强化，装饰元素除了线段和一些图形元素以外，极光风的背景元素也是一种不错的表现手法。
2.8、图标设计中的运用
运用到图标设计中通常是出现在质感类图标，辅助强化图标的色彩感和层次感。有时候无法通过常规的渐变形式达到要求，就可以尝试运用极光风的处理技巧，将颜色通过模糊和剪切蒙版的形式融入到图标中，可以使得图标色彩丰富和强化光影变化。
2.9、深色卡片色彩强化
以上案例属于在浅色或者白色的环境中运用，在深色主题中依然会用到极光风进行设计强化。在界面背景和卡片背景中运用，效果也是非常不错的，可以给深色的卡片一些色彩感和丰富度。
2.10、作品包装中的背景强化
除了在 UI 设计场景中运用以外，最近发现在设计师作品包装中的运用也是非常普遍，用于背景层的渲染带来的视觉体验度也是非常不错的。在作品包装环节中作为背景运用和局部装饰，也有在封面设计中重点运用，使得作品集紧贴设计趋势，提高作品的打开率。
2.11、其他场景中的应用普及
在 UI 场景还有很多运用场景，这里仅为抛砖引玉，无论是作为背景强化还是元素装饰，都能带给用户更加年轻化的感官体验。
除了在 UI 场景中呈现以外，极光风的设计也会出现在更多其它场景中。在 Banner 设计、海报设计、专题页设计等视觉设计层面也是运用广泛，是一个影响范围比较广的设计趋势之一。
通过一些线上的案例欣赏和分析，相信大家对于极光风在 UI 场景中运用都有一定的了解，在项目设计中也能轻松尝试。这一类风格从技法实现的角度来说并不难，关键因素在于控制好配色原理，下面就为大家总结几种实现的方法。
方法 01 ：利用不透明度渐变融合
不透明度渐变在设计中的运用比较普遍，利用的是不透明度从 100%-0% 之间形成渐变，让色彩逐渐消失或者淡化。
画一个圆形，选择径向渐变，渐变两端的颜色选择同一个色相。然后设置中间颜色不透明度为 100%，另一个颜色不透明度设置为 0%，这里颜色适合选择低饱和度的范围。同样的方法反复绘制几个不同颜色的圆形进行组合，即可完成极光风背景设计。
方法 02 ：利用模糊度变化融合
这个方法是结合了形状和模糊设置（高斯模糊等），绘制几个大小不等的圆形进行排版组合，然后选择所有圆形一起进行模糊设置。形状的绘制上面最好是有大小差异，排版错落有致，这样形成的效果比较富有变化。
在颜色的选择上面需要根据背景的强化程度选择，低饱和度的颜色融合性更高，适合作为弱化性质的背景使用。
方法 03 ：利用背景模糊融合
背景模糊在 Sketch、Figma 等设计软件中有该功能，是一个影响设计趋势较为常用的功能，特别是在实现玻璃质感和一些质感图标上面非常实用。
在背景层绘制图形，颜色和形状均可自由发挥，然后再绘制一个形状作为调节层，调节层是用于控制模糊效果的。在调节层的形状上面设置一个带有透明度的颜色（必须要带有透明度），然后再设置背景模糊，背景模糊数值的大小决定模糊的程度，不透明度的大小决定整体效果的亮度。
方法 04 ：利用图片模糊融合
以上的方法都需要进行配色处理，如果色感方面比较薄弱的设计师，也可以挑选一些不错的图片来实现极光风效果。
挑选一张色彩符合要求的图片，然后在 Photoshop 等设计软件中执行高斯模糊，半径值的多少决定了模糊之后的自然度。我们在选择图片的过程中除了整张图片进行操作以外，也可以截取其中的一部分，也许可以带来意想不到的效果。
除了这几个方法以外还有更多不一样的实现方法，大家可以根据自己的探索选择最适合自己的方法。根据使用软件的差别选择最简单的形式，根据想要实现的效果选择最灵活的方法，这样才能便于后期的反复调整。
五、小结
研究落地产品的设计细节和视觉趋势，将有助于提高我们对于当前有效设计趋势的把控，而不仅仅只是停留在概念化的预测阶段，而是行之有效的真实案例。
极光风是近些年运用在落地产品中的 UI 设计趋势之一，通过大量案例验证之后的有效方法，希望大家能够掌握并灵活运用到项目设计中。落地产品的 UI 设计趋势还有很多，本次分享的仅为抛砖引玉，后续将和大家探讨更多的有效设计趋势，辅助提高我们的设计能力。
作者：黑马青年（vx: heimaux）
本文由 @黑马青年 原创发布。未经许可，禁止转载。
搜索框的设计并不简单，很多的细节需要设计师去注意和思考的。下面总结一下我在设计搜索框的经验，分享给大家。
你可能认为，搜索不就是一个矩形框+放大镜图标再加一个占位符不就搞定了吗？
经过多年的设计工作频繁设计搜索功能后，我发现在不同类型的产品中搜索框的交互方式、视觉样式都有所不同，且用户在搜索前、搜索中、搜索后都需要注意用户在搜索各个流程中的可能操作，包括正向流程、反向流程。
搜索框的设计并不简单，很多的细节需要设计师去注意和思考的。下面总结一下我在设计搜索框的经验，分享给大家。
友情提示：文章尾部有福利相送，不要错过~
搜索是用户将查询的信息输入搜索器中，搜索引擎就会在约定的规则下将获取到的信息反馈给用户的过程。
搜索是B端产品中非常重要的一个功能模块，通过搜索框用户可以快速找到或者筛选出自己想要的内容，在引导用户走向方面起到了绝对性的作用。
体验设计中有个概念叫用户分层，即便是同一个页面，我们也需要去细分不同的场景对用户做分层，为不同的用户做设计，搜索功能就是最好的为有明确目标的用户分层的设计。
搜索功能的用户分层可分为几种场景：
搜索首先要确定哪几个字段可以被搜索到，名称？编号？等等...
有明确目的型用户在进行了搜索这个行为后，便生成了搜索历史。因此，我们可以通过挖掘用户搜索行为背后的目的，来分析为什么使用不同的布局。
模糊搜索使用的频率居多，毕竟有时候用户不一定可以精准的记住想要搜索的准确信息。不过也不是绝对的，两者皆可选择，可根据产品场景选择。
搜索功能可以简单地输入，快速输出，只要几个关键字就可以获得符合用户需求的内容，将原有的用户行为成本转移给系统，从而让使用体验更加快捷、轻松。
同时语音输入和拍照搜索进一步降低了用户行为门槛。
搜索功能可以帮助用户快速定位信息，从而提高了用户对内容的触达效率。常见的例子就是：bi r用户有明确的购物需求时，不需要一步步点击商品分类，选择商品类型、品牌等信息，就可以快速直达自己所需的商品。
所以，搜索框的体验如何，决定着B端产品解决问题的能力、效率以及用户的使用频率。
好的搜索框一方面能帮助用户节约时间成本，让用户在大量且复杂的信息中筛查所需目标，提升用户体验；另一方面，还能协助产品收集用户行为目标并做好数据埋点，为后期的更新迭代提供强有力的依据。
除了设计方式外，搜索还涉及到结果信息的数据匹配规则，受到算法精准性、商业化干预程度的影响，设计师同样需要关注搜索结果如何更好地匹配用户的精确搜索、模糊搜索需求，以从信息设计层面提升用户体验。
搜索流程，即搜索前、搜索中、搜索后的页面跳转以及搜索框形态的变化。
对应的就有：搜索入口——搜索推荐页——搜索联想页——搜索结果页——搜索结果页返回。
设计师想要设计流畅的搜索体验是无法避开梳理搜索流程的，考虑完整的搜索链路和用户关键体验路径，并且设计出对应的所有细节，将搜索功能的价值发挥到最大化。
对于搜索系统来说，整个流程可以分为三步，分别是：
B 端业务中搜索使用的场景有两类：一类是全局搜索，一类是页面局部搜索（常见的有列表搜索、表单搜索）。
对于B端系统中模块分类较多，所涉及到的内容比较全面的，一般会选择全局搜索，全局搜索是通过关键词匹配全局范围内的信息来搜索的。
优势：无学习门槛，用户无需考虑内容对应的分类只需输入关键词；
劣势：精准度不够高；搜索出来内容泛；需用户二次查找目标内容。
注意：设计全局搜索时要注意搜索后的结果展示逻辑，如果分类较多，界面还可以根据分类tab分别归类不同。
tips：搜索功能在页面中的重要程度及搜索范围，决定了搜索的位置和样式。
目前大部分网站在布局搜索框位置时，大致遵循以下几个规则：页面居中、页面顶部居中、页面顶部右边、页面顶部左边
知乎的搜索入口位于顶部导航栏的显著位置，引导用户进行搜索，并且搜索框内的占位文字根据算法会间隔一段时间改变，引导用户发现新的内容，促进用户在知乎上的使用时长。
最常见的搜索方式之一，将搜索以输入框的形式居于页面顶部（状态栏或标题栏下方），在视觉上非常醒目，用户进入应用即能快速找到，很符合用户的视觉浏览动线，也是C端产品提高转化率的流量入口。
形态相对比较简单，通常以“放大镜”样式的 icon 出现在界面右上角，视觉上不会过于突出，常用于搜索行为不是特别频繁的场景，需点击后才会跳转至搜索框页面。
Icon 搜索入口相较于上述提到的类型在视觉引导方面略逊一筹，相对弱化了搜索功能，但节省了更多的导航栏空间，呈现位置比较灵活，可单独呈现、也可与其多个其他功能 icon 并列组合展示。
指的是在页面中的某个模块加入搜索的功能。
常见在数据列表页面加入搜索的功能，搜索的目标只在该模块该内容中进行搜索，搜索的信息具有局限性，当然也是更加准确地搜索用户想要的目标信息。
下图是一个美团商家后台的列表页面，此页面加入了搜索的功能。
另外，B端常见在表单页面加入搜索的功能，搜索的目标只在表单选择内中进行搜索，搜索的信息同样具有局限性，可以通过控制某个字段或者某几个字段的信息来展开搜索。
B端业务中复杂的场景中存在同一个页面中有多个搜索入口（如上图美团），设计前需梳理清楚每一个搜索入口的交互逻辑，不同搜索入口覆盖的搜索范围、搜索过程、搜索结果是否一致，在占位文本上也需体现出该搜索入口的搜索内容。
模糊搜索是用户搜索意图不明确时，将用户的查询与待检索的内容进行模糊匹配。
模糊搜索无法精确理解用户的查询意图，搜索结果可能有大批量用户不想要的信息，使用模糊搜索时一定要结合实际场景，慎重使用。
优点：只要有相关的内容都会被检索出来，减少了精准搜索带来的记忆负担；
缺点：容易把相关的信息也带出来，例如检索186，把相关号码也匹配出来。
精确搜索是指用户在搜索时，针对某一数据字段搜索，来查找所需要的数据。
根据业务场景不同，我们会查找某一字段，或者是用标签切换不同字段来查找。可以帮助用户在巨大的信息池中缩小目标范围，快速而准确的定位到目标数据，并速获取需要的信息。
优点：搜索匹配精准度高。
缺点：每次只能对单一条件进行搜索。
总结：
我们可以根据产品的发展阶段、需求侧重、用户的专业度和使用习惯来综合决策使用哪一种方式更合适。如果侧重查询效率且用户是有专业门槛的使用者时，可以优先考虑精确搜索；如果侧重查询结果的丰富度，可以优先考虑模糊搜索。
基于搜索栏的表现形式，可以分为以下四种类型：单属性搜索、切换属性搜索、多属性模糊搜索以及多属性组合搜索。
类型之间没有优劣之分，根据业务场景使用对应的类型即可。
单属性精确搜索：通过某个特定属性就可以快速定位到目标数据，具有唯一识别性的、高使用频率的、对用户决策有意义的。
适用场景：表格单一数据信息特征突出，可以用此数据标签快速定位目标数据。
切换属性搜索也被称为定向搜索，是由用户主动选定搜索范围后再进行搜索；
优势：搜索精准度高。
劣势：增加了部分用户的学习成本及操作步骤。
适用于注重搜索结果的精准性或展示产品搜索能力等场景，定向搜索适用的几种场景：
a、产品数据量足够大且重搜索功能，用户对于搜索有明确目标，定向可以帮助用户提高搜索的精准范围和效率；
b、搜索时输入的内容无法通过同一套搜索交互方式和后台计算逻辑承载；如单次搜索和批量搜索的输入格式不同，搜索结果存在多样性；
c、需外露产品亮点功能，有多个常用的搜索属性，对于前置条件的数据计算能力和开发成本更高。
明确并固定选项类别，降低用户操作难度。下拉筛选适合的选项类别有限，不适合多类别、复杂维度的分类。
平铺展示搜索条件内容，每个 Tab 标签代表一个筛选维度，操作便捷。Tab 标签的数量不宜过多。
B 端类产品数据量丰富，在实际使用时，简单的方式很难全面覆盖到各个搜索场景，精准定位搜索结果。所以通过多个筛选维度的结合，形成多属性的组合搜索，能够大幅提升搜索结果的准确性。
B端系统还有一种比较常见的搜索类型，是在定向搜索的基础上，进一步丰富了搜索选项，比如指定搜索的时间范围、数据类型等，设置的选项越详细越能够提升搜索结果的效果和准确性。
在设计时需要注意，B 端系统用户角色多，层次不同，所以更加需要注重搜索前的引导，针对搜索规则、搜索限制等，应该适时的以简练易懂的语言提示。
多标签模糊搜索：表格多个数据都具有特征，往往业务要求对数据的精确度较高。
适用场景：业务类型多样用户可能记忆不精确且有多个数据特征，对搜索的便捷性要求高精确性要求低。
多属性组合搜索：可以输入多个字段进行组合搜索（取并集），对空间的利用率高，适合更加复杂的列表内容。
适用场景：综合筛选项，对空间的利用率高，多标签组合搜索可以得到较为精准的搜索结果。
聊了这么多搜索内容，与设计师密切相关且对外输出的首要就是搜索栏设计。
对于用户来说，搜索是为了解决用户明确或者不明确的搜索需求，让用户能够快速准确搜到想搜的内容。设计栏设计的目的就是，让搜索能够提高用户获取信息、内容的效率。
常见搜索框设计样式
1、填充色：通常选用与页面背景颜色反差较大的颜色作为搜索框的填充色，方便用户查找。
2、线框：多用于干净简洁的背景页面。
3、投影：常用于风格简洁轻量的风格页面，同时搜索功能级别较高的场景。
4、透明度：常用于背景色复杂的场景，目的是为不破坏背景页面的整体效果，在视觉上更和谐。 无外框：用于风格简洁的大留白的页面。
完整的搜索流程包含了各种细节：例如搜索栏的形式、光标停留、输入状态、异常数据、搜索结果、二次筛选等等。整个过程包含很多交互的细节设计，下面从激活搜索栏、输入反馈、触发方式来展开说明。
搜索激活指用户激活搜索框时出现的搜索下拉面板，B端业务中搜索激活内容常见以下三种：
搜索记录通常以标签或列表的形式显示，以时间顺序从新到旧排列，一般不会完全展示，可以滑动查看更多，或者折叠展开。
注意：搜索记录会涉及对用户行为的记录，关系到用户的搜索隐私，所以应当允许用户手动删除。
在 PC 端产品具有页面空间优势，用户的搜索过程完全是通过搜索栏完成的。
搜索栏中会增加历史搜索记录，下方增加推荐关键词，帮助用户快速完成搜索。同时也可以唤醒用户对某些商品的兴趣和记忆，从而挖掘用户潜在的搜索需求，这一点电商产品用得偏多。
在面板中展示“搜索历史”和“最近浏览”，增加相关内容曝光，去给用户提供更多选择以触达目标内容，该交互形式通常出现在全局性搜索或多维度搜索功能中。
搜索发现是系统基于用户的搜索记录，依据算法向用户展示的搜索关键词推荐，但并不是必需模块，可以基于产品定位进行考量。常规的c端产品上用得多，B端产品用得少。
由于搜索发现也涉及用户隐私，但应用一般不会让用户直接删除，所以应当允许用户对搜索发现进行隐藏，不然极其容易引起用户的反感。淘宝、京东都有搜索发现，并且也允许用户进行关闭/显示的操作。
热门推荐是搜索推荐页里面内容推荐的总称，可以演变成多种推荐形式，比如“热搜推荐”、“推荐活动”等，热门搜索是应用商业化的重要手段，许多应用都有这种模块，并且内容形式多样。
知乎的热搜就是结合热搜、时事热点等进行推荐。
搜索反馈指用户输入本文时未确认搜索执行的中间过程状态。在B端场景下搜索反馈具备很强的引导作用给予用户当下的状态提示；
是通过已输入的关键词来预测可以找到的搜索结果，为用户创造更加便捷的体验。
搜索联想承载的不止显性的设计呈现，还有背后的算法逻辑；例如是否可以识别拼音、不同搜索方式呈现的联想词范围，都需要提前确认落地可行性后再统一定义相关交互规则，并在产品中的所有搜索场景中保持相同的交互逻辑。
用户在搜索时输入了错误的词汇，系统经过判断后会展示正确词汇的搜索结果给用户，并友好地告知用户正确的搜索方式。特殊状态包含无结果状态、网络不佳状态等。
实时搜索+实时显示；搜索只有一个文本输入框，没有按钮可点击，这样的搜索交互是通过输入关键词后，系统自动检测所有内容中符合关键词的目标信息，随着关键词的持续输入，与之相匹配的结果会逐渐减少、直至找到目标，类似自定义筛选功能。
这种交互一般对于数据信息比较少的情况下会比较友好，加载的速度更快，避免服务器的压力太大、影响反馈效率，例如地址搜索、查找联系人等。
关键词输入完成后，需要手动点击搜索按钮向服务器发送指令才会得到相应的搜索结果，这种方式适合大部分表格场景，更加适合B端产品复杂且庞大的数据场景。
搜索结果页是用户搜索的落脚点，在这个页面，用户会有目的性地浏览搜索结果。
搜索结果中隐含着搜索逻辑，全局搜索场景下多数为模糊搜索，即把与搜索关键词详尽的内容页反馈出来，匹配度低，需要花时间对结果二次筛选。
1. 快速浏览数据，并能够准确找到数据。
2. 需要经常变换条件的组合迭代查询数据，对查询结果精准定位。这就需要搜索结果后，不要清除用户的查询内容。
3. 对数据进行操作，如收藏、删除、下载等。
不同的内容需要不同的页面布局来支撑的，b端场景中最常见的两种布局，筛选上下布局和左右布局，当然内容部分又分列表布局和栅格布局。
1、凸显关键信息：
为了便于用户找到精准高效的信息或者进行便捷操作，在搜索联想页状态时，当用户输入的信息足够清晰可预测，可以将关键信息凸显呈现，以引起用户的注意力，在进入搜索结果页之前就可以提升转化的可能性。
此外，这种关键信息凸显的形式，在搜索的商业转化方面也有明显的作用。
2、没有结果，如何设计
搜索没有结果会让用户感到非常沮丧的，尤其是当用户进行了好几次搜索之后，依然没有结果，应当为他们提供有价值的替代品。
一般出现无结果的状态有两种情况：
a. 用户输入错误，一般会提用户正确的搜索方式，并且自动帮助用户纠错，
b.搜索结果无，这种情况一般设计会以空状态提示用户，采用友好的方式提醒用户更换关键词。
在使用中，搜索本身应该是0思考成本的，否则就失去了索引的核心价值，基于此，总结一下5个设计注意点：
当用户输入搜索文本，点击搜索按钮，就进入了搜索结果页流程，此时搜索框内应当保留搜索文本，以便于用户明确搜索的内容（不要依赖用户的记忆力），同时，也便于用户再次编辑搜索文本。
考虑到输入/清除的便捷性，应用也应当提供一键清除按钮，点击一键清除搜索的文本，减少用户的操作成本。
搜索项目不可避免的比较多时，可以进行分类展示，降低寻找成本，常用的有两种分类方式：
无效的自动建议让整个搜索体验降低，而精准的自动建议会让整个体验好上许多，它会根据用户用户的输入内容（词汇词根和后台数据）为用户提供有用和精准的输入内容建议，这有助于帮助用户提高搜索过程的精准度，提升整个搜索体验。
输入错误绝对是最常见的错误，如果用户错误地输入某个关键词，而你的检测到了，并且针对错误提供更正之后的结果，这样就成功的规避了因为错误的关键词所导致的不良后果，用户也不用再次进行搜索了。
即使用户熟知搜索引擎的全部功能，也需要借助大脑记忆来挑选关键词，进行搜索。
想要找出有意义的、可用的搜索关键词搭配，用户需要结合他们的搜索方向，最近的查询，联想相关的属性和关键词，使搜索体验更便捷流畅。
总结
搜索是我们日常中频繁接触的功能，看似简单，背后都隐藏了很多流程与逻辑，不建议设计师盲目遵从原型依葫芦画瓢。
设计师更应该在设计之初从业务类型、功能定位、使用场景等多维度综合分析选择，从交互体验层面去深思搜索功能，因为搜索除了数据匹配精准度、搜索内容广度之外，搜索体验的便捷性也会影响用户搜索的感受。
每一处细节背后的设计思路就变得尤为重要。
本文总结梳理了搜索功能，从搜索基本属性、应用场景，到搜索分类，再到搜索栏设计，都进行了阐述，最后再总结了搜索设计的一些注意点。希望你能够帮忙理解搜索功能的设计。
作者：三原设计社
链接：https://www.zcool.com.cn/article/ZMTUzOTE0OA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
本文将从对当下常见banner的设计规则等进行剖析，并融入自己的思考和总结，着重从用户的角度去思考一张banner广告的设计规律。
你一定也发现了，在这个时代下只要处在同一赛道的产品，大多数免不了日趋同质化，不论是功能还是形式、内容还是算法。就拿内容型产品来举例：去掉颜色，以下四个产品的首页，你能分得清谁是谁吗？
虽然可以做品牌差异化，但很多产品在招牌打响前，也会经历相当漫长的一段成长期。而在大家都卷的分不清谁是谁的时候，通过趣味性来建立情感链接倒是一个独辟蹊径的狠招。
之前在团队有幸负责过一次产品趣味性的探索，虽未全部落地，但沉淀了不少经验。今天，我将这些经验以文章的方式分享给你，希望对你有所启发。
为什么产品需要趣味性
1.符合本能需求
马斯洛的“需求层次理论”（Hierarchy of Needs）你一定听过。这个理论提出人类的需求状态是持续不断的，一段时间内，个人的动机或许可以获得暂时性的满足。但从人的成长角度来看，人类的需求永远不会止步于一个阶段。类似的还有亚伦·瓦尔特基于此提出的需求层次理论——有用的、可靠的、可用的、愉悦的。在满足了温饱阶段后，自然会需要情感的满足。
尤其现在这个相对严峻、内卷成风的时代下，大家都渴望在上了一天班之后，自己用的产品可以给自己解压，而不只是个单纯的冷血工具。
2.影响用户行为
产品传达趣味性的信息，那么这些信息便更容易被用户接受、甚至激发兴趣。正如用户关系和精准化运营的先驱——史蒂文·贝莱格姆的那句话：“趣味是设计产品中最人类化,最直接,最能引起人们兴趣的因素。”
根据艾达模型这个经典理论，一旦用户对某件事产生兴趣后，则更容易促成他的决策、乃至最后行为的发生。毕竟我们绝大多数的决策并非源自理性。
另外，《疯传》这本书提及过一个重要的概念：情绪唤醒。当情绪唤醒度较高时，往往会更容易激发用户的分享行为（比如愉悦、惊喜这样的正面情绪，当然也会包括愤怒、恐惧这样的负面情绪）。而产品所呈现的趣味性，很大程度上更容易引发用户的高唤醒情绪，从而主动采取一些产品希望他实施的行为。
3.缓解负面情绪
使用一款产品的过程中，必然会出现不够正向的反馈，比如404、断网、填写格式错误、输入隐私信息等等。一旦超出了用户的容忍能力，很容易造成行为中断甚至流失。
但此时如果通过一种趣味性的方式呈现，很大程度上可以缓解用户的负面情绪。
比如readme的登录页面，当你输入密码时，猫头鹰捂住双眼，很好得缓解了用户的不安全感。再比如饿了么，恶劣天气下会实时记录当前的天气状态，通过同理心的触发也可以缓解用户等待时产生的焦虑。
4.实现情感链接
对应诺曼在《情感化设计》中的「反思层」，通过品牌差异、独有内涵等方式来唤起用户深层的记忆和情感，产生情感共鸣，从而形成认知，建立起深厚的情感链接，以让用户越来越忠实于产品。此时产品作用更多的是作为一个承担情感的载体。
我们旅游时经常会购买一些貌似没什么实用性的纪念品，明信片、木雕、徽章等等，可能最多只能放在房间当装饰。但是纪念品的关键意义，在于承载着旅游时的记忆。类似的还有单机游戏发售时，除了标准版外，往往会同步发售包含手办、美术设定集等物品的豪华版，同样用来承载玩家的情怀。
最典型的例子，就是Google的Doodle设计，在不同的节日、纪念日、或者缅怀一些先驱、艺术家时，会投入很高的成本起设计各种趣味性的插画logo，丰富有趣，而且很多时候可以支持互动游戏。比如18年的万圣节，就做了一个有趣的多人对战的小游戏。
Doodle不仅是Google文化、价值观的象征，也通过这种趣味性的创意让用户实现更深层次的情感交流，建立情感纽带并增加粘性，不会轻易得流失到其他替代品中。
趣味性是什么
关于这个概念，有三条相对客观专业的说法。
德国古典哲学创始人康德《实用人类学》中，指出趣味性是人类由于受到外部环境的影响而对客观事物产生的直接的感性反应，不具有普遍性和必然性。通俗来讲是人们对身边的事物感到新奇、有趣、有意思，从而心理产生愉悦的变化。
另外，康德在《判断力批判》也指出，趣味是指主体以积极主动的姿态，在超功利的层次上对某一对象表现出喜爱和愉悦的情绪状态。
《汉语词典》将趣味释义为：使人感到愉快，能引起兴趣的特性。
看似各不相同，但根据这三个概念提炼下，可以发现他们都是在融入一种正向的情绪加以解释。
那么，趣味性背后的情绪到底是什么？
趣味性背后的情绪
情绪这东西千变万化，为了避免主观臆断的不准确，我搜罗了关于情绪的研究资料，目前相对权威的有三个：plutchik情绪轮、日本感性工学、诺曼的三层理论。
后两者未对情绪进行指标的定义，所以这里只聚焦在情绪轮上。
情绪轮由罗伯特·普洛特契克开创，这个理论指出人类的基本情绪一共由8种，生气、厌恶、恐惧、悲伤、期待、愉悦、意外和信任。撇去那些负面情绪，能够符合趣味性带来的情绪基本就三种：愉悦、期待和意外。
为了为产品所用，就需要提炼出更具象的特征。下面，我通过脑暴的方式对每类情绪进行发散联想。
联想了大量可以引发愉悦情绪的事物，比如可爱的猫猫、各类好玩的表情包、毛绒玩具、影视作品里那些会突然说话的动物、解压神器等等。
我发现这些事物，一般具备了以下特征：
1.会给予我们即时反馈；
2.拟人化，比如带有人类才有的表情，或者是人类的动作语言；
3.柔软的、毛茸茸的、圆润的、有温度的；
4.会动的、解压的
联想了大量可以引发期待情绪的事物，比如被买爆的泡泡玛特盲盒，商家售卖的福袋，各种诸如掷骰子、老虎机的随机性游戏，各类抽奖活动，一些游戏开局roll属性点的环节（比如金2、河洛等游戏，当年玩的时候我惊讶得发现我居然能roll上一整天）
这些事物大致会带有这些特征：
1.未知的、神秘的；
2.满足人类的好奇心的；
3.对结果能满怀希望的；
4.随机的正向奖赏；
5.只需要一步简单到发指的操作（打开容器、拉动拉杆、点击按钮等等），不需要任何的行动门槛，也没有等待时间
比如《设计中的设计》这本书中提到的出入境的印章案例、一兰拉面碗底的细节、电影或者游戏中突然出现的彩蛋、iPhone第一代的发布现场、突然发现的世外桃源、突袭的生日惊喜等等。
这些事物大致会带有这些特征：
1.超出原有预期的；
2.未提前告知的；
3.正向结果的；
4.产生共鸣的
那么，这些特征又该如何更具象得落地成策略，产品中又是如何利用这些策略，引导用户产生这些情绪的呢？
下面，我将基于这三类维度，并结合大量的大厂案例来为一步步你抽丝剥茧。
如何制造愉悦感
基于上面的挖掘，我发现能引发愉悦感的一个明显特征，就是拟人化，这个非常有意思。
克利福德·纳斯在《the man who lied to his laptop》这本书中提出过一个观点：人们对待电脑的方式，与我们在与他人交流时使用的社会规范是一致的。我们对电脑的反应，就好像它们是人类一样。
也正因此，很多原本没有生命体征的物体，一旦被赋予了拟人形象，就容易被大家所接纳、引发愉悦。
做一下细分的话，拟人化基本涵盖了三个方面：语言、形象和表情。
1.1拟人化的语言
人对于具体的拟人形象更容易产生情感，其中便包含拟人化的口吻。使用这种口吻与用户交流，而非冷冰冰的设备语言，就可以提升产品温度，引导用户对产品产生正向情感，关于这块我总结了两方面。
一方面，文案尽量得接地气、轻松。
拿京东这款产品举例，文案从口吻上都会采用一种很轻松、接地气的拟人语气，来拉近和用户间的距离。比如在引导词后加入“哦~”“~”这种轻松的语气词。
另外，「京东问答」版块的引导词：传统产品是“添加问答”，是不是平平无奇。但京东使用了“我来助你一臂之力~”
QQ浏览器的评论暗提示，也不是传统的“写评论”“输入评论”，而是像日常聊天那样“我来说两句”，非常接地气、生活化。知乎直接套用了流行语，诙谐的同时引导用户注意言论。
另一方面，人类富有情绪变化，所以一旦用户触发了某个正面/负面行为，就可以给与情绪反馈。
在用户完成商品评价后，京东不仅仅是很传统得反馈“评价成功”，而是又加入了“感谢您！”的感谢词。看似加了三个字，但行动过后的正向感激反馈，和我们日常生活中受到正向反馈一样，被唤起正向的愉悦情绪。并愿意继续这个行为。
知乎的圈子业务，在用户完成签到后，反馈完成的基础上，使用了正向的情感反馈“ 我就知道你会再来看我”，仿佛是一位关系不错的老朋友，来唤起用户正向情绪。
另外，知乎在改版后，回答收到赞也不仅仅是“点赞成功”这类冷冰冰的机器语言，而是“已收到你的喜欢，谢谢！”并且配以作者头像，非常形象得传出对对方对我们的感谢反馈。这种正向反馈，相比”点赞成功“更有效得唤起正向情绪，形成正向激励。
当然，用户的消极行为也可以产生情绪反馈。
比如现在很多产品的取关反馈，不是传统的“确认”“取消”，而是用“残忍取关”和“给个机会”这种融入情感的文案来做挽留，就好像真的有个活生生的人，在被你否定后反馈给你的情绪，请求你再给个机会。有趣的同时一定程度上也可以唤醒用户的同情。（虽然这种做法过于业务导向，且有绑架用户的嫌疑）
人对于具体的拟人形象更容易产生情感。因此，树立一个拟人化的品牌形象（也就是我们常说的IP），可以使用户对产品快速建立情感联系，也可以强化品牌感知。比如优酷的猴子、高德地图的老鹰、钉钉的燕子、linefriends等等。
世界杯的吉祥物也是同理，每一届的吉祥物必定会融入拟人化的特征，凭着亲切、可爱的形象和全世界的观众一起热情互动。
说到产品，以京东的这只狗子为例，兜底页、缺省页、启动页，都做了狗这个拟人形象的贯穿。
如果你记得没错的话，形象改版之前这只狗还是四脚坐地上的，但改版后就两脚着地了。这同样是通过更拟人的形象来赋予「人格」，以此提升愉悦感，拉近距离。
再比如夸克，它甚至单独新增了底tab入口，通过3d品牌形象，实现与用户的智能交流。另外，卡片和语音搜索都做了形象贯穿，后者还使用了形象的眼睛，来通过眼睛的变化进行情感交流。
一段文字在加入了表情后，我们就能迅速了解到对方的情绪（比如我们日常的聊天）。因此表情这一招，也可以用以加深用户与产品的情感交流。
它可以和语音、形象灵活结合使用。通过全面的拟人化，来大幅提升用户对产品的形象感知，促进用户情感的产生、加深用户和产品的情感链接。
比如用语言输入，当系统未识别清楚时，传统的方案可能是一个错误图标加上「未识别声音，请再试一遍」的文案，但夸克中则使用了品牌形象的双眼来传达失落的表情，并结合了拟人化的语言。
同样做法的还有百度的未开麦提示、段子头图，快速传达产品的情绪，和用户情感交流。
另外，闲鱼设置昵称时，正在输入时、以及超出了限定字数，右侧的形象表情也会发生变化。
除了拟人化能引发愉悦外，还有一个很容易被忽略的要素同样能起到作用——动画反馈。
提起动画的作用，我们更多人首先想到的可能是强引导、注意力吸引，但动画同样能触发用户愉悦。比如当动画更加贴近现实，或者结合拟人化的特征时。
最典型的例子，就是苹果appstore从卡片到详情页的转场过渡，点按的预备动作、卡片的放大展开、缓出的曲线、转场完成的惯性等等，都很贴近现实物理世界的运动规律。而这种自然的丝滑也更能引发用户的愉悦。
比如知乎的加载动画，结合了拟人化的特征，让这个过程变得格外有趣。刘看山奋笔疾书的动作也很符合知乎这款产品的定位。
如何制造期待感
根据我们对期待感的脑暴，发现能触发这种情绪最典型的特征，就是随机性。
在产品中，则可以通过随机给予用户有价值的内容来引发用户的关注。结果的不确定使过程充满神秘，这种状态让用户兴奋和满怀期待，不会轻易离开。
比如网易新闻在进行新闻加载的操作时，会在加载动画上加入一个随机的小贴士。内容大致有三类：黄历、名言和一句话新闻。而且这些内容完全是随机出现，这种刷新过程好像在开盲盒，你无法预知会给你什么内容，非常有趣。而且它们入口深，不干扰；内容对用户也具有价值。
同样的还有丁香医生。在首页每次下来刷新后，都会出现不一样的健康类的小贴士。随机性很强，富有趣味。而且可以很好得满足求知欲。
雪球的个人页上，上划时也会随机给一条关于投资、市场的名言和网友的热门观点。
把现实生活中的游戏搬到了手机，同样能激发用户的好奇和期待。比如微信读书的翻牌子、摇一摇、老虎机。还有天猫的翻牌子。
如何制造惊喜感
格雷戈里·伯恩斯曾做个关于脑部区域的研究，发现大脑不仅探寻未知，而且实际上还渴望未知。相比那些已知的日常惯例，新鲜新颖的事物更容易引人注意。所以提供一些以往没有过的、出乎意料的事物或互动，不但能引起注意力，而且也会带来惊喜感。
产品中的惊喜感设计，可以说是使用瞬间能够触达我们内心的一种短暂性愉悦，一个体验的峰值。
根据对惊喜感的挖掘，一个典型的特征就是超出预期，并且未提前预料。
比如Figma使用过程中，团队成员和你同时长按鼠标，并且靠在一起后，就可与触发击掌的动画彩蛋，非常有意思。
比如京东在五星好评后，会放烟花庆祝。
比如很多内容型产品，在详情页长按点赞按钮后，会触发全屏的「爆赞」动画。
再比如用户生日当天，通过启动页、弹窗等场景送上生日祝福等等。
这些能够超出用户预期的细节，即便多么细枝末节、出现频率多低，但只要能够被触发，都可能因为惊喜感而生成情绪峰值，加深用户和产品的情感链接。
最后
以上，便是趣味性背后的情绪挖掘和案例讲解。
作为设计师，我们在工作中总是强调以用户为中心，通过不断的调研、跟访、可用性测试来了解、分类用户，但更多的结果可能只是让产品不断得贴合用户的心智、符合预期。但如何增加粘度、建立深层链接，就需要通过趣味性这种情感化表达方式，来为用户制造愉悦、期待甚至惊喜。
正像诺曼在「情感与设计」中说的那样，每个产品都需要令人更放松、更愉悦的设计，以此来增强产品的适用性。
希望这篇文章能对你有所启发。
蓝蓝设计的小编 http://www.lanlanwork.com