2019-

All works were des

-2022

signed by Ehtel wu

A

A

专注

软件

Ex

2021

深圳

· 负

· 与

· 通

2019

武汉

· 配

· 根

Sk

Wu Qian

UX/UI Designer

Contact

18271195632

wuqianbuchi@163.com

Ethel_o3

About me About me

注于 UX/UI 设计，本科专业是视觉传达设计，熟练运用Figma、Sketch、PS、AI、XD等

件。根据需求输出UI视觉设计、页面插画。参与项目前期分析与调研、设计走查落地

xperiences

1.01-2022.06

圳店匠科技有限公司 UX designer

负责公司平台里主题UI项目移动端、PC端电商设计，跟进研发过程和负责设计验收，确保设计还原质量

产品经理共同需求梳理、挖掘用户行为，设计交互和用户体验

通过用户和数据反馈，对用户体验进行持续的优化迭代

9.09-2020.11

汉十里路科技有限公司 UI designer

配合产品经理进行用户调研和竞品分析，根据产品需求，提供用户界面设计方案

根据公司合作及营销需求，对活动所需物料进行整体VI风格把控

kils

PS AI XD

Contents

Flash主题设计

小森林小程序

熊猫记账APP

Nova2022主题设计

Nova2022行业风格拓展

Geek “智能+” 行业品牌设计

H5

插画

UX/UI Desig

UX/UI Desig

Visual Desig

17

24

gn (Mobile)

gn (Web)

28

gn

Flash Theme Design

A

themes

new

benchmark

for mobile

Flash

项目背景

产品介绍

一款适合承接移动端流量渠道目标用户的主题，适合多行业如服装和饰品、电子、玩具、美容和健康、家居和花艺等行业，以满足广大商户需求

产品定位

随着移动设备成为消费者的主要渠道，旨在为跨境电商卖家提供在 TikTok 上的营销新模式，新思路，新视角，打造的一款全新的主题

全新

打造主题新标杆

Flash,

轻量化实现轻松上手、高转化低跳出是Flash主题最值得称道的功能优势

A

themes

new

benchmark

for mobile

05

轻量

Lightweight

简约

Simple

快速

Fast

品质

Quality

主题

观感

通过与 App 相似的设计和交互体验以匹配消费者熟悉的用户体验模

式，以便他们能在浏览网站及购物的过程中体验更佳

Match the user experience patterns that consumers are familiar

with through an app-like design and interactive experience, so

that they can have a better experience when browsing the website

and shopping

轻量 / 简约 / 快速 / 品质

圆角/间距

间距大多以4的倍数定义，为了让界面更加有节奏感与规整，同时提高开发人

员的效率。如无特殊情况，界面内间距值就控制在4的倍数之间

圆角样式让用户感知功能的区分，全局取4-16px之间的偶数值使用

Unless there are special circumstances, the spacing value within the

interface is controlled between multiples of 4

The rounded corner style allows users to perceive the distinction between

functions, and the global use is an even value between 4-16px

4

8

16

24

32

间距

Space

圆角

Smooth fillet

4px

16px

颜色/字体

饱满的石榴红色为Flash主题主色，色感鲜艳，凸显整体风格的活力与朝气

The full garnet red is the main color of the Flash theme, with a bright color sense,

highlighting the vitality and vigor of the overall style

品牌色

Main color

EB565F

主题默认色

86878B

订单标签

E3E3E4

运输标签

161722

标题、文本

86878B

原价、副标题

E3E3E4

分割线

F1F1F2

按钮变体背景

Muli

数字 Muli 123456789

字体使用场景12/14/16/22/24应用于不同的使用场景

Font selection

F7F8FA

页面背景

FFFAFA

标签背景

调研流程

前期调研

通过对 TikTok 视觉风格相关调研，确立初步的

视觉方向

产品交互

产品框架和功能模块进行讨论和确认，检查探讨

产品结构的合理性

视觉提取

通过以上的视觉调研和功能讨论，确认视觉风

格，建立设计规范

设计目标

主次分明

界面里的元素设计，突出重点信息，提高识别效率

功能、视觉、体验

从三个维度出发，看待产品结构，构建设计产品

简洁、专业

简洁内容模块，专业内容信息，注重元素可用性

全局统一性

专注产品一致性，内容文字的可读性，风格统

A

themes

new

benchmark

for mobile

首页

首页开创性地为 Flash 设计了 6 个基于移动端场景研发的特色主题卡片，覆盖幻灯、专辑列表、商品列

