UI设计项目式教程 课件全套 第1-25章 移动UI中的配色方案 - 福建博物馆项目设计

UI设计项目式教程课程介绍案例分析设计流程实战练习1.4移动UI中的配色方案单色邻近色补色对比色移动UI的配色方案UI设计项目式教程课程介绍案例分析设计流程实战练习单色配色可以通过颜色深浅区分主次关系，并进行信息层级划分，例如深色用于强调，中性色用于正文，浅色用于背景，聚焦用户对品牌主色的记忆。1.4.1单色UI设计项目式教程课程介绍案例分析设计流程实战练习邻近色色相相近，但明度和饱和度不同。在移动UI设计中，邻近色能营造和谐统一的视觉体验，同时通过明暗对比保持界面层次感。1.4.2邻近色UI设计项目式教程课程介绍案例分析设计流程实战练习在移动UI设计中，补色常用于创造视觉焦点、强化操作引导或传达特定情绪，如警示或活力。1.4.3补色UI设计项目式教程课程介绍案例分析设计流程实战练习对比色通过色相、明度或饱和度的差异化形成视觉冲击，适合营造活力感或引导注意力。1.4.4对比色UI设计项目式教程课程介绍案例分析设计流程实战练习1.5色彩联想红色移动UI的色彩联想橙色黄色绿色蓝色黑色UI设计项目式教程课程介绍案例分析设计流程实战练习在电商App，如淘宝中，红色促销标签刺激购买冲动。在拼多多中，红色的限时秒杀倒计时,红色折扣红包促进人们产生购物的紧迫感。1.5.1红色UI设计项目式教程课程介绍案例分析设计流程实战练习在美食App，如大众点评中，橙色主色营造食欲与亲切感。在番茄免费小说app中，橙色福利中心界面可以激励用户保持活跃度。1.5.2橙色UI设计项目式教程课程介绍案例分析设计流程实战练习在闲鱼app中，黄色高亮图标提醒人们可以售卖闲置物品。在一些儿童教育App中，明黄主色营造活泼氛围。1.5.3黄色UI设计项目式教程课程介绍案例分析设计流程实战练习在同程旅行中，绿色的界面和火车票查询可以增强信任感。在支付宝蚂蚁森林中，绿色的能量球和立即领取可以传递环保理念。1.5.4绿色UI设计项目式教程课程介绍案例分析设计流程实战练习在支付宝中，品牌蓝可以建立用户信任。在国家反诈中心app，蓝色背景可以强化专业形象。1.5.5蓝色UI设计项目式教程课程介绍案例分析设计流程实战练习在抖音app中，黑色背景凸显音符动感。在必剪app中，黑灰界面使人们更关注视频处理功能。1.5.6黑色UI设计项目式教程课程介绍案例分析设计流程实战练习项目2马尾船政APP制作——移动UI的设计规范UI设计项目式教程课程介绍案例分析设计流程实战练习现接到马尾船政项目，需对马尾船政进行APP制作，为确保APP设计严格遵循基础规范，设计师需以马尾船政品牌VI为核心，采用iOS与安卓设计规范，统一字号、间距、色彩层级，控件样式须完全适配多分辨率屏幕并标注清晰开发参数（DP/SP单位），所有图标与插图必须基于开源字体（如思源黑体、阿里巴巴普惠体）或原创设计，禁止商用版权风险；同时要求组件化构建可复用的设计系统（按钮、表单、导航栏等），交互逻辑需符合用户认知惯性（如右滑返回、底部导航优先）。马尾船政项目需求UI设计项目式教程课程介绍案例分析设计流程实战练习

针对iOS与Android两个平台，结合当前马尾船政项目实际对界面的尺寸规范、图标规范、字体规范等进行讲授，马尾船政项目部分尺寸规范展示如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

为满足项目组的要求，特下发设计工作单，期望设计人员能够清晰了解每个环节的具体要求，确保UI设计制作的高效和质量。明确UI制作的各项要求。设计人员需根据工作单规定的时间节点，认真完成UI的设计和制作。工作单内容见表2-1，创建完成工作单后，接下来我们来学习一下各大规范。项目实施——马尾船政UI项目设计规范工作单UI设计项目式教程课程介绍案例分析设计流程实战练习表2-1马尾船政UI设计规范工作单项目名界面尺寸规范字体规范图标规范边距与间距内容布局微信小程序的设计规范马尾船政UI设计规范750px×1,334px或1,080px×1,920px苹方或思源黑体视具体情况而定24px或30px卡片式布局遵循小程序设计规范制作规范遵循UI设计基础原则遵循iOS或Android组件规范注意事项在UI设计中有着多种单位的存在，比如px,dp,sp,pt,ppi等，px是绝对单位，而其他的是相对单位，意思是说在众多手机屏幕中，px是不会跟着变化而变化的，而后者可以。所以在开发中，使用相对单位可以做不同分辨率的适配。UI设计项目式教程课程介绍案例分析设计流程实战练习

为了让iOS和Android两大平台的用户有一致的体验，也为了节省UI设计的成本和研发成本，iOS和Android均给出了对应的设计规范，即《iOS设计规范》和《MaterialDesign设计规范》。

作为UI设计师，工作中针对iOS平台，必须熟记常用界面的尺寸。首先截至iPhone17发布为止，在@2x倍率的前提下，在Photoshop中设计iPhone的APP时，所采用的尺寸参数如表2-2所示。iOS设计规范UI设计项目式教程课程介绍案例分析设计流程实战练习表2-2常见的iPhone尺寸参数设备型号英寸倍率像素密度（ppi）物理像素（px×px）逻辑像素（pt×pt）iPhone6/7/84.7@2x326750×1,3341334375×667IPhoneX/Xs/11Pro5.8@3x4581,125×1,4362436375×812iPhone12/12Pro/12Max6.1@3x4601,170×1,5322532390×844iPhone6P/7P/8P5.5@3x4011,242×1,2082208414×736IPhoneXR/116.1@3x326828×1,7921792414×896iPhoneXs/Max6.5@3x4581,242×1,6882688414×896iPhone12ProMax6.1@3x4581,284×1,7782778428×926UI设计项目式教程课程介绍案例分析设计流程实战练习

