跳转到内容
必威体育论坛必威精装下载APPRedfin解决方案徽标必威体育论坛必威精装下载APPRedfin解决方案徽标 联系
与笔记本电脑一起工作的人

为更好地与开发人员沟通而设计

作为一名设计人员和前端开发人员,臭名昭著的设计人员与开发人员之间的交接经常发生在我和自己之间。在这两个角色上花费了大量时间,并与其他设计人员和开发人员密切合作,我学到了一些实践,帮助我从一开始就回答开发人员的问题。

响应性设计

在视觉设计阶段要考虑的第一个问题是,设计如何从静态的想法转化为人们将使用的东西。在现实世界中,人们使用各种设备与网站进行交互。这里有许多不同的用例需要考虑。例如,移动用户可能在没有互联网接入的情况下访问网页,这使得自动播放视频成为数据使用的一个问题。然而,这里要考虑的最常见和最值得注意的情况是不同的屏幕大小。

将手机、平板电脑和桌面设计交给开发人员的情况很常见。如果做得好,这些通常足以定义一个网站的大部分内容。开发人员通常在320px以上工作,所以创建这个尺寸的移动模型是很重要的。从那里,我们扩大浏览器,以确保网站仍然看起来正确的大小之间提供的模型。手机的设计将被应用到比平板电脑低一个像素的地方,平板电脑的设计将被应用到比桌面电脑低一个像素的地方(你可能想要为你的开发者指定这一点)。

在大多数情况下,我们希望这些设备都有一致的体验。例如,如果用户在外部显示器上而不是在笔记本电脑上打开网站,那么它看起来就不应该是另一个网站。也就是说,在某些布局中,正确的断点(组件更改时的浏览器宽度)不符合定义的设备尺寸之一。在设计时,请检查是否有任何组件或页面布局需要以更特定的浏览器宽度进行切换。一个很好的测试就是创建一个比平板电脑小一点点的艺术板,然后将所有东西都放在移动布局中,宽度就是这个。如果有任何问题,请考虑为该特定组件定义一个不同的断点。

另一个需要考虑的是网站变得越来越宽。你最不想做的事情就是向你的利益相关者展示最终的网站,并在一台大电视上找到混乱的组件。通常,我将为此定义最多两种宽度。一个是内容最大宽度,另一个是网站最大宽度。

网站的内容最大宽度是组件占用的最大空间量。

“内容最大宽度”是指网站上的组件(如文本或图像)停止增加宽度,但背景(如背景颜色或图像)继续增加的大小。如果您的内容最大宽度特别大,请记住您的所有组件是如何拉伸到该宽度的。对于网站上任何文本的可读性和可访问性,请记住,最佳行长为45-75个字符。

这个宽度可能是你所需要的,但你也可以定义一个网站的最大宽度,如果你想让像图像背景或全宽度幻灯片在一个更宽的点停止增长。这可能只适用于那些使用图像的全宽度组件,或(在现代设计中不常见)整个网站。当决定全宽度组件是否应该无限宽时,请考虑您希望图像在非常大的屏幕上看起来如何。除非背景图像与组件的高度相匹配,否则图像越宽,它所占用的垂直空间就越大。还要考虑你是否希望大图片在非常大的尺寸下看起来清晰,或者在正常和较小的尺寸下快速加载。限制图像组件所能达到的宽度是达到平衡的一种方法。

网站最大宽度是网站设计能够成长到的最大空间。

最后要定义的是平板电脑和桌面之间的边距。当宽度接近内容的最大宽度时,当内容开始收缩时,有多少边距留在侧面?我通常在手机和平板电脑之间留出16px,平板电脑和内容最大宽度之间留出32px(技术上是内容最大宽度加上64px,这样我就不会过早丢失填充)。

其他常见的响应考虑事项是排版和悬停状态。对于排版,您可能希望定义移动、平板和桌面的标题大小。还要注意行高,以及标题上下的间距。对于悬停状态,只需记住移动或平板电脑用户不能悬停,所以确保不会因为这一点而丢失任何功能。

其他技巧

这涵盖了需要记住的大部分要点,但以下是一些其他要点:

尽量使用一致的基本大小,最好是基于正文文本大小。我通常让我的基本字体大小为16px,然后尝试让字体和间距保持4px的倍数。

不要用大写字母锁打字。始终键入小写或大写,并使用您的设计软件将文本转换为大写。如果您需要在不必重新键入的情况下更改样式,这将有所帮助,并且它允许开发人员(取决于您共享设计的方法)复制和粘贴您的文本,而不是重新键入文本。它还可以很好地提醒开发人员,他们应该使用css使文本大写以便于访问(屏幕阅读器一次读取所有大写字母中键入的文本)。

确保你的图片和文字是灵活的。如果您有一个图像与覆盖它的文本完美地对齐,请注意该组件可能如何使用,以及内容编辑器是否会更改图像或文本。类似地,要注意内容编辑器可能添加到任何组件的文本量。字符数总是有限制的,但是提供这个或显示组件如何响应更多的文本,尤其是当文本区域高度依赖于浏览器宽度时,也没有什么不好。

Loem ipsem号召行动的例子

有一件事很容易被忽略,那就是网站中任何交互元素的悬停和焦点状态。一个网站要想被访问,它必须能用键盘导航。焦点状态就是你在一个页面中看到的,如果差异不明显,那么很难做到这一点。通常,悬停状态和焦点状态可以相同,但在某些情况下可能需要将它们分开。例如,表单是定义焦点状态的重要位置,但您可能不需要悬停状态来执行相同的操作。未指定的焦点状态通常由浏览器自动提供,从而导致浏览器之间的外观不同。

与开发人员一起工作时要建立的最后一件事是共享语言。段落或区块对设计人员和在内容管理系统中工作的开发人员来说可能有不同的含义。一起努力,确保你们对这些术语的意思有一个共同的理解。一个设计系统,甚至一个组件库,都是记录这一点的好方法。我们通常使用Invision DSM在设计人员和开发人员之间共享设计系统。

总结

要查看,请在设计时记住以下事项:

  • 以320px的速度设计移动设备
  • 定义内容和网站的最大宽度
  • 为移动、平板和桌面创建字体样式
  • 根据正文文本的大小,使用一致的基本尺寸
  • 养成使用UI将文本转换为大写的习惯
  • 尽可能灵活地使用图像和文本,并使用不同数量的内容显示组件
  • 提供悬停和焦点状态
  • 建立共享语言

在与开发者合作时,在创建网站时要记住设计和开发之间的差距。虽然小的设计细节对你来说可能很明显,但开发者可能不太在意像素距离和小的颜色变化,而是专注于以最佳方式构建网站。理想情况下,设计交接不是一个月漫长过程中的一个瞬间,而是持续的合作。在设计过程中获得开发人员的反馈可以避免你在不可行的道路上浪费时间,并且跨越清晰的设计模式可以确保开发人员从一开始就做出正确的假设。了解对方的世界可以让整个过程更加顺利。

Baidu