首页

页面分割设计指南

博博

当你打开一个页面，首先映入眼帘的是丰富多样的内容和信息。如何在有限的空间内，既保证内容的完整性，又让用户能够轻松理解和浏览，这背后的奥秘就在于页面分割。今天，我们就来一起探讨页面分割的艺术与技巧，看看它是如何为你的设计增添魅力，提升用户体验的。
 
在设计中，页面分割不仅仅是一种技术手段，更是一种艺术表现。它如同一位细心的画师，巧妙地运用线条、色彩、空白等元素，
将页面内容划分为一个个清晰、有序的区域。
通过这些分割，用户能够更快速地找到所需信息，更轻松地理解页面内容，从而享受到更加愉悦的阅读体验。
 
页面分割的魅力在于其多样性和灵活性。不同的页面可以采用不同的分割方式，如线条分割、卡片分割、留白分割等，以满足不同的设计需求和用户习惯。同时，页面分割也需要根据内容的实际情况进行合理调整，既要保证信息的完整性，又要避免过度分割带来的混乱感。
 
在本文中，我们将一起探讨页面分割的原则、技巧和应用实例。我们将学习如何运用不同的分割方式来优化页面布局，提升用户体验。同时，我们还将分享一些成功的页面分割案例，以激发你的设计灵感，为你的界面设计注入新的活力。
 
分享目录：
一、分割的常见样式
二、线性分割
三、卡片分割
四、留白分割
五、总结
设计方法论 I 超全面的页面分割设计指南
 
线性分割：
通过使用线条来划分页面的不同区域，以达到组织内容、引导用户视线和提升整体美观度的目的。这种分割方式简单明了，能够清晰地展现出页面内容的层次和结构。
 
卡片分割：
卡片式设计是一种流行的界面分割方法，通过将内容划分为独立的卡片或区块，使用户能够更清晰地理解信息。每个卡片通常包含相关的内容，如文本、图片或按钮，以便用户快速浏览和交互。
 
留白分割：
主要通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），自然地将信息进行分组。这种留白的方式能够为页面增加呼吸感，降低视觉噪音，使设计看起来更简洁。
设计方法论 I 超全面的页面分割设计指南
 
近年来，设计趋势从“卡片式设计”转向了“去线化设计”，
即倾向于使用留白分割而非过多的线条分割，以实现更为简洁清晰的界面效果。设计师在选择分割方式时，应优先考虑留白分割，其次是线性分割，最后是卡片分割。这个选择顺序反映了设计界的一般原则，即在不影响信息传达的前提下，尽可能保持设计的简洁性。
设计方法论 I 超全面的页面分割设计指南
 
线性分割的定义：
线性分割设计是一种在视觉设计中使用的技巧，它使用线条、边框或细线等元素来划分、区分或连接页面上的不同内容区域。这种设计手法主要用于
提高页面内容的可读性和组织性，帮助用户更好地理解和浏览页面信息。
 
线性分割设计具有以下优势：
 
1.划分区域：
线性分割可以将页面划分为不同的区域或模块，使得每个区域的内容更加清晰、有序。这有助于用户快速定位和浏览所需的信息，提高阅读效率。
 
2.区分内容：
线性分割可以用来区分不同类型的内容，如文本、图片、图表等。通过线性分割，可以将这些内容进行分组或归类，使得页面更加整洁、有序。
 
3.引导视线：
线性分割可以引导用户的视线，帮助他们更好地理解页面内容。通过合理的线性分割设计，可以突出显示重要的信息或元素，引导用户关注到关键内容。
 
4.增强层次感：
线性分割可以增强页面的层次感，使得页面内容更加丰富、有深度。通过不同样式的线性分割，可以区分不同的信息层级，帮助用户更好地理解页面结构和内容关系。
 
使用原则：
在使用分割线时，我们应遵循一些原则，以确保其有效地帮助用户理解页面的组成，同时避免过度使用带来的视觉干扰。
 
1.分割线应当微妙而不过于显眼。
它们在布局中应该容易被用户注意到，但又不应成为焦点，以免分散用户的注意力。
 
2.分割线应被视为次要的元素。
只有在留白等其他设计手法无法有效起到分割作用时，才考虑使用分割线。它们应当是布局中的辅助工具，而不是主导元素。
 
3.谨慎使用分割线。
过度使用分割线可能会导致页面显得混乱和复杂。相反，我们应该用分割线来创建信息分组，而不是简单地分割每一个条目。通过审慎而恰当地使用分割线，我们可以有效地提升页面的可读性和用户体验。
图片来源于参考文章
图片来源于参考文章
 
线性分割三种类型：
通栏分割线、内嵌分割线和中间分割线。
 
1.通栏分割线（Full-bleed Dividers）：
通栏分割线通常横跨整个页面宽度，用于分隔彼此完全独立的内容区域。这种分割线在视觉上非常显著，能够清晰地划分出不同的内容区块，使用户能够迅速区分不同部分的信息。通栏分割线通常用于区分文章、产品列表、服务介绍等独立的内容区域。
 
2.内嵌分割线（Inset Dividers）：
内嵌分割线通常位于内容区域内部，用于分隔有锚点（如头像、图标等）的相关内容。这些锚点可以是图片、符号或小的图形元素，它们与分割线一起，帮助用户更好地理解和区分内容。内嵌分割线常用于列表、卡片式布局、时间线等场景中，用于展示有关联但不同类别的信息。
 
3.中间分割线（Middle Dividers）：
中间分割线位于两个内容区域之间，用于分隔无锚点的相关内容。这种分割线通常比通栏分割线更细，更注重于在视觉上划分空间，而不是强调内容的独立性。中间分割线常用于文本段落之间、列表项之间或不同功能区域之间，以提供清晰的结构和层次。
设计方法论 I 超全面的页面分割设计指南
 
在大多数情况下，当信息层级较为简单（即信息层级≤2）时，使用分割线进行信息分割是一种有效的方法。然而，实际上，如果留白间距足够大，我们也可以使用留白来达到类似的效果。通过增大留白间距，我们可以创造出清晰的视觉区域划分，使得信息之间的界限更加明确。
 
与分割线相比，足够大的留白间距可以避免多余的线性元素干扰，让整体视觉效果更加清爽。这样的设计选择有助于提升用户的阅读体验，使用户更加轻松地理解和消化信息。
 
因此，在信息层级较简单的情况下，我们可以灵活地选择使用分割线或留白来进行信息分割。通过调整留白间距，我们可以达到与分割线相似的效果，同时保持整体设计的简洁和清晰。
设计方法论 I 超全面的页面分割设计指南
 
为了提升屏效，我们希望在一屏内展示尽可能多的信息。在这种情况下，分割线的设计显得尤为重要，因为它们能够有效地划分信息区域，使内容更加清晰、易于理解。
 
通过使用分割线，我们可以将较多的信息条理化，使得用户能够更快速地找到所需的内容。与没有分割线的布局相比，使用分割线能够显著提高信息的可读性和可理解性。
 
