文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

来自用户体验大师的100个UX设计建议——上篇

在此，我想分享一下这些年来我获得的一些最佳实践原则。以下是我列出的100个顶级用户体验实践，供网页设计师们参考。 一、关于用户流程 1....除了正常的网页滚动，其他任何地方都不需要设计垂直滑动。 26. 移动设备上尽量不要设计双击交互，确保用户可以通过一次触摸完成交互。 27....在设计移动布局时，考虑用户是否会单手或两只手使用设备的情况。 5.png 六、关于导航设计 28. 在网站上设置一个明显的路径供用户访问导航菜单。 29....如果你的网站层次结构超过3-4级，是时候考虑重新设计了。 30. 考虑使用粘性菜单导航(跟随浏览器滚动的导航)，特别是在较长的网页中或需要快速访问时。 31....使用面包屑导航，让用户知道他们在网站上所处的位置。 35. 移动端导航设计：显示最常用的选项，并将其他选项隐藏在汉堡包菜单下。 36.

2.3K30

如何使用Web Share API

从本质上讲，它提供了一种方法，可以直接从网站或 Web 应用中共享内容（例如链接或联系人卡片）时触发设备（如果使用 Safari 桌面也可以）的本机共享对话框。...虽然用户已经可以通过本地方式从网页共享内容，但他们必须在浏览器菜单中找到该选项，即使这样，也无法控制共享内容。...正如你所看到的，在不支持的浏览器上很容易实现备用方案。 使用它的一些要求 要在你自己的 Web 项目中使用这个 API ，有两件事需要注意： 你的网站必须通过 HTTPS 进行访问。...在我们的例子中，有一个对话框，弹出一些共享内容的选项，演示中的按钮实际上并没有链接到任何地方，因为它只是一个演示。...以下是两个移动浏览器上共享按钮行为的比较，一个支持Web Share API，另一个没有： ? 在 Android 设备上测试支持该功能的共享按钮。

