网页APP间距的设计规范与规则

之前一直觉得色彩,图形,字体是 UI设计的三大构成,任何设计都是从这三大元素开始的,所有的 UI设计都是由这些构成的,但是却忽略了界面中空间的运用,也就是我们常说的间距。今天我想分享下几年前从 Google 的 Material Design 以及 8 pt grid 中学到的关于间距相关的教程,这篇分享有助于我们处理好界面间距一致性问题,让设计更加统一,同时定义规范里面的原子设计方法,能完美融合。

继续阅读网页APP间距的设计规范与规则

Sketch常用小技巧帮助提高工作效率

一、文件整理小技巧

sketch 在使用过程中,图层往往会比较多且一旦不注意整理的话,就会变得很混乱。如何快速整理好,快速输出成为设计师们的一大需求,我在使用过程中觉得有几个小技巧还挺实用:

当画板、文件夹很多又都是打开的情况下,要一个一个收起,非常麻烦。这时可以选择 View – Layer List – Collapse All Groups 快速收起所有画板,便于选择。

设计过程中,可能经常会复制很多飞机稿与设计稿混在一起,由于 sketch 画板之间缺乏标记,又不能对画板进行文件编组操作,所以往往很多时候要批量操作需要的画板时就会比较痛苦。此时其实用一个非画板的对象(可以是图形或者图片等)作为间隔,用来区分,就会很方便选择了。
继续阅读Sketch常用小技巧帮助提高工作效率

FUI编年史

第一部完整中文FUI编年史,希望大家喜欢。不足之处烦请各位勘误,多多指正。

Image title

什么是FUI

作为我们这个时代的人,您一定有偏爱的好莱坞超级英雄吧?你喜欢复仇者联盟的钢铁侠还是小正太蜘蛛侠?或者你是银河护卫队的粉丝钟爱社会小浣熊?还是说你更迷异型这种怪物呢?作为科幻迷我和您一样迷恋这些关于太空和外星人的电影。我更迷恋这些佳作里的FUI。所谓FUI可以是幻想界面(Fantasy User Interfaces)、科幻界面(Fictional User Interfaces)、假界面(Fake User Interfaces)、未来主义界面(Futuristic User Interfaces)、电影界面 (Film User Interfaces)的简称。不管F代表什么,都是代表了未来和科幻的意义。在我们的年代我们可能终生都无法得见我们这个年代的FUI变成现实。但我们看到了五六十年代科幻电影里的神奇之物变成了现实:安德的游戏寓言了iPad,星球大战则给了好多战斗机灵感,少数派报告里出现了leap motion和空气投影的技术。所以科幻电影就像一艘巨大的外星飞船降临到我们百般聊赖的现实生活,令人着迷和眩晕。FUI主要的目的就是在电影或游戏中展示科技的发达,比如钢铁侠的HUD FUI。当然你可能会说,这些FUI就是瞎编呗,但是说的容易做得难,要知道让八只触手的外星生物或者斯塔克土豪顺利地操作什么钢铁盔甲或者一艘从超人老家来的飞船并让观众相信这些都是真的还是蛮难的:需要以用户(不一定是地球用户)为中心设计。

Image title

图为《钢铁侠》中的FUI

继续阅读FUI编年史

蒙德里安论艺

艺术必须超越现实,必须超越人性,否则,它对人毫无价值。对于注重物质利益者来说,这种超验的品质是含糊和虚幻的,但对于超凡脱俗者而言,它是确实是明确而清晰的。

现代绘画作品打动我们之处在于它们伟大的精神性的表现,我们也能在周围观察到写实的造型、写实的体块以及形体的存在,但这只能导致我们从物质意义上去看事物。