1. 主页 > 行业资讯 > 设计文章 >

不同场景下复读机的风格处理

编辑引线:中继器的基本功能是动态添加或删除行或列。中继器将用于许多场景中的处理。例如,在显示表格、布局等数据时,不同的场景会得到不同的处理;本文作者分享了不同场景下直放站的风格处理,大家一起来看看。

"当使用中继器呈现列表数据时,如何体现不同的风格?"

Repeater是一个非常好的显示列表数据的组件,因为它可以根据需要设计个性化的布局样式,特别适合显示电子商务和内容阅读的列表数据。

以下例子是淘宝搜索结果页面,讲堂列表数据,腾讯视频:

【Axure9百例】45.中继器的不同样式

虽然列表中显示了这些,但你会发现列表中的数据略有不同;比如淘宝搜索结果页面显示打折价格和第二天到达的标志,教室列表显示一个群,显示一个限定时间,作者头像右上角不显示角标,腾讯视频缩略图右上角显示自制,显示VIP和付费。

【Axure9百例】45.中继器的不同样式

用过直放站组件的人都知道,总的风格布局是固定的,也就是说看起来都一样,但是内容不一样。复读机列表中相同数据的细微风格差异如何显示?

我们用一个相对简单的例子来看。具体应用可以在掌握基本方法后再考虑。

以微信首页的消息列表为例。

消息列表中通常显示的元素包括头像、新消息提醒角(数字或小红点)、消息时间和消息请勿打扰图标。

看下面这个。第一组有新消息,右上角小红点,消息不被打扰,第二组没有消息。

【Axure9百例】45.中继器的不同样式

01界面布局

添加一个中继器组件,双击进入编辑状态,使用默认的矩形框作为背景,添加一个占位符表示头像,一个红圈,三个文字标签和一个不打扰图标,小红点名称为new_msg,文字标签为title、content、mute,字段数据布局如下。

【Axure9百例】45.中继器的不同样式

中继器列表数据如下。为了便于理解,字段名称与组件名称一致:

【Axure9百例】45.中继器的不同样式

这四个字段分别代表标题、内容、新消息标志和消息请勿打扰标志。1表示是,0表示不是。

复读机的数据显示主要依靠事件处理。我们来看看互动事件的设置。

02交互式处理

文本内容很好处理,使用相应的文本标签直接显示就可以了。设置后的预览效果如下。

【Axure9百例】45.中继器的不同样式

这样显示的样式都是统一的,都是显示小红点和留言请勿打扰图标。显然这不是我们想看到的,和实际中继器数据不同;我们希望new_msg=1时显示小红点,否则不显示,静音值也不显示。

这里的重点是设置事件处理情况,通过条件表达式判断new_msg值是否为1。如果是1,会显示小红点;否则,小红点将被隐藏,请勿打扰标志将保持不变。

【Axure9百例】45.中继器的不同样式

在每项加载事件右侧,点击“启动情形”添加一个情形;在弹出的窗口中,设置“值”为new_msg=1时;设置标题和内容文本标签内容,同时显示new_msg小红点。

再加一个ELSE的情况来隐藏小红点。复读机的实时预览效果如下。可以看到小红点已经正常显示或隐藏,第2、3个数据的new_msg=0,所以是隐藏的。

【Axure9百例】45.中继器的不同样式

以上是这里的基本原则。

细心的同学可能发现,以上情况只判断new_msg的值,有一个静音不中断消息。如何添加一种情况?是否要列出所有可能的组合?

有新消息,有免打扰有新消息,无免打扰无新消息,有免打扰无新消息,无免打扰

当然,这样添加不同的情况是可以的,但是比较繁琐。如果有另一个群头像呢?角标显示数字?场景越来越多。

提出这个问题是因为有更好的解决办法。

在接下来的案例中,我们来谈谈多重条件判断更优雅的处理方式。如果你知道怎么处理,或者觉得是比较好的方法,也可以分享一下。

03摘要

一句话总结,需要在复读机中显示不同的样式,通过添加不同的情况来判断关键字段标识,并显示或隐藏相应的元素。

这样就可以实现不同情况下的风格,方便开发人员和测试人员更直观的理解。这也是原型具有交互效果的好处之一。

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/518.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息