UI设计师需要突破的四个瓶颈期—技法

(知道哪里做的不好，却不知道如何修改）

首先不可否定，软件只是一个工具，是一个发挥和实现自己想法的工具，有想法比多少软件都重要这一点也可以这么去说。然而软件也真真切切的可以影响一个设计师灵感的实现，和效率的快慢。

设计的迭代往往跟随软件的更新迭代，Sketch能做页面，Ps同样能做页面，然而不可否认的是Sketch的工作效率确实比Ps高的多。

Ps同样可以画出3d 效果，只要有足够的耐心与时间，然而C4d建一个场景或许只需花费用Ps十分之一不到的时间而且效果更真实。

所以说，软件也是阻碍设计者突破的一个不可忽视的点，当然我不建议疯狂学习各种新潮的软件，当自己在平面上已经到达一个高度并且很难突破时，这时可以尝试3d去更立体的体现自己创意。

当周围的朋友同事都在用sketch并且效率明显比自己要高时，就要勇敢的去尝试新的东西了。软件革新一定程度上也带来了设计革新。

主要分析设计者在设计中经常犯的一些通用性的错误，以及应该如何去做。

调色盘中告别纯黑色

什么？不使用纯黑色？你听到这个技巧，感觉可能会非常荒谬，但实际上，这确实是个中 肯的建议。主要问题就在于，我们通常会把较深的颜色看成是黑色。实际上，很难找到頁 正的纯黑。

马路不是纯黑色，办公椅也不是纯黑色，网页上的字体，其实也不是纯黑色。

这张照片尽管修过图色调很暗，但仍然没有出 现纯黑色。

纯黑色是空洞的不存在任何感情的颜色，在视觉上会让页面中其他所有的颜色失去竞争 力，并且变的毫无意义。

在我们设计页面时，推荐使用产品主色中调色盘左下角的颜色，具体深到什么程度就看自 己的把控。

慎用衬线字体

在扁平化互联网没有兴起之前，甶于衬线体每个字的笔划有粗有细，在连续阅读时流畅性 更好，所以非常被亲睐。

然而扁平化互联网时代到来之后，一切装饰都变的谨憤起来，尤 其大篇幅的文字在寸土寸金的屏幕内衬线体变得反而不利于阅读了，所以如今的互联网产 品极少去使用衬线体，而很多新手往往喜欢在该简洁的地方强加设计感，大面积的使用衬 线字体不仅无法增加设计感反而会让页面“负重“。

当然特殊的页面和H5页面可以考虑 衬线体的使用符合页面的气氛，然而设计常规页面时尽呈不要使用衬线体为好。

彩色背景别用黑色字

这一点很简单，然而也很容易被很多设计者忽略。深色在视觉上有后退感，如果在一个彩 色的背景上敲入黑色的字符就会导致视觉上非常不适，当然黄色与黑色是一组特别的搭 配，然而大部分的彩色与黑色对于色彩把控力不足的情况下是很容易造成违和感的。

分即分合即合，不要含糊

“我不喜欢在一个列表内的两行字只有一个字号的差距”这句话与大家共勉。页面中的元 素一定要有大中小之分，元素的大小不明确是导致页面不够干净清晰的首要原因。

所有元 素都优先相当于所有元素都不优先。另外页面两个不相关的板块就明确的分开，同板块内 容就不要那么多的分割线，这就是页面的秩序。当然这一点在平面设计中也受用，元素的对比本来就可以产生美感。

憤用毛玻璃效果

iOS7之后毛玻璃这个概念开始被设计者熟知，利用虚实对比可以很好的衬托出毛玻璃上 方的元素。

然而这个效果也是很冒险的，大家应该知道人的视觉对于模糊的东西会下意识 的给出“低质S”的评判，而一些基本功不扎实的设计者很难去权衡这个虚实对比的度， 容易造成页面的脏与低品质，并且技术对于“毛玻璃”效果的实现也比较复杂，所以此效 果效果在页面处理时非必要情况尽不要去碰它。

字尽量不要压图

在几年之前的网页设计中，字压图的排版方式很常见，然而目前的设计趋势一直在往直 观，简洁的调性发展，字压图的处理方式就显得过于老套了，尤其在界面设计中，字压图 的设计巷实对于文本的阅读有阻碍，并且对于选图的限制更高了，所以如今遇到图文混排 时一般都如下处理

而在设计banner时有时候似乎避免不了图文的相交，可以参考网易云音乐banner的设 计语言。当然还可以通过给图片添加渐变蒙版，或者降低图片亮度透明度，以及修剪图片 留出空白的方法来处理。 

投影的使用技巧

在我的上一篇文章中写过，产品设计中尽呈少用投影，因为开发对于投影的处理由于可调 数值的限制，落地的效果往往与设计稿相差甚远，然而很多设计者在做概念练习稿时也很 喜欢加入一些投影元素给画面加入一些空间感与活泼的元素，技术会进步，这么做也无可 厚非。

然而投影同样是把双刃剑，用的好会让画面更生动活泼，用不好就会让画面脏乱。

这里我分享给大家一个技巧，软件中默认的投影大多是黑色50%不透明度，我们直接调整 透明度确实会让投影变的淡些但是没有色彩倾向的投影是没有感情在里面的，会显得很生 硬。

所以我们可以把不透明度调整为100%,模式调整为正常，然后吸取当前元素下的背 景色，并且在当前调色板选取颜色较深的部分，然后调整到合适的大小就可以了。

还有一种处理手法是手动制造投影而不用系统的图层样式，方法是复制一层当前元素然后 同样吸取背景色在当前调色盘选取颜色较深部分，选择高斯模糊，根据需要选择数值，然 后罝于当前元素的图层之下就可以了。

这样处理的优点是比系统自带的图层样式更自然， 当做一些忌浮效果时推荐这种处理方式。

投影推荐使用两种扱端的处理方式，一种是大小调整数值较大，要若隐若现弥散的效果， 另一种是需要设计感时，投影大小调整为零，直接的让投影投在画面上。

两种方式根据不 同场景需求去选择，睢一不推荐使用系统默认的较重弥散效果，扱容易造成画面脏乱。

憤用复杂图标

这一点不用过多的去解释，复杂的图标在如今的时代已经被渐渐抛弃了，简练的线条能说 明的东西就不要去用复杂的东西呈现，并且剪影形式的面性图标比线性图标更具识别性， 所以憤用复杂图标，让画面更简洁。

字号控制在11〜28PT之间

平面设计有最小字号的限制，产品中同样有，字号的扱限不可小于iipt，因为小于iipt 在视觉上会非常不适，并且识别性受到挑战，当然字号的极限大没有一个数值的限制，建 议在28pt之内浏览较为舒适，当然排除h5或者banner的设计。

设计别太满

这一点我要说的有点像平面设计中的留白，而产品中的留白更规则，例如信息卡片之间的 间距最好上下左右都相同，并且卡片内的信息之间也避免太满。

两个不同的模块之间更要 留出足够的间距，会让页面更整洁与透气。另外还有一点是我们切图时，切片不要贴合巷 图标去切，容易出现切掉半个像素的情况，这时同样最少留出1pt的安全距离。

明确设计风格

设计之前就明确设计风格，从而统一设计元素，避免同一页面出现不同风格元素，或者不 同页面之间风格迥异。

例如磨菇街的定位风格就是少女系，所以一切围绕巷少女系的原 则，产品中没有尖角的出现，所有元素都处理的很圆润，并且粉嫩的设计遍布产品角落而 很少有大面积冷色的出现。

选图提高质量与统一度

选图的问题被太多次强调了，这里我简单分享一些选图的规律与技巧。首先在质M上去挑 选，模糊的图一定不能用，一张模糊的图可以让整个页面变的不整洁。

然后选图的风格尽 呈统一并且符合产品的整体调型，例如一些短文阅读类产品的选图就要文艺安静一些，而 涅画或者搞笑段子类产品就可以俏皮活泼一些。

另外一定记得尽M避免蓝天白云类用图， WinXP的桌面已经深入人心了。

今天到此讲解完毕，希望对大家有所帮助，如想学习更多UI设计教程，可以加QQ或微信：2877261857

也可以关注微信公众号: UI设计说，关注后回复书籍，便可以获得66本UI设计零基础学习书籍高清PDF版免费赠送！