在相同的信息布局下，分割线能够将信息区域明确地划分开来，防止信息之间产生混淆或交叉。这种划分不仅使得每个信息块更加独立，而且提高了信息之间的对比度，使用户能够更轻松地识别和区分不同的信息。
 
因此，当我们的目标是提高屏效并展示大量信息时，分割线的设计是一个关键要素。通过合理地使用分割线，我们可以确保信息布局更加清晰、有序，从而提高用户的阅读效率和满意度。（如下图）
设计方法论 I 超全面的页面分割设计指南
 
线性分割在移动端页面设计中的应用场景广泛，尤其是在需要清晰划分信息模块时。如微信的聊天列表中，线性分割被用来区分不同的消息条目。每条消息之间通过一条细线进行分隔，使得每条消息清晰可辨，方便用户快速浏览和定位到特定的消息。
 
线性分割还常用在各类App的信息提示中，如果有多条消息需要展示，线性分割可以用来区分不同的消息组。例如招商银行APP中，当用户收到多条未读消息时，每条消息之间可以通过线性分割进行区分，使得每条消息清晰可辨，方便用户逐一查看和处理。
 
在APP需要用户填写信息和设置的表单页面中，线性分割可以用来区分不同的输入字段或信息区域。这有助于用户更清晰地了解需要填写的信息，提高表单的填写效率和准确性，比如站酷的设置页面（如下图）
设计方法论 I 超全面的页面分割设计指南
设计方法论 I 超全面的页面分割设计指南
设计方法论 I 超全面的页面分割设计指南
卡片分割的定义：
卡片分割设计主要通过将内容或功能区域划分成独立的“卡片”来进行信息展示和组织。每个卡片通常包含相关的内容或功能，并且与其他卡片通过一定的间距或线性分隔进行区分。
 
卡片分割设计具有以下优势：
 
1.内容封装：卡片分割设计将相关内容或功能封装在一个独立的卡片内，使得每个卡片成为一个独立的信息单元。这有助于保持页面内容的清晰和整洁，方便用户浏览和理解。
 
2.明确边界：每个卡片通常具有明确的边界，通过边框、阴影或间距等元素来区分不同的卡片。这种边界的存在使得每个卡片在视觉上相对独立，方便用户进行区分和识别。
 
3.灵活布局：卡片分割设计具有很高的灵活性，可以根据需要自由调整卡片的大小、位置和排列方式。这使得设计师可以根据不同的设计需求和用户习惯来灵活调整卡片的布局，以达到最佳的视觉效果。
 
4.强调重点：通过不同的视觉处理手法，如改变卡片的颜色、大小或样式等，可以突出显示重要的卡片或内容。这有助于吸引用户的注意力，引导他们关注到关键信息。
 
卡片的基本构成：
卡片是一个独立的主题性容器，旨在将内容和操作组合在一起。它可以包含多种元素，如容器、缩略图、标题、副标题、富媒体、辅助文字、按钮和图标按钮等。这些元素并非必须全部存在，而是根据具体需求进行选择和配置。无论选择哪些元素，它们都会以易于扫描和操作的形式整齐地放置在卡片上。这种设计使得卡片成为一个灵活且高效的信息展示工具，适用于各种场景和应用。
设计方法论 I 超全面的页面分割设计指南
卡片分割常见的类型：
卡片分割可分为通栏卡片和非通栏卡片
 
1、通栏卡片：
其特点是卡片占据整个页面宽度，没有左右边距。通栏卡片的设计可以提高布局的灵活性，使得页面内容更加宽敞和大气。同时，通栏卡片也可以更好地突出展示单条内容，引导用户的视线，提高阅读效率。
 
2.非通栏卡片：
与通栏卡片相比，它会在卡片的左右两侧留有边距，不完全占据整个页面宽度。这种设计方式可以使得页面内容更加有层次感和组织性，同时也有利于突出显示某些关键信息。
设计方法论 I 超全面的页面分割设计指南
通栏卡片
通栏卡片相较于非通栏卡片，其设计特点在于去除了左右两端的留白，仅保留上下边距，从而提供了更大的展示空间。这种设计使得卡片内的内容能够占据整个页面宽度，进一步增强了内容的视觉冲击力。在通栏卡片中，卡片与背景的关系通常通过一条背景色块来抽象表现，这种简洁的处理方式避免了过多的视觉元素干扰，使得页面整体看起来更加整洁和统一。
 
通栏卡片可以被视为在极简列表式和传统卡片式设计之间的一种折中选择。它继承了卡片式的分层方式和强交互性，使得用户能够轻松地浏览和交互页面内容。如下图微博“关注”、微信“发现”页面。
设计方法论 I 超全面的页面分割设计指南
 
非通栏卡片
通常采用带圆角的设计形式，这种设计不仅赋予卡片一种柔和、圆润的视觉效果，还增强了用户的视觉舒适度。结合阴影效果以及四周的边距，非通栏卡片巧妙地形成页面留白，使得整体设计层次感更加丰富。
 
通过巧妙的投影设计以及前后颜色的精准设定，非通栏卡片成功地让内容与背景之间产生视觉空间感，进一步强化了内容的立体感和层次感。这种设计技巧不仅提升了卡片的视觉吸引力，还使得用户在浏览页面时能够更加轻松地区分和聚焦关键信息。
 
在页面设计中，非通栏卡片的应用范围十分广泛。无论是用于展示文章、产品、图片还是其他类型的内容，非通栏卡片都能够通过其独特的视觉效果和设计元素，为用户带来更加舒适、美观的视觉体验。同时，非通栏卡片还具有良好的适应性和灵活性，可以根据不同的设计需求和用户习惯进行定制和调整，满足不同场景下的应用需求。如下图夸克“夸克日报”、APP Store“首页”
设计方法论 I 超全面的页面分割设计指南
 
选择使用通栏分割线还是卡片分割，主要取决于你的设计目标和内容需求。以下是三个参考建议，帮助你做出更好的选择：
 
1.当内容已有自然分割线时：
如果你的主题内容本身就已经有明确的分割线，比如列表项、段落分隔等，那么采用非通栏分割会是一个好选择。卡片可以清晰地界定每个内容块，使主题信息层次更加分明，提高用户的阅读效率。
 
2.当内容类型多样且占据较大空间时：
如果单个主题内部包含了多种类型的内容，如文字、图片、视频等，且这些内容在垂直方向上占据了较大的空间（例如，内容长度超过屏幕高度的一半），使用非通栏分割会更加合适。卡片能够有效地圈定内容范围，为用户提供一个明确的视觉边界，帮助他们更好地理解和消化信息。
 
3.当需要增强横向空间感时：
如果你希望扩展页面的横向空间，或者暗示用户可以横向滑动页面查看更多内容，那么非通栏卡片会是更好的选择。非通栏卡片的设计能够利用横向内容连续性原则，帮助用户建立页面可以横向滑动的意识，从而提升页面的互动性和用户体验。如下图知乎“发现”、站酷“推荐”。
设计方法论 I 超全面的页面分割设计指南
 
