Portfolio

2022

'(6,*1

:25.6

'(6,*1 %< &+(1-,1*



PORTFOLIO

/

—

$33'HVLJQ %(QG'HVLJQ :(%'HVLJQ 2WKHU'HVLJQ

UIUX

你好，

我叫陈婧。

UI设计师 / 21岁 / 苏州大学应届生

T：18036119946（同微信）

@：zaizai010705@163.com

有互联网UI实习经验，参与过APP、B端等类型项目，对产品设计有自己的见解。

掌握Sketch、Ai、Ae、Ps、Principle、Figma等设计软件。

手绘能力较强，能独立输出H5、banner、ip等运营设计。

设计专业出身，手绘理论功底扎实，有浏览各大设计网站的习惯，因此对设计趋势敏

感，对优秀设计方法保持探索欲望。

个人优势

宅家APP 1.0 —— 主要负责APP高保真界面输、icon设计和IP及系列延展设计。

宅家后台管理系统 —— 主要负责界面设计和模块细节优化

忆点英语APP ——主要负责风格把控和界面高保真输出以及相关运营banner设计。

UNFOLDS珠宝官网设计 —— 主要负责高保真输出、制定组件规范、风格把控。

项目经验

专业年级第三名 / 两次获得“企业奖学金” /担任班长、学生会部长、街舞社社长等职务

江苏省大学生创新项目 —— 项目负责人，项目获得同批次第三名

大学生文创产品设计项目 —— 项目负责人，产品设计二等奖，成功落地产品并售卖。

快乐生活 —— 5年舞蹈老师经验，获得多个赛事冠军 / 热爱骑行、户外跑、陶艺品制作。

校园经历

01

$33'(6,*1

02

%ᒒ'(6,*1

03

:(%'(6,*1

04

27+(5'(6,*1

஡ᅩ᝕᧍

ਛਹਹٍ ਛਹݣݸᓕቘᔮᕹ 81)2/'6ਥᗑ %$11(5

+

APP

DESIGN

$33'HVLJQ %(QG'HVLJQ :(%'HVLJQ 2WKHU'HVLJQ

CHENJING

01 ஡ᅩ᝕᧍

ਛਹਹٍ

=+$, -,$

'(6,*1

:25.6

'(6,*1 %< &+(1-,1*



=+$,-,$

/

—

ਛਹ

8,8;̶

'(6,*1

΄

=+$,-,$

=+$,-,$ਰٖਹٍܕࠓԾߝ༷ᬿ

=+$,-,$LQGRRUIXUQLWXUHVDOHVSURGXFWRYHUYLHZ

=+$,-,$ฎӞྃᑏۖਹٍᨻᇔଘݣ᫫կ҅۱ތਧګਹ̵ٍᇿਹᦡᦇ̵

ٌ՜ߝᇈᒵਹٍᔄࣳ

=+$,-,$LVDPRELOHIXUQLWXUHVKRSSLQJSODWIRUPVRIWZDUHLQFOXGLQJ

FXVWRPL]HGIXUQLWXUHH[FOXVLYHGHVLJQ)XUQLWXUHW\\SHVVXFKDVRWKHU

EUDQGV

7KHKRXVHLVQRWMXVWDIXUQLWXUHSODWIRUPZHKRSHWRFRQYH\\RXULGHDV

WRXVHUV+RSHWRKHOSXVHUVFUHDWHWKHLURZQZDUPKRPHVDQGVWULYH

WRSURYLGHKLJKTXDOLW\\KRPHVIRUKRPHXVHUV

ਛਹӧՐՐฎӞӻਹٍଘݣ҅౯ժๅ૶๕ݻአಁփ᭓౯ժጱቘஷ҅૶

๕ଆۗአಁ಑᭜ڊԭંᛔ૩ጱჅḗጱ֘ਛ҅ۘێԅਛਹአಁ൉׀սᨶ

ۓṛᨶᰁ๐޾ߝࠟ



0RELOH'HVLJQ &KHQMLQJ

$,- ,$+= ښᶱፓᥢ

用户体验研究 UI设计阶段

=+$,-,$

'(6,*1 

—

Industry Research UI Design

作为一款全新的产品，从0-1有着大量的工作内容和很长的时间线，所以在设计前必须做好项目的时

间和工作规划，按计划进行，才能保证有效率的推进项目，౼ᛗUIኴᶎᦡᦇ᮱ړӞړوԅӷӻᴤྦྷғ

Days

01 05 10 15 20 25 30 35 40 45 50 55

用户体验研究

K ano模型 用户体验地图

用户访谈 用户调研 原型设计

目标 结构框架

UI界面设计

风格 销量 环境 环保

ຉړᎸ᧣

行业调研

用户调研

定制

Industry Research

Industry Research

近年来，在政策调控背景下，商品房销售面积虽增速放缓但仍保持增长趋势，大量的消费需求仍是为家居

家装行业带来增长动力。随着经济的发展，家庭装修需求逐年增加，我国家居装修行业市场规模也呈现逐

年递增的趋势。为迎合当前主流消费者的需求，市场上也出现了多种新颖的设计和商业模式。

截止2020年中国家居用户装修原因调查中，“提高居住质量和居住环境”位列第一名，占比为57.6%，在

选购家居产品时，考虑“环保”、“材质”及“外观设计” 因素，其占比分别为53.17%、52.62%和49.86%。

房子已不仅仅是“容身之所”，而被赋予了温馨舒适、安逸享受等更多意义，

行业现状 设计

居住环境57.6%

环保

53.17%

外观

49.86%

材质

52.62%

购买新房17.4%

方便出租9.9%

2016

200

400

600

800

2017 2018 2019 2020

截止2020年中国家具市场规模数据分析（亿美元）

=+$,-,$

'(6,*1 

—

=+$, -,$

አಁኮ؟

结合以上数据，可以大致分析出竞品适用人群，一步可视化后构建以下产品用户画像

21岁大学生

刚毕业结束了在校的宿舍生活，现在

自己租房子住，打算购买几件性价比

高的简约时尚家具装饰房间。

想要高性价比的商品

希望商品款式时尚有设计感

用户需求

用户痛点

35岁宝妈

用户需求

用户痛点

有了小孩之后家里的空房间要重新置

办一下当成儿童房，但平时比较忙想

要快速置办整套材质环保安全的家具

想要全套的家具配置

要求对儿童无害的环保材质

27岁白领

用户需求

用户痛点

追求高质量的家居生活，对商品的外

观设计尤为看重，希望能购买到一些

设计独特的家居商品且送货上门

想要私人订制的小众设计

追求高质量的家具单品

希望能送货上门

=+$, -,$

=+$,-,$

'(6,*1 

—

ᦡᦇፓຽ΄

在梳理完所有项目准备后，团队确立一个完整的设计目标以

推进项目高效完成，分别从四个方向出发： 完整的产品功能

完整的产品功能可以让用户精准快速的找到自己需求的入口并

找到自己的心仪商品，避免功能缺失而导致用户流失。

高效的信息展示

在满足用户基本诉求的基础上，通过从交互和视觉上尽量提升内

容的高效传递，让产品体验更高效，清晰。

品牌的理念传递

从色彩、组件规范、图形等内容上去向用户传递产品的品牌理

念，让用户深刻了解产品，同时也与市面产品做出差异化。

提升用户粘度

通过完善的产品功能和高效的产品体验，再增加情感化设计和签

到奖励去激励用户从而提升用户粘度。

家具

FURNITURE

宅家

ZHAIJIA

=+$, -,$

=+$,-,$

'(6,*1 

—

Ծߝຝ຅΄

产品架构可以清晰的看出产品的思路框架，快速了解产品的

核心内容和包含的功能

宅家 发现

加购

我的

分类

首页 私人订制 优秀案例 精选品牌 最近上新 超值精选 销量最高

品类 房间

宅家社区 宅家推送 搭配灵感 不止设计

购物车 宅家推荐

加入宅家 订单状态 我的收藏 我的足迹 优惠礼券 发票管理 收货地址 在线客服 用户协议

=+$, -,$

=+$,-,$

'(6,*1 

—

ఘᖃᇇ΄ =+$, -,$

=+$,-,$

'(6,*1 

—

关键词：舒适、简约、品质、细节

关

键

词

舒适 / 简约 / 品质 / 细节

ᦡᦇᥢ᝜΄ =+$, -,$

完善的设计规范从色彩、字体、组件以及LOGO等部分都可以

被体现出，制定完善的设计规范也是产品差异化的重要一步

深棕

R:110 G:76 B:52

辅助色

基于 R:189 G:152 B:112

Regular/Medium bold

Regular/Medium bold

苹方

DIN Alternate

米灰

R:206 G:199 B:186

字体色

基于 R:170 G:170 B:170

字号

字号

14pt / 16pt / 18pt / 20pt

14pt / 16pt / 18pt / 20pt

粗细统一 圆角统一

FRONT/COLOR

字体规范/颜色规范

LOGO/ICON

字体规范/颜色规范

TAB栏

其他图标

其他图标 new



COMPONENT

作图组件/作图规范

背景层

模块信息

图片展示

=+$,-,$

'(6,*1 

—

ࣘ຃ኴᶎᦡᦇ

,17(5)$&('(6,*1

以下做出了宅家APP部分重要界面展示+动效展示，并对界面内容做出了

概述和解释分析。

Ḓᶭ΄ =+$, -,$

ԫᕆ੕ᛯ

ݗف܄ڟᰂ

᩻꧊ᔜᭌ

ᲀᰁ๋ṛ

=+$,-,$

'(6,*1 

—

ᧈਿԡ಄ଷ༗ŏ

૪ࠓկ

¥2059

TOP

3

ᐺՈᦈګ սᐹໜֺ ᔜᭌߝᇈ

new

๋ᬪӤෛ

用户可以在首页二级导航处点击或滑动卡片快速切换自己喜欢或想要了解的

室内风格类型，如北欧、现代、原木、轻奢、美式等。

根据产品定位，首页功能入口的四个核心功能分别推出私人订制、优秀案例、

精选品牌、最近上新等四个业务模块。

各时段会推出不同的优惠活动，用户可以根据需求点击查看更多打折促销商品

推出时下人气最高的家居商品，并以卡片形式展示出价格和销量。

商品图片

商品名称

商品价格

销量排名

商品销量

ᐺՈᦈګ սᐹໜֺ ᔜᭌߝᇈ

new

๋ᬪӤෛ

ᴴ෸ರಕ

ᒈܨັ፡

ၹᰁࠟߝ֗ᛗರ

ᔜᭌߝᇈ΄

սᐹໜֺ΄

սᐹໜֺ

ߝֺࠟໜ

推送的案例中宅家筛选出能够被购买的商品并提供售卖服务，不需要单独

搜索，提高了用户使用的效率。

宅家定期搜集并推送优秀案例，吸引用户目光提高转化率，为用户提供选购

灵感并归纳出该案例的基本信息，以及案例中出现的的商品，还贴心标出价

格和销量，只需点击去看看就能查看或购买商品。

ሿդᓌᕅ ӣਰӷܱӞܣ

Ӥၹӕᣟڠᰂउ࿯ܖ଱ᮚ ᶼᓒӕӡ

Pu

案例基本信息

点击跳转商品详情页

ᓌᕅṛᕆሿդᕚ๵پ֜ԡໟ

ᲀᰁffiffi ݄፡፡

¥2199

点击跳转购物车界面 ߝࠟ

=+$, -,$

=+$,-,$

'(6,*1 

—

ᐏ௳઀מᇈߝ

通过卡片式的信息展示方式展示出品牌的核心信息，横滑可见，节省页面跳

转并让用户可以快速大致了解该品牌，如该品牌提供的家具系列和货期。

如果用户对该品牌感兴趣可以点击收藏，收藏该品牌并查看品牌商品上新

情况，以购买最新商品。

品牌名称

品牌信息

品牌图片

收藏品牌

௳מߝࠟ

品牌商品通过室内分区来展示，用户可以直接找到对应空间的商品购买。

ሿդᕚ๵ఽᜏ๞᝷پ

¥1399

ᲀᰁ

商品图片

商品名称

商品销量

商品价格

ታَ

!

/$6.$6$6

ᨵ๗ғӻૡ֢෭ٖ

ߝᇈᙧวғ/$6.$6$6ฎ๶ᛔታَጱقቖᎣݷਹٍ

ڜᆙกᔮ̵ڜᔮ̵݀಄ڜਰᔮܡ̵ڜᔮݎғଷ༗ဉٖ਻ߝԾ

ሿդᕚ๵ఽᜏ๞᝷پ

¥1399

ᲀᰁ

๋ᬪӤෛ΄ =+$, -,$

=+$,-,$

'(6,*1 

—

ffifl  

案例基本信息

案例基本信息

๋ᬪӤෛ

ᥡ፡ᦧᦞ

大卡片横滑模式减少页面跳转也能更好的将商品信息精简的展示出来，该

界面可以直接跳转至商品详情页，详见动效图。

界面中可以看到浏览过的人数数量，用户可以进入评论区进行评论或互动，

该功能可以有效的提升用户粘度。

Ӟӻਠෆጱᨻԣၞᑕ΄ =+$, -,$

=+$,-,$

'(6,*1 

—

98人想要

ߝࠟ፡ັ

APP内有多个查看商品的入口，这里以最近上新商品举例，点击界面内的购

物车Icon即可跳转到该商品的商品详情页面。

商品详情—加购—确认订单—支付订单

商品详情—立即购买—确认订单—支付订单

点击加购Icon即可跳转至商品详情页面。

ᧇఘᶭߝࠟ

商品详情页主要分为商品大图、商品信息、用户评价、店铺主页、商品详情

等几个模块，让用户清晰了解商品信息。

通过对商品产地、平台保证和商品评价等让用户从真实角度了解商品，建立

用户对商品的信任。

强化信任

该部分主要是商品的信息展示、价格展示、同时也包括收藏、推荐分享等交

互功能。

建立认知

තᡐ വគ ړՁ

ਛਹਹٍ ਛਹz۹ཾਹٍᅾܕགzᒫݷ 强化商品认知

用户交互功能

ᨻԣᶭᶎ

点击立即购买后跳转到此页面，用户可以挑选自己想要的商品尺寸。

ᕟݳᨻԣๅսణ

¥1099

սణ

૪ᭌғ

Ք෭ӥܔ҅ᧆࠟߝਖ਼ԭݎڹᨵ

ᔂᜋ̵ॺᤰ̵



 

选购信息

ܔᏟᦊᦈ

用户核查订单收货地址、已选购商品信息、订单明细、货期、优惠等。

显示收货人信息，点击可进行切换或添加收货人信息。

显示商品缩略图、名称、尺寸、数量。

ૈૈ 

Ӥၹ૱ࡱਧ܄ਞՃ꧒ෛ꧒ແ

&2)$ᧈਿ๙ګໟᷧ

ړᔄғ&RGDܻ๙ᜋӕ๙༗ॺᤰ [

੮ੑғ





ݎᨵ෸ᳵғॠ

&2)$ܱᷧᓌᕅໟپ

ړᔄғ&RGDᔂᜋӕᕭ૲ဉݎ] 

੮ੑғ





ݎᨵ෸ᳵғॠ

&2)$q

