栏目导航

最新资讯

联系我们

军事快讯

当前位置:澳门创业创新网 > 军事快讯 >

怎样画线框图才有意义

2020-07-14 17:40

原标题:怎样画线框图才有意义

编辑导语:吾们常轻忽身边习以为常的事物,觉得异国必要为一些望似浅易又无关重要的东西铺张时间——例如线框图。固然没必要凡事都寻根问底,但迎面对复杂题目时,踏扎实实回归基本面能够才是根本解法。本文深入介绍程序开发界面设计中,最浅易也最容易被轻忽的线框图设计。

编辑导语:吾们常轻忽身边习以为常的事物,觉得异国必要为一些望似浅易又无关重要的东西铺张时间——例如线框图。固然没必要凡事都寻根问底,但迎面对复杂题目时,踏扎实实回归基本面能够才是根本解法。本文深入介绍程序开发界面设计中,最浅易也最容易被轻忽的线框图设计。

接下来用以下几个点进走表明:

CB Insights 做过一份调研通知《创业公司战败的20大因为》,内里说17%的创业公司认为他们战败的因为在于用户体验不足友谊。

毕竟设计出一个对用户友谊的界面并不是一件容易事,稀奇是对于多维度、有关交错和要素多多的复杂产品来说。

要设计这类产品时,吾们答该自上而下,从顶层理念到详细细节的手段,而线框图是最好的工具。

睁开全文

一、什么是线框图?

线框图(Wireframe):它是展现Web或者App框架的视觉指南。

绘制线框图的过程中,吾们必要考虑用户需乞降行使流程,并在响答的页面上安放必要的内容和功能。

柔件开发的初期阶段,产品在进入视觉设计和内容填充阶段之前,吾们能够用线框图来搭建页面的基本框架和组织。

乍一望很浅易,比较线框图已是平时做事的基本环节,交互设计师也不稀奇。但这就是本文起头挑到的题目,吾们往往对望似浅易的事情匮乏偏重。

线框图的最大意义,是帮吾们定义产品或者服务的现在标。

能够说,线框图设计的重要现在标,就是向团队、领导、组相符友人展现App等行使程序将拥有哪些页面和组件,以及这些元素将如何相互作用。

从这个层面来说,吾们能够晓畅线框图对于开发过程和首先产品表现的影响有多大。

二、线框图的常见误区

为了完善义务而画线框图 直接跳过线框图阶段 做完了视觉再最先准备线框图 不理解为什么要用线框图

线框图答该先于视觉设计阶段,而不是逆过来。否则就像在敲完代码以后,再决定选择你App的技术栈相通。

好的线框图是设计质量的保证。吾们越晓畅其行使现在标,利润也就越大。因此吾们才必要更深入探讨行使线框图的因为及其价值所在。

在现实中,一些欠缺产品设计知识的公司能够会直接跳过线框图阶段,固然这能够裁减成本,但也会产生风险。

遇到这栽情况,设计师能够尝试主动注释为什么要画线框图、它对吾们的产品有什么益处、怎样撙节开发成本?

三、为什么要画线框图? 1. 协助团队确认做事内容

线框图批准设计师用可视化的手段迅速创建产品原型,并向团队展现那里必要修订,界面有哪些,上面有什么元素和控件,它们是怎么交互的。

同时,涉猎可视化的线框图要比涉猎表明书快得多,也能缩短预期和首先制品之间的迥异。

2. 让一切团队成员都能参与产品设计

吾们肯定遇到过如许的情况,做出了一流的设计却苦于开发实现的节制。行使线框图能让吾们拉上开发人员在早期阶段一首商议设计,使他们能够在你进走视觉设计之前挑供逆馈和提出,如许能够添快设计流程从而避免铺张时间和金钱。

3. 为客户挑供原型

从客户和上级领导那里得到迅速逆馈是设计中一个重要的片面。吾们都经历过来自他们的改稿请求,这是平常的。有了线框图,吾们能够让这个过程更有效果,而不是在开发原型上消耗更多的时间精力,同时它也能让设计师不会在改稿上铺张额外的时间。

4. 能实走用户测试

《精好创业》(Lean Startup)的作者Eric Ries曾说过,越早进走用户测试越好——异国人期待在推出一个行使程序以后才发现用户不晓畅如何行使它。线框图能协助设计师从湮没用户那获得有价值的逆馈,而不必花时间往开发复杂的可交互原型。

但UI/UX设计师们行使线框图并意外味着用得对用得好。

因此下面挑供一些实践中的最好做法以供参考。

四、怎样画线框图?

为了发挥最大效好,为后续做事流程挑供基础,行使线框图答该按照以下几个浅易原则:

1. 缩短颜色的行使

倘若你在线框图中行使了雄厚的配色,你答该挑醒本身线框图的现在标是什么(展现产品包含什么元素,以及他们如何相互作用),并思考有余的颜色是否有助于实现这个现在标。

在某些情况下,配色实在会首作用。但清淡线框图里的颜色能够会松散读者的着重力,使得后续调整变得更难得。

此外,并非一切客户对于用户体验工具都有所认识,这时候也能够必要行使彩色的线框图。

除了暗白两色,你也能够行使其他的颜色。未必候行使颜色特出表现特定的组件是相符理的,例如能够用红色外示舛讹状态,用蓝色外示注解等。

2. 行使浅易的组件设计

当你在线框图上增补组件时,选择基础的设计即可,不必要安放过于详细的组件。这些组件对团队来说,答该是易识别的、一现在了然的。消耗大量时间和精力往设计详细的线框图组件纷歧定有效。

3. 保持相反性

