首页

腾讯设计师:如何让你的设计稿做到95%还原?

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

视觉设计师作为展示产品最终形态的执行层,产品上线前走查视觉与交互还原是必经环节,而留给设计师走查修改的时间其实非常少,有时候为了配合产品上线时间,通常只能牺牲一些细节,在下一次迭代进行优化。为了每一次上线的产品都能够得到更好地还原,这就需要设计师去了解开发到底是根据哪些规则还原我们的设计稿,以及在每一次制作和交付设计稿的时候,我们应如何设定好每一个细节的规则。

开发:这里已经完全对齐了。

视觉:看起来还没完全对齐,我的图也没有切错吧?

开发:字体大小和间距都是按照视觉稿来的。

视觉:这里间距偏差这么大,为什么不按照视觉稿?

开发:视觉样式好多,每个设计师的间距好像都不一样。

视觉:……

我们经常会听到身边的设计师与开发小哥的一些对话,关于对齐、大小、间距等设计还原问题经常会讨论很久,有时甚至会觉得,几个像素的间距是不是没有必要这么纠结。以我较常接触的云产品官网为例,云产品官网体量庞大,单个页面或信息模块的样式复用可高达上百个子产品页面,此时第一个模块设计的规范性、扩展性、复用性则变得尤为重要,所以为了让设计方案更加合理,为了让合作更加,这里总结一些设计经验,与大家一起探讨。

本文将从以下三个方面,思考作为视觉设计师,应当如何让设计更加合理有效:

  • 视觉处理(设计)
  • 设计逻辑(方法)
  • 交付走查(合作)

视觉处理

1. 字体结构

网页设计中,我们总避免不了与字体打交道,字体也是我们在设计中经常容易忽视的部分,而经常出错的原因往往是因为我们对文字的理解不够清晰。相比西文字体,中文字体结构复杂,字库庞大,网页的渲染效果会比西文字体艰难很多。

但无论是中文还是西文,我们经常需要用到的无非是字体大小、字重、字色,还有就是经常被我们忽视的行高和行宽,我们从西文字体提取三个最主要的因素,即字高、行高、行宽。基于西文字体的结构转换为中文,我们可以理解为,字高指的就是我们肉眼所能看到的字体的实际高度,而行高指的是字高+上边距+下边距,反过来说,行高减去字高除以 2 就能得到我们的上下边距,行宽指的就是整个文本的宽度。

举一个图文模块的例子,图(1)中我们肉眼所看到间距,在我们做标注时,看到的其实是图(2)中的三个色块,我们实际给到开发的标注,是色块的尺寸和色块之间的间距,以及详细的文本属性。

2. 文字行宽

关于行宽,以设计 banner 的标题及描述文字为例,定义行宽是为了让文本在极限宽度的时候进行换行,再固定好配图的尺寸,从而得到文本与配图之间的间距,定义行宽、行数、字数,能够更好地为运营人员规范输出的文案,避免因字数过多或过少所造成的视觉不平衡。

当我们处理无序列表时,四个短句文本,长短不一,同样我们需要限制一行文本宽度,定义一行能承载的最多字数,以及跟产品确认可能出现的最多字数的情况,确认模块设计的可行性,保证后续运营人员在替换文案的时候不会出错。

以上两个例子都是我们设计文字经常出错的地方,正确的定义规范,无论是交付开发或者其他下游,都能保证模块设计的可扩展性及规范化,保证最终上线质量。

3. 图标视错觉

关于图标,这里提到一个几何学错觉的概念,视觉上的大小、长度、面积、方向、角度等几何构成,和实际上测得的数字有明显差别的错觉,称为几何学错觉。人眼所接受的视觉平衡,往往不是设计软件上精准的对齐,我们总是会通过调整间距、大小或角度来补齐一些负空间,让画面保持视觉平衡。

以客户案例的卡片样式为例,客户案例在 to B 产品中是必不可少的模块,我们的客户 logo 有的圆形,有的长方形,有的纯文字,尺寸差距比较悬殊,这种情况下我们需要给他限制一个高度,在这个高度以内,再根据 logo 本身的体量来调整图形的大小,处理好 logo 的视觉平衡,最后红色区域是 logo 的实际尺寸,蓝色区域则是我们实际给到开发的尺寸,从开发的角度来看其实就是占位符,而规范的作图则是把占位符的透明度调整为 0,以占位符为实际有效作图区。

UI 设计中通常以「向右箭头」来表示当前链接可跳转,使用箭头作图时,当我们把箭头和文字右对齐,箭头其实会更加的往外突出,这时候我们会人为的往里边推 1 至 2 像素,最后实际给到开发的也应该是红框的尺寸,也就是 16×16 的占位图尺寸。

「按钮」也是 UI 设计中常用的组件,当我们在按钮里使用图标加文字时,由于文字的体量更大,整体重心会往右偏,所以我们通常会认为让图标和文字整体往左偏移,使整体的视觉更加平衡,实际给到开发的,也是两个不同等的边距。

设计逻辑

1. 理性的设计

在 iOS 和 Android 的设计规范中,都有提到过使用「8点栅格」的概念,即建议使用 8×8 的网格系统进行设计,我们都知道 0.5px 的渲染在屏幕上会变模糊,之所以使用 8 的倍数是因为市场上主流的屏幕都能被 8 整除,使用 8 点栅格能够的让我们所设计的内容样式在屏幕上保持高清显示,而在日常的网页设计中,我其实更加倾向使用 4 点栅格系统。

我们以下图 4 组数列为例,大家可能都曾使用过上面三组蓝色数列中的数值应用到设计中,或以 5 为倍数,或以 10 为倍数、或以偶数为设计逻辑,而实际上以 5 为倍数则会包含奇数,奇数会导致控件文字对不齐,当 5 的倍数和偶数同时使用时,则会出现类似 14、15、16 这种相差为 1 的相邻数,这样会导致我们的尺寸规范不好定义规则,难以形成逻辑,而使用 4 的倍数,他们的公差为 4,不会出现奇数,也不会出现相邻数。

我们再看看一些通用的尺寸定义,例如常见的 icon 设计尺寸都是以 4 为倍数。

常见的网页栅格及其所均分的卡片和间距,也都是 4 的倍数,如果我们的控件尺寸,图标尺寸和间距都使用 4 的倍数来定义,那所有的信息模块自然都能更好的相互适应,层层递进的逻辑关系也会更加明显。

我们把 4 点栅格的设计逻辑套用到卡片设计上,第一眼我们可能比较难去评判两者的好坏,但仔细看,我们就会发现第一个卡片的按钮没有水平对齐,相互之间的间距尺寸也是没什么逻辑性。假如今天调整一个 8px 的间距,明天调一个 10px 的间距,设计师走查起来也很难发现有问题,对接的开发也难以有一个可以参考的规范标准。而相对的,以 4 为倍数,我们会发现所有的信息都会完美对齐,而且倍数为 4 的每个数值之间公差为 4,即使设计稿微调了 1px 我们都能很快发现,开发在还原设计稿时也会有一个衡量标准。

网格设计在报纸、杂志、海报等平面设计领域中也是十分常见的设计手法,通过建立网格,考究每一个信息模块在页面中的摆放位置,大小占比,颜色占比,从而使得页面信息保持秩序、均衡。

使用 4 点栅格系统,通过理性、秩序、逻辑的设计方式赋予画面秩序感以及阅读体验,而以 4 为倍数,每个数字之间都相差为 4,不会太大,也不会太小,同时保持着秩序,让设计更加理性。对于团队合作,设计师与开发也将更有默契,不必再为不清不楚的间距浪费时间。

交付走查

1. 有效切图

关于切图,切图之前应跟开发确定好输出的格式和尺寸,确定应该用 SVG,一倍图或是两倍图。SVG 体量小渲染质量好,单色使用时还能替换颜色,PNG 则通常用在实景图,一倍图和二倍图则根据实际需要进行输出。

如果要做分层动画,那我们就需要分层切图,如果桌面端和手机端样式差别较大,那我们需要和开发沟通好如何实现,是否需要特殊切图,所有的特殊切图和特殊样式,我们都应该提前跟开发沟通好。

2. 交互细节

如果某个控件或信息模块交互样式较多,那我们可以有一个空白画板来清晰地标注这些状态和样式,很多开发在还原过程中都是一手视觉稿一手交互稿,但视觉设计师作为展示产品最终形态的执行层,很多情况下,视觉阶段依然会有很多需要跟交互和产品沟通修改的地方,所以为了避免遗漏修改点,视觉稿应该呈现最完整的设计细节,这样也会很大程度上节省开发的时间,减少出错的几率。

当页面内容有一定的更新频率,我们则需要标明视觉样式规范,以及后续的运营规则,完整的收尾,可以避免产品经常过来寻求上线素材和规范。有些需要隔三个月或半年才上线的需求,清晰的标注也能帮助我们快速回忆起需求背景,让我们在日常工作中保持头脑清晰,有条不紊,这其实也是在给我们自己节省时间。

3. 重构稿走查

走查还原的时候,在 Chrome 浏览器的空白处右键点击检查,找到里面的 Computed 窗口,我们可以找到具体的文字、间距、投影等属性,有时候一些比较细微的调整,我们可以双击具体的数值进行调整,调整到自己满意之后再把具体的数值给到开发,这样就不用在我们摇摆不定的情况下,造成双方的困扰。

最后,在预发布的时候,我们可以利用 SwitchHosts 的客户端来配置开发环境进行体验,保证最终上线的效果。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

优设轻访谈!拿到需求无从下手?来看这7位设计大咖的私藏搜索技巧

资深UI设计者


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

信息时代,每个人都需要具备基本的「搜索」技能,尤其是设计师,你有没有灵感枯竭不知所措的时候呢?今天我们召集了7位优秀设计师,对他们的设计灵感来源进行揭秘,希望这一期的轻访谈能够让你轻松Get设计大佬的搜索技巧!


优设轻访谈第八期,我们的话题是——不信息时代,能与我们分享一下你的搜索技巧么?平时的素材积累是如何进行的?

Dribbble 人气最高:Mike

Dribbble:https://dribbble.com/creativemints

实际上,现在寻找灵感或资源变得非常容易。去Pinterest,你会获取到任何你能想到的灵感!查看stock网站,获取所有你需要的资源!

△ AGE / Online courses

尽管如此,我仍然建议从外部世界获得灵感——请几天假,去一个新的城镇或国家旅行,逛逛博物馆,你会发现真实生活会成为你最重要的灵感来源。

产品视觉设计总监:Gleb Kuznetsov✈

Dribbble: https://dribbble.com/glebich

是的,你是对的,搜索技巧对产品设计师来说是必不可少的。我在一家公司做了很长时间的分析师和研究部门工作,在那里我负责用户体验,这些经历帮助我理解如何搜索有意义的数据和信息,并使用它来定义一个产品的关键指标。

但是搜索不仅仅是关于用户分析和信息,也是关于设计语言——理解什么是可能的。最好的设计只有当你跨越了可能和不可能之间的界限时才会出现。这种平衡基本上是一种新的设计语言或产品的品牌。

