对于有观点输出习惯的 Web3 爱好者而言，将内容“寄存”在 Twitter 等 Web2 社交媒体上，似乎还不够“抗审查”，也缺些专属感和独立性；对于 Web3 协议团队或项目方而言，从产品服务到前端呈现全流程的去中心化，也在叙事上更具吸引力。而无论是抱着何种动力，将个人或项目官方网站制作为去中心化网站，在成本、匿名性、隐私保护等方面都有一定优势。

因此，本文将带你一步步将个人网站（以 Notion 生成的网页为例）部署到 IPFS 上，建立一个只属于你的、真正去中心化的网站（Dweb）。

文章一共分为介绍、实操、建议三部分。我会先介绍去中心化网络 Dweb 的概念及代表，再手把手教学将个人名片网站署到 Dweb 上的方法，最后，我也会总结下当前方案的优劣势。

考虑到文章篇幅和上手难度，在实操部分，我只介绍最简单的一种 Html 网页框架部署方法。同时，这一教程主要靠 Fleek 工具来实现部署。Fleek 的功能强大，能打包多种网页框架（如 Wordpress、Next. js 等），有一定技术基础的朋友，可以纵深探索。

什么是去中心化网站？

去中心化网站（Dweb），字面上看就是部署在去中心化网络上的网站。

从构成部分看，Dweb 和传统互联网网站类似，都需要拥有一个入口——域名、一个承载主体——托管服务器。在 Web3 世界，与这两项“功能”相对应的代表项目分别是 ENS、IPFS 和 Arweave（本文重点介绍前者，也是较多项目在使用的方案）。

ENS（Ethereum Name Service）是基于以太坊的分布式、可扩展、开放的命名系统；通俗讲，就是区块链域名系统。

IPFS 的理念是将数据分布存储在世界各地、任何人可运行的节点上；本质上是项抗审查、点对点的数据存储服务。此外，由于 IPFS 跨节点分发数据并指向特定数据，可以确保资源来自最近更新的来源，实际体验会更快捷和可靠。

关于 ENS 和 IPFS 的进一步释义，感兴趣的读者可以阅读《一文了解迄今为止最成功的非金融类以太坊应用程序 ENS》《深度解析 IPFS：新一代互联网底层协议》。

在 ENS 和 IPFS 的共同支持下，分布式的区块链基础架构可以将内容直接存储到智能合约（容器）中。

基于 ENS+IPFS 的代表网站

虽然在感知层面并不明显，但用户如果留意一些主流的 Web 3 应用，可以从他们的官方文档中发现，Uniswap、 1inch 等头部 Web3 协议已经将其网站同步至 IPFS 上。

其 ENS 链接地址分别是 1inch. eth、uniswapexchange.eth，对于原生 Web3 浏览器可以直接输入以上地址访问，对于非原生浏览器，可以使用兼容地址访问：

1inch：https://1inch.eth.link/

uniswap：https://uniswapexchange.eth.link。

更多采用 ENS+IPFS 技术部署的网站，Almonit 做过 Dweb 网站整理，链接如下：https://almonit.eth.link/#/discover/，感兴趣的读者欢迎访问查看。

如何部署

本文我们主要使用 Fleek 工具提供的方案，该方案优点是部署简单，支持多种 Web 框架，除了支持 Html 页面外，也支持如 Next.js、Hugo.js、Wordpress 等多种语言的网页框架。

本文聚焦在 Fleek 支持的诸多功能中最简单的一种——Html 页面框架部署方案，并且做了分步讲解，希望小白看完能快速上手；对于高手而言，也能起到抛砖引玉的作用。

刚刚提到需要准备一个 Html 网页，因此会用到 notion 来生成这个 Html 网页文件，原因主要是 notion 操作简便，且自带了 html 导出功能，可以将其作为一个可视化的 Html 网页制作器。

由于使用的工具 Fleek 采用的是自动同步 Github 的方式，因此也需要准备好一个 Github 账号以及对应的 Repo（库）。

部署到 IPFS 网络本身不需要域名，上传到网络中会生成一段 hash，类似于 Web2 中的 IP 地址，因此还需要准备一个 ENS 来映射这段 IPFS hash。

概括一下，事前准备三样东西：

1. 一个 github 账号；
2. 一个 ENS 域名，以及对应的钱包和少量 ETH 作为 gas；
3. 一个 notion 账号，并制作一个个人 profile 页面。

1.从 Notion 导出 Html

1.1 在 notion 设计一个 profile，Demo 如下图。

1.2 从 notion export 功能导出我们准备好的页面，由于 IPFS 对于静态网页支持的能力有限，暂时只能选择单页面导出。（高阶选手也可实现多级页面——subpages）。

