项目介绍

项目介绍

项目介绍

Eatojoy是一款服务于香港地区的餐饮订购平台,实现用户与餐饮店铺之间的互通互联,帮助用户实现订购餐饮的业务。致力于打造便捷、高效、优质的餐饮订购服务,解决香港餐饮订购平台空缺的问题。

整体项目分为三个端:商户端(用户群:餐饮店铺的管理人员)、用户端(用户群:使用app订购餐饮用户)以及商户管理端(管理合作商户的信息资料等业务)。

我在项目中担任UX设计师,主要负责Eatojoy项目的品牌、UI和交互设计,直系对接香港运营团队以及产品团队和开发团队。

Eatojoy 是一款专注服务于香港地区的餐饮订购平台,旨在实现用户与餐饮店铺的无缝互联互通,助力用户轻松完成餐饮订购业务。

其致力于塑造便捷、高效且优质的餐饮订购服务,以填补香港地区餐饮订购平台的空白。 整个项目涵盖三个端口:商户端(主要用户群为餐饮店铺的管理人员)、用户端(用户群为使用 app 订购餐饮的用户)以及商户管理端(负责管理合作商户的信息资料等相关业务)。

在该项目中,我担任 UX 设计师一职,主要负责 Eatojoy 项目的品牌、UI 以及交互设计工作,直接对接香港运营团队、产品团队和开发团队。

例如,在品牌设计方面,我深入研究香港的地域文化和餐饮特色,为 Eatojoy 打造了独特且具有吸引力的品牌形象;在 UI 设计上,注重用户操作的简洁性和视觉的舒适性,以提升用户的订购体验;交互设计中,精心设计流程,让用户与商户之间的沟通更加顺畅高效。

Eatojoy是一款服务于香港地区的餐饮订购平台,实现用户与餐饮店铺之间的互通互联,帮助用户实现订购餐饮的业务。致力于打造便捷、高效、优质的餐饮订购服务,解决香港餐饮订购平台空缺的问题。

整体项目分为三个端:商户端(用户群:餐饮店铺的管理人员)、用户端(用户群:使用app订购餐饮用户)以及商户管理端(管理合作商户的信息资料等业务)。

我在项目中担任UX设计师,主要负责Eatojoy项目的品牌、UI和交互设计,直系对接香港运营团队以及产品团队和开发团队。

Eatojoy 是一款专注服务于香港地区的餐饮订购平台,旨在实现用户与餐饮店铺的无缝互联互通,助力用户轻松完成餐饮订购业务。

其致力于塑造便捷、高效且优质的餐饮订购服务,以填补香港地区餐饮订购平台的空白。 整个项目涵盖三个端口:商户端(主要用户群为餐饮店铺的管理人员)、用户端(用户群为使用 app 订购餐饮的用户)以及商户管理端(负责管理合作商户的信息资料等相关业务)。

在该项目中,我担任 UX 设计师一职,主要负责 Eatojoy 项目的品牌、UI 以及交互设计工作,直接对接香港运营团队、产品团队和开发团队。

例如,在品牌设计方面,我深入研究香港的地域文化和餐饮特色,为 Eatojoy 打造了独特且具有吸引力的品牌形象;在 UI 设计上,注重用户操作的简洁性和视觉的舒适性,以提升用户的订购体验;交互设计中,精心设计流程,让用户与商户之间的沟通更加顺畅高效。

品牌设计

品牌设计

品牌设计

Eatojoy品牌符号打造

Eatojoy品牌符号打造

Eatojoy品牌符号打造

挖掘名字与生俱来的的戏剧性

挖掘名字与生俱来的的戏剧性

挖掘名字与生俱来的的戏剧性

品牌符号成功的关键,在于找到一个大家都熟知而又特别的文化原型。只有这样才能瞬间激发受众的潜意识,营造熟悉而又独特的感觉,让人印象深刻。

品牌符号成功的关键,在于找到一个大家都熟知而又特别的文化原型。只有这样才能瞬间激发受众的潜意识,营造熟悉而又独特的感觉,让人印象深刻。

品牌符号成功的关键,在于找到一个大家都熟知而又特别的文化原型。只有这样才能瞬间激发受众的潜意识,营造熟悉而又独特的感觉,让人印象深刻。

Before

Before

Before

原有LOGO造型普通缺乏美感、缺乏特色趣味性,不能很好地承载品牌符号资产。

原有LOGO造型普通缺乏美感、缺乏特色趣味性,不能很好地承载品牌符号资产。

原有LOGO造型普通缺乏美感、缺乏特色趣味性,不能很好地承载品牌符号资产。

After

After

After

升级优化后,以全新的符号策略,挖掘品牌与生俱来的的戏剧性,提升品牌符号的形象感。

升级优化后,以全新的符号策略,挖掘品牌与生俱来的的戏剧性,提升品牌符号的形象感。

升级优化后,以全新的符号策略,挖掘品牌与生俱来的的戏剧性,提升品牌符号的形象感。

LOGO图形释义

LOGO图形释义

LOGO图形释义

Eat

Eat