卡片分割更适合图文混排
卡片分割设计以其独特的布局方式，成为图文混排中的理想选择。它能够巧妙地将不同大小、媒介的内容统一呈现在一个界面中，实现了内容的多样性与统一性的结合。这种设计不仅让单屏区域能够显示更多内容，还通过合理的空间划分，确保了文字和图片之间的和谐共存，既维持了视觉的一致性，又巧妙地平衡了文字和图片的视觉强度。因此，在需要同时呈现多种内容和媒介的场景中，卡片分割无疑是一种高效且美观的解决方案。如下图知乎“想法”、站酷“首页”
设计方法论 I 超全面的页面分割设计指南
设计方法论 I 超全面的页面分割设计指南
设计方法论 I 超全面的页面分割设计指南
 
留白分割的定义：
留白分割是目前设计的主流趋势，越来越多的产品在使用留白分割设计。留白分割主要通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），将信息进行自然的视觉分组。
 
留白分割具有以下优势：
 
1.突出重点信息：
通过增加间距，可以将关键信息与其他内容区分开来，使用户更容易注意到。
 
2.提高可读性：
适当的留白可以使文字或图形元素之间的界限更清晰，减少视觉干扰，从而提高用户的阅读效率。
 
3.增强设计感：
留白可以为设计增加呼吸感，避免元素过于拥挤，使整体布局更加和谐、美观。
 
当元素之间的间距保持均匀时，整个视觉呈现会显得平衡且协调，大脑默认为一个整体。然而，一旦元素的横向和纵向间距发生变化，我们的大脑会
基于接近性法则，本能地将距离较近的元素视为一个整体或群组，这就是留白分割。（如下图）
设计方法论 I 超全面的页面分割设计指南
 
留白分割在有规律且卡片样式较多
的页面中表现尤为突出，在有大量卡片样式的页面中，每个卡片通常都包含一定的信息。通过留白分割，可以清晰地划分每个卡片的信息区域，使用户更容易区分和阅读每个卡片的内容，增加呼吸感，避免元素过于拥挤，从而提高整体的可读性。例如下图中主流的音乐类App
设计方法论 I 超全面的页面分割设计指南
相反，如果在没有规律且页面内容较多的情况使用留白分割，则会使页面杂乱无章。比如下图咸鱼的“广场”界面feed流中，图片从1～9张都有的情况下，使用留白分割，页面就会变得杂乱，影响视觉效果。而脉脉则采用了卡片式分割样式，页面模块则相对清晰很多。
设计方法论 I 超全面的页面分割设计指南
设计方法论 I 超全面的页面分割设计指南
 
写在最后：
在我们界面设计中，我们应充分考虑信息条目的复杂度。当信息较为简单时，利用留白分割，能够创造出清爽且不受干扰的视觉体验。但随着信息复杂度的增加，留白分割可能不足以清晰地展现信息层次，此时，引入线性分割是一个有效策略，它能提升屏幕的利用效率，使信息条理更加清晰。
 
当信息复杂度进一步升级，例如已经运用了线性分割或涉及更多操作时，我们需要进一步强化信息条目之间的边界感。这时，卡片分割是一个理想的选择，它不仅能增强信息的视觉层次，还能提升条目的可操作性。
 
重要的是，选择信息分割方式时，我们要明确：分割本身不是目的，而是为了构建清晰的版面逻辑
，通过悦目的信息秩序来更好地突出内容，实现最佳的信息传达效果。因此，在决策时，除了考虑上述细节因素，还需全面评估整体版面效果和信息传达效率。感谢阅读，希望对您有用。
设计方法论 I 超全面的页面分割设计指南
 

作者：King_LBJ
来源：站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(1040)

B端设计语言-形色字构质动

博博

 
 
B端设计语言-形色字构质动，到底是个啥？
B端设计语言-形色字构质动，到底是个啥？
B端设计语言-形色字构质动，到底是个啥？
B端设计语言-形色字构质动，到底是个啥？
B端设计语言-形色字构质动，到底是个啥？
B端设计语言-形色字构质动，到底是个啥？
B端设计语言-形色字构质动，到底是个啥？
B端设计语言-形色字构质动，到底是个啥？

作者：啾啾复啾啾zz
来源：站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(774)

作为设计师，你了解交互设计文档吗？

博博

许多设计师可能未曾接触过所谓的“交互设计文档”。在实际工作中，这份文档是由交互设计师负责输出的，但令人惊讶的是，大多数互联网公司并未设立专门的交互设计师岗位。相反，交互设计师的职责通常由UI设计师与产品经理共同分担。为什么这些公司不选择招聘专门的交互设计师呢？
本篇文章旨在帮助设计师们全面理解交互设计文档。我们将
深入探讨其定义、作用、价值、制作方法以及核心内容
等。当然，如果文中存在任何不准确或遗漏之处，我也非常期待各位专家的指正和建议，让我们共同进步。
 
一、基本概念解析
交互设计文档是交互设计师的核心工作成果。
交互文档，即交互设计说明文档（英文名“Design Requirement Document”）。又称“DRD文档”。用来承载交互说明、交互原型、项目背景等内容，存档并交互项目相关伙伴的团队协作文档。
它在将用户需求转化为高可用性产品的过程中起着至关重要的作用。这不仅仅局限于绘制线框图，而是要求设计师具备明确的产品化思维，精通需求分析，构建信息架构，掌握业务流程与任务流程，同时还要有严谨规范、结构清晰的设计说明。
一份出色的交互设计文档不仅能够展现设计师的专业素养，赢得同事的认可与尊重，更可以显著减少产品设计过程中的沟通成本，提高工作效率，从而确保产品研发的顺利进行。
 
二、为什么需要交互设计文档
交互设计文档在产品设计过程中的重要性不容忽视。
  • 交互设计文档是设计师与团队成员之间沟通的桥梁。
    在项目中，设计师通常需要与产品经理、开发人员、测试人员等不同角色的成员紧密合作。而交互设计文档则能够确保所有相关方对产品的设计目标、功能逻辑、用户体验等方面有统一的认识和理解。这有助于减少沟通成本，避免因为理解偏差而导致的项目延期或功能失误。
  • 交互设计文档有助于提升产品研发的效率。
    通过文档，设计师可以将复杂的设计思路转化为清晰、具体的可执行方案。这不仅有助于开发人员准确理解并实现设计师的意图，还能够减少因为需求不明确或设计改动而导致的返工和延误。同时，文档中的信息架构、导航设计、任务流程等内容也能够帮助团队成员更好地规划和分工，确保项目的顺利进行。
  • 交互设计文档还是设计师个人专业素养的体现。
    一份详尽、规范的文档不仅能够展示设计师对产品的深入思考和分析，还能够体现其严谨的工作态度和对细节的关注。这有助于赢得上下游同事的尊重和认可，提升设计师在团队中的影响力和话语权。
  • 通过不断地积累和完善交互设计文档，设计师可以逐渐构建起一套规范化的设计体系
    。这不仅有助于提升个人和团队的专业素养和知识水平，还能够为公司的产品设计提供有力的支持和保障。在未来的项目中，这些历史文档还可以作为参考和借鉴的依据，帮助团队更快、更好地完成设计任务。
 
