草庐IT

UX 设计过程中的线框

哈哈哈哈04 2023-11-04 原文

最好的设计过程不是线性的。它采用迭代方法,设计师在早期阶段参与产品开发,并可以快速共享、测试和验证想法。

当您进行了用户研究并掌握了有关用户目标和动机的足够数据时,您可以从定义主要交互、构建内容和概述导航的低保真线框图开始。一旦您完成了一些初步测试,下一步就是为您的线框添加保真度、美感和交互功能。

下一轮测试可能包括可点击的高保真原型。它们可以帮助您的用户和利益相关者更生动地了解最终产品。测试的最后阶段可能会使用 HTML、CSS 和 JavaScript 对原型进行,通常只意味着最微小的最终改进。

每个产品都是独一无二的,您选择的线框图顺序应该取决于项目。



交互设计的线框图

交互设计(IxD)是指设计交互式数字产品和服务的实践,重点是改善用户与产品之间的交互体验。

通常,IxD 依赖于 5 个维度:文字、视觉(包括图标、排版、图像等)、物理对象(如计算机、鼠标、触摸板等)、时间(与动画、视频和声音有关)和行为。

不过,在线框图阶段,交互设计师并不专注于描绘图形元素。相反,他们试图了解用户需求并定义交互以满足这些需求。

可用性建议在处理交互时考虑以下问题,例如:

• 用户可以发出哪些命令来与界面交互?

• 您提供哪些信息来让用户在执行操作之前知道会发生什么?

• 是否有限制措施来帮助防止错误?

• 信息是否一次被分成几项?



用于信息设计的线框图

信息设计是一种努力以最有效的方式表示内容的实践。该学科与通信设计、数据可视化和信息架构密切相关并重叠。

如果你环顾四周,你会发现我们被信息所包围。但是,如果呈现不佳,则很难消化,用户会为您的产品而苦恼。

线框图帮助信息设计师为用户理解数据。使用线框,您可以:

• 计划内容策略

• 每页的校对和审查副本

• 组织和分类信息

• 规划每个独特页面的布局

• 与客户和用户一起测试组织和布局



导航设计的线框图

导航设计是负责在页面上组织信息的学科,因此用户可以轻松地浏览网站或应用程序并找到他们需要的信息。简而言之,导航帮助用户以最不令人沮丧的方式从 A 点到达 B 点。

使用线框,设计师可以决定以下事项:

• 主要导航链接的逻辑和一致的位置

• 辅助导航元素的放置,例如子菜单、面包屑和搜索

• 导航元素的预期行为

使用线框,设计人员可以在页面之间建立一致性。相同的导航元素应位于相同的位置。例如,大多数用户希望徽标位于页眉中或搜索位于页面的右上角。这意味着徽标和搜索按钮应位于每个页面上的这些位置。

选项卡、菜单、手风琴、面包屑、按钮和其他导航元素应该按照用户期望的方式运行。如果用户点击一个菜单,他们会假设看到选项列表并且不希望被重定向到另一个页面。否则,他们会遇到摩擦并可能会放弃该网站。



UI设计的线框图

用户界面设计 (UI) 是一门多方面的学科,专注于为计算机、家用电器、移动设备和其他电子设备等机器和软件构建用户界面,提供出色的可用性,并在美学上取悦用户。

我们可以将 UI 设计分为 4 层:

• 控件(链接、按钮、标题、正文、图标等)

• 模式 — 控件组(标题、图像网格、搜索功能等)

• 设计原则(对比、层次、接近、对齐等)

• 模板(搜索结果、类别页面、结帐页面等)

线框显示未来用户界面的主要特性、功能和内容,而无需深入视觉设计。设计师应该只在完善页面结构后才能处理视觉效果。



使用线框制作原型

线框通常先于原型设计阶段,呈现未来产品的总体思路,作为构建更多相关内容的骨架。线框使用简单的块并包含最少的交互性——足以测试想法,而不会将用户的注意力转移到颜色和排版上。

相反,原型的保真度更高,让人联想到几乎完成的产品。因此,它们允许您通过交互和功能进行更有效的用户测试。

最好的方法是迭代过程,其中每次迭代都包含一个新的保真度级别。从低成本线框图开始,测试假设,改进和改进。由于对原型进行更改的成本更高,因此只有在您已经对您的想法进行了几次测试后才能接近它们。



使用线框进行用户测试

线框的最大好处之一是它们的实用性。你所需要的只是最低限度的——一支笔和一张纸——使用黑白框和虚拟文本来记下一个布局,以便在用户身上测试你的想法。收到第一个反馈后,完善、改进您的线框,然后再次测试!或者,您可以使用 Balsamiq 等简单的线框图工具将草图转换为数码相框。

