Category Archives: Share Reading

线框流程图:一款用于工作流程或APP的UX交付

摘要:线框流程图是线框图和流程图的组合。当一些页面在动态变化时,它们能够记录工作流程和屏幕设计。

介绍

在UX领域,线框图是一种常见的的用来表现页面层级布局理念的交付,然而,流程图对于记录复杂的工作流程和用户任务是十分有用的。尽管这两种交付都普遍用于UX领域,然而它们并不是交流设计想法的最佳工具,尤其是在记录没有很多独特页面,却有一些会因用户交互而内容(或布局)产生动态变化的多核页面的手机、桌面、或者 Web APP 的时候。最近几年,一种可供选择的叫做线框流程图的交付,作为解决这些问题的方法浮出水面,线框流程图过去常常被用来表现普通用户任务中上下文的设计。

客官莫急,小的正在拼命为您加载~~

一个网页线框图能够传达那些主要是静态页面的网站或应用的布局想法,内容和页面层级设计,但它在交流复杂的动态操作流程时是没用的。

客官莫急,小的正在拼命为您加载~~

流程图被用来描述后端进程和用户任务流程(正如这个例子),然而,对于UX使用来说,它缺少页面的上下环境——一个严重影响用户体验的因素。

线框流程图作为一种工作流程交付

定义:线框流程图是一种将线框图式的页面布局设计和简化后的像和流程图一样的交互表达方法相结合的设计规范板式。

客官莫急,小的正在拼命为您加载~~

这个低保真线框流程图展示了一个简单的用户任务。屏幕设计的使用,而不是用抽象的流程图符号,使我们能够持续聚焦在这个用户将发生交互的产品上。线框流程图能被高保真创作用于交流详细的设计规范的同时,它们跟用来讨论交流交互设计和用户工作流程的低保真文件一样是有用的。

线框流程图作为一种团队中设计移动端APP时的普通方法出现,在流程图中的每一步都相当于一张填满手机屏幕设计的线框图。因为相对而言,手机屏幕尺寸较小,真实的页面设计(如线框图)能够十分容易取代线框图中的抽象符号。然而,线框流程图不仅限于记录移动端应用和网站——它们同样能被用于桌面产品,典型地就是被用来展示一个屏幕或网页因用户交互而变化的那部分。许多电子商务购物表单和收银台页面的设计,同样适合用线框流程图来细化。

为什么我们需要新的东西:流程图和线框图不能很好的记录复杂的APP

通常说来,介绍一个规范化的新样式是不好的,因为许多相关者不知道如何去解释它。通常来说旧的东西更熟悉。然而,我们确实喜欢线框流程图,因为对于之前见过线框图和流程图的人来说它很容易学,并且线框流程图有足够的优势来克服其他同类产品中的不足之处。

线框图是一种很好的表现布局的方法,但是它们不能很好的描述交互,它们尤其不能很好的记录一个带有很多动态内容的电子产品的布局,例如移动APP和Web APP。当记录带有很多不相关联的、相对静止页面或屏幕的网站(或者其他电子产品)时,线框图是很有用的,因为在这些页面或屏幕上,点一个链接或按钮通常会导航至一个完全不同的页面。

然而,很多现代Web APP和移动端APP只有很少的完整页面,但会基于用户对产品的交互,通过AJAX(或者其他科技)相应地改变内容和布局。不论是选择分类或过滤,产品页面展示就会发生变化的电商产品,还是基于工具、模型、或其他控制参数之间的交互,整体布局和信息的展示就会发生强烈变化的,复杂的、创造性的或技术性的应用,它们都有涵盖。在这些案例中,线框图不能很好的抓住各种布局的可能性,或者内容变化的规则。除此之外,线框图也不能够记录在用户与页面发生交互后,系统呈现给用户的重要反馈。(和系统认证过的用户进行交流得到的反馈,对于一个好的用户体验来说是至关重要的,这在十大易用性原则中被排在第一位。)

另一方面,流程图是一个能全面记录复杂的工作流程和带有多重步骤或路径的交互信息的工具,但常常会忽略交互中的上下环境以及它对用户的影响。用流程图作为一种主要的交付来记录(或构思)交互设计或含有多种用户任务步骤时,会忽视一些在表现在页面上下环境中的信息,而那往往会影响交互的成功。

线框流程图记录交互信息

线框流程图中十分经典的用例图是用来记录一个用户在产品上完成一个普通任务的过程(如,在一个社交媒体APP中“直接发送一条信息给你联系人中的某个人”)。线框流程图中的每一步,一个简单的线框图,或高保真屏幕设计都表现了用户可能用到的屏幕。

箭头是用来表示用户发生行为的特定UI组件(例如点击一个按钮,点击一个链接,等等),指向另一张作为交互发生结果的线框图。交互需求的第二个“点”的不是一个独立的页面或屏幕,而是,它能展示同一个页面中的交互结果,例如内容的改变,展现了交互结果的界面反馈(例如,一个确认信息弹出来,一个颜色的改变,或者一个错误提示)。为了减少线框流程图中的歧义,在流程中箭头能够清晰的说明点击这个“热点”(或者任务)会指向哪一步这是十分重要的。对于一个在单个页面中拥有多重行为目标的复杂Apps,能够清楚的表明热点触发行为尤为重要。

screen-shot-2016-12-12-at-4-59-34-pm

在这个简单的线框图中,展示了一系列的在一个常见的用户任务流程中多个移动端APP 线框图,每一个线框图都代表同一个APP页面,而不是代表了不同的APP页面。每一个步骤都清楚表示了在一个任务流程中热点所连接的下一步。除此之外,在第二步中线框流程图展示了视觉反馈的作用(为了标记这次点击,点击专辑时背景颜色发生了改变)。

除了被大量频繁用于移动端APP,线框流程图对于记录复杂的桌面应用和Web应用同样是有用的。由于用一个全屏桌面线框图来表现一个进程中的每个步骤会浪费很多空间,如果在每一个步骤中大部分的屏幕设计中会保持不变的话,所以仅仅表现屏幕在每一个步骤中变化的那部分(例如对话框,情态,过滤或者分类),就能有效的记录界面相关的,正在改变的那部分,同时依然能提供足够的上下环境。

客官莫急,小的正在拼命为您加载~~

对一个Web APP结构操作说明的做一个简后的高保真桌面流程图,不是屏幕设计的所有部分都需要呈现在每个步骤里的。由于桌面屏幕设计的尺寸更大,如果大部分能够被看到的信息没什么变化的话,没必要每一步都展示整个页面。用一种战术上的方法来展示相关屏幕设计,一种能够看到的只是因用户输入发生变化的那部分。

