从业务开始
围绕批发商与零售商高效找货、明确成本、把控风险的需求，梳理筛选、查看、下单、物流与售后链路。
从问题出发，让设计落在体验里。
电商、音乐、文化与视觉探索。
记录如何组织信息、连接场景，
并把想法变成可以使用的界面。
作品索引
选择项目，了解设计过程 ↘01 / COMMERCE / WEB
让跨境采购，清晰而高效。
HuePure · 海外电商批发平台
面向东南亚、日韩与美国的跨境 B2B 服装采购场景，以区域仓库适配与采购效率为核心，将找货、查看、批量下单和订单管理连接起来。
让决策信息先出现
库存、发货仓、起订量与价格前置，结合清晰分类和商品信息层级，减少反复查找。
保持体系一致
以色彩、字体、按钮、输入框和卡片规范建立统一界面语言，兼顾区域适配与不同终端。
RESEARCH / 用户与场景
把采购需求，拆成清晰的设计任务。
高效找货
批发商与零售商需要快速定位适合的商品。分类和搜索分别承接探索型与目标型采购。
明确成本
价格、起订量、库存与发货仓是采购判断的重要信息，应在决策位置集中出现。
把控风险
跨区域采购还涉及库存、物流与售后。用连贯的页面路径承接采购前后信息。
设计重点：从具体使用情境出发，明确页面任务与信息优先级。
EXPERIENCE / 体验路径
让每个页面，都有明确的下一步。
- 01筛选需求→
- 02查看商品→
- 03批量下单→
- 04物流追踪→
- 05售后对接
商品体系仓储体系物流体系合规体系
DESIGN SYSTEM / 设计规范
一致的视觉，
支撑连贯的体验。
字体规范采用阿里巴巴普惠体 3.0。通过标题、正文和辅助文字区分层级，色彩用于品牌识别与操作反馈。
通过品牌色、辅助色与文字层级，建立可延续的视觉语言。#E23947#FF570F#3D3D3D#2070F4#179C3FAa
清晰的标题层级
让内容易读，让操作明确。
标题 / 正文 / 辅助信息INTERFACE / 页面与设计解读
让信息组织，服务每一次采购。
浏览完整界面，并了解每个页面的信息组织与交互设计。点击图片可放大查看。
01 / SCREEN
首页 / 从品牌到选品
首页把品牌印象、分类引导与商品浏览连接起来，为采购提供清晰起点。
设计思路
- 导航与搜索分工明确：分类用于探索，关键词用于目标明确的找货。
- 活动卡片用色彩区分主题，引导进入具体品类。
- 商品卡片按图片、名称、标签、价格组织内容，把决策信息前置。
02 / SCREEN
账户中心 / 集中管理采购
将账户信息、订单与常用服务放在同一处，服务采购后的持续管理。
设计思路
- 左侧分类导航保持当前位置清晰，减少重复定位。
- 余额、订单与高频入口前置，让用户快速获取账户状态。
- 收藏、关注与最近浏览承接再次采购的需求。
03 / SCREEN
商品详情 / 信息先于行动
以信息清晰、信任建立与行动引导组成商品决策路径。
设计思路
- 大图承载外观与材质细节，标题和价格突出核心信息。
- 颜色、规格和采购条件集中呈现，减少上下查找。
- 加购与购买区分两种采购意图，相关商品承接进一步探索。
设计过程
每一步，都有设计的理由。
选择一个主题，看看界面背后的取舍。
业务与目标
采购不只是在挑一件衣服。
跨境批发商需要同时判断商品、成本与履约条件。设计围绕这些决策展开，而不是只做商品陈列。
先找到合适的货
分类承接探索，搜索承接明确需求，让两种找货方式各有入口。
再判断能否采购
将价格、库存、起订量与发货仓作为关键决策信息，减少来回确认。
购买之后也有去处
订单、物流与售后接续采购路径，账户中心承接持续管理。
- 筛选需求
- 查看商品
- 批量下单
- 物流与售后
体验策略
把复杂业务，藏在清晰的操作背后。
先理顺用户要完成的任务，再用一致的导航、组件和状态承接操作。
流程先于装饰
沿着找货、购买、管理拆解页面职责，避免同一任务在不同入口间反复跳转。
熟悉的布局
保留分类导航、商品列表和订单入口等常见模式，让采购者把注意力放在业务上。
一致的反馈
通过统一的颜色、文字层级与组件状态，区分当前位置、可执行操作和待处理信息。
首页组织
先建立方向，再展开商品。
首页从品牌与品类过渡到具体选品，把浏览节奏分成几个清晰层次。
顶部负责定位
品牌、品类、搜索和账户各司其职，目标明确的用户可以直接开始找货。
主题负责引导
主视觉与活动内容提供选品方向，不让所有商品同时争夺注意力。
卡片负责比较
图片、名称、标签和价格保持固定顺序，方便在连续浏览时横向比较。
- 导航与搜索
- 主题选品
- 商品比较
账户中心
让采购进度，一眼有数。
个人中心不是入口的堆积，而是采购后的工作台。优先展示状态，再提供下一步。
明确我在哪里
左侧分类与选中状态提供稳定定位，切换业务时不用重新理解页面。
突出待处理事项
订单状态、余额与常用服务前置，用图标和文字共同说明入口。
承接再次采购
收藏、关注与最近浏览集中呈现，让上一次的选品可以继续。
购买决策
让信息充分，再让行动发生。
详情页把看商品、选规格和做决定连在一起，避免过早用按钮打断判断。
看清商品
大图提供外观信息，细节与场景展示补充对材质和使用方式的理解。
集中比较条件
标题、价格、颜色和规格集中呈现，减少在页面上下寻找的成本。
区分两种意图
加购用于继续选品，购买用于立即决策；相关商品保留进一步比较的出口。
- 了解商品
- 选择规格
- 加入采购 / 购买
02 / MUSIC / MOBILE
发现一首歌，也发现一种心情。
乐彩 · 音乐 App
以年轻用户为核心，围绕发现、播放、分享三大场景构建音乐体验。将品牌视觉、沉浸播放与音乐社区结合，让内容发现和日常听歌保持连续。
理解使用情境
围绕学习、通勤与工作等场景展开用户分析，关注内容新鲜感、搜索分类、收藏管理和播放连续性。
三个核心体验
高效发现音乐、沉浸式播放与社区分享相互衔接，配合个人音乐资产管理，构建完整使用路径。
统一而有辨识度
渐变色彩建立年轻化视觉氛围，卡片组织推荐内容；Mini Player 为跨页面播放提供连续入口。
RESEARCH / 用户与场景
同样是听歌，期待并不相同。
学习与通勤中的发现者
关注新音乐、歌单收藏与歌手资讯。设计关注推荐重复、搜索分类不清和管理入口较深等体验问题。
工作场景中的连续收听者
希望快速开始播放，根据场景切换歌单，并高效管理收藏。设计重点是少打扰、操作清晰与持续播放。
设计重点：从具体使用情境出发，明确页面任务与信息优先级。
EXPERIENCE / 体验路径
让每个页面，都有明确的下一步。
- 01发现音乐→
- 02浏览歌单→
- 03开始播放→
- 04分享与收藏
持续播放
Mini Player → 点击展开 → 播放页 → 下滑返回
切换视图，而不是中断音乐。DESIGN SYSTEM / 设计规范
一致的视觉，
支撑连贯的体验。
字体规范采用阿里巴巴普惠体 3.0。通过标题、正文和辅助文字区分层级，色彩用于品牌识别与操作反馈。
通过品牌色、辅助色与文字层级，建立可延续的视觉语言。#9C5CF6#5658F5#FD9448#F4628F#FDAB35Aa
清晰的标题层级
让内容易读，让操作明确。
标题 / 正文 / 辅助信息INTERFACE / 页面与设计解读
从发现到分享，保持音乐的连续性。
浏览完整界面，并了解每个页面的信息组织与交互设计。点击图片可放大查看。
01 / SCREEN
首页
快速发现符合当下心情的音乐。
设计思路
- 推荐卡片明确内容层级，搜索入口支持主动查找。
- 品牌渐变建立氛围，Mini Player 延续播放。
02 / SCREEN
搜索
让歌曲、歌手与歌词检索更有条理。
设计思路
- 历史记录支持快速回访。
- 热门搜索标签提供探索方向，不与结果内容混在一起。
03 / SCREEN
发现
从偏好、分类和榜单寻找新音乐。
设计思路
- 分类标签帮助定位兴趣。
- 排行榜与专题推荐提供不同发现路径，模块化布局控制阅读压力。
04 / SCREEN
乐圈
把听歌延伸为资讯浏览与社区参与。
设计思路
- 歌手资讯、话题与分享内容分区组织。
- 音乐相关内容成为互动情境，让分享不脱离产品核心。
05 / SCREEN
歌单详情
先了解歌单，再进入播放。
设计思路
- 封面与简介帮助判断风格，主要播放操作集中呈现。
- 歌曲列表保持统一布局，支持连续浏览。
06 / SCREEN
播放
让视线回到封面和播放控制。
设计思路
- 渐变背景营造音乐氛围，居中封面建立视觉焦点。
- 核心控制独立成区，减少无关信息对播放的干扰。
07 / SCREEN
播放状态展示
以不同播放视图延续沉浸体验。
设计思路
- 视觉变化围绕正在播放的内容展开。
- 页面切换与返回仍需保持播放连续性。
08 / SCREEN
我的音乐
集中整理个人音乐资产。
设计思路
- 收藏、下载、最近播放等高频入口集中展示。
- 我的歌单与内容记录分层，保持与其他页面一致的组件语言。
设计过程
每一步，都有设计的理由。
选择一个主题，看看界面背后的取舍。
体验目标
打开音乐，而不是打开一堆功能。
围绕发现、收听与分享建立主线，让内容丰富与使用轻松并存。
减轻选择压力
用推荐、歌单和搜索区分发现路径，不把所有内容放在同一层级。
让情绪可感知
紫色与暖色渐变建立音乐氛围，封面承担主要视觉表达。
保持体验连续
统一组件语言，Mini Player 保留当前播放，让跨页浏览仍围绕音乐展开。
收听场景
想探索时有惊喜，想听歌时够直接。
设计同时考虑主动发现与连续收听两种情境，而不是为所有时刻安排相同路径。
发现新的偏好
通过分类、榜单和专题推荐提供不同线索，让探索不只依赖单一推荐。
快速回到熟悉内容
收藏、歌单与最近播放承接通勤和工作中的连续收听。
让分享有上下文
乐圈围绕歌手、话题与音乐内容展开，互动与听歌本身保持联系。
信息架构
四个目的地，一条持续的播放线。
首页、发现、乐圈与我的音乐分别承担不同任务，播放状态贯穿其中。
发现与整理分开
首页和发现提供新内容，我的音乐承接收藏与管理，避免探索和资产混杂。
内容之间有连接
从推荐进入歌单，再到播放与分享，让页面之间有自然的下一步。
组件保持熟悉
卡片、分类标签与文字层级沿用同一套规则，降低跨页理解成本。
- 首页 / 发现
- 歌单
- 播放
- 分享 / 收藏
播放交互
变的是视图，不是音乐。
用迷你播放条与完整播放页连接浏览和沉浸两种状态。
浏览时保持轻量
Mini Player 保留当前音乐与播放入口，不占用主要内容空间。
展开后聚焦音乐
居中封面建立视觉焦点，播放控制独立成区，让主要操作容易识别。
返回时延续状态
点击展开、下滑返回对应两种视图切换，交互设计以保持播放连续为目标。
- Mini Player
- 点击展开
- 完整播放页
- 下滑返回
系统与总结
不同页面，仍然像同一个产品。
从发现到管理，把视觉规范与交互模式落实到完整的音乐使用路径。
用层级建立秩序
封面与标题说明内容，辅助信息补充判断，主要操作保持突出。
用组件延续体验
将卡片、列表、导航和播放器作为可复用单元，让页面变化不等于规则变化。
让视觉服务任务
渐变营造氛围，留白与分区保证可读性，避免表现力盖过操作本身。
03 / CULTURE / TABLET
把瓷器之美，变成可探索的知识。
瓷艺轩 · iPad 体验设计
围绕瓷器文化、制作技艺与艺术审美组织内容，以平板端体验连接作品欣赏和知识学习，让传统文化以更直观的方式被理解。
从文化脉络切入
将历史起源、发展与不同时期的演变作为学习背景，帮助读者理解器物背后的文化。
让工艺更易理解
围绕拉坯、施釉、烧制等制作过程展开知识内容，串联材料、技艺与作品。
以作品承载审美
通过青花、粉彩、釉里红等不同风格建立认识入口，将欣赏与知识探索连接起来。
RESEARCH / 竞品观察
从文化产品中，寻找内容组织的线索。
故宫博物院
功能入口与展品分类较丰富。可借鉴细致的内容组织方式。
南京博物院
围绕常用功能、院内展品与展览活动展开。可借鉴核心功能的集中呈现。
三星堆博物馆
围绕特色展品组织主要功能。可借鉴用代表性内容建立文化识别。
三款文化产品都围绕参观指南、票务预订与展品展览建立服务入口。瓷艺轩进一步聚焦器物知识与制瓷体验，将“看见藏品”延伸为“理解文化”。
EXPERIENCE / 制瓷体验流程
从选土，到一件作品的诞生。
- 01选土→
- 02选土介绍→
- 03炼土→
- 04画素胚→
- 05上釉→
- 06烤制→
- 07成品
DESIGN SYSTEM / 设计规范
一致的视觉，
支撑连贯的体验。
采用温润的米色、褐色体系，字体规范包含微软雅黑与 STXingkai。以传统气质承接内容，保持阅读清晰。
通过品牌色、辅助色与文字层级，建立可延续的视觉语言。#E1D7C9#73695D#F1EADB#F0E8D5#9C8F74Aa
清晰的标题层级
让内容易读，让操作明确。
标题 / 正文 / 辅助信息INTERFACE / 页面与设计解读
让器物欣赏与文化探索自然衔接。
浏览完整界面，并了解每个页面的信息组织与交互设计。点击图片可放大查看。
01 / SCREEN
首页 / 先看见器物之美
以藏品展示建立第一印象，再引导到不同内容分类。
设计思路
- 主展示区域突出器物细节，而不是同时堆叠所有信息。
- 底部分类提供进一步探索的入口，衔接欣赏与学习。
02 / SCREEN
资料馆 / 从欣赏走向理解
把文化内容整理成可以逐步浏览的知识空间。
设计思路
- 清晰导航帮助定位内容，减少跨分类寻找的成本。
- 图文层级兼顾器物欣赏与背景知识阅读。
03 / SCREEN
时代 / 沿着历史认识瓷器
通过时间轴与藏品卡片建立历史脉络。
设计思路
- 历史时期线性排列，当前节点突出显示。
- 卡片以时代标签、品属分类和器物图片帮助判断内容。
- 宣纸纹理与传统元素提供文化氛围，留白维持阅读秩序。
设计过程
每一步，都有设计的理由。
选择一个主题，看看界面背后的取舍。
文化选题
从一件器物，看见背后的文化。
将陶瓷的历史、工艺与审美连接起来，让欣赏成为理解的起点。
器物先吸引目光
用藏品形态、纹样和细节建立第一印象，再引导阅读文化背景。
历史提供线索
以时代变化组织知识，帮助理解不同器物为何呈现不同风格。
工艺连接体验
围绕选土、成型、上釉与烧制展开过程，让知识有具体的体验路径。
- 欣赏器物
- 了解时代
- 认识工艺
竞品取舍
借鉴内容秩序，不照搬博物馆。
文化产品的共同点是组织藏品与知识。瓷艺轩进一步聚焦陶瓷，而非场馆服务。
故宫：细致分类
丰富的展品与功能入口提供内容组织参考；陶瓷知识同样需要清晰的分类。
南京：集中入口
常用功能与展览内容集中呈现，启发首页对高频任务的优先安排。
三星堆：特色识别
代表性展品建立文化辨识度；瓷艺轩以陶瓷器物本身作为视觉核心。
体验规划
让看见、读懂与动手自然衔接。
以清晰导航连接藏品欣赏、知识阅读与制瓷体验，让文化内容有不同进入方式。
先找到内容
导航、分类与搜索提供明确入口，减少在知识分类之间寻找的成本。
再逐步理解
图片呈现器物，文字解释背景，信息分层而不是一次铺满。
用交互参与过程
围绕制瓷步骤安排操作，让点按与拖动服务具体工艺内容。
- 藏品欣赏
- 知识阅读
- 制瓷体验
时代页面
把历史，变成可以浏览的线索。
时间轴建立顺序，藏品卡片提供内容，传统视觉语言营造安静的阅读氛围。
时间轴负责定位
历史时期线性排列，突出当前节点，明确正在阅读哪一段历史。
卡片负责理解
将器物图片与时代、类别组合，便于在不同藏品之间建立联系。
留白保留呼吸
宣纸纹理与传统元素作为背景，让器物和知识仍然是页面主角。
- 选择时代
- 浏览藏品
- 理解背景
04 / EXPERIMENTS / VISUAL
在不同尺度里，探索视觉表达。
其他设计 · 视觉探索
收录图标、信息图表、游戏界面与其他设计草稿。不同载体的尝试，组成作品集中的视觉探索章节。
图形语言
观察小尺度图形如何传达信息，探索形态的辨识度与视觉特征。
信息组织
通过图表和版式建立阅读顺序，呈现不同类型内容的表达方式。
多样化探索
把界面与视觉草稿并置，展示不同设计情境下的探索过程。
INTERFACE / 页面与设计解读
把视觉探索，放回具体的界面。
浏览完整界面，并了解每个页面的信息组织与交互设计。点击图片可放大查看。
01 / SCREEN
图形与视觉探索
探索图形构成、色彩关系与视觉表达。
设计思路
- 以图形、色彩与构成探索不同表达方式。
02 / SCREEN
视觉作品 / 02
通过图形与构图建立鲜明的视觉印象。
设计思路
- 作为视觉素材展示，保留作品本身的构图与细节。
03 / SCREEN
视觉作品 / 03
延续图形语言，探索不同的视觉组合。
设计思路
- 结合主体与背景的关系，突出画面的视觉焦点。
04 / SCREEN
后台界面 / 01
海外电商后台设计中的界面探索。
设计思路
- 通过导航与内容分区组织信息，让操作入口易于识别。
05 / SCREEN
后台界面 / 02
展示不同业务内容下的布局方案。
设计思路
- 观察数据、列表和操作区的主次关系，保持后台界面的阅读秩序。
06 / SCREEN
后台界面 / 03
延续后台场景的视觉与信息组织。
设计思路
- 在重复模块中保持样式一致，减少页面之间的理解成本。
07 / SCREEN
二次元风格游戏 UI
围绕游戏氛围展开界面视觉探索。
设计思路
- 让界面控件与场景风格协调，同时保留操作层级。
08 / SCREEN
欧美卡通风格 / 01
以另一种视觉语言组织游戏界面。
设计思路
- 通过图形轮廓、色彩对比与布局表达功能主次。
09 / SCREEN
欧美卡通风格 / 02
呈现同一风格下的界面变化。
设计思路
- 在保持风格一致的同时，为不同内容安排明确的视觉落点。