蓝蓝设计这个教程中我们将使用Photoshop CS6设计一个简单、干净、三列的作品集时间轴。在这个过程中，我们将着眼于自定义网格，排版样式，并利用不同的颜色和对比度实现我们想要的美感。

同学们可以从这个教程学习如何在一个页面平衡不同的元素，使整个界面设计富有韵律感与呼吸感。快毕业的童鞋们可以尝试这样展示你的作品集哟。

上效果图：

蓝蓝设计与你分享一位优秀的交互设计师的成长过程与想法。

1. 交互设计师应当具备的能力

如果我们简单的将用户体验领域涉及到的技能分为：用户研究、产品（概念/功能）设计、交互设计、视觉设计、工程技术，我认为任何一个交互设计师和视觉设计师等等，都应该具有整体的复合技能，只是哪部分更多哪部分更少的问题。

1) 用户研究：对于交互设计师，不具备基本的用户研究能力，无法吸收来自用户的「信息营养」，如何做出真正以用户为重心的设计呢？观察法、访谈法、问卷法、可用性测试、行为数据分析等等，这些基本的方法应该要有所掌握。

2) 产品（概念/功能）设计和交互设计：这方面不必多说，交互设计师必须有大局观，能够真正的理解产品的思路和方向，从交互的角度实现产品层面的意图。这也是很多交互设计师转向产品设计师、产品经理的原因，在很多方面有交叉。

每当谈到网页设计这个话题时，我总会想到这些年我见过的一些常见的错误，尤其是发生在年轻UI设计师身上的。所以今天蓝蓝设计整理了一些资料，算是我这些年总结的经验吧，主要是教大家怎样做好网页界面设计。我认为每一个网页设计新手在开始一个项目之前都应该了解这些知识，在项目开展中也应该注意。

这些概念不仅仅是网页设计方面的，还包括现实中的工作流问题，它可以帮你更好的完成工作。如果你能将这些知识融会贯通，假以时日，做一个专业的网站界面设计布局就不是问题啦~

01.将你的想法先在纸上画出来

对话框（Dialog）是个好用又方便的工具，通常用来再三确认使用者的操作动作与决策，以避免一时的手误或误会操作动作的意思，常用于重要动作的确认，例如：「你确定要删除这个联络人吗？」，但若对话框搭配了不适当的回应选项文字，反而可能会造成使用者的困扰与误解，有时还可能做了错误的决定。

对话框界面设计最常见的不当UI设计就是选项上的文字出现：「是（YES）与否（NO）」，回想在学生时期考试的时候，O与X在是非题中是唯二的两个答案，而出题者会透过文字叙述上正反的误导，来测验学生是否真的清楚了解，先不论这样的测验方式到底对学习以及知识的建立到底有没有明显的帮助，使用者可不想在开心的使用你的程式或服务时，还要小心翼翼的了解你对话框的内容。

我们当然可以细心的UI设计对话框中的文字，让使用者清楚明了对话框的讯息，但是在大部分的情况下，我们几乎根本不会逐字去阅读讯息的内容。你必须要假设使用者除了对话框上的按钮外，不会阅读任何其他讯息（对话框的标题或是讯息内容）。 – John Gruber of Daring Fireball

毋庸置疑，造成用户跳出率高的真正杀手是网站设计元素的杂乱和干扰。 总而言之，网站上任何恼人的元素都有可能造成用户蜻蜓点水般离去，这些干扰可能是任何不和谐因素，包括过多的动画效果、过于杂乱的配色设计。只有层次分明、清晰明了的网站设计才能让用户把视线聚集在网站内容的价值上，从而达到网站建设的目的。而用户的烦恼就在于网站不合时宜的排版、不恰当的导航以及错误的信息把用户统统拒之门外。

优秀的网站设计是能最大化降低用户跳出率，并提供良好的用户体验和有价值的信息。为了避免界面设计的悲剧，蓝蓝设计总结了六大要素试图降低网站跳出率：

1. 良好的用户界面

每个人的所接触的人、事、物不同，接受的教育背景文化也都不同，发生意见分歧是非常正常的一件事情，然而作为UI设计师的我们本身对设计作品都有那么点“洁癖”，遇上类似的事情时，心里总会有“触动”，情绪难免有些起伏。

面对别人的意见其实不用过于抵触，意见也可能并不是因为不好而提出，是从其它角度提出当前没有考虑到的事情，这不定是坏事，不同角度，不同观点，能让作品变得更出色也说不定。蓝蓝设计分享UI设计师遇到意见太多时的方法，希望对朋友们界面设计工作有所帮助！

接受意见前，先正“三观”

人非圣贤，孰能无过，情绪来的时候，总会有些激动，所以先改变一下自己的“三观”，带着抵触情绪很难去对待意见。:)

1. 正面看待别人的意见

积极看待别人的意见，如果意见能够帮助自己做出更好的作品，是种多赢。当然对那些不靠谱的意见或者钻牛角尖的人，还是要分别对待。

一篇小文，若干贴士，帮你帮我帮大家有意无意的培养意识形态，争做有同理心的好UI设计师。走着。
这里进入译文。优秀的用户体验界面设计师应该具有出众的同理心，也就是站在他人的角度看待和理解事物的能力。同理心与同情心是两码事，你不必真心同意或接受他人的观点，但必须对他们的状态感同身受，从主观上理解他们看待事物的角度。
出于以下这些原因，我(英文原文作者)相信同理心可以使我们成为更好的界面设计师：

• 同理心可以让我们更自然更真诚的去思考怎样帮助用户解决他们的实际问题，使我们的设计决策能更好的聚焦于用户目标。
• 同理心可以帮助我们与用户、团队成员及利益相关者构建更好的人际关系，为人与人的交流提供开放、互信、更具建设性的基础。
• 同理心有助于个人整体的塑造。这不仅仅是一项职业技能，在工作中逐渐培养和挖掘出来的同理心同样可以运用到生活的其他方面。

接下来蓝蓝设计和大家分享一些能够在日常工作和生活中帮助我们提升同理心的小方法。

1.发现日常生活中的痛

你是一名网页设计师或者一个想学习网页设计的人吗？
如果你的回答是”Yes”，那么你最初想学习网页界面设计的原因是什么呢？
有些人梦想创造出伟大的设计并因此闻名于世；有些人则把网页设计作为自己的事业并为之奋斗一生；而有些人，或许仅仅是为了赚钱养家。

那么你呢？

OK，无论你为何想学习网页UI设计，现在我要向你介绍一种一箭三雕的方法，能让你在学习网页设计的同时，变得更受欢迎，还能赚些钱。正所谓，生财有道！这听起来很棒，不是吗？你一定开始期待我要讲些关于网页界面设计的技术了吧。很遗憾，我要讲的跟这个毫无关系，这可不是一篇通常的讲网页设计相关技术的文章。

估计你还没有头绪?

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

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

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

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

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

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

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

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

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