项目介绍

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

王天资天资设计 logo