相通的组件在一切线框图上望首来答该是相通且相反的。倘若相通的组件望首来纷歧样,开发人员会质疑其是否相反,影响他们的判定,甚至要为差别的设计增补额外的开发成本。在制作线框图的时候,请记住:保持相反,军事快讯缩短紊乱。

4. 行使实在内容

吾们未必候会望到UI/UX设计师不在线框图上补有余在内容,而是行使“loremipsum”一类的偶然义文字。很稀奇设计师认识到这是偏差的。你能够会说,内容在设计阶段逆正不走用。实在,吾们提出你行使内容草稿就能够了。

在实在情境中,内容会影响你的设计,行使草稿则能帮你做出更好的设计。倘若你用的是偶然义文字,界面就能够会丧失与实在环境的相反性和集体性,后续能够必要对用户界面进走大量调整,甚至是创造一个无法落地的设计并推翻重做。总之,实在的内容能够为线框图升迁价值,串联上下文,挑供更有说服力的注释。

5. 行使注解

未必候能够会展现一些设计方案无法用视觉来表明的情况,因此上级、客户或开发人员能够会对它们产生疑问。例如,某些控件背后的逻辑是什么。在这栽情况下,你能够挑供必定的注解来注释其背后的逻辑。一来团队能理解,二来你不必要再注释。

6. 矮保真到高保真

异国厉格规定说你答该行使矮保真线框图依旧高保真线框图,这取决于项现在本身。

以是在特定情况下,当你必要为线框图增补更多的细节时,不必要纠结。

但是正如Eric Ries所说,倘若这些细节不及带来价值,你就不要做有余的“无辛勤”。先从基础最先做首,再按照必要一连完善和增补细节。

例如:当你必要开发者关注到一些个性化的解决方案上来时,能够增补更多的细节,并在线框图中表明晓畅。

7. 将线框图扩展到原型

行为设计师,吾们必要和差别的产品打交道,有些产品交互浅易而清淡,有些则相等复杂。未必候线框图不及以表明其复杂性和典型性,你就能够将线框图升级扩展为可交互原型,而不是写冗长的笔记并消耗大量时间来注释它。

现在市面上吾们有一系列浅易而壮大的工具,比如Figma、Invision、AdobeXD、 UXPin、 Axure、Moqups等。只必要进走适度的评估就能选择最正当的工具来设计线框图,开发浅易的原型。

用来做线框图的工具重要有以下两个现在标与特性:

1. 浅易性:门槛矮,对于刚入走UI/UX的新秀和匮乏行使复杂柔件经验的人来说,它们再完善不过。

2. 组相符性:强调组相符性的工具清淡都包含雄厚的团队组相符功能。组相符是当代柔件开发的支撑,因此最好的线框图工具不光挑供大量的功能,还批准参与设计过程的一切团队成员之间能进走高效浅易的组相符以下是绘制线框图的主流工具:

Figma:一款基于云组相符的工具,功能壮大,声援 Windows 和 macOS 的Web端和桌面端。Figma为构建线框图、原型、UI绘制等挑供了很多壮大的功能。 Sketch:在UI/UX设计师中行使普及,还可装配插件来实现多栽功能。与竞品差别,Sketch只能在macOS上行使,还必要用户倚赖第三方来解决组相符的题目。

有很多工具都能用来设计线框图,吾们提出你不该该只是按照产品的功能和特性来进走选择。相逆,吾们提出你多尝试和追求,并决定哪个工具才是最正当你的。

为了展现当代设计工具的壮大力量,这边吾将分享幼我的经历来展现吾和吾的团队如何行使上述工具来完善一个完善有效的线框图设计流程。

五、和团队一首画线框图(案例)

吾做事的公司正在开发复杂的金融科技数字产品。除了设计团队,还有一个专科的营业分析师团队。他们准备了需求并创建了矮保真度的线框图,然后传递给吾们的设计团队。

线框图设计中的团队有关

1. 选择工具

吾们必要为营业需求分析师(BA)和设计团队选择一个一体化的工具。由于大无数商业分析师的设计技能都相等矮,吾们期待找到一栽既适用于他们又适用于设计师的壮大工具。

此外,易于组相符是吾们团队的重要义务。基于这些标准,吾们选择了Figma。

2. 创建组件库

为了简化产品设计过程,吾们创建了BA团队能够行使的自定义组件库。这使吾们能够添快线框图的绘制,由于营业分析人员能够迅速地行使现成的组件,而不是本身绘制。

3. 训练团队

为了展现如何行使Figma和组件库,吾们为BA团队办了一个幼型的做事坊。在做事坊中吾们还拓展了一些额外的关于原型设计的知识。

首先

在案例中,即使团队成员分布在乌克兰、澳大利亚和菲律宾,Figma 也被表明在线框图和组相符方面是高效的。吾们现在行使 Figma 行为疏导渠道的原形表明,议决邮件或新闻在线框图上进走组相符更为方便。

六、总结

很多设计师最先时不太偏重线框图,无法议决线框图来为项现在挑供有效协助,进而导致团队也感受不到线框图的意义。期待涉猎完此文的你,不论是否是设计师,都能对线框图有更多的理解。尤其是在如许一个设计工具越来越便捷的时代,期待行家能够借助线框图,让本身产品的用户体验以及团队的做事效果更进一步。

原文作者:Anton Suprunenko

原文地址:ttps://medium.muz.li/how-to-succeed-in-wireframe-design-2ab3cd5c4bc9

译者:Jonathan,公多号:体验进阶。

本文由 @Z Yuhan 翻译发布于人人都是产品经理,未经作者允许,不准转载。

题图来自Unsplash,基于CC0制定



Powered by 澳门创业创新网 @2018 RSS地图 html地图

Copyright 365建站 © 2013-2018 版权所有