美文网首页设计解释 学iDesign
Toasts:便利贴、不干胶和牛皮癣

Toasts:便利贴、不干胶和牛皮癣

作者: 鲜核桃 | 来源:发表于2016-11-17 14:19 被阅读82次

上一次是无聊吧啦了一下面包屑和烤面包,今儿认真的来讨论一下Toasts。

Toasts是一位绅士,它每次的出现都希望彰显绅士风度,尽量礼貌。但是,为了方便我们理解,我还是根据他出场的方式,为他量身打造了三个外号。
1.Sticky-不干胶
2.Dismissible-便利贴
3.Pester-牛皮癣

有时候,Toasts会默默的出现,等待你用目光示意它“哦,我知道了。”它过会就会自己退下。要是碰到你心情不好或者没有耐心跟他啰嗦,你也可以挥手赶它快走。就像便利贴一样,你可以动手撕了了它,也可以等它自己掉落。


便利贴.png

有时候,因为一些原因Toasts会像不干胶一样,一出现就黏在那里,一直到你动手去撕了它。不然,他不会消失。


不干胶.png

还有些时候,Toasts会变的有些不可理喻,它会坚持站在哪里等待你行注目礼,你对它动手它也不会走。更要命的事,你没法对它动手。建议你心情愉悦的留下它一个人独处,时间到了它就会自己消失。不然,你干瞪眼它也不会提前走。


牛皮癣.png

好了。我们了解清楚了Toasts的三种性格,接下来让我们看看作为绅士,Toasts是怎么保持自己良好的身材及优雅的行为举止。

Toasts是个天生的衣架子,穿什么衣服都很合适。它选择尺码的主要标准要决绝于内容的长度和内边距限制。


inside padding.png

但是,最小的长度不能小于480像素。为什么是480像素?为什么不能更小?我猜测主要原因是:首先这个最小宽度主要是针对web说的。如果在web页面上Toasts的宽度小于480像素,那么在移动端访问时,它就会显得有些“小家子气”。为了保持Toasts在各种端一致的绅士形象,所以,最好长度最好不要小于480像素啦。


minimum width 480px.JPG

还有一点你必须要注意,文字请千万不要换行。换行会让Toasts显得不修边幅,有时候。作为新晋贵族,Toasts是不允许自己如此行为不端的。

Toasts恪守的行为举止还有以下具体表现:

  • 它会永远站在画布(canvas)中间(排除左侧导航栏),驻足页面的顶部以确保你始终可以看到它,不管你上翻还是下滚页面,它都在那。

  • 同时出现两个以上的Toasts,他们会很有礼貌的让后来的站在最上面,余下的会按自己的出场顺序排队站好。因为先来的会先走。


    后来者居上.png
  • 偶尔发生了撞衫现象,它们也会优雅的合体,能一起出场就一并出场,绝对不会跟你玩车轮战。


    优雅合体.png

如此优雅体贴的Toasts真是人见人爱啊。但是,当创建操作将用户带到新创建的记录时,千万不要使用toast来确认成功,直接带用户去新创建的记录就可以了。因为这已经不是优不优雅的问题了,而是逻辑问题了。


哇哈哈.jpg
画蛇添足.png

相关文章

  • Toasts:便利贴、不干胶和牛皮癣

    上一次是无聊吧啦了一下面包屑和烤面包,今儿认真的来讨论一下Toasts。 Toasts是一位绅士,它每次的出现都希...

  • 便利贴

    挑兵挑将,挑住谁谁就跟我去打胜仗

  • 便利贴

    正方形的便利贴。 黄色的,这种颜色是和蓝色、粉色、绿色比最舒服的用在书上的颜色。 除了用在书上,其实大部分都被用来...

  • 便利贴

    一张亮黄色便利贴从天花板上,安静地跳了下来,不偏不倚地坐在了刚好路过的wqt头上,没有早一秒,也没有晚一秒。 此时...

  • 便利贴

    画面里便利贴排列紧密 贴上写满了爱的话语 有温柔的提醒 有温暖的叮咛 有温馨的关怀 用温和的语气 写就爱的寄语 这...

  • 便利贴

    便利贴 大概没有人会为一张便利贴写下文字。 它太轻薄,太琐碎了,就像我写在便利贴上的一件件所谓的事情,都太琐碎,太...

  • 便利贴

    灰尘盖不住体贴的文字, 大风吹不弯倔强的脊背。 日子销蚀了鲜亮与厚实, 绽放着无怨无悔的意志。

  • 便利贴

    “人善被人欺”,这句话用在讨好型人格的人身上,再合适不过了。 办公室里,不懂拒绝的“便利贴”男孩或女孩,总会成为大...

  • DHH2-295号小米粒 第三周手绘作业

    手绘和构图的练习 Diy便利贴

  • 可以当笔筒用的便利贴

    便利贴和笔都是日常生活中使用频率非常高的东西,但你是否遇到过:手边有笔没有便利贴,或手边有便利贴却没有笔的情况呢?...

网友评论

    本文标题:Toasts:便利贴、不干胶和牛皮癣

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