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 設計，本科專業(yè)是視覺傳達設計，熟練運用Figma、Sketch、PS、AI、XD等

件。根據(jù)需求輸出UI視覺設計、頁面插畫。參與項目前期分析與調(diào)研、設計走查落地

xperiences

1.01-2022.06

圳店匠科技有限公司 UX designer

負責公司平臺里主題UI項目移動端、PC端電商設計，跟進研發(fā)過程和負責設計驗收，確保設計還原質(zhì)量

產(chǎn)品經(jīng)理共同需求梳理、挖掘用戶行為，設計交互和用戶體驗

通過用戶和數(shù)據(jù)反饋，對用戶體驗進行持續(xù)的優(yōu)化迭代

9.09-2020.11

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

配合產(chǎn)品經(jīng)理進行用戶調(diào)研和競品分析，根據(jù)產(chǎn)品需求，提供用戶界面設計方案

根據(jù)公司合作及營銷需求，對活動所需物料進行整體VI風格把控

kils

PS AI XD

Contents

Flash主題設計

小森林小程序

熊貓記賬APP

Nova2022主題設計

Nova2022行業(yè)風格拓展

Geek “智能+” 行業(yè)品牌設計

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

項目背景

產(chǎn)品介紹

一款適合承接移動端流量渠道目標用戶的主題，適合多行業(yè)如服裝和飾品、電子、玩具、美容和健康、家居和花藝等行業(yè)，以滿足廣大商戶需求

產(chǎn)品定位

隨著移動設備成為消費者的主要渠道，旨在為跨境電商賣家提供在 TikTok 上的營銷新模式，新思路，新視角，打造的一款全新的主題

全新

打造主題新標桿

Flash,

輕量化實現(xiàn)輕松上手、高轉(zhuǎn)化低跳出是Flash主題最值得稱道的功能優(yōu)勢

A

themes

new

benchmark

for mobile

05

輕量

Lightweight

簡約

Simple

快速

Fast

品質(zhì)

Quality

主題

觀感

通過與 App 相似的設計和交互體驗以匹配消費者熟悉的用戶體驗模

式，以便他們能在瀏覽網(wǎng)站及購物的過程中體驗更佳

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

輕量 / 簡約 / 快速 / 品質(zhì)

圓角/間距

間距大多以4的倍數(shù)定義，為了讓界面更加有節(jié)奏感與規(guī)整，同時提高開發(fā)人

員的效率。如無特殊情況，界面內(nèi)間距值就控制在4的倍數(shù)之間

圓角樣式讓用戶感知功能的區(qū)分，全局取4-16px之間的偶數(shù)值使用

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

數(shù)字 Muli 123456789

字體使用場景12/14/16/22/24應用于不同的使用場景

Font selection

F7F8FA

頁面背景

FFFAFA

標簽背景

調(diào)研流程

前期調(diào)研

通過對 TikTok 視覺風格相關調(diào)研，確立初步的

視覺方向

產(chǎn)品交互

產(chǎn)品框架和功能模塊進行討論和確認，檢查探討

產(chǎn)品結構的合理性

視覺提取

通過以上的視覺調(diào)研和功能討論，確認視覺風

格，建立設計規(guī)范

設計目標

主次分明

界面里的元素設計，突出重點信息，提高識別效率

功能、視覺、體驗

從三個維度出發(fā)，看待產(chǎn)品結構，構建設計產(chǎn)品

簡潔、專業(yè)

簡潔內(nèi)容模塊，專業(yè)內(nèi)容信息，注重元素可用性

全局統(tǒng)一性

專注產(chǎn)品一致性，內(nèi)容文字的可讀性，風格統(tǒng)

A

themes

new

benchmark

for mobile

首頁

首頁開創(chuàng)性地為 Flash 設計了 6 個基于移動端場景研發(fā)的特色主題卡片，覆蓋幻燈、專輯列表、商品列

表、商品輪播、圖文分欄、推廣格子，多維度幫助商戶更高效地進行用戶引流、促銷推廣、商品推薦等一系

列營銷與轉(zhuǎn)化

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

商品詳情頁

商品詳情頁里展示的產(chǎn)品信息更全面，回答問題、提供評價都可以推進購買過程并最終促成交易

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

菜單 購物車 搜索 刪除 篩選 箭頭 關閉 加載中

頭部交互

采用了搜索彈窗的樣式，配合實時搜索，幫助目標導向的用戶在不跳轉(zhuǎn)頁面的情況下更快地搜索到目標商品

Flash 3

滑動時頭部置頂

Dre

Flash 3

搜索結果頁輸入時

D

實時搜索loading

商品列表 / 專輯列表

商品列表展示專輯里熱門商品可滾動查看，點擊產(chǎn)看更多可跳轉(zhuǎn)專輯頁；專輯列表展示是不同品類的商品，

四個專輯一輪播，商戶可編輯卡片布局或調(diào)整商品和專輯內(nèi)容，操作上靈活自由

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

專輯列表卡片

圖文分欄 / 推廣格子

圖文分欄支持多卡片滾動并可調(diào)節(jié)圖文展示數(shù)量；推廣格子由圖文卡片和專輯卡片組成，同樣可以調(diào)節(jié)圖文

數(shù)量、專輯展示數(shù)量，商戶可以輕松上手，實現(xiàn)更多定制化需求

Image with text

Makeup Best Practices

by Antoine B

圖文分欄

Our brands 50% Off

All Kitchen

推廣格子卡片

加購成功提示

當頁面滑動變體區(qū)域末跟隨的加購按鈕將

不固定底部，跟隨頁面上移，點擊加購按

鈕淡入加購成功提示

定位菜單點擊交互

點擊Description后準確定位并展開相關內(nèi)

容

Select Option彈窗

點擊Select Option彈出加購彈窗，彈窗固

定高度，點擊彈窗外或關閉按鈕都能淡出

彈窗

置頂定位菜單

當頁面滑過描述后、推薦喜歡后置頂定位

菜單，菜單內(nèi)容過多時可滾動查看

06

A

themes

new

benchmark

for mobile

專輯詳情頁

專輯采用瀑布流設計，更好的吸引用戶，用戶在瀏覽內(nèi)容時會感到很有新鮮感帶來良好的視覺體驗

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

其他頁面

購物車頁

購物車里的商品信息過長會省略顯示，商品內(nèi)容過多時結賬按鈕固定底部，頁面商品全刪除時為空購物車頁

面，點擊 Continue shopping 可繼續(xù)購物

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.

專輯頁

專輯內(nèi)除了展示瀑布流式的商品列表，還

有可配置專輯封面、快速加購、推薦喜歡

和篩選等功能

篩選排序彈窗

點擊篩選器，彈出篩選彈窗，從海量的商

品信息中快速找到符合條件的內(nèi)容

篩選有結果

用戶篩選成功后，篩選標簽會展示在專輯

頁，還未滿足需求可刪除標簽

登錄

登錄頁使用信息居中，輸入框設計，主

次分明

注冊

將登錄注冊操作層級差異化，便于用戶

區(qū)分

重置密碼

重置密碼頁也是在登錄時忘記密碼時的

一環(huán)，輸入郵箱在進行跳轉(zhuǎn)重置

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首頁分為頭部（日歷賬單+賬本切換）、二級導航欄（可切換不同花費信息）、記賬

數(shù)

值板塊，方便用戶清晰明了產(chǎn)品內(nèi)容及功能

二級導航欄（可切換不同花費信息）

記賬數(shù)值板塊

頭部（日歷賬單+賬本切換） 層級1

層級2

層級3

page

報表界面

Report page

unting interf

記賬界面

Accounting interface

face

其他頁面

other pages

other p

pages

17

Contents

Flash主題設計

小森林小程序

熊貓記賬APP

Nova2022主題設計

Nova2022行業(yè)風格拓展

Geek “智能+” 行業(yè)品牌設計

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 創(chuàng)造 Create

簡約 操作界面簡潔明了，簡單易懂，保證大部分用戶能快速熟悉產(chǎn)品內(nèi)容

時尚 視覺上偏向時尚女裝方向，凸顯產(chǎn)品品質(zhì)與品牌調(diào)性

創(chuàng)造 對關鍵頁面信息進行重新梳理重設計，提升易用性

布局

layout 布局上通常按照4的倍數(shù)來計算不同元素所占比例，通過將設計元素放置在適當位置，創(chuàng)

造一個干凈簡單的界面；例如商品詳情里圖集通常占頁面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

產(chǎn)品介紹 / product description

在舊版Nova基礎上進行全新的優(yōu)化設計，是 款簡單時尚但可定制的網(wǎng)站，以創(chuàng)造性和

引人入勝的方式展示產(chǎn)品的主題

目標人群 / Target population

不同國家不同地區(qū)不同領域會上網(wǎng)網(wǎng)購的消費者，更偏向于歐美用戶群體

Demand Combing

體驗升級

用戶訴求

1.在網(wǎng)購瀏覽時快速在頁面獲取有效信息

2.操作可用性加強，減少選擇時誤觸跳轉(zhuǎn)

3.豐富卡片的排版，多選擇進行店鋪裝修

4.不同品類的賣家需要不同風格的演示站

視覺升級 功能升級

1.視覺細節(jié)上升級，把握歐美設計風格

2.調(diào)研分析用戶行為，交互邏輯重新梳理

3.提升用戶體驗，建立消費者的信任感

4.增加小組件設計，提升店鋪高轉(zhuǎn)化

產(chǎn)品訴求

Revision direction

增加黏性

用戶層

· 豐富產(chǎn)品功能使用場景

· 優(yōu)化排版，實現(xiàn)用戶高效舒適瀏覽

· 優(yōu)化交互，提升用戶使用體驗和活躍度

提高轉(zhuǎn)化

產(chǎn)品層

· 塑造品牌差異化，建立認知

· 優(yōu)化信息層級關系，提高閱讀效率

· 增強用戶體驗，帶給賣家店鋪高轉(zhuǎn)化率

品牌調(diào)性

視覺層

· 增加情感化設計

· 制定設計規(guī)范，統(tǒng)一設計風格

· 增加不同風格，幫助賣家展示店鋪

Frame Refactoring

Home page

Themed Web Design

other cards

商品詳情頁

product detail page 優(yōu)化前：移動端圖集的布局較為不合理，影響用戶商品詳情首屏用戶體驗，導致在屏幕尺

寸較小的手機端加購轉(zhuǎn)化率過低

優(yōu)化后：移動端圖集保留了全屏和占屏三分之二的比例，讓用戶瀏覽時快速在首屏獲取有

效信息

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

首屏：會推薦使用幻燈、視頻、圖文卡片等能夠明確傳遞品牌，商品信息的元素

次屏：會推薦薦使用推薦專輯、促銷商品等卡片向買家展示商品，將更多商品入口展示給買家，

方便買家選擇商品，增加轉(zhuǎn)化機會

幻燈

明確傳遞品牌，商品信息

商品詳情變體有五種搭配方案

優(yōu)化前：變體的布局樣式也較為不合理，使得之前用戶在點擊變體時常常誤觸

優(yōu)化后：增強變體的可用性，增加了適用不同行業(yè)的搭配方式，給不同品類的賣家更多選擇

圖文卡片

講述品牌故事，強化品牌認知

推薦專輯

向買家展示商品，增加轉(zhuǎn)化機會

專輯詳情頁

Album details page

其他頁面

other pages

購物車頁

shopping cart page

篩選與排序

Quick shop

優(yōu)化前：快速加購彈窗的操作按鈕在商品信息下方，會使頁面展示的有效信息較少

優(yōu)化后：將快速加購按鈕做成icon形式的按鈕放置圖片上，頁面內(nèi)容會更精煉簡潔，點擊

加購按鈕彈出加購彈窗，完成快速加購動作

22

商品詳情小組件

如今海外用戶的購物滿足感在不斷升級，隨著購物頻率的增長，為了幫助賣家提升店鋪轉(zhuǎn)

化，這次商品詳情的優(yōu)化也新增了一系列的功能組件

提示標簽：目的是為了提前明確物流費用和額外的關稅費用，避免售后爭議

免郵進度：提前向用戶預知運費，在商品詳情頁提示是否免運費或再購買xx元可免運費

投遞時間：降低消費者的不確定感，推動消費者達成跨境訂單，提升買家的購物體驗

庫存&觀看人數(shù)提示：可以刺激買家下單

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

優(yōu)化前：商家無法通過配置專輯封面或詳情介紹來使得用戶在瀏覽過程中的達到視覺沖擊

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

購和商品展示

優(yōu)化后：增加了專輯封面和詳情介紹，調(diào)整了一屏所展示商品數(shù)，實現(xiàn)用戶高效舒適瀏覽

Save 8%

Cord textured dress

$98.00 $48.00

+6

優(yōu)化前：篩選與排序為分開操作，同時增加專輯封面和詳情介紹頁面有效信息獲取會更少

優(yōu)化后：將篩選與排序功能合并 起排版設計，交互為從右至左淡入篩選框，用戶通過篩

選、設置接近于目標需求的條件，減少交互步驟，用戶體驗得到很大程度的提升

優(yōu)化前：舊版Nova購物車里當商品信息過多時頁面信息傳達和調(diào)理不清晰，用戶的交互

行為受到阻礙，導致購物車轉(zhuǎn)化價值較低

優(yōu)化后：將商品信息進行簡化，容易誤觸的元素重新排版設計，調(diào)整了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行業(yè)風格拓展

Geek “智能+” 行業(yè)品牌設計

H5

插畫

UX/UI Desig

UX/UI Desig

Visual Desig

17

24

gn (Mobile)

gn (Web)

28

gn

項目背景

精品啟蒙早教課在活動期間，登錄點擊即可領取

該APP官方送出的優(yōu)惠大禮

包，吸引用戶回歸報名即可獲得額外獎勵

顏色規(guī)范

ec7341 f09651 817ed6 f9dfca

項目背景

今天你讀書了嗎活動，使用動作人物形態(tài)圍繞活動進行組合，以小女孩正在讀

書等畫面凸顯主題，

豐富活動內(nèi)容

顏色規(guī)范

e25b32 eeb249 19428a 061735

H5

H5活動頁

26

封店等待商

shop tips illustration

店鋪提示插畫

家開啟 店鋪不存在 過期未續(xù)費

Illustration practice

插畫練習

Tel: 1827

Mail: wuqianbu

Thanks For

Thanks For

71195632

uchi@163.com

r Watching

r Watching