在国内，Web软件设计团队中，软件工程师的能力往往大大于UI设计工程师的能力，导致了许多原本优秀的软件产品，即难用又难看，领导根本不满意，产品根 本卖不动，客户根本不接受。往往在软件开发的后期反复地修改用户界面和用户操作，造成软件无限制的返工。 所以找了一些设计的禁忌，只是给代码能力ok的软件开发人员做个参考。

　　本文列举Jeff Johnson:《GUI设计禁忌》一书中提及的明确针对Web设计和笔者认为对Web设计有参考意义的设计原则和禁忌。设计Web项目时尽量参考一下基本原则，避免设计禁忌，应该能使Web项目的GUI上一个层次。


基本原则：


1、设计时更多的考虑用户及其需要完成的任务，而不仅仅是技术

2、首先考虑功能的实现，然后才是界面的排版

3、从用户的视角看问题，使用用户的词汇进行描述

4、不要向用户暴露实现细节

5、使常用的用户任务简单化，不要让用户解决额外的问题

6、保持一致性，引导用户的使用习惯，重点参照微软等大公司的操作习惯

7、保持显示惯性，传递信息，而不仅仅是数据

8、设计应满足响应需求


禁忌：



1、同一页面包含重复功能的链接或按钮

2、将复选框用作单选按钮

3、无初始值的多选一设置（下拉框）

4、在非布尔值设置中使用复选框

5、用文本框显示只读数据

6、单选按钮之间间隔太大

7、属性标记对齐方式不一致

8、当前无效的控件不充分置灰

9、显示对用户无意义的错误提示

10、不同的类型页面窗口显示相同的标题

11、窗口的标题和调用的命令不一致

12、要求用户输入随机数

13、相似的功能却有不一致的用户操作界面

14、取消按钮无法真正取消操作

15、网站结构反映公司的结构或网站升级的历史

16、返回按钮不能达到预期的目的

17、搜索选项过多，过度复杂

18、使用容易被忽略的隐藏的图片链接

19、需要向下滚动才能看到当前页的重要信息

20、图片按钮对鼠标按下操作没有视觉变化

21、无意义的虚假进度条

22、执行长时间的任务时鼠标指针不显示成忙状态

23、不考虑用户可能的人为的错误输入

24、认为好的UI就是漂亮的UI

25、盲目错误的使用页面模块化设计


做网站可能需要注意的地方


1，对每一个超级链接点击之后采用新开窗口还是直接跳转，必须认真对待。如果用户点击一个link之后是要放弃当前页面开始新的体验，则应用直接跳转。如果用户点击link是要了解更多的信息，但是当前页面的信心仍然有用，则应新开窗口。

2，在每一个用户可能需要帮助的地方提供帮助信息或帮助按钮。完善的帮助系统是一个产品，网站成功很重要的因素。

3，区别对待你用户中的菜鸟和大虾，对于菜鸟有简单易上手的教程和循序引导，对于大虾应有快速开始体验的绿色通道。

4，对每一个功能使用的词语要慎重措辞。易懂，清楚描述提供的功能含义。不要让过于“酷”的词语吓跑用户。

5，是否有良好的快速的Bug反馈机制和投诉渠道，并且对bug与投诉及时反应。不要让这些问题石沉大海，没有回应。同时注意，尽量不要使用email这样的反馈机制，开发一个良好互动的反馈系统是有必要的。让其他用户可以看到另外的用户的提问和解答的情况。

6，了解你的用户群习惯，Office，Windows的操作习惯无疑是他们最熟悉的，所以，Word式的编辑器，Windows式的操作界面对大多数用户来讲往往会是最友好的。当你不清楚的用户的喜好的时候，多搞简短的问卷调查来帮助你改善提高往往是有效的。

7，在适当的时候和地方体现你的幽默是可爱的。用户会对这样的设置会心一笑，无形中增加对你的喜爱，认可度

8，不要轻易对你的用户承诺什么，但是一旦承诺了，就要尽最大努力去兑现。

9，对于由于开发者的粗心或者失误给用户造成的损失和伤害，不要沉默，不要试图去隐瞒否认，而是诚挚道歉，承担责任，解决问题。

10，功能齐全不是最重要的。做好核心功能，对核心功能体验良好是应该优先考虑的。不是你推出的服务越多，用户越喜欢，而是你推出的某项核心服务足够好，吸引了用户。事实上，一个网站理论上可以提供的功能是可以无限增加的。不要忘记了用户来这里的最重要的目的。

11，不要试图在一个还不错的产品里去强行捆绑（并且不可卸载）自己还不够成熟的产品。体验差的产品只会伤害用户，并且使得他们对你今后的改进也会保持一种惯性上的敬而远之。

12，提供信息型的网站是应该让用户获取所需并且快速离开当前板块。

13，在不泄漏商业机密的情况下，让用户知道你的开发进度和目标是值得赞许的。一个和用户足够接近并且亲切的开发团队能够赢得用户的认可。