1.3 获得了导出的压缩文件后会自动下载到本地。在本地解压后，会得到下图中的一个文件夹和一个 Html 文件。将“xxx. html”结尾的文件更名为“index. html”。

2.上传到 Github

2.1 进入到 GitHub 主页，登陆（没有账号的需要注册一个账号）进入如下页面，点击“ New ”新建一个 Repo。

2.2 对于这个新建的 Repo 建议采用 Private （隐私）库的方式。因为这样可以避免除了 Fleek 工具和创建者的其他人访问到原始文件。

2.3 接下来需要用到 Github 客户端（如果电脑上没有 Github 客户端则需要下载并安装一个）。登陆 Github 客户端后，回到刚刚创建之后的 Github 网页，点击蓝色框内的“ Set up in desktop ”（在桌面打开客户端）。

2.4 安装了桌面客户端后，会有如下提示。

2.5 来到桌面客户端，按照提示设定好一个本地目录并记录这个本地目录的路径。将第一步 “从 Notion 导出资料”中我们在下载的文件，复制到该本地目录中。

2.5 复制完成后，回到客户端会有如下提示。填写一些描述内容并点击 commit。

2.6 点击 push origin 把文档推送到 Github Repo 中。

3.使用 Fleek 新建一个项目

“Fleek 是一套工具，包含在开放网络及其协议上无缝构建现代站点和应用程序所需的一切。”

简单来说，Fleek 这个工具可以将个人网站简便地部署到去中心化网络上。

3.1 首次进入 Fleek 需要注册，建议采用 Etheretrum 小狐狸钱包直接一键注册并登录，比较方便（亦可以使用 Github 或 Email 来注册）。

3.2 注册并登陆之后来到项目主页，接下来需要创建一个网站项目。

3.3 我们选择刚刚第二步中创建的 Github Repo，并进入到下一步。

3.4 我们选择 Hosting services 选项重的 IPFS，选择 Cointinue 进入下一步。

3.5 选择刚刚创建完成的网站，进入详细配置页面。

3.6 现在网站已经部署到 IPFS 上面了，Fleek 工具还很贴心的关联了一个映射域名，如图所示。

3.7 接下来，绑定 ENS 域名，选择“ Setting ”，并找到“ ENS ”。

3.8 下拉到“ Add ENS ”。

3.9 输入 ENS 域名。

3.10 进入到如下界面，再次点击刚刚输入的 ENS 地址。并选择“ Set content hash ”，最后支付一笔 Gas 费完成绑定。

3.11 此时我们看到之前是灰色的 ENS 域名已经转变成为蓝色，绑定成功。

3.12 对于支持去中心化域名的浏览器，如 brave，小狐狸钱包手机 APP 等，直接输入 ENS 如我这里设置的 yyzfish.eth即可以直接访问部署的Dweb，对于Web2 的浏览器，ENS 也有兼容方案，可以直接访问https://yyzfish.eth.link/ 。

建站过程中的一些思考

走完这套流程后，我体会到了去中心化网站相较于传统网站的一些优劣势。

优势

成本低廉稳定

传统的 Web2 网页需要部署到服务器上，不仅需要维护，而且花费随着用户数量而增加，但是通过本文部署到 Web3 的流程，不难发现，部署到 IFPS 的花费是极其便宜的（当前免费），且无论用户量大小如何，花费不会有变化。

更完整的 Web3 叙事

早期，由于链上 gas 高很难把完整的项目（前端+智能合约）同时部署到如以太坊网络上。而如今，随着 IPFS 网络协议的完善，庞大的前端交互页面也有了自己专属的去中心化网络。这在叙事上符合真正的“去中心化”理念。目前 Uniswap、1inch 等头部 DeFi 协议都陆续部署到了去中心化网络上面，未来或许完整部署到去中心化网络将成为 Web3 项目的标配。

对个人来说很酷

ENS 域名在社交媒体（如 Twitter）上很受欢迎，不少 KOL 的昵称为 xxx. eth，而在此基础上实现了进一步延伸——把自己的博客部署到 IPFS 网络，并以 ENS 域名作为入口，对于加密爱好者来说会是件很酷的事。

匿名性与隐私保护

由于 Dweb 在早期设计阶段就充分考虑了“去中心化”与“隐私”结合，其实和 Tor 网络有些许类似之处，都具有不可追踪、匿名性的特点。

不足

对于 Web 2 的兼容性仍然有待提高

虽然工具已经支持很多主流框架，但还不是全部，对于像 PHP 这种的动态网页框架仍然是不支持的状态。整体兼容度还有待提高。

对国内用户不友好

由于当前 IPFS 的节点还远未达到白皮书中所计划的数量（路线图），因此，Dweb 在国内的访问有一定的阻碍。

