美文网首页
产品设计小窍门

产品设计小窍门

作者: 淮水依依 | 来源:发表于2017-08-07 15:22 被阅读5次

一、Tab的小短线

Tab用于导航栏分类,Tab的小短线是指分类名称下的线,一般选中该分类时,名称下的小短线也会随之变化。

1、固定的tab:谷歌规范中规定:一组固定tabs至少包含2个tab并且不多于6个tab,并且在一行内显示。

*小短线非常端,大概30px,通常用于一级菜单

*平均等分:按照屏幕的宽度平分,有几个分类就均分几个小短线

*除去两边边距后均分:先把两边的边距去掉,然后再均分中间的宽度

2、可滑动的tab:一般新闻网站的顶部,内容较多显示不全的情况下,会隐藏右边的部分,小短线会随着文字的多少而变动

二、网络异常的设计

1、网络切换:即从WiFi状态切换到3G/4G网络

一般视频类、音乐类、直播类APP消耗的流量比较大,在这种状态下,给予用户流量转换提醒并告诉用户怎么做,是非常人性化的设计,如虾米音乐和QQ音乐的网络切换提示

2、网络中断:一般是在网络中断或者信号不好导致APP与服务器的数据传输中断,这时要考虑页面有无缓存数据:

无缓存数据时:

1)整页提示:当整个页面内容都因为网络异常导致未加载成功,采用整页提示的方式,页面通常显示“网络出了问题”,“重新加载”,“点击刷新”等提示。

整页异常的设计样式包括三部分:icon或者插画形式;网络异常文案;重试或者前往WiFi设置的button(或者没有button,直接点击页面空白区域)。

2)占位符提示:多出现于native的页面中,原生已经将页面框架搭好,无需联网也能查看,但是里面的内容需要联网才能展示。这个时候会使用占位符替代未加载出来的图片,用灰色块替代未加载出来的文字,在极短时间内,用户几乎感受不到网络不好的情况。

有缓存数据时:

1)列表提示:当页面有缓存数据时,可以用list的设计形式,一般在页面导航栏下面来提示用户,网络异常,请前去检查网络设置。

2)dialog提示:采用dialog不仅仅可以提示用户网络异常,还能给出“设置”的入口,让用户直接前往WiFi界面设置网络。如果仅仅是提示用户网络异常,直接用toast的会更好,因为toast不会获得用户焦点,并且不会中断用户的操作。

3)toast提示:当网络信号不好或网络中断时,用户还在继续操作APP,为了提示用户,会在用户每次触发操作时利用toast提示用户网络异常。让用户的行为即使在网络异常时也能得到反馈。

相关文章

  • 产品设计小窍门

    一、Tab的小短线 Tab用于导航栏分类,Tab的小短线是指分类名称下的线,一般选中该分类时,名称下的小短线也会随...

  • 无法拒绝的指引

    本文作者:闲愁 点击了解公众号,教你说话小窍门,点击了解公众号,教你说话小窍门,点击了解公众号,教你说话小窍门。一...

  • 剥蒜头

    在生活当中,有许多小窍门。一开始,我很轻视这些小窍门。后来我才发现,这些小窍门是真正方便、实用的。 有...

  • Flutter 开发者的 4 个 Dart 小窍门

    Flutter 开发者的 4 个 Dart 小窍门Flutter 开发者的 4 个 Dart 小窍门

  • 2017-11-12

    在生活当中,有许许多多的小窍门。当然,学习怎么能少得了小窍门呢?下面,就看看我的学习小窍门吧! 学习语文的时候,比...

  • 小连护肤知识之击退斑点小窍门

    小连护肤知识之击退斑点的小窍门 小连护肤知识之击退斑点的小窍门 小连护肤知识之击退斑点的小窍门 1. 长斑是色素沉...

  • 21.把“放风”时间排进日程里

    (图:孙果子 微信公众号: drawing_design) 《50个时间管理小窍门》系列介绍:这50个小窍门,不讲...

  • 22.梳理事情的轻重缓急——时间四象限

    (图:孙果子 微信公众号: drawing_design) 《50个时间管理小窍门》系列介绍:这50个小窍门,不讲...

  • 23.每天运用四象限的三个贴士

    (图:孙果子 微信公众号: drawing_design) 《50个时间管理小窍门》系列介绍:这50个小窍门,不讲...

  • 24.每周的安排顺利完成的三个贴士

    (图:孙果子 微信公众号: drawing_design) 《50个时间管理小窍门》系列介绍:这50个小窍门,不讲...

网友评论

      本文标题:产品设计小窍门

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