美文网首页
K01 UI组件化+拆解法

K01 UI组件化+拆解法

作者: 好妹妹mango | 来源:发表于2021-06-22 15:01 被阅读0次

    通过拆解法来判断哪里设计感缺失

    1、在使用流程中是否有功能缺失

    2、同类/级别功能 位置等级是否统一

    3、交互状态是否合理(使用时呈现的多态情况)

    4、视觉引导,重心是否准确

    组件化思维

    把完整物体,不断拆解打散的能力(基础元素)

    导航栏——文字规范+间距留白+图标大小

    文字规范:01搜索文字  28px  #cccccc

    间距留白:倍数原则,重复使用

    图标大小:44px,切图考虑点击热区体验,添加空白像素补充(48px)

    tab栏——基本尺寸+元素定位+文字大小+图标尺寸

    tab栏尺寸:750*98px

    元素定位:按元素个数等分法居中显示,(5个,750/5=150px)

    文字大小:18~22px,最小不低于18px

    图标设计尺寸:44px

    一看  二拆  三总结

    线性图标五大统一性     

    双钻模型

    设计考题

    拆:品牌融入+色彩倾向(传达含义感受)+图标风格+辨识度

    基础形状提炼法

    最终方案

    拆分

    规范层面

    相关文章

      网友评论

          本文标题:K01 UI组件化+拆解法

          本文链接:https://www.haomeiwen.com/subject/ylxmyltx.html