浅析UI设计与UX设计、UI设计网站推荐

　　交互设计的英文是Interaction Design，“inter”是英文前缀，意思为“两者之间”，“action”是指动作。所以简单理解，交互就是两个object之间进行互动，具有一个输入和输出的指令。举例来说，当你想要用洗衣机洗衣服的时候，把衣服放进洗衣机，然后按下按钮，这一系列动作其实就是输入了一个洗衣服的指令。而洗衣机洗完衣服，就是输出洗好衣服的指令。在这一过程中，人与洗衣机之间产生的一系列互动，即为Interaction（交互）。

　　在交互设计领域，有两个基本原则，一是可用性，二是可视性。其实，简单来说，可以将UX理解为可用性设计，将UI理解为可视性设计，UX是设计的框架，UI是框架外的装饰

一、UX设计

1、什么是UX设计？

　　User experience design is the process of building relationships between a company, its products, and its customers.

　　UX（用户体验）设计是指建立公司，产品和顾客之间关系纽带的过程。

　　UX设计是在研究，开发和改善用户交互的基础上，改进提升公司产品使用户满意的过程。其设计目的是通过产品测试改善用户体验并最终创造出有用，有价值，易于获取和使用的产品。

　　UX设计包括了许多不同的学科，比如用户分析，场景分析，交互设计，线框和原型设计，信息架构等。

　　UX设计专注于结构，布局和导航的设计。

　　用户体验设计（UX）不太注重一个站点或者产品的样子和感觉，更多的是注重它实现功能的方式和用户如何与它交互。关键要记住：UX设计注重的是用户而不是设计的美学；

　　UX设计师注重用户实际使用一款产品、网站或者APP时的相关数据。一般而言，他们专注于创造用户情绪的积极反馈。换句话说，他们致力于取悦用户。它更多的是需要理解共性的设计模式，和用户的普遍心理期待。

　　如果设计不考虑用户的体验，它可能看起来很漂亮，但总会让人觉得在某些方面有所缺失。用户会对其中的操作方式感到别扭，无法体验到预期的效果，这样一来用户就有可能放弃使用，转而选择竞品。

　　虽然一些用户体验设计师会创建高保真原型，但更多情况下，他们只创建线框图和低保真原型，以此确保用户能够理解应用程序或网站的流程。

　　用户体验设计师扮演着重要的角色，应该从每个项目的起始阶段就参与其中。

二、UI设计

　　The user interface is the visual appearance of a product, and UI designers decide how to visually design the product for effective user experience.

　　UI（用户界面）是指产品的视觉外观，UI设计师决定了如何从视觉上设计产品，从而提升用户体验。良好的UI设计有助于吸引用户并保证愉悦的产品使用体验。

　　UI设计中所使用的元素有诸如文档，文本，图像，视频之类的内容；其形式包括按钮，标签，文本字段，复选框，下拉列表，图形设计；以及用户单击/拖动/输入内容时所会发生的行为。

　　UI设计的目标是创建一个吸引人的，精美的用户界面从而获取用户的情感响应，因此UI设计师必须具备良好的美学意识和设计技能。

　　简单来说，如果你第一次看到一个网站，并对其界面视觉效果感到惊喜，那主要是属于UI设计师的功劳。而你第一次使用一个网站，对其体验流畅度和服务的贴心度表示满意，那主要是属于UX设计师的功劳。值得注意的是，UX和UI设计都需要交互设计，因为交互设计引导了用户的操作行为和感受。

　　不同于UX设计师注重产品功能，UI（用户界面）设计师更专注于产品的视觉美观。UI设计师们希望网站的视觉能够吸引到用户。

　　但这并不意味着他们无视功能。为了创造有效的设计，UI设计师会考虑常见的设计模式和用户习惯，往往不会深入参与产品的运作模式和用户操作产品时的心理感受。

　　UI设计师完成设计稿的制作，然后交付给开发人员。他们也可能参与创建网站或应用程序的原型，尽管有时候比UX设计者进入的阶段稍晚一点。

三、UX和UI 究竟有什么区别

　　UX设计和UI设计在很多地方都有重叠的部分，而且如今已经越来越难分开了。它们在产品设计中保持着密切的联系，但发挥了不同的角色作用。

　　Foster.fm的联合创始人Rahul Varshney说过：“用户体验（UX）和用户界面（UI）是我们领域中最混淆和误用的术语。没有UX的UI就像画家不加思索地将颜料拍到画布上一样。而没有UI的UX就像是没有纸张匹配的雕塑框架。出色的产品体验始于UX，然后是UI。两者对于产品的成功至关重要。”

　　从功能上说，UI就是指产品的外观，UX就是指产品如何运作。

　　从理论上讲，UX设计包括线框图/原型制作，交互设计和用户测试，而UI设计包括视觉设计和交互设计。

　　UX是一个过程，而UI是一个可交付的结果。这些差异也导致了UI和UX设计师在实际工作中起着不用的角色。

1、重点不同

