&figure&&img src=&https://pic4.zhimg.com/v2-5ddfdfd02c072cdf35cac_b.jpg& data-rawwidth=&1920& data-rawheight=&640& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic4.zhimg.com/v2-5ddfdfd02c072cdf35cac_r.jpg&&&/figure&&p&这段时间为了研究控件，细看了一下 Material Design，结果发现了很多创新、好用又有趣的东西。如果你想看一看 Material Design 的译文或者控件目录，这样的资源想必你能搜到不少。所以，我就不再锦上添花了，这里主要写的是 Material Design 给我带来的打破思维局限的东西，所以每一点都是精挑细选的关键点。&/p&&p&什么是 &a href=&http://link.zhihu.com/?target=http%3A//material.google.com& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Material Design&/a&：这是谷歌提出的一套集合视觉、交互和前端的界面设计规范，其目标有两点，一是用视觉形式囊括经典的设计原则，并将将前沿创新和技术展现出来，二是以移动端为基础，将所有尺寸、类型的设备统一起来。&/p&&h2&在触屏为主的时代，悬停状态要慢慢淡出舞台&/h2&&p&不论是下拉框、按钮、隐藏菜单……， Material Design 要么完全摒弃了鼠标悬停状态，要么就只把悬停状态看作一个无关紧要的视觉反馈。我虽然对悬停效果有些不舍，但也不得不承认，未来是点击和手势的时代，悬停已经在慢慢淡出舞台的路上了。&/p&&h2&永远不要以为用户的设备尺寸是你可以预期的&/h2&&p&尤其是那些用大屏的设计师们，不要有侥幸的心理认为在你的屏幕能完整显示的一页，在用户的设备上同样不需要滚页。在设备越来越多样化的未来，滚动条将不是一种选项，而是一种自适应。所以，永远要让页底的控制按钮浮起来，以适应过矮的屏幕。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-448cc4e6b71b5bf3cc660f14b65060b7_b.png& data-rawwidth=&1240& data-rawheight=&1102& class=&origin_image zh-lightbox-thumb& width=&1240& data-original=&https://pic4.zhimg.com/v2-448cc4e6b71b5bf3cc660f14b65060b7_r.jpg&&&/figure&&h2&阴影的目的不是美观而是纵深&/h2&&p&谷歌向来强调层级概念，这也是它与苹果相差较明显的一点。 Material Design 认为，界面不只是平面的，元素之间也可以有纵向的高度差，那么体现这个高度差的方法，就是阴影。 Material Design 的纵向尺寸和平面尺寸都用同一单位（dp），并统一了不同纵向高度所对于的阴影样式。于是，便创造出了一个层级为堆砌起来的三维世界。 &/p&&figure&&img src=&https://pic2.zhimg.com/v2-9fc4cacda911_b.png& data-rawwidth=&1240& data-rawheight=&783& class=&origin_image zh-lightbox-thumb& width=&1240& data-original=&https://pic2.zhimg.com/v2-9fc4cacda911_r.jpg&&&/figure&&h2&为了易用而确定尺寸&/h2&&p&界面布局和元素的尺寸究竟是该交互来定还是视觉来定，这是一个争议性话题。我个人认为，尺寸还是应该先从交互开始，视觉设计如果从美观上考虑有别的想法，可在此基础上进行讨论修改。因为界面的存在意义不是为了好看，而是为了使用。元素过小、过大、尺寸不统一都会影响到使用，所以这些东西都是交互必须要考虑的。 Material Design 给出了一个32dp（0.508mm）的尺寸限制，规定最小尺寸的按钮和标签都有这么高，以保证触屏的使用舒适度。&figure&&img src=&https://pic2.zhimg.com/v2-bea9f0b54fb20fa6a66065_b.png& data-rawwidth=&372& data-rawheight=&210& class=&content_image& width=&372&&&/figure&&/p&&h2&隐藏与否取决于必要性，而非空间是否足够&/h2&&p&我承认并且反省，直到昨天，我的做法都是将所有可能用到的东西都摆在界面上，发现看起来过多或放不下时，才将部分通过“更多”图标等方式隐藏起来。这样做来其实有很多问题，如果用户的屏幕足够大，那么是不是什么东西都不用隐藏了？当然不是这样，无论界面空间多充足，人的注意力都是有限的。所以 Material Design 主张只将必要的元素（也许只是一两个）展示出来，其余的全部隐藏。&figure&&img src=&https://pic1.zhimg.com/v2-989c8f27ba752dc7662505fdda061a08_b.png& data-rawwidth=&1240& data-rawheight=&204& class=&origin_image zh-lightbox-thumb& width=&1240& data-original=&https://pic1.zhimg.com/v2-989c8f27ba752dc7662505fdda061a08_r.jpg&&&/figure&&/p&&h2& 慎用色彩&/h2&&p&不知道这是不是又算不小心踏入视觉设计的领地了，色彩确实又是另一个需要视觉设计和交互设计共同探讨的话题。很多时候，增加一个色彩或者不增加，对美观并没有什么很大的影响，如果是这样，那么最好不要增加。世界顶尖的设计公司对色彩都是相当吝啬的，因为界面存在的意义是使用，而为色彩越多，对用户的干扰越大（可拓展性和品牌识别性也越低）。&figure&&img src=&https://pic2.zhimg.com/v2-5cf4f730aa7c1f72ed7f6d_b.png& data-rawwidth=&1140& data-rawheight=&194& class=&origin_image zh-lightbox-thumb& width=&1140& data-original=&https://pic2.zhimg.com/v2-5cf4f730aa7c1f72ed7f6d_r.jpg&&&/figure&&/p&&h2& 让真正重要且唯一的东西打破既定框架&/h2&&p&交互设计如果做的随意了，结果会很糟糕；但是如果做得严谨了，有时候会变得很无聊。我们是可以找到一个突破点，做一些不一样、打破格局的东西的，但是这个东西必须是真正重要且唯一的东西。这个很好理解，如果只有一个东西不一样，那么画面会很有趣，但是如果所有东西都不一样，就会很混乱了。Material Design 的圆形悬浮按钮就是一个真正重要且唯一的东西。&figure&&img src=&https://pic1.zhimg.com/v2-b220ae08_b.png& data-rawwidth=&281& data-rawheight=&200& class=&content_image& width=&281&&&/figure&&/p&&h2& 弹出框没必要多复杂&/h2&&p&我从没仔细看过弹出框的标题是什么，虽然我知道大部分弹出框都有标题。很多人如果发现弹出框没有右上角的“×”会抱怨，但实际上他们根本不需要那个“×”，谁都知道在方框之外点一下弹出框就消失了。 Material Design 对弹出框的运用很灵活，如下图这种情况，弹出框的用处只是增加一段评论而已，那么干脆将标题、确定按钮和取消按钮都去掉，这样使用起来反而更加顺畅了。&figure&&img src=&https://pic2.zhimg.com/v2-f62a879aafd8e2edb824e_b.png& data-rawwidth=&1240& data-rawheight=&432& class=&origin_image zh-lightbox-thumb& width=&1240& data-original=&https://pic2.zhimg.com/v2-f62a879aafd8e2edb824e_r.jpg&&&/figure&&/p&&h2&不是视线追踪元素，而是元素追踪视线&/h2&&p&我曾在《为熟练用户而设计》里提过，做设计时应该认真考虑甚至计算用户的操作步数和移动距离。光是这些也许还不够，最好是连视线移动都能够尽量避免，因为二次聚焦也是需要时间的。上面那张图中，弹出框上的文本区域与弹出框下的评论区域是重合的，这样设计就避免了用户多次移动视线。 Material Design 把视线追踪也运用到了下拉框上，点击下拉框区域后，选项框完全覆盖之前的下拉框区域，并且按顺序排列的选项会自动滚动，让默认选项的位置刚好在之前的下拉框区域之上。&figure&&img src=&https://pic2.zhimg.com/v2-36aabfd730eedcf8d9b6e9_b.png& data-rawwidth=&1082& data-rawheight=&555& class=&origin_image zh-lightbox-thumb& width=&1082& data-original=&https://pic2.zhimg.com/v2-36aabfd730eedcf8d9b6e9_r.jpg&&&/figure&&/p&&h2& 慎用卡片&/h2&&p&自从iPhone把圆角阴影炒火了之后，在很多地方都出现了滥用情况，这几年“卡片式”盛行，隐有愈演愈烈之势。 Material Design 主张将卡片做成明显的圆角，结合纵深感较强的阴影，这样就能够跟其它区域区分开来。但是在信息密集的地方又不提倡使用卡片，因为卡片的边框会对注意力造成干扰。&figure&&img src=&https://pic4.zhimg.com/v2-14d72016fcba40b5e5727_b.png& data-rawwidth=&1140& data-rawheight=&698& class=&origin_image zh-lightbox-thumb& width=&1140& data-original=&https://pic4.zhimg.com/v2-14d72016fcba40b5e5727_r.jpg&&&/figure&&/p&&h2& 让信息碎片化&/h2&&p&我们看任何东西，都很少会老老实实地完整阅读。在纸上看书的时候，我们往往通过不断地扫视、翻页来寻找自己刚兴趣的内容详读。在浏览网页时，我们也希望能够一眼在界面上扫到自己感兴趣的内容，然后再深入研究。所以，设计师通常只需要抛出一些“引子”，用户如果感兴趣，就可以顺着这个引子寻找到他们想要的东西。所有信息展示应该碎片化，注重丰富而不是完整。&figure&&img src=&https://pic3.zhimg.com/v2-985ade002e659bfcb678bd2_b.png& data-rawwidth=&540& data-rawheight=&627& class=&origin_image zh-lightbox-thumb& width=&540& data-original=&https://pic3.zhimg.com/v2-985ade002e659bfcb678bd2_r.jpg&&&/figure&&/p&&p&&i&未经允许请勿转载&/i&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-feec4ab3a769af1e7c8f4e_b.png& data-rawwidth=&200& data-rawheight=&120& class=&content_image& width=&200&&&/figure&
这段时间为了研究控件，细看了一下 Material Design，结果发现了很多创新、好用又有趣的东西。如果你想看一看 Material Design 的译文或者控件目录，这样的资源想必你能搜到不少。所以，我就不再锦上添花了，这里主要写的是 Material Design 给我带来的打破…
&p&介绍一款神器 Tampermonkey，也被戏称为「油猴」。它可以通过安装各类脚本对网站进行定制。不过它能定制的不仅仅是网站的样式，还能实现更多更强大的功能，例如：&/p&&ul&&li&直接下载百度网盘文件&/li&&li&重新定制繁杂的微博页面&/li&&li&去掉视频播放广告&/li&&li&将网站默认的「二维码登录」改回「账号密码登录」&/li&&li&绕过搜索引擎的跳转提示&/li&&li&还原清新的小说阅读模式&/li&&li&豆瓣和 IMDb 互相显示评分&/li&&li&……&/li&&/ul&&p&你可能听说过「油猴」，但是因为看到「脚本」而不敢尝试，其实它的操作非常简单，只要经过简单设置，下载一些现成脚本，就可以实现上面提到的实用的功能。&/p&&h2&如何使用 Tampermonkey&/h2&&p&如果能正常访问 Chrome 应用商店，可以直接在商店内下载 &a href=&//link.zhihu.com/?target=https%3A//chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Tampermonkey&/a&。&/p&&p&如果不能，在这里推荐一个叫 &a href=&//link.zhihu.com/?target=https%3A//www.crx4chrome.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Crx4Chrome&/a& 的网站，可以直接下载 Chrome Store 插件，在 Crx4Chrome 搜索并下载 &a href=&//link.zhihu.com/?target=https%3A//www.crx4chrome.com/extensions/dhdgffkkebhmkfjojejmpbldmpobfkfo/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Tampermonkey 插件&/a& 到本地之后，再打开 Chrome 浏览器「扩展程序」页面，将下载的 crx 文件拖拽到页面即可完成安装。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-1cde8dcbe95a_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&700& data-rawheight=&280& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&https://pic3.zhimg.com/v2-1cde8dcbe95a_r.jpg&&&/figure&&p&另外，Tampermonkey 还支持 Microsoft Edge、Safari、Opera Next、Firefox、Dolphin Browser、UC Browser 等浏览器平台，你可以在 &a href=&//link.zhihu.com/?target=https%3A//tampermonkey.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&软件官网&/a& 下载到对应版本。&/p&&h2&Tampermonkey 设置选项&/h2&&p&安装好之后，会在浏览器地址栏右侧看到类似望远镜的图标，这个就是 Tampermonkey，点击右键选择选项，即可看到设置页面：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-0ee11b4be5a0d4aaa61ec570ca05f5b3_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&815& data-rawheight=&411& class=&origin_image zh-lightbox-thumb& width=&815& data-original=&https://pic4.zhimg.com/v2-0ee11b4be5a0d4aaa61ec570ca05f5b3_r.jpg&&&/figure&&p&Tampermonkey 提供了友好的中文化界面，懒得折腾的用户使用默认设置即可，无需更改任何选项。&/p&&p&如果需要更多高级设置选项的话，可自行打开「初学者」或者「高级」配置模式，设置将提供动作菜单、更细致的脚本更新、TESLA、加强版编辑器、安全、黑名单检查等高级选项。&/p&&h2&脚本安装和管理&/h2&&p&油猴默认是没有安装任何脚本的，你可以通过设置页面的「已安装脚本 - 获取脚本…」来下载各种脚本。&/p&&p&比较常用的下载渠道有三个：&/p&&ul&&li&&a href=&//link.zhihu.com/?target=https%3A//greasyfork.org/zh-CN& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Greasy Fork&/a&：支持中文，按照今日安装、总安装数、得分、创建日期等的排序方式给出脚本列表，可按脚本生效的网站过滤，每一脚本都有中文介绍，并且详细列出了作者、安装数、更新日期日志、安装使用截图、兼容性、应用到、代码查看等信息描述。&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//openuserjs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&OpenUserJS&/a&、&a href=&//link.zhihu.com/?target=https%3A//userscripts-mirror.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Userscripts Mirror&/a&：这两个网站都没有提供中文界面，Userscripts Mirror 已经停止了更新，用户可以在这个站点找到历史资源。&/li&&/ul&&p&找到需要的脚本后，会在介绍页面看到安装（install）按钮，点击下载脚本后会自动跳转到安装界面，再点击安装就可以享用脚本了。&br&&/p&&p&比如，在 OpenUserJS 的 Yet Another Weibo Filter 脚本页面，点击右侧 Install 之后会跳转到 Tampermonkey 的安装页面，这里列出了脚本的基本说明和源代码，再次点击页面中的「安装」按钮即可。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-a87a2df0bdeb4f3c6e6d2_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&700& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&https://pic3.zhimg.com/v2-a87a2df0bdeb4f3c6e6d2_r.jpg&&&/figure&&p&此时打开微博网站，点击地址栏右侧的 Tampermonkey 图标，可以看到这个 Yet Another Weibo Filter 已经成功启用，用户可以点击 ON 按钮临时关闭使用该脚本。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-704d6fc483fae111e54bd81fc9a19e5a_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1120& data-rawheight=&272& class=&origin_image zh-lightbox-thumb& width=&1120& data-original=&https://pic3.zhimg.com/v2-704d6fc483fae111e54bd81fc9a19e5a_r.jpg&&&/figure&&p&打开 Tampermonkey 设置页面的「已安装脚本」，我们可以看到刚安好的 Yet Another Weibo Filter 脚本，用户在这里可以选择是否打开脚本，或是对脚本进行编辑、提交 Bug 以及删除脚本等多项操作。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-3e2ef48aff39d5bacbc4e6_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&700& data-rawheight=&350& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&https://pic3.zhimg.com/v2-3e2ef48aff39d5bacbc4e6_r.jpg&&&/figure&&p&建议在安装好各个脚本之后，在实用程序的页面中，将脚本存储和 Tampermonkey 设置以文件或者压缩包的形式导出，方便以后数据备份。&/p&&h2&优秀脚本推荐&/h2&&p&在上面提供的三个网站大家可以看到各种功能的脚本，你可以根据自己的需求进行下载，如果不知道该下载哪些，下面为大家推荐 15 个优秀实用的用户脚本，不妨先来看看。&/p&&h2&看真正想看的微博：&a href=&//link.zhihu.com/?target=https%3A//greasyfork.org/zh-CN/scripts/3249-yet-another-weibo-filter& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Yet Another Weibo Filter&/a&&/h2&&p&Weibo 官方界面已经成为不少脚本应用必修的对象，ts 开发的这款脚本可以高度定制 Weibo 电脑端版面，去除各类广告、微博主自带的各种徽标、过滤热门话题等主要功能，用户需要在脚本的设置中启用相应功能。&/p&&p&如果希望单独安装浏览器插件的话，推荐 &a href=&//link.zhihu.com/?target=https%3A//openuserjs.org/scripts/ts/%255Bhttps%3A//code.google.com/p/weibo-content-filter/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&眼不见心不烦&/a&，其支持 &a href=&//link.zhihu.com/?target=https%3A//chrome.google.com/webstore/detail/aognaapdfnnldnjglanfbbklaakbpejm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Chrome&/a& 和 &a href=&//link.zhihu.com/?target=https%3A//bitbucket.org/salviati/weibo-cleaner/downloads/weiboCleaner-latest.user.js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Firefox 脚本&/a&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-8d4104d2fccf53c3c98d464e5f16e59e_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1120& data-rawheight=&565& class=&origin_image zh-lightbox-thumb& width=&1120& data-original=&https://pic3.zhimg.com/v2-8d4104d2fccf53c3c98d464e5f16e59e_r.jpg&&&/figure&&h2&还原真实下载地址：&a href=&//link.zhihu.com/?target=https%3A//greasyfork.org/zh-CN/scripts/2%2599%25BE%25E5%25BA%25A6%25E7%25BD%%259B%%259B%25B4%25E6%258E%25A5%25E4%25B8%258B%25E8%25BD%25BD%25E5%258A%25A9%25E6%B& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&百度网盘直接下载助手&/a&&/h2&&p&安装百度网盘直接下载助手之后，打开需要下载的资源页面，会出现下载助手的按钮，提供直接下载（支持多文件和目录下载）、显示链接以及外链下载的选项，可实现直接复制到下载工具使用。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-7ba4f813cf83ca3d534f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1120& data-rawheight=&198& class=&origin_image zh-lightbox-thumb& width=&1120& data-original=&https://pic4.zhimg.com/v2-7ba4f813cf83ca3d534f_r.jpg&&&/figure&&h2&让所有视频网页全屏：&a href=&//link.zhihu.com/?target=https%3A//greasyfork.org/zh-CN/scripts/4870-maximize-video& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&视频网页全屏&/a&&/h2&&p&可以让网页中任何一个视频网页全屏播放的「神器」，目前支持有多个视频的任意网页、HTML5 格式的视频。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-70fb2f6c8bbfbd8cde96c2_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1120& data-rawheight=&461& class=&origin_image zh-lightbox-thumb& width=&1120& data-original=&https://pic3.zhimg.com/v2-70fb2f6c8bbfbd8cde96c2_r.jpg&&&/figure&&h2&豆瓣和 IMDb 互相显示评分：&a href=&//link.zhihu.com/?target=https%3A//greasyfork.org/zh-CN/scripts/7687-moremovieratings& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&MoreMovieRatings&/a&&/h2&&p&不少人看电影时喜欢参考 IMDb 和豆瓣电源的评分，这款脚本正好满足两者需求，可以在豆瓣和 IMDb 互相显示评分，电影党必备。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-2e28dc1de1ad8eb8b0ed2c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1120& data-rawheight=&488& class=&origin_image zh-lightbox-thumb& width=&1120& data-original=&https://pic1.zhimg.com/v2-2e28dc1de1ad8eb8b0ed2c_r.jpg&&&/figure&&h2&查看完整的知乎回答而无需注册登录：&a href=&//link.zhihu.com/?target=https%3A//openuserjs.org/scripts/ts/Zhihu_Visitor& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Zhihu Visitor&/a&&/h2&&p&知乎问题页面里，比较长的答案添加展开按钮，点击可以显示全文。点击「更多回答」可以加载更多回答而非登录框。隐藏了必须登录才能使用的相关功能的按钮，如点赞或收藏等。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-71b07dabab1a6b9dcc37_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1079& data-rawheight=&756& class=&origin_image zh-lightbox-thumb& width=&1079& data-original=&https://pic4.zhimg.com/v2-71b07dabab1a6b9dcc37_r.jpg&&&/figure&&h2&增强版的 YouTube 功能改造：&a href=&//link.zhihu.com/?target=https%3A//openuserjs.org/scripts/ParticleCore/YouTube_%2B& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&YouTube +&/a&&/h2&&p&YouTube + 可以给 Youtube 增加更多的功能选项，包括但不限于小窗口播放视频、播放您最近订阅播放列表、视频截图保存、只允许你订阅频道的视频播放广告等等。不过目前 YouTube + 不支持 YouTube beta Material Layout 测试版。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-cbc6e660fdfe3_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1120& data-rawheight=&589& class=&origin_image zh-lightbox-thumb& width=&1120& data-original=&https://pic4.zhimg.com/v2-cbc6e660fdfe3_r.jpg&&&/figure&&h2&自动翻页 Google 搜索结果：&a href=&//link.zhihu.com/?target=https%3A//openuserjs.org/scripts/tumpio/Endless_Google& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Endless Google&/a&&/h2&&p&实现无需手动点击 Google 搜索结果的页码，实现自动翻页显示搜索内容。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-d02ee580ccbfffc82d94ccd_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1120& data-rawheight=&617& class=&origin_image zh-lightbox-thumb& width=&1120& data-original=&https://pic2.zhimg.com/v2-d02ee580ccbfffc82d94ccd_r.jpg&&&/figure&&h2&轻松下载 Instagram 图片和视频：&a href=&//link.zhihu.com/?target=https%3A//greasyfork.org/en/scripts/22660-ighelper-download-instagram-pic-vids& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&IGHelper&/a&&/h2&&p&方便用户下载 Instagram 的图片和视频，将鼠标移动到图片或者视频上，即可看到下载按钮。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-1b5cadcd005fb_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&700& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&https://pic4.zhimg.com/v2-1b5cadcd005fb_r.jpg&&&/figure&&h2&悬停查看和下载图片：&a href=&//link.zhihu.com/?target=https%3A//greasyfork.org/en/scripts/404-mouseover-popup-image-viewer& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Mouseover Popup Image Viewer&/a&&/h2&&p&只需将鼠标光标悬停在多媒体资源的链接上，即可直接显示完整的图像和视频剪辑，避免了用户二次点击，并且通过快捷键实现下载、缩小放大、顺序浏览图册等功能。脚本已经上百个图像和视频托管服务（如 Facebook、500px、Flick 和 YouTube）。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-77f16bcf80fec989ee0ffcf_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&827& data-rawheight=&579& class=&origin_image zh-lightbox-thumb& width=&827& data-original=&https://pic4.zhimg.com/v2-77f16bcf80fec989ee0ffcf_r.jpg&&&/figure&&h2&YouTube 影片下载为 MP3 格式文件：&a href=&//link.zhihu.com/?target=https%3A//greasyfork.org/en/scripts/20015-simple-youtube-mp3-button& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Simple YouTube MP3 Button&/a&&/h2&&p&脚本提供了即时转换功能，可将 YouTube 影片以 MP3 音频文件格式下载到本地。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-f1af92bd1fb95ef65a98b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&700& data-rawheight=&520& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&https://pic4.zhimg.com/v2-f1af92bd1fb95ef65a98b_r.jpg&&&/figure&&h2&GitHub 中文化界面：&a href=&//link.zhihu.com/?target=https%3A//openuserjs.org/scripts/52cik/GitHub_%25E6%25B1%%258C%%258F%%25BB%25B6& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GitHub 汉化插件&/a&&/h2&&p&很多新手朋友不太会玩 GitHub，可能被全英文界面所困扰，这款脚本实现汉化了 GitHub 界面的部分菜单及内容，新手熟悉之后可选择停用脚本恢复英文模式。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-20c32d15fac621edbadb74b43da1b086_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&867& data-rawheight=&453& class=&origin_image zh-lightbox-thumb& width=&867& data-original=&https://pic3.zhimg.com/v2-20c32d15fac621edbadb74b43da1b086_r.jpg&&&/figure&&h2&给你最好用的 YouTube 视频下载工具：&a href=&//link.zhihu.com/?target=https%3A//greasyfork.org/en/scripts/19592-youtube-best-video-downloader-2& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Youtube Best Video Downloader 2&/a&&/h2&&p&脚本提供了 YouTube 视频下载的快捷功能，可保存为 Full-HD MP4、FLV、3GP、MP3（码率为 128kbps 或者 192kbps）、M4A 以及 AAC 格式。经测试，这款脚本会和上面提及到的 YouTube + 脚本有冲突，需要暂时停用 YouTube +，才可看到下载按钮。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-d32c783ed4ea53f5de8da1_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&853& data-rawheight=&468& class=&origin_image zh-lightbox-thumb& width=&853& data-original=&https://pic2.zhimg.com/v2-d32c783ed4ea53f5de8da1_r.jpg&&&/figure&&h2&Feedly 订阅工具增强版：&a href=&//link.zhihu.com/?target=https%3A//greasyfork.org/en/scripts/20483-feedly-filtering-and-sorting& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Feedly filtering and sorting&/a&&/h2&&p&此脚本主要是为 Feedly 订阅增强了部分功能，包括了高级关键字匹配、自动加载、高亮显示自定义标题、订阅内容高级排序规则等。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-cae701de19e2_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1120& data-rawheight=&207& class=&origin_image zh-lightbox-thumb& width=&1120& data-original=&https://pic3.zhimg.com/v2-cae701de19e2_r.jpg&&&/figure&&h2&还你清新的小说阅读模式：&a href=&//link.zhihu.com/?target=https%3A//greasyfork.org/zh-CN/scripts/292-my-novel-reader& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&My Novel Reader&/a&&/h2&&p&小说阅读脚本实现了统一阅读样式，内容去广告、修正拼音字、段落整理，自动下一页的功能，相当适合重度的小说阅读用户。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-7ba3ed4a8f67eea7b99766_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&964& data-rawheight=&519& class=&origin_image zh-lightbox-thumb& width=&964& data-original=&https://pic3.zhimg.com/v2-7ba3ed4a8f67eea7b99766_r.jpg&&&/figure&&h2&绕过搜索结果的自我跳转，直接访问原始网页：&a href=&//link.zhihu.com/?target=https%3A//greasyfork.org/zh-CN/scripts/14178-ac-baidu-%25E4%25BC%%258C%%2599%25BE%25E5%25BA%25A6-%25E6%E7%258B%%25B0%25B7%25E6%25AD%258C%25E6%E7%25B4%25A2%25E7%25BB%%259E%259C%25E4%25B9%258B%25E9%E5%25AE%259A%25E5%E5%258E%25BB%25E9%-%25E5%258E%25BB%25E5%25B9%25BF%25E5%A-favicon& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&AC-baidu&/a&&/h2&&p&脚本可实现绕过百度、搜狗搜索结果中的自己的跳转链接，直接访问原始网页（间接缩短访问目标网页的时间）；可去除百度搜索结果中多余广告 ；添加 Favicon 显示；添加计数。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-d98ce0e471c1339d65bef_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&700& data-rawheight=&630& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&https://pic2.zhimg.com/v2-d98ce0e471c1339d65bef_r.jpg&&&/figure&&h2&结语 | 动手玩&/h2&&p&上面给出的 15 个脚本只是很小的一部分，脚本工具可以专门改变特定网站的行为，比如过滤广告、添加下载按钮、网页界面定制等等，同时由于涉及到版权的问题，并没有向大家推荐类似绕过 VIP 视频限制之类的脚本。这些在 Greasy Fork 和 OpenUserJS 都提供了相当不错的选择，大家根据需求自行下载试玩。&/p&&p&如果觉得现有的脚本还不够完善，那就动手写一个吧。最后，欢迎大家在留言中批评、指点、分享、投币，也可以留言哪些脚本神器值得推荐。&/p&&p&&b&参考链接：&/b&&/p&&ul&&li&&a href=&//link.zhihu.com/?target=https%3A//sspai.com/post/34508& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&不喜欢某个网站的样子？用 Stylish 给它一键「换肤」&/a&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//www.runningcheese.com/userscripts& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&有哪些值得推荐的油猴脚本?&/a&&/li&&/ul&&p&&br&&/p&&hr&&p&&a href=&//link.zhihu.com/?target=https%3A//sspai.com/topic/102& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&用 Chrome 怎么能不装扩展？少数派以往推荐的好用的 Chrome 插件都在这里了 ?&/a&?&/p&
介绍一款神器 Tampermonkey，也被戏称为「油猴」。它可以通过安装各类脚本对网站进行定制。不过它能定制的不仅仅是网站的样式，还能实现更多更强大的功能，例如：直接下载百度网盘文件重新定制繁杂的微博页面去掉视频播放广告将网站默认的「二维码登录」改…
&figure&&img src=&https://pic1.zhimg.com/v2-3ba8dd6d04f_b.jpg& data-rawwidth=&700& data-rawheight=&233& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&https://pic1.zhimg.com/v2-3ba8dd6d04f_r.jpg&&&/figure&&p&作为主力浏览器，支持相当丰富的第三方扩展，其实浏览器本身也内置了大量实用的命令。通过下面整理的 Chrome 命令，将会让用户实现快速查询信息的目的，比如：查询浏览器的用户配置文件存储位置、实验阶段的功能选项，甚至是集中显示浏览器支持的所有的命令的详细列表。下面，我们甄选了几个实用的 Chrome 命令：&/p&&h2&显示当前版本&/h2&&p&浏览器地址栏输入并打开 &code&chrome://version&/code&，页面显示了当前浏览器版本的详细信息（比如我安装的 v66.0.3359.45 Dev 版本），本地操作系统类型，JavaScript、Flash 软件的具体版本和文件存放位置。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-f57c0d7ea953b880b10a11_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1476& data-rawheight=&896& class=&origin_image zh-lightbox-thumb& width=&1476& data-original=&https://pic2.zhimg.com/v2-f57c0d7ea953b880b10a11_r.jpg&&&/figure&&p&这一页面中有两处实用的信息：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-796dbfd1da5db525b93341_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&736& data-rawheight=&171& class=&origin_image zh-lightbox-thumb& width=&736& data-original=&https://pic2.zhimg.com/v2-796dbfd1da5db525b93341_r.jpg&&&/figure&&p&&b&命令行&/b&。以我的显示信息为例子：&code&&C:\Users\XX\AppData\Local\Google\Chrome\Application\chrome.exe& --flag-switches-begin --disable-accelerated-video-decode --enable-features=MaterialDesignBookmarks,OverlayScrollbar --flag-switches-end&/code&，引号部分为 Chrome 本地安装的目标位置，引号后面的内容则显示用户在功能特性界面自定义修改过的内容，比如我开启了 Material Design 风格的书签页面、自定义修改了浏览器本身的滚动条样式表现。&/p&&p&&b&个人资料路径&/b&，这个文件路径就是大家经常说的用户配置文件。下面截图显示的路径为 &code&C:\Users\XX\AppData\Local\Google\Chrome\User Data\Default&/code&，Default 文件夹就是默认的 Chrome 配置文件夹，如果用户创建了多个 Chrome 用户，会有以 Profile N （N 代表从 1 开始的数字）为方式命名的文件夹。在重装电脑之前将个人资料路径的文件拷贝一份，下次重装电脑间接实现快速备份 Chrome 浏览器的个人配置信息。&/p&&h2&实验项目&/h2&&p&输入 &code&chrome://flags&/code&，这个命令将打开 Chrome 浏览器的功能特性界面，我们可用来启用或者关闭某些 Chrome 的实验功能。flags 页面按照 Available、Unavailable 两种标签页显示项目，如果用户明确知道需要查找的实验项目，可以使用顶部的搜索栏，或者在地址栏直接输入 &code&chrome://flags/#(项目名称)&/code&，比如我要查找 overlay-scrollbars 项，那么只需要输入 &code&chrome://flags/#overlay-scrollbars&/code& ，即可直接定位到目标选项。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-a8e72cf56bc4d582bae46e_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1476& data-rawheight=&896& class=&origin_image zh-lightbox-thumb& width=&1476& data-original=&https://pic4.zhimg.com/v2-a8e72cf56bc4d582bae46e_r.jpg&&&/figure&&p&经过粗略统计，flags 实验项目拥有近 200 多项，里面包括了对滚动条、Omnibar 地址栏、书签管理器样式、导入/导出保存的密码信息等内容，大部分选项提供了 Disable 禁止、Enable 开启或者 Default 默认三种状态。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-97b3a53d38dca95f07d4f9a_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&795& data-rawheight=&146& class=&origin_image zh-lightbox-thumb& width=&795& data-original=&https://pic3.zhimg.com/v2-97b3a53d38dca95f07d4f9a_r.jpg&&&/figure&&p&目前我对其中的三个选项手动进行了设置，分别是打开了 Overlay Scrollbars 和 Enable Material Design bookmarks（实现改变滚动条和书签的表现样式），关闭了 Hardware-accelerated video decode（为了解决与某个 Chrome 扩展有冲突的问题）。&/p&&h2&设置页面&/h2&&p&输入 &code&chrome://settings&/code& 将快速打开 Chrome 浏览器的设置页面，页面的内容分类划分为基础和高级设置选项，基础项细分为其他人、外观、搜索引擎、默认浏览器、启动时，高级项有隐私设置和安全性、密码和表单、语言、下载内容、打印、无障碍、系统、重置并清理，最后一个就是「关于 Chrome」的选项。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-45ec0a1c46ea55c039483_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1476& data-rawheight=&896& class=&origin_image zh-lightbox-thumb& width=&1476& data-original=&https://pic4.zhimg.com/v2-45ec0a1c46ea55c039483_r.jpg&&&/figure&&p&每个细分选项通过类似 &code&chrome://settings/xx&/code& 命令来快速定位，下面是对应命令：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-a7e7f8494a0bccfabbfa5acf_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&700& data-rawheight=&535& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&https://pic4.zhimg.com/v2-a7e7f8494a0bccfabbfa5acf_r.jpg&&&/figure&&h2&扩展程序页面&/h2&&p&输入 &code&chrome://extensions&/code&，这个命令方便取代以往进入两三级菜单才能打开浏览器已安装的扩展程序页面（需打开「菜单 - 更多工具 - 扩展程序」），扩展页面的常规功能包括了打开/关闭开发者模式、手动加载/更新扩展、搜索安装的扩展程序、手动关闭/打开/删除某个扩展。另外，页面侧边栏还隐藏了键盘快捷键的页面，用户同样可在地址栏输入 &code&chrome://extensions/shortcuts&/code& 快速打开，集中管理用户为每个扩展设置的键盘快捷键组合，以及设置是否在全局或者只在 Chrome 本身激活快捷键。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-78acefad432_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1476& data-rawheight=&896& class=&origin_image zh-lightbox-thumb& width=&1476& data-original=&https://pic3.zhimg.com/v2-78acefad432_r.jpg&&&/figure&&h2&显示网络事件信息&/h2&&p&输入 &code&chrome://net-internals&/code& 后打开一个显示网络相关信息的页面，这个命令主要用来捕获浏览器生成的网络事件，默认会显示当前连接的网络服务事件，可导出数据、查看 DNS 主机解析缓存。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-27c1c0e2039cf27f22f3_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1476& data-rawheight=&896& class=&origin_image zh-lightbox-thumb& width=&1476& data-original=&https://pic4.zhimg.com/v2-27c1c0e2039cf27f22f3_r.jpg&&&/figure&&h2&查看组件信息&/h2&&p&输入 &code&chrome://components&/code&，这个命令显示 Chrome 浏览器所有用到的组件，在这里可以查看常用的 Flash 组件的版本，并检查是否有更新。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-e8bae85cf1e6_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1476& data-rawheight=&896& class=&origin_image zh-lightbox-thumb& width=&1476& data-original=&https://pic3.zhimg.com/v2-e8bae85cf1e6_r.jpg&&&/figure&&h2&查看哪些网页被禁止翻译&/h2&&p&输入 &code&chrome://translate-internals&/code&，打开浏览器内置翻译功能的页面，显示了页面是什么语言的情况下不提示翻译、哪些页面不再提示翻译、以及哪些语言组合是提示翻译，用户还可以手动关闭哪些以前设置过的翻译选项。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-4b9418ebd4b0b33f650964aca6b37604_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1476& data-rawheight=&896& class=&origin_image zh-lightbox-thumb& width=&1476& data-original=&https://pic1.zhimg.com/v2-4b9418ebd4b0b33f650964aca6b37604_r.jpg&&&/figure&&h2&退出和重启浏览器&/h2&&p&注意，首先这个不要着急输入这两条命令 &code&chrome://quit&/code&、&code&chrome://restart&/code&，它们分别可以实现退出和重启浏览器，其中重启命令间接实现了一键重启浏览器的目的。&/p&&h2&查看所有的命令列表&/h2&&p&用户如果还对如何找到这些浏览器命令感到困惑的话，输入 &code&chrome://about&/code& 命令，将集中列出 Chrome 浏览器支持的所有的命令，分为了 Chrome URLs 以及 Debug 用途的命令。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-fe67c0f1d66e53e78794_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1476& data-rawheight=&896& class=&origin_image zh-lightbox-thumb& width=&1476& data-original=&https://pic1.zhimg.com/v2-fe67c0f1d66e53e78794_r.jpg&&&/figure&&p&&b&其他常用的 Chrome 命令还包括了：&/b&&/p&&p&&code&chrome://downloads&/code&：直接访问 Chrome 浏览器网页下载的文件。&/p&&p&&code&chrome://history&/code&：直接访问 Chrome 浏览器访问的历史记录。&/p&&p&&code&chrome://apps&/code&：访问 Chrome 浏览器中安装的应用的界面，可以对应用进行删除管理。&/p&&p&&code&chrome://bookmarks&/code&：直接访问 Chrome 浏览器中我们收藏的标签。&/p&&p&&code&chrome://dns&/code&：显示浏览器预抓取的主机名列表，让用户随时了解 DNS 状态。&/p&&p&&code&chrome://devices&/code&：查看连接电脑的设备，比如传统打印机中，可设置添加打印机到 Google 云打印的入口。&/p&&h2&另类的命令扩展：Steward&/h2&&p&&a href=&http://link.zhihu.com/?target=http%3A//oksteward.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Steward&/a& 号称是 Chrome 浏览器里类 &a href=&http://link.zhihu.com/?target=https%3A//www.alfredapp.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Alfred&/a& 启动器，用户可以使用 &code&off |all&/code&（禁用所有扩展）、&code&on 扩展名称&/code&（启用某个扩展）、&code&bk 网址名称&/code&（屏蔽某个网站）、&code&todo 内容&/code&（建立代办事项）等快捷命令来快速实现某些功能，甚至利用扩展内置的 workflow 设置来创建属于自己的工作流。在这里简要介绍 Steward 内置的 chrome 命令，在调用扩展的搜索栏输入 &code&chrome&/code&，Steward 将会自动显示目前支持的命令，用户无需记住完整的浏览器命令。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-ab4ddf7aaa42c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&968& data-rawheight=&539& data-thumbnail=&https://pic1.zhimg.com/v2-ab4ddf7aaa42c_b.jpg& class=&origin_image zh-lightbox-thumb& width=&968& data-original=&https://pic1.zhimg.com/v2-ab4ddf7aaa42c_r.jpg&&&/figure&&p&扩展阅读：&a href=&http://link.zhihu.com/?target=https%3A//sspai.com/post/42048& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&在 Chrome 里用「Alfred」是什么体验？Steward 把效率启动器带进了浏览器&/a&&/p&&h2&用好 Chrome 命令来提升效率&/h2&&p&Chrome 内置的命令支持快速打开某些页面，无需繁琐地打开多级菜单（快捷键也能提升打开效率）才能进入诸如扩展、书签管理器等页面。同时，实用的命令可以实现一些隐藏的功能，比如查询个人配置文件的路径、打开仍处于实验阶段的新功能、记录页面的网络信息等。用户掌握好这些常用的浏览器命令，将有助于提升配置 Chrome 功能的效率。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-3b9bca4bd283fe1c0172a27_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&500& data-rawheight=&267& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic4.zhimg.com/v2-3b9bca4bd283fe1c0172a27_r.jpg&&&/figure&&p&&/p&
作为主力浏览器，支持相当丰富的第三方扩展，其实浏览器本身也内置了大量实用的命令。通过下面整理的 Chrome 命令，将会让用户实现快速查询信息的目的，比如：查询浏览器的用户配置文件存储位置、实验阶段的功能选项，甚至是集中显示浏览器支持的所有的命令…
&figure&&img src=&https://pic3.zhimg.com/v2-b69effc1ddc_b.jpg& data-rawwidth=&1375& data-rawheight=&757& class=&origin_image zh-lightbox-thumb& width=&1375& data-original=&https://pic3.zhimg.com/v2-b69effc1ddc_r.jpg&&&/figure&&p&相信大部分产品经理使用的都是iOS设备，对Android设备的交互总是很不习惯，所以在做设计的时候，有的时候就会忽略Android和iOS的设计差异，而执意按照自己的使用习惯进行设计。&/p&&p&其实这个问题也是产品经理需要突破自己的地方，作为一个产品经理而不是用户，一定要客观地看待产品设计，而非主观臆想。从产品逻辑触发，而不是从“我觉得”出发，是产品经理进阶的第一步。本文就简单介绍了5个Android和iOS设计不同的地方，可以说大部分PM都可能会忽视这些细节。不是大盘点，只是作为思考的引子。&br&&/p&&p&&b&1. 标题位置&/b&&/p&标题的位置是最基础的一个，Android靠左，iOS 居中。&figure&&img src=&https://pic3.zhimg.com/v2-889fff6ecb4a_b.png& data-rawwidth=&655& data-rawheight=&295& class=&origin_image zh-lightbox-thumb& width=&655& data-original=&https://pic3.zhimg.com/v2-889fff6ecb4a_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/v2-2e7dadcd66372fdc1be2b8_b.png& data-rawwidth=&717& data-rawheight=&451& class=&origin_image zh-lightbox-thumb& width=&717& data-original=&https://pic1.zhimg.com/v2-2e7dadcd66372fdc1be2b8_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/v2-bcf0faf09d0695d4cbb1b2_b.png& data-rawwidth=&624& data-rawheight=&377& class=&origin_image zh-lightbox-thumb& width=&624& data-original=&https://pic3.zhimg.com/v2-bcf0faf09d0695d4cbb1b2_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/v2-cb707ecaab7_b.png& data-rawwidth=&605& data-rawheight=&332& class=&origin_image zh-lightbox-thumb& width=&605& data-original=&https://pic4.zhimg.com/v2-cb707ecaab7_r.jpg&&&/figure&&p&这个是最基础的一个交互差异，但是也不是每家公司都在遵守。正面的例子，微信和淘宝，在Android设备上做了靠左的设计。但是仍然有例外，比如下面的例子（也是大厂）：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-dcdfee90ecbee1dfc91d44_b.png& data-rawwidth=&604& data-rawheight=&311& class=&origin_image zh-lightbox-thumb& width=&604& data-original=&https://pic1.zhimg.com/v2-dcdfee90ecbee1dfc91d44_r.jpg&&&/figure&然而，即使是微信和淘宝都遵守着的Android的设计规范，还是被大部分Android厂商自身系统UI抛弃。这也是安卓UI比较尴尬的地方：一方面安卓设计规范一直在不断大改，一方面各个厂商“致敬”iOS风气浓重，这也间接导致很多设计师干脆照搬了iOS的交互。&p&&b&2. 右滑和长按&/b&&/p&&p&Android 对列表操作栏的处理为长按，iOS为左滑。&/p&&p&这个交互其实是大家比较熟悉的一个，目前比较成熟的产品基本也会遵守这个交互习惯，这已经属于不遵守就会让用户很别扭的细节。&figure&&img src=&https://pic4.zhimg.com/v2-602d5f657e7e13cf9f74b_b.png& data-rawwidth=&753& data-rawheight=&313& class=&origin_image zh-lightbox-thumb& width=&753& data-original=&https://pic4.zhimg.com/v2-602d5f657e7e13cf9f74b_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/v2-24e8bd647f01eb5a941c_b.png& data-rawwidth=&871& data-rawheight=&433& class=&origin_image zh-lightbox-thumb& width=&871& data-original=&https://pic1.zhimg.com/v2-24e8bd647f01eb5a941c_r.jpg&&&/figure&&/p&&p&&b&3. 消息开关设计&/b&&/p&&p&对于iOS系统而言，push是否能够发到主要取决于系统级的开关，而对于Android系统而言，push到达设备主要取决于各家是否能够保活。所以对于iOS而言，消息开关需要强调系统级的开关，而对于Android则可以直接打开或者关闭。如微信的设计：&figure&&img src=&https://pic1.zhimg.com/v2-4eef7c3d9f6fe9aca1d8_b.png& data-rawwidth=&753& data-rawheight=&350& class=&origin_image zh-lightbox-thumb& width=&753& data-original=&https://pic1.zhimg.com/v2-4eef7c3d9f6fe9aca1d8_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/v2-bfabc54cf4aa05_b.png& data-rawwidth=&875& data-rawheight=&394& class=&origin_image zh-lightbox-thumb& width=&875& data-original=&https://pic2.zhimg.com/v2-bfabc54cf4aa05_r.jpg&&&/figure&&/p&&br&&p&当然对于微信这种大厂而言，不太需要在乎消息开关打开率，如果再进一步考虑消息开关的打开情况的话，则可以对于开关做进一步处理：打开消息情况不做直接关闭引导，关闭情况则引导用户打开设置。比如当时重构功能时候我给的方案：&figure&&img src=&https://pic1.zhimg.com/v2-e4b8c5fa7998eaeec47487c_b.png& data-rawwidth=&751& data-rawheight=&307& class=&origin_image zh-lightbox-thumb& width=&751& data-original=&https://pic1.zhimg.com/v2-e4b8c5fa7998eaeec47487c_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/v2-c2df95cd1d6a2f0aa8b4ba5c2add351c_b.png& data-rawwidth=&753& data-rawheight=&310& class=&origin_image zh-lightbox-thumb& width=&753& data-original=&https://pic1.zhimg.com/v2-c2df95cd1d6a2f0aa8b4ba5c2add351c_r.jpg&&&/figure&&/p&&p&&b&4. 多筛选交互&/b&&/p&&p&对于地址选择，iOS一般使用系统交互的滚筒控件，但是部分Android APP也用这个交互，则是不对的。对于Android交互而言，一般是用列表选择代替滚筒的设计。对于这点，有问题的APP倒还有一些。我们还是看一下淘宝的选择地址时的设计（请忽略淘宝这个贴边的按钮设计）：&figure&&img src=&https://pic3.zhimg.com/v2-aacbd9a761e4aa143a9a_b.png& data-rawwidth=&901& data-rawheight=&569& class=&origin_image zh-lightbox-thumb& width=&901& data-original=&https://pic3.zhimg.com/v2-aacbd9a761e4aa143a9a_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/v2-15f05e952bc598a6f2a0d4_b.png& data-rawwidth=&723& data-rawheight=&445& class=&origin_image zh-lightbox-thumb& width=&723& data-original=&https://pic1.zhimg.com/v2-15f05e952bc598a6f2a0d4_r.jpg&&&/figure&&/p&&p&&b&5. 搜索框交互&/b&&/p&&p&关于搜索框，也是有标准交互的。&/p&&p&Android交互为：返回，搜索框，搜索按钮。iOS交互为：搜索框，取消。如下可见（京东）：&figure&&img src=&https://pic4.zhimg.com/v2-bbe527e8313_b.png& data-rawwidth=&746& data-rawheight=&238& class=&origin_image zh-lightbox-thumb& width=&746& data-original=&https://pic4.zhimg.com/v2-bbe527e8313_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/v2-5a8ad3c53f383dc01caed_b.png& data-rawwidth=&729& data-rawheight=&227& class=&origin_image zh-lightbox-thumb& width=&729& data-original=&https://pic2.zhimg.com/v2-5a8ad3c53f383dc01caed_r.jpg&&&/figure&&/p&&p&当然，也有反面的例子（某新闻客户端）：&figure&&img src=&https://pic4.zhimg.com/v2-cffcd18aafb56b1f6c326ff_b.png& data-rawwidth=&870& data-rawheight=&352& class=&origin_image zh-lightbox-thumb& width=&870& data-original=&https://pic4.zhimg.com/v2-cffcd18aafb56b1f6c326ff_r.jpg&&&/figure&&/p&&p&为什么要这么做呢？其实也是iOS和Android的系统决定的。对于iOS而言，系统搜索框本就是这样设计，而且在搜索模式下，底部确认按钮可以变为搜索按钮，这符合iOS用户的习惯操作。而对于Android系统而言，底部没有搜索按钮，虽然回车是可以起到相同的作用，但是对于用户而言，顶部没有搜索按钮还是会造成误解。（如下：为搜索调起时候我的手机键盘）&figure&&img src=&https://pic4.zhimg.com/v2-cc11e2eeaf094ba1e4cab7_b.png& data-rawwidth=&606& data-rawheight=&411& class=&origin_image zh-lightbox-thumb& width=&606& data-original=&https://pic4.zhimg.com/v2-cc11e2eeaf094ba1e4cab7_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/v2-147d84502caa8de4e70e6c9e_b.png& data-rawwidth=&752& data-rawheight=&437& class=&origin_image zh-lightbox-thumb& width=&752& data-original=&https://pic3.zhimg.com/v2-147d84502caa8de4e70e6c9e_r.jpg&&&/figure&&/p&&p&&b&6. 总结&/b&&/p&&p&做交互，其实很基础的一个方法就是抄别人。但是很多人在抄的时候，也没有研究透别人设计背后的逻辑，固执于自己的使用产品的习惯，有的时候甚至是造成了很多错误。&/p&&p&多看看别人怎么做，多想想别人为什么这么做。&/p&&p&多思考成熟交互背后的逻辑，不固执于自己的用户习惯，从产品逻辑触发，而不是从“我觉得”出发，这才是产品经理进阶的第一步。&/p&
相信大部分产品经理使用的都是iOS设备，对Android设备的交互总是很不习惯，所以在做设计的时候，有的时候就会忽略Android和iOS的设计差异，而执意按照自己的使用习惯进行设计。其实这个问题也是产品经理需要突破自己的地方，作为一个产品经理而不是用户，一…
&figure&&img src=&https://pic1.zhimg.com/v2-b78f9fb832d225cc43b5b00_b.jpg& data-rawwidth=&566& data-rawheight=&368& class=&origin_image zh-lightbox-thumb& width=&566& data-original=&https://pic1.zhimg.com/v2-b78f9fb832d225cc43b5b00_r.jpg&&&/figure&&p&默认情况下，Android 的中日韩字体（Noto Sans CJK）只包含了一个 regular 字重&/p&&p&用 Android 6.0 时代的方法添加固然可行，但自从 Android 7（Nougat） 支持 TTC 格式的字体后，新的方法显得更好：&/p&&ul&&li&多字重合一（&a href=&https://link.zhihu.com/?target=https%3A//noto-website-2.storage.googleapis.com/pkgs/NotoSansCJK.ttc.zip& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&All-in-one Noto Sans CJK super OTC&/a&）。&/li&&li&更小的体积&/li&&li&与 fonts.xml 上文风格统一，满足强迫症人群需求。&/li&&/ul&&p&&br&&/p&&p&&b&警告：这种方法在 Android 7.1 (Nougat) 上测试通过，仅支持 7 系统。在做出修改系统等高危操作前，请事先做好备份。这篇文章假设你知道如何备份、使用 root 权限及修改文件；如果你完全不知道如何操作这些，请不要继续！&/b&&/p&&p&&br&&/p&&h2&由知友提供的方法：&/h2&&ul&&li&Magisk 官方仓库中的 NotoSansCJK (Nougat&Oreo)（Magisk 不修改系统，模块源码：&a href=&https://link.zhihu.com/?target=https%3A//github.com/Magisk-Modules-Repo/magisk-notosanscjk-nougat& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Magisk-Modules-Repo/magisk-notosanscjk-nougat&/a&）&/li&&li&位于评论区的卡刷包&/li&&/ul&&p&&br&&/p&&h2&手动操作：&/h2&&p&&b&添加字体：&/b&&/p&&p&将下载并解压好的 &a href=&https://link.zhihu.com/?target=https%3A//noto-website-2.storage.googleapis.com/pkgs/NotoSansCJK.ttc.zip& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&NotoSansCJK.ttc&/a& 复制到 /system/fonts/ 下，然后修改权限为 644（rw-r--r--），所有者为 0（root）&br&&/p&&p&&b&修改 fonts.xml：&/b&&/p&&p&然后修改 /system/etc/fonts.xml，寻找关键词 “zh-Hans” （大约在 340 行处）：&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&
&span class=&p&&&&/span&&span class=&nt&&family&/span& &span class=&na&&lang&/span&&span class=&o&&=&/span&&span class=&s&&&zh-Hans&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&400&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&2&&/span&&span class=&p&&&&/span&NotoSansCJK-Regular.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&family&/span&&span class=&p&&&&/span&
&span class=&c&&&!-- TODO: Add Bopo --&&/span&
&span class=&p&&&&/span&&span class=&nt&&family&/span& &span class=&na&&lang&/span&&span class=&o&&=&/span&&span class=&s&&&zh-Hant&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&400&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&3&&/span&&span class=&p&&&&/span&NotoSansCJK-Regular.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&family&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&family&/span& &span class=&na&&lang&/span&&span class=&o&&=&/span&&span class=&s&&&ja&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&400&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&0&&/span&&span class=&p&&&&/span&NotoSansCJK-Regular.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&family&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&family&/span& &span class=&na&&lang&/span&&span class=&o&&=&/span&&span class=&s&&&ko&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&400&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&1&&/span&&span class=&p&&&&/span&NotoSansCJK-Regular.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&family&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&将它注释掉，并加入新的内容：&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&
&span class=&c&&&!--&/span&
&span class=&c&&
&family lang=&zh-Hans&&&/span&
&span class=&c&&
&font weight=&400& style=&normal& index=&2&&NotoSansCJK-Regular.ttc&/font&&/span&
&span class=&c&&
&/family&&/span&
&span class=&c&&
--&&/span&
&span class=&c&&&!-- TODO: Add Bopo --&&/span&
&span class=&c&&&!--&/span&
&span class=&c&&
&family lang=&zh-Hant&&&/span&
&span class=&c&&
&font weight=&400& style=&normal& index=&3&&NotoSansCJK-Regular.ttc&/font&&/span&
&span class=&c&&
&/family&&/span&
&span class=&c&&
&family lang=&ja&&&/span&
&span class=&c&&
&font weight=&400& style=&normal& index=&0&&NotoSansCJK-Regular.ttc&/font&&/span&
&span class=&c&&
&/family&&/span&
&span class=&c&&
&family lang=&ko&&&/span&
&span class=&c&&
&font weight=&400& style=&normal& index=&1&&NotoSansCJK-Regular.ttc&/font&&/span&
&span class=&c&&
&/family&&/span&
&span class=&c&&
--&&/span&
&span class=&p&&&&/span&&span class=&nt&&family&/span& &span class=&na&&lang&/span&&span class=&o&&=&/span&&span class=&s&&&zh-Hans&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&100&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&2&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&300&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&6&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&350&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&10&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&400&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&14&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&500&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&22&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&700&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&26&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&900&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&34&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&400&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&mono&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&18&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&700&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&mono&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&30&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&family&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&family&/span& &span class=&na&&lang&/span&&span class=&o&&=&/span&&span class=&s&&&zh-Hant&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&100&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&3&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&300&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&7&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&350&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&11&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&400&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&15&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&500&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&23&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&700&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&27&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&900&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&35&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&400&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&mono&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&19&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&700&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&mono&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&31&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&family&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&family&/span& &span class=&na&&lang&/span&&span class=&o&&=&/span&&span class=&s&&&ja&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&100&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&0&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&300&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&4&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&350&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&8&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&400&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&12&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&500&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&20&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&700&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&24&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&900&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&32&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&400&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&mono&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&16&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&700&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&mono&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&28&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&family&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&family&/span& &span class=&na&&lang&/span&&span class=&o&&=&/span&&span class=&s&&&ko&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&100&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&1&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&300&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&5&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&350&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&9&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&400&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&13&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&500&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&21&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&700&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&25&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&900&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&normal&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&33&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&400&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&mono&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&17&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&font&/span& &span class=&na&&weight&/span&&span class=&o&&=&/span&&span class=&s&&&700&&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&&mono&&/span& &span class=&na&&index&/span&&span class=&o&&=&/span&&span class=&s&&&29&&/span&&span class=&p&&&&/span&NotoSansCJK.ttc&span class=&p&&&/&/span&&span class=&nt&&font&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&family&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&然后同样检查一遍权限，应该为 644（rw-r--r--），所有者应该为 0（root）。&/p&&h2&最后：&/h2&&p&重启设备，新加上的字重就会生效，在 Play 商店的详情页和应用抽屉（drawer）等地方中都能看见明显的变化：&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-08ab6dcdbbbe0_b.jpg& data-caption=&& data-rawwidth=&1080& data-rawheight=&1920& class=&origin_image zh-lightbox-thumb& width=&1080& data-original=&https://pic3.zhimg.com/v2-08ab6dcdbbbe0_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/v2-d1f808a687ca360e897dec_b.jpg& data-caption=&& data-rawwidth=&1080& data-rawheight=&1920& class=&origin_image zh-lightbox-thumb& width=&1080& data-original=&https://pic4.zhimg.com/v2-d1f808a687ca360e897dec_r.jpg&&&/figure&&p&&br&&/p&&h2&致谢及工具&/h2&&p&&a href=&https://link.zhihu.com/?target=https%3A//medium.com/ujam/android-meets-}