三、交互设计文档给谁看？
交互设计文档需要确保文档的有效性和实用性，它必须具备良好的可读性、唯一性和时效性。
  • 产品经理
    ——不同公司和团队中，产品经理与UI/UX设计师之间的合作方式和输出物各不相同。有些公司中，产品经理会负责撰写包括交互说明和原型在内的PRD文档，但这种情况下往往容易出现体验层面的疏漏。当公司有交互设计师时，交互设计师需要从功能规划、信息架构到原型说明等方面全面介入，确保产品的完整性和用户体验的流畅性。此外，在某些流程中，产品经理和交互设计师可能会分别负责PRD文档和交互文档的编写，两者之间的逻辑需要相互印证，以确保产品的逻辑和体验都达到最佳状态。
  • UI设计师
    ——作为交互设计师的下游，UI设计师在项目中也扮演着至关重要的角色。为了确保项目的顺利进行和避免后期可能出现的问题，交互设计师需要尽早介入需求沟通，与UI设计师紧密合作。通过交互设计文档，UI设计师可以更加清晰地了解产品的设计思路、信息架构和交互方式，从而设计出更符合用户期望和体验的界面。
  • 开发（前端）
    ——开发团队是交互设计文档的重要受众之一。他们需要根据文档中的信息来实现产品的逻辑、页面跳转流程、交互方式和动效等。一份详细、准确的交互设计文档可以帮助开发团队更好地理解设计师的意图，减少开发过程中的误解和返工。然而，在实际操作中，很多公司可能只有简单的PRD文档，开发团队可能只是简单地浏览一下，这可能会导致开发结果与设计师的初衷产生偏差。因此，交互设计师需要与开发团队保持密切沟通，确保他们充分理解和遵循交互设计文档中的要求。
交互设计文档在产品开发过程中不仅能够帮助团队成员更好地理解和实现设计师的意图，还能够促进团队成员之间的沟通和协作，确保项目的顺利进行。因此，我们应该高度重视交互设计文档的编写和管理工作，确保其在项目中的有效应用。
 
四、交互设计文档应包含哪些内容？
一份最基本的交互设计文档需要包含：
封面、更新日志、需求分析、产品架构、任务流程图、页面流程图、交互规范说明、交互原型、废纸篓
等模块。
  • 封面
    ——包括产品/项目名称、版本编号、撰写时间、撰写人、参与该项目的各方负责人，便于后续查阅及版本管理。
作为设计师，你了解交互设计文档吗？
  • 更新日志——包含具体新增或修改的内容，修改人，修改日期等信息。
    在实际工作中，方案的修改和优化是不可避免的。更新日志方便项目成员一目了然关注到重点更新的内容，也方便开发找到对应的负责人进行沟通，提升工作效率。
作为设计师，你了解交互设计文档吗？
 
 
  • 需求分析——包括产品名称、项目背景、目标用户、用户目标、产品目标、产品目标、使用场景、设计目标与设计思路，方便项目相关人员快速理解项目背景，总结回溯项目设计。
    需求分析是产品设计过程中至关重要的一步。它涉及到深入理解用户需求、业务目标和产品目标，以及将这些需求转化为具体、可执行的设计方案。在进行需求分析时，设计师需要与用户、产品经理和其他利益相关者进行深入的沟通与合作，确保对需求的全面把握。通过收集和分析用户反馈、市场数据、业务策略等信息，设计师能够挖掘出用户最真实、最根本的需求，为产品设计提供有力的指导。
作为设计师，你了解交互设计文档吗？
  • 产品信息架构——包括复杂内容的信息组成，展示完整的项目内容整体信息架构图。
    产品信息架构是设计过程中的关键环节，它负责将产品的功能、内容和用户体验进行有序、清晰的组织与呈现。一个好的信息架构不仅能帮助用户快速找到所需信息，还能提升产品的整体可用性和用户体验。 在构建信息架构时，设计师需深入考虑用户的信息查找习惯、浏览路径以及产品的核心功能。通过合理的信息分类、层次划分和导航设计，信息架构能够将复杂的产品内容变得易于理解和操作。
图源：龙爪槐守望者
图源：龙爪槐守望者
 
  • 业务流程图——产品主要业务流程图概述，用于描述主要功能业务流程（泳道图/单向流程图）。
    业务流程图是一种视觉工具，用于清晰展现业务运作的逻辑和步骤。通过业务流程图，团队成员可以直观地了解业务的全过程，从而更好地协作和执行。绘制业务流程图时，设计师需要深入了解业务需求和流程细节，将每个步骤、环节和决策点都清晰呈现。这样的图表不仅有助于设计师梳理和优化业务流程，还能帮助开发团队准确实现业务逻辑。
图源：滴滴出行业务
图源：滴滴出行业务
 
  • 任务流程图——产品任务的流程化表现，一个主流程，多个次要流程。每个任务用一组流程图表示。
    设计师在绘制任务流程图时，需要细致分析每个任务步骤，确保流程图的准确性和完整性。流程图中的箭头、符号和文字说明等元素，能够清晰呈现任务执行的顺序、条件分支和循环等逻辑关系。通过任务流程图，用户可以更加清晰地了解任务的执行过程，减少操作失误和不必要的困扰。
作为设计师，你了解交互设计文档吗？
  • 页面流程图——带有页面形态的任务流程图。
    页面流程图是设计过程中不可或缺的一环，它细致描绘了用户在产品使用过程中，不同页面之间的跳转、交互和逻辑关系。在绘制页面流程图时，设计师需要关注用户的行为路径、页面间的转换条件和可能的交互动作。通过流程图，设计师可以清晰地展现出用户从进入产品到完成目标的整个过程，以及期间可能遇到的分支和循环。
作为设计师，你了解交互设计文档吗？
  • 交互规范说明——原型设计中出现的公用组件，通用样式集合。
    交互规范能保障产品内不同模块的设计一致性，同时提高不同设计师间的设计、协作效率；通过定义标准规范，提高流程、组件复用率，提高整体开发效率；让用户能够在产品全局感受到统一且完整的体验，降低使用成本和学习难度。
作为设计师，你了解交互设计文档吗？
  • 交互原型
    ——带有交互效果的页面结构设计，包括原型界面、设计说明等。
作为设计师，你了解交互设计文档吗？
  • 废纸篓
    ——放置多版本稿件。
 
五、总结
深入探索交互设计文档与用户体验的核心关系
。在产品设计的过程中，交互设计文档不仅是形式上的必要文件，更是设计师与用户、业务团队之间沟通的桥梁。它的核心目的在于确保设计的方向符合产品的整体战略和用户的真实需求。
用户体验是产品设计的灵魂。
设计师需要深入了解用户，挖掘他们最根本、最真实的需求。这不仅仅是通过问卷调查或用户访谈，更是要站在用户的角度，思考他们在使用产品时的每一个动作、每一个决策背后的原因。只有这样，设计师才能为用户带来真正有价值的产品体验。只有这样，才能确保设计出的产品既符合业务目标，又能为用户带来卓越的体验。希望每一位设计师都能在职业生涯中不断进步，为用户和业务创造更多的价值。


