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

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

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

祸起，在于一些沟通中有很多弊端，唯有解决这些问题，才能让团队和谐地高唱“同一个梦想”。

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

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

设计师拿到这份文档，通常会觉得很憋屈。哎，忍忍算了，拿人钱财替人消灾。然后拿着这份需求文档在现有界面上去改。但往往会发现产品说这些具体解决方案其实在实现时是有很多细节冲突的。于是，设计师要先逆向YY出这个功能背后的用户需求，然后再尝试在与各种细节不冲突的夹缝中找一个新的解决方案。把这个稿子拿给产品看，产品就会楞一下，说“这是什么…”。(- -#)，(- -’)

@南辰_designer  平面设计和网页设计是两个截然不同的领域，这两个领域有不同的设计需求、设计实践和设计方法。

例如，在网页设计中更常使用基于像素或栅格的文件格式，诸如JPG、GIF或PNG。相反，在平面设计领域像logo这样的图形可能会用到不同尺寸，因此使用最多的格式则是EPS和AI这样的矢量格式。然而，用于网页的矢量格式，如SVG或HTML5 Canvas则不能广泛应用，也不会被所有浏览器所支持。

另外，用于web端的图形有基于它们自身的相关处理方式。其中一条便是你要时刻注意文件的大小，因为你需要使你的网页加载越快越好。作为一名网页设计师，你应当尽量减少HTTP对图像的请求次数——无论通过减少图片的使用数量还是将它们整合成CSS sprite——以及确保你选择了正确的图像格式，使其在图像大小和质量间得以平衡。

Photoshop是平面设计师和网页设计师使用的行业标准工具。以下是你在创建web端使用图像时的一些简单的小技巧。

1. 将图片保存成Web所用格式

在网页设计中，你必须确保你的图像大小越小越好。当然，当你想要图片完好显示时可以抛弃这条原则。
在Photoshop中创建图像的完美方法便是平衡质量与文件大小。
网页设计师经常犯的一个错误便是使用“另存为”命令，而不是使用“存储为Web所用格式”。

“存储为Web所用格式”可以将图像保存成基于网页设计优化过的格式，包括图像质量、图像分辨率、浏览器兼容性和文件大小。

这一命令会有一个对话框，你可以用来微调你的图像。当你调整图像的设置时，它会显示出文件的大小和图像的质量。

在这篇文章中，我们展示的是一组免费漂亮的UI设计素材套件。这些线框图和 UI设计工具包让设计师在设计用户界面原型的时候能够非常便利，希望这个集合会帮助到你的 UI 设计项目。

优设11月超赞资源：
50套万里挑一的设计师专属精华资源包
超实用的PHOTOSHOP亮度调节脚本

UI Kit

iPhone UI

有时候一个纹理，一个文字，一张背景图，一个颜色体系，甚至一个小图标，都能让页面有复古的感觉。在这篇文章中，我们收集了许多这种风格的页面。如果你的下一个项目是需要设计出复古的感觉的话，那这篇文章可以启发你很多的设计灵感。

相关阅读：

复古背景下载 →漂亮的复古纹理背景素材下载
复古字体下载 → 25套复古怀旧字体打包下载
复古网页欣赏 → 44个绝赞的复古风格网页设计

Cyclemon

Ready to Inspire

本文作者Mark Praschan是一位具有将近十年经验的网页设计师，Web开发师，Web项目经理人。 文中强调复杂的高级效果能为设计增色不少，但如果用得不对，只会影响用户对重点内容的关注。高级效果可能正好是一项好的设计的冲击力所在，但即便如此，也还是需要一些更简单的效果与其配合。

　　简单的效果和技巧是建造当今设计的基石。比方说，如果你都不知道如何正确选择颜色和文字效果，灿烂的 星光效果又能有什么用?

　　本着“少就是多”的理念，通过十个简单好用的设计技巧 ，就足以大大提升你设计的专业性和感染力。基础先行。 学会走之前要先学会爬，让我们从最基础的简单有效设计的概念开始。

基础先行。 学会走之前要先学会爬，让我们从最基础的简单有效设计的概念开始。

1. 增加对比

很可惜，添加额外的对比是最被忽视和弃用的技巧之一。

Joost de Valk 采用了细的高对比度边线，让访客能更容易区分页面的不同区域。在上图中放大了的部分，你可以看到，大多数时候这种对比只是一条1像素的高亮线挨着1像素的暗线。

话说回来，这个页面上的“More”和“Go”按钮与周围的对比度太小，即使你刻意在找也很容易被忽略掉。

大家应该都发现现在很多网站的首屏都越来越有”感觉“了，用我们经常调侃的一句话就是高端大气国际化，那么如何做到这一点呢？

大家不妨打开支付宝、财付通等网站瞧瞧，不难发现规律：1、在首屏一条大横纹上下功夫，区分下方的辅助信息；2、看上去更有人性（有人物素材出现在首屏），配合产品的精彩实物截图。3、温暖的色调、能烘托出产品气质的色彩。4、简要的产品描述文案。5、点击欲望更强的（橙、绿）大按钮。6、尽可能多的高斯模糊。

今天我们要在这篇文章向您展示30个伟大漂亮的网页例子，看看他们是如何利用首屏的横条纹的吧，瞧瞧是不是利用此布局更有助于分解页面引导用户更好了解产品、爱上产品。

Janko At Warp Speed

Theme Trust

我们灰常乐意每周在网页设计佳作列表中展现设计精美的网站，不断为你提供灵感。而今天我们打算另辟蹊径，为网页设计师收集了既能提供设计灵感又实用的优秀案例，与过往选择单一”主题”的例子有所不同。我们将为你呈现不同的工具和技术分享网站，可让你在得到灵感的同时还能发现不错的工具或服务。在这篇文章中你将看到22个美观又实用的网站，全部都不容错过哦亲！

responsify

Responsify是个用于创建响应式模板的浏览器工具。

iconmonstr

你下一个项目就可以用的免费简约icon。

前言：该文收集了前辈们的一些关于图片优化的技巧，在此收拢到一起，对于各个方法的优化原理做了一些研究，希望能给大家对于图片优化这一块起到抛砖引玉的作用。

腾讯财付通设计中心 Jia ：提到图片，我们不得不从位图开始说起，位图图像(bitmap)，也称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成一副图片。当放大位图时，可以看见赖以构成整个图像的无数单个方块。
常见的格式中JPG、PNG、GIF亦属于位图，所以它们的数据结构大致相同，只是每一种图片格式都有不同的压缩算法，不同的扫描方式，但是优化的方法都有一个共同点，都是围绕着每个像素颜色值来下手，具体如何进行优化呢？
下面来给大家介绍一下图片的一些基本原理和优化的方法：

1.JPG原理与优化
JPG是一种对彩色或灰阶之类连续色调图形作压缩和解压缩的标准．这个标准是由ISO/IEC JTC1/SC29 WG10所订定。
压缩算法为正、反离散余弦转换，如下图：

反离散余弦转换即把整个流程反转。

这里的8X8像素区块是我们JPG优化方法的重点，在之后会涉及到取样、区块量化、扫描的步骤，然而取样、区块量化这两个步骤将是导致图像失真的过程，也是我们优化工作所涉及到核心部分。

取样：

瞧吧！现在到处都是明亮的设计照亮我们的屏幕，有时甚至亮瞎到我们的眼睛！大伙应该都感同身受，接近节日或者年底的时候，以红色为主色调的设计稿常常可以让我们看到昏厥，还有那些色彩斑斓的促销专题。

那么今天，我们要好好和大家来推荐一些低调内涵的网站，而这些设计者们也正采取了与热闹相反的路线：但他们依然创造了强大的网站，通过黑暗柔和的色彩！这些设计有一种诱人的存在，它们用黑白捕捉人的记忆情感。

这篇文章我们倾力推荐了20多个美丽的黑色系网站，微妙的色调和戏剧性的黑白图像一定会让你陷入这一场低调奢华的视觉盛宴里，来尝尝吧：）

另外也希望大家带着问题去欣赏这些网站，这些设计师是如何把黑色设计的更有国际范？如果是你来，布局、素材、辅助色又会怎么选用呢？

我们也为您准备了其他色系的优秀文章，推荐您也有空一起来看看哟。
《配色秘要：奢华低调有内涵的米黄色》
《超赞！网页设计色彩剖析之瞩目红（附百枚网页案例）》
《浅谈色彩学：以红色为主的色彩配色》

MoreSleep

Apple Mac Pro

Rook

「Loading」是经常在APP以及游戏中见到的，因为需要用户等待，为了避免用户在等待的过程中退出，通常辅以进度条告知用户大概还有多久，但等待总是让人不耐烦的，所以一些设计师试图用更人性化的方式来表现进度，他们将进度条设计成各种极具创意与美观的形态，让人们更乐意欣赏进度条的滚动。花瓣网设计师汉斯戴尔收集了上百张进度条设计图，我们从中精选了10种进度条设计。