我使用Pinterest进行图像搜索。这个网站帮助我创建情绪板,并找到一些更具体更具象的东西,Dribbble的作品帮助我研究UI布局。然而,我不会使用Dribbble来作为我的色彩搭配灵感库。

对于颜色,我使用自己的灵感素材库,在我的职业生涯中,我花了大量的时间从互联网上搜集素材,并进行创作和整理。我也有自己的平面设计素材库,我创建并管理这些素材库大约有10年了。我几乎每天都在捕捉的设计灵感素材。问题不仅在于你如何搜索,还在于你如何将这个搜索结果应用到你的工作中。

△ Water waves simulation for 3d icon

那如何应用呢?例如,当我看到好的设计时,我将视觉图像结构分离开来——有时我在情绪板中添加新图像仅仅是因为我喜欢形状,有时是因为我喜欢颜色,有时是因为图形效果等。在将该引用添加到库之前,设计人员需要了解在何处可以使用以及如何使用。对于设计师来说,搜索绝对是一项必不可少的技能,我通过创建情绪板促进了我的搜索。

顶尖设计团队:Ramotion

我们相信灵感无处不在,当然也会取决于我们进行的项目类型。

我们在互联网上会搜索很多,比如Behance和Dribbble。然而,我们周围也有很多灵感。

△ Cellebrite Pictograms

例如,如果进行的是一个品牌项目,那么我们周围的自然环境就是我们获得灵感之所在。颜色、动效、形状和所有这些的组合使一切都在一个愉快的和谐场景中工作,这就是我们努力传递的。

对于UI/UX项目、网站和App设计,我们也是这样做的,但我们主要目的是理解用户的最终目标和每个行动背后的动机。我们不仅在数字世界中研究类似的解决方案,在现实世界中也会寻找类似的解决方案。

顶尖设计团队 FΛNTΛSY 总监:Minh-Pham-✪

Dribbble:https://dribbble.com/phamduyminh

我不在本地存储灵感资源,因为想要方便浏览必须对其进行分类,而这对于本地存储来说比较困难,所以我非常依赖于在线资源,它们有很好的搜索引擎,所以,为什么不呢?

基于不同的目的,我更喜欢从多种来源获得灵感:

  • Dribbble:是最好的互动、动效和插画资源网站。它是快速获得灵感的好地方,尤其是针对大项目中的某一个小部分。
  • Behance:主要是为项目展示,所以如果你想要找一个地方寻找大的概念、设计系统、演示,那这绝对是最理想的。
  • Pinterest:是一个丰富得多的资源,在这里你可以从中找到任何灵感。因此,当我需要寻找高层次的概时我会来这儿念(例如情绪板)。关于Pinterest,我最喜欢的是它能够显示我正在寻找的相关图片。它真的帮助我驱动我的思维,形成概念,事半功倍。

服务设计机构:Zajno Crew

说到寻找灵感,我认为有两种人:使用Dribbble的人和使用Behance的人。Dribbble更像快餐,在这里你可以迅速的饱腹,Behance更像一家高档餐厅,你可以在那里度过整个晚上。

我个人喜欢吃快餐。我喜欢每天早上上班前查看Dribbble,当我发现好东西的时候,我就把它存起来以后用。

△ Promo Website Animation for Pocket Multilingual Assistant

如果你正在寻找真正的案例,而不仅仅是概念稿,你可以在Awwwards上找到一些主流的东西,也可以在这里找到一些更奇怪的东西。

哦,还有Pinterest,它的优势是推荐你可能喜欢的东西。我经常用它来做情绪板和寻找参考素材。

如果是插画资料,没有比Dribbble和Behance更好的地方了。只要滚动鼠标,所有的好东西和你喜欢的艺术家都会一步添加到你喜欢的作品中,简单!

△ Tempers Flare

Pinterest有利于发现新的想法、主题、不寻常的元素和灵感。每天浏览这些平台也会让你培养出一双训练有素的眼睛,这对提高你自己作品的质量和风格至关重要。」

Dribbble 人气插画师:Febin Raj

Dribbble: https://dribbble.com/febinraj

我每天都想更新!我认为这是件大事。因为这个世界瞬息万变。

△ Evening From Kerala

通常,我的主要搜索源是Behance和Dribbble,同时我从其他来源获取了更多的数据,比如文章,博客。

Behance 人气设计师:李宜轩

Behance: www.behance.net/yihsuanli

信息时代,每个人都必备一个「搜索」技能,尤其是设计师,很多人在接单后,可能会第一时间在网络中或者日常的资料扩中搜索素材、参考、灵感等。

我还记得刚开始接触设计时因为没有太多经验,常常因为资料整理太久,压缩了执行时间,最后反而虎头蛇尾的完成作品。虽然创作作品时资料搜集、调查很重要,但其实整体过程有更有效率的方法。其实收集资料也是需要练习的,通过经验累积,可以渐渐增加效率与快速找到最精准的讯息,避免漫无目的搜寻。

△ ZENWATER

Work hard 不如 Work smart, 有了较有系统的资料搜寻方式后,可以将时间留给创作和尝试。随着经验累积,我开始养成了一些小技巧帮助自己更有效率的搜集资料,大家可以酌量参考:

1. 先用树状图整理出关键字

在开始找资料前我会先把设计关键字整理出来,先从Google或百度等网站去搜寻相关的话题或图片,以此方式让思考可以更突破。例如,我要做一张音乐会的海报,开始前,我会先写下关键字,例如:乐器、钢琴、音乐、琴键、流动、弹奏….,接着利用这些关键字进行中英文查询,随着找到越来越多资料,可以从其中找到更多可能性的延伸。这个阶段搜寻目的是从抽象方向出发,避免找到与别人相似的元素。一个一个关键字搜寻后,就可以把其中好的图片整理再一起,收敛成更明确的设计方向。

2. 擅用IG的#hashtag功能

除了使用搜寻网站寻找资料,我觉得IG(instagram )也是一个不错的选择。我会用IG 的hushtag去找大家对于某一个单字不同的想像,例如找#music,在其中除了可以找到音乐相关的画面,有时候也可以找到不同场域里的音乐元素。除了找灵感外,我也会利用hushtag搜集的设计作品,例如找#logo#graphicdesign时,可以看到大家正在进行中的作品,或是还未整理好放上Behance的作品。

△ One Team One Goal / IBM Taiwan Sport Day

3. 以pinterest分类整理资料库

我平常就有整理pinterest的习惯,建立资料库的习惯除了为了特定专案外,我也会以设计种类分类作品,例如以CI、packaging、poster…分类。除此之外,以风格分类的资料库也是必要的,例如:东方风格、美式、日本风格、欧式….。这些平常就累积好的资料库能够让我搜寻作品资料时,有一个快速的开始。 Pinterest会依据风格推荐更多的作品给使用者,因此当平常有了足够的累积,寻找资料就会有效率很多,能够快速找到很多需要的作品风格。

4. Behance搜集不同风格的设计师

Follow特定设计师的IG或是Behance也是我搜集资料的一个方法。我会搜集一群在每个领域最具代表性的设计师。在找不到灵感时,我会不断浏览他们的作品集,试着从他们角度出发,思考如果是他们遇见这个题目,他们可能怎么发展。除此之外,他们也是一个完整的风格库,每个作品都是该领域的标竿,当客户有特定风格的需求时,能够快速给自己一个明确的目标,期许自己能够达到他们作品的高度。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


看太多网上的灵感创意素材,也是一种设计时代病?

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

互联网让全世界都无线互联,大家可以无视距离随时浏览世界另外一头的设计师所上传的设计作品。无论是 Dribbble、Behance、Pinterest 还是国内的各大社交媒体,想浏览别人作品获取灵感,几乎是0成本的事情。那么这样做对于做设计、激发灵感进行创造,真的有好处吗?它所引发的抄袭的问题,其实是最现实可见的,对此,昨天所发布的文章《如何界定借鉴和抄袭?看这7位设计大咖怎么说!》里,7位来自世界各地的设计师,已经对此发表了看法,而今天的文章里,99U 邀请了三位顶尖的创意人,阐述他们如何看待这种设计师中的「时代病」。

不断上网浏览别人的作品这种「灵感时代病」对于做设计激发创意而言,到底有哪些利弊?在的设计辩论中,Nadine Kolodziey、Thomas Kronbichler 和 Polina Joffe 对无休止的灵感素材的视觉进行了权衡分析。

插画师 Nadine Kolodziey

过于关注在线设计灵感类素材,会让设计思路趋于千篇一律,扼杀创意。这就是为什么我们必须明智地管理我们的个人信息流。——插画师 Nadine Kolodziey

我们每时每刻都在上网,这意味着我们将会不断地接触到各种各样的视觉刺激。

如果你总是在公交车上或休息时关注别人的设计作品,那么你就会不自觉地把它融入到自己的作品中。很快你就会意识到:「糟了,我刚刚做了一些看起来和其他人完全一样的东西。」你会发现,你在不断地复制和重复别人的东西,尽管可能一开始是下意识的,但最终你会成为潮流的一部分。你忽略了你个人独特的视角,别人的作品开始影响你的判断和直觉。

而属于你自己的那部分最独特的东西,才是最有力道的。

我完全理解为什么人们想成为潮流的一部分。客户可能想要一些入时的东西——在特定的圈子里以特定的方式行事,这样做是有所帮助的。但最终这种做法所带来的同质化,对双方的发展都会有所制约。插画师在他们的作品中没有个性,所有的客户都在购买类似的风格——这意味着他们的品牌缺乏独特性。

如果你想获得灵感,看其他的创意作品并不是最好的选择。

看看其他的设计作品固然重要,这可以让你紧跟行业发展步伐,但是要适度。如果你想获得灵感,看其他的创意作品并不是最好的选择。当我在网上关注其他插画家的作品时,我个人很难受到启发。我已经使用 Instagram 两年半了。起初我总是看其他插画家的作品,这是我的本职工作,我热爱插画。但后来我发现,这阻碍了我的创作潜力。

我开始注意到我的配色方案与其他人的相似。我注意到,看其他的作品降低了自己尝试新事物所需的勇气。当我看到另一位插画家的作品时,我不可能洞悉他的创作潜力。当我在模仿他人的时候,我不可能有属于自己的独特创造力。

但是这个问题并非是无解的。解决之道就在于有选择地关注。看同事的作品和看一般的图片是有区别的。我对线上的灵感素材很感兴趣,但是我更多地将这些素材视作为一个个「小贴士」,因此我注重于管理我的社交媒体所关注的账号。我不再关注 Instagram 上的其他插画家,而是关注那些在审美上吸引人的内容。例如,我将关注那些收集不同寻常的石头的人,或者为摆放得精美的和风食物拍照的人。

我特别喜欢「I’m Google」这个账号,它不是按主题而是按视觉来排列图片。当我看到这样的图片时,尤其是当我开始着手准备新项目的时候,它们会立即在我的脑海中激发出新的概念和全新的思路。这些资源成为我的灵感来源:当我滚动鼠标时,我将看到来自外太空的岩石图像,它的形状将启发我如何安排构图。