作者：Oceans1de
来源：站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(801)

简洁之美，细节成就卓越：打造极致移动端弹窗体验

博博

细节成就卓越，从精致弹窗设计开始。
在移动端应用的世界里，弹窗不仅是信息传递的桥梁，也是用户体验的微妙触点。一个精心设计的弹窗能够在正确的时刻捕捉用户的注意力，以一种既美观又功能性强的方式提供必要信息或引导用户操作。从视觉清晰度到操作简便性，再到出现的时机和频率，每一个细节都关乎着用户对应用的整体感受和满意度。让我们一起探索如何通过细致入微的设计思考，打造既符合业务目标又让用户感到愉快的移动端弹窗，提升体验，创造细节之美。
简洁之美，细节成就卓越：打造极致移动端弹窗体验
 
 
简洁之美，细节成就卓越：打造极致移动端弹窗体验
简洁之美，细节成就卓越：打造极致移动端弹窗体验
 
 
简洁之美，细节成就卓越：打造极致移动端弹窗体验
简洁之美，细节成就卓越：打造极致移动端弹窗体验
简洁之美，细节成就卓越：打造极致移动端弹窗体验
简洁之美，细节成就卓越：打造极致移动端弹窗体验
简洁之美，细节成就卓越：打造极致移动端弹窗体验
简洁之美，细节成就卓越：打造极致移动端弹窗体验
简洁之美，细节成就卓越：打造极致移动端弹窗体验
简洁之美，细节成就卓越：打造极致移动端弹窗体验
简洁之美，细节成就卓越：打造极致移动端弹窗体验
 
 

作者：Miao_C
来源：站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(868)

如何利用动效 打造B端的用户体验

博博

说到B端后台产品，我们会想到业务复杂、信息庞大、用户角色多、页面层级深、使用门槛高等特征。这些特征让后台产品在设计时更强调“简单直接”，无需多余的设计元素，相比之下，没有C端产品有趣。而作为B端后台设计师在工作中会面临很多复杂场景的设计需求，有时候需求方未必能理解设计理念，会让设计师陷入“头秃”的状态。 针对B端后台产品某些体验问题，我们可以借助动效的力量去解决。
下面将结合工作经验，以及线上文章，分享如何利用动效来提升B端后台产品的体验。
 
主要分为两大块：
如何利用动效 打造B端的用户体验
 
如何利用动效 打造B端的用户体验
 
使用动效不是为了炫技，而是辅助解决设计中发现的问题。我们要思考的是，眼下的问题结合动效能否达到1+1>2的解决效果。设计方案除了要得到需求方的认可，还要有开发团队的支持。设计师做到从痛点中出发，于可行处落地，才是有效的设计。那什么场景下的问题可以考虑结合动效呢?
 
1、信息量折叠收纳
B端业务的复杂程度决定了产品的信息体量，这也考验着设计师设计页面时，能为用户在有限的空间里获取多少信息。举个例子，用户的办公设备是小型笔记本，它的屏幕小，用户一屏看到的内容有限。这时需求方建议减少留白，压缩空间，信息往上堆积，页面最后会拥挤不堪。庞大的信息体量力求对用户的吸收效率，也对设计造成困扰，针对这种情况我们可运用“折叠收纳”法
 
应用案例1: 按钮折叠
如果一个页面的按钮太多，可“折叠”按钮。以下面的科目树为例，每个科目有若干个功能按钮，如按钮全部展示，不利于用户聚焦重要信息。用户必定是先看科目标题，如有需要才对科目进行操作，基于这个思路可把按钮折叠起来，待用户鼠标悬浮至科目才出现按钮。在恰当的场景下将按钮折叠，有助于精简页面结构。一个页面按区域划分功能区和信息区，信息区被文案铺满了，可简化功能区的表现形式。比如按钮和解释文案，可对解释文案进行收纳，用户鼠标悬浮上去显示。对于用户来说，一个按钮的含义只要使用一次便清楚。
如何利用动效 打造B端的用户体验
应用案例2: 内容折叠
B端后台因信息量大有很多长页面，这时可在用户进行页面滚动浏览时，根据用户滚动的内容进行折叠。如下的筛选项占据了页面头部一定的空间，用户滑到结果列表内容时，已选项固定在顶部精简展示。
如何利用动效 打造B端的用户体验
 
小结:通过“折叠收纳法”优化页面布局，根据用户的操作行为给予内容变化，帮助用户降低信息量过大带来的阅读疲劳，也让设计师在有限的设计空间里“堆积”信息。
 
2、对路径进行引导，及时给与用户反馈，提高效率
B端产品会有极其复杂的功能，这些功能通常用步骤条来拆分，引导用户分步完成。面对复杂功能。需求方希望
在页面的各个位置添加用法提示文案。但用户并不想阅读一串串文字，这时可结合用户的操作行为，及时响应引导下一步操作。
 
应用案例1:
操作响应如下的这个页面需要用户把左边的字段拖拽到右边生成卡片。当用户拖拽时，给予动效反馈让用户感知字段拖拽方向。这种可视可感知的方式帮助用户快速掌握用法，提升效率。
如何利用动效 打造B端的用户体验
 
应用案例2:引导响应
在工作中我们也许会接到类似的修改需求:“按钮不够突出，不够大，要又大又突出”。你看完后心里想:“还不够突出吗，要这么大干什么呢?”这时沉住气，分析修改的根本目的，它想要突出的目的是什么?
1、这个按钮在整个页面中承载极其重要的功能，视觉上用户需立刻注意到2、点击按钮后的内容十分重要，希望增强点击欲。
当用户鼠标悬浮至按钮时，及时响应引导，一个箭头既起到醒目作用，也引导着用户去往下一步。
如何利用动效 打造B端的用户体验
 
小结: B端后台页面信息繁杂，功能多。通过动效帮助用户在使用过程中增强反馈和引导，正确的引导能缩短用户的操作路径，提升效率。
 
3、增加情感化体验
B端后台产品大部分是给专业人员使用的，信息表单居多，页面内容相似，比较单调。加入适当友好的情感化式效可以提升产品的趣味性，减少用户使用的倦怠感。
应用案例1: Loading动效
常规的Loading动效通常是一个圆在转圈，当用户面对长时间加载时，一直盯着一个圈会产生焦虑感。情感化Loading动效可总结为两类:
1、产品本身有一个IP形象，可围绕IP进行创作。例如“加薪猫”，加载的时候猫咪追着钱币奔跑，增加了跑步流汗的细节，提升它已经在努力加载的形象感;
2、根据Loading的文案进行拓展设计，提取文案元素，图形场景化，分散用户等待的焦虑。
如何利用动效 打造B端的用户体验
 