线框流程图不仅能够展示每个页面中的内容和布局会因用户交互而变化的APP和动态网站的工作流程,它也同样适合于记录在传统静态网站中的任务流程。然而关于用线框流程图来记录静态网站需要注意的是,每张线框图的尺寸可能过大,以至于会丢失被记录的进程的上下环境。

线框流程图对于合作构思

除了是一种程序相关人员和开发者之间交流的有用方法,作为一个团队之间配合的工具,线框流程图同样能够工作得很好。尤其在敏锐的环境中,跨部门团队间能够配合交流得好是十分重要的。

跨部门团队之间的设计研讨会能够碰撞出一些理解上的火花,在这些平行设计工作小组之中,团队成员构思和写下任务流程,然后整个团队讨论这些点,为了潜在的点可视化,UX用线框流程图的方式给每个步骤画草图(并且记录下团队已经同意的点)。

在一个配合的环境中,线框流程图不需要视觉上打磨,这种类型的讨论,用白板或者纸和笔画草图的方式快速的将想法和交互记录下来是非常有效的。

客官莫急,小的正在拼命为您加载~~

在一场NN/g UX 会议中的UX交付研讨,几个团队成员用粘上便签条的手机,标记笔,和纸来讨论一个设计环节中的流程图。这个过程用一个白板就能容易实现,或者仅仅用纸和笔。

结论

线框流程图是一种正在兴起的用于记录移动端和Webapps中用户工作流程和复杂交互方式的UX交付。它们非常适合于呈现一个APP中一个或几个页面的动态改变,通过大量的连接在一起的相对静止页面来捕捉流程却收效较差。作为一种团队间合作与构思的方法,用来思考用户工作流程、任务,以及构思进程中屏幕设计的每一步,线框流程图同样是有用的。

原文地址:https://www.nngroup.com/articles/wireflows/

移动APP可用性测试:实验室测试和现场测试的比较(上)

可用性测试的重点

可用性测试是在移动APP在设计、投入市场后用来评估可用性的一种常用工具。可用性测试实施时一般是使用发声思考,即用户在一个测试环境中被给予任务,并鼓励他们在尝试完成任务时出声思考。这能够帮助可用性测试的主试即实验者知道用户界面(APP设计)是如何帮助用户自然地思考和执行操作,强调对于产品的特色和改善方法的认知。

用研工作

如何去定义一个可用性问题修改的紧迫性?

可用性问题的严重等级是一个重要的因素。当这个问题阻止用户任务完成时,就需要最紧急的修复行动了。Dumas和Redish(1993)使用了4个关键等级,至今仍被用户研究员引用的较多:第一个等级为最严重的等级,表示最严重的问题,第四个等级为表示最轻的严重性。Kallio等人(2004)也将问题按严重性进行分类:高(导致任务执行失败),中等(不是那么严重,任务可以完成)和低(小问题)。

问题等级严重性

可用性准则

实验室 VS 现场

传统的实验室测试

传统的可用性测试一般是在可用性测试实验室实施完成,如阿里、网易游戏都有专业的实验室,一般是由一间类似于办公室的区域和一面单向玻璃的可监视房间组成。必须保障实验室环境是一个安静的空间,测试的用户能够全神贯注于任务的执行。

实验室测试的担忧

经常在实验室进行测试的用户研究员都会担心在实验室进行的评估会由于没有模仿用户的使用情境而缺少生态效度。因为在现实的使用场景中,打断、移动、声音和多重任务操作等,这些没有出现在实验室测试中的因素,都可能在现实情景中影响到用户的操作。

现场测试

然而现场的可用性测试是非常罕见的,大部分(70%以上)的移动APP评估是在实验室设备中做的。这可能是因为数据的收集,如出声思考、视频记录或者观察记录,这些在现场做比较困难。

幸好由于便携式录像设备在近两年快速发展,使得在现场进行用户测试变得容易些。这些发展允许用户研究员像在实验室那样,可以在现场做一些小测试了;也使得他们能够有意识的去跟踪屏幕上发生的事情,去倾听用户的评论。同时也允许在现场的可用性测试中使用出声思考的方法。尽管发展了合适的工具,现场测试仍然比实验室更加耗时,也可能需要测试的用户和主持人付出更大的努力。

研究目的

敏捷用研在APP快速迭代开发的环境下被提出和倡导,以用户为中心的设计和可用性测试一定要非常高效。敏捷测试需要用户研究员在产品开发时间被严格限制的期间内,发现最重大的可用性问题在上线前进行修复。所以,可用性测试的焦点绝不是发现每个可能的细小问题。

敏捷用研

如何使测试的结果最优化,选择正确的评估方法尤为重要。对可用性测试者来说,经过科学验证的合适的测试方法是非常宝贵的。在我们的研究中,主要的目的是了解清楚,当评估移动APP可用性时,现场测试是否有风险,或者实验室环境是否可以模拟出足够的生态效度。

对比研究

为了解清楚可用性测试中环境的影响,我们实施了一个对比研究,即同时在现场和实验室两种环境下开展可用性测试,并且保证其他因素(执行的任务,发声思考的方法等)都是一样的,只有测试的环境不同。

两种测试环境分别是:

  1. 实验室:一般用户研究员进行可用性测试的地方,预算较低;
  2. 现场:一个用户会真正使用移动APP的地方。

对比

研究问题和假设

(1)问题:在实验室和现场会发现同样数量的问题和现象吗?

假设:如果进行对比的两组测试都是在足够多的用户中进行,那么现场测试发现的问题数量会更多。

(2)问题:在两个测试环境中发现的问题和现象会是一样的吗?如果不是,有什么差异?

假设:两种环境中的问题将会是不同的。例如最常下载时间在现场可能更能被容忍。

(3)问题:如果发现的问题有不同,那么是因为实验室或现场发生问题的严重性不同吗?

假设:现场的问题会因为在任务执行过程中被打断而更加严重。

(4)问题:任务执行时间会不同吗?由此我们可以从测试中推断出什么?

假设:任务执行时间在现场将会更长。

(5)问题:环境会影响测试用户的执行吗?

假设:现场测试的任务在执行过程中将会有更多的被打断机会,而打断行为的发生次数会影响用户操作。

(6)问题:当评估移动APP的可用性时,是实验室更适合还是现场测试更合适?

假设:当评估移动APP的可用性时,现场测试将会更适合,因为情境影响使用和操作。

研究结果

然而对比研究的结果使我们惊讶,因为结果并没有支持大部分我们之前的假设。

(1)问题:在实验室和现场会发现同样数量的问题和现象吗?

根据我们的研究:现场测试发现的问题会比实验室多,但并未达到显著差异。

我们的假设是在现场测试会发现更多的问题,但是没有被实验结果支持。

(2)问题:在两个测试环境中发现的问题和现象是一样的吗?如果不是,有什么差异?

尽管观察到了同样的问题,但是同一问题在现场测试中发生的频率更高。

