什么是峰终定律

用户在使用一个产品流程时的高峰体验和结尾体验。

用峰终法则提升用户在整个产品上或某个功能上的体验，需要先对用户在整个产品上或某个功能上的使用行为与想法进行分析，并绘制出用户的情绪曲线，根据情绪的峰值节点和使用流程的结尾，这两个“关键时刻”，进行体验上的重点打造。

它是怎么产生的

2002年的诺贝尔经济学奖得主、美国心理学家丹尼尔•卡尼曼经过深入研究，发现人们对体验的记忆由两个因素决定，即高峰（无论是正向的还是负向 的）时与结束时的感觉，这就是“峰终定律”。关于峰终定律有这样一个实验：让两组人员听相同时间的强噪音，然后一组停下来，另一组接着再听一段时间的弱噪音，就实际遭遇来讲，后一组比前一组受了更多的折磨，但是听到更长时间噪音的后一组的痛苦指数却要比前一组低很多，原因就是对于两组人员来讲，结束时刻的噪音给他们留下的感受最为深刻，因而他们的痛苦指数主要是由噪音结束时的刺激程度所决定的。在另 外一种情况下，令两组人员听相同时间的噪音，其中一组的噪音强度较高，另 外一组的噪音强度较低，但是其中某一时刻听到了极其刺耳的超强度的噪音， 结果就是，后一组的痛苦指数要高于前一组，尽管就总体而言，后一组所听到 的噪音强度要低许多。

这体现的就是感受过程中的“高峰”一刻的决定作用。依照峰终定律，高峰和结束时的体验主宰了人们这段感受的性质和强弱的 程度，而跟感受的总的比重以及体验时间的长短无关。也就是说，如果在一段 体验的高峰和结尾，体验是愉悦的，那么对整个体验的感受就是愉悦的，即使 这次体验更多的是痛苦或不愉快的感受。

需要我们记住

用户根据体验的高峰和结束来判断产品体验是否好坏，并不是根据用户使用产品的每一个节点感受的平均值来判定，我们可以理解为结果比过程重要。

就像我们看电影时，一个电影2小时前1小时都枯燥无味，突然中间有5分钟让你的情绪上升，此时你可能觉得这个电影还行，至少让你达到了情绪高潮，当你继续观看时电影片段又变得枯燥无味，突然最后10分钟和结束时出现了电影彩蛋，并且这10分钟的内容特别符合你的胃口，这时候你就会出现一种“嗯，这个电影不错，结局挺好”这样的心理暗示，此时会发现接近100多分钟的枯燥内容都被你忽略掉了，或者你也记得但是你默认了电影90%的枯燥。

产品中该怎么用

强化峰值

一些app里在用户购买成功后，将已购商品以一种具有仪式感的收藏卡形式展示给用户，给用户惊喜的体验，在盲盒星球内购买盲盒成功后会弹出卡片，把用户获得感拉满，在网易云音乐直播间内如果是新手用户就会弹出新人见面礼，通过视觉的表现形式把氛围拉拉满，当然还有一种反向峰值，当有一些产品进行抽奖时，如果用户未中奖会弹出情感化弹窗，对用户进行安慰降低用户的挫败感。

上面讲的偏向于业务弹窗，还有一种是功能性弹窗， 当用户使用某个产品流程时，这个流程可能通过多个维度才能到达最终的节点，在最后用户完成操作时通过情感化弹窗进行提示，又或者在版本升级时需要引导用户进行更新，使用情感化的表现，能够将产品与用户产生情绪共鸣，增加趣味性，提升体验。

降低负面峰值

当用户使用产品去完成目标时，突然中间步骤出现网络波动、网络断开等不可抗拒的因素，此时在页面中添加一些情感化设计，会缓解用户焦虑情绪，甚至可以在空状态中添加动效来提升趣味性。

我是这么做的

近期在工作中做了一个直播项目，其中的一个功能就涉及到直播抽奖，因为产品奖品比例较多且轮数也多，用户的中奖几率也比较高，所以导致用户在中奖后基本就退出直播间，因此在做设计的过程中为了避免这个问题，我在中间弹窗上做了优化。

通过情感的中奖弹窗形式来强化用户的感知度，在直播过程中提升兴奋感，提升用户观看的直播的欲望。

最后一定是终值

在讲一个案例，去年我们做一个刷题功能的体验优化，用户在刷题场景下会面对几十道甚至上百道题目，整个过程非常漫长，并且旧版的功能交互上并没有展示总共还有多少题的这个提示，用户在刷题过程中会非常焦虑，为了解决这个问题，通过这三个手段改进，1）我在刷题过程中以进度条的形式去实时告知用户刷题进度，减少用户焦虑，2）用户在最后几题的场景中会添加鼓励话语，强化用户峰值，3）在结果页面为用户展示直观的数据变化，强化用户的满足感，同时激励用户进行持续性刷题。

总结

用户只记得使用过程中体验高的场景和结束时的场景。
无论是在交互还是视觉上我们都可以利用峰终定律帮助用户达到好的使用体验。

在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、可定制形状设计

随着用户对个性化需求的不断增加，可定制的形状设计变得越来越重要。用户希望根据自己的喜好和需求来调整界面。例如，允许用户自定义选择自己喜欢的页面主题风格。

 

 

•  

  圆角指的是元素边角被设计为圆滑的形状，而非尖锐的直角。
•  

  它通常通过设定一个半径来实现，半径越大，角越圆滑。

•  

  视觉友好

  「圆角被认为更温和、更友好，因为它们缺乏尖锐的边缘，给人一种安全和柔和的感觉。」
•  

  现代感

  「在现代设计中，圆角被广泛使用，它们通常与新颖、时尚的设计理念相关联。」
•  

  提高注意力聚焦

  「圆角可以引导用户的视线流动，帮助减少视觉干扰，使用户更容易聚焦于界面的关键部分。」
•  

  适用性

  「在移动应用和网站设计中尤其流行，特别是在按钮、输入框、卡片和其他交互元素中。」

•  

  直角是指元素的边角以90度角的形式呈现。
•  

  它是最基本的形状之一，在许多传统和经典的设计中常见。

•  

  专业感

  「直角通常给人一种更加正式、专业的印象。」
•  

  清晰界定

  「直角在视觉上提供了清晰的界定，使元素的边界更加明确，有助于信息的组织和分隔。」
•  

  传统感「

  在某些情况下，直角与传统、经典的设计风格相联系。」
•  

  适用性

  「直角在各种应用中都很常见，尤其是在需要传达清晰、直接信息的界面中，如表格、列表和布局结构。」

 

 

•  

  用户友好性「圆角按钮通常看起来更加友好和容易接近，它们给用户一种温馔和舒适的感觉，适合于鼓励用户交互的场景。」
•  

  移动设备适应性「在移动设备上，由于屏幕尺寸较小，圆角按钮更易于触控，尤其是屏幕边缘的按钮。」
•  

  减少视觉冲击「圆角可以减少视觉上的尖锐感，使界面看起来更加柔和，适合于寻求轻松视觉体验的应用。」

•  

  专业和正式感「直角按钮给人一种更加正式和专业的感觉，在一些传统的或者保守的设计风格中，直角按钮更为常见，例如一些服装品牌（Yohji Yamamoto、CONFIRMED）、学校（各学校官方网站）等。」
•  

  内容和功能区分「直角按钮在视觉上更加突出，能够有效地区分不同的功能和内容，尤其是在需要用户做出明确决策的界面上。」

•  

  实际上，无论是圆角还是直角，按钮的触控面积通常是由其外接矩形决定的。这意味着，即使按钮的视觉元素有圆角，触控面积实际上仍然包括了这些圆角区域。
