美文网首页产品和设计
principle 产品交互之列表滚动以及跳转

principle 产品交互之列表滚动以及跳转

作者: 人魔七七 | 来源:发表于2018-06-21 14:28 被阅读432次

    个人选择principle 的选择是和sketch一样,让设计注重想法,简化过程。
    和sketch几乎很像的界面,sketch文件无缝导入principle,很高效,上手快。

    1:在sketch 设计好导入principle中
    注意地方,是必须打开sketch,然后再导入,导入效果图看下面。



    2:把列表的cell 变成一个组方面滚动如下图



    3:设置这个组可以滚动如下图

    这样就可以滚动了

    4:点击某个cell然后添加事件我们这里选择的是tap 还有很多事件如下图:



    5:拖动这个事件到下个界面做到这里是有动画了,但是很乱不是你想要的,虽然principle补充了中间的过渡动画。

    6:把后面的界面复制一份放到第一个界面的右边压住一点如下图:

    7:做到这里可以有类似push 的动画,但是没有黑色的过渡,我们创建一个黑色图层放到左上角,它在tap 事件执行时候会放到遮罩到第一个列表界面。如下图:

    8:同样的方法,详情的返回按钮tap事件到上一个界面,为了解决动画不自然问题,我们需要三层,第一层是第一个界面,第二层是遮罩,第三个才是详情页。如下图:

    到这里是完事了。来个GIF效果图:

    相关文章

      网友评论

        本文标题:principle 产品交互之列表滚动以及跳转

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