(3)问题:如果发现的问题有不同,那么是因为实验室或现场发生问题的严重性不同吗?

假设是在现场会发现更多严重的问题,但是没有被证实。有关问题的严重性,在两种测试环境中没有差异。

(4)问题:任务执行时间会不同吗?由此我们可以从测试中推断出什么?

个人任务完成的时间,现场测试的用户没有比实验室测试的用户更长。当然在测试所需要的总时间上,现场的确要比实验室长,这说明现场测试是一个更消耗时间的方法。

(5)问题:环境会影响测试用户的执行吗?

在现场,测试有潜在的干扰,但是对于用户的操作似乎没有太大的影响。因为当执行复杂任务时,用户会寻找一个安全的地方(方位/角度)去执行,只有一小部分用户会一边执行一边踱步。在现场,用户的注意力会非常集中在测试上,例如在进出地铁时也会持续工作,在地铁上他们似乎也没有被其他地铁乘客打扰到,即使其他乘客会来和主持人说话。

尽管主持人的行为在两场测试中是一样的,但是现场测试中用户的表现似乎更加放松、随便,表现在他们更频繁的去发表关于APP的评论。

(6)问题:当评估移动APP的可用性时,是实验室更适合还是现场测试更合适?

当做一款移动APP的用户界面评估时,现场测试可能没法显著增加测试的有效性和完全性。不是因为一些问题没有被发现,而是因为现场测试所需要的时间更长,需要付出的努力更多。基于我们的实验,实验室测试似乎已经能够在提高用户界面和系统交互方面给予充足的信息。

现场测试完成后,主持人和用户交谈的更随意,似乎用户更容易说出自己关于产品观念的想法。现场测试的方法适合于不仅和一个系统交互进行测试,还包括测试用户行为和环境。另外,APP或设备如有一定的机密性那么测试通常是在实验室进行的,特别是在还在开发周期的产品。

在现场环境中,用户似乎在寻找一个安静的角落来和APP进行交互。个人空间似乎并不只在与别人交流时才被需要;在公共场合,当人们在做自己的事情时同样需要隐私。

研究的影响和将来的研究

正如用户研究员的目标是在严格的项目经费和时间的限制下,找到最大和最致命的可用性问题,那么这项研究帮助用户研究员在测试地点上做了决策。当测试一个移动APP的可用性时,实验室测试能够给予充足的信息。

给予用户研究从业者的启示

当测试一款移动APP的用户界面时,现场测试可能不是最好的选择;多数还是因为它比实验室测试更加耗时。

如果需要进行现场测试,则需要准备好比实验室双倍的时间来进行;因为在现场,你可能一天下来只能测试实验室的一半被试,且你需要做好事情不按计划走的准备,因为除了测试还会有更多的干扰和意想不到的事情。

在做现场测试前,先做一个严格的预测试是必要的;因为许多细节都会很容易出错,你真的需要检查所有的准备来确保万无一失。

文  / 媛媛大王 链接 / http://www.woshipm.com/user-research/424328.html

如何找用户来进行一场快速的可用性测试?

如果你是交互设计师,是否纠结过某个左滑出的功能,用户是否会发现?如果你是视觉设计师,那么,你是否为某个按钮究竟用什么颜色而抓狂?如果你是产品经理,是否也曾怀疑过设计师为什么这么做,用户到底会不会买账?

对于有些疑问,多动动脑子,答案可能就显而易见,而有些争议,即使磨破了嘴皮子,也还是各执己见,不相上下。此时,要想说服自己以及他人,最需要的就是找相关用户来说话。本文要讲的就是在此情此景,如何找用户来进行一场快速的可用性测试。

是的,上述的种种都是我以及身边的小伙伴们正在经历的。对于有些疑问,多动动脑子,答案可能就显而易见,而有些争议,即使磨破了嘴皮子,也还是各执己见,不相上下。此时,要想说服自己以及他人,最需要的就是找相关用户来说话。本文要讲的就是在此情此景,如何找用户来进行一场快速的可用性测试。

什么是可用性测试?

可用性测试就是邀请真实用户或潜在用户使用产品或设计原型,对其在使用过程中的行为进行观察、记录、测量和访谈,进而了解用户对产品的要求和需要,并以此作为改进产品设计的出发点,提高产品的可用性。

所谓的快速可用性测试,主要针对的是短流程,小项目,或者多选一方案的用户可用性测试,这种方式高效、快捷,我们无数次的疑问、争议,都是通过这样的方式找到了好的解决方式。那么,究竟如何来进行呢?

1

第一步,明确快速测试类型及产品目标

快速测试类型我把它分为两大类:探索型及验证型。探索型即为让用户通过使用产品,找出产品的可用性问题,进行优化;验证型即为有几种(UE/UI)设计方案,通过用户使用,最终选择最优方案。

注意:在验证型测试类型中,产品目标一定要考虑进去,明确这几种方案背后的产品目标是什么?有可能测试结果并非其中任何一个方案,而是有了更好的解决产品目标的方式。

第二步,任务创建

选择型可用性测试,一般针对的是产品短流程或者整个产品,此时就需要相关人员协商讨论整个产品的主要功能点(用户常用功能、产品核心功能、亮点功能等),对照这个功能列表分别创建用户任务。任务的设计要具体,尽量贴近用户的真实使用场景。

2

验证性可用性测试,这种情况任务比较明确,只需结合几种方案用户所使用的场景,确保测试任务符合用户实际使用行为即可。

第三步,预测试

任务创建完成以后,千万不要着急进行测试,所以这里插入个人认为非常重要的一点:预测试。预测试的目的就是发现设计任务是否有漏洞,及时修复。可以找公司内部的同事快速测试来完成。基本上我在每次的预测试中都会发现或大或小的任务漏洞。所以,为了保证测试结果的准确性,这一步千万不要偷懒。

第四步,招募用户

1、找多少用户

对于快速的可用性测试,到底应该找多少用户来测试?说到这里,可以参考Nielsen的这张经典图表,可能对于用户数量业内有很多的争议。我个人的项目经验来说,一般发现产品的重大问题的话,6~8个用户足够了,而对于验证型的测试,可根据测试结果及时调整数量,一般也会控制在12人左右,基本上符合了Nielsen的理论。

3

2、 找什么用户

我们在项目中一定会有的两个参考因素:是否使用过该产品及程度、是否使用过相似产品及程度。此外,一些基本的人口学特征(性别、年龄、学历等)也在筛选范围内。

3、哪里找用户

可能这个是我们项目中比较难控制的,项目的不同,也就意味着需要不同背景的人来测试,没有固定的一个组群来维护,这里就给出一些我们平时找用户的地方作为参考:公司内部非此项目组的同事们(充分利用公司的各个大群/小群/群邮件)、周边符合条件的朋友、产品的线上用户、产品论坛/贴吧等等。

