学习ui设计的心得经验

我是20xx年从一所普通大学传媒设计专业毕业的大学生，对未来的憧憬让我觉得可以在平面设计行业一展手脚了。可事实上并没有想象的那么高，理想总是很骨感。当初经过三个月才找到一家广告公司，进去后无非做些排版的工作，根本没有创意，没有设计。于是我觉得这个与自已当初的想法差距太多，我选择了辞职。

没有工作的日子，开支也大，又不能问父母要钱了，我想改变，我想从事有前景的设计行业。我在网上找到了一些设计相关的行业，觉得UI设计前景很好，又是互联网行业。UI设计的薪水从网上调查来看居于高位。可我不会UI啊？怎么办？如果是自学没有一年左右也入不了门，毕竟UI除了视觉设计还有用户体验，用户心理的研究，完全超出我以前的所学。还是找地方培训吧，可以费用又贵，针对我目前的情况压力相当大。网上找了几家做了比较觉得苏州金动力的UI性价比最高，我决定先去了解下。

经过现场了解和咨询，我觉得还是挺适合我的情况，学费还能分期还。就开始了UI的全日制学习。经过4个月从早到晚的上课及练习，我毕业了，当然学习期间很辛苦是真的。但黄天不负有心人，毕业即到园区找到了一份UI设计助理的工作，月薪起步就是5500，小有得意。然后工作到目前一年多了，工资12000多，我觉得当初的选择是对的。那么不少的曾经学过平面的朋友都想在继续学习ui设计，这时候我经常听到一些朋友在问怎么样才能学好ui设计啊，有没有什么简单快速的方法？有没有一些多年的经验可以分享的呢？大家今天走运了，我就把自己总结出来的学习UI设计的一些经验与大家一起分享吧。

想做一个好的UI设计师除了应该具有一定的审美能力，还要了解整个产品的开发过程，因为目前国内的软件行业还不能对UI设计形成应有的重视程度，所以对我们的要求就更高了，你要能作出夺人眼球的东西，还要站在用户的角度充分了解他们的需求和使用习惯，因为一般的软件公司的UI设计师只有一个或者几个也都是孤军奋战，而且经常会碰见没有经验的team leader,不懂得协调你和其他团队成员的工作，所以你还要与团队成员充分沟通，来获得设计中所需要的基本信息，要有耐心有好脾气?? UI设计在我们这叫美工（咋听上去象“民工”），所以做界面设计的工具一般有photoshorp、Illustrator/FreeHand/CorelDraw/c4d/3dmax（至少一个）、Dreamweaver、Flash、Html；编程方面最好能跟程序员同步，懂一点ASP、JSP等软件开发语言、还有开发环境、服务器种类?? 还要耐的住寂寞，漫长的项目开发过程中，你的工作可能只是前期，到了后面可能会有很多的空闲时间，用来学习充电是不错的选择。

其实学习ui设计是一个比较漫长枯燥的阶段，要学习的东西真的很多，如果你缺少耐心的话可能这个知识你怎么都学不到手，在学些的过程中小编提醒大家一定要注意以下几点：

第一、时刻保持学习状态与学习主动性。

学习的机会很多，无论是在生活里，你结识一个朋友、看一场电影、读一本书、浏览一个网站、看一则广告，随处都暗藏着学习的机会，虽然不一定能学

到具体的技能，但至少可以领略到一些精神和获得一些专业上的灵感。

第二、一定要坚持不懈的练习！

设计、编程在我眼里都是需要动手才能练就出来的本事，只看书满脑子理论完全不行。设计基本功：你可以有计划的练习手绘，提高painting能力我认为对做设计，包括ui设计，是有好处的。从临摹开始：可以先临摹一些教材上的范例，现有的优秀界面，优秀设计师的作品；在此基础上，时不时可以加上自己的想法情感，搞点原创。总之，“曲不离口拳不离手”要坚持练习，多动手，一定会从中获得很多经验！

第三、基础理论和基本技能不能忽视

