矩形的面积比较适合文字或者icon+文字,纯icon的比较少见。矩形对文字的字数要求没那么严格,字数多的话一般都会选择矩形。而且矩形角标还可以加一些圆角和变形,让整个样式变得更加活泼,增加设计感。
3.异形
异形的灵活度更高一些,样式也更加活泼更具设计感,文字和icon都可以使用。活动类会用的比较多一些,不过设计感虽然重要,但是也需要注意整体的大小和信息的清晰展现。
四.位置
角标的位置通常是在左上角、右上角和下方,根据人们"Z"型浏览习惯,这些都是容易引起用户注意的位置,可以让人能先看到。在决定角标位置的时候,我们可以从浏览优先级和产品内容两方面来考虑。
1.优先级
根据人们"Z"型浏览习惯,位置的优先级依次是左上角-右上角-下方。
如果预计会有两个角标同时出现就要先考虑好位置的选择。一般常规的像是分类、属性的区分,这种是属于长期存在的,可以放在次一级的位置。为强运营属性的短期状态,比如排名、上新、推荐等预留出最高优先级的位置。
比如荔枝的列表中,把类型放在了下方,左上角的位置留给"今日热门""磁性大叔音"这类运营专题。优酷的列表中也把类型放在了优先级次一级的右上角,把排名放在了最优的左上角重点突出。
2.产品内容
选择位置的时候也需要根据产品的内容来考虑,尽量避免对关键信息的遮挡。
像少年得到的有声书一样,书名在上方位置所以"上新"角标就选择了下面的位置,避开对书名的遮挡。
总结
以上就是我在为课程商品列表页设计角标时做的总结,虽然只是页面中一个小小的元素,也需要我们的认真对待从四个方面来考虑:
1.样式:icon+色块适合表达具体或有普遍共识的内容;文字+色块适合表达抽象复杂或图形相近不好区分的内容,icon+文字+色块是强视觉符号适合专题活动、节日等。
2.颜色:可以选择醒目的颜色、品牌色和与内容相关颜色,同时不能忽略在各种背景中的突出效果和是否与产品的整体调性相符。
3.形状:三角形适合icon和三字以内的文字;矩形适合文字及icon+文字,异形比较灵活文字、icon都可以。
4.位置:位置的选择需要考虑优先级和产品内容,优先级依次是左上角-右上角-下方,把强运营的角标放在优先级更高的位置,另外注意避免遮挡背景的关键信息。
参考引文:
《标记系统设计总结》http://t.cn/E5IUiu7
FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/
飞特游客
查看全部评论(1)
委托设计