Are breadcrumbs still fresh for UX?
And yet despite these changes and new challenges over the years, the job of the UX designer has remained the same: Present information in an easy-to-find, easy-to-consume way.
将信息用一种易于寻找且易于消费的方式呈现。
作者决定研究面包屑这一广泛使用的组件。他从提出几个问题出发，并以此为线索进行他的调查。于是他调查了面包屑的产生过程（如此设计的初衷），正确使用面包屑的方式，面包屑的种类，手机端与pc端的异同，以及一些调查数据。最后对面包屑是否适用给出结论，并对如何用好面包屑做出总结。
There are two main breadcrumb types used in UX design today:
1. Location-based: to help a user identify their current location in the site’s structure; and
2. Attribute-based: to help a user identify an important quality or attribute of the content (page) being viewed.
以亚马逊为例，亚马逊对于实体书和电子书的面包屑的处理方式是不同的。（侧重不同）
I did find one study(https://www.usability.gov/get-involved/blog/2006/11/breadcrumb-navigation.html) that showed breadcrumbs get used as a navigation tool 6% of the time. This is compared with 40% of users who clicked on embedded links, 31% who clicked on the browser back button, and 22% who clicked on the navigation bar.
调查数据，使用面包屑的只有6%
https://developers.google.com/search/docs/guides/enhance-site#enable-breadcrumbs
同时贴上google的一篇推荐面包屑的调查
（这两个网站都可以记下来备以后自己做调查）
8-Point Grid: Typography On The Web
本文调查web端的字体方案，从不同种类的网站开始分别分析其目标，要求和对于响应式的需求。随后得出结论：8pt grid更加具有可用性。
文末附上了不少关于8pt grid typography的文章，可以收藏阅读。
An advanced example of this is the interpolation function used by Leigh Taylor and Nick Jones on Invision’s landing page.
The <h1> has a font-size: calc(32px + ((24 * (100vw — 800px))/799));. The typography on the page is meticulously calculated to work at every screen size.
用数学来决定设计的变化
Why are so many design systems based on relative sizing today? The answer is “accessibility”.
...
The most powerful part of the 8pt grid concept is its ability to drive consistency throughout your designs.
若是随着窗口大小变化而缩放文字大小及其它组件，容易得出多位小数的结论。而这容易造成困扰…。
Here are samples from a few familiar names: Google Material, Pivotal, Atlassian, Intuit.
举出的一些使用8pt grid typography的例子
How to Design Great UX for Sign Up Form
先从为什么登录表单需要进行思考和设计开始（即，哪些地方需要进行优化），然后再列出的方案就具备依据（对解决上面那些问题有帮助）。
具体有：加入社交媒体登录，自动保存输入的表单数据，短化单个表单（分成多个），自动激活第一个表单框，对于必选的协议不要让用户再打勾，考虑合并登录与注册在同一界面，单独一行只列一种数据，考虑密码可见，提醒大写，让button文本更简单粗暴又明显，自动化输入（银行卡号自动分区等），输入模版（手机号，生日等）
A simple input consists of several parts — Input Field, Label, Placeholder.
Generally, a textfield has 6 stated — Default, Hover, Focus, Error, Success and Disabled.
文本输入框的6种状态
Avoid using placeholders as labels thus it makes the form compact.
Avoid using placeholders as labels thus it makes the form compact.
label需要时刻在线
Scrolling interactions and techniques
What nesting actually does is use scrolling interactions from two separate objects and applies them to one object. This means applying a scrolling group to one object then applying a separate scrolling group to an object that already contains (or is a parent of ) the first object.
自由移动 - 纵向+横向同时可滚动；
折叠（nesting）也是由滚动实现的
给出了作者对于滚动这种交互方式的三种原则
You can apply a scrolling interaction to an object on only one axis at a time.
You cannot apply two scrolling interactions in the same direction in the same axis onto one object.
Don’t do tooooo much.
总的来说，第一要素依然是避免混淆与各种误操作——不管这种方式节省了多少步骤。