首页

Paynew电子支付平台UI/UX设计解析

丽洁 移动端UI设计文章及欣赏

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。
 
以模块化服务卡片、跨端一致性与信任可视化构建数字金融体验
微信图片_20260828104652_605_1.jpg
面向产品经理与资深设计师的案例研究

导读|以模块化服务卡片、跨端一致性与信任可视化构建数字金融体验。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

 

一、产品定位:先回答系统替谁解决什么问题

Paynew面向土耳其及中东市场的小微企业主、个体商户与日常支付用户,通过“虚拟POS、链接收款、批量转账、多语言支持”等核心功能,建立一站式数字支付入口。产品希望让非技术背景的商户也能在30秒内完成收款设置,并在桌面端与移动端保持操作逻辑一致,降低学习成本。其核心价值主张是“安全、简单、可扩展”,目标用户包括:
  • 个人用户(日常转账、缴费)
  • 小微商户/手艺人(无实体POS机,需线上收款)
  • 电商创业者(需集成支付网关)
  • 金融服务寻求者(如多币种账户、财务分析)

微信图片_20260828104645_604_1.jpg

二、信息架构:把功能转译为用户的工作顺序

首页以“服务卡片矩阵”为核心,顶部导航连接“首页、解决方案、关于我们、博客、联系”等模块。每个服务卡片(如Sanal POS、Link ile Ödeme Al、Toplu Para Gönder)均配有图标、简短说明与行动按钮,形成“看到即理解、点击即操作”的直觉路径。移动端压缩为“账户概览+快捷操作+交易记录”三栏结构,突出余额、最近交易与一键收款功能。官网内页则采用“场景化分步引导”,如“如何将业务数字化”页面,通过图文步骤+视频演示+FAQ折叠区,逐步引导用户完成从注册到首次收款的闭环。

微信图片_20260828104701_606_1.jpg

三、关键交互:从浏览信息走向完成任务

服务卡片点击后应直接跳转至对应功能的配置页或操作页,避免中间跳转层。例如,“Sanal POS”卡片点击后应进入虚拟POS设置界面,包含费率、结算周期、API密钥等字段,而非仅展示介绍页。移动端“Yeni Ekle”按钮应支持快速添加新收款方式或联系人,而非仅跳转至空白表单。官网“Hesap Oluştur”按钮应支持邮箱/手机号一键注册,减少填写项。所有操作路径应支持“返回上一步”与“保存草稿”,避免因误操作导致数据丢失。

微信图片_20260828104709_607_1.jpg

四、视觉系统:品牌表达必须承担信息语义

