用户体验
关注
分享
扫一扫
文章平均质量分 67
Michael18811380328
常与同好争高下，不与傻瓜论短长。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Accessibility 无障碍支持
Web 无障碍涉及确保内容保持无障碍，无论访问 web 的人员或方式。任何用户都可以使用其所有的功能和内容，特别是有身体或精神障碍的用户。键盘鼠标和触摸屏用户，以及用户访问网络的任何其他方式，包括屏幕阅读器，都能够访问网站。无论人们的听觉、视觉、身体或认知能力如何，应用程序都应该是可以理解和使用的。网站也不应该造成伤害：像动画这样的 web 特性会导致偏头痛或癫痫发作。国外网站中基本支持无障碍，我测试 MDN github airtable 等网站都支持比较好。原创 2024-03-06 14:03:23 · 2141 阅读 · 5 评论 -
移动端用户体验
今天看了《建设高性能网站》，有两段用户体验的知识点说的不错，记录一下：移动端下按钮尺寸通常情况下 PC 端使用鼠标点击，点击范围小，所以按钮图标的尺寸和文字大小类似即可（例如 16px）。但是移动端下，主要使用手指点击，点击范围较大，最好使用 48 px 以上的图标或者按钮，不同的图标间隔应该在 32px 之间，这样才能避免误触。如果移动端和PC端是一个页面，可以通过 media query 媒体查询，设置按钮的尺寸。如果是两张页面，最好单独处理一下（移动端单独的类名）原文截图如下界原创 2021-05-17 16:44:00 · 448 阅读 · 0 评论 -
Performant front-end architecture
Performant front-end architectureThis post describes some techniques to make front-end apps load faster and provide a good user experience.We'll look at the overall architecture of the front-end. ...翻译 2020-04-08 20:48:54 · 751 阅读 · 0 评论 -
送给大龄程序员
当你做编程工作一段时间后，基本的业务流程已经熟悉，基本的知识框架已经完善。想要进一步学习体系化的新知识却没有大片的时间，就陷入了迷茫中。那么，怎样在这种瓶颈期突破自己已有的知识体系呢？怎样在计算机飞速发展的过程中不被新趋势淘汰呢？我从实际的工作中想到下面的几个解决方案。 不断学习的思想：进入公司后相对稳定，工资短期内不升不降，这时候不能松懈。我们都知道温水煮青蛙的故事。如果自己思想上不够...原创 2019-02-19 11:24:31 · 558 阅读 · 0 评论 -
前端设置 cookie 用户信息
说明：cookie 用于在本地存储浏览器的信息。当浏览器发送请求时，将cookie共同发送到请求中。服务器可以获取当前用户信息。document.cookie 即可获取界面中的 cookies。cookie 数据类型是字符串，需要将字符串转化成对象的形式获取对应的属性。/** * [setCookie 设置 cookie] * @author Michael An * @DateTi...原创 2019-02-28 11:25:18 · 6446 阅读 · 0 评论 -
JavaScript暂停函数(JS中SLEEP函数)
在其他面向对象语言中，例如java和PHP，都有sleep函数（睡觉函数），功能就是暂停代码执行一段时间。在JS中没有直接封装好的sleep函数。但是我们有时候在测试，或者在请求远程数据过程中，需要让代码中断执行一段时间，就需要使用sleep方法（实际上也可以使用loading界面，这样用户体验会更好）。上代码：函数有两个变量，第一个是目标对象，第二个是睡眠时间（毫秒）。在需要的地方引用即...原创 2018-08-19 12:50:02 · 24432 阅读 · 6 评论 -
移动 H5 首屏秒开优化方案探讨
2020-01-08 review随着移动设备性能不断增强，web 页面的性能体验逐渐变得可以接受，又因为 web 开发模式的诸多好处(跨平台，动态更新，减体积，无限扩展)，APP 客户端里出现越来越多内嵌 web 页面（为了配上当前流行的说法，以下把所有网页都称为 H5 页面，虽然可能跟 H5 没关系），很多 APP 把一些功能模块改成用 H5 实现。虽然说 H5 页面性能变...原创 2018-07-15 07:41:34 · 2774 阅读 · 1 评论 -
前端图片格式与浏览器性能优化
在当前的静态或者动态界面中，图片是用户体验提升的重要的一部分。良好的图片设计会提升用户体验，并且对于浏览器优化具有很好的效果。接触图片设计和前端开发已经有两年时间，下面简单总结几点：1.图片格式传统的网页开发主要使用三种格式的图片：jpg、png、gif。这三种图片都是栅格图片（图片信息使用像素点进行存储），如果进行缩放会影响图片的视觉效果。jpg（jpeg）格式使用范围最广。通常情况...原创 2018-07-20 10:06:20 · 1077 阅读 · 0 评论 -
Cannot read property innerHTML of null 报错信息
Cannot read property 'innerHTML' of null ——这个报错的字面含义是：不能读取空的内部HTML。这个报错是一个初学者的问题。实际上，在页面的HTML结构中，innerHTML是有实际的值并可以在console进行获取查询到。问题：script中关于DOM部分放在和body标签前。根据浏览器的渲染原理，HTML代码从上到下执行代码，当浏览器JS解析器...原创 2018-07-20 09:29:19 · 24479 阅读 · 4 评论 -
web前端设计思路和用户新体验
1.实验室管理系统：个人预约实验室，实验室智能5G网络和物联网时代。实际上就是对数据库的增删改查。分析方法：流程图（产品分析）局限：学校中模拟的产品，没有进入社会实际使用，市场价值需要分析。组成部分：数据库-管理员入口-用户入口-产品信息-界面交互下图是现场演示2.空闲帮：一个社交功能的网站：用户交互社交平台，分为前端界面和后台数据交互。后端使用 Java 前端使用 JS。网页根...原创 2018-06-18 13:27:04 · 3844 阅读 · 0 评论 -
input输入框number类型用户优化
今天和朋友交流input框number类型的显示状况。浏览器默认的input输入框显示不好，对于用户输入的部分非法值不能合理进行判断，所以需要在JS进行操作。在移动端H5页面开发中，有时候会有一些数值输入方面的需求。如果需要让用户比较方便地输入小数、负数，最简单的方式是使用number类型的input框，输入时软键盘会切换为数字键盘方便输入（ios是带数字的全键盘，并允许1e5这类的表示方法）...转载 2018-06-23 21:04:03 · 2454 阅读 · 6 评论 -
前端旋转木马效果
轮播图，俗称“旋转木马”，前端设计经典的一个案例。通常电商首页会使用轮播图或者旋转木马。废话不多说，直接上代码。主要逻辑：静态界面：中部是图片，左右分别是前进和后退按钮，下面是不同的页码。功能分析：不操作时，界面会自动向某个防线滚动；点击左右上下按钮会切换，直接点击下面的页码会直接跳到对应界面中。技术难点：页面切换的动画；点击按钮时默认的滚动暂停；第一个图片和最后一个图片的滚动...原创 2018-06-15 15:24:48 · 3910 阅读 · 0 评论 -
移动端web界面开发
根据2017年大公司的市场分析报告，移动端用户上网人数和上网时间已经突飞猛进，相信在5G的环境中，更多人会选择便捷的移动端进行浏览网页获取信息。移动端界面开发也更加重要。移动端网页前端开发和传统PC端开发有不少异同点。1.移动端由于屏幕较小，为提高用户体验，设置单个网页内容远远小于PC端（网页HTML结构相对简单），小部件和格式处理更便捷。PC端富含更多信息，细节更丰富（导航网站或者购物网...原创 2018-04-24 20:30:14 · 2587 阅读 · 0 评论 -
前端设计与用户体验
清明节假期，突然想起一点东西：一个网页的复杂程度，和网页的传输效率，网页的打开速度有直接的关系。网页传输效率和网页打开速度对于用户体验至关重要。一个好的设计，不仅仅把产品的特点表现的淋漓尽致，同时需要给用户最佳的用户体验。如何不断优化自己的网站设计呢？1.网站多媒体的设置：多媒体是网站传输的重要的载体。现在用户耐心看完网站的文字内容很难，快速阅读的社会需要提供更多的图片视频音频等多媒体。对于图...原创 2018-04-06 17:22:54 · 5017 阅读 · 2 评论 -
电商网站前端代码特点分析
现在电子商务发展迅速，国内个人电商网站已经具有很大规模。电商网站相对传统的博客、论坛等，对用户体验和审美方面要求更高。排版布局等也在传统基础上有新的突破。以下是一个小型电商网站的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>M...原创 2018-04-12 13:15:57 · 4845 阅读 · 2 评论