创意总监 Thomas Kronbichler

线上灵感素材固然可以鼓励国际交流和对话,但问题出现在这些图像在传播的时候脱离了相关语境。——Thomas Kronbichler Mut工作室的创始人 创意总监

在 Mut 工作室,我们是当之无愧的互联网拥簇,我们从不害怕灵感素材过载这种问题。我们是阿尔卑斯山脉中部一个叫做海蒂·兰德小镇上的一个小工作室,互联网不仅为我们提供了来自世界各地令人叹服的灵感,而且提供了一个展示自己作品的平台,这在10年前是不可想象的。

正是因为图片可以在网上广泛地传播,我们才能让欧洲和美国的用户看到我们的作品。由于有了在线订阅和社交媒体,平面设计社区现才有了如今繁荣的模样。当然,这也有负面影响,很多人说如今平面设计在审美上变得太相似了。但积极的一面是,现在有更多的平面设计作品涌现出来。任何地方的人都可以进入这个行业而不再受到地域的限制,平面设计行业变得更具包容性。例如,欧洲各地的小镇上都会有人在尝试更疯狂的创作,我们能透过网络在不同的地方跟进观察,支持彼此。丰富的网络灵感图片的流通,最终有利于平面设计作为一种艺术形式而广泛存在。

我并不是受到某张特定的图片启发,而是在听设计师讲述设计思路的过程中获益良多。

问题是对此互联网并没有过多关注。一些博客和自媒体上并没有关于图片来源的解释。为朋友设计的项目和为大公司做的项目都在同一个空间中流通,这很有趣,但同时也弱化了应有的差异化和环境。

作品背后的故事,以及设计过程中各种问题的解决过程,才是真正重要的内容。我并不会受到某张特定图片的启发,而是在听设计师讲述设计思路的过程中获益良多。了解设计师的独特理念,则更有可能启发我,我对设计师处理客户关系的部分也很感兴趣。当然,这一切是不能用一张简单的图像来进行概括的。

我已经不再浏览 Tumblr 和 Pinterest,因为我最感兴趣的点,是了解一个问题是如何解决的。最终,我在设计师会议上发言的视频实录中获得了最多的灵感。听设计师们讲述作品诞生的过程是最令人振奋的。我从一个人如何构建一个项目,以及如何实现它的过程中学到了很多。我喜欢听他们谈论客户关系,讲述他们遇到的困难以及如何克服它们。确切地说,更能鼓舞人心的是设计态度和思维方式。

在阿尔卑斯山的工作室中足不出户,我就可以看 Michael 所有的视频。

例如,就在上周,我狂看了所有 Michael Bierut 在线演讲的视频。我喜欢他展示作品的方式,喜欢他大方地和别人分享成果,我钦佩的是他的工作态度。在阿尔卑斯山的工作室中足不出户,我就可以看遍迈克尔所有的演讲视频,这简直太棒了。

艺术总监 Polina Joffe

对正在发生的事情有所知觉是非常重要的,而上网获取灵感会简化这个过程。——Polina Joffe,艺术总监和平面设计师

如果你知道别人在做什么,你可以选择参与其中,也可以选择拒绝。而形成自己的观点并做出明智决策的前提是你足够了解。

我一直在关注其他人在网上会做什么,我也会在博客和社交媒体上上传一些实用的干货。当涉及到具体的项目时,我会做具体的项目研究。我们会从互联网上获得大量的灵感,这使得研究阶段变得非常简单和。我经常会想起设计师们以前在社交媒体上使用过的概念和想法,然后我会把这些想法和我自己的想法进行重新转化,组合并且更新,这样它们就可以运用在我的设计大纲中了。

浏览在线灵感素材,然后它们会形成属于我自己的一个巨大的视觉词典,里面有我脑海中所有的概念和方法,每当我开始一项新的任务时,我都可以沉浸其中。

我们经常谈论来自内心的创造力,但我不确信我是否真的要相信这一点。万物皆有源头。

我最近为泰特伦敦美术馆的教育团队做了一个项目。这个项目是针对年轻人的。首先,如果你的目标受众是年轻人,了解年轻人都在做什么是很重要的事情了,因为这些信息很有参考价值。你需要运用观众能够理解的视觉语言。在项目的研究阶段,我看了其他设计师是如何处理和学习这些属于年轻人的理念的。最初我想用笔记本和活页夹做点什么。然后我想起了我在网上看到的那些用活页夹或记事本纸做的项目,然后我回去重新又看了一遍,看了其他人如何处理类似的主题,由此激发了我的新想法。

我们经常谈论来自内心的创造力,但我不确信我是否真的要相信这一点。万物皆有源头。我认为创造力通常是学习前人如何混搭各种想法,然后自己进行特定的调整组合,二次创造。

诚然,视觉交流的发展是一部复制、更新、转移的历史。但重复别人已经做了太多遍的东西,并使用类似的元素来直接窃取它们是有危险的。当你在做研究获取灵感时,你必须通过多种方式参考海量的资源。如果我们能妥善地使用现有的大量图像,就能鼓励创新,跟上时代发展的步伐。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

在这些大师身上,我找到了非凡创意诞生的原因

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们的文化中会将大师们捧上天,凸显他们和常人差别最大的那个部分。大师当然是有属于他们的秘诀的,可是他们的成功同样植根于他们生而为人的烟火气。从一个人的视角来解读大师,在崇敬的同时,我们也应当对自己有信心——他们已经替我们走出了一条,可供参考的道路。

创造力是我们每个人与生俱来的,我们天生就是创造者。人人都可以创造,而且大多数人都以不同方式进行着创造。毫无疑问,创造新事物时,我们是最快乐的。

不幸的是,许多人会找借口不去创造,比如:「我没有足够的创造力或天赋。」这是不对的。在重新审视简·奥斯汀(Jane Austin)、毕加索(Picasso)、爱迪生(Edison)、蒂凡尼(Tiffany)和丘吉尔(Churchill)等著名人物的经历之后,我意识到,创造力和我们常说的天赋,只是勇气和不懈努力的副产物。

每个人都是有创造力的。众生平等,人人皆可创造。个体性和独立性只是用来发掘和完善内心世界的。因此我们每个人都是有创造力的。

正如我在上文中提到的,勇气是与创造力和创新直接相关的。对此 Paul Johnson 赋予了最好的定义:

创意往往反映出巨大的勇气,尤其是当艺术家不向最终的敌人——年龄或衰老,低头的时候。

我开始探索,我想知道创造力是什么。为什么有些人能够通过他们的创造改变历史的进程?是什么引导他们创造?他们的工作背后有什么秘诀吗?为什么有的人名垂青史而另一些则不然?

最终我发现了一个残酷的事实——以创造为事业的人每天都在不知不觉中辛苦工作,而且前途未卜。正如约翰逊所写的,你必须能够战胜时间和任何可能出现的身体缺陷。比如贝多芬不得不和他的听觉缺陷作斗争;爱迪生失败了几千次才发明出最后的灯泡;瓦格纳生活贫困,经常向人要钱;艾米丽·狄金森从不顾及公众的态度,无论是鼓励或批评,始终独自一人写诗。

在我致力于研究不同性格的人的时候,最让我惊讶的是每个创作者总是在前人的基础上创作。没有人凭空创造出好作品,而这打破了我一直以来所持有的刻板印象。

所以让我们深入研读一下创造者们的经历,看看他们是如何工作的,让他们如此特别的秘密,就在其中。

毕加索:绘画第一,咖啡第二

「如果我没有足够的天赋,又有很多竞争对手,那么我将每天创作一幅画,直到让世人知道我是活着的最伟大的画家。」这无疑是毕加索踏上成为历史上最成功的艺术家的道路时,一直秉持的信条之一。

毕加索出生于西班牙的马拉加,仅有的绘画启蒙知识是由他的父亲传授的。至于其他方面,我们可以很容易地说毕加索是自学成才、自我推销,在他所居住城市的街道上接受教育的。从很小的时候起,他就一直密切关注着市场,因此他总能知道什么才是可以卖出去的。

不同于等待灵感的到来,找寻上帝赋予才华的人们,毕加索每天都在创作。他的工作原则是速度胜于准确和努力。他是我们所知道的最不安分、最具实验性的创造者之一。他做的每件事都必须尽快完成,不会对作品精雕细琢。

毕加索做过许多工作。除了绘画,他还做雕塑、面具。无论是在画布上、纸上,石头上,陶瓷上还是在金属上,他都是卓越的艺术大师。对他来说,没有任何物质障碍。他是一个绝对的实验主义者,每十年都会改变他的风格,对于颠覆从前的自己从不畏惧。

他还设计过海报、标志、广告、戏剧服装和服装。毕加索离世前留下了超过3万件作品,这是有来源的(catalogue raisonne – 1932-1978)。毕加索是一个有数量观念、强烈的职业道德和实验精神的人。

温斯顿·丘吉尔:终生写作

也许你不会想到这份名单上会出现这位政坛人物,但我这样做是有充分理由的。他是一位首相,二战后他在历史上赢得了一席之地,但他确实值得被列入名单,因为他也是一位画家和文字大师。

丘吉尔是如何开始写作的?父亲离世后,丘吉尔悲痛万分。他觉得丧失了自我,也失去了内心的平静。因此,他决定写一本完整的传记献给他的父亲。在那之后,他发现了自己对文字的热爱和激情。丘吉尔不知道什么是创造力,他只知道「努力工作」这几个字。

温斯顿日以继夜地工作。感谢上帝,他很好,只有在8小时睡眠不足的情况下才会感到疲倦。——丘吉尔的妻子 Clementine Churchill

很少有人知道丘吉尔一生中写作超过1000万字。这其中包括他的演讲稿、书籍和文章。这种写作量比任何作家写的都多。他从小就有写下所有他感兴趣或参与之事的习惯。

他不仅练就了写作技能,而且还从中赚钱。每次他去不同的国家,或者参与一场战争,他都会写相关的文章卖给报纸或期刊。他写了三本关于二战的书,共有约200万字,是关于那个时期覆盖范围最广、最有价值的资料之一。

语言是唯一不会消亡的东西。——温斯顿·丘吉尔

当他不写作、不娱乐、不与政治斗争时,他就画画。他发现画不仅可以作为爱好,而且可以成为面对困境时的避风港。因为画画的时候你要保持心无旁骛,这样便可以放松你的大脑。

他从不逃避艰苦的工作,相反,他竭尽全力地工作:议会、行政、地缘政治、写作、绘画、建造田园诗般的房屋和花园。丘吉尔自命不凡,他的创造力流淌在他的血液中。他希望自己所见的一切,都能亲自动手实现,这就是他有别于他那个时代的其他人的特质。

克里斯托巴尔·巴伦西亚加:不见天日地工作

在所有创意大师中,克里斯托巴尔·巴伦西亚加是最专注于创造美好事物的创造者。工作渗透了他生活的方方面面,他将自己全部的精力交付于工作。

