sketch measure 使用心得

首先非常感谢utom大神,创造了一个伟大的sketch插件。它极大的提高了设计师输出设计成果的效率以及准确性。它陪伴了我一起创造了2个产品。非常的棒~感谢的同时。也希望所有使用sketch的同学,能够更好的使用它。
首先需要注意的前提:
  1. 设计比例 (375x667或者750x1334后者比较精确,不容易出现误差,完美像素情况下。)
  2. 资源输出比例(根据设计尺寸需要输出图片的比例,如果使用375进行设计,需要输出的是2倍图和3倍图,如果使用750进行设计,需要输出的尺寸为1倍图和1.5倍图)
  3. 适配规则,根据适配方案进行对iPhone plus 和android 进行适配调整
  4. 切片的方式(可以使用measure进行,也可以使用其它插件进行)
  5. 标注的细节(标注不是万能的,还是有需要对设计进行备注的地方,让开发知道设计意图,并且还原设计,所以需要使用备注进行说明,包括设计意图)

 
我是如何使用sketch measure的。
 
 
  1. 设计画板尺寸定义:目前我习惯于375x667的尺寸进行设计,由于这样可以更大范围的观察设计内容。所以我在输出的时候设置为1pt标准比例。⚠️ 如果你的设计稿是750进行设计的需要把比例调整到视网膜屏(retina)@2x 的方式。当然标注会智能的进行换算。
  2. 将设计完成的设计稿按需求进行调整。图标全部进行元件化(symbol),这样对于整个app的组织有良好的效率和统一性。
  3. 检查字体的统一性保证仅使用一种字体。(pingfang sc)不同平台根据平台规则使用。
  4. 对于细节的检查:任何元素的坐标及尺寸,都必须不能有小数点。都是整数。(分割线除外,有些单倍设计需要0.5pt的分割线。)

 
做好准备之后,开始进行标注和切图。

打开面板:

按顺序:对像进行遮盖标注。效果如下,能够说明图标的范围,通常我们都是透明背景,所以需要进行标示。

对像进行自身宽度高度的标注。效果如下,还可以分别进行设置。


选择单个对象,是将当前对象在画板中的坐标标注出来,选择两个对象,则会将选中的两个对象中间的间距标注出来。非常智能。

这个不常用。因为选中字体时,会有完整的字体样式。这个是用来标注字体样式的。

备注,有什么表(tu)白(chao)想对开发说。打好文字后,点它~


切片,使用sketch自身切刀工具即可。
颜色,可以将sketch中的调色板的色值填入,提供给开发。
导出,可以将标注倒出html文件。选择需要导出的画板。



隐藏/开启 标注显示
锁定/解锁 标注
设置,可以对文档比例进行设置,对未设置过的文档,第一次导出时会弹出设置对话框,进行比例设置。





根据选中的比例,measure会智能进行切换。如果需要给android小伙伴可以让他们调整下比例:

 
就可以完美的实现多平台使用了。
标注部分到这里结束了。
接下来就是切图了。
 
新版的sketch有这样个功能:


根据项目需要可以自定义切图规则。太棒了!当然希望utom大神更新下插件。将导出的资源也可以进行分组。哈哈哈。
⚠️:有个细节需要注意!sketch进行切图会只切内容大小。所以需要对切片进行调整。
 


这样就可以切出需要的尺寸了。
继续阅读 »
首先非常感谢utom大神,创造了一个伟大的sketch插件。它极大的提高了设计师输出设计成果的效率以及准确性。它陪伴了我一起创造了2个产品。非常的棒~感谢的同时。也希望所有使用sketch的同学,能够更好的使用它。
首先需要注意的前提:
  1. 设计比例 (375x667或者750x1334后者比较精确,不容易出现误差,完美像素情况下。)
  2. 资源输出比例(根据设计尺寸需要输出图片的比例,如果使用375进行设计,需要输出的是2倍图和3倍图,如果使用750进行设计,需要输出的尺寸为1倍图和1.5倍图)
  3. 适配规则,根据适配方案进行对iPhone plus 和android 进行适配调整
  4. 切片的方式(可以使用measure进行,也可以使用其它插件进行)
  5. 标注的细节(标注不是万能的,还是有需要对设计进行备注的地方,让开发知道设计意图,并且还原设计,所以需要使用备注进行说明,包括设计意图)

 
我是如何使用sketch measure的。
 
 
  1. 设计画板尺寸定义:目前我习惯于375x667的尺寸进行设计,由于这样可以更大范围的观察设计内容。所以我在输出的时候设置为1pt标准比例。⚠️ 如果你的设计稿是750进行设计的需要把比例调整到视网膜屏(retina)@2x 的方式。当然标注会智能的进行换算。
  2. 将设计完成的设计稿按需求进行调整。图标全部进行元件化(symbol),这样对于整个app的组织有良好的效率和统一性。
  3. 检查字体的统一性保证仅使用一种字体。(pingfang sc)不同平台根据平台规则使用。
  4. 对于细节的检查:任何元素的坐标及尺寸,都必须不能有小数点。都是整数。(分割线除外,有些单倍设计需要0.5pt的分割线。)

 
做好准备之后,开始进行标注和切图。

打开面板:

按顺序:对像进行遮盖标注。效果如下,能够说明图标的范围,通常我们都是透明背景,所以需要进行标示。

对像进行自身宽度高度的标注。效果如下,还可以分别进行设置。


选择单个对象,是将当前对象在画板中的坐标标注出来,选择两个对象,则会将选中的两个对象中间的间距标注出来。非常智能。

这个不常用。因为选中字体时,会有完整的字体样式。这个是用来标注字体样式的。

备注,有什么表(tu)白(chao)想对开发说。打好文字后,点它~


切片,使用sketch自身切刀工具即可。
颜色,可以将sketch中的调色板的色值填入,提供给开发。
导出,可以将标注倒出html文件。选择需要导出的画板。



隐藏/开启 标注显示
锁定/解锁 标注
设置,可以对文档比例进行设置,对未设置过的文档,第一次导出时会弹出设置对话框,进行比例设置。





根据选中的比例,measure会智能进行切换。如果需要给android小伙伴可以让他们调整下比例:

 
就可以完美的实现多平台使用了。
标注部分到这里结束了。
接下来就是切图了。
 
新版的sketch有这样个功能:


根据项目需要可以自定义切图规则。太棒了!当然希望utom大神更新下插件。将导出的资源也可以进行分组。哈哈哈。
⚠️:有个细节需要注意!sketch进行切图会只切内容大小。所以需要对切片进行调整。
 


这样就可以切出需要的尺寸了。 收起阅读 »

App Animations

2015-11-13.jpg


汇聚 App 的动效,寻找更多灵感 传送门
2015-11-13.jpg


汇聚 App 的动效,寻找更多灵感 传送门

iOS 9.1 将新增一系列 Emoji 表情


apple-emoji-ios-9-1.jpg


苹果的emoji 表情一直是有点「太少太迟」,但这是一切将在全新的iOS 9.1 系统上做出改变。目前仅提供为给开发者的测试版本,新的表情符号已经新鲜出炉。用户将欣喜地发现很多需求都被实现,包括「taco」图标,还有一些像是「money face」、「lemme think about it」、「2 chains」还加入了棺材、独角兽和漂浮的商人等等。将在9 月16 日iOS 9.1 更新后可以看到。
继续阅读 »

apple-emoji-ios-9-1.jpg


苹果的emoji 表情一直是有点「太少太迟」,但这是一切将在全新的iOS 9.1 系统上做出改变。目前仅提供为给开发者的测试版本,新的表情符号已经新鲜出炉。用户将欣喜地发现很多需求都被实现,包括「taco」图标,还有一些像是「money face」、「lemme think about it」、「2 chains」还加入了棺材、独角兽和漂浮的商人等等。将在9 月16 日iOS 9.1 更新后可以看到。
收起阅读 »

【转】译文用户研究中常提到的“场景”,到底是什么?


user-scenario-uxren-translate-00.jpg


用户到一个网站来,有什么样的目标,想解决什么样的问题,甚至用户如何通过这个网站来达到特定的目的,都可以通过场景的描述呈现出来。而这种场景描述,就像故事一样,告诉别人用户到你的网站来的原因和背景。

场景对于界面设计和可用性测试来说都是非常重要的。