第五步,用户测试

一切准备就绪后,即可开始用户测试。主要就是让用户完成预先设计好的一系列任务,我们在此时需要对用户的行为进行观察、记录、测量和访谈。

测试过程中注意:切记引导性过强;操作行为是重点(用户的语言可能带有欺骗性,应更多关注“用户行为”,鼓励用户“出声思维法”,即要求用户在操作时,将完成任务时所有的思考、行为、感受都描述出来)。

4

第六步,数据分析

1、 探索型可用性测试

通过用户测试,可能会发现产品很多可用性问题,在问题整理完毕之后,需要对问题进行分类或者优先级排序。参考业内的整理办法,主要有二级、三级、五级等。我们比较常用的是三级划分问题的方法,把问题逐个梳理。

问题的三级划分:高(无法完成任务)中(完成任务,效率/满意度不高)低(完成任务,较快/满意)

说到这里,就又回到本文开头提到的可用性概念:产品在特定使用环境下为特定用户用于特定用途时所具有的有效性、效率和用户主观满意度。那么对于问题的评估也是从这三个维度来打标签,详细解释参考下文:

  • 有效性:用户完成特定任务和达到特定目标时所具有的正确和完整程度;
  • 效率:用户完成任务的正确和完整程度与所使用资源(如时间)之间的比率;
  • 满意度:用户在使用产品过程中所感受到的主观满意和接受程度。

2、 验证型可用性测试

这类的数据分析相较于前者简单一些,主要就是整理测试用户对每个方案的任务是否、效率、满意程度,最后让用户选出心仪方案,如都不选,则给出每个方案的优化建议。

上述就是结合自己的项目经验梳理出的快速可用性测试流程,再来回顾一下:明确目标—测试任务创建—预测试—招募用户—用户测试—数据分析,六大步。

总之产品可用性测试的好坏还是需要不断的实践练习才能有一个好的效果。诸位还是多多实践吧。

 

文/john 来源:http://www.woshipm.com/pmd/405753.html

从一个项目实践说起,产品设计流程是什么

产品设计(Product Design)没有一个合乎情理的流程,即使人们总是呼吁敏捷开发(AD:Agile Development)、极限编程(XP:Extreme Programming),但必要的产品设计流程肯定是客观存在的,只是说产品的流程可能是敏捷的(Agile &Scrum)。下文是一个产品新人(PM)结合自己的项目实践对产品设计流程给予的一点思考

 

产品设计(Product Design)流程是一个怎样的流程?这个问题太高能,产品后生晚辈亦不敢贸然回答。事实上,我对“产品流程”并没有一个完整的概念,故不忍信口妄语,有辱行业。然静思己过,内心了然正躬身其中,却茫然不知。结合自身的实践和思考,以面向过程的方式回顾一下整个产品设计过程。

产品设计流程

尝试将产品设计流程大致分为四个阶段:顶层设计、框架设计、项目实施、回归迭代;那么这四个阶段究竟是个怎样的过程呢?一起来看一下:

1.顶层设计

概念上来讲,就是需求分析与设计,如何把握住用户的核心本质需求——是每一位优秀产品经理的必要涵养;

a.需求理解:用户/运营向产品提出了大量的需求。需求量大、需求表意模糊、需求浮躁;各路需求方都认为自己的需求是最重要、最紧急的;产品人员捉急,逼死也没用;如此多元复杂的情况下,产品(PM)如何保持冷静、理智对待需求呢?“淡定和理智”很重要!整理好需求,自己仔细阅读分析后,主动联系需求方核对、商讨,直到弄明白需求背后到底是什么。因此,将需求理解透测是其他后续一切工作的基础和保障,需求偏了理解错了,产品也就歇菜了…

b.情境研究:面向对象的产品设计,大家不要理解错:不是,面向对象的编程语言C++。这里的[对象]指的是[用户],是产品受众。设计的产品必须要用户画像,充分考虑产品适用的用户群体及该群体的使用习惯和思维方式等,用户在实际生活中使用产品的场景是产品设计时重点要考虑的因素。综合考虑用户使用场景和不同用户群体是优秀产品都不曾忽略的。

c.需求管理:需求量大、需求紧迫是每个产品人面对的现实问题。“把所以需求都做了!“你是在吹NB吗?快醒醒吧!显然,将需求排出优先级,迭代增量式解决;需求的迫切程度、各部门的战略优先级、老板的意思、公司技术资源共同决定了一个需求的优先级。当然,如果你够屌,也可以独断专行判断决定一个产品的未来。

2.框架设计

通俗地讲准确理解原质化需求、对明确划限的需求进行结构性设计。明确产品需求范围和结构框架,构建细化产品信息架构;

a.原型设计:用户需求最终都要可视化,抽象的需求最终都要反映在具体的产品形态上。产品经理借助AXURE等原型工具,将抽象需求具体化、图形化,变得更加真实、可见。产品经理晋升艺术家粉墨登场,建筑师般的犀利。搭建具备良好框架的页面,且看如何构建有价值、可用性良好的信息架构。

b.信息架构:信息架构主要是为信息与用户之间的认知搭建一座畅通的桥梁,是内容直观表达的载体。通俗点,信息架构(IA)就是研究信息的表达和传递。信息架构(IA)是设计信息的组织结构。


Original Definition:Information Architecture is utilized in web development, user interactions, database development, programming, technical writing, enterprise architecture, and other activities that require expressions of complex systems. Information architecture has somewhat different meanings in these different branches of what might be called IS and/or IT architecture. Most definitions have common qualities: a structural design of shared environments, methods of organizing and labeling Web sites, intranets, and online communities, and ways of bringing principles of design and architecture to the digital landscape.


一个产品可以用来做什么,产品所呈现的信息层次;筛选有价值信息元素,简洁、直接地传达给用户,让信息与用户相互适应达到最佳平衡。毫不夸张地说,良好的信息架构远比华丽的页面结构要有价值的多。

c.视觉设计:设计产品结构模块和信息元素,随即交付UI美工的产品视觉设计。UI设计犹如”装修“,对产品经理设计的线框图/原型进行润色、美化、调整,以产出极具美感的产品,到达用户眼前。UI阶段谨记两大原则:

x.产品框架结构不能偏移原型设计,结构清晰、模块分明、层次协调;

y.不能被遗漏或串改产品内容信息架构,一字一眼、毫无误差;

1

产品设计流程细节

3.实施追踪

产品规划路线图规划是前提,关键看需要实现,这样才有意义。在用户眼中,可用、好用的产品最终展现在面前触手可及才具有价值。技术研发人员程序化实现产品经理设计的产品,是从“抽象”到“抽象”再到“抽象”的双重抽象转换过程。