商家及商品信息

强化信任

建立认知

商品大图

ᔄړ $,- ,$+=

=+$,-,$

'(6,*1 

—

ᔄᶭᶎړ

该页面是商品的分类页面，左侧栏有折扣商品、排行、风格、和商品的类别。右

侧为商品内容具体展示，用户通过滑动点击左侧分类即可查看对应分类商品。

用户也可以直接在上方搜索栏进行搜索或拍照识别商品。

ڜᔮ੻ق

宅家归纳出市面上常见和近期流行的室内家具风格，推出系列套餐，用户可以

首先根据展出的大图对该风格有大致的了解，再进入查看系列商品，每个系列

有6-8个不等的成套商品。

ሿݎ $,- ,$+=

=+$,-,$

'(6,*1 

—

ሿݎ

发现页面是宅家保证用户日活和提升用户粘度的重要环节。

܄ਛਹᐒ

宅家社区内用户可以上传自己购买的商品并分享自己的购买心得，也可以提出

问题，等待其他用户的热心评论，甚至可以分享自己的日常居家生活。

界面采用瀑布流布局。



෫᧍ևྲጱᦡᦇᡕᖫګ֢ૡᜏ

Ӥԙ҅Ӟڔ᮷உᒧݳ

٘٘ 背景层

模块信息

图片

$,- ,$+= ሿݎ

=+$,-,$

'(6,*1 

—

ਛਹവᭆ

宅家小编会为用户推送与家具相关的文章或采访，用户可以

学习到关于不同品牌家具的知识，也可以了解到每一样家具

背后独一无二的温柔故事。

)୵૲ੴ

设置F型布局遵循人眼浏览的共同趋势，引导用户在浏览时

点击查看购买商品。

hflfl h

hflfl

2)8&<ᡕᖫ༗

2)8&<ᷧໟ༗

2)8&<ਫ๙༗

֦ᦊԅਹጱ఺ԎฎՋԍ\"

ྯӞӻՈஞ᯾ᶎ੒ਹ҅᮷ํ፳ᶋଉӿ੄ጱఘఽ̶

ਹฎᔜᐟӤஉ᯿ᥝጱׁಓ҅ฎᛔ૩ջ௳ኜᛗץᤈጱࣈො̶

ᨻے $,- ,$+=

=+$,-,$

'(6,*1 

—

ᨻے

用户挑选好商品后，可选择加入购物车或直接结算，而购物车的存在则是缓解

用户情绪，把选择权交到用户的手上，减少压迫感。

ԅ఍വគ

用户挑选好商品后，可选择加入购物车或直接结算，而购物车的存在则是缓解

