1606637442@qq.com

18210322457

UI/UX Designer 赵诚

2022

UI/UX Portfolio DESIGN

Good design

is innovative.

HELLO！

个人信息

工作经验

掌握技能

个人优势

赵诚

18210322457

2020-2022

2016-2019

“Facememo德国专业儿童摄影“任职UI设计师

“鑫尊地产“任职房产销售转UI设计师

有3年工作经验，有后台管理系统设计经验。能独立完成产品的视觉设计及交互工

作，且学习能力强，有很强的学习积极性。

1606637442@qq.com 18210322457

目录

移动端设计

WEB端设计

其他设计

01

FM摄影记

Facememo德国儿童摄影

Banner、H5、闪屏、海报

租小帮

02

03

App展示

FM摄影记

好作品 可传世

项目背景

产品介绍

我负责的

FACEMEMO德国专业儿童摄影秉承着“每一个孩子都应该有专属于他的摄影经典！”的经营理念，认为商业摄影存在的价值永远是为客户进行个性化的艺术创作，简单复制、呆板雷同

的摄影模式化运作无法产生真正的艺术品。尊重个体的差异，并且善于捕捉每一个生命个体在镜头面前的独特张力，这使FACEMO能够经久不衰的

1/18

调研 提案 原型 设计 还原度

用户群体

在公司进行内部调研得出，用户群体主要集中在25-35岁群体。

女性占比65.8%，男性占比24.2%

用户群体 年龄分布

用户需求

用户需求希望app的界面能够清新耐看，

交互及架构清晰、使用高效

根据用户调研得出

核心痛点

根据用户调研得出

用户使用痛点主要在第三方app获取信息

获取过程复杂和界面信息排列过于繁

多；在不到店之后能更透明的看到产品

制作进度

25～29

30～35

35～40

59.33%

27.82%

12.85%

2/18

用户画像

25岁/全职宝妈/北京 30岁/知名舞蹈家/北京 35岁/企业高管/北京

工作压力大，事务忙，容易忘记拍完照的后续

流程，工作人员电话提醒，容易漏接，不方便

联系，导致拍完照片后，迟迟拿不到成品

1、需要更快更直接的获取拍摄报价信息，第三

方平台浏览时，信息排布密集看起来不够整

洁， 清晰。

2、需要综合性价比高的商家，避免再有重拍的

情况发生。

消费金额会比较高，容易记不清楚自己的消费

权益，需要商户平台能清晰的展示出来自己的

消费情况。

喜欢拍照记录，注重仪式感，孩子每个成长阶段

都会选择专业的儿童摄影机构进行记录。在不同

的尝试过程中，会遇到客样照不同的商家，试错

成本高也会对最后照片不满意，重拍比较浪费精

力，折腾孩子。近期孩子马上过1周岁生日，需要

举办一场生日宴，生日宴上需要孩子的生日照。

平时时间比较充裕对生活品质要求高，跟身边朋

友进行交流的时候，会留心发现跟自己品味相符

的摄影品牌，为孩子和家庭合影留下经典的照

片，同时自己工作原因经常需要优质的个人形象

照用于宣传使用，想到了身边朋友聊到的摄影机

构。

平时工作比较忙，周末休息一定会陪着孩子度过

亲子时光，会购入专业的摄影器材，记录孩子的

成长，同时也需要更专业的机构拍出来更专业的

照片。对孩子拍照的版块亲力亲为，去陪家人逛

街的时候会留意到摄影门店，了解完风格商量合

适完之后，就会预定拍摄。

节约成本

照片品质

服务品质

需求

节约成本

照片品质

服务品质

需求

节约成本

照片品质

服务品质

需求

李迪 王晟 王晟

痛点： 痛点 痛点

描述 描述 描述

3/18

喜欢拍照 喜欢拍照 喜欢拍照

用户体验地图

阶段

接触点

用户需求

用户行为

用户感受

机会点

情绪曲线

拍摄前 拍摄中 拍摄后

·更加清晰快速的浏览拍摄信息

·拍摄之前需要准备什么？ ·哪条路线能够更快的能够到达目的地。 ·评价或问答之后会有什么好处。

1.增加智能客服功能。 1.路线导航。 1.增加评价功能

·查看往期拍摄风格，进行沟通，避免跟之前风格重复。 · 对自己拍摄过程中的体验和感受进行评价。

·找到高品味的高品质摄影机构，拍出高品质的照片。

·在这里预定方便么？产品价格怎样？产品质量和服务怎样？ ·途中我有什么疑问我应该找谁帮助我最方便？ ·可以帮助他人。

2.增加投诉帮助。 2.鼓励用户发表评价和回答问题。

