1606637442@qq.com

18210322457

UI/UX Designer 趙誠

2022

UI/UX Portfolio DESIGN

Good design

is innovative.

HELLO！

個人信息

工作經(jīng)驗

掌握技能

個人優(yōu)勢

趙誠

18210322457

2020-2022

2016-2019

“Facememo德國專業(yè)兒童攝影“任職UI設(shè)計師

“鑫尊地產(chǎn)“任職房產(chǎn)銷售轉(zhuǎn)UI設(shè)計師

有3年工作經(jīng)驗，有后臺管理系統(tǒng)設(shè)計經(jīng)驗。能獨立完成產(chǎn)品的視覺設(shè)計及交互工

作，且學(xué)習(xí)能力強，有很強的學(xué)習(xí)積極性。

1606637442@qq.com 18210322457

目錄

移動端設(shè)計

WEB端設(shè)計

其他設(shè)計

01

FM攝影記

Facememo德國兒童攝影

Banner、H5、閃屏、海報

租小幫

02

03

App展示

FM攝影記

好作品 可傳世

項目背景

產(chǎn)品介紹

我負(fù)責(zé)的

FACEMEMO德國專業(yè)兒童攝影秉承著“每一個孩子都應(yīng)該有專屬于他的攝影經(jīng)典！”的經(jīng)營理念，認(rèn)為商業(yè)攝影存在的價值永遠(yuǎn)是為客戶進行個性化的藝術(shù)創(chuàng)作，簡單復(fù)制、呆板雷同

的攝影模式化運作無法產(chǎn)生真正的藝術(shù)品。尊重個體的差異，并且善于捕捉每一個生命個體在鏡頭面前的獨特張力，這使FACEMO能夠經(jīng)久不衰的

1/18

調(diào)研 提案 原型 設(shè)計 還原度

用戶群體

在公司進行內(nèi)部調(diào)研得出，用戶群體主要集中在25-35歲群體。

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

用戶群體 年齡分布

用戶需求

用戶需求希望app的界面能夠清新耐看，

交互及架構(gòu)清晰、使用高效

根據(jù)用戶調(diào)研得出

核心痛點

根據(jù)用戶調(diào)研得出

用戶使用痛點主要在第三方app獲取信息

獲取過程復(fù)雜和界面信息排列過于繁

多；在不到店之后能更透明的看到產(chǎn)品

制作進度

25～29

30～35

35～40

59.33%

27.82%

12.85%

2/18

用戶畫像

25歲/全職寶媽/北京 30歲/知名舞蹈家/北京 35歲/企業(yè)高管/北京

工作壓力大，事務(wù)忙，容易忘記拍完照的后續(xù)

流程，工作人員電話提醒，容易漏接，不方便

聯(lián)系，導(dǎo)致拍完照片后，遲遲拿不到成品

1、需要更快更直接的獲取拍攝報價信息，第三

方平臺瀏覽時，信息排布密集看起來不夠整

潔， 清晰。

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

情況發(fā)生。

消費金額會比較高，容易記不清楚自己的消費

權(quán)益，需要商戶平臺能清晰的展示出來自己的

消費情況。

喜歡拍照記錄，注重儀式感，孩子每個成長階段

都會選擇專業(yè)的兒童攝影機構(gòu)進行記錄。在不同

的嘗試過程中，會遇到客樣照不同的商家，試錯

成本高也會對最后照片不滿意，重拍比較浪費精

力，折騰孩子。近期孩子馬上過1周歲生日，需要

舉辦一場生日宴，生日宴上需要孩子的生日照。

平時時間比較充裕對生活品質(zhì)要求高，跟身邊朋

友進行交流的時候，會留心發(fā)現(xiàn)跟自己品味相符

的攝影品牌，為孩子和家庭合影留下經(jīng)典的照

片，同時自己工作原因經(jīng)常需要優(yōu)質(zhì)的個人形象

照用于宣傳使用，想到了身邊朋友聊到的攝影機

構(gòu)。

平時工作比較忙，周末休息一定會陪著孩子度過

