产品设计小窍门

一、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提示用户网络异常。让用户的行为即使在网络异常时也能得到反馈。