跳至正文

网页设计与网店

网站:滚动影片网站与 Shopify 网店——来自法兰克福的网页设计

我打造令人难忘的网站和真正能卖货的网店:为您的品牌设计,采用自有技术,照片和影片一手包办。

案例 · Nexentrium

像看电影一样滚动的网站

Nexentrium 是我自己的软件品牌,它的首页是一部随滚动播放的电影:夜里,镜头飞向一座高楼,乘玻璃电梯沿外立面而下,穿过一座地下大厅,停在前台,最后像电影院里一样滚动演职员表。鼠标滚轮让镜头运动前进或后退。这样的网站,我也可以为您打造。

nexentriumtech.com
Nexentrium 首页在浏览器中的录屏:从夜晚的高楼一路到片尾演职员表
同一首页在手机上
nexentriumtech.com · 录制于 2026 年 10 月 15 日
  • 鼠标滚轮就是胶片盘

    每一段镜头运动都是为这个网站生成的:静帧用 Seedream,运动用 Seedance,并以每八帧一个关键帧编码。因此滚轮每一次跳转都能立刻到位。

  • 一次塔楼之旅

    每个板块都是一层楼:屋顶、楼层平面、展厅、大厅、午夜屋顶、办公室、大堂和前台。边缘的一座塔楼标出您当前所在的位置。

  • 网速慢时也一样

    在手机上和网速慢时会播放更轻量的版本,想节省流量的人可以关闭视频。没有任何文字需要等影片加载。

  • 德语和英语,毫无遗漏

    只要有一句缺少译文,类型检查就会失败。因此不会有翻译了一半的页面上线。

一层接一层

每个部分发生了什么

每个片段都是同一段旅程的一部分:向下滚动一次,再向上滚回来。

  1. nexentriumtech.com
    nexentriumtech.com — 俯冲

    01 · 屋顶

    俯冲

    夜里从空中飞向塔楼。镜头越往下,标题越往后退。网速慢时,页面会在标志后等待,直到旅程的第一帧出现,最多三十秒,并且随时可以跳过。

  2. nexentriumtech.com
    nexentriumtech.com — 塔楼即平面图

    02 · 楼层平面

    塔楼即平面图

    从上面看是一座塔楼,从里面看是一张平面图:各个产品是同一栋楼的不同楼层,让人在看到单独卡片之前就明白它们如何组合在一起。

  3. nexentriumtech.com
    nexentriumtech.com — 每层楼都是一个房间

    03 · 展厅

    每层楼都是一个房间

    在标题背后,镜头沿着外立面逐层下降。每个产品都有自己的房间,窗外城市灯火闪烁,房间里的屏幕上播放着它自己的网站,逐帧录自线上页面。

  4. nexentriumtech.com
    nexentriumtech.com — 乘玻璃电梯下行

    04 · 电梯

    乘玻璃电梯下行

    乘玻璃电梯沿塔楼外侧下降,经过一层层楼,再继续降到街面以下,直到大厅豁然展开。

  5. nexentriumtech.com
    nexentriumtech.com — 支撑一切的东西

    05 · 大厅 · 地下层

    支撑一切的东西

    在没人留意的地下:镜头穿过大厅奔向光亮,那里矗立着每个产品赖以构建的四项核心能力。

  6. nexentriumtech.com
    nexentriumtech.com — 城市连成一体

    06 · 屋顶 · 午夜

    城市连成一体

    午夜的屋顶上,镜头静止不动,延时画面中光线从塔楼向外蔓延,直到整座城市一直到地平线连成一张网。在这里,滚动就是城市正在连接。

  7. nexentriumtech.com
    nexentriumtech.com — 楼上的灯还亮着

    07 · 办公室

    楼上的灯还亮着

    我的立体肖像:从照片估算出深度图,镜头环绕一圈时,每个像素按自己的深度移动。于是面孔在黑暗中微微转动。

  8. nexentriumtech.com
    nexentriumtech.com — 告别

    08 · 大堂 · 前台

    告别

    大堂里是常见问题,随后镜头从屋顶升起,直到城市变成一个光点,再穿过大门回到楼内。前台会按访客的时钟显示此刻是否有人值守。

  9. nexentriumtech.com
    nexentriumtech.com — 结尾,像在电影院

    09 · 片尾

    结尾,像在电影院

    离开前台后,画面收成宽银幕。镜头从大堂向后退出,沿着高楼升起,最后落在影片开头的那个画面上。演职员表随鼠标滚轮的节奏在画面上滚动:产品是演员,各自标着所在楼层,然后是片尾字幕卡。声音也随之渐渐变轻。