親子時光，會購入專業(yè)的攝影器材，記錄孩子的

成長，同時也需要更專業(yè)的機構(gòu)拍出來更專業(yè)的

照片。對孩子拍照的版塊親力親為，去陪家人逛

街的時候會留意到攝影門店，了解完風(fēng)格商量合

適完之后，就會預(yù)定拍攝。

節(jié)約成本

照片品質(zhì)

服務(wù)品質(zhì)

需求

節(jié)約成本

照片品質(zhì)

服務(wù)品質(zhì)

需求

節(jié)約成本

照片品質(zhì)

服務(wù)品質(zhì)

需求

李迪 王晟 王晟

痛點： 痛點 痛點

描述 描述 描述

3/18

喜歡拍照 喜歡拍照 喜歡拍照

用戶體驗地圖

階段

接觸點

用戶需求

用戶行為

用戶感受

機會點

情緒曲線

拍攝前 拍攝中 拍攝后

·更加清晰快速的瀏覽拍攝信息

·拍攝之前需要準(zhǔn)備什么？ ·哪條路線能夠更快的能夠到達(dá)目的地。 ·評價或問答之后會有什么好處。

1.增加智能客服功能。 1.路線導(dǎo)航。 1.增加評價功能

·查看往期拍攝風(fēng)格，進行溝通，避免跟之前風(fēng)格重復(fù)。 · 對自己拍攝過程中的體驗和感受進行評價。

·找到高品味的高品質(zhì)攝影機構(gòu)，拍出高品質(zhì)的照片。

·在這里預(yù)定方便么？產(chǎn)品價格怎樣？產(chǎn)品質(zhì)量和服務(wù)怎樣？ ·途中我有什么疑問我應(yīng)該找誰幫助我最方便？ ·可以幫助他人。

2.增加投訴幫助。 2.鼓勵用戶發(fā)表評價和回答問題。

3.增加門店座機號碼呼叫服務(wù)入口。 3.投訴及建議

2.體現(xiàn)售后保障，增加信任感。

·利他主義

·能夠快速、高效的拍攝

·攻略的質(zhì)量和內(nèi)容是否有參考價值。

3.提供更優(yōu)質(zhì)、真實、有針對性的內(nèi)容。

·便捷的到達(dá)路線

·查看拍攝攻略 ·導(dǎo)航 ·評價

·瀏覽搜索拍攝風(fēng)格的詳細(xì)信息 ·求助 ·回答問題

·點贊、評論、種草 ·整理拍攝過的風(fēng)格 ·投訴及建議

·提問咨詢

·預(yù)約拍攝時間

·規(guī)劃路線

首頁、搜索、問答、詳情頁、消息、客服、收藏、支付、

預(yù)約

地圖導(dǎo)航、客服、投訴、相冊 評價、問答投訴及建議

4/18

看完覺得挺亂，仍然

不知道怎么選擇，感

覺都是廣告

在線客服里面有拍攝

前的注意事項，拍攝

流程一覽無遺。

商品詳情里面由人工

客服入口，回復(fù)及

時，解決了套餐內(nèi)容

不能變化的問題。

拍攝過程十分順利，

服務(wù)人員態(tài)度十分熱

情，耐心。體驗非常

不錯。

選片看到照片，質(zhì)量

非常滿意，也會有各

種消息提醒選片時

間，改約檔期也十分

方便。

商品套餐里面有些內(nèi)

容不是自己需要的，

沒有提示可不可以定

制內(nèi)容。

預(yù)定到店拍攝，不知

道服務(wù)質(zhì)量好不好，

過程順不順利。

不可以線上選片，只

能再次到店選片，時

間成本有些高。商家

周末檔期緊張。

精修有些失真，沒有

拍攝出來的那種質(zhì)

感，溝通成本較高，

導(dǎo)致拿到精修時間長

投訴之后，快速解

決，態(tài)度誠懇，最終

修出滿意的照片。

情緒板衍生

風(fēng)格設(shè)定

基于用戶群體調(diào)研顯示，現(xiàn)在拍攝需求用戶主力年齡階段在25～29歲之

