GALIY治愈系美食APP的界面设计

毕 业 设 计（论文）专业: 数字媒体技术GALIY治愈系美食APP的界面设计【摘 要】好的UI设计不仅让软件变得有自己的一套风格、有品位，还要让软件的操作过程变得相对简单、不会对用户的操作造成过多的困扰，能够充分体现出一款软件的定位和特点。用户界面设计在如今一直跟着人们的日常部分相关联着。优秀的UI设计能够让用户轻易的接受和受到用户的喜爱。 UI设计是APP应用开发的一个重要环节。UI设计师需要根据高保真原型设计界面，这一步不只是“美化”的工作，更多的是需要对原型设计有深刻的理解，需要了解整个页面的逻辑，从全局的角度来做视觉设计，用视觉手法去完成产品设计。如今在手机应用中，美食APP作为一个软件用户使用，就是使用户在空闲的时间里可以合理安排自己的生活进行娱乐消遣。然而正是这样一个手机软件的引入，便带领了整个美食APP的市场蓬勃发展。但是越来越多的市场涌现，难免在竞争力上会给生产各方施加压力，所以在制作过程中也就过多追求速度，而忽视了质量，主要的问题就体现在用户使用界面上的差异。本文从UI的概念及其发展谈起，谈UI设计的重要性，以制作美食APP应用的UI为例，通过分析其UI设计的视觉传达效果，体现用视觉手法去完成产品设计的重要性，从而对未来APP应用UI设计提供更多的设计理念。同时通过这次设计，能够让我加 深对UI设计规范、用户体验、视觉传达的理解。【关键词】用户界面，美食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 interaction 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 limitation, 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 not 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 arrangement 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 cause 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 Gourmet 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目录1. 绪论1.1 研究背景计算机技术伴随着21世纪的到来不停的发展，手机的运用也在组件趋于智能化，手机触摸屏幕，大大的提升了人们的生活质量，愈来愈多的人开始使用手机。为此，各手机移动客户端也在不断的改进创新给人们带来了全新体验。美食APP就是其中之一，随着技术的不断提升，受到限制的条件越来越少。美食APP在这一个信息时代中越来越受到人们追捧，但是其内在还存界面交互不流畅，大大降低了用户的体验感上述问题或多或少影响了用户的使用率，不合理的界面设计会使得用户在使用过程中产生厌恶感，可能会造成人们放弃对该产品的使用，从而导致一款应用产品以失败告终，因为设计出来的最终产品是给用户使用的，用户说好你设计的产品才有一定的意义和价值。比如说，在修改账户信息时都会有下一步操作按键，用户就需要根据下一步按键来，如果说按键的下一步操作传感器较差，需要按几次才能出现界面交换，这会在一个很大程度上去考验用户的耐心程度，非常容易让用户出现厌烦的情绪在Web设计中，设计者应做到，使用者浏览到任意页面时，它应该是一眼看过去就知道是怎么回事，可以不用解释就能明白的，可以进行自我解释的。同理，在UI设计中，设计者也应该做到别让用户思考这一点。1.2 研究意义移动计算机的冲击使得传统的社交方式有了全新的改变和发展空间,在此影响下,美食主题下的社交活动也逐渐由传统的线下社交向线上发展1。美食类APP作为移动美食社交的载体,在近几年发展迅猛,影响着美食爱好者的日常生活。但现有美食APP在对社交功能的设计中,过分注重其工具性的发展,未从用户体验的角度把握用户需求,以带给用户良好的社交体验作为设计目标。这直接导致了现有美食类APP中社交功能的使用率低下、用户满意度低、用户粘性差。面对如今的美食发展行业来说，它发展速度比之前迅速增长了很多倍，虽然发展速度让人们觉得可观，但是速度的累积并没有给美食行业带来质的飞跃。在设计层次上我们发现，大多数的美食APP开发都是单一的，仅靠一些华丽的美食内容来吸引用户，真正的内容却是让人无法接受的过去开发的美食APP中虽然留有一定的设计依据，但是这些内容也仅仅是提供一个大概的构架。在此本论文根据这些问题进行探讨，希望能够为美食APP行业提供新的参考依据2. 关于UI设计的概述2.1 UI设计定义的概述UI是当下流行的一个新词汇，翻译过来是用户界面的意思，UI它的全称是User Interface2。用户界面指的是用户和机器互动过程中的界面，UI它是一个相对来说比较广泛的一个概念。软件的使用者和机器的交互、对软件的逻辑操作以及对整个界面的视觉设计即UI设计。人机交互指的是系统和用户之间进行交互和进行信息交换的媒介，人机交互实现的是一种信息的内在形式与人类所能够接受形式之间的互相转换。一份良好的UI设计不但要让软件变得有个性、独树一帜、有自己的品位，而且还要让软件的操作变得舒适、简单、易用，能够非常充分体现出软件的定位和特点3。 APP应用软件开发的一个关键环节之一就是UI设计4。UI设计师需要按照产品经理提供的低保真或者高保真原型图来进行界面设计，并不是只对界面进行美化修饰，要在透彻理解原型设计、整个页面操作逻辑的基础上来完成产品设计，从全球视角来完成产品设计。2.2 产品体验在交互设计中的体现如今的社会，计算机技术越来越发展成为核心，越来越多的人去关注，所以设计人员需要有更高的技术来完成任务所以，制作出来的产品也就能越来越满足用户的需求，更加方便用户的使用和消遣用户体验，是作为使用者的一种内心感受，它产生于用户使用该产品的过程之中。这种想法常常伴随着互联网技术的不断改进，用户对产品的要求愈来愈高，于是产生了各种各样的用户体验5另外一个方面，用户体验不是简简单单地存在于产品的外在形态在产品使用过程中，客服就是很重要的一个环节用户在购买了产品的相关产权之后，就应该考虑到用户在使用过程中所面临的各种问题，准备好各种解决方案一个好的客服一定是耐心解决用户所面临的问题，这样在一定程度上可以增加产品在用户心目中的好感，提高使用效率主要是由于：一是，深入的去理解用户体验它的一个重要性；二是，从用户的角度出发去满足用户的一个需求；三是，防止后期出现的复杂修整问题；四是，用户体验是体现用户与产品相互交融的核心62.3 认知心理学在UI设计中的运用从心理学的角度去研究用户体验，它指的是人们思维目的情感状态的一种学科人们所表现出来的通过知觉触觉等感受外界事物的过程都是认知心理所以在心理学领域内，相关学习人员就是借助这种过程，来研究人们在使用电子产品的心理过程如何研发出符合人们大脑运作规律的电子产品，相关领域的设计人员就要不断深入挖掘人们的心理认知，让电子的生产过程符合人们的认知过程从用户的认知心理角度出发，使UI设计能够满足用户体验，如此，对于用户来说，好的产品就产生了72.4 界面设计视觉的基本原则简易性、整体性、对比性、灵活性和直观性，是界面设计视觉的基本原则8。界面设计传达的信息方式应是简化的、方便记忆和操作的。那些复杂的东西虽然会让人产生“科技成分高”的错觉，但是一旦被用户发现这些东西只不过是“虚张声势”的话，就会对这些复杂的东西避而远之。现在的界面倾向减用，努力迈向简约干净，界面中形状简至最简单，同时却带有强烈的张力，设计师把大多数图案都藏在多层视觉效果和不同的视点角度下。现在的几何形象也成为作品的“代言人”，简洁是几何学的基本，也是界面的基本，使作品更有生命力。简洁的东西不会让用户产生视觉疲劳，页面上的内容并不是越多就越好，东西在于精不在于多，适当的留白会显得界面更富有张力。界面设计需要有一定的对比性，无论是颜色上的对比、字号上的对比还是间距之间的对比，一定的对比会让整个页面具有呼吸感9。一个优秀的页面需要有灵活性，无论是字号、图片的大小、空格的大小、间距的大小都需要灵活设计，灵活的设计在于，那些图形、按钮、图片的设计比例要按一定的规范来，这样在以后的产品迭代上会更简易一些10。出色的界面的设计是通过直接感观的导航来贯穿界面的设计。导航的内容可以是图标，也可以是文字，导航不仅能改变用户点击后的状态，还能指明用户在界面上停留的位置。另外一点，导航、搜索栏等都是界面的一个非常重要的部分，既要让用户容易分辨出来，又要能够处理好它存在的一种主次关系11。3. 手机UIGALIY治愈系美食APP的需求分析3.1 项目背景如今随着各种多功能智能设备的不断发展，智能手机的使用率极开始直线上升，这样就促成了各种APP的发展，所以在这里想要用这样一种优势去设计一款治愈系APP。GLIYA治愈系美食APP的主要的使用人群为18岁-30岁的年轻女性用户，在都市中被迫坚强成长的女性多数在这个年龄段，更会感到孤独。但是她们对生活充满着热爱、对美食充满着热爱、并且热爱去跟人分享。在一个社交媒体上分享自己的生活会让他们找到一些存在感。3.2 整体定位GALIY（咖喱呀）是一款小清新治愈系风格的美食应用app。主要人群为女性，旨在帮助在都市中被迫坚强成长的女性平衡工作和生活。能够通过烹饪美食、分享美食，来抚慰心灵的孤独与冰冷，重拾对生活的热爱与激情。我们要去相信食物它本身也是也是一种生产力和一种存在于生活中的的强大力量，让关于食物的一切都在这里成为一种可能，我们要学会去爱上美食，爱上生活，也爱上我们自己。也想通过这样的一个设计让用户们更能体验到设计的魅力，深刻的感受到图形带给人们生活的重要意义12。3.3 需求分析治愈系美食APP产品的需求分析我从三个角度来分析。第一个角度就是随着经济的不断发展让人们越来越追求高质量的生活状态13，但是也有越来越多的女性在忙碌完回到家之后变得非常的孤单，不知道从哪里去找到存在感，本产品刚好可以解决这种问题，本产品每天都为更新一些治愈系的美食教程，让人们可以自由选择自己喜欢的美食教程进行学习，食材都是可以轻易找到的。第二个角度就是在当代现代社会，人们越来越不爱出门，依赖网络进行购物，这时候我们可以借助这个优秀，在这个产品上增添一些商品，这些商品可能是我们视频教程中出现的商品，人们对感兴趣的商品可以自由进行购买，在这边放置的商品都是极其美观，符合现代人审美需求和日常需要的。第三个角度就是目前市面上出现的治愈类的APP并不是很多，这就等于开拓了一个全新的市场，治愈类产品将会越来越受欢迎，所以这个市场的上升空间还是很大的14。3.4 设计思路GALIY（咖喱呀）是一款小清新治愈系风格的美食应用APP。主要人群为女性，旨在帮助在都市中被迫坚强成长的女性平衡工作和生活。能够通过烹饪美食、分享美食，来抚慰心灵的孤独与冰冷，重拾对生活的热爱与激情。我们要去相信食物它本身也是也是一种生产力和一种存在于生活中的强大力量，使关于食物的一切都在这里成为一种可能，我们要学会去爱上美食，爱上生活，也爱上我们自己。也想通过这样的一个设计让用户们更能体验到设计的魅力，深刻的感受到图形带给人们生活的重要意义。GALIY治愈系美食APP的主要的使用人群为18岁-30岁的年轻女性用户，在都市中被迫坚强成长的女性多数在这个年龄段，更会感到孤独。但是她们对生活充满着热爱、对美食充满着热爱、并且热爱去跟人分享。在一个社交媒体上分享自己的生活会让他们找到一些存在感15。 在进行应用UI的制作之前需选定好风格与元素，例如简约与写实，小清新与唯美，复古经典简约化UI界面拥有的特点：以简约或是极简的表现方式运用；简单的元素和形状、极简风、强功能性。写实风格偏向于真实的感觉，代入感会显得非常强烈。元素的话因为我做的食物类的应用，所以让人更多想到的是各种食物的样子；因为是小清新的风格，所以在色彩的选择上也更偏向柔和一点的色彩搭配16。经过设计与策划后，决定制作其中主要的几个的应用界面，分别为：登录、注册界面，引导界面，缺省界面，首页，发现界面，社区界面，详情界面，个人中心界面。本文以iOS系统为规范进行阐述，图标标准均以iPhone6/6s/7为例。4. 手机UIGALIY治愈系美食APP的原型设计原型在一般的公司里是产品经理与UI设计师以及前端工程师进行沟通的良好工具。原型设计会贯穿一整套产品。一套良好的原型设计会直接导致该产品最终能否成功。用户界面原型一定要在项目的一开始就进行设计。在进行产品原型设计之前会先出一套思维导图，将产品的整个功能点串联起来，这样在后续的产品设计上会减少很多不必要的麻烦。在这次的设计中，我使用了x-mind软件进行思维导图的设计。在x-mind新建一个项目，并进行命名，首先添加一个中心主题，我添加了GALIY作为我这份思维导图的中心主题，然后在中心主题下添加子主题，分层次的将产品的整个内容以分支的形式展示出来。我的中心主题下的内容包括登录注册、首页、发现页、社区以及我的，这些属于一级页面的内容，接下去在一级页面的内容上添加子标题，将二级页面的内容展示出来，以此类推。这这边我总共展示了三个级别页面的内容,如图4-1所示。图4-1 GALIY思维导图原型的内容包括了产品的整个功能点、交互点以及各个界面之间的跳转。产品经理在策划完，整个项目之后就会进行产品需求的撰写，然后开始进行产品原型的制作，进行产品设计时会涉及到很多制作原型的工具，一般制作原型的工具有axure、sketch，axure软件适用于Windows系统的电脑，sketch适用于Mac系统的电脑，在这次的原型设计中我使用了axure进行原型的设计,如图4-2所示。 图4-2 GALIY原型图的制作5. 手机UIGALIY治愈系美食APP的设计与制作5.1图标的设计与制作App图标分为应用图标和功能图标。应用图标就是放在手机桌面上的图标，用户可以通过点击图标来打开应用。应用图标是应用品牌的标志，是整个应用非常重要组成部分之一。用户在看到图标的时候会建立起对APP应用的第一印象，并通过这个来判断一款应用的品质、特点以及是否可靠，所以APP应用需要一个漂亮的、能够抓住用户眼球的图标，这样用户才能够将其留在主屏幕上，并且进一步去了解它。应用图标的设计大概具有6个特点：图形要设计得与众不同，尽量避免出现跟市面上千篇一律的图形；表达内容时要准确，不要模棱两可；使用颜色的时候要细心慎重、大篇幅的使用文字是不可取的，一定要尽可能的避免；避免去使用一些照片；尽量做到能够适应不一样的场景，来保证手机界面图标的排列能够使人看上去没有分歧并且是有序的，而且还不会失去欣赏性。功能图标引导用户进行APP功能操作的图标。功能图标包括：标签栏导航图标、导航栏图标、设置图标。遵照一定的设计规范在进行图标设计时是非常重要的，因为设计不像艺术，设计是建立在一定规范的基础之上的。本文以iOS系统为规范进行阐述，图标标准均以iPhone6/6s/7为例。LOGO的创意来自于这个APP中文名咖喱呀的英译，即GALIY。采用的设计方法是将各个字母颠倒，复制这个图标然后添加一个倒影，进行垂直变换，降低图标的不透明度，用橡皮擦工具擦拭形成一个倒影，倒影的设计形式可以增加图标的质感，尺寸设计为为120*120px，如图5-1所示。图 5-1 Logo设计图由于是一整套的功能图标，所以需要统一它们的元素，在线条粗细和圆角上也要做到统一，因为我做的是简约小清新的界面，所以采用了线性图标，并且这组图标，都是在各UI设计中能够经常看到的，并且它们都已经有了自己默认的含义，然后根据自身的设计风格对图标进行了设计，例如增加了圆角，并且保持圆角的度数一致。做图标时应该挑选那些容易辨认的图标，主功能图标最主要的是要让他们看起来是一套的，所以在线条粗细和圆角上做到统一，线条粗细大小为2px，圆角度数为12px，每个级别的图标大小要在视觉上保持一致，体现了一致性的设计原则，如图5-2所示。图5-2 功能图标设计图5.2 登录、注册界面的设计与制作登录、注册界面包含的大致部分为logo、文本框和按钮。文本框是用户输入文本的区域。边框样式默认为使用圆角，圆角度数一般设置为4px,也可以使用直角。这个根据APP应用整体的风格来确定，如果整体风格是偏圆润的就应该使用圆角，这也体现了一致性的计原则，文本框颜色使用灰色描边，文字使用APP应用的主色,如图5-3所示。图5-3 登录界面设计GALIY治愈系美食APP的注册、登录界面设计，背景均采用了小清新的插画，符合治愈系APP的主题。选择注册或登录按钮分别进入不同界面。当输入数据时会发生触动，这时候按钮的颜色会改变。选择注册按钮或者登录按钮可以分别进入相应的界面。当输入数据时会发生触动，这时候按钮的颜色会改变，如图5-4所示。图5-4 登录界面设计5.3首页的设计与制作首页采用九宫格的布局方式，将主要内容简洁明了地展示在用户面前，方便用户点击查阅。首页展示了最新和最热门的治愈美食，点击即可进入美食视频和图文教程，轻触屏幕使产品上下翻阅，一目了然，不会觉得繁琐而扰乱心智。设计和艺术不同，设计非常注重规范，例如色彩规范、按钮规范、字号规范、间距规范等等。首页的banner区域采用左右轮播的方式将内容展现在用户面前，banner的区域大小为750px*375px，采用2:1的宽高比例有利于更好的处理各种尺寸的图片，利于做适配；导航区“最新”和“热门”的字号大小为30px，当划到相应内容的时候字体变为主题色橙黄色，如图5-5所示。图 5-5首页的设计5.4发现页的设计与制作发现页采用卡片式的设计方式，卡片式的布局设计，将整个页面的内容分成多个类似于卡片的区块，属于栅格布局的一种形式，每个区域内包含不同大小、不同媒介形式的内容单元。通过卡片式设计以统一的方式进行混合呈现。卡片式布局设计，不但能够给人带来一种视觉上统一的感受，并且在以后产品设计的迭代上相对来说会更简单一些。GALIY治愈美食APP的发现页面为用户搜集了众多与美食有关的东西：高颜值的甜酒、二次元美食的制作教程、治愈温情的美食电影、厨房好物等，用户不用走出家门就可以享受到美食所带来的一大乐趣。发现页的每个栏目有一个相应的标题，标题的字号大小为32px。内容部分可以对图片进行左右滑动来实现更多的内容，在设计的时候要考虑到让用户一眼就可以看出这一部分的功能是可以进行左右滑动来展示更多内容的，在设计的时候可以留出一部分不完整的内容来提醒用户左右滑动可以展示更多的内容，如图5-6所示。图5-6 发现页设计5.5社区页的设计与制作社区页也采用卡片式的设计方式，通过上下滑动页面来浏览卡片内容。用户可以点击社区页左上角的相机图标上传美食内容，与美食爱好者进行互动交流。社区页主要的功能是分享美食，通过分享美食可以和更多的美食爱好者进行互动，人们可以进行评论和点赞，如果喜欢这样的内容还可以对作者进行关注，以便后续进行更多的交流和互动。发现页的导航用tab来进行指引，tab左右滑动进入相应的页面，并且导航文字变为主题色，如图5-7所示。图5-7 导航tab设计对关注按钮进行操作时，如果是未关注状态，按钮则显示主题色色调，如果是你已经关注过，则显示已关注的状态，一般来说，已关注的按钮状态，我们会用灰色来显示，如图5-8所示。图 5-8社区页面设计5.6详情页的设计与制作在本次论文中，我主要展示首页内容点击进去的详情页设计。内容分为视频详情和图文详情。视频详情页是用视频的形式来交大家烹饪美食，这时候会涉及到视频展示区的大小设计，这这里我使用2长宽比为2:1的尺寸来设计视频的大小，即宽为750px、高为375px，2:1的尺寸有利于后期前端进行兼容性的处理。视频详情页不仅有视频内容，还加上了一段治愈性的有关美食的介绍，丰富了页面内容。人们可以对感兴趣的内容进行下载、点赞和分享，还可以对内容进行评论。可以在无线网的状态下自动缓存下载，而且不会占用太多的内存，点击分享按钮，可以将感兴趣的内容分享到QQ空间、QQ好友、微博、朋友圈以及微信好友。无论是点赞、分享还是用户所下载的内容都可以在我的个人中心里面找到，这样做的目的在于可以留住用户之前收藏过的东西，以防下次需要的时候突然找不到，这也是一种为用户考虑的设计，注重用户体验，如图5-9所示。图5-9 视频详情页面的设计5.7个人中心页的设计与制作个人中心页主要展示用户的一些个人信息，以及对一些内容的汇总，在个人中心页，用户根据点击相应的内容可以快速看到自己之前的一些操作，例如，之前喜欢的内容、分享过的内容、评论过的内容、订单、钱包以及浏览历史等。在个人中心页，点击“设置”可以对账户信息进行修改。个人中心页主要采用了卡片式的布局方式。主要分两部分，第一部分展示用户的昵称、ID号、个人签名、关注的人、粉丝以及发表过的动态，点击相应的内容可以查看到具体的内容。第二部分展示我的喜欢、我的分享、我的评论、我的订单、我的钱包、浏览历史以及设置。为了使页面看上去能够层次分明，对第二部分进行了分块布局，将内容相似的部分划分为一块，用区块分隔开，例如将我的喜欢、我的分享以及我的评论划分为一块。在每一点内容前加上了一个图标，并在图标上加上了一点细节，让自己的设计变得有一定的特色，跟设计风格相契合。所以在图标的设计上我在每个图标上加上了一个小圆点元素，并用上了主题色。为了增加用户体验，在每一点内容上加上了箭头，这样的目的在于知识用户点击这里是可以进行跳转的，如图5-10所示。图5-10 个人中心页面的设计5.8 引导页的设计与制作当用户开始使用一款应用，从手机桌面点开应用图标进入应用时，经常会看到一些设计精良的引导页，它们通常会提前让你了解产品的一些主要功能和特点。初印象常常会大大地影响到使用者对产品持续的体验感。制作精美、生动的引导页，会使用户更容易接受。GALIY治愈美食APP的引导页则采用了情感故事类的设计方法。图形的绘制在AI上完成，采用MBE的设计风格。引导页采用MBE风格插画的形式，画面更加生动活泼，传达产品的主要理念。因为这是一款食物类的APP，所以引导页的元素便采用了食物造型，食物造型为米粒、一碗米饭、鸡腿，在绘制图形的时候也要保持线条以及风格的一致，在色彩的搭配上也要协调，如图所示5-11所示。图5-11 引导页设计5.9 缺省页的设计与制作缺省页采用图文形式，使用生动形象的插画，增添了阅读的情趣，使负面反馈不再枯燥乏味。缺省页图形以饭团作为设计原型，符合食物的主题，在食物主题之上加上相应的辨别元素，在没有找到相关内容的图形上加上一个搜索的图标，在断网的图形上加上一个断链的图标，在收藏的图形上加上一个星星的图标表示收藏，如图5-12所示。图5-12 缺省页图形设计6.手机UIGALIY治愈系美食APP设计的交互效果实现6.1 交互实现的环境一款产品的界面设计完之后，要对界面的效果进行最后的展示，这一步不仅可以发现页面的整个操作流程也可以发现一些遗漏掉的页面，我们将这一步以简单的交互效果来展示，交互实现的环境我选用蓝湖这样一个产品设计的工作平台来进行页面的一些简单互。蓝湖是一款产品设计的合作平台,帮助计算机团队进行更好的设计设计，它可以展示页面之间的跳转关系，进行一些简单的交互实现。首先要在蓝湖软件上下载一个Photoshop的插件，将它安装到Photoshop软件里去，然后将选中的设计图上传到蓝湖上，如图6-1所示。 图6-1 蓝湖实现环境图6.2 交互实现的过程将界面上传到蓝湖上时，我们要对页面进行交互的实现，首先对页面进行整理，整理的目的在于能够快速找到所需的页面，将所有的页面叠加在一起，这时候旁边会出现各个页面的按钮，点击相应的按钮会马上显示出相应的页面，如图6-2所示。图6-2 页面叠加实现图 点击交互原型按钮进行交互原型的制作。在设计图上框选出你所要点击的区域，并连接到相应的页面，如图6-3所示。图6-3 链接实现图6.2.1 登录模块界面交互实现将所有要链接的图片处理好之后，就可以来展示我们实现出来的交互效果了，从登录注册入口页，进入登录页的交互演示，效果如图6-4所示。 图6-4 登录模块界面交互效果图6.2.2 首页模块界面交互实现首页部分主要包括：最新、热门两部分的内容和左上角的个人中心的内容，我们选用一个内容进行交互展示，将一个内容链接到相关的页面，点击选中的区域即可跳转到要链接的页面，我们这边点击蛋羹这一部分内容就会跳转到视频详情页面，首页和详情页之间会进行相互的跳转，在视频详情页面点击查看图文则会跳转到图文详情的页面。上下滑动页面，可以看到有更多的内容展示在用户眼前，当滑到最底端没有内容的时候会出现没有更多的文字提示字样。首页模块界面交互实现效果如图6-5所示。 图6-5 首页模块界面交互效果图6.2.3 发现模块界面交互实现发现页主要包括今日热门、猜你喜欢、热门话题等内容，我们选用一个内容进行交互展示，将一个内容链接到相关的页面，点击选中的区域即可跳转到要链接的页面，我们这边选中美物市集这一部分内容就会跳转到商品页面，在酒品页面选中一款商品转到购买的页面，如图6-6所示。 图6-6 发现模块界面交互效果图7. 结论时代的不断进步给技术创新带来新媒体事物，为UI设计做出了引领作用，国内的技术得到不断创新，使得各个领域的设计都得到进一步的提升，然而技术的创新并不能作为决定力量，同样还应兼具艺术上的突破与创新手机应用UI设计的限制性因素很多，在设计用户界面的时候要一定要按照UI设计的基本原则去设计。要遵从一致原则、简单易用性、使用人的语言、清晰易懂、用户习惯、用户体验等方面去设计用户界面。应用UI设计的研究内容还可以有更多的方面，完全不止我现在这里谈到的这一些。而我只能努力的去查阅、去找各种相关的资料，然后再结合自己平时在的应用UI的工作经验去概括出这些用户界面设计的基本的方法。本文通过研究UI设计的相关理论概念，从UI的概念着手，探讨了UI设计的重要性以及界面设计视觉的基本原则，以制作美食App用户界面为例，通过对用户界面设计视觉传达效果的一些分析，来说明用良好的视觉手法去做出一款界面设计是十分重要的，这样就可以对以后的用户界面设计提供更好的一些的设计理论。在这最后这样一款美食应用UI案例进行了一些分析，阐述了自己对于手机应用UI设计的心得与感悟，希望能帮助广大手机应用UI设计者体会到视觉传达艺术的意义，在掌握技术的前提下，在平面设计中表现视觉传达的艺术，创作出精美实用的手机应用我没有对很多使用群体做过用户调查，因为感觉有时候利用自己的一些主观感受去做设计能够给用户带来跟多意想不到的惊喜，能够让界面设计更有个性，从而朝更加有个性的方向去深入。在以后的学习和研究中我会更加深入的研究这部分内容，希望能够为手机应用UI设计的发展做出小小的贡献。设计出来的东西，应该让所有人都可以去拥有它，换句话说，就是能够让人去使用的。这既是设计的一种价值所，也是设计的一种责任所在。我们要坚持用这样的态度去用心对待任何一个小小的细节，更好的去为我们的用户群体服务，让我们设计出来的产品在“可以使用、容易上手、体验惊喜”的过程中持续不断地朝着前方发展。致谢在撰写本毕业论文的过程中，应用到了我所学过的文化知识和技术能力。行走在人生的这条道路上总是会遇到各种各样的艰难险阻，会出现痛苦、悲伤以及各种无奈，会面临着非常多所不能忍受的，可能这就是我们口中所说的生活吧。但是在日常生活中依然会存在着极其多美好的事物，可能有的时候发现它原