如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

即使你远离设计领域，对于用户体验这一词也不会陌生。用户和产品之间进行交互过程中，产生的一般态度和情感反馈就是我们常说的用户体验。在用户体验设计中，有几个关键性的因素的是设计师所关注的，比如可用性（usability）、工具性（utility）、合意性（desirability）、吸引度（attractiveness）等。如今，用户体验设计和视觉设计几乎达到了同等重要的程度。虽然仍有一些企业和团队在怀疑用户体验设计是否有必要，但是总体上，大家对于它的认可度还是非常高的。

用户体验设计为何重要？

许多公司为了让产品产品的体验和效率更高，而花费更多的时间和金钱。现代商业竞争背景下，事实已经证明，产品和服务的成功很大程度上是取决于用户对于产品的喜爱程度。UX设计旨在通过让产品更易于使用而提高用户的满意度。

有些人可能还认为用户体验设计的核心是视觉设计，其实它的范畴远不止于此。UX设计是一个复杂的过程，涵盖了用户研究，线框图、原型、视觉稿、动画、开发、测试等许多不同的环节和阶段，其中许多环节甚至是并发和交叉的。真正有效的用户体验需要时间来开发，也需要足够的知识来作为支撑，这种复杂的开发体系使得它或多或少地需要超出预期的额外投资。然而，UX设计对于初创和非初创公司而言，同样有益，它确确实实从不同的方面帮助企业创造成功的产品，无论是参与度、可用性还是转化率。

如果你拥有一个复杂的电商网站系统，那么用户体验一定是影响它实际效用的重要因素。内容组织是否系统，导航是否清晰，都会影响到产品的销售，用户的黏度。太复杂、不便捷的产品会让用户流失，这是肯定的。

有数据表明，近年来95%的移动端APP 在上线一个月内就宣告失败而退出。这很大程度上是因为激烈竞争之下，没有足够优秀的用户体验来留住用户所造成的结果。结合现有的研究和我们自己的经验，我们在今天的文章中总结出了优秀产品的7个关键的用户体验设计要素。

1、有效的可用性设计

现如今，“简单”一词和无聊的设计并无关系，而是成功产品设计的关键性要素。在Don Norman 的《设计心理学》系列教材中指出，良好的设计通常都会具有易于发现和易于理解两个特性。用户期望他们所使用的产品是简单明了的，能够让他们不花费太多精力就可以搞定，也可以从中获得自信。而这些都是用户体验设计的工作范畴以内。

用户体验设计师的目标是为数字产品创造一致的体验，让用户能够安心使用。有效的用户体验设计能够通过网站和APP为用户循序渐进、有效地展示内容。而UX设计人员则可以通过数据分析和案例研究，消除不必要的设计、搞定问题、去除隐患，提升产品的可用性。UX设计师还能通过不同环节的引导服务来帮助用户更加快速的熟悉产品，让用户感到贴心而不会紧张。

2、驱动用户深度参与

参与度是衡量用户有效行为的度量，而它也是产品价值的重要体现之一。每个企业都希望有高素质的用户参与到产品建设当中来，而他们也知道，最终还是要通过创造优秀的用户体验来解决这一问题。

UX设计有一个热门的解决方案是游戏化设计。将游戏化的元素应用到非游戏类的使用场景中来。游戏化设计让网站和APP拥有更多有趣的元素，吸引用户，提升参与度。游戏化设计的具体方法和策略有很多，设置任务、发放奖励都是很常见的手法了。挑起用户的好奇心和激情，他们会坚持不懈地执行任务，在你的网站和APP中花费更多的时间。

3、产品的独特性

很难说市场上到底有多少APP存在，但是绝大多数的应用和网站在起步的时候，就已经失败了。当你要开始投放一个APP到市场的时候，可能已经有好几十个同类的产品已经存在了。所以，企业和开发团队一直在寻求让用户选择他们产品的原因和方法。UX设计师能够通过分析目标受众的需求和实际市场状况，来判断和预测用户对于自己产品的反应。如果你想给别人带来愉悦的体验，满足用户的需求，并且力图让自己的产品拥有足够的特性从竞争中脱颖而出，那么你的产品就具有了同其他产品区分开来的独特性。

4、省钱

UX设计的成本并不低，但是相比于修复可用性的问题，它的花费依然很低。基于用户研究，UX设计师能够准确地挑选出功能组合，并且规划用户的交互过程，排除可能存在的问题。通过对目标受众的研究和测试，分析和改进整个产品的流程与细节，而这些过程对于产品开发和运营的补充，相比于在产品上线过再根据反馈进行调整，要省钱省心得多。

5、用户忠诚度

用户的口味越来越刁钻了。令人不快的体验会让他们很快不耐烦，然后迅速和你的APP说拜拜，然后再也不会回来了。用户的忠诚度要维持起来并不容易，你需要创造足够优秀的产品，要让人喜爱、沉迷，还得足够快速地帮用户排查问题。这种局面下，用户体验设计的价值无疑是不可估量的。如果你的产品能够始终保持令人舒服愉悦的体验，用户习惯了就很难转向别家了。另外，别忘了，快乐的用户更喜欢向朋友推荐你的产品。