2.7K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    怎样才算是个出色的移动网站

    移动用户具有很强的目标导向。他们期望能够根据自身情况立即获得所需内容。 这项研究是通过与美国参与者进行长达 119 小时的亲自易用性实验来完成的。 研究要求参与者在各类移动网站上执行关键任务。...为新用户提供熟悉的第三方结账服务。 为复杂任务使用点击呼叫按钮 在具备呼叫能力的设备上，点击呼叫链接可让用户通过简单地触按链接来拨打电话。...在大多数移动设备上，用户会在拨号前收到确认，或者为用户提供一个菜单，询问用户应如何处理号码。 为在其他设备上完成任务提供便利 用户经常想在其他设备上完成任务。...❖易用性和机型 ❖ KEYWORD：自适应布局 成功：通过可增强移动用户使用体验的微小改进来取悦他们。 对您的整个网站进行移动优化 使用可随用户设备的尺寸和能力而变化的自适应布局。...将您的用户留在单一浏览器窗口内 用户可能难以在窗口之间切换，并且可能找不到返回网站的路径。 避免启动新窗口的行为召唤。识别任何可能导致用户离开您的网站的流程，并提供相应功能将他们留在您的网站上。

    2.8K50

    移动端基础

    视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...基本都将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 需手动添写meta视口标签通知浏览器操作...3.2多倍图 物理像素比会放大图片倍数，会造成图片模糊 在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题 背景图片注意缩放问题  开发中需要用多倍图，比如需要放一个...5.2css初始化 normalize.css 移动端CSS初始化推荐使用normalize.css 保护了有价值的默认值 修复了浏览器bug 是模块化的 拥有详细文档 官网地址

    2.7K20

    5个实例，让你轻松掌握自适应网页设计

    移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？自适应网页设计的出现很好的解决了这个问题。...而做好自适应网页设计则需要遵循以下几个步骤： Step 1：Meta 标签 为了适应屏幕，不少移动浏览器都会把HTML页面置于较大视口宽度（一般会大于屏幕宽度），你可以使用viewport meta标签来设定...三、自适应网页设计范例 目前很多网站在PC端和手机端已经采用了自适应设计，在不同的设备上浏览网页时已经可以很好的体验到自适应网页设计。...但自适应设计在移动网站上显示的布局可能与桌面版本会有所不同。所以，做自适应网页设计时，设计师需要做更多的工作来满足至少6种常见的布局需求。 这里有一些优秀的自适应网页设计范例供各位设计师朋友参考。...并且，此外，亚马逊的自适应网站为移动用户提供了在移动设备上使用“Amazon.com全站点”的机会，而响应式设计并不会提供。 ? 2.

    2.8K90

    将SIP Trace放入日志文件（mod_logfile）

    因为一般来说，我在Mac上（或Linux）上，Shell足够好用，因而，可以毫不费力的在Shell窗口（即FreeSWITCH控制台上）中将带有SIP消息的日志一块Copy出来粘贴到其它文件中。...而且，在此我也想插一句，我在帮人看日志时是非常讨厌抓屏的。因为看起来其实不直观，而且，没法搜索，没法Copy，没法引用…，总之，不爽。可能光说不爽有人觉得我矫情，那就说一下为什么不爽吧。...当然，既然我答应大家研究，就一定要出结果的（为什么要研究呢？因为我一直不用，所以没试过）。通过研究我发现，写日志文件的功能是在mod_logfile中实现的。...当然，不管是新用户还是老用户，随时都可以输入m或1显示本账号的主菜单。...如果你在学习和使用FreeSWITCH的过程中，有什么有趣的故事，也欢迎与我分享。移动设备上打字不方便，如果想写长的留言可以发邮件到 wechat@freeswitch.org.cn 。

    2.6K10

    5个范例告诉你什么是自适应网页设计

    移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？自适应网页设计的出现很好的解决了这个问题。...而做好自适应网页设计则需要遵循以下几个步骤： Step 1：Meta 标签 为了适应屏幕，不少移动浏览器都会把HTML页面置于较大视口宽度（一般会大于屏幕宽度），你可以使用viewport meta...三、自适应网页设计范例 目前很多网站在PC端和手机端已经采用了自适应设计，在不同的设备上浏览网页时已经可以很好的体验到自适应网页设计。...但自适应设计在移动网站上显示的布局可能与桌面版本会有所不同。所以，做自适应网页设计时，设计师需要做更多的工作来满足至少6种常见的布局需求。...并且，此外，亚马逊的自适应网站为移动用户提供了在移动设备上使用“Amazon.com全站点”的机会，而响应式设计并不会提供。 ? 2.

    1.8K30

    移动web开发

    IOS,Android基本都将这个视口的分辨率设置为980px,所以PC上的网页大都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放页面....对于一张50px*50px的图片,在手机Retina屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊. 在标准的viewport中,使用倍图来提高图片质量,解决在高清设备中的模糊问题....通常使用二倍图,因为iPhone7/8的影响,但是现在还存在3倍图4倍图的情况,这个看实际开发公司需求 背景图片注意缩放问题....)可以打开移动端,如果是移动设备打开,则跳转移动端页面....-webkit-tap-highlight-color: transparent; 在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式: -webkit-appearance

    3.2K21

    一文道尽JavaScript 20年的发展史

    我记得当时JavaScript最常见的用例之一只是在悬停时更改图像，作为风格效果，或在复杂的多选项卡表单上实现基本的悬停菜单。...Firefox的JS引擎SpiderMonkey是其源代码树的一部分，但不一定是在Firefox浏览器的上下文之外进行模块化和使用。...我在讲座的前半部分让观众相信JavaScript的功能核心实际上非常好。然后我花了下半部分说服NodeJS可能......它可能......创建一个开发人员工具生态系统和JavaScript的标准库。...几年前，在Web 2.0，云端和移动设备的所有噪音中，我们终于来到了移动时代，2015年移动流量超过了桌面流量，我们也看到了几个桌面操作系统迁移到了大多数常青树模型，例如Windows 10，Mac OS...开发工具不再是初出茅庐的，而是成熟的。所有Safari，Firefox和Chrome浏览器都有内置的开发工具（Firebug项目大多已被弃用）。还有一些方法可以使用移动开发工具调试移动Web浏览器。

    1.2K30

    当卡片式UI不再流行，列表式UI将是王牌

    我们第一次接触卡片问题是在 Goal News 发布之后 - 见图。屏幕上可以看见少量的抱怨的文章。例如： ? 用户关于卡片得反馈截图 太多的图片而且需要不停地滚动。我只是想快速的浏览新闻。...您可以在 Spox 电视季后赛 横幅上方的小图片上看到大量的可点击事件。 这些点击会使导航轮播。 他们在此页面上的被点击次数为43％。...这可能会吸引大量点击，因为单个用户可能在同一会话期间点击多个卡。 22％的总点击次数是通过 Themen des tages 的列表。 这个列表实际上只出现在第一个轮播项目！...移动模式 当我们研究在移动设备上的行为时， 我们访问了一个基于列表的 UI 网站（下面，左）和两个基于卡片的 UI 网站（下面，中，右）。...我们承认存在偏见，我们不是像上面做的比较同一个网站 ，但仍能总结出一些结论。 ? 移动单击并滚动地图。来自：HotJar 卡片式增加了汉堡菜单的使用 比较菜单图标的使用。

    4.1K70

    移动端基础

    视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...基本都将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 需手动添写meta视口标签通知浏览器操作...多倍图 物理像素比会放大图片倍数，会造成图片模糊 在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题 背景图片注意缩放问题 3.3二倍精灵图 在firework...2.css初始化 normalize.css 移动端CSS初始化推荐使用normalize.css 保护了有价值的默认值 修复了浏览器bug 是模块化的 拥有详细文档 官网地址:

    2.4K10

    「技术」SEO中的技术挑战指南

    在让搜索引擎发现我们网站页面前，其实我们还需要考虑为网站创建一个robots.txt文件，这本质上是一个说明手册，告诉搜索引擎爬虫在您的网站上什么文件可以抓取，什么文件不能抓取。...首先，您需要确保所有网站的内容对用户可见，而无需滚动或缩放。在非优化的网站上，书面文字通常会向右移动，迫使用户滚动阅读其余部分。...在移动设备优化的网站上，该文本将受到屏幕边缘的限制（这里的滚动主要体现在两个方面：第一，没有移动端的页面，用户访问时看到的还是PC端页面内容，用户阅读时，需要缩放内容页面，左右滚动页面才能阅读；第二，虽然有移动页面...有一些类型的内容不能在移动设备上加载（如Flash）。很明显，我们希望访问者能够看到所有酷炫的图片和视频，因此移动优化需要这些功能在移动设备上可见。 加载速度。...网站速度的问题，我们已经在上面讨论过，它在移动设备更重要。一般来说，移动设备的加载速度远远低于PC设备，因此PC设备上的一小部分延迟可能会让您在移动设备上花费几秒钟的时间。

    1K90

    细思极恐，第三方跟踪器正在获取你的数据，如何防范？

    位于欧盟访问时会泄露电子邮件的大部分网站（94.4%）在从美国访问时也获取了用户的电子邮件。 在这两种情况下，使用移动网络浏览器时的泄漏都略低。...位置为欧盟并使用移动浏览器时访问时，1745 个站点泄露了电子邮件地址，位置为美国则2744 个站点泄露了电子邮件地址。 电子邮件泄露的情况，移动端和桌面端访问网站大量重叠但不完全重叠。...第三方脚本收集了用户在网站上输入的数据，甚至在提交表单之前收集Web 浏览器也不会向用户说明。...研究人员使用 Firefox 和 Safari 进行了一项小型测试，希望使用反跟踪功能阻止了样本网站上的数据泄露。两种浏览器都未能在测试中保护用户数据。...移动设备上的用户可以使用默认支持扩展或包含广告拦截功能的浏览器。 研究人员开发了浏览器扩展 LeakInspector。

    2.1K20

    微信老外产品经理：《中国移动应用设计趋势》

    我不清楚为什么之前的文章会引起如此大的反响，因为在朋友们的眼里，如果我出了旧金山就是个 “呆瓜”。...事实上，根据专注于移动互联网研究的数据服务公司贵士移动（QuestMobile）分析数据显示，QQ 浏览器在安卓系统最受欢迎的 App 应用排行中位列第五，而 iOS 用户更喜欢 UC 浏览器，这款应用在苹果最受欢迎的...实际上，这些强制门户登录页面使用起来非常便捷，但是当它们和 iOS 整合成一种默认行为，似乎会让人觉得非常愤怒。...用户可以在主屏幕上安装快捷方式，然后直接访问。阿里小蜜可以回答用户订单的物流问题，预订旅行，或是帮助搜索网站上的相关信息。但是它没办法讲笑话。 　　...QQ 团队快速进行了应变，并成功推出了一些 App 应用的重新设计，提升了这款应用在移动设备上的用户参与度。

    1K20

    从LastPass转向拥抱开源KeePass的心路历程

    为什么从LastPass转为KeePass 之前一直使用LastPass个人版并且也完全满足我的需求，PC端使用浏览器插件，Android移动端使用的4.4版本（比较老的版本，还是支持中文版本的时代），...就在前几天，我在PC端使用时提示我进行URL encryption,操作后我在Android端无法查看我存储的所有网站的URL了，猜测可能是版本太低，为了防止在移动端操作上的不方便和数据不一致问题，我想着把...APP升级一下，结果找了半天，它也只能在Google Play商店上下载，最可恶的是国区帐号在Google Play商店也是搜不到的，最后找遍全网终于在APKPremier网站上找到了这个APP（我会在文末列出我找到的一些下载...随后又触发了LastPass的单设备限制机制（之前没有触发过PC和Android都能用是因为Android用的老版本APP）,最后我就只能在Android APP上使用了，PC端要使用得付费升级了。...完全满足我的需求。 如何从LastPass导出数据 APP端不支持，只能通过插件版或网页版导出，还好虽然密码管理功能被限制在移动端设备操作，导出功能还能在PC端使用。

    75410

    网站测速性能测试深入浅出教程[附15款常用网站测速工具

    各大CDN服务商在CDN配置上大同小异，并且官网均会有详细的说明文档，小编就不再这里重复描述了。...这只是在小型测试网站上。 在较大的网站上，百分比将更大。 这就是为什么了解如何正确加速测试网站至关重要的原因。...谷歌分析网站速度计时 虽然这对整体比较很有帮助，但我们通常建议不要使用它，因为我们发现数据并不总是准确的，或者对网站上实际发生的事情的描述过于含糊。为什么？因为它是从随机抽样的数据中收集的。...Site Relic Site Relic 是另一个新兴的完全免费的网站速度测试工具。它允许您在9个不同区域的移动和桌面设备上轻松检查站点的加载时间。您还可以同时查看您的TTFB跨所有区域。...您可以在不同的浏览器、移动设备之间进行选择，如Internet Explorer、Firefox、Chrome、iOS、Android、Windows Phone和BlackBerry。

    5.5K10

    charles抓包整理

    Fidder使用C#开发的，所以就不能在Mac上使用了，不过还有另外一个抓包神器，就是Charles，它是Java开发的，所以跨平台，不仅可以在Mac上使用，Linux以及Window下都是可以使用的，...IP 地址，如下图所示： 在 iPhone 的 “ 设置 ”–>“ 无线局域网 ” 中，可以看到当前连接的 wifi 名，通过点击右边的详情键，可以看到当前连接上的 wifi 的详细信息，包括 IP...如下图所示： 需要注意的是，即使是安装完证书之后，Charles 默认也并不截取 Https 网络通讯的信息，如果你想对截取某个网站上的所有 Https 网络请求，可以在该请求上右击，选择 SSL proxy...，如下图所示： 截取移动设备中的 Https 通讯信息 如果我们需要在 iOS 或 Android 机器上截取 Https 协议的通讯内容，还需要在手机上安装相应的证书。...如下图所示： 按照我们之前说的教程，在设备上设置好 Charles 为代理后，在手机浏览器中访问地址：http://charlesproxy.com/getssl，即可打开证书安装的界面，安装完证书后

    1K20

    iOS charles 抓包使用

    大家好，又见面了，我是你们的朋友全栈君。...链接1，非常详细，珠玉在前，不在赘述； ***** 连接 步骤简述***** 下载charles后，苹果手机与电脑连接同一个网络，在 iPhone 的 “ 设置 ”–>“ 无线局域网 ” 中，可以看到当前连接的...如下图所示： 证书如下： （根证书） 需要注意的是，即使是安装完证书之后，Charles 默认也并不截取 Https 网络通讯的信息，如果你想对截取某个网站上的所有 Https 网络请求，可以在该请求上右击...截取移动设备中的 Https 通讯信息 如果我们需要在 iOS 或 Android 机器上截取 Https 协议的通讯内容，还需要在手机上安装相应的证书。...如下图所示： 按照我们之前说的教程，在设备上设置好 Charles 为代理后，在手机浏览器中访问地址：Charles Web Debugging Proxy • SSL CA Certificate

    1.5K20

    国内 PWA 应用与实践图谱：从 微博 lite、饿了么 到 百度天气，再到一批低调上线的可安装站点

    (少数派-高品质数字消费指南)你问中国国内有哪些著名的PWA应用，我更愿意按“有公开资料可追溯、且用户规模或行业影响力足够大”的口径来举例，并把每个案例背后的真实使用场景讲清楚：它解决了什么问题、用户到底得到了什么...实践里可以用几个“肉眼可见”的信号做快速判断：可安装：浏览器出现安装提示，或在菜单里能看到安装应用之类入口（桌面端更明显，移动端往往需要你手动走添加到主屏幕）。...(TencentNews)使用形态：界面与iOS版本尽量一致，打开后没有浏览器顶部底部干扰；在Android10+上还能在多任务与应用列表里像应用一样被管理，并支持分屏、小窗等系统级交互。...(品玩)换个角度看，这也解释了为什么国内PWA往往以“工程优化”的面目出现：外卖下单要快、天气查询要稳、内容阅读要轻，PWA技术栈正好能在不改主架构的前提下，把移动Web往上抬一截。...(品玩)如果你希望我把这些案例再往“工程落地”方向拆开，比如国内团队常用的缓存策略组合、登录态与缓存的冲突处理、MPA怎么做PRPL、以及怎样在不牺牲SEO的情况下做骨架屏与SSR，我也可以继续按同样风格把一套可复用的实践清单写出来

    19110
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券