网站设计怎样画线框图才有意义
网站建设公司常轻忽身边习以为常的事物,网站建设公司觉得没有必要为一些看似简单又可有可无的东西浪费时间——例如线框图。虽然没必要凡事都寻根问底,但当面对复杂问题时,脚踏实地回归基本面也许才是根本解法。
本文章深入介绍程序开发界面设计中,网站建设最简单也最容易被轻忽的线框图设计:
网站建设什么是线框图?
网站建设常见误区
网站建设为什么要画线框图?
网站建设怎样画线框图?
网站建设组织团队一起画线框图
CB Insights 做过一份调研报告《创业公司失败的20大原因》,里面说17%的创业公司认为他们失败的原因在于用户体验不够友好。毕竟设计出一个对用户友好的界面并不是一件容易事,特别是对于多维度、关系交错和要素众多的复杂产品来说。要设计这类产品时,我们应该自上而下,从顶层理念到具体细节的方法,而线框图是最好的工具。
网站建设线框图(Wireframe)——它是展示Web或者App框架的视觉指南。
绘制线框图的过程中,我们需要考虑用户需求和使用流程,并在相应的页面上布置需要的内容和功能。软件开发的初期阶段,产品在进入视觉设计和内容填充阶段之前,我们可以用线框图来搭建页面的基本框架和结构。
乍一看很简单,比较线框图已是日常工作的基本环节,交互设计师也不少见。但这就是本文开头提到的问题,我们往往对看似简单的事情缺乏重视。线框图的最大意义,是帮我们定义产品或者服务的目标。
网站建设可以说,线框图设计的主要目的,就是向团队、领导、合作伙伴展示App等应用程序将拥有哪些页面和组件,以及这些元素将如何相互作用。
从这个层面来说,我们可以知道线框图对于开发过程和最终产品呈现的影响有多大。
网站建设关于线框图的常见误区
ui设计公司为了完成任务而画线框图
ui设计公司直接跳过线框图阶段
ui设计公司做完了视觉再开始准备线框图
ui设计公司不理解为什么要用线框图
线框图应该先于视觉设计阶段,而不是反过来。否则就像在敲完代码以后,再决定选择你App的技术栈一样。
好的线框图是设计质量的保证。我们越了解其使用目的,收益也就越大。因此我们才需要更深入探讨使用线框图的原因及其价值所在。
在现实中,一些缺少产品设计知识的公司可能会直接跳过线框图阶段,虽然这可以削减成本,但也会产生风险。遇到这种情况,设计师可以尝试主动解释为什么要画线框图,它对我们的产品有什么好处、怎样节省开发成本…
为什么要画线框图?
1. 网站建设帮助团队确认工作内容
线框图允许设计师用可视化的方式快速创建产品原型,北京网站建设公司并向团队展示哪里需要修订,界面有哪些,上面有什么元素和控件,它们是怎么交互的。同时,浏览可视化的线框图要比阅读说明书快得多,也能减少预期和最终成品之间的差异。
2. 让所有团队成员都能参与产品设计
我们肯定遇到过这样的情况,北京网站建设公司做出了一流的设计却苦于开发实现的限制。高端网站建设公司使用线框图能让我们拉上开发人员在早期阶段一起讨论设计,使他们能够在你进行视觉设计之前提供反馈和建议,这样能够加快设计流程从而避免浪费时间和金钱。
3. 网站建设为客户提供原型
从客户和上级领导那里得到快速反馈是设计中一个重要的部分。高端网站建设公司我们都经历过来自他们的改稿要求,这是正常的。有了线框图,我们可以让这个过程更有效率,而不是在开发原型上消耗更多的时间精力,北京网站建设公司同时它也能让设计师不会在改稿上浪费额外的时间。
4. 网站建设能执行用户测试
《精益创业》(Lean Startup)的作者Eric Ries曾说过,高端网站建设公司越早进行用户测试越好——没有人希望在推出一个应用程序以后才发现用户不知道如何使用它。线框图能帮助设计师从潜在用户那获得有价值的反馈,而不用花时间去开发复杂的可交互原型。
但UI/UX设计师们使用线框图并不意味着用得对用得好。高端网站建设公司因此下面提供一些实践中的最佳做法以供参考。
怎样画线框图?
为了发挥最大效益,为后续工作流程提供基础,使用线框图应该遵循以下几个简单原则:
1. 网站建设减少颜色的使用
如果你在线框图中使用了丰富的配色,你应该提醒自己线框图的目标是什么(展示产品包含什么元素,网站设计以及他们如何相互作用),并思考多余的颜色是否有助于实现这个目标。
在某些情况下,配色确实会起作用。但一般线框图里的颜色可能会分散读者的注意力,网站设计使得后续调整变得更困难。此外,并非所有客户对于用户体验工具都有所认识,这时候也可能需要使用彩色的线框图。
相似的组件在所有线框图上看起来应该是相同且一致的。如果相同的组件看起来不一样,网站设计开发人员会质疑其是否一致,影响他们的判断,甚至要为不同的设计增加额外的开发成本。在制作线框图的时候,请记住:保持一致,减少混乱。
高端网站建设公司我们有时候会看到UI/UX设计师不在线框图上添加真实内容,高端网站建设公司而是使用“loremipsum”一类的无意义文字。很少有设计师意识到这是不对的。你可能会说,内容在设计阶段反正不可用。确实,我们建议你使用内容草稿就可以了。
在真实情境中,内容会影响你的设计,使用草稿则能帮你做出更好的设计。如果你用的是无意义文字,界面就可能会丧失与真实环境的一致性和整体性,后续可能需要对用户界面进行大量调整,甚至是创造一个无法落地的设计并推倒重做。总之,真实的内容可以为线框图提升价值,串联上下文,提供更有说服力的解释
没有严格规定说你应该使用低保真线框图还是高保真线框图,这取决于项目本身。所以在特定情况下,当你需要为线框图添加更多的细节时,不需要纠结。但是正如Eric Ries所说,如果这些细节不能带来价值,你就不要做多余的“无用功”。先从基础开始做起,再根据需要不断完善和添加细节。例如,当你需要开发者关注到一些个性化的解决方案上来时,可以添加更多的细节,并在线框图中说明清楚。