希望未来能够看到更加完善的方案，以及技术的迭代。

ello 大家好，我是老张，那个不务正业的PHP开发工程师。今天是我使用uni-app开发在线教育系统的第三天了，今天主要开发了底部菜单的，学习页面，个人中心页面，先给大家预览下效果图

目前底部菜单页面已经全部开发完毕了，下面就是首页导航切换的静态页面开发了，关于这两个页面的布局我采用了uni-app 里面的flex 布局开发，Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction: row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。

个人中心的图标是uni-app 的字符图标，目前暂时先这样，后面会让专业的设计师去设计这个图标，我的设想是这个个人中心页面的图标是动态可以更换的。

我的学习页面主要包含了，学习的一些数据，可以更加直观的看到自己的学习情况，下面是观看的历史记录和我已经购买的课程方便直接学习或者接着学习。

个人中心是菜单功能的一个快捷入口主要包含平台的介绍，反馈的建议等数据

总结

使用uni-app开发其实和使用HTML 开发差不多，并不需要多么深的前端功底。慢慢对这个uni-app 越来越熟练了，其中的css 感觉是自己的弱项，后面会在开发中渐渐学习这个知识。

没有一件事是简单的，只要想去做就一定可以成功，坚持就OK。

辑导读：“个人中心”相当于一个万能口袋，承载着各类入口。如果这个口袋有趣又好看，无疑是一件锦上添花的事。本文将从三个方面围绕“个人中心”的设计展开分析，希望对你有帮助。

五?底，我和朋友们开始合作?个UXDA?户体验创新?赛的参赛项?。

当七?初我们要完成“我的”页面的设计时，我发觉?从下手，随即做了?些“敏捷”调研，包括对雪球、饿了么、玩盘这三款APP“我的”页面的分布?式的总结和思考。

?、“我的”页面重要吗？

有?说：“我的”页面很鸡肋，做得好也不加分。

可我认为不然：这个世界没有“无用”的设计，只有“无用”的设计师。

作为底部tab栏的最后?位，“我的”页面的重要性虽然“比上不足”，但“比下有余”。

它就像?个“万能口袋”，可以承载各类入口；如果能让这个口袋好看又有趣，对于?个应用来说，是锦上添花的好事。

• 对于内容类APP来说，“我的”页面非常需要?个“社区内容的整合肉蔻”——比如：B站APP“我的”页面有浏览历史（我看过哪些），收藏夹（我喜欢看哪些）和稍后看（我打算看哪些）；
• 对于生活服务类APP来说，“我的”页面更需要“账户信息”和“增值服务”来提升用户活跃度——比如，饿了么APP“我的”页面有红包卡券情况（我可以少花多少钱）以及?些联名卡的商业化区域（我还能花多少钱）。
• 而对于有不同?户??的应用而?，“我的”页面则需要“千人千?”，这样不同角色可以行使各自的“权利”——比如，闲?APP有“塘主”角色，即“社区?手市场的管理员”。

N年前，我曾经是我们学校的“塘主”。 当时在“我的”页面，除了“塘主”标志，我还有个“我的?塘-我管理的?塘”入口，以及专属于 我的“管理区域”（每个?塘只能有唯?塘主，能操作帖?置顶、钓?帖删除、接收?塘成员信息等等）。

“我的”页面，不是“鸡肋”的代名词，而是“角色”和“权限”的重要落地点。

因此，当产品团队在做“我的”页面的时候，产品定位、?户场景和商业模式都要考虑在内。

然?，?前绝?部分APP的“我的”页面都是各类入口的集合，很容易形成各种功能入口的堆叠。

同时，“我的”页面的内容?过于静态，使页面显得单调，导致?户会觉得“我的”页面十分鸡肋。

那么，如何才能避免乏味的“我的”页面？

如果只是把设计理解为简单的外观设计，?上来就开始构思界?细节，缺乏完整、清晰的思路，设计?案?然容易遭到各种质疑。

所以，我们需要“智”作。

?、如何设计“我的”页面？

1. 信息结构重组

我看了一篇雪球APP“我的”页面的改版文章，现将作者的改版步骤整合如下：

1）整合原页面结构

首先，通过模块化的分类方式将原“我的”页面入口和信息根据内容及业务属性划分为6大类，分别如下：

“我的” 页面信息分类整合思路

2）将高频功能入口放在第?视觉层次

接下来，需要对每类的入口进行整合梳理，并通过用户行为习惯及内容的重要性来进行优先级排序。

以【社区内容入口聚合区域】为例：对雪球用户来讲，帖子是最常消费的社区内容，也是最有价值的内容，属于高频消费。

所以在产品结构上，社区内容入口如“收藏”、“我的评论”、“我赞过的”等都收纳同一个 模块，让用户在第一屏、第一视觉层次就能发现这些入口并快速访问。

