《UI设计-AIGC驱动赋能界面完美设计》课件 6.1 相关知识

06项目六设计与制作“校缘通”App项目——

界面设计（三）UI设计——AIGC驱动赋能界面完美设计6.1相关知识6.2任务实施6.3技能提升066.1相关知识UI设计——AIGC驱动赋能界面完美设计6.1.1App的列表布局方式6.1相关知识列表布局是App界面中最常用的布局形式，整体由缩略图与文字信息组合构成，这类布局对图片质量要求较低，设计核心侧重文字内容的呈现。适用场景：产品对图片质量无高要求，但需展示大量内容，且需要用户通过优惠信息、价格参数等维度进行内容对比时，可采用列表布局。优点：自上而下的展示形式契合人眼自然阅读习惯，便于用户快速扫视、对比信息；单条信息占用版面空间小，一屏可承载更多内容，提升信息展示效率。缺点：图片占比偏小，难以丰富展示产品细节；单屏信息量较大，用户长时间浏览易产生视觉疲劳。设计列表页时，需遵循以下核心原则：留白的把控张弛有度，根据内容层级做好亲疏区分；元素对齐方式规整统一；粗细元素的搭配组合营造出视觉节奏感；需要重点突出的元素选用明快的色彩；整体列表的视觉层次感清晰分明；采用虚实结合的设计手法时，需遵循实形元素在前、虚形元素在后的视觉逻辑。6.1相关知识

1.单行列表

大多数消费类产品的结果页面都会以单行列表的形式进行展示，左边为图，右边为文字信息、评分和价格等，这样的展示方式易于用户阅读，如图6-1所示。图片能够诱导用户进行点击，文字则用来解释商品。图6-1

单行列表6.1相关知识2.双行列表双行列表页的布局形式空间利用率更高，每个内容卡片均采用上图下文的排布方式，既能充分利用版面，也能让页面视觉更饱满，如图6-2所示。图6-2双行列表6.1相关知识6.1.2大图网格大图网格布局以单行为单位展示单张图片，图片在版面中占比大，单屏最多可展示1～2张内容，适用于以图片浏览为核心体验的产品（见图6-3）。适用场景：产品展示内容数量较少，且有专人维护图片质量，大图能呈现更佳视觉效果时使用，多见于图片类、租房类平台及商品推荐列表等界面。优点：自上而下的展示逻辑契合人眼自然阅读习惯，便于信息的有效传递；大尺寸图片能充分展示产品细节，丰富界面视觉效果的同时，更好地凸显品牌调性。缺点：单屏可承载的展示内容较少，不利于用户快速查找信息及多维度对比内容。图6-3大图网格6.1相关知识6.1.3两列网格布局该布局将屏幕横向划分为两列，单栏内采用上图下文的内容排布形式，整体呈现网格状视觉效果；用户的浏览顺序趋近Z字形，布局中图片占比可观，对图片质量要求较高，适用于以图片对比为核心需求的商品展示场景。适用场景：产品主打图片类商品对比，且无须以大图形式展示内容时，可采用此布局设计；两列网格布局也常与列表布局结合使用，适配更多展示需求。优点：便于用户对图片类商品进行对比选择，单屏可展示4～6条信息，视觉呈现效果佳；缺点：文字展示区域有限，仅能呈现商品标题、标签、价格等核心文字信息。图6-4两列网格布局6.1相关知识6.1.4两列瀑布流布局两列瀑布流布局与常规两列布局均为屏幕横向二分的形式，核心区别在于：瀑布流布局的图片宽度固定，高度随图片实际尺寸自适应变化，整体展示形式更具不规则性，适合用户浏览目标不明确的使用场景。适用场景：与两列网格布局的适用场景相近，核心差异为——两列网格布局适用于产品数量较少、用户浏览目标明确的情况；而两列瀑布流布局多用于用户目标不明确、产品数量庞大，且支持无限下滑加载的展示需求。优点：图片高度自适应，能更丰富地展现图片细节；支持无限下滑的交互形式，用户可浏览的内容更多。缺点：产品展示时图片尺寸不一，易出现大图更易被关注、小图易被忽略的情况；技术实现多采用预加载方式，无法提前预估展示的产品数量。图6-5两列瀑布流布局6.1相关知识6.1.5三列网格布局三列网格布局是将屏幕横向三等分的展示形式，也可称作宫格布局。因单个展示模块尺寸较小，布局核心以图片展示为主，文字信息通常仅保留简洁标题，适合应用在用户浏览需求不明确的页面中。适用场景：产品仅需展示大量内容，且无需用户通过图片进行细节对比，可采用三列网格布局。优点：版面利用率高，单屏能展示的产品数量最多，便于用户快速浏览并筛选感兴趣的内容。缺点：图片展示尺寸偏小、画质呈现效果有限，文字信息仅能做简单展示，内容对比性较弱，整体界面的视觉趣味性与新鲜感不足。图6-6三列网格布局6.1相关知识6.1.6拼图布局拼图布局的视觉呈现上，头部通常以单张大尺寸Banner展示，下方则由多张图片以多样的拼图形式组合排布；下方展示的内容一般为与头部Banner相关的商品，该布局适用于平台主动推荐的商品列表场景。适用场景：拼图布局（含两列形式）在常规商品列表中应用较少，因不规则的拼图画面对图片维护的成本要求较高，且小尺寸图片易被用户忽略，因此更多用于平台推荐页面，由编辑对图片统一处理后再上传展示。优点：采用杂志式的排版形式，视觉样式更活泼美观；产品的主次层级表达清晰，可通过图片占比大小直观区分核心推荐与次要展示的信息