欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 24小时服务热线:400-8793-956
当前位置:南京网站制作公司 > 资讯中心 > 网站知识
遵循的简单步骤:有用的线框
来源:南京网站制作 时间:2022-12-29 11:10:59

什么是线框?

用尽可能少的词来说,线框是在 Web 项目早期创建的快速草图,用于捕获尽可能多的有价值的信息,这些信息可以帮助或进一步发展到项目中。
 
此草图可以让您直观地布局您可能已经拥有的有关 UI 或 UX 的任何初步想法。从简单的布局到用户旅程和动画样式,都可以进行布局和测试。
 
无论是在纸上还是以数字方式创建,该过程都不是为了熟悉绘图,而是关于构建您的项目并确定您想要使用您将收集的用户体验研究构建的交互和路径。
 
为什么选择线框图?
线框图是UX过程中的重要一步,为在哪里发展您的初始想法提供了明确的方向,并为从用户那里收集信息提供了清晰的路径。由于线框通常是徒手完成的,因此鼓励创新和错误。通过开发,这些通过使用与他人的协作和在项目的“发现”阶段收集的数据来逐步淘汰。
 
线框可以有多种样式,具体取决于您需要的输出。低保真线框用于项目的早期阶段,通常只是概述内容的各个部分,如导航、常见元素和图像,而不详细介绍任何交互式元素或成品。
 
高保真线框与此相反。高保真线框发生在“发现”阶段结束时,通常是客户会看到的线框。高保真线框更详细,包括配色方案、图像,如果以数字方式创建,则与交互式原型相结合,以创建可使用应用程序内按钮和导航导航的线框。
 
这些是设计时使用的最常见样式,但也有称为中保真线框的线框和高保真之后的进一步步骤,如果您想进入原型设计并使您的线框具有交互性或可单击性。
 
2022 年的线框图
如上文所述,线框可以通过许多不同的方式创建,最常见的是数字或纸上,可能是纸张、记事本或餐巾纸的一角。
 
对我来说,在设计线框时,我使用三种工具来帮助我为所需的输出创建最佳线框。首先,我在纸上创建线框,以便在会议或与他人讨论我的想法时快速编辑布局,我还使用铅笔进行这些,以便可以轻松擦除并用不同的想法进行更改。这些线框可能更接近用户流或站点地图,因为我们进入了主导航和页面可能导航到的位置。
 
从纸和铅笔继续前进,我们到了Invision Freehand,这个在线线框图工具允许与纸上类似的概念功能,将样式保持在低保真线框图中,这只是使它们数字化并允许来自不同位置的协作。这个专业的线框工具不仅可以用于线框图,还可用于开发您对项目的所有想法,从站点地图功能开始,到可供任何客户使用的完全原型模型结束。
 
接下来是高保真线框图,为此,我们使用Adobe XD。Adobe一直以设计行业中的应用程序而闻名,从Flash和PDF编辑等应用程序开始,到现在托管XD(线框图和原型设计),Dimension(3D建模)和Animate(3D动画)等应用程序。 Adobe XD 于 2016 年向公众发布,功能发布和更新至今。该应用程序允许使用类似于Adobe Illustrator的矢量形状进行高保真线框图以及原型设计,这使其非常适合设计响应式网站,允许图像,图案和文本根据可用的屏幕尺寸放大或缩小。结合高保真和原型设计的过程,使我们能够创建具有交互式元素和可点击导航的完全设计的网站,在进入开发之前为UX测试人员创建一个身临其境的环境。
 
如何创建线框
如果您有想法,创建线框可能很简单。在开始之前,您必须清楚结果和目标是什么。牢记明确的目标将有助于你专注于一个用户流而不是另一个用户流,并意味着始终遵循正确的层次结构。
 
如何创建线框
如果您有想法,创建线框可能很简单。在开始之前,您必须清楚结果和目标是什么。牢记明确的目标将有助于你专注于一个用户流而不是另一个用户流,并意味着始终遵循正确的层次结构。
 
步骤 1:收集数据
首先,了解目标受众及其痛点至关重要,如果没有这些信息,您最终可能会创建无法解决任何特定问题的线框。此数据还会提醒您重要的用户流和对业务很重要的数据映射,并提供影响最终设计的结果。
 
步骤 2:确定用户流
接下来,确定预期的用户流和站点地图将帮助您布局所需的页面和用户旅程,确保包括主要和次要用户流,同时限制可能的错误选项的数量。确定流程也非常适合协调您和您的团队,并提供具体的方向,以确保所有想法都与问题相关。
 
步骤 3:概述功能
在动笔之前的最后一步是确定将包含的功能的结构,这可能是通过客户的需求,或者可以在步骤1中概述为从当前用户/客户收集的数据的一部分。确保您拥有正确的功能集进入线框图始终是关键,并确保一切都经过深思熟虑和包含,这样您就不需要在以后的阶段重新设计任何界面。
 
步骤 4:创建线框
接下来是创建实际的线框布局。如前所述,有两个主要过程可以做到这一点,数字或笔和纸。
 
第 5 步:测试
一旦创建了涉及目标市场的过去用户/客户的线框,就如何进行测试。此步骤旨在收集数据以帮助您优化下一组线框。考虑与用户界面和导航的用户体验相关的问题。他们被卡住了吗?完成主要用户流容易吗?他们是否认识到关键特征?
 
有一些专业的测试工具可以用于此。我们发现最好的是UsabilityHub和Hotjar。
 
重要提示:
线框不需要包含内容块,可以只是内容部分/主题如何过渡的布局。
你不需要成为艺术家来做线框
一开始保持简单,边走边开发
用户流和站点地图是你的朋友
不需要内容策略,使用 Lorem Ipsum 生成器
如果您需要帮助,Adobe 有一些最好的教程和指南
在GlooMaps上创建站点地图允许完全可自定义和可编辑的布局

本文地址:http://www.njanyou.cn/web/6749.html
Tag:
专业服务:南京网站制作,南京网站制作公司,南京网站建设公司
联系电话:025-65016872
上一篇: 数字营销的48个关键绩效指标
下一篇: 如何使用用户生成的内容发展您的业务
最新案例
永银
永银
珠海跨境电商
珠海跨境电商
五颗星商城
五颗星商城
上海万客生鲜超市
上海万客生鲜超市
一九在线商城
一九在线商城
你可能感兴趣
确保网站可访问性的 7 个重要步骤
电子学习中的微交互:通过小设计细节提高用户参与度
iGaming的设计趋势:平衡美学和功能
如何在 2024 年重新设计您的电子商务业务网站?
如何在 2024 年为您的网站创建徽标
无缝过渡:在设计驱动型开发中表现出色
社交媒体受欢迎程度背后的心理学
超越点击和点赞:释放数字营销的力量
最后更新
超越点击和点赞:释放数字营销的力量 社交媒体受欢迎程度背后的心理学 无缝过渡:在设计驱动型开发中表现出色 如何在 2024 年为您的网站创建徽标 如何在 2024 年重新设计您的电子商务业务网站? iGaming的设计趋势:平衡美学和功能 电子学习中的微交互:通过小设计细节提高用户参与度 确保网站可访问性的 7 个重要步骤
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例