项目介绍
项目介绍
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