界面细节不够好？你得注意这些

我们在做界面的时候，经常会觉得做的挺好的，但是其实有很多细节是被我们所忽略了，就像我前几天让小伙伴们给我看的首页，指出了一堆的小细节的问题，就是这些小细节和问题造成了界面没有质感。今天我们就来讨论一下如何抠细节。

我们常见设计到的细节问题大多出现在交互样式、文字、风格、圆角等。

交互样式

首先我们先来说一下最抽象的交互，可能大家会问，为什么交互会关系到细节以及界面统一，比如说同一层级页面里的切换，不同的页面但是切换是同样的表现形式（这个问题可能有点傻，但我在做练习的时候，真的没有考虑到，所以大家不要犯一样的错误）。如下图所示：

优酷的底部图标有5个，而这5个页面中有4个的顶部都是标签切换的样式，而且表现形式都是一样的，但是在首页点击进去的二级页面切换样式就会改变，这是我们发现的优酷的规律，而我们需要做的就是让看我们作品或者产品的人也能够发现这些交互小规律。

我之前画图的时候就是找参考，会选取参考里比较好的一个部分来做，因此在做的时候可能就不会考虑到交互细节的统一，单独的页面是不会发现问题的，但是页面比较多的时候你就会发现总觉得哪里有问题。

文字

在界面中除了框架之外，最多就是文字了，包括搭建的一些框架都是由文字组成的，因此文字在细节统一中最重要的组成部分。

不知道大家有没有经常遇到这样的问题，就是在不同的界面要用多大的字号，或者同一个页面不同位置放多大字号，我就经常遇到这样的问题，导致我有一个简单的界面出现了很多不同的字号，小伙伴给我指出来了界面看起来很杂乱，如下图所示：

所以我们需要把字号控制在三种以内，同时字号最好都是4或者8的倍数，这样在信息比较多的页面能够让整体看起来更规范一点，同时用户理解信息更容易。

风格 

1、强化品牌基因在用户心中的印象

几乎所有的品牌都需要做的一件事情就是占领用户心智，让用户在众多品牌的选择里占有一席之地，因此需要不停的出现保持存在感，比如404界面和空界面里放入的品牌基因，如下图所示：

最右的就很好的将品牌和品牌基因放在界面中，它的底部图标，消息列表，空页面等，都很好的将这它的形象保持了良好的存在感。

这样做的好处就是强化产品在用户心中的印象，增强存在感，举个我们身边最常见的例子来说，微信昵称和头像在通讯录中就相当于你的代表，如果你不换头像经常在公众号后台留言，就会有人记得你，如果一个强化符号一样，存在了别人深深的脑海里。

2、有自己的识别度

将我们的设计的产品设计好，但是又与其他同类产品区分开，这样能够保证用户就算看截图也能够知道是哪个产品。如下图所示：

比如说音遇和波洞这两个产品的页面，风格是很特别的，就算直接看截图都能够知道是哪个产品，主要就是他们的配色和展现形式够有风格，当然这两种产品的定位本身就比较年轻化，但是我们可以借鉴配色或者一些细节，运用在图标或者界面框架上，形成自己产品的独特风格。

圆角

圆角虽然在界面中不是很起眼，但是在整体界面的展示中起着很重要的作用，因此在我们开始做之前最好就预先设定好要做的圆角是多少，可以根据品牌基因或者规范来进行设置。

但是有一个需要注意的问题就是在于圆角套圆角，之前我就犯过这样的错误，（不知道为什么总是犯这些细节小问题），里面的圆角和外面的圆角数值一样，视觉上看起来就很奇怪，如下图所示：

我这么做的时候只是想的圆角需要统一，因此里面的矩形缩小了圆角的数值也不能变（我知道这样显得我很傻，但是跟我一样傻的应该也是有的），然后就做成了这样，后来小伙伴说统一并不是数值的统一，而是视觉上的，界面中有的地方数值明明一样，但是看起来就不是那么回事了，所以我们需要做的就是灵活一点的改变数值，让他们从视觉上达到一致，这才是我们需要的统一。如下图所示：

这样内嵌的圆角从视觉上就看起来一致啦！

划重点

我们今天说了有四个方面的细节注意点，讲的都是平时设计的时候要注意的小细节，多注意就好了。

1、交互形式上，同层级的页面，在相同的切换上展现形式是需要保持一致的；

2、文字使用的时候最好是4或者8的倍数，减少同一页面文字数值一直在变，既方便自己设计也方便开发；

3、风格可以借鉴市面上比较有特色的产品，了解他们是如何形成的风格，再结合自己的产品运用上；

4、圆角的统一并不仅仅是指数值上的一致，更重要的是视觉上的统一，别被数值给框住了。

参考引文：

《 设计师如何做到风格统一》http://t.cn/ECwmX4D

《简单几招搞定平面设计中的画面风格，统一的风格更有美感》http://t.cn/ECwuwt8

《如何搞定页面视觉风格统一性？看这篇文章就够了！》http://t.cn/ECwuIQE