UI Designer

UI/UX Designer · 2017–2026

方鑫
UI设计+品牌设计

9年经验 · 从用户研究到设计系统落地 · 让复杂业务回归简单体验

50+
服务门店数
42%
关键指标提升
5
完整产品案例
浏览作品
01

犇小康APP

数字货币综合平台 · 资讯+直播+交易+课程+会员

金融科技·2022–2024·UI设计负责人·3个版本迭代

五大模块融合,一个平台承载

犇小康为数字货币爱好者提供从资讯获取、知识学习、到实际交易的一站式服务。核心挑战是在一个APP内让资讯、直播、交易、课程、会员五大模块和谐共存,互不干扰。

  • 在一屏内承载五大模块,导航需极度高效
  • 传递"专业、安全、可靠"的金融产品视觉感受
  • APP、小程序、H5三端统一设计系统
  • 通过视觉层级激励用户升级会员等级

我的角色:UI设计负责人 · 主导全部界面设计 · 管理3人设计小组 · 建立设计规范及交付流程

关于我们
关于我们 — 品牌信任感建立的第一触点

为金融产品构建信任感的设计系统

色彩策略
主色·钴蓝#2060E0
深色底#001030
香槟金#F0B020
涨·绿#00B010
跌·红#E00000

钴蓝主色传递专业与科技感,深色底用于暗色主题区域。香槟金点缀增加品质感。涨绿跌红严格区分,符合金融产品行业习惯。英文Inter提升数字可读性,中文思源黑体保证清晰度。

会员等级视觉体系

白银 → 黄金 → 钻石,三级会员用渐变金属色区分,视觉层级清晰。

权益卡片逐一列出,开通按钮醒目。
直播打赏按钮金色渐变激励互动。
交易买/卖按钮红绿区分,符合金融产品习惯。

每个界面服务于明确用户目标

下载介绍界面
下载介绍界面品牌第一印象的建立——清晰传达产品核心价值,引导用户完成下载转化。
购买套餐
购买套餐套餐权益清晰对比,价格梯度合理引导。会员等级与套餐关联,促进长期付费转化。
首页
首页五大核心模块统一入口,资讯+行情+交易一站式聚合。数据实时更新,关键信息前置展示。
我的钱包
我的钱包资产一目了然,多币种余额+收益明细。安全认证+生物识别,保障数字资产安全。
提现
提现金额大字显示防误操作,密码验证+生物识别双重安全保障。提现记录清晰可追溯。
我的团队
我的团队团队业绩实时看板,成员活跃度+贡献排行。激励体系可视化,驱动团队持续增长。
超长竖版

超长竖版 纵向信息架构完整展示,适用于产品详情页与品牌故事叙述。

品牌物料 · 统一的科技金融视觉语言

策略详情
策略分析专业数据可视化,帮助用户理解市场趋势。付费内容预览机制引导会员转化。
品牌邀请函
品牌邀请函深蓝+金色传递科技感与仪式感,用于品牌发布会。到场率超预期。
课程详情
课程详情课程内容结构化展示,购买转化路径清晰。会员专属折扣标签促进升级。
0
核心功能完成率提升
0
会员转化率提升
0
跨部门协作效率提升
120+
通用组件库规模
模拟交易降低使用门槛

交易流程增加"模拟交易"模块后,客服咨询量显著降低。新用户可在模拟环境练习,消除对真实交易的恐惧心理。→ 降低了产品首次使用门槛。

多端一致性降低认知负担

APP、小程序、H5共用一套设计系统,用户在不同端切换时无认知负担。组件化开发使多端适配效率提升约40%。→ 设计系统的ROI远超出单个项目。

"直播打赏动效增加了用户停留时长。会员体系设计让我学会了如何通过视觉层级激励付费——好的设计直接驱动商业转化。"

02

公司官网设计

企业官网 · 数字化产品展示与品牌门户

网页设计·UI设计·独立完成

公司官网设计 · 数字化产品展示

企业官网是品牌的第一门户。从首页到解决方案页,从产品展示到数字化服务入口,构建完整的品牌线上阵地。

官网首页
官网首页品牌门面,核心价值传递与导航入口。
官网内页
官网内页产品与服务结构化展示,引导用户深入了解。
解决方案页
解决方案页行业方案清晰陈列,助力B端客户决策。
小程序服务
数字化服务 · 小程序移动端服务入口展示。
益家管家
数字化服务 · 益家管家智能管家产品线上展示。
盈掌柜展示
数字化服务 · 盈掌柜核心产品线上展示与介绍。
云后台
数字化服务 · 云后台SaaS管理后台产品页,数据可视化驱动决策。
03

益家收银端

