【基于Android的校园餐厅食谱管理APP的界面设计11000字（论文）】

基于Android的校园餐厅食谱管理APP的界面设计摘要：UI的界面设计是对用户和计算机交互、操作逻辑顺序和界面美观的APP进行整体设计。一般来说互联网上的产品实现主要分为了5个阶段，以职业技能划分为：产品、交互、UI、开发、测试。界面设计的需求、整体交互的组织架构、UI决定APP的风格、管理APP的实际应用、界面完成的性能要求检测后投放到开发中，而界面设计恰好正位于APP实现过程的中间。UI是交互的外现，交互是UI的内撑，就如皮肤和骨架的关系，交互的整体界面布局决定了UI的思考设计方向。在校园餐厅食谱管理APP界面的设计过程中，界面设计在原型图上使用了Axure的模式图形化结构，在文字和图形结合展示中利用了Photoshop和Illustrator相关软件进行了详细的设计。关键词：Android餐厅食谱管理界面设计目录TOC\o"1-3"\h\u第1章绪论 页共22页前言UI设计每天都在变化，但变化的背后是设计师对美观和易用性的追求。在用户体验的不断研究中，许多复杂的案例都被浓缩成简洁的设计原则供我们使用。LawsofuxUX原则就是其中的例子，它们已经经过了测试和更新。UI设计是指用户和计算机软件、界面或服务之间的一种交流。交互设计师可以称为行为塑造者，形成一个完整的对话机制，用户之间可以相互说话和回应，从而形成一种习惯。这样，用户和计算机软件就会变得相当配合，让APP成为R日常生活中必不可少的一部分。交互设计想要最后到达的地步是从以用户为主角的角度去考虑APP的利用率和体验感有多舒适，从而在APP界面和用户两者之间形成精益求精、持续性久、一目了然的交流。界面设计的规范化是非常重要的，因为界面是用户认知APP的必需品。该标准实际上是构建“用户-计算机-用户”设计途径的标准之一。标准化的界面形式还可以减少用户的认知负担和培训成本。我们的一日三餐就是能够让我们每以天做各种各样的事情的能量来源。食物的品质样貌直接影响到人们的心情和状态，甚至一天的工作和生活。难怪食物总是一个热门话题。人们在日常生活中经常使用手机端来选择更好的餐厅，订购更好的食品，或寻找更健康的食谱来为我们的添加捷径。食品和技术一直密切相关。考虑到食谱是整个交互设计界面过程中重中之重的一部分，最后界面设计中决定平衡逻辑和情感的是希望在可用性、导航性和视觉美学之间找到平衡。然后食谱卡用了列表形式来展示，你可以在屏幕上显示尽可能多的内容。一套完美的APP界面设计，可以让用户的体验升华，可以把手机变成服务员。美观的界面设计让普通的食物变得不再普通，当用户打开软件时看到完美的界面也会直接影响用户选择美食的概率，也直接决定了用户是否会再一次用这个软件。我设计的这款校园餐厅食谱管理APP的界面规范整齐，触摸键适合，内容也相当舒适，所以我觉得这套APP界面设计可以施以利用。绪论APP的界面设计论文总共分为五章，主要组织框架如下：本文第一章主要研究内容包括了设计的相关研究成果和研究背景以及意义，对国内外的UI界面相关设计研究成果情况进行了一个长期总结性的研究分析。本文第二章主要介绍了界面设计使用的关键技术和相关理论知识点，主要对Axure的原型图设计技术、图形化以及文字的设计技术Photoshop和Illustrator等做了相关的介绍，为后文的设计做铺垫。本文第三章主要介绍了界面设计的所有需求分析，从界面设计功能、用户需求、界面设计可行性等方面进行了分析。本文第四章是界面的设计重点，从界面的整体结构、管理员模块设计、首页模块设计、食物库存管理模块设计、用户管理模块设计以及消息模块设计等几方面进行了详细介绍。本文的第五章是界面的设计规范知识点，从设计规范意义、注意事项、设计规范内容和通用控件整理几方面进行了介绍。1.1论文研究背景及意义1.1.1研究背景APP的界面设计必须具有操作简单、功能齐全、可扩展性好等特点。产品设计过程是一个从产品抽象概念到具体产品形象的处理过程，通过使用文字或其他图像形式来准确表现我们所需要策划的一个产品客户需求。它将一个产品的实际所需使用目的或实际需求过程转化成更为具体的一种物理工具操作过程，并通过具体的实际操作以理想的表达形式用来表达其在计划、规划上的思想和运用问题实际解决上的方法。因为企业产品设计第一阶段就需要最终确定企业产品的整个总体设计战略、外观、结构和主要功能，从而最终确定整个企业产品的整体布局，所以整个产品设计的总体意义当然是重要的，具有“引领全局”的重要技术意义。如果一个好的产品设计过程缺乏具体的和形象的信息表达，就可能会不断消耗大量的物力资源和大量人力成本来不断调整用户需求。相反，好的企业产品设计不仅可以表现在产品功能上的一种优越性，而且在实际执行时也更便于他人理解，从而提高产品研发的效率。1.1.2研究目的及意义我们在平常会用到很多软件，一个软件的界面好不好看很大程度上影响了我们对它的喜爱程度。撇去功能不说，好看的软件打开之后能让用户有赏心悦目的感觉。颜值就是战斗力——法国达索战斗机公司的创始人达索也说过几乎相同的观点：“漂亮的飞机就是好飞机”，其实这句话对很多大部分互联网产品同样适用。一般情况下，系统的外观只能作为一种体验感受的判断方式，而APP的用户界面（UserInterface）的使用感受和能留下的记忆，是能够决定我们是否喜欢这个APP的关键。在APP的界面设计上，简单并不是盲目追求形式上的简单，而是复杂的升华，是充满人情味的精简设计。从功能上来看，极简主义风格APP的设计具有高度可识别性和较好的人机互动性。从美学角度上看，极简主义风格设计符合当今社会的审美需求。1.2国内外研究现状及趋势从18世纪的工业革命到19世纪的电气化，再到20世纪末的信息化发展，设计呈现出了不同的风格。在工艺美术运动时期，追求浪漫的设计理念，而包豪斯时代注重功能主义，现在在互联网浪潮中，设计注重用户的每一种感官体验。如今的“互联网产品设计”已经成为当今时代的宠儿，设计从实现工具、合作方式、载体媒体都发生了革命性的变化。设计无论如何发展，都离不开商业、技术和用户。随着UI设计的发展，标准逐渐趋于稳定，现阶段主流的UI是手机等小屏幕。UI设计的问题比前几年少了很多。UI渲染不一定漂亮，但大多数都很舒适。交互和UI是设计的深层细分，未来的设计需要突破专业瓶颈。突破岗哨之间的壁垒是唯一的选择。“用户体验设计”已经成为未来的发展方向。它不仅可以从产品的角度讨论商业策略，也可以从设计的角度考虑美学，从发展的角度评估需求的可实现性。它是一种复合型职位，可以解决极其复杂的问题。相关技术介绍本章主要对界面的设计所需要的相关技术做了详细的介绍，对每一款设计软件都有进行基本知识点概括、软件的组成部分、相关操作的快捷方法以及对功能做了简单介绍，为后边的设计工作进行了铺垫。2.1Axure技术2.1.1AxureRP9界面介绍AxureRP9的整体设计界面风格更加清新明亮，比老版本舒适多了，这种设计风格的不断变化更好地符合当前主流企业软件应用界面风格的发展趋势。如果你用一个新的词组字来为它构成新版的用户界面风格,我们会认为：“简化”一词是非常合适的。事实上，除了系统界面风格的巨大改变，“去繁化简”也真实反映了系统AxureRP9功能结构布局的巨大变化。在这个最新版本中，不常用的压缩功能通常同时会进行收缩和暂时隐藏。我还是相信我的很多手机朋友和我一样会慢慢发现一些旧版本的一些全新功能在一个新开始可能是根本找不到的。正如我在这次分享之前给你介绍的，这种心态改变方式正是你常常需要自己花很多时间精力去慢慢适应的。2.1.2负坐标功能特性介绍事实上，大多数国内主流专业设计应用软件都是具有负角度坐标的设计功能，让专业用户完全可以从更广阔的设计角度出发来正确看待自己的专业设计软件内容。我个人认为这种方式改变并非也不是一件坏事，只要你自己愿意再多花一点点的时间精力去慢慢适应。如果你在设计时需要编辑到的区域位置处于一个负责零坐标点的位置，可以通过点击当时编辑位置区域左上右下角的“返回原点”图标，快速自动返回0坐标点的位置。同时，还让你可以通过快捷栏右键“Ctrl+9”快速进行返回。此外，建议你还是要记得下面的两个常见的快捷按钮组合第一键是用来快速查看的你在内容编辑设计中的区域或需要移动的字体位置迅速，然后按住c和ctrl键来反复上下左右滚动你的鼠标滚轮即可放大和缩小编辑设计区域的字体大小，然后按住c和空格组合键并上下移动你的鼠标，快速即可移动内容编辑设计区。2.1.3交互编辑功能优化交互式编辑是Axure中最常用的功能之一。此功能在新版本中进行了优化，在版本转换过程中需要时间来适应相应的变化。除了初始控制面板的任何改变，AxureRP9中用于添加交互的文件方式也并没有所谓的不同。点击所有添加交互设置按钮后，可以直接在控制面板中的区域直接完成所有相关交互设置。在AxureRP8中可能需要在此时弹出的交互模式编辑器窗口中手动设置它，这个交互函数进行优化的主要操作目的当然是为了减少系统操作步骤过程当中的添加交互，但是因为这种交互系统面板操作区域的事件空间很小，它不是很便于管理，当然还有很多相同的系统组件的交互面板事件，特别在它是对于老系统用户的相适应的新旧版本的操作方法。2.1.4编辑模式切换优化在AxureRP9中改进了基于动态控制面板和自动中继器的自动编辑处理模式。进入网页编辑显示模式后，将一直保持在当前浏览页面，其他网页内容将以半透明的显示方式进行显示。这样的技术改进不仅可以大大提高文件编辑器的效率，也更方便用户预览每次修改后的效果。2.1.5元件样式编辑优化AxureRP9提供了更丰富的大型设计组件交互活动样式设计视觉效果编辑组件实现过程功能，使得一些大型设计组件交互活动样式设计视觉效果的组件编辑过程实现更加方便，可以直接编辑输出一些目前具有很多更好交互样式视觉效果的交互样式设计组件原型。2.2界面设计技术2.2.1Photoshop技术Photoshop由公司Adobesystems公司开发和制作发行的用于进行图形图像信息处理的应用软件。优点：绘制或处理后的图像色彩鲜艳，形象生动，能给观看者带来良好的视觉效果。色彩的原理：是光、眼、脑和视神经的综合产物。2.2.2Illustrator技术Illustrator它是美国Adobe公司软件制作的重量级在线矢量图形绘图应用软件。它主要是用于出版、多媒体和社交网络编辑图像的一个行业标准化的插图编辑软件。Illustrator软件集成了各种矢量格式插图，布局格式设计，位图格式编辑，图形格式编辑和其他绘图处理工具。广泛应用于企业广告网站平面设计、ci文案策划、网页文案设计、插画文案创作、产品包装文案设计、商标设计等多个领域。据不完全调查统计，全球97%的视觉设计师正在尝试使用photoshop和插画设计软件等来进行视觉艺术设计。矢量图有时又称之为向量映射图，矢量二维图形模型中的两个图形对象元素(点和点的线)也被称为图形对象。每个屏幕对象都必须是独立的，具有屏幕大小、方向、轮廓、颜色和显示屏幕内部位置等多种属性。特点：这些矢量文字图形文件可以快速再现清晰的图形轮廓，线条非常平滑，并且还具有良好的可伸缩性，这些矢量图形文件可以任意进行缩小、放大、扭曲、变色，无需担心图像会产生锯齿状、空间损失小，易于修改。缺点：画面不真实，不生动，色彩不丰富。它不能像画一样再现世界的风景。 Illustrator制作的矢量图像可以用Photoshop直接打开，背景是透明的。位图技术又称栅格点阵图、像素点位图或简称栅格点位图。图像像素是由直角正方形四个像素(光栅)依次排列而来组成，这与每个图像的像素分辨率大小有关。单位像素面积内的像素总数越多，分辨率就会越高,图像显示效果也会越好。位图的时间单位：像素(pixel)。特点：自动位图色彩图像系统善于自动再现微妙的物体色彩变化层次，能自动产生物体色彩和空间亮度大而变化丰富的色彩图像，能逼真化地再现真实世界。缺点：压缩文件庞大，不能随意移动伸缩。适合印刷和数字输出的准确性受到限制。APP界面设计的需求分析由于目前关于饮食界面这个领域的发展比较迅速，因此，有许多媒体和书本关于如何针对饮食制定的流程进行了研发和介绍。在具体饮食界面的设计过程中，需要针对餐厅食谱的各个功能模块的特点以及性能展开分析。当前许多食谱或者是饮食计划都只是一些文字描述或者是图片展示，不具备与用户互动的功能，往往通过一段既定的文字或者是一组既定的图片来了解食谱相关的内容。因此在本文的餐厅食谱界面的设计中需要利用移动设备来设计一套成型有效的界面，在当前的网络时代来开发适合用户的各种先进的餐厅食谱管理界面。3.1用户需求分析用户管理模块的基础功能主要包括用户个人管理、食品库存。其中，在用户个人信息管理中，可以对个人信息进行修改，也可以对过去收到的信息进行查询。在购买食品产品时，交易可以通过扫码直接购买的形式完成，也可以通过订购的形式完成。在充值赠送的过程中，顾客可以提高服务质量，留下自己相对于餐厅的话语，完成用户与餐厅之间的互动。3.1.1用户登录注册只有通过注册输入用户密码才能注册使用该服务平台。注册成功后，可以自动设置自己唯一的注册用户名和个人头像，登录错误用户名后可以在一个工作月内自动重新登录。用户同时可以自由选择是否绑定个人银行卡。3.1.2食谱管理打开后，你可以看到所有的菜肴的业务。这个产品的定货量从高到低，一些特色产品也会有更多的选择(如辣、冰等)。3.1.3订单系统当用户选择他想要的菜时，系统会通过点击确认生成一份订单。订单除了列出用户选择的菜品外，还会计算用户在全额折扣后为所有菜品实际需要支付的金额，这样用户就可以决定是否选择付款。3.1.4后台管理管理员用户可以对所有菜单内容进行随时添加、删除和随时修改，如随时更改新的菜单内容图片、价格、菜单内容描述、更换新鲜的产品、添加新鲜的菜品等。当用户下订单时，由管理员确认并交给商家。3.2管理员需求分析管理员功能模块的核心功能主要包括三个主要核心功能：食品信息管理、订单信息管理和企业用户个人信息记录管理。其中，在个人菜品订单管理中,可以对多个菜品订单信息同时进行订单添加、修改和订单查询。在个人订单信息管理中，可以通过三种操作方式同时进行订单管理：未订和确认、已确认和已订购。您还现在可以随时查看所有会员订单详细信息，在您的会员订单信息登录管理中，可以随时添加您的用户订单信息，修改您的用户订单信息，方便客户在线订餐，享受优惠待遇。3.3食谱管理需求分析食谱管理功能是用户对食谱的各种操作。已有食谱名称、食谱图片和食谱中各菜肴的浏览，食谱名称、食谱图片和菜肴的添加、删除和修改，食谱的查询功能。3.4界面设计可行性需求分析页面有很多选项包括餐厅信息、菜品、会员信息都可以通过点击鼠标完成。此外，跟踪操作提示信息还真的可以便于让手机用户随时随地了解自己的实际操作。图形用户的界面促使产品与人的交互更加亲密，通过图形、颜色、版面来表现产品的图形用户界面。APP界面设计本章是APP界面的设计部分，根据餐厅食谱的需求分析设计了界面的功能模块。由于首页的内容区域在设计界面中有着很重要的作用，因此首页的内容区域相对于其他功能设计时间较多一些，这样就基本上实现了APP界面设计的完整性。4.1整体结构依据上一章中对APP界面的功能需求的分析，根据界面布局设计的要求，采用集中式、模块化的方式对APP界面的功能进行了设计，该APP界面设计需要完成的主要功能包括：管理员模块设计、首页模块设计、食物库存管理模块设计、用户管理模块设计以及消息模块设计五个部分。APP界面设计的整体功能结构如图所示。图4.1整体功能图4.2管理模块设计此设计模块主要是针对企业员工以及其他相关企业管理人员进行建立的，然后我们就设计了他的姓名、性别、身份证号、基本工资、入职截止日期、这个模块只有管理人员可以看到，而且可以对后续的工作人员进行增加、删除以及修改信息。图4.2管理-赠送方式图4.3管理-人员档案4.3首页模块设计首页是最繁琐的一个环节，也是功能最多的一个模块。顶部有操作栏（也就是我们最常见到的搜索框），中间部分是首页的内容区域模块，包含了收银（首先可以搜索此客户是不是会员，然后再对其进行相应的价格折扣付款）、快餐（有两个模块：第一个模块是订单模块，管理人员可以查看全部订单。未支付的订单以及完成的订单；第二部分是点餐功能模块，可以根据时间进行选择，早上的食谱都在营养早餐类，中午可以选择快餐便当，晚上选择小吃夜宵，还有甜点饮品。这样就可以节省很多时间去选择）、库存（这个模块包括对供货商的管理、货商的价格表、我的仓库三个部分进行设计）、客户管理（里边设计了两个功能：一个是对会员的管理，可以添加或者查询，其次是对充值赠送项目进行设计，可以选择充值的金额，也可以选择赠送的方式）、扫码点餐（只显示商家收款码）几个部分。最后页面底部展示APP的导航栏（首页、消息、管理、我的），这个模块整体就是这些内容。图4.4首页-收银图4.5首页-点餐图4.6首页-订单管理图4.7首页-商品价格表图4.8首页-我的仓库图4.9首页-我的仓库-无添加4.4用户管理模块设计这个模块是对用户的管理，首先每一款软件都会设计的一个模块登录/注册，这个部分我添加了一个店铺管理，对用户的店铺信息进行登记。然后就是注册再登录。账户信息是可以看到自己的信息，然后就是可以修改当时注册的密码以及手机号。还有我的资产、统计报表、体现以及银行卡几个功能。图4.10首页-客户管理图4.11首页-客户管理-添加图4.12登录界面图4.13我的图4.14修改资料图4.15我的资产4.5消息模块设计消息模块是对员工和会员发布的公告，管理员可以编辑公告，也可以看到发布的全部公告，并且员工和会员都可以给管理员发消息，这个时候在与我相关里便可以看到，所以我还设计了未读功能来提醒管理员。图4.16消息图4.17消息-发表评论图4.18消息-发表消息图4.19消息-消息详情图4.20消息-员工公告APP界面设计规范本章内容是对APP界面设计的一些常规规范和要求，也是我在这次写论文的过程中掌握的知识点。对APP整个项目所涉及到的基本知识都做了总结，为以后每一次设计打好铺垫。5.1设计规范意义解决控制混乱的问题时，许多人合作：在设计其他页面创建阶段，如果没有规范指导，很容易产生细微的差别在设计过程中，在每个控制导致细微的差别，和控制不一致通常发生在这样做。如果你一直努力追赶页面，你就找不到这些问题，你做的页面越多，你犯的错误就越多，这将大大增加返工率。解决在产品迭代中品牌形象会被扭曲的问题：在产品迭代的过程中，往往是几个功能有更多迭代的小版本。如果没有规格说明，在多次迭代的过程中会忘记最初的设计意图，混淆产品控制，导致品牌形象走样。规范可以维护产品特性，提高用户认知度，不同程度地有效改善用户体验。5.2五大注意事项产品标准改版的发展节奏与趋势视觉设计标准的迭级换代过程有两种常见情况：一种就是产品受原视觉标准老传统风格的严重束缚严格要求遵循原有的标准，长期时间来看可能会出现导致产品视觉标准风格过时的巨大问题。第二，修订时仅仅采用了新的一种视觉设计风格，没有及时将其总结成设计标准。这样一来，品牌形象就可能会被严重扭曲，树立标准的时间就会出现。如果在作品创作初期就已经做了视觉设计规范，视觉设计风格还没有完全形成，在新的视觉设计风格得到定位之后，就可能会开始颠覆和重复创做之前的所有视觉设计规范，造成不必要的返工。如果没有设计规范的指导，通常很难保持视觉的统一性。此时，将一个页面设计交给多个程序员，但同一系统控件在每个程序页面设计中的工作表现方式风格不同、混乱、不协调的同一控件数据库会直接给整个程序员工作带来麻烦，从而严重影响软件开发进度。因此，最好的时机是在完成风格定位后进行规范，这样才能前后衔接，高效的完成工作。规范不能太饱和，因为有时会生成新页面。如果硬性100%遵循规范，视觉效果不好。如果把设计规范完全放在一边，那么以前过于全面的规范就毫无用处了。可见，过于全面的规格会影响设计者的性能，这不是一件好事。因此，在对规范进行整理时，应该只对控件、颜色值、纹理、动态效果、品牌元素等重要界面进行规范设置。规则应该是灵活的：28原则只能用于标准化80%的产品通用接口。这里，80%和20%其实是相对的两个概念。80%灰色表示没有颜色、按钮、字体、间距等重要信息内容，需要详细说明。另外，20%可能意味着某些应用控件本身不可能被重用且不重要。这个20%的技术含量不一定需要直接写进产品规格这28原则就是要求你的设计师根据你的具体情况可以做出更合适的方案设计。规范应该有迭代：在整个产品迭级换代的整个过程中，需要对旧的产品规范需要进行及时更新和不断优化，对坏的、过时的产品规范则需要及时进行汇总，并及时邮件通知产品项目组的相关技术人员。标准应该有执行权：首先，对规范的主要内容分别进行了具体性的说明，并分别对各个核心软件模块功能进行了详细性的说明。例如，在色彩颜色显示模块中，有对每个主色的详细描述，但可能缺少一些辅助色。在滑动按钮显示模块中，有对应的滑动、点击、不点击状态的描述。没有任何核心内容的引导规范，没有任何参考价值，规范的引导作用几乎基本为零。第二，说明书不能太全面、太死板、太繁琐,会限制后续设计。否则，它会给你造成三个基本方面的不良影响，即使它会给你增加很多不必要的设计工作处理时间和用来重新制定这个规范。其次，设计师和应用程序员可能需要经常花费大量的工作时间和大量精力需要去重新查看不重要的规范内容，这就增加了很多负担。第三，设计不是绝对的一个东西，它仅仅需要20%的灵活存储空间。否则，如果稍后我们遇到的新页面并将这些规范严格要求应用于你的新页面，那么显示效果就有可能不好。5.3设计规范内容原则1:首先定义最重要的，然后向上和向下展开。无论是颜色、字体、间距，都应该先设置最常用的参数，会使规范更加稳定和清晰。原则2:避免类似参数当两个参数肉眼难以分辨时，无需在同一水平上进行区分。同时会导致混菜的延伸，增加工作量，力求统一快捷。颜色：主色一般分为主色和辅助色，一般用于主按钮、文字、顶栏等。副色是无色感的基本色，一般用于背景、列表和框控件。在标记颜色时，建议采用在方框上书写文字的方式，这样设计师就可以直接吸收颜色——应举例说明一些比较合适的颜色，如右图中的背景色和底栏色。.字体和大小：一般来说，标准中最好只有一种字体，而且不要超过两种。还有一些其他的特殊字体，可以特别解释一下。最广泛使用的字体大小是定义为中等大小，其次是大尺寸和小尺寸。如果再细分为超大号、超大号、小号等，字体大小不宜超过5。字的颜色：字颜色一般分为强调字颜色和内容字颜色，强调字颜色一般是应用品牌颜色。一般来说，内容词的颜色最清晰，其次是次要内容的颜色，如人名、子标签等，然后是次要内容，如时间、输入框占位字符等。除反白色外，一般字色不应超过5。间距：统一的空间管理，可以让界面有节奏感，没有散乱感。建议颜色块是用来表达不同的简单的距离，可以直接在界面上，以便设计师可以快速消除块颜色测量——首先，定义最常用的间距，然后定义了一个更广泛的区别间距和根据需要亲密间距较窄等等。一般不超过7种间距。图标：因为APP中的图标一般都是串行图标，所以需要定义两个参数：cutsize和weightsize。Cutsize是为了保证图标的输出尺寸是统一的，便于以后的坐标和程序员实现，weightsize是为了保证视觉尺寸。另外，有些图标有多个状态，需要标记不同状态的颜色。线性图标也需要描边参数。5.4通用控件整理窗口的顶部：在顶部栏中有两种情况，一种是左边的图标，另一种是返回机制。请注意弹出菜单的状态，如果弹出菜单只出现在控件中，则还可以在控件中包含弹出菜单。此外，还可以使用简短的文本来标记控件的状态特征。选项卡：通常选中状态和未选中状态可以同时表示。请注意，可滚动选项卡需要多个状态的表达式。底柱：列出未选择和已选择的状态。如果有提示信息，需要标记提示气泡的状态。另外，右图中的气泡之类的标记只能在顶部标注。由于重复，尽量只需要一个标记，以免在以后的变化中涉及太多的位置，导致遗漏变化。列表：列表一般分为基本类和特殊类。一个是图形属性的高列表，它经常用于主内容界面。另一种是纯文本的短列表，常用于设置选项、个人数据等不重要的界面。一般来说，特殊类别的列表只出现在一个地方，所以没有必要组织。但是，如果它属于一个重要的接口，也可以将它包含在组织好的文件中，以防止在以后的迭代过程中对其他接口产生影响。内容：内容是整个软件的核心，界面的控制是为内容服务的，所以内容页面经常被用作固定样式页面，而文字和间距也是最多样化的。一般有两种情况：简要内容和详细内容。如果附上图片，我们要注意多幅图片和单幅图片的区别。在整理的时候，要注意尽可能多取状态的情况。为了表达多态，我们只需要把状态变化的位置放在描述的旁边。按钮：需要特别注意的一点是，即使每个按钮的宽高不同，按钮整体样式也依然需要统一比如宽高比、笔画、直角、圆角、颜色和数值、文本显示区域、字体、字体的间距等，以便于保证整个按钮整体样式的完整统一。不同鼠标颜色的多键按钮，相同位置鼠标操作状态的按键视觉效果也未必需要十分统一。与目前同级别的关键蓝色和其他绿色关键按钮状态相比，点击按钮状态下的两个关键按钮的颜色亮度大小变化情况应该也都是相对一致的。搜索：对于没有背景的搜索栏，注意标注与其他控件的关系。此外，需要将非输入和输入这两种状态分类。输入框：输入框通常分为两种类型，一种是单一输入框，经常结合工具栏的性能，注意表达工具栏的选定状态。另一种是多线输入框，保证了圆角与单线输入框的统一，提高了用户的识别度。图片：图片包括头部图片、匹配图片、背景图片等，图片大小不宜过小。一般来说，控制在三种以内比较好。注意画面的比例，尽量保持圆角均匀，从而减少方案的压力。如果背景图片有压力层效果，它也应该保持不透明度一致。弹出窗口：同一类型的弹出窗口应保持相同的弹出方式，如通知类型的弹出窗口位于屏幕中间，而选项弹出窗口靠近屏幕的底部，这样可以增强用户的印象，降低学习成本。尽量不要超过三个尺寸。结论校园管理餐厅商家管理服务APP应用的界面主要实现了用于校园管理餐厅服务商家管理用户与在校师生之间交互的一些主要功能模块，包括基本业务管理员功能模块设置功能，首页管理模块功能设计，用