3.增加门店座机号码呼叫服务入口。 3.投诉及建议

2.体现售后保障，增加信任感。

·利他主义

·能够快速、高效的拍摄

·攻略的质量和内容是否有参考价值。

3.提供更优质、真实、有针对性的内容。

·便捷的到达路线

·查看拍摄攻略 ·导航 ·评价

·浏览搜索拍摄风格的详细信息 ·求助 ·回答问题

·点赞、评论、种草 ·整理拍摄过的风格 ·投诉及建议

·提问咨询

·预约拍摄时间

·规划路线

首页、搜索、问答、详情页、消息、客服、收藏、支付、

预约

地图导航、客服、投诉、相册 评价、问答投诉及建议

4/18

看完觉得挺乱，仍然

不知道怎么选择，感

觉都是广告

在线客服里面有拍摄

前的注意事项，拍摄

流程一览无遗。

商品详情里面由人工

客服入口，回复及

时，解决了套餐内容

不能变化的问题。

拍摄过程十分顺利，

服务人员态度十分热

情，耐心。体验非常

不错。

选片看到照片，质量

非常满意，也会有各

种消息提醒选片时

间，改约档期也十分

方便。

商品套餐里面有些内

容不是自己需要的，

没有提示可不可以定

制内容。

预定到店拍摄，不知

道服务质量好不好，

过程顺不顺利。

不可以线上选片，只

能再次到店选片，时

间成本有些高。商家

周末档期紧张。

精修有些失真，没有

拍摄出来的那种质

感，沟通成本较高，

导致拿到精修时间长

投诉之后，快速解

决，态度诚恳，最终

修出满意的照片。

情绪板衍生

风格设定

基于用户群体调研显示，现在拍摄需求用户主力年龄阶段在25～29岁之

间，该阶段用户更多喜欢 ，和除儿童摄影外

的主题选择，以及更 拍摄需求。

简约的摄影手法 更多成人品

类 紧跟当下热门、潮流的主题化

简约

年轻化

主题化

5/18

功能架构 5/18

首页 所有产品 预约 我的

banner 儿童摄影 消费进度显示

亲子摄影

孕妇摄影

证件照

拍摄预约

金刚区 选片预约 我的订单

热门产品推荐 我的购物车

全部产品推荐 我的相册

我的福利

设置

设计思路

根据对产品的用户分析以及产品的主要功能点梳理产品的

的展现在app界面内。

数

据信息清晰

6/18

业务诉求 B端 用户需求

用户满意度 界面清新 层级清晰

交互便捷

高效流程

风格年轻

信息清晰

持续项目合作

提高用户粘性

客满度 使用愉悦

业务增长 操作便捷

产品原型

根据产品功能和产品架构做出部分原型，来确保产品

的交互可行性。

7/18

引导页 8/18

首页设计

首先整体是以卡片式来展示，最主要是

，分别链接相对应的

入口，紧接着下面更明确的显示“热门产品推荐”，

还有产品推荐版块内容。

“送ta礼物”、“我要拍照”、“企

业服务”、“看看周边”、“附近店铺” ，这5个版块

以便用户更直接浏

览到近期优惠。

明确用户使用场景

用户进入平台之后，会根据自己的需求选择相应的版块，若要了解活

动和选择拍摄类型，可在 和 里面进行浏览

选择

“热门活动推荐” “产品推荐”

9/18

企业服务

企业服务页面的主要目的是：为有团队整体拍摄需求的用户提

供咨询详情，分为“服务内容”和“服务流程”两个版块进行介

绍，了解结束后，用户可以点击下方“联系我们”进行预约。

企业服务的功能分析

企服务页面中 按钮使用大按钮，使此重要功能更醒

目化；预约页面使用 ，使界面

“联系我们”

选中按钮框线颜色的变化 在多选

项下更加整洁。

10/18

全部产品

全部产品是使用瀑布流的方式进行展示，给用户带来沉浸感。使用手绘

风格的icon点亮，清新的同时又不失儿童品类的可爱特征。

点击“儿童摄影” 选择一款套餐 查看套餐详情

提交信息 确认支付

支付成功

点击立即预约

选择预约时间 填写个人信息

套餐购买过程

11/18

套餐详情页

套餐详情页内容页分为“产品类型”、“服务&交付标准”和“产品详

情”三大模块，其中“产品详情”后面有“服务说明”“买家秀”两个同级

选项，为用户全方位清晰的展示套餐。

套餐详情设计语言

减少用线的分割， ，通体看起来更整洁、统一。

本页面信息承载量多，长篇字号为 减轻用户阅读大段文字的压

力。

使用大间距进行分割

15px

12/18

预约及我的

预约页分为“拍摄预约”和“选片预约”两个版块，展示出来团

