Emele Collab的作品集以超大名称列表、案例卡和编号图库提供多种浏览方式。白底黑字让项目名称很突出,小预览又保留图像兴趣。多视图的价值,来自它们共同指向同一套项目资料,而不是各自成为一份独立目录。

核心结论

  • 名称、类型与图片分别满足不同查找方式。
  • 多视图需要共用项目身份与当前位置。

大名称让列表成为主画面

项目名在页面中央紧密堆叠,角落保留工作室身份与联系入口,右下出现独立预览。文字本身成为构图,熟悉名称的人可以直接扫到目标,画面也有鲜明的工作室气质。

对首次访问者,名称未必说明服务。预览附近可补类型和一句简短任务,让人知道这是网站、品牌或其他工作。当前项目应有清楚对应,不必要求用户仅凭预览图片猜是哪一行。

界达设计更偏好让视觉预览带着项目名称和工作范围出现。这样图片引起兴趣之后,读者有办法继续理解内容,也更容易在联系时表达具体问题。

居中黑色大字名称列表与右下项目预览,一行名称模糊
002名称视图|名称有冲击力,预览还应解释项目类型与对应关系

卡片给出工作范围

卡片视图在图片旁列Web、Branding或Branding + Web等类型,底部还有All、Web、Branding入口。比名称列表多一层说明,适合按服务范围查找。

组合类型应有稳定分类规则,同时属于Web与Branding的项目可以在两组中出现,详情再解释各部分。当前条件与结果数量也宜可见,避免切换之后看见图片变化却不知道筛选范围。

手机里名称列表、卡片和编号图片使用不同密度。视图切换应保留当前项目和位置,预览需要可收起并避免遮住名称;视觉布局可以变化,定位线索应持续存在。

大字列表下叠有带名称类型的案例卡与数字图片片段
005多视图片段|卡片类型解释范围,分类应作用于同一套项目资料

图片编号需要项目归属

Gallery以统一网格放不同图片,编号031至054位于图下。编号方便指定某张画面,图片比例保持差异,也适合按视觉兴趣浏览。

一张图不一定等于一个独立项目,编号应能回到项目名称与详情。多张属于同一项目时,可在详情说明组内关系,避免访客把每张截图都理解为不同客户。

从Gallery到Grid或List,可以保留已选项目,而不是回到目录顶部。多视图越丰富,资料字段越需要统一:名称、类型、编号与联系时引用的对象应对得上。

不同尺寸图片按网格排列,下方为031至054编号
011图片索引|编号帮助指定素材,项目名称与打开后的归属仍需解释

常见问题

作品集有三种视图就更好用吗?

各自有明确任务才有价值。名称查找、服务比较和视觉浏览可以互补,但切换后要保持同一项目与位置。

图片编号可以作为案例名吗?

编号适合定位图片,仍应关联项目名称与工作范围。一项目多图时尤其需要说明归属。

设计检查清单

  • 预览与当前项目名称对应。
  • 组合服务分类有统一规则。
  • 图库编号可回到项目详情。

让作品浏览带着具体信息进入咨询

作品集可先统一项目字段,再规划名称列表、案例卡和图库之间的切换及联系引用。

界达设计工作室(JVDS)提供UI/UX设计与网站设计、开发服务,可一起梳理页面内容、界面结构与实现需求。

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