应用案例2:化抽象为形象
有些B端产品的业务背景专业而又抽象，可借助动效的力量化繁为简，化抽象为形象。以下面数据字典为例。用通过该字典进行与业务相关的字段查询。该页结构较简单:搜索栏和热词入口。我结合模块名称，对特征进行具体物化，在页面加入字典和放大镜元素。通过物化让用户快速感知该模块的作用。类似的大入口页面也可以运用3D效果，它能让物化更加立体。
如何利用动效 打造B端的用户体验
 
 
如何利用动效 打造B端的用户体验
 
 
比较常用的动效设计工具有: Ae、Principle、ProtoPie。这里分享一下我在工作中常用的并能解决大部分问题的工具。
1、Principle:快速制成交互动效演示Demo
Principle是一款只能用于Mac OS系统的交互设计工具，它的操作界面跟Sketch类似，学习成本较低。它搭配Sketch使用，能对界面做转场过渡动效和一些细节的交与动效。当你想提出某个交互动效提案时，可用Princidle快速制成演示Demo，导出GIF或视频给到需求方，让他们快速明白你的想法及可行性后台界面演示demo可直接选择箭头光标，呈现效果更贴合真实场景。
 
如何利用动效 打造B端的用户体验
 
 
2、After Effect: 适合各种场景下的动效制作
AE是绝大UI设计师必备的动效制作工具。它支持Mac OS和Windows系统，其自身有着强大而丰富的特效库。现在也能通过AEUX插件，把Sketch里的图层直接导入到AE使用。AE的功能大而全，日堂工作中多用干制作情感化需要的图形动效，比如Loading、lcon点击动效等等。
如何利用动效 打造B端的用户体验
 
 
小结: 设计师需要学习和掌握的软件很多，软件更新迭代的速度也很快。可选择能解决工作中绝大设计需求的软件精学，其余可在空闲时作为知识技能储备来学习。
 
总结
做适合的动效为B端产品体验赋能
当你在设计一款从0-1或是重构的B端后台产品，你可重新定义设计风格、规范控件。当你是半途介入一款风格规范都已相当成熟的B端产品，通常遇到的问题较为繁琐，可能是对一个按钮、一个颜色、一句文案去精打细磨。这时设计师需提升产品全局观，在设计过程中对遇到的问题层层剖析，洞悉设计的发力点，并在恰当的场景下紧贴产品特性和业务需求，提出恰到好处的动效方案，以小点出发，真正为产品的体验赋能。
 

作者：CNLILY
来源：站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(875)

用视觉策略助力产品客户价值传达

博博

视觉策略：场景图形化
我们知道对于 PaaS 类产品而言，产品的客户价值传递是非常重要的，它决定着产品的增长获客、销售收入等。然而视觉设计师有时候会对所能提供的价值而感到方法有限，在完成了基本的页面布局、层级、组件的构建之外还能做些什么帮助产品传递客户价值。我们尝试为大家介绍一个设计方法“场景图形化设计”。
场景图形化设计是什么？
场景图形化设计是什么？
 
其实场景图形化的概念非常简单，它的核心点在于一方面将我们希望传达给用户的信息进行情境或情节的场景化构建，另一方面则是将构建好的场景通过图形化的方式进行视觉表达。那么为什么它可以帮助我们进行客户价值的传递？我们先简要的分析下它的原理。
 
场景图形化的原理
一般情况下我们认为用户产生某个行为背后的原理是，用户接受一个情境的刺激，然后会根据已有的认知经验去产生一个主观的期望效果，并产生与之对应的行为，行为产生的结果反馈又会成为认知经验，从而对下次行为产生影响。
用户行为原理
用户行为原理
 
而场景图形化就是在情境刺激这个阶段，通过将业务概念场景化或者情境化，然后用图形的方式去表达场景或情境来增强客户受到的感知，影响他的主观认知，从而更好的促进后续的行为。因为人类是视觉动物，图像对我们的吸引力是远大于文字的，将复杂、艰深的业务概念通过图形的形式表达出来，相比单纯的文字描述有着巨大的优势。
图形化设计优势
图形化设计优势
 
场景图形化的项目实践
在了解到场景图形化的含义和原理之后，我们接着来看在（小程序平台）这个 PaaS 产品里我们是如何运用这个方法的。
1.业务场景图形化，传递产品客户价值
其实在 B 端的视觉设计中图形化的表达方式已经屡见不鲜。但是在 PaaS 产品中，我们认为左侧这种常见的抽象化的表达形式其实并不适合，它虽然能够满足本能层和反思层的设计表现，但是在降低业务理解门槛这个需求上并不能提供足够的帮助，或者可以说情境刺激的强度不够。
「PaaS产品设计」用视觉策略助力产品客户价值传达
象化的图形设计方式在于把抽象的、看不见的事物通过提取、转化等形式变得看的见、容易理解。这显然更加符合我们希望增强情境刺激的效果，当然抽象化的表达方式在营造氛围和表达一些同样的抽象概念时也有自身优势，综合来看我们决定以具象化为主、抽象化为辅的形式来进行核心情境的图形化表达。
以 （小程序平台）控制台概览页为例，在这个场景里我们希望客户能够快速地了解并体验小程序平台的两个核心价值点，于是我们把这两个价值点梳理成了两个场景，那么相对应的我们就需要将这两个场景进行图形化。
「PaaS产品设计」用视觉策略助力产品客户价值传达
 
首先我们需要拆解文案中的描述，将文案转化为一个情境描述，这也需要交互设计师配合在文案设计阶段，就采用相同的设计方法首先将文案场景化。当然如果是一个非场景化的文案，我们也可以试着将它情境化。
「PaaS产品设计」用视觉策略助力产品客户价值传达
 
「PaaS产品设计」用视觉策略助力产品客户价值传达
 
接下来，我们根据转述好的情境来构建整个画面元素，在这里我们将画面分为了主体区和背景区，来表达重点的标题和次重点的正文。在实际操作中也可以根据现实情况来灵活调整。
「PaaS产品设计」用视觉策略助力产品客户价值传达
完成图形的构建后，在质感选择上因为希望映射现实世界，所以我们放弃在质感上过多修饰，使用了一些写实的金属、塑料、玻璃质感来营造整个场景氛围。
「PaaS产品设计」用视觉策略助力产品客户价值传达
最后运用相同的设计方法完成这个场景的图形化构建。
「PaaS产品设计」用视觉策略助力产品客户价值传达
以上的思路就是一个典型的场景图形化的设计方法。从围绕文案的拆解来构建图形元素，到映射现实实体的质感表达我们的目的都在于让场景变得更加生动更加可理解易理解，从而最大限度的对客户进行情境刺激。秉承这个思路，我们在产品的整个用户路径中，对于关键场景都采用了这种图形化的表达方式。
 
