edge chromium_改善Microsoft Edge和Chromium中的表单控件

edge chromium

Over the past few months, we’ve been collaborating closely with the Google Chrome team on this project, and are excited to share the refreshed controls that will be coming to Microsoft Edge Insider builds, or other Chromium browsers near you.

在过去的几个月中，我们一直与Google Chrome团队在此项目上紧密合作，并很高兴分享将用于Microsoft Edge Insider版本或您附近的其他Chromium浏览器的刷新控件。

更现代的外观 (A more modern appearance)

This change brings an improved polish to the form controls and helps bring continuity of design and user experience with the rest of the browser. We have been collaborating closely with the Google Chrome design team to strike a balance between our design languages with a modern look and feel that feels at home in a variety of Chromium browsers. Below is a comparison of the default controls in Chromium today, compared to the updated controls we’re rolling out:

此更改为表单控件带来了更好的修饰，并有助于使设计和用户体验与其他浏览器保持连续性。 我们一直与Google Chrome设计团队紧密合作，以使我们的设计语言之间保持平衡，并在各种Chromium浏览器中拥有现代的外观。 以下是今天Chromium中默认控件与我们推出的更新控件的比较：

	Current	Upcoming
Radio
Checkbox
Text
Buttons
Select
Password
Color
Meter
Progress
Range
Date
Time

	当前	即将来临
无线电
选框
文本
纽扣
选择
密码
颜色
仪表
进展
范围
日期
时间

更好的触摸支持 (Better touch support)

Windows devices come in a rich array of form factors and input modalities, including traditional desktop and laptop PCs, 2-in-1 devices, and other tablets and pen devices. We heard your feedback looking for a better touch input experience in our early Chromium preview builds, and set out to take an inventory of the controls to identify opportunities to improve the touch experience.

Windows设备具有多种形式和输入形式，包括传统的台式机和笔记本电脑，二合一设备以及其他平板电脑和笔设备。 我们听到了您的反馈，希望能在我们早期的Chromium预览版中寻求更好的触摸输入体验，并着手对控件进行清点，以发现改善触摸体验的机会。

A good example of the touch improvements is the time input; currently, Chromium provides a text input, a clear button and a spinner. Our research found that with the large surface area of the fingertip, small controls that are too close together can be difficult to target precisely, recommending a control size of 23×23 pixels (13×13 DLUs) is a good minimum interactive control size for any input device. By contrast, the spin controls at 15×11 pixels are much too small to be used effectively with touch. The new time input we’re introducing includes a flyout with expected touch affordances, like inertia when scrolling and larger touch targets. Other inputs such as date, color, range received subtle size increases to  important touch targets as well.

触摸改善的一个很好的例子是时间输入。 目前，Chromium提供了文本输入，清除按钮和微调器。 我们的研究发现，由于指尖的表面积较大，太小的彼此靠近的小控件可能难以精确定位，因此建议将控件大小为23×23像素(13×13 DLU)是一种很好的最小交互式控件大小，任何输入设备。 相比之下，15×11像素的旋转控件太小而无法有效地用于触摸。 我们正在引入的新时间输入包括具有预期触摸能力的弹出按钮，例如滚动时的惯性和更大的触摸目标。 其他输入，例如日期，颜色，范围接收到的微妙尺寸也增加到重要的触摸目标。

更易用的控件 (More accessible controls)

Another area we examined is the focus rectangle that wraps a control when a user focuses the control. This is an important accessibility feature, as it allows the user to track where they’re actively focused, especially while navigating via keyboard.

我们检查的另一个区域是焦点矩形，当用户将控件聚焦时，该矩形将控件包裹起来。 这是一项重要的可访问性功能，因为它允许用户跟踪他们积极关注的位置，尤其是在通过键盘导航时。

Our team identified three different potential focus indicators that aligned with Microsoft’s design language, guaranteed high contrast on any background content, and provided a clean and aesthetically pleasing appearance.

我们的团队确定了三种不同的潜在焦点指示器，这些指示器与Microsoft的设计语言保持一致，保证在任何背景内容上都具有高对比度，并提供了干净美观的外观。

We then ran interactive user studies to identify the best option, compared against Chromium’s current default focus rectangle as a baseline. We found that, while preferences were split for aesthetics, one option was the clear leader for accessibility. We’ve chosen that option as the new focus rectangle in Microsoft Edge, which you can see below:

然后，我们与Chromium当前的默认焦点矩形作为基准进行了交互的用户研究，以找出最佳选择。 我们发现，尽管对美学的偏好有所不同，但一种选择是无障碍获取的明确领导者。 我们选择了该选项作为Microsoft Edge中的新焦点矩形，您可以在下面看到它：

Additionally, all these controls now support Windows High Contrast, which allows the user to define specific colors to improve the visual experience. All sites that utilize the built-in controls will benefit from these updated controls whenever the user is in High Contrast mode, without web developers doing any extra work. However, webdevelopers can adjust these styles if they want by utilizing the new CSS forced-color-adjust property and the prefers-contrastmedia query that are actively being standardized.

此外，所有这些控件现在都支持Windows High Contrast，它允许用户定义特定的颜色以改善视觉体验。 每当用户处于“高对比度”模式时，所有使用内置控件的网站都将受益于这些更新的控件，而Web开发人员无需进行任何额外的工作。 但是，Web开发人员可以根据需要通过利用正在积极标准化的新CSS Force-color-adjust属性和“ prefers-contrast”媒体查询来调整这些样式。

We’ve also updated our implementation to ensure great keyboard support across each control. For example, in the new color input, you can either navigate a single value using the arrow keys with the color well selected; if you hold the Ctrl key on Windows (Cmd key on Mac), it will move by 10 values allowing for quick traversal of the color well.

我们还更新了实现，以确保每个控件都具有出色的键盘支持。 例如，在新的颜色输入中，您既可以使用箭头键浏览选定的颜色，也可以浏览单个值。 如果您在Windows上按住Ctrl键(在Mac上为Cmd键)，它将以10个值移动，从而可以快速遍历颜色。

Finally, we updated the mappings for the controls to map to the HTML Accessibility API Mappings specification, to ensure a great experience for users who use assistive technologies (such as screen readers).

最后，我们更新了控件的映射，以映射到HTML Accessibility API Mappings规范 ，以确保使用辅助技术的用户(如屏幕阅读器)获得良好的体验。

翻译自: https://habr.com/en/company/microsoft/blog/472226/

edge chromium