一、在描述一个场景时,需要涵盖哪些方面呢?

一个好的场景在描述简洁的同时,还需要回答下列关键的问题

用户是谁?人物角色可以反映出网站真实的、主要的用户群体。
用户为什么来你的网站?如果可以的话,记下用户到你的网站来的动机和预期。
用户的目标是什么? 通过任务分析,你可以了解用户到你的网站来是想获得什么,进而可以知道你的网站需要做什么才能让用户满意的离开。
另外一些场景描述还可以回答以下的问题:

用户是如何通过网站完成自己的目标的?定义出用户如何在网站上完成自己的目标,并找出完成目标过程中的多种可能性和任何潜在的问题。


二、场景的类型

类型1:基于目标或者任务的场景

只描述用户想做什么,不包含用户如何完成任务的任何信息。这种类型的场景在确定网站架构和内容的时候作用较大。

在可用性测试的时候,测试人员提供给用户的就是这类场景:给用户一个背景信息及操作任务,让用户进行操作,并观察他们是如何完成任务的。

例子:

例子:一个家长因为他10岁大的孩子不肯喝牛奶非常着急,他很想知道是不是不喝牛奶导致了孩子缺钙。
例子:下周你要到西雅图出差,你需要确定一下你可以报销的餐费和其他费用的金额是多少。
类型2:精细化的场景

提供了更多的用户使用细节。这些细节能帮助网站团队更深入的理解用户特征及这些特征是如何帮助或阻碍他们在网站上的行为。知道了这些信息,团队更容易设计出让用户更舒服、更易操作的内容、功能和网站流程。

例子:

马科姆先生和他的太太,今年70岁,作为退休教师,社会保险支票是他们收入的重要来源。最近,他们卖掉了以前住的大房子,搬到了一个小公寓。
在众多需要处理的事情当中,通知社会保障局他们搬家了是其中一件比较重要的事情。他们不知道新公寓附近哪儿有社保局的办事处,同时开车或者步行找到社保局对他们来说也不是件容易的事情了。如果足够方便和安全,他们更愿意上网来通知社保局他们已经搬家了。
但是,他们对于用电脑操作这件事情非常紧张,因为在此之前他们从没有用过电脑来工作。虽然他们的儿子Steve去年给了他们一台电脑,帮他们做好了设置,并教会了他们怎么上网和使用邮箱。但他们从来没有登录过社会保障局的网站,因此他们不了解这个网站的架构,以及网站上的信息是如何组织的。
此外,他们也不愿意通过线上的形式透露个人信息,因此他们想知道通过这种形式告诉社保局他们的新地址是否足够安全。
类型3:全面的场景描述

除了背景信息之外,还包含了用户完成任务的所有操作步骤。它既可以用来完整地呈现用户完成某个任务的所有操作步骤,也可以用来展示新网站中,你计划让用户进行的操作步骤。这种类型的场景跟用例很像,但它更多站在了用户角度而不是网站的角度,它很好的解释了用户是如何利用网站一步步操作完成自己的目标的。



三、在网站设计中运用场景

把每个用户访问网站每一个的场景都呈现出来是不现实的,但是,在设计这个网站之前,你可以先写下10-30个你认为的用户想访问你的网站的原因或者用户希望通过网站完成的任务。

场景和人物角色还可以结合起来,分类呈现不同类型的用户到网站来的原因,有什么样的需求,揭示出“什么样的人”在“什么样的场景”下会有“什么样的行为”。

场景和人物角色可以通过故事的方式结合起来:为什么某类用户会来你的网站?他们来网站希望做什么?这类用户有什么特征?这些特征怎么影响到他们在网站上的行为的?

因此,设计一个网站的关注点应该在用户以及他们想达成的目标,而不是网站的组织和内在架构。知道了用户的需求后,网站的内容及架构该怎么呈现也就不言自明了。



四、在可用性测试中使用任务场景

在为可用性测试设置场景时,考虑到时间的关系,测试任务不宜多于10-12个。此外,在测试中,你还可以询问用户自己的场景,他们为什么到你的网站来,他们想通过你的网站获得什么。

可用性测试中,避免通过场景告诉用户如何去完成一个任务,而应该在测试中观察用户是如何完成任务的,并根据用户的操作情况来判断当前网站的设计是否能够帮助用户在特定的场景下顺利的完成任务。

可用性测试的场景中不能包含任何告诉用户该如何完成任务的信息。可用性测试过程会呈现出用户是如何完成任务的,并且能告诉你这个页面是推动还是阻碍了这个任务的完成。

在正式测试前,你需要写下你预期的用户是如何完成这个任务的所有路径和步骤,包括用户可能使用的主要的入口或者其他的入口,供给观察人员和记录人员在测试中使用。而在测试后,可对比下你的预期过程和用户完成任务的真实过程,这个对比过程有助于思考你的网站的架构和导航的效率。





版权所有:UXRen翻译组

除转载文章外,本站所有文章版权归13Tech及UXRen社区所有,转载请务必标明以上3条信息(来源、译者和审校者),如未标注,视为侵权,13Tech及UXRen社区保留随时追责的权利。

译者:fudan

审校:fly



原文链接:http://www.usability.gov/how-t ... .html
顶部图片来源:http://i.msdn.microsoft.com
继续阅读 »

user-scenario-uxren-translate-00.jpg


用户到一个网站来,有什么样的目标,想解决什么样的问题,甚至用户如何通过这个网站来达到特定的目的,都可以通过场景的描述呈现出来。而这种场景描述,就像故事一样,告诉别人用户到你的网站来的原因和背景。

场景对于界面设计和可用性测试来说都是非常重要的。



一、在描述一个场景时,需要涵盖哪些方面呢?

一个好的场景在描述简洁的同时,还需要回答下列关键的问题

用户是谁?人物角色可以反映出网站真实的、主要的用户群体。
用户为什么来你的网站?如果可以的话,记下用户到你的网站来的动机和预期。
用户的目标是什么? 通过任务分析,你可以了解用户到你的网站来是想获得什么,进而可以知道你的网站需要做什么才能让用户满意的离开。
另外一些场景描述还可以回答以下的问题:

用户是如何通过网站完成自己的目标的?定义出用户如何在网站上完成自己的目标,并找出完成目标过程中的多种可能性和任何潜在的问题。


二、场景的类型

类型1:基于目标或者任务的场景

只描述用户想做什么,不包含用户如何完成任务的任何信息。这种类型的场景在确定网站架构和内容的时候作用较大。

在可用性测试的时候,测试人员提供给用户的就是这类场景:给用户一个背景信息及操作任务,让用户进行操作,并观察他们是如何完成任务的。

例子:

例子:一个家长因为他10岁大的孩子不肯喝牛奶非常着急,他很想知道是不是不喝牛奶导致了孩子缺钙。
例子:下周你要到西雅图出差,你需要确定一下你可以报销的餐费和其他费用的金额是多少。
类型2:精细化的场景

提供了更多的用户使用细节。这些细节能帮助网站团队更深入的理解用户特征及这些特征是如何帮助或阻碍他们在网站上的行为。知道了这些信息,团队更容易设计出让用户更舒服、更易操作的内容、功能和网站流程。

例子:

马科姆先生和他的太太,今年70岁,作为退休教师,社会保险支票是他们收入的重要来源。最近,他们卖掉了以前住的大房子,搬到了一个小公寓。
在众多需要处理的事情当中,通知社会保障局他们搬家了是其中一件比较重要的事情。他们不知道新公寓附近哪儿有社保局的办事处,同时开车或者步行找到社保局对他们来说也不是件容易的事情了。如果足够方便和安全,他们更愿意上网来通知社保局他们已经搬家了。
但是,他们对于用电脑操作这件事情非常紧张,因为在此之前他们从没有用过电脑来工作。虽然他们的儿子Steve去年给了他们一台电脑,帮他们做好了设置,并教会了他们怎么上网和使用邮箱。但他们从来没有登录过社会保障局的网站,因此他们不了解这个网站的架构,以及网站上的信息是如何组织的。
此外,他们也不愿意通过线上的形式透露个人信息,因此他们想知道通过这种形式告诉社保局他们的新地址是否足够安全。
类型3:全面的场景描述