许多设计都有着自己的规范与知识点，这些你可以自己找书看，各种设计专业的书籍可以具体从构图、排版、色彩、图形等方面入手了解一些基础知识。然后学习UI设计常用的软件，Adobe系列的 Photoshop、Illiustrator算常用的了，如果对web感兴趣还可以玩玩Flash，Dreamweaver甚至是html5 等等

第四、前期创作建议从不断模仿做起

怎样才能学好UI设计？在刚开始学的时候，大部分人都是从不断模仿学起，孰能生巧，通过不断得积累，最终你会学到UI的精髓。当然，你的模仿对象要有水准，要选择那些经典的作品。

第五、多洞察别人的作品，多阅读，多思考

互联网是一个日新月异的行业，我们建议学员，在日后的界面设计工作中，不可盲目的追赶潮流，要知道，设计是需要一段时间的沉淀才能达到一个新高度。多洞察别人的作品，多阅读，多思考，这样你才能成为一名优秀的UI交互设计师。

写的比较多，也比较乱，但都是我在学习过程中的一些总结，也许能给新入门的朋友们带来一些帮助，少走一些弯路吧，最后祝愿大家学有所成，都能顺利找到UI设计师的工作。

 

第二篇：UI设计心得

界面设计的行业标准总结

? 界面设计的行业标准总结--- GUI设计的相关行业标准

1.1 GUI整体标准的制定GUI的整体标准包括以下四个方面：

1. 规范性

2. 合理性

3. 一致性

4. 界面定制性

一、GUI设计的规范性

遵循一致的准则，确立标准并遵循，是软件界面设计中必不可必的环节。确立界面标准的好处：

1. 便于用户操作：用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能

2. 使用户感觉到统一、规范，在使用软件的过程中愉快轻松的完成操作，提高对软件的认知

3. 降低培训、支持成本，不必花费较多的人力对客户进行逐个指导

二、GUI布局的合理性

界面的合理性是指界面是否与软件功能相融洽，界面的颜色和布局是否协调等。例如：

1.界面布局

a.屏幕不能拥挤

l Mayhew在19xx年的试验结果表明屏幕总体覆盖度不应该超过40％，而分组覆盖度不应该超过62％。

l 整个项目，采用统一的控件间距，通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的行间距。

b.控件按区域排列

l 一行控件纵向中对齐, 控件间距基本保持一致，行与行之间间距相同，靠窗体的控件距窗体边缘的距离应大于行间距。

l 当屏幕有多个编辑区域，要以视觉效果和效率来组织这些区域

c.有效组合

逻辑上相关联的控件应当加以组合以表示其关联性，反之，任何不相关的项目应当分隔开。在项目集合间用间隔对其进行分组，或者使用方框划分各自区域

d.窗口缩放时，控件位置、布局

l 固定窗口大小，不允许改变尺寸

l 改变尺寸的窗口，在窗口尺寸发生变化时控件的位置、大小做出相应的改变

l 改变尺寸的窗口，在窗口改变尺寸时增加相应在的纵向、横向滚动条，以方便用户使用窗体上的控件

2.界面颜色搭配

使用恰当的颜色，可以使软件的界面看起来更加规范：

a.统一色调

针对软件类型以及用户工作环境选择恰当色调，如：安全软件，根据工业标准，可以选取黄色。绿色体现环保，蓝色表现时尚清新、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等。

b.与操作系统统一，读取系统标准色表

c.遵循对比原则

在浅色背景上使用深色文字，深色背景上使用浅色文字，如蓝色文字以白色背景容易识别，而在红色背景则不易分辨。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色 d.整个界面色彩尽量少的使用类别不同的颜色

e.颜色方案也许会因为显示器、显卡、操作系统等原因显示出不同的色彩

f.针对色盲、色弱用户，可以使用特殊指示符

三、GUI风格的一致性

界面的一致性既包括使用标准的控件，也指相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。

1.在不同分辨率下的美观程度