针对不同的设备，界面中的框架尺寸也不同，如表2-3所示，部分示意图如图2-2所示。举例说明，表2-3中设备iPhone6的导航栏高度为44pt，则在@2x倍率下，在Photoshop中设置的高度为88px（44×2=88）；设备iPhone11Pro的导航栏高度为44pt，则在@3x倍率下，在Photoshop中设置的高度为132px（44×3=132）。iOS界面的框架尺寸UI设计项目式教程课程介绍案例分析设计流程实战练习表2-3iPhone设备中的框架尺寸设备型号英寸倍率像素密度（ppi）物理像素（pxxpx）逻辑像素（ptxpt）iPhone6/6s/7/84.7@2x326750x1334375x667iPhone6plus/7plus/8plus5.5@3x4011080x1920414x736iPhoneX/XS/11pro5.4@3x4581125x2436375x812iPhoneXR/XSmax/11promax6.1@2x326828x1792414x896iPhone12/12pro/13/13pro/146.7@3x4761170x2532390x844iPhone12promax/13promax/14plus6.7@3x4581284x2778428x926iPhone14pro/15/15pro6.1@3x4601179x2556393x852iPhone14promax/15promax6.7@3x4601290x2796430x932iPhone166.3@3x4602556x1179393x852iPhone176.3@3x4602622x1206393x852UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

本次马尾船政UI关于界面尺寸甲方并无详细要求，不同分辨率的控件规格也不一样，在常见机型的框架尺寸中同一张UI略微有所不同，下图为马尾船政项目在常见机型的框架尺寸示意图中的UI展示，在设计同一张界面时按照1,125px×1,436px和1,184px×1,778px的两种尺寸进行制作时，顶部状态栏和导航栏统一为132px44pt，底部安全区域为102px34pt,图标所在的按钮栏为147px49pt，如图所示。马尾船政项目iOS版本界面尺寸UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

每个APP都包含多种图标，有APPStore图标、应用图标和设置图标等，这些图标也遵循一定的尺寸规范。iPhone设备中常见的图标尺寸如表2-4所示，示意图如图所示。iOS界面的图标尺寸UI设计项目式教程课程介绍案例分析设计流程实战练习表2-4iPhone设备中常见的图标尺寸设备型号APPStore（px×px）系统设置图标（px×px）主屏幕（px×px）Spotlight搜索（px×px）标签栏（pt×pt）工具类和导航栏（px×px）iPhone6/7/8（@2x）1,024×1,024102458×58114×11458×5875×7544×44IPhone6P/7/8（@3x）1,024×1,024102487×87114×11487×8775×7566×66iPhone111,024×1,024102458×58120×12080×8069×6950×50iPhone11Pro1,024×1,024102487×87180×180120×12069×6975×75IPhoneXR（@2x）1,024×1,024102458×58120×12080×8069×6950×50iPhone6P/6SP/7P/8P（@3x）1,024×1,024102487×87180×180120×12069×6975×75iPhoneX/XS/xsmax（@3x）1,024×1,024102487×87180×180120×12069×6975×75UI设计项目式教程课程介绍案例分析设计流程实战练习

一般地，在设计图标时按照1,024px×1,024px的尺寸进行制作，在后期使用时再对图标进行等比例缩放。在马尾船政项目中对应的UI展示如图所示,在APPStore中为1,024px×1,024px,在iPhone主屏幕中为114px×114px，在搜索/设置中为58px×58px，在iPhone搜索/设置中为29px×29px。马尾船政项目iOS版本图标UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

字体是设计的关键，在iOS平台下推荐系统默认的英文字体“SanFrancisco(SF)”，中文字体则推荐使用“苹方（PingFangSC）”，如图所示。设计师可以在规格选框里变换使用相应的标准规格字体，但不要使用字体倾斜等功能。iOS字体规范UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

此外，由于文字在APP程序中出现的位置不同，因此也有不同的字体大小可以参考。特别说明的是，字号的大小是根据APP项目整体需求来选择的，并非固定，但字号无论如何选择都应该为偶数。根据工作经验，常见字号与应用场景对比如表2-5所示。iPhone设备中常见的图标尺寸UI设计项目式教程课程介绍案例分析设计流程实战练习级别字号（px）建议行距（px）应用场景说明重要

3642用于少数重要标题如导航标题、分类名称3040用于较为重要的文字或操作按钮如首页模块名称、价格等一般

2838用于大多数文字如文字段落2636用于大多数文字如小标题、模块描述等较弱

2434用于辅助性文字如次要的副标语等2232用于辅助性文字如次要的备注信息等表2-5iPhone设备中常见的图标尺寸UI设计项目式教程课程介绍案例分析设计流程实战练习

工作中，针对Android平台下的移动设备，UI设计师可以使用720px×1,280px作为基准设计尺寸，也可以使用1,080px×1,920px作为基准设计尺寸。前者适用于一套设计稿同时适配Android和iOS的情况，后者适用于单独为Android平台进行设计的情况。Android平台的界面尺寸如表2-6所示。Android设计规范UI设计项目式教程课程介绍案例分析设计流程实战练习表2-6Android平台的界面尺寸密度名称（密度值）名称dp转换px密度比倍率设计尺寸（px×px）hdpi（240dpi）高密度1dp=1.5px1.5@1.5x480×800xhdpi（360dpi）超高密度1dp=2px2@2x720×1,280xxhdpi（480dpi）超超高密度1dp=3px3@3x1,080×1,920xxxhdpi（640dpi）超超超高密度1dp=4px4@4x1,560×1,440UI设计项目式教程课程介绍案例分析设计流程实战练习

由于目前Android平台的主流机型已经达到1,080p的级别，因此这里以1,080px×1,920px规格输出设计稿（三倍图），页面框架各区域的尺寸规格如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

在进行设计时，也可以使用720px×1,280px作为基准设计尺寸，适用于一套设计稿同时适配Android和iOS的情况，马尾船政UI项目使用iOS或者Android的通用界面尺寸皆可，如图所示为720px×1,280px基准设计尺寸效果。马尾船政项目Android版本界面尺寸UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

图标尺寸

Android平台的移动设备中常见的图标尺寸如表2-7所示。Android图标尺寸与字体规范表2-7Android平台的移动设备中常见的图标尺寸图标类型mdpi（160dpi）hdpi（240dpi）xhdpi（320dpi）xxhdpi（480dpi）xxxhdp（640dpi）应用图标（px×px）48×4872×7296×96144×144192×192系统图标（px×px）24×2436×3648×4872×72196×196UI设计项目式教程课程介绍案例分析设计流程实战练习

字体规范

Android平台使用的字体与iOS平台不同，中文字体选择“思源黑体”，该字体是Adobe与Google联合推出的一款开源字体，如图2-9所示；而英文字体应选择“Rotobo”。UI设计项目式教程课程介绍案例分析设计流程实战练习

在APP的多个页面设计中，页面元素的边距和间距有着举足轻重的作用。统一的边距与间距能够规范整个页面版式，使页面简洁美观。

边距

页面全局边距

页面全局边距是指页面内容到屏幕边缘的距离。整个APP项目使用统一的边距来进行规范，以达到视觉效果统一的目的。在实际应用中，不同的APP可以采用不同的边距，常用的页面全局边距有32px、30px、24px和20px等，如图所示。其他设计规范UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

