《UI设计项目教程（AI助创 微课版）》课件 项目五 App界面设计

项目5App界面设计UI设计项目教程（AI助创微课版）高等院校艺术设计精品系列教材CONTENTS5.15.2App界面设计规范和要求5.3常见App界面类型5.4实践训练App界面的构成与布局5.1.1图标的概念标签栏也被称为底部导航栏，位于App界面的底部，用于在不同的界面间进行切换。导航栏位于App界面顶部，一般用于显示当前界面的核心信息，以及放置一些重要的、全局性的功能入口，如搜索框，便于用户快速查找所需的内容。内容区域位于导航栏下方，是App界面的主要区域，在设计内容区域时可以根据App的具体内容进行合理安排。内容区域标签栏导航栏5.1.2

App界面布局形式1．列表式布局列表式布局是指将信息以垂直列表的形式排列。由于手机屏幕的大小有限，因此设计师在设计App界面时多采用列表式布局的形式显示信息。列表式布局的特点在于能够在较小的屏幕中有条理地显示多条信息，视觉上整齐、美观，视觉流线从上向下，浏览便捷，用户接受度很高，而且列表长度没有限制，用户可以上下滑动界面以查看更多内容。5.1.2

App界面布局形式2．卡片式布局卡片式布局是指将内容封装在一个个独立的容器中，像一张张卡片。卡片式布局的表现形式非常灵活，且视觉吸引力强，其主要特点在于信息聚合性好，可以将相关内容集合在一起，而且每张卡片的内容和形式都相互独立，互不干扰，信息丰富。常见的卡片式布局有单栏卡片式布局、双栏卡片式布局和多栏卡片式布局3种形式。01单栏卡片式布局02双栏卡片式布局03多栏卡片式布局5.1.2

App界面布局形式3．标签式布局标签式布局又称为网格式布局，是指将App的核心功能模块以一系列图标加文字的形式排列在界面中。标签式布局一般用于展示重要功能的快捷入口，具有很好的视觉层级，也方便用户快速查找。需要注意的是，过多的标签会让界面显得太过杂乱，因此同类型、同层级标签需要保持风格及细节上的统一，一屏横排最多只能放置5个标签，超过5个则需要左右滑动，并且文字标题不宜过长。4．瀑布流布局瀑布流布局是指界面中的内容以宽度相同但高度不同的形。式，像瀑布一样垂直交错排列，使界面产生错落的视觉效果。这种布局方式让内容高度连贯、无缝衔接，能较大程度地吸引用户的注意力，使用户高效地浏览图片或短视频等内容。瀑布流布局App界面的吸引力很大程度上取决于视觉内容的质量，因此在设计时需确保图片清晰、比例协调，并且对图片进行统一处理，以增强整体性。5.1.2

App界面布局形式5．沉浸式布局沉浸式布局是指通过较大程度地减少界面中的视觉干扰元素，让用户的注意力完全聚焦于内容本身，从而提高沉浸感。使用这种布局形式时，可用大图或视频填充整个界面，UI元素被极度简化，或在用户不需要时自动隐藏，以最大化内容展示区域，用直观的手势操作替代传统的点击操作。5.1.3App界面布局规范边距指屏幕边缘与界面内容之间的距离，它定义了整个App界面布局的“安全区”，App中的界面都应该以此来进行规范，以实现界面整体视觉效果的统一。在实际应用中应该根据不同的产品风格采用不同的边距，常用的边距有16px、20px、24px、30px、32px、48px等，也可以不留边距，让用户将注意力集中在内容本身。1．边距间距指界面中各个元素之间的空白区域，如两个按钮之间的距离、图片与标题之间的距离、列表与列表之间的距离。间距需要根据界面的风格以及承载信息的多少来确定，通常不小于16px，间距太小会使用户产生紧张的情绪，间距太大会让界面变得松散，常用的间距有16px、20px、24px、30px、40px。2．间距CONTENTS5.15.2App界面设计规范和要求5.3常见App界面类型5.4实践训练App界面的构成与布局5.2.1App界面尺寸规范1．iOS界面尺寸规范2．Android界面尺寸规范Android界面尺寸众多，在设计时不需要根据每个屏幕进行适配，设计师一般会选择以360dp固定宽度作为横向基准，并采用响应式布局来确保界面能够适配各种手机屏幕尺寸。纵向尺寸方面，传统16:9屏幕对应640dp，而全面屏时代的主流比例则扩展至780dp，甚至更高。iOS界面尺寸以pt为逻辑单位，以适配不同分辨率的屏幕。设计时，通常以375pt×812pt、393pt×852pt、402pt×874pt等逻辑尺寸为基准。5.2.2App界面设计要求App界面是一个完整的整体，因此所有内容必须由内而外地统一、协调，色彩、图案、形态、布局等应与App的功能和主题相呼应，使界面中的每一个部分都能明确传达App的主旨。●