队的服务信息，让用户能更直接的判断想要选择的团队。

个人中心 清晰的标出当前消费的等级 界面中 ，加上代表等级

的插画用户使用更具有趣味性。

13/18

部分页面 14/18

部分页面 15/18

缺省页

在建立需求时，大家达成一致，缺省页需要有

，会使用户体验更佳一些。

场景化元

素加入

16/18

R57/GCA/B6C

RF5/GF5/BF5 RF1/GF1/BF1 RE4/GE4/BE4

品牌颜色

R00/G00/B00

17/18

设计规范

加粗

加粗

加粗

加粗

主页用户名

详情页商品名称

导航栏标题

栏目标题

摄影师详情页人名

商品展示页金额数字

30PX

24PX

17PX

16PX

苹方

苹方

苹方

苹方

样式名 字体 字号 粗细 作用 颜色

特级字号

大标题

一级标题

二级标题

17/18

常规

常规

常规

长文内容

正文内容

icon注释

内容区注释性文字

15PX

14PX

10PX

苹方

苹方

苹方

长文字号

正文字号

正文字号

图标设计

线性图标设计，化繁为简，便于识别

圆角：3px

描边：3px

大小：24*24px

18/18

App展示

租小帮

品质租房 就用租小帮

项目背景

产品介绍

我负责的

租小帮是为都市白领打造的高品质租房APP，为城市人群创造高品质租住空间，提供全能配套生活服务。

分析 原型 用户流程 设计 规范制定

用户分析

2.2%

70后

6.8%

00后

5.8%

80后

18.3%

85后

43.7%

90后

56.6%

男性

23.2%

95后

35.4%

女性

租户年龄分布 租户年龄分布

根据大数据统计来看，租户年亮多集中在85——95之间，00后的比重逐渐广大。租户性别男性比例占56.6%，女性占35.4%

租客痛点

从过去几年的实践看，机构化租赁是破解我国住房租赁供给不足的必经之

路。租赁运营机构促进旧房改造升级，推动租赁行业标准化，规范租赁市

场，调动存量资源。专业化的运营机构提供更加准确可靠的信息，满足租赁

消费升级需求，使租期更加稳定，实现品质租住和租后服务，租客体验更

好。

房东不好相处

室友不好相处

虚假信息

安全隐患

扣押金

0% 10% 20% 30% 40% 50%

恶意抬高租金

租客居住需求

80后 90后 95后 00后

女

男

硬件设施

80后 90后 95后 00后

女

男

软性服务

80后 90后 95后 00后

女

男

社区活动

从数据统计中看，租户居住因素中软性服务和社区服务占比重大。人群多 。 ，一般社区环境和生活氛围更能打动女性。一旦

有中意的房子，女性租房者往往当机立断，表现出更加优于男性的决断力。

集中在90——95后之间，00后的比重正在逐渐扩大 女性租房偏感性

竞品分析

选择了2款直接竞品租房APP，1款间接竞品卖房APP进行分析，通过竞品分析出产品间的“共有特性”和“差异点”，如产品功能结构、定位、核心功能、目标用户以及商业模式等几个方面。取

长补短，找到自己产品的核心差异点，探索不同点背后的底层逻辑，促使自己的产品可以做的更好，更明确设计策略和目标。

直接竞品

自如

产品定位 核心功能 目标用户

自如以将房主欲出租的房屋进行二次设

计，实施统一装修、家居家电的配置等

为宣传噱头，希望营造二手房屋一手入

住式的租房体验，主张拎包入住。

VR看房，管家讲房保洁服务、维修服务

等多项后期服务，注重租户的入住体

验。注重用户的口碑

主要面向90后至00后的年轻人群。

相寓

相寓是一款面向大量职场人群租房生活

形态及消费群体比较广泛推出的随心

租，多种形态覆盖的一个平台。

线上自助完成报事报修、搬家、保洁、

投诉、问题反馈。

主要面向90后至00后的年轻人群。

间接竞品

贝壳找房

为购房者、租房者提供房源信息搜索、

浏览功能，为业主提供在线委托及在售

房源管理功能，让您的房产交易更加便

捷。

VR实景看房，地图找房，二手房，新

房，租房、旅居置业，海外置业。

主要面向75后至95后的人群。

竞品总结

三款APP同为房屋查找租住和售卖软件，信息框架鲜明结构明显，主要功能体现在三级到四级页面，用户流程简洁，主色调都有白色为主，整体调性简洁明朗。

自如APP为“C2B2C”的商业模式，通过房屋租住获利，以拎包入住为主打项，一站式售后服务为增值服务内容，，极大的提高用户的租住满意度。