软件界面要有一个默认的分辨率，而在其他分辨率下也可以运行，分别在800×600，1024×768，1280×768，1280×1024，1200×1600分辨率下的大字体、小字体下的界面表现。

2.界面布局要一致

如所有窗口按钮的位置和对齐方式要保持一致。

3.界面的外观要一致

如控件的大小、颜色、背景和显示信息等属性要一致，一些需要特殊处理或有特殊要求的地方除外。

4.界面所用颜色要一致

颜色的前后一致会使整个应用软件有同样的观感，反之会让用户觉得所操作的软件杂乱无章，没有规则或言。

5.操作方法要一致

如双击其中的项，触发某事件，那么双击任何其他列表框中的项，都应该有同样的事件发生。

6.控件风格、控件功能要专一

a.不错误的使用控件

例如使用Button样式做Table的功能，拿主菜单条显示版权信息等

b.一个控件只做单一功能，不复用

如果在特殊情况下出现复用的时候，可采用以下两种方法解决：

l 分组，使用双份控件

l 使用Table页，给用户很明显的视觉变化

7.标签和讯息的措词要一致

如在提示、菜单和帮助中产生相同的术语。

8.标签中文字信息的对齐方式要一致

如某类描述信息的标题行定为居中，那么其他类似的功能也应该与此一致。

9.快捷键在各个配置项上语义保持一致

如Tab键的习惯用法是阅读顺序从从左到右，从上到下。在定义软件快捷键时也可以将现有一些快捷键的属性作为参考，如表1-3-1（见附件）列出了常用的快捷键及其功能。

四、GUI界面操作可定制性

界面的可定制性大致可分为以下几个特性：

1.界面元素可定制

允许用户定义工具栏、状态栏是否显示，工具栏显示在界面上的位置；允许用户定义菜单的位置等。

2.工具栏可定制

不同用户对常用工具的使用是不同的，因此允许用户建立新的工具栏，选择要显示的工具栏，定制工具栏上的按钮等功能在软件系统中经常被用到

3.统计检索可定制

对于某些特殊行业的软件可以提供统计检索的可定制性，在充分了解用户需求的基础上制定大量的安全供用户选择

1.2 GUI所包含各类元素标准的定制

GUI的元素大致可分为以下几个方面：

1. 窗口

2. 菜单

3. 图标

4. 控件

5. 鼠标

6. 文字

7. 联机帮助

一、GUI窗口的标准

窗口是显示设备中的一个区域，用于观看对象、对象相关信息以及应用与对象的动作进行交互。从外观上来说，通常窗口是由标题、边框、菜单、工作区、滚动条等组成。窗口的标题栏可以进行打开、关闭、创建、缩放、移动、删除、重叠等操作

好的GUI窗口应该具备以下标准：

1.窗口控件的大小、对齐方向、颜色、背景等属性的设置和程序设计规约相一致

2.显示相关的下拉菜单、工具条、滚动条、对话框、按钮、图标和其他控制，既能正确显示又能调用

3.若窗口无法显示，所有内容能够改变大小、移动和滚动

4.活动窗口能够反显加亮

5.窗口能够正确的关闭

6.多个窗口叠加时窗口的名称正确显示

7.窗口的数据能够利用鼠标、功能键、方向前头和键盘操作

8.当窗口被覆盖并重新调用后，窗口能够正确再生

9.如果使用多任务，所有的窗口能够被实时更新

10.窗口支持最小化和最大化或放大

11.窗口上的控件随着窗体的缩放而缩放

12.父窗体支持缩放时，子窗体也应该支持缩放

13. 一个窗口中按Tab键，移动聚焦按顺序移动。先从左至右，再从上到下

14.子窗口位置在父窗口的左上角或正中，正上方1/4处为易吸引用户注意力的位。父窗口或主窗口的中心位置应该在对角线焦点附近，如下图2-1-2所示

15.当多个子窗口弹出时依次向右下方偏移，并且显示出窗口标题，如下图2-1-3所示