表、商品轮播、图文分栏、推广格子，多维度帮助商户更高效地进行用户引流、促销推广、商品推荐等一系

列营销与转化

The homepage has creatively designed 6 featured theme cards based on mobile scenarios for Flash,

covering slideshows, album lists, product lists, product carousels, graphic and text columns, and

promotion grids, helping merchants to more efficiently conduct user A series of marketing and

transformation such as drainage, promotion, product recommendation, etc

商品详情页

商品详情页里展示的产品信息更全面，回答问题、提供评价都可以推进购买过程并最终促成交易

The product information displayed on the product detail page is more comprehensive. Answering

questions and providing reviews can promote the purchase process and ultimately lead to

transactions

图标

图标圆角一致性原则，均衡比例适应多种尺寸/线性图标大小随使用场景灵活变化

Icon rounded corner consistency principle, balanced ratio adapts to multiple sizes/linear icon size

flexibly changes with usage scenarios

菜单 购物车 搜索 删除 筛选 箭头 关闭 加载中

头部交互

采用了搜索弹窗的样式，配合实时搜索，帮助目标导向的用户在不跳转页面的情况下更快地搜索到目标商品

Flash 3

滑动时头部置顶

Dre

Flash 3

搜索结果页输入时

D

实时搜索loading

商品列表 / 专辑列表

商品列表展示专辑里热门商品可滚动查看，点击产看更多可跳转专辑页；专辑列表展示是不同品类的商品，

四个专辑一轮播，商户可编辑卡片布局或调整商品和专辑内容，操作上灵活自由

Bibs View more

Organic Pointelle

Bunny

$42.00 $78.00

Wilson & Organic

Bunny Rug | Clay

$43.95

+2

Petit Collage |

Organic Toddler

Socks

$45.00

商品列表卡片

Collection list

Furniture Baby & Kids Laundry &

cleaning

Home Decor

专辑列表卡片

图文分栏 / 推广格子

图文分栏支持多卡片滚动并可调节图文展示数量；推广格子由图文卡片和专辑卡片组成，同样可以调节图文

数量、专辑展示数量，商户可以轻松上手，实现更多定制化需求

Image with text

Makeup Best Practices

by Antoine B

图文分栏

Our brands 50% Off

All Kitchen

推广格子卡片

加购成功提示

当页面滑动变体区域末跟随的加购按钮将

不固定底部，跟随页面上移，点击加购按

钮淡入加购成功提示

定位菜单点击交互

点击Description后准确定位并展开相关内

容

Select Option弹窗

点击Select Option弹出加购弹窗，弹窗固

定高度，点击弹窗外或关闭按钮都能淡出

弹窗

置顶定位菜单

当页面滑过描述后、推荐喜欢后置顶定位

菜单，菜单内容过多时可滚动查看

06

A

themes

new

benchmark

for mobile

专辑详情页

专辑采用瀑布流设计，更好的吸引用户，用户在浏览内容时会感到很有新鲜感带来良好的视觉体验

The album adopts waterfall design to better attract users, users will feel very fresh when browsing

the content and bring a good visual experience

16

其他页面

购物车页

购物车里的商品信息过长会省略显示，商品内容过多时结账按钮固定底部，页面商品全删除时为空购物车页

面，点击 Continue shopping 可继续购物

If the product information in the shopping cart is too long, the display will be omitted. If there are

too many products, the checkout button will be fixed at the bottom. When all the products on the

page are deleted, the shopping cart will be empty. Click Continue shopping to continue shopping.

个人中心

个人中心包含登录、注册和重置密码页，当用户登入进去后会有我的订单、地址簿和登出的操作功能

The personal center includes login, registration and reset password pages. When the user logs in,

there will be my order, address book and logout operation functions.

专辑页

专辑内除了展示瀑布流式的商品列表，还

有可配置专辑封面、快速加购、推荐喜欢

和筛选等功能

筛选排序弹窗

点击筛选器，弹出筛选弹窗，从海量的商

品信息中快速找到符合条件的内容

筛选有结果

用户筛选成功后，筛选标签会展示在专辑

页，还未满足需求可删除标签

登录

登录页使用信息居中，输入框设计，主

次分明

注册

将登录注册操作层级差异化，便于用户

区分

重置密码

重置密码页也是在登录时忘记密码时的

一环，输入邮箱在进行跳转重置

07

小

一款为

小森

sma

fore

便携

small forest

小森林 小程序

为用户打造的线上预约拍照小程序

森林

all

est

携 线上预约 丰富

Applets 2020

small forest

H E OME PAG

page

display

首页展示

