用户 网页 可用性 编者按：这篇文章出自用户体验设计行业内的资深机构 NNGroup，他们一直谨慎而专业地对行业进行审视、分析和总结，这篇文章更新于 2023 年第一天，他们通过真实的用户调研和持续的观察，梳理了最近几年移动端 UX 设计的变化，下面是正文。从 iPhone 诞生到现在已经15年了，移动端的用户体验设计的综合素质已经相当稳定了。移动端的标准已经制定完全，移动端 Web 应用和本地应用之间的界限也越来越模糊了。最初的 iPhone 是在 2007 年 6 月发布的。2008 年底，我们开始发布了第一版「移动端设计报告」，当时绝大多数的用户所使用的移动端设备，用户体验是相当糟糕的。当时，与绝大多数的移动端网页和硬件设备相比，程度能到「勉强能用」的APP或者网页，都已经算是极佳的用户体验了。而在5年前，我们发布第四版「移动端设计报告」的时候，我们对移动端产品的可用性状况进行了全面的评估。但是我们很高兴地发现，绝大多数的移动端 APP 和网页都提供了良好的用户体验。随后的第五版报告中，我们看到了持续的进步。此刻，移动端用户体验终于抵达了成熟期。移动端设计变得更加稳定，而多实验性设计和功能的接受度有所降低。此外，移动端成为主流，用户几乎会在移动端设备上尝试完成几乎所有人物（尽管用户仍然喜欢在大屏幕上完成更重要的任务）。很少有公司现在不碰移动端的业务。在今天的这篇文章中，我们将会突出探讨移动端设计的现状以及一些突出的主题。0、调研用户基于第五版的移动端可用性报告，我们进行了远程测试和面对面的可用性测试，涉及 19 名美国的参与者，它们测试了总计 60 个不同的网站和 APP。1、设计风格的融合过去几年中，最大的变化是设计风格的融合。在更早一些时候，许多网站和 APP 的设计者会尝试新的交互方式和布局结构，而如今我们可以肯定的说移动端交互已经稳定下来了。很多设计模式已经成为标准，并且大家对于什么时候用什么设计元素有了清晰的认知，比如导航栏和汉堡菜单，如今已经达成某种平衡，绝大多数的网站和 APP 会选择其中一个作为主要的导航模式。尽管按照「信息气味理论」，汉堡菜单的数值偏低，但是它依然成为了主流的方案之一。这种融合出现在方方面面。比如 iOS 和 Android 如今就变得和彼此更加相似，这也使得设计师可以可以毫无挂碍地为两个平台设计近乎完全相同的 UI，而不会影响最终 APP 的可用性。其中最典型的变化，就是 苹果官方出的 iPhone 和谷歌官方出品的 Pixel 系列都将屏幕的 Home 实体按键去除，而界面交互几乎完全仰赖手势操作。苹果将 3D Touch 去掉之后，Android 和 iOS 如今使用着完全一样的长按呼出菜单。2、「完整网站」的消亡最近一次移动端可用性设计会当中，我们很惊讶地碰到一位参与者，他不知道我们所说的「完整网站」是什么意思。在很长一段时间当中，移动端访问网页的时候，打开的是专门针对移动端设备开发的精简后的「移动版」网页，而原本针对桌面端设计的网页会「更加完整」。虽然有一小部分用户可能会青睐于在手机上访问桌面版的页面，但是绝大多数人不需要这样做甚至不知道有「桌面版」存在。由于响应式设计的存在，如今绝大多数的网站从功能到内容都可以兼顾桌面和移动端两种环境，内容不适配移动端的情况越来越少，几乎不存在了。3、原生应用和 web 应用之间界限更加模糊对于开发者而言，本地原生应用和 web 应用在技术层面上几乎完全不相同。而对于用户而言，两者仅仅是渠道有所不同两种应用工具。在过去5年当中，两者甚至在渠道之间的界限也都变得越来越模糊，至少在用户层面的感知是这样的。首先，web 应用和原生应用之间的差异正在变小。随着渐进式web应用（PWA）的出现，我们现在拥有和本地应用高度相似的移动端网站，它们可以拥有一个独立的图标，单独在后台运行，甚至可以接入推送通知等手机功能，而这些在之前是不可能拥有的。BMW.com 的网站以 PWA 应用的方式存在同时，原生应用需要和网络更加靠近才行。原本必须要安装到本地的应用正在变得更加轻量、易于「安装」，iOS 平台上推出了 App Clips，而 Android 平台上一会儿有对应的即时应用程序，它们让用户无需安装即可提前体验 APP 在本地于运行时的功能。这种机制又更加靠近 PWA 应用的体验，两者之间的界限变得更加模糊难明。4、更简单的登录和注册登录和注册的用户体验升级是移动端用户体验进化的标志之一。设计师汲取了来自方方面面的经验教训，非常确定在移动端小屏幕上输入密码是一件乏味的事情。如今有很多不同的方式让登录和注册变简单，有的是基于身份验证机制（面部识别、指纹验证等），有的是基于已有的支付接口（Apple Pay、Google Pay、支付宝等）的方式，有的则是内置于浏览器和系统的密码管理器，设计师已经在尽力缩短登录的流程。而注册的新趋势是「无密码帐号」，无需定义密码即可创建帐号，着是基于一次性密码（OTP）和魔术连接（magic link）的机制，其中，一次性密码我们应该都很熟悉了，密码或者验证码通常是系统发送到绑定的帐号或者手机号上，借此实现注册和登录。苹果的密钥机制则更进一步，系统自动创建，然后加密存储于云端，用户甚至不用知道他们的密码具体是什么。5、围绕小屏幕设计我们在几年前已经注意到，设计师已经开始有意识地针对小屏幕的限制来设计网页和 APP，如今，这种趋势更加明显，设计师将不必要的 UI 元素熟练地隐藏起来，让用户在滚动浏览中自然获取信息，首屏也不再是堆满功能按钮的垃圾堆。然而另一方面，我们依然注意到很多网页还是会因为一些不必要的元素被刻意拉长，其中很多确实是基于「用户是通过移动端访问网页」的这种场景来进行设计的。但是，需要强调的是，用户仅仅只有在认为你的内容有价值的时候才会继续滚动，如果重要信息之前是一屏无关紧要的低价值信息或者装饰的时候，他们可能会在滚动之前就直接放弃了，而这种情况在注意力被高度稀释的今天，只会越来越频繁地发生。BankofAmerica.com 的页面中无效的装饰信息拉长了整个页面。6、叠加过多功能在几年前观察的时候，我们就注意到移动端页面上叠加了过多内容的情况，而如今这个问题也同样被放大，变得更加流行。很多网页一打开就出弹出框已经是基本操作，更有甚者直接拉满，右下角是聊天气泡，顶上是弹出框请求 Cookie 权限，中间是广告和促销，就这种局面下还有网页本身的汉堡菜单和导航栏藏在首屏上。不幸的是，即时用户不被这些东西烦死，互相叠加覆盖的功能同样很容易出现各种可用性问题。有的是功能本身在不同设备上加载时因为兼容性差异自然出现的，还有的则是因为用户以为它们是无关的新页面，直接关掉。7、应用内浏览器另外一个重要的趋势是应用内内置浏览器的流行，这种技术的好处在于，用户在应用内点击某个链接的时候，无需跳转出去直接就能在应用内加载页面内容。它的优点在于留存用户，但是它的缺点也在于它容易让用户感觉迷惑和混乱，突然打开网页可能会让用户忘了他们在哪，并且可能因此很难再次打开对的链接。此外，应用本身的 UI 元素也会干扰内置浏览器的使用，比如屏幕内出现2个汉堡菜单这种情况。另外，由于内置浏览器的可用性，可能会有的页面 UI 元素无法完全加载，页面出现多个汉堡菜单，导航功能和 APP 自带的导航栏同时存在。页面中按钮被覆盖，无法完全加载。结语必须承认的是，移动端的用户体验比以往任何时候都要好，网页、本地原生应用之间的一致性正在变好，用户已经适应了绝大多数常见的交互模式，在移动端上请求桌面端页面的情况发生的频率在降低，但是移动端体验距离完美还有很长的一段距离。本篇来源：优设网原文地址：https://www.uisdc.com/state-mobile-ux-2023
淘宝 京东 网页 最近突然想起要买一个东西，刚好手就放在键盘上，刚好手机又有点远，我就用浏览器打开了淘宝。当我在搜索结果页点击商品时，突然被告知要登录：着急想要了解商品的我……没有登录而是新开标签页进入了京东。找到想要的商品后，我登录下单了。事后我仔细对比了一下，发现淘宝的网页处处显得「敷衍」。反衬之下，京东显得专业多了。这就让我有点惊奇了。2021 年阿里巴巴旗下以淘宝为代表的淘系零售电商占据过半市场份额（52%），是京东（20%）的两倍不止。在使用手机端网购时，我也是向来更喜欢淘宝而不是京东的。而且在互联网从业人员眼中，阿里属于一线大厂，京东一般认为是二线大厂，前者更能吸引顶尖人才。为啥淘宝的网页端还明显不如京东呢？如果只是稍逊一点也就算了，关键淘宝网页端有很多迷惑的设计点。更多网页设计干货：只会黑白灰？7大要点帮你做好悼念缅怀的网页设计！如何设计悼念缅怀相关的网页？阅读文章 > 我们就以首页为例分析一下：一、大片无效模块首先，现在应该没那么多人有耐心愿意先登录再使用吧，登录模块占用那么大的位置挺没必要的。而且还没登录，就展示那么大的宝贝收藏、买过的店、收藏的店……感觉没啥意义。然后 banner 下的第一个模块居然是猜你喜欢（个性推荐）？我还没登录，显然猜不准，这个模块基本也废了。然后那个 banner，我翻了一下，都是什么贵就卖什么……切中普通用户需求的几率也是相当之低也就是说，这整个首页，大半的空间都是无效的。作为业内人士，我猜，设计成这样，可能是因为设计师压根没想到大部分访客可能没登录？对比一下，京东的登录模块小很多，banner 内容更有吸引力，而且第一个模块是秒杀活动（虽然露出不多）。二、双重悬停态Banner 左侧的这个分类导航很奇怪，鼠标移上去是整行高亮，而且每行一个图标。刚开始，我还以为每行的 3 个链接点过去都往一个地方跳转，结果发现不是。仔细一看，每个链接有单独的下划线悬停样式！不但如此，商品卡片也有 2 个悬停态！鼠标放在卡片上时，背景色和边框变一下；然后鼠标放到商品名称上时，商品名称单独高亮了。点击这两块区域跳转到不同的地方吗？不，没有差别。对比一下，京东就正常很多：三、粗糙的细节首先，很明显的是淘宝这个 banner 的箭头不但上下没对齐，而且里面的图标也没居中，强迫症看着闹心。然后淘宝大量使用灰色卡片，却不把间距统一一下。虽然一般用户看不出来，但这应该是基本的设计规范吧？对比一下，京东的边距就整齐多了：四、梦回上个世纪的消息通知淘宝首页这个消息通知我很想吐槽，等了好几条，几乎没有一条能引起普通消费者的兴趣。京东也做了消息通知，虽然字显示不全也不滚动，但好歹内容稍微有用了一点：五、不登录看不了商品前面也说过了，虽然淘宝能够直接搜索，但是即便搜到了，也必须登录后才能查看。刚有点兴趣，还没确认要买就把人拦下，这显然不明智：对比一下，京东会等到用户决定要买的事后，再提醒登录：六、内容太少往下一翻，淘宝 banner 下面只有一个模块，还都是猜不准的猜你喜欢：京东的模块就丰富多了：七、为啥淘宝在网页端摆烂？以我自己在大厂工作过的经验来说，造成这个现象的原因，十有八九是网页端数据占比太低，团队不重视。就算以目前这个状态，淘宝网页端的访问量都未必比京东网页端低。淘宝如果愿意把网页端稍微捯饬一下，数据量肯定能明显超过京东网页端。但淘宝手机端太赚钱了，所有资源都倾斜过去，其它端的资源还不如二线厂商。大厂的资源分配的马太效应比很多人以为的更加严重。凡有的，还要加倍给他，叫他多余；没有的，连他所有的也要夺过来圣经《新约·马太福音》可让网页端这样摆烂多少也是个隐患不是？这么看还是拼多多聪明，既然懒得管网页端，就干脆不做了：欢迎关注作者的微信公众号：「体验进阶」本篇来源：优设网原文地址：https://www.uisdc.com/taobao-vs-jd
鞋垫 品牌 网页 大家好我是花生，今天和大家分享点有意思的事儿。在这之前先问大家一个问题：如果让你给一款鞋垫设计一个网站，你会怎么做呢？如果一时间不知道从何下手的话，FWA（Favourite Website Awards）3 月 1 日的当日最佳项目，肯定会给一个让你耳目一新的答案。这个叫做「OH HAPPYS DAYS」的网站设计项目，以其出色的界面设计、流畅的使用体验以及别具一格的创意，在 2 天之内就得到 FWA 评审团高达 83 分的肯定。除此之外「OH HAPPYS DAYS」还获得了 CSSDesign Awards 网站 3 月 4 日的最佳项目奖以及 Awwwards 的提名奖。虽然从名字到设计界面都不会让人第一时间联想到鞋垫，但是「OH HAPPYS DAYS」的的确确就专门为鞋垫设计的网页，出人意料也正是网站以及品牌想要的得到效果。「OH HAPPYS DAYS」是为 CHRISTOU 1910 旗下新品牌 DAYS 设计的网站。CHRISTOU 1910 是 1910 年开始在雅典运营的家族企业，以专业研发生产矫正带、支撑器等医疗辅助器材发家。CHRISTOU 1910 官网主页2017 年 12 月，公司获得首轮融资，之后就开始稳步投资开发创新的运动、健康和保健产品，以期在后疫情时代将“自我保健”的消费理念传递给消费者，开拓更广泛的市场。DAYS 就是 CHRISTOU 1910 基于这个理念成立的全新潮流品牌，于 2022 年 2 月正式上线，主打产品是符合人体工学、呵护足部健康、材料环保可回收且外观设计创意十足的多款鞋垫。CHRISTOU 1910 官网中的 DAYS 品牌，非常年轻有活力为了树立好 DAYS 年轻、潮流、有活力的新形象，最广泛地提升 DAYS 的知名度，CHRISTOU 1910 在 DAYS 的品牌设计上投入了大量精力。他们邀请知名的设计工作室 Big Horror Athens (Greece)负责 DAYS 的品牌视觉设计，并量身打造了品牌网站「OH HAPPYS DAYS」。Big Horror Athens 是一家实力顶尖的创意数字设计工作室，在企业品牌设计和网页设计开发上经验丰富，他们负责的项目多次荣获 FWA、CSSDesign Awards、Awwwards 的奖项。Big Horror Athens 为 DAYS 的鞋垫设计了 5 款外观，每款有不同的颜色搭配，可以提供多样选择。配色上使用多种高明度高饱和度的颜色互相搭配，大胆抢眼；搭配闪电、波点、爱心、猎豹、摇滚手势等手绘涂鸦感十足的小元素，随性独特，非常能吸引追求个性和自我的年轻消费群体。在确定好 DAYS 系列鞋垫的视觉外观设计后，Big Horror Athens 联合巴塞罗那创意网页开发机构 No Matter，设计了品牌网站「OH HAPPYS DAYS」，为 DAYS 宣传其健康、潮流、年轻有活力的品牌理念提供了一个绝佳的平台。「OH HAPPYS DAYS」网站配色延续了鞋垫大胆鲜明的风格，使用了红、绿、黄、蓝等的大面积的撞色；字体使用的是线条干净利落的无衬线体，现代感十足；在装饰小元素和按钮样式上用的是扁平风，简单有趣，非常有亲和力。此外还色块、字体和小元素都设计了动效，使整个界面活力十足。网页功能简单明了，主要是右上角的 3 个按钮。「COMFY」和「FRESH」代表两个不同的系列，「SHOP」转到商店。网页向右滚动翻页，过渡非常丝滑，以一个向右走的小云朵进行视觉指引。每一页是一项鞋垫的功能或特色的介绍，且必然包含一种动态元素，丰富视觉感受，并引导浏览者视线到需要注意的地方。比较有意思的一点就是在呈现一个系列的多种产品时，网页并没有采用传统的列表，而是做成了了类似于“俄罗斯转盘”的形式，滚动一下就会转动到下一个产品，就像玩游戏一样。此时鼠标也会显示成一个眼睛的形状，暗示浏览者可以点击进去查看详情。总结「OH HAPPYS DAYS」无论是视觉呈现还是浏览体验，都完美地传达出健康、潮流、有活力的品牌理念，真让人有一种用上这款鞋垫走路都能轻快很多感觉。「OH HAPPYS DAYS」这个项目获得专业奖项，不但体现了 Big Horror Athens 高超的设计水平，也让 DAYS 这个品牌的知名度提升到一个新的层次，成就了设计项目中甲乙方的双赢。从网页项目中各种设计上的小心思足见设计师的热情与认真，设计理念和各种小细节都非常值得我们学习借鉴。以上就是今天的推荐。附上网址，对网页设计有兴趣的朋友可以多去探索感受一下。「OH HAPPYS DAYS 官网」 https://days.christou1910.com/en/「Big Horror Athens 官网」 https://www.bighorrorathens.com/如何高效地进行网页设计？重点关注这7个要素大家好，我是 Clippp。阅读文章 > 优设一直致力于为设计师提供最实用的设计干货知识，也为大家推荐了很多提升设计效率的神器。为了更好地为设计师提供服务，我们新建了一个「优设-花生设计交流群」，由我主导运营。无论你是想找神器、找教程还是想解决设计路上疑问，都可以进群交流，优设与大家共同成长。进群方式见下图，等你哦~本篇来源：优设网原文地址：https://www.uisdc.com/oh-happy-days
在路上
落霞与孤鹜
张大湿
