设计

写给Web开发者的7个设计小技巧

每个Web开发者都不可避免的遇到视觉设计的选择难题,不管他们喜不喜欢。

也许你的公司没有全职的设计人员,只能靠你自己来应用新的UI,又或者你在全权负责一个私活儿,你想让它看上去比那些模板化的BootStrap网站更有设计感。

你任何时候都可以摊手说:「我又不是艺术家,我永远也没法把页面做得多好。」但是其实此中有许多值得借鉴的小技巧可以帮助你提升作品的设计感,而且甚至不需要任何设计方面的才能。

一、使用颜色和字重来制造层级(而不是用尺寸)

在定义字符样式的时候,通常会错误地过于常用字符大小来制造层级关系。

「这段文字很重要,我们让它变大吧。」

「这段文字是第二层级的,我们把它变小吧。」

与其单靠字符大小来区分层级,不如交给颜色和字重来起到更好的作用。

「这段文字很重要,我们把它加粗吧。」

「这段文字是第二层级的,我们来使用一个更浅的颜色。」

同时,尽量把颜色控制在三种之内:

• 用一个深色(而不是纯黑)来定义最主要的文字内容(比如文章标题)

• 用灰色来定义次级内容(比如文章发布时间)

• 用一个更浅的灰色来定义辅助信息(比如在页脚的版权信息)

同样的,两种字重对于一般的UI来说已经够用了:

• 给一般文字设定一个正常的字重(根据字体,取400或500)

• 给你想要重点突出的文字设定一个更重的自重(取600或700)

避免使用小于400的字重:它们可以用在大标题上,但是应用在小字上会让阅读变得十分困难。如果你正想要使用更小的字重来进一步弱化文字,可以考虑选一个更浅的颜色或更小的字号。

二、不要在有颜色的背景上使用灰色文字

在白色背景上使用浅灰色来弱化文字是个好主意,但是用在其他颜色的背景上就不那么棒了。

之所以浅灰和白色搭配起来那么和谐,是因为其本质是在降低对比度

让文字颜色接近背景颜色才是创造层级的正确之道,而不是简单的使用浅灰。

有两个方法可以在彩色背景上降低对比度的方法:

1. 降低白色文字的透明度

使用低透明度的白色文字。降低透明度能够将背景色透出来,从而降低文字的存在感且不至于与背景色冲突。

2. 基于背景色手工选取一个颜色

这比单纯降低透明度的效果要好,特别是当你的背景是图片或图案的情况下,降低透明度会让文字看起来有点褪色的感觉。

先选择一个与背景色相同的色相,然后调整饱和度和亮度来让它看起来更舒服。

三、调整你的投影

想让你的投影(Box-shadow)更突出,与其使用大量的模糊(blur)和扩展(spread),不如给它加一点纵向偏移。

这样做会让投影看起来更加自然,因为在现实世界中,我们通常会看到光线从上方投下来,从而在物体下方产生投影。

这个法则对内阴影(比如表单的输入框中的内阴影)也同样适用。

如果你有兴趣深度学习关于投影的设计,Material Design Guideline是个不错的参考。

四、少用边框

当你想要区隔两个部分的时候,尝试不要不加考虑就直奔边框(border)。

虽说边框是一个用来区分两个元素的好办法,但是它不是唯一的方法。而且,过度使用边框会让你的设计看起来很拥挤和古板。

下次你想要使用边框的时候,不妨试试下面几个替代方案:

1. 使用投影(Box-shadow)

投影与边框一样能胜任给元素做描边的效果,但是比边框更微妙,在实现同样目的的情况下更能减少视觉上的干扰。

2. 使用两种不同的背景色

给相连的两个元素应用稍微不同的背景色通常会让两者相互区隔。如果你已经在两种不同的背景色之间加了边框,试着把边框去掉吧,你不需要它了。

3. 添加额外的间距

有什么比增加间距更好的方法来区分两个元素呢?把元素远离彼此能够更好的创造区隔关系,而不需要增加任何新的视觉元素。

五、不要让本应该小的图标太大

当你想要给你做的东西添加一个大图标的时候(比如在落地页的「特色」部分),你也许会直觉式的从图标库中搜一个图标,然后放大到你想要的大小。