16.重要的命令按钮与使用频繁的按钮放在了界面醒目的位置

17.与正在进行的操作无关的按钮应该加以屏蔽

18.按钮大小要与界面的大小和空间协调

19.窗口中所包含的标签左对齐排列

20.多窗口的切换响应时间不宜过长

二、GUI菜单的标准

菜单是否易用主要体现在它能否提供线索帮助用户识别，而不用强迫用户去记忆，一个好的菜单设置可以分为以下几个方面：

1.菜单设置符合软件的需求

2.菜单项的措词准确，能够表达出所要进行设置的功能

3.菜单项的顺序合理，具有逻辑关联的项目集中放置

4.图形布局一致

5.菜单设置在窗体标题栏的下方

三、GUI图标的标准

图标是表示实体信息简洁、抽象的符号，它还可以作为可视按钮项，当被选中激活时，可以完成指定的功能。那么图标的设计当中应该着重考虑哪些问题呢，以下提供几点可供参考：

1.图标的设置符合常规的表达习惯

2.不同的目标采用不同的图标

3.图标具有清晰的轮廓，轮廓清晰的图标可保证图像在不同背景色上都具有较好的效果

4.选择合适的尺寸来定义图标。Windows XP系统的图标有四种尺寸（以像素为单位）可作为参考： 48×48， 32×32，24×24以及16×16，图标大小的选取决定于工具栏所定义的宽度

5.图标的外形与实际功能相似，应尽量避免抽象。这样的图标可以使用户很轻松、容易地认识图标的作用

6.在图标上加以标注，用来说明图标所完成的功能

7.图标放置在菜单栏的下方

四、GUI中控件的标准

软件系统功能的实现与控件是密不可分的，各控件位置的摆放直接影响到软件的使用，及其美观程度。下面举例说明软件系统中最常用到的控件对其元素间距、摆放位置进行说明：

1.控件元素的间距

a.单个元素间距

输入框之间垂直间距为5px

Label文本标签和输入元素之间水平间距为8-22px

复选框、单选按钮之间垂直间距为8px

多种元素混合垂直排列时，复选框和单选按钮边上的间距无论在什么情况下都为8px b.元素分组间距

窗口边框和内容区域的四周边距为11px；

父组和子组之间的四周间距为10px；

分组框边框和内部内容区域的四周边距为5px；

复选框组、单选框组的组水平间距为15px

2.按钮的位置，如下表2-4-1对按钮摆放位置的规则做了总结

指向对象

单个对象

多个对象 对象举例 输入框 界面元素组 按钮位置 按钮仅靠在输入框的右边 按钮与最底部的对象左对齐，如果空间允许则仅

靠在最底部对象的右边

按钮位于分组框左下角，并和分组框内其它元素

左对齐

位于表格下方，并和表格左对齐 窗口区域，页签面板，分组框 表格，网格

分组框 表格按钮

五、鼠标在GUI中的标准

用户会把鼠标移进、移出窗口，或当光标在窗口中，用户按下、释放鼠标键，鼠标是否准确、灵活，对一个软件系统来说也很重要。以下几点标准可作为在软件系统中鼠标设计的参考：

1.在整个交互的过程中，可以识别鼠标操作

2.多次点击鼠标后，仍能够正确识别

3.鼠标有多个按钮的情况下，能够正确识别每个按钮所要完成的功能

4.光标、处理指示器和识别指针随操作恰当的改变

5.点击选中时，鼠标指针停留在选中内容上，而不会滑动

6.支持鼠标滑轮上下翻动操作

7.对于相同种类的元素采用相同的操作激活

8.采用动态图标形象的表示出当前的操作，如用水漏表示系统忙，用手型表示可以点击等

9.鼠标无规则点击时不会产生不良后果

10.单击鼠标右键弹出快捷菜单，取消右键后该菜单隐藏

11.鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况

六、GUI文字的标准

文字在视觉上向用户传达各种信息，界面文字包括界面文字的字体和界面文字的用语两个方面，那这两方面都有哪些要求呢？以下分别阐述。