間，該階段用戶更多喜歡 ，和除兒童攝影外

的主題選擇，以及更 拍攝需求。

簡約的攝影手法 更多成人品

類 緊跟當(dāng)下熱門、潮流的主題化

簡約

年輕化

主題化

5/18

功能架構(gòu) 5/18

首頁 所有產(chǎn)品 預(yù)約 我的

banner 兒童攝影 消費進度顯示

親子攝影

孕婦攝影

證件照

拍攝預(yù)約

金剛區(qū) 選片預(yù)約 我的訂單

熱門產(chǎn)品推薦 我的購物車

全部產(chǎn)品推薦 我的相冊

我的福利

設(shè)置

設(shè)計思路

根據(jù)對產(chǎn)品的用戶分析以及產(chǎn)品的主要功能點梳理產(chǎn)品的

的展現(xiàn)在app界面內(nèi)。

數(shù)

據(jù)信息清晰

6/18

業(yè)務(wù)訴求 B端 用戶需求

用戶滿意度 界面清新 層級清晰

交互便捷

高效流程

風(fēng)格年輕

信息清晰

持續(xù)項目合作

提高用戶粘性

客滿度 使用愉悅

業(yè)務(wù)增長 操作便捷

產(chǎn)品原型

根據(jù)產(chǎn)品功能和產(chǎn)品架構(gòu)做出部分原型，來確保產(chǎn)品

的交互可行性。

7/18

引導(dǎo)頁 8/18

首頁設(shè)計

首先整體是以卡片式來展示，最主要是

，分別鏈接相對應(yīng)的

入口，緊接著下面更明確的顯示“熱門產(chǎn)品推薦”，

還有產(chǎn)品推薦版塊內(nèi)容。

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

業(yè)服務(wù)”、“看看周邊”、“附近店鋪” ，這5個版塊

以便用戶更直接瀏

覽到近期優(yōu)惠。

明確用戶使用場景

用戶進入平臺之后，會根據(jù)自己的需求選擇相應(yīng)的版塊，若要了解活

動和選擇拍攝類型，可在 和 里面進行瀏覽

選擇

“熱門活動推薦” “產(chǎn)品推薦”

9/18

企業(yè)服務(wù)

企業(yè)服務(wù)頁面的主要目的是：為有團隊整體拍攝需求的用戶提

供咨詢詳情，分為“服務(wù)內(nèi)容”和“服務(wù)流程”兩個版塊進行介

紹，了解結(jié)束后，用戶可以點擊下方“聯(lián)系我們”進行預(yù)約。

企業(yè)服務(wù)的功能分析

企服務(wù)頁面中 按鈕使用大按鈕，使此重要功能更醒

目化；預(yù)約頁面使用 ，使界面

“聯(lián)系我們”

選中按鈕框線顏色的變化 在多選

項下更加整潔。

10/18

全部產(chǎn)品

全部產(chǎn)品是使用瀑布流的方式進行展示，給用戶帶來沉浸感。使用手繪

風(fēng)格的icon點亮，清新的同時又不失兒童品類的可愛特征。

點擊“兒童攝影” 選擇一款套餐 查看套餐詳情

提交信息 確認(rèn)支付

支付成功

點擊立即預(yù)約

選擇預(yù)約時間 填寫個人信息

套餐購買過程

11/18

套餐詳情頁

套餐詳情頁內(nèi)容頁分為“產(chǎn)品類型”、“服務(wù)&交付標(biāo)準(zhǔn)”和“產(chǎn)品詳

情”三大模塊，其中“產(chǎn)品詳情”后面有“服務(wù)說明”“買家秀”兩個同級

選項，為用戶全方位清晰的展示套餐。

套餐詳情設(shè)計語言

減少用線的分割， ，通體看起來更整潔、統(tǒng)一。

本頁面信息承載量多，長篇字號為 減輕用戶閱讀大段文字的壓

力。

使用大間距進行分割

15px

12/18

預(yù)約及我的

預(yù)約頁分為“拍攝預(yù)約”和“選片預(yù)約”兩個版塊，展示出來團

