在产品团队中，通常有两种哲学在起作用, 尤其是在初创公司:努力在市场上做出最好的产品，并迅速将产品推向市场. 一方面是质量，另一方面是速度. 每种方法都有其优点和缺点.

对质量的高度关注 像素级设计-需要大量的时间和资源. 但是快速设计——通常意味着为了快速发布而牺牲最佳实践——可能会导致平庸的产品. 这两种选择都会给企业带来问题，并使企业难以获得竞争优势. 成功的产品策略的基石是平衡这两种矛盾策略的能力.

保持平衡说起来容易做起来难，因为质量和速度是主观的. 然而，在为许多初创公司设计项目的过程中，我相信正确的平衡是存在的. 我称之为 务实的 像素完美.

这个宣言把我们带进了UI设计的战壕, 速度和质量之争在哪里打响. 虽然这些指导是为了帮助创业产品团队保持平衡和正轨，但任何 用户界面设计师, 产品团队, 想要快速做出卓越产品的组织可以使用这10条原则来实现实用的像素完美.

优先考虑网站性能

和我共事过的大多数企业家都没有排名 网络性能 在他们的业务优先级列表中名列前茅. 他们通常专注于发展产品和业务，而可能忽略了性能等关键因素, 可访问性, 和 搜索引擎优化. 但这些因素都会影响公司的增长.

尤其是页面速度，对转换有着显著的影响. 谷歌 将页面速度纳入其排名，这意味着较差的性能可能会影响您的网站的搜索排名，并减少其页面浏览量. 研究还显示，在一秒钟内加载的电子商务网站的转化率超过 两倍高 比那些在5秒内加载的网站.

你可以免费审核你的网站 谷歌的灯塔，一种工具 分数的网站 性能、可访问性、搜索引擎优化和其他关键因素. 它还提出了改善薄弱领域的建议. 加强可及性, 例如, 该工具可能会建议增加背景和前景的对比度 颜色 增强易读性. 对于大多数网站来说，满足谷歌 Lighthouse的要求就足够了, 但如果你是为政府或大公司设计, 你可能会面临 更严格的要求.

使用现成的设计系统

设计系统 在设计人员和开发人员之间创建共享语言，并支持产品之间的一致性, 为公司节省时间(和金钱). 也就是说，创业公司——甚至是许多成熟的组织——不需要定制的设计系统. 相反，他们可以采用现成的系统，比如 谷歌的素材设计, IBM的碳, or 蚂蚁集团的蚂蚁设计. 设计师和开发人员已经为这些成功的系统投入了数千小时的工作, 重新发明工业标准的原子UI组件纯粹是浪费时间.

然而, 我听过无数次这样的争论，如果设计师继续使用现成的设计系统，所有的网站都将如此 看起来一样. 这种观点认为，用户会因为网站的存在而回避为他们的生活增加有形价值的产品 UI元素 直观地观察和行为. 将视觉差异化与产品差异化混为一谈可能会导致公司朝着错误的目标努力. 更好的传递价值的方式是制造一款能有意义地改善用户生活的产品. 如果关注独特性，设计师可以使用品牌颜色和颜色来定制设计系统 排版但原创内容和功能更有可能给初创公司带来竞争优势.

痴迷于UI细节

你不应该妥协的一个方面是整个网站的视觉细节的质量和一致性. 坚持内容标准可以防止混淆，并使 产品直观的 使用. 确保你的网站有一致性 图像、布局、表单和内容 帮助用户高效导航.

作为一般的经验法则，每一个属性 Figma组件, 包括间距, 填充, 利润率, 对齐, 字体属性, 颜色属性, 阴影, 和效果, 是否应该在不同的状态和断点变化之间完美地实现-直到像素.

对于非设计师甚至是初级设计师来说，纠结于这些细节似乎是不必要的. 我找到了设计游戏 不能Unsee 成为向客户和其他团队成员传达UI细微差别的有用工具, 因为这可以帮助他们自己看到细节所能带来的不同.

错误和空虚的状态:迎合，不要烦恼

状态告诉用户状态 UI元素的. 设计各种可能的状态(从错误到成功)引导用户沿着他们的旅程.

创业公司通常专注于 愉快路径这是一段通往用户目标的无摩擦之旅，而且没有考虑到道路上的颠簸. 然而，为了提供最好的体验，迎合以下状态(至少):

• 默认的
• Progress
• 错误
• 成功
• 空
• 交互式(悬停、激活、按下、禁用)

即使在这些类别中，专注于最关键的行动也是有益的. 因此, 如果错误发生在用户体验的非关键性部分(例如:web应用程序)，则显示通用错误消息是可以接受的.g.(用户收藏搜索结果项). 但是让我们假设在票务网站上购买失败. 因为这是一个高风险的流程，你应该通知用户 究竟是什么导致了错误. 网络问题? 拒绝付款方式? 行动的后果就越大, 就越值得投资于上下文消息来修复错误.

根据您的站点内容，您可以选择满足其他状态，例如 不完美的状态. 我们很容易过度优化, 所以如果你超越了本质, 选择实现特定目标的状态.

目标是“足够好”的图像质量

当然，模糊的图像必须被修复. 但如果你在考虑 图像质量 在中高端的选择上, 高, 或非常高质量的设置时导出图像 Photoshop，或者选择70%或80%的压缩，宁可选择较小的文件大小. 如果你不能立即注意到两个不同质量的图像之间的改善, 你的用户也不会.

较大的图像会减慢页面加载速度 (你的用户会注意到)，影响用户体验、转化率和谷歌排名. 一般来说，你的产品应该根据图片来决定——更大的图片对奢侈品牌来说比政府网站更有影响力, 尽量使用最小的文件大小.

