项目介绍

项目介绍

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

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

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

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

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

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

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

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

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

品牌设计

品牌设计

Eatojoy品牌符号打造

Eatojoy品牌符号打造

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

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

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

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

Before

Before

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

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

After

After

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

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

LOGO图形释义

LOGO图形释义

Eat

Eat

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

+

+

Joy

Joy

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

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

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

标准制图

标准制图

APP用户端

APP用户端

Web商户端

Web商户端

商户端优化

商户端优化

Structure of design systems

Structure of design systems

设计体系

设计体系

Design system

Design system

设计系统结构

设计系统结构

设计

规范

设计

规范

指导

指导

品牌规范

品牌规范

品牌规范

设计风格

设计风格

设计风格

协作说明

协作说明

协作说明

组件规范

组件规范

组件规范

模式库

模式库

基础元素

基础元素

基础元素

模块

模块

模块

组件

组件

组件

页面

页面

页面

原子设计

原子设计

色板

色板

色板

字级

字级

字级

图标

图标

图标

网格

网格

网格

流程化

流程化

+

+

工具化

工具化

字体规范

字体规范

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

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

字体规范定义

字体规范定义

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

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

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

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

微软雅黑

微软雅黑

细体(Light)-繁體字樣

细体(Light)-繁體字樣

常规(Regular)-繁體字樣

常规(Regular)-繁體字樣

粗体(Bold)-繁體字樣

粗体(Bold)-繁體字樣

苹方

苹方

细体(Light)-繁體字樣

细体(Light)-繁體字樣

常规(Regular)-繁體字樣

常规(Regular)-繁體字樣

粗体(Bold)-繁體字樣

粗体(Bold)-繁體字樣

思源

思源

细体(Light)-繁體字樣

细体(Light)-繁體字樣

常规(Regular)-繁體字樣

常规(Regular)-繁體字樣

粗体(Bold)-繁體字樣

粗体(Bold)-繁體字樣

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

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

繁體字樣

繁體字樣

繁體字樣

繁體字樣

0,123,456

大標題

正文、小標題

注釋、小段文本

注釋英文、數字

數字

20px

16px

12px

10px

40px

系统配色

系统配色

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

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

图标规范

图标规范

情感插图

情感插图

优化体验

优化体验

Optimize the experience

Optimize the experience