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

[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, 它的出现就是为了让中小微企业更快地搭建更为先进的中后台产品.

[byewind]

@root000 谢谢

[sewer]

6

楼上说改成这样感觉可以

[byewind]

@sewer 看到了, 谢谢帮忙尝试, 是可以用设计的方法找到一个平衡点的, 但是这只是心理上的平衡点, 并非最佳. 最佳的方案就是要么换导航设计, 要么用 js 来判断背景颜色, 根据判断来切换导航颜色.
我不想多尝试是因为在设计上寻找答案找到平衡点不能根本解决问题. 所以就会造成时间上的浪费. 每个工作,每个动机之前都需要评估工作量和回报.
我对这个点没有多大的动力去花费工作量, 反而我更愿意打这么多字来回复你的帖子, 这说明回复你的帖子更有意义. 😊😊😊

[byewind]

@sewer 我这才发现你不是上面那个人, 那既然有两个人都提出了这个问题, 那我就有动力去优化了. 现在已经优化了. 但是在白色版本中又会显得太黑而不好看. 原本我是要兼容暗色和亮色两个版本的. 现在只优先考虑暗色版本好了.

https://gd-hbimg.huaban.com/648779c77956d14e200fc6d66b775f7f982425a01f0da-0w7yYP_fw658

[jaywhen]

看到这个导航栏好亲切，还在读书的时候也做过类似的导航栏设计： https://hackernews-plum.vercel.app/

[muzuiget]

@codermagefox 连 theme 都不算了，感觉就是一些设计参考图而已，就像 Ant/Material Design 中的“设计语言”图，还得码农去用 React/Vue/Angular 来自己实现数据交互组件。出钱买一些美术资源，还得写更多代码了，我真好奇是不是有目标用户。

[SenLief]

挺适合做产品主页的。

[leedarmau]

很多年前就知道 framer ，最开始是用 coffeescript 写交互效果的一个产品，很长一段时间里他们都在致力于让设计师用代码写界面，导致长期以来设计师学不会、开发瞧不上。现在看来他们走出了一条自己的路，再看同样是诞生于荷兰的 sketch……

[leedarmau]

@muzuiget 我告诉你目标用户是什么：是那些有很多酷炫想法但没有开发帮忙实现一些个人主页、博客、作品集、简单 landing page 的设计师。

[loading]

牛啊，我网站 landing page 恰好不知道怎么做。

[CSGO]

试用了下，感觉不是很好啊，它类似生成一个在线链接而已，看了付费也没有能导出 html 文件。
我倒是很久前用 macOS 的一个 hype3 软件做过一个公司网站： https://xiaofu.tech/version/2.0/
它是本地制作并生成的 html 文件，不过后来实际情况是公司产品老改动，而这种软件制作的网页问题就麻烦在修改上，尽管修改一个字，正常也得是打开工程文件，修改，导出，再部署到服务器上，而这一切就又落到我头上，很麻烦。

一气之下，我画了 3 天学会了 html+css ，重新写了网页： https://xiaofu.tech/version/3.0/
尽管没有动画，但是流畅啊，而且部署在服务器上后，我甚至可以直接 ssh 上去修改网页上的字，非常快速和方便。

[codermagefox]

@muzuiget #26 我就是这个意思....说白了所谓的设计语言只是上面很薄的一层,下面东西很多很多,楼主却觉得设计出来了以后下面的东西都应该配合这一层很薄的东西...怎么说呢,做出来其实成本还好,但是真的会有目标用户么,我很怀疑.毕竟一套东西换一下设计语言很简单,但是功能都是很重的东西

[wufumina]

挺好看的，抓个虫哈哈 https://s3.bmp.ovh/imgs/2023/01/06/aaa6caa5b3e9f1f4.png

[awanabe]

@byewind 毛玻璃不就是 blur 就可以实现么 他们也是这么实现的

[byewind]

@jaywhen 哈哈 你的设计很超前, 圆角导航是近几年才流行起来的

[byewind]

@codermagefox 设计语言并不是很薄的一层.
对于大多数产品来说, 产品比设计重要, 因为产品驱动设计, 设计比技术重要, 因为设计驱动实现. 当然也有些产品是技术驱动的, 比如芯片.
对于我的网站则是内容驱动, 也就是产品驱动设计, 技术在这个网站中并不是很重要, 只要能实现就行.
再说到设计, 设计语言是上层, 设计语言驱动设计, 设计语言的上层是设计方向, 很可能只有一句话, 但是要总结出这句话来并不简单. 因为方向错了, 下面全错了.
所以不理解你说的很薄的一层是什么. 我的目标用户大头是设计师, 小头是希望自己产品在设计上能够超前的开发和企业主.
所以对目标用户的小头部分很难推广, 因为大部分开发和企业主不懂设计, 更不懂何为超前的设计 优秀的设计. 这就难以让他们花钱去购买我的产品.

[wellerman]

这文案，挺有创意的。

[byewind]

@wellerman 网站的文案吗, 谷歌翻译的, 希望有设计和开发方面英语强的人帮我翻译得更加准确些, 有些词我是真的不知道如何翻译

[byewind]

@wufumina 图片没看明白, 有抓到虫吗?

[byewind]

@leedarmau 之前的 Framer 其实还是不错的, 比 Sketch 超前, 可惜同时代出现了 Figma, Figma 在设计体验上, 在同步技术上还有在性能上都是碾压同类产品的. 尤其是性能上, 在 Figma 上导入非常多高分辨率的图依旧不卡, 缩放顺滑, Sketch 导入同样的图就卡的不行了. Figma 的图片渲染技术比 windows 的都强很多很多. 所以目前是离不开 Figma 了, 国内大部分公司还没部署 Figma, 这些公司的设计会远远落后使用 Figma 的公司.
当年阿里就是率先部署 Sketch 才能在设计上领先腾讯的. 4 年前腾讯设计师的电脑全是 PC, 阿里已经换上 Macbook 了, 不知道现在腾讯的设计师是否用上了 Macbook.