用户情绪，把选择权交到用户的手上，减少压迫感。

ሿդᓌᕅܡਰܻ๙ܻᔰ๙ŏ

数量

尺寸

名称

状态

图片

价格

౯ጱ΄ =+$, -,$

=+$,-,$

'(6,*1 

—

౯ጱ

我的页面主要包括用户个人信息、订单信息以及其他服务。

ຉړ݉Իਁ܈

利用十字交叉分析法来对我的功能划分具体层级。

இ՞ྃ இݎᨵ இතᨵ இᦧհ ᭅྃݸࠓ

加入会员

用户数据

其他服务 消息推送

设置

订单信息

用户信息

对用户的重要程度

对

业

务

的

重

要

程

度

利用十字交叉分析法给功能划分层级

'(6,*1 =+$, -,$

:25.6

'(6,*1 %< &+(1-,1*



=+$,-,$

/

—

ٌ՜΄

ᶭᶎٖ਻

=+$,-,$

'(6,*1 2022

—

=+$, -,$

ኴᶎ΄

ٖ਻઀ᐏ

=+$,-,$

'(6,*1 

—

'(6,*1

:25.6

'(6,*1 %< &+(1-,1*



=+$,-,$

/

—

好了，

接下来看点有趣的。

小宅

XIAO ZHAI

