移动端用户体验

最新推荐文章于 2023-06-25 15:20:30 发布
最新推荐文章于 2023-06-25 15:20:30 发布
阅读量337 收藏
点赞数
分类专栏： 用户体验 文章标签： ant-design 移动端用户体验 产品设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41697143/article/details/116938012
版权

今天看了《建设高性能网站》，有两段用户体验的知识点说的不错，记录一下：

移动端下按钮尺寸

通常情况下 PC 端使用鼠标点击，点击范围小，所以按钮图标的尺寸和文字大小类似即可（例如 16px）。但是移动端下，主要使用手指点击，点击范围较大，最好使用 48 px 以上的图标或者按钮，不同的图标间隔应该在 32px 之间，这样才能避免误触。

如果移动端和PC端是一个页面，可以通过 media query 媒体查询，设置按钮的尺寸。如果是两张页面，最好单独处理一下（移动端单独的类名）

原文截图如下

界面响应速度

界面交互在 0.1 秒之内，请求响应在 1秒之内，超过 10秒 的任务需要使用进度条等提示。

具体的延迟实例

下面是 ant design mobile 的进度条和 loading 提示，效果不错

其他用户体验可以参考：

https://blog.csdn.net/rui512777/article/details/78355166

https://mobile.ant.design/index-cn

