恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

从0到1设计区块链钱包概念APP

自译外文 分类: 经验/观点 版权: 原作者: Vivek Karthikeyan 举报
3416 29 30 0
2019-01-02
0.0
编辑推荐

这是一篇来自Vivek Karthikeyan的文章,详细记录了作者设计区块链钱包APP背后的一些过程。

Image title

概念设计是我们测试自己设计能力和解决问题能力的好方法。作为一名UI设计师,只要您有时间,就可以学习如何设计概念项目,以提高您的技能。概念设计也是初学者

开始职业生涯的好方法。


为什么选择区块链钱包为题材?

这是区块链技术的时代,我们已经可以看到许多区块链应用程序、网站、甚至Dribbble和Behance中的一些很酷的概念设计经常出现。这让我想尝试设计这个主题,不只停留在一两个页面,或者只是为了在Dribbble上发布一些花哨的非可行交互,我决定设计一个完整的应用程序。


挑战

那么钱包应用程序有什么作用? 
人们如何使用它? 
有什么可以改进的?

这三个是我试图找到解决方案的主要问题。

在尝试了各种钱包应用程序后,我列出了钱包应用程序中必须具有的前三个功能,并决定为他们设计更好的用户体验。
1.数据可视化/主页/概览
2.虚拟币价格趋势
3.交易
(对于那些不了解的人来说,钱包APP是我们可以存钱并且进行交易的地方)


数据可视化/主页/概览

在主页,用户将看到他的整体的投资组合数据。对于我这样的用户来说,如果我能一次看到所有的数据,将会更加方便。

    主要模块: 1.Main Wallet Balance (钱包余额)
                      2.Individual Coin Portfolios(个人虚拟币投资)

主页的初始阶段线框图

1-使用垂直滚动的卡片展示余额以及虚拟币信息,但是单个虚拟币信息卡片的尺寸较小,如何适配等多的数字和更长的名字将是一个巨大的挑战。

2-使用大卡片展示的个人虚拟币信息,但用户必须滑动才能看到其他的虚拟币数据。 
3-类似于图2的,使用垂直滚动,但同样,一屏可展示的数据量有限。
4&5-相对图3使用更紧凑的布局,使钱包余额主卡片固定在顶部,因为这是用户主要关注的地方,其他信息拆分开作为可滚动的垂直列表展示。 
主页的最终模型看起来像这样:

Image title


虚拟币价格趋势

在主页,当用户点击虚拟币时,将跳转到它的详细信息页面。此页面将包含虚拟币的所有价格趋势以及交易。

    主要模块:1.虚拟币余额。
                     2.交易信息。
                     3.快速切换查看钱包中的其他虚拟币。

Image title



我们已经设计完成了主页,因此我决定使用相同的模板设计新页面。为了让方便切换不同币种,我尝试了不同的卡片滑块,最后决定使用卡片翻转效果(参考下图)来切换不同币种——提供独特的体验而不会影响太多数据,包括导航指标,让用户切换币种时知道他们的确切位置。
最终效果:

Image title

Image title


交易所/贸易

设计的最后和重要部分是交易页面。

    主要模块:1.买、卖选项。
                     2.目前的汇率显示。
                     3.订单状态。
                     4.交易清单。


设计这种体验非常具有挑战性。几乎所有顶级钱包应用程序都会将用户带到不同的屏幕进行交易,买入或卖出,并且中间有很多操作步骤。我想尽量让操作更简单,为用户的交易带来更顺畅和更轻松的体验。

一些初步的思考过程:

Image title


最后的一个方案看起来很靠谱,我开始调整它以便更容易下订单。这也有一些挑战:当键盘出现时,我必须要移动卡片或者将其折叠起来才行。卡片提供更好的用户体验,因为它保留了币种余额,而且没有切换新的页面。使用选项卡可以让用户在买卖之间快速切换。

最终效果:

下达买入/卖出订单的工作流程


整个过程花了我大约2周的时间(每天花上1-2个小时),我对结果非常满意。我想给新人的设计师一个建议就是:试用他们自己的概念应用程序并提出这样有趣的解决方案。

(注意:显然还有很多其他更好的方法可以设计,而且我还有很长路要走。希望将来,我会写更多这些(:谢谢!)


Image title


微信公众号:设计师深海

设计师深海

微信公众号:设计师深海

4550粉丝/17关注

活雷锋小有名气首页达人一鸣惊人当仁不让lv.1
【AE教程】如何制作毛玻璃风格图标动效(四)  【AE教程】如何制作毛玻璃风格图标动效(三)

你确定要举报从0到1设计区块链钱包概念APP

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2019年01月02日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

设计师深海

TA已经获得11枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN