ui界面视觉艺术设计
第一篇：ui界面视觉艺术设计
UI设计规范（流程、界面）
UI设计(流程/界面)规范
一：UI设计基本概念与流程
1.1
目的
规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。
1.2范围
l
界面设计
l
此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。
1.3
概述
UI设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户(市场)要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。
1.4
基本介绍
A、需求阶段
软件产品依然属于工业产品的范畴。依然离不开3W的考虑(Who,where,why.)也就是使用者，使用环境，使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)。什么地方用(在办公室/家庭/厂房车间/公共场所)。如何用(鼠标键盘/遥控器/触摸屏)。上面的任何一个元素改变结果都会有相应的改变。
除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世，我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。
B、分析设计阶段
通过分析上面的需求，我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。
C、调研验证阶段
几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。
测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。
调研阶段需要从以下几个问题出发：
用户对各套方案的第一印象
用户对各套方案的综合印象
用户对各套方案的单独评价
选出最喜欢的
选出其次喜欢的
对各方案的色彩，文字，图形等分别打分。
结论出来以后请所有用户说出最受欢迎方案的优缺点。
所有这些都需要用图形表达出来，直观科学。
D、方案改进阶段
经过用户调研，我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢，还有什么遗憾等，这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上，将方案做到细致精美。
E、用户验证阶段
改正以后的方案，我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈，好的设计师应该在产品上市以后去站柜台。零距离接触最终用户，看看用户真正使用时的感想。为以后的升级版本积累经验资料。
经过上面设计过程的描述，大家可以清楚的发现，界面UI设计是一个非常科学的推导公式，他有设计师对艺术的理解感悟，但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调这个工作过程是设计过程。UI界面设计不存在美工。
2.
UI设计流程
2.1
概述
根据上述原则，分析公司产品的特点，制定符合软件产品(或项目)生命周期的UI设计流程。每个产品(或项目)的生命周期中，UI设计师应该严格按照流程，完成每个环节的职责，确保流程准确有效的得到执行，从而提高产品的可用性，提升产品质量。
二：UI界面用户体验设计原则与规范
1：应该遵循的基本原则
无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。
这样得到的好处：
1：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解
2：降低培训、支持成本，支持人员不会行费力逐个指导。
3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加
做法：
项目组有经验人士，确立UI规范：
美工提供色调配色方案，提供整体配色表
界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范：
控件功能遵循行业标准，windows平台参见《Microsoft
用户体验》
控件样式在允许的范围内可以统一修改其样式、色调
参考其他软件先进操作，提取对本项目有用的功能，以使用，绝对不能盲从，漫无目的。
根据需要，设计特殊操作控件，准则为：简化操作、达到一定功能目的
界面实施人员与美工商榷控件可实现性,(如不实行此步骤，将会导致各自对对方工作不满意，也会产生不一致的混乱)。重复叠代上述工作。
建立合理化文档《UI标准》描述上述规范，
强行界面设计者理解之，并作为开发准则，
SQA人员进行监控开发人员是否遵循，及时告诫开发人员。
2：(Color)颜色使用恰当，遵循对比原则：
1：统一色调，针对软件类型以及用户工作环境选择恰当色调：
如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等
2：如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表
3：色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，?quot;!，?着重号，以及图标等
4：颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试
5：遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。
6：整个界面色彩尽量少的使用类别不同的颜色
itop色表
具体标准参考美术学统计学术标准。
色表的建设，对于美工在图案设计、包装设计上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。
3：(Resource)资源
一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、底图等。
1：也需要遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能的形成标准，参考itop的outlookbar图标设计标准
2：有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及图片风格
3：底图应该融于底图，使用浅色,
低对比，尽量少的使用颜色。
4：图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出莫名奇妙的图案。
5：鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个手的形状就有4钟不同的样子。
4：(Font)字体
使用统一字体，字体标准的选择依据操作系统类型决定。
中文采用标准字体，“宋体”，英文采用标准
Microsoft
Sans
Serif
不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。
字体大小根据系统标准字体来，例如
MSS字体8磅，宋体的小五号字(9磅)五号字(10.5磅)。
所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况
ITop采用BCB，所有控件默认使用
parent
font，不允许修改，这样有利于统一调整。
·系统大小字体属性改变的处理。
Windows系统有个桌面设置，设置大字体属性，很多界面设计者常常为这个恼火，如果设计时遵循微软的标准，全部使用相对大小作为控件的大小设置，当切换大小字体的时候，相对不会有什么特殊问题。
但是由于常常方便使用点阵作为窗口设计单位，导致改变大字体后，出现版面混乱的问题。
这个情况下，应该做相应处理：
1：写程序自动调节大小，点阵值乘以一个相应比例
2：全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多采用这种方法，但是必然结果是和系统不统一。
5：(Text)文字表达
提示信息、帮助文档文字表达遵循以下准则：
1：口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字
2：断句逗号句号顿号分号的用法，
提示信息比较多的话，应该分段，
3：警告、信息、错误
使用对应的表示方法
4：使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定。
5:
根据用户不同采用相应的词语语气语调，如专用软件，可以出现很多专业属于，用户为儿童：这可以语气亲切和蔼，老年用户则应该成熟稳重。制定标准遵循之。
6：(STYLE)控件风格，不要使用错误控件，控件功能要专一
有设计好的同一风格的控件，如果没有能力设计出一套控件，则使用标准控件，绝对不能不伦不类，杂乱无章
·不要错误使用控件，例如：
使用Button样式做TTable的功能，拿主菜单条显示版权信息，
·统一类型的控件操作方式相同，例如一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映
·一个控件只做单一功能，不复用
很多人为了写程序方便，喜欢把一个控件在不同情况下做不同功能用，这些对用户初次理解增加难度，只有用户熟悉后才能理解。
例如
改变红色选项，左边的参数代表不同的设置，可能由于为了节省控件或者编程量，但是只有熟练用户才回使用，这种情况下解决方法：
1:分组，使用双份控件
2：使用TABLE页，给用户很明显的视觉变化
==========================================================================
总结起来就是：
1.
产品制作人，写产品计划书。
2.
用户体验研究员，作调查分析。
3.
信息建构师，设计产品架构。
4.
互动设计师，作出互动流程。
5.
视觉设计师和用户界面设计师，作出页面视觉设计。
6.
前台工程师，前台开发。
7.
后台工程师，后台开发。
8.
用户体验研究员，做用户测试确保质量。
1.确认目标用户
在软件设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。例如：对于科学用户和对于电脑入门用户的设计重点就不同。
2.设计目标一致
软件中往往存在多个组成部分(组件、元素)。不同组成部分之间的交互设计目标需要一致。例如：如果以电脑操作初级用户作为目标用户，以简化界面逻辑为设计目标，那么该目标需要贯彻软件(软件包)整体，而不是局部。
3.元素外观一致
交互元素的外观往往影响用户的交互效果。同一个(类)软件采用一致风格的外观，对于保持用户焦点，改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。
7.可用性原则
7.1可理解
软件要为用户使用，用户必须可以理解软件各元素对应的功能。如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。例如：删除操作元素。用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。
7.2可达到
用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏(一般来说超过4层)那么用户达到该元素的几率就大大降低了。可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。(参考简单导向原则)
Quote
[阶段一：分析]
1、用户需求分析
2、用户交互场景分析
3、竞争产品分析这两者可以说是相辅相成的。
对于一个较为正规的项目而言，必然有对用户需求的分析内容。其中用户UI需求是重要的组成部分。如果说UI设计原则是所有UI设计的出发点的话，那么用户UI需求就是本次设计的出发点。好的UI设计建立在对用户深刻了解之上。因此用户交互场景分析就很重要。对于大部分项目组来说也许没有时间和精力去实际勘查用户的现有交互、制作完善的交互模型考察，但是UI设计人员在分析的时候一定要站在用户角度思考：如果我是用户，这里我会需要什么。竞争产品能够上市并且被UI设计者知道，必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性，看到别人的设计会有触类旁通的好处。当然有的时候可以参考的并不一定是竞争产品。
[阶段二：设计]
采用面向场景、面向事件驱动和面向对象的设计方法。
UI设计着重于交互，因此必然要对最终用户的交互场景进行设计。软件是交互产品，用户所作的就是对软件事件的响应以及触发软件内置的事件。因此要面向事件设计。现在的程序开发主流采用的是面向对象设计。面向对象设计可以有效的体现面向场景和面向事件的特点。设计的四个要素：交互对象,数据对象,事件(交互事件和异常),动作
[阶段三：开发]
通过：用户交互case图(说明用户和系统之间的联系)用户交互流程图(说明交互和事件之间的联系)交互功能设计图(说明功能和交互的对应关系)
最终得到UI的设计产品。
[阶段四：验证]
正如UI交互设计原则探讨文中提到的，对于UI产品的验证主要从下面几个方面入手：
1、功能性对照UI设计的再好，和需求不一致也不可以。
2、实用性内部测试UI设计的最重要点就是实用性。
3、用户焦点小组UI设计是否优秀的重要衡量依据。最后，说一点其他的问题。现在往往认为交互式设计和最终的UI效果设计可以截然分开。这就好比说需求可以和设计截然分开，是不可能的。
Quote
UI设计流程以及设计师参与的环节
最近的工作中总结出一条结论：拥有一个完善规范的流程，是决定着一个项目走向成功或失败的关键。
对于UI设计的工作流程，我觉得可以根据“市场分析-用户分析-架构-原型-界面-输出-完善”这条主线制定，每个环节UI设计师都应参与其中。
1.产品定位与市场分析
这一类工作大多都是由新产品研发部门以及市场需求完成的，但UI设计师应了解产品的市场定位、产品定义、客户群体、运营方式等。
2.用户研究与分析
这个过程是非常重要的，设计师应该找到合适的方法来完成此环节。你可以搜集相关资料分析目标用户的使用特征、情感、习惯、心里、需求等，提出用户研究报告和可用性设计建议。这部分工作也可和团队配合完成。时间与项目需求允许的情况下，更可以制定实景用户分析。
3.架构设计
这里涉及到比较多的界面交互与流程的设计，根据可用性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素。
4.原型设计
我觉得这里应该是一个小的阶段标志，要对前面所有工作加以设计方面的实施，根据进度与成本，可以把原型控制在“手绘-图形-FLASH-视频”几个质量范围。原型的本质更倾向与一个DEMO，它不需要有全部的功能，但要体现出设计对象的基本特性。
5.界面设计
如果很倾向于图形界面设计，这儿是你最喜欢的部分。但一定要结合循环讨论过的分析结果做设计，否则你的作品很难被人信服。色调、风格、界面、窗口、图标、皮肤的表现是本环节的关键。
6.界面输出
作为设计师，在这一部分的工作就是配合好开发人员完成相关的界面结合。
7.完善工作
这个环节是很多部门共同参与的，包括可用性的循环研究、用户体验回馈、测试回馈。同时，UI人员也应该把一些可行性建议进行完善。很多设计师做了东西不喜欢改，这是一个大忌。
如上的流程，可能会有很多部门共同参与完成，UI设计师如何与团队配合并发挥自己应有的作用非常重要。一名合格的UI设计师，应该能贯穿整个UI流程进行工作，而并非是单纯的图形界面设计。
第二篇：UI界面设计概念教程——从无到有界面设计畅想曲
从无到有界面设计畅想曲
版权信息：uiforce版权所有，禁止商业用途(个人可学习参考)
展现出界面设计整个流程，将概念和视觉元素通过故事串联起来，一次艰难的尝试
第三篇：qt作业：设计简单的UI界面
qt第二次作业：
1.通过qt designer设计界面如下：
2.通过槽函数实现功能，主要代码如下： dialog.h的主要部分： private slots:
void on_IconListWidget_currentRowChanged(int currentRow);
void on_sendBtn_clicked();
void on_exitBtn_clicked();
void on_boldTBtn_clicked(bool checked);
void on_italicTBtn_clicked(bool checked);
void on_underlineTBtn_clicked(bool checked);
void on_fontCbx_currentFontChanged(const QFont &f);
void on_sizeCbx_currentIndexChanged(const QString &arg1);
void on_textBtn_clicked(bool checked); void on_hindBtn_clicked(); dialog.cpp中的函数实现：
void Dialog::on_IconListWidget_currentRowChanged(int currentRow) { ui->stackedWidget->setCurrentIndex(currentRow+1); }
void Dialog::on_sendBtn_clicked() { QString input=ui->textEdit_Msg->toPlainText(); ui->textBrowser_Msg->append(input); ui->textEdit_Msg->clear(); }
void Dialog::on_exitBtn_clicked() { this->close(); }
void Dialog::on_boldTBtn_clicked(bool checked) { if(checked) ui->textEdit_Msg->setFontWeight(QFont::Bold); else
ui->textEdit_Msg->setFontWeight(QFont::Normal); ui->textEdit_Msg->setFocus(); }
void Dialog::on_italicTBtn_clicked(bool checked) { ui->textEdit_Msg->setFontItalic(checked); ui->textEdit_Msg->setFocus(); }
void Dialog::on_underlineTBtn_clicked(bool checked) { ui->textEdit_Msg->setFontUnderline(checked); ui->textEdit_Msg->setFocus(); } void Dialog::on_fontCbx_currentFontChanged(const QFont &f) { ui->textEdit_Msg->setCurrentFont(f); ui->textEdit_Msg->setFocus(); }
void Dialog::on_sizeCbx_currentIndexChanged(const QString &arg1) { ui->textEdit_Msg->setFontPointSize(arg1.toDouble()); ui->textEdit_Msg->setFocus(); }
void Dialog::on_textBtn_clicked(bool checked) { if(checked) { ui->fontCbx->setVisible(true); ui->sizeCbx->setVisible(true); ui->boldTBtn->setVisible(true); ui->italicTBtn->setVisible(true); ui->underlineTBtn->setVisible(true); } else
{ ui->fontCbx->setVisible(false); ui->sizeCbx->setVisible(false); ui->boldTBtn->setVisible(false); ui->italicTBtn->setVisible(false); ui->underlineTBtn->setVisible(false); } }
void Dialog::on_hindBtn_clicked() { if(ui->listWidget_Inf->isVisible()) ui->listWidget_Inf->setVisible(false); else
ui->listWidget_Inf->setVisible(true); } 实现结果：
1.三个用户之间切换：
2.文字输入：
3.按钮A的切换：
4.字体实现:
5.侧边栏隐藏：
6.添加备注：因为我用listwidget显示信息，直接将备注空白栏设为editable即可：
第四篇：谈网站界面设计(UI设计)-好资料免费分享
内容摘 要：
今日的网站已经不单单只是人们查询资料的工具，它已糅合了多种功能于一身，在网站为人们的学习、生活、工作、娱乐提供越来越重要的信息时，人们都它的要求也与日俱增，对界面的要求也不仅仅是停留在美观上。就此，本文在讨论一些基本的网页设计原理的同时还特别强调了UI在网页设计中的运用。
关键词： 网页 界面设计 UI 布局 色彩
绪 论
上世纪最伟大的发明莫过于互联网的发明，进入21世纪，互联网代表着一种崭新的信息交流方式，它使信息的传播突破了传统的政治、经济、地域及文化的阻隔，使信息传达的范围、速度与效率都产生了质的飞跃。如果把互联网比做一棵大树，那成千上万的网站则是组成这参天大树的枝条，而每个网站都是由诸多网页构成那么网页就是这参天大树上数不清的叶子，故网页是构成互联网的基本元素。我国这两年的网络发展非常快，每天都有数以千计的网站诞生，其中的网页数量更是成几何式的增长，然而关乎网站形象和浏览者用户体验的网站界面设计却不容乐观。除了一些大的专业网站在版面的编排上比较讲究之外，其他很少见到界面设计考究、美术创意优秀的中文网站。如何设计出美观(吸引受众眼球)的网页，如何用优秀的用户体验赢得受众的一次又一次的浏览仿佛一夜间就摆在了众设计师的案头。就此本文从以下几点讨论了关于
网站界面设计所需要重视的问题。
一、认识UI
(一)什么是 UI ：
UI的本意是用户界面，是英文User和 interface的缩写。
(二)什么是 GUI：
Graphics User Interface 图形用户界面，也就是我们今天要主要研究的东西。
(三)什么是用户界面设计：
在人和机器的互动过程中，最重要的一个方面就是我们所说的界面(。用户界面设计是屏幕产品的重要组成部分。大致界面可分为感觉(视觉、触觉、听觉等)和情感两个层次。界面设计是一个需要多方面专业知识的工作，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下;减少用户的记忆负担;保持界面的一致性。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系，所以这样可分为3个方向，他们分别是：用户研究、交互
设计、界面设计。
1.用户研究
用户研究包含两个方面：一是可用性研究，研究如何提高产品的可用性，使得网站界面的设计更容易被人接受、使用和记忆;二是通过可用性的研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法。用户研究是站在人文学科的角度来研究产品，研究用户的需要，站在用户的角度介入到产品的开发和设计中。对于设计师来说就是研究如何使自己的网站页面更收浏览者的欢迎
用户研究通过对于用户的使用环境、浏览习惯等研究，使得在网站界面设计的前期能够把用户对于网站功能的期望、对设计和外观方面的要求融入到网站的开发与设计过程中去。
2.交互设计
这部分指人与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。在使用网站的过程中最能给浏览者留下深刻印象的一定是网站的视觉因素，也就是我们所谈论的网站界面。所以，很多的网站虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，使用困难。如何使浏览者在使用网站时可以轻松自如的找到自己想要的资源，如何轻松实现网站的功能，给浏览者以愉悦的心情，拉拢浏览者下一次的登陆，这些都需要在网站的交互设计上下足工夫。
3.界面设计
在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实网站界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为网站创造卖点。如果把网站比做一个人的话，网站的后台编程好比人的骨骼与肌肉，而界面则是者个人的外表，人人都喜欢美人，同样有着良好视觉感受的网站界面也是网站拉拢人气的关键所在。网站界面是网站灵魂的外在表现，忽略网站的界面设计最终会使你的网站输在起跑线上。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的
结果，而是最终用户的感受。
(四)界面构成要素
互联网与传统媒体最大的不同就在于除了文字和图像以外，还包含声音、视频和动画等新兴多媒体元素，增加了网页界面生动性的同时也使得网页设计者需要考虑更多页面元素合理性运用。
1.文字
从网页最初的纯文字界面发展至今，文字元素作为网站内容传达的主体，文字有着其他任何元素无法取代的重要作用。首先是文字信息符合人类的阅读习惯，其次因为文字所占存取空间小，节省了下载和浏览时间。网页中的文字主要包括标题、信息、文字链接等形式。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的大小、字体、颜色和排布对页面整体设计影响极大。以文字排布为主的网页界面，只要文字排布得当，版面同样可以生动活泼，分类条例清晰，不会给人单调感觉。
2图形
在大多数网页中，图形占据了重要的位置，有的甚至是全部页面。图形往往能引起人们的注意，并激发阅读兴趣，合理的运用图形，可以生动直观、形象地表现设计主题。网页中常用的图形格式包括JPG、GIF和BMW。图形元素包括标题、背景、主图、链接图标四种。以图像作为标题和链接可以使网页具有更好的视觉效果，配合文字增强生动和形象性。主图与背景在装饰性上小有不同，背景是衬托主题，主图则是突出表现主题。主图是整个网页的视觉中心，它具有直观性强的特点，可以为单调的文字信息增强活力，不需要像文字那样去逐句阅读，可以不受文化水平的限制，能给人强烈的视觉信息。
3多媒体
随着网络硬件设备的日益完善，网页构成中的多媒体元素运用的也越来越多，主要包括音频、视频和动画。这些是界面构成中最吸引人的元素，好的多媒体元素不但可以增加网站的活力还可以有效的提高网站
与浏览者之间的互动交流。
二、网站界面布局
网页设计源于平面设计但又与平面设计有所区别不同，相同的是在设计中多运用平面构成的基本原理，不同的是它的大小比较固定，传载的媒体只限于电子显示器(包括手机、PDA等)，这样就为设计者
提出了更为苛刻的要求。
(一)页面尺寸
由于网页的浏览多是基于显示器实现的，所以显示器的分辨率就决定了网页设计者设计网站页面的大
小，目前比较流行的显示器的尺寸为
800*600、1024*76
8、1125*86
4、1280*720、1280*76
8、1280*960、1280*1024
而目前主流设计网站页面的大小一般为
600*300、760*420、995*436
有效可视区域(单位：px) 一
屏幕
800 IE6.0 779(+21) 779(+21) 783(+17) Opera9.0 781(+19)
39) 83)
461(+
119)
48)
417(+1
17)
1005(+
39)
68)
452(+1
21)
1007(+
83)
629(+1
19)
600 432(+1
21)
1003(+
48)
585(+1
17)
1261(+
9)
1024 1003(+
68)
620(+1
21)
1263(+
3)
885(+1
3768 600(+1
21)
1259(+
8)
841(+18
1280 1259(+
8)
876(+141024 856(+16
二
三
IE7.0 Firefox2.0 一般情况下宽度是一定的但页面的宽度则可以根据内容的多少而进行调整，但设计宽度始终要比显示器的实际大小窄20像素，这为的是给右侧的滚动条留有一定的空间(见图1)
(图例1)
1. 最保守而最有兼容性的一屏大小是：779×432
2. 最广泛的一屏大小是：1003×600 3. 适合目前国内的情况，一屏大小是779×600
(二)视觉顺序
网页是通过视觉元素的引人注目而实现信息内容的传达，为了使网页获得最大的视觉传达功能，使网络真正成为可读强性而且新颖的媒体，网页的设计必须适应人们视觉流向的心理和生理的特点，由此确定各种视觉构成元素之间的关系和秩序。因此，设计时应该研究各种视觉造型元素之间的距离、位置、面积和视
觉流程的问题。
视觉流程的形成是由人类的视觉特性所决定的。因为人眼晶体结构的生理构造，只能产生一个焦点，而不能同时把视线停留在两处或两处以上的地方。人们在阅读一种信息时，视觉总有一种自然的流动习惯，先看什么，后看什么，再看什么。视觉流程往往会体现出比较明显的方向感，它无形中形成一种脉络，似乎有一条线、一股气贯穿其中，使整个版面的运动趋势有一个主旋律。心理学的研究表明，在一个平面上，上半部让人轻松和自在，下半部则让人稳定和压抑。同样，平面的左半部让人轻松和自在，右半部让人稳定和压抑。所以平面的视觉影响力上方强于下方，左侧强于右侧。这样平面的上部和中上部被称为“最佳视域”，
也就是最优选的地方。
在网页设计中一些突出的信息，如主标题、每天更新的内容等通常都放在这个位置。当然视觉流程是一种感觉而非确切的数学公式，只要符合人们认识过程的心理顺序和思维发展的逻辑顺序，就可以更为灵活地运用。在网页设计中，灵活而合理地运用视觉流程和最佳视域，组织好自然流畅的视觉导向，直接影响到传播者传达信息的准确与有效性。所以在网页的编辑设计中，视觉导向是一个要点，网页的设计是一种创造，首先要立足信息的传达，但又要符合人们较为普遍的思维习惯，做到视觉流程自然、合理、畅快。成功的视觉流程安排，能使网页上的各种信息要素在一定空间内合理分布，能使页面上各信息要素的位置、间隙、大
小保持一定的节奏感和美感。
(图例2 视觉顺序)
在布局设计中多使用平面的设计规律如“九分法”等 (见图2)
(三)布局步骤
1. 草图
这时设计师面对的是一张白纸，要做的就是简单的用画笔在纸上将创意的大致轮廓画在纸上，以便给
以后的设计做大致的指导。
2. 粗略布局
将纸上的轮廓在电脑上体现出来，对画面进行分割，也可以用色块进行填充，确定好在什么地方布置
什么栏目，他们的大小等。(见图例4)
(图例4)
3. 将布局细化
将粗略的布局进行细化，使色彩，LOGO，导航条等实现，一般用的工具多为PHOTOSHOP和FIRE
WORKS(见图例5)
(图例5)
4. 点、线、面的运用
在网页设计中同样离不开平面设计中最基本的点、线、面的运用
4.1点的运用 在内容繁杂的网页上为了可以让浏览者更轻松的找到自己想要的信息，点的引导作用必不可少(见图
5)
(见图6)
4.2线的运用
线不但起到了页面的分割作用，很好的运用线条还使网页锦上添花(见图7)
(图例7)
5.布局的原则
屏幕布局因功能不同考虑的侧重点不同。各功能区要重点突出，功能明显。无论哪一种功能设计，其
屏幕布局都应遵循如下五项原则：
平衡原则。注意屏幕上下左右平衡。不要堆挤数据，过分拥挤的显示也会产生视觉疲和接收错误。
预期原则。屏幕上所有对象，如窗口、按钮、菜单等处理应一致化，使对象的动作可预期。
经济原则。即在提供足够的信息量的同时还要注意简明，清昕。特别是媒体，要运用好媒体选择
原则。
顺序原则。对象显示的顺序应依需要排列。通常应最先出现对话，然后通过对话将系统分段实现。
规则化。画面应对称，显示命令、对话及提示行在一个应用系统的设计中尽量统一规范。
三、 色彩在设计中的运用
(一)色彩的常识
最基本的有三种(红，黄，蓝)，其它的色彩都可以由这三种色彩调和而成。我们称这三种色彩为“三原色”。 黑白灰属于非彩色系列。其它的色彩都属于彩色。任何一种彩色具备三个特征：明度、纯度和
色相，其中非彩色只有明度属性。
明度，也叫亮度指的是色彩的明暗程度的大小，明度越大，色彩越发亮。比如一些购物，儿童类网站。用的是一些鲜亮的颜色，让人感觉绚丽多姿，生气勃勃。明度越低，颜色越暗。主要用于一些游戏类网站，充满神秘感;一些个人站长为了体现自身的个性，也可以运用一些暗色调来表达个人的一些孤僻，或者忧郁等性格。有明度差的色彩更容易调和。如紫色(#993399)跟黄色(#ffff00)，暗红(#cc3300)跟草绿(#99cc00)，暗蓝(#0066cc)跟橙色(#ff9933)等。
纯度，指色彩的鲜艳程度，纯度高的色彩纯，鲜亮。儿童、动漫、时尚、购物等多用亮色调，给人以活泼、明朗、大方特点，纯度底的色彩暗淡，含灰色。多用于艺术、科技等技术含量高的领域，给人以深远、
稳重之感。
色相，指的是色彩的名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。比如说红色，绿色，蓝色等等都代表了不同的色相。同一色相的色彩，调整一下亮度，或者纯度很容易搭配，
比如，深红，暗暗，桃红等。
暖色，暖色跟黑色调和可以达到很好的效果。暖色一般应用于购物类网站，电子商务网站，儿童类网站等等，用以体现商品的琳琅满目，儿童类网站的活泼，温馨等等效果。
冷色，冷色一般跟白色调和可以达到一种很好的效果。冷色一般应用于一些高科技，游戏类网站，主要表达严肃，稳重等效果，绿色，蓝色，蓝紫色等等都属于冷色系列。
相近色：色环中相邻的三种颜色。相近色的搭配给人的视觉效果很舒适，很自然。所以相近色在网站
设计中极为常用。
互补色，色环中相对的两种色彩。对互补色，调整一下补色的亮度，有时候是一种很好的搭配。
色彩均衡，网站让人看上去舒适，协调，除了文字，图片等内容的合理排版，色彩的均衡也是相当重要的一个部分。比如一个网站不可能单一的运用一种颜色，所以色彩的均衡问题是设计者必须要考虑的问题。色彩的均衡，包括色彩的位置，每种色彩所占的比例，面积等等。比如鲜艳明亮的色彩面积应小一点，让人感觉舒适，不刺眼。这就是一种均衡的色彩搭配。
(二)色彩的运用
蓝色是现代商务领域的流行色，也是最“安全”的WEB流行色。如果设计师对自己控制色彩的能力没有太大把握，那么使用蓝色是最好的选择。蓝色受设备偏色的影响最小。 红色既可以象征着热血、激情、冲动、勇气与力量也可以象征恐怖与暴力，在主要由红色构成的色彩中，有桃红色的浪漫与温馨，也有深红色的稳健与深沉，由于红色本身的亮度和饱和度都比较强，所以在与亮度和饱和度同样比较强的冷色(如蓝色绿色)相配时，中间最好能有一些过渡行的颜色。比如纯红与纯蓝搭配时可以在中间插入面积适中的白色，这样一来，页面中各视觉元素之间的冲突就不会那么强烈。 黄色是一种非常难以驾驭的颜色，同一种黄色与其他颜色搭配在不同的环境下表现出的视觉和心理效应往往会有很大差异，同样的黄色既可以在某个环境中表现出热情奔放的一面也可以在另一种环境中表现出
阴险狡诈的一面。
绿色由于自身很难与其他颜色搭配，所以是网页设计中比较少用的颜色，在以绿色为主的优秀网页设
计中大多会有橙色的参与。
橙色是朝阳的颜色也是柑橘的颜色，橙色象征着快乐、温馨、时尚和动感。橙色有红色热情奔放的特点，但又不像红色那么鲜艳和夺目;橙色有黄色敏快和爽朗的一面但又不像黄色那么容易产生平庸的感觉，大面积使用橙色的网页，可以让人感觉到扑面而来的温暖与活力。另一方面，网页设计师们越来越喜欢在白色、绿色、蓝色、灰色、黑色的网页中使用小巧而醒目的橙色元素，比如，橙色的小箭头、小按钮等元素，
这种设计可以非常有效的吸引浏览者的注意力。
紫色与红色蓝色在色调上有着近似的关系，与黄色、绿色、橙色等可以形成鲜明的对比，深紫色适于表现幽雅、神秘、忧郁等主题，浅紫色则适于表现浪漫温馨等主题。
(三)确定网站的主题色
一个网站不可能单一的运用一种颜色，让人感觉单调，乏味;但是也不可能将所有的颜色都运用到网站中，让人感觉轻浮，花俏。一个网站必须有一种或两种主题色，不至于让客户迷失方向，也不到于单调，乏味。所以确定网站的主题色也是设计者必须考虑的问题之一。
一个页面尽量不要超过4种色彩，用太多的色彩让人没有方向，没有侧重。当主题色确定好以后，考虑其它配色时，一定要考虑其它配色与主题色的关系，要体现什么样的效果。另外哪种因素占主要地位，
是明度，纯度还是色相。
(四)色彩的搭配
在学习了解了色彩的一些基本概念及色彩的一些搭配问题，具体运用到网页中，各要素的色彩又
是如何搭配的呢?
1、网页标题
网页标题是网站的指航标，浏览者要在网页间跳转，要了解网站的结构，网站的内容，都必须通过导航或者页面中的一些小标题。所以我们可以使用稍微具有跳跃性的色彩，吸引浏览者的视线，让他们感觉网站清晰、明了，层次分明。想往哪里走都不会迷失方向。
2、网页链接
一个网站是由许多页面组成的，实现网页间相互跳转的就是网页的链接，所以文字与图片的链接是网站中不可缺少的一部分。这里特别指出文字的链接，因为链接区别于文字，所以链接的颜色不能跟文字的颜色一样。大多数浏览者不会花太多的时间用在寻找网站的链接上。设置了独特的链接颜色，让人感觉他的独特性，自然而然好奇心必然趋使他移动鼠标，点击鼠标。
3、网页文字
多数网站都会运用背景颜色，这就要求设计者考虑到背景颜色的用色，以及前景文字的搭配等问题。一般的网站侧重的是文字，所以背景可以选择纯度或者明度较低的色彩，文字用较为突出的亮色。让人
一目了然。
4、网页标志
网页标志是宣传网站最重要的部分之一，所以这两个部分一定要在页面上突迎而出。怎样做到这一点呢?我们将LOGO和BANNER做的鲜亮一些，也就是色彩方面跟网页的主题色分离开来。有时候为了
更突出，也可以使用与主题色相反的颜色。
5、网页的留白
中国的书法讲究留白，好的留白的运用可以带给浏览者对画面的联想，更为重要的一点就是，在网站使用中浏览者通常会划动鼠标来快速浏览页面，如果没有留白，浏览者很可能会误点链接，给浏览带来不便。
为了能让自己的网页设计得更靓丽、更舒适，为了增强你的页面的可阅读性，必须合理，恰当地
运用与搭配页面各要素间的色彩!
综上所述，我们了解到网站的界面不单单是美工设计那么简单，它包括了心理学，生理学，平面构成，色彩构成等多方向的知识，只有了解并可以很好的运用这些知识，我们设计出的网站才能更好的为受众服务。
第五篇：员工试用期自评总结-UI界面设计师试用期自评总结
员工试用期自评总结
转眼间试用期已接近尾声。首先感谢公司能给我展示才能、实现自身价值的机会，感谢领导和同事对我的关怀、支持和帮助。进入公司的三个月时间里，在领导和同事们的悉心关怀和指导协助下，和自身的不懈努力，使我在较短的时间内适应了公司的工作环境，也熟悉了公司的工作流程，现在基本能完成各项分配到的工作;同时让我体会到了同事的团结向上的精神以及和睦大家庭的感觉。对公司文化有了更深的了解，看到公司的发展，我深深地感到骄傲和自豪，也更加迫切的希望以一名正式员工的身份在这里工作。
我于**年**月**日成为公司的试用员工，安排在技术研发中心担任UI界面设计一职，现将我的工作情况分为三个阶段来总结如下汇报：
一、萌芽阶段
记得初次应聘时，我对公司的认识仅仅局限于****行业之一，对UI设计师一职的认识也局限于从事相对单纯的界面的设计创意和美术执行工作。除此之外，便一无所知了。所以，试用期中如何去认识、了解并熟悉自己所从事的行业，便成了我的当务之急。
初到公司时，交到我手里的第一份工作就是”*****”***的修改，然而说来惭愧的是，因为对于整个项目的不熟悉，导致来回做了三个版本的修改设计，然而反复的修改和等待同事意见的回复对我来说，既新鲜也处处存在挑战。不懂就学，是一切进步取得的前提和基础。在这段时间里我认真学习和认识了公司相关资料，并且对公司以前的、现在的相关的项目的界面设计和业务情况都有了比较初步的了解，(这里特别的感谢我们的**、**、**、**，还有和我一样新到公司不久的***，谢谢你们对我的帮助和关心)。再加上《新员工培训》 、 《春季员工活动》和《****》的学习，以及日常工作积累使我对公司有了较为深刻的认识，也意识到了公司在***行业举足轻重的地位，和他的发展对于推动整个***行业的发展有着巨大作用。同时，公司拥有比较好的管理体制和企业化标准运作的行政机构。这一切都让我对公司的发展充满了信心和憧憬。
二、成长阶段
认真学习岗位职能，工作能力得到了一定的提高。
(一)根据岗位职责的要求，我的试用期主要工作内容是：
(1)负责公司各项软件产品进行UI设计，包括网站页面、客户端人机交互以及应用程序界面;
(2)配合开发工程师进行软件的框架、原型开发; (3)产品提出用户界面和用户体验方面的合理建议 (4)负责完成领导分配下来的设计工作指令; (5)参与相关广告创意的讨论; (6)领导交办的其他工作;
工作之余多看一些同行业界面设计和学习其他相关设计内容，让自己更好的完成职内的设计，及时提交日工作汇总、工作周报、每周末总结汇总并提交下周计划，及时总结自己的工作，更好完成界面设计工作。
(二)试用期的主要工作业绩： (1) (2) (3) (4) (5) (6)
在工作中不断的熟悉软件业务流程和熟悉软件产品、学习软件界面设计、遇到问题，及时反馈，积极配合开发工程师进行软件的框架的研发等，及时解决遇到的相关问题，能够按时完成下发的任务。
(三)试用期中存在的问题：
(1)对于业务知识的掌握还不扎实;
(2)还需要学习其他模块的知识，而不是仅仅局限在自己的模块;
(四)工作改进建议
(1)在平时多参加公司组织的培训，补充自己在其他模块的不足; (2)多和同事沟通，分享工作经验，了解自己工作的不足，取长补短;
三、成熟阶段
进入公司以后，我得到了领导和同事在工作上和生活上的全方位关怀，免除了在外地工作的后顾之忧。在领导同事们的关怀与培养下，我认真学习、努力工作，积极的完成领导交付的工作。同时，我也注重自身发展和进步，不断的学习新知识、新技能，提高自己的综合素质。但我也存在许多的缺点和不足：在日常工作中有时考虑不周全，对工作的预见性和创造性不够，但这些缺点和不足，在以后的工作中，我会多多向我的领导和同事学习的，逐渐的改掉这些缺点，注重锻炼自己的口才交际、应变、创造组织能力，不断在工作中学习、进取、完善自己。
在此，我想借此机会，正式向公司领导提出转正申请，希望公司领导能对我的工作态度，能力和表现，以正式员工的要求做一个全面的考量。同时也非常的感谢公司的领导对我、的信任和支持。 在以后的工作中我会与人为善，对工作力求完美，不断的提升自己的专业水平及综合素质，以期为公司的发展尽自己的一份力量。
此致
敬礼
申请人：** **年*月*日
点击下载文档文档为doc格式