作为著名品牌巴黎世家的创始人,他是怎么进入时尚圈的?三岁时他参加了一个缝纫班,他对此表现出极大的热情。在接下来的74年里,他的缝纫技术炉火纯青。在他的余生中,他每天都要做一件针线活以保持手的灵活度。他是当时唯一一个在服装设计上独当一面的设计师,他做过缝纫、剪裁、选料等一切与制衣相关的工作。他唯一不会做的事就是画画,需要助理代为完成。

他的工作量巨大,整日都待在工作室里。以至于人们一度认为「克里斯托巴尔·巴伦西亚加」是一个假名,也许并无其人。几乎没有人采访过他或是见过他,也几乎没有他的照片。他从不参加社交活动,除了和一两个老朋友相聚外,他很少出去吃饭。

这一切都使他得以专注于创作能永远流传的作品。他孜孜不倦地工作和创造。这就是为什么现在几乎没有设计师能够创造出像他在上世纪五六十年代那样的创作作品,这些作品正如同其他人所说的——那都是馆藏级的作品。

他工作非常努力。巴黎世家每个系列都有200-250个设计,所有这些都是他自己完成的,因为他几乎不信任任何助手。他甚至拒绝了年轻有为的纪梵希(Hubert de Givenchy)的帮助。

从他三岁到生命的最后几天,他每天都努力工作。在上世纪60年代最艰难的时期,他停止了工作,因为心脏病发作,大师最终离世而去。

蒂芙尼:玻璃之心

路易斯·康福特·蒂芙尼痴迷于用玻璃制作窗户和灯具,并以玻璃进行珠宝创作。他的父亲查尔斯·路易斯·蒂凡尼(Charles Lewis Tiffany)生于1812年,1837年在纽约开了一家商店,销售文具和精美的器皿。他似乎继承了他父亲的品味,把平凡与非凡融合在一起。

蒂芙尼是一位真正的创造者,他勇于尝试,乐于为自己设定不可能完成的任务。尽管他父亲是个商人,他早年还是选择了学习绘画。但从本质上讲,他也是组织者、领导者和商人,也是一个挥霍无度的人和收藏家。如果要给出一个定义,蒂芙尼是一位创造者和推动者,他的远见卓识和组织能力使这一切成为了可能。

在二十世纪初,他雇用了100多名玻璃行业的出色工人,鼓励他们试验自己的想法,并辅以化学方法,对这些想法进行进一步的研究和推动。

他利用他的珠宝工作室实验特殊的金属反应。这些金属与彩色玻璃结合在一起,形成了「宝石花瓶」。他一直在研究他在旅行或参观博物馆时挑选的古代玻璃碎片。他在寻找可以用于复刻它们的化学方法。

蒂凡尼对探索发现和实验有着一种无法言喻的渴望,这让他能够创作出如今每件价值超过100万美元的作品。他经常去不同的国家旅行,研究与玻璃有关的古代文化。他保存了旅途中的许多发现,参观博物馆都会留下详细的笔记。

重要的一点是,蒂芙尼喜欢与他人合作或从其他风格中获得灵感,但他从不抄袭。他写道:

神赐给我们的才干不是要我们模仿别人的才能,而是要我们运用自己的头脑和想象力。即使是在团队中工作,艺术家的个人风格也是通向真正美丽的道路。——Charles Lewis Tiffany

他还创造了一种表面粗糙的昂贵玻璃,之后他为其取名「熔岩」。「熔岩」的灵感来自他在维苏威火山附近发现的碎片。他对古代的研究发现,埋在灰烬中的瓷砖(如庞贝古城)经过了2000年的化学变化,产生了光泽。这个变化过程可以在工厂实现。不久,他卖的瓷砖比花瓶还多。

爱迪生:向艺术家借鉴才能

要成为一个创造者,就必须成为一个艺术家?大错特错。发明家和商人托马斯·阿尔瓦·爱迪生背后有1000多项专利。大多数发明家在现代社会发展中发挥了至关重要的作用。他们的灵感来自于解决他人需求的渴望,以及与艺术家合作。

他的灵感来源于给予人们闻所未闻的东西。例如,他发明第一台录音机的灵感来自伟大的歌手和乐器演奏家的声音。他想给他们更好的创作工具。

他在电力方面的贡献也是如此。他信任与其他创作者和艺术家的合作。他鼓励蒂芙尼将燃气灯换成电灯,这样生意会更好。后来他与蒂芙尼合作,设计了纽约第一家完全使用电灯照明的剧院,帮助许多舞者寻找新的可能性来发展自己的演艺事业。

天才是1%的灵感加上99%的汗水。——爱迪生

他的实验室看起来更像是画室,而不是科学家的工作室。有时他沉迷工作就会睡在地板上的衣服里。他的名言「天才是1%的灵感和99%的汗水」诠释了他的职业道德观。做一个创造者不是一句空话,而是一种生活方式。

我没有创造力,需要灵感?

有句话说,只有业余爱好者才需要别人给灵感,专业的创作者靠的是自己日复一日重复工作。我多么不希望这是真的,但别无他法。或者就像我的一个朋友说的:「如果你不利用各种信息,你就不可能保持灵感。」他所说的信息是指读书,看电影,听音乐,去画廊,和聪明有趣的人交谈,旅行和探索一个新的国家。这可以看作一种「消费」。一旦你「消费」了,你就必须创造并回馈世界。

创造者都是相似的吗?是,也不是。

在阅读了这些创造者的故事后,我们可以看到所有人都有一个共同点——努力工作。所有的创造者都有一个人生座右铭——不断创造。其他的部分只是他们的个性。

做一个创造者不是一个头衔,而是一种生活方式。这不是三天打鱼两天晒网的事,也不仅仅是一个爱好,这是你的生活。当然,他们能够坚持下去,也因为他们内心对于这件事情足够热爱。

我们不需要上帝般的灵感来创造非凡。真正的创造者总是在收集周遭各种各样的信息,无论是在自然中、在不同的国家、在书籍中、在电影中、在音乐中、在食物中,还是在与艺术家或其他像你这样的创造者的合作中。

同样值得注意的是,创作者在创作时通常都是以自我为中心的。他们不允许其他人越俎代庖,因为他们想确保他们的工作朝着自己认同的方向发展。而且,这是因为他们喜欢创造自己的生活,而不是让别人为他们创造生活。当然,在大多数现代环境中,在工作中以自我为中心是不现实的,也是不的。但每个人都有自己的方式。有些人是推动者,有些人是独裁者。

PS:当然还有更多伟大的创造者值得我们去写(无论男女)。这个名单仅代表个人观点。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

巧用Keynote,为你的演示锦上添花

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

对于今天的设计师来说,无论是知识分享会,还是项目提案评审,甚至是求职面试等等,越来越多的场合需要考验我们的演讲表达能力了。那么对于设计师来说,除了口述表达能力,美观大方的幻灯片往往也是必不可少的。而Keynote因其酷炫的动效俨然已经成为演示界的神器,但是现状是很多设计师朋友对于Keynote的掌握还不是很熟练,特别是五花八门的动效以及复杂的构建顺序,在此作者就与大家分享总结一些个人的使用心得,希望对大家能有所帮助。


目录

1、认识keynote

2、制作准备

3、动效

4、构件顺序

5、演讲相关



下图即是Keynote的主界面,与我们熟悉的Sketch还是挺相似的。其中中间为舞台区域,当前页面的所有元素都会出现在此;顶部是工具栏,包含一些常用的功能,并且跟Sketch一样支持自定义;左侧是幻灯片的导航,可以快速在各个幻灯片之间切换;右侧是参数调整,可以分别针对幻灯片以及其中的某个元素进行参数调整。

其中,右侧的参数调整又分为“格式”、“动画效果”和“文稿”三个Tab。当选中左侧导航中的幻灯片或舞台中的某个元素时,对应的参数调整面板是不同的。


在开始动手之前,还有一些准备工作需要完成。首先就是整个幻灯片的尺寸,常见的尺寸比例有4:3和16:9,需要根据演示现场的幕布宽高比来确定选择哪一种。如果是在移动设备上演示,就根据移动设备的屏幕比例来选择,一般手机是16:9,Pad是4:3。当然,也可以自定义幻灯片的宽高尺寸。幻灯片尺寸在右侧的“文稿”Tab中调整。

其次,编辑母版。母版有点类似于Sketch中的Symbol,改变了其中的某个元素,所有使用这个母版的幻灯片都会出现相应的改变。不同的是,母版的对象是整张幻灯片,而不是其中的某几个元素组合,也就是说,一张幻灯片只能选择一种母版。如果你的所有幻灯片都需要加上logo或者水印,使用母版就很方便了。母版的编辑以及调用在右侧的“格式”Tab中(选中幻灯片的情况下)。

最后,将你需要用到的图片元素,按幻灯片顺序整理好命名,以便于在后续调整构件顺序时使用(命名混乱会对调整构件顺序造成很大的干扰,在稍后构件顺序的时候会讲到)。


Keynote中的动效分为幻灯片之间的过渡动效和单个元素的动效。


幻灯片之间的过渡动效有以下这些:

这里重点要介绍的是神奇移动。它的原理是为两张幻灯片中的同一个元素添加补间动画,通过这个元素在两张幻灯片中的位置、大小、形状、颜色、旋转角度、透明度这些属性差异来实现过渡动画。当然,还可以选择抹入抹出来使其过渡更自然。

单个元素的动效又分为三个阶段:出现、动作、消失。


出现,顾名思义就是从无到有的一个过程,主要有以下这些:

动作,主要是移动、缩放、透明度、旋转这些基本的属性变化。大部分的动效都是通过这些基本属性的变化组合来产生的。

消失,顾名思义与出现相反,是一个从有到无的过程。

其中,打字效果和跟踪这两个动效只针对文本才会有效果。

这么多的动效,其中有一些还是蛮有意思的,比如“解体掉落”、“碎屑”、“轰然坠落”,这里就不展开细讲了,大家有兴趣可以一一去尝试一番。


使用动效还有一个误区就是,不是所有的页面之间或者元素出现消失都是需要动效的,过多泛滥地使用动效反而会给观众造成视觉疲劳,让他们的关注点都集中在你的动效上,从而对本身的演示内容失去关注。


构件顺序是针对单张幻灯片内添加了动效的元素而设定的。可想而知,一张幻灯片内的所有元素,很少会有同时产生动作的情况,因此必然有个先后顺序,这个顺序就是构件顺序。通过构件顺序,可以组合出变化多端的动画效果来。


构件顺序分为三种:一起、之后、点按。如下图:

可以看到,通过构件顺序列表上两个构件之间的样式变化,我们就可以一眼区分出它们之间是什么顺序。一起,两个构件连在一起并且中间没有分隔线;之后,两个构件连在一起中间有分隔线;点按,两个构件不相连。


点按比较好理解,就是两个构件动作之间需要手动控制。下面重点来讲一下,“一起”与“之后”。我们通过时间轴的形式,来让大家更容易理解。

当然,我们还可以设置延迟时间,让构件交替动作。