1.字体

a.使用统一字体，如规定软件系统的中文字体为“宋体”，英文及数据采用“Times New Roman” b.所有控件、描述信息尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况

2.文字表达

提示信息、帮助文档文字表达遵循以下准则：

a.口语化描述，用词客气多用您、请，不要用或少用专业术语，杜绝错别字

b.标点符号（断句、逗号、句号、顿号、分号）的用法要统一， 提示信息比较多的话要进行分段

c.警告、信息、错误使用对应的表示方法

d.使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定

e.根据用户不同采用相应的词语语气语调

七、GUI联机帮助的标准

帮助文档适用于以下三种情况：

l 系统默认、行业标准的控件操作不需要逐一描述，只需要对特殊控件加以描述

l 特殊操作、特殊功能界面，在界面上加控件直接连接到对应的帮助文件中

l 特殊设置的详细信息，除了应该在界面上用简洁明了的语句说明外，还可以在界面上加控件直接连接到对应的帮助文件中

帮助文档的标准要求：

l 结构化，按功能模块划分

l 必须阐述功能通过什么方法可以在软件中实现

l 措词恰当、简捷、通俗易懂，明了的帮助用户解决问题

l 不在帮助文档中做广告宣传

? 界面设计的行业标准总结--- WEBUI设计的相关行业标准

WEBUI的特点：

1. 感官体验：呈现给用户视听上的体验，强调舒适性

2. 交互体验：呈现给用户操作上的体验，强调易用、可用性

3. 浏览体验：呈现给用户浏览上的体验，强调吸引性

4. 情感体验：呈现给用户心理上的体验，强调友好性

5. 信任体验：呈现给用户的信任体验，强调可靠性

2.1 WEBUI整体标准的制定

WEBUI的整体标准也从以下四个方面入手：

1. 规范性

2. 合理性

3. 一致性

4. 界面定制性

一、WEBUI的设计规范性

WEBUI也要遵循一致性的准则，其目的与GUI一致：

1. 便于用户操作

2. 使用户感觉到统一、规范，在使用软件的过程中愉快轻松的完成操作，提高对软件的认知

3. 降低培训、支持成本，不必花费较多的人力对客户进行逐个指导

二、WEBUI布局的合理性

WEBUI界面的合理性直接影响到软件系统的可用性，下面将从几个方面讲述WEBUI的布局特点：

1.设计风格：符合目标客户的审美习惯，并具有一定的引导性

2.页面布局：重点突出，主次分明，图文并茂

3. LOGO：确保logo的保护空间，确保品牌的清晰展示而又不占据过分空间

4.页面导航：导航条清晰明了、突出，层级分明

5.图标使用：简洁、明了、易懂、准确，与页面整体风格统一

6.图片展示：比例协调、不变形，图片清晰。图片排列既不过于密集，也不会过于疏远

7.动画效果：与主画面相协调，打开速度快，动画效果节奏适中，不干扰主画面浏览

8.页面色彩：遵循GUI界面颜色标准，主色调+辅助色不超过三种颜色

9.页面底色：所选颜色不能干扰主体页面的阅读

三、WEBUI风格的一致性

WEBUI的一致性与GUI大同小义，也指相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致，但不同的是WEBUI对浏览器有一定的要求。

1. 在不同分辨率下的美观程度

WERUI要求所有页面要在800*600，1024*768两种分辨率下运行通过

2.在不同版本浏览器上的运行

例如要求在IE5.0，5.5以及6.0下运行通过而不发生错误

3.在不同厂商的浏览器上运行

例如软件系统可以在IE、Firfox、Google等浏览器上正常运行

4.WEBUI的菜单、地址栏、图标、状态栏等风格、位置要一致

5.遵循GUI风格一致性的2-9所规定的一致性

四、WEBUI的可定制性

WEBUI的可定制性大致可分为以下几个特性：

1.界面元素可定制

