2021-03-30 11:05

线框设计:设计过程的无名英雄?

       在UI / UX设计世界中,线框就像蓝图。无论是网站还是移动应用程序,UX线框设计都是最必要的步骤。

       无论您是新企业家还是经验丰富的商人,线框都是您听说过的。这是产品进行完整设计和开发之前制作的基本草图。

       但这就是线框图的全部吗?

       在实现客户的设计梦想时,产品设计线框是我们迈出的第一步。我们可以从经验中看出,线框图不仅仅是一个基本的草图。那还有什么呢?让我们探索吧!

       1.什么是线框设计?

       静态骨架基础(也称为线框)是任何创造性设计操作的基础。平台UI的准系统版本可帮助设计人员和开发人员了解一些关键因素。这些因素包括但不限于核心功能,功能,基本导航流程以及该构想对最终用户的总体影响。

       普遍认为线框设计过程不是面向细节的,但事实并非如此。当涉及到这一特定过程时,正确的细节是魔鬼所在。这是一个处理整个过程的视觉方面的过程。这就是为什么设计师必须注意用户需求和与旅程有关的信息的原因。
       从一开始就牢记用户,可以帮助我们创建具有影响力的设计。我们熟练的设计师团队使用现代网页设计的这一部分来确定平台的导航流程。这样,我们可以从很早开始检查平台内的用户流。用简单的框和线制成的黑白框架表示设计元素和内容层次结构。这是在开始过程之前获得客户对设计概念的认可的完美方法。

       2.为什么必须进行网络成帧?

       您的业​​务平台的设计过程肯定可以继续进行,而无需进行线框图。那么,为什么几乎每个现代网页设计公司都将其作为必不可少的要素呢?

       这种简单方法有很多好处。这些好处使线框图成为设计成功的重要组成部分。因此,让我们列出一些我们认为在开发之前设计应用线框很重要的原因。

       A.提供坚实的设计基础

       拥有定义明确的材料设计线框为我们的设计师提供了扎实的工作基础。线框蓝图可帮助我们识别平台的核心功能,并设计符合其目的的有影响力的UI。

       B.帮助收集反馈并实施它们

       在启动和分析阶段,我们使用UI / UX设计线框收集有价值的客户意见。这些反馈使我们能够更深入地了解客户的需求,并使我们能够建立更好的平台。

       C.减少进行昂贵的重新设计的机会

       经客户批准的着陆页线框设计可作为创建可长期影响的设计的完美指南。这就是为什么我们使用此步骤来确保客户以后不必进行昂贵的重新设计过程的原因。

       D.从早期开始提高功能效率

 

       软件设计线框可帮助我们绘制导航流程,进而提高平台的整体功能效率。通过这一步骤,我们确保消费者可以轻松地在平台上找到必要的信息。

       3.逐步了解线框的类型

       根据详细信息,我们可以区分三种不同的线框设计:

              ·低保真       
              ·中保真度       
              ·高保真度

       让我们看看其中的每一个包括:

       A.低保真线框

       低保真线框概述了基本界面的外观。这些粗略的草图(主要是用笔和纸做的)有助于开始客户与设计师之间的设计对话。

 


       作为粗略的草图,这种用户体验设计线框缺少图像和颜色元素。低保真框架用于理解和映射界面,以及用户从一页到另一页的流程。它还有助于快速确定多个设计概念。简而言之,低保真线框是所有Web开发公司开始工作的地方。

       B.中保真线框

       中保真线框网页设计的质量更高。这些是没有最终商标元素的界面框架。使用中等保真度框架,客户可以了解最终设计的外观。

