什么是线框:网页设计、模型、用户体验和差异

什么是线框
图片来源:信任半径

如果您涉足用户体验设计这个有趣的话题,您可能听说过“线框”一词。 设计产品的过程涉及线框图,但线框图到底是什么,为什么它们如此重要? 我们将在这篇博文中介绍所有关于线框的知识。 我们将从检查线框的组件开始,包括它们是什么、它们如何适应产品创建过程以及它们包含的特征。 此外,线框建模是艺术家和工程师用来提供真实世界或三维项目的视觉表示的一种方法。 这 线框模型 作为骨架 创建 3D 项目 通过使用基本的直线和曲线。 线框的定义在整个软件和网页设计行业都是相似的。 在这篇综合文章中,我们将向您解释“什么是线框”。

什么是线框?

线框是网页或应用程序的二维骨架轮廓,类似于建筑蓝图。 布局、信息架构、用户流、功能和预期行为都在线框图中清楚地列出。 线框图中的样式、颜色和图形通常会减少到最少,因为它们通常代表最初的产品概念。 根据需要多少细节,可以数字或手工制作线框。

最常使用线框图的用户是 UX 设计师。 在开发人员开始为界面编写代码之前,这种方法使所有利益相关者能够就信息的放置位置达成一致。 简而言之,线框图是一个图表或一系列图表,仅使用基本的线条和形状来显示网站或应用程序的用户界面 (UI) 和基本功能。

产品生命周期的探索阶段通常是线框图过程发生的时候。 设计师正在评估产品的范围,共同研究概念,并确定整个阶段的业务需求。 线框通常是网站的第一个版本,用作设计最终产品的起点。 设计人员可以利用从用户反馈中收集到的有见地的信息来改进下一个更复杂的产品设计迭代(例如原型或模型)。

线框的用途

线框图有三个主要好处:制作速度快且成本低,保持以用户为中心的概念,阐明和描述网站功能。 让我们更深入地研究这些目标中的每一个。 

1.使用线框来组织信息。 我们可以使用精心构建的线框快速发现网站上页面和内容之间的结构、层次结构、流程和关系。

2. 线框鼓励客户参与。

3. 促进合作和有效性。

什么是线框模型?

向其他人解释您的网站概念的第一步是创建线框。 它提供了一个其他人可以感知和理解的基本框架。 A 小样 通过展示产品的预期外观,让事情更进一步。 在批准设计线框和模型后,可以制作原型。 产品的视觉表示是通过模型完成的。 模型图像描绘了最终结果。 但是,模型不是交互式的(就像线框一样)。 模型要么是中保真设计展示,而不是线框,要么是高保真展示。

模型有助于做出有关产品配色方案、视觉风格和排版的决定。 您可以使用模型对产品的视觉方面进行试验,以确定外观最佳的产品。 再一次,您可以征求潜在客户的意见并立即进行必要的调整。 与在产品发布后返回并更改界面相比,这将为您节省更多时间。 与线框不同,模型无法绘制草图。 可能需要模型工具。 它们也很丰富。 您可以试试 Marvel、InVision 或 Moqups。

什么是网页设计中的线框?

网站的创建和维护需要广泛的人才和学科,包括网页设计。 网页图形设计、用户界面设计(UI 设计)、作者身份(包括标准化代码和专有软件)、用户体验设计(UX 设计)和搜索引擎优化是网页设计的一些不同方面。 尽管一些设计师处理设计过程的所有组成部分,但许多人团队合作以涵盖各个方面是很常见的。 创建网站前端(客户端)设计的过程,包括创作标记,有时被称为“网页设计”。 在更广泛的 Web 开发环境中,Web 设计和 Web 工程在某种程度上共存。 网页设计师应该了解网页可访问性标准和可用性问题。

网页设计中的线框

网站线框,有时称为页面示意图或屏幕示意图,是网站基本结构的图形表示。 “线框”这个名称是从其他使用骨架结构表达三维形状和体积的领域借用的。 为了最好地实现特定目标,元素以线框形式排列。 通常,创意和业务目标是推动目标的动力。 线框显示内容的页面布局或排列,以及界面元素和导航机制,以及它们如何交互。

网站线框将网站的表面或视觉设计与网站的智能结构或信息架构联系起来。 网站的功能及其各种屏幕模板之间的连接是借助线框建立的。 线框图是一种迭代方法,可用于快速创建页面原型并评估设计概念的可行性。 高级结构工作,例如流程图或站点地图,以及屏幕设计通常是线框图的起点。 线框图是网站开发的阶段,在此阶段,思维以物理形式出现。 

网站线框经常被比作机舱的蓝图。 你房子的卧室、厕所和其他房间的数量在示意图中有具体说明,但没有提到你新房子的家具或墙壁的颜色。 与此类似,我们以线框形式概述了实现网站目标所需的页面和功能(例如视频、图片库、导航和表单)。

线框用户体验

最常使用线框图的用户是 UX 设计师。 在开发人员开始为界面编写代码之前,这种方法使所有利益相关者能够就信息的放置位置达成一致。 UI/UX 设计中最重要的过程之一是线框图,它需要可视化数字应用程序的框架。 线框图是一个产品大纲,显示了哪些界面元素将出现在重要页面上。 这是交互设计过程中必不可少的一步。 作为以用户为中心的设计方法的一部分,在设计阶段开始时使用线框。 在创建移动和 Web 应用程序线框时,设计师会设想数字应用程序的整个结构,就像建筑师在考虑室内设计之前首先考虑建筑物的平面图并确定各个房间之间的相对布置一样。

各种用于数字线框图的工具中也有许多线框图工具包,这加快了将纸质线框转换为数字线框的过程。 Figma 是当今可用于简单团队沟通的最有效的 UI/UX 工具之一。 远程工作时,使用 Figma 的协作线框图比使用其他技术要简单得多。

原型与线框

原型通常是模拟用户交互的成品的高度详细的再现。 与前两个相比,原型允许用户参与界面的内容和交互,因为它是可点击的。 实际上,原型非常类似于成品本身。 尽管如此,这还不是最终的设计。 接口和后端通常不连接在原型中,这是成品和原型之间的主要区别。 为了在 UI 获得批准之前降低开发成本,我们这样做了。 原型经过测试后,团队可以继续编码。

高度交互的原型的好处是可以让用户测试界面并确定他们喜欢和不喜欢的地方。 您可以测试 Mockplus 和 Adob​​e XD 等原型制作工具。 A 原型 是高保真的,需要更多的时间来构建比 线框,这是低保真度。 线框主要用于从高处传达产品的概念。 原型是成品将如何运作的表示。 在线框图中,使用占位符,主要主题是整个结构。 实际设计将用于原型。 线框图是赢得利益相关者认可的工具。 您可以测试用户体验并收集用户对原型的参与反馈。

UX 中的线框是什么?

可以使用线框在结构上设计网站服务。 为了在考虑用户需求和用户旅程的同时在页面上布置内容和功能,经常使用线框。 线框是一种二维单色渲染,用户体验 (UX) 设计师将其用作创建网站或应用程序的初始阶段。 在添加图形设计或内容之前,他们使用它来构建基本框架,与业务和开发团队一起工作,改进可能性,并考虑反馈。 

什么是敏捷中的线框?

线框可帮助您形象化您正在构建的内容并使心理图像更加清晰。 此过程有助于为开发人员提供构建它所需的信息。 这类似于准备创建线框。 我们发现线框图技术对网络应用程序具有显着优势。 在线框图的早期阶段需要与利益相关者密切合作,这可以通过非正式和负担得起的方式来完成 敏捷 建模工具,如白板会话。

什么是软件设计中的线框?

线框是示意图或蓝图,可用于促进您、您的程序员和您的设计师之间就您正在开发的软件或网站的组织布局进行沟通。

Jira 是线框工具吗?

借助线框工具,设计人员可以轻松快速地创建设计的总体流程轮廓。 设计人员可以通过拖放来快速重新排列内容、标题和图像的占位符,以生成可以在以后进行改进的初稿。 Jira 是由 Atlassian 创建的独家问题跟踪工具,可实现敏捷项目管理和错误跟踪。

原型和线框有什么区别?

  •  原型是高保真度的,并且比低保真度的线框需要更多的时间来构建。
  •  线框主要用于从高处代表产品的概念。 原型是成品将如何运作的表示。
  •  线框在使用占位符的同时专注于一般结构。 实际设计将用于原型。
  • 线框图是一种赢得利益相关者同意的方法。 您可以测试用户体验并收集用户对原型的参与反馈。

结论

向其他人解释您的网站概念的第一步是创建线框。 它提供了一个其他人可以感知和理解的基本框架。 模型通过显示产品的预期外观使事情更进一步。 在批准设计线框和模型后,可以制作原型。

开发人员使用线框来了解技术规范,并确定特定功能可能需要编程和编码的区域。 开发人员可以在创建情节提要时使用多个线框来决定用户交互应该或可以如何协同工作。 除了帮助开发人员发现潜在的问题区域之外,使用线框制作故事板还可以让他们了解数据应该如何处理

  1. 如何开始您自己的网页设计业务
  2. 网络营销:示例和最佳策略
  3. 线框工具:11 年 2023 种以上适用于网站和移动应用程序的最佳线框工具

参考资料

发表评论

您的电邮地址不会被公开。 必填带 *

你也许也喜欢