隊的服務(wù)信息，讓用戶能更直接的判斷想要選擇的團隊。

個人中心 清晰的標(biāo)出當(dāng)前消費的等級 界面中 ，加上代表等級

的插畫用戶使用更具有趣味性。

13/18

部分頁面 14/18

部分頁面 15/18

缺省頁

在建立需求時，大家達(dá)成一致，缺省頁需要有

，會使用戶體驗更佳一些。

場景化元

素加入

16/18

R57/GCA/B6C

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

品牌顏色

R00/G00/B00

17/18

設(shè)計規(guī)范

加粗

加粗

加粗

加粗

主頁用戶名

詳情頁商品名稱

導(dǎo)航欄標(biāo)題

欄目標(biāo)題

攝影師詳情頁人名

商品展示頁金額數(shù)字

30PX

24PX

17PX

16PX

蘋方

蘋方

蘋方

蘋方

樣式名 字體 字號 粗細(xì) 作用 顏色

特級字號

大標(biāo)題

一級標(biāo)題

二級標(biāo)題

17/18

常規(guī)

常規(guī)

常規(guī)

長文內(nèi)容

正文內(nèi)容

icon注釋

內(nèi)容區(qū)注釋性文字

15PX

14PX

10PX

蘋方

蘋方

蘋方

長文字號

正文字號

正文字號

圖標(biāo)設(shè)計

線性圖標(biāo)設(shè)計，化繁為簡，便于識別

圓角：3px

描邊：3px

大?。?4*24px

18/18

App展示

租小幫

品質(zhì)租房 就用租小幫

項目背景

產(chǎn)品介紹

我負(fù)責(zé)的

租小幫是為都市白領(lǐng)打造的高品質(zhì)租房APP，為城市人群創(chuàng)造高品質(zhì)租住空間，提供全能配套生活服務(wù)。

分析 原型 用戶流程 設(shè)計 規(guī)范制定

用戶分析

2.2%

70后

6.8%

00后

5.8%

80后

18.3%

85后

43.7%

90后

56.6%

男性

23.2%

95后

35.4%

女性

租戶年齡分布 租戶年齡分布

根據(jù)大數(shù)據(jù)統(tǒng)計來看，租戶年亮多集中在85——95之間，00后的比重逐漸廣大。租戶性別男性比例占56.6%，女性占35.4%

租客痛點

從過去幾年的實踐看，機構(gòu)化租賃是破解我國住房租賃供給不足的必經(jīng)之

路。租賃運營機構(gòu)促進舊房改造升級，推動租賃行業(yè)標(biāo)準(zhǔn)化，規(guī)范租賃市

場，調(diào)動存量資源。專業(yè)化的運營機構(gòu)提供更加準(zhǔn)確可靠的信息，滿足租賃

消費升級需求，使租期更加穩(wěn)定，實現(xiàn)品質(zhì)租住和租后服務(wù)，租客體驗更

好。

房東不好相處

室友不好相處

虛假信息

安全隱患

扣押金

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

惡意抬高租金

租客居住需求

80后 90后 95后 00后

女

男

硬件設(shè)施

80后 90后 95后 00后

女

男

軟性服務(wù)

80后 90后 95后 00后

女

男

社區(qū)活動

從數(shù)據(jù)統(tǒng)計中看，租戶居住因素中軟性服務(wù)和社區(qū)服務(wù)占比重大。人群多 。 ，一般社區(qū)環(huán)境和生活氛圍更能打動女性。一旦

有中意的房子，女性租房者往往當(dāng)機立斷，表現(xiàn)出更加優(yōu)于男性的決斷力。

集中在90——95后之間，00后的比重正在逐漸擴大 女性租房偏感性

競品分析

選擇了2款直接競品租房APP，1款間接競品賣房APP進行分析，通過競品分析出產(chǎn)品間的“共有特性”和“差異點”，如產(chǎn)品功能結(jié)構(gòu)、定位、核心功能、目標(biāo)用戶以及商業(yè)模式等幾個方面。取