Eat

吃(Eat)是人类生活中极为重要的一部分。

+

+

+

Joy

Joy

Joy

一日三餐,不仅填饱了饥肠辘辘的肚子,还带给人们美食的(joy)喜悦和幸福。

Eatojoy,名字自带清晰的“eat(吃)”和“joy(快乐)形象,所以与吃,快乐相关的形象是最直接,最容易接受,传播成本最低的选择。因此LOGO通过将Eat(吃,嘴, 碗)+Joy(快乐,开心,憨笑)形象,巧妙地结合在一起,传达品牌的灵魂,让人会然一笑。憨笑的形象,不仅给人亲切感,还像是在寒冷的冬天,吃上一碗热腾腾的面,脸上情不自禁洋溢出来的愉悦、幸福和满足。吃和憨笑,都是全球通用的符号,是在全球范围内都可识别、可描述的超级符号。色彩上-采用代表正反、男女、冷暖、高纯度、年轻而和谐的红蓝色品牌色系。让它从众多品牌中脱颖而出,凸显年轻时尚,符合流行趋势。 标准字的设计上,Eatojoy采用流行的、识别度最高的、和适用性最强的无衬线字体设计,Y少许的上扬传达了积极向上的情感。

Eatojoy 这一名字本身就蕴含着清晰的“eat(吃)”和“joy(快乐)”元素,因此,与吃和快乐相关的形象是最为直接、最易被接受且传播成本最低的选择

所以,LOGO 将 Eat(吃、嘴、碗)与 Joy(快乐、开心、憨笑)的形象巧妙融合在一起,以此传达品牌的灵魂,令人不禁会心一笑。憨笑的形象,不仅给人以亲切感,还宛如在寒冷的冬日里,吃上一碗热气腾腾的面后,脸上不由自主洋溢出的愉悦、幸福与满足。 要知道,吃和憨笑,均是全球通用的符号,属于在全球范围内都能够识别和描述的超级符号。

在色彩方面,采用了代表正反、男女、冷暖、高纯度、年轻且和谐的红蓝色品牌色系。这使得它能够在众多品牌中崭露头角,凸显出年轻时尚的特质,符合当下的流行趋势。

而在标准字的设计上,Eatojoy 选用了流行的、识别度最高且适用性最强的无衬线字体。其中,“Y”稍有上扬,传达出积极向上的情感。 比如,就像国际知名快餐品牌麦当劳的金色拱门标志,简单却极具辨识度,成为了全球通用的餐饮符号。Eatojoy 的吃和憨笑形象也有着类似的潜力。又比如在色彩运用上,像可口可乐经典的红白色系,鲜明且令人印象深刻,Eatojoy 的红蓝色系也有望达到这样的效果。

Eatojoy 这一名字本身就蕴含着清晰的“eat(吃)”和“joy(快乐)”元素,因此,与吃和快乐相关的形象是最为直接、最易被接受且传播成本最低的选择

所以,LOGO 将 Eat(吃、嘴、碗)与 Joy(快乐、开心、憨笑)的形象巧妙融合在一起,以此传达品牌的灵魂,令人不禁会心一笑。憨笑的形象,不仅给人以亲切感,还宛如在寒冷的冬日里,吃上一碗热气腾腾的面后,脸上不由自主洋溢出的愉悦、幸福与满足。 要知道,吃和憨笑,均是全球通用的符号,属于在全球范围内都能够识别和描述的超级符号。

在色彩方面,采用了代表正反、男女、冷暖、高纯度、年轻且和谐的红蓝色品牌色系。这使得它能够在众多品牌中崭露头角,凸显出年轻时尚的特质,符合当下的流行趋势。

而在标准字的设计上,Eatojoy 选用了流行的、识别度最高且适用性最强的无衬线字体。其中,“Y”稍有上扬,传达出积极向上的情感。 比如,就像国际知名快餐品牌麦当劳的金色拱门标志,简单却极具辨识度,成为了全球通用的餐饮符号。Eatojoy 的吃和憨笑形象也有着类似的潜力。又比如在色彩运用上,像可口可乐经典的红白色系,鲜明且令人印象深刻,Eatojoy 的红蓝色系也有望达到这样的效果。

标准制图

标准制图

标准制图

APP用户端

APP用户端

APP用户端

Web商户端

Web商户端

Web商户端

商户端优化

商户端优化

商户端优化

Structure of design systems

Structure of design systems

Structure of design systems

设计体系

设计体系

设计体系

Design system

Design system

Design system

设计系统结构

设计系统结构

设计系统结构

设计

规范

指导

指导

指导

品牌规范

品牌规范

品牌规范

品牌规范

设计风格

设计风格

设计风格

设计风格

协作说明

协作说明

协作说明

协作说明

组件规范

组件规范

组件规范

组件规范

···

模式库

模式库

模式库

···

基础元素

基础元素

基础元素

基础元素

模块

模块

模块

模块

组件

组件

组件

组件

页面

页面

页面

页面

原子设计

原子设计

原子设计

色板

色板

色板

色板

字级

字级

字级

