UI设计/GUI开发-入门界面设计

概述

从几个概念谈起，GUI（图形用户界面）、UI开发、前端、Web开发，这些个耳熟的词语，是否想过它们正真的含义！一款使用体验极好的软件，好看、好用，必然不是凭空想出来的，而是有理论依据、多方配合设计出来的！本文先整理的那些关于人机交互界面的概念，然后对如何提升用户体验做基本介绍…

GUI(图形用户界面)

图形用户界面（Graphical User Interface，简称 GUI，又称图形用户接口）是指采用图形方式显示的计算机操作用户界面。个人理解，GUI的概念是在" 计算机实现从字符界面向图形界面的转变"这个 历史上建立起来的。在概念上，GUI着重对比"传统的字符界面操作复杂，非专业的用户难以理解和操作"。
图形用户界面系统通常是指由相应硬件平台和操作系统支持的显示模型，窗口模型和用户模型，以及由这三个模型的应用程序接口组成的应用程序接口API(Application Program Interface)，其中计算机硬件平台和操作系统是图形用户界面系统的基础。

UI设计师

UI设计师的涉及范围包括高级网页设计、移动应用界面设计，是目前中国信息产业中最为抢手的人才之一。不单单从事美术绘画，更需要对软件使用者、使用环境、使用方式进行定位，并最终为软件用户服务。UI设计师进行的是集科学性与艺术性于一身的设计，他们需要完成的，简单说来，正是一个不断为用户设计视觉效果使之满意的过程。偏重软件界面的美术设计、创意工作和原型设计。主要要求从业人员精通Photoshop、Illustrator、Flash等图形软件。UI设计师的工作也可以参考这篇文章。
UI设计-百科中所提及的实体UI和虚拟UI，但是却没有详细解释，这篇文章从UI的字典意思（物体与物体的接触面）层解释到，以车子来举例，方向盘、仪表盘、中控都属于用户界面属于实体UI；而我们互联网中常说的UI设计就属于虚拟UI，我不确定对不对。

前端开发

前端技术指通过浏览器到用户端计算机的统称，存贮于服务器端的统称为后端技术。前端开发主要职能就是把网站的界面更好地呈现给用户。前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。web前端开发工程师，前端设计师并不一定要懂得设计（UI设计师），主要利用HMTL与CSS建构页面，用JavaScript完善交互以及用户体验。前端开发需要比UI开发懂的更多的编程技能。他们必须了解HTTP协议，服务器和浏览器的工作原理，在当前市场上的各种设备上显示Web的特性。

先来粗略的理解下"前端开发"中的"前端"这个词，跟UI的概念比较的话，它是一个相对较窄的词语，前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。

UI开发

在百科中并没有发现这个词条，但是在这篇文章中它解释到，UI开发是UI设计与Web前端开发的综合体。UI开发人员将设计理念和技术技能结合在一起。他们不但拥有设计的能力， 懂得设计的原则和原理，还能将其转换为代码来达到功能的实现。他们能够深刻了解CSS，HTML等代码知识 并且正确的使用在设计和开发中。

桌面应用程序

桌面应用程序，又称为 GUI 程序（Graphical User Interface），但是和 GUI 程序也有一些区别。桌面应用程序 将 GUI 程序从GUI 具体为“桌面”，使冷冰冰的像块木头一样的电脑概念更具有 人性化，更生动和富有活力。
如果说 GUI 程序使在实验室里复杂的电脑进入了办公室（企业），那么 桌面应用程序 就使电脑进入了睡房（家庭）。桌面应用程序 强调的一个核心概念是“易用”，GUI 程序相对更老的 CUI 程序的优点也是易用，但 桌面应用程序 提倡 1 个更高级别的易用。

GUI和WEB

GUI开发和WEB开发，搜罗了很久，也没有高明白他们是否有什么名称联系。在桌面应用、移动APP开发中，都有GUI的概念，但是到Web开发却没有这个概念，这就是我纳闷的地方。 这篇博文中，提到WEB前端从工程层面上讲，就是一种GUI软件，不管别的，反正这是合我意的理解，O(∩_∩)O~

