需要频繁通过IM交流的专业投资经纪、交易员和客服等。

• 通过FinChat桌面端可灵活布局的WorkSpace功能，支持用户多线程工作；

• 通过Federation联邦通讯技术，实现各个私有化通讯节点间互联互通。

• 通过“应用市场”和插件化定制能力，将已有业务应用整合进终端和为交易场景定制特殊应用；

• 建立工作区，可同时打开聊天房间、应用、网站；
• 在同一窗口内同时显示多人聊天房间；
• 对不同客户进行分组聊天，有目标性地群发消息；
• 提升投资经纪报价效率；
• 提升新消息阅读效率；
• 个性化设置，适应各类用户使用习惯。

• 工作区：可同时浏览多窗口且收发消息，打开多个网页应用；
• 消息预览：在不打开房间情况下浏览最新消息；
• 群发助手：群发消息，提升同一消息转达的效率，无需重复操作；
• 消息订阅：设置关键词，收集每条关键消息。

• 紧凑：有效利用屏幕空间，提升一屏显示效率；
• 辨别性：加强关键数据、通知的识别度，避免错过重要消息；
• 高效：相关快捷键可快速完成消息发送操作；
• 个性化：可设置是否显示用户头像、消息提示强度、消息气泡等样式。

使用 principle 等动效软件，制作主要功能的系列任务和场景，让项目成员测试任务流程和用例。

记录成员在产品中的交互方式、面临的问题以及花费的时间；收集用户反馈和基于测试结果，制定改进产品的计划，为交互和 UI 设计做准备。

      使用 Axure 制作交互设计文档，撰写开发所需的：

• 用户需求和目标——描述项目的用户群体、他们的需求、目标和期望。
• 信息架构——描述产品的信息组织方式，包括内容层次结构、分类和标签系统。
• 交互规则和行为——定义用户界面的交互规则，包括错误处理、表单验证、导航规则等。

将跳转至新网页浏览交互文档

窗口默认尺寸：

height = 640px

width = 960px

窗口最小尺寸：

height = 540px

width = 640px

Title bar:

height = 22px

width = 100%

Side bar:

height = 100%

width = 40px

List:

height = 100%

min-width = 150px

Region:

height = 100%

width = 100%

Tab bar:

height = 40px

width = 100%

Gutters:

width = 2px

• 包含创建功能、搜索、聊天、订阅、通讯录、应用等；
• 还有户个人资料、设置、帮助等选项。

• 显示各个私聊、群聊和频道房间；
• 显示用户的网络连接状态，以确保用户知道他们是否在线；
• 可设置显示消息预览条数。

• 工作台可同时拥有多个分区，分区下同时可以有多个标签；
• 标签可承载聊天房间、聊天组和网页窗口等。

• 显示当前选定联系人的聊天记录；
• 支持文本消息、表情符号、链接等多种消息类型；
• 包含消息时间戳和已读/未读标记。

初次启动软件时，自动弹出模态弹窗教导用户如何使用工作台、创建分区。

通过引导弹窗，用户可以更快地了解应用的特性和功能，提高用户体验，降低学习成本。

用户稍后可在“更多”菜单中，可再次打开引导弹窗。

通过位于顶部的“展开”和“收起”按钮，用户可以灵活设置消息列表中显示的消息预览条数，最多可展示前3条信息。这个功能使用户能够便捷地在不打开聊天房间的情况下快速浏览对方发送的内容，从而提升用户体验和信息浏览的效率。

用户可以创建各种分区组合，支持多种工作场景：包括团队协作、文件管理、日程安排、视频会议、在线文档编辑等。用户可以在桌面端轻松管理团队成员、共享文件、安排会议和实时编辑文档，从而提高工作效率并促进团队协作。

用户可以通过悬停在侧边的消息按钮上，快速预览最新消息集合，并简便地将所有消息一键标记为已读状态。这项便捷的功能设计让用户能够快速了解未读消息内容，并有效管理他们的消息状态，提升了使用体验的便利性和效率。

桌面悬浮球为用户提供了便捷的消息浏览和一键标记为已读的功能，让用户轻松管理消息。同时，搜索框功能支持快速搜索联系人、群聊和聊天记录，让用户能够快速找到他们需要的信息，提升了用户使用软件的效率和便利性。