主色调采用高明度蓝色(#2A5CAA),形成金融安全与科技感的联想;辅助色使用浅灰与白色,营造干净、专业的视觉氛围。3D插画风格的人物与设备(如手持手机、POS机)增强亲和力,避免传统金融产品的冰冷感。卡片式布局+圆角设计+微阴影,使复杂功能模块显得轻盈易用。品牌Logo“Paynew”在所有页面顶部固定显示,强化品牌认知。关键行动按钮(如“Başvuru Yap”、“İletişime Geç”)使用深蓝填充+白色文字,形成视觉焦点,引导用户转化。

微信图片_20260828104716_608_1.jpg

五、面向产品与设计团队的可复用价值

支付类产品必须把“功能、信任、效率”三者绑定。产品经理应围绕“收款-结算-对账-客服”设计对象关系:用户发起收款 → 系统生成链接/二维码 → 客户完成支付 → 资金入账 → 自动生成报表 → 客服支持入口。设计师则要让同一功能在Web端、App端、平板端保持一致的图标、文案、按钮位置与反馈动画,避免多端切换产生认知断裂。例如,“Sanal POS”在Web端是卡片入口,在App端应是底部Tab之一,在平板端应是横向滑动模块。

微信图片_20260828104723_609_1.jpg

六、专业审视:仍需补齐的体验边界

3D插画虽提升亲和力,但可能影响加载速度,应提供静态图 fallback 选项。浅色背景在强光环境下可能降低可读性,需验证户外使用场景。服务卡片的“更多”按钮应明确展开内容,避免用户误以为无更多内容。多语言支持(如土耳其语、英语、阿拉伯语)需确保翻译准确且排版适配,避免文字溢出或截断。离线模式下应支持本地缓存交易记录与草稿,网络恢复后自动同步。

结语:设计的最终判断标准是业务与使用价值

Paynew的设计方向不是把支付界面做得更花哨,而是让每个功能卡片都成为用户业务的加速器。当每个商户都能在30秒内完成收款设置、每次交易都能清晰看到资金流向、每个问题都能快速找到客服入口,数字支付界面才真正从工具走向伙伴。

兰亭妙微ui设计公司分享:如何从 IP 视角重新理解品牌

清阳 平面设计

兰亭妙微ui设计公司分享:冰墩墩 “一墩难求”、卡塔尔世界杯吉祥物拉伊卜刷屏出圈,卡通 IP 已经成为数字时代品牌连接用户的重要载体。但很多人对 IP 的认知存在误区:简单将 IP 等同于虚拟卡通形象。打造虚拟形象门槛高、投入巨大,短期很难看到商业回报,这并不是 IP 的全部真谛。

一、溯源 IP:从人文视角看懂 IP 的起源

从商业角度看,IP 是具备生命力的知识产权。如同生命体,它可以拆解为外在形体与内在精神两个部分,我们可以顺着 IP 的前世、今生、未来,读懂它的底层逻辑。

IP 的源头来自日本二次元文化。在社会高压的环境之下,大众理性诉求被压抑,感性情绪亟待释放。创作者把情绪、情感寄托于漫画创作,在区别于现实世界的二维载体中完成情感宣泄,二次元就此诞生。因此 IP 从诞生之初,就承载着大众的情感表达诉求。

image.png

回看全球高收视少儿动画,无论是《猫和老鼠》《奥特曼》,还是《海贼王》《熊出没》《大力水手》,大多属于热血、英雄向的内容。核心逻辑就是制造情绪共鸣,用内容包裹情绪价值,完成和受众的情感沟通。

而 IP 真正在国内商业领域爆火,始于 2014 年。它的核心商业价值,是破解流量困局

二、流量破局:商业视角拆解 IP 的核心价值

线上电商生态里,平台广告位资源有限,商家数量却高达数百万,流量成本持续走高。拿不到优质流量位,不少商家被迫压缩品质,市场充斥低价低质产品。

线下商业同样难逃流量困境:流量成本包含金钱、时间、选择三重成本,房租是最大支出。产品成本 1 元,往往要卖到 5 元才可以覆盖房租、人工、库存实现盈利。高倍率定价之下,却未必能给到对等的体验,催生 “高价难高质” 的行业痛点。

无论线上线下,消费者的底层诉求始终是物美价廉。流量红利消退,IP 就成为破局的关键抓手。

经典案例:熊本熊,一座城市的 IP 逆袭

image.png

日本熊本县,凭借 IP 熊本熊实现城市破圈。当地政府希望借助 IP 拉动旅游、招商引资,提取熊本县城市代表的黑色,搭配极具亲和力的腮红,塑造出熊本熊这一经典角色,担任熊本县 “销售部长” 与城市代言人。

它不只是一张静态海报:熊本熊频繁出现在各类公开场合,产出表情包、壁纸、头像、人偶周边;主动制造社交事件,街头互动、趣味公关发布会、人偶线下公益行动,制造大量惊喜、故事与社交传播素材,让大众自发分享。

image.png

经典的 “熊本熊失踪” 危机公关,县长亲自下场参与喜剧化的发布会,进一步强化熊本熊和熊本县的强绑定。当形象深入人心之后,正式开启商品化授权运营。

数据印证 IP 的商业能量:2011‑2012 年,熊本熊带动观光、商品销售带来1244 亿日元经济连带效益;2014 年授权商品销售额达 643 亿日元。熊本县在日本城市好感度排名从第 18 位跃升至第 5 位,后续 IP 授权业务拓展至全球 13 个国家和地区,成为城市 IP 运营教科书级案例。

三、IP 重构品牌:跳出 LOGO 与名称的传统品牌逻辑

image.png

传统品牌传播,是名称、LOGO 主导的时代。一轮营销战役结束,传播就随之落幕,品牌资产很难沉淀。

IP 的出现改变了这套逻辑:它可以把所有传播获取的注意力,全部沉淀到 IP 资产包中。即便企业遭遇经营危机,IP 本身依旧具备极高的商业价值。

品牌 IP 资产金字塔揭示全新的品牌逻辑:品牌资产不再局限名称、LOGO、口碑,IP 资产正式成为品牌资产的重要组成部分。IP 可以完整承接品牌与消费者的全维度沟通:传递品牌定位主张、提升识别亲和力、承接跨界合作、衍生品开发、危机公关、线下活动授权;同时完成视觉传达、用户沟通、产品延伸、IP 授权四大板块落地,直达消费者与合作商户群体。

实战案例:鲨鱼菲特 —— 新锐轻食品牌的 IP 内容战略

image.png

鲨鱼菲特作为国内新锐轻食品牌,面向追求健康生活的年轻群体,提供科学配比的健康食品。品牌选择把 IP 人格化,将品牌精神全部注入 IP 角色,让 IP 成为细分品类与品牌的代言人,传递健康积极的生活态度。

整套品牌升级分为四大系统:视觉识别系统、IP 超级符号系统、包装系统、内容营销系统

image.png

品牌金字塔清晰锚定定位:鲨鱼菲特,500 万年轻人的健康选择;品牌人格是爱吃、勤练;价值观是质量第一、追求极致;调性是有活力、有趣、有颜值、有态度。

IP 人设深度贴合品类:鲨鱼,食物链顶端的生物,设定为挑剔的美食家。拥有强大免疫力,对食物品质高度挑剔,追求营养精准平衡。人物档案完整定义性格、能力、小缺点,形成完整角色世界观。

image.png

围绕人设搭建完整 IP 视觉识别体系:IP‑LOGO 组合、全套面部表情、GIF 表情包、主题插画场景、周边衍生品、包装物料、线下广告物料,实现全渠道统一输出。

image.png

内容时代,IP 不止是静态视觉符号。鲨鱼菲特搭建短视频内容矩阵,以 IP 形象产出科普、趣味剧情短视频;还推出免费商用定制字体,沉淀品牌文化资产,实现低成本社交裂变传播。

四、IP 时代,品牌传播的底层变革

image.png

前二次元时代,品牌面向 85 前群体,依靠电视、互联网、平面媒体做大众媒体单向传播;品牌以静态 LOGO、大片为主要呈现方式。

进入二次元 IP 时代,沟通对象转向 95 后、00 后群体。传播方式由单向灌输,转向品牌人格化的多维交互,静态视觉与动态 IP 内容相结合,传播载体拓展为二次元内容、表情包、动画短视频。

IP 资产给企业带来四大核心价值:

  1. 将 IP 升级为企业资产,打造自有 IP 产品线,掌握品牌主动权;
  2. IP 直接对接消费者,构建品牌隔阂,拉开和竞品的差距;
  3. 以 IP 搭建商业闭环,拓展多元变现路径;
  4. IP 成为企业核心资产,充当情感纽带,建立用户心智安全感。

IP 是移动互联网跨人群传播的高效工具。依靠表情包、头像、短视频、漫画等形式,依托趣味内容实现用户自发传播,降低传播成本。

放眼未来,品牌 IP 有三条发展路径:

  1. 科技融合:成为虚拟世界与现实世界的连接桥梁;
  2. 生态构建:搭建行业整合平台,完成产业链链路打通;
  3. 垂直深耕:聚焦细分赛道打磨,IP 运营能力,远比 IP 形象本身更重要

完整的品牌 IP 商业生态,需要 IP 文化研究院做顶层架构,向下拆分品牌体系、IP 主题、文化体系、文化孵化器四大板块,覆盖形象规范、衍生品、主题活动、动漫影视、同人孵化、自媒体等多元业务,形成完整商业闭环。

 

 

 

 

 

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

 

image.png

兰亭妙微ui设计公司分享:从海外主流产品拆解:8 条底部导航栏(Tab Bar)实战设计技巧

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:移动端底部导航栏(Tab Bar)是 App 最核心的导航组件,大量海外成熟产品沉淀了很多可复用的设计思路。本文结合海外头部案例,拆解底部导航栏的底层逻辑与落地技巧,帮设计师理清设计思路,规避常见体验坑点。

在正式学习设计方法之前,先思考两个核心问题,做设计不要上来就直接套用 Tab Bar:

问题 1:你的产品真的需要底部 Tab Bar 吗?

image.png

市面上微信、淘宝、美团等大量 App 都在用底部导航,但Tab Bar 并不是所有应用的标配

像系统日历、计算器、Uber / 滴滴这类产品,就没有使用底部 Tab 栏。是否采用底部导航,要结合产品业务场景、信息架构综合判断,不要盲目跟风主流产品。

问题 2:为什么要使用底部 Tab Bar?

image.png

底部导航栏的核心价值,是降低用户跳转成本,实现页面之间快速切换。借助 Tab Bar,用户可以一键直达核心模块,提升整体操作效率。

明确这两个前提后,下面结合案例分享 8 个可落地的设计技巧:

1. 只承载产品最核心的功能入口

image.png

底部导航栏的空间十分有限,切忌堆砌过多功能标签,造成导航臃肿混乱。优先放置用户高频访问的模块,搜索这类高频操作,非常适合收纳到底部导航,加速内容检索。

案例 Spotify Spotify 的底部导航仅保留四大核心入口:首页浏览、搜索发现、个人音乐库、会员专区。首页负责内容消费,搜索用来挖掘新歌与播客,音乐库存放收藏歌单,会员入口便于用户完成付费转化,全部都是音乐播放器场景下最高频的能力。

2. 控制标签数量:4‑5 个为最优区间

行业主流 App 的底部导航普遍设置 4‑5 个标签。这个数量既能覆盖核心业务,也保证按钮点击热区充足,避免标签过多导致按钮过小、误触率升高。 同时导航栏可以承载轻量状态提示,比如消息红点、数字角标,直观向用户推送状态。

案例 Pinterest Pinterest 底部仅设置 4 个标签,按钮尺寸充足,点击容错率高。消息标签搭配数字角标,实时提示未读消息;搜索常驻底部,用户可以在信息流和搜索结果之间无缝来回切换。

3. 灵活选择标签形式:图标 + 文字 / 纯图标

 

底部标签分为两种常用形式:图标搭配文字纯图标

  • 图标 + 文字:通用性最强,图标做视觉识别,文字做语义解释,适合绝大多数产品,降低理解门槛。
  • 纯图标:仅适用于图标语义高度通用、用户认知已经形成共识的场景;如果图标表意模糊,严禁省略文字。

案例:宜家 App & YouTube 宜家 App 使用纯图标导航,主页、分类、个人中心的图标符号大众认知度高,即便没有文字,用户也能快速理解含义。 反观 YouTube,导航图标表意相对抽象,如果去掉文字,用户很容易混淆功能,因此必须搭配文字说明。

4. 标签文字力求简短精炼

image.png

导航栏文字一定要简短清晰,文字过长会挤压图标空间,还会出现文字截断、换行的问题,干扰用户识别。对于重点操作按钮,还可以去掉文字,强化视觉焦点。

案例 TikTok TikTok 底部导航标签文字全部极简化,中间发布按钮直接去除文字,放大图标视觉权重,引导用户创作,兼顾美观度与引导性。

5. 原则:尽量不要隐藏底部导航栏image.png

底部导航承载着 App 最重要的模块入口,常规场景下应当常驻页面底部,滚动页面时也不隐藏。一旦导航消失,用户会失去位置锚点,无法快速切换页面。

特例:Pinterest Pinterest 滚动页面时会收起底部导航。这是特殊场景下的取舍:产品以图片流为核心,隐藏导航是为了减少遮挡,给图片留出更大展示空间。该方案属于个案,不建议通用产品直接照搬。

6. 清晰反馈用户当前所处位置

image.png

导航不只是用来跳转,更要告诉用户「我现在在哪」。通过选中态样式区分当前页面,避免用户迷失在产品内。常用方式:图标变色、样式填充、下划线指示等。

案例:多邻国 & Headspace 多邻国,选中 Tab 图标做色彩填充,通过视觉变化区分激活状态,让用户一眼识别当前所在板块。 Headspace 采用底部下划线跟随切换的方案,选中选项下方出现标识线条,切换 Tab 线条同步移动,位置感知明确。

7. 依靠用户反馈迭代导航方案

image.png

导航栏设计不是一次定稿,需要数据和用户反馈持续打磨。设计师需要调研:哪些 Tab 点击频次高、哪些入口几乎无人使用,到底适配 4 个还是 5 个标签,基于真实用户行为做调整。

案例 Pinterest Pinterest 早期版本的 Tab 栏和市面产品大同小异,团队收集大量用户行为数据与反馈后,迭代优化导航结构,打磨出适配自身用户习惯的底部导航。持续迭代,是产品体验优化的关键。

8. 利用 Tab 栏承载状态更新提醒

image.png

底部导航栏不止承担跳转职能,还可以借助红点、状态标记,向用户推送外部变化,无需进入页面就能感知新动态。

案例 Twitter Twitter 在产生新内容时,首页图标会出现更新原点提示,唤醒用户点击查看新内容。同类的设计,也广泛应用于 YouTube、Pinterest 等海外产品。

转载:优设

 

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

 

image.png

兰亭妙微|B 端 UI 设计师的交互文档应该怎么写?

涛涛 B端ui设计文章及欣赏

交互文档该怎么写,是很多 B 端设计师每天都会遇到的问题。兰亭妙微在大量 B 端项目中深刻体会到:画交互原型只是第一步,一份规范、清晰的交互文档,才是团队高效协作的关键。今天我们系统梳理交互文档的撰写方法,帮你完成一次深入的扫盲。

兰亭妙微|C 端和 B 端 UI 设计价值有何差异?

涛涛 设计思维

C 端设计追求极致的用户体验和视觉震撼,每个细节力求完美,让人一眼被吸引;B 端设计更注重功能完善和信息清晰,或许没有华丽外观,但每个功能、每个布局都经过深思熟虑,确保用户高效准确地完成工作。今天,兰亭妙微带你深度剖析 C 端与 B 端在设计价值上的差异与碰撞。

兰亭妙微ui设计公司分享:PC 与移动端有哪些交互差异?一篇读懂多端设计细节

清阳 交互设计及用户体验

前言

兰亭妙微ui设计公司分享:PC 端与移动端是当下最主流的两类人机交互载体。经过多年发展,两者各自形成成熟的交互范式:PC 依托鼠标 + 键盘完成操作,移动端以触屏手势为核心。

即便是完全相同的业务功能,落地到不同设备上,交互细节往往需要针对性调整,以此适配硬件特性,保障统一且舒适的用户体验。本文将从真实设计案例出发,拆解两者细微却关键的交互差异,帮我们理清设备、用户行为与界面设计三者之间的内在关系。

五大典型交互差异案例

1. 输入框清除按钮

image.png

清除按钮,作用是一键清空输入框内已填写的全部内容。输入内容不为空时,按钮展示在输入框尾部,点击即可清空文本。

PC 端依靠键盘退格键,就可以快速删除文字;但移动端触屏删除字符效率偏低,逐字删除操作繁琐。因此清除按钮在移动端非常普遍,登录页、搜索框是最高频的使用场景,帮助用户快速纠错,大幅提升操作效率。

image.png

反观 PC 网页端,单行输入框很少内置清除按钮,但 “一键清空” 的需求依然存在,大多迁移到批量场景中:例如 B 端后台筛选组件的「重置」按钮、多选组件内的批量清除选项,用来一次性清空多条筛选条件。

2. Hover(鼠标悬停)状态

image.png

鼠标悬停是 PC 端极具代表性的轻交互。当光标悬浮在组件上方,元素会发生状态变化:既可以唤起 Tooltip 提示文字、展开二级下拉菜单,也能通过样式变化,暗示用户 “该区域支持点击”。

image.png

而移动端没有鼠标光标,手指接触屏幕即触发点击,不存在 “悬停” 这个中间状态。组件状态只能从常态直接切换为按压态。 这就对移动端设计提出要求:按钮、可点击控件,必须依靠视觉样式明确表达可交互属性,不能依赖 hover 做提示。

原本依靠 hover 展开的二级导航、悬浮菜单,到移动端就要改成点击唤起弹窗,或是 Tab 标签切换的形式完成跳转。

3. 按钮操作 VS 手势操作

image.png

手势是移动端得天独厚的交互优势;PC 端受限于键鼠逻辑,更多依靠实体按钮承载功能。

举几个常见场景:移动端信息流普遍使用下拉刷新,把刷新行为和向下滑动手势结合;但 PC 端想要刷新局部内容,就必须提供独立的刷新按钮。 轮播图也是同理:PC 大多设置上一页、下一页点击按钮完成切换;移动端用户更习惯直接左右滑动切换图片。图片缩放、视频音量调节也遵循这套逻辑。

背后本质原因:鼠标可以精准定位到很小的按钮;移动端手指点击精度有限,屏幕空间宝贵,用手势替代按钮,既节省界面空间,也贴合用户操作直觉。

4. 右键菜单 VS 长按唤起菜单

image.png

PC 端习惯使用鼠标右键唤起更多操作菜单;移动端对应的等效交互是长按

拿文本编辑举例:PC 端需要先选中文字,再点击右键调出剪切、复制菜单;移动端选中文本后,会直接弹出操作面板。 因为移动端缺少 Ctrl/Cmd 这类快捷键组合,如果选中文本后还要求用户再长按,极易误触,直接弹出菜单,能减少操作步骤,降低出错概率。

5. 弹窗设计逻辑

image.png

PC 屏幕空间充足,弹窗类型丰富,Tooltip、消息提示、抽屉、非模态通知都可以灵活使用,很多反馈提示不会阻断用户当前操作,体验更流畅。

移动端屏幕狭小,弹窗会占据屏幕绝大部分区域,会强制打断用户操作,因此弹窗的使用需要更加克制谨慎。

除此之外,弹窗内的按钮排布也存在平台习惯差异:移动端、macOS 系统,确认类强引导按钮通常放置在右侧;Windows 系统则将确认按钮放在左侧,设计时需要尊重系统原生交互习惯。

 

转载:优设

 

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

 

image.png

 

CFI交易平台全生态UI/UX设计解析

丽洁 系统UI设计文章及欣赏

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。
 
以AI辅助、数据可视化与多端一致性构建新一代数字投行体验
微信图片_20260828104631_603_1.jpg
面向产品经理与资深设计师的案例研究
 
导读| 本方案展示了CFI从单一交易工具向“零售+机构+教育”全生态平台的转型。本文不止评价其现代感的深色模式或3D样机包装,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面,系统拆解这套设计方案如何平衡复杂的金融逻辑与极致的用户体验。

一、产品定位:先回答系统替谁解决什么问题

CFI的设计改版不仅仅是界面的翻新,其核心在于解决传统交易软件“功能堆砌、认知负荷高、服务割裂”的痛点。
  • 面向C端交易者: 产品致力于降低入门门槛,通过“个人仪表盘”和AI助手(Kaiana),将复杂的市场数据转化为可执行的洞察,让新手敢交易,老手交易快。
  • 面向B端与生态: 通过区分Retail App、CFI Prime(机构版)和Web官网,构建分层服务体系。设计不仅要展示行情,更要传递“合规、透明、受监管”的品牌信任感,这是金融产品的生命线。微信图片_20260828104624_602_1.jpg

二、信息架构:把功能转译为用户的工作顺序

设计方案展现了极强的场景化信息组织能力,而非单纯的功能罗列:
  • 首页即驾驶舱: App首页打破了传统的列表式布局,采用模块化Widget设计。用户可以根据自己是偏向“看盘”、“学习”还是“资产管理”,自定义添加、移除或重排组件。这种架构将主动权交还用户,实现了“千人千面”的信息流。
  • 资金流与交易流的解耦与重组: 在“Money Flows”板块,设计将存款、取款、历史记录从复杂的菜单中剥离,形成独立的线性任务流。而在“Trade & Portfolio”中,则将图表、下单面板、持仓列表紧密聚合,符合交易员“观察-决策-执行”的心流模型。
  • 跨端体验的一致性: Web端侧重于品牌叙事、信任背书(如展示牌照、赞助商)和宏观产品介绍;移动端则聚焦于高频操作和实时反馈。两者在视觉语言上高度统一,但在信息密度上做了精准切割。微信图片_20260828104615_601_1.jpg

三、关键交互:从浏览信息走向完成任务

交互设计的核心在于减少摩擦,特别是在涉及金钱操作时:
  • 极简的资金操作路径: 存款和取款界面采用了“分步式”引导。例如转账界面,先选账户,再输金额,最后确认。每一步只展示必要信息(如预估到账时间、手续费),避免了传统银行APP那种填表式的压迫感。
  • AI助手的对话式交互: Kaiana AI不仅仅是一个客服入口,它被设计为一种新的交互范式。用户可以通过自然语言(如“给我看看今天表现最好的资产”)直接获取图表和分析,缩短了从“产生疑问”到“获取答案”的路径。
  • 暗色模式下的数据可读性: 针对交易员长时间盯屏的场景,交易界面默认采用深色背景。但在交互细节上,买涨(绿色)与买跌(红色)的按钮对比度极高,且数字键盘布局经过优化,确保在移动端单手操作的准确性。微信图片_20260828104606_600_1.jpg

四、视觉系统:品牌表达必须承担信息语义

视觉风格不仅仅是为了“好看”,更是为了建立信任和专业度:
  • 科技蓝与金融黑的融合: 整体色调采用了深邃的蓝黑色系,这在金融行业通常代表稳重与科技感。高饱和度的霓虹色(如青色、亮蓝)仅用于关键数据点和CTA按钮,既突出了重点,又营造了类似彭博终端的专业氛围。
  • 玻璃拟态与层级感: 在Web端和App的卡片设计中,运用了轻微的磨砂玻璃效果(Glassmorphism)。这种视觉语言不仅现代,更重要的是它在深色背景上有效地划分了信息层级,让复杂的数据看板显得轻盈而不杂乱。
  • 实体化的数据隐喻: 宣传图中使用了悬浮的卡片、立体的手机模型和光线追踪效果,将无形的“数据流”具象化。这种视觉修辞暗示了产品的“流动性”和“即时性”。微信图片_20260828104555_599_1.jpg

五、面向产品与设计团队的可复用价值

这套方案为复杂B端/C端混合产品提供了很好的范本:
  • 模块化思维: 无论是App首页还是Web落地页,都采用了组件化思维。产品经理在设计时应考虑内容的“可配置性”,允许用户或运营人员根据需求组装页面。
  • 情感化设计的克制应用: 金融产品通常冰冷,但CFI通过圆润的倒角、流畅的微交互和AI助手的拟人化形象,注入了温度。设计师应学习如何在保持专业性的前提下,通过细节缓解用户的焦虑感(特别是在亏损或操作失败时)。
  • 全链路的信任构建: 设计不仅仅在App里,官网的“牌照展示”、“赞助商墙”也是用户体验的一部分。产品经理需要将“建立信任”作为核心指标,贯穿从落地页到开户再到交易的全流程。微信图片_20260828104545_598_1.jpg

六、专业审视:仍需补齐的体验边界

尽管方案出色,但在实际落地中仍面临挑战:
  • 深色模式的无障碍测试: 虽然深色模式很酷,但在户外强光下(很多交易员会在户外看盘),低对比度的灰色文字可能难以辨认。需要增加“高对比度模式”或自动感光适配。
  • AI hallucinations(幻觉)风险: Kaiana AI如果提供错误的投资建议,会带来巨大的合规风险。设计中必须包含显著的免责声明,并且AI的回答应当基于实时数据源,而非大模型的通用训练数据。
  • 自定义带来的混乱: 首页完全开放自定义可能导致用户把界面改得面目全非,找不到核心功能。需要设置“恢复默认布局”的一键重置功能,并对模块的最小/最大尺寸做限制。
  • Web端的性能负载: 官网使用了大量高精度的3D渲染图和动效,在低端设备或弱网环境下可能导致加载缓慢,影响首屏转化率。需要做充分的性能优化和降级处理。微信图片_20260828104535_597_1.jpg

结语:设计的最终判断标准是业务与使用价值

CFI这套设计方案的成功之处,在于它没有把“交易”仅仅看作一个功能,而是看作一种生活方式和服务体验。当3D视觉、AI交互与严谨的金融数据完美融合,数字投行界面才真正从冷冰冰的工具变成了用户信赖的财富伙伴。
 

兰亭妙微|你真的会 UI 设计吗?

涛涛 设计思维

随着 UI 设计行业的持续发展,虽然已不再是一才难求的状态,但依然有很多人希望跻身这个行业。一面是不断涌入的新人,一面是在行业中步履维艰的奋斗者。面对这样的状态,你是否反思过:以自己当前的环境与专业能力,真的会 UI 设计吗?

兰亭妙微|UI 设计经验分享:用实战教你界面改版

涛涛 交互设计及用户体验

UI 的美不只体现在表面,更藏在内在的体验中。

兰亭妙微在项目中经常遇到这样的情况:运营同学提需求说 "界面太乱、很难用,改得好看舒服一点"。但 "好看舒服" 背后,是对业务逻辑、用户场景和信息层级的系统性梳理。今天我们用一个真实的 H5 问卷后台改版案例,解析从需求到设计的完整过程。

兰亭妙微ui设计公司分享:用实战案例吃透交互设计:尼尔森人性化帮助原则 >

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:交互设计师输出方案时,除吃透业务需求、研究用户行为与心理之外,一套成熟的交互设计原则是保障方案可用性的重要依据,尼尔森十大可用性原则就是行业最常用的设计标尺。本文结合真实项目实战,拆解其中的人性化帮助原则在业务中的落地方法。

所谓人性化帮助原则,就是在界面中通过各类功能、提示机制,辅助用户顺畅完成任务。尼尔森将帮助提示划分为三类实现形式:一次性提示、常驻提示、帮助文档。下面结合一次产品 2.0 改版项目,讲解三类提示该如何落地。

项目背景

本次迭代为产品某功能板块的 2.0 升级。前期收集用户反馈发现,大量用户的核心痛点:看不懂、不会用该板块功能。 基于业务诉求与用户痛点,我们确立改版在交互体验上两大核心目标:

  1. 让用户感知到 2.0 版本的更新与功能变化;
  2. 给用户提供有效指引,帮助用户顺利完成操作目标。

一、如何帮助用户感知新版功能

 

版本迭代后,页面入口重新整合、同时新增功能点位,新老用户进入页面很容易产生认知迷失。我们需要设计合理的引导,让用户快速读懂本次改版。

App 大版本更新,常会用全屏引导页介绍新能力;针对局部功能改版,常见方案有两种:页面定位式遮罩引导、更新弹窗,二者需要结合业务场景取舍。

  • 更新弹窗:把全部改版信息集中弹窗展示,但弹窗空间有限,信息堆砌,用户很难逐个理解各个新入口的作用;image.png
  • 页面定位引导:以遮罩锚点聚焦单个功能入口,分步讲解,用户可以对照新旧版本差异理解,还可以顺着页面核心操作流程做演示,加深对功能与流程的记忆。

    image.png

本次改版将原先零散入口收拢到同一页面,还新增了具备操作连续性的快捷入口,更适合分步聚焦讲解。因此最终选用页面定位遮罩引导,引导用户逐步认识改版后的页面结构。

二、如何帮助用户上手使用功能

理想的交互是足够直观,用户无需额外提示就能上手。但用户的产品经验参差不齐,新手、低频用户很容易在页面里陷入困惑,产生挫败感。就像逛超市,熟客清楚区域分布,而初次到访的顾客、老年用户,则需要清晰的区域标牌来指引方向。

针对不同场景,可以分别使用一次性提示、常驻提示、帮助文档三类帮助手段。

1. 一次性提示

image.png

一次性提示仅在特定时机出现:用户首次使用功能、版本更新,或是针对隐藏、不易察觉的操作;用户阅读关闭后就不再重复弹出。

场景案例 1:资料填写领优惠券弹窗 业务需要引导用户完善个人基础信息,完成后发放优惠券。最初方案是弹窗引导跳转填写,但是用户关闭弹窗、或是填写后返回页面,就再也找不到填写入口。 优化方案:用户关闭弹窗返回页面后,触发一次性气泡提示,告知用户入口位置,提示阅读完毕关闭后,就不再重复打扰。

场景案例 2:上传图片调整顺序 用户反馈:上传商品图片提交后,才发现图片排序不符合预期。为此新增拖拽调整图片顺序的能力,但该操作属于隐藏手势,用户很难主动发现。 解决方案:图片上传完成后弹出一次性气泡:「长按可调整图片位置」,用户手动关闭提示后,后续不再展示,完成操作认知传递。

2. 常驻提示

image.png

常驻提示会持续展示,多用于操作流程中必须知晓的警示、规则说明,提示文案紧贴对应的操作模块,不会自动消失。

场景案例 1:图片上传风险免责提示 用户自主上传商品图片,存在图片侵权风险。在图片上传模块下方放置常驻免责声明,持续提醒用户承担图片发布对应的相关责任,兼顾用户告知与平台风险规避。

场景案例 2:提交审核规则提示 用户编辑完商品信息提交审核,容易产生等待焦虑,不清楚审核时长、去哪里查看结果。 我们将审核周期、结果查看路径,以常驻说明文字放在「提交审核」按钮上方。用户提交之前就能完整知晓规则,消除等待过程的心理不确定感。

3. 帮助文档

image.png

帮助文档主要承载复杂规则解释、高频 FAQ,适合体量较大、不适合放在操作流程内的内容。 调研发现部分用户甚至不理解这个板块本身的用途。我们在页面增加「操作手册」常驻入口,里面收纳板块功能介绍、完整操作步骤、高频常见问题。当用户遇到困惑,可以主动查阅文档,自主解决疑问。

总结

人性化帮助原则不是简单堆砌弹窗、提示文字,而是分层设计:

  • 改版、首次操作场景:用一次性提示做轻量化科普,避免长期打扰;
  • 风险、关键规则类信息:用常驻提示紧贴操作,确保用户操作前能够看见;
  • 复杂规则、大量 FAQ:收拢进帮助文档,供有需要的用户主动查阅。

好的帮助设计,是做用户的 “安全网”:优先做到界面本身足够易懂;在此基础上分层提供帮助,新手有指引,熟手不受干扰,遇到问题的用户可以找到解决方案。

 

转载:优设

 

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

 

image.png

 

日历

链接

个人资料

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

存档