租房小程序原型

编辑推荐

此实战原型为租房小程序原型界面,其中包含【首页】、【信息】和【个人中心】三大模块页面,只需要更改中继器的数据及界面文案,即可快速打造属于自己的商城、租房等小程序原型界面。

更新版本:

20250628:

1、更新首页图标,将图片换为形状图标。调整页面排版间距。

2、每个页面顶部添加状态栏和页面背景。

3、更新联系客户页面;

原型界面:

1、首页

2、筛选条件及详细页

3、最近会话及聊天记录

4、个人中心及最近浏览

5、个人中心及微信登录、58登录

界面交互分析:

1、首页筛选条件交互实现:

通过鼠标点击控制【筛选层】的显隐,展示筛选条件,再利用动态面板【筛选层】的四个不同状态进行切换,实现不同条件的房源筛选。首页内容则采用【中继器】进行快速排版。

2、【区域】筛选条件交互实现:

区域筛选条件为三级筛选,分别将二级和三级转化为动态面板。通过点击一级筛选层中的【附件】和【区域】两个选项值,控制二级筛选层的动态面板;当选中二级筛选值后,再决定三级筛选层的动态面板内容展示。

3、【租金】筛选条件交互实现:

通过滑动左右两个滑块,实现动态调节价格区间;其中,区间价格为整数,且为100的倍数。其主要是用到Math.floor取整函数。

4、【户型】筛选条件交互实现:

用户可以选择【不限】、【整租】和【合租】三种租房类型,再决定选择户型为【1室】、【2室】、【3室】、还是【次卧】、【主卧】。

5、【筛选】筛选条件交互实现:

用户可以根据喜欢自行组合房源的【验真情况】、【朝向】和【住房条件】。

6、【排序】筛选条件交互实现:

用户可以根据【距离近远】、【价格高低】、【发布新旧】条件筛选房源。

7、房源详细页:

通过动态面板的自动切换状态实现banner图的自动轮播,鼠标元件的拖动实现附件房源的水平滑动展示。

8、【消息】模块聊天界面:

结合使用【中继器】、【动态面板】、【函数】动态模拟聊天界面;根据用户发送的文字长度,自适应调节聊天框的宽度。通过获取焦点,控制键盘的显隐。

9、【个人中心】模块界面:

优化个人中心界面排版,增加渐变色,提升界面和图标的设计感。用户可以查看个人【收藏房源】、【聊天记录】、【最近浏览】、【我的发布】、【签约管理】和【联系客服】等模块。

发表回复

以下作品你可能也喜欢:
推荐

作品概况 页面数量:共 110+ 页 源文件格式:rp格式,兼容 Ax…

继续阅读 →

售价:¥ 79.80 销量: 27 5295
推荐

相关原型: HRM人力资源管理系统高保真原型:https://www….

继续阅读 →

售价:¥ 60.00 销量: 30 10096
推荐

作品介绍 作品特色: 1、中继器维护表格数据,自动生成交互,包括增加、…

继续阅读 →

售价:¥ 50.00 销量: 171 12989
推荐

作品名称:【规范】微信小程序元件库V3.8 文件大小:3.9M 兼容版…

继续阅读 →

售价:¥ 28.88 销量: 284 19267
推荐

作品名称:【教育培训】线上直播教育平台高保真原型 文件大小:82.5M…

继续阅读 →

售价:¥ 49.00 销量: 11 3680
推荐

2024-06-26 V1.9 后台管理:新增系统管理模块(用户管理、…

继续阅读 →

售价:¥ 79.00 销量: 74 34046