長補短，找到自己產(chǎn)品的核心差異點，探索不同點背后的底層邏輯，促使自己的產(chǎn)品可以做的更好，更明確設(shè)計策略和目標(biāo)。

直接競品

自如

產(chǎn)品定位 核心功能 目標(biāo)用戶

自如以將房主欲出租的房屋進行二次設(shè)

計，實施統(tǒng)一裝修、家居家電的配置等

為宣傳噱頭，希望營造二手房屋一手入

住式的租房體驗，主張拎包入住。

VR看房，管家講房保潔服務(wù)、維修服務(wù)

等多項后期服務(wù)，注重租戶的入住體

驗。注重用戶的口碑

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

相寓

相寓是一款面向大量職場人群租房生活

形態(tài)及消費群體比較廣泛推出的隨心

租，多種形態(tài)覆蓋的一個平臺。

線上自助完成報事報修、搬家、保潔、

投訴、問題反饋。

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

間接競品

貝殼找房

為購房者、租房者提供房源信息搜索、

瀏覽功能，為業(yè)主提供在線委托及在售

房源管理功能，讓您的房產(chǎn)交易更加便

捷。

VR實景看房，地圖找房，二手房，新

房，租房、旅居置業(yè)，海外置業(yè)。

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

競品總結(jié)

三款A(yù)PP同為房屋查找租住和售賣軟件，信息框架鮮明結(jié)構(gòu)明顯，主要功能體現(xiàn)在三級到四級頁面，用戶流程簡潔，主色調(diào)都有白色為主，整體調(diào)性簡潔明朗。

自如APP為“C2B2C”的商業(yè)模式，通過房屋租住獲利，以拎包入住為主打項，一站式售后服務(wù)為增值服務(wù)內(nèi)容，，極大的提高用戶的租住滿意度。

相寓APP為“B2C”的商業(yè)模式，通過主打代理整合房主閑置資源出租獲利，整體管理保證服務(wù)質(zhì)量為主要服務(wù)點，吸引用戶。

貝殼APP為“C2B2C”的商業(yè)模式，通過房屋出售的抽成獲利，以用戶熟悉操作結(jié)構(gòu)，齊全的功能和快速更新的消息獲取用戶。

因此我們將延續(xù)“C2B2C”的商業(yè)模式，將房源信息重新整合、分類。將不同房源推薦給不同人群。

設(shè)計目標(biāo)

視覺一致性：采用組件化思維，畫面中所有元素可在各類場景中重復(fù)使用，保持風(fēng)格統(tǒng)一。

功能一致性：整體功能目標(biāo)明確，操作流程、信息層級、框架布局等均需要給用戶一致性的體驗。

產(chǎn)品特性：抓住核心用戶群體，突出產(chǎn)品風(fēng)格，提升產(chǎn)品調(diào)性并樹立品牌感。

核心

簡潔

年輕化

多元化

美觀

體驗

情緒板衍生

舒適 年輕 個性

驅(qū)動力分析

生理需求

尊重需求

社交需求

安全需求

自我實現(xiàn)

房東通過優(yōu)質(zhì)的出租獲得經(jīng)濟效益，讓閑置房屋實現(xiàn)獲利實現(xiàn)自我實現(xiàn)需求。

社交達(dá)人通過分享帖子得到他人的認(rèn)同，從而獲得尊重需求。

社交達(dá)人通過社區(qū)分享和鄰里交流進行交友，從而獲得社交需求。

租客通過安全舒適的社區(qū)/優(yōu)渥的居住條件，實現(xiàn)安全需求與生理需求。

用戶群畫像

據(jù)數(shù)據(jù)統(tǒng)計顯示我們選擇的目標(biāo)用戶為長租租客，主要為年輕大學(xué)生、職場IT男、都市精英女、情侶、房東五大類。

年輕大學(xué)生 職場IT男 職場精英 情侶 房東

普通用戶（初級） 普通用戶（高級） 普通用戶（資深） 普通用戶（高級） 普通用戶（專業(yè)）

用戶畫像

在職場上自己是高知女性，因此自身對生活品質(zhì)有一些要求，所以想要

換一間房間大、品質(zhì)好、離公司比較近的房子居住。比較關(guān)注房屋的裝

修風(fēng)格。為了提高生活品質(zhì)，自己會經(jīng)常去逛各類租房APP，去參考找

房經(jīng)驗，為了提高生活品質(zhì)，自己會經(jīng)常聯(lián)系管家來幫助自己處理一些

事情，但經(jīng)常聯(lián)系不上管家，且效率慢。每個周末都會打開APP聯(lián)系管

家服務(wù)或預(yù)約打掃清除。

年齡 婚姻 城市 職業(yè)

35歲 未婚 北京 網(wǎng)絡(luò)公司白領(lǐng)

王怡 用戶痛點

用戶目標(biāo)

1.想要換一間房間大、品質(zhì)好、小區(qū)環(huán)境佳、安全、離公司比較近的房子

3.瀏覽到的界面總是信息量大， 找不到自己想要的服務(wù)位置。

2.通過鑫尊APP的服務(wù)功能來減少在家務(wù)方面的壓力。

2.管家不專業(yè)，只負(fù)責(zé)收發(fā)鑰匙，生活幫助少

3.有人24小時解決自己房屋的問題。

1.由于注重裝修品質(zhì)，經(jīng)常被虛假信息所迷惑

產(chǎn)品原型

一級界面

banner區(qū)根據(jù)近期的推廣活動，顯示運營內(nèi)容通屏設(shè)計，更易于用戶

點擊。

功能區(qū)分為全部房源、為您推薦、獨棟房源，讓用戶沉浸式的瀏覽，增

加無目的性用戶的停留時間。

BANNER

功能區(qū)

首頁設(shè)計

看房單頁面是根據(jù)頁面的功能點分為兩個版塊進行整合，有利于用戶對

于信息的區(qū)域?qū)蛹壗换?。在頭部的地方增加商圈瀏覽功能，多方位的增

加用戶瀏覽時長，方便用戶尋找心儀房源。

看房單頁面

社區(qū)頁面主要為用戶展示近期一系列的比較火的線上線下活動，增強與

用戶的粘性，同時滿足現(xiàn)代人的線上社交需求。

社區(qū)頁面

個人中心頁面集中功能區(qū)域，采用icon輕量化更清晰的展示，在二級

信息界面更重內(nèi)容，視覺元素較輕。

增加banner區(qū)域，使內(nèi)容更豐富，提高頁面的使用率。

個人中心頁面

頁面預(yù)覽

頁面預(yù)覽

缺省態(tài)展示

顏色/字體

鄰近色配色，低對比度的和諧美感，產(chǎn)生不錯的視覺效果，既保持了鄰近色的單純、統(tǒng)

一、主色調(diào)明確的特點。

#FF0000 #000000

品牌色 輔色

正文 長文 輔文 分割線 背景

標(biāo)題B 參數(shù)項

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

中/英/數(shù)字

iOS：蘋方

Andirod：思源黑體

&

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

圖標(biāo)設(shè)計

線性圖標(biāo)

內(nèi)容區(qū)

面性圖標(biāo)

icon

WEB端設(shè)計

Facememo德國兒童攝影

02

設(shè)計方向

干凈、清晰的設(shè)計風(fēng)格，增強頁面的層級，明確主次，統(tǒng)一整個規(guī)范，優(yōu)化整體易用性，增強交互入口的可點擊欲，進行頁面視覺降噪。

優(yōu)化流程 功能架構(gòu) 視覺規(guī)范

優(yōu)化數(shù)據(jù)集的流程，讓整體操作流程更加清晰。 合理的組織功能架構(gòu)，使信息傳達(dá)更加流暢。 建立嚴(yán)謹(jǐn)?shù)囊曈X規(guī)范，統(tǒng)一好整個平臺的視覺風(fēng)格。

界面展示

框架

系統(tǒng)柵格化布局，列與槽的寬度都以8的倍數(shù)為原則，槽16px,此時列間距在保證頁面空間被高效利用的同時，也可以維持良好的呼吸感；頁邊距20px。