产品经理和UI设计师之间最常见也是最尖锐的矛盾就是，UI设计师把花了很多心血做出来的稿子放到产品经理面前，产品看了一下，觉得非常陌生和超出预期，说：“这都是些什么啊”。

(- -#)，(- -’)，此处无声胜有声。倒不是说这里面谁对谁错，都挺辛苦的其实，但为什么总会落得如此尴尬呢。

世上配合最好的其实就是自己的手配合自己的脑袋。脑袋怎么想，手就怎么画，画出来的丁老头再丑也觉得很亲切，恩恩，是我的好作品（星星眼）。只是等到两个人合作的时候，就有些麻烦了。因为，让“设计师的手”精致地受控于“产品经理的脑袋”，每次画完看一看，觉得对就继续画、错就改的敏捷调控是不现实的。

祸起，在于一些沟通中有很多弊端，唯有解决这些问题，才能让团队和谐地高唱“同一个梦想”。蓝蓝设计分享一下UI设计师如何做不出产品经理想要的设计的方法！希望对朋友们界面设计工作有所帮助！

一、产品没有意识到要讲的其实是故事

常见的产品经理提需求的方式往往都是在需求文档里直接写“在Feed上增加一个转载按钮，点击后可以填写转载理由”。这种描述方式其实已经是一个很具象的解决方案了。然后这份包含数十条如此描述需求的文档会被贴到内部需求管理网站上，或者通过邮件发给设计师。

网页设计时总是有许多考虑，而不得不为图片元素加上框线处理，例如考量使用者互动与图片互动时：像是滑鼠滑上、滑鼠按下时的效果；或是网页版面界面设计时，或许是为了保留必须与文字一起排版的弹性、或许是考虑到无法掌握图片内容、可能会出现网页相同色彩的图片，像是商业摄影图片等，诸如以上种种状况，都可能考虑到为图片加上外框UI设计：

商业摄影的图片常常会有全白的背景出现：

或是像这种大面积留白的插画图片，若是没有框线，实在很难看到图片的边界在哪里，在网页上与文字一起编排的时候容易造成困扰：

经常感觉情绪低靡并且效率极低么？蓝蓝设计这里有五条可以帮助UI设计师在实际工作中提率的小提示。

 1.任务管理

学会任务管理对于每个自由职业者都是必要的。它能够帮助你把一周的任务变得更有条理，更易于操作并且形成一个简短而清晰的界面设计计划列表。这是一个非常好的方式以确保所有任务都能在预定截稿时间内完成，而且当你完成所有列表上的任务的时候也可以通过它来检验这一周的工作效率如何。

你有多久没有跟客户进行面对面的沟通了，很长时间了，对吗？

像很多自由工作者一样，网页设计师的大多数工作都在网上完成。现在是互联网时代，我们在网上就可以胜任大部分工作，与客户沟通交流也可以直接通过打字完成，而且更快捷，更方便。但有时候，这并不是最好的选择。

现在社交网络遍地都是，很多优秀的网页界面设计师通过它们与外界交流，但在这些急于加入社交网络的人群中，我们似乎忽略了一个谈不上创新的技术——网络视频。

绿色是自然的颜色，代表着生长、向上、协调与自由。绿色具有很强的感染力，能给人安全感。蓝色是天空与海洋的颜色，被形容为稳定与深邃。它代表了信任、忠实、自信、智慧、公平等。

每一种颜色都有它的意义在里面，如果你对这些不熟悉，推荐你来《色彩基础知识》恶补一下。进阶版的可以到《色彩理论大集结》里学习。

现在和蓝蓝设计一起来看看，这群优秀的UI设计师是如何将这两种色彩运用得出神入化的网页界面设计吧。

UIkit

Photoshop是最流行的图像合成软件，粉丝遍布全球，不过对于新手UI设计师，可能犯一些常见的错误，在这篇文章中蓝蓝设计列出了6个频率较高的错误，来看看你躺枪了木有。

如果你想学习最全面的Photoshop礼仪规范，蓝蓝设计强烈推荐这篇《WEB设计指南！PS礼仪白皮书》，是网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南。

一、少图层，没分组

这个坏习惯我们在《WEB设计指南！PS礼仪白皮书》提到过，多创造图层，学会给图层分组是一个专业设计师必须学会的，这不仅有利于你的修改，也是团队合作中少不得的习惯。

随着互联网的高速发展，各种各样的网站层出不穷。在这样的环境下，用户是如何在浩瀚的互联网海洋中快速挑选网站的呢？网页UI设计师又如何能让自己的网站设计在用户匆匆一瞥后就迅速吸引到他们进一步注意的呢？本文作者向用户介绍了一种简单的页面布局方式——分割布局，这种布局方式试图让用户初览页面时感受到一种友好的浏览体验。

作为网页设计师，我们可以参考的界面设计范例和布局原则有很多，比如说：栅格化、纵向一致性、F型布局、Z型布局、三分法则、黄金分割法等等。注重这些原则将会给你的设计带来视觉吸引力和功能性——现在让我们来看一种简单的方式，将页面两等分。

虽然在一开始听起来有点傻，但是这种基本布局确实能起到非常好的效果。当我们通览一个页面时，我们的视线常常会沿着一个“之”字形移动。而如果用户的视线是沿着一条水平线移动时——就像在Z型布局里一样，那么他/她就会很专注（或者说尝试着专注）。但由于初来你网站90%的用户都不会很仔细的去关注你的页面，因此让你的设计“浏览起来友好”肯定会获得不错回报哦！

网页设计中其实有个很重要的UI设计元素常常被大家忽视，呃！它就是搜索框！别看一个搜索框就是一个小盒子、一个小方框！它可有着莫大的用处。它经常会出现在角落或者侧边栏，它能迅速帮助你的访问者找到资料（靠用户自己脑海的习惯记忆以及和你网站设计匹配的关键字）。

国外的网站界面设计上，大家都可以看到，这个小框子的交互和设计越来越别出心裁了。那些交互和细节优化不仅仅是为了吸引访客的眼球，更多时候，是在培养用户对搜索框的使用，上留住访客，并把你的网站上的每一个干货展现给访客。

那么，今天蓝蓝设计收集了一些漂亮的搜索框设计，来细细品味一下吧！它们从字体、颜色、阴影、梯度等不同角度做了改变！希望对您的项目有帮助！

Free Custom Search Boxes (PSD)

互联网界一直在有提倡简约UI设计的声音，可简约设计有什么小技巧？

谈简约设计的书籍有很多，互联网界也一直在有提倡简约设计的声音。有人说，看国内的各大门户的界面设计，通通都是文字和功能的粗暴堆砌，难道中国人真的不擅长设计简约吗？

产品长什么样是跟产品的受众有关的。我们看国内电视购物，从来都是以“有多少功能”的方向来推销产品的。或许我们的目标受众就是喜欢大而全的东西，并不是设计师和产品经理的错。为了迎合大环境的产品需求，我们不得不用各种可有可无的功能点来吸引用户。

界面设计包括哪些细节、如何深入？
我们常说“细节决定成败”，有些界面设计会让人觉得不精致，缺细节，而这些细节又包括哪些呢？如何去深入呢？那么蓝蓝设计和朋友们分享一些界面设计中需要注意的小细节，希望对UI设计师有所帮助！

• 界面元素的对齐，我见过很多同学对齐是永远靠眼睛的。确实在布局的时候经常需要做到视觉上的对齐，而不是机械的对齐，但这不是界面元素可以随意摆放的借口，该对齐的内容需要对齐，有时候只是举手之劳，养成好习惯很重要，有点强迫症也不是坏事情。
• 像素，虽然现在的分辨率越来越高，但是很多图标、按钮的边缘还是最好都检查一遍保证垂直和水平边缘不会被虚化。
• 界面光源的一致性，一致性是个很大的课题，应该能写一篇论文那么长，细节方面的一致性应该包括界面元素、文字阴影、图标等的光源。假设深色的标题文字用了向下的淡色投影表现内凹效果，那正文就应该避免用深色的文字向上投深色的阴影
• 图标面积的一致性，这也是一个一直难以避免的问题，而且有很多主观成分，最好的方法是设计的时候放到实际屏幕上以较远的距离查看，是不是有哪些会特别轻或特别重，然后再去调整尺寸
• 文案，虽然这不是直接的界面设计元素，但是严谨、完整的文案也是给所有设计加分的。常见的问题有中文错别字、英文该大写的没大写、拼写错误等等
• 别直接使用 Windows 自带宋体 / 黑体里的英文！！！这个不解释
• 谨慎地使用高饱和度颜色、大差别渐变，我们 GUI设计师总喜欢把自己当做艺术家，即使 GUI真算艺术那也是限制最大的一门艺术（天朝的电影、电视剧不算。。。），大家大部分情况下遇到的设计场景没有非常大的颜色空间去发挥，所以一些醒目出跳的颜 色和渐变使用起来要比较小心，否则很容易产生“俗气”的感觉