一般地，页面全局边距最小为20px，如果小于20px则容易在视觉浏览上给用户带来拥挤的感觉。根据工作经验，24px和30px是非常舒服的距离，也是绝大多数应用的首选边距，所以马尾船政项目也选用24px和30px皆可,如图所示。马尾船政项目的页面全局边距UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

卡片式布局是常见的布局方式，卡片和卡片之间的距离设置需要根据界面的风格和卡片承载信息量来界定。图2-13为微信“我的”页面的卡片间距。如果是电商类APP，卡片间距会设置为16px或20px，以承载更多购物信息。总之，卡片间距最小不低于16px，工作中根据需要可以设置为20px、24px、30px和40px等。卡片间距UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

格式塔邻近性原则认为:单个元素之间的相对距离会影响用户感知它是否已组织在一起，互相靠近的元素看起来属于一组，而那些距离较远的则自动划分为另一组。

在UI设计中一定要重视格式塔邻近性原则的运用，如在图所示的界面中，标题与副标题之间，以及文章与文章之间的距离有明显差异。内容间距UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

如果使用卡片式布局，马尾船政卡片边距同样可以选择20px、24px、30px和40px等其中一种，这边以24px为例子，如图2-15所示。

同理在马尾船政项目中就算是卡片式设计也要遵循格式塔邻近性原则的运用，如图所示。马尾船政项目的间距UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

这里仅介绍APP设计中最常用的两种内容布局——列表式布局与卡片式布局。至于其他由设计师自行设计的内容布局不在这里讲述。

1.列表式布局

列表式布局方式的特点在于能够在有限的屏幕内显示多条信息，用户通过上下滑动屏幕可以获得更多信息，如图所示。采用列表式布局时需要注意列表高度，一般舒适体验的最小高度为80px，最大高度根据产品内容多少而定。内容布局UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习2.卡片式布局

卡片式布局的特点在于每张卡片的内容和形式都相互独立，可以在同一个页面中出现不同的卡片，承载不同的内容，如图所示。

一般地，采用卡片式布局的卡片本身是白色，而卡片与卡片之间的颜色为浅灰色或其他颜色，这样可以使得卡片之间有一定的层次划分。内容布局UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

在基于微信小程序轻快的特点，拟定了小程序界面设计指南和建议。

1.友好礼貌

为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序提供的服务，友好地引导用户进行操作。

2.清晰明确

一旦用户进入我们的小程序页面，我们就有责任和义务清晰明确地告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路，这样才能为用户提供安全且愉悦的使用体验。微信小程序的设计规范UI设计项目式教程课程介绍案例分析设计流程实战练习

导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户，当前在哪，可以去哪，如何回去等问题。微信在小程序内现不提供统一导航栏样式，开发者可根据需要自行设计小程序首页和次级页面界面导航。建议所有的次级页面左上角提供返回上一级页面操作。

小程序的所有页面，包括小程序内嵌网页和插件，微信都会在其右上角放置官方小程序菜单，样式如图所示。开发者不可对其内容自定义，但可选择深浅两种基本配色以适应页面设计风格。小程序菜单UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

小程序页面的导航应尽量简单。建议开发者设计的自有导航样式与微信官方小程序菜单样式保持一定差异，以便区分，如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

开发者可为小程序页面添加标签分页（Tab）导航。标签分页栏可固定在页面顶部或者底部，便于用户在不同的分页间做切换。标签数量不得少于2个，最多不得超过5个，为确保点击区域，建议标签数量不超过4项。一个页面也不应出现一组以上的标签分页栏。

其中小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用。开发时可自定义图标样式、标签文案以及文案颜色等，具体设置项如图2-23底部导航所示尺寸等参考。小程序导航UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

微信内字体的使用与所运行的系统字体保持一致，常用字号为22、17、15、14、12（pt），使用场景具体如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

文字用色如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

微信内色板的使用如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

微信小程序不同列表标注如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

微信小程序不同列表间距如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

微信小程序TitleBar按钮以及视频、录音、地理位置展示规则如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

微信小程序图标规范如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

在UI设计中，色彩规范扮演着至关重要的角色，它不仅能够塑造产品的视觉风格，还能够引导用户的视线，传达品牌信息，甚至影响用户的情感和行为。接下来将解析部分UI设计中的色彩规范，并结合实践案例，探讨其在实际应用中的价值与意义。色彩规范UI设计项目式教程课程介绍案例分析设计流程实战练习

在界面设计的初始阶段，色彩选择往往面临理论与实践的双重挑战。色彩不仅是视觉信息的载体，更是用户认知与交互行为的底层逻辑。作为设计师，需明确一个核心原则：色彩感知能力并非局限于专业训练的结果，而是人类视觉系统演化形成的普遍认知机制。尽管用户缺乏系统的色彩理论背景，其潜意识仍能对界面配色的协调性与功能性作出本能判断，接下来以常见色彩进行讲解，如图所示。色彩规范在UI设计中的常见应用UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

首先主要看文字颜色，其中在标题和正文中选择的颜色为深黑色，#333333，而辅助的提示性文字选用的是深灰色，#999999，部分其他文字使用的是贴合主色的色彩。其次是背景，主体采用的是棕色的符合主题的主色，其次在底部导航栏和搜索栏用的是通用的浅白色，#FAFAFA。上文说到，分隔线中浅灰色的使用场景为白色背景的分隔线，所以此案例中的分隔线使用的为浅灰色，RGB为239239239。搜索页面为案例进行讲解常见色彩UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