除了背景信息之外,还包含了用户完成任务的所有操作步骤。它既可以用来完整地呈现用户完成某个任务的所有操作步骤,也可以用来展示新网站中,你计划让用户进行的操作步骤。这种类型的场景跟用例很像,但它更多站在了用户角度而不是网站的角度,它很好的解释了用户是如何利用网站一步步操作完成自己的目标的。



三、在网站设计中运用场景

把每个用户访问网站每一个的场景都呈现出来是不现实的,但是,在设计这个网站之前,你可以先写下10-30个你认为的用户想访问你的网站的原因或者用户希望通过网站完成的任务。

场景和人物角色还可以结合起来,分类呈现不同类型的用户到网站来的原因,有什么样的需求,揭示出“什么样的人”在“什么样的场景”下会有“什么样的行为”。

场景和人物角色可以通过故事的方式结合起来:为什么某类用户会来你的网站?他们来网站希望做什么?这类用户有什么特征?这些特征怎么影响到他们在网站上的行为的?

因此,设计一个网站的关注点应该在用户以及他们想达成的目标,而不是网站的组织和内在架构。知道了用户的需求后,网站的内容及架构该怎么呈现也就不言自明了。



四、在可用性测试中使用任务场景

在为可用性测试设置场景时,考虑到时间的关系,测试任务不宜多于10-12个。此外,在测试中,你还可以询问用户自己的场景,他们为什么到你的网站来,他们想通过你的网站获得什么。

可用性测试中,避免通过场景告诉用户如何去完成一个任务,而应该在测试中观察用户是如何完成任务的,并根据用户的操作情况来判断当前网站的设计是否能够帮助用户在特定的场景下顺利的完成任务。

可用性测试的场景中不能包含任何告诉用户该如何完成任务的信息。可用性测试过程会呈现出用户是如何完成任务的,并且能告诉你这个页面是推动还是阻碍了这个任务的完成。

在正式测试前,你需要写下你预期的用户是如何完成这个任务的所有路径和步骤,包括用户可能使用的主要的入口或者其他的入口,供给观察人员和记录人员在测试中使用。而在测试后,可对比下你的预期过程和用户完成任务的真实过程,这个对比过程有助于思考你的网站的架构和导航的效率。





版权所有:UXRen翻译组

除转载文章外,本站所有文章版权归13Tech及UXRen社区所有,转载请务必标明以上3条信息(来源、译者和审校者),如未标注,视为侵权,13Tech及UXRen社区保留随时追责的权利。

译者:fudan

审校:fly



原文链接:http://www.usability.gov/how-t ... .html
顶部图片来源:http://i.msdn.microsoft.com 收起阅读 »

【转】先从视觉聊产品设计(上)

发现身边某些产品小伙伴是不怎么重视视觉设计,今儿又是一个酷酷的周末,敲敲键盘。

我们所接受的外界信息有差不多80%都来自视觉,而视觉传达对互联网产品的重要性更明显,我们所用到的无非:视觉,触觉,听觉。至于嗅觉和味觉,帅得屏幕啥的,以及当年乔帮主介绍iPhone的拟物UI时说让人有想舔屏幕的冲动所引发的味觉感受依然来自于视觉刺激。

从图标说起
对于一款新APP来说,用户真正开始认识我们的APP是从我们的图标开始的,而这个 图标设计是否精致漂亮,风格与产品定位,产品的整体视觉表现是否一致,图标是应用品牌的重要组成部分。而对于用户第一次看到图标时,便开始形成对产品的第一印象,用户在不了解应用产品时,会通过对图标的印象,判断该应用的品质,作用,以及可靠性。比如支付类的应用图标,除了精致漂亮,视觉传达给用户的感觉是稳定,可靠,安全。

324947-ffb58c7aec4edef1.jpg


他们有什么共同点?假如我们对以上两款支付应用都毫不知情,只知道是两款不同的支付应用,只看图标选择唯一一款支付应用使用,你会选哪一款?(我选支付宝)

到应用商店搜了一下财付通的评价

324947-20c2698d4091d2bb.jpg

由于财付通界面“山寨” 导致 用户怀疑“是不是假的”,最终必然是 用户放弃使用,而“山寨”的感觉来源于视觉没有传达给用户“正品”该有的感觉。

再看两款应用图标吧:美团 大众点评

324947-e1e94ed8d0e5ec23.png


图标就说到这...

接着说APP的引导页和启动页。


引导页

**当用户第一次打开一款APP的时候往往都会设计引导页。
按目的:一般分为:功能介绍类、使用说明类、推广类、问题解决类,页数一般不会超过5页,我个人认为3页恰好,5页过多,折中的做法是用户可以选择:掉过引导**

按表现形式:图片,动效,视频,+音效

图片和动效果是常用的形式,视频则多用于一些很需要走心的产品,(废话)比如最美时光

324947-9118b839f8c3e330.jpg

引导页使用的一段精心制作的关于时光的视频,容易引起用户的共鸣,同时也传到了产品的价值。不过若我是产品经理,视频的色调会使用黑白的怀旧色调,烘托出一种时光荏苒的氛围,而整个内容页的设计至少色彩也不会用的如此高亮鲜艳,不过到也符合最美出品的风格。



现在的APP基本都有启动页(微信的启动页:小人看地球),也有一些没有启动页(知乎:直接打开)。

启动页的形式包括:图片,动画

启动页的内容包括:广告,,LOGO,或者用户使用场景等等

而对于一款app,

一,是否需要启动页。

占领用户碎片化时间的应用大多不应该有启动页,比如知乎,印象笔记,以及一些资讯类的客户端,不应该增加用户的时间成本,如此得不偿失。

二,需要哪种形式的启动页。(图片,动画,还是其他什么形式)

三,放什么内容,内容需要什么样的表现形式?(需要传达给用户的是什么内容,怎样传达,是文字还是图片,还是文字加图片,是黑白色调还是炫酷的彩色调调。是动态静态,时间多长,是初次启动需要还是每次启动都需要,字体用电脑字体还是手写体,等等等等等都需要精致的打磨,不一一列举)

这些都需要对产品定位,用户需求,用户体验,使用场景等有着深刻透彻的思考以权衡:(视觉服从于内容,内容服从于需求,需求求于商业需要)

324947-713ef4f2cbcd1317.jpg


324947-ad19a80ed71f4b37.jpg


优秀的APP设计,每一个细节都可以看到细节的打磨。

写到这里,发现一个严重的问题,对于整个视觉的设计并不是有着特别自信,因为我自身做过的视觉并不多,更多的是从产品的角度思考,而产品我自身也是一只小小菜鸟,不过想想,这又何妨我对产品的思考和评价,那就找几款具体的产品来聊聊好啦。

接着说APP的首页
本想找一款小众的APP说说,说错了也没人知道,不过这样哪来的挑战。

那就挑微信吧,-。-

关于微信,之前在网上看到一道关于微信的产品题,据说是微信的产品经理笔试题:为什么微信的首页是聊天列表,而不是朋友圈?

看了一些答案觉得都写的多少拖泥带水,在我看来:对于一款APP产品来说,首页往往就是这款产品对于用户的核心需求所在,而核心需求决定该产品的产品定位。微信的产品定位是什么?抛开如今微信正在想着连接一切的野心不说,那之前的微信的产品定位是什么,我给的定义是:E-message。E-message不知这样的翻译是否正确,好比:传统纸质邮件与E-Mail:网络邮件,而微信则是:网络短信。

所以之前看到什么说,微信抢了运营商的短信收入,那真是拍手叫好。只能发送短短的几个文字的信息的短信那是功能机时代的短信,智能手机上的短信有了移动网络的支撑,短信自然应该睡着时代升级进化,可以发语音,发图片,这便是微信。微信既然是一款“E-短信”,聊天列表自然应该在首页。所以陌陌的首页为什是“附近”,简书的移动端APP首页为什么是“热门”,同样的思考方式。

