大叔最近‘被安排’去设计了一个卡券UI，之前没做过，思来想去不就是个信息设计？等我开开心心设计完后才发现...原来之前有人做过...苍天啊～为什么不早说？！所以说，设计模式库是多么的重要。（参见设计体系和设计规范是一个东东么？ - 简书）巴特，既然做了，那就顺便整理下卡券的设计咯，把坑填平，为后面的兄弟们铺路。
总结的话永远放前头
设计之前，要多思考其扩展性。
设计之时，要多考虑其灵活性。
设计之后，要多总结总结。
正文内容
1、收集目前的卡券设计
卡券样式
2、分析归纳
卡券信息
从图中看出，我将操作、内容、价格（时效）这三类信息划分为三大块，分别按照重要程度也做了相对应的比重划分。
卡券标题，卡券价格/时效，操作
很显然这是最重要的，操作可能根据不同的场景会没有，所以在没有的情况下，整个信息往左侧移动即可，不会对页面和内容照成太大的影响。
有效期，适用范围
这也是必要信息，但很明显信息层级没那么高。不过因为他们整体还是属于内容区域的东西，所以我把它们跟重要信息放在一个区域内。
配置信息
配置信息，很显然，因场景或业务需求而变。
3、UI设计
这时有人就会问，上面有设计的那种小三角的UI很好呀，如果按照你这样划分，那么设计不就变得很死了？只能在你规定的区域做设计？
No,No,No~当然不是咯，这样的区域划分是为了将信息整理，更好的扩展。所以大叔认为，像右上角那种UI设计，你最多也只能放一个吧？不能四个角全放上吧？那不成相框了？所以，灵活点来说，你也可以在内容区，选择一个你认为很需要突出的信息设计在右上角或其他你想放的位置。
End.
网友评论