字级

图标

图标

图标

图标

网格

网格

网格

网格

流程化

+

+

+

工具化

字体规范

字体规范

字体规范

香港本土居民文字传播以繁体为主,因此我们设计应用界面时采用主流无衬线黑体

香港本土居民文字传播以繁体为主,因此我们设计应用界面时采用主流无衬线黑体

香港本土居民文字传播以繁体为主,因此我们设计应用界面时采用主流无衬线黑体

字体规范定义

字体规范定义

字体规范定义

以快速高效浏览,阅读信息为设计思路,定义不同内容属性的字体字号和字重。

以快速高效浏览,阅读信息为设计思路,定义不同内容属性的字体字号和字重。

以快速高效浏览,阅读信息为设计思路,定义不同内容属性的字体字号和字重。

我们想要设计一套B端界面,使用的字体需要满足用户通用性,大家电脑上都会有的字体,还需要辨识度高,在不同显示器上尽可能显示效果最好。所以B端的设计中,我们可选择的字体的范围是很小的,三大主流系统平台字体显示差异。

我们想要设计一套B端界面,使用的字体需要满足用户通用性,大家电脑上都会有的字体,还需要辨识度高,在不同显示器上尽可能显示效果最好。所以B端的设计中,我们可选择的字体的范围是很小的,三大主流系统平台字体显示差异。

我们想要设计一套B端界面,使用的字体需要满足用户通用性,大家电脑上都会有的字体,还需要辨识度高,在不同显示器上尽可能显示效果最好。所以B端的设计中,我们可选择的字体的范围是很小的,三大主流系统平台字体显示差异。

微软雅黑

微软雅黑

微软雅黑

细体(Light)-繁體字樣

细体(Light)-繁體字樣

细体(Light)-繁體字樣

常规(Regular)-繁體字樣

常规(Regular)-繁體字樣

常规(Regular)-繁體字樣

粗体(Bold)-繁體字樣

粗体(Bold)-繁體字樣

粗体(Bold)-繁體字樣

苹方

苹方

苹方

细体(Light)-繁體字樣

细体(Light)-繁體字樣

细体(Light)-繁體字樣

常规(Regular)-繁體字樣

常规(Regular)-繁體字樣

常规(Regular)-繁體字樣

粗体(Bold)-繁體字樣

粗体(Bold)-繁體字樣

粗体(Bold)-繁體字樣

思源

思源

思源

细体(Light)-繁體字樣

细体(Light)-繁體字樣

细体(Light)-繁體字樣

常规(Regular)-繁體字樣

常规(Regular)-繁體字樣

常规(Regular)-繁體字樣

粗体(Bold)-繁體字樣

粗体(Bold)-繁體字樣

粗体(Bold)-繁體字樣

在不同平台设备上调取各自平台默认字体,显示效果稍有差异,特别是对繁体显示影响较大,例如微软雅黑的Bold粗体显示笔画粗细明显不一致,过于密集的笔画导致笔画间间隙很小而让显示效果有所欠佳。苹方显示相对最为清晰,但粗体与细体笔画对比不明显。出于用户使用设备主要集中于windows系统和平板,所以设计主要集中于微软字体做显示优化。

在不同平台设备上调取各自平台默认字体,显示效果稍有差异,特别是对繁体显示影响较大,例如微软雅黑的Bold粗体显示笔画粗细明显不一致,过于密集的笔画导致笔画间间隙很小而让显示效果有所欠佳。苹方显示相对最为清晰,但粗体与细体笔画对比不明显。出于用户使用设备主要集中于windows系统和平板,所以设计主要集中于微软字体做显示优化。

在不同平台设备上调取各自平台默认字体,显示效果稍有差异,特别是对繁体显示影响较大,例如微软雅黑的Bold粗体显示笔画粗细明显不一致,过于密集的笔画导致笔画间间隙很小而让显示效果有所欠佳。苹方显示相对最为清晰,但粗体与细体笔画对比不明显。出于用户使用设备主要集中于windows系统和平板,所以设计主要集中于微软字体做显示优化。

繁體字樣

繁體字樣

繁體字樣

繁體字樣

0,123,456

大標題

正文、小標題

注釋、小段文本

注釋英文、數字

數字

20px

16px

12px

10px

40px

系统配色

系统配色

系统配色

色彩是视觉情感最为有力的传达方式,以蓝色为主色彩,黑白灰相辅相成,另搭配桃红,草绿,橙黄,柠檬黄。

色彩是视觉情感最为有力的传达方式,以蓝色为主色彩,黑白灰相辅相成,另搭配桃红,草绿,橙黄,柠檬黄。

色彩是视觉情感最为有力的传达方式,以蓝色为主色彩,黑白灰相辅相成,另搭配桃红,草绿,橙黄,柠檬黄。

图标规范

图标规范

图标规范

情感插图

情感插图

情感插图

优化体验

优化体验

优化体验

Optimize the experience

Optimize the experience

Optimize the experience

王天资天资设计 logo
王天资天资设计 logo

天资设计

王天资天资设计 logo

天资设计