
项目介绍
Eatojoy是一款服务于香港地区的餐饮订购平台,实现用户与餐饮店铺之间的互通互联,帮助用户实现订购餐饮的业务。致力于打造便捷、高效、优质的餐饮订购服务,解决香港餐饮订购平台空缺的问题。
整体项目分为三个端:商户端(用户群:餐饮店铺的管理人员)、用户端(用户群:使用app订购餐饮用户)以及商户管理端(管理合作商户的信息资料等业务)。
我在项目中担任UX设计师,主要负责Eatojoy项目的品牌、UI和交互设计,直系对接香港运营团队以及产品团队和开发团队。
品牌设计
Eatojoy品牌符号打造
挖掘名字与生俱来的的戏剧性
品牌符号成功的关键,在于找到一个大家都熟知而又特别的文化原型。只有这样才能瞬间激发受众的潜意识,营造熟悉而又独特的感觉,让人印象深刻。
Before
原有LOGO造型普通缺乏美感、缺乏特色趣味性,不能很好地承载品牌符号资产。
After
升级优化后,以全新的符号策略,挖掘品牌与生俱来的的戏剧性,提升品牌符号的形象感。

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


标准制图

APP用户端
Web商户端


商户端优化
Structure of design systems

设计体系
Design system
设计系统结构
设计
规范
指导
品牌规范
设计风格
协作说明
组件规范
模式库
基础元素
模块
组件
页面
原子设计
色板
字级
图标
网格
流程化
+
工具化
字体规范
香港本土居民文字传播以繁体为主,因此我们设计应用界面时采用主流无衬线黑体
字体规范定义
以快速高效浏览,阅读信息为设计思路,定义不同内容属性的字体字号和字重。
我们想要设计一套B端界面,使用的字体需要满足用户通用性,大家电脑上都会有的字体,还需要辨识度高,在不同显示器上尽可能显示效果最好。所以B端的设计中,我们可选择的字体的范围是很小的,三大主流系统平台字体显示差异。
微软雅黑
细体(Light)-繁體字樣
常规(Regular)-繁體字樣
粗体(Bold)-繁體字樣
苹方
细体(Light)-繁體字樣
常规(Regular)-繁體字樣
粗体(Bold)-繁體字樣
思源
细体(Light)-繁體字樣
常规(Regular)-繁體字樣
粗体(Bold)-繁體字樣
在不同平台设备上调取各自平台默认字体,显示效果稍有差异,特别是对繁体显示影响较大,例如微软雅黑的Bold粗体显示笔画粗细明显不一致,过于密集的笔画导致笔画间间隙很小而让显示效果有所欠佳。苹方显示相对最为清晰,但粗体与细体笔画对比不明显。出于用户使用设备主要集中于windows系统和平板,所以设计主要集中于微软字体做显示优化。
繁體字樣
繁體字樣
繁體字樣
繁體字樣
0,123,456
大標題
正文、小標題
注釋、小段文本
注釋英文、數字
數字
20px
16px
12px
10px
40px
系统配色
色彩是视觉情感最为有力的传达方式,以蓝色为主色彩,黑白灰相辅相成,另搭配桃红,草绿,橙黄,柠檬黄。
图标规范
情感插图
优化体验
Optimize the experience















