发现设计之因——传说中的细节

什么是细节，刚入行UI的时候我们都会有这种疑问，我也一样。虽然是艺术出身，但是对所谓的细节一知半解。很多时候感觉把文案信息层级整理排版传递出重要的内容，做一张绚丽的Banner，又或者是有趣的交互，再来个有故事性的详情页，就特喵的感觉自己贼有成就感，但是细节到底是什么？

曾经看过一个站酷大佬的文章《2019 UI能力细节拆解与复盘（上）》，在里面我看到了对图标的拆解，哇塞好多层次也，不过为啥光影关系可以算细节？作为一个学艺术出身，经过联考的熏陶，光影关系只是家常便饭罢了。那么什么是光影关系？如下图所示：

首先光影关系是我们常说的三大面、五大调，当然还有投影，也就是素描的基本操作。在一次学习吉祥物设计的时候发现，别人的教程也是根据光影关系做的，一开始拟3D版的我只像教程一样只做了3个面，完事后小小的也有立体感，顿时蛮有成就感的。但是事后经过放大处理发现，不够精致，于是我便加了高光、环境光、反光，如下图所示：

好像对细节有了那么一丢丢认知了，在那片文章中有对图标的拆解，于是我又开始了自己的图标拆解，分析自己和别人差了哪里？

我觉得差距最大认知和思维，别人把图标设计成了一个场景，而我设计之初却没有这种想法，艺术源于生活却高于生活，设计也是如此。我曾经和一起学UI的同学说过这么一句话：“我们学习不能仅仅只是学软件，还要学设计思维。”我认为跟着老师学习设计的思维是最宝贵的财富，软件哪里都能学，但是思维却不一定。我们都曾听过一个故事，授人以鱼不如授人以渔。学习别人的捕鱼技术，才是一劳永逸的真本事。

 

当我们设计觉得没有细节的时候，我们可以给主体物加光影，先是黑白灰，不够精致那么麻烦来个五大调；我们可以给底板和主体物打造成一幅场景，给底板加渐变、加光影、加上场景元素，去衬托主体。可是排版呢？

在学艺生涯中我们都学过一个神奇的东西：斐波那契螺旋线。什么龟？通俗来讲就是黄金比例0.618，像蒙娜丽莎就被动的举过最多的栗子，具体如下图所示：

许多知名的大品牌，像淘宝、天猫、京东等的详情页都使用了这个原理，百度首页也运用了黄金比例。

 

这个黄金比例用法很多，我也经常下意识的去使用，但是当别人问起时，哎？哦，我觉得这样好看emmmm，现在我可以告诉别人一个非常霸气的名字——斐波那契螺旋线。

 

还有一个神奇的东西叫做栅格化，我觉得最简单的释义就是：把你做的界面等分成许多相同大小的"正方形"，你界面内的元素都是以"正方形"大小为单位的。当然实际是有规则的：

W ＝ A * n – i;A = a + i;

i:被分割的区块之间的间隔（为了方便计算，大都为10px）

整个公示中，i和n一样是核心，再确定i，即可确定整个栅格化系统。

最后，我们可以用黄金比例突出主要内容，利用栅格化控制间距大小，还可以利用图片比例来制定模块大小。但是，好看也是为了提升产品易用性，千万不能仅仅只是为了好看而忽略好用。为设计而努力，共勉~！