14，开放的心态尤其重要。让你的用户来去自由，从长远来讲可能反而能够对用户形成最大的粘性。不要像某些SP一样，一旦使用了其服务，就不让你在退订。不要让用户有上了贼船的感觉。

15，粘住用户是我们的最终目的。但是注意途径和方式。说得虚一点：留住用户的心，比留住用户的人更加重要。

16........

最后，纸上谈兵谁都会，说易做难。说一百件，不如做十件，做十件，不如做好一件。









转自：http://blog.sosolabs.com/

一、Babylon.GUI是什么
1.简介
Babylon.GUI是一款可用于Web3D用户界面的UI组件库，使用Babylon.GUI可以使我们像在2D平面中布局UI那样在3D场景中放置按钮、文本标签和面板等各种控件，此外它还支持在WebVR中布局UI。
2.最初的印象
二、使用
1.引入JS
通过此地址可以获得Babylon.GUI的JS版本与TS版本的最新文件，或者查看其源代码。
2.从AdvancedDynamicTexture开始
Babylon.GUI使用DynamicTexture来生成功能齐全且灵活的用户界面，同时它还可以享受到GPU的加速。
代码片段：
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
GUI有两种模式，CreateFullscreenUI是其全屏模式，在此模式下，Babylon.GUI将覆盖整个屏幕并重新缩放以始终适应项目的渲染分辨率。
使用全屏模式时有两点需要注意，首先每个3D场景仅允许存在一个全屏模式的GUI，其次它会拦截所有的点击事件和触摸事件。
GUI的另一个模式是纹理模式，可以通过CreateForMesh来创建纹理模式的GUI，第一个参数与全屏模式一样都是指定UI的名称，第二个参数是宽度，第三个参数是高度。
代码片段：
var advancedTexture2 = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh("UI", 1024, 1024);
3.通过Image创建位图
代码片段：
var bottomBG = new BABYLON.GUI.Image("bottomBG", "images/figureBG.png");
bottomBG.width = "640px";
bottomBG.height = "300px";
advancedTexture.addControl(bottomBG);
通过addControl将Image控件添加到GUI并显示出来，如果想移除某个UI，可以使用removeControl方法。
代码片段：
advancedTexture.removeControl(bottomBG);
4.通过Button创建按钮
代码片段：
var button = BABYLON.GUI.Button.CreateSimpleButton("button", "按钮文本");
button.top = "0px";
button.left = "0px";
button.width = "150px";
button.height = "50px";
button.cornerRadius = 20;
button.thickness = 4;
button.children[0].color = "#DFF9FB";
button.children[0].fontSize = 24;
button.color = "#FF7979";
button.background = "#EB4D4B";
advancedTexture.addControl(button);
5.点击交互
GUI的所有控件都可以被侦听到以下7种事件。
事件
触发条件
onPointerMoveObservable
当光标移到控件上方时触发，仅在全屏模式下可用
onPointerEnterObservable
当光标进入控件时触发，仅在全屏模式下可用
onPointerOutObservable
当光标离开控件时触发，仅在全屏模式下可用
onPointerDownObservable
当指针在控件上向下时触发
onPointerUpObservable
当指针在控件上时触发
onPointerClickObservable
单击控件时触发
onClipboardObservable
触发剪贴板事件时触发
侦听时可以采用以下的写法(这是Babylon中回调函数的惯用写法)，add中的函数即为事件的回调函数。
代码片段：
button.onPointerClickObservable.add(function ()
{
clicks++;
if (clicks % 2 == 0)
{
button.background = "#EB4D4B";
}
else
{
button.background = "#007900";
}
button.children[0].text = "被点击了: " + clicks + "次";
});
6.容器
容器可以用来承载其他控件，默认情况下容器不阻断鼠标事件，也就意味着即使指针在容器的上方，场景也会接收到指针事件，如果想改变这种默认行为，可以通过使用isPointerBlocker来防止。
代码片段：
container.isPointerBlocker = true;//阻断事件
默认情况下容器会将其子对象限制在其边界范围内，可以通过以下代码来禁用这个默认行为：
代码片段：
container.clipChildren = false;//不限制子对象的位置
6.1.矩形容器Rectangle
代码片段：
var rect = new BABYLON.GUI.Rectangle();
rect.width = 0.2;
rect.height = "40px";
rect.cornerRadius = 20;
rect.color = "red";
rect.thickness = 4;
rect.background = "green";
advancedTexture.addControl(rect);
6.2.椭圆容器Ellipse
代码片段：
var ellipse = new BABYLON.GUI.Ellipse();
ellipse.width = "100px";
ellipse.height = "100px";
ellipse.color = "Orange";
ellipse.thickness = 4;
ellipse.background = "green";
advancedTexture.addControl(ellipse);
6.3.堆栈容器StackPanel
堆栈容器可以按水平或垂直方向来堆叠其子对象，所有的子对象必须事先定义好宽度、高度后才可使用堆栈容器。
代码片段：
var panel = new BABYLON.GUI.StackPanel();
advancedTexture.addControl(panel);
var button = BABYLON.GUI.Button.CreateSimpleButton("but", "Click Me");
button.width = 0.2;
button.height = "40px";
button.color = "white";
button.background = "green";
panel.addControl(button);
var button2 = BABYLON.GUI.Button.CreateSimpleButton("but2", "Click Me also!");
button2.width = 0.2;
button2.height = "40px";
button2.color = "white";
button2.background = "green";
panel.addControl(button2);
6.4.网格容器Grid
网格容器可以定义行与列，并允许其子对象指定它们要待的单元格。
addColumnDefinition(width，isPixel)：使用此函数可以创建一个新列。如果isPixel为false，则为百分比模式，宽度width可以在0到1之间，如果isPixel为true，则宽度width为具体的像素值。
addRowDefinition(height，isPixel)：使用此函数可以创建一个新行。如果isPixel为false，则为百分比模式，高度height可以在0到1之间，如果isPixel为true，则高度height为具体的像素值。
代码片段：
var grid = new BABYLON.GUI.Grid();
//这是一个由4列组成的网格，其中第一个和最后一个宽100像素，第二个和第三个分别具有剩余空间的50%的宽度。
grid.addColumnDefinition(100, true);//100像素
grid.addColumnDefinition(0.5);//50%
grid.addColumnDefinition(0.5);//50%
grid.addColumnDefinition(100, true);//100像素
var rect = new BABYLON.GUI.Rectangle();
rect.background = "green";
rect.thickness = 0;
grid.addControl(rect, 0, 1);//将矩形容器rect放置到网格容器的第1行第2列中(网格的行与列均从0开始计)
var targetGrid = grid.(0, 2);//获取第1行第3列的单元格
此外还可以使用以下功能更新或删除行和列：
setRowDefinition(index，height，isPixel)：更新行定义
setColumnDefinition(index，width，isPixel)：更新列定义
removeRowDefinition(index)：删除指定索引处的行定义
removeColumnDefinition(index)：删除指定索引处的列定义
7.其他控件
除了上文提到的Image、Button、容器三种控件外，Babylon.GUI还提供了以下的控件：
控件
作用
TextBlock
文本块，可以用于显示简单的文本
InputText
文本输入框，可以让用户在其中填写文本
Checkbox
复选框
RadioButton
单选按钮
Slider
滑块，可以用来在一个范围内控制一个值
Line
线段，在两点之间绘制一条线
MultiLine
多线，可以在任意数量的网格、控件、点之间绘制线
ColorPicker
拾色器，可以让用户在其中挑选颜色
DisplayGrid
显示网格，用于在GUI内部显示网格
VirtualKeyboard
虚拟键盘
想更深入了解Babylon.GUI，或者在使用过程中遇到问题时，可以查阅此文档。
三、结语
Babylon.GUI预设的多种UI控件可以帮助我们便捷地在Web3D中布局UI，节省控件开发及屏幕适配的时间，但它不是唯一一个可用于Babylon的UI组件库，CastorGUI、Dat.GUI，甚至HTML都可以用来为Babylon构建UI。
对Babylon这款Web3D引擎感兴趣的同学可以通过此文章进一步了解：《认识Babylon：Web3D入门指南》