•  

  在实际应用中，操作系统或应用平台通常会为按钮元素提供一个默认的“触控目标大小”，这个大小是为了确保良好的触控体验而设计的，无论按钮的视觉样式如何。

•  

  圆角按钮在视觉上看起来更加柔和和亲切，这可能使得用户更倾向于触摸和与之交互。这种心理效应可能会导致用户觉得圆角按钮更“容易”触控，即使实际的触控面积与直角按钮相同。
•  

  在移动设备上，圆角按钮的另一个优势是它们的形状与设备的圆润边缘相协调，这在视觉上创造了一种和谐感，可能会无形中增加用户的触控舒适度。

 

 

•  

  视觉风格「圆角卡片提供了一种柔和、友好的视觉感受。它们的圆润边缘可以减少视觉冲击，创造出更轻松和亲切的外观。」
•  

  用户体验「圆角的设计通常被认为更加现代和用户友好。它们可以使界面看起来更轻松、更易于接近，这在提高用户的互动意愿方面很有效。」
•  

  适用场景「圆角卡片通常用于需要提供温馨、轻松体验的应用中，例如社交媒体、娱乐内容展示、个人博客，或者任何强调用户友好和易用性的设计。」
•  

  功能效果「在功能上，圆角卡片可以帮助区分不同的内容模块，同时保持界面的整体一致性和流畅性。」

•  

  视觉风格「直角卡片提供了一种清晰、专业的视觉效果。它们的直线和锐角创造了一种结构化和有序的外观。」
•  

  用户体验「直角设计传达了一种正式和权威的感觉，适合于需要展示专业性和准确性的应用。」
•  

  适用场景「直角卡片通常用于更正式或专业的环境，如企业网站、在线商务平台、教育平台，或任何需要清晰展示大量信息的界面。」
•  

  功能效果「直角卡片在功能上有助于清楚地区分和组织内容，特别是在数据密集或信息密集的应用中。」

 

 

 

 

•  

  独家发售平台「CONFIRMED 专注于提供 Adidas 的独家发售和限量版产品，特别是鞋类和高端服装。它的目标是成为品牌与其最忠实粉丝之间的直接连接点」
•  

  品牌营销工具「通过这个平台，Adidas 能够加强其品牌形象，特别是在时尚和高端运动装备领域。CONFIRMED 作为一个专门平台，也强化了 Adidas 在潮流和限量产品市场中的地位。」
•  

  市场分析和消费者洞察「CONFIRMED 还可能被用作市场研究工具，通过分析用户行为和购买模式来更好地理解目标市场。」

•  

  潮流爱好者「对最新潮流和设计保持关注的消费者，他们追求限量版、独家合作系列。」
•  

  Adidas 忠实粉丝「品牌的忠实支持者，对于品牌的新产品和特别发售保持高度兴趣。」
•  

  运动鞋收藏家「对于限量版运动鞋有收藏价值的消费者，这些人往往愿意为独特和罕见的设计支付高价。」

•  

  产品预览和信息「用户可以在应用程序中浏览即将发售的产品，并获取详细信息，如价格、设计特点、发售日期等。」
•  

  注册和参与抽签「对于感兴趣的产品，用户需要在特定时间内注册参与抽签。这通常涉及填写个人信息和选择购买尺码等。」
•  

  抽签结果通知「抽签结束后，用户会收到是否中签的通知。如果中签，用户将有机会购买这些限量产品。」
•  

  购买和支付「中签用户可以在应用程序内完成购买流程，包括支付和选择配送选项。」
•  

  社区互动和内容「CONFIRMED 还可能提供与品牌相关的内容，如设计师访谈、品牌故事等，以增强用户参与和品牌忠诚度。」

 

 

 

 

•  

  汽水音乐是一款音乐流媒体应用，旨在与主要竞争对手如腾讯音乐和网易云音乐抗衡。
•  

  它不仅是一款单纯的音乐播放软件，还与抖音紧密结合，使得用户可以在两个平台之间无缝切换音乐播放列表，显现出对社交媒体和音乐流的综合运用。

