《移动UI设计项目教程》课件——33.学习单元5-手机天气界面设计全流程复盘.pptxVIP

手机天气界面设计全流程复盘

目录CONTENTS01画布与背景基调02文字与图形核心03底部标签构造04托盘与分栏交互05图标与微交互06输出与复盘

01画布与背景基调

画布建立1080×1920RGB项目启动的核心：新建1080×1920像素、72dpi、RGB模式的竖版画布，完美适配主流手机全面屏。竖向构图确保后续预览无黑边，为文字与交互元素提供基准对齐网格。安全区域需预留顶部状态栏与底部指示条安全区，避免重要信息被系统UI遮挡。

背景基调：色彩与纹理通过纯色与滤镜纹理的叠加，创造富有层次感的背景。1.深海绿底色使用#0a7776填充，奠定清爽沉静的情绪基础。2.半调纹理应用“彩色半调”滤镜，混合模式设为“色相”，填充降至20%，形成微观动感。

02文字与图形核心

信息层级：文字的力量通过字体、字号和位置的编排，建立清晰的信息架构。TuesdayRobotoLight140pt20℃RobotoLight200pt同一字体家族的粗细与字号对比，既能保持品牌一致性，又能用比例差异完成信息分级。

图形深度：投影的魔法为矢量云朵添加图层样式，模拟顶部光源，使其在背景上产生悬浮感。距离:10px扩展:0%大小:20px

03底部标签构造

标签设计：造型与色彩通过矩形与三角形的组合，以及互补色的运用，构建带尖角的标签。1矩形+三角形=