a.项目追踪:技术研发过程中,产品的理解上必定存在不同程度的偏差,产品经理肯定是要保证[需求]的真实准确的,确保最终产出的产品实现的还原度。产品实施过程的追踪是产品经理对技术研发的需求保证,也是对产品实现进程的管控,确保产品的按时按量上线;

b.产品验收:完成产品技术性开发,接下来就是正式上线了!技术实现与产品设计之间是否存在偏差?技术实现的产品业务逻辑是否存在错误?研发完毕的产品与产品经理的设计初衷是否一致?不论理念还是业务逻辑设计上都是需要产品去把控的。尽管之前的需求评审阶段已经做了详细充分的需求澄清,但只有经得起反复检验的产品才是真正地好产品;

4、回归迭代

产品交付到用户手中,貌似产品经理的工作可以告一段乱了。结合实际情况,产品上线无形埋下两个大雷。

a.实现偏差:技术实施过程中,必然有些需求因为现实的局限性被耽搁或者简化实现,那么上线后第一时间需要给出小幅优化的迭代完成之前研发阶段的历史遗留问题。产品规划前期产品需求细化增量式迭代也迫使产品经理无力停歇,赶往下一个里程碑;

b.反馈优化:用户眼中的产品近乎完美,要求苛刻不止。用户通过产品需求反馈通道,给出使用新产品的感受以及提交发现的产品问题和不足,及时响应用户的所求、为用户排忧解难也是新产品建立口碑的机会。问题反馈通道建设对于一款新产品迭代优化初期显得尤为重要,对产品快速增量式迭代及改善用户体验的重要都是不可估量的;


行文小结

规范产品设计流程(PDP)有利于产品实现!产品设计流程将整条产品线上的人员都串联起来,将产品过程“数据流”化,可谓气贯长虹、如梦般丝滑。产品流程将产品从各个原本独立的实施过程聚合成一个统一的变现行为。一个(互联网)产品必定映射着规范、理性、高价值的产品设计过程。当然,规范的产品流程不是为了约束产品过程,如果拘泥于具体的要求,将失去流程的初衷;产品流程为产品优质畅快实现服务,是产品实现过程的参照物,是一个目标,是一种信仰。产品本质上是产品设计者对现实世界态度和认知的反应。将人性注入产品之中,其必然也因爱而生,而流程就是信仰和良知!

文/Daviiwong 原文链接:http://www.jianshu.com/p/92f651ab51f2

UI设计中的纯色和渐变效果

纯色和渐变在高手眼里不仅是颜色的组合,它们可以引导视觉焦点、渲染氛围、传递情绪等等,是网页设计新的一个流行趋势。想运用好它们,最要紧是在色彩搭配与透明度上下功夫,今天由一群设计师高手用真实案例给同学们上课,教你正确地利用它们。

在当今这个充斥着先进的特效和精妙风格的世界中,谁曾料到,像纯色和渐变这样简单的手法,竟能够催化出创造力,并极大提升网站的美学水准?现代网页设计师们,证明了优雅的插画、精致的图形和壮丽的照片,都能在彩色滤镜效果下很自然地得到强调。气氛焕然一新,网站开始变得光彩夺目。的确,它有助于解决某些UI设计问题。

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

首先,彩色滤镜能给网站耳目一新的外观,却不会增加负担 。其次,它通过搭配传递各种情绪的色彩,很好地丰富了设计。第三,作为一层低透明度的遮罩,它不会掩盖主背景的魅力,对于想要轻微淡化轮播图或视频区域,却仍希望其吸引力不减的人 ,这点尤其有用。最后,它为前面的内容提供了坚实的基础,兼顾了可读性。

这种方案能非常协调地与各种元素协作:提供强烈反差的白色、极受欢迎的扁平风格元素,还有为项目增添精致微妙感的轮廓式图形。

这里有些杰出的网页设计,示范了如何正确地运用这项技巧。

Zimya

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

着陆页带有一层美妙的半透明渐变,立刻唤起积极温暖的感觉。从紫红色到橙黄色,遮罩层华丽的颜色令人着迷。

Red Collar

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

平滑的半透明渐变极大地丰富了背景图——这家机构的视觉象征。它增添了几分独特,不仅与整个场景形成互补,也形成了热情洋溢的氛围。

Ingram Cole and Land

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

这个网站基于一些非常棒的赏心悦目的效果,这不仅指它的动画,还有成功贯穿整个网站设计的照片处理手法。从紫色到粉色,温暖而微妙的渐变,使欢迎页面看起来相当美妙奢华。

Adopt Wales

clip_image005

设计师在视频背景上覆盖了一层迷人的粉色渐变,营造了亲切友好的氛围。颜色与透明度的选择很好地突出了上面的元素。

Snippet App

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

对于更喜欢创造冷静与便捷的整体感观的人而言,蓝与白的结合是非常有用的。设计师实际上用了三种色调,不过这两者占据主要地位。

Joyce Van Herck
网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

Joyce Van Herck是名高端艺术家,她的在线作品集网站嵌入了优美的几何图形。甜美的半透明渐变使斜线拥有活力,加强了这种愉悦的氛围。

Electric Mainline

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

和前面提到的Snippet App很像,设计师运用了蓝白混合。不论如何,低透明度的遮罩层,使用户欣赏其背后那张扮演主角的背景图。

Invelab

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

同样,设计师试图在背景与前景之间营造完美的对比,同时也将注意力引向工作室的图片。明亮的紫色有效地与白色形成互补。

M2B

网页设计新趋势!教你轻松玩转设计中的纯色和渐变效果

欢快的半透明渐变强化了网站的视觉表现。正由于采用了这种方式,全新的色彩使得背后的图片陡然增色。而白色被用作一种补充色,使内容看起来醒目。

Numero Neuf

clip_image012

首页的特色是大量基于图片的导航,每一项都覆盖了一层黑色半透明滤镜。这种方式很常用:如果你想为文字营造完美的对比,并淡化菜单项,很自然就应该将注意力引向某个选中的项。

Evoluzione Telematica

clip_image013

绿色使人联想到正能量,此处就是这么用的。明亮的色调与白色共同建立了一种积极的形象。

The Place

clip_image014

这位设计师借极简主义的方式重现了优雅。所选的颜色反映了网站的个性,统一了视频样式。

Obbaki Foundation

clip_image015

颜色可以提升感观的协调程度。它丰富了网站的主题,同时轻而易举加入了一些戏剧性效果,对整体氛围有一定贡献。

Studio Up

clip_image016

这个机构通过迷人的效果展现了一个视觉差滚动的介绍页面,向普通用户证明了他们熟稔网页流行趋势。每一页都有其独特的颜色,覆盖在动态的背景上,用以突显其内容。

Hype Agency

clip_image017

设计师在焦点区域挥洒了一整片的橙色,为网站营造了恰当的积极的氛围。另一种颜色则是白色,非常明亮并融入其中。

Papertelevision

