在用户体验设计(_UX设计),_wireframing_是UX设计者最根本的步骤之一. 电线框架就像房屋的蓝图, 以及一个有效的线框显示元素在进入任何详细设计工作之前会去的地方,
在你完成用户研究后, 你会发现电线烧烤是UX设计过程最早的阶段之一, 建立有效的线框并节省时间、减少错误, 不只是你,亲爱的设计师, 还有你设计团队、开发者和其他利益相关者,
以及让团队成员加入进来, 以获得方便用户的数字体验。 它们具有成本效益,注重功能性,并且可以清晰清晰地完成真正有效的设计。
显示隐藏视频记录
一、导 言 转写装入...
页:1 □ 电线的基本要素
在线框中,你的目标是让一个网站或移动应用程序的工作流程尽可能的直观表现,但是——而不是高精细地制作一个高纯度的原型——你想要说明页面的结构、布局和功能,这样你就能帮助规划用户体验,而不要有颜色、图形或内容妨碍,并且引起分心。 制作电线框的关键在于以逻辑方式整理内容,
线框的要素
互动设计基金会,CC BY-SA 4.0
整体内容细分为元素,首先上架的是带有品牌特征的logo,通常坐在一个页面的顶角. 与用户建立信任至关重要。 下一个 ** 导航 是帮助用户探索网站或应用程序中不同部分(通常作为菜单栏或侧边栏出现),它引导用户进入主要部分或功能,从而可以绕过你摆在他们面前的设计. 如果用户拥有麦克功能, 就能打入或发言, 如果计划要用内容繁忙的网站, 就能拥有搜索区域。
说到打字,线框中的文字块是用于内容放置的,即头条、段落或圆点等文字内容。 ** 按钮当然是促使用户采取行动的动因,例如 " 投降 " 、 " 阅读更多 " 或 " 买现在 " ——不管网站或应用程序要求什么——这些按钮对于用户发出行动呼吁至关重要。
图片占位者是您要展示视觉的区域, 影片或动画等多媒体内容将会到来。
在创建这些超级工具帮助UX设计过程中, 对于简单,你保持直截了当并注重结构和功能,而用户中心则是指你如何优先安排用户的需求和用户行程. ** 光线燃烧 意味着每个元素都应该有明确的目的——另一个重要的东西是正确和需要相当程度的思考——而 反馈循环 意味着你不断收集反馈,并不停地运动来塑造光线。 最后,但并非最不重要的是一致性,因此,你始终保持统一的结构和设计语言。
• 不同类型的线框
1. 低可靠性线框
低可靠性的线框——或lo-fi的线框——是你们创造的第一个线框,它们提供了设计的基本视觉。 这里的关键是“ 基本 ” , 你并不想看到大小、 网格或像素的精确度, 因为目标不是要分散注意力, 而是要帮助寻找简单的图像、 块形状和占位符文本 。
举例来说,如果你,亲爱的设计师, 和利益相关者和客户在一间房间里, 想要在纸面上勾画一个应用布局, 这些线框不仅可以缓和讨论, 你用笔画出一些想法, 并且随着很多产品想法的到来, 低纤维的钢丝架可以帮助你一无所获;
2. 中信线框
中性线框是三种类型中最普遍的。 也提供更清晰的布局,
但关键在于组件的精确度更高, 特征也更突出。 例如,您可以使用不同的文本权重来帮助区分标题和正文。 代替颜色,您使用不同的灰色阴影来表示元素的重要性. 中纤维线织造适用于早期产品阶段,但您使用米罗或菲格玛等数字工具来制作这类线织造.
3⁄4 ̄ ̧漯B 高真线框
高纯度的线框(Hi-fi 线框)是它们的名称,它们很详细,并给出了像素特有的布局视图。 而非占位符文本(“lorem exitum”)和符号, 如此复杂的细节使得这些线框能够很好地探索和记录复杂的想法。
以详细的菜单系统或动态地图为例,这是设计者为设计周期的后期预留高密线框的地方,通过这些线框,他们精炼和最后确定设计概念,从而将“最佳”保存到这一意义上的最后。
何时使用线框?
一、导 言 ** 探讨最初的想法: 在一个项目开始时,线框会帮助设计师和设计团队将粗糙的想法直观化,并给抽象的概念带来生命.
2. 国家 ** 收集有意义的反馈: 在你进入设计的细节之前, 线框可以帮助你 获得重要的初始反馈, 看看你是否走在正确的轨道上。 利益攸关方、设计团队成员、潜在用户可以提供宝贵的见解,
3个 ** 计划功能: 线框映射您要放置功能元素的地图, 如按钮或交互特性, 它帮助您理解如何为可用性创建交互设计,
显示隐藏视频记录
一、导 言 转写装入...
4个 5. ** 结构内容:线框帮助你规划内容从早期就会出现的地方,例如,这些线框使文字、图像或多媒体更容易定位,以免你不知道以后将这些内容放在哪里。
6个 ** 客户旅行绘图: 线框是设计用户旅行的有效工具, 也是设计者设想用户如何浏览网站或应用,
7个 ** 通用性测试: 在你走近最后设计之前, 甚至是高性能原型(原型更多涉及设计交付品, 比如说, 线框显示有按钮, 原型显示按钮作为动作的作用) —— 线框可以做一个美妙的测试,
□ □ □ □ 如何选择右线窗体工具
数字线面设计的好处
精确度 数字工具提供了精确的测量数据, 所以你可以确定元素与预期设计一致,
作者兼人机交互(HCI)专家,
显示隐藏视频记录
一、导 言 转写装入...
页:1 数字电线烤制的另一个巨大好处是它们为您提供了效率,因为您可以通过复制、粘贴和模板等数字和特性来加快电线烤制过程,从而节省时间和潜在的头痛。 在节省时间方面, 容易分享的好处是, 你可以用连线共享数字线框,
分享的另一点是分享项目的工作,因此更好的合作 伴随着数字电线的烧烤——尤其是因为许多数字工具已经具备了内在的协作功能,因此团队可以实时地审查,评论,并一起运动.
随着这些高效的工作进入一个项目,你和你的团队总是会想重新检查你做过的不同版本, 也就是版本控制 出现的地方, 因为数字线燃能帮助你追踪变化—— 大部分工具都提供版本历史, 让设计师可以比较版本或回到旧版本。
原型和线框之间的区别早前就出现了,但让我们重新审视一下其中的一个特征——互动——以及一些工具可以使可点击的线框被启用,而这个方便的功能通过提供动态的预览来模拟用户的互动. ** 可伸缩性 是用线框进行数字化工作的另一个大好处,
另一种多汁的加法是整合的因素——许多工具与其他设计软件融合,这样就简化了从电线烧烤到高纯度设计的过渡. ** 资产管理 是又一个好处,而且很容易组织和储存资产,尤其是因为图标、组件和UI元素仍在你的指尖。
最后,但并非最不重要的一点是, 专业介绍 的推波助澜,随着数字线框的打磨,如果你把它们介绍给利益相关者或客户,就会给专业印象。
□ □ □ □ 线面软件工具
线条设计工具帮助您绘制用户体验、布局和整体流量图, 网络烧烤软件有助于你简化设计流程, (编写本报告时价格正确。 )
图片, 公平使用
Figma是一个顶级的,以云为基础的设计工具,在独奏设计师和团队中都是最喜爱的. 甚至免费用户也受益于其综合功能集。 FigJam是一个在线的白板,它与Figma融合,因此可以用于集思广益和用户流映射.
也可以在同一个平台内转换成电线烤制和原型, 此外,平台在团队合作与实时编辑和内部讨论方面表现优异。 开发者可以提取CSS用于平稳过渡到生产.
** 最佳特征* 页:1
* 慷慨的自由计划
* 在线白板同伴(FigJam)
* 无缝团队合作
* 基于矢量的笔工具
* 综合小组对话
** 定价
免费( 3个项目) 。 专业计划,12美元/用户/月(每年计费)。
雾花, 公平使用
MockFlow是一个实时协作的在线线框工具,其清洁,直观的界面使得线条的火烧简单化,拥有大量的UI包. 该平台在左侧设置了设计控制器——使设计空间最大化——初学者发现由于精确地放置了各种元素,它很容易使用.
这个平台提供了独特的功能——类似于组织功能——它允许您为每个项目创建单独的空间,再加上您也可以以各种格式输出,包括Word和PowerPoint.
随着本土Slack和微软Teams的集成,团队通信会保持与Mockflow的精简,AI图像和文本生成器等奖金功能是整洁的附加,可以提升其能力.
** 最佳特征 页:1
* 直观界面
* 多个项目管理
* 各种设计要素
* Slack和微软团队集成
* AI 图像和文本生成器
** 定价
免费 (1 UI 项目). 每月14美元/用户的电费计划。 产品设计计划,每月19美元/用户。
3⁄4 ̄ ̧漯B 路西德图
路西德图, 公平使用
Lucidchart是一个可以通过网页浏览器访问的图解工具,它赋予用户绘制、修改和协同分发图解的能力。 这个平台对于增强组织结构、系统和工作流程来说是理想的,而一个方便用户的界面使得它成为一个首选,如果你想要的是视觉协作工具的话。
该平台的优势在于如何通过实时合作、内部聊天和广泛的整合能力促进团队合作。 Lucidchart与流行工具——包括Microsoft Office和Google应用软件——同步,并与它的虚拟白板产品Lucidspark连接.
** 最佳特征 页:1
页:1 宽线框模板库
* 拖放功能
* 实时合作
* 应用聊天
* 自动同步和保存
* 与微软、Google、Atlassian和更多
** 定价
Freemium 版本 (英语). 付款计划以每月7.95美元开始。
米罗, 公平使用
米罗是一个受欢迎且动态的AI驱动的虚拟白板平台,它促进团队实时协作,具有粘贴笔记,线框库,思维映射工具等功能.
由于其多样性的集成和模板, Miro的精选就是它如何为集思广益和设计提供一个整体的解决方案. 免费版本相当慷慨,
** 最佳特征* 页:1
* 在白板上实时合作
* 广泛的线框库
* 心智透视工具
* 各种内置模板
* 无缝集成选项(Slack, Dropbox等)
* 用于集思广益的现实黏糊糊的笔记
** 定价
免费