我用 Framer 这软件做了个网站, 效果挺酷眩, 还需要前端吗?

2023-01-06 10:04:33 +08:00
 byewind

首先请在线欣赏我的网站 👉 https://snow.byewind.com

为什么使用 Framer 软件来做网站

首先是因为 Framer 有免费套餐, 个人做几个网站基本上是免费的.并且可以通过 cloudflare 来设置自定义域名, 具体可以翻看我以前的帖子. 其次是 Framer 的软件交互和 Figma 类似,对设计师很友好, 使用起来不困难. 再次是 Framer 目前还没有被墙, 可以正常访问.

制作过程中的难点

设计的过程还算顺利, 因为我就是职业设计师, 所以在设计上没什么问题. 但是在用 Framer 实现的时候就遇到了很多的问题. 第一版是没有滚动特效的, 查看第一版 👉 https://snowui.framer.website/Light-version 然后网站发布没多久 Framer 就推出了滚动特效, 当看了 Framer 官方的例子之后觉得我的网站太没亮点了, 于是就马上进行重新设计和改版, 其实也不想改太多, 毕竟做起来还是有很多工作量的.

讲了这么多, 重点来了. 目前版本的难点在于次屏两张大图的滚动特效, 刚开始完全不知道 Framer 做此动效的原理, 只能一点一点试, 而且每个动效选项都试个遍, 然后测试动效的数值. 就这么简单的放大缩小的动效足足做了 2 天才大致搞明白 Framer 软件中的原理. 其实有很多的问题出在软件中没有提供更多的参数配置造成的, 就不展开说了.

总之除了这个动效之外其他的还算顺利, 做起来都不难. 于是乎, 我就这么把网站给做完了.

最后的感想是现在的软件如此先进了, 还需要前端吗?

作为比较超前的产品体验设计师, 我懂的东西会比大部分设计师要多. 我知道有非常多的搭建网站的工具, 比如 webflow, wix 等, 甚至 Notion 都可以用来建站. 使用这些工具能让像我这样的设计师不用写一行代码就能搭建出网站来. 也就是设计师可以从网站设计到上线一个人都搞定. 那么既然这样还需要前端吗? 还需要 vue.js, React, Tailwind 等前端工具吗?

答案是肯定需要的. 因为除了官网, 落地页等, 我们还需要搭建 SaaS, 后台系统等产品, 这些产品不太可能使用 Framer, webflow, wix 等软件来搭建. 正如我的核心产品: Snow Dashboard UI Kit, 它的出现就是为了让中小微企业更快地搭建更为先进的中后台产品.

5960 次点击
所在节点    分享创造
51 条回复
molvqingtai
2023-01-06 10:11:23 +08:00
需要像你这种官网只是展示,工作中往往是业务逻辑比较多,这块是没法通过低代码的形式来实现的
7gugu
2023-01-06 10:24:09 +08:00
导航栏的毛玻璃效果太 sexy 了,爱了
sillydaddy
2023-01-06 10:24:56 +08:00
> “正如 Snow Dashboard UI Kit, 它就是为了让中小微企业更快地搭建更为先进的中后台产品.”
对楼主的东西比较感兴趣,想进一步了解一下,但“中后台产品”这个名词,把我吓着了😂,具体是做什么的呢?看示意图也没有看明白。
byewind
2023-01-06 10:27:50 +08:00
@molvqingtai 尽量说服产品抛弃他脑子里的杂念, 只做单页一直滚到底的落地页. 😊
byewind
2023-01-06 10:28:59 +08:00
@7gugu 用 Framer 实现起来很简单, 但是这个软件说毛玻璃会影响性能, 所以把实现的按钮隐藏了, 我费了老半天才搞明白怎么做出毛玻璃效果.
byewind
2023-01-06 10:30:49 +08:00
@sillydaddy 就是后台的 UI Kit 或设计系统, 和 Ant design, 饿了么后台等是一类产品. 只不过我的 UI Kit 还没有前端化.
有兴趣的化可以一起来做前端化.
codermagefox
2023-01-06 10:51:05 +08:00
看了一下,说白了就是设计了一个 Theme...现有的中后台只要引一个 Motion 封点动画组件,就可以做到你这个的所有效果.主要还是不太明白当前这套东西有什么价值,做出来累的要死估计个人开发者做的还不会有什么人用,何苦呢
Sivan
2023-01-06 10:54:48 +08:00
真不错,超出了我对 Framer 能力的认识。相关的模版多一点,社区丰富一点,甚至很多做 landing page 的 SaaS 工具都变得没必要买了……
codehz
2023-01-06 11:06:38 +08:00
模糊效果虽然还行吧,但你这透明度是不是太高了,遇上背景是白色的地方,文字就看不清了——对比度太低了
byewind
2023-01-06 11:08:09 +08:00
@codermagefox 我的网站的设计是全新的, 也就是创新, 不是所有部分都创新, 但至少那两张大图的动效是创新的.这就是其一的意义.
其二的意义是我提供了我网站的 Framer 的模板, 其他人想做和我这网站类似的网站只需更改内容就行, 大大节省工作量, 如果其他人用模板来搭建自己的网站, 这是目前所有网站搭建方式中最高效的. 你不可能用一行命令搞定一个这么好看且内容都是定制的网站.
byewind
2023-01-06 11:10:08 +08:00
@Sivan Framer 目前只有官方的社区, 我也上传了模板, 他们没有上架, 我觉得自己可以搞个第三方社区, 提供模板和组件下载. 有兴趣的话我们一起搞. 联系我 twitter: FarewelltoWind
byewind
2023-01-06 11:13:53 +08:00
@codehz 这个问题想过了, 要想好看就要这么高的透明度, 遇到白色问题只能用 js 判断底下的颜色, 实现起来比较复杂, 我选择将就.
要么牺牲视觉效果, 要么多做工作.
即使遇到白色背景用户还是可以通过滚动来避开而使用导航, 所以不会有太大影响.
我不会写 js, 要做到完美要付出至少几天工作量吧, 不值得.
root000
2023-01-06 11:15:04 +08:00
ui 挺好看
byewind
2023-01-06 11:17:53 +08:00
@codehz 简单点回答就是, 这个问题我注意到了, 要做到完美要付出更多工作量, 目前不值得去做. 等网站日访问量超过 1000 再看, 到 1000 时也很有可能我会选择优先增加更多内容, 而不是去优化这个设计问题.
PEALFK
2023-01-06 11:59:36 +08:00
我做了挺多年前端了,大部分都是做业务,很少机会做这种官网型的,就算是有也是要求有 UI 的,不能随便好看就行
awesomes
2023-01-06 12:15:00 +08:00
这个问题大致等同于,有了美图秀秀还需要 PS 吗
lyping
2023-01-06 12:22:12 +08:00
这个是不是可以直接把 html 抓下来自己部署。
byewind
2023-01-06 12:34:21 +08:00
@PEALFK 国内很少有, 国外中小型产品大多数是这类官网, 也叫落地页. 你可以去 https://www.producthunt.com/ 这里看看.
byewind
2023-01-06 12:34:49 +08:00
@awesomes 是的, 每种产品针对的目标群体不同
byewind
2023-01-06 12:35:26 +08:00
@lyping 应该不行的吧, 你试试, 何必要自己部署呢? 还要维护, 人家帮你都弄好了不挺好嘛

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/906923

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX