跳到主要内容

网站模型:4种流行的探索方法

Website mockups

+$Website mockups can be created in lots of different ways. It's true there is no 'best' approach, but depending on certain UI and UX designers' styles and preferences (and the design process), some will work better than others.

在本文中,我们将看看四个最流行的选项的优缺点:端到端的UX工具,模型工具,图形设计工具,以及编码设计,这些设计开始模糊网站模型之间的界限和原型。

+$If you're after wireframing tools specifically, see this post on the最佳线框工具+$, or for a wider collection, check our out our mega-roundup of the最好的网页设计工具

GenerateJS banner

+$Click the image to find out more and pick up your tickets(图像信用:未来/Toa Heftiba,Unspash)

+$Don't make the mistake of thinking all website mockups are the same. Simple decisions about platforms, fidelity, and coding will all produce significantly different results. Know what you want and what your goals are before you even begin the design process – if you want a tool that supports all three phases, it's best to start out using it than to switch over halfway through. Likewise, if you need a stellar, fully realistic mockup, keep in mind that you'll be using a graphic design editor at some point.

01.端到端的UX工具

最高层是旨在满足整个工作流程的端到端工具:模型,原型设计,文档,开发人员切换和设计系统。UXPin自2010年初以来,一直致力于满足这一需求,但其他一些品牌,如Adobe和InVision,现在也在努力创造“统治所有人的一个工具”。

UXPin拥有强大的原型设计,模型,文档和开发人员切换

那么这些工具如何为模型创建加起来呢?他们可以毫无问题地解决这些问题 - 然后是一些问题。例如,使用UXPin,您可以创建具有多个状态和交互的模型。它甚至通过包含钢笔工具来模仿Photoshop和Sketch的一些功能。

另一方面,InVision的工作室,允许一些非常漂亮的动画编辑;而Adobe XD允许您在XD设计中打开Photoshop和Sketch文件,并应用颜色,符号,线性渐变和字符样式。

InVision的Studio旨在创建端到端的工作流程

最重要的是,端到端工具现在提供设计系统,以确保跨项目的模型的一致性。设计系统为每个人提供跨工具的资产和设计原则的单一事实来源。如果您计划创建大量模型,则此功能几乎是强制性的。

选择用于创建网站模型的端到端工具时,值得考虑以下几个方面:

  • 保真度:视觉和交互设计工具有多强大?
  • 一致性:哪些功能可确保您的工作中的设计一致性?
  • 准确性:您正在使用的元素是否反映了组织中的“事实来源”?
  • 合作:您可以与利益相关者或其他设计师合作吗?
  • 开发人员切换:该工具如何为开发人员生成规范和资产?

02.专用的模型工具

不太稳健的解决方案,如原理成帧器Moqups要么Balsamiq工作室仍然可以为您提供构建模型所需的一切 - 您将失去额外的工作流程和设计一致性功能。这些工具旨在使创建过程尽可能简单,因此您可以更专注于风格决策而不是如何操作程序。

专用的模型工具具有明显的优势:初学者可以从易用性中受益,而专家则欣赏专为其高级需求量身定制的设计。在更高级的一端,像Framer和Principle这样的工具专注于模型的动画和交互。

像Framer这样的工具专注于互动

在低端,Moqups和Balsamiq提供的功能比有时用于线框和模型的非设计工具(例如基调),但它们仅限于低保真设计。但是,如果目标是快速创建低保真线框,它们可能非常有用。

对于模型工具,您需要确定一个简单的线框图解决方案是否只是,或者您是否需要更高级的屏幕设计。无论您选择哪种模型工具,只需确保您愿意接受协作工作流程中的损失以及端到端工具提供的设计一致性较低的功能。

03.平面设计软件

一些设计师发誓像软件一样Photoshop CC,素描或插画家CC特别是那些特别熟练或熟悉提供像素控制的工具的人。如果您的目标是实现最高水平的逼真度和视觉保真度,平面设计平台的效果最佳。正如我们在我们的指南中解释的那样使用Photoshop CC进行快速原型设计,它可能比你想象的容易。

Photoshop CC

Photoshop提供了细粒度的控制,但对于简单的模型可能有点过分

使用图形设计软件可以访问几乎无限选择的高度定义的颜色,因此如果您在严格和预设颜色方案的限制下工作 - 例如,在特定的品牌规则下 - 那么这些程序可能是您最好的选项。这些程序不仅仅是颜色选项,它提供了更多的可视化工具,让您可以解决细节上的细节问题。

但是,使用这种软件的缺点是,在开始编码设计时很难翻译。在Photoshop中工作的东西可能并不总是在代码(字体,阴影,渐变效果等元素)中起作用,这可以转化为浪费时间来找出原型制作阶段的解决方案。

对于样式较多的页面,在模型化阶段可能有助于敲除特定的视觉细节,在这种情况下,Photoshop或Sketch将为您提供最多选项。同样地,如果你正在处理一个挑剔或难以取悦的客户,向他们展示一个华丽而令人印象深刻的模型可能会更容易赢得他们。

mockups can be dragged into UXPin

可以将在Photoshop或Sketch中创建的样机拖放到UXPin中

值得一提的是,在Photoshop或Sketch中创建的模型可以通过UXPin拖放到原型设计阶段。这样,您只需点击几下即可轻松为所有图层设置动画(无展平),并确保您无需在原型时从头开始。

如果视觉效果不是您的唯一优先事项,那么使用可以在一个地方进行线框图,模型制作和原型制作的工具可能会更有效。除非您正在寻找最佳可视化,否则平面设计软件可能比模型更值钱 - 您肯定需要定期与开发人员沟通,因为这些工具不是为协作而设计的。

04.编码模型

如果你主要是设计师并且不熟悉编码,那么这显然不是一个选择。如中讨论的那样样机指南,编码的模型不是默认选择。

大多数编码可以推迟到原型设计阶段(如果您正在创建HTML / JavaScript原型)甚至更晚(如果您使用原型设计工具)。但是,尽管存在复杂性和潜在障碍,但仍有许多受人尊敬的设计师提倡将代码引入模型阶段。

虽然工具和技术的改进意味着在布局设计中开辟了越来越多的可能性,但并不是所有东西都很容易(甚至可能)在代码中重新创建。从代码开始,您可以立即知道您可以做什么,不可以做什么。如果您对代码感到满意,也可以说从这开始就不那么浪费了 - 无论如何,模型最终会以HTML / CSS结束。

但正如我们之前提到的,编码的模型不是一种流行的策略,原因多于编码的难度。过早开始编码可能会限制您的创造力和实验准备,因为很容易担心您的想法在代码中的可行性,而不是他们看起来多么令人兴奋。

在何时引入编码取决于你。只需确保了解您的设计目标,并让开发人员了解您如何确定功能的优先级。

阅读更多:



翻译字数超限