6、高转化率

采取设计者预期行为的用户所占总人数的百分比就是我们常说的转化率。最典型的转化率就是购买产品的用户数所占打开电商网站的用户总人数的百分比。用户体验设计师通常会掌握一系列的分析技术，来帮助产品提高转化率。通过深入分析用户行为和用户离开产品的原因，找到痛点，解决问题，从而提高转化率。

7、积极的品牌体验

品牌识别不仅仅取决于视觉形象设计，还和体验息息相关。许多用户在第一次使用产品的时候，会记住品牌给他们的感觉。这种第一次的体验对于用户和品牌本身都至关重要，如果处理不好，可能会失去不少潜在用户。良好的UX设计可以保证品牌拥有积极而良好的用户体验。提供用户喜欢的产品，可以提升品牌的认知度，因为用户不会忘记他们喜欢的东西。

结语

优秀的用户体验设计对于企业无疑是有利的。很多时候，它的价值并非是一眼可以看出来的，但是事实上，优秀的用户体验是成功产品中不可剥离的组成部分。令人信服的UX设计能够节省资金和精力，这比起投资解决低质量的产品要来得有效得多。更重要的是，现代产品一旦初次互动不利，后面想要扭转过来就很难了。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

Facebook 设计副总裁有个问答栏目，今天的问题是：对于设计师来说，什么才代表着成功？在这篇译文里，她分享了自己的观点。

每个设计师多少都有一点强迫症，有时候会为一个像素的间距而纠结，有时候又会割舍不下自己做的元素，满屏的信息都想突出，导致画面混乱。设计师培养自己对画面的全局观是很重要的，所以我们的脑子里时刻都需要有一把“尺子”在，这把尺子，就是“点线面”。在使用这把“尺子”的时候，抛开那些装饰和颜色还有材质，将画面抽象成点线面来把控你的设计，也许会有不一样的启发和看到画面不和谐的原因所在。

设计师对版面的全局观，就是“点线面”的处理。“点线面”是所有视觉画面的基本结构，点线面可以把不同的部分或者元素组合成一个整体，进而打造一个视觉舒适平衡的版面。

搜索几乎是现在所有网站，APP甚至操作系统的标配，不论是电商还是论坛等等。它是一个站内给用户直接到达目的地的通道，起到了一个引导用户走向的重要作用。在不同的系统，不同用途的网站上搜索呈现的方式都有所不同。

用搜索的原因

使用搜索时，用户可以自己掌握浏览该网站的路径，从哪一页进入到哪一页，自己控制如何使用这个网站。没有必要根据网站的页面设计来决定浏览页面的先后顺序。这也是为什么很多网站用户一进入就直接使用搜索功能的原因。

另一个原因是，当用户浏览网页到一半不知道接下去该干什么的时候，往往会使用搜索直接去找到自己想找的内容。

一个完整的后台，由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成，下面跟大家分享后台中的表格和表单的设计细节。

当接到一个全新的网页后台项目时，首先确定设计风格，然后考虑这个后台尺寸是做居中固定式，还是全屏响应式。全屏响应式的网页设计，除非有规定，否则你可以选择任意主流尺寸作为基尺寸来设计网页。当然，不管选择什么尺寸，都得基于做好一个后台而开展工作。

随着移动优先的趋势，APP的设计也越来越受到公司重视，不断地提高APP的设计质量是每个设计师的追求，有哪些设计中的细节被你忽略了呢？让我们一起来看看这些细节你都把握住了吗。

视觉表现型问题

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在过去的几年当中，网络上所流传的各种设计和开发资源，在素质上有明显的提升。其中有一些已经几乎成为了设计师和开发者必备的工具，但是其中绝大多数由于其应用范畴的局限，或者传播不够广，导致它们大多并广为人知。将这些素材集中到一起，很大程度上是希望它们的目标用户能够明白，需要这些工具的时候，上哪儿找。

这次的前端干货合集内容也很齐全，仔细看看，总能找到几款你所需要的。

MuzzleApp

Muzzle 是之前 CodeKit 的开发者的新产品，是一款应用在macOS 平台的应用，当你和别人共享屏幕的时候，它可以帮你关闭通知和其他的私密信息，避免尴尬。无论你共享屏幕时候的平台是Skype、Google Hangouts 还是 Slack，它都能让macOS 进入“免打扰”模式。

Fractures

Fractures 是一个CSS类 合集，可以帮你快速创建网页原型。Fractures 是基于原子设计模式来构建的，样式表被分割为小段。

CSS DB

CSS DB 能为你列举出还在不断开发中的CSS特性列表以及目前的状态，让你可以更好地使用CSS选择器。

Preact

Apache 最近宣布禁止将 BSD+专利许可证分发给 ReactJS 和类似的项目，如果你的产品受到类似的专利许可证的影响，可以考虑 Preact 这样的 ReactJS替代品。