毕竟它们是矢量的,只要你缩放得当就不会损失任何品质。

但即使如此,那些本来以16到24像素的图标在放大三到四倍之后绝对不会好看到哪里去,它们缺少细节,从而放大后会让人产生一种简陋的印象。

如果你只有这些小图标可用,那么就试着把它们放到一个填充颜色的图形里面吧。

这会让你保持图标的实际尺寸,但是填充到更大的空间里。

六、使用着重色边框来给平淡的设计增加色彩

如果你不是一个视觉设计师,那么你怎么给那些没有夺目的照片和插画的作品增添色彩呢?

作为一个简单的小技巧,添加一个有颜色的边框往往能给平淡的界面增添一份生机。

举个例子,在提示框的一侧添加边框:

或者用来高亮显示一个选中的导航项:

或是横跨整个页面顶部:

添加一个有颜色的矩形不需要任何视觉设计的才能,却能给你的页面带来「设计感」。

七、不是每个按钮都需要背景色

当一个页面中有多个需要用户操作的动作时,往往很容易就会掉进单纯靠语义来设计的陷阱。

像Bootstrap这样的前端框架,通常会根据语义给你提供一系列可供选择的按钮样式:

「这是一个正向的按钮,那它设计成绿色。」

「这是删除按钮,那就用红色吧。」

语义对于按钮的设计是非常重要没错,但是按钮之间的层级关系也非常容易被忽视的重要维度。

页面中的每一个可操作项都能按照重要程度分级,大多数页面只有一个最重要的操作,一些页面有不那么重要的次级操作,更少的页面里还有三级操作。

在设计这些操作按钮的时候,能够通过层级来排布是很重要的。

• 主要操作需要非常显眼,推荐使用实底的、底色与背景色对比度大的样式。

• 次级操作需要简明清晰,但不过分突出。通常使用线框或是与背景色相近的底色的样式。

• 三级操作则要更加弱化,但仍然应该很容易找到。通常不需要过多的设计元素。

「那破坏性的操作呢,它们不应该时刻都是红色的吗?」

并不需要!如果在页面中,破坏性的操作不是最主要的操作,更好的处理方法是把它作为次级或三级操作按钮。

把大大的红色加粗样式留给这个消极操作真正成为界面中最重要的操作时再使用,比如在确认对话框里:


本文翻译自Adam Wathan & Steve Schoger发表在Medium专栏Refactoring UI中的《7 Practical Tips for Cheating at Design》。

阅读全文 暂无评论
生活

2018,请多多关照

又到了一年中的这个时候,太阳从南回归线打了个照面又开始向北回归线进发,这意味着,地球上的一年又要过完了,不出几天就要跨入2018年了。

坐在电脑前回想2017年,脑子里居然一片空白,好像没有什么值得记下的大事,不过也确实如此,如果人生也有大小年之分的话,2017年绝对算得上是一个可以忽略的小年。不过整理完2017年发生的各种事务后,才发现虽然这一年很平淡,但也不缺乏一些小变化。

家的香味里我提到了今年我从大学毕业开始租住的房子搬出来了,这是我人生中第一次独自搬家,收拾完屋子里的东西以后,我竟然坐在床上流起眼泪来,就像当时从大学宿舍搬出来一样。走的时候房东太太和我说,时间过得真快啊,转眼就两年了,接下来租这个房子的也是刚毕业的小孩,就跟当时我们几个搬进来时一样。

今年3月,我跟几个同事一起去了一趟重庆,这算是2017年唯一一次长途旅行了。这次重庆四日游算是我从大学就向往的一个旅程,短短几天见识了这座山城晴雨雾的不同天气,也的确不虚此行。

今年5月,我家从住了二十多年的中南大学搬到了远离市区的麓谷,离开了从小到大生活的地方,让我产生了巨大的撕裂感。我甚至坚持跑到中南大学的老房子自己一个人住了几晚,在校园里散步、闲坐,这也是我唯一念旧的办法了。

今年10月,国庆假期在长沙接待了两年未见的大学同学,之后我又跟大学室友一起回了一趟母校,我永远不会忘记11年入学的时候听到的那首「遥望」,那句「在你我相遇的地方,依然人来人往,依然有爱情在游荡。」虽然毕业两年,但每每重聚,都有说不完的大学故事。