　　UX设计师和UI设计师之间最重要的不同就是对于原型设计有着不同的使用途径。许多UI设计师认为原型应该是高保真模型，他们更关注展示的界面外观。但是，对于UX设计人员而言，保真度是事后才想到的，他们更关心背后的逻辑。

2、使用的颜色不同

　　UI设计师倾向于以全彩设计原型。相反，UX设计师在原型设计中通常只使用三种颜色：黑色，白色和灰色。

　　这种差异通常可以在设计和使用图标时看到。例如，当需要创建底部导航栏时，UI设计人员将花费大量精力使其尽可能逼真，包括单击前后的按钮颜色。相反，UX设计人员会将按钮放到正确的位置，然后留下注释：单击后为灰色。

3、使用的工具不同

　　由于UI和UX设计器之间的角色差异很大，因此它们使用的工具必须不同。对于UI设计师来说，设计图像至关重要。他们使用的制作工具有绑定到Sketch的Flinto和Principle等工具，以及 InVision等。

　　UX设计师会喜欢线框（Wireframe），因为它可以节省时间并提高设计效率。

　　简单推荐一些原型制作工具：Mockplus具有易于操作且透明的操作，具有素描样式的Balsamiq和具有综合功能的Axure。

4、UX和UI设计师所需要具备的技能和职责：

（1）UX设计师的技能和职责

• 内容/策略：客户分析，竞争对手分析，产品结构/策略
• 原型和线框图：原型，测试/迭代，开发，计划，线框图
• 分析和执行：与开发人员的协调，与UI设计师的协调，分析和迭代，跟踪目标和集成

　　因此，UX设计师不仅负责预先计划和准备产品背后的技术。他们还负责用户在线和离线交互方式，包括客户服务和分析。

　　举个例子比如：UX设计师要设计一款app来帮助别人管理预约。整个过程中UX设计师可能会需要做哪些事情呢？一开始UX设计师需要研究回答这样的一些问题：

　　谁会用这个app？客户的需求和目标是什么？他们会经历哪些问题？他们在使用的过程中会担心哪些问题？

　　经过调研后UX设计师把用户在使用这款app里面用户会经历的最重点的几个任务把步骤一步一步的分析出来。

　　在分析完每一步的任务后，设计师可能画一个map列出几个不一样的选择项，通过这些选择，用户会如何一步一步最终他们完成他们需要在这款app里面完成的目标。

　　最终UX设计师完成的成品可能是一系列完整的设计界面，而这些界面再经过编程后就可以直接投入使用的这样一个状态。

　　因此UX关注的重点：可行性分析、用户行为研究、用户案例分析等

（2）用户界面设计师的技能和职责

• 外观：品牌和平面设计开发，用户指南/故事线，客户分析，设计研究
• 响应性和交互性：适应所有设备屏幕尺寸，交互性和动画，和开发人员的协调，UI原型设计

　　UI设计师创建了产品的外观和外观，从而形成了个性和品牌。他将产品与用户联系起来，建立客户信任并迁移品牌概念。 UI设计师需要与其他团队成员（例如开发人员和UX设计人员）进行协作。

　　因此UI关注的重点：布局、视觉设计、品牌等。

　　知乎里面这篇文章讲的很好，可以学习了解：https://www.zhihu.com/question/19567997

四、UI设计网站推荐

1、花瓣，陪你做生活的设计师(家居，美食，时尚，穿搭，设计，商品，美图等)  https://huaban.com/

　　设计师素材收集平台，也是每个设计师必不可少的个人素材库。不过这个网站经常不稳定，也可以买Eagle作为私人素材库。

2、站酷 (ZCOOL) - 设计师互动平台 - 打开站酷，发现更好的设计！  https://www.zcool.com.cn/

　　站酷网，是综合性"设计师社区"，聚集了中国部分设计师、艺术院校师生、潮流艺术家等年轻创意设计人群。而且站酷经常会举办各类设计大赛，在站酷也有许多国际一线的设计师入驻来分享一些优秀的设计案例，可以多看他们的作品去提高审美和认知。

3、站酷海洛 - 正版图片、视频、字体、音乐素材交易平台 - 站酷旗下品牌  https://www.hellorf.com/

　　站酷海洛，一站式正版视觉内容平台，授权内容包含图片、视频、音乐、字体等，是站酷旗下品牌。在这个无论是图片还是字体等素材都是经过严格筛选的，而且所有的素材质量比较高。

4、UICN用户体验设计平台  https://www.ui.cn/

　　这是一个体验设计的专业平台，在这个平台聚集了大量的优秀的UI设计师，是每一个UI设计师必逛的宝藏之地。每日必逛的开眼网站。

5、优设网 - UISDC - 设计师交流学习平台 - 看设计文章，学软件教程，找灵感素材，尽在优设网！  https://www.uisdc.com/

　　我觉得优设网有个亮点：细节猎人：https://www.uisdc.com/hunters，大产品 小细节：产品无言细节有声 别着急开PS 1分钟小短文揣摩设计真谛，我觉得这个挺nice的，可以参考别人的细节思维。

　　下面还有2个国外的设计网站，需要FQ：

　　https://dribbble.com/
　　https://www.behance.net/