该马尾船政APP平台以米兰色为主色调，代表安逸、专业和高级性。辅助色采用蓝色和黄色，营造出简洁、清新的界面氛围。在图标中，运用对比色搭配原则，将船政相关名称、文化等关键信息突出显示，引导用户快速获取所需信息。同时，该APP还注重色彩对比度的控制，确保文本与背景之间有足够的对比度，提升用户阅读体验，如图所示。色彩规范在马尾船政项目中UI设计中的应用UI设计项目式教程课程介绍案例分析设计流程实战练习UI图标设计形式UI设计项目式教程课程介绍案例分析设计流程实战练习3.2UI图标设计形式01中文形式02英文形式03图形形式04数字和特殊符号形式UI图标设计形式UI设计项目式教程课程介绍案例分析设计流程实战练习3.2.1中文形式核心特点对于国内用户而言，中文具有天然的亲近感。使用中文作为图标元素，能迅速与用户建立情感连接。常见分类单字形式多字形式字体加图形式字体加几何组合形式应用案例京东单字形式，简洁有力闲鱼多字组合，亲和易记支付宝字体与图形巧妙结合UI图标设计形式UI设计项目式教程课程介绍案例分析设计流程实战练习字母与图形的融合形式设计案例3.2.2英文形式特点在当前全球化的语境下，英语作为国际通用语言的重要性愈发显著。采用英文形式的图标能够有效地突破语言障碍，实现全球范围内的快速识别。主要分类单一英文字母形式多重英文字母组合形式字母与背景图案的结合形式小米(MI)简洁有力的字母组合，传递品牌活力。G100字母与数字的结合，体现专业与全球化。UI设计项目式教程课程介绍案例分析设计流程实战练习第二种：英文形式全球化的通用语言全球化适配突破语言壁垒，覆盖国际用户风格适配契合知识、科技、高端品牌的定位灵活性强字母组合多样，易做创意变形细分分类单一英文字母形式“M”（麦当劳）、“A”（亚马逊简化图标）多重英文字母组合“MI”（小米）、“APPLE”（苹果）字母与图形融合“Nike”（字母+对勾）、“Google”（字母+图形）单一字母字母组合多彩融合UI设计项目式教程课程介绍案例分析设计流程实战练习经典案例深度拆解案例1：MI图标字体：无衬线黑体，简洁现代，契合科技品牌定位。含义：“MI”代表MobileInternet，传递品牌战略。适配性：小至图标，大至招牌，均清晰可辨。案例2：Google图标字母：“Google”字样直接呈现，简洁明了。图形：彩色图形拼接，体现活力与创新精神。色彩：多彩配色，传递友好、开放的品牌形象。UI设计项目式教程课程介绍案例分析设计流程实战练习第三种：图形形式无国界的直观表达无语言壁垒跨文化、跨国家通用，适配全球用户直观易懂图形直接对应功能，无需文字解读创意空间大可抽象、可拟物，贴合不同风格需求功能型图形：计算器、日历图标品牌型图形：苹果、小米Logo抽象型图形：抖音音符、知乎盐粒案例展示功能型图形品牌型图形抽象型图形抽象型图形UI设计项目式教程课程介绍案例分析设计流程实战练习图形形式：案例拆解与避坑指南案例：微信图标图形：功能与场景结合对话气泡（沟通）+小人剪影（社交），直观传达产品核心。色彩：传递情感价值绿色主色调，传递安全、亲和、健康的品牌形象。简化：适配多端显示极简线条风格，确保在各种尺寸下都清晰可辨。避坑指南避免过度抽象：导致用户无法识别功能避免元素堆砌：破坏图标整体识别性避免文化冲突：需结合目标市场调整UI设计项目式教程课程介绍案例分析设计流程实战练习第四种：数字&特殊符号形式精准高效的信息载体信息精准数字直接传递数量/序号，符号直接传递功能，一目了然。风格适配广无论是扁平、拟物还是插画风格，都能轻松融合。记忆点强独特的数字或符号组合，易于形成深刻的品牌标识。细分分类与案例数字形式如“58”(58同城),“7”(7-ELEVEN)特殊符号形式如“+”(添加),“√”(确认),“@”(邮箱)数字与符号是品牌视觉中最直接、最有力的语言之一。UI设计项目式教程课程介绍案例分析设计流程实战练习数字&特殊符号：案例1：58同城图标谐音巧用

“58”谐音“我发”，契合品牌利好定位。字体设计

粗体+圆角，视觉醒目且亲和。色彩传递

蓝色主调，传递可靠与专业感。案例2：7-ELEVEN图标数字象征

“7”象征7天×24小时全天候服务。组合策略

数字+英文，兼顾品牌名与功能联想。核心启示：将数字符号与品牌理念、核心功能深度绑定，是构建独特、易记品牌形象的有效途径。UI设计项目式教程课程介绍案例分析设计流程实战练习形式对比与场景适配指南设计形式核心优势核心劣势适配产品类型目标用户中文形式情感亲近、品牌直接国际适配弱本土电商、生活服务国内用户英文形式全球化、风格高端下沉市场认知成本高国际品牌、知识/科技全球用户、年轻白领图形形式无语言壁垒、直观品牌关联性弱工具类、跨文化品牌全球用户数字&符号信息精准、记忆点强适用场景有限金融、工具、生活服务功能需求明确用户场景适配三步法1.明确目标市场2.锁定核心功能3.匹配品牌气质UI设计项目式教程课程介绍案例分析设计流程实战练习课后作业实操题完成“校园二手交易APP”图标设计，附50字设计说明。分析题收集10个常用APP图标，按四种形式分类，标注每个图标的设计亮点。拓展资源设计网站站酷、Dribbble书籍《图标设计原理》《UI设计实战指南》工具推荐Figma、Iconfont希望这些资源能帮助大家在设计的道路上更进一步！UI设计项目式教程课程介绍案例分析设计流程实战练习感谢聆听！UI图标设计，始于形式，忠于需求中文-情感英文-全球图形-直观数字-精准答疑环节Q&AUI设计项目式教程课程介绍案例分析设计流程实战练习01线性风格图标LineStyleIcons02面性风格图标SurfaceStyleIcons03扁平风格图标FlatStyleIcons04拟物风格图标SkeuomorphicStyleIcons052.5D风格图标2.5DStyleIcons06总结与回顾SummaryandReviewUI设计项目式教程课程介绍案例分析设计流程实战练习线性风格图标核心定义通过简洁流畅的线条构建图形，线条粗细通常保持一致（1-3像素）。视觉特点单色为主（黑白灰或品牌色），简洁明了，视觉干扰小，干净利落。应用场景广泛应用于界面导航栏、工具栏、标签栏等，尤其适合需要高效识别的场景。UI设计项目式教程课程介绍案例分析设计流程实战练习面性风格图标核心定义以色彩填充的“面”作为主要视觉元素，轮廓清晰，区别于线性图标的描边形式。视觉特点形式多样，支持单色填充、多色叠加和微渐变，具有较强的视觉冲击力。应用场景常用于需要突出显示的界面元素，如功能入口、分类标签、桌面快捷方式等。示例展示UI设计项目式教程课程介绍案例分析设计流程实战练习扁平风格图标设计定义摒弃阴影、高光、渐变等拟物化装饰，强调简洁的几何形状和鲜明的纯色，回归设计本质。风格特点由基础几何图形（圆形、方形、三角形）组合而成，色彩鲜明、识别性高，视觉语言现代简洁。应用场景目前最主流的设计风格之一，广泛应用于移动应用启动图标、设置界面、网页设计等领域。经典案例：Facebook启动图标典型的扁平风格代表，极简的几何图形与高饱和度色彩的结合。UI设计项目式教程课程介绍案例分析设计流程实战练习拟物风格图标核心定义极力模拟现实世界中物体的质感、光影和形态，追求极致的真实感，力求以假乱真。视觉特点细节丰富，具有强烈的代入感，能让用户直观地理解图标含义，降低学习成本。应用场景早期iOS系统代表风格，现多用于游戏化界面、需要营造真实感的特定主题设计。UI设计项目式教程课程介绍案例分析设计流程实战练习2.5D风格图标设计定义结合二维平面的简洁与三维立体的空间感，通常采用等轴测视角设计。视觉特点利用透视、阴影和渐变创造“伪3D”效果，兼具扁平化清晰与设计层次感。应用场景广泛应用于数据可视化、信息图表、游戏界面和产品展示等领域。UI设计项目式教程课程介绍案例分析设计流程实战练习五种风格对比风格类型核心特点视觉效果适用场景线性风格简洁线条，单色为主极简、干净导航栏、工具栏面性风格色块填充，轮廓清晰突出、醒目功能入口、分类标签扁平风格几何图形，纯色平涂现代、高效启动图标、通用界面拟物风格模拟真实，细节丰富真实、代入感强特定主题、游戏化界面2.5D风格伪3D效果，等轴视角立体、有趣数据可视化、信息图表UI设计项目式教程课程介绍案例分析设计流程实战练习总结与回顾风格多样，各有所长没有绝对优劣的图标风格，每种风格都有其独特的特点和适用场景，应根据实际情况灵活选择。结合产品定位选择图标风格时，需紧密结合产品的整体定位、品牌调性和目标用户群体，避免盲目跟风。关注用户体验设计的最终目的是提升用户体验，确保图标清晰、易懂、易用，让用户操作更流畅。主流与趋势线性和扁平风格是目前应用最广泛的主流风格，而2.5D风格则是备受青睐的新兴趋势。感谢观看如有任何问题，欢迎随时交流UI设计项目式教程课程介绍案例分析设计流程实战练习