专业级零售门店管理系统 · PC端 + 触摸屏HMI

PC端后台·2020–2022·UI设计师·100+组件库

从移动端到PC端的体验延伸

随着盈掌柜APP的成功推广,连锁客户提出了更专业的门店管理需求。益家收银端是为连锁便利店打造的专业级PC端管理系统,涵盖商品管理、订单管理、会员管理、员工管理、数据分析等全方位功能。

  • 功能极其复杂,需处理大量数据和复杂业务流程
  • 用户每天使用长达8小时,需考虑长时间使用的舒适性
  • 需要支持从单店到上百家店的连锁集团

我的角色:UI设计师 · PC端100+组件库搭建 · 触摸屏HMI独立设计

益家收银端主页面
收银端主界面 — 商品在左,功能面板在右

PC端后台 · 为高效管理而设计

登录界面
会员登录支持手机号/会员号/扫码三种方式,大按钮适配触摸操作
商品分类
商品分类建档树形结构+搜索,批量操作提升效率
线上订单
线上订单管理订单状态可视化,自提/配送/退货流程清晰
退货界面
退货处理多条件搜索(订单号/二维码/时间),退款路径清晰可控
会员中心
会员中心会员信息、消费记录、积分管理一站式呈现
收银小票
收银小票信息层级清晰,关键金额突出显示
0
单店日均订单提升
0
员工培训时间缩短(3天→1天)
0
连锁管理效率提升
100+
PC端专用组件库
04

盈掌柜APP

为中小便利店打造「装在手机里的店铺」

B端SaaS·2021–2022·独立UI设计师·42页面 · 3轮迭代

从发现问题到解决方案的完整设计链路

1
用户调研

走访17家社区便利店,观察店主一天的工作流程,记录12个核心痛点

2
需求定义

提炼7大业务模块,绘制用户旅程地图,确定MVP功能范围

3
设计系统

建立色彩/字体/间距/组件规范,8px栅格系统,Figma变体组件库

4
原型验证

2轮可用性测试,31处交互细节修改,全年龄段用户验证

5
开发落地

设计还原度95%,获年度最佳设计落地奖

盈掌柜APP · 界面展示

盈掌柜界面1
登录与账号管理一键手机号验证登录,注册流程精简高效
盈掌柜界面2
店主工作台今日营收、订单数、缺货预警等关键数据前置展示
盈掌柜界面3
业务单据管理采购/调价/盘点/报损等7大业务模块统一入口
05

中逸黄金珠宝

电商小程序 + 品牌全案 · 黑金美学

品牌全案·2024–2026·独立完成·50+页面 · 3条宣传片

从UI到品牌全案,一次完整的设计实践

独立完成的品牌全案:电商小程序UI设计(50+核心页面)、VI手册、招商手册、企业期刊,以及3条企业宣传片的策划/分镜/剪辑/特效/配音全流程。这是我最完整的一次品牌全案实践。

  • 黑金配色+大留白,传递高端珠宝品牌调性
  • 商品详情页增加3D旋转视图(建模+渲染)
  • "金线"元素作为核心视觉符号贯穿所有品牌物料
  • 从UI到宣传片到线下物料,所有触点设计语言统一

品牌手册被加盟商用作招商标准文件 · 小程序DAU峰值亮眼

品牌手册封面
品牌VI手册封面 — 黑金美学基调

品牌VI手册 · 从标志规范到应用系统

一本完整的VI手册决定了品牌的专业度。以下是从44页手册中精选的关键页面,每一页都承载着明确的规范目的。

Logo规范
Logo规范标准logo组合、最小使用尺寸、安全间距,确保品牌识别在任何场景下清晰统一。
品牌色规范
品牌色彩系统主色黑金+辅助深棕/米白,每色标注CMYK/RGB/Pantone多色值,确保线上线下统一。
名片设计
名片与办公系统黑金线条风格名片,统一企业办公用品视觉——信纸、信封、工牌。
安全区与网格
安全区与网格系统Logo安全区域规范+品牌网格系统,保证不同媒介上视觉一致。
手提袋设计
包装与手提袋购物袋/礼品袋统一品牌视觉,金线元素作为核心识别符号。
广告应用
户外广告应用门头招牌、广告牌、引导标识——黑金配色在户外依然醒目高级。

品牌物料实物应用 · 设计落地到真实场景