整个首页主要分为定位、banner、推荐三大功能的划分

臻选、功能类、艺术类板块让用户清晰拍照种类

banner推送最新资讯，掌握实时资讯

A

y

ppointment

process displa

预约流程展示

small forest

page

display

small forest

page

display

m

y

y

page displa

我的页面展示

消息图标展示

D

s

isplay

on other page

其他页面展示

12

熊猫记账

熊猫记账是一款纯记账软件，功能丰富实用的app

Panda

bookkeeping app

首页界面

Home page

Home page首页分为头部（日历账单+账本切换）、二级导航栏（可切换不同花费信息）、记账

数

值板块，方便用户清晰明了产品内容及功能

二级导航栏（可切换不同花费信息）

记账数值板块

头部（日历账单+账本切换） 层级1

层级2

层级3

page

报表界面

Report page

unting interf

记账界面

Accounting interface

face

其他页面

other pages

other p

pages

17

Contents

Flash主题设计

小森林小程序

熊猫记账APP

Nova2022主题设计

Nova2022行业风格拓展

Geek “智能+” 行业品牌设计

H5

插画

UX/UI Desig

UX/UI Desig

Visual Desig

17

24

gn (Mobile)

gn (Web)

28

gn

Themed Web Design UX/UI D

Designer Nova 2022

项目概述

Project Overview

style definition

简约 Simple 时尚 Fashion 创造 Create

简约 操作界面简洁明了，简单易懂，保证大部分用户能快速熟悉产品内容

时尚 视觉上偏向时尚女装方向，凸显产品品质与品牌调性

创造 对关键页面信息进行重新梳理重设计，提升易用性

布局

layout 布局上通常按照4的倍数来计算不同元素所占比例，通过将设计元素放置在适当位置，创

造一个干净简单的界面；例如商品详情里图集通常占页面50-60%

130px 144px

1440px

1 2 3 4 5 6 7 8

colors

#292929

文本

#E24E2D

折扣

#C69C6D

默认色

#9F9F9F

辅助色

#E6E6E6

线框

Aa

Jost

Heading 1 24px

Heading 2 20px

Heading 3 16px

Heading 3 14px

Typography

A

A

1

B

B

2

c

c

3

d

d

4

e

e

5

f

f

6

g

g

7

h

h

8

i

i

9

j

j

0

k

k

l

l

m

m

n

n

o

o

p

p

q

q

r

r

s

s

t

t

u

u

v

v

w

w

x

x

y

y

z

z

Regular Medium SemiBold

20

产品介绍 / product description

在旧版Nova基础上进行全新的优化设计，是 款简单时尚但可定制的网站，以创造性和

引人入胜的方式展示产品的主题

目标人群 / Target population

不同国家不同地区不同领域会上网网购的消费者，更偏向于欧美用户群体

Demand Combing

体验升级

用户诉求

1.在网购浏览时快速在页面获取有效信息

2.操作可用性加强，减少选择时误触跳转

3.丰富卡片的排版，多选择进行店铺装修

4.不同品类的卖家需要不同风格的演示站

视觉升级 功能升级

1.视觉细节上升级，把握欧美设计风格

2.调研分析用户行为，交互逻辑重新梳理

3.提升用户体验，建立消费者的信任感

4.增加小组件设计，提升店铺高转化

产品诉求

Revision direction

增加黏性

用户层

· 丰富产品功能使用场景

· 优化排版，实现用户高效舒适浏览

· 优化交互，提升用户使用体验和活跃度

提高转化

产品层

· 塑造品牌差异化，建立认知

· 优化信息层级关系，提高阅读效率

· 增强用户体验，带给卖家店铺高转化率

品牌调性

视觉层

· 增加情感化设计

· 制定设计规范，统一设计风格

· 增加不同风格，帮助卖家展示店铺

Frame Refactoring

Home page

Themed Web Design

other cards

商品详情页

product detail page 优化前：移动端图集的布局较为不合理，影响用户商品详情首屏用户体验，导致在屏幕尺

寸较小的手机端加购转化率过低

优化后：移动端图集保留了全屏和占屏三分之二的比例，让用户浏览时快速在首屏获取有

效信息

Black Color: Black

Size

XS

Lavender A pound of flatbread

XXS S M L

Color: Black

Size

XS

Black

Black Green Yellow Gray

Pink Red

Lavender A pound of flatbread

XXS S M L

White

Color:

Size

XXS

Black

21

首屏：会推荐使用幻灯、视频、图文卡片等能够明确传递品牌，商品信息的元素