本章节主要包含了banner设计原则、banner设计的特点、banner构图方式及尺寸要求、banner放置位置及切换方式，这些知识点几乎囊括了UIbanner设计的应用及设计形式。

此次PPT为大家介绍banner设计原则的相关内容。UI设计项目式教程课程介绍案例分析设计流程实战练习

在制作Banner文案排版时，我们需要了解并掌握相关原则，Banner设计需遵循留白、对齐、对比三大原则，提升视觉吸引力与信息传递效率。

留白原则：要求保留合理空白，避免元素堆砌，既能突出核心信息（如主题、按钮），又能缓解视觉疲劳，让画面更通透。

对齐原则：是画面整洁的关键，需将文字、图形等元素按统一基准对齐（左对齐、居中对齐等），建立视觉秩序，引导用户视线有序流动，避免杂乱感。

对比原则：可强化视觉层次，通过色彩（如冷暖色对比）、大小（主标题与辅助文字差异）、明暗等对比，突出核心内容，让关键信息快速被捕捉，同时增强画面的视觉冲击力，助力Banner在短时间内抓住用户注意力。设计流程UI设计项目式教程课程介绍案例分析设计流程实战练习

对齐原则：是画面整洁的关键，需将文字、图形等元素按统一基准对齐（左对齐、居中对齐等），建立视觉秩序，引导用户视线有序流动，避免杂乱感。因此，我们只需要借助PS/AI软件的对齐工具/标尺辅助线就可以完成对齐。对齐工具标尺辅助线UI设计项目式教程课程介绍案例分析设计流程实战练习

在Banner设计中，以参考线作为文字区域的对齐边界。借助参考线规范文字摆放范围与对齐基准，能有效规避元素错位问题，让版面布局更规整有序，同时提升信息传递的清晰度，强化设计的专业质感。UI设计项目式教程课程介绍案例分析设计流程实战练习Banner对齐设计案例赏析UI设计项目式教程课程介绍案例分析设计流程实战练习

对比原则：大小（主标题与辅助文字差异）、突出核心内容，让关键信息快速被捕捉，同时增强画面的视觉冲击力，助力Banner在短时间内抓住用户注意力。

图片中主标题占比大从而阐述这张banner的主题，其他文案以及相应的装饰性元素缩小，让整个画面更加丰富，不会显得特变单调，UI设计项目式教程课程介绍案例分析设计流程实战练习

留白原则：要求保留合理空白，避免元素堆砌，既能突出核心信息（如主题、按钮），又能缓解视觉疲劳，让画面更通透

图片案例很好的展示了留白层次的视觉感官让每个文案中间有一段的距离，从而显示出不同的层级关系，也从而梳理出我们文案的一个主要层次和次要层次的区别UI设计项目式教程课程介绍案例分析设计流程实战练习

图片中文案排布的非常满，导致没有任何的呼吸的空间，给我们的感觉非常的拥挤头部过来气，且整体的文案层次并没有很明显的差距，分不清主次关系，从而让阅读有了障碍。反例展示UI设计项目式教程课程介绍案例分析设计流程实战练习

以黑黄撞色潮鞋为核心，黑黄块面背景强化视觉冲击，左上角搭配“时尚潮鞋”大字与促销信息，右下角布局聚焦产品，色彩对比突出潮流感，突出信息层级清晰。UI设计项目式教程课程介绍案例分析设计流程实战练习一、临摹优秀Banner作品，深度理解并掌握对齐、对比、留白三大设计原则的实际应用逻辑，提升Banner版面规整度、视觉层次感与信息传递效率，夯实设计基础。二、作业要求1.临摹素材：选取3组优秀Banner案例（涵盖电商促销、活动宣传、品牌展示3类常见场景）中任选1组进行临摹，需完整还原作品的版式结构与设计细节。3.规范要求：使用设计软件（PS、Figma等均可）完成，临摹作品尺寸与原素材一致，画面无错位、模糊等问题。图片需要300分辨率练习UI设计项目式教程课程介绍案例分析设计流程实战练习

本章节主要包含了banner设计原则、banner设计的特点、banner构图方式及尺寸要求、banner放置位置及切换方式，这些知识点几乎囊括了UIbanner设计的应用及设计形式。

此次PPT为大家介绍banner构图方式的相关内容。设计流程UI设计项目式教程课程介绍案例分析设计流程实战练习

在开展Banner设计前，充分了解各类构图形式至关重要。合理的构图是提升视觉感官体验与设计美感的核心基础，不同构图逻辑能传递出迥异的视觉情绪与信息层级。以下为三类常用构图方式：左右构图：通过对称或非对称分割画面，适合呈现对比或互补信息，视觉平衡且信息清晰；

上下构图：纵向划分空间，可清晰区分主题与辅助信息，符合用户垂直阅读习惯；

