13 / 13Independent UI Exploration / 2019
Shopping App UI
一套内容型购物 App 的完整界面练习,覆盖登录、内容发现、搜索、商品、收藏、购物车和个人中心。重点放在信息层级、视觉连续性和从内容到购买的路径。
SERVICESUI Design / Visual System / E-commerce
ROLE独立界面设计练习
DESIGN & BUSINESS
把品牌视觉能力延伸到商品信息与操作结构
这是一项独立的购物界面设计练习。我将内容发现、商品判断与购买动作拆解为相互衔接的页面,探索视觉吸引如何与清晰的信息层级配合。设计重点是让内容、商品与操作结构形成连贯关系,补充展示我对电商体验的理解。
PRODUCT FLOW
从内容浏览自然进入商品选择
首页以编辑内容和趋势模块建立兴趣,搜索和分类帮助用户快速缩小范围,商品页、收藏与购物车承接选择。视觉上用粉色作为操作提示,黑白界面保证商品图和信息保持清楚。
USER JOURNEY
一条完整的购物路径
界面围绕用户的四个关键动作展开,每个阶段都提供清楚的下一步。
- 01Enter
登录与品牌认识
用简洁入口建立品牌语气,减少第一次使用的负担。
OUTPUTSign in / Sign up - 02Discover
内容与商品发现
趋势内容、推荐和分类共同帮助用户形成选择方向。
OUTPUTHome / Feed / Category - 03Decide
搜索与商品判断
筛选、详情、收藏和评价补齐购买所需信息。
OUTPUTSearch / PDP / Favorite - 04Complete
购物车与账户
结算和订单信息保持直接,个人中心承接后续关系。
OUTPUTCart / Checkout / Account
Entry and discovery
登录、首页和内容发现保持统一的品牌语气。品牌情绪进入界面,但不遮蔽内容和商品入口。


INFORMATION HIERARCHY
商品图、价格和操作始终有固定位置
在高密度商品页面里,位置的一致性比装饰更重要。商品标题、价格、筛选、收藏和主要按钮遵循稳定顺序,用户在不同页面之间移动时不用重新学习。
Search, cart and account
搜索、购物车与账户延续相同的操作提示与信息位置,让不同页面形成连贯的视觉系统。



Content creates interest. Structure carries it to purchase.
视觉负责吸引,信息架构负责让用户顺利完成下一步。














