从浏览器进入网站设计过程

本文概述

• 首先用笔和纸解决网站设计挑战
• 线框图和原型制作
• 情绪板和接口清单
• 在浏览器中设计
• 字体和响应式网页设计的麻烦
• 符合品牌风格的图标
• 样式指南和CSS可以控制网站设计过程
• 下一步是什么？在浏览器中设计

“这里有疯狂的人, 不称职的人, 叛乱者, 制造麻烦的人, 方孔中的圆钉……那些看待事物的人有所不同-他们不喜欢规则……你可以引用它们, 不同意它们, 赞美或赞美他们。侮辱他们, 但你唯一不能做的就是忽略它们, 因为它们会改变事情……” —苹果公司的Think Different活动, 史蒂夫·乔布斯, 1997年。

大多数时候, 设计师在网站设计过程中仍在使用传统的设计工具来创建静态的屏幕模型。但是有些设计师正在飞跃而绕过它们, 直接进入代码, 在浏览器中建立和调整设计, 并实时测试设计, 使其在人们面前实时可见。他们是疯狂的人, 不称职的人, 叛军吗？

通常, 传统的网站开发过程涉及多个阶段, 包括计划, 内容策略, 设计, 线框图, 原型制作, 测试, 开发, 发布等。但是在设计阶段, 是否有另一种方式可以产生”像素完美”的响应式站点设计并完全绕开设计工具？

随着响应式设计的兴起和所用设备(移动设备, 平板电脑, 笔记本电脑, 台式机, 手表)的多样性, 要保持所有内容的一致性变得更加困难, 并且要考虑到更多的移动部件, 这是设计网站和界面的方法正在改变。

尽管没有必要让设计师成为专家编码员, 但一种解决方案是让设计师直接开始使用驱动网站的代码。只需使用少量HTML和CSS即可打乱代码的设计人员将发现自己对任何团队来说都是一笔巨大的财富, 并且在总体上具有巨大的优势。

为什么？当让响应式网站设计项目具有所有复杂性时, 设计人员通常没有时间在10个不同的分辨率和视口中为一个组件(例如页眉或页脚)创建静态设计。即使仅针对最受欢迎的设备进行设计, 他们仍然必须考虑4-5个屏幕, 这些屏幕具有不同的宽高比, 屏幕密度和屏幕尺寸。至少可以说是不小的任务。

首先用笔和纸解决网站设计挑战

让我们探索一种不同的网站设计方法和规划过程。

第一阶段以客户调查表开始, 该调查表从业务角度询问总体项目目标, 目标受众, 转换策略, 各种绩效期望等。这是在启动实际设计阶段之前完成的, 目的是为了更好地了解客户的需求和整个项目, 从而提高生产效率。

下一步是编写项目大纲, 以确认已理解该简介。在你可能没有太多经验或专业知识的利基项目中工作时, 这很有用。称其为功能规范, 但技术性较低。

这有助于定义术语, 关键字和过程。根据项目的复杂程度, 最好执行几种方案和用户流程-通常是入门流程, 网站的搜索和导航, 或者如果是电子商务站点, 则是”添加到购物车”和结帐流程。

(照片由Green Chameleon在Unsplash上​​拍摄)

线框图和原型制作

原型制作是网站设计过程的下一阶段。建立快速的线框来讨论页面布局, 功能以及站点页面在不同设备上的外观是一个好的开始。无需花费很多时间来构建数十个不同模板和组件的线框。可以从中创建一个简单的网站原型, 根据项目的复杂程度, 可以使用InVision, Adobe XD, Balsamiq, Moqups或Axure等原型工具。

情绪板和接口清单

下一步是建立一个情绪板：设计师, 客户和其他利益相关者在其他网站上可能喜欢的东西的集合—布局, 外观, 颜色或字体, 图标, 图像等。这将有助于定义网站的整体外观。如果客户有品牌样式指南, 则应予以考虑并将其纳入新的网站设计中。

