需要频繁通过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 和 Ant Design 的设计风格，虽然使用现成的设计系统可以帮助项目快速落地，但无法展示产品的特色，用户很难第一时间建立起对产品的感知。其次，在迭代过程中，新增的需求在原有功能基础上不断堆叠，造成信息架构臃肿，功能层级复杂，缺少逻辑。

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

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

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

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

名词定义缺少统一性，部分功能较难理解，学习成本高

功能缺少使用指引，使用过程有困难，摩擦感强烈

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

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

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

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

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

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

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

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

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

使用该方法其中一个最大收益，就是可以通过修改主题色变量值，实现一键变换主题色，帮助客户快速部署喜好的主题风格。

在界面中，当使用了与主题相关的色彩，在代码层面，它的颜色将会是“$theme-colour”，而不是具体的色值“#12AA94”；

而在色彩配置文件中，$theme-colour = #12AA94。

当需要修改“主题色”的色值时，只需要修改配置文件中“$theme-colour”的值“#12AA94”，就可以做到全局“主题色”的色值同时变更，保证了所有的“主题色”样式统一！

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

- 到底啦 -

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

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

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

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

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

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

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

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

通过UI设计规范，团队可以更有效地协作和沟通，方便产品经理、设计师高效地设计页面；还有助于加速设计和开发过程，提高工作效率，并最终提升用户体验。

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

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

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

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

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

旧版中：进行小程序的管理操作，需要从小程序列表通过打开“详情”，再在二级页面进行小程序的管理操作，页面需要跳转，无法对多个小程序同步操作。

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

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

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

设计师可以自行修改配置文件，实现 UI 样式的调整修改！（🙈设计师也要敲代码啦！）

• 使用 PAG 动效库实现细致的动画效果；在 AE 制作好动画，将 .pag 文件交付开发同学，大大减少动效开发时间。
• 在当前案例中，文件共 100 帧，代表进度条的 0-100，开发只需传入进度条数据，再设置播放具体帧数即可。

- 到底啦 -

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

• 可视化数据工具赋能员工

• 提供员工销售线索

• 360°洞察客户动机

• 监测员工合规风险

• 挖掘企业潜在客户

• 量化员工服务质量

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

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

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

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

……

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

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

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

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

海量专业服务、营销素材，辅助员工快速找到热文爆点，一键转发至社交平台，使员工成为社交平台话题发起者、价值传播者，提升个人认知度。

“分发追踪”“裂变雷达”“访客列表”“浏览历史”多维度追踪用户行为，帮助员工实时掌握社交圈潜在客户，让营销有的放矢。

通过可视化数据面板展示员工服务详情，有效量化员工工作质量，提升企业管理效率。

转发热度

销售线索

员工可以轻松打造个人主页，在工作室中发表观点、推荐产品、发布活动。便捷、持续地向客户传递专业价值，为客户提供及时、专业、全面的咨询服务。

依托于智能技术，从用户行为数据中挖掘用户的兴趣倾向和销售线索，并对目标用户进行匹配度评分、交互度评分及购买意愿评分，为员工提供销售预测。

不同的排行榜轮播

智能对账单的应用重点是数据展示，通过图形化的方法把投资历史和分析结果展示给投资者，帮助他们回顾和审视自己的投资行为。

投资顾问可以在服务投资者的过程中，随时调用起该服务，对投资者的行为进行分析，加深对投资者的理解。投资顾问也可以借助自主分析工具自动地生成对投资者的分析报告和投资建议书，提高投资顾问的专业能力和服务效率。

打工人欢欢

健身达人欢欢

哭笑

心动

委屈

期待

愤怒

尴尬

- 到底啦 -

• 首先选择 SD 大模型，再选择有特定风格化的 Lora 模型；
• 设置图片提示词和反向词，以准确地描述结果期望的内容和不希望出现的内容；
• 上传 AI 更容易识别的预处理的图片；
• 设置各类图片参数（分辨率、精细度等）；
• 设置关键的 ControlNet 参数：线稿、深度、色彩等，以更好地控制生成的内容；
• 开始生成内容；
• 使用其他设计软件对生成图片进一步优化。

ControlNet 设置：

线稿 Lineart

深度 Depth

色彩 Color

通过 ControlNet 场景的线条图和色彩网格，限制画面的结构和色彩方向；再选择不同的大模型和 Lora，让 Stable Diffusion 生成各种创意风格的场景图。

色彩 Color

线稿 Lineart