clip_image020

薄薄一层明亮多彩的颜色赏心悦目,伴随着每个主要部分。首页的深紫色几乎不容易注意到,但它仍然能使页面活泼有趣。

 

设计的未来,就是让人生活得更加诗意

「人,是世间万物的尺度」-普罗泰戈拉

 

设计从人类使用工具之始就产生了,随着人类文明的发展,若干年来,工具发生了天翻地覆的变化,但期间人始终为人,操作电脑的现代人与最初使用石斧的原始人在生理特征上几乎没有发生任何变化,双手、五感、大脑… 设计的本质并没有发生变化,以人做为标准依旧可以度量设计。未来的软件 UI、UX 将会如何发展,有哪些趋势呢?

1.私有物品智能化

也就是时下流行的穿戴式设备,个人不太喜欢这个词,感觉狭隘了,看看最近流行的被智能化的私有设备,Google Glass、Galaxy Altius、Nike+ Fuelband、Fitbit、Jawbone UP、Pebble…… 如果尝试画一个圈(如图1)

 

 

中间是人,离用户最近、最核心的圈子就是私有化的一些设备,再外圈一些才是PC、家电等,所以如果有公司能够占据私有物品圈中的核心地位,那也将意味着给它带来惊人的市场和机会,例如:手机,以及iPhone给苹果带来的改变,它算是私有物品目前智能化度最高的物件了。如果将人们最常用的私有物件看做是一个系统,那么在核心圈中,手机将担任智能中心的一个角色,其它设备可能都将与手机进行互联,打造一个私有化的智能圈。 Google推出的Glass明显加速了这个进程,令各大厂商投入私有物品智能化的市场当中。(图2 Google Glass)

2.智能家电的变革

随着通信技术的成熟,移动互联网的成长,以及私有物品智能化的普及,智能家电的发展已变成了一种必然趋势,家电行业也需要在这种时候突破传统家电的框架,为未来家电注入新的活力,需要以全新的眼光也看待传统的东西,将已知变成未知,相信这会为我们带来无数的可能性,看看Nest恒温器的例子,这款产品很优雅地解决外观、功能、节能、以及智能等问题,在用户使用一段时间后,它将了解用户对温度的习惯。就像当年苹果公司发布iPhone时,重新定义了手机,如今Nest所做的也是同样的事情。其实,创新不一定要在前沿行业,只要你有足够的创意,在传统行业一样可以给用户带来惊喜。在这个领域当中还有很多需要进行重新设计及定义。接下来看一下eico为我们带来的 Project HALO,重新诠释了洗衣机的定义,同时还有很多可以值得去开拓、挖掘的地方。相信国内还有很多设计公司接到了来自家电行业的类似设计需求,变革正在悄然发生,难道你还要默默的等着吗?

3.机顶盒的战火

小米盒子的推出确实搅动了数字电视市场,最少让互联网的视频内容提供商,像优酷、爱奇异、搜狐视频等都在观望另一张网上的动静,它们不担心小米盒子,它们只希望小米能够成为一个试水者,期待政策的松动,相信这些公司内部多少都应该有盒子计划,或盘算通过某些渠道能够成为内容提供者。最近也刚试用了小米盒子, 从体验上来讲应该算是国内机顶盒行业里的佼佼者了。像图2,小米手机期望能够在用户的私有圈中占据一个位置,同样在外围的家电圈中也需要占据一个位置,未来家庭物联网生态系统中的智能中心,机顶盒能够很好的扮演这个角色。但现在的机顶盒在交互以及用户体验上并没有发生根本性的变化,还未达到能承载智能中心的能力,相信未来在这一方面进行加强,基于语音、体感或其它交互类型的设计将会是一种趋势,做为设计者如何能够视而不见?(图3小米盒子)

4.平板兴起

可以看看下图,按照现在的趋势,未来2-3年平板电脑的出货量将超过PC,这意味着更多的平板将在未来上市,不同的硬件配置、不同的屏幕尺寸、不同的针对人群、不同的使用场景,设计上也将会产生更多的可能性,同时,因为屏幕的直接原因,移动广告也可能在平板平台爆发。 (图4 平板电脑出货量预测)

5.汽车与互联网的结合

随着经济的发展,能够购买得起汽车的人会越来越多,同时也将成为大家基本的代步工具,经济发达国家,像美国人已经离不开汽车,所以它会成为人们未来生活中重要的一个终端。想像一下,基于汽车的信息化,导航、车况提醒、行车安全、车内娱乐,这也是为什么像Google 这样的公司,开发无人驾驶汽车的初衷吧,以这个作为切入点,控制未来人们在汽车内的状态。

6.微信平台

腾讯目前不需要做一个移动操作系统来承载它的产品,因为微信未来会成长为一个平台,如同 Google 一样,它不需要做一款PC操作系统,只需要以做系统的心态推进 Chrome。移动端的特性确实很适合微信的发展,先将用户所有的碎片时间都抓住,以社交+通知的方式替代传统 Web端的 URL,同时也有可能在 APP 内部应用 Html5 技术,未来围绕它打造游戏平台,使移动变现方式更明晰,随着必会推出移动支付解决方案(会不会以二维码为基础呢?),这些都会是趋势,但如何影响设计呢?随着应用的复杂化,给用户带来的信息压力也会越来越大,微信联系人消息、邮件提醒、公众号消息、朋友圈更新、以及未来的游戏平台、移动支付等等,设想一下,用户打开微信的时候将被排山倒海的各种消息及提醒所淹没,这仅是一个例子,针对可能出现的情况是不是我们应该从现在开始做点什么呢?

7.字体设计的回归

文字,是一种文化的浓缩,具有影响受众的力量,尤其是以象形、指事、会意等六书为主的汉字,其本身就携带着大量的视觉信息。很早之前就有一个观点:限制国内设计水准的重要原因之一就是字体设计。除了对设计者审美要求很高外,中文字体的设计需要耗费大量的时间和精力,但由于国内市场的环境,相应的经济回报相当 有限,所以一般设计师很难完成一套字体的设计,往往本需要有能力的机构进行主导(很佩服知乎上的@厉向晨 @許瀚文 等字体设计师)。个人感受越来越多的人及设计师关注起字体设计,更多的公司及产品在寻求相匹配的字体,像,字节社、锤子OS(最少它说明会去购买 一些字体)、连阿芙精油也弄个字体,这是个好的趋势。(图5)

8.输入方式的创新