今年12月,我和朋友一起去了向往已久的南浔古镇,虽然天公不作美,但是偶尔能感受这种小镇风光,让生活慢一点、懒一点,也是极好的事情。

2018年马上就要到了,我也不再许下什么新年目标了,只希望家人(特别是爷爷)身体要平安健康,对于自己,希望能够更勤奋一点,不要再懒了,不跑起来怎么能追得上努力的人呢?

谨贺新年,顺遂平安!

阅读全文 1条评论
音乐

Mixtape Vol.1: 微妙的初秋

终于有契机来做一个自己的Mixtape,选歌的标准就是所有的歌都是自己喜欢的。作为第一期,就让我像模像样地写一篇「发刊词」吧!

我的听歌口味向来让我摸不着头脑,喜欢电子音乐,也听钢琴曲,各种风格的音乐我都能找到合适的时候去享用,而这恰好能够让我拼出一盘风格杂糅的Mixtape。我向来对自己的品味颇有信心,正是如此我也希望通过YLE Mixtape计划,能够遇到更多知音。

每周一期,避开流行,收集灵魂乐、节奏布鲁斯、独立摇滚、电音、嘻哈、爵士等风格音乐。每周会有一个主题,并且提供Apple Music和网易云音乐两个渠道的播放列表,方便大家收听。


本期曲目

Seasick Dream – Jack Johnson

Let’s Stay Together (Live At Gaité Lyrique, Paris) – Her

Glamour Girl – Louie Austen

Be My Guest – JA

Boston (Live From the Grove) – Augustana

I Believe in U – Jamala

Saturday Night – Devendra Banhart

Saw You in a Dream – The Japanese House

The Point Of It All – Anthony Hamilton

Unconditional Love – Esperanza Spalding


如果你喜欢,请帮我传播,如果你有任何想法,也欢迎在网易云音乐的评论区留言,让大家看到你的观点。

🔗网易云音乐→YLE Mixtape Vol.1

🔗Apple Music→YLE Mixtape Vol.1

*混音带封面来自Unsplash。

 

阅读全文 9条评论
设计

Wǒ ài pīnyīn!

在全球化的今天,不仅十亿中国人在用汉语拼音,外国人也在用。汉语拼音早已经进入 ISO,它是汉语罗马化转写的唯一国际标准。现在,包括台湾在内的汉语人名地名的转写都采用这个方案,它涉及到我们每个人的护照、我们每天走过的道路、每天乘坐的地铁站。现在我们每个人几乎每天都在手机、电脑上用拼音:现在我虽然以「笔者」自称,却早已不再执「笔」,而是在键盘上用拼音输入您现在读到的这些文字。

但是,尽管汉语拼音如此重要,它依然没有得到应有的重视,一直都是屈于汉字之下的「二等公民」,而大家对汉语拼音的认识一直是停留在「学前辅助使用的小儿科」。对拼音的忽视,导致了诸多现实问题:学校里老师备课、布置作业都在为无法方便输入拼音而苦恼;外国友人在街道、地铁里那些莫名其妙的「拼音+英文」杂糅的翻译搞得一头雾水。汉语拼音绝不是小事情,不是「辅助」用,正确的拼音排版是中文字体排印里不容忽略的一项内容。

——Type is Beautiful

作为目前中文世界最主流的西文化方式,拼音不仅承担着教学的作用,还于汉字注音、音译等方面大有应用,但与其地位相反的则是在字体设计方面遭遇普遍的忽视。Type is Beautiful的这篇博文详细地讨论了拼音文字在互联网时代的尴尬境地。

阅读全文 暂无评论
设计

Unfold团队推出渐变工具Grabient

Dribbble上风生水起的设计师团队Unfold推出了一款全新的产品,为设计师和工程师准备的网页渐变工具Grabient。

通过Grabient你可以轻松地从预置的多款渐变色中选择,或通过在线工具轻松地修改渐变的颜色、角度等参数,并且直接导出为CSS代码。Grabient还提供所有渐变色彩的Sketch文件下载,供设计师朋友们直接使用。

工具网址:https://www.grabient.com/

阅读全文 暂无评论