关于卡券的设计

作者 : 开心源码 本文共659个字,预计阅读时间需要2分钟 发布时间: 2022-05-12 共165人阅读

大叔最近‘被安排’去设计了一个卡券UI,之前没做过,思来想去不就是个信息设计?等我开开心心设计完后才发现…原来之前有人做过…苍天啊~为什么不早说?!所以说,设计模式库是多么的重要。(参见设计体系和设计规范是一个东东么? – 简书)巴特,既然做了,那就顺便整理下卡券的设计咯,把坑填平,为后面的兄弟们铺路。

总结的话永远放前头

设计之前,要多思考其扩展性。

设计之时,要多考虑其灵活性。

设计之后,要多总结总结。

正文内容

1、收集目前的卡券设计

卡券样式

2、分析归纳

卡券信息

从图中看出,我将操作、内容、价格(时效)这三类信息划分为三大块,分别按照重要程度也做了相对应的比重划分。

卡券标题,卡券价格/时效,操作

很显然这是最重要的,操作可能根据不同的场景会没有,所以在没有的情况下,整个信息往左侧移动就可,不会对页面和内容照成太大的影响。

有效期,适用范围

这也是必要信息,但很显著信息层级没那么高。不过由于他们整体还是属于内容区域的东西,所以我把它们跟重要信息放在一个区域内。

配置信息

配置信息,很显然,因场景或者业务需求而变。

3、UI设计

这时有人就会问,上面有设计的那种小三角的UI很好呀,假如按照你这样划分,那么设计不就变得很死了?只能在你规定的区域做设计?

No,No,No~当然不是咯,这样的区域划分是为了将信息整理,更好的扩展。所以大叔认为,像右上角那种UI设计,你最多也只能放一个吧?不能四个角全放上吧?那不成相框了?所以,灵活点来说,你也可以在内容区,选择一个你认为很需要突出的信息设计在右上角或者其余你想放的位置。

End.

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 关于卡券的设计

发表回复