开启任何职业生涯,都非常像第一次去吃自助餐的感觉。摆在你面前的,有无数种可能的选择。
热食、冷食、沙拉、饮料、甜点……新鲜的熏肉、蔬菜汤、大盘子、小碟子还有些很可爱的餐具器皿……天啊!还有软冰淇淋!
总之,你会发现大量的食物。而如果是第一次去吃自助餐的话,可能还会做出错误的选择。我该吃什么?能不能吃回本?这些食物干不干净?
吃自助餐的诀窍在于,每挑选一轮食物,就可以从中学会新的技巧,从而在数次以后,你的技巧就会不断提高。你可以总结出一套经验,知道该拿什么食物,不该拿什么食物,到底一次能吃下多少个芝士汉堡。
其实,学习设计的过程,也是如此的体验。第一次上手设计,你可能会觉得摸不着头脑,或者做出错误的抉择,甚至把时间浪费在无关紧要的方面。
因此,我希望通过本系列文章,结合自己多年的设计经验和教训,跟大家分享成为优秀设计师的捷径方法和建议。
1. 从学会使用网格开始
间隔设计,可以说是设计行业中最重要也是最基础的技能之一。
当我发现可以通过Adobe Illustrator里面的标尺功能画出辅助线时,我顿时喜极而泣,就像个得到心爱玩具的小孩一样。
间隔设计本来就不简单,而且要保持连贯一致的间隔设计,就更加难了。而网格不仅可以帮你对其参照物,同时在你处理上百个图层时还可以帮你减少脑力劳动。
本着以教学的目的,我们以设计网页为例,并且最好从简单的12栏网格开始。
为什么是12栏?因为12这个数字可以方便地被多个数字整除,从而可以轻松地设计不同的布局架构。比如1栏,2栏,3栏,4栏,6栏以及12栏布局等。
那么,12栏网格的宽度又该怎么设置呢?接下来我想给你推荐一个我自己经常使用的公式(宽度单位为像素):(12 * 每栏宽度) (11 * 间隔宽度)= 总宽度
我自己的所有设计,都是基于8像素网格来设计的。所谓8像素网格,即界面所有的填充、边距以及元素尺寸均为8像素(的倍数)。在12栏网格中,这个规则也是适用的。
以下,是我日常设计作品中常用的总宽度参数:(12 * 64px) (11 * 24px)= 1032px 宽
这即是说,设计网格中的每一栏宽度都为64px,而中间的间距宽度都是24px。而因为所有的文本间距和元素边距都是基于8像素网格来设计的,整体的视觉效果看起来就会非常和谐。
借助于网格,我可以轻松地对齐设计中的所有元素,从而也避免了手动对齐不同图层等额外工作。对开发者而言,这也可以被看作是相互之间都认可的连贯一致的系统语言,从而提高工作效率。
总的来说,借助网格的设计,真个界面看起来都会非常清爽。
2. 坚持使用固定的字体系统
我发现,在设计过程中,许多初级设计师总是在字体大小上犹豫不决,迟迟无法下决定。说他们经验不足,倒不如说是他们不知道设计的参考架构罢了,所以才导致他们的设计作品通常要不是太大,要不就是太小。
在设计过程中,应该建立一套简单的字体系统,并一直坚持使用这套系统。
即便是非常复杂的界面,其文本字体字号大小也不会超过10种不同。毕竟,字体大小只不过是区分不同内容之间的多个标准之一罢了。
而其它的标准包括字重、色彩以及间距等其他变量。借助于这些变量,你都可以让用户清楚地认识和了解你所设计的架构信息。
为了让自己的设计保持统一连贯性,你可以在设计过程中保存常用的文字设计格式。通过这种方式,你可以在设计界面顶端或界面主题文字时,直接调用已经保存的设计风格,从而节省大量时间。
在确定相应元素的模版风格后,你只需要将这个风格重命名,然后就可以在以后的设计中重复调用。但这其中真正的技巧在于,你真的要在后续的设计过程中使用它们。
如果你在模版风格中修改或更新相关设计的话,大多数设计工具可以直接将这些更新应用到使用该设计风格的界面元素中。而视你的设计工作量而定,通常你都可以节省数个小时的时间。
3. 色彩选用严格谨慎
我非常喜欢优衣库的衣服,因为这个品牌的衣服价格比较亲民,而且也符合我个人认知中有时候显得非常高端的中端品牌。
但优衣库的问题在于,他们同一款式的T恤可能会推出多达93种不同颜色的选择。红色、绿色、蓝色、蓝绿色、青绿色、浅蓝色、蔚蓝色、深蓝色、浅青色……
实际上,这么多颜色选择并没有真正的意义。对我而言,面对多种选择时,我是无法坚决地做出抉择的。如果真的有上千种颜色选择,那最终获益的可能也只有彩通色卡(Pantone)的年度代表色了。
为了应对色彩选择困难的问题,我参考了许多百万富翁的“衣橱”,并从中严格筛选出了自己喜欢的选择。相比于满衣橱的各种颜色,我把自己的“衣橱”颜色限制在几个特定的色彩范围之内。
色彩,永远都有其存在的意义。如果你只是为了增加颜色而增加颜色,那你其实根本不需要那么多颜色。
除了黑色和白色之外,我一般常用的色彩主要有五种。
而在运用这五个色彩的过程中,我还可以借助透明程度(即100%透明度、50%透明度、25%透明度……)。这样一来,基于这五种色彩,我可以创造出更多的色彩,而且我也不需要再去选用某个颜色代码,从而节约了我的时间。
另外,如果涉及到图表或相关可视化图像的设计时,我还有另一套专属的色彩库。
品牌主色调:比如,电邮营销平台Mailchimp,其主色调就是黄色。 品牌次色调:即相对主色调而言稍次要的重要色调。对Mailchimp而言,其次色调是稍微带蓝绿色的。 成功/顺利:通常都采用的绿色。这即意味着“做得不错!”或者“一切都是按计划行事的!” 警告:通常都采用的黄色。这即意味着“注意!”或者“这里可能会出现问题。” 错误:通常都采用的红色。这即意味着“你搞砸了。”或者“系统严重瘫痪。” 黑色:黑即是黑,这是一种有点厚重感的颜色。 白色:主要用于背景颜色等领域。
在色彩选用方面,其实很容易找不到方向。也正是因为你在选色过程中容易在大量选择面前不知所措,所以你才应该限制你的“个人色板”数量,并且在你的所有设计作品中坚持使用自己选用的主色调。
4. 要对自己的设计工具“知根知底”
实际上,你具体使用的是什么设计工具并无关紧要。而真正重要的是,你要“沉下去”认可自己的工具,并且最好做到对工具的各种功能了如指掌。
虽然我自己常用的是Adobe Illustrator软件,但不可否认的是,我仍然有一些我不是很了解的功能。之前我并不知道消失点网格的主要功能和使用方法,但由于曾经不小心启用了这个功能,而不得不通过谷歌查询去寻找撤销方法。
多接触行业内的人,多了解有关资源,从而可以在这个过程中不断地深入了解和学习使用你的设计工具,然后再不断地付诸实践。
我们招聘初级用户体验设计师后,通常都会让他们在入职后花几个月时间学会熟练使用Sketch。通过这几个月时间,不断地学习和了解快捷键、格式风格、最佳实践以及高效设计技巧等。
在那之后,当他们开始尝试去设计登录界面时,他们就会有一种“弹钢琴”的感觉。手指触碰到钢琴键盘时,会让他们有一种似曾相识的感觉。
在你还没有对设计工具知根知底之前,你可能都需要不断地花时间去熟悉了解。
很多情况下,工具中的某项内置功能可以直接完成你一直在尝试实现的设计,耗时短效率高,但你就是不知道。
所以,一定要先多花时间在投入方面,要不停地问自己“还有没有更好更便捷的方法?”
5. 拓展延伸设计工具的潜能
虽然Sketch、Figma以及Photoshop等设计工具的功能非常强大,但每个工具都有其局限性,所以一定不要让工具的局限性限制了作品的局限性。世界上有许多有才华的用户。
他们设计出了各种我们熟知的组件、插件或者扩展程序,从而可以让我们在使用这些工具的基础功能之上,还可以尝试一些不同的全新体验。
尝试着把设计工具想象成一个摄像机。以下是一款好莱坞的制作团队喜欢用的机器。
摄像机的主体机身可以提供基本的功能,比如录像和视频存储。然而,大多数摄像机都还配备了卡槽、插口、连接线、支架、夹钳等,从而可以连接或使用额外镜头、显示器以及话筒等设备。
有了这些额外的工具,可以让你更快更好地完成相关工作:整个画面更加清晰了,声音也更加清晰了,电池使用时间也延长了。
拓展延伸设计工具的潜能,不仅可以节约你的时间,还可以让你完成那些基本功能无法完成的困难任务。
比如说,Sketch的插件库里面有许多来自其他开发者分享的插件。通过这些插件资源,比如额外数据、翻译服务或者可用性测试,设计师可以进一步完善自己的工作流。
Sketch虽然本身不提供这些插件功能,但这些插件的不断完善和更新,可以让我们便捷使用更多的功能。
另外,一定不要忘了通过辅助工具不断完善自己的工作流。
有了这些辅助工具,你在重命名图层、生成表格或者创建色盲障碍人士可以看到的颜色软校样时,能够设计出更加出色的作品。
为了提高自己的工作流,你可以选用各种不同的菜单栏应用、浏览器插件或者工具。以下是我的常用推荐:
Sketch:Runner Pro, Connection Arrows, Anima Toolkit, Chart Full, Artboard Manager, Symbol Organizer, Rename It, Stark, Kopie
谷歌Chrome浏览器插件:WhatFont, Dimensions, Window Resizer, Design Grid Overlay
Mac 应用:Nucleo Icons, The Noun Project, SkyFonts, BetterTouchTool
为什么要拓展延伸设计工具的潜能:拓展应用就好像超人一样,可以让你有超能力,从而让你超快速地完成某些设计工作。使用拓展应用,也大幅度地改变了我对产品功能的认识,我也总是建议自己的客户多开发一些拓展应用,这个领域有不错的商业机会和发展前景。
6. 创建专属的重复利用工具
我最开始入行的时候,面对的是来自各行各业的客户。当时我的想法很简单,就是要解决客户提出的各种设计问题。
在完成相关背景调研和发现后,基本上每个项目都是从零开始:准备有关项目文件、确定设计风格、收集常用的元素和组件,比如按钮、文本框、复选框、下拉菜单、日期选择器等。
最开始的时候,我还非常享受这种探索式的自由创意设计。毕竟,从零开始做设计,是一种不错的体验。然而,当你不停地重复设计某些元素和内容后,你就会开始觉得有点抓狂了。
于是,我决心要找到一个开启新项目的全新方案。通过第一个既主流又简洁灵活的前端开发框架Bootstrap,我找到了大量灵感。
Bootstrap的流线型设计体验,让我找到了灵感,并决定创建一个专属的应用设计模板元素。
于是,我回顾了过去的项目作品,并从中找到共同特征和元素,然后再围绕这些元素创建一个模版文件。
以下是一些我常用的Sketch模板:
因为这些设计元素和内容基本上都是预先设计好的,在后续设计中直接调用这些元素,可以让我有更多的时间去研究和探索视觉设计风格、微交互、界面布局以及设计解决方案等更重要的问题。
后厨的厨师,永远都不应该在晚宴开始过后才开始切胡萝卜和洋葱,这些准备工作都应该在晚宴开始前就要准备好的。同理,这个道理放在设计行业也说得通。
当你发现你在做重复工作的时候,一定要让自己的工作模版化,这样才能保证你高效工作。
为什么要创建专属的重复利用工具:通过创建专属模版,我逼迫自己不断地优化完善这些可以重复使用的设计元素,从而在后期真实的设计场景中,让这些元素灵活又可控。也正是通过这个方法,我在设计领域的功底才有了突飞猛进般的进步。
7. 不要尝试重新设计常用的设计模式
对新入门的设计师而言,他们可能总是想着打破常规设计模式,做到石破天惊、一举成名。他们总会认为,应该要更加创新,重新设计,让每一个设计元素都与众不同,而传统的设计原则在他们眼里根本都不重要。
当然,我们的设计肯定存在重新设计的空间,我们也肯定有时间来做这件事。但如果刚入行就想做这件事,绝对为时过早。
毋庸置疑的是,规规矩矩地做好基础的设计,在这个过程中遇到问题善于分析并解决这些问题,你也可以在设计职业生涯中取得成功。
以我自己为例。虽然我很想从根本上重新设计输入提示文本框的微交互,但我觉得这件事不值得我投入过多时间。
也许的确有更好的设计输入提升框的方法,也许更快、预测更精准。然而,只要它不是这款产品的核心功能(比如谷歌搜索),那我就应该把注意力转移至更大更重要的设计挑战方面。
传统既定的设计模式之所以存在,是因为它们是经过反复验证过后总结出的可用模式,而且也取得了不小的成功。
要去改变或者挑战现有做法,让它变得与众不同,这并不是重新设计的理由。这只会给自己增加额外的工作,浪费更多时间,从而可能会让自己错过真正的对自己有帮助的设计挑战。
此外,使用常用的设计模式,可以轻松地建立相互之间的信任。用户或客户会发现,你设计的作品,能够始终如一地体现设计内涵,提供高效解决方案,同时也会更放心让你来帮他们设计将来的项目。
8. 利用辅助设计资源
如果我用秒表记录自己设计过程中各个环节的用时,我可以很自信地表示,我大部分时间都用在了思考虚假用户名、搜索占位符头像以及编造虚拟数据等方面。
实话讲,我还非常享受这个过程。但话又说回来,我们的时间真不应该浪费在这上面。
设计的核心,必然在内容和数据这两方面。因此,自始自终都应该对此表示关注。
如果没有数据支撑,你的设计就无法也不可能向用户传达你的故事。“乱数假文(Lorem ipsum)”没有意义,但你的设计却不应如此。
如果设计中的数据是不合乎逻辑的,或者是没有意义的,那你的设计可能就无法体现出相应价值。因此,一定要花时间用心设计数据和内容,从而向用户传达出设计的功能性和实用性。
然而,如果要设计类似于下图中的数据表格(注意信息量和信息密度),通常都需要耗费大量时间。
相比于手动输入所有的数据信息,通常我都会借助辅助设计资源来帮我自动生成虚拟数据。
上图中每一个IP地址、姓名以及类别名称,都是通过第三方数据资源自动生成的,从而让我省去了大量时间和繁琐的工作。
在Sketch中,也有个内置的变量批量插件(data populator)。借助这个插件,你可以搜索来自互联网的大量随机数据列表(我最喜欢的是Populate),当然你也可以自己创建一个随机数据库。
Populate的数据列表。
我自己创建的数据列表。
有了这些随时可以调用的虚拟数据,我可以通过设计工具(或第三方插件和拓展程序)来批量填充自己的设计。
以下,是Sketch变量批量填充的主要操作流程:
一旦你下载或创建好文本数据列表后,一定要确保你已经将其添加中在Sketch的偏好设置中。
然后,当你选定某个图层或者带有文字的元件(Symbol)后,你只需要通过点击相关数据图表就可以自动批量填入这些虚拟数据了。非常地方便!
9. 少设计
听起来你会觉得太不符合常理了对吧。毕竟,你是设计师,对吧?
初级设计师的确设计工作量非常大,而且是非常大。如果你去查阅他们的设计文件夹,你会发现若干设计草稿,而且可能还会出现同一文件名若干不同版本名的情况。
迭代,永远在路上!
这并没有什么问题,测试和迭代本来就是设计过程中的基础环节。
但随着自己在设计领域的技能越来越熟练,你已经知道什么合适,什么不合适,所以你其实完全可以做到在提前在脑海中“打草稿”,然后再通过设计工具把设计想法通过视觉画像呈现出来,完全不需要一次又一次的迭代。
但要到达这个阶段,你必须通过不断实践练习,不断从各种失败和成功案例中学习。这可能是个漫长的过程,但直到有一天,你会突然发觉,原来我已经到了这个阶段。而这个时候,你也有更多的自由,去接触更多更大的设计挑战。
随着设计技能的不断提升,你可能就需要涉及更多的设计思维和解决方案等层次的问题,而不仅仅是停留在以前的执行阶段。
这个时候,你对所在机构的存在价值,不再是让你根据设计规则和要求设计出的作品,而是你自己的创意才能。这个时候,你的设计意图也成了最关键的因素,而设计稿上的元素,只不过是达成目的的方式罢了。
为什么要少设计:只有在设计实务等方面做到游刃有余后,才会有更多的时间思考更宏观的问题,从而尽可能地优化完善设计方案。
10. 多写
坦率地说,当我最开始写设计有关的文章时,我内心是非常心虚的。因为我自己在这个领域的资历也不够资深,所以我觉得我的文章并不值得别人阅读。
不过,通过我的写作经历我发现,原来写作是为自己而写的。它和读者无关,它和是否有掌声也无关,它更和是否要出版一本书无关。
图片来源:Pexels.com
通过书面方式表达你对设计的感悟,可以让你反思自己的信念、你的设计技巧以及整个设计过程的体验。
这就好比反思训练一样,它需要花时间。随着文字的不断累积,随着时间的不断推移,随着思想的不断凝聚,你会发现,你对设计的认识和见解已经上到了一定的层次,已经不再停留在如何设计更友好的设计界面了,也不再停留在如何设计更友好的空状态了。
如果你无从下笔的话,我有如下3个建议:
你学到了什么?尝试将你如何到达这个阶段的细节用笔描述出来,以及它是如何让你变得更优秀的。
你有没有教别人做过某件事。可以将这个教授过程拆分为几个阶段,并且在写作过程中做到有理有据。
思考你非常认同的观念和想法。提供既能支撑这个想法又能挑战这个想法的有关例证。
11. 关注产出
这项技能,要真正地付诸实践则有点难度,毕竟你可能需要放弃某部分内容。
作为初级设计师,大家都有一个雷打不动的想法,即要不遗余力地设计出最完美的作品。设计作品,就好像自己的亲生儿子一样,所以他必须完美。
然而,最终你还是会明白,有时候结果比设计更重要。到那个时候,你就会明白最关键的是按优先级排序。而不管你接不接受,“已经够好了” 会成为你的日常心态。
不要等你真正明白商业需求和用户产出的那一天,你才开始来理解这个建议的内涵。设计中越不想碰见的就是越来越少的成果,而不到真正的瓶颈期,你可能就很难认清这个事实。
在解决设计问题的过程中,你应该始终围绕产品路线图,与产品管理团队和其它利益相关方紧密协作,高度关注用户和有关问题,并着力提供有效的解决方案。
如果你发现自己围绕着产品路线图在外围打转,没有真正解决用户需求等相关问题的话,那这就只能说明,你没有找到真正的重点。
如果你自己不确定的话,可以回顾你希望达成的目标产出,同时对比参考你的设计成果:你的作品是不是只起到了“装饰”作用?如果没有这些所谓的“装饰”,前述目标是否也可以达成?
为什么要关注产出:在不断关注目标产出、而不是注重细节“装饰”的过程中,我成为了一名更具战略眼光的设计师,而且这也并不意味着我的设计作品就不再吸引人。我仍然能保持高度有效的执行力,相关利益方也相信和认可我的作品,因为他们也知道我总是会关注整体产出。
12. 共赢合作
在最后这条建议当中,我想提醒各位,这个世界并不是围绕我们而转的。我们不是天才,我们也没有特权,我们也不是利益相关方。
始终保持谦逊的态度。要记住,一个产品的问世,背后离不开各个团队的鼎力配合与协作。在这个过程中,产品经理、开发者、销售人员、推广人员等各个岗位的团队成员都发挥了关键作用。
图片来源:Pexels.com
作为设计师,首先一定要认识这个大前提,然后在这个过程中一定要保持共赢合作的工作态度。互帮互助,优先考虑他人的需求,带着目的去设计,着实解决相关问题。如果整个团队齐心协力的话,你们也就会更容易成功。
保持这种工作态度后,你会发现在与他人共事的过程中,你的同感心会逐渐增强。你会发现自己可以更好地认识和理解他人的情感、焦虑以及意图,而这些都是维持相互之间和谐友好关系的重要因素。
多尝试主动与人沟通。平时可以多与团队成员面对面沟通交流,多注意倾听他们的想法。从内心里接受并认可这些规则,不仅要和他们建立互信关系,还要成为彼此之间真正的团队伙伴,从而在设计过程中互相支持。
写在最后……
不积小流无以成江河,不积跬步无以至千里。要成为优秀的设计师,你的设计基本功一定要扎实才行。
无论是什么行业,要真正地成为这个领域的专家,必须要经过数年的练习时间,而每一项技能也都需要不断地练习才能熟练掌握。世界上所有的优秀设计师在间距设计、字体排版以及色彩运用等方面都有扎实的基本功。而一旦你能够在这些方面做到游刃有余的时候,你会发现,原来设计是如此地轻松。
如果在设计过程中,总是面对各种选择而迟迟无法下定主意,那你的设计过程注定是一个漫长而艰苦的过程。完善和提升自己的设计基本功时,一定要真正掌握好某项基本功后,再去学习和熟练使用下一项功能。
文章来源 36Kr
END