B端设计的文章和资料参考，缺少系统性的说明，这是我总结第五篇。本文主要阐述——数据录入&反馈&导航
本文为B端设计组件库的第五篇、也是组件库系列的最后一篇，下一篇将更新B端设计中常见的问题合集来结束本系列。
随着企业对于数字化转型的需求日益强烈，B端产品的发展也在加速。而B端组件库，作为产品设计与开发的基础构建模块，其重要性不言而喻。在众多的组件中，“数据录入”、“反馈”和“导航”是三个关键的组成部分，它们在很大程度上决定了产品的用户体验和工作效率。本文将对这三个组件进行深入的研究，探索其最佳的设计与实施策略。
2.1.1搭建步骤：
需求分析：首先明确数据录入的需求，包括需要录入的数据类型、数据量、频率等。
设计表单：根据需求设计合适的表单，包括输入项的类型（文本、数字、日期等）、布局、标签等。
添加验证：为了确保数据的准确性，需要为表单添加合适的验证规则，如必填项、格式验证等。
考虑用户体验：为了提高数据录入的效率，可以考虑添加一些方便用户的功能，如自动填充、批量导入等。
测试与迭代：完成设计后，进行用户测试，根据反馈进行必要的调整和优化。
2.1.2注意事项：
明确性：确保每个输入项的目的和要求都是清晰的，避免用户产生困惑或误解。
友好性：尽量简化录入流程，减少不必要的步骤和输入。提供友好的提示信息和反馈，帮助用户顺利完成录入。
响应速度：数据录入过程中，系统的响应速度也是一个重要的考虑因素。确保系统在处理大量数据或复杂操作时仍能保持流畅。
安全性：对于敏感数据的录入，需要确保系统的安全性，如使用加密技术、防止SQL注入等。
2.1.3常用场景：
用户注册：在注册新用户时，需要收集用户的基本信息，如姓名、邮箱、密码等。
商品管理：在电商或库存管理系统中，添加或编辑商品信息时需要进行数据录入。
订单处理：处理订单时，需要录入订单的相关信息，如客户信息、商品信息、支付方式等。
数据导入：对于一些已经存在的数据，提供批量导入的功能可以大大提高数据录入的效率。
报表生成：生成报表时，用户可能需要输入一些参数或筛选条件，这也涉及到数据录入的操作。
进一步提升B端组件库中“数据录入”类组件的设计和扩展能力：
1. 增强交互与动效设计 使用明显的交互动效，如微动画、过渡效果等，提升用户输入时的体验。 设计清晰的输入状态，如聚焦、失焦、有效、无效等，使用户明确知道当前输入的状态。
2. 提供多种输入格式和单位支持 允许用户选择不同的输入格式，如日期可以选择“年-月-日”或“月/日/年”等格式。 对于数字输入，提供多种单位支持，如百分比、货币、科学计数等。
3. 设计可扩展的验证规则系统 提供内置的常见验证规则，如必填、长度限制、正则匹配等。 允许用户自定义验证规则，以满足特定的业务需求。
4. 支持复杂数据结构输入 设计支持数组、对象等复杂数据结构的输入组件。 提供可视化编辑工具，方便用户直接编辑复杂数据结构。
5. 优化键盘导航和快捷键支持 允许用户使用键盘快速导航和输入数据，如使用Tab键在字段间切换。 提供常用的快捷键支持，如Ctrl+C/V进行复制粘贴。
6. 设计可配置的界面和布局 提供多种预设的界面风格和布局选项。 允许用户自定义界面元素和布局，以满足不同的视觉需求。
7. 集成智能提示和自动补全功能 使用机器学习算法为用户提供输入建议，减少输入错误。 对于重复输入的数据，提供自动补全功能，提高输入效率。
8. 支持多语言和本地化设置 为不同语言和文化背景的用户提供本地化支持。 允许用户自定义显示的语言和格式设置。
9. 建立组件使用分析和反馈系统 收集并分析用户使用数据录入组件的数据，了解用户的真实需求和习惯。 建立用户反馈系统，及时收集和处理用户对组件的意见和建议。
在B端组件库中，反馈类组件是非常重要的一部分，它们用于在必要时向用户反馈操作结果，做到合理有效的信息传达。
确定反馈类型：根据需要，确定要使用的反馈类型，如提示、警告、错误、成功等。
设计反馈样式：针对不同类型的反馈，设计相应的视觉样式，如颜色、图标、动画等。
编写组件代码：根据设计好的样式，编写反馈类组件的代码，包括HTML结构、CSS样式和JavaScript交互逻辑。
测试与优化：对编写好的组件进行测试，确保其在不同浏览器和设备上都能正常工作，并根据测试结果进行优化。
反馈一致性：对于同一类型的消息反馈，使用同一类型的组件，以确保用户在不同场景下获得一致的体验。
符合场景：不同的场景使用不同的反馈组件，例如系统主动推送消息类型的使用通知提醒框。
描述精确：合理而精确的消息提示文案描述，可以帮助用户高效理解。
可关闭性：对于一些非关键性的反馈，提供用户手动关闭的选项，避免打扰用户。
适应性：确保反馈类组件在不同屏幕尺寸和分辨率下都能正常显示和工作。
告警提示：当某个页面需要向用户提供告警信息时，使用告警提示。通常告警提示在页面上不会自己消失，用户可以手动关闭。
全局提示：在当前页面以轻量级提示方式告知用户操作的结果，使用全局提示。通常提示框在页面顶部居中显示并且会自动消失，不打断用户的其他操作行为。
通知提醒框：一般在系统主动推动通知的情况下使用，如服务到期、服务告警等。
加载提示：常用于数据加载中提示、操作中提示，Loading的文案可按照具体场景定义。
对话框：常用于比较强的二次确认弹框提示、或者展示一段比较长的消息。
在B端组件库中，导航类组件的设计和实现对于用户体验和系统效率至关重要。
确定导航结构：根据系统的信息架构和用户需求，确定导航的结构，如全局导航、局部导航、面包屑导航等。
设计导航样式：针对不同类型的导航，设计相应的视觉样式，如颜色、字体、图标等。
编写组件代码：根据设计好的样式和结构，编写导航类组件的代码，包括HTML结构、CSS样式和JavaScript交互逻辑。
测试与优化：对编写好的组件进行测试，确保其在不同浏览器和设备上都能正常工作，并根据测试结果进行优化。
清晰的信息架构：确保导航的结构能够清晰地反映系统的信息架构，使用户能够快速找到所需的信息。
易于理解：导航的标签和名称应使用用户熟悉的术语，避免使用过于专业的术语或缩写。
可扩展性：考虑到系统未来的发展，导航结构应具备一定的可扩展性，以便添加新的功能或模块。
响应式设计：确保导航在不同屏幕尺寸和分辨率下都能正常显示和工作，提供良好的用户体验。
遵循设计规范：参考行业通用的设计规范和最佳实践，确保导航的设计符合用户的期望和习惯。
全局导航：适用于整个系统的主导航，通常位于页面的顶部或侧边，提供对主要功能和模块的快速访问。
局部导航：适用于特定页面或功能的子导航，帮助用户在该页面或功能内快速找到所需的信息。
面包屑导航：显示用户当前所在的位置，以及从首页到当前页面的路径，方便用户了解自己的位置和返回上一级页面。
下拉菜单：当导航项较多时，可以使用下拉菜单进行收纳，节省页面空间并提高用户体验。
标签页导航：适用于需要同时展示多个内容或功能的场景，用户可以在不同的标签页之间切换以查看或操作不同的内容。
举例说明：公司内部不同系统，可采用的不同种类菜单导航，均可以设计先行。后续使用可进行调整
对于数据录入，关键在于简化用户的输入过程，同时提供清晰直观的界面。
例如，可以通过减少不必要的表单字段来简化录入流程，使用智能填充来加速输入过程，并通过即时验证和友好的错误提示来减少用户的输入错误。此外，考虑到移动设备用户的增长，优化表单的移动端设计，确保在小屏幕上也能轻松输入，是至关重要的。这可能意味着增加触摸友好的元素，如更大的点击区域和适应屏幕大小的布局。
在反馈方面，提供即时、直观且情感化的反馈对于增强用户体验至关重要。这包括在用户完成任务或遇到错误时提供明确的视觉和文字提示。
例如，操作成功时可以显示绿色的勾号图标和正面的消息，而错误则可以用红色的叹号和说明性的错误消息来提示。增加动态反馈，如加载动画，也可以提高用户体验，减少等待时的焦虑感。此外，提供易于访问的帮助和支持选项，例如在线聊天或用户论坛，可以帮助用户在遇到问题时快速找到解决方案。
对于导航，设计的重点是确保用户能够直观地理解如何在应用或网站中移动。
这涉及到创建清晰、一致的导航结构，突出显示主要功能，并使用易于理解的图标和标签。在移动设备上，这可能意味着采用汉堡菜单或底部导航条来节省空间。同时，考虑到个性化的重要性，可以提供自定义选项，让用户根据自己的偏好调整导航界面。 综上所述，C化设计强调的是提高易用性和用户体验，使得B端产品在保持专业性和功能性的同时，更贴近最终消费者的使用习惯。
后续还有一篇“问题汇总”，之后会整理一些最近两年的B端项目发布，感谢大家支持！！
其余篇章，可点击主页观看！！
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
形状设计可以影响整个界面的视觉效果。通过选择适当的形状和排列方式，可以创造出令人愉悦、易于使用和富有吸引力的界面。
在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设计中，精美形状设计的关键是深入理解用户需求，注重细节，保持一致性，勇于创新，不断提高技能水平。这样才能创造符合用户口味的界面，提升用户体验。简洁地说，好的形状设计来源于用户需求、细节、一致性、创新和自我提升。
以上总结仅代表个人观点，如有不足欢迎大家补充互相进步。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
作为一名合格的UI设计师，用好留白分割、线性分割、卡片分割，你的页面即成功了一半！
留白分割≧线性分割≧卡片分割
留白分割定义：指的是只通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），自然的将信息分组。（如上图）
间距留白是区隔单一信息元素的默认选择。（如下图）
使用原则：建议在不影响核心数据指标的前提下，条目之间尽可能采用留白分割，会让界面更清爽，浏览更沉浸。
留白分割的分类及适用场景：当条目信息层次较少（≦2）时，留白分割是比较合适的，当信息层次较多（≧3）时，留白分割既会浪费空间，也难以达到一目了然的分割效果。
线性分割定义：用线来分隔不同的信息内容。（大部分APP的分割线是1px粗细，黑色，不透明度12%）。
使用原则：分割线可以帮助用户理解页面是如何组成的，但过度使用分割线会造成视觉干扰，影响页面信息传达。
Android系统明确规定了分割线的使用原则：
1、微妙的：分割线在布局中应该很容易被注意到，但又不凸显。
2、次要的：只有当留白不能起到分割作用时，才采用分分割线。
3、少用的：谨慎使用分割线，用它来创建分组而不是分割条目。（如下图）
分类及使用场景：
1、通栏分割线：用于分割彼此完全独立的内容。
2、内嵌分割线：用于分割有锚点（头像或图标）的相关内容。
3、中间分割线：用于分割无锚点（头像或图标）的相关内容。
如果为了提高屏效，希望在一屏内尽可能多的展示信息，那么同样的信息布局，分割线带来的效果会更清晰（如下图）
卡片分割定义：卡片是一个由内容和操作组合而成的独立主题的面性容器①，它可以包含缩略图②、标题③、副标题④、副媒体⑤、文本⑥、问文字按钮⑦和图标按钮⑧，除了卡片容器本身，其他元素都是可选的，所有元素都以易于扫描和操作的形式放置在卡片上。
使用原则：
1、包含的：卡片是一个可识别的，单独的、包含内容的单元。
2、独立的：一张卡片可以独立存在，而不依赖于上下文环境。
3、不可分割的：一张卡片不能与另一张合并，也不能拆分成多张卡片。
分类及适用场景：
卡片根据左右是否有边距，可简单分为通栏卡片和非通栏卡片（如下图）。
从视觉效果上来看，由于圆角的聚焦效应，非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好，画面的分割感会更强。
1、当这个主题内部的内容已经有分割线时，建议采用卡片分割，让主题信息层次更加清晰。
2、当单个主题内部的内容类型较多，上下所占空间较大，建议采用卡片分割，以更好的圈定该主题的内容范围，给用户明确的内容边界感。
3、当需要扩展页面的横向空间时，暗示页面可以横向滑动时，需要采用非通栏卡片，利用横向内容连续性原则，帮助用户建立可以横向滑动的意识。
小结：
信息分割本身不是目的，分割方式的选择是为了让版面产生清晰的条理性，用悦目的信息秩序来更好的突出内容，达成最佳的信息传达效果，所以决策时，除了上述细节考虑因素，还要考虑整体版面效果和信息传达效率。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
今天分享B端后台管理界面欣赏，网上我们会搜集一些公开的国内外优秀的软件界面设计和大家分享。
蓝蓝设计也有很多精彩的案例，B端后台管理界面是我们最主要的工作方向之一，但大多数是保密状态的，所以不能在网上发。欢迎我们联系，请到www.lanlanwork.com欣赏更多案例作品。
#后台界面设计欣赏 #界面设计灵感 #设计外包 #UI设计公司 #b端设计接单 #B端设计
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计软件qt开发、软件wpf开发、软件vue开发
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
本文旨在分享从私募服务旅程着手，讲述如何用服务思维去重构金融品类服务动线，从全链路角度梳理服务容器的价值表达，提升服务效率，让用户感知到服务，推动设计落地实现。
前言：金融产品设计为什么引入服务思维？
金融行业特点
金融品类交易中，客户和平台产品再也不是「决策-购买-结束」这种买完即走的关系，产品体验路径贯穿投前-中-后、线下后台，用户体验链路漫长且复杂。尤其是私募品类，百万起投的用户门槛极高，高净值人群的需求更加千人千面，给体验升级带来很大的难题：
·渠道，产品不断趋同，如何让高净值客户选择你？为什么在雪球买私募？我们可以提供什么样的服务？如何缩短服务路径提升获客效率？
·私募品类理解、购买门槛极高，内容及优势难以让用户感知，用户几乎无法独立完成购买流程。
·高净值用户需求千人千面，如何精准服务用户和个性化服务？
除了金融产品本身之外，平台服务能力很大程度决定了客户的体验和选择；除了客户的使用体验、交易体验，服务体验是后续增长的核心关键点。所以如何让用户在雪球感知服务？如何把我们的好服务做显性化表达？我们的产品架构交互路径应该怎么去做？是体验侧需要亟待解决的问题。
先来看看用户眼中的好服务
既然要提升产品的服务体验，那用户希望提供什么样的服务？什么是用户眼中的好服务？雪球买私募有啥优势？
“多数受访者不知道财富顾问可以做什么，不知道雪球买私募有什么优势”
“多数受访者需要某种形式的推荐，自己很难选出各方面都满足自己要求的私募”
“越资浅的受访者，对财富顾问需要的程度越高”
-引用自雪球私募用户访谈
通过私募用户访谈，我们发现用户眼中的好服务是专业性强、立场中立、有温度、持续陪伴的，所以我们应该
·把平台服务价值外显、更具象的展现财富顾问专业能力
·为财富顾问提供更高效的管理工具
如何用服务思维做体验升级？
再来看看服务思维是什么？
是一种跨学科的思维方式，是用全局化、系统化的视角看待问题，通过对一段服务过程中的触点体验进行系统、有组织地挖掘优化，用设计思维去解决实际场景里的人与人的关系。
-引用Interaction Design Foundation
三个方向
服务体验升级的切入点我们可以抽象为3个方向：
01.产品服务化
以用户为中心，基于用户旅程去做创新；从被动响应到主动服务，是人到人的服务
02.服务品牌化
有序的把各个触点串联，打造有识别性，连贯统一、感知强的服务体验
03.服务产品化
把服务标准化、规范化、打包成具体的产品，实现快速复制
设计动作
01.服务动线重构
私募产品的购买门槛高，用户从作出购买决策到完成购买的链路非常长，我们希望客户通过与“财富顾问”建立连接，来辅助用户完成购买前-中-后的整条链路；以及帮助财富顾问提升效率，为后续的交易转化带来各种交易线索。在体验升级最开始的阶段，我们尝试在强调按钮操作，独立优化预约建联页面信息布局等做了很多次的迭代升级，数据并不理想，并没有提升用户建联率，需要跳出固有思维，从服务思维视角出发，基于用户旅程优先迭代人到人的服务。
从被动等待变主动服务
从用户需被动等待财富顾问联系转换为主动添加财富顾问；缩短触达链路，通过跨端跳端的体验去帮助用户简化流程链路。
补齐服务场景缺口
服务缺口是用户对服务的期待或需求和实际接受到的服务之间的落差（也是一个服务设计分析模型，用来探讨服务为什么发生），在设计探索阶段，我们可以梳理服务缺口，去找到设计切入点。
我们在重构的时候发现，用户仅在投中场景（私募详情页）才能联系到财富顾问，用户在发现场景下遇到类私募这种高门槛产品及内容时是急需一个触点去咨询财富顾问的-即在发现决策场景的沟通缺口缺失，所以我们在私募用户高频链路上都进行了服务容器的补齐。
02.服务价值显性化
我们在访谈私募用户的时候，很多客户都会提到雪球财富顾问的服务好，态度中立不营销；以及客户希望提供更丰富的产品，但其实雪球私募的产品数量、品类是丰富的。
37.5%的私募意向用户会在选择平台时选择推销感弱，能站在客户角度的平台；在访谈中，用户对雪球财富顾问的中立立场，弱营销感有较强感知
-引用自雪球私募用户画像报告
但我们并没有把雪球的服务优势在前端传递给用户，也从未系统性梳理过雪球私募品牌在用户整条链路的信息和表达，所以我们给用户传递的界面、视觉、文案是杂乱无章的。
我们需要自上而下的去明确我们的服务价值主张是什么，然后自下而上的从视觉设计、文案表达、交互等把我们服务价值在用户消费场景去做显性化透传。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
hello，大家好！今天蓝蓝要介绍的是我们近期的作品，两种不同风格的B端产品平台首页，一起来欣赏吧！
方案一：驾驶舱风格 采用驾驶舱形式，以生产为主的业务，使用户可以更直观，更全面地了解企业中所有指标的具体情况，以便快速做出决策。整体显示更为重要的实时数据，监控掌握大局观，及时对有问题的数据进行及时处理，板块区分明显，更方便找到相关数据。
方案二：平台主页风格 在初步调研产品框架的基础上，系统首页重构信息组织架构，丰富信息和数据，根据不同权限可调整页面信息增加办公效率。设计风格采用简约的设计语言，模块化布局，方圆并构的设计模式，界面强调可复用性和通用性，配色采用品牌色，品牌融合度高。
#ui设计
#B端产品 #UI界面设计 #设计案例分享 #北京ui设计公司 #ui设计
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计软件qt开发、软件wpf开发、软件vue开发
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
今天分享原创作品案例：医疗电子病历界面设计，
这是一个我们公司的设计师对自己理解自由发挥的界面设计概念稿，有此类需求的企业，欢迎和我们联系01063334945。
我们公司可以对外公开的界面设计不是特别多。
公司官网www.lanlanwork.com 上面有一些。
#后台界面设计欣赏 #界面设计灵感 #设计外包 #UI设计公司 #b端设计接单 #B端设计 #电子病历系统
#医疗软件
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计软件qt开发、软件wpf开发、软件vue开发
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
RecyclerView作为Android最常用的控件，相信大家都比较熟悉。而作为设计师的我们，又改怎么利用身边有限的资源进行简约高效的动效列表设计呢？本篇文章轻松带你玩转Android列表动效设计～
郑重声明：本文从设计角度说明Android列表动效设计问题，含前端技术，码农慎喷，我是萌妹纸～
相信设计师在设计到关于列表的动效问题的时候会很头痛，例如列表该如何出现，又该怎样结束～
对于码农哥哥来说也有很大的困扰，那就是，拿到设计稿的时候，对于动效师提出的各种五花八门的动效感觉就是：我去年买了个表。那么代码哥哥怎么能够更加高效的把设计稿实现呢？看完今天这篇文章相信你会有额外的收获～
首先在这里要感谢icon和页面的设计师璀瑶女士和码农哥cmychad（文章后面会提到）～
在我们公司项目开展的时候，分配给我的项目中有大量的列表设计及动效设计，开始的时候感觉无从下手，但是自从在github上发现码农哥哥cmychad的一个开源项目（项目名称：BaseRecyclerViewAdapterHelper）的时候，真的是欣喜若狂，在项目实施的时候，公司的安卓开发遍用上了这个开源项目进行开发～
po上cmychad码农哥哥的链接：
https://github.com/CymChad/BaseRecyclerViewAdapterHelper
那这个动效是怎样展示的呢？
从上面的GIF图可以看出
对于开发来说：优化Adapter代码（减少百分之70%代码）
添加点击item点击、长按事件、以及item子控件的点击事件
添加加载动画（一行代码轻松切换5种默认动画）
添加头部、尾部、下拉刷新、上拉加载（感觉又回到ListView时代）
设置自定义的加载更多布局（对于开发）
添加分组（随心定义分组头部）
自定义不同的item类型（简单配置、无需重写额外方法）
设置空布局（比Listview的setEmptyView还要好用！）
UI设计师从此只要考虑样式问题，开发也不怕各种古灵精怪的动效了～分分钟秒杀各类列表动效问题～
下面po出自己手上项目及用了这个开源项目实现的真机版的效果图：
效果图：
真机上的效果：
项目内很多列表的表现都是参照码农哥哥cmychad的项目：BaseRecyclerViewAdapterHelper
真的很好用～今天在谷歌浏览器里面逛的时候竟然发现在Google Play上也能看到～
po上链接：
https://play.google.com/store/apps/details?id=com.chad.baserecyclerviewadapterhelper
（我就是这么大方～哈哈～）
分分钟带你飞离扰人的列表动效问题～设计狮们，喊上你们的程序猿来试试吧～相信你会感叹，为啥我不早点用上BaseRecyclerViewAdapterHelper呢～
当然，除了感叹，我有一个不成熟的小建议～那就是你或许也可以在下面轻轻的点赞～我会很感动的！
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
细分移动互联网产品的设计模式
在讲解列表之前，我先跟大家介绍一下一个经典的交互设计框架，这个框架复合了一般用户的使用习惯，同时也是人们处理信息的基本模式——“首页——列表页——详情页”。
“首页——列表页——详情页”是互联网发展过程中逐渐形成的一般规律，谓之为互联网发展的经典框架也不为过。为什么呢？因为互联网最开始的时候，信息量并不大，所以有一个详情页就足够了。后来因为信息量逐渐增多，自然而然就会出现筛选信息的需求，因此就出现了列表页。后来，列表页再也无法承载指数级增长的信息了，所以搜索的功能应运而生，于是便出现了首页（入口）。
观察互联网早期发展的历史可以得到佐证：刚开始的时候有雅虎和美国在线等几个新闻站点就足以满足人们获取资讯的需求了，后来因为信息逐渐增多，所以急需筛选和搜索信息，于是谷歌就崛起了，成为下一个流量入口。中国互联网的历史进程也大致相同：互联网第一波浪潮是搜狐、新浪等门户网站，第二波才是百度。
可以说“首页——列表页——详情页”不仅仅可以应用到互联网产品的设计中去，它更是一种很重要的思维方式，可以应用于日常生活中的方方面面。
以上介绍了列表是如何产生的，也提到了用户在列表页上的主要行为就是对信息进行筛选和比较，以便让其做出决策，决定进入哪个具体条目去了解相关详情。因此列表页承载的是用户对下一层信息的概况了解，是详情页信息的缩略版。
如果列表中的条目比较多，那么列表就会包含某些排序规则或分组规则，这样会让列表中条目的呈现方式规律一点，以便用户快速查找。有的会按照时间顺序来排序，有的会按照字母表来排序，也有的会用标签进行分组等等。假如条目很多，一个页面放不下，那就需要分页，所以列表页底部常常会出现翻页器。有时也会出现“无限加载”这种处理方式，例如花瓣。假如信息更多的话，那就需要加入搜索功能了。
好了，接下来我们要介绍是：列表的具体形式。
• 垂直式列表 •
垂直式列表是列表的最基本形式，无论是移动端还是PC端都可以看到这种布局方式。这是一种非常干净和清晰的列表呈现方式，用户非常容易理解，也很容易找到自己想要的目标。
需要注意的是，用户的浏览习惯一般都是“从左往右，从上往下”的，所以垂直式列表一般采用的都是左对齐的样式。
再者，设计师在设计的时候需要平衡好条目的详细程度和条目数量之间的关系。因为条目内容越详细，条目所占空间就会越大，相应地单屏上条目的显示数量就会越少。具体情况还得从需求出发。
例如淘宝订单列表页，对于用户而言，用户往往会关注商品订单的交易状态、物流状况等等。因为条目的内容相对详细，所以用户就没有必要去查看订单的具体详情，这样会有效地缩短用户的操作路径。但是把垂直式列表应用到通讯录中，情况就不同了，此时用户必然是希望可以同一时间内浏览足够多的联系人，以便快速找到目标，所以通讯录条目的信息一般都很简洁，一般就只有“联系人头像”和“联系人名称”。
需要补充的是，垂直式列表一般有以下三种模式：标准模式、图文结合模式以及控制模式。
• 横向式列表 •
所谓的横向式列表也就是我们常说的轮播图和走马灯，它也是APP中一种很常见的列表形式。这种形式只着重展示一个条目，往往位于页面的上方作为广告位展示，用户通过左右手势滑动来聚焦到当前的内容。
一般来说，横向式列表的条目数量不能太多，控制在5~7个以内为好，以避免用户操作疲劳。在设计上可提供暗示，例如显示下一张的部分内容，或者添加分页指示器，这样让用户在浏览条目时保持清晰的方向感和对数量的认知。
• 网格式列表 •
刚才介绍了纵向维度以及横向维度的列表，那么在移动端还有一种兼顾了两种维度的列表的形式——网格式列表。这也是一种非常常用的列表形式，网格式列表基本上都是以展示图片为主，偶尔会配合一些文字说明。假如想要展示大量的图片，那么网格式列表无疑是最好的选择。
相比较网格式列表与垂直式列表，前者大多是用于展示文字信息，界面会显得比较干净有效。后者则更具情感魅力，会让界面更加富有感染力。
这里还要向大家介绍的是网格式列表的变体——瀑布流。标准的网格式列表是“田字格”的形式，排版上还是有一丝严谨和规范的意味，而瀑布流的排版样式则显得较为随意，常见于一些图片浏览类的软件，如花瓣等。
• 总结 •
文章开头提到“用户在列表页上的主要行为就是对信息进行筛选和比较”，也就意味着列表页有着“分流/导航”的作用。
其实以上三种列表形式在某种意义上来说也是三种导航模式。垂直式列表对应的是列表导航，横向式列表对应的是走马灯导航，网格式列表对应的是图示导航。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
蓝蓝设计的小编 http://www.lanlanwork.com