1、 毕 业 设 计（论文）专业: 数字媒体技术GALIY 治愈系美食 APP 的界面设计【摘 要 】好的 UI 设计不仅让软件变得有自己的一套风格、有品位，还要让软件的操作过程变得相对简单、不会对用户的操作造成过多的困扰，能够充分体现出一款软件的定位和特点。用户界面设计在如今一直跟着人们的日常部分相关联着。优秀的 UI 设计能够让用户轻易的接受和受到用户的喜爱。UI 设计是 APP 应用开发的一个重要环节。UI 设计师需要根据高保真原型设计界面，这一步不只是“美化”的工作，更多的是需要对原型设计有深刻的理解，需要了解整个页面的逻辑，从全局的角度来做视觉设计，用视觉手法去完成产品设计。如今在手机应
2、用中，美食 APP 作为一个软件用户使用，就是使用户在空闲的时间里可以合理安排自己的生活进行娱乐消遣。然而正是这样一个手机软件的引入，便带领了整个美食 APP 的市场蓬勃发展。但是越来越多的市场涌现，难免在竞争力上会给生产各方施加压力，所以在制作过程中也就过多追求速度，而忽视了质量，主要的问题就体现在用户使用界面上的差异。本文从 UI 的概念及其发展谈起，谈 UI 设计的重要性，以制作美食 APP 应用的 UI 为例，通过分析其 UI 设计的视觉传达效果，体现用视觉手法去完成产品设计的重要性，从而对未来 APP 应用 UI 设计提供更多的设计理念。同时通过这次设计，能够让我加 深对 UI 设计
3、规范、用户体验、视觉传达的理解。【关键词】用户界面，美食 APP 应用 UI，视觉传达艺术，用户体验【Abstract】 User Interface is a trending new word nowadays with the abbreviation of UI which include the overall designed of human-computer interaction and operation logic for beautified interface.Human-computer interaction is the medium of interactio
4、n and information exchange between the system and the user. It realizes the conversion between the internal form of information and the acceptable form of human beings.A successful UI design makes the software with not only personality, taste, but also increase comfortability, simplicity,less limita
5、tion, prominent positioning and characteristics feature for the software.UI is now closely related to peoples daily life and a good one makes products more acceptable and popular.UI design is a significant part of application development.It requires high fidelity prototypes as basis. UI design is no
6、t simply a “beautification“ job, but with more understanding of the prototype and the logic of the entire page, then follow the overall point of view for visual design, achieve completion through visual methodology.Presently the purpose of smart phone Gourmet APP is to enable users for making arrang
7、ement properly in their own casual time for entertainment.It is the utilization of such smart phone software, led the booming of the entire gourmet APP market.Nevertheless as more and more peer company emerge, it is inevitable to mount pressure on the production parties into competitiveness, hence c
8、ause rat race of speed which ignore the quality in the production process,cause the main problem in the user interface differences.This thesis starts with the concept of UI and its development history, and discusses the importance of UI design. Provide more ideas for the future APP UI design by Gour
9、met APP application design as an example, through analyzing the visual communication effect of it and the importance of completing product design with visual methodology.【Keywords】User Interface，Gourmet Application UI，Visual Communication Art，User Experience目录11. 绪论1.1 研究背景计算机技术伴随着 21 世纪的到来不停的发展，手机的
10、运用也在组件趋于智能化，手机触摸屏幕，大大的提升了人们的生活质量，愈来愈多的人开始使用手机。为此，各手机移动客户端也在不断的改进创新给人们带来了全新体验。美食 APP 就是其中之一，随着技术的不断提升，受到限制的条件越来越少。美食 APP 在这一个信息时代中越来越受到人们追捧，但是其内在还存界面交互不流畅，大大降低了用户的体验感上述问题或多或少影响了用户的使用率，不合理的界面设计会使得用户在使用过程中产生厌恶感，可能会造成人们放弃对该产品的使用，从而导致一款应用产品以失败告终，因为设计出来的最终产品是给用户使用的，用户说好你设计的产品才有一定的意义和价值。比如说，在修改账户信息时都会有下一步操
11、作按键，用户就需要根据下一步按键来，如果说按键的下一步操作传感器较差，需要按几次才能出现界面交换，这会在一个很大程度上去考验用户的耐心程度，非常容易让用户出现厌烦的情绪在 Web 设计中，设计者应做到，使用者浏览到任意页面时，它应该是一眼看过去就知道是怎么回事，可以不用解释就能明白的，可以进行自我解释的。同理，在 UI 设计中，设计者也应该做到别让用户思考这一点。1.2 研究意义移动计算机的冲击使得传统的社交方式有了全新的改变和发展空间,在此影响下,美食主题下的社交活动也逐渐由传统的线下社交向线上发展1。美食类 APP 作为移动美食社交的载体,在近几年发展迅猛,影响着美食爱好者的日常生活。但现
12、有美食 APP 在对社交功能的设计中,过分注重其工具性的发展,未从用户体验的角度把握用户需求,以带给用户良好的社交体验作为设计目标。这直接导致了现有美食类APP 中社交功能的使用率低下、用户满意度低、用户粘性差。面对如今的美食发展行业来说，它发展速度比之前迅速增长了很多倍，虽然发展速度让人们觉得可观，但是速度的累积并没有给美食行业带来质的飞跃。在设计层次上我们发现，大多数的美食 APP 开发都是单一的，仅靠一些华丽的美食内容来吸引用户，真正的内容却是让人无法接受的过去开发的美食 APP 中虽然留有一定的设计依据，但是这些内容也仅仅是提供一个大概的构架。在此本论文根据这些问题进行探讨，希望能够为
13、美食 APP行业提供新的参考依据2. 关于 UI 设计的概述2.1 UI 设计定义的概述UI 是当下流行的一个新词汇，翻译过来是用户界面的意思，UI 它的全称是 User Interface2。用户界面指的是用户和机器互动过程中的界面，UI 它是一个相对来说比较广泛的一个概念。软件的使用者和机器的交互、对软件的逻辑操作以及对整个界面的视觉设计即 UI 设计。人机交互指的是系统和用户之间进行交互和进行信息交换的媒介，人机交互实现的是一种信息的内在形式与人类所能够接受形式之间的互相转换。一份良好的 UI 设计不但要让软件变得有个性、独树一帜、有自己的品位，而且还要让软件的操作变得舒适、简单、易用，
14、能够非常充分体现出软件的定位和特点3。APP 应用软件开发的一个关键环节之一就是 UI 设计4。UI 设计师需要按照产品经理提供的低保真或者高保真原型图来进行界面设计，并不是只对界面进行美化修饰，要在透彻理解原型设计、整个页面操作逻辑的基础上来完成产品设计，从全球视角来完成产品设计。2.2 产品体验在交互设计中的体现如今的社会，计算机技术越来越发展成为核心，越来越多的人去关注，所以设计人员需要有更高的技术来完成任务所以，制作出来的产品也就能越来越满足用户的需求，更加方便用户的使用和消遣用户体验，是作为使用者的一种内心感受，它产生于用户使用该产品的过程之中。这种想法常常伴随着互联网技术的不断改进
15、，用户对产品的要求愈来愈高，于是产生了各种各样的用户体验5另外一个方面，用户体验不是简简单单地存在于产品的外在形态在产品使用过程中，客服就是很重要的一个环2节用户在购买了产品的相关产权之后，就应该考虑到用户在使用过程中所面临的各种问题，准备好各种解决方案一个好的客服一定是耐心解决用户所面临的问题，这样在一定程度上可以增加产品在用户心目中的好感，提高使用效率主要是由于：一是，深入的去理解用户体验它的一个重要性；二是，从用户的角度出发去满足用户的一个需求；三是，防止后期出现的复杂修整问题；四是，用户体验是体现用户与产品相互交融的核心62.3 认知心理学在 UI 设计中的运用从心理学的角度去研究用户
16、体验，它指的是人们思维目的情感状态的一种学科人们所表现出来的通过知觉触觉等感受外界事物的过程都是认知心理所以在心理学领域内，相关学习人员就是借助这种过程，来研究人们在使用电子产品的心理过程如何研发出符合人们大脑运作规律的电子产品，相关领域的设计人员就要不断深入挖掘人们的心理认知，让电子的生产过程符合人们的认知过程从用户的认知心理角度出发，使 UI 设计能够满足用户体验，如此，对于用户来说，好的产品就产生了72.4 界面设计视觉的基本原则简易性、整体性、对比性、灵活性和直观性，是界面设计视觉的基本原则8。界面设计传达的信息方式应是简化的、方便记忆和操作的。那些复杂的东西虽然会让人产生“科技成分高
17、”的错觉，但是一旦被用户发现这些东西只不过是“虚张声势”的话，就会对这些复杂的东西避而远之。现在的界面倾向减用，努力迈向简约干净，界面中形状简至最简单，同时却带有强烈的张力，设计师把大多数图案都藏在多层视觉效果和不同的视点角度下。现在的几何形象也成为作品的“代言人”，简洁是几何学的基本，也是界面的基本，使作品更有生命力。简洁的东西不会让用户产生视觉疲劳，页面上的内容并不是越多就越好，东西在于精不在于多，适当的留白会显得界面更富有张力。界面设计需要有一定的对比性，无论是颜色上的对比、字号上的对比还是间距之间的对比，一定的对比会让整个页面具有呼吸感9。一个优秀的页面需要有灵活性，无论是字号、图片的
18、大小、空格的大小、间距的大小都需要灵活设计，灵活的设计在于，那些图形、按钮、图片的设计比例要按一定的规范来，这样在以后的产品迭代上会更简易一些10。出色的界面的设计是通过直接感观的导航来贯穿界面的设计。导航的内容可以是图标，也可以是文字，导航不仅能改变用户点击后的状态，还能指明用户在界面上停留的位置。另外一点，导航、搜索栏等都是界面的一个非常重要的部分，既要让用户容易分辨出来，又要能够处理好它存在的一种主次关系11。3. 手机 UIGALIY 治愈系美食 APP的需求分析3.1 项目背景如今随着各种多功能智能设备的不断发展，智能手机的使用率极开始直线上升，这样就促成了各种APP 的发展，所以在
19、这里想要用这样一种优势去设计一款治愈系 APP。GLIYA 治愈系美食 APP 的主要的使用人群为 18 岁-30 岁的年轻女性用户，在都市中被迫坚强成长的女性多数在这个年龄段，更会感到孤独。但是她们对生活充满着热爱、对美食充满着热爱、并且热爱3去跟人分享。在一个社交媒体上分享自己的生活会让他们找到一些存在感。3.2 整体定位GALIY（咖喱呀）是一款小清新治愈系风格的美食应用 app。主要人群为女性，旨在帮助在都市中被迫坚强成长的女性平衡工作和生活。能够通过烹饪美食、分享美食，来抚慰心灵的孤独与冰冷，重拾对生活的热爱与激情。我们要去相信食物它本身也是也是一种生产力和一种存在于生活中的的强大力
20、量，让关于食物的一切都在这里成为一种可能，我们要学会去爱上美食，爱上生活，也爱上我们自己。也想通过这样的一个设计让用户们更能体验到设计的魅力，深刻的感受到图形带给人们生活的重要意义12。3.3 需求分析治愈系美食 APP 产品的需求分析我从三个角度来分析。第一个角度就是随着经济的不断发展让人们越来越追求高质量的生活状态13，但是也有越来越多的女性在忙碌完回到家之后变得非常的孤单，不知道从哪里去找到存在感，本产品刚好可以解决这种问题，本产品每天都为更新一些治愈系的美食教程，让人们可以自由选择自己喜欢的美食教程进行学习，食材都是可以轻易找到的。第二个角度就是在当代现代社会，人们越来越不爱出门，依赖
21、网络进行购物，这时候我们可以借助这个优秀，在这个产品上增添一些商品，这些商品可能是我们视频教程中出现的商品，人们对感兴趣的商品可以自由进行购买，在这边放置的商品都是极其美观，符合现代人审美需求和日常需要的。第三个角度就是目前市面上出现的治愈类的 APP 并不是很多，这就等于开拓了一个全新的市场，治愈类产品将会越来越受欢迎，所以这个市场的上升空间还是很大的14。3.4 设计思路GALIY（咖喱呀）是一款小清新治愈系风格的美食应用 APP。主要人群为女性，旨在帮助在都市中被迫坚强成长的女性平衡工作和生活。能够通过烹饪美食、分享美食，来抚慰心灵的孤独与冰冷，重拾对生活的热爱与激情。我们要去相信食物它
22、本身也是也是一种生产力和一种存在于生活中的强大力量，使关于食物的一切都在这里成为一种可能，我们要学会去爱上美食，爱上生活，也爱上我们自己。也想通过这样的一个设计让用户们更能体验到设计的魅力，深刻的感受到图形带给人们生活的重要意义。GALIY 治愈系美食 APP 的主要的使用人群为 18 岁-30 岁的年轻女性用户，在都市中被迫坚强成长的女性多数在这个年龄段，更会感到孤独。但是她们对生活充满着热爱、对美食充满着热爱、并且热爱去跟人分享。在一个社交媒体上分享自己的生活会让他们找到一些存在感15。在进行应用 UI 的制作之前需选定好风格与元素，例如简约与写实，小清新与唯美，复古经典简约化 UI 界面
23、拥有的特点：以简约或是极简的表现方式运用；简单的元素和形状、极简风、强功能性。写实风格偏向于真实的感觉，代入感会显得非常强烈。元素的话因为我做的食物类的应用，所以让人更多想到的是各种食物的样子；因为是小清新的风格，所以在色彩的选择上也更偏向柔和一点的色彩搭配16。经过设计与策划后，决定制作其中主要的几个的应用界面，分别为：登录、注册界面，引导界面，缺省界面，首页，发现界面，社区界面，详情界面，个人中心界面。本文以 iOS 系统为规范进行阐述，图标标准均以 iPhone6/6s/7 为例。44. 手机 UIGALIY 治愈系美食 APP的原型设计原型在一般的公司里是产品经理与 UI 设计师以及前
24、端工程师进行沟通的良好工具。原型设计会贯穿一整套产品。一套良好的原型设计会直接导致该产品最终能否成功。用户界面原型一定要在项目的一开始就进行设计。在进行产品原型设计之前会先出一套思维导图，将产品的整个功能点串联起来，这样在后续的产品设计上会减少很多不必要的麻烦。在这次的设计中，我使用了 x-mind 软件进行思维导图的设计。在 x-mind 新建一个项目，并进行命名，首先添加一个中心主题，我添加了 GALIY 作为我这份思维导图的中心主题，然后在中心主题下添加子主题，分层次的将产品的整个内容以分支的形式展示出来。我的中心主题下的内容包括登录注册、首页、发现页、社区以及我的，这些属于一级页面的内
25、容，接下去在一级页面的内容上添加子标题，将二级页面的内容展示出来，以此类推。这这边我总共展示了三个级别页面的内容,如图 4-1 所示。图 4-1 GALIY 思维导图原型的内容包括了产品的整个功能点、交互点以及各个界面之间的跳转。产品经理在策划完，整个项目之后就会进行产品需求的撰写，然后开始进行产品原型的制作，进行产品设计时会涉及到很多制作原型的工具，一般制作原型的工具有 axure、sketch，axure 软件适用于 Windows 系统的电脑，sketch适用于 Mac 系统的电脑，在这次的原型设计中我使用了 axure 进行原型的设计,如图 4-2 所示。5图 4-2 GALIY 原型
26、图的制作5. 手机 UIGALIY 治愈系美食 APP的设计与制作5.1 图标的设计与制作App 图标分为应用图标和功能图标。应用图标就是放在手机桌面上的图标，用户可以通过点击图标来打开应用。应用图标是应用品牌的标志，是整个应用非常重要组成部分之一。用户在看到图标的时候会建立起对 APP 应用的第一印象，并通过这个来判断一款应用的品质、特点以及是否可靠，所以 APP应用需要一个漂亮的、能够抓住用户眼球的图标，这样用户才能够将其留在主屏幕上，并且进一步去了解它。应用图标的设计大概具有 6 个特点：图形要设计得与众不同，尽量避免出现跟市面上千篇一6律的图形；表达内容时要准确，不要模棱两可；使用颜色
27、的时候要细心慎重、大篇幅的使用文字是不可取的，一定要尽可能的避免；避免去使用一些照片；尽量做到能够适应不一样的场景，来保证手机界面图标的排列能够使人看上去没有分歧并且是有序的，而且还不会失去欣赏性。功能图标引导用户进行 APP 功能操作的图标。功能图标包括：标签栏导航图标、导航栏图标、设置图标。遵照一定的设计规范在进行图标设计时是非常重要的，因为设计不像艺术，设计是建立在一定规范的基础之上的。本文以 iOS 系统为规范进行阐述，图标标准均以 iPhone6/6s/7 为例。LOGO 的创意来自于这个 APP 中文名咖喱呀的英译，即 GALIY。采用的设计方法是将各个字母颠倒，复制这个图标然后添
28、加一个倒影，进行垂直变换，降低图标的不透明度，用橡皮擦工具擦拭形成一个倒影，倒影的设计形式可以增加图标的质感，尺寸设计为为 120*120px，如图 5-1 所示。图 5-1 Logo 设计图由于是一整套的功能图标，所以需要统一它们的元素，在线条粗细和圆角上也要做到统一，因为我做的是简约小清新的界面，所以采用了线性图标，并且这组图标，都是在各 UI 设计中能够经常看到的，并且它们都已经有了自己默认的含义，然后根据自身的设计风格对图标进行了设计，例如增加了圆角，并且保持圆角的度数一致。做图标时应该挑选那些容易辨认的图标，主功能图标最主要的是要让他们看起来是一套的，所以在线条粗细和圆角上做到统一，
29、线条粗细大小为 2px，圆角度数为 12px，每个级别的图标大小要在视觉上保持一致，体现了一致性的设计原则，如图 5-2 所示。图 5-2 功能图标设计图5.2 登录、注册界面的设计与制作登录、注册界面包含的大致部分为 logo、文本框和按钮。文本框是用户输入文本的区域。边框样式默认为使用圆角，圆角度数一般设置为 4px,也可以使用直角。这个根据 APP 应用整体的风格来确定，如7果整体风格是偏圆润的就应该使用圆角，这也体现了一致性的计原则，文本框颜色使用灰色描边，文字使用 APP 应用的主色,如图 5-3 所示。图 5-3 登录界面设计GALIY 治愈系美食 APP 的注册、登录界面设计，背景均采用了小清新的插画，符合治愈系 APP 的主题。选择注册或登录按钮分别进入不同界面。当输入数据时会发生触动，这时候按钮的颜色会改变。选择注册按钮或者登录按钮可以分别进入相应的界面。当输入数据时会发生触动，这时候按钮的颜色会改变，如图 5-4 所示。