亲自走进一个房间

产品房间里的每个视角都有自己的地址。这些链接会直接在那里打开页面。

网店

我搭建的网店、平台与艺术家网站

基于 Shopify 的自有前端,具备标准主题没有的功能。录屏展示了访客滚动浏览首页时的样子。

korndex.de
korndex.de — 电脑上的首页
korndex.de — 手机上的首页

Korndex

一家专业磨料、配件和机器网店,提供德语和英语版本。

  • 粒度查找工具,加上一套系统逻辑:知道每台机器该配哪种耗材。
  • 按德国价格标示法规显示单位价格,由包装规格计算得出。
  • 只要某条德语文本缺少英语对应,测试就会失败。
  • Next.js
  • TypeScript
  • Shopify
  • Vercel
korndex.de
glossdoc.com
glossdoc.com — 电脑上的首页
glossdoc.com — 手机上的首页

Glossdoc

一家汽车养护、漆面修复和配件网店,在 Shopify 之上使用自建前端。

  • 无头架构:Next.js 负责展示商品,Shopify 提供数据和结账。
  • 网址与旧 Shopify 主题保持一致,以保住在 Google 上的排名。
  • 页面每五分钟自动更新一次,无需重新构建。
  • Next.js
  • TypeScript
  • Shopify
  • Vercel
glossdoc.com

更多示例

convimi.com
convimi.com — 电脑上的首页

CONVIM!

自有项目

我自己的项目:模特、摄影师、化妆师、音乐人和电影人在这个平台上找到身边的合作伙伴。

convimi.com
valentina-reina.com
valentina-reina.com — 电脑上的首页

Valentina Reina

艺术家网站

为基辅画家 Valentina Reina 打造的网站与画廊:明亮、安静,让空间属于画作,而不是页面。

valentina-reina.com
sofiaalina.com
sofiaalina.com — 电脑上的首页

Sofia Alina

模特网站

为法兰克福的模特兼演员 Sofia Alina 制作的网站:版式如同一本杂志,含作品集、展示短片、全部合作经历和一张可翻转的模特卡。

sofiaalina.com

您也想要这样一家店?

告诉我您卖什么。我来告诉您这家店可以长什么样、要花多少钱。

咨询网站或网店

行业

适用于各行各业的网店

卖什么,决定一家店需要具备什么能力:配件需要查找器,服装需要尺码,食品需要配送规则。我围绕您的产品来搭这家店。

  • 工坊与手艺
  • 汽车与配件
  • 家具与家居
  • 服饰与配件
  • 美妆与护理
  • 食品与饮料
  • 艺术与版画
  • 批发与 B2B
  • 定制产品
  • 数字产品

属于您自己的网店

一个长得像您品牌、而且卖得动的网店。

很多网店长得一样,因为太多店都跑在同一批模板上。我按您的产品和您的客户来设计这家店:通往购物车的路径清晰、手机上页面够快、文案在别人开口之前就把疑问答掉。

后台跑的是 Shopify。商品、价格和订单由您在 Shopify 后台维护,付款走 Shopify 的安全结账流程,支持 PayPal、Klarna、信用卡等多种方式。我负责把一切配置好、把您生意所需的东西对接起来,交给您一个从第一天就能卖货的店。

  • 500+

    作品

  • 200+

    客户

  • 12

    年从业经验

摄影、影片、设计与网站,一起来。

我负责什么

