普通程序员如何培养设计感?

你好,我是姬小光。如果你订阅这个号比较早,可能会看过我的《像素眼是怎样炼成的》。那篇文章主要是教你如何“找茬”,即如何发现设计稿或者网页上的不足之处。那么何为不足呢?文中主要讲了对齐的问题。其实除了对齐之外,当你看到一个设计作品的时候,也都会有自己的审美判断。其中最直观的感受就是“好看”,“不好看”,“还行”,或者说感觉“哪里不对劲”。但是到底哪里不对劲呢,你又说不出来。

对于我们普通人来说,是不太可能花很多的时间去关注设计上的东西的。有的人确实是有天赋,有的人是长期环境熏陶出来的设计感,比如身处时尚界的公司,或者广告公司等等。还有处在身边有很多设计师的团队中,每天耳濡目染的同学,时间久了也会有点心得。

那么,如果说我们要培养美感,那您肯定不乐意,谁还没有美感呢?不错,美感谁都有,但是我们往往只会评判,而当需要你自己创造美的时候,就会发现这真的很难。有人说我又不做设计师,没必要培养这些吧?其实不然,从你的毕业论文排版,到做分享给领导汇报的 PPT,其中最核心的技能都是排版和信息展示的技巧。

为什么现在网上有那么多教你做 PPT 的课程呢,就是因为有太多人连基本的排版都做不好。譬如一个简简单单的邮件,排版还是没有排版,排版好不好,立马就可以暴露这个人的职业素养,以及对自己是否高标准严要求。当然,如果你是老板就另当别论了,你甚至可以尽量显得随意,比如直接回复“安排上了”。

有的同学可能看过这本《写给大家看的设计书》,如果你有耐心仔细看完这本书的前半部分,那么你已经基本掌握了这些排版原则。其实排版的原则是共通的,记得我小的时候是从黑板报设计看起的,凭借这点积累,就可以优秀黑板报奖拿到手软,然后就兼任了 12 年的宣传委员… 扯远了。

说回这本书,书中主要强调了四大原则:亲密性、对齐、重复、对比。原文是这样解释的:

对比(Contrast)

对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注目,对比通常是最重要的一个因素,正式它能使读者首先看这个页面。

重复(Repetition)

让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片,等等。这样一来,既能增加条理性,还可以加强统一性。

对齐(Alignment)

任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而清爽的外观。

亲密性(Proximity)

彼此相关的项应当靠近,归组在一起。如果多个项相互之间存下很近的亲密性,他们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构。

这几个概念看上去有点抽象,但是即使你没有见过这些,也是或多或少有点感觉的。作者总结出这些概念,就是方便你的记忆,并且随时随地搬出这几个概念往上套。

以一个最简单的排版为例,很多人发邮件是这个样子的:

乍看上去也没什么问题,话都说清楚了,也有一二三。但是,如果应用前面讲到的四个原则,能不能做得更好呢?间距是否可以调整一下?对齐是否可以统一一点?字体能不能更好看一点呢?当然能,就看你是否愿意用心感受。

首先,内容是分区块的,这也是为什么要有段落的原因。那么行与行之间的间距,段与段之间的间距,就是视觉上区分这些内容最关键的部分。段落间距一般情况下是要比行间距大的,否则就看不出来是段落,而会让人觉得每一行是一个段落。

其次,标题与内容之间也要区分,可以用字体、颜色、字号等来区分,但同一页面上不要用过多字体,两三种最好。最后,系统默认的宋体虽然是印刷最清晰的,不过在显示器上会显得过于纤细,尤其是文本多的时候会显得凌乱,而微软雅黑就会好很多。

其实,只要平时多观察一下,就会有很多的参考方案。比如 WORD、PPT 里面都有模板,看看他的模板为什么这样设计。还有在浏览网站或书籍时候,也可以按照这些原则去套一套,找出那些你觉得好看的,并且分析一下为什么,就会学到很多。

回到刚才的邮件,只需要简单地排版一下就会清爽很多,类似这样:

首先,我把字体调整为(我)看上去比较舒服的微软雅黑,然后行间距就自然扩大了一点;段落之间没有微调,直接空一行;加粗了标题;将序号调整为比较规整的英文句点;代码部分使用了 Courier New 字体使之更有命令行效果;两张截图重新截取了不带杂边的部分,并添加了灰色边框,用来保持视觉上跟文字的对齐;最后,细心的读者可能会发现我在第一小点处加入了硬换行,这里是写邮件的技巧了,考虑目前大部分人的屏幕比较宽,如果一行过长,那么收件人左右看过去会很累,不过当做颈椎锻炼也不错。

好了,上面只是一个简单的排版例子。通过这个例子可以看出,你只要能把握好对齐、间距、字体字号的关系,那么在文档排版上就算是入门了。至于其他的设计感,也是一样要靠平时的积累和思考,就像你看多了美女,也一样能一眼看出哪里没那么美。

培养设计师之眼,就是要培养审美,而审美是共通的。首先你要知道什么是美的,然后多用心观察尝试,就能创造出更美的。当你获得这项技能之后,就不会允许“粗制滥造”的东西从你的手里流出了。

最后,再次推荐这本《写给大家看的设计书》,学习排版技能只看前半部分即可。后半部分为字体设计,感兴趣的同学也可以了解一下。

此外,这本书当年的译者 @李盼 老师是知识平台 GitChat 的创始人之一,大家可以点击阅读原文去我的 GitChat 主页瞧瞧。

END

原文发布于微信公众号 - 姬小光(hi-laser)

原文发表时间:2018-08-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏BestSDK

简单几步,教你做一名出类拔萃的配色交互师

前言 很多小伙伴都说自己配色如屎,因为没学过色彩,没画过画,导致每次配色时都小心翼翼的。 然后去网上搜各种配色理论,看了什么冷暖、明暗等术语后开始照着去配色,然...

2864
来自专栏PHP在线

未来Web设计的7大趋势

原文出处: Medium 译文出处:朵璞 1. 手势取代点击 我们都已经忘记滚动条曾经是有多麻烦,大多数用户都得煞费苦心地把鼠标移至屏幕右侧来移动这古...

3925
来自专栏互联网杂技

UX 设计之——商品详情页

现如今,30%的在线购物行为发生在手机端上。 对于在线购物一事,所有用户都期望能够得到快速、流畅的体验。因此,在购物过程的每一个阶段,即使付之最小的努力都有可能...

3046
来自专栏爱原型爱设计

干货!不得不知的UI界面中“行为召唤按钮”设计秘诀

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。

3629
来自专栏進无尽的文章

如何建立一款App的配色方案

当我们评价一款app时,配色应该是仅次于其功能性的另一主要因素。现如今人机交互主要通过GUI来实现,色彩在交互过程中扮演着重要的角色。良好的色彩搭配会帮助用户发...

1664
来自专栏互联网杂技

用微妙动效改善用户体验的简单方法

应用程序中的动效具有新的改良性的意义。跟过去的华丽、混乱的网站动画不同,新的动画干净、流畅,并且易于导航。忘掉你所知的GIF、令人不愉快的广告和Flash网站吧...

3027
来自专栏IT派

React 走红前端,最强技能树快速 Get!

2018 年 6 月 Hacker News 招聘趋势已经发布,数据显示,JavaScript 库 React 在连续12次占据榜首之后,并没有减缓趋势,又一次...

772
来自专栏安恒信息

ios6.1.3和6.1.4完美越狱危机并存 警惕越狱诈骗网站

· 最近,黑客winocm连续向人们公开了ios6.1.3和6.1.4完美越狱的部分证据,以证明自己已能够越狱。给很多苦苦等待越狱的果粉带来了希望。...

2965
来自专栏互联网杂技

超实用的设计师个人品牌打造指南

动画早就不是早期人们印象中的低龄向玩物了,从早年的卢卡斯影业到今天的工业光魔,动画技术证明了它可以实现无限的可能性;从70年代的高达、EVA到之后的宫崎骏、皮克...

3617
来自专栏AI科技评论

业界丨微软在Office软件里添加AI技术,更方便残障人士使用

AI 在一般性用途方面稳步迈进,比如虚拟助手,但AI有着更微妙的用途,对如今社会产生更本质的影响,比如对于残障患者。 这一点上,微软的Office软件将会迎来新...

31912

扫码关注云+社区

领取腾讯云代金券