对于不想在没有事先测试的情况下将时间浪费在经过深思熟虑的设计上的团队来说,线框是一种首选工具。

您可以使用线框进行什么类型的用户测试?

• 游击测试(用户测试)

• 实验室可用性测试

• 采访

• 观察

• 调查



用于开发的线框

在数字产品的开发过程中,设计师和开发人员尽早开始协作至关重要。程序员应该在定义想法的早期阶段参与讨论,而不是完善高保真设计并等待客户的签字。

基本线框通常足以让开发人员评估技术风险并防止包含可能需要很长时间才能实现的功能。密切协作加快了原型设计、测试和细化线框的速度。此外,当成品与他们的预期设计模糊相似时,它消除了设计师的挫败感。



以上内容为转载

有关UX 设计过程中的线框的更多相关文章

  1. ruby-on-rails - Rails - 子类化模型的设计模式是什么? - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值,我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式?如果方法中没有大的if-else语句,这是如何干净利落地完成的? 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.co

  2. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4,一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时,用户会更新。但是当我添加例如字段:name时,它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗?我也搜索过这个地方,找到了许多不同的解决方案,但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数,您可以在ApplicationController中使用beforefilter,因为Rails4将参数

  3. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  5. ruby-on-rails - 设计注册确认 - 2

    我在我的项目中有一个用户和一个管理员角色。我使用Devise创建了身份验证。在我的管理员角色中,我没有任何确认。在我的用户模型中,我有以下内容:devise:database_authenticatable,:confirmable,:recoverable,:rememberable,:trackable,:validatable,:timeoutable,:registerable#Setupaccessible(orprotected)attributesforyourmodelattr_accessible:email,:username,:prename,:surname,:

  6. ruby-on-rails - 设计通过 reset_password_token 获取用户 - 2

    我正在尝试创建密码规则来设计可恢复的密码更改。我通过passwords_controller.rb做了一个父类(superclass),但我需要在应用规则之前检查用户角色,但我所拥有的只是reset_password_token。 最佳答案 假设您的模型是用户:User.with_reset_password_token(your_token_here)Source 关于ruby-on-rails-设计通过reset_password_token获取用户,我们在StackOverflow

  7. ruby-on-rails - Rails 5,公寓和设计 : sign in with subdomains are not working - 2

    我已经使用Apartment设置了一个Rails5应用程序(1.2.0)和Devise(4.2.0)。由于某些DDNS问题,应用只能在app.myapp.com下访问(请注意子域app)。myapp.com重定向到app.myapp.com。我的用例是每个注册该应用的用户(租户)都应该通过他们的子域(例如tenant.myapp.com)访问他们的特定数据。用户不应限定在其子域内。基本上应该可以从任何子域登录。重定向到租户的正确子域由ApplicationController处理。根据Devise标准,登录页面位于app.myapp.com/users/sign_in。这就是问题开始的

  8. ruby-on-rails - 设计中的 ArgumentError::RegistrationsController#new 错误的参数数量(2 代表 0..1) - 2

    我在关注RyanbatesRailsCast的devise和omniauth(第235集-devise-and-omniauth-revised)。当我尝试使用Twitter登录时,标题中不断出现错误。defself.new_with_session(params,session)ifsession["devise.user_attributes"]new(session["devise.user_attributes"],without_protection:true)do|user|user.attributes=paramsuser.valid?end完整跟踪:C:/Ruby20

  9. ruby - Ruby 中的 block 和过程 - 2

    我已经开始学习Ruby,我已经阅读了一些教程,甚至还买了一本书(“ProgrammingRuby1.9-ThePragmaticProgrammers'Guide”),我遇到了一些以前从未见过的新东西使用我知道的任何其他语言(我是一名PHP网络开发人员)。block和过程。我想我明白它们是什么,但我不明白的是为什么它们如此伟大,以及我应该在何时何地使用它们。我到处都看到他们说block和过程是Ruby中的一个很棒的特性,但我不理解它们。这里有人能给像我这样的Ruby新手一些解释吗? 最佳答案 block有很多好处。电梯演讲:bloc

  10. ruby-on-rails - 使用用户或管理员模型和 Basecamp 样式子域设计登录 - 2

    我为Devise用户和管理员提供了不同的模型。我也在使用Basecamp风格的子域。除了我需要能够以用户或管理员身份进行身份验证的一些Controller和操作外,一切都运行良好。目前我有authenticate_user!在我的application_controller.rb中设置,对于那些只有管理员才能访问的Controller和操作,我使用skip_before_filter跳过它。不幸的是,我不能简单地指定每个Controller的身份验证要求,因为我仍然需要一些Controller和操作才能被用户或管理员访问。我尝试了一些方法都无济于事。看来,如果我移动authentica

随机推荐