桌面应用程序（GUI应用程序）是相对于Web应用程序而言的，主要区别在于应用程序自身与它的用户界面之间的相对位置不同。运行桌面应用程序时，用户界面会出现在运行应用程序的机器屏幕上。应用程序和它的用户界面之间的消息通过机器的操作系统进行传递。通常情况下，这里只涉及到一台机器，不存在网络。运行Web应用程序时，用户界面能够出现在任何一台机器的浏览器中。应用程序和它的用户界面之间的消息必须通过网络进行传递。因为通常情况下，web应用程序和它的用户界面总是位于两台独立的机器上。简而言之，需要在本地计算机上安装应用程序的一般可以认为是桌面应用程序，无需在本地计算机安装的应用程序一般认为是WEB应用程序。

UI/UX

UX=UE= User Experience 用户体验
简单粗暴的描述概念的话，用户体检设计（UX）就是用户对App的主观感受；用户界面（UI）就是App里面的元素是什么，放在哪里，如何工作；信息架构（IA)就是App的整体结构；交互设计（IxD）就是用户与产品之间如何交互。
UX设计，关注用户使用前、使用过程中、使用后的整体感受，包括行为、情感、成就等各个方面。用户体验是整体感受，所以不仅仅来自于用户界面，那只是其中的一部分。通俗的讲这是个整体的使用感受，包括受品牌影响，用户个人使用经验的影响，总之就是让用户用着爽。

入门UI/UX设计

如下提到的UI设计，其在语义上即包含GUI应用程序的UI也包含WEB开发的UI。该如何学习真正的UI设计，怎么才能让UI看起来美丽，用起来方便？UI设计常用工具？UI设计的常用网站？UI设计的经典书籍有哪些？
这是一篇很不错的关于如何学习前端 UI/UX设计的文章，其中起到的 7 steps to become a UI/UX designer，可以在好多个门户上看到。一个混合了界面与体验的职业：UI/UX设计师。你要学习设计的心理学方面知识（审美 ？）：为什么这个作品看起来很棒和为什么它会失败。发现，定义，开发，产生是一个设计过程中简单清晰可见的地图。你也不得不训练你的眼睛去看好的设计和坏的设计，并在他们中辨别出长处和短处。养成每天阅读设计新闻或者博客的习惯，有数以百万计的在线文章可供我们发现新设计趋势，范例与教程。有时间你可以选择已经使用的网站或应用程序并重新设计他们。选择你的最喜欢，并保持更新与最新的功能和趋势。找到一个设计导师或者设计师朋友，他们将会帮助你。

UI/UX Design 简书专题，只读了其中的第一篇，为什么网站和app都喜欢用蓝色，受益良多，后边的还没来的及拜读。

(待整理)那些需要看的书，那些需要学会使用的工具…

GUI设计方法

上边已经提到过桌面应用程序是一种GUI程序，在系统UI程序的基础之上，提倡 1 个更高级别的易用。虽然上边说了很多UI/UX设计的知识，它们都是在Web应用程序的场景下描述的。但是说到好看好用，个人感觉不管是哪种应用程序，客户对它们的要求是基本一致的，不同开发者的UI设计基本方法也大致相同。这一小章节，我们将重点学习记录如何完成一个更好的GUI程序。（结合Qt GUI 编程），在 Qt 的演示Demo中并不乏酷炫的界面实现，这说明它是可以的，我们应该深究它的设计方法。

Windows桌面应用程序设计指南，这是我发现的一个很好的专栏，主要是对 Windows开发人员文档（这真的是个不错的官方的技术网站，内容很丰富，值得收藏细细研究）中的 Learn how to build desktop apps for Windows PCs using C++ and the Win32 API. 中UX设计相关章节的翻译。windows-uxguide-guidelines 其中与 UI/UX 设计最密切相关的部分是Design-GuideLines-Controls，但是从Guidelines开始的所有章节都值得拜读，可以从中获得不少设计灵感，让你摆脱硬生生的界面。Use these articles to help you design the user experience for your Windows desktop apps:

• How to Design a Great User Experience，Recommendations for achieving power and simplicity through carefully balanced feature selection and presentation.

• UX checklist(用户体验核对清单)，Some common mistakes and inconsistencies to watch out for in your user interface design.（在你的UI设计中有些常见错误和不一致需要watch out for注意）。