遇到网站设计上的困惑时，不妨参考以下一些通用的操作规范。需要注意的是，这些规范并非固定不变，我仅是罗列了一些可能对你日常网站设计有所助益的策略。

我们必须铭记，设计本质上是一种突破传统思维框架的思考方式，这亦意味着在特定情境下，我们必须敢于挑战既定规则。

1. 设计时使用密度像素（dp），而非像素（）

屏幕上每英寸所容纳的像素数量被称为密度像素，其缩写为PPI，即每英寸像素。而dp，即密度独立像素，有时也写作dip，或者简称为d-。

在构建界面设计时，建议各位开发者以设备的像素密度为基准，而非单纯的像素值。这样做能确保所创作的图标素材比例适宜，并能够适配各种尺寸的设备。

以密度独立像素dp为基准，若我们构建了一个200像素宽、50像素高的按键，那么在屏幕上显示的按键尺寸将是200像素宽、50像素高；而在另一屏幕上，按键的尺寸将变为400像素宽、100像素高，相当于原始尺寸的两倍大小。

由于不同屏幕的英寸单位像素密度存在差异，即某些屏幕的ppi分辨率较高，为了确保图标在各类分辨率屏幕上保持相同大小，设计师一般会选择一个固定尺寸进行设计，并随后导出2倍、3倍、4倍的尺寸版本。

XS Max的显示屏大小为414毫米乘以896毫米。在此处，所采用的计量单位并非像素，而是点的数量。若以像素来计算，其尺寸则为1242像素乘以2688像素。了解这些信息后，在设计XS Max时，我会以414毫米乘以896毫米的点数作为设计尺寸，并最终导出三倍尺寸的图标素材。

2. 间距使用8的倍数（8dp）

为何网页布局中的间隔普遍采用8的倍数而非5的倍数呢？原因在于，若设备的分辨率为1.5倍，我们便无法得到一个奇数间隔。

此外，目前市场上流行的显示屏尺寸大多以8为基准，按照8的整数倍进行设计，能够很好地与这些屏幕相匹配。

采用8的倍数进行设计规划，能够确保整体设计的统一性。依照这一传统做法，设计师在执行任务时无需再对间距的具体数值进行推测，从而使得每一个图标都能与其它图标实现精准的匹配。

3. 删减元素容器的线框

在设计阶段，我们需不时地退后一步，观察界面上的线条与框格，这些充当“容器”的元素是否使得界面显得过于繁杂，以及是否有必要继续保留。一般情况下，那些用于区分界面内容的线条与框格，可以用边界的空白区域来替代。

我们设计的众多元素主要位于线框之中，若将这些“容器”进行删除，界面将显得不那么拥挤，从而为元素提供更广阔的展示空间。

4. 无障碍设计—重视对比度

有效运用对比度不仅能帮助用户将焦点锁定在关键信息上，而且还能显著提升产品的易用性和便捷性。

设计一款产品，其性质类似于建造图书馆或学校等公共设施，这样的设计必须考虑到所有潜在用户，不论他们是否失明、色盲或视障。

Web内容无障碍指南（WCAG）规定，文本以及文本图像的对比度必须达到至少4.5：1的标准。

为确保设计符合这一要求，我们可选用该插件对设计进行无障碍性审查。

5. 基于用户习惯，设计用户体验

为什么有些图标元素会被公认为标准？原因有多种。

若你将按键设计成圆形，那么在需要制作一个（内容较长的）“Free”按键时，这样的设计将导致其在界面垂直方向上的空间被过多占用。

此外，用户所渴望的是一种与现有产品相仿的使用感受。倘若你所设计的网站、APP或软件未能与用户既有的使用习惯相契合，那么这种体验将显得不够直观，用户因此可能会感到沮丧。

因此，在施展我们的创造力时，应当以既有的设计标准作为基础和出发点。切勿重复发明轮子。

6. 善用颜色重量（ ），建立视觉层次

每种色彩均携带着独特的视觉分量，我们能够利用这一视觉分量来塑造内容的视觉层次感，通过调整色彩的明暗程度来展示内容的层级重要性。

巧妙运用色彩视觉的技巧在于，赋予那些至关重要的元素更深沉的视觉色彩，这样有助于用户在浏览网页时迅速识别出哪些信息是关键，哪些则是次要的。