明确传达主旨12App界面设计可根据内容的主次，将信息分为不同的层级，当用户点击某层级信息时，将自动跳转到对应层级中，方便用户查看。●

清晰地展现信息层级34在设计App界面时要考虑App的使用特点，尽量减少按键数量，使用户操作更加方便、流畅，以提升使用效率，保证用户获得良好的使用体验。●

保证功能的合理性App界面不但内容要表达明确，而且要具备美观性，在设计时可通过合理搭配图像、形状和颜色来提升整个App界面的美观度。●

具备美观性CONTENTS5.15.2App界面设计规范和要求5.3常见App界面类型5.4实践训练App界面的构成与布局5.3.1闪屏页闪屏页又称启动页，是用户点击应用图标后出现的第一个界面，显示时间通常为2~3s，能在极短的时间内吸引用户的视线。闪屏页根据呈现的内容又可以分为以下3种类型。常用界面组成包括品牌Logo、软件名称和广告语，旨在树立品牌在用户心中的形象，提升品牌识别度。品牌宣传型常用界面组成包括品牌Logo和节日插画，通过营造节日氛围，传递品牌对用户的关怀，建立情感连接，拉近与用户的距离。节日关怀型常用界面组成包括图像、活动主题和活动时间，旨在为特定活动引流和造势。活动推广型5.3.2引导页引导页是用户第一次使用或更新App后，出现的3~5个界面，用于帮助用户快速了解App的主要价值、功能或更新后增加的内容，起引导作用。引导页根据呈现的内容可以分为情感代入型、搞笑型和功能介绍型。这类引导页通常会描绘一种愿景、生活方式或解决某种情感问题的方法，让用户产生“这就是我需要的”的感觉，侧重于与用户建立情感连接和形成共鸣。●

情感代入型这类引导页旨在通过幽默、俏皮、无厘头的方式吸引用户，让用户会心一笑，留下轻松、有趣、与众不同的第一印象，增加好感度和记忆点。●

搞笑型这是较常见和直接的一种引导页，可以清晰、高效地告知用户产品的核心功能与价值。●

功能介绍型5.3.3首页首页又称起始页，是用户正式开始使用App时出现的第一个界面，起到集中展示核心功能、内容分类、引导用户进行关键操作的作用。好的首页能让用户快速了解App的用途，并快速地找到所需功能。设计App首页时，首先需确定App的类别，再根据目标用户群体和App品牌调性确定界面色彩方案和设计风格，其次需将首页划分为不同的模块，且每个模块都有明确的功能和布局。5.3.4详情页详情页是指用户从信息列表页或概览页点击进入的，用于展示单个项目完整信息、功能与操作的独立界面，也是用户获取信息的关键界面。详情页的类型多样，常见的详情页包括电商商品详情页、内容/文章详情页、用户信息介绍详情页、酒店/旅游产品详情页等。详情页多以图文结合的方式进行展现，用户只需上下滑动屏幕即可浏览内容。设计详情页时，首先明确详情页要展示的核心内容和主题，如商品、文章、用户、酒店，接着确定关键信息元素，如标题、描述文字、相关图片等，然后规划其界面布局，明确引导用户执行核心操作，如加入购物车、立即购买、关注、收藏、分享等，再考虑界面的整体视觉风格，是否符合App整体的设计规范。5.3.5个人中心页个人中心页又称“我的”界面，是承载用户个人资料的界面，主要由信息区和内容区组成。●

信息区●

内容区内容区用于承载用户常访问的功能和内容，例如提供“我的收藏”“收货地址”“客户服务”“会员中心”