社区内容入口聚合 方便用户快速访问（图片来源：雪球设计中心XDC）

其他内容模块也根据相似的思路进行分类，整合后的页面信息更符合用户的使用习惯。

模块化的处理方式除了让信息呈现合理，在需要的时候还能支持内容之间的替换和扩展，页面结构更为灵活。

“我的”页面改版前后对比

3）改版有效性验证

根据文章描述，新版本上线后，页面的使用率大幅提升——相较改版前的版本，“我的”页面使用率从原来的 20%提升至50% 。

也就是说：每100人来到“我的”页面，老版本只有20人产生了点击行为；改版后，每 100人有50人产生了点击行为，而页面提供的信息并没有太大的变化。

改版后 “我的” 页面使用率提升至50%（图片来源：雪球设计中心XDC）

由此可见，就算页面提供的信息并没有太大的变化，功能的重组和归类帮助用户有效的区分信息层次，缩短了用户对常用功能的访问路径，强化功能分区也让用户能更好的通过固定分类快速找到功能入口，页面使用起来更方便。

2. “我的”页面常见案例分析

同理，我参考上述?法对【饿了么】和【百度?盘】也进?了分析。

1）饿了么“我的”页面

对于饿了么而言，重要的业务入口包括“超级会员“（红包、津贴等）和“金融服务”（借钱和联名信用卡），这些都放在“我的”页面首屏显眼的位置。

这样的设计排布方式可有助于对老会员的留存以及对新会员的吸引，同时也为商业化留下了空 间（ps：“我的借款”也被归类于“我的钱包”，这太鸡贼了）。

除此之外，还有外卖社区类入口，包括“收藏”（店铺收藏）和“购物车”（曾中途放弃的点单），有助于唤醒曾中断的消费。

2）百度网盘“我的”页面

作为工具类产品，百度网盘的超级会员也是它的主推业务，开通后可拥有若干特权。

同时，网盘的一些常用功能也罗列再次，比如我最常用的“手机备份”、“我的分享”和“回收站”。

除此之外，这里还增加了会员类活动的运营banner，比如：“超级会员的限时领取”和“一刻相册[1]随心卡免费送”。

所以总的来说，“我的”页面元素可以分为三个部分：

第?类必要信息（粉红?标注）：

• 用户基础信息（比如：昵称、头像等）
• 功能/内容入口（比如：社区内容聚集入口，收藏夹，浏览历史等）

第?类重要信息（绿色标注）

• 重要业务入口（比如：会员专区-拉新固?；卡券专区-促进消费）

第三类附加/增值信息（蓝色标注）

3. “我的”页面——会员中心

说到“我的”页面，就不得不提“会员中心”。

为了提升用户粘性和增收，?部分商业APP都会增加“会员”模块——比如盒马、百度网盘、快看漫画。而对于用户来说，“会员中心”是“尊贵”的象征，能获取更多超值福利。

美团外卖 – 盒马 – 快看漫画 – “我的”页面会员中心

以百度网盘为例，其会员中心不仅承载着?付能?，而且提供了福利信息和?户情感上的尊享感知。

比如：百度玩盘——会员中心会根据身份、动机、行为的差异进行分层布局。改变以往的“多人一面”的布局架构，打造出新的“多人多面”的灵活分层页面布局。

• 当?户是历史未付费?户时，我们更加突出?户的特权介绍和商品?付，便于?户了解会员服务和商品信息；
• 当?户是开通中的?户，我们更加突出?户可尊享的福利信息，突出尊享感； 当?户为即将过期?户或已过期?户时，我们展示?户常?特权信息，唤醒?户付费意愿，并为?户提供便捷的续费能?。

百度网盘 – “我的”页面 – 会员中心

（图片来源：https://www.zcool.com.cn/article/ZMTEzMDA3Mg==.html）

三、总结

所以，不要?看“我的”页面，细细拆分开来，也是?个值得深究和探索的模块。

产品?小事， 希望每?个细节都能被打磨地光彩夺?。

如今，挑剔的?户更愿意关注有趣?有?的产品，如何基于用户立场，为用户提供合理的产品 形态，并提供有价值的、有吸引力的功能或内容，是我们产品人需要不断思考和总结方案的问题。

四、参考资料

雪球设计中心XDC，创造有价值的“我的” | 让设计有效且有趣 https://mp.weixin.qq.com/s/VW0ngXDK6JVAPsvN39YQeg

百度网盘会员中心-体验设计升级 https://www.zcool.com.cn/article/ZMTEzMDA3Mg==.html

[1]百度新推出的具有“无限空间”的相册，可创作卡点视频。

本文由 @艾薇霖 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议