Michael18811380328
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
华为商城移动端产品体验报告：学习中超越，需要更大的创新_产品体验报告产品经理互联网运营文档技能APP竞品需求分析.pdf
07-08
华为商城移动端产品体验报告：学习中超越，需要更大的创新_产品体验报告产品经理互联网运营文档技能APP竞品需求分析.pdf
二次封装antd-mobile loading组件 — ActivityIndicator，实现以api的方式调用
qq_16139383的博客
08-31 1513
前言 用过antd-mobile的同学应该都知道，当我们用ActivityIndicator组件，也就是loading组件时，是需要以组件的方式去引用，这就带 来一个问题，如果项目中有很多地方需要用到loading，就需要在每一个页面去引用组件，个人觉得这样的方式对于我们开发者来 说并不是特别的友好，本人最近在开发H5项目就遇到这样的问题。于是就思考如何能实现以api的形式去调用，就类似于微信小程 序中wx.showLoading()的api。 实现方式 具体代码如下： 1、新建loading.tsx文件
react ant design pro中的Spin 三步实现整个页面的loading效果
weixin_52745389的博客
02-19 9922
react ant design pro中的Spin 实现整个页面的loading效果
Ant Design Vue 表格中按钮单独的loading详细解决方案
m0_50599032的博客
05-11 5844
ant 表格按钮单独loading , 最近项目遇到了 :loading=‘loading’ 这样会使所有的button一起loading,找了很久都没有解决方式 ,有个作者提到了set方法在这里分享给遇到同样问题的小伙伴! 话不多说上图片! 方案 <span slot="transferScheme" slot-scope="text, record"> <a-button type="link" @click="handleBtn(record)"
Ant Design Mobile RN 使用加载中......
欢迎进入小洋的博客！
03-26 642
import { Toast } from '@ant-design/react-native'; getData = () => { // 创建加载 this.key = Toast.loading('加载中...', 0, null, false); try { // 获取数据,等待加载中... ...... // 获取成功完成加载 Toast.remove(this.key); } catch (e.
前端实现真实可动态变化进度条,axios+ Ant Design Vue实现.
youthwsj的博客
06-25 5033
由于本菜鸡之前都是用的假的进度条,最近有一个新需求,要求在前端实现真实的进度条展示,让用户可以看到文件上传的状态,于是搞了一下这方面的,发出来和大家讨论
react-dva-antd实现页面loading加载效果（首屏优化）
WebView
05-23 5922
1、预期需要实现效果： 为了达到更好的用户交互体验。 在我们渲染表格数据的时候，当表格数据改变的时候我们出现加载效果。非使用Spin组件。当接口在调用的时候，我们去控制loading效果。所以我们在models实现。 使用到的是Table中的loading属性。 2、直接贴出代码 loading: true, =>state ====>effects // 查询班级出勤统计数据单天 *inqui..........({ payload }, { call, put })
antd加上数据加载进度条
reg183的专栏
12-24 2592
效果如图 这个效果如何实现呢 在model回传数据的方法中包含着一个loading参数 ... const mapStateToProps=({users,loading})=>{ console.log("loading",loading); return { users, userListLoading:loading.models.users } } export default connect(mapStateToProp
17. 移动端用户体验设计趋势.pdf
最新发布
10-22
17. 移动端用户体验设计趋势.pdf
2022 APP端到端用户体验分析与实践.pdf
01-05
2022 APP端到端用户体验分析与实践
react-ReactSweetProgress一个react应用进度条
08-15
React Sweet Progress 一个 react 应用进度条
移动端设计的思维模式
02-26
在此期间，我学习了交互设计和用户体验相关的一些概念，之前这些方面我基本是张白纸。有些时候，我觉得自己陷入一种重复的工作循环：我找到了一种几乎不会出错的设计方法，借此每个新项目，相比之前我更能轻松快速...
基于vue2结合Ant Design of Vue a-progress组件实现loading bar（动态加载进度条）组件
badoldboy的博客
12-30 4014
先看效果图 组件代码 <template> <div class="loadings" v-show="isShow"> <div class="c-loading"> <a-progress :strokeWidth="25" :percent="percent" /> <div class="loadtext">{{ text }}</div> </div> </div&g
移动端Loading的两种方式--RN
wdm891026的博客
11-09 4179
方式一： 1.  先封装一个 Loading 组件 import React from "react"; import { StyleSheet, View, ActivityIndicator } from "react-native"; const Loading = () =&gt; ( &lt;View style={styles.container}&gt; &lt;...
ant-design-mobile 样式按需加载
殇之何伤的博客
12-01 477
1、安装按需加载组件： npm i --save-dev babel-plugin-import 2、运行 npm run eject 3、修改package.json文件 "babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd-mobile", "li...
ant design loading 使用
runrun117的博客
04-09 2544
1、使用connect连接命名空间，读取命名空间返回的信息 @connect(({ DoneCheck, loading }) => ({ DoneCheck, loading: loading.models.DoneCheck, })) DoneCheck为命名空间的。 loading为根据命名空间是否有返回值来进行变化。这个数值存放在props中 在render中使用props获取loading。 render() { const { loading }.
使用antd-mobile遇到的坑
热门推荐
a54654132的博客
09-12 2万+
在使用antd-mobile中的组件的时候，遇到了一些比较棘手的问题，经过查找相关资料和网上的帮助，在此整理出了问题以及解决办法： 在引入antd-mobile的时候，根据官网提供的文档： 1，首先安装antd-mobile， 2，其次安装依赖，引入babel-plugin-import 这个按需加载插件，在.bablerc中添加插件配置 "plugins": ["transfor
React引入ant-design实现正在加载效果
Stephen__Wu的博客
05-26 6655
React引入ant-design实现正在加载效果 1.安装 npm install antd --save 2.导入ant-design // 导入ant design import { Spin, Icon } from 'antd'; import 'antd/dist/antd.css'; const antIcon = &amp;amp;lt;Icon type=&amp;quot;loading&amp;quot; style=...
ant design表格添加loading效果
马优晨
12-13 2万+
这里看一下ant design中表格添加loading效果。在页面进来，获取数据时候获取到数据的时候实现方法： 这里只需要在要渲染的表格中添加，loading={XXXX} 即可。大括号里面的值如果是true，则显示loading效果，如果是false则不显示loading。
vue 移动端项目 在弱网环境的用户体验更好体验
06-10
在弱网环境下，为了提升 Vue 移动端项目的用户体验，可以采取以下措施： 1. 对于网络请求进行优化：可以采用延迟加载、懒加载等策略，减少网络请求的数量和请求的数据量，减少页面加载时间。 2. 对于图片资源进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值