在过去十年中高品质的网页可用性一直是业内讨论的核心，因为它对用户来说越来越重要。好的可用性也可以帮助建立品牌知名度，从而提升用户对一个网站设计或者是一家公司的评价。今天人们依然高度关注可用性，是因为大大小小的公司已经证明了好的可用性策略是多么重要。

在过去几年中，良好的可用性成为那些成功的初创公司的核心。多数情况下，简单的想法最具创造性，可用性主要是指：使一个功能或者产品易于使用，但同时也要保持产品质量维持在高水平上。

如今，很多文章会谈到普遍意义。在对该话题年复一年的讨论之后，似乎UI设计者们仍然很难去理解它。可用性早已不再是一个玩笑，下面蓝蓝设计这些建议应当被打印出来并粘到你桌子对面的墙上。

链接的颜色

我经常发现自己在浏览网页时，有些页面上的链接没有以某种形式高亮显示。这是我见过的最愚蠢的错误。我愿意访问那些链接使用默认蓝色的页面，而不是链接和 普通文字一个颜色的页面。用户需要知道如何在页面之间导航、在哪儿能点击链接。你不能指望他们把鼠标一行行的掠过所有文字去找链接，直到发现鼠标箭头变成 “小手儿”。

我们都知道，好的界面设计需要UI设计师技巧高超、创意与众不同。在任何设计中，设计技巧，也就是设计基本功是排在第一位的，然而还有很多其他技巧性的东西也不容忽视，比如说细节。对于设计师来说，细节太致命了，设计师必须高度关注细节，仔细推敲，尽可能的追求完美。
 
在这里，”对细节的把握”（关注细节）也是设计上的一种能力和技巧。尽管不是每个用户都是一丝不苟、认真检查设计中的细节，但UI设计师必须认真对待每一个环节。无论是前期准备，还是界面设计流程，以及后期的客户交流，这些方面都要高度留心细节。有心的设计师会留意客户说的每一句话，会分析出客户真正的需求，会从中找到指引和线索，这样在设计时，就很少出错。因此，细节不仅仅是在设计上的，要面面俱到。

一、何为”关注细节的设计技巧”?

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

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

上效果图：

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

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

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

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

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

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

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

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

如果你是一个APP狂热分子，你会花大量的时间在各种APP界面设计的尝鲜中，你会明显感受到一些APP在采用着某种风格鲜明的设计语言，来标榜自己的独特之处，形成自己的界面设计风格，甚至引领设计风向。去年我们关注到随着Metro设计风格的影响和iOS7的发布，APP明显都开始尝试扁平化的设计语言了，除此之外，还有哪些显性化的设计语言崭露头角呢？

在这篇文章里，蓝蓝设计想分享一些日益显性的UI设计语言，让人一眼就记住它的风格，有一些已经随着优秀设计师的摸索，融入到国内移动产品设计里了，而有一些，确实是刚刚在萌芽阶段，需要更进一步的摸索和尝试。

一、唯一主色调 | Simple color schemes

为什么我们要定义一个界面多种颜色？仅仅用一个主色调，是不是就能够很好的表达界面层次、重要信息，并且能展现良好的视觉效果？事实上也正是如此，随着iOS7的发布，我们看到越来越多唯一主色调风格的设计，会采用简单的色阶，配套灰阶来展现信息层次，但是绝不采用更多的颜色。

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

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

一、少图层，没分组

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

蓝蓝设计将分析列表在各种情境的界面设计方法，以及需要注意的事项。

列表常见的使用情境

1. 概观：浏览较多的的信息时，列表可以提供一种概观性的的方式来呈现内容。
2. 逐一浏览项目：用户可能逐一或随机的的阅读信息，就像是 Facebook 动态信息。
3. 搜寻：用户可能在列表上寻找他们想要的信息，就像是 Google 搜寻结果。
4. 分类与过滤：用户可能正在分类信息或者使用一些方式（档案大小、名称）过滤内容。
5. 项目的整理、新增、删除与分类：用户正在整理信息，此时很有可能需要多选、搬移的辅助功能。

模式1. 双面版选择器

双面板列表是一种将列表区分为两个区域的一种设计模式，用户可以自由在第一个面上选择项目，第二个面版上会显示面板一选择的项目内容。

优点

• 操作非常的有效率，不需要来来回回的在不同列表切换。
• 减少用户记忆与认知的负担，使用者不必了解内容在列表上的位置，也不需要学习如何返回列表。

缺点

• 需要比较大的屏幕时才能支持。

「好的产品关注功能，优秀的产品关注情感」

趣味性、愉悦度，这些都是针对用户情感化设计的领域。

功能、实用性，这些需要很强逻辑性的事物很难和情感产生关联，并不是指这些不重要，它们很重要，它们是基础，但缺少了情感的作用，很难产生一些东西，像：快乐、愉悦、悲伤、美…

花、大海、春天、小屋… 这些都是很普通的名词，但将它们富有诗意的组合在一起：我有一所房子，面朝大海，春暖花开。接受者会投入不同的情绪去理解这样一个组合。

上面这些名词就像我们在界面设计过程当中所遇到的各种元素，按键、菜单、icon、动态效果… 将它以诗意的方式组合在一起，由此用户产生了情绪上的波动。

交互设计的本质是对用户行为的一种界面设计，直达内心的UI设计能够影响用户自身的情感，从而导致用户的行为。常会有设计师说将用户当成是一个易怒、情绪不定、不明理的人，为什么？因为人的本质是非理性的，逻辑是理性层面的考量，而面对情感这个潜藏在理性背后的东西，需要设计师有深厚的功力，这不是单纯技巧上的问题，而是一种时间、感觉、情绪等综合的圆熟。

针对用户情感进行设计时需要考虑产品的用户群，情感设计的应用将会为产品塑造个性，需要明确产品个性是否与目标用户相符。所以题主需要考虑一下，所说的趣味性是否与产品所预期的个性相符，这很重要。

扯回到正题，交互设计中的趣味性如果让我用一句话表达，我会说：「情理之中，意料之外」

btw：自己对有趣的定义可能会与大家不太一样。

网页设计中，切图输出是指UI设计师将手边绘制完成的原始图稿转换成网页界面设计用的图片格式、并交由下一位人员网页排版的重要步骤。选择适合的图片格式不但可以将让设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小，节省下载时间、有效的减少服务器的负担。今天蓝蓝设计就和朋友们分享一下网页设计中图片格式的选择技巧
以UI设计师最常用的 Photoshop 以及 Illustrator 为例，都提供了「储存为网页用…」的功能。与默认的存盘模式不同，在这个模式中，软件提供了仿真图文件输出的质量调整、档案大小控制等针对网页图文件需求的选项：