•  

  汽水音乐的主要用户群体是中国市场上的年轻用户，尤其是那些已经使用抖音并寻求更丰富音乐体验的用户。
•  

  考虑到字节跳动在短视频领域的强大影响力，汽水音乐会吸引那些对新兴、流行音乐以及个性化推荐感兴趣的年轻群体。

•  

  个性推荐「这里“汽水音乐”通过算法推荐“个性电台”、“歌单推荐”、“3个榜单”」
•  

  与社交媒体的整合「能够与用户的抖音账号同步，提供跨平台的音乐体验。用户可以在抖音中发现音乐，并在汽水音乐中继续播放，反之亦然。」
•  

  播放「汽水音乐的播放方式与抖音同步营造区分于其他音乐App不同的交互体验」

•  

  提高用户体验

  「圆角卡片的设计通常比直角设计更柔和、更易于接受。这种设计能够减少视觉疲劳，使应用界面看起来更加友好和现代化。」
•  

  增强视觉吸引力

  「圆角卡片因其流线型的外观，在视觉上更加吸引用户。这有助于提升用户对应用的整体印象和兴趣。」
•  

  组织信息

  「圆角卡片可以有效地将信息分组，如将不同的歌曲、专辑、播放列表等内容区分开来，使得用户浏览和选择时更加直观和方便。」
•  

  提升操作便捷性

  「在触摸屏上，圆角卡片可以提供更好的触摸目标，使得用户在进行选择和导航时更加方便。」
•  

  增强内容的层次感

  「圆角卡片可以通过阴影、边框或颜色的变化，为界面添加层次感，使得内容更加突出和易于阅读。」
•  

  提升品牌形象

  「现代的界面设计往往倾向于使用圆角元素，使用这种设计可以使应用看起来更加时尚，从而提升品牌形象。」

 

 

•  

  视觉焦点「圆角按钮可以作为视觉焦点，吸引用户的注意力，特别是对于重要的功能，如播放按钮或搜索按钮。」
•  

  界面美观性「圆角按钮增加了界面的美观性，与整体设计风格协调一致，提升了应用的整体视觉效果。」
•  

  一致性和标准化「在应用中使用标准化的圆角按钮可以提高界面的一致性，使用户更容易理解和使用不同的功能。」

1. 百度输入法显示密码键盘，完成密码输入仅需点击 9 次。
2. 搜狗输入法显示文本键盘，用户需在字母和数字之间切换，完成输入需点击 17 次。也支持长按第一行的字母输入数字。
3. 微信输入法显示文本键盘，完成密码输入需点击 17 次。不支持长按字母输入数字。

 

1. 百度输入法的键盘右下角显示“回车”，用户完成手机号输入后需手动获取密码文本框焦点。
2. 搜狗输入法的键盘右下角显示“下一项”，用户完成手机号输入点击下一项，密码文本框自动获取焦点。
3. 微信输入法的键盘右下角显示“下一项”，用户完成手机号输入点击下一项，密码文本框自动获取焦点。

 

 

 

 

 

 

 

• 微表情尽显“内心戏”

• 赚了、亏了一目了然

• 戏剧化表达

 

 

 

• 在应用界面中突出显示因为没有获得特定权限而受限的功能所在的具体部分，例如在原本用于显示该功能的结果或数据的位置显示一条消息，让用户知道因缺少权限而无法使用该功能，帮助用户在权限和功能之间建立心理联系。
• 不要阻止界面显示，不要全屏警告消息，让用户根本无法继续使用应用。即使在权限请求拒后，应用也应尽可能提供最佳的用户体验。例如即使麦克风使用权限请求遭拒，仍应全面提高文本功能的易用性。
• 用户可能已经选中了“不再询问“复选框，应用可能会在用户未看到权限请求对话框的情况下受到拒绝，此时应用应该提供一个链接，链接到设备设置中用户可以打开权限的具体位置。