前面我们提到过,要为图片元素整理命名,其目的就是在构件顺序列表中便于查看。如果我们没有整理命名,那一张幻灯片中的构件顺序列表可能就是如下图这样:

那么这时候,我们如果要调整其中一个元素的动作顺序就显得异常困难了。因为在舞台区域中,这些元素可能都是叠加在一起的,想要通过点选找到元素几乎是不可能的,而构件顺序列表中的命名也显得很混乱……


此外,即使是整理命名了这些元素,最好也不要把许多动效做在一张幻灯片中。原因同上,如果后期要修改,寻找起来也是非常困难。我们可以利用幻灯片之间的自动过渡效果来将它们拆分到不同的幻灯片中。

图中在第2张幻灯片与第3张幻灯片之间选择“无过渡效果”,且开始过渡设置为“自动”,延迟“0秒”,那么第2张幻灯片播放完,就自动无缝进入第3张幻灯片了。


做完了演示稿,那么就要开始准备演讲了。首先需要考虑的问题就是文件大小了,如果图片内容不多倒还好,一旦图片较多,整个.key文件就会变得很大。这时候我们可以先压缩图片再将其置于Keynote中,或者有一些元素或者文字可以通过Keynote直接绘制,就不要采用图片的形式了。这样可以将.key文件的体积大大缩小。


其次,Keynote的版本也是需要考虑的问题,最好可以拿到演示所用的电脑来演示一遍,作者就曾经因为软件版本问题导致一个动效无法展现,进而影响了那个片段的演讲。


此外,我们不可能讲所有要讲的内容全部呈现在幻灯片上,适当的注释是必不可少的。

添加完成的注释我们可以在演讲者模式中看到。

演讲者模式中,我们还可以看到当前幻灯片、下一张幻灯片以及还有多少个构件动效没有播放。在顶部,靠左的是当前时间,靠右的则是定时器,可以设置成计时器或者倒计时来帮助我们控制演讲时间。

最后,如果你不在电脑边上而又不想别人帮你控制幻灯片播放时,可以利用iPhone来遥控播放。打开iPhone上的Keynote,点击右上角的遥控模式进入如下图左侧的界面,然后前往Mac端的Keynote,进入偏好设置,选择遥控器,然后连接上你的iPhone(需要在同一WiFi下),iPhone上的界面就会提示你开始播放幻灯片。

这时,你的iPhone就变身为一个遥控器了,并且点击右上角的菜单还有激光笔功能,便于你在演讲过程中做临时批注。


这篇文章旨在帮助你更充分地运用Keynote来传播分享知识、展示设计作品,并不能美化你的幻灯片。想要做出美观大方的幻灯片其本质还是需要版式排列、色彩搭配这样的基础技能;同样,酷炫的动效也需要多欣赏临摹别人的作品才能运用得恰到好处。

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

转变被动型设计思维 建立的设计流程

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我是从十几人的小公司逐步跳槽到目前2千多人的中型公司的,朋友们吐槽的PM傻*、设计当牲口、需求临时乱改等等都经历过,即使现在偶尔也有该情况发生。


如果你真的非常想进阶高级UI设计师行列、想突破底层职业生涯的瓶颈,

请逐渐放弃“你看领导傻逼不懂设计,领导看你傻逼瞎JB设计”的态度。

Image title

对待工作的态度绝对是初中级UI设计师和高级UI设计师之间最大的区别

有朋友说因为他们是大牛,自带“牛逼设计”Buff,拿出来的东西别人第一印象就认可,领导没那么多事;自己在公司里就是个打杂UI,谁都能上来捅一刀,没可比性。


从大湿个人经历来看,任何环境的领导和工作本质上都一样,不可能说看人下菜碟:给高级UI设计师的需求就完美清晰、需求明确,到手就能丝滑流畅不便秘的出稿;

给初中级UI的需求就逻辑混乱、模糊不清,到手是一坨屎还是稀的,握都握不住。


————————我是分割线————————


造成UI设计师高低级别之分的原因一个是能力差距,另一个是处事态度。

首先除工作经验之外的能力都是需要初入职场就主动训练的,这和所处工作环境无关,它不会随着工作年限增长而有所提升,只能有意识的训练才行,包括沟通能力、分析能力、控场能力、分享能力等等。


工作初期不训练自身的主导能力,想着等有经验了、是大牛了的时候别人就认可那是不可能的;等到职业中后期你已经发育不起来了,只能沦为被动型美工,你们肯定也见过30多岁还是底层的平庸程序员、设计师。


初期能力确实有限但一定要敢说敢练,想法无论对错一定要表达出来,这是训练沟通和思考能力;最怕的就是做设计师的有话憋着不说,久而久之连敢想的能力都没了。


————————我是分割线————————


能力差距是高低之分的硬性条件,但成为行业精英的人还是只有那20%的人,处事态度就是决定成就的另一软性条件。

当然不要求步入职场没多久的人就有工作十多年的认知和觉悟,借用华强哥的话:“年轻人不气盛那还叫年轻人吗?”


只是希望能及早的开始矫正工作中的负面情绪,妄自菲薄绝对会造成恶性循环。

心里定位上就认为自己不行,别人当然也会觉得你不行,所以说自信也是搞设计的必备心理素质,实话来讲负面情绪在潜意识里确实会影响你的真实水平。


————————我是分割线————————


从进入行业职场开始,就要树立一个良好的行业价值观和从业态度。

很多从事UI设计的朋友,可能是学校相关专业、亦或培训转行、再或者就是为了赚钱,怎么进入这行无所谓,毕竟移动互联网爆发时给了所有人一块蛋糕;


但是进入后可能发现这一行不那么好做,丝毫不比之前从事行业轻松,更别提在学校的状态了,钱难赚事还多;不过既然从事这个行业,就要受得住压力,摆的正态度,有做到行业精英的觉悟和冲劲,因为你不做还有数十万的人要涌入这个行业等着做。


· Part01 设计流程解析 ·


大部分设计师可能受限于公司环境处于一种被动设计环节里,我们来看下标准设计流程中设计所处的位置:

Image title

与设计相关的环节几乎处于流程底部了,这也导致了一个现状:设计师不参与前期工作又或者名义上参与了前期工作,但没有从设计角度提出任何意见,只是被动接受。


虽然很多招聘需求上已经写明了:参与项目前期规划,参与产品需求拟定等等;

但说实话很多人把这个只当作企业招聘的套话模版,其实这是企业真的希望设计师去参与的事,因为这样可以帮助你更好的理解产品诉求,更有效的进行本职工作。


————————我是分割线————————


下图是大湿根据我目前的设计部日常工作总结的设计流程,也是我这里对设计师的基本能力要求;

它其实是一个闭环,不过这里为了容易说明我把它拆开拉直了:

Image title

从上图我们可以看到对UI设计师来说,它分为设计流程和设计职能两个方面;

那这里来看一下为什么使用这种设计流程可以减少“需求难、设计难”的尴尬,同时我们也来看一下作为UI设计师,在不同阶段的具体职能有哪些。


————————我是分割线————————


Image title

前期职能主要集中于产品阶段和交互阶段,目的是参与到产品整体设计中,从需求层和交互层理解产品功能,并以实际用户角度和设计师角度去考虑产品是否合理。

这里只是给各位一个大纲,具体的交互可用性验证都会在后期内容中详细解读。


————————我是分割线————————


Image title

中期职能就是所有设计师的本职工作阶段,大湿这个系列的文章内容多数集中于这个阶段;主要是视觉设计层面的各类设计方法论如何应用于实际工作设计中,这个我们后续也会有很多篇幅去详解,这里不拓展了。


————————我是分割线————————


Image title

后期职能才是实际流程中最重要的环节,因为就算前中期规划再好,他终究只是个未面世的概念阶段;一旦实际开发效果把控不好,产品一旦投入市面给用户第一印象不好,想要挽回就太难了,所以作为设计师,一定要时刻跟进着最后的一环。


————————我是分割线————————


不过这里还有一个默认的设计师职场规则:

不要越权,80%专注于本职工作内容,20%参与建议其他环节内容。

也就是说,作为UI设计师,你可以参与到需求环节或交互环节、对其提出建议和辅助修改内容,但不可以横插一杠子去干涉其他环节的工作决定。


所以如果目前你现在处于被动接受型状态,那可以开始尝试改变现状。

本意不是要求你去改变现有公司的状态和环境,这也不是作为设计师能轻易改变的;

而是说要开始培养对UI设计师自身的一个认知和定位,从而培养主动性。


那也有朋友说了你就会在这瞎JB扯,我们公司没有PM、交互,都是老板直接说要做个什么什么,然后需求、交互、设计都自己一个人做了,你说这有屁用?

这我就觉得奇怪了,这公司都这样了你还坚持干嘛呀,我写这个系列的目的不就是帮有需要的朋友早日进入资源更好的环境吗?


· Part02 设计方法论预热 ·


下图是我们团队工作中实际用到的设计方法论,现在不需要了解具体内容,

因为后续文章就是要向大家阐述这些方法如何结合到实际工作中的:

Image title

朋友们可能有疑问:我不是设计师吗,弄这些方法论干嘛,我又不是PM,会做图就行呗。但其实这是目前市场对高级设计师的要求,不仅要有视觉设计能力,更要有数据分析能力;


从13年互联网爆发、万众皆UI的盛况;到如今18年,热度褪去行业清场;但凡是能留下来的互联网公司都摸清了如今环境下怎么去更贴合用户口味,从市场中分一杯羹;


对设计师的能力要求也由13年的会做图标给8K,到现在七十二般武艺样样会的境地,这其实和冰山原理是一样的,视觉表现层始终只是水上的一小部分,需求分析和用户体验可用性才是水下的重头部分,如今的企业如果真的想站得住脚,只能在这方面进行竞争,市场就这样,想立足的我们也没办法只能跟着前进。


你从之前的专注视觉式工作到如今的数据、场景、用户分析式工作势必会觉得很累,但这是一个必经阶段。


————————我是分割线————————


方法论主要结合着上文的工作流程来看,是不同阶段使用不同的理论指导:

Image title

这些方法论具有模版性高、通用性强的特点,可以复用到任何产品的设计分析中;


不需要对每种理论都理解透彻,我们本职是设计师,对设计常用理论吃透就可以了;

掌握其他相关理论只是为了更好的帮助我们去理解和配合其他环节工作。


像“五导家”是阿里提出的产品设计流程,也是总监来之后时刻向我们经常灌输的,作为产品设计流程的总体指导理论;

5W1H需求分析法能帮助我们更好的挖掘用户实际需求,当然这是PM常用的理论,但作为UI设计师也是我们日常工作中常用到的方法;

KANO 模型是狩野纪昭发明的对用户需求分类和排序的工具,延展出来的有“十字分析法”,在分析页面内容、主次排版时使用非常有效,这是交互和UI常用的理论,上文的设计流程中期职能也体现了对应的应用。


当然我们这里还要清楚的认识一点,大湿从来不认为设计师是理论派:

学习的所有理论知识目的都是为了经我们手设计的产品体验更好、作出的设计稿更加站的住脚。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


别只顾着升级主机了!设计不顺利,可能是显示器的问题

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

很多设计师为在配置装备时,往往只考虑到主机的性能,然而却忽略了显示器,只有工作了一段时间,才知道显示器的重要性。比如有时候显示器的色彩不够准确,辛辛苦苦做的图,还可能被客户投诉。

如果说性能好的主机是设计工作的主心骨,那一个性能好的显示器更是锦上添花~

特别是我们这些Web/UI设计师,不管是设计阶段还是产出成品的效果,都和显示器息息相关的。

那么WEB/UI设计师要从那些方面来选择显示器呢?

小编认为主要从以下四个方面考虑:

1. 分辨率
2. 色彩
3. 健康
4. 性价比

一. 分辨率

现在做天猫电商之类的首页设计,最常用的宽度已经去到 1680 – 1920 像素,而 APP UI 界面也要从 @2X 的尺寸做起,如果还在用低分辨率显示器,会有着各种不爽。

举个例子,设计一个电商首页,默认新建一个1920*1080像素的画板,原图如下:

原图 1920p*1080

下面我们来比较一下同样尺寸、不同分辨率的显示器来展示在PS设计时的效果。可以着重看看网页页面和PS工具栏的大小~

图1: 1366*768PX(通常是普通笔记本的分辨率)

和原图对比,在PS画板的可见区域十分有限,设计元素时,会非常频繁地移动画板,我想你移动画板的次数比设计的操作还要多……所以用这分辨率的显示器就不要用来做设计了,只会受气,直接淘汰。

图1

图2:1680*1080PX(普通显示器)

基本上可以看到网页“安全”区域操作,但不能以100%方式查看全貌,所以这种分辨率也可以淘汰了。

图2

图3: 1920*1080PX(普通宽屏显示器)

嘿,这个比上面2个好一点了,几乎可以看到全貌,但必备要在PS全屏模式下才能看到。所以这种显示器嘛,还能凑合使用吧。

图3

图4: 2560*1440PX(高分屏)

嘿,我想大家也看到了,在这个分辨率下,不需要缩放、不需要全屏PS就能看到作品全貌,极大提升操作效率。所以 2560*1440 像素是目前WEB/UI设计师们的使用分辨率。

图4

大家会发现同样大的界面,分辨率越高,画面越精细,这个从网页页面和PS工具栏的大小就可以明显看出来~

来个对比,只有高分辨率才是正确的设计方式^_^

宽屏还有其它优点的,比如双屏操作,这对于写代码时可非常方便,一边写前端代码,另一边可以预览网页效果。

说到写代码,就不得不说到显示器的旋转功能了。旋转显示设计,比如小编最近在使用的明基BL2420PT显示器就有这个强大功能,可以把屏幕90度旋转,一次可以看几百行代码也不是问题……

有时候要做一些天猫详情页,横屏设计时两侧的空白会浪费空间,并且不方便把控页面的整体情况。但是竖屏操作的话就会很方便了~

二、色彩

几乎每个设计师都会遇到“色差”问题,而小编觉得要彻底地解决色差问题,最最好的方法还是提高设计师的能力啦。

但是磨刀不误砍柴工,无论是新手还是经验丰富的设计师们,一台色彩准确的显示器一定可以帮助设计师们事半功倍。毕竟色彩好的显示器才能显示出作品的效果!

更何况像我们做Web设计或者UI设计,设计成品一般会在其他显示器上显示,所以对显示器色彩的还原度要求还是比较高的~

这是同一张图片在专业显示器和普通显示器上显示的对比图:

这张图片可以明显看出,与专业显示器相比,普通显示器的色差真的很明显。

因为当设计师自己显示器的色彩不精准时,如果客户显示器色彩精准,那就很尴尬了;而如果客户显示器色彩也不精准,那色差就会更大了!!!

色彩方面,设计达人网小编用 Retina 屏的 Macbook 和最近在使用的明基BL2420PT对比了下,肉眼是无法看出偏色问题。一般来看,虽然苹果笔记本并不如艺卓的显示器那么专业,但是色彩显示在业内也算口碑标杆,由此可见在色彩表现方面,明基这款显示器的确不错。

同时,我特地参考了一些考量显示器色彩的重要参数,BL2420PT的色彩的确达到了专业级别:

色域:100%sRGB。参考下图,一般显示器的色域是96%~98%sRGB。假如色域无法达到100%,那这个显示器就不能完全显示所有颜色。

而BL2420PT的色域达到100%,色彩就足够丰富了。

色深:8bits色深,最大色彩达1670万,色彩过渡均匀。

参照下图,色深值越高,图像表现的色彩也越多,由此一来,色彩的过渡会更加均匀,图像就不会出现颜色断层的问题了。

色准: △E<3,色彩更加精准,最大限度降低偏色问题。

△E是一个衡量色准的值,显示器△E值越低,色彩的精准度越高。可以参考下面的图片,△E越高,色差就越明显。

另外,这款显示器还有好多专业的画面模式,例如“M-Book”模式可以一键还原苹果色,因为这款显示器本身采用的是标准的sRGB色彩,苹果电脑的色彩与之相比会稍微偏艳丽,因此”M-Book”模式能让显示器更适合苹果用户~

三、健康

设计师工作时需要长时间坐在屏幕前,颈椎、腰椎有时候会不舒服,长时间盯着显示器看作图,有时候还会加班到深夜,眼睛疲劳酸涩那是经常的事情。

所以选择显示器的时候,最好还要考虑“健康”的问题。毕竟设计真是一个“高危”行业,新闻动不动就报导年轻设计师猝死……所以不仅要给自己买保险,更要选择一个有益健康的显示器给自己续命啊~

颈椎、腰椎保护:建议选择可以大范围旋转升降的显示器。

比如小编的明基BL2420PT显示器可以升这么高

也可以这么矮……

建议最佳调整高度是屏幕中心与眼睛能够平视。

眼睛保护:长时间盯着屏幕,甚至忘记工作环境的光线变化,眼睛疲劳,视力易受损。

建议选择能减少闪屏及有蓝光模式的功能显示器。

小编使用的显示器目前还有一个护眼功能,可以根据当前环境光自动调节屏幕亮度。开启这个功能也是超级简单的,只要和上图那样,按屏幕边框上的触摸按键,开启“眼睛保护”,就可以智能调光了~

但有个缺点就是,每次开机,屏幕都是最亮的,然后再慢慢变暗……

不过瑕不掩瑜,显示器能自动调节亮度,也算是帮了一个大忙~毕竟每次工作都废寝忘食的,天黑都不知道,屏幕太亮好怕眼瞎QAQ

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

优秀用户体验设计师的12个特质

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

要怎样才能算上一个优秀的设计师呢?优秀的设计师意味着要在大公司里工作?还是要打造了一个意义非凡的世界?抑或是因为写了本设计领域热销的著作?…

一个优秀的设计师可能会满足以上的所有条件,也可能一条都不符合,这其实都不重要。当你和优秀的设计师一起共事的时候,你就会从他们工作和为人处世的方式——独处方式、思维方式、设计方式——来感受优秀的设计师到底是什么样子的。其实他们都有自己独特的处事风格,并且各自有着不同的特长和个性。我有幸和一些非常棒的用户体验设计师和产品设计师一起共事过,他们有一长串无法数尽的本领。但我观察到一些他们共有的特质:

“成为一个优秀的设计师的秘诀,就是热爱设计。”—— Onur Cobanli

 

1、他们善于提问(They‘re interrogators)

“有效的提问带了来洞察力,洞察力滋养了好奇心,好奇心浇灌了智慧”

在设计师的眼里,世界是千变万化的。优秀的设计师经常会对事物进行质问。如果有什么是难以理解的,他们就会去问个明白。

 

2、他们不会“走直线”(They avoid the straight line)

“‘走直线’是走不了太远的”

探索者将“永远不去走直线”视作自己的信条。探索的过程中总会伴随着未知。探索者不知道他们不知道的事情有哪些,他们的目标也不是去寻找有哪些事他们不知道,而是去理解事情的本质是什么。在我看来,优秀的设计师会用一种开放的思维来探索他们的项目,因为他们自己也不确定他们最终会发现什么。

 

3、他们是“双重性格者”(They’re ambiverts)

“双重性格者(同时具有内向和外向性格的人),往往更有创意,因为他们更能适应新环境”

双重性格者能很好地应付团体活动和社交场合,当然他们也喜欢有独处的空间做点自己的事。优秀的设计师既需要与团队通力合作,也要喜欢独立地想点子。

 

4、他们是很棒的废话探测仪(They’re great bullshit detectors)

“开发一个内置的废话探测仪”——Ernest Hemingway

当你跟形形色色的人一起共事时,你必须学会把他人的废话扼杀在摇篮里。优秀的设计师知道什么样的人废话多,并在工作中杜绝他们说废话的机会。

 

5、他们在“累积变化”中工作(They work in ‘cumulative change’)

“聚沙成塔 ”(“Small changes eventually add up to huge results”)

在会计学里,“累积变化”是指所有差异的总和。革命性的变化往往是累积而来的。优秀的设计师会抓住让他们不爽的东西,并且试着去做改善。他们善于把眼光放远来观察事物的全貌,并且明白微小变化会引起巨大的转变。

 

6、他们善于自我批判(They have a strong disbelief system)

“不要一开始就对自己设计方案的抱有自信,开始的时候应该持有一种好奇和质疑的态度”——Simon Pan

这条黄金法则是Simon Pan在读了Marty Neumeier 的《创造力提升的46条天才法则》后提炼出来的。在这本书中, Marty 强调说人的意识形态对学习新知识是有害的,我们要抛开先入为主的观念,并思考为什么我们相信我们所做的事情。

 

7、他们不怕犯错(They like to be wrong)

“掌声固然动听,但禁得起批判更难能可贵””——Paul Arden

优秀的设计师并不会特别在意自己的观点能否成为解决方案,他们更想要的是完美的结果,自尊心被他们扔在一边。他们的终极目标是:在使用它的用户和创造它的公司眼中,这款产品是最棒的。

 

8、他们会有一点点“魔怔”(They’re slightly obsessive)

“用不寻常的眼光来观察寻常的事物”——Vico Magistretti

“我喜欢和那些有创造力(雄心壮志)并且’魔怔’ (专注)的人一起共事”——Nicole Kidman

设计师在解决问题时会变得非常专注。我见过一些优秀的设计师,他们对自己的项目抱有极大的热枕,并且被它们牢牢地吸引着。当事情不顺利的时候就会令他们相当的苦恼。

 

9、他们是善于合作的独行侠(They’re collaborative loners)

“成为一个独行侠吧,这样你就有时间去思考,去探索真理。保持神圣的好奇心,让自己的人生变得有意义。”——Albert Einstein

优秀的设计师既能自得其乐地独自关在小黑屋里工作,也可以和团队一起合作,达成他们想要的目标。

 

10、过程是一切的关键

