区块链金融DApp

chaocsshi

DApp 与 Web 3.0
在设计一个 DApp 前，首先我需要知道什么是 DApp 和 Web3。
在入手这个 Case 前，我对区块链一无所知，所以前期花了很长的时间去认识理解区块链以及 DApp 跟 Web3 的概念。本文我就不深入讨论这些，我只抛出我总结的结果，具体内容需要大家去看一些相关的文章。
我摘选出我之前总结的一页 PPT 来概括什么是 DApp。


作为设计师，需要关注的就是 DApp 中的前端界面这部分。
Web 3.0 相关知识我也直接抛出个人总结。


从中摘选出对我后期设计具有直接指导意义的几个点：文案通俗易懂、交易等待时间设计、双重认证、标明并预测未来预期的操作、快速并就地学习。
记住这几个我开展设计直接拿来用的点。
开展设计工作


其实 DApp 是偏向工具性的产品，所以相对于其它 to C 产品，DApp 对视觉的要求相对而言没有那么高，但是这种产品的设计对控件、组件化要求很高，所以设计这种产品时需要时刻铭记 " 组件化 " 的概念。
第一步，确定产品的页面结构
我拿到产品设计的文档以及原型后，先跟产品沟通产品需求，了解我们要设计的产品相关属性及功能特点。
下面这个是我跟产品经理沟通后产出的页面框架，这个时候不需要考虑 UI 部分，只是对页面框架的大概梳理，可以使我更加具象的了解产品。


第二步，确定 UI 设计风格
其实任何设计风格的建立基本来源于这几个方面：关键词、用户群体、产品定位、品牌、竞品分析、设计趋势。
我一般会整理一个文件夹。


根据之前沟通以及自己调研分析的结果，拿出 2-3 个产品的界面产出不同的方案供评审团去评审，然后确定出最后的设计风格。DApp 这种偏工具性的产品，UI 风格相对来说没那么多样化。
第三步，制定设计规范
DApp 设计一个特别重要的内容，就是：组件化、模块化。
在 UI 风格确定后，首先应该跟前端同事确定一套共用的组件库。
考虑到我们这个 Case 主要是针对国外的用户群体，所以我选用的谷歌的 Material Design 组件库。这个组件库一定要跟开发事先确定好并且达成共识。否则后面开发过程会遇到一堆问题。
熟读选取的组件规范三遍！！！！！
https://material-ui.com/demos/paper/
这是我跟开发一起确定 MD 设计规范参考。有兴趣的同学可以参考。
当然，并不是说有了 MD 你就可以不去整理规范，颜色啊、字体啊、还有些自定义的组件需要去整理。换句话说，就是以 MD 为基础，去搭建适合自己的一套组件库。
组件库搭建完毕后，最好是发起一个会议跟开发甚者产品经理去讲解你的组件库，让大家对你的组件库有一定的认识与理解，方便后面工作的开展。
自己整理的规范截图示意


第四步，界面设计
在进行界面设计的过程中，要充分以你跟开发定好的组件库为基准来选取组件。
设计 Web 端的时候，尽量考虑到后期 Mobile 端的适配。所以这也是为什么这种产品对组件化要求很高，因为要尽快的并且成本最低的适配移动端啊。
Web 端


移动端


具体到界面设计工作中，脑子中时刻谨记几个点：文案通俗易懂、交易等待时间设计、双重认证、标明并预测未来预期的操作、快速并就地学习、组件化。
第五步，设计评审
界面设计完，我会先上传到语雀，然后让相关人员先看一下，然后有什么问题在语雀中标记一下。比较明显的问题自己直接修改，有争论的问题先记录。然后再开会讨论设计稿。这样比直接开会沟通效率要提升不少。
上传到语雀的画板示意


输出标注切图
目前主要有两种方式可以跟开发对接标注，一个是语雀可以直接查看标注，另一个是用 Measure 插件直接导出标注。 切图注意命名不要出现中文。
设计走差
前期做了 100 分的工作，如果开发只还原到 80 分那最后的结果就是 80 分。所以设计走差是相当重要的一环。
我一般会在开发提交一个版本后，走差界面时记录下问题，丢到语雀当中的相关 bug 池，指给相关人员。


走到这一步，就是修修补补的工作。揪住优先级，一个一个版本迭代优化就好。
界面展示
第一次做区块链金融相关的产品设计，收获也颇多，罗列一些界面供探讨指点。共同进步。
Web








Mobile