等常见入口，以及“待支付”“待收货”“待评价”等状态标签，并常带有角标以提示数量。信息区用于展示用户的头像、昵称、个性签名、个人简介、会员等级、资产概览等关键信息。5.3.6注册登录页注册登录页是App的必备界面，用于注册、登录个人账户，以此让用户成为App的正式用户，并开始使用App的主要功能。注册登录页通常有3种布局方式。12一是将注册和登录明确分为两个界面，这种布局方式的操作流程比较清晰，用户意图明确，不易混淆，但在注册和登录界面间切换需要跳转；二是在界面中同时提供注册和登录功能，主要通过切换选项卡实现，这种布局方式无须加载新界面；三是将注册登录页设计为弹出层形式，当用户执行需要身份验证的操作时弹出对话框，注册或登录后直接返回原界面。35.3.6注册登录页设计注册登录页时需要设计以下关键模块。表单输入区是注册登录页的核心，包含登录表单和注册表单两种。表单输入区操作区主要包含“登录”“注册”等主要操作按钮。操作区第三方登录区可以大幅降低注册登录门槛，提升转化率，通常位于主要操作按钮下方，主要含一些图标按钮，如微信登录、QQ登录、微博登录等。第三方登录区【案例】设计美食App首页1．案例背景随着生活节奏加快，越来越多的年轻人选择通过外卖App解决日常饮食问题。某公司计划推出一款名为“食刻”的美食App，现需要使用Photoshop设计该App首页的高保真原型图，要求界面视觉冲击力强、信息层级清晰，并充分体现产品的调性，为其他界面的设计提供精确的视觉参考。2．设计思路主色选用能激发食欲的暖色系，搭配中性色，以保证内容的可读性。色彩搭配01内容布局04字体规范02整体风格03选择“思源黑体CN”为App界面的主要字体，并通过设置不同文字颜色区分文字信息，方便识别。整体风格应干净、清爽，使用大量高质量的美食图片来营造氛围。采用标签式布局和卡片式布局，界面顶部为状态栏，界面上方为导航栏，展示定位与搜索框，满足用户首要的查找需求；内容区域包含分类区域和内容推荐区域两个核心模块；标签栏包括首页、发现、订单、我的4个界面入口。【案例】设计美食App首页3．操作提示（1）创建参考线。（2）制作状态栏和背景。（3）制作导航栏。（4）制作分类区域。（5）制作内容推荐区域。（6）制作标签栏区域。【案例】设计美食App详情页1．案例背景完成“食刻”App的首页设计后，便进入详情页的设计阶段，该界面是用户决定是否下单或前往餐厅的最终决策界面，其信息密度高、交互元素多，设计质量直接关系到核心业务的用户转化率。本案例要求界面中包含餐厅信息、菜品展示信息与促销活动，并引导用户完成下单操作。2．设计思路主色与首页一致，使用红色重点强调新菜品、价格和营业时间，吸引

用户的注意力。色彩选择选择“思源黑体CN”为App界面主要字体，保持界面间的统一性。字体规范界面中包含“结算”“加入购物车”图标和按钮，以引导用户操作。交互设计整体采用列表式布局和卡片式布局，餐厅环境视频以及名称、营业时间和地址等信息放置在顶部，方便用户快速获取关键信息；导航栏提供团购、菜品、点餐和评价的快捷入口；促销Banner展示推荐菜品；菜品信息区通过图片和文字结合的方式展示菜品信息；界面底部为结算区，含价格信息和“结算”按钮，方便用户在选择菜品后进行结算。内容布局【案例】设计美食App详情页3．操作提示（1）创建参考线。（2）制作界面顶部。（3）制作导航栏。（4）制作促销Banner。（5）制作菜品信息区。（6）制作结算区。（7）保存文件。AIGC赋能设计

使用MasterGoAI生成App界面MasterGo（莫高设计）是一款专业的UI设计工具，提供界面设计、交互原型、设计系统及团队协作功能，支持Figma文件导入与实时云端协作。MasterGoAI是MasterGo提供的一款基于AI技术的智能助手，它能够根据简单的文字描述快速生成高质量的App界面，极大地提升UI设计的效率与便捷性。CONTENTS5.15.2App界面设计规范和要求5.3常见App界面类型5.4实践训练App界面的构成与布局设计教育App界面1．任务背景“