信息图形设计在美食类APP界面中的应用Word文档格式.docx
《信息图形设计在美食类APP界面中的应用Word文档格式.docx》由会员分享,可在线阅读,更多相关《信息图形设计在美食类APP界面中的应用Word文档格式.docx(21页珍藏版)》请在冰豆网上搜索。
1.2国内外研究现状
信息图形一直是国内外艺术类学科所关注的一个主题。
早期的信息图形是用图来进行交流的,主要功能是辅助人们对文字的理解。
在人类文明经过一段时间发展到一定程度后,这种将文字转化为形象的表现方式出现在人们的视野中。
西方的一些国家对信息图形的重视远远早于国内,并且在不断尝试改良的过程中,逐渐形成了鉴于自己国家文化、针对自己国家社会的独立的信息图形理论体系和许多作品。
相对国外来说,国内对信息图形设计学科的接触是从20世纪90年代开始的,在公共场所和物品包装上都有体现,这也意味着国内信息图形进入萌芽阶段。
由于起步时间不够早,在我们国内信息图形方面不断发展的过程中,有大部分作品是参考、模仿国外的信息图形作品,但由于国内外的生活环境、社会因素等不尽相同,故而需要对信息图形有更进一步的了解与深入的研究,并根据我们国内的情况进行调整与适应。
随着互联网的不断发展,信息图形设计被更多的主流媒体所意识到,在信息图形更广泛的应用后,越来越多的出现在我们身边。
1.3主要研究内容
本文在对信息图形的充分学习和钻研后,将信息图形作为一种表达方式运用在美食类APP界面中,并对流程设计进行了规划,得出所要进行的过程,具体如下:
(1)对市面上美食类APP中的信息图形分析
针对市面上流行的美食类APP,通过对界面中信息图形部分的分析与深入研究,仔细思考每一种信息图形所代表的含义,是否能让使用者直观的理解其中的含义。
(2)关于“O&
O”APP构想
“O&
O”多是使用信息图形设计,通过图形在视觉上产生引导,来代替文字的繁杂,增加订单分析功能,通过图表的形式将需要传达的信息传递给用户。
界面中运用简洁易懂的信息图形来代替文字,减少用户的使用和学习成本,方便用户操作,从而提高使用效率。
(3)界面设计
在对APP的构想反复整理,对可行性进行分析之后,进行流程图、线框图的确定,进一步设计APP主要功能界面及其他必要功能界面,通过模拟流程,对界面进行审查,查缺补漏。
第2章信息图形
2.1信息图形的概念
德国信息图形学教授马库斯·
斯洛普曾说过:
“信息图形是一种集合信息、数据和知识的视觉表现手段,讨论它的发展过程就像讨论人类的发展过程。
”信息图形就是通过对图形的再设计将要表达的文字以信息图形的方式表现出来,从而简化人们的理解过程,便于沟通。
简单来说就是,信息图形减短了人们在接收到信息之后理解、消化的时间,从而提高信息的使用效率,如图1所示。
图1信息图形举例
2.2信息图形的发展趋势
随着社会的发展和进步,人类文明主要分为三大时期。
图2原始文明时期
原始文明时期(图2):
在人类文明出现后,在考古学家对研究结果的不断分析中发现,远古人类通过在树枝、石头上留下划痕来记录数量,在越来越多的生活场景中,开始用绳子系扣的方式来记录信息。
经过考古学家一段时间的研讨,发现了岩壁上的狩猎等场景,将这种在岩壁上相互摩擦而留下的痕迹称为岩画,这就是目前发现的信息图形最早期的表现形式,如图,在许多文化遗址中,不断的发现了岩画,这为考古学家对当时环境的研究提供了必要的基础和证据。
图3工业文明时期
工业文明时期(图3):
随着人们生活方式和社会生产力的不断提升,在人类进入英国工业时代以来,逐渐由机器代替生产,慢慢的发展到机器工业文明时代。
随着文字的出现,它的精简、准确、稳定等优点迅速被人类发现并开始使用。
而由于每个人的社会文化背景、对事物的理解力不同,文字的缺点也逐渐显露。
同一段文字可以表达不同的含义,这使得人们在理解上出现偏差。
而运用信息图形来代替文字表达数据的表现方式,解决了文字的缺点,图形、图表的表达更加清晰明了,促使信息图形得到了普遍的应用。
而这其中最突出的表现形式就是地图,运用轮廓清晰的线条来代替“想左走1000米,右转,再走800米”的表述,配以简洁的文字,从而轻易的达到指引的作用。
信息文明时期:
在获取信息手段越来越多的情况下,信息图形开始走进民众的视野。
怎么能让界面的信息图形被更多的用户注意到?
怎么能轻松的被看懂?
变成了人们对信息图形的新一轮挑战。
通过将文字尽可能多的转化成信息图形的方式,方便大众更直观的获得信息,减少文字的阅读量,缓解人们的“文字焦虑”,使用户从“看字操作”向“看图操作”的方向转化,减少过度信息带来的压力,从而使用户的整个操作过程更加简短便捷。
2.3信息图形的作用
2.3.1直观、准确
文字本身是抽象的,是需要接受主体通过视觉或者听觉感受,通过大脑进一步的分析,最后转化成形象的一种表达方式。
在这个过程中,不同的人会有不同的分析,从而形成不同的理解方式,导致结果产生分歧。
而信息图形是具象的,它可以准确生动的表现出需要表达的信息,可以直观的将需要传达的信息以形象的方式传递给使用者,从而加快对信息的识别度,使用户更容易相信。
毕竟“耳听为虚,眼见为实”,视觉系统所传达的信息远比文字传达的信息更容易让用户相信。
2.3.2记忆深刻
随着时代的发展,各个学科之间都有一些很难理解的专业术语,而信息图形可以在中间代替文字,起到纽带的作用,通过将复杂的信息转化成信息图形的方式,帮助需要的学生理解、接收信息。
并且,与文字相比,信息图形对大脑更有记忆点,不需要逐字理解、传达再进行记忆,关联性强,使学生印象深刻。
2.3.3加强统一性
经过时间的沉淀和历史的变迁,每个国家、民族都有自己的独一无二的风土人情和特殊的生活习惯,由此产生了独特的语言文字。
这也导致同样的内容,却有不同的表达方式,而信息图形的使用就会减少这类问题发生的机会,运用统一的标识设计来进行表达,方便各种用户获得消息,使得信息传达的误差率大大降低。
2.4信息图形的设计原则
美国设计学理论家维克多.帕帕奈克在《为真实世界设计》书中说过:
在设计之前,设计师需要:
深入洞察用户的真实需求,而不是波动需求;
考虑到使用者的社会地位、文化背景等方面的情况不同,越简易越方便操作理解;
考虑不同的使用场景和环境,加深下沉市场程度;
为所有人设计,面向全部群体,而不是因人而异,只针对某部分情况的人进行设计,更普遍化。
因此得出结论,设计师在设计美食类APP中的信息图形前,应注意界面的信息图形简单大方,容易理解,表达含义准确,操作逻辑顺畅,从而使得应用的产品用户体验升级。
2.4.2简单易懂原则
由于用户文化程度、生活习惯等的差异性,用信息图形的表达方式来代替文字,减少不同用户在看到相同文字时所引起歧义。
优秀的信息图形设计,一定是用户第一眼看到能够快速理解出其中的含义,不需要进行反复的思考与理解,或询问他人等操作,所以在设计时,要把握简单易懂的原则,用简单的信息图形轻而易举的表达出想要表达的有一定复杂程度的文本信息。
2.4.2准确原则
文字具有复杂性,设计师在制作信息图形时,要想准确的传达信息,就一定要在制作之前,充分了解每一个信息的内容以及他们背后的逻辑联系,深入理解想要传达的信息,从而保证用户接收到的信息不是错误的。
2.4.3易用原则
在互联网的发展下,用户越来越在意对产品使用后的自我感受,根据用户心理分析,检测用户在产品使用过程中的交互是否顺畅,是否需要增加一些趣味性的互动,在用户等待时,缓解无聊的情绪,从而方便用户的使用。
第3章信息图形在美食类APP界面中的应用分析
3.1美食类APP界面中的信息图形
在美食类APP中,信息图形主要指的是图形和图表两个部分。
而图形主要指界面图标,是为了让用户在挑选口味时,更加简单易懂的查看,简洁的做出选择,避免对口味的描述不准确。
将繁杂的文字信息简单化,减少大量的文字,从而避免不必要的误解出现。
在互联网越来越发达、手机越来越普及的情况下,市场上美食类APP也逐渐出现了竞争。
怎样的信息图形能获取到更多的用户的好感度?
怎样能让用户一眼就明白这个图形的含义?
这都是现阶段需要设计方面思考和深入研究的部分。
图表在美食类APP中,主要应用在对用户过往订单数据的剖析,通过图表的形式展现可以更直观的让用户了解自己的饮食习惯,进而进行分析与调整。
随着人们对健康重视程度的不断增高,美食类APP的发展势头迅猛。
相对于自己在家动手下厨,年轻人更偏向于采取外卖的形式,等外卖小哥把做好的饭菜送过来,这既大大解决了不会做饭的痛苦,又减少了买菜、炒菜等繁琐的步骤,是当下年轻人的普遍选择。
而当下大众最常用的美食类APP主要有:
美团外卖和饿了么,本文将尝试对其进行分析。
3.2美团外卖界面分析
美团外卖logo延续美团的黄色,将一只狗狗的头放在logo上,体现出美团外卖的口号,“美团外卖,送啥都快”。
美团外卖APP主界面下有四个一级界面,分别是首页、会员、订单、我的。
界面如图4,根据界面的信息图形分析如下。
3.2.1风格不统一
根据截图,可看出此款美食类APP界面的图形风格并没有完全统一。
功能区上半部分,采用卡通拟物的风格,立体感强,并配有强烈的投影。
功能区下半部分,采用扁平的风格,配以不同的颜色和文字,而颜色上又采取渐变色,上浅下深。
底部金刚区部分,图标采用线框的风格,配以深灰色辅助。
这三个部分的信息图形风格各不相同,并都配有文字解释,无法体现信息图形的功能。
3.2.2界面版式过于复杂
界面功能区中分类区有两个部分,而每个分类又有5-10个分支。
个人觉得整体分类混乱,导致界面版式过于复杂,并没有发挥出信息图形的简单易懂性,反而使界面混乱,用户无法理解这样做的目的以及背后的逻辑关系,无法体现出信息图形表达准确的优点。
3.2.3用户体验不足
在互联网的发展下,各类APP市场竞争激烈,但商业气息过重会直接导致用户体验受到影响。
界面上方的丝芙兰广告,只是一个宣传推广的物料,与外卖毫无关系,却由于商业价值放在界面醒目的位置,吸引用户眼球,会使用户产生厌烦的心理,导致商业气息过重,降低用户对产品的使用体验,用户在使用的过程中,很容易因为界面的复杂而选择其他产品。
应通过柔和的方式,让用户主动体验,而不是在用户点餐的场景中出现。
图4美团外卖主界面
3.3饿了么界面分析
饿了么logo采用蓝色,logo上只有一个英文字母“e”,明显的记忆点,便于用户记忆。
饿了么APP与美团外卖相似,界面信息图形风格不统一,功能过于复杂的现象同样存在,界面如图5。
3.3.1界面内容重复
从饿了么APP的主界面可以看出,除了界面信息图形风格不统一之外,功能区上半部分的五个图形内,有文字的出现,而这五个图形的下方又有相同的图形出现。
图形相关文字重复出现两次,且距离很近,这种表现方式,既重复冗杂,使产品逻辑混乱,、又无法体现出信息图形简洁的作用。
3.3.2分类标签模糊
界面内的“全城必吃”和“星选好店”采用相类似的信息图形,文字内容也相似,两个分类标签重复度很高。
界面内“夜宵”、“买菜”、“福利中心”等标签在同一层级,而这几个标签词语在内容上并不属于同一层级,从而导致页面内标签分类奇怪,用户无法理解内部逻辑,降低使用体验。
订单的区域分配:
按照不同的省市,或地区查找匹配符合条件的订单信息。
图5饿了么主界面
3.4小结
综上所述,目前市面上的美食APP存在以下几点缺点,界面内图标风格不够统一,分类出现重复,版式过于复杂。
但同时也存在许多的优点,相关信息的资源手段丰富、有许多合作渠道相互配合等等。
在信息图形方面,简单易懂,界面中部分信息图形与大众常用的APP中的信息图形相类似,减少用户的学习成本,让用户容易上手,在不能简化功能的前提下,通过简化图形的方式,让用户减少选择。
第4章美食类APP“O&
O”中的信息图形
4.1美食类APP“O&
O”设计构想
O”是Order和Original的缩写,意思是所设计的APP主要针对预定即外卖,并注重所使用的原材料,即营养成分上的分析与研究。
目前外卖市场越来越复杂多变,大家更在乎食品的口味与原材料。
O”是基于IOS系统设计的美食类APP,随着美食行业的兴起,各种测评、打卡、推荐在微博、小红书上不断延续,人们对美食的了解不断深入,对口味的追求也随之越来越高。
在不断追寻口味的过程中,对均衡饮食逐渐忽视。
饮食口味过于油腻,口味偏好明显,经常性食用宵夜,饮食不规律,对身体健康造成了严重的影响。
O”APP拥有对订餐记录的分析与建议,根据用户近日的饮食情况,对营养成分进行分析,对应推荐用户缺少的成分。
在APP界面中通过信息图形的呈现方式,为用户提供更多选择,且操作简便,准确的将想传达的信息传达给用户。
4.2“O&
O”APP设计
功能完善的APP界面设计,不仅要求界面图标设计的简单易懂,界面的布局也是合理清晰的。
4.2.1主图标设计
主图标根据APP的命名而来,希望凸显“O”的元素,简洁明了,方便用户记忆。
运用黄金分割比例的两个圆形和矩形,经过多次调整修改,组合成字母“O”的样式,而外圈的“O”比例又与手机APP界面相似,体现出此款APP的使用载体,如图6所示。
图6“O&
O”主图标设计
4.2.2信息图形设计
O”APP,所有界面的图形部分都采用线框的表现形式,风格更加统一,并在图形上进行不同的设计。
通过调查市面上现有的APP中的信息图设计,对表现形式统一的部分进行沿用,从而减少用户的学习成本,提高使用率。
而针对市场上还没有的信息图形部分,进行分析研究与设计制作。
通过资料收集分析文字是否为象形文字,并根据表达的含义,总结出相应的特点,运用信息图形的形式表达。
图7为“O&
O”APP界面中的信息图形元素。
金刚区的四个图标区分为选中与未选中的状态,选中状态下,对应的图标会呈现深色,而未选中状态下,则显示描边状态,以便于用户知道目前所在的界面是属于哪一个板块。
图7“O&
O”APP中的信息图形
信息图形设计不止包括图形部分,也包括图表部分,图8为APP界面内的图表展示。
在“O&
O”APP中,会根据用户的订单分析用户的饮食营养,也可仔细分析其中的营养元素。
运用柱状图、折线图等形式,和整个APP界面的颜色统一、风格相近,且可以更加直观的向用户传递出所想要表达的信息内容。
图8“O&
O”APP中的信息图表
4.2.3交互布局设计
如图,在界面的布局上,整体采用宫格的分布形式,每个层级的界面之间都存在包含关系,这样使得整个APP的界面层级结构统一化。
产品主界面顶部采用抽屉式导航设计,通过减少界面中非核心功能部分的占比,也就是增加核心部分的比例,从而使APP主界面设计更简洁,功能更突出。
中央是地址信息,根据用户手机的定位确定,左侧为消息栏,可快速获取店家、联系人等发来的消息,右侧为搜索栏,可看到历史记录和相关推荐。
主界面底部金刚区共有四个部分,只保留信息图形,减少文字描述,缓解文字所带来的视觉压力。
整体主界面根据层级关系,采用卡片式结构,使界面层级感丰富,规整化,从而减少用户在APP中的学习成本,方便使用。
经过合理的对APP界面进行布局设计,提高用户的整体使用体验,从而提高用户对APP的满意度,带来良好的口碑。
如图9所示。
图9界面布局
4.3界面展示
根据前期工作所收集到的信息与自身对信息图形的理解,在准确定位目标人群后,对APP界面进行构思与设计迭代。
4.3.1“O&
O”美食类APP界面设计框架
基于前期对同品类APP的分析,通过纸面流程分析,确定信息框架,制定设计规范,从而方便其他界面的视觉设计工作。
根据此款美食类APP是功能构想以及设计思路,将“O&
O”APP的主要界面流程进行梳理,分为一级界面、二级界面以及其他辅助性功能界面,如图10。
一级界面主要包括:
首页、朋友、订单以及个人信息,每一界面又有相对应的二级界面。
图10界面设计框架
4.3.2“O&
O”美食类APP交互布局展示
根据“O&
O”美食类APP的设计构想和现实中APP界面的使用流程,对整体的交互布局进行设计,如图11。
用户第一次通过桌面logo进入APP,会通过三页引导界面进入到账号注册登录界面,在账号登录界面中可跳转到界面注册和忘记密码界面,用户登录后可通过微信和QQ等方式寻找好友,也可跳过此步骤。
若用户并不是第一次进入APP,则直接进入一级主界面。
进入APP主界面后,可通过金刚区进入其他三个一级界面,每个一级界面之间都可以互相跳转。
用户进入一级界面后可继续点击进入对应二级界面,各二级界面之间不可跳转。
消息和查找界面在每一个一级界面中均可直接进入,返回则跳转到原一级界面。
图11交互布局展示
4.3.3“O&
O”一级界面展示
主页(图12):
在主页上部有将食物进行简单分类,主食、蔬菜、甜品和饮品,而在每一项分类之后,又对其进行了划分,如将主食分为米饭、面条、饺子和其他,配以一句话的描述和典型的图片。
页面顶部的图标分别代表消息、地址和搜索,在消息界面可以与商家或者朋友聊天,搜索界面可以帮助你快速找到你想要的食物。
这三个图标和底部金刚区图标风格统一,使整个APP的各个界面清晰易懂,方便操作。
口味分组(图13):
在这里可以看到口味相似的朋友,并通过简短的描述选择用户,点击获取他所推荐或常吃的食物。
后台根据用户的口味(经用户选择允许操作后进行口味数据的公开),进行用户分组。
比如不吃香菜的分组中,选择Kris,则会对应推荐他所尝试的不加香菜食物、以及他推荐的可以不加香菜餐厅等。
口味分类可自由发挥,建立标签后,若有相同口味的人或想尝试新口味的人,自然会选择加入,继而壮大该口味的队伍。
这样不仅增加了此APP的交互性,也拥有一点社交的性质,从而方便用户了解更多餐厅的不同口味,品尝到适合自己的菜品或进行新发地尝试与挑战。
图12一级界面-主页图13一级界面-口味分组
订单(图14):
用户可在APP内随时查看自己的订单记录,通过展示店铺图片以及名称、等级配送时间、距离等信息,继而方便用户进行进一步操作,“再来一单”、“评价”等等。
模拟用户有可能出现的忘记店铺信息、找不到店铺等情况,以减少用户在APP内的使用成本,为用户节省时间,并提高使用效率。
个人信息(图15):
对用户个人方面的信息和数据,相当于个人资料卡,包括用户常用地址、饮食喜好、钱包、订单评价等等。
每一层级对应的信息都可进行记录和更改,并保护用户隐私,在未获取用户同意前,只对用户自己开放,用户允许后可对朋友开放。
图14一级界面-订单图15一级界面-个人信息
4.3.4“O&
O”二级界面展示
订单分析界面(图16),根据用户近期在APP内订餐的数据进行分析,在营养成分上,分为四个板块碳水化合物、脂肪、蛋白质和维生素;
在时间维度上,有近三天、近七天和近一个月三个评判标准。
根据每种食物中营养成分的占比,粗略的进行分析,以柱状图的形式展示,方便用户轻易的看出每种成分占比的差别。
用户可通过中间的“MoreDetails”跳转到下一界面,进一步仔细的了解自己饮食中营养元素的情况。
在界面下方以卡片的形式,推荐均衡饮食的对应推荐菜品。
根据粗略分析中的营养成分,仔细分析其中的营养元素,包括能量、脂肪、蛋白质、糖分、醇类等等,以折线图的形式展现,显示元素含量的变化走向,下方以条状的形式明确具体数据,便于用户对自己的饮食习惯和其中营养成分的含量有一些基础的概念,来代替一些枯燥无味的文字信息。
图16订单下的二级界面
主页面下的食物分类界面(图17),包括主食、蔬菜、甜品、饮品四个模块,每个模块对应不同的商家和店铺。
用户可根据店铺展示的信息内容进入店铺页面,进行挑选,悬浮图标购物车可由用户在界面内随意调整位置,可直接点击进入购物车界面并进行快速结算。
图17主页下的二级界面
口味分组下的朋友界面(图18),通过口味分组与界面显示的朋友简要信息介绍(需获取用户同意)进行匹配,添加朋友,也可自己搜索或设置新的口味分组,继而邀请其他朋友。
口味搜索界面可显示最近搜索记录,分为两类,“不添加”和“口味”,用户在不想打字时,界面支持语音输入。
图18口味分组下面的二级界面
用户具体信息界面(图19、图20),用户个人信息共有五个层级,其中每个层级又有3-6个不同分支,用户可对每个具体分支的信息内容进行查看和修改。
个人信息层级包括头像、名称、密码、手机号以及其他绑定账号,页面下方可退出当前账号。
评级即是对餐厅以及食物的评价。
喜欢层级可收藏喜欢的食物或店铺,方便下一次进行订餐操作。
地址页面会智能收集使用过的地址信息并显示,也可进行语音输入操作。
图19个人信息分组下的二级界面1
图20个人信息分组下的二级界面2
4.3.5“O&
O”其他页面
Loading界面:
引导页采用强视觉的美食图片进行形式展示,欢迎并引导用户进入。
注册界面:
用户通过输入名字、邮箱、密码以及确认密码四个步骤进行简单的注册。
登录界面:
用户通过输入邮箱及密码登陆账号,也可通过其他社交方式微信或QQ对账号进行绑定并登陆。
忘记密码:
用户通过输入邮箱,以邮件的方式重新设置密码。
图21其他界面
寻找朋友(图21-左):
默认推荐活跃度较高的朋友代表,用户可通过绑定微信或QQ账号的方式,同步通讯录好友。
朋友主页(图21-中):
在用户允许公开个人口味等信息的情况下,对用户口味进行展示。
店铺分类(图21-右):
部分店铺会按食材原料