服装商城界面设计：R3用人物照建立风格

R3的服装商城界面设计，把人物照片排成一面两列的穿搭墙。黑底让橙、紫和灰色摄影更鲜明，店铺目录又换成字母索引，商品页用黄色标出选择。风格浏览与明确查找有了不同入口。

两列人物照，先让穿着气质连续起来

目录里的黑色连帽衫、外套和T恤都出现在人物身上，照片大致沿两列网格排列。衣服轮廓、姿态与背景色构成连续节奏，商品不是从身体上分离出来的孤立物件。

桌面左侧留着Men、Women和品类列表，new items用哥特字形；照片占右侧大部分宽度。移动画面仍然是两列照片，分类移到上方横排。品牌语气与观看方式保持，工具的位置随屏幕改变。

这种目录适合以风格发现为主要任务的少量精选内容。若需要连续查价，可以补上轻量名称、售价或可展开身份。照片代表一件衣服、一套搭配还是店铺入口，应在点击前有可辨认线索。

界达设计更看重摄影与目录内容的配合。大人物图确实好看，但页面准备时要核对每张照片的对应商品，别让一张完整穿搭自动被理解成所有单品都可购买。

店铺页用字母代替更多照片

店铺索引从A、B、C等分组展开，每组下面是可扫描的名称。字母继续使用哥特字形，B组的线条和其中一个店名变成黄色。品牌个性留在组头，查找工具落在普通文字。

桌面多列、手机两列，各组之间有细线和较大空白。它比一长列品牌标志更容易按名字找内容，也不用为每个店铺准备相同尺寸的图片。

左边仍有服装品类，意味着店铺与品类可以一起出现。正式交互应说明当前是在筛店铺，还是筛某店里的商品，并露出当前条件。保持范围清楚，比让两个列表看起来属于同一版式更重要。

黄色在详情里成为很直接的选择信号

商品详情先显示店铺名与商品名，再给大幅橙底实穿图。价格下面是尺码圆点，L用黄圈标出，Dimensional grid就在上方附近。选中状态不需要额外大卡片，一圈亮黄已经和暗底拉开距离。

buy now继续用黄色哥特字，旁边的Buy in 1 click有电话图标。字体和颜色带来很强识别，也需要让两个动作的结果易懂。若电话图标代表联系购买，可在文案里直接说明；若是不同结算方式，也应有清楚区别。

折叠信息把商品说明、特征、评价及配送等分开。购买区域可以保持紧凑，详细资料再按需展开。尺码表打开后能否保留L、缺货怎样显示，应该在原型里一起看。

图示模特参数里Height的值是Black，字段与内容没有对应。继续打磨时应先修正真实资料，再调整细节装饰，身高、颜色与材质不能只为凑相同长度互相代替。

暗底里的小字，还需要正常尺寸检查

照片色彩很强，导航与参数多用细小灰字，视觉上很安静。购物阶段却需要读清商品身份、尺码和条件，正式页面最好用真实设备尺寸核对这些字，而不是只看整页缩略图。

R3可借鉴的是内容工具随任务变化：穿搭图适合看风格，字母索引适合找店铺，详情区域适合选具体版本。先把这三件事说清，再决定哥特字体和黄色用在哪里，品牌个性会更容易落到实用界面里。