热门小程序 —— 58租房精选原型

封面图片

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

原型界面:

1、首页

2、筛选条件及详细页

3、最近会话及聊天记录

4、个人中心及最近浏览

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

界面交互分析:

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

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

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

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

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

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

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

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

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

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

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

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

7、房源详细页:

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

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

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

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

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

发表评论

以下作品你可能也喜欢:
生态环保首页
推荐

智慧生态环保平台是对全省污染源、空气质量、水体质量进行统一监控。 空气质量监测 空气地图 大气质量考核 水质监测 污染源监控 污染源统计 决策辅助

售价:¥ 66.00 销量: 18 1639
封面
推荐

本作品元件部分依据Vant 2.12.X版本:https://youzan.github.io/vant/#/zh-CN/绘制,页面模板依据支付宝设计Dapollo绘制,版权归有赞及支付宝所有。 元件包含:基础组件、表单组件、反馈组件、展示…

售价:¥ 65.00 销量: 1645 53201
TEM001
推荐

作品名称:AxureUX电商产品移动端交互原型 - 优品汇APP 作品类型:模板类 发布日期:2017-11-02 最新版本:v1.1 主要适用:移动端 软件版本:Axure 8.0 文件大小:11MB 作品编号:TEM001 作品售价:1…

售价:¥ 69.00 销量: 127 7488
cdp-04
推荐

用户画像是最常见的数据产品之一,通过标签描述用户群体。百度指数是一款常见的数据分析产品,在没有数据的情况下,可以通过百度指数快速了解当前市场上的数据情况,虽然它的数据不代表真实数据,但是它的数据分布趋势是可以拿来借鉴的。本原型参考百度指数产…

售价:¥ 10.00 销量: 72 7315
微信图片-20181203134919
推荐

看完原型图后开始教程讲解 第一步:梳理需求,搭建框架 特别重要的一个环节,如果没有需求,那你只好凭空想象了,先看我做个一个框架梳理先把大致框架梳理清楚,这样在 axure设计的时候能够理清楚层级,确保每个页面交互都能走通,这也是PM的,如果…

售价:¥ 14.10 销量: 101 9304
大学
推荐

2020-11-12更新 新增了消息-公告/私信/系统页面、我的课程/直播页面、编辑课程页面,以及页面间的部分交互 在线教育平台可以缓解教育资源分布不均,让有限的教学资源发挥最大的作用,极大的方便人们的学习。 这是一个针对大学内部的学习平台…

售价:¥ 89.00 销量: 17 4437