今天的设计练习是一个消息中心,一般消息类型比较多时才会使用此交互,把所有的消息集合起来,方便用户查看。

1、若是消息类型只有一种,则可以直接列表展示。

2、若是消息类型只有两种,则可以在导航栏使用Tab,然后把消息以列表形式在当前界面展示,如“微信读书”。

3、若是消息类型在三种以上,则可以考虑采用我今天的设计类型的这种交互。

在今天的练习中:

第二张界面,用户查看过的消息色值会变为灰色,未查看的消息会是黑色,方便让用户区分那些消息是已读的。

若是消息较多,则需要在右上角加一个“全部已读”,减轻用户的操作负担。

注意:

1)有未读消息时,“全部已读”按钮可以点击,透明度为100%

2)无未读消息时,“全部已读”按钮不可以点击,透明度为50%

第三张界面,若是消息文字数量较少,则可以省去第三张界面,直接在第二张界面显示全部消息。

若是消息文字数量较多,或者有图片的话,则可以使用第三张界面。

在省去第三张界面的情况下,用户到达第二张界面时,则就需要把“红点提示”去除,相当于用户在当前界面已查看了全部未读消息。

在有第三张界面的情况下,则点击到该消息的详情页时,去除该消息的“红点提示”,相当于用户查看了该消息。