名片样机
名片实拍样机极简线条商务名片在真实场景中的呈现效果。
帆布袋样机
帆布袋/托特包品牌LOGO在手提袋上的应用,日常使用场景中的品牌曝光。
咖啡杯样机
咖啡杯/马克杯企业定制双色马克杯,办公室&门店场景的品牌延伸。
门头样机
店铺门头3D发光Logo户外门头招牌发光效果,夜间识别度极高。
公司墙样机
公司前台/会议室墙壁3D品牌墙效果,企业空间中的品牌形象塑造。
手提袋样机
手提袋街拍样机男士手拿帆布袋实拍效果,日常生活中的品牌露出。

品牌平面设计 · 装裱与视觉传达

从品牌物料到装裱设计,每一个画面都是品牌语言的延伸。

装裱设计8
装裱作品 01
装裱设计7
装裱作品 02
装裱设计7-1
装裱作品 03
装裱设计2
装裱作品 05
装裱设计3
装裱作品 06
装裱设计4
装裱作品 07
装裱设计5
装裱作品 08
装裱设计6
装裱作品 09
品牌宣传片 · 全流程独立完成

3条企业宣传片,全部独立完成:策划脚本撰写 → 分镜绘制 → 拍摄指导 → 剪辑调色 → 特效制作 → 配音配乐。用于官网展示及招商会播放。

跨媒介一致性是品牌的生命线

从APP UI到VI手册,从宣传片到线下物料,每个触点都使用统一的"黑金+金线"设计语言。品牌手册被加盟商直接用作招商标准文件,这是对我设计价值最好的验证。

"品牌一致性不仅体现在线上——从UI到宣传片到线下物料,统一的设计语言让用户在所有接触点感受到专业与品质。"

06

小程序设计

宠物领养 + 商城百货 + 食物商城 · 有温度,有故事的设计

小程序·UI设计·独立完成

电商小程序 · 有温度,有故事的设计

50+核心页面,视图提升线上购物体验。

宠物领养小程序
宠物领养小程序用温暖的设计连接每一个生命。滑动浏览、在线申请、领养追踪——让相遇变得简单而有仪式感。
商城百货小程序
商城百货小程序全品类商品以故事化陈列,每一件好物都有它的来处与温度。浏览即发现,下单即信任。
食物商城小程序
食物类商城小程序暖色调激发食欲,食材溯源+食谱关联。不止是买菜,是一顿饭的故事开场。
07

平面设计精选

商业海报 · 每张服务明确目标并有数据验证

品牌视觉·2017–2026·多行业

平面设计精选

上千件商业作品,涵盖LOGO、VI、海报、折页,期刊,名片、吊牌、说明书、邀请函、详情页等多品类——每一件服务于明确商业目标。

作品1
品牌横幅宽幅视觉叙事,适用于品牌官网头图与活动主视觉。
作品2
横版视觉多产品组合展示,品牌调性与信息的统一传达。
作品22
品牌视觉纵向构图,品牌调性与视觉叙事的高度统一。
作品23
品牌视觉纵向延伸,细节丰富,品牌氛围的沉浸式传达。
作品24
横版视觉宽幅构图,多元素和谐共处,信息层级分明。
作品25
横版视觉多产品组合展示,品牌调性与信息的统一传达。
作品26
横版视觉品牌视觉系统化延展,多场景应用一致性。
作品5
系列之一统一版式下的色彩变奏,系列感与识别度兼顾。
作品6
系列之二延续视觉语言,主题差异化表达。
作品7
系列之三收尾呼应,完成系列视觉闭环。
作品27
横版视觉品牌活动主视觉,利益点突出,商业转化导向明确。
作品11
品牌吊牌规范信息层级,品牌符号与文字排版的平衡。
作品12
品牌吊牌多版本统一版式,系列感贯穿始终。
作品13
封面设计品牌封面决定第一印象,翻阅率的关键触点。
作品14
封面设计系列封面统一中求变化,识别与新鲜感兼具。
作品15
推广视觉品牌故事与产品信息的视觉化编排。
作品16
推广视觉图文节奏控制,阅读流线与视觉焦点引导。
作品17
推广视觉基于用户洞察的视觉决策,服务明确商业目标。
作品28
横版视觉系列收官,品牌视觉叙事的完整闭环。
作品20
活动页面横向构图,利益点清晰,CTA突出,商业转化导向。
作品19
超长竖版修长构图适配特定媒介,纵向视觉延伸感。

设计统筹与跨职能协作

团队管理

建立设计规范及交付流程
管理3-5人设计小组
跨部门协作(产品、开发、运营)

典型成果

犇小康:协作效率提升25%
盈掌柜:设计还原度95%,年度最佳员工
中逸:品牌手册被加盟商用作标准文件

期待与你交流

如果你对我的设计能力感兴趣,或者想聊聊设计、商业、咖啡,我都非常乐意。

电话158 5955 9087
工具Figma / Sketch / PS & AI / AE / Pr / C4D