使用中等保真度的线框,设计人员可以尝试不同样式的内容层次结构。这些框架使用较深的阴影来强调不同类型的内容。低保真线框的数字化版本有助于在添加设计组件之前完成框架的最终确定。

       C.高保真线框

 

       高保真框架包括前面步骤中传达的所有建议和更改。这是设计网站的最重要步骤之一。这就是为什么高保真框架包含必要的设计和品牌元素,例如图像,字体和颜色的原因。

       高保真线框上内容的类型可能从填充物的内容到相关的内容而有所不同。但是,此框架的字体大小和样式表示将在业务平​​台上显示的实际IA。

 

       必须遵循线框设计过程的三个层次来设计授权设计。缺少一个可能会为下一阶段带来某些问题。因此,在开始开发之前,请确保合作伙伴网页设计机构遵循所有步骤。

       4.如何制作线框:我们遵循的最佳实践

       考虑到所有优点,线框设计恰好是我们流程中最优先考虑的部分之一。内部专家使用线框图来与我们的客户开始讨论,充实设计概念,并在开始开发之前最终确定视觉布局。

       但是,创建用于网站和自定义软件开发目的的线框并不容易。这就是为什么我们在为您的网站创建可视化蓝图时遵循一些最重要的最佳做法。因此,让我们谈谈这些最佳实践以及为什么要实践它们。

       A.Imbibe的清晰度

       线框的主要目的之一是在现代Web设计过程中吸收清晰度。从设置明确的期望值到澄清界面的视觉布局,我们遵循此最佳做法来确保线框图对整个过程的影响。

       这也是我们尝试清除客户和设计团队可能遇到的所有查询的时候。从我们所接受的设计方法到特定的视觉效果,客户正在寻找在此阶段能够回答的所有问题。

       B.使用户充满信心

       我们相信,一个好的设计可以赋予用户权力。这就是为什么我们从线框图方法的一开始就以熟悉的,有意的导航方法开始的原因。

 

       通过实现用户熟悉的用户流程,我们降低了学习曲线。在计划核心页面(例如主页或联系页面)的线框时,我们将内容和按钮放置在熟悉且易于发现的位置,以增强导航功能。这样,在网站开发过程完成之前,我们就开始赋予最终用户权力。

       C.保持简单

       线框是UI的基本版本。这就是为什么我们专注于保持简单。我们不是从一开始就集成太多细节,而是从准系统版本开始。

       我们以完整的纸质原型开始线框设计,该原型会散布非常基本的布局。然后,我们进入足够保真的中等保真线框,以了解基本层次结构和元素的外观。与高保真框架的最后阶段不同,这两个步骤仅专注于视觉元素的放置,仅此而已。

       D.考虑屏幕尺寸

 

       无论是哪种商务平台,屏幕尺寸都是我们必须注意的问题。我们的敏捷Web设计过程从移动优先的方法开始。内部设计团队为所有受支持的设备创建线框,然后考虑内容如何根据​​屏幕缩放。

       E.考虑不同的用户方案

       一个平台可能具有多个用户方案。每个人都以不同的方式体验相同的平台。这就是为什么我们在考虑如何创建线框的同时检查所有可能的用户方案的原因。

       此类用户场景包括但不限于-用户从哪个访问点进入页面,基于人口统计信息用户正在寻找的内容,所使用的设备等。检查这些用户场景有助于我们制定出改进的布局并导航元素。

       F.进行研究

       我们遵循的主要最佳实践之一是基于研究的方法。概述线框并不是一件容易的事,要确保成功,我们需要对平台的核心功能,基本功能以及用户及其痛点有清晰的了解。

       为了对所有这些都有一个清晰的认识,我们从深入研究开始。涵盖所有必要的基础,我们可以在规划布局时整合知识的基本要素。结果:更快的线框设计和批准流程。

       G.使用注释进行清晰的沟通

       线框原型设计是一个有效而具有挑战性的过程。这个阶段的主要挑战是沟通的清晰度。线框内缺乏相关的品牌/视觉元素常常使客户对结果感到困惑。为了解决这个问题,我们在框架内使用了注释。

 


       简短说明提供了功能,用户流程等方面的重要说明。通过引人注目和带有编号的注释,我们旨在从一开始就澄清任何形式的误解。

       H.缓慢增加线框保真度

       线框设计的逐步改进帮助我们一次专注于一件事情。在低保真阶段,我们专注于精心设计平台的基本布局。在保真度中等阶段是我们尝试修复内容层次结构问题的时间。高保真阶段是我们实施品牌元素以了解平台的外观的时候。

       通过逐步改进,可以确保整个过程集中精力,而不是整个过程都集中在整个过程上。每个阶段都有其目的,并且不断增强的功能可确保不会遗漏任何细节。

       5.常见的线框图挑战以及我们如何应对它们!

       即使这个简单的过程也要经过大量的尝试。这是我们在创建线框时遇到的一些最常见的困难,以及我们如何应对这些挑战。

       A.抛光之战的永恒之争。粗略的草图

       第一个挑战涉及对Web开发流程进行更改。

       UI / UX的著名法律规定,我们必须始终将抛光的线框呈现给客户端。但是,经验教给我们了其他东西。我们已经看到,呈现过于抛光的线框会使客户更不愿提出更改建议。也许是因为他们喜欢它的原样,或者是因为他们认为设计已经完成。无论如何,它在设       计的后期阶段都会引起一些严重的问题。

       通过三步式网站线框设计,我们完全绕过了这个问题。这样,客户就不会感到压力太大,无法同意像素完美的框架并自由地提出更改建议。然后,我们使用这些反馈并逐步改进线框,从纸制原型到中型然后再到高保真框架。

       B.哪些页面要线框?

       线框UX设计可能是必不可少的元素。但是同时,重要的是确定必须为哪些页面设计线框。我们无法为网站上的每个页面制作线框。这就是为什么我们首先为最重要的页面制作线框。

       根据客户的需求,我们会优先考虑平台的不同页面/屏幕,并首先为它们制作线框。然后根据这些页面的信息层次结构,继续进行网站的其余部分。

       C.文本占位符及其构成的问题

       文本占位符(例如Lorem ipsum)是一种易于理解屏幕上文本位置的解决方案。但这不是一个长期的解决方案。实际上,在内容空间和线框导航设计方面,使用文本占位符会引起更多问题。

       这就是为什么我们从一开始就在线框图制作过程中加入相关文本的原因。这种做法有助于掌握特定文本所需的空间并进行相应的设计。

       不要跳过线框:它们是您设计梦想的蓝图

       线框是敏捷Web设计过程的重要组成部分。这样,企业家,设计师和开发人员可以一起可视化产品,确定产品的各个方面,并从一开始就进行所需的所有更改。这就是为什么您需要一个UI / UX合作伙伴,而该合作伙伴永远不会跳过设计操作的这一关键步骤。

 

       还有更多关于设计和线框图的问题吗?为什么不让我们知道?我们的专家随时准备回答您的所有问题。