群发助手可以帮助用户在即时通讯应用中批量向多个联系人发送消息。通过群发助手，用户可以快速地向多人发送相同的消息，节省时间和精力。这种功能通常可以用于通知、推广、邀请等群发场景。

视频无法顺利播放时，请使用备用链接：点击跳转

在每个聊天房间中，用户都可以自行添加该房间内的专属聊天工具。

在聊天工具管理界面，用户可以新增、编辑、删除聊天工具；同时可以调整工具的排序，以便在聊天界面优先显示。

- 到底啦 -

用户可以创建多个专门收集各类消息的“订阅”。

例如创建指定文本的关键词、@某人，或有具体格式的文本，如证券代码等等。可以设置匹配任一消息内容或者必须匹配所有消息内容。

同时，可以指定消息的来源者，只有特定联系人所发送的消息才会收集。

所有订阅在会在“订阅列表”集中展示，列表展示订阅的名称，当有新消息时，会有消息气泡提醒；同时可以设置某个订阅免打扰，消息气泡置灰。

打开订阅详情，列表展示该订阅的所有消息；hover消息展示“查看上下文”的按钮，点击跳转到该聊天房间。

投资经纪目前使用QQ等软件向客户进行报价。报价更新频密、需要将最新报价发送给客户，投资经纪需要打开多个QQ窗口向多人、多次发送报价，操作繁琐且容易错漏。新消息阅读效率低下，需要打开每个房间查看消息。

现状

目标

FinClip 致力于帮助企业打造更高效的一站式数字内容管理平台，旨在降低内容与渠道所形成的内容矩阵管理成本。

企业可以将同一小程序化数字内容转编译并上架到多个社交平台和多个终端，从而实现高效管理和运营。

在产品设计之初，为了快速落地引入了 Element 和 Antdesign 的设计风格，虽然使用现成的设计系统可以帮助我们快速落地脑海中的想法，但无法展示产品的特色，用户很难第一时间建立起对产品的感知。其次，在迭代过程中，新增的需求在原有功能基础上不断堆叠，造成信息架构臃肿，功能层级复杂，缺少逻辑。

界面使用开源模板，缺少品牌辨识度；两端侧无明显区分

组件规范不完善，同一组件出现多种样式

页面布局呆板，浏览动线不够清晰

导航结构不清晰，信息层级混乱，用户获取信息效率低下

名词定义缺少统一性，部分功能较难理解

功能缺少使用指引，使用过程有困难

核心功能页面信息层级较深，进入功能页面不够便捷

功能流程过于繁杂，信息量大，学习成本高

主要、常用功能不够突出，效率低下

为了保持图标元素的平衡感，使用基础的网格尺寸来进行绘制图标，尺寸一般为：16、24、36、48px，四周留有 2px 安全区域；图标根据实际需要采用线、面两种风格，同时考虑在实际使用中保持一致性和清晰度。

在 1.0 版本之后，我们将对现有组件进行整理，并在 2.0 版本创建通用的交互/UI 设计规范；

在进行需求设计时，首先遵循设计规范的指导，若有新增或优化，在更新设计规范后，再由开发更新公用组件库；

若在业务中遇到目前存在的组件无法满足要求，按以下流程执行：

新的设计规范中，UI组件的某些参数不再写死固定值，而是写作某一变量，变量再赋予默认值，保证相同元素的样式一直，更便于管理和维护。

其中变量包括但不限于颜色变量、尺寸变量、字体变量、圆角变量等，每种类型的变量都有相应的命名规则和使用场景。

某个标题文字的颜色采用了下图中的“一级灰”，在代码层面，它的颜色将会是“$main-text-color”，而不是“#222222”；

而在另一份配置文件中，$main-text-color = #222222。

当需要修改“一级灰”的色值时，只需要修改配置文件中 $main-text-color 色值，就可以做到全局“一级灰”的色值同时变更，保证了所有的“一级灰”样式统一！

还可定义全局的圆角大小、分割线颜色/粗细、文字大小/粗细等等。

- 到底啦 -

摒弃 Ant Design 的设计风格，采用公司全新品牌色彩，以增强产品辨识度并建立品牌认知。