次屏：会推荐荐使用推荐专辑、促销商品等卡片向买家展示商品，将更多商品入口展示给买家，

方便买家选择商品，增加转化机会

幻灯

明确传递品牌，商品信息

商品详情变体有五种搭配方案

优化前：变体的布局样式也较为不合理，使得之前用户在点击变体时常常误触

优化后：增强变体的可用性，增加了适用不同行业的搭配方式，给不同品类的卖家更多选择

图文卡片

讲述品牌故事，强化品牌认知

推荐专辑

向买家展示商品，增加转化机会

专辑详情页

Album details page

其他页面

other pages

购物车页

shopping cart page

筛选与排序

Quick shop

优化前：快速加购弹窗的操作按钮在商品信息下方，会使页面展示的有效信息较少

优化后：将快速加购按钮做成icon形式的按钮放置图片上，页面内容会更精炼简洁，点击

加购按钮弹出加购弹窗，完成快速加购动作

22

商品详情小组件

如今海外用户的购物满足感在不断升级，随着购物频率的增长，为了帮助卖家提升店铺转

化，这次商品详情的优化也新增了一系列的功能组件

提示标签：目的是为了提前明确物流费用和额外的关税费用，避免售后争议

免邮进度：提前向用户预知运费，在商品详情页提示是否免运费或再购买xx元可免运费

投递时间：降低消费者的不确定感，推动消费者达成跨境订单，提升买家的购物体验

库存&观看人数提示：可以刺激买家下单

16 people are viewing this right now

Color

Black Red Blue Gray

Only 10 item(s) left in stock!

Quantity

1

Add to cart

Estimated Delivery: Jan 10 Jan 14

Buy $45 more to enjoy FREE Shipping

优化前：商家无法通过配置专辑封面或详情介绍来使得用户在浏览过程中的达到视觉冲击

效果和获取更多有效信息，且在移动端中 屏所展示的有效信息较少，不利于加

购和商品展示

优化后：增加了专辑封面和详情介绍，调整了一屏所展示商品数，实现用户高效舒适浏览

Save 8%

Cord textured dress

$98.00 $48.00

+6

优化前：筛选与排序为分开操作，同时增加专辑封面和详情介绍页面有效信息获取会更少

优化后：将筛选与排序功能合并 起排版设计，交互为从右至左淡入筛选框，用户通过筛

选、设置接近于目标需求的条件，减少交互步骤，用户体验得到很大程度的提升

优化前：旧版Nova购物车里当商品信息过多时页面信息传达和调理不清晰，用户的交互

行为受到阻碍，导致购物车转化价值较低

优化后：将商品信息进行简化，容易误触的元素重新排版设计，调整了check out按钮占

比，让购物车页面里信息更加简洁，操作上更方便

Nova 2022 expands the style

Nova 2022 expands the style

Premium temperament watch

From $128.00

The Ojai Jacket

$69.99

The Heavy Bag Henley

$98.00 $48.00

The Leather Care Kit

From $128.00

Scout Boot - Natural Dublin

$69.99

bag style

Nova 2022 expands the style

Choose Your Wig

Shop now

Our goal is to provide every individual with

special needs the product that fulfills his

yearning.

Color Without Damage

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit

turpis, a porttitor tellus sollicitudin at.

Shop now

23

Geek product details（Mobile）

Geek product details（Web）

Font

Colors

Geek shopping cart page

Geek header menu

Lexend is the font of the geek brand

F6F6F6

DFE0E0

CECFCF

888A8B

2C676A

121B17

Geek album page

24

Contents

Flash主题设计

小森林小程序

熊猫记账APP

Nova2022主题设计

Nova2022行业风格拓展

Geek “智能+” 行业品牌设计

H5

插画

UX/UI Desig

UX/UI Desig

Visual Desig

17

24

gn (Mobile)

gn (Web)

28

gn

项目背景

精品启蒙早教课在活动期间，登录点击即可领取

该APP官方送出的优惠大礼

包，吸引用户回归报名即可获得额外奖励

颜色规范

ec7341 f09651 817ed6 f9dfca

项目背景

今天你读书了吗活动，使用动作人物形态围绕活动进行组合，以小女孩正在读

书等画面凸显主题，

丰富活动内容

颜色规范

e25b32 eeb249 19428a 061735

H5

H5活动页

26

封店等待商

shop tips illustration

店铺提示插画

家开启 店铺不存在 过期未续费

Illustration practice

插画练习

Tel: 1827

Mail: wuqianbu

Thanks For

Thanks For

71195632

uchi@163.com

r Watching

r Watching