您的网店需要的一切

  1. 01

    店铺设计

    首页、分类页、商品页和购物车,按您的品牌来设计,并以手机优先。

  2. 02

    Shopify 配置

    商品、规格、系列、配送、税费和支付方式,全部配置到位。

  3. 03

    专属功能

    产品查找器、带实时价格的配置器、物料清单,以及支持货到开票结算的 B2B 账户。

  4. 04

    店铺迁移

    从 WooCommerce、Shopware、Wix 或旧的 Shopify 主题迁过来,并为每个旧网址设置跳转。

  5. 05

    系统对接

    支付、物流、评价、邮件订阅、Google 购物、Instagram 和各大平台,全部在 Shopify 里打通。

  6. 06

    SEO 与速度

    页面够快、结构干净、面向 Google 的商品数据,需要的话还可以加语言版本。

  7. 07

    产品照片与影片

    白底产品图、使用场景图和产品短片,按商品页、首页和广告的需要来规划。

  8. 08

    交付与后续支持

    Shopify 后台的上手培训,需要的话在店铺上线后继续提供支持。

Shopify

我把您的店搭起来,并把一切对接好

无论是新店还是已有的店:我在 Shopify 里把它配置好,或者接手您现有的店,并把您生意里涉及的各个部分都连起来。之后您只需在一个系统里工作,订单、客户、库存和收款都在同一处。

支付
  • PayPal
  • Klarna
  • 信用卡
  • Apple Pay
  • Google Pay
  • 货到开票结算
配送
  • DHL
  • DPD
  • GLS
  • Sendcloud
  • 配送规则
市场推广
  • Google 购物
  • Instagram 与 Facebook 商店
  • Klaviyo
  • Google Analytics
  • Meta 像素
信赖之选
  • 顾客评价
  • Cookie 同意
  • 已内置法律文本
更多渠道
  • 亚马逊
  • 批发与 B2B
  • 多语言

您用的是别的工具?只要有对应的 Shopify 应用或接口,我就把它接上。

三部手机上显示着 KORNDEX 网店的页面

网店、照片与影片

网店靠图片卖货

因为摄影和拍片也由我来做,产品图、使用场景图和产品短片都是贴着这家店来做的:商品页、首页和广告各自所需的尺寸一应俱全,视觉语言统一。您不需要再找第二家供应商,也不用再走一轮沟通。

不只是网店

当然,也做网站

并不是每个项目都需要网店。我也设计和开发不带网店的网站,从落地页到像 Nexentrium 那样带滚动影片的首页,配有咨询或预订表单,速度快,为手机而做。您现在看到的这个网站也是我做的。

  • 艺术家与作品集

    作品、展览、日程,以及一条通往购买的路径。

  • 餐厅与酒店

    菜单、客房、预订,配自有照片。

  • 企业

    服务、案例、团队与咨询。

  • 落地页

    为一个产品、一次发布或一场推广所做的单页。

流程

从第一次谈话到第一笔订单

  1. 01

    沟通

    您卖什么、卖给谁,这家店需要具备什么能力?之后您会收到报价。

  2. 02

    构思

    页面结构、分类、商品页,以及帮助成交的各项功能。

  3. 03

    设计

    手机端和桌面端的设计稿,用您真实的产品而不是占位图。

  4. 04

    实施

    配置 Shopify、录入商品、对接支付、物流和应用,并做测试下单。

  5. 05

    上线

    店铺正式上线,您会得到上手培训,需要的话之后继续提供支持。

套装

您可以从哪里开始

开店套餐

  • Shopify 店铺配置完成
  • 基于主题的设计
  • 支付与物流已接通
  • 后台上手培训

定制网店

  • 自有店面前端、自有设计
  • 查找器、配置器或 B2B
  • 按需对接
  • 可按需做多语言

迁移与改版

  • 接手现有店铺
  • 换新设计,网址不变
  • 商品与客户已迁移
  • 为旧链接设置跳转

网站

  • 作品集、公司站或艺术家站
  • 咨询或预约表单
  • 速度快,为手机而做
  • 可按需加入滚动影片、照片和影片

每个套餐都可以加项或减项。范围和价格写在报价里,在我动手之前就已确定。Shopify 的月费由您直接付给 Shopify。

关于网店与网站的问题

更多解答,请移步常见问题.

您也在筹划这样的项目?

请告诉我您的网站或网店需要实现什么,以及是否已有页面。之后您会收到一份范围和价格都确定的报价。咨询不具任何约束力。

价格取决于工作范围,在我动手之前就写在报价里。 价格是怎么算出来的

4.8 分(满分 5 分) · 23 条 Google 评价. 在 Google 商家页面查看评分