对角线构图：则借助倾斜线条营造动感，能快速抓住用户视线，增强画面活力，适配潮流、活动类Banner设计。设计流程UI设计项目式教程课程介绍案例分析设计流程实战练习一、左右构图

左右构图作为平面设计中的经典版式法则，其核心价值在于通过科学的空间分配实现信息传达的最优解。UI设计项目式教程课程介绍案例分析设计流程实战练习二、上下构图

上下构图作为信息可视化设计的战略性工具，其本质是通过纵向空间序列重构认知优先级。UI设计项目式教程课程介绍案例分析设计流程实战练习三、上下构图

对角线构图作为动态视觉设计的核心方法论，其本质是通过几何张力的重构打破二维平面的桎梏。这种源自巴洛克艺术的构图语言，其倾斜轴线角，能激发视觉中枢的活跃度。UI设计项目式教程课程介绍案例分析设计流程实战练习

案例图片中，左侧放置主标题和相关说明性文案，右侧放置主要图片，这样一左一右的放置形式，达到了左右构图的平衡。UI设计项目式教程课程介绍案例分析设计流程实战练习

案例图片中，上面放置主标题“限时折扣”和相关说明性文案，下侧放置主要图片，的放置形式，达到了左右构图的平衡。同时让主标题和主体物变成应该统一的视觉中心，让画面更具冲击力。UI设计项目式教程课程介绍案例分析设计流程实战练习

以黑黄撞色潮鞋为核心，黑黄块面背景强化视觉冲击，左上角搭配“时尚潮鞋”大字与促销信息，右下角布局聚焦产品，色彩对比突出潮流感，突出信息层级清晰。UI设计项目式教程课程介绍案例分析设计流程实战练习对这三张海报用左右构图、上下构图、对角线构图的方式进行临摹。练习UI设计项目式教程课程介绍案例分析设计流程实战练习

本章节聚焦餐饮APP项目的界面设计核心内容，市场研究：明确产品市场定位，进行市场分析。用户调研：通过用户分析、竞品分析和用户画像，定义产品风格。交互原型：总结需求、搭建功能框架，输出交互原型，再次定义产品风格。视觉规范：制定文字、图标、颜色等规范，明确产品风格。执行方案：完成低保真、高保真方案及设计评审，最终完成界面设计。UI设计项目式教程课程介绍案例分析设计流程实战练习

绘制产品架构的方法有很多种，AdobePhotoshop、AdobeIllustrator、Xmind产品架构图是一种将产品的各个组成部分及其相互关系以可视化方式呈现的图形。在作用方面，它有助于团队成员（包括产品经理、开发人员、设计师等）清晰地理解产品的整体结构。

在产品架构的设计中，以用户为中心是至关重要的理念。这意味着要深入了解用户的需求、偏好和行为模式，将其作为设计的出发点。通过用户研究、用户测试和反馈收集等方法，获取真实的用户数据，以此来指导功能的规划和布局。设计流程UI设计项目式教程课程介绍低保真原型图设计流程实战练习

绘制原型图的软件有很多，如AxureRP、墨刀、AdobeXD等，AxureRP是经典的原型工具

低保真原型通常使用很少的颜色来突出基本功能，大部分则采用灰色调，且低保真原型能够清晰地展示产品的基本架构和功能布局，为后续的设计迭代提供坚实的基础UI设计项目式教程课程介绍低保真原型图设计流程实战练习

原型根据页面的保真程度可以划分为草图、低保真和高保真。低保真原型首要的也是最重要的作用是检查和测试产品功能，而不是产品的视觉外观，UI设计项目式教程课程介绍高保真原型图设计流程实战练习

高保真原型图是在低保真原型图的基础上进一步深化，对比图如图所示，更接近实际产品页面的效果，高保真原型是一种精确呈现产品界面和交互的原型设计图形，它结合了视觉设计、交互设计，可以更准确地模拟最终产品的外观和功能。制作高保真原型，首先要了解不同类型产品的设计规范，如要设计iOS、Android等移动终端产品，就先要了解它们的页面尺寸、设计结构和方法、字体、字号等规范，将设计元素进行合理的摆放与搭配。在做高保真原型时，要有足够的细心和耐心。UI设计项目式教程课程介绍案例分析设计流程实战练习

旅游APP为设计主线，结合出行、居住等的功能，凸显项目智慧出行的核心使命。为突出项目特色，需从视觉设计、低保真原型图、高保真原型图等方面入手

视觉设计以绿色为主色，搭配黄色辅助色，整体风格现代简约与场景化体验融合。

使用原型设计工具进行页面布局设计，包括页面尺寸、边距、元素位置等。高保真原型图根据概念设计文档和低保真原型图，进行APP的视觉设计，包括色彩搭配、图标设计、字体选择等。UI设计项目式教程课程介绍案例分析设计流程实战练习从功能上来讲，旅游APP包含首页、行程、消息、我的四大页面，分为四大核心模块。UI设计项目式教程课程介绍案例分析设计流程实战练习

制作低保真原型图时，尺寸通常根据适配机型来确定，没有固定要求。为保证低保真原型图协调统一，需注意字体规范，如图所示。旅游APP的UI字体规范需从字体选择、字号、字重、颜色、排版等维度制定，确保视觉统一性与阅读体验。设计低保真原型图时需要注意以下几点：UI设计项目式教程课程介绍注意事项设计流程实战练习1.保证交互中的字号、间距等尽量符合视觉要求，以免给视觉造成不必要的困扰。2.交互阶段的产出方案，应该更聚焦于信息布局、内容层次、操作流程。不建议在交互稿上使用色彩，避免对视觉设计师造成不必要的干扰。3.注重用户体验，以最直接、简便的方式呈现功能。设计低保真原型图时需要注意以下几点设计低保真原型图时需要注意以下几点：UI设计项目式教程课程介绍注意事项设计流程实战练习

在制作高保真原型之前，需要完成规范手册的制作。制作规范手册主要是为了便于设计团队或设计师之间统一产品的视觉设计风格；

同时，保证设计师与开发人员之间沟通和工作交接的顺利进行，使开发出的产品界面和视觉稿高度统一。制作规范手册，包括字体、颜色、按钮、图标等要求，如图所示。在规范手册的基础上，根据规范自定义矩形组件可以方便地进行取色，提高设计效率，这样可以快速准确地获取所需的颜色，避免手动输入色值的繁琐过程，同时也能保证颜色的统一性。UI设计项目式教程课程介绍案例分析设计流程实战练习一、APP包含首页、行程、消息、我的四大页面，

