相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

UI设计细节篇,4步搞定“角标”设计

乖乖发布于:2019-4-28 10:55 |原作者: 焱小玖|
乖乖
安徽 贵池 平面设计师
发私信 + 关注
简介: 今天说一说APP中的角标。在各类产品中我们都不难见到角标的身影,它出现的位置各有不同,设计形式也越来越多样。


2.矩形

矩形的面积比较适合文字或者icon+文字,纯icon的比较少见。矩形对文字的字数要求没那么严格,字数多的话一般都会选择矩形。而且矩形角标还可以加一些圆角和变形,让整个样式变得更加活泼,增加设计感。

UI设计细节篇,4步搞定“角标”设计 飞特网 设计理论

3.异形

异形的灵活度更高一些,样式也更加活泼更具设计感,文字和icon都可以使用。活动类会用的比较多一些,不过设计感虽然重要,但是也需要注意整体的大小和信息的清晰展现。

UI设计细节篇,4步搞定“角标”设计 飞特网 设计理论

四.位置

角标的位置通常是在左上角、右上角和下方,根据人们"Z"型浏览习惯,这些都是容易引起用户注意的位置,可以让人能先看到。在决定角标位置的时候,我们可以从浏览优先级和产品内容两方面来考虑。

UI设计细节篇,4步搞定“角标”设计 飞特网 设计理论

1.优先级

根据人们"Z"型浏览习惯,位置的优先级依次是左上角-右上角-下方

UI设计细节篇,4步搞定“角标”设计 飞特网 设计理论

如果预计会有两个角标同时出现就要先考虑好位置的选择。一般常规的像是分类、属性的区分,这种是属于长期存在的,可以放在次一级的位置。为强运营属性的短期状态,比如排名、上新、推荐等预留出最高优先级的位置。

UI设计细节篇,4步搞定“角标”设计 飞特网 设计理论

比如荔枝的列表中,把类型放在了下方,左上角的位置留给"今日热门""磁性大叔音"这类运营专题。优酷的列表中也把类型放在了优先级次一级的右上角,把排名放在了最优的左上角重点突出。

2.产品内容

选择位置的时候也需要根据产品的内容来考虑,尽量避免对关键信息的遮挡。

UI设计细节篇,4步搞定“角标”设计 飞特网 设计理论

像少年得到的有声书一样,书名在上方位置所以"上新"角标就选择了下面的位置,避开对书名的遮挡。

总结

以上就是我在为课程商品列表页设计角标时做的总结,虽然只是页面中一个小小的元素,也需要我们的认真对待从四个方面来考虑:

1.样式:icon+色块适合表达具体或有普遍共识的内容;文字+色块适合表达抽象复杂或图形相近不好区分的内容,icon+文字+色块是强视觉符号适合专题活动、节日等。

2.颜色:可以选择醒目的颜色、品牌色和与内容相关颜色,同时不能忽略在各种背景中的突出效果和是否与产品的整体调性相符。

3.形状:三角形适合icon和三字以内的文字;矩形适合文字及icon+文字,异形比较灵活文字、icon都可以。

4.位置:位置的选择需要考虑优先级和产品内容,优先级依次是左上角-右上角-下方,把强运营的角标放在优先级更高的位置,另外注意避免遮挡背景的关键信息。

参考引文:

《标记系统设计总结》http://t.cn/E5IUiu7

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/

1234
39

好评
29

差评

刚表态过的朋友 (68 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

乖乖
安徽 贵池 平面设计师
+关注 发私信
发表评论

最新评论

查看全部评论(1)

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计