来喽

IS COMING

IP design

chenjing

design by 2022

IP design

original

chen jing

xiaozhai

小宅IP形象

XIAOZHAI IMAGE DESIGN

নݷғੜਛ

ᇙ஄ғ௛ฎᑯ፳Ӟկᙧଃ᤼ૡ֢๐

ۖᇔܻࣳғᖍᗤ

௔໒ғ౗̵ܹݰᝒᘔ۞̵ᨱձஞ

ي᪁ғ୮Ӟݝૡٍᗤ

ࢶӣᥤ

'(6,*1,'($6

΄

ஙמᤒఘ

:(&+$7(;35(66,21

΄

ಚᬯدӥ᫹ஙמᤒఘ

,3ഘᤰ

,3'5(6683

΄














NAME

MY

IS

ZHAI

X ZHAI ORIGINAL IP DESIGN

©All Rights Reserved by Chenjing














NAME

MY

IS

ZHAI

X ZHAI ORIGINAL IP DESIGN

©All Rights Reserved by Chenjing














NAME

MY

IS

ZHAI

X ZHAI ORIGINAL IP DESIGN

©All Rights Reserved by Chenjing














NAME

MY

IS

ZHAI

X ZHAI ORIGINAL IP DESIGN

©All Rights Reserved by Chenjing














NAME

MY

IS

ZHAI

X ZHAI ORIGINAL IP DESIGN

©All Rights Reserved by Chenjing














NAME

MY

IS

ZHAI

X ZHAI ORIGINAL IP DESIGN

©All Rights Reserved by Chenjing

୚੕ᶭ΄

୨ᑻ΄

ᗌ፜ᶭ΄

=+$,-,$

'(6,*1 

—

=+$, -,$

=+$, -,$

=+$, -,$

߶ݩמ෫ฮ

ٚᦶӞེ

ࡏ୏ᗑᕶෙ

ෛӞӥڬ

೘ಓ੪ᓒဌՈᆽԞᥝ੒ᛔ૩অӞᅩ

ᶭᶎᤩक़จՈಬᩳࠩ

ᅩڋಸᲙ

๚ັᧃکᦈܔ߶

᦯Ძىጱڦᦶᦶ

ӧฎݠ፥੪Ӟ๵מ௳᮷ဌํࠡ

当页面出现丢失或其他问题时，使用IP情感化设计来安抚用

户，减少因为页面反应不及时导致的用户焦虑。

引导页面采用IP插画来表现，情感化设计向用户大致介绍A

软件功能亮点。

弹窗的设计可以向用户传递近期平台内的活动，起到促活的

作用。

大标题设计吸引用户视觉

按钮设计，点击进入活动

情感化设计将IP融入活动

关闭当前弹窗

BY

ZAI

஡ᅩ᝕᧍

ENGLISH APPLICATION

MEMORIZE

EDIAN

SIMPLE & FAST

关于忆点英语.

about E DIAN E DIAN

E DIAN ENGLISH.

ChenJing。

忆点英语是一款轻量化的英语单词学习软件，主要解决用户的英语单词碎片化学习的需求。

即一款可以随时随地高效背词的英语单词软件。

E Dian English 2022 UI

01 -

ၹᰁ᦯ପӕᵋᙧᵋލ਍ ԟᤰ॓ӕԪ׭ۑ܎ ᪁ݎޱሿӕӞ᩸ړՁ ᔜߝ᧞झӕقෛӤᕚ

01 02 03 04

Massive thesaurus Learning Equipment Interesting Discovery Excellent Classroom

涵盖从大学四六级、考研英语、雅思托福、专四专八

到日常用语等海量词汇，用户根据需要选择相应书

籍，打开软件即可快速进入单词学习界面或利用碎片

时间进行随听单词。

无论是在校学生、出国留学党、上班族还是英语爱

好者，忆点格根据用户的不同需求推出针对性不同

的课程如：考试攻略、技能提升、口语课堂、情景

课堂等，帮助用户快速提升英语能力。

考虑到面对长期或短期学习的用户会在一定程度上产生学习

疲劳，忆点贴心设计如组队打卡、课外阅读、宝藏同学、学习

广场、英语树洞等活动和平台，用户可以参与活动或在平台

上分享心得，也可以换一种方式学习，缓解学习疲劳。

亿点提供了多种辅助学习方式如词根词缀、派生词记

忆、分类词组、语境记忆、影视记忆等，在学习后自

动推送艾宾浩斯遗忘曲线复习列表用全拼练习、听音

复习等方式加深单词记忆达到永久记忆的效果。

用户分析。

User Analysis E DIAN

E DIAN ENGLISH.

ChenJing。

在项目设计前对目标用户数据进行详细的调查分析和整合，最后得出以下展示数据。

E Dian English 2022 UI

02 -

英语学习用户中15-30岁占多数

女性学习人数多于男性学习人数

አಁᘳӱᵞӾࣁ਍ኞ޾Ӥቔ෧

界面应偏向年轻化、简洁高效化

根据职业特点应高效利用碎片化时间

功能应贴近互联网思维

数据来源：艾瑞数据

15-30

68%

BOY/ GIRLS/

32% 68%

用户画像。

Users Analysis E DIAN

E DIAN ENGLISH.

ChenJing。

在项目设计前对目标用户数据进行详细的调查分析和整合，最后得出以下展示数据。

E Dian English 2022 UI

03 -

Name

夏瀚里

面临大学六级考试，自身单词数量积累不够无法通过考试，又因为课业

学校活动比较多时常忘记背单词。考虑在毕业后可能会选择考研或者出

国，面临考研和出国的双重压力，英语基础较薄弱，独自备考没人讲解

会遇到很多困难，导致学习进度慢且学习情绪并不高涨。

需要短时间内提升应试能力、积累大量单词、定时推送学习提醒、辅助

记忆。

用户描述

用户需求

Age

21

Work

大学生

Name

陈梓贝

工作上面临公司与外企对接项目，但由于英语口语不好无法流畅沟通，面

对项目的专业术语和商务英语表达也无从下手。考虑到之后可能会出国出

差以及晋升加薪，需要快速提升自己的英语能力，但平时工作繁忙，没有整

块时间学习英语，所以学习计划一直被搁置。

需要在碎片时间内得到高效针对性的单词能力提升。

用户描述

用户需求

Age

29

Work

企业高管

情绪版。

Mood Version E DIAN

ChenJing。

E DIAN ENGLISH.

从设计理念中提取关键词作为设计依据，视觉层面设计风格关键词提取为——沉浸、个性、高效、简洁

E Dian English 2022 UI

04 -

沉浸 高效 简洁 个性

Profession Profession Profession Profession

设计规范。

Design Specification E DIAN

E DIAN ENGLISH.

ChenJing。

设计规范的存在可以有效保证项目输出的一致性。在APP内

常规界面都呈现出一只的设计语言、产品调性，从而建立产

品的连贯性、一致性。在用户侧也能更好的保证用户的视觉

效果统一，提升用户的使用体验。

在项目开发或者迭代时，可以减少不必要的时间花费和沟通成

本，从而使整个流程变得更高效。

以下是关于壹点的字体、组件、色彩等规范。

05 -

34 PX

PX 34

字体规范。

Word Standard E DIAN

ChenJing。

E DIAN ENGLISH.

制定字体规范，确保字体、字号大小、粗细、颜色统一，保障界面视觉大小的一致性，区分页面层级。

06 -

高效 简洁 个性

Profession Profession Profession Profession

A Din Alternate

Regular/Medium bold

大 苹方

常规/中黑体/中粗体

R：0 R：51 R：114 R：153 R：188

G：108 G：51 G：114 G：153 G：191

B：255 B：51 B：114 B：153 B：193

E Dian English 2022 UI

色彩规范。

Color Scheme E DIAN

E DIAN ENGLISH.

ChenJing。

产品的主色为蓝色，给用户传递出简洁理智、高效的感觉，辅助色选用同色系的青绿色，视觉上更和谐的同时

候能突出重点内容，点缀色则用于一些盈利点，更能吸引用户注意。

品牌色：

辅助色：

点缀色：

用于Button、icon、搜索等

用于背板、选中状态等

用于活动或购买课程等

E Dian English 2022 UI

07 -

#333333

品牌主色

#5ECDF0

#8C55FB #FF9F26

辅助色

点缀色 点缀色

组建规范。

Component Specification E DIAN

E DIAN ENGLISH.

ChenJing。

E Dian English 2022 UI

08 -

界面中组件的规范定为1X=4px，在此规范下规范界面内的

间距和大小，这样的规范可以适配不同大小的圆角和距离，

避免界面中出现单数的情况。使整体页面更均衡对称，从

而达到加强视觉观感和提升用户使用体验的目的。

Tips：特殊情况下对规范进行小范围改动以使界面更协调。

组件规范：1X=4px

୏ত਍ԟ

Ք෭਍ԟහᰁғ

᦯࿤᦯ᕆ໐ஞم

6X

6X

2X

3X

7X 6X

7X

2X 2X

2X 2X

1X

2X

3X

4X

图标设计。

Icons Analysis E DIAN

E DIAN ENGLISH.

ChenJing。

图标的设计风格是走简洁直观的视觉调性，保持圆角的风格，精致统一的设计让用户专注于产品核心。

关于图标

E Dian English 2022 UI

09 -

TAB

其他

金刚区 Eng Eng

首页设计。

Home Page E DIAN

E DIAN ENGLISH.

ChenJing。

10 -

E Dian English 2022 UI

ၚۖ%$11(5

ݗفԟ᦯਍ܔ

ཻࡅ֦ሖ

ၚۖ%$11(5

܄ڟᰂ

亿点英语定期推出不同限时活动，通过促活吸引用户参与并分享以达到留存

和拉新目的。

单词学习入口内显示当前正在学习和复习的书本、当日学习数量、当前学习进

度；用户可以快速了解当日学习计划，点击开始按钮即可跳转至学习界面。

根据后台用户数据，推送用户可能感兴趣的内容或适合用户当前水平的学习素

材以及当下有热度的英语相关话题。

卡片式设计可左右滑动了解当日更新，点击更多查看过往推荐。

测试类型活动banner吸引用户参与，并帮助用户了解当前个人学习水平。

金刚区内是软件核心功能的入口，用户点击金刚区图标即可快速进入。

ᵋލ᧞ झ ኞ᦯

Eng Eng

学习数量

学习进度

开始按钮

ሖ֦ࡅ ཻๅग़

ྯ෭flfflๅෛ

查看过往推荐

推荐内容

卡片式左右滑动查看其他

 ړᰦၥᦶ᝕᧍࿜ଘ

生词本。

Glossary Design E DIAN

ኞ᦯๜

Ԏ᦯᯽ܔ

根据前期数据调研得出，用户除了背诵词书外，个人摘录的单词量也巨大，

需要个性化生词本来收录以便学习和复习。

点击单词即可查看单词释义和发音，点击搜索可查看完整释义。

根据摘录的日期查看单词

查看完整释义



0



7



:



7



)



6



6

8์

GRPHVWLF >GđˈPHVW鎲N@

DGMࢵٖጱҔਹꁿጱҔਹِጱ

Q֧ՈҔਹꁿᔿᕔ

ChenJing。

E DIAN ENGLISH.

E Dian English 2022 UI

11 -

مࢥᕆ ᵝ௏ಓᐰ ᘍᎸ᝕᧍ ӫࢥӫك

课堂。

提供海量课程，全方面覆盖目标用户需求，提高用户使用率和产品收益。

二级导航精准分类，横向滑动帮助用户快速找到目标领域。

根据二级导航分类再次细分具体课程内容，设置课程入口，用户点击即可进

入针对性的学习课程。

采用卡片式布局，将课程信息、教师信息和价格等内容标注出来，用户可进

行课程预览。

ԫᕆ੕ᛯ

ݗفᚆۑ

ݗفᑕ᧞

مࢥᕆ ᵝ௏ಓᐰ ᘍᎸ᝕᧍ ӫࢥӫك



̓ࢵڊ̈਍஠ᵝ௏ӡ᦯ሴૣᦕ

6X /LOL $QG\\ ᴴࠓՈ૪ࠓՈ

¥199

ᵝ௏ಓᐰ

随听。

Listen Anytime E DIAN

沉浸高效

Profession

ލᵋ

作为亿点的核心功能，随听内包括单词、单词解释、例句等，帮助用户利用碎

片时间进行单词预习或强化记忆。

根据需要，用户可以通过右上角“设置”进行个性化调整，如仅需播放单词、

调整倍速等。

设置

个性化设置、倍速播放、听写模式、定时播放

单词学习。

Word Learning E DIAN

ChenJing。

E DIAN ENGLISH.



沉浸 高效 简洁 个性

Profession Profession Profession E Dian English 2022 Profession UI

ԟ᦯਍ܔ

单词学习界面以功能为主，简洁的界面更有助于用户专注学习。

例句引导用户独立进行单词词意分析同时创造语境，从而加深用户

对单词的印象，辅助用户记忆。

混淆选项测试用户掌握水平，再次加深用户对单词的印象。

用户根需要可以点击进行学习笔记，记录问题，每组单词学习完成后

可进行笔记复习。

发现。

Discovery Design E DIAN

E DIAN ENGLISH.

ChenJing。



E Dian English 2022 UI

ᴴ෸ၚۖ

ԅ֦വគ

ᅾᳪၚۖ

ߝ֢౯ጱ

᪁ޱၚۖ

亿点英语定期推出不同限时活动，用户可在平台内组队或分享好友进行活动

打卡，通过这种促活方式保证留存和拉新率。

长期备考和短期突袭必然会导致用户学习疲劳，趣味活动模块内有不同的活

动内容，用户可以在模块内进行互动或以不同的学习方式学习，缓解用户学

习疲劳，提升学习兴趣以及提升软件使用率。

根据后台用户浏览数据，推荐用户可能感兴趣的书籍或电影，鼓励用户多进行

口语练习。

不定时推出英语口语相关的线上课程，用户可以通过关注热门活动付费参加喜

欢的活动或课程。

用户可通过跟读免费练习或者付费生成朗读作品并导出，平台将记录作品分

数，分数较高的用户作品可在“配音秀”模块被其他用户观摩。

ܜ಑ᕟᴚ ܜ಑ᕟᴚ

ᕮ֎ᕟᴚ਍ԟ ᕮ֎ᕟᴚ਍ԟ

ໟݶತӻໟ ݶತӻ

԰ፘፊ፽පሲXS ԰ፘፊ፽පሲXS

ඎਮ

๶ލᅩӧӞ໏ጱ

ᯈᶪᐹ

ՈՈ᮷ฎᯈᶪާ

໅၏

๶ᬯ᧔᧔֦ጱஞ᯾ᦾ

我的。

My Design E DIAN

ChenJing。

E DIAN ENGLISH.



沉浸 高效 简洁 个性

Profession Profession Profession E Dian English 2022 Profession UI

౯ጱ

我的界面主要包括用户信息、学习数据和其他服务

根据功能重要程度划分层级和排序

平台每日记录用户学习数据，帮助用户实现学习数据可视化

其他服务

用户信息

学习数据

学习数据

用户信息

಑ܜॠහ ౯ጱᰂ૰ ౯ጱᦈܔ

界面展示。

Interface Display E DIAN

E DIAN ENGLISH.

ChenJing。



E Dian English 2022 UI

Bᒒ

DESIGN

$33'HVLJQ %(QG'HVLJQ :(%'HVLJQ 2WKHU'HVLJQ

CHENJING

02 ਛਹݣݸ೯ܲᔮᕹ

'(6,*1

:25.6

'(6,*1 %< &+(1-,1*



=+$,-,$

/

—

ਛਹ΄

'(6,*1

ᓕቘᔮᕹݣݸ

ZHAI JIA

=+$, -,$