“把你最爱的东西都干掉,从你的想法中走出来,投入到过程中去”——Chirryl-Lee Ryan

过程是一切的关键。我们要对过程报以信任。这个过程是带领设计师通向最终目标的引路牌。在这个错综复杂的世界中,过程就是设计的关键。

 

11、他们善于倾听和观察(They’re great listeners and watchers)

“要想成为与人交流的大师,首先要学会闭上嘴来倾听”——Rick Warren

人都有两个耳朵,两只眼睛和一张嘴。优秀的设计师会遵照这个比例来使用它们(即两分听,两分看,一分说)。大多数人倾听是为了做出回应,优秀设计师的倾听则是为了试图去理解人们的所思所想背后的本质。

 

12、他们富有同理心(They give a shit)

“即便是简单的关心也是值得敬重的”——Edward Albert

好的设计师潜意识里是富有同理心的,他们关心人本身,喜欢问“为什么”,同时他们关注人的技能和本质。

“与普世观点不同的是,设计师并不是艺术家。我们通过艺术的手段将我们的思维和工序可视化,但与艺术家不同的是,我们致力于解决客户的问题,而不是展示我们自己对世界的看法。”——Erik Spiekermann

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


想创造一套自己的视觉语言,要从哪几个方面入手?

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们使用语言与人进行沟通,传达信息,记录内容,而视觉语言也发挥着类似的作用。从色彩到排版样式,从插画到品牌构建,视觉语言同样承担着类似的功能,它和传统的语言有着类似的特征包括结构化和沟通功能。

所以,视觉语言也是规范化的,标准化的,它足够自由,也保有约束。视觉语言本身也可以具备足够明显清晰的特色,就像每个人的表达方式和口音一样,这使得视觉语言本身可以强化和凸显品牌特色。那么想要创建一套属于自己的视觉语言,可以从下面的9个方面入手。

1. 构建品牌独有的配色方案

我们总是说,色彩和形体是用户第一眼最快注意到的东西。配色方案的视觉表现力最强,这使得配色方案成为视觉语言中辨识度最高的组成部分。配色方案本身需要具备一定的独特性,确保它整体上能够让人记住,区别于其他,品牌不至于在繁杂的互联网世界中迷失,也不会让用户无法记住。

另一方面,配色方案应该具备良好的兼容性,能够调和品牌不同模块,比如网站、APP、社交媒体、包装、名片等。

配色也应该体现品牌的价值。想想麦当劳的配色吧,黄色和红色为主。这两种色彩本身能够触发幸福(黄色)和饥饿(红色)的感觉,两者搭配加上经典的金拱门的LOGO,麦当劳的视觉识别度可以说是相当高的。此外,麦当劳旗下的许多其他的设计,也是在这个配色的基础上构建的。

2. 构建排版的层次结构

排版层次结构的构建,和选择字体同样重要。不同的排版层次,能够给人截然不同的感受,清晰还是粗糙,雅致还是有趣。在排版的层次结构上,并不存在对错,更多需要考虑的是合适不合适,风格和感受上的一致性。

当然,不同层级的信息,在排版层级上还是要有比较清晰的体现的,大小疏密对比度不足,会难以让用户感知到内容之间的重要性的差异。

以 Airbnb 为例,网站的排版有着清晰的层次结构,字体的大小、字重、间距和配色都已经标准化了。相应的,给人的体验也始终保持着应有的一贯性。

3. 建立栅格来规范内容之间的空间关系

视觉元素之间的位置关系,和它们本身的设计是同等重要的。如果你希望整个设计在细节上是清晰明确的,那么栅格会给你想要的。

FreeCodeCamp 对此有很明确的描述:

栅格赋予了UI界面元素以模块化的清晰结构,这使得整个设计团队能在此基础上更好地合作。这使得产品能够快速清晰地输出到不同的平台上。如果你是基于某个想法来构建概念设计,那么这种方法更加实用有效。

简而言之,栅格让视觉呈现的复杂度降低了。

4. 创建组件库

从按钮、图标再到卡片,你应当创建出一整套可用的、风格一致的UI组件库。

同样功能的控件,在页面不同的地方、或者不同的页面上有着截然不同的风格,是让人迷惑而糟心的。一个好的组件库,应当包含全部常用的UI组件,以及针对 iOS 和 Android 平台所适配之后的UI组件。虽然构建组件库本身的工作量并不小,但是在完成之后,能让后续的工作事半功倍。

5. 强调图片的风格和特征

在诸多图形化的元素当中,图片和插画是视觉性最突出的元素,这也是整个视觉语言当中最重要的因素之一,因为它从某种意义上是和品牌关系最紧密的素材。

构成视觉语言涉及到图片素材的方方面面,构图,色彩,滤镜,甚至相关动效的细节。

下面是 Smashmallow 中的网页设计,即使它们并不是同期设计也不是服务于相同的功能,但是很明显插画所采用的视觉风格是一致的,并且每幅插画当中都使用了共同的元素:热气球。这一元素和品牌本身是有着紧密关联的,而用户也可以从这些插画图片的内容,迅速意识到品牌本身的一些概念。

6. 为动效设定规则

动画效果同样是要遵循一些规则的。是快速移动还是慢速移动,是悬停触发还是自动运行?这些动效的运动规则其实是有着明显的视觉识别度的,就像日漫和美漫在视觉和运动规则上存在差别一样。

就像下面这个来自Dribbble 的动效,它大体上做着匀速的圆周运动,速度适中,其中有些元素并没有完全按照圆周运动。那么想想看,是否所有的做圆周运动的物体都和它一样呢?它们是否会带来不一样的视觉观感呢?

7. 让视觉和文本内容匹配起来

视觉语言并不是只涉及到视觉元素,文本并不是与之割裂的,在设计的时候,两者需要合理地配合,在体验上达成一致,传达一致的信息。

在下面的 Steffany 这个网站当中,整体设计呈现出非常明显的女性化的特征,文本内容在表达方式和调性上和整体的视觉语言保持着一致,并没有出现两者冲突或者竞争的状况。

8. 可信且可靠

视觉语言只有在用户接纳的情况下,才会地发挥作用,它要给人可靠的感觉。所以,整个视觉语言需要和你的品牌定位、气质表里合一,而不能让设计和产品、企业的气质割裂开来。

你能想象没有主角的芝麻街会是怎样的一种气场么?

整个品牌和视觉形象都是围绕着 Big Bird 和 Elmo 等角色建立起来的,每一个细节的设计都是围绕着这些角色来创建的。注意网站中角色和其他视觉元素之间的映射关系,它们让用户清晰地感知到角色和整体设计之间的关系是表里如一的,这使得整个网站的设计更容易为用户所接受,视觉语言在此发挥了作用。

9. 落实到具体标准文档当中

整个视觉语言在构建起来之后,需要保持各方面的一致性,在具体设计的时候,则得有一份详实具体的设计文档供整个设计团队和利益相关人员,作为参考。所以,完成整个设计之后,将整个视觉语言相关的内容和素材制作成设计风格指南,和整个品牌的设计规范统一到一起。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

全球12名资深设计师的失败设计案例和经验之谈

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


当我们每周深入探讨一个问题时,可以向这二十位经验丰富的设计师学习。本周,设计师们讲述了从他们设计过的一款失败产品中学到了什么。

Simon Pan(谷歌高级交互设计师 ,美国三藩市,国籍:澳大利亚)

2000年在美国佛罗里达州棕榈滩县的总统选举中,蝶形选票就是一个凶残设计的突出代表。

蝶形选票的设计将候选人与中间一列打孔交织排列在一起。这种设计让很多选民感到困惑,结果使他们不小心将本想投给阿尔·戈尔(Al Gore)的选票错投给了帕特里克·布坎南(Patrick Buchanan),或戈尔(Gore)与布坎南(Buchanan)两个人。“棕榈滩邮报”的一项研究推测,被蝴蝶选票搞糊涂的选民,让阿尔·戈尔(AlGore)失去了总统职位。

之所以称这是一个失败的设计并不是因为其结果导致乔治·布什(George Bush)赢得了选举,而是因为许多选民在投票后的当天认为自己投给了阿尔·戈尔(Al Gore)。更糟糕的是,因同样原因导致的一模一样的问题早在1996年棕榈滩县的选举中就已经发生过了。任何有能力的设计师只要看一看选票表格,就会发现这当中的可用性问题。任何业余的设计师,都本可以让用户提前测试选票表格的设计并指出问题。

相比选票的设计,当今的设计挑战与实际生活联系更加紧密、更加复杂和全球化。看上去大大小小的决定在我们的世界中承担着重要的结果,我认为,现在是时候让设计成为一个执证上岗的职业了。(阅读 Mike Monteiro的《Designs lost generation》)。

 

Andrew Doherty(Another.ai的CEO,德国柏林;前谷歌产品设计经理;国籍:澳大利亚)


老实讲,我们所做的几乎每个项目都以这样或那样的方式失败了。每次让我失望的是时间本身时间有限,我们的动作太慢了。我们必须砍掉一些需求和基本功能以满足商业上的诉求。我在媒体上写了一篇关于这件事的文章,结果在当时的设计圈中迅速传播开来。因为我认为在我们的整个职业生涯中,大家都感受到了这种痛苦:即优秀的UX设计师必须是战士,妥协的设计不是好的设计。

“我觉得设计是探索发现,而不是创造。可能因为我之前是考古学家的原因,我认为设计像是恐龙,掩埋在地下的遗迹。作为设计师,我们的任务是仔细清除污垢和粪便,使遗迹被发现,复原,可重新被使用,然后把它们在博物馆展出供人们体验。”(Andrew)

作为设计师,我们也必须用我们的想象力和想法来填补空白和缺失的部分。但业务目标,研发资源,时间和资金总会与我们的理想情况产生矛盾。如果我们不注意的话,他们会试图改变恐龙的本质,把它的骨头碾碎成粉末,而之后他们会奇怪为什么人们不想参观博物馆展出的遗迹了。最好的设计师是那些在限制下沟通,争取,并协调所有不断变化的(通常也存在相互矛盾的)各方利益,来主张设计使命的初衷的设计师。但设计永远不会是完美的。完美的设计不是设计,是艺术。而我们不是艺术家,我们是沟通者。而沟通者总面临沟通失败。但这就是沟通。不断失败,但不断尝试,永远尝试去赢。

 

Adham Dannaway(高级UI/UX设计师,合同/自由职业,澳大利亚悉尼,国籍:澳大利亚)

当我刚从事设计工作时,我为一家面向小型企业,提供DIY建站工具的初创公司工作(是的,又是一款建站工具)。这款产品最酷的地方在于:一个业主只需输入他的企业名称、行业和品牌色,一个充满相关内容和图片的网站就会在他的眼前自动生成。可以说是真正的一键生成网站。