2.品牌传递融入场景，构建品牌认知
接下来从品牌维度来看，品牌价值是客户价值在品牌侧的体现，品牌价值的构建对客户价值传递有极大的帮助。我们希望客户在理解到产品的客户价值后，可以进一步的记忆它。针对这个维度，我们的想法是在场景图形化在搭建中融入和露出品牌，同时贯穿整个用户路径，一方面潜移默化完成品牌认知构建，另一方面增强客户价值的记忆。
「PaaS产品设计」用视觉策略助力产品客户价值传达
「PaaS产品设计」用视觉策略助力产品客户价值传达
对于 B 端产品来说品牌融入和露出可能方法并不多，但在场景化设计思路里我们可以把场景作为品牌的载体。这样的好处一方面是品牌的融入非常自然，形成从产品价值到品牌价值的传递链路。另一方面，可以在了解、试用、使用这条体验路径的核心场景里反复露出。
「PaaS产品设计」用视觉策略助力产品客户价值传达
3.场景图形表达标准化，打造统一心智
最后，针对视觉侧的客户价值传递形式我们需要进行规范的制定和标准化沉淀，来保证未来设计输出的统一规范，让客户价值在产品所有场景和阶段的传递都有统一的用户心智。首先我们将图形化的场景进行了区分，一类是传递业务，另一类是传递品牌，其次给出图形化设计的具体原则和构图规范，让场景图形构建都有据可循。
「PaaS产品设计」用视觉策略助力产品客户价值传达
「PaaS产品设计」用视觉策略助力产品客户价值传达
作者：cclava
来源：站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(837)

如何用服务思维做体验升级？

ui设计分享达人

金融品类交易中，客户和平台产品再也不是「决策-购买-结束」这种买完即走的关系，产品体验路径贯穿投前-中-后、线下后台，用户体验链路漫长且复杂。尤其是私募品类，百万起投的用户门槛极高，高净值人群的需求更加千人千面，给体验升级带来很大的难题

评论(0) 浏览(768)

复杂金融产品的交易体验思考及设计

ui设计分享达人

金融品类的交易体验设计一直是一个充满挑战的领域，尤其在雪球这样的互联网金融公司。雪球覆盖的交易品类有港股、美股、公私募基金、投顾、个人养老金等9大品类；涉及的交易类型也比较复杂，有买入、卖出、定投、转换等类型。不论是新手还是经验丰富的投资者，都需要面对复杂难懂的金融特性和多样的交易类型。基金交易流程作为支撑金融产品的关键流程之一，我们在与产品沟通、收集客服反馈与用户行为数据的过程中发现了目前雪球交易流程中的一些痛点

评论(0) 浏览(798)

如何巧妙的呈现龙年氛围感

博博

一、封面边框营造氛围感
 
通过对主界面配图营造氛围感相对直接，可以针对封面设计进行创意，也可以在边框上面进行装饰。
 
爱奇艺首页推荐的影片封面设计中，在不改变结构布局的基础上，对封面边框进行氛围装饰，简洁直观地呈现出龙年氛围感。通过对封面设计进行创意，可以避免改变产品结构，方便随时更换，灵活性较高。
如何巧妙的呈现龙年氛围感
 
 
二、通过图标配色营造氛围感
 
营造氛围感最直接的表现就是颜色层面，可以通过配色突出主题氛围。
 
马蜂窝 App 首页金刚区图标，春节期间运用红黄渐变进行图标配色，以此强化春节氛围感。不改变图标造型，也能便于用户记忆和适应变化，表现形式简洁有效。
如何巧妙的呈现龙年氛围感
 
三、主题活动替换品牌区域
 
利用品牌 Logo 进行主题演变可以是品牌造型层面设计，也可以在品牌区域位置上面替换内容，针对预留的位置发挥性更强。
 
夸克 App 在主页默认展示品牌 Logo，春节期间以主题活动进行替换，不仅突出氛围也能增加活动曝光度。
如何巧妙的呈现龙年氛围感
 
四、烟花动效突出顶部视觉区域
 
通过春节元素进行动效表现，可以让氛围感更突出，比如绽放的烟花、鞭炮、祥云、生肖元素等。
 
携程旅行首页顶部视觉区域，春节期间以绽放的烟花动效进行表现，氛围感十足。不仅突出年味，也能让区域视觉感更突出。
如何巧妙的呈现龙年氛围感
 
 
五、主题文案嵌入图标设计
 
金刚区就如同百变金刚一般，更换内容非常便利，灵活性很高。针对图标设计风格、主题风格、主题文案等形式进行设计融入，均可突出各类主题风格。
 
安居客 App 首页金刚区图标设计，在春节期间结合主题文案进行嵌入，氛围感表现得直观清晰。再配合春节氛围的 Banner 展示，新春氛围渲染得非常到位。
如何巧妙的呈现龙年氛围感
 
 
六、按钮设计中的画龙点睛
 
针对主按钮设计进行发挥较为常见，可以在按钮造型、配色、装饰等层面发挥，表现形式丰富多样。
 
携程旅行订票查询按钮设计中，可谓是画龙点睛。将中国龙和春节元素融入到按钮装饰中，不仅突出氛围感，眨眼睛的动效也是点睛之笔。
如何巧妙的呈现龙年氛围感
 
 
七、主题皮肤氛围感拉满
 
在产品的各区域都可以进行主题氛围营造，形成不一样的主题皮肤，带给用户节日的沉浸式体验。
 
嘀嗒出行 App 从不错过每个节日的表达，春节期间在多个场景营造氛围感，使得主题皮肤氛围感拉满。在背景区域、各局部视觉区域、图标、弹窗、按钮、配图等，把春节氛围表现得淋漓尽致。
如何巧妙的呈现龙年氛围感
 
八、满屏红包抢不停
 
对于春节而言怎能少得了抢红包的环节，将抢红包的游戏结合到活动中，氛围感和参与度都非常到位。
 
腾讯视频 App 就将抢红包的游戏结合到活动表达中，满屏的红包让你抢不停，用户的参与度瞬间被激活啦！通过游戏化的形式表达活动主题，更能符合年轻用户的需求。
如何巧妙的呈现龙年氛围感
 
 
九、主题化 IP 形象表达
 
针对 IP 形象进行主题换肤，是强化主题氛围最直接的设计形式。
 
自如将主题化 IP 融入到个人中心和头像等表达中，也能突出春节氛围。在金刚区图标设计中也将春节元素进行发挥，整体的氛围营造非常到位。
如何巧妙的呈现龙年氛围感
 
 
十、无处不在的云放烟花
 
燃放烟花爆竹才能体现出年味，在产品中的云放烟花也能让用户感受到乐趣。
 
高德地图无处不在的云放烟花，不仅让用户感受到烟花的乐趣，也能让云端年味变得更有氛围感。
如何巧妙的呈现龙年氛围感
 
 
十一、突出卡片设计氛围
 
卡片式设计通常较为简单，以白色卡片居多，特殊情况下也会进行局部氛围营造。
 
高德地图个人中心在春节期间，推出了拜年相关的版块，以春节氛围营造卡片设计，氛围感十足。
如何巧妙的呈现龙年氛围感
 
十二、营造底部标签栏氛围感
 
底部标签栏图标发挥是营造主题氛围的最佳选择之一，各大产品都会在这个区域进行设计发挥。
 
结合春节元素进行图标设计，或者在背景层面突出氛围等，设计表现形式非常多样化。
如何巧妙的呈现龙年氛围感