看一款产品的核心在哪,那就看它少了那一块会暴毙。(而朋友圈呢,为什么微信还有朋友圈,朋友圈和空间有何不同?容我再想想。(这跟视觉有什么卵关系吗?当然,首页不是你视觉接触到的吗,难道是嗅觉不成)

好像说了一堆很空的东西,说点实在的吧。发现拖太长了,那放下一篇继续写...

未完待续...

作者:WLENNON
继续阅读 »
发现身边某些产品小伙伴是不怎么重视视觉设计,今儿又是一个酷酷的周末,敲敲键盘。

我们所接受的外界信息有差不多80%都来自视觉,而视觉传达对互联网产品的重要性更明显,我们所用到的无非:视觉,触觉,听觉。至于嗅觉和味觉,帅得屏幕啥的,以及当年乔帮主介绍iPhone的拟物UI时说让人有想舔屏幕的冲动所引发的味觉感受依然来自于视觉刺激。

从图标说起
对于一款新APP来说,用户真正开始认识我们的APP是从我们的图标开始的,而这个 图标设计是否精致漂亮,风格与产品定位,产品的整体视觉表现是否一致,图标是应用品牌的重要组成部分。而对于用户第一次看到图标时,便开始形成对产品的第一印象,用户在不了解应用产品时,会通过对图标的印象,判断该应用的品质,作用,以及可靠性。比如支付类的应用图标,除了精致漂亮,视觉传达给用户的感觉是稳定,可靠,安全。

324947-ffb58c7aec4edef1.jpg


他们有什么共同点?假如我们对以上两款支付应用都毫不知情,只知道是两款不同的支付应用,只看图标选择唯一一款支付应用使用,你会选哪一款?(我选支付宝)

到应用商店搜了一下财付通的评价

324947-20c2698d4091d2bb.jpg

由于财付通界面“山寨” 导致 用户怀疑“是不是假的”,最终必然是 用户放弃使用,而“山寨”的感觉来源于视觉没有传达给用户“正品”该有的感觉。

再看两款应用图标吧:美团 大众点评

324947-e1e94ed8d0e5ec23.png


图标就说到这...

接着说APP的引导页和启动页。


引导页

**当用户第一次打开一款APP的时候往往都会设计引导页。
按目的:一般分为:功能介绍类、使用说明类、推广类、问题解决类,页数一般不会超过5页,我个人认为3页恰好,5页过多,折中的做法是用户可以选择:掉过引导**

按表现形式:图片,动效,视频,+音效

图片和动效果是常用的形式,视频则多用于一些很需要走心的产品,(废话)比如最美时光

324947-9118b839f8c3e330.jpg

引导页使用的一段精心制作的关于时光的视频,容易引起用户的共鸣,同时也传到了产品的价值。不过若我是产品经理,视频的色调会使用黑白的怀旧色调,烘托出一种时光荏苒的氛围,而整个内容页的设计至少色彩也不会用的如此高亮鲜艳,不过到也符合最美出品的风格。



现在的APP基本都有启动页(微信的启动页:小人看地球),也有一些没有启动页(知乎:直接打开)。

启动页的形式包括:图片,动画

启动页的内容包括:广告,,LOGO,或者用户使用场景等等

而对于一款app,

一,是否需要启动页。

占领用户碎片化时间的应用大多不应该有启动页,比如知乎,印象笔记,以及一些资讯类的客户端,不应该增加用户的时间成本,如此得不偿失。

二,需要哪种形式的启动页。(图片,动画,还是其他什么形式)

三,放什么内容,内容需要什么样的表现形式?(需要传达给用户的是什么内容,怎样传达,是文字还是图片,还是文字加图片,是黑白色调还是炫酷的彩色调调。是动态静态,时间多长,是初次启动需要还是每次启动都需要,字体用电脑字体还是手写体,等等等等等都需要精致的打磨,不一一列举)

这些都需要对产品定位,用户需求,用户体验,使用场景等有着深刻透彻的思考以权衡:(视觉服从于内容,内容服从于需求,需求求于商业需要)

324947-713ef4f2cbcd1317.jpg


324947-ad19a80ed71f4b37.jpg


优秀的APP设计,每一个细节都可以看到细节的打磨。

写到这里,发现一个严重的问题,对于整个视觉的设计并不是有着特别自信,因为我自身做过的视觉并不多,更多的是从产品的角度思考,而产品我自身也是一只小小菜鸟,不过想想,这又何妨我对产品的思考和评价,那就找几款具体的产品来聊聊好啦。

接着说APP的首页
本想找一款小众的APP说说,说错了也没人知道,不过这样哪来的挑战。

那就挑微信吧,-。-

关于微信,之前在网上看到一道关于微信的产品题,据说是微信的产品经理笔试题:为什么微信的首页是聊天列表,而不是朋友圈?

看了一些答案觉得都写的多少拖泥带水,在我看来:对于一款APP产品来说,首页往往就是这款产品对于用户的核心需求所在,而核心需求决定该产品的产品定位。微信的产品定位是什么?抛开如今微信正在想着连接一切的野心不说,那之前的微信的产品定位是什么,我给的定义是:E-message。E-message不知这样的翻译是否正确,好比:传统纸质邮件与E-Mail:网络邮件,而微信则是:网络短信。

所以之前看到什么说,微信抢了运营商的短信收入,那真是拍手叫好。只能发送短短的几个文字的信息的短信那是功能机时代的短信,智能手机上的短信有了移动网络的支撑,短信自然应该睡着时代升级进化,可以发语音,发图片,这便是微信。微信既然是一款“E-短信”,聊天列表自然应该在首页。所以陌陌的首页为什是“附近”,简书的移动端APP首页为什么是“热门”,同样的思考方式。

看一款产品的核心在哪,那就看它少了那一块会暴毙。(而朋友圈呢,为什么微信还有朋友圈,朋友圈和空间有何不同?容我再想想。(这跟视觉有什么卵关系吗?当然,首页不是你视觉接触到的吗,难道是嗅觉不成)

好像说了一堆很空的东西,说点实在的吧。发现拖太长了,那放下一篇继续写...

未完待续...

作者:WLENNON 收起阅读 »

MacBook Pro 外接 DELL 显示器,如何设置外接显示器竖屏显示、Pro 的 LCD 仍然横屏?

#我这边装备:

* MacBook Pro Retina 15寸
* HDMI 转 VGA接口
* DELL U系列 23.6寸显示器


#调整步骤:

    []系统设置偏好 -> 显示器 -> 点击排列 -> 镜像显示器 的√打上。[/][]然后切换回 显示器 此分类 -> 看到下面 的旋转了么? 调整旋转90度[/]
2015-5-23.jpg


    []RMBP的显示器 也竖屏了对吧, 然后最后黑魔法 关闭镜像。 主屏幕恢复了正常的横屏了有没有?[/]
继续阅读 »
#我这边装备:

* MacBook Pro Retina 15寸
* HDMI 转 VGA接口
* DELL U系列 23.6寸显示器


#调整步骤:

    []系统设置偏好 -> 显示器 -> 点击排列 -> 镜像显示器 的√打上。[/][]然后切换回 显示器 此分类 -> 看到下面 的旋转了么? 调整旋转90度[/]
2015-5-23.jpg


    []RMBP的显示器 也竖屏了对吧, 然后最后黑魔法 关闭镜像。 主屏幕恢复了正常的横屏了有没有?[/]
收起阅读 »

MaterialUp - 寻找材料设计灵感必备的网站

MaterialUp 是一个展示最好的材料设计 APP,网站和概念的地方,每天都会更新。每款设计都精心挑选,展示那些有才华的设计师的伟大工作。 MaterialUp 的核心价值是让尽可能多的设计师提供有价值灵感。

2015-4-25.png


传送门
继续阅读 »
MaterialUp 是一个展示最好的材料设计 APP,网站和概念的地方,每天都会更新。每款设计都精心挑选,展示那些有才华的设计师的伟大工作。 MaterialUp 的核心价值是让尽可能多的设计师提供有价值灵感。

2015-4-25.png


传送门 收起阅读 »

怎样做出优秀的扁平化设计风格 PPT 或 Keynote 幻灯片演示文稿?-转自知乎

因为工作的关系,我经常需要做PPT。当时看到这个题目的时候,就好奇着点进来看看大家是怎么做的,我也学习一下~ 看了一圈收获良多,尤其最高票的答案,虽然并不完全在讲述扁平化,但关于PPT的各种制作技巧和方法,已经总结得很棒了,非常值得收藏。

平常我做PPT的时候,是以简洁明了作为原则的。而扁平化、拟物化之类的风格,还是在看了这个题目之后才去做了一定程度的了解和思考。这个过程对我来说受益无穷。

当时答案里关于中文的例子很少,我在想要不要自己动手做一个,顺便把过程写出来?虽然我也不知道题主说的“设计理念”和“技术要求”这种东西,要怎么讲才合适…总之先试试看吧。嗯...然后我就开工了。(整体效果可以移步分割线,快速浏览原文图片)

总的来说,问题…还真的不少,大家也都指出来了:

1、配色。封面封底的无色系和内容的彩色系,这样搭确实不太恰当。好比打开一个黑乎乎的盒子里面却是满满的彩虹糖…多少有种奇怪的感觉吧。而且在配色上也有待改进。

@Hendersen 渐变色的RGB数值:


2、字号。10号确实小了。其实作为标题的点缀,我是刻意用这么小的字号的…事实证明,不作不死啊= =

3、图片。除了背景用到的那张,其他的我都没放。照理说讲到图片排版的时候,最好是有示例,但我缺失了…直接体现就是不够直观。还有音乐、视频、动画等,我当时想既然没法儿直接演示,那干脆就不放了。然后做完了一看,貌似太简陋了点?= = 后来事情一忙也就忘了……

4、软件。有知友明确表示不喜欢WPS。介个…我完全理解。我本身也会因为各种原因而拒用一款产品。我的老板给大伙儿电脑装的办公软件就这个,大概是因为它免费?= =然后为了避免发来发去的时候格式错乱不兼容等问题,我也没换别的软件。而且用起来感觉也还好,虽然部分功能残缺但本身利用率也不高就没去管它。其实,主要就是懒啊……

Office 2003/2007/2010这些版本我都用过,现在我私人的电脑用的是Office 2013,虽然用的时间不久,但感觉很棒,效果拔群。尤其“取色器”这个功能简直太贴心了!大爱!不过格式兼容的问题还是略遗憾,所以我只好两个都装着。不过我觉得,不管我事先申明的是哪个软件,恐怕都有人不喜欢吧?众口难调呀~

Keynote没用过,就不发表意见了,等哪天我换苹果的时候再来研究。

谢谢 @VinnyXiong 的指正:“你贴的图用的软件是“WPS演示”,简称WPP,PPT是 Powerpoint的简称。”我以前还真不知道它们的称呼有差…涨知识了~

5、效果。有些大牛做的模板很高大上很成熟,直接拿来套用效果非常惊艳。但是如果把我做的这份当模板,那你多半会失望了。在实际的应用中,这种大色块+纯文字的方式还蛮边缘的…工作中的PPT,通常会用更丰富的元素和内容去填充,包括线条、图形、图表、图片、音效、动画效果、视频、链接等等。制作的复杂程度是这份回答的N倍。而这些元素和内容,在我的答案里,几乎都没用到。所以…你多半会失望的。

6、方法。有知友说不知道要怎么做,问我能教教吗?介个…如果没有十足的把握,我是不敢随便教哒,笑。我这种不靠谱的,肯定会把你带歪的…要说方法的话,我自己也是一边做一边摸索的。多看多做多感悟吧。慢慢的,就会从量变引发质变了。我还在量变的路上…说起来,也是在写了这份答案之后,我才加大了对PPT制作的关注度,发现有很多不错的资源可以用起来,也在此推荐给大家:
⑴ 花瓣网_图片社交领导者,发现、采集你喜欢的一切
⑵ 优美图 - 收录优美图片 TOPIT.ME
⑶ 堆糖,分享收集生活中的美好,遇见世界上的另外一个你。
http://yestone.com/ 邑石网_高品质的版权图片及商业正版图片素材提供商
⑸ 千图网_中国最大免费素材下载网站
⑹ 全景图片_中国最大的图片库和图片素材网站
⑺ UI设计网-专业探讨ui设计
⑻ 矢量素材设计,图库,广告素材,平面素材,设计素材,素材库(视觉中国下载吧)
⑼ 优设-UISDC: 优秀网页设计联盟-SDC-网页设计师交流平台 (非常强大,好用到哭)
⑽ Icon Search Engine (图标搜索引擎)
⑾ Discover — Art & Design Inspiration at ColRD.com (配色)
⑿ 中国顶级原创PPT模板和KEYNOTE模板下载的高端平台-PPTSTORE (牛人聚集,果断收藏)(这么棒的资源,为什么我发现得这么晚……)
⒀ Sina Visitor System (我爱PPT的微博)
⒁ flatppt(嘉文钱的微信号)(他写的《PPT扁平化风格设计手册》教程超棒的!强烈推荐!)(我答完后的某天去仔细看了一遍他的教程,觉得自己好蠢啊居然这么晚才去看!)
⒂ PPT100(幻方秋叶PPT的微信号)(可以学到很多PPT制作的技巧)
(更多待补充,慢慢填……)

7、其他。仔细一看,千疮百孔啊T-T…还有很多,不细说了。如果把以上问题都改掉的话,原来的那份回答也就面目全非了。所以虽然不咋滴,我还是决定保留着。只能说当时就这水平吧,放在这里给自己提个醒。感谢所有耐心看完本文的知友,这篇回答确实蛮话唠的,囧。评价不管好坏我都会照单全收,有则改之无则加勉,晚安~

—————————————— 很直的分割线,以下是原文 ——————————————

2014.4.14 发布
我发现有一个现象还蛮有趣的,那就是,凡是关于产品设计、UI设计、平面设计之类的问题,基本都会搬出英文(各种外语)版的来作答,貌似大部分跟设计有关的事儿都是这样.

还有一点,不少设计师做PPT喜欢用AI、Photoshop、CorelDRAW等设计软件,做完了再搬到Powerpoint里头,但就是不喜欢直接用Powerpoint,这是为什么呢?

其实Powerpoint本身也是很强大的嘛,把工具充分利用起来,可是潜力无限的哟~ 尤其是当年看到有人用Word做了个动画片头,我和我的室友们都被华丽丽地震撼了啊!

那么,如果我们想做一个完全中文版的PPT,一个以中文来思考的扁平化PPT,该怎么做呢?

设计没有唯一和统一的答案,扁平化也只不过是万千设计形式中的一种.用的人多了,好像就变成了趋势.根据题主的疑问,我们或许可以试一试,将制作的过程呈现出来,以帮助理解.

长文,多图,慎入.

首先申明我用的办公软件是某山的WPS(某山你是不是该给我点儿广告费?),理由有两个:1、好用;2、LOGO和界面都不丑.是的,我是一个非常严重的、肤浅的——外貌党.

双击Powerpoint,我们撞见了巨大的黄底白字,几秒的静默之后,一个空白的世界展开了.

在动工之前我们得思考一个(才不止一个呢)问题:
1、我要做啥?—— 一个扁平化的中文PPT;
2、内容呢?—— 跟制作扁平化的中文PPT相关的一切(才不是一切呢);
3、思路呢?—— 我心里有数(请把思路可视化,谢谢);
4、效果呢?—— 看完你就明白了(看不明白我就揍你).

做PPT最简单也是最直接有效的思路,就是把我们需要表达的内容按一定的演示逻辑排列好,以视觉(必要时得视听结合)形式呈现.但必须记住,听觉也是很重要的部分,因为观众在看的同时,也在听你的讲述.配合得当,才会相互加分.

在确定了主题、准备好内容之后,我们可以开始动工了.

——等等,你就这么直接在第一张PPT上敲大标题了吗?
——是啊...有什么问题吗?
——是不是还漏了点啥?(少年,你用这么纯真迷茫的眼神看着我,我会想虐你的)
——啥?

PPT的尺寸啊!骚年!


不要告诉我你一直用的都是这个默认的数值,从来没想过点开来换个高矮胖瘦试试.
考虑到现实里常用的投影屏幕都是这个默认的比例,也确实可以不做更改.
那么现在,反正没啥限制,我们不妨试着设置一个看起来更舒服点儿的显示比例吧 ~
举个栗子:宽25.4cm,高17cm.嗯,我喜欢扁一点儿的(喂).

注意,尺寸最好事先就设定好,如果做完了再改尺寸,图片和文字都会按照一定的比例发生形变.到时候再来一点点调,会累死.

好了,不多折腾了,开始进入正题.


第一步,敲上本次PPT的大名:《怎样制作扁平化PPT》.

这个PPT讲的是跟扁平化相关的东西,
那么我希望视觉呈现也是扁平化的,以达到形式和内容的统一.

既然是扁平化,那就不要考虑太立体的东西.
但是空间感呢,也不要那么狠心地就完全抛弃嘛,大家还是可以友好相处的.

大名敲完之后,试了试全一排和上下两排.
“PPT”是英文,在中文世界里,它被视作一种图形符号.甭管你英文再好,眼睛看着就是觉得不一样.与其和中文们混在一起,还不如自成一格(才不是闹别扭呢,哼).

一般我做PPT的默认字体是微软雅黑,相对通用,作为非衬线字体也较为简洁.
既然是扁平化,字体就不要搞得太复杂.

然后开始考虑文字的颜色.其实这得和底色、背景一起考虑.
简而言之,这是个纠结的过程(以下500字可略过不看).

文字敲完之后是大面积的空白,我想给文字加个底色,用以去除画面的单调感和过多的苍白感.
我本人是偏爱蓝色的,把底色设置成蓝色可不可以呢?当然可以啊,为啥不行?那么接下来的问题就是,用哪个色值的蓝色更好呢?如果字色是白色,那么哪种蓝色和白色搭配可以看起来更舒服,使画面更干净?……这种问题只能自己和自己妥协(撕咬).
完了之后给底色再加个框.长条,宽条,圆的,方的,三角,异形?最后我决定用点小圆角,给人一种稳重而无害的赶脚.
我还需要一张图作为背景,要求是模糊的、虚化的、朦朦胧胧看不清的,整体色彩搭配舒服的.当然这样的图搜一搜还是有不少的,想到版权问题,于是就从自己拍的照片里找了一张= =
可是,为毛能用的偏偏只有黑白哒?!为毛我平常都不拍点有用的照片啊?!泪流...
算了那就索性黑白配吧,其他颜色也不瞎搞了.这么一合计,总算是定好了封面的基本色调——无色系.
诶,好像还少了点什么昂?
版权归属,嗯,作为完全私人化的PPT,那就写上自己的大名吧.我是个低调的人,字号就小一点吧.和背景的线条融为一体...那大家还看得到我嘛?也加个框吧,和题目齐宽.框的颜色呢,一样吧.和题目那个框的间隙呢,唔,这样差不多了.居中,对齐.嗯,规整了.总算安抚了看到不对齐的东西就会迅速发作的强迫症.

终于!这个纠结帝的第一张PPT!终!于!做!好!了!

如您所见,这才只是个开始.


如果想要把“扁平化的设计理念”融入到PPT制作中去,那么我们首先得对“扁平化”有点儿了解.正所谓理论和实践的结合嘛.很多时候我们说不清概念本身,因为概念并非一成不变,超出一定的范围可能就是谬误.但为了便于记忆和阐释,我们会用一些关键词来标注它.

如上图所示,我选了“二维、抽象、简洁”这样三个关键词,并使用了图形和底色(底色以RGB为参考).当背景本身的颜色对色块的干扰较少时,我们可以试试加入一点儿透明效果.就像这样:

PS1:背景线条(多条曲线的交织)会不会有点复杂,影响视觉效果?
PS2:其实本来打算用蒙德里安的代表作当背景,有点难搭,遂放弃= =
PS3:这三个关键词仅作示意,并不绝对,欢迎探讨~

那么,在我们对“扁平化的设计理念”有了一定的了解之后,可以采用哪些方式去达到“扁平化”效果呢?

要细分起来真的可以说很多,为了避免信息过载而造成头晕症状,我们将文字信息也进行大幅度的简化,挑重点的几个讲讲.

整体

我们可以从以上三个方面去指导PPT的制作过程并进行测试,看看最终的效果是符合还是背离.
每个方面用同色系、不同色值的大色块进行区分,(顺便还)具有一定的渐变效果.

PPT另存成图片后字就不怎么清晰了囧,现在把文字内容再赘述如下:

内容的连贯
整个PPT的内容安排合理富有逻辑,
演示PPT的人心里非常清楚自己需要表达什么,向谁表达,以及,如何表达
视听的舒畅
不光是视觉,还有听觉,
每个微小的细节偏颇,都有可能破坏观众对整个PPT的良好印象
设计的扁平
放弃立体感吧,少年!
记住,此刻,你活在二维世界里,躺平了,深呼吸,让一切回归简洁,少即是多

鉴于我们本次的主题是设计,因此其他的不做展开.

色彩

为什么在色彩部分提出了“点线面构成”呢?
因为在制作时我们必须面对PPT这个平面,并对它进行解构和再创作.
而在扁平化设计里,色块是非常重要的组成部分,它们本身就能转化成点、线、面,构成格局,撑起整个平面.

点线面构成
PPT中的每一个符号、线条、色块分布,
都以扁平化为目标而存在于这个扁平的空间之中,如果它们做出了奇怪的举动...
色块是关键
扁平化的关键是色块,注意,最好用纯色,少用渐变
色块本身有面的属性,能够区隔空间,试试让不同的色块带领你进入新世界的大门吧~

PS:这里的“少用渐变”是指少用那种中间有过渡色的渐变,而不是指由分明的色块组合起来的渐变.原因:1、渐变有一定的立体视觉效果;2、渐变用好了也没啥,用不好看起来会很low,破坏美感(= = #).

文字

在文字处理上,我们的要求只有一个:统一.

字体的统一
同一个PPT里不要用太多字体,2-3种足以;切记,少用斜体!看着真的很晕!
字号的统一
标题、副标题、正文内容,均设置统一的字号,需要特别突出的例外,但,尽量少用
字色的统一
太花就失去了重点,越想突出反而越被淹没,花素搭配得当看起来才美味哟~

举个热乎的栗子:
本PPT的字体——微软雅黑
本PPT的字号——标题40号字,内容10号字
本PPT的字色——R255,G255,B255

统一的目的是为了画面的清爽,让信息以最有效的方式呈现,并快速传达给观众,避免不必要的干扰.

PS:考虑到PPT在投影设备上的实际播放效果,内容字号需要加大到12或14甚至更大的字号,根据现场进行酌情调整,一旦全部做成图片定死,那会比较悲剧.

图片

PPT里用到的图片主要分为两种:背景图、内容图(必要的插图、图表等).
用来当做背景的图,为了将多余的信息剔除,我们可以对图片进行模糊化处理(嗯,这时候需要Photoshop相助了),从而突出文字信息.
如果是内容图,单张的相对好处理,一旦图片数量多了不好好排列就会非常杂乱.
另外还有一点需要注意,在多张图片的呈现上,整体色调的把握也非常重要.你可以玩撞色玩渐变玩灰调,只要看起来不要太可怕就行.

模糊化处理
不以画面突出为目的,主要作为气氛的渲染,可以采用模糊化或虚化处理的方式
多图列整齐
当图片大于等于两张时,安排好每张图的位置,码整齐了,乱放真的会眼花!

有时候我们还会给图片(其实文字和图片都是)的播放加入一些动画效果,设置一定的动作路径,为了使视效流畅往往需要反复调试,很考验耐心.所以也有人喜欢用Flash做PPT...(你够)

扁平化设计其实很早就有,追根溯源可以到抽象派、包豪斯甚至更久远之前.
但为什么它会让人觉得好像是个新事物呢?
1、人们对新名词的陌生;
2、人们对历史所知甚少(包括我这个历史白痴);
3、诸如Win8、iOS7等大众较为熟知的操作系统界面先后采用了这一设计方式,让看惯了具象化设计的人们顿觉耳目一新,加之它们在设计界的影响力,助推了扁平化设计趋势,使之逐渐成为一股潮流.而潮流,仿佛总是新的.

一样事物从诞生之初到现在,已经经历了诸多衍变.它通过不断地自我调节来焕发生命力.我相信扁平化设计还会继续向前发展、进化,在无数设计师们的努力下探索出更多的新意.

最后,在“扁平化设计”这个名词本身就存在争议的情况下去谈论如何达到扁平化,总觉得有点悬,但居然也絮絮叨叨地说了这么多(捂脸).

说白了,其实做PPT是一个排版的过程.

虽然我不是设计师也不是编辑大人.唔...我是暂住在地球的外星人.:-P
继续阅读 »
因为工作的关系,我经常需要做PPT。当时看到这个题目的时候,就好奇着点进来看看大家是怎么做的,我也学习一下~ 看了一圈收获良多,尤其最高票的答案,虽然并不完全在讲述扁平化,但关于PPT的各种制作技巧和方法,已经总结得很棒了,非常值得收藏。

平常我做PPT的时候,是以简洁明了作为原则的。而扁平化、拟物化之类的风格,还是在看了这个题目之后才去做了一定程度的了解和思考。这个过程对我来说受益无穷。

当时答案里关于中文的例子很少,我在想要不要自己动手做一个,顺便把过程写出来?虽然我也不知道题主说的“设计理念”和“技术要求”这种东西,要怎么讲才合适…总之先试试看吧。嗯...然后我就开工了。(整体效果可以移步分割线,快速浏览原文图片)

总的来说,问题…还真的不少,大家也都指出来了:

1、配色。封面封底的无色系和内容的彩色系,这样搭确实不太恰当。好比打开一个黑乎乎的盒子里面却是满满的彩虹糖…多少有种奇怪的感觉吧。而且在配色上也有待改进。

@Hendersen 渐变色的RGB数值:


2、字号。10号确实小了。其实作为标题的点缀,我是刻意用这么小的字号的…事实证明,不作不死啊= =

3、图片。除了背景用到的那张,其他的我都没放。照理说讲到图片排版的时候,最好是有示例,但我缺失了…直接体现就是不够直观。还有音乐、视频、动画等,我当时想既然没法儿直接演示,那干脆就不放了。然后做完了一看,貌似太简陋了点?= = 后来事情一忙也就忘了……

4、软件。有知友明确表示不喜欢WPS。介个…我完全理解。我本身也会因为各种原因而拒用一款产品。我的老板给大伙儿电脑装的办公软件就这个,大概是因为它免费?= =然后为了避免发来发去的时候格式错乱不兼容等问题,我也没换别的软件。而且用起来感觉也还好,虽然部分功能残缺但本身利用率也不高就没去管它。其实,主要就是懒啊……

Office 2003/2007/2010这些版本我都用过,现在我私人的电脑用的是Office 2013,虽然用的时间不久,但感觉很棒,效果拔群。尤其“取色器”这个功能简直太贴心了!大爱!不过格式兼容的问题还是略遗憾,所以我只好两个都装着。不过我觉得,不管我事先申明的是哪个软件,恐怕都有人不喜欢吧?众口难调呀~

Keynote没用过,就不发表意见了,等哪天我换苹果的时候再来研究。

谢谢 @VinnyXiong 的指正:“你贴的图用的软件是“WPS演示”,简称WPP,PPT是 Powerpoint的简称。”我以前还真不知道它们的称呼有差…涨知识了~

5、效果。有些大牛做的模板很高大上很成熟,直接拿来套用效果非常惊艳。但是如果把我做的这份当模板,那你多半会失望了。在实际的应用中,这种大色块+纯文字的方式还蛮边缘的…工作中的PPT,通常会用更丰富的元素和内容去填充,包括线条、图形、图表、图片、音效、动画效果、视频、链接等等。制作的复杂程度是这份回答的N倍。而这些元素和内容,在我的答案里,几乎都没用到。所以…你多半会失望的。

6、方法。有知友说不知道要怎么做,问我能教教吗?介个…如果没有十足的把握,我是不敢随便教哒,笑。我这种不靠谱的,肯定会把你带歪的…要说方法的话,我自己也是一边做一边摸索的。多看多做多感悟吧。慢慢的,就会从量变引发质变了。我还在量变的路上…说起来,也是在写了这份答案之后,我才加大了对PPT制作的关注度,发现有很多不错的资源可以用起来,也在此推荐给大家:
⑴ 花瓣网_图片社交领导者,发现、采集你喜欢的一切
⑵ 优美图 - 收录优美图片 TOPIT.ME
⑶ 堆糖,分享收集生活中的美好,遇见世界上的另外一个你。
http://yestone.com/ 邑石网_高品质的版权图片及商业正版图片素材提供商
⑸ 千图网_中国最大免费素材下载网站
⑹ 全景图片_中国最大的图片库和图片素材网站
⑺ UI设计网-专业探讨ui设计
⑻ 矢量素材设计,图库,广告素材,平面素材,设计素材,素材库(视觉中国下载吧)
⑼ 优设-UISDC: 优秀网页设计联盟-SDC-网页设计师交流平台 (非常强大,好用到哭)
⑽ Icon Search Engine (图标搜索引擎)
⑾ Discover — Art & Design Inspiration at ColRD.com (配色)
⑿ 中国顶级原创PPT模板和KEYNOTE模板下载的高端平台-PPTSTORE (牛人聚集,果断收藏)(这么棒的资源,为什么我发现得这么晚……)
⒀ Sina Visitor System (我爱PPT的微博)
⒁ flatppt(嘉文钱的微信号)(他写的《PPT扁平化风格设计手册》教程超棒的!强烈推荐!)(我答完后的某天去仔细看了一遍他的教程,觉得自己好蠢啊居然这么晚才去看!)
⒂ PPT100(幻方秋叶PPT的微信号)(可以学到很多PPT制作的技巧)
(更多待补充,慢慢填……)

7、其他。仔细一看,千疮百孔啊T-T…还有很多,不细说了。如果把以上问题都改掉的话,原来的那份回答也就面目全非了。所以虽然不咋滴,我还是决定保留着。只能说当时就这水平吧,放在这里给自己提个醒。感谢所有耐心看完本文的知友,这篇回答确实蛮话唠的,囧。评价不管好坏我都会照单全收,有则改之无则加勉,晚安~

—————————————— 很直的分割线,以下是原文 ——————————————

2014.4.14 发布
我发现有一个现象还蛮有趣的,那就是,凡是关于产品设计、UI设计、平面设计之类的问题,基本都会搬出英文(各种外语)版的来作答,貌似大部分跟设计有关的事儿都是这样.

还有一点,不少设计师做PPT喜欢用AI、Photoshop、CorelDRAW等设计软件,做完了再搬到Powerpoint里头,但就是不喜欢直接用Powerpoint,这是为什么呢?

其实Powerpoint本身也是很强大的嘛,把工具充分利用起来,可是潜力无限的哟~ 尤其是当年看到有人用Word做了个动画片头,我和我的室友们都被华丽丽地震撼了啊!

那么,如果我们想做一个完全中文版的PPT,一个以中文来思考的扁平化PPT,该怎么做呢?

设计没有唯一和统一的答案,扁平化也只不过是万千设计形式中的一种.用的人多了,好像就变成了趋势.根据题主的疑问,我们或许可以试一试,将制作的过程呈现出来,以帮助理解.

长文,多图,慎入.

首先申明我用的办公软件是某山的WPS(某山你是不是该给我点儿广告费?),理由有两个:1、好用;2、LOGO和界面都不丑.是的,我是一个非常严重的、肤浅的——外貌党.

双击Powerpoint,我们撞见了巨大的黄底白字,几秒的静默之后,一个空白的世界展开了.

在动工之前我们得思考一个(才不止一个呢)问题:
1、我要做啥?—— 一个扁平化的中文PPT;
2、内容呢?—— 跟制作扁平化的中文PPT相关的一切(才不是一切呢);
3、思路呢?—— 我心里有数(请把思路可视化,谢谢);
4、效果呢?—— 看完你就明白了(看不明白我就揍你).

做PPT最简单也是最直接有效的思路,就是把我们需要表达的内容按一定的演示逻辑排列好,以视觉(必要时得视听结合)形式呈现.但必须记住,听觉也是很重要的部分,因为观众在看的同时,也在听你的讲述.配合得当,才会相互加分.

在确定了主题、准备好内容之后,我们可以开始动工了.

——等等,你就这么直接在第一张PPT上敲大标题了吗?
——是啊...有什么问题吗?
——是不是还漏了点啥?(少年,你用这么纯真迷茫的眼神看着我,我会想虐你的)
——啥?

PPT的尺寸啊!骚年!


不要告诉我你一直用的都是这个默认的数值,从来没想过点开来换个高矮胖瘦试试.
考虑到现实里常用的投影屏幕都是这个默认的比例,也确实可以不做更改.
那么现在,反正没啥限制,我们不妨试着设置一个看起来更舒服点儿的显示比例吧 ~
举个栗子:宽25.4cm,高17cm.嗯,我喜欢扁一点儿的(喂).

注意,尺寸最好事先就设定好,如果做完了再改尺寸,图片和文字都会按照一定的比例发生形变.到时候再来一点点调,会累死.

好了,不多折腾了,开始进入正题.


第一步,敲上本次PPT的大名:《怎样制作扁平化PPT》.

这个PPT讲的是跟扁平化相关的东西,
那么我希望视觉呈现也是扁平化的,以达到形式和内容的统一.

既然是扁平化,那就不要考虑太立体的东西.
但是空间感呢,也不要那么狠心地就完全抛弃嘛,大家还是可以友好相处的.

大名敲完之后,试了试全一排和上下两排.
“PPT”是英文,在中文世界里,它被视作一种图形符号.甭管你英文再好,眼睛看着就是觉得不一样.与其和中文们混在一起,还不如自成一格(才不是闹别扭呢,哼).

一般我做PPT的默认字体是微软雅黑,相对通用,作为非衬线字体也较为简洁.
既然是扁平化,字体就不要搞得太复杂.

然后开始考虑文字的颜色.其实这得和底色、背景一起考虑.
简而言之,这是个纠结的过程(以下500字可略过不看).

文字敲完之后是大面积的空白,我想给文字加个底色,用以去除画面的单调感和过多的苍白感.
我本人是偏爱蓝色的,把底色设置成蓝色可不可以呢?当然可以啊,为啥不行?那么接下来的问题就是,用哪个色值的蓝色更好呢?如果字色是白色,那么哪种蓝色和白色搭配可以看起来更舒服,使画面更干净?……这种问题只能自己和自己妥协(撕咬).
完了之后给底色再加个框.长条,宽条,圆的,方的,三角,异形?最后我决定用点小圆角,给人一种稳重而无害的赶脚.
我还需要一张图作为背景,要求是模糊的、虚化的、朦朦胧胧看不清的,整体色彩搭配舒服的.当然这样的图搜一搜还是有不少的,想到版权问题,于是就从自己拍的照片里找了一张= =
可是,为毛能用的偏偏只有黑白哒?!为毛我平常都不拍点有用的照片啊?!泪流...
算了那就索性黑白配吧,其他颜色也不瞎搞了.这么一合计,总算是定好了封面的基本色调——无色系.
诶,好像还少了点什么昂?
版权归属,嗯,作为完全私人化的PPT,那就写上自己的大名吧.我是个低调的人,字号就小一点吧.和背景的线条融为一体...那大家还看得到我嘛?也加个框吧,和题目齐宽.框的颜色呢,一样吧.和题目那个框的间隙呢,唔,这样差不多了.居中,对齐.嗯,规整了.总算安抚了看到不对齐的东西就会迅速发作的强迫症.

终于!这个纠结帝的第一张PPT!终!于!做!好!了!

如您所见,这才只是个开始.


如果想要把“扁平化的设计理念”融入到PPT制作中去,那么我们首先得对“扁平化”有点儿了解.正所谓理论和实践的结合嘛.很多时候我们说不清概念本身,因为概念并非一成不变,超出一定的范围可能就是谬误.但为了便于记忆和阐释,我们会用一些关键词来标注它.

如上图所示,我选了“二维、抽象、简洁”这样三个关键词,并使用了图形和底色(底色以RGB为参考).当背景本身的颜色对色块的干扰较少时,我们可以试试加入一点儿透明效果.就像这样:

PS1:背景线条(多条曲线的交织)会不会有点复杂,影响视觉效果?
PS2:其实本来打算用蒙德里安的代表作当背景,有点难搭,遂放弃= =
PS3:这三个关键词仅作示意,并不绝对,欢迎探讨~

那么,在我们对“扁平化的设计理念”有了一定的了解之后,可以采用哪些方式去达到“扁平化”效果呢?

要细分起来真的可以说很多,为了避免信息过载而造成头晕症状,我们将文字信息也进行大幅度的简化,挑重点的几个讲讲.

整体

我们可以从以上三个方面去指导PPT的制作过程并进行测试,看看最终的效果是符合还是背离.
每个方面用同色系、不同色值的大色块进行区分,(顺便还)具有一定的渐变效果.

PPT另存成图片后字就不怎么清晰了囧,现在把文字内容再赘述如下:

内容的连贯
整个PPT的内容安排合理富有逻辑,
演示PPT的人心里非常清楚自己需要表达什么,向谁表达,以及,如何表达
视听的舒畅
不光是视觉,还有听觉,
每个微小的细节偏颇,都有可能破坏观众对整个PPT的良好印象
设计的扁平
放弃立体感吧,少年!
记住,此刻,你活在二维世界里,躺平了,深呼吸,让一切回归简洁,少即是多

鉴于我们本次的主题是设计,因此其他的不做展开.

色彩

为什么在色彩部分提出了“点线面构成”呢?
因为在制作时我们必须面对PPT这个平面,并对它进行解构和再创作.
而在扁平化设计里,色块是非常重要的组成部分,它们本身就能转化成点、线、面,构成格局,撑起整个平面.

点线面构成
PPT中的每一个符号、线条、色块分布,
都以扁平化为目标而存在于这个扁平的空间之中,如果它们做出了奇怪的举动...
色块是关键
扁平化的关键是色块,注意,最好用纯色,少用渐变
色块本身有面的属性,能够区隔空间,试试让不同的色块带领你进入新世界的大门吧~

PS:这里的“少用渐变”是指少用那种中间有过渡色的渐变,而不是指由分明的色块组合起来的渐变.原因:1、渐变有一定的立体视觉效果;2、渐变用好了也没啥,用不好看起来会很low,破坏美感(= = #).

文字

在文字处理上,我们的要求只有一个:统一.

字体的统一
同一个PPT里不要用太多字体,2-3种足以;切记,少用斜体!看着真的很晕!
字号的统一
标题、副标题、正文内容,均设置统一的字号,需要特别突出的例外,但,尽量少用
字色的统一
太花就失去了重点,越想突出反而越被淹没,花素搭配得当看起来才美味哟~

举个热乎的栗子:
本PPT的字体——微软雅黑
本PPT的字号——标题40号字,内容10号字
本PPT的字色——R255,G255,B255

统一的目的是为了画面的清爽,让信息以最有效的方式呈现,并快速传达给观众,避免不必要的干扰.

PS:考虑到PPT在投影设备上的实际播放效果,内容字号需要加大到12或14甚至更大的字号,根据现场进行酌情调整,一旦全部做成图片定死,那会比较悲剧.

图片

PPT里用到的图片主要分为两种:背景图、内容图(必要的插图、图表等).
用来当做背景的图,为了将多余的信息剔除,我们可以对图片进行模糊化处理(嗯,这时候需要Photoshop相助了),从而突出文字信息.
如果是内容图,单张的相对好处理,一旦图片数量多了不好好排列就会非常杂乱.
另外还有一点需要注意,在多张图片的呈现上,整体色调的把握也非常重要.你可以玩撞色玩渐变玩灰调,只要看起来不要太可怕就行.

模糊化处理
不以画面突出为目的,主要作为气氛的渲染,可以采用模糊化或虚化处理的方式
多图列整齐
当图片大于等于两张时,安排好每张图的位置,码整齐了,乱放真的会眼花!

有时候我们还会给图片(其实文字和图片都是)的播放加入一些动画效果,设置一定的动作路径,为了使视效流畅往往需要反复调试,很考验耐心.所以也有人喜欢用Flash做PPT...(你够)

扁平化设计其实很早就有,追根溯源可以到抽象派、包豪斯甚至更久远之前.
但为什么它会让人觉得好像是个新事物呢?
1、人们对新名词的陌生;
2、人们对历史所知甚少(包括我这个历史白痴);
3、诸如Win8、iOS7等大众较为熟知的操作系统界面先后采用了这一设计方式,让看惯了具象化设计的人们顿觉耳目一新,加之它们在设计界的影响力,助推了扁平化设计趋势,使之逐渐成为一股潮流.而潮流,仿佛总是新的.

一样事物从诞生之初到现在,已经经历了诸多衍变.它通过不断地自我调节来焕发生命力.我相信扁平化设计还会继续向前发展、进化,在无数设计师们的努力下探索出更多的新意.

最后,在“扁平化设计”这个名词本身就存在争议的情况下去谈论如何达到扁平化,总觉得有点悬,但居然也絮絮叨叨地说了这么多(捂脸).

说白了,其实做PPT是一个排版的过程.

虽然我不是设计师也不是编辑大人.唔...我是暂住在地球的外星人.:-P 收起阅读 »