成为优秀的设计师,并不是你有扎实的设计基本功就可以实现的。要成为优秀的设计师,你至少需要在专业基础功、设计资源与技巧以及宏观战略理念等方面超群出众。 特别提示:本系列文章是持工具不可知论态度,即无论你使用Sketch,Figma,Adobe XD,Inkscape或者是Microsoft Paint等任何工具,这些建议都对你有帮助。 开启任何职业生涯,都非常像第一次去吃自助餐的感觉。摆在你面前的,有无数种可能的选择。 热食、冷食、沙拉、饮料、甜点……新鲜的熏肉、蔬菜汤、大盘子、小碟子还有些很可爱的餐具器皿……天啊!还有软冰淇淋! 总之,你会发现大量的食物。而如果是第一次去吃自助餐的话,可能还会做出错误的选择。我该吃什么?能不能吃回本?这些食物干不干净? 吃自助餐的诀窍在于,每挑选一轮食物,就可以从中学会新的技巧,从而在数次以后,你的技巧就会不断提高。你可以总结出一套经验,知道该拿什么食物,不该拿什么食物,到底一次能吃下多少个芝士汉堡。 其实,学习设计的过程,也是如此的体验。第一次上手设计,你可能会觉得摸不着头脑,或者做出错误的抉择,甚至把时间浪费在无关紧要的方面。 因此,我希望通过本系列文章,结合自己多年的设计经验和教训,跟大家分享成为优秀设计师的捷径方法和建议。 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像素网格来设计的,整体的视觉效果看起来就会非常和谐。 借助于网格,我可以轻松地对齐设计中的所有元素,从而也避免了手动对齐不同图层等额外工作。对开发者而言,这也可以被看作是相互之间都认可的连贯一致的系统语言,从而提高工作效率。 总的来说,借助网格的设计,真个界面看起来都会非常清爽。 为什么要从网格设计开始:界面所有的元素都整齐地对齐。简而言之,它可以最大程度地减少设计排版方面的思考。