材料作品集设计:让近景有名字与解释界面设计预览

材料作品集设计:让近景有名字与解释

作者:界达设计工作室(JVDS) 阅读时间:约 3 分钟

Comence 的作品集让材料近景占据大面积,白色页面、细线和圆形箭头退到次要位置。材料作品集设计可以借这种克制突出表面与结构,也需要保留作品名称、类别和说明,让观众记住的不只是一块好看的纹理。

大图突出材料,也需要稳定身份

混凝土纹理铺在背景上,左侧叠放白色移动页面,里面再次出现近景;右侧则以一块立体混凝土和嵌入板呈现结构。两种图像让平面的表面纹理和实体形态形成对照,黑白灰保持集中,菜单和序号没有与材料争夺注意。

序号 03 和圆形前后箭头提供有限的浏览线索,图片下方才开始说明。若作品在图库中切换,名称与类别适合在图旁有稳定位置,让读者能够再次找到刚看过的对象。ADD 3 PROJECTS 的文字也需要确认实际动作,是载入更多还是加入集合,明确动词比依靠下划线更能说明下一步。

Comence混凝土近景、白色移动项目页及嵌入板块的材料展示
材料图左侧|白色项目页叠在纹理上,序号与箭头提供有限浏览线索。

项目字段把视觉印象转成比较条件

包装页在图片下对齐 Name、Project type、Idea、Key material,再列图形类型、风格、尺寸与数量。标签和值左右分开,细横线划分信息组,视觉保持安静,却为读者提供了项目轮廓。图库与获奖栏目另有选中状态,表明同一作品集合可以从不同角度浏览。

字段里出现纹理纸板、品牌字形和具体尺寸,这些信息能解释图片中的材料与设计方式。JVDS 更偏好围绕当前作品选择属性,材料项目、书籍与品牌项目可以有不同字段,保持共同阅读规则即可。为了形式对齐而强填相同属性,反而会稀释重要内容。

Idea 与 Innings 等标签还可以使用更直接的名称或短说明。简洁不仅是字少,也包括读者不必猜一个词在这项作品中代表什么。

Comence包装项目的名称类型材料字段与Projects Gallery Awardees浏览标签
字段拼图中央|图片下方逐项列出类型和材料,短字段承接快速理解。

展开说明与相关作品承担不同阅读深度

Architectural Concrete Book 详情先列服务类别和标题,再分段介绍概念与制作,并保留 Credits 和 HIDE。另一块 Idea and implementation 继续解释材料,Relevant projects 则重新提供序号、箭头和作品图片。身份、深入说明与延伸浏览逐步出现,使看图与读理由有各自的节奏。

部分概念段落用很浅的灰色,相比后面的说明退后较多。若它们是需要阅读的正文,应提高可辨认程度,避免展开后仍像背景文字。收起动作也适合回到原作品位置,让深读不会打断浏览。

相关作品可以说明关联依据,例如材料、服务类别或设计方法,并保留项目名称。这样,从混凝土书籍进入下一件作品时,读者知道这次跳转的关系。作品集的留白因此不仅突出图片,也为项目身份、解释和关联各留出清楚的位置。

Comence书籍项目标题、服务类别、概念说明Credits与相关作品的三屏展示
说明拼图中央与右侧|项目详情保留标题和分段,相关作品另设浏览方向。

让作品集同时支持看图与理解项目

如果你的材料、品牌或设计作品集需要整理大图、规格和概念说明,可以先定义每件作品的身份与相关关系,再安排分层阅读。

界达设计工作室(JVDS)提供UI/UX设计与网站设计、开发服务,可协助规划作品集、项目详情和图库浏览页面。

联系界达设计,聊聊你的项目

咨询电话:17346567675 聊聊你的项目
链接复制成功

从想法到落地,我们一起完成

以用户体验为核心,打造真正可用、可增长的数字产品

和我谈谈您的项目