上面提及的私有物品也好,智能家电也好,需要面对一座大山–输入方式,如何在进机顶盒上进行有效的搜索操作?利用遥控器?利用手机?还是直接给用户一个键盘 ?是否有更好的方式? 语音:现在中文语音的识别率已经很高了,Google Glass目前也是采用语音识别相应的指令。相对于键盘以及触摸操作,语音能够完全解放了人的双手,具有有明显的交互优势。在移动端主要是因为使用场景的限制,如锤子OS海报所示,大多数用户不愿意在公众场合利用语音进行交互,但我们换个场景,用户是在一个隐私、完全自主的环境,像家里,就可以随心所欲的利用语音的高识别性改进现有交互了,应用在机顶盒、家电等方面。 体感:说到体感让我想起了中国的一句老话「丝不如竹,竹不如肉」,桓温问孟嘉:听伎,丝不如竹,竹不如肉,何也? 孟嘉回答说:渐近自然。在用户体验上,早期的命令行模式就如同中国古弦乐「丝」,后来发展到图形界面,通过鼠标操作所见即所得「竹」,再后来发展的触摸感 应,以人的手指做为直接的控制器「肉」,「渐近自然」这四个字道出了交互设计发展的真髓。XBOX的Kinect ,Leap Motion 等产品,代表了这一个方向上的努力。(图6 Leap Motion) 现有的移动设备也好,将要出现的智能化的私有物品也好,从体验和功能上都受限于输入方式,只要设备不断发展,交互也必会继续发展下去。

9.输出仍以视觉为主

想想我们在上面提到的手机,电视,都需要用户眼睛去「看」,通过看这个行为令用户感知到设计,与其说你在使用智能手机,还不如说是手机屏幕吸引了你的眼 神,Google更狠,期望通过一幅银镜绑架你的眼晴,在你观察世界之时永远隔着一块屏幕,从技术上讲这是一次进步,但在人文层面就留给市场来证明吧。现在各种产品及设备的突起同样是在争夺用户注意力,你有吸引用户注意力的idea吗?

10.简约、朴素的设计风格(flat design)

现在移动端主要针对用户的碎片化时间进行产品设计,但这样设计带来了一个问题–浮躁,用户感觉不稳定。举个例子,如果你是一种重度碎片化的用户(相信知乎 上不少),一定会有常有一种举动,拿起手机,点亮屏幕,其实你也不知道想干什么,看一眼,不获取任何信息,再把屏幕给关上或放入口袋,一再下意识的重复这 个动作过程。简约、朴素的设计风格是潜意识希望规避这种情况而诞生的,让我们回忆一下魅族Flyme 2.0所带来的视觉语言,侘寂!以及锤子OS里拂过屏幕后通知消息全部清除,都是同样在这种潜意识下产生的。保持一种宁静,在这喧闹的环境中有一处能让你 的心感觉平静之所,那将是一个多少吸引人的地方。想想为什么这么多人在旅游时希望能够去一处人迹罕至的地方,除了观赏没有看过的风景外,就是享受这样的一种宁静。这样的设计风格的产生多少带有一些人文情怀。(图7 Google+ Grid by Haraldur Thorleifsson)

11.细致的动态效果

交互是一个动态的过程,虽可具体到某个场景,或对界面元素进行设计,但元素的动作及行为在表现层上也需要进行设计,就需要使用细腻、精致的动态效果来实现了,这些是细节。当视觉风格以简约为主,那真正吸引用户的将会是一些出彩的动态效果,在这方面需要达到的标准同样也是「渐近自然」。

12.设计师的觉醒(人文情怀、匠人精神)

在工业化之前,匠人依靠纯手工生产产品,无法大规模生产,每件产品看起来可能都一样,但会具有微小的差别,一瞬间的创造灵感以及积累的经验造就了每件手工产品的不同。它们每个都具有不一样的生命以及特别的意义,这使其具有了灵性,购买者所追求的不仅是产品本身,还有匠人们为产品所付出的态度与精神,以及蕴藏其中的匠人工艺,这才是手工产品价值所在。设计者以掌握高超的技艺,并制作出骄傲的产品为荣,追求卓越,「嗜之越笃,技巧越工」。虽然,只是在知乎上以文字的方式表达一些理念,但我希望能够成为一名匠人,保持一颗匠心,借用原研哉的一句话「将设计以文字的方式表达出来也是一种设计」。

13.社交综合症(孤独感)

愈社交,愈疏离,朋友被划分为无数个圈子,打上不同的标签,在多个社交产品之间流连。交流简化为评论、@、私信,现实生活中的社交能力不断下降,虽然被无数信息围绕,但内心深处有一种无法察觉的孤独感,注意力越来越无法长时间集中,长文的写作只能放在深夜(凌晨1点后吧),焦点会在多个窗口或多个页面这间切 换,并时常忘记操作的目的性,这可能只是我个人的感受,权当一听。 还有许多趋势值得我们去探索,云、智能交互、大数据、移动支付等等,过 了山,眼界就开阔了,抛弃我们所熟知事物的框架,使其成为一个未知的领域,重新建立认知。 人们总希望自己能够在高处眺望未来,观望着远处的风景,有可能只是个自以为的高处,而我仅期望能够脚踏实地,用不够快的速度向山上攀爬,期待着另一边的景致,低头认清路上的荆棘,预见未来最好的方式就是亲手创造未来。   (部分资料来自网络,禁止转载)

「免费」的定价模式真的好吗?

免费,一直是互联网一路走过来一个比较大的噱头,免费的邮箱、免费的空间、免费的软件,免费的服务,以至于很多时间,我们都觉得,互联网上的东西,都应该免费,而那些收费的反而总觉的比较难接受。另一方面,越来越多的服务倾向于正版免费,而转从其他渠道获得收入,但这真的是「免费」吗?例如网络服务提供商(ISP)往往把盈利转嫁到实际物品或服务提供商身上, 因此真正意义上的「免费」几乎是不存在的( 例如广告),但是实际物品提供商又把广告成本转嫁给消费者,结果是用户的线下消费在无形中为自己及他人的「免费」买单,这样看来,免费是不是一件奇怪的事情?对用户来说,这是好的模式吗?

我对免费与收费服务的区别和界限困惑过很久,然后看到了一句令我茅塞顿开的话:

“如果商家为你提供免费服务,那你就不是他们的客户,而是他们的产品”

 

看明白了这句话,再看那些免费服务,就豁然开朗了:谷歌和百度做搜索服务,使用搜索服务的几亿人就成了一个成功的产品,广告主花钱实际是在购买这个巨大“产品”面前的曝光率;

电视台做各种各样的节目争夺收视率,观众就是产品,用节目吸引人气并划分出观众的年龄、性别、爱好,然后同样将这些分门别类的观众卖给合适的厂家,让厂家在他们面前展示自己的商品;
但是如果你收看付费频道,那你就成了客户,首先不必被广告困扰,其次,电视台对你的态度从“吸引、分类”变成了“服务、满足”;

网游的免费玩家,只需要给他们一些很初级的乐趣就可以,然后通过对乐趣的限制,吸引他们中的一小部分升级为付费玩家(客户)。而大部分始终免费的玩家,实际是被打包成一个巨大的“陪太子读书”的团体,供付费玩家们杀戮、领导、指挥;而且,付费少些的人同样要陪付费更多的大太子们读书;