蓝色是冷静，信任、专业的代名词，其带来的“专业性”相关情绪，适合用作本次“开发中心”端侧的主题色。

绿色是体现平静、和谐，同时很有安全感；在本次设计中运用在了“数字中心”端侧。

单个图表占用一屏，筛选组件同样占据过多位置。

在一屏显示一个图表情况下，无法进行多图表之间的数据对比。

将几种数据类型整合至顶部的tabs栏，使整个页面的信息更有层次。

下方多个图表进行平铺，方便不同维度的数据对比，屏效更高。

规范定义了设计元素的标准，包括颜色、字体、布局、按钮样式等，有助于确保产品的一致性和专业性。

通过UI设计规范，团队可以更有效地协作和沟通，减少不必要的冲突和误解。规范还有助于加速设计和开发过程，提高工作效率，并最终提升用户体验。

同时，确保设计质量、统一性和可维护性，使团队可以更好地实现设计目标和用户需求。

将大部分弹窗改为右侧抽屉，让原来的弹窗拥有更多空间，纵向展示更多信息。

增加视觉锚点，更好地区分各个模块，避免混淆。

字段间间距优化，主次区分更明显，帮助用户快速浏览信息。

优化弹窗底部操作的层级、按钮样式，让关键操作有更好的引导。

旧版中，要进行小程序的管理操作，需要从小程序列表通过打开“详情”，再在二级页面进行小程序的管理操作。

新版中，只需要通过点击左侧列表，即可在右侧浏览小程序的信息，同时可以直接在右下方进行小程序的多个功能配置。

左侧的小程序列表，将不常用的功能收纳至“操作”列中的三个点，点击三个点再以菜单形式展示所有功能入口。

• 信息架构优化：将过去多个迭代堆砌的功能重新整理，信息架构更有逻辑性、条理性，导航结构主次更加清晰，功能布局更符合用户角色和任务场景，用户能够快速找到所需的操作项。
• 降低学习成本：增加辅助使用的教程文案，专有名词增加解释，统一不同场景下的用词（如：启用、开启、可用等等）；完善开发者文档，增加操作图文指引。
• 细节提升：统一规范各种场景的空状态、loading 状态（如：加载中的骨架屏、按钮提交状态等等）；增加过渡性动效（如：表格展开，数据增删的淡入淡出等等）。

- 到底啦 -

金易联金融新零售解决方案，基于凡泰极客FinChat合规即时通讯技术，实现客户、员工、服务和产品“在线”，为金融机构提供零售全流程的数字化管理，带来组织架构的优化和商业模式的创新。组织边界被打破，虚拟团队得以建立，实现金融机构线上线下一体化的整合营销和数据运营，为客户提供线上线下一体化的服务体验。

可视化数据工具赋能员工

提供员工销售线索

360°洞察客户动机

监测员工合规风险

挖掘企业潜在客户

量化员工服务质量

数据来自产品经理、销售经理采集，采集问题：

1.当前使用什么工具拓客，该工具有什么亮点，有什么改进空间？

2.在拓客过程中，你最想要什么功能？

3.在拓客过程中，有什么不好的体验？

……

• 保险行业受到严格的法规和监管，资讯必须合法合规；
• 需要花费时间和精力来赢得客户的信任；
• 产品常常涉及复杂的条款和条件，需要耗费精力来解释和说明产品。

• 银行业的数字化转型，银行经理需要适应新技术和数字化工具来拓展客户群；
• 客户对金融产品和服务的需求越来越个性化，银行经理需要更深入了解客户的需求。

• 业绩和客户群受到市场波动的影响；
• 投资领域涉及金钱和风险，需要展现专业知识和良好的业绩以赢得客户信任；
• 客户对投资和金融产品的知识有限，投资顾问需要花费时间教育客户。

• 奖励系统：提供虚拟奖励、成就和排行榜，激励用户完成特定任务或达成目标。
• 挑战和任务：设置有趣的挑战和任务，让用户参与互动并获得成就感。
• 社交互动：允许用户与其他用户竞争、合作或互动，增强社交体验。
• 进度追踪：显示用户在App中的进度和成就，激励用户持续参与并提升用户黏性。

打工人欢欢

健身达人欢欢

哭笑

心动

委屈

期待

愤怒

尴尬

- 到底啦 -