UI字体规范需从字体选择、字号、字重、颜色、排版等维度制定，确保视觉统一性与阅读体验。二、设计低保真原型图时需要注意1.保证交互中的字号、间距等尽量符合视觉要求，以免给视觉造成不必要的困扰。2.交互阶段的产出方案，应该更聚焦于信息布局、内容层次、操作流程。不建议在交互稿上使用色彩，避免对视觉设计师造成不必要的干扰。3.注重用户体验，以最直接、简便的方式呈现功能。三、在制作高保真原型之前，需要完成规范手册的制作包括字体、颜色、按钮、图标等要求总结UI设计项目式教程课程介绍案例分析设计流程实战练习完成以下任务：使用原型工具，为半月里古村落微信小程序设计一个完整原型，包括：核心页面（首页、文化介绍页、活动详情页、导航页）；交互流程（如从首页进入活动页，再返回首页的路径）；用户操作反馈（如点击按钮后的跳转、加载动画）；附上原型截图与交互说明文档。练习UI设计项目式教程课程介绍案例分析设计流程实战练习

本章节聚焦餐饮APP项目的界面设计核心内容，从菜单页的菜品分类与视觉呈现、订单页的流程交互与状态展示、会员卡页的权益呈现与用户留存设计，到我的页的个人信息管理与功能集成，进行全面且系统的拆解讲解，为APP界面的实用性与美观性融合提供清晰的设计指引。

UI设计项目式教程课程介绍案例分析设计流程实战练习

设计流程遵循用户需求调研→功能模块规划→界面原型搭建→视觉风格定义→交互逻辑优化→测试迭代落地的路径，先明确各页面核心功能诉求，再结合用户点餐习惯打磨视觉层级与操作动线，最终为APP界面的实用性与美观性融合提供清晰的设计指引。

餐饮类APP尽量使用鲜明色激发食欲、显高效，高端餐厅用沉稳色彰品质。设计流程UI设计项目式教程课程介绍案例分析设计流程实战练习在设计菜单页时，要注意以下几点：1.菜品分类要清晰。按照合理的逻辑对菜品进行分类，如米饭、面食、汤品、甜品、小吃、饮品等。2.菜品信息完整。每个菜品都应展示关键信息，包括菜品名称、价格、图片、描述等。菜品名称要简洁准确，能够直观反映菜品的主要成分或特点。价格要清晰明了，避免用户产生误解。3.添加或删除菜品操作方便。为用户提供简单直接的方式来添加菜品到购物车。UI设计项目式教程课程介绍案例分析设计流程实战练习

搜索功能高效。提供搜索栏，让用户能够快速找到自己想要的菜品。搜索功能要支持模糊搜索和精准搜索，

例如，用户输入“面”，不仅可以搜索到“胡萝卜面”，还可以搜索到含有面的其他菜品，如“牛肉面”、“海鲜面”等，同时，搜索结果要按照相关性和热度等因素进行排序UI设计项目式教程课程介绍案例分析设计流程实战练习在设计会员卡页时，要注意以下几点：1.虚拟会员卡设计：模拟真实质感，展示等级名称、卡号（带复制功能）及有效期，临近到期自动提醒。2.以列表形式详细列出会员所享受的权益。权益内容,可以包括折扣优惠、积分获取与兑换、优先排队、免费赠品等，对于每一项权益，要进行简单的解释。UI设计项目式教程课程介绍案例分析设计流程实战练习会员卡设计展示UI设计项目式教程课程介绍案例分析设计流程实战练习在设计我的页时，要注意两点：1.信息简洁明了。个人资料展示要精简，头像、昵称、等级等关键信息一目了然，避免繁杂冗余，让用户快速确认身份。2.功能布局合理。按照使用频率与重要性排序，高频功能放显眼位置，低频的功能靠后，关联功能就近放置，方便用户一站式操作。UI设计项目式教程课程介绍案例分析设计流程实战练习这三张页面配色以暖橙为主调给人一种热情的感觉，激发消费者的购买欲望，同时搭配浅白底色，视觉统一且贴合餐饮属性；设计风格简约清晰，采用卡片式布局+图标引导，信息层级分明，既保证操作便捷性，又通过轮播图、会员视觉等元素增强吸引力。总结UI设计项目式教程课程介绍案例分析设计流程实战练习基于这三张页面，完成以下任务：分析菜单页的菜品分类模块，提出1个提升用户点餐效率的交互优化方案；针对会员卡页的权益展示，设计1处能强化用户付费意愿的视觉调整细节；结合“我的页”的功能卡片，补充1个你认为必要的用户常用功能，并说明理由。练习UI设计项目式教程课程介绍案例分析设计流程实战练习项目7交互设计UI设计项目式教程课程介绍案例分析设计流程实战练习

交互设计是设计人与产品、系统等互动方式的设计领域。

在AdobeXD软件中体现得很充分。它用于设计网站和移动应用等界面。设计师利用XD可以创建原型，通过设置交互动作，如点击按钮后跳转到新页面、元素的显示和隐藏等，来模拟用户的实际操作流程。这种交互设计让设计师能提前预览用户体验，优化界面布局和操作逻辑，确保最终产品在用户交互方面更友好、高效。项目要求——马尾船政项目交互设计要求UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

具体交互方式包括：

1.左右滑动：对应图中左一手机界面交互示意；

2.滑动点交互：指示点实时反馈当前位置，强化交互反馈；

3.上下滑动：中间右侧手机界面，呈现上下滑动的交互逻辑；

4.左右切换：最右侧手机界面，体现左右切换，如图所示。马尾船政项目交互设计原则UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

在AdobeXD里，当为元素或画板完成定义与链接后，借助在属性面板的交互和操作分组中对参数选项进行设置，能够让移动原型设计或者UI设计更具魅力与吸睛度。

在工作区域给元素或画板添加链接之后，属性面板会呈现出交互和操作分组选项，如图所示。用户可以在这个面板中，针对链接对象设定诸如触发条件、操作类型、操作目标以及操作动画等一系列参数。通过这些细致的参数设定，实现对设计效果的精准把控，从而打造出更符合预期、更具吸引力的移动原型或UI设计作品。马尾船政项目XD中交互参数设置介绍UI设计项目式教程课程介绍案例分析设计流程实战练习点击：这是最基础且常用的触发条件。比如在设计APP的登录页面时，点击“登录”按钮这一操作，就能触发跳转至主界面的交互。悬停：当鼠标指针悬停在特定元素或画板上时，交互就会被触发。例如当鼠标悬停在导航栏的某个菜单项上，会弹出下拉子菜单。长按：用户长按相关元素或画板，触发交互。在移动应用中，长按可以实现一些特殊功能，如在文件管理类APP中，长按文件图标，可弹出操作菜单，进行复制、删除等操作。UI设计项目式教程课程介绍案例分析设计流程实战练习页面加载：当页面或者画板被加载显示时，交互自动触发。常用于展示开场动画、引导提示等场景，比如APP启动时，展示品牌Logo的动画效果。UI设计项目式教程课程介绍案例分析设计流程实战练习

