从浏览器接近网站设计过程
已发表: 2022-03-11“这是给那些疯狂的人、不合群的人、反叛者、麻烦制造者、方孔中的圆钉的人……那些以不同的方式看待事物的人——他们不喜欢规则……你可以引用他们，不同意他们，赞美或赞美他们。诽谤他们，但你唯一不能做的就是忽视他们，因为他们改变了事情……” ——苹果公司的Think Different活动，史蒂夫乔布斯，1997 年。
大多数时候，设计师仍在网站设计过程中使用传统设计工具创建静态屏幕模型。 但是一些设计师正在迈出一大步，绕过它们，直接编写代码，在浏览器中构建和调整设计，并实时测试他们的设计。 他们是疯子、格格不入、叛逆者吗？
通常，传统的网站开发过程涉及多个阶段，包括规划、内容策略、设计、线框图、原型设计、测试、开发、发布等。 但是在设计阶段，是否有另一种方法可以产生“像素完美”的响应式网站设计并完全绕过设计工具？
随着响应式设计的兴起和使用中的各种设备（手机、平板电脑、笔记本电脑、台式机、手表），保持一切一致变得更加困难——并且需要考虑更多移动部件，设计网站和界面的方法在改变。
尽管设计师不必成为专家级编码员，但一种解决方案是让设计师直接开始使用驱动网站的代码。 只需一点 HTML 和 CSS 就可以编写代码的设计师会发现自己对任何团队来说都是一笔巨大的财富，并且总体上拥有巨大的优势。
为什么？ 在参与具有所有复杂性的响应式网站设计项目时，设计师通常没有时间跨 10 种不同的分辨率和视口创建一个组件（例如页眉或页脚）的静态设计。 即使只为最流行的设备设计，他们仍然必须考虑具有不同纵横比、屏幕密度和屏幕尺寸的 4-5 个屏幕。 至少可以说这不是一项小任务。
先用笔和纸解决网站设计挑战
让我们探索一种不同的网站设计方法和规划过程。
第一阶段从客户问卷开始，从业务角度询问一般项目目标、目标受众、转换策略、各种绩效期望等。 这是在实际设计阶段启动之前完成的，以更好地了解客户的需求和整个项目，从而提高生产效率。
下一步是编写项目大纲，以确认摘要已被理解。 在您可能没有太多经验或专业知识的利基市场中开展项目时，这很有帮助。 将其称为功能规范，但技术含量较低。
这有助于定义术语、关键字和流程。 根据项目的复杂性，执行多个场景和用户流程是一个好主意——通常是入职流程、搜索和导航站点，或者如果它是电子商务站点，则执行“添加到购物车”和结帐流程。
线框图和原型设计
原型设计是网站设计过程的下一个阶段。 构建快速线框来讨论页面布局、功能以及网站页面在不同设备上的外观是一个好的开始。 构建数十个不同模板和组件的线框并不需要太多时间。 可以从中创建一个简单的网站原型，并且根据项目的复杂性，可以使用 InVision、Adobe XD、Balsamiq、Moqups 或 Axure 等原型制作工具。
情绪板和界面库存
下一步是组建一个情绪板：设计师、客户和其他利益相关者可能喜欢其他网站的东西的集合——布局、外观、颜色或字体、图标、图像等等。 这将有助于定义网站的整体外观。 如果客户有品牌风格指南，则应考虑并将其纳入新的网站设计中。
一旦批准了各种工件——线框、原型、模型、情绪板等——做一个界面清单是个好主意。
界面清单是构成界面的各个部分的综合集合。
布拉德弗罗斯特
如果从头开始进行响应式网页设计，那么首先要写下将构建项目的所有组件和元素。 一个无序列表就可以了，而且总比没有好。 例如表格、按钮、图像、排版、媒体、表单、导航、组件等。
在浏览器中设计
“在浏览器中设计”是一个随着响应式网页设计的兴起而流行的术语。 为了最大限度地减少在 Sketch 等设计程序上花费的时间，设计师们被敦促将设计阶段转移到浏览器中，并利用 CSS 进行布局和造型。 这种网站设计方法被证明更有效，因为它减少了很多步骤。
通过专注于 HTML 模型，并使用 CSS“在浏览器中”测试设计理念，可以节省通常花费在其他设计工具（如 Sketch）中创建页面静态模型的时间。 对于设计人员来说，掌握一个好的代码编辑器并提出一个好的浏览器刷新方法是一个好主意，这样他们就可以实时看到变化。 例如，Sublime Text 和 Codekit 就是一个很好的组合。
HTML 和 CSS 以它们的结构，迫使你思考模式并让你保持控制。 在构建可以轻松复制、复制和填充动态数据同时保持相同结构的 HTML 组件时，更容易考虑模块化。 如果要创建特定修改，则必须明确定位该元素，或添加另一个 CSS 类。
当您设置标题样式时，除非它们被覆盖，否则它们将在整个站点中保持一致。 其他元素也是如此。 这种类型的思维迫使你标准化，将通用元素组合在一起，尽可能多地重用已经样式化的元素，最重要的是，保持一切模块化。
通过单个 CSS 声明，您可以更改按钮上的填充以获得更好的触摸目标，并直接在手机、平板电脑和台式机上进行测试。 这在 Photoshop 或 Sketch 中不容易做到，因为其他元素在布局中不知道彼此，并且每次调整某些东西的大小时都必须重新组织对象。
想尝试不同的标题配色方案吗？ 通过仅使用几行 CSS 代码，所有 HTML 模板、所有设备和屏幕上的更改都立即可见。 当你有 20 个静态模型时，这种灵活性是无法轻易模仿的。 当然，您可以在 Sketch 或 Adobe XD 中使用“符号”来表示可重用组件，但它们不如 CSS 通用。
在这个阶段，需要做出几个技术决策。 需要回答的问题是：
- 你会使用 CSS 预处理器吗？ （推荐的）
- 您将使用哪种类型的响应式网格进行布局？
- 您想使用的字体是否可以购买？ 客户是否有购买高级网络字体的预算，或者您会恢复使用可用的免费网络字体吗？
- 你会使用多色还是单色图标？ 整个网站的大小会有所不同吗？ 接下来，您是依赖自定义绘制的图标，还是依赖现有的图标包？ 您的图标需要适应什么尺寸？
字体和响应式网页设计的问题
为响应式网页设计项目选择字体可能具有挑战性。 有很多可能性，也有同样多的陷阱。 由于该设计将在浏览器中使用，因此这是试用它们的最佳场所。 字体可读性可能因大小、重量、颜色和渲染而异，因此通过直接在浏览器中试用字体，设计人员可以确保事情看起来正确，并满足预期的期望。
有许多在线工具可用于选择和测试字体以及尝试字体组合。 在 Typetester 和 Typecast 上，可以找到并测试来自各种服务和代工厂的不同字体。 当使用特定字体订阅服务（如 Typekit 或 Fonts.com）时，设计人员可以直接生成字体并在其页面模板上进行测试。 使用新字体生成 Typekit 包既简单又快速，您可以轻松查看特定字体将如何影响网页的性能。
符合品牌风格的图标
如果绘制自定义图标，则需要定义大小、网格和样式。 例如，在 Illustrator 中工作时，每个画板都代表一个图标。 图标可以很容易地从 Illustrator 导出为 SVG 或 PNG，以后可以通过 Icomoon 等服务转换为图标字体。 建议使用矢量图标 (SVG)，因为矢量与分辨率无关，因此无需担心它们在高清 (Retina) 屏幕上的显示方式。
控制网站设计过程的样式指南和 CSS
即使我们在浏览器中进行设计，使用数十个模板和组件，我们也可能会忘记使用某些东西的位置以及使用方式。 将所有组件的样式指南构建为中央存储库是一个好主意。 通过将 UI 组件和元素组合到网页中，将从本样式指南构建特定的页面模板。
UI 组件可以是分页、产品列表、图片库、模式窗口、表单元素等，并用作模板的构建块。 当需要测试构建特定的 UI 组件时，将所有内容保存在一个地方非常方便。
使用 CSS，将组件样式分离到单独的文件中是一种最佳实践。 例如，分页样式将在_pagination.scss中，表单元素在_form.scss中，所有这些文件将与其他文件（变量、mixin 等）一起包含在单个 SCSS 文件中。
虽然style.scss可能由几十个“小文件”组成，但当几个人在同一个项目上工作时，如果将所有内容分成更小的块，则更容易跟踪更改（无论是否使用源代码控制）。 在网站设计项目投入生产后，继续维护风格指南很重要，因为团队需要跟踪每个网站组件。
使用样式表——模块化 CSS
从开发的角度来看，编写模块化 CSS 有很多方法。 最著名的是 SMACSS（CSS 的可扩展和模块化架构）、BEM（块、元素、修饰符）和 OOCSS（面向对象的 CSS）。 即使您最终开发了自己的方法，也有很多东西需要学习。 此时，您应该有一个很好的 UI 组件和网页集合，这将使您能够轻松地构建新的网页。 您可以从样式指南中复制和粘贴元素，并根据需要重新排列它们。
由于一切都是模块化的，您不必担心设计和代码的一致性； 但不要忘记，如果您在系统范围内调整 UI 组件，则需要使用更改更新样式指南（或添加新组件）。 为了保持一切井井有条，最好使用某种模板/自动化方法来处理网页，例如 Gulp 或 Grunt。
下一步是什么？ 在浏览器中设计
现在，您拥有 UI 组件的中央存储库，记录了每个元素以及从这些组件构建的网页。 从这一点开始，设计师很可能不再需要打开他们最喜欢的设计工具，因为大部分“设计”将直接在代码中完成，并在浏览器中预览。
不太确定特定更改将如何影响设计？ 现在，您可以同时在不同的设备和浏览器上预览您的设计，以查看标题上的字体如何更改，或者更改按钮的大小和颜色将如何影响设计。
使用自定义 Web 字体时，添加更多字体权重将如何影响页面加载性能？ 我们可以使用 WebPageTest 等服务测试正在进行的网页性能，并对实际结果做出明智的决定。 我们绝对不能在 Photoshop 或 Sketch 中做到这一点。
在网站设计过程中，使用 HTML 和 CSS 以及在浏览器中工作可能并不适合每个设计师。 但如果设计师真的关心他们的作品在各种设备和屏幕尺寸上的外观，他们需要确保它每次都完美无缺。 当在移动设备上的网络浏览器中查看时，作为静态设计模型看起来令人惊叹的东西可能看起来不太理想。 精明的设计师应该在每个人都能在浏览器中看到它们的环境中构建和测试网页设计。
进一步阅读 Toptal 设计博客：
- 响应式设计——最佳实践和注意事项
- 如何设计有效的登陆页面
- 电子商务网站设计终极指南
- 网站重新设计的基础——案例研究
- 设计的驱动力——网站重新设计案例研究