Pell

Pell 是一款用来构建所见即所得编辑器的JavaScript 库，默认情况下，它会带有常见的富文本编辑器的按钮。Pell 是使用ES6来构建，它不会像jQuery 那样需要大量的依赖库，体积小巧，可维护性强，还兼容 IE9。

Markvis

Markdown 在语法和功能上是有限制的，而Markvis 在它的基础上增加了图表的功能。

Moment PHP

Moment 是一款 PHP 库，用来处理日期和时间，类似于 Moment.js 之于 JavaScript。这个库的使用也很简单，可以快速设置时区、时间和显示方式。

Tonik

这是一款使用现代PHP来构建的Wordpress 新手主题，它充分利用了命名空间，自定义模板，自动加载器，WebPack 以及一大堆现代Web开发的优点。

Awesome Guidelines

这是一个包含了许多编程语言标准的列表，其中包含了C语言，JS，PHP，Ruby，甚至包括Visual Basic。这些标准能够帮你的代码保持简洁、干净。

BotUI

聊天机器人已经逐渐成为主流。这款 JS 库能够帮你构建对话式UI，这个库比起传统的“表单”体验更加优秀。

Reaction Commerce

开源的内容管理系统这些年变化并不大，其中绝大多数都是基于PHP来构建的。

TinyReset

这是一款非常小巧的 CSS resetter，它可以作为 Eric Meyer 所创建的reset.css的替代品。

Martinet

Martinet 是一款用来构建静态网站的命令行工具，其中包含了诸如 Webpack、TypeScript、Pug for templating、LESS和 NPM 这样的现代工具。它的存在让设计者不用担心网站配置，只需要正常使用 Martinet 就能对网站进行调整。

Billboard

BillboardJS 是一款基于 D3.js 来构建的交互式数据可视化数据库工具，它可以用来创建可视化的柱状图，饼图，折线图等。

SVGI

SVGI 是一款用来查找SVG元素和文件的命令行工具，安装它之后，你可以采用svgi 命令来检索 SVG 文档的大小、元素、层次结构和节点列表。

TimeStrap

TimeStrap 是另外一个非常实用的开源平台，它可以像 WordPress 一样可以在任何地方运行和访问的发票系统。对于喜欢自己控制而不希望使用外部服务来管理发票的用户而言，这是一个很好的选择。

Slate

Slate 是一款为API 文档创建静态网页的工具，诸如 WooCommerce、Travis-、CoinBase甚至 NASA 都采用了这一工具。

FontJoy

FontJoy 是一款能够生成大量有效字体组合的工具，点击“Generate”按钮就能生成许多新的字体组合。有趣的地方在于，这款工具还有具备深度学习的功能。

CoolHue

毫无疑问渐变色再一次回归主流，而CoolHue 是另外一款非常优秀的渐变色生成工具。

FrontPress

FrontPress 是一款前端框架，可用来控制 WP-API 和 AngularJS。如果你想创建一款用于 WordPress 的内容管理系统，可以从 FrontPress 着手。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

作为一名产品经理，有幸逃过UI “五彩斑斓的黑”这样的千古难题，也不像开发一样面临“什么是最好的语言”这样的灵魂拷问，但世事无完美，不信抬头看，苍天饶过谁。

需求，正是这样的终极存在，他是产品经理存在的意义，也是众多套路的根源。无论是文能提笔写文档、武能调试查异常的老司机，还是熟读《梦的解析》、倒背需求层次论的学院派，和需求打交道的日子也难免“被套路”。

面对千变万化的需求，也许很难抽象出一套普适的方法论，不妨一起来看看需求分析过程中的那些常见套路，或许能有一些值得借鉴和思考。

1. 披着需求外衣的解决方案

从交互细节优化到业务流程调整，我们总会遇到这样一些需求：描述简单明了、细节清晰，几乎稍作整理就可以形成PRD、开发实施：

• “输入框需要加长一点，保证输入内容完整可见”
• “工单需要支持批量分配，勾选后自动显示可分配对象列表”
• “用户注册推送新手任务提醒，引导完善资料，必填项有XXX……”

好的设计往往需要好的内容作为基础支撑。无论是内容还是设计，想要让两者最大化的搭配，往往是需要进行调整和优化才行。

当你的内容需要迁移到移动端上的时候，要怎么让内容和用户体验无缝地配合起来呢？设计师要基于小屏幕的交互来思考整个设计和优化的策略，而今天的文章，就为你分享7个设计技巧。

1、每屏完成一项任务

为什么？

我们有这样的焦虑，其实是因为我们对交互知识的整个体系无法预估（事实上设计的高度非标准性也令我们无法感知整个知识体系的边界，事实上它本身也没边界），所以导致我们常常不够安心。

事实上，知识学习本身就有一条学习曲线：刚开始是成长期，随后就是平稳期，然后就进入瓶颈期，需要学得更深，否则只会一直停滞。越到瓶颈期，越不知道要学什么。