在操作类型的面板中，将鼠标指针移至属性面板中的类型下拉按钮处，单击此按钮，即可打开操作类型的下拉表框，具体状态如图所示。在下拉表框中，可以根据设计需求，从众多操作类型中选择任意一个作为链接对象的操作类型。由于操作类型根据设计APP的需求进行灵活应用，这里不再做过多赘述。根据本章节案例用户选择“过渡”操作类型即可。操作类型UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

在操作时，将鼠标移至属性面板的动画下拉按钮，点击它，便能打开操作动画的下拉列表框，具体样式如图所示。在这个下拉列表框里，用户可依据设计需求，任选一个动画选项。一旦选定，在链接对象与目标画板转换的过程中，就会应用该动画效果，如图所示。

完成动画类型设置后，点击缓动选项后的按钮，随即打开缓动选项的下拉表框，如图所示。在其中选择任意一个选项进行预览时，链接对象与目标画板转换时应用的动画效果，会以所选的缓动方式呈现给使用者。操作动画UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

完成APP高保真原型图或者UI设计后，用户能够借助构建交互方式设计，直观地感受该APP界面的用户体验。

完成APP高保真原型图或者UI设计后，用户能够借助构建交互方式设计，直观地感受该APP界面的用户体验。

在XD工作区域中，从模式栏中选定原型模式，随即就能将工作区域转变为原型模式。

接下来进入XD实操环节。马尾船政项目页面转换添加交互UI设计项目式教程课程介绍案例分析设计流程实战练习

经过对上一小节内容的系统学习，用户已掌握制作页面与页面元素转换动效的基础技能。在本小节的案例实操中，将聚焦于APP引导页滑动点交互的设计与制作，助力用户深度挖掘AdobeXD软件的交互设计潜力，进一步提升设计水平。

接下来进入XD实操环节。马尾船政项目滑动点交互UI设计项目式教程课程介绍案例分析设计流程实战练习

在轮播图交互设计中，用户需要把画板动效与轮播图中的各种元素如图片、指示点、切换按钮等，进行有机结合，这不仅要求精准把握各元素间的联动关系，还需深入理解用户在操作轮播图时的交互逻辑，实现轮播图的流畅切换与动态展示。

接下来进入XD实操环节。马尾船政项目轮播图交互UI设计项目式教程课程介绍案例分析设计流程实战练习

拓展题1：设计《半月里古村》微信小程序交互流程。

为半月里古村落微信小程序设计一个交互流程（如用户从首页进入文化介绍页，再返回首页的过程）要求：交互流畅、逻辑清晰。根据本章节所学内容，设计不少于3种以上交互效果。

拓展题2：分析交互设计案例

分析在交互设计中，如何平衡功能性与美观性，以及如何通过交互设计提升用户的参与度和留存率。课外扩展UI设计项目式教程课程介绍案例分析设计流程实战练习项目8福建博物馆项目设计UI设计项目式教程课程介绍案例分析设计流程实战练习

在数字化时代背景下，博物馆作为传承和展示人类文化遗产的重要场所，正面临着转型升级的需求。随着移动互联网技术的飞速发展和智能设备的普及，人们对于文化消费的模式正在发生变化，越来越多的用户倾向于通过数字化手段来获取信息和体验服务。因此，开发一款博物馆APP成为了连接博物馆与公众，提升用户体验，传播文化知识的有力途径。

在项目定位上集文化传播平台、用户服务工具、商业创新载体于一身，提升公众文化认知，助力用户参观，挖掘商业潜力，实现文化与商业协同发展。项目需求如图所示。福建博物馆项目设计要求UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

博物馆类APP的用户群体以年轻人为主，他们追求知识、享受文化体验，并且乐于尝试新技术，他们对博物馆的社交价值和教育价值有较高的期待，并愿意为提升体验支付额外费用，如图所示。用户分析研究UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

本章节项目案例将围绕“福建博物馆”APP进行，请用户提前下载好项目的素材文件进行制作准备，部分案例效果如图所示。福建博物馆项目界面设计部分案例展示UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

为满足项目组的要求，特下发设计工作单，期望设计人员能够清晰了解每个环节的具体要求，确保原型设计制作的高效和质量。明确原型制作的各项要求。设计人员需根据工作单规定的时间节点，认真完成原型设计和制作。工作单内容见表8-1。福建博物馆项目设计规范工作单UI设计项目式教程课程介绍案例分析设计流程实战练习表8-1马尾船政项目——APP交互设计工作单项目名称项目需求定位设计准备核心界面设计项目总结延伸福建博物馆项目APP设计调研设计需求定位功能框架思维导图设计、视觉规范设计体系搭建引导页、注册登录页、主界面设计设计优化制作规范严格遵循

IOS系统@2X界面尺寸规范，所有界面元素需以偶数像素为基础单位进行绘制与排版，确保在@2X分辨率下图形边缘清晰无锯齿。原型图设计阶段，精准落实构图、色彩搭配、字体排版等核心设计原则。注意事项视觉动线优化：以福建博物馆文物展陈动线为灵感，通过合理的间距层次，构建清晰直观的用户操作路径。避免界面元素杂乱堆砌，引导用户如同漫步展厅般，高效完成交互操作。使用馆藏图片时，需结合视觉动线规划图片布局，确保图片能自然融入操作流程，辅助用户理解信息。​主题情感强化：巧妙融入福建博物馆特色文物符号，深化界面的文化主题氛围。同时精准把控装饰元素占比，以文物介绍、展览信息等核心内容的传达为首要目标，保障内容可读性与易用性。馆藏图片作为强化主题的重要元素，需严格筛选，避免无关或质量不佳的图片干扰主题表达。​动态布局适配：针对图文混排的展览介绍、文物详情等模块，提前规划弹性布局方案。让用户在浏览时感受到连贯、流畅的视觉体验。在动态效果中运用馆藏图片时，需注意图片的加载速度与显示效果，确保动态过渡自然、流畅，不影响用户体验。​UI设计项目式教程课程介绍案例分析设计流程实战练习

设计准备阶段是博物馆APP项目实施的基石，聚焦于需求转化与体系化规范的建立，该阶段通过系统性规划，为后续界面设计与开发提供标准化依据，有效规避设计偏差与实施风险。

在进行功能框架梳理前需要进行竞品分析，博物馆APP的竞品分析需要考虑多个方面，结合市面上的APP来进行分析提炼，如表8-2所示。福建博物馆项目——设计方案UI设计项目式教程课程介绍案例分析设计流程实战练习表8-2竞品分析竞品分析APP名称核心功能特色功能优势