相寓APP为“B2C”的商业模式，通过主打代理整合房主闲置资源出租获利，整体管理保证服务质量为主要服务点，吸引用户。

贝壳APP为“C2B2C”的商业模式，通过房屋出售的抽成获利，以用户熟悉操作结构，齐全的功能和快速更新的消息获取用户。

因此我们将延续“C2B2C”的商业模式，将房源信息重新整合、分类。将不同房源推荐给不同人群。

设计目标

视觉一致性：采用组件化思维，画面中所有元素可在各类场景中重复使用，保持风格统一。

功能一致性：整体功能目标明确，操作流程、信息层级、框架布局等均需要给用户一致性的体验。

产品特性：抓住核心用户群体，突出产品风格，提升产品调性并树立品牌感。

核心

简洁

年轻化

多元化

美观

体验

情绪板衍生

舒适 年轻 个性

驱动力分析

生理需求

尊重需求

社交需求

安全需求

自我实现

房东通过优质的出租获得经济效益，让闲置房屋实现获利实现自我实现需求。

社交达人通过分享帖子得到他人的认同，从而获得尊重需求。

社交达人通过社区分享和邻里交流进行交友，从而获得社交需求。

租客通过安全舒适的社区/优渥的居住条件，实现安全需求与生理需求。

用户群画像

据数据统计显示我们选择的目标用户为长租租客，主要为年轻大学生、职场IT男、都市精英女、情侣、房东五大类。

年轻大学生 职场IT男 职场精英 情侣 房东

普通用户（初级） 普通用户（高级） 普通用户（资深） 普通用户（高级） 普通用户（专业）

用户画像

在职场上自己是高知女性，因此自身对生活品质有一些要求，所以想要

换一间房间大、品质好、离公司比较近的房子居住。比较关注房屋的装

修风格。为了提高生活品质，自己会经常去逛各类租房APP，去参考找

房经验，为了提高生活品质，自己会经常联系管家来帮助自己处理一些

事情，但经常联系不上管家，且效率慢。每个周末都会打开APP联系管

家服务或预约打扫清除。

年龄 婚姻 城市 职业

35岁 未婚 北京 网络公司白领

王怡 用户痛点

用户目标

1.想要换一间房间大、品质好、小区环境佳、安全、离公司比较近的房子

3.浏览到的界面总是信息量大， 找不到自己想要的服务位置。

2.通过鑫尊APP的服务功能来减少在家务方面的压力。

2.管家不专业，只负责收发钥匙，生活帮助少

3.有人24小时解决自己房屋的问题。

1.由于注重装修品质，经常被虚假信息所迷惑

产品原型

一级界面

banner区根据近期的推广活动，显示运营内容通屏设计，更易于用户

点击。

功能区分为全部房源、为您推荐、独栋房源，让用户沉浸式的浏览，增

加无目的性用户的停留时间。

BANNER

功能区

首页设计

看房单页面是根据页面的功能点分为两个版块进行整合，有利于用户对

于信息的区域层级交互。在头部的地方增加商圈浏览功能，多方位的增

加用户浏览时长，方便用户寻找心仪房源。

看房单页面

社区页面主要为用户展示近期一系列的比较火的线上线下活动，增强与

用户的粘性，同时满足现代人的线上社交需求。

社区页面

个人中心页面集中功能区域，采用icon轻量化更清晰的展示，在二级

信息界面更重内容，视觉元素较轻。

增加banner区域，使内容更丰富，提高页面的使用率。

个人中心页面

页面预览

页面预览

缺省态展示

颜色/字体

邻近色配色，低对比度的和谐美感，产生不错的视觉效果，既保持了邻近色的单纯、统

一、主色调明确的特点。

#FF0000 #000000

品牌色 辅色

正文 长文 辅文 分割线 背景

标题B 参数项

正文 Aa #000000 #666666 #999999 #E4E4E4 #F5F5F5

中/英/数字

iOS：苹方

Andirod：思源黑体

&

11/12/13/14/17/25px

图标设计

线性图标

内容区

面性图标

icon

WEB端设计

Facememo德国儿童摄影

02

设计方向

干净、清晰的设计风格，增强页面的层级，明确主次，统一整个规范，优化整体易用性，增强交互入口的可点击欲，进行页面视觉降噪。

优化流程 功能架构 视觉规范

优化数据集的流程，让整体操作流程更加清晰。 合理的组织功能架构，使信息传达更加流畅。 建立严谨的视觉规范，统一好整个平台的视觉风格。

界面展示

框架

系统栅格化布局，列与槽的宽度都以8的倍数为原则，槽16px,此时列间距在保证页面空间被高效利用的同时，也可以维持良好的呼吸感；页边距20px。