作者：黑马青年
来源：站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(841)

产品猎人（二）丨带你探索更多体验案例

博博

一、高德地图
高德地图的运动路线，运动者的福音来啦！
「高德地图」上线了全新的运动路线功能，用户可以在“步行”功能的“探索路线”中打开，里面有用户附近的运动路线，如“马拉松”“公园”等路线，路线上方有难度展示，用户可以根据自己的需要自行选择不同难度的路线，运动完成后还可以获得对应的徽章！这简直是过完年想减肥人士的必备功能
产品猎人（二）丨带你探索更多体验案例
二、微博
来看微博如何带你快速评论吃瓜～
当在「微博」浏览正文内容，并滚动到评论区查看时，停留一定时长后，会在左上角增加展示推荐评论气泡，并滚动展示，每5s替换一个评论，并展示特殊视觉呈现，点击气泡可展开该评论与相关跟评，这种快捷推荐，不打断用户继续浏览的同时，又增加推荐评论，激发用户参与感，让用户快速吃瓜
产品猎人（二）丨带你探索更多体验案例
三、拼多多
拼多多是如何在众多春节图标中脱颖而出
每年过年期间各大app尝试都会定制图标样式，来突出自己产品的活动和特点，如「淘宝-10亿红包」「京东-元宵抽汽车」「得物-不打烊」等，但拼多多的图标不是突出活动，而是突出用户过年期间购买电商的最大顾虑「正常发货」，不得不佩服拼多多真的是知道用户需要什么与诉求，一眼从众多电商春节图标中脱颖而出
产品猎人（二）丨带你探索更多体验案例
四、酷狗音乐
音乐产品的创意banner交互设计
在新版酷狗音乐的顶部banner处不再是普通的推荐banne，r而是采用了「功能+推荐」的形式，既满足产品功能又满足商业信息展示，同时在交互操作上，采用叠加的转场效果，增加流畅的同时增加有趣的使用体验
产品猎人（二）丨带你探索更多体验案例
五、转转
转转的首页细节文案设计
打开转转，进入首页后，在屏幕左上角增加展示品牌文案，当用户刷新页面后，文案也会跟随调整，分为「转转」「用户说」「官方验」，从多维度宣传转转品牌亮点，从细节文案中体验产品惊喜感，提升品牌认知与信任感
产品猎人（二）丨带你探索更多体验案例
六、去哪儿旅行
去哪儿旅行人格诊断设计
「去哪儿旅行」旅行人格诊断活动上新啦，可在去哪儿搜索「旅行人格」关键词，或首页右下角活动入口进入，报告整体的插画风格设计感十足，每张页面的插画都与文案紧密结合，在报告中向用户呈现各种功能的使用数据汇总，同时整体贴合人格主题，增加活动趣味性，在结束页展现自己“被确诊”的诊断结果与“具体症状”，大家也快来看看自己的“症状”吧～
产品猎人（二）丨带你探索更多体验案例
七、闲鱼
海鲜市场那些隐藏的动效设计
闲鱼APP的海鲜市场板块头部的图标入口插画增加点击交互动效，动效与图标结合真的很赞，这些让人意外的小动效让闲鱼APP体验到体验的乐趣，增强了用户互动性与趣味性
产品猎人（二）丨带你探索更多体验案例
八、京东
对于下架商品的巧妙设计
京东APP种当购物车商品处于已下架状态时，置灰此商品，并且会推荐相似商品，替换用户原本的下架商品，很好的挽留用户的删除行为，促进购买，相比老版本的单纯置灰更具人性化，并且避免用户流失
产品猎人（二）丨带你探索更多体验案例
九、猎聘
全新顶导给界面带来全新体验
新版的猎聘APP更新了全新的顶导UI背景，相比旧版的纯色背景，新版采用了渐变弥散风格背景，跟随主流APP设计趋势，赋予界面更加轻松愉悦的氛围感，营造出空间层次感的同时又不抢界面眼球，带给用户全新体验感受
产品猎人（二）丨带你探索更多体验案例
十、腾讯视频
南海归墟弹幕新玩法
在腾讯视频看热播剧《南海归墟》时，在一些特定情节会触发弹幕菜单，如胡八一等人调入海洞时，弹幕也会跟随洞口向下掉。当胡八一等人爬神树时弹幕也会变为向上攀升，并且变为红色，给参与互动的观众带来惊喜的同时，也与剧情巧妙融合，相得益彰。
产品猎人（二）丨带你探索更多体验案例
十一、芒果TV
芒果TV的趣味下拉刷新设计
芒果TV更新了新的下拉刷新样式，新版采用主IP为主体结合骑车和城市背景，让下拉刷新变得更加丰富，表现形式很新颖，让用户印象深刻，不仅加深了ip在用户新中的形象，同事也带来了趣味性的体验，降低用户等待中的焦虑情绪
产品猎人（二）丨带你探索更多体验案例
十二、美团外卖
美团外卖与灵动岛的结合发现了吗?
由于换了灵动岛手机，发现美团叫了外卖后，当用户滑出美团去到其他场景时，顶部灵动岛会展示当前的外卖状态，如“取货中”“送货中”等场景，并且会增加骑手icon和配送时间，我们可以发现露出的都是用户比较关注的信息，这样可以让用户不用打开美团就可以了解订单进度，这样的处理方式不仅可以提升对灵动岛的使用，还可以降低用户的使用成本
产品猎人（二）丨带你探索更多体验案例
十三、B站
B站的首页刷新逻辑原来是这样！
大多数产品的刷新功能是下拉刷新便可刷整个页面信息，而B站的刷新似乎有一些不一样，当用户刷新页面后会对应的刷新出一定量的信息内容，但不会全页刷新，当用户看完更新完的内容后，会出现用户上次页面中未预览的信息内容，避免用户遗漏，当然在旧信息上方会出现“刚刚看到这里，点击刷新”用户可以点击“刷新”继续出现新的信息内容，这样可以很好的避免已推荐到首页的内容却因为刷新等误操作未浏览。从而保证首页推荐信息的曝光量。
产品猎人（二）丨带你探索更多体验案例
十四、虎牙直播
来看虎牙如何提高弹幕互动！
虎牙直播当直播间相同弹幕大于一定数量时会触发热词快速发送功能，会在屏幕的弹幕流中出现热词弹幕内容与“+1”，来引导用户快速发出，用户可以通过“+1”发送弹幕，便捷的发弹幕方式，既可以降低用户发弹幕的操作成本，又可以快速的提升直播间弹幕量，从而拉高直播间热度，也增强了用户与主播之间的互动
产品猎人（二）丨带你探索更多体验案例
十五、腾讯视频
腾讯视频更新磕糖模式啦！
腾讯视频在一些特定的电视剧可开启磕糖模式，进入后会在右侧增加锁死功能，长按可触发动画，当剧情到高甜片段时屏幕会触发大磕糖动画，给予用户满满的甜度，让人不自觉的嘴角上扬
产品猎人（二）丨带你探索更多体验案例
 


作者：不是作家
来源：站酷
 

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(1117)

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档