设计师 Afra M 提出 Zara App 移动端概念重设计方案

设计师 Afra M 近日在作品集中发布了一组 Zara App 移动端 UI/UX 概念重设计方案，重点针对用户在结账环节遇到的导航摩擦问题，提出了一套以网格秩序为核心的界面系统。该作品并非 Zara 官方更新，而是个人设计探索案例，由设计博客 Abduzeedo 收录展示。

重设计动机

Afra M 将「解决移动端结账导航摩擦」作为切入点，重新审视商品发现、筛选与结算三类核心页面。在她的设计中，模块化网格被作为骨架贯穿全局，所有界面元素严格遵循同一套垂直节奏与对齐规则，让用户视线能够自然流动。这一思路回应了移动电商中长期存在的「层级混乱、操作路径不清晰」等共性问题。

视觉系统与排版

配色方面，方案采用深色单色背景，使商品图片在界面中更突出。字体层级则以「大号粗体标题 + 小号正文」的强烈对比构建视觉张力，按钮主体使用纯黑实底以强调主要操作，次要选项改用更柔和的灰阶调性。

字体尺寸依据垂直网格结构设置，断点间比例稳定
卡片之间留白统一，强化商品信息块的边界
自定义图标简化导航选项，降低识别成本

交互与导航优化

在导航与交互层，方案将主要控制按钮放置在拇指可及的热区范围，减少用户单手操作时的跨越距离。筛选系统被重构为更直接的层级结构，配合激活态下的微动效，引导用户完成从浏览到加购再到结算的全流程。整体而言，这套作品呈现了较为克制的视觉语言，但缺少面向真实用户的可用性测试数据，其实际效果仍停留在概念验证层面。

原文最后提示，可在 Afra M 的个人作品集页面查看完整设计稿。