精益屏幕
第一屏就是工作本身,只绘制一次,以工作区域的宽度呈现。第二句话、第二个数字或第二个面板必须通过改变用户接下来的操作来赢得自己的位置。
此技能拥有编码代理默认发出的屏幕模板控制权:指标英雄、解释性副标题、等大卡片、被挤压的居中列以及伪装成仪表盘的列表。它不拥有任务逻辑、表单或无障碍性。这些保留在 ux-best-practices 中。它不选择视觉风格。如果存在设计系统,请使用它。不要为了应用此技能而重新设计产品的样式。
在宣布屏幕完成之前,运行 references/tells.md 中的检查清单。匹配即意味着要削减装饰或移动事实。删除用户仍然需要的功能且不留下访问路径,就是失败的屏幕。
绘制之前
根据你面前的产品,为这个屏幕命名其工作。不要从之前的项目中借用工作、名词或动词。
将屏幕与该工作匹配:
- 对现有表面的单一操作 → 一个按钮。不要构建一个页面。
- 用户可操作的列表 → 该列表。
- 他们阅读或编辑的记录 → 该记录。
- 他们前来检查的值 → 该值。
主要操作使用该工作的动词。“新建”、“编辑”和“删除”仅当它们是工作时才是主要操作。“打开”不是工作动词。工具性操作保持安静且远离第一阅读簇。
其余内容的存放位置
按需意味着一个用户可以预测名称的位置。摘要、历史记录、一组总计或一个不常用的工具会获得一个面板、第二个视图或一行安静的文字。构建那个位置。不要因为某个事实不被允许成为英雄卡片就删除它。
根据内部内容命名该位置。“数据”、“更多”和“信息”不是名称。如果前一个屏幕有一个功能,而这个屏幕没有访问它的方式,则该屏幕未完成。
标签页或第二个视图是不同的工作,不是相同卡片的第二份副本。不要在第一屏上放置一个唯一目的是隐藏仪表盘的操作。如果面板需要隐藏按钮,那它本就不是第一屏。
产品有外壳
当产品有多个区域时,这些区域位于持久性的侧边导航中。对它们进行分组。标记当前区域。如果某个计数是用户操作的积压工作,则在项目上放置计数。页面是一个区域。它不承载产品的其余部分,也不应因为其他部分无法容纳就删除它们。
同一区域的几种模式是标题下的标签页,以模式命名。同一列表的几个稳定视图(带计数)与列表一起放置。它们不是四个下拉菜单,也不是第二个侧边栏。
全局搜索属于外壳。对此列表的搜索属于列表。该区域的主要操作位于工作开始的地方。工具性功能保持在外壳中,保持安静。
一个长的目录显示一个窗口以及查看其余内容的诚实方式。它不会转储每一行,也不会在未命名控件后面隐藏其余内容。
个性来自构图
使用产品已有的字体、强调色和密度。如果没有,则使用一种中性字体和一种强调色。强调色标记活动的导航项和主要操作。几乎所有其他内容都是中性的。
完成的标志是对齐、清晰的行、弱化的辅助文本以及当前位置的明显性。展示字体、渐变或新的调色板无法修复结构错误的页面。不要为了看起来有设计感而重新设计产品的样式。
第一屏包含什么
只包含这份工作现在需要的内容。顺序、状态和动词遵循工作。它们不是固定的布局。
- 当用户必须对项目进行操作时,显示项目及其操作。仅当工作是完成工作时才将未完成的工作放在最前面。目录保持用户要求的顺序。
- 当用户必须阅读或比较时,显示该阅读内容。当比较是工作时,几个可比较的度量可以放在一个紧凑的行中。每个度量都附带真实的比较(上一期、目标或真诚的空值)。迷你折线图或图表只有在该系列存在时才作为主体出现。说明文字不重复数字。卡片上的徽章不替代比较。如果整个工作就是一个度量,则它只出现一次,而不是作为三个装饰的同伴。
- 当工作是单一操作时,屏幕就是该操作。
- 状态词汇只有在其改变用户接下来的操作时才出现。一个词,并且必须真实。在部分工作上使用成功样式是谎言。部分保持部分。
计数允许出现一次,小,位于它所计数的项目旁边,当它改变接下来的操作时。比工作本身还大的数字是虚荣,当数字不是工作时。两个表示不同事物且看起来像一对的大数字是虚假的对仗。只保留决定下一次点击的那一个事实。
什么离开第一屏
额外的总计、图表、历史记录、空字段、不常用的过滤器、解释以及编辑每个字段的表单。它们移动到上面提到的命名位置。它们不消失,也不都作为每行操作的附带物倾倒进对象中。
如果额外总计、图表或历史记录本身就是工作,则保留在第一屏。不要为了追求极简而将工作降级为一个展开控件。
管理器不是电子表格
当工作是管理集合时,行是对象加上操作。名称是最粗重的文本。工作动词在行上。用户要比较的字段保留。对大多数行为空且用户很少比较的字段,不是列。
电子表格的失败在于:每个属性都作为列、数据缺失处显示破折号、每个值上都有复制图标、名称下紧贴着类别、以及只有一个打开记录按钮。使用全宽来添加这些列与窄仪表盘是同样的错误。宽度属于标识和操作。
一行读起来像一个对象。名称最强。一个状态或金额安静地在末尾。第二行是用户可以扫描的预览,弱化,而不是标签的堆叠。进入记录的方式是行本身或最后的提示,并且它不替代工作动词。
移除项目是列表操作,当用户正在管理列表时。将其保留在行上,命名且安静,如果必须远离主要操作,则放在该行的菜单中。不要仅仅为了删除而强制进入详情屏。用对象的名称确认,并说明是记录消失还是其所指向的东西消失。只有当删除不常见且比管理列表更危险时,才将其保留在行外。然后详情包含它,但工作动词仍在行上。
构图
- 一个重心。 眯起眼睛。一个群组更重,那个群组就是工作。等大卡片、等大徽章和等大头部按钮意味着没有焦点。在添加任何东西之前先修复重心。
- 工作区域的全宽。 工具、表格、队列或控制台使用外壳旁边的内容区域。不要将其包裹在
max-w-4xl、max-w-6xl、max-w-7xl或窄居中列中,因为这会导致在数据局促的同时留下宽大的空白边距。仅对预期有人阅读的散文(约65-75字符)限制行长度。 - 没有重复表述页面的页面家具。 一个标题,即位置或对象的名称。没有上方的小型大写眉标。没有定义标题的副标题(“图书馆 — 你的图书馆所在之处”)。标题旁边没有重复产品名称的徽章。仅允许标题未提及的事实作为第二行,并且仅当该事实改变操作时。
- 没有指令行。 “点击一个芯片即可立即过滤”意味着控件看起来不像控件。修复控件并删除该句子。不要吹嘘交互是即时的。
- 通过位置而非方框分组。 接近性和标题。卡片适用于用户作为单元扫描的重复对象,或适用于真正的边界(模态框、可拖动磁贴)。统计数据、过滤器条和表格不需要各自一个卡片。永远不要在卡片内套卡片。七个项目的列表不会变成七个大卡片。
- 大部分为空的列不是列。 折叠它。破折号不是数据。缺失的必填值不能看起来像可选的空白。当它改变操作时显示缺口。当它不改变操作时省略它。
- 不要三重编码。 两个项目的分数、百分比和条形图是同一个事实的三次重复。当用户必须完成项目时,优先选择命名且可勾选的项目。无法一眼区分的条形图(50% 与 67% 的三项)不应存在。
- 不要装饰行。 名称已存在时使用字母组合磁贴、每个名称下重复的类别、永久复制图标、胶囊加条形加百分比。复制和其他罕见操作在聚焦时出现。行的高度与其数据一致。
- 破坏性操作安静、命名且可访问。 未标记的垃圾桶图标粘在唯一按钮上是误点。同样,只有在“打开”后才出现的删除也是误点。遵循上面的管理器规则。
- 过滤器赢得其位置。 搜索和过滤器仅在列表足够长以至于扫描失败时出现。伪装成过滤器的排序(如“名称A–Z”旁边的“状态(全部)”)是排序。零匹配的过滤器芯片不是真实过滤器的对等物。
- 没有填充对象。 不要为了看起来有内容而发明行、桶或示例记录。不要将截断或不确定的值显示为已确认。
当管理模板出现时
本能反应是头部堆叠、一行指标卡片、芯片、过滤器栏、条纹表格以及编辑加删除。仅当这确实是工作时才使用它。否则:
- 一个标题。位置或对象的名称。
- 工作本身,内容宽度。列表、记录、值或单一操作。不是替代队列。
- 重复表述工作的镀铬元素从第一屏移除。
- 总计和历史记录除非是工作,否则移动到命名位置。它们不会被删除。
不要
- 不要在只是按钮的任务上添加仪表盘。
- 不要将阅读、记录或单一操作变成未完成对象的队列。
- 不要用副标题教授屏幕。
- 不要在章节、卡片或页面上使用眉标+标题+支持句的字体预设。
- 不要以并非工作的指标作为开头。
- 不要在空旷的外边距海洋中居中局促的工具。
- 不要将每个区域都做成卡片。
- 不要对未完成的工作使用成功颜色。
- 不要给同一个想法取多个名称,除非差异改变操作。选择一个词。
- 不要交付一个用户无法在一秒钟内指出下一次点击或他们来阅读的事物的屏幕。
- 不要通过删除功能来回应拥挤的屏幕。移动次要内容。将工作所需的内容保留在表面。
- 不要将管理器变成只有“打开”一个操作的数据库网格。
- 不要将产品的每个区域都放在一个页面上,也不要因为页面精益而删除这些区域。给它们侧边栏。
- 不要为了制造个性而发明字体或调色板。修复外壳、行和强调色。