允许用户定义工具栏、状态栏、地址栏等是否显示，工具栏显示在界面上的位置；允许用户定义菜单的位置等。

2.工具栏可定制

不同用户对常用工具的使用是不同的，因此允许用户建立新的工具栏，选择要显示的工具栏，定制工具栏上的按钮等功能在软件系统中经常被用到

2.2 WEBUI所包含各类元素标准的定制

WEBUI所包含各类元素：

在WEBUI中页面所包含元素与GUI有所不同，大至分为页面、界面控件、菜单、图标、鼠标、文字、帮助，见下图2-1为WEBUI的基本页面构成

一、WEBUI页面的标准

根据WEBUI的特性，下面列出十六个点来分别描述页面的制定：

1.页面大小：适合多数浏览器浏览，如15寸、17寸、19寸等显示器

2.按钮设置：对于交互性的按钮必须清晰突出，以确保用户可以清楚地点击

3.点击提示：点击浏览过的信息颜色需要显示为不同的颜色，以区分于未阅读内容，避免重复阅读

4.错误提示：若表单填写错误，应指明填写错误之处，并保存原有填写内容，减少重复工作

5.显示路径：无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径

6.栏目的命名：与栏目内容准确相关，简洁清晰，不宜过于深奥

7.栏目的层级：最多不超过三层，导航清晰

8.内容的分类：同一栏目下，不同分类区隔清晰，不要互相包含或混淆

9.页面的长度：设置一定的页面长度，避免页面过长而影响阅读

10.分页浏览：对于较长的内容可以进行分页浏览

11.表单填写：尽量采用下拉选择，需填写部分需注明要填写内容，并对必填字段作出限制

12.页面速度：正常情况下,尽量确保页面在5秒内打开，对于大型软件可以适当的延长等待时间

13.页面刷新：尽量减少页面的刷新率，或采用无刷新技术

14.新开窗口：尽量减少新开的窗口，以避免开过多的无效窗口，设置弹出窗口的关闭功能

15.网页地图：为用户提供清晰的网页指引

16.可以复用一些GUI窗口的相关标准，如菜单、标签、按钮的位置、字体、颜色等标准

二、WEBUI其他元素的标准

WEBUI的其他元素的制定标准，包括界面控件、菜单、图标、鼠标、文字、帮助信息等与GUI一致，并且可根据具体情况酌情予以改变。

? 界面设计的行业标准总结---报表的规范

报表是软件对用户输出的重要方式，报表的制定也要有一定的规范，以下几点标准可作为在软件系统中报表设计的参考：

1.报表风格统一、结构合理、分类明确，能够清晰的表达报表中所要体现的内容

2.报表结构要连贯

3.同一软件系统产生的全部报表的字体类型、字体大小、字体颜色要一致

如报表标题为楷体_GB2312字18号字粗体，表前字段为宋体10.5号字，表中标题列、行为宋体11.5号字粗体，表中其他字段为宋体11.5号字，表后字段为宋体11.5号字，且上述字体颜色均为黑色

4.报表线条规整，不存在线短或线过长的情况

5.报表所选线型要一致

如要求报表的边框线为0.5磅黑色双线，表格中线条为0.5磅黑色单线等

6.报表单行间距相同

7.报表中各字段的对齐方式一致

如报表名称在报表表格横向距离居中的位置，表前字段与表格左对齐，表中标题要求水平居中，报表中为字符型的字段内容为水平居中，数值型的字段内容为中部右对齐，备注等表述为说明的字段可采用中部两端对齐的方式，表后字段左与表格对齐

8.报表的输出要规范

例如软件系统会有报表导出的功能，报表导出为各种格式（.doc、.excel、.pdf、.rpt等格式）后其形式、内容要统一，不会因为格式的不同而使报表发生失真的现象

9.报表横向不产生换行

也就是说报表的水平距离不应过大，而产生换行显示的现象，这类报表在导出为.doc格式的时候往往会产生报表格式失真或数据丢失的情况

10.报表支持打印输出功能，打印输出后的报表不产生失真。