醒目的超大字体和加粗内容会最先吸引用户的目光，随后，他们的注意力会转向这些内容下方所提供的辅助信息。

7. 避免使用超过两种字体

一般情况下，设计界面会限定字体的种类数量，通常情况下，两种字体即可满足需求——这并非意味着你不能使用更多的字体，只是在使用时需要给出充分的理由。通常而言，采用两种字体进行设计会更加适宜。

设计界面时要善用字体家族。

采用字体系列，我们得以运用该系列中多样化的字体样式。设立字体系列的目的，正是为了让这些样式能够相互协调，使得设计在展现丰富变化的同时，亦能保持整体的统一性。

挑选字体时，宜优先考虑那些包含多种字号（例如常规、中等、粗黑、超粗）以及多种风格的（如长形、扁形、倾斜）字体系列。这样的选择既能够为设计提供丰富的变化可能，又不会导致字体种类的过多增加。

8. 让用户认知，而非记住

认知产品是产品设计所倡导的理念，其背后原因在于，我们为何要让用户在体验过程中进行思考呢？

结账界面、电子邮箱、搜索记录以及返回键等，均是有效构建用户认知的典型示例。

在优秀的设计中，结账环节应确保用户无需回忆便能准确识别所购商品。他们应当能通过界面直观地确认所需购买的物品，而不是依赖记忆来回想。

在邮箱里，我只需匆匆一瞥，便能辨别出哪些邮件已被阅读，哪些尚未开启，这整个过程无需动用太多脑筋。同样地，当我登录至个人亚马逊账号，我能立刻从上次购物中断的环节无缝衔接，继续购物体验——账户会自动展示我近期浏览过的商品。

在设计阶段，务必确保各个元素、功能以及选项都能清晰呈现，以降低用户的记忆压力。用户在操作过程中无需自行记忆操作步骤中的信息。系统操作指南应当在用户需要时能够轻松查阅或找到。

尼尔森诺曼集团是一家专注于人机交互与用户体验的咨询公司，该公司由唐·诺曼等人士共同创立。

9. 切忌拖慢用户体验

对于用户而言，追求快速和高效至关重要。他们选择使用某个应用，其目的在于解决某个具体的问题。

若通过手机将支票存入银行账户的过程让人感到愉悦，那自是极好的，然而，身为设计师，切莫让您的创意构思成为用户达成目的的障碍。

在动画与微交互领域，一个重要的教训是：若某项体验仅仅徒增了时间消耗，那么它并未真正提升用户的使用感受。

若动画的添加具有明确的目标，它能够提升用户的体验；然而，若新增的是无谓的干扰元素或操作步骤，用户的体验将不会得到改善。

页面上充斥着各式各样的着陆页设计—随着用户鼠标的向下滚动，动画便逐一展开。然而，这类设计往往过分追求动画效果，每个元素都频繁地出现淡入淡出和移动，却几乎忽略了用户体验的本质。当界面同时出现过多活动时，用户往往难以辨别哪些信息才是真正值得关注的内容，这无疑是对用户宝贵时间的极大浪费。

众多研究指出，动画在界面中呈现的黄金时长介于200至500毫秒，这一时长是由大脑的生理特性所决定的。若动画时长少于100毫秒，则几乎无法被人眼捕捉；反之，若动画时长超过一秒，则会让人感到乏味且产生延迟感。

因此，若在界面中嵌入动画效果，务必赋予其一个清晰的职能，同时确保用户不会等待时间超过500毫秒。在2019年的当下，仅需1毫秒就可能激怒用户。

10. 大道至简

在我们试图在界面上添加额外内容，诸如按钮、文字、图片、动画、插画等时，这些新增元素便会与既有信息产生冲突。一旦页面内容过于繁杂，部分元素的重要性便会相应降低。

谷歌搜索的首页堪称典型。其设计将所有焦点都集中在了搜索这一核心功能上，避免了将用户置于冗余信息的汪洋之中。

结束之际，我想与大家分享一句我钟爱的设计格言：在追求极致完美的过程中，并非是添加到无法再添加的程度，而是削减到无法再削减的境界。 ——出自（法国作家，《小王子》的创作者）