对大型商场而言,顾客不是直接客户,商铺租户才是,顾客实际是他们提供给各商铺的产品,招揽到适合商铺类型的顾客才是他们的目的。所以,找准商场定位、招揽合适的商家进驻、针对定位进行宣传、甚至免费冷气、班车、座椅、公厕这种小事,都是为了尽可能给商铺提供更多客源。

回到题目中来。免费是好事吗?这个无所谓好坏,免费是种商业模式,关键看免费的目的是什么。
如果希望免费用户升级为真正的付费客户,那就会提供有限的免费服务,同时采取各种方法筛选出愿意付费的用户,并吸引他们升级;
如果免费用户只是纯粹的产品,真正的客户是另一群人,那就会通过免费服务尽可能多地吸引“真正客户们”想要的人,筛选掉无用的;
如果两者兼有,就要分别考虑,如何能达到两者的平衡;如果营销方式有误,可能会赔了夫人又折兵。

所以说,某个免费服务好用还是不好用,大部分情况下取决于商家希望你们这些用户怎么做:
如果觉得不好用,但付费就能变得好用,那就是商家希望你付费;
如果觉得不好用,你选择离开,那就是说你属于商家希望筛掉的那部分用户:不愿花钱,同时也没有作为产品卖给真正客户的价值;
如果又免费又好用,那你和商家其实是各取所需的双赢关系,也正是他们期望的。

(部分论证来自网络,请勿转载)

扁平化设计原则

设计社区不停讨论关于扁平风格,这种风格很带感。但大多数设计师不能彰显这种风格,或者直接讨厌这种风格。我很实际,创件有用的设计才是好的设计。由于最近流行的扁平风格,而去设计这个风格,但它不适合所有的项目,所以别硬套这种设计风格我们来看一下,这有五个很独特的扁平风格的例子。我们分析一下,再”戏说”一下什么叫扁平化设计风格。

去除特效

Flickr_landing

Shift Landing Page

扁平化设计以其形命名。平的设计就是其独特的二维风格,简单地平。

这一概念点缀— —阴影、棱台、压花 、渐变或其他工具的添加深度工作。每个元素或框中,从图像帧到按钮的导航工具,是脆,缺乏羽化的边缘或阴影 。

不添加额外的元素并看起来更加逼真,不同于skeuomorphic设计项目中使用技巧来使元素更逼近3D 。扁平化的图层在反映在其他项目中,不设计另类的背景图片、前景图像或按钮、文本和导航 。

那么它是如何工作的捏?平面设计有独特的外观和感觉,但没别的了。它需要设计明确的层次结构和元素放置,使用户可以更加容易专注项目,理解交互。虽然越来越多的网站使用扁平化设计风格,或许移动设计和应用中的风格更受欢迎。较小的屏幕占用,少的按钮和选项,让扁平界面的应用使用起来嘎嘎容易 (so easy?)。

简元素

Flickr Redesign

Dailyquotes Screen

Vanillla Wip 2

平面设计使用一些简单的用户界面元素如按钮和图标。设计师只需找些简单的形状,如矩形、 圆形或正方形,保持每个形状孤立。形状边缘可以完美地方角化或者包含一点点曲率。

每个 UI 元素应该只是简单和容易单击或切换。对用户很直观的互动,没有一些为设计而作的过度设计。

除去简单的样式,鼓励大胆的去可点击的按钮上色。但不要混淆简单元素和简单设计,扁平设计的概念也可以像其他设计方案一样复杂。

需要获得帮助开始你的设计吗(译者注:下面是广告)?Designmodo 提供了各式各样的 UI 工具包使用平面样式 —— 从 Square UI FreeFlat UI Free,包含一些简单的 PSD/HTML 用户界面工具包与基本组件,到Square UI 和Flat UI Pro 完整打包 PSD/HTML 用户界面包的网站和应用的设计项目。

专注于版式

Tour Page

ESL - Landing Page Design

扁平化设计

由于元素在平面设计中的简单特性,排版是极其重要的。

字型的定格应和整体方案的设计相符— —高度点缀的字体可能看起来奇怪反对一种超简单的设计。使用加黑字体和简单地和高效的单词来使最终产品具有一致性,可以在可视化方式和文本上作些努力 。

考虑一个简单无衬线(sans serif)类型族有很多变化和权重的主版式的使用平面设计的站点。添加一些别致的触点,一个新奇的字体来作为设计的元素,但小心别使用过火的专业字样 。

字体设计中还应该告诉用户如何使用该设计。标签按钮和其他元素增加引入的易用性和交互性 。

专注于色彩

Input Landing Page

扁平化设计

颜色是平面设计的很大一部分。不同于其他网站设计,扁平设计中颜色调色板往往是强调很多更亮 、更鲜艳。

扁平设计中的颜色 调色板的项目通常包含更多的 色调。虽然大多数颜色调色板最专注于两三种颜色,但扁平设计中调色板通常使用六至八个颜色。

扁平设计中色调趋向充满活力— —想想颜色转盘— —没有淡色或最纯色。初级和次级的颜色是最受欢迎的。另外,一些特定颜色的使用频率较高,在重复的扁平设计中,方位色,复古的颜色— —包括鲜肉色、紫色、绿色和蓝色— — 这些是较受欢迎。

简约的方法

Concept idea of banking app

Secret Stuff

扁平化的设计本质上是简单的,它与整体简约的设计方法相得益彰。 在网站的整体设计中避免太多花哨的东西。简单的颜色与文字就已足够。如果你要添加视觉效果,选择简单的图像。 有些零售网站,比如Svpply(见上),使用效果很棒的扁平化设计,这是将一些条目放在一个简单的背景上做到的。(提醒一下这些图片确实具有一些自然深度,但仍然和谐融入到整个扁平化的设计中)

“接近”扁平化的设计

扁平化设计

Realpixels

一个更多设计师都倾向于赞同的风格,就是“接近”扁平化的设计。 在“接近”扁平化的设计中,使用了扁平化风格的基本主题,但是一些特效被添加到设计方案中。例如按钮,可能包含轻微的梯度或者阴影。设计师通常挑选一种特效并专门用在一种“接近”扁平化的项目中。 这个风格,相对于一些扁平化设计背后的、无特效思想中的刚性,容纳了更多一些的弹性。 设计师们因为附加的深度和纹理而喜欢它。用户们喜欢它是因为,这个风格没有那么生硬,并且有利于引导适当的交互。另一方面,设计师们不喜欢它是因为,它以一种方式结合了两种风格,而这种方式可能缺少了对于一个真正风格的定义。

英文原文:Principles of Flat Design(注:图片稍有改动)