使用现成的图标集

有很多方法可以区分一个刚刚起步的产品. 图像学不是其中之一.

任何投资于完全自定义图标集的初创公司都是在浪费钱, 无论是自力更生还是获得资助. 相反，选择像这样的图标库 谷歌的物质符号. 有时候，你可能需要一个现成的套装所不具备的特定图标, 但是，(有节制地)添加到现有库中要比从头创建一个库更有效.

比起独特的图标，用户和企业从初创公司在附加功能和更好的可用性上的投资中获得的价值要多得多. 与a互动是令人困惑的 公司网站 他们似乎拥有自定义图标集的预算，但却不想花钱去修复漏洞, 可怜的可访问性, 表现平平.

对于动画，简单就行

数字设计中的动画可以捕捉和引导注意力， 提高可用性，增加读者 数据理解, 放大快乐的时刻(比如在电子游戏中达到一个新级别或完成一笔交易).

但是在web ui中, 花哨的动画在很大程度上是一个很容易翻倍的时间消耗, 三元组, 或者将特定UI组件的作用域扩大四倍. 此外，滚动触发的动画 视差滚动 或者渐隐效果会适得其反 让用户感到沮丧而不是愉悦.

UI中的任何动画 应该是有目的的. 因此, 奢侈品牌, 在那里，视觉上的辉煌是先决条件, 可以使用精心设计的动态图形和动画来支持品牌期望-正如所见 劳力士的主页. 但对于绝大多数品牌来说, 在web ui中没有或最小化动画是避免可用性问题的最好方法 减少闪避.

不要担心细微的浏览器异常

网络浏览器解释字体权重和分配垂直间距的方式不同. 不同的操作系统使用自己的抗锯齿方法，以独特的方式呈现字体. 因此，相同的页面看起来会略有不同 取决于用户的浏览器 操作系统. 在大多数情况下, 不规则性可以忽略不计, 为了让页面在所有浏览器中保持完美一致而耗费资源是不值得的.

我曾与客户谁要求浏览器渲染是原型的碳副本, 到目前为止，调整线条高度从20px到20.2px达到完美. 对每个系统进行优化都会带来无休止的迭代，而这对用户来说又有什么好处呢?

你可能会花费数百小时去优化每一分钟的细节, 最终的输出仍然不会像它在原来的模型看起来很像. 与其追逐这个难以捉摸的梦想，不如继续前进. 有更好的方式来传递价值，尤其是对初创公司来说.

不要尝试针对所有可能的屏幕尺寸进行优化

设备尺寸、屏幕分辨率和像素密度都存在无穷无尽的组合. 响应设计 根据用户的屏幕大小调整内容. 而你应该针对不同的设备优化你的网站, 优化每个可能的视口像素分辨率组合是不现实的.

务实的做法是 创建流畅的设计 优化到3到6个 断点-网站将自动转换为在特定屏幕尺寸上观看的点. 下面是一组默认的断点，范围从最小的手机到大型显示器.

两者之间的设备在UI上可能会有一些小的差异 断点. 也许在到达下一个断点之前，在一个断点的远端空间利用率并不完美, 或者有些元素看起来比理想的要宽. UI必须在所有断点上可用(不可协商), 但是针对不同的手机进行了优化, 平板电脑, 而且，计算机的尺寸会耗费大量的时间和精力，却没有多少好处.

咨询谷歌分析，具体的项目要求，和 统计最常见的屏幕分辨率 为您的网站确定正确的断点. 例如, 科技品牌可能会选择不迎合最小最便宜的手机尺寸(320px), 而是根据用户偏好的设备专注于360px. 或者网络分析可能会显示，来自大型监视器的流量不到所有网络访问的1%. 在这种情况下，可能不值得花费额外的设计和开发时间来满足该断点.

元标签很重要

用户对你的产品的体验始于他们登陆你的网站之前. 指向你的内容的链接如何出现在谷歌搜索结果中, 在社交媒体平台, 或者在直接消息中可以提示用户点击或不点击.

为社交媒体分享优化网站 经常被初创公司忽视，但值得努力. 这种比较显示了未针对共享进行优化的文章和经过优化的文章之间的区别.

上面的例子不包括proper 元标记因此，谷歌和Twitter上的链接预览都很简单，不太吸引人点击. 与此形成鲜明对比的是, 下面这个带有元标记的例子显示了一个预览图像和一个描述，告诉用户内容是关于什么的.

根据HubSpot的数据，在搜索引擎结果中排名靠前的网站 根据搜索意图优化他们的内容最重要的策略之一就是编写有效的标题标签和元描述. 突出的元标签 包括标题、内容类型、描述、图像和URL.

平衡行为:实用的像素完美设计

设计速度很重要，但如果你的产品平庸，就会被竞争对手盖过风头. 相反, 如果你在发布之前等待它变得完美，即使是一个非常优秀的产品也很难起步.

我经常看到创业公司追求速度和低成本，而不是质量. 如果一家企业正在竞相征服一个新的利基市场，速度可能是成功的关键, 然而, 大多数市场已经饱和, 甚至当一个新的市场出现时, 它迅速饱和. (在 ChatGPT 病毒式传播，例如，超过 推出150款人工智能聊天机器人应用 2023年第一季度.)

采用务实的像素完美方法的设计师通过专注于真正增加产品价值的东西而放弃那些没有价值的东西来平衡质量和速度. 有商业头脑, 他们明白，加速生产往往会降低产品和服务的质量, 最终阻碍价值. 他们帮助创业公司通过创造来验证他们的产品是否适合市场 高质量的用户体验摄入快速.