我负责设计和构建网站的框架模板,使以后的网站可自动生成。我需要找到一个基于企业名称,所在行业和品牌色就可自动创建出一个像样的网站的方法。我接受了这个挑战。经过大量的摸索和研究,我决定用一个简单的属性列表来代表每一个网站,包括:模板(定义网站布局)、内容模块(内容类型包括图像、文本和视频的内容类型)、品牌色(最多2种)和主题(字体和样式)。我设置了多种可替换的属性以确保可建网站类型的多种多样。不幸的是,公司在我们完成产品开发之前就倒闭了。这是一个非常有趣且富有挑战性的项目,我学到了很多关于如何分解一个网站架构的知识。如果你在一件失败的事情中学到点什么,那说明还不算完全失败。

 

Ben Huggins(YouTube高级交互设计师,美国三藩市,国籍:美国)

我的一部分愿意去相信,精心打造的产品将永远是最成功的产品。这想法很好,但随着我在一路跌打碰撞中的学习,我意识到,这部分的我需要闭嘴了。

在我读研时,我和朋友Noah合作开发了一款应用,名为“捕捉亮点 ”,——一个帮助人们在他们的视频片段中找到并分享那些亮点时刻的应用。我们知道对于任何一个从GoPro相机,孩子的体育运动,家庭活动等场合中留下数小时未观看视频的人来说,这是一个巨大的难题。

因为我们做了一个可靠的应用来帮助解决这个问题,于是我确信用户们会发现这个应用的。

但他们没有。后来我们的钱都花光了,最终决定开放应用的源代码。我意识到,即使人们被某个问题所困扰,想出解决方案仅仅是个开始。引导人们使用解决方案仍需要做大量的工作,更别说让人们为之付费了。

有无数名言强调过,未曾实践过的想法毫无价值。但即使是实践过的想法也仍需能触及分发到用户。所以是的,我们学到了很多(像Noah写的那样),但不得不停止开发。那还有一线希吗?现在GoPro相机上有个叫做“HilightTag”的按钮。这让我们受宠若惊。

 

Nick Babich(Ring Central开发团队经理,俄罗斯,国籍:俄罗斯)

我要给你们讲个十多年前的故事,是我做过的第一个真正的项目。任务是建立一套控制船只进出的系统。我们的客户是一个港口运输公司,他们想在自己的网站上使用这个系统。

我为正在开发的系统感到兴奋,因为这个系统将使数百人的生活变得更好,所以我决定做一个拥有进技术和丰富的视觉体验的系统。我试着尽可能多地增加功能。例如,为管理员提供了一个强大的界面,允许从多个数据库直接导入和导出数据,同步事项,监控及修改重复的信息。

经过一个月的紧锣密鼓的设计、编码和调试工作之后,我向客户演示了该系统。这是一个功能齐全的系统,随时可以上线。。。至少我觉得是这样。但演示不太顺利,我受到了很多批评。

主要问题是:我所做的系统并不是我的客户想要的。他们需要的是一个带有WYSIWYG编辑器的简单表格,以便于即使是不太熟练计算机技术的管理员也可以学会添加新事项或更改表中的现有事项。这和我最初的设想(一个熟练的管理员将使用的系统)相去甚远。

但我学到了一些重要的东西:

  1. 明确目标。
    你应该永远非常清楚地知道你要解决的是什么问题,以及你的客户对即将搭建的系统有哪些期望。
  2. 你不是用户/客户。
    不要在没有任何研究或者需求说明的情况下去假设人们将如何使用你的产品。
  3. 功能不等于价值。
    更多的功能不会自动转化为更多的价值。最好的产品是那些能满足用户需求的产品。
  4. 迭代,迭代,再迭代。
    不要试图一次性做出一个完整的产品,要永远不断地在每次迭代之后在进行迭代和测试

 

Kymberlee Ide (副总裁,FCV交互体验设计师,加拿大人)

(*Kymberlee刚从McCann的体验设计副总监岗位辞职)。

回想我当乙方的时候,我在加拿大一家很大的银行带领团队负责一个数百万美元项目的数字化战略及部署。我是在项目进行到中途加入的,当时的项目进度有点曲折(项目缺乏原型,只用线框图)。

当我们终于要去做这个网站的主要(且非常复杂)的部分时,发现网站流程的设计真的非常差。

我记得当时我指出了这一点并建议团队不能再继续使用这样的方法和设计。老板对我说,如果我在领导团队和督导委员会中提出这个建议的话我将是自毁前程。但现实是,无论我怎样选择都是在赌上自己的一切。

最后发现结果还不错。我做了正确的事,在委员会中提出了建议,并申请项目排期延长5个月来修正这一部分的问题。讲这个故事的寓意是:做正确的事。

 

Alessandro Floridi (德勤公司UX经理,目前在澳大利亚悉尼,意大利人)

“没有失败,只有反馈”——Richard Bandler

我每天都收到“反馈”,但这仍是不愉快的体验。我最大的失败,即使发生在十多年前,仍如昨日般记忆犹新。我当时住在中国并经常和科技打交道。一位客户曾像我咨询关于数字广告系统的解觉方案,我想到了一个让我非常自豪的想法,利用一个我朋友正在开发的软件来监测观看者的性别,并针对性地播放广告。

你可能能猜到后面故事的发展了,而我曾认为我曾有过的最好的想法就是它了。这个产品很棒,很简单。大型显示器、照相机和实验软件,基本上就是在这里等着事故的发生。灾难发生在当产品被投放到一个法国的著名机场之后。在那之后不久,很快我收到一个精美的文件夹,里面是来自一个著名律师的关于隐私问题的300页来信。我没想过会是这样的结果!我应该提前测试产品,不应该盲目爱上我的想法。这就是我在这个项目中得到的教训。

 

Leslie Chicoine(体验设计及产品管理顾问,目前在美国丹佛,美国人)

我很早就了解到测试的价值,所以我还没有经历过那么多产品的失败。当然,不排除有些产品在测试或原型设计中表现得并不好,但我把这称为学习,而不是失败。我所看到的真正失败是发生在团队氛围中的。因此,在团队内部建立良好的沟通模式和共同创造出色的产品同样重要。

 

Buzz Usborne (Help Scout的 产品设计师,目前在澳大利亚悉尼,英国人)

很多事情都没有按照我的计划进行,而这正是重点,不是吗?失败使我成为一个更好的人和更好的设计师。不过我想到一个特别的失败案例,,那是我为自己的产品prevue.it所做的事情。在Prevue的内部有一个文件夹库,每个文件夹都包含你与客户共享的设计工作。有一天,一位朋友建议,如果我让用户把他们的资料库公之于众,Prevue就可以作为一个制作作品集的工具。主意听起来不错,所以我去做这件事情。

在几个月的时间里,成千上万的人因为这个特别的功能成为了注册用户。事实证明,投资工具的主意,作品集工具服务是门大生意!但这些新用户中没有一个愿意付费的,他们还要求额外增加一些我们的竞品所提供的功能。与此同时,现有的用户被“新”的产品方向搞糊涂了,感到困惑。可以说,我制造了一个烂摊子,花了好几年的时间才恢复,这过程中损失了大量的客户。

我在挫折与失败中,

  1. 我明白了,一件事情很容易做或看起来很有趣,并不意味着它是值得做的。
  2. 我明白了,新功能需要适应现有客户的需求,以及长期秉持的商业策略,而不仅仅是让产品看起来更好,或者更容易使用。
  3. 我明白了,通过简单地与客户交谈,我能更好地了解哪些功能应该优先考虑,哪些功能不能真正解决任何现有的痛点。
  4. 我明白了,有时候,成千上万的新用户并不总是一件好事。

 

Kylie Timpani (Humaan高级设计师,目前在澳大利亚珀斯,澳大利亚人)

实际上我没有机会足够深入地参与到一个产品中直至需要判断成功与否的阶段,更不用说我也没有参与过重要到需要一个成功/失败矩阵来衡量是否成功的产品了。我所设计的,大多是面向公众的网站,这其中的很多设计都经历过一些严重的失败。最常出现的失败,特别是在我早期职业生涯中出现的,是当我交付设计方案时,发现方案在很多方面都完全没有达到预期目标。也许风格不对,也许用户体验不好,也许页面布局没有与用户习惯相匹配,也许没有体现出品牌,也许用户就是不喜欢。

要克服这些失败是很难的,因为这意味着你在这个过程中漏掉了一些东西,或更糟的是,你忽视或省略了重要的信息。这种失败有点像炸弹可能随时引爆。但也意味着还有很大的成长空间。成长就在于我们从失败中学到的东西。我学到三种简单且快速的方法来帮助项目取得成功,也减少了出现失败设计的概率:

  1. 关注和我所设计的主题相关的所有信息和我要解决的问题。
  2. 如果有不确定的或需要更多详情时,尽可能多地问问题。我不担心这样显得无知或愚蠢。我告诉自己,我是用心投入的。
  3. 尽量摒弃个人偏见,从而尽可能多地考虑项目的问题和背景。

我发现采用以上方法,会让工作更有效,更深思熟虑,同时失败的可能性更少。最重要的是,客户会看到,你在努力理解他们的项目和使命,因此能培养双方的信任和健康的合作,免于项目中的阻挠和意料之外的反馈。

 

Graeme Fulton— riter的程序员和设计师,目前在英国直布罗陀,英国人)

我有过很多失败的产品和想法,举两个例子:

1.Lostgrad社区

在我毕业那时,每个人都在为寻找工作而烦恼,所以我想,应该建立一个社区网站来帮助他们:

http://graemefulton.com/projects/post/lostgrad-jobs-website

几年前,我在这里写下了关于整个项目的失败历程,这是早期快速失败教会我的最好的一课。

2. Slappy Face

我真的想不通这个项目为什么没有成功:

你可以在这里体验。

从这次的经验中学习到(创造这个产品很有趣!),你不可能单靠优秀的设计来获得产品成功。尽管它可能是世界上最好的产品,但如果你不把它拿出来,围绕它建立社区,打造优秀的销售团队,你就不会收获太大的成功。

现在,我正在开发一款关于电子邮件模板的应用,名为Tamarin Templates。

 

Kaiting Huang (谷歌交互设计师,目前在美国西雅图,中国台湾人)

要回答这个问题,我们首先要定义成功的标准。谷歌有一套易于操作的评判标准,称为HEARTS。可以用来衡量产品的用户体验:

  • 好感度:用户满意度。
  • 参与度:使用频率。
  • 接受度:新用户对产品或功能的接受程度或者意愿。
  • 留存:在一定时间内再次使用产品或功能的用户。
  • 任务成功率:完成某一任务的时间和达成率。

老实讲,在加入谷歌前,我不清楚我的大部分设计是成功的还是糟糕的,因为设计公司的项目效果并不能被长期跟踪。如果用“HEARTS”来衡量的话,我的大多数项目可能是“失败的”,因为根本没有资源或计划来继续跟进、迭代和优化。在没有测试的情况下,是不可能第一次就把一切都设计好的。但对我而言,只要能从项目中学到一些新的东西,就是取得了小小的胜利。无论是了解一个新的行业,例如设计运河调度的应用;学习如何与开发人员合作,例如学习编码和用开发语言进行交流;掌握一款设计工具,例如如何在Sketch中使用“符号”功能,还是结识有趣的同事,等等。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档