记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 12889|回复: 0
收起左侧

[设计经验] 区块链金融DApp[含17P]

[复制链接]
发表于 2019-1-9 09:00:31 | 显示全部楼层 |阅读模式
随着区块链底层技术的完善,区块链正面临着越来越迫切的落地需求,越来越多的大众也需要更加直观形象的认识区块链。所以DApp设计需求会越来越大。

                                                       




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






本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】

QQ|QQ群:133515734|站长博客|百度网盘|许进龙|手机触屏版|国际动画教程网 ( ICP13037175 )