批准各种工件(线框, 原型, 模型, 情绪板等)后, 最好进行界面清单清点。

接口清单是构成接口的点点滴滴的完整集合。布拉德·弗罗斯特

如果从头开始进行响应式Web设计, 则首先记下将要从中构建项目的所有组件和元素。无序列表会很好, 而且绝对总比没有好。例如表格, 按钮, 图像, 版式, 媒体, 表格, 导航, 组件等。

界面清单中的示例屏幕。

在浏览器中设计

“在浏览器中设计”是随着响应式Web设计的兴起而流行的术语。为了尽量减少在Sketch等设计程序上花费的时间, 敦促设计师将设计阶段移至浏览器, 并利用CSS进行布局和样式化。这种网站设计方法被证明是有效的, 因为它减少了很多步骤。

通过专注于HTML样机, 并使用CSS在”浏览器中”测试设计思想, 通常可以节省在其他设计工具(例如Sketch)中创建页面的静态样机的时间。设计人员最好掌握良好的代码编辑器并提出良好的浏览器刷新方法, 以便他们可以实时查看更改。例如, Sublime Text和Codekit是很好的组合。

(照片由Jefferson Santos摄于Unsplash)

HTML和CSS的结构本身使你不得不考虑模式并加以控制。构建可轻松复制, 复制和填充动态数据同时保持相同结构的HTML组件时, 考虑模块化的问题比较容易。如果要创建特定的修改, 则必须显式定位该元素, 或添加另一个CSS类。

当你设置标题的样式时, 除非将它们覆盖, 否则它们将在整个网站上保持一致。其他元素也一样。这种类型的思维迫使你进行标准化, 将常见元素分组在一起, 尽可能重用已样式化的元素, 最重要的是, 使所有模块保持模块化。

使用单个CSS声明, 你可以更改按钮上的填充以实现更好的触摸目标, 并直接在手机, 平板电脑和台式机上进行测试。在Photoshop或Sketch中很难做到这一点, 因为其他元素在布局上并不相互了解, 并且每次调整大小时都必须重新组织对象。

是否想尝试其他标题颜色方案？通过仅使用几行CSS代码, 更改就可以在所有设备和屏幕上的所有HTML模板上即时看到。当你有20个静态模型时, 这种灵活性就很难轻易模仿。当然, 你可以在Sketch或Adobe XD中使用”符号”作为可重复使用的组件, 但是它们不如CSS通用。

在此阶段, 将需要做出一些技术决策。需要回答的问题是：

• 你会使用CSS预处理器吗？ (推荐的)
• 你将使用哪种类型的响应网格作为布局？
• 你要使用的字体可以购买吗？客户是否有高级Web字体的预算, 还是你将恢复使用可用的免费Web字体？
• 你将使用多色或单色图标吗？整个网站的大小会有所不同吗？接下来, 你是依靠自定义绘制的图标还是现有的图标包？你的图标需要容纳多少尺寸？

通过调整几行CSS, 可以在所有设备和屏幕上立即看到更改。

字体和响应式网页设计的麻烦

为响应式网页设计项目选择字体可能会充满挑战。有很多可能性, 也有很多陷阱。由于该设计将在浏览器中使用, 因此这是尝试它们的最佳位置。字体的可读性会因大小, 粗细, 颜色和呈现方式而异, 因此, 通过直接在浏览器中试用字体, 设计人员可以确保一切看起来正确, 并满足期望的期望。

有许多在线工具可用于选择和测试字体以及试用字体组合。在Typetester和Typecast上, 可以找到并测试来自各种服务和铸造厂的不同字体。当使用诸如Typekit或Fonts.com之类的特定字体订阅服务时, 设计人员可以生成字体并直接在其页面模板上进行测试。生成具有新字体的Typekit包既简单又快速, 并且你可以轻松地看到特定字体将如何影响网页的性能。

符合品牌风格的图标