图形用户界面（Graphical User Interface，简称 GUI，又称图形用户接口）是指采用图形方式显示的计算机操作用户界面。
70年代，美国施乐公司的研究人员开发出了第一个图形用户界面，这样的设计使得计算机实现了字符界面向图形界面的转变，开启了新的纪元。从此以后，Windows、MAC OS等操作系统陆续出现，界面设计不断完善，操作系统的不断更新变化也将图形用户界面设计带进新的时代。
有许多图形用户界面(GUI)工具包可以与Python编程语言一起使用。其中三巨头是Tkinter、wxPython和PyQt。
这些工具包中的每一个都将与Windows、macOS和Linux一起工作，而PyQt具有在移动设备上工作的附加功能。
用wxPython打造Python图形界面（上）
PyQt怎么创建窗口

一般在写图形用户界面的时候用C++的比较多，用java中的GUI很少，java web在开发时图形显示直接以网页的形式展示，但是这一块我想了解一下GUI的基础，所以就看视频学习了一下，下面是我看视频学习的一些总结：

java.awt和javax.swing 

 awt(Abstract Window ToolKit)抽象窗口工具包，需要调用本地系统方法实现功能；javax.swing是基于AWT基础之上的，建立的一套图形界面系统，其中提供了更多的组件，完全由java接口实现，增强了移植性。
相关类的介绍 

 Component是这一模块所有类的父类，Container和Button类。 

就写这么多吧，我自己这一块也不是很熟，基本没接触过，所以也写不出什么自己的理解，等以后接触到了熟悉了再回头写。 

因为本人属于入门菜鸟级别，所以写的博客都是比较水，希望在后面的学习中慢慢加强吧~