如果绘制自定义图标, 则需要定义大小, 网格和样式。例如, 在Illustrator中工作时, 每个画板将代表一个图标。图标可以很容易地从Illustrator导出为SVG或PNG, 以后可以使用Icomoon之类的服务转换为图标字体。建议使用矢量图标(SVG), 因为矢量与分辨率无关, 因此不必担心它们在高清(Retina)屏幕上的显示方式。

样式指南和CSS可以控制网站设计过程

即使我们在浏览器中进行设计, 拥有数十个模板和组件, 我们也有可能无法跟踪使用某物的位置和方式。最好将所有组件的样式指南作为一个中央存储库。通过将UI组件和元素组合到网页中, 将根据此样式指南构建特定的页面模板。

UI组件可以是诸如分页, 产品清单, 图像库, 模式窗口, 表单元素等, 并且可以用作模板的构建块。当需要测试构建特定的UI组件时, 将所有内容放在一个地方真的很方便。

Miklos Philips制作的风格指南示例

使用CSS, 最好的做法是将组件样式分成单独的文件。例如, 分页样式将在_pagination.scss中, 在_form.scss中的表单元素中, 所有这些文件将与其他文件(变量, mixin等)一起包含在单个SCSS文件中。

尽管style.scss可能由数十个”小文件”组成, 但是当几个人在同一个项目上工作时, 如果将所有内容分成较小的块, 则更容易跟踪更改(无论是否使用源代码控制)。在网站设计项目投入生产后, 继续维护样式指南很重要, 因为团队将需要跟踪每个网站组件。

使用样式表–模块化CSS

从开发的角度来看, 有许多编写模块化CSS的方法。最著名的是SMACSS(CSS的可伸缩和模块化体系结构), BEM(块, 元素, 修饰符)和OOCSS(面向对象的CSS)。即使你最终开发出自己的方法, 也有很多东西需要学习。此时, 你应该拥有一个不错的UI组件和网页集合, 这将使你能够轻松构建新的网页。你可以从样式指南中复制和粘贴元素, 然后根据需要重新排列它们。

由于所有内容都是模块化的, 因此你不必担心设计和代码的一致性。但是请不要忘记, 如果你在系统范围内调整UI组件, 则需要使用所做的更改来更新样式指南(或添加新组件)。为使一切井井有条, 最好使用某种模板化/自动化方法来处理网页, 例如Gulp或Grunt。

在Google Chrome中使用元素检查器在浏览器中检查CSS和代码。

下一步是什么？在浏览器中设计

现在, 你有了一个UI组件的中央存储库, 记录了每个元素, 并从这些组件构建了Web页面。从那时起, 设计师很有可能不再需要打开自己喜欢的设计工具, 因为大多数”设计”将直接在代码中完成, 并在浏览器中进行预览。

不太确定具体的更改将如何影响设计？现在, 你可以同时在不同的设备和浏览器上预览设计, 以查看标题上的字体更改或按钮大小和颜色的更改将如何影响设计。

使用自定义Web字体时, 增加更多的字体粗细将如何影响页面加载性能？我们可以使用WebPageTest之类的服务来测试进行中的网页性能, 并根据实际结果做出明智的决定。我们绝对不能在Photoshop或Sketch中做到这一点。

在网站设计过程中, 并非每位设计师都可以使用HTML和CSS以及在浏览器中使用。但是, 如果设计师真的很在乎自己的作品在各种设备和屏幕尺寸上的样子, 那么他们需要确保每次都完美。当在移动设备上的Web浏览器中查看静态设计模型时, 看起来令人惊奇的东西看起来不合需要。精明的设计师应该在每个人都可以在浏览器中看到它们的环境中构建和测试Web设计。

• • •

在srcmini设计博客上进一步阅读：

• 响应式设计–最佳实践和注意事项
• 如何设计有效的目标网页
• 电子商务网站设计终极指南
• 网站重新设计的基础-案例研究
• 设计的推动力–网站重新设计案例研究