UI用户界面设计课程设计报告

UI用户界面设计课程设计报告（精选8篇）

UI用户界面设计课程设计报告 第1篇

UI用户界面设计 大作业课程设计报告

题 目：依依旅行系统前台应用及后台管理院 别：专 业：学生姓名：指导教师：成 绩：

信息与控制学院

计算机科学与技术 120210137宋依依

孙丽云

2015年 6 月 12 日

一、系统概述 1.1课程设计题目：

依依旅行系统前台及后台管理

1.2 课程设计运行环境：

1.2.1前台开发工具：

Java，MyEclipse6.5，Tomcat5.x 1.2.2后台开发工具：

Microsoft SQL Server 2008 1.2.2系统运行结果工具：

360安全浏览器7.1 1.3 课程设计实现技术：

基于HTML，CSS，JSP等技术的应用

二、依依旅行系统需求分析

2.1 系统功能需求：

系统的功能需求包括一下几个方面

（1）游客在不登录的情况下只可以进行相关旅行，车票，酒店信息的查询。（2）游客通过注册登录或者登录后，可以通过网络查询景点的信息概况和预定景点票，酒店，车票（飞机票，火车票，或者租车）。

（3）游客登录后还可以进行各种订单的退订，个人信息的修改。（4）系统管理员可以查看游客的预定请求和取消预定的请求。（5）系统管理员可以对系统的数据库进行维护，例如增加、删除和修改景点信息，增加、删除工作人员帐户，增加和删除旅行用户。

三、依依旅行系统概要分析

3.1旅游系统模块介绍

满足以上需求的管理系统主要包括以下几个模块。（1）旅游数据维护模块

基本数据维护模块提供了使用者录入、修改并维护基本数据的途径。例如对游客及导游及工作人员各项信息的更新和修改。（2）旅游业务模块

基本业务模块主要用于实现游客查询景点信息和预定的管理，可以登陆系统预定景点游票和导游预定，工作人员可以处理预定信息和取消预定信息等操作。

（3）数据库管理模块

在系统中，所有景点信息以及工作人员和导游的帐户信息都要进行统一管理，景点的使用情况和预定情况也要进行详细的记录，要用统一的数据库平台进行管理。（4）旅游信息查询模块

信息查询模块主要用于查询景点的信息和游客的预定信息。下图所示表示了旅游开发管理系统的功能需求：

3.2旅游数据维护模块

数据维护模块包括如下图所示的几个方面：

（1）修改更新景点信息：系统管理员可以更新和修改景点信息。（2）更新和修改信息：系统管理员可以更新和修改旅游景点和酒店出行，删除游客的信息。

（3）添加景点信息：系统管理员可以添加景点及景点信息。（4）删除景点信息：系统管理员可以删除景点及景点信息。

3.3旅游业务模块

旅游业务模块包括一下几个方面：

（1）注册登陆后，更改个人信息

（2）查询信息：游客查询景点使用信息及景点概括信息。（3）预定取消景点：游客预定景点票。

（4）酒店预订：游客可一根据情况预定酒店。

（5）出行方式：游客可以根据自己的情况选择出行方式。

3.4数据库管理模块

数据库模块包括一下一个方面：

（1）游客信息管理：信息包括游客的姓名，电话号码，及联系方式等。（2）景点信息管理：景点信息包括景点的名称，代号，概况等。（3）酒店信息管理：包括酒店名称，地址，规格等。

（4）出行信息管理：出行方式，火车票，租车信息等。（5）预定信息管理：景点票，酒店，车票信息。

四、依依旅行系统数据分析

4.1管理员信息表

4.2用户信息表

4.3景点信息表

4.4酒店信息表

4.5火车票信息表

4.6飞机票信息表

4.7租车信息表

4.8用户支付信息表

4.9常用游客信息表

4.10游客常用地址信息表

4.11景点订单信息表

4.12火车票订单信息表

4.13飞机票订单信息表

4.14租车订单信息表

4.15酒店订单信息表

4.16用户评论信息表

五、依依旅行系统的前台实现过程

5.1依依旅行系统首页

注：此时因系统未登录，所以只可以查看详情，若进入景点点击预定和留言或者点击出行方式和酒店预订则跳转到5.2登录界面

5.2依依旅行系统登录界面

当输入用户不存在时跳转到

当输入用户存在，密码输入有误时跳转到

当输入用户存在，密码正确时跳转到5.3

5.3依依旅行系统登录界面

若及点击退出则回到5.1首页界面。

5.4依依旅行系统注册界面 第一步：输入用户名，当用户名已存在时

当用户名不存在时

当密码两遍输入不相同时

当密码两遍输入相同时

5.5依依旅行系统修改个人信息界面

点击修改

修改后点击保存

5.6依依旅行系统修改个人密码界面

当前密码输入有误时：

新密码两遍输入不同时：

新密码两遍输入都正确时时：

5.7依依旅行系统常用游客信息界面

添加游客

5.8依依旅行系统支付信息界面

5.9依依旅行系统订单信息界面 景点订单信息

火车票订单信息

飞机票订单信息

租车订单信息

酒店订单信息

分别可以进行取消订单操作

5.10依依旅行系统预订信息界面 可以选择出行日期，出行人数

点击预订后对信息进行确认，并计算总价格

若积分大于总价格：预订成功

若积分小于于总价格：

5.11依依旅行系统出行方式界面 火车票

飞机票

租车

分别可进行预订

积分充足，与积分不足的情况同景点预订 剩余票数不足时：

5.12依依旅行系统酒店预订界面

5.13依依旅行系统退出界面

若及点击退出则回到5.1首页界面。

六、依依旅行系统的后台实现过程

6.1依依旅行系统管理员登录界面

注：管理员没有注册功能

管理员名称不存在或密码输入有误时情况与用户登录相同 6.2依依旅行系统管理员所有管理员界面

6.2依依旅行系统所有用户界面

可进行删除操作，提示操作人为当前用户指明操作人的操作成功

6.3依依旅行系统管理员所有景点信息界面

可对其进行添加，修改和删除操作

6.4依依旅行系统出行界面 飞机票信息

火车票信息

租车信息

6.5依依旅行系统用户订单信息界面 景点订单信息

飞机票订单信息

火车票订单信息

租车订单信息

酒店订单信息

6.6依依旅行系统管理员信息修改界面

七、依依旅行系统的总结

通过本次课程设计，对JAVA编程，WEB网页制作以及数据库设计有了更深刻的认识和学习到了更多细小的知识点，遇到难题，通过小组讨论以及在网上对相关资料的查询得到了有效的解决办法、本来这门课的知识学的就不够扎实，本次课程设计，在设计过程中碰到了很多问题，刚开始要设计的时候，还真不知道从哪里下手但最终在图书、同学和老师的帮助下都得到了解决，让我学会了好多书本上没有的东西，最重要的是知道了自己动手的不易，也知道了只要动手做就一定会得到收获！

一分耕耘一分收获！

UI用户界面设计课程设计报告 第2篇

一、题目要求

1、每人为班级设计一个网站首页。

2、如果出现两人雷同，两人都以“0分”计算。

3、首页以psd格式保存。

4、将自己设计的班级首页转成html网页文件保存。

5、完成大作业报告并打印。

说明：最后上交的内容有“.psd”的原图、“.jpg”的效果图、“.html”的网页文件、“.doc”的电子版大作业报告以及打印好的大作业报告。

二、网站首页设计要求

1、首页中要包含班级的logo。（logo自己设计）

2、首页中要包含班级的名称。

3、首页中要包含导航栏。（导航的个数最少5个）

4、首页中要包含自己制作的按钮和处理的图片。

5、首页中要包含版权。（制作人名称、班级）

6、首页的颜色要和谐美观。

7、首页的布局要清晰合理。

三、大作业报告格式的要求

1、使用统一的封皮。

2、使用B5纸打印。

3、报告中主要写制作过程，类似书上每章的实例制作步骤。

4、报告中文字要求，字体“宋体”、字号“小四”。

5、报告中每行文字之间的行间距为“1.5倍行间距”。

6、报告中每段文字前后段间距都为“0”。

7、报告中的每张帖图都要有标号和名称，格式为“宋体、小五”，段前段后都是“0.5倍行间距”。

8、报告中的贴图大小都调整到“高度6厘米，宽度8厘米”。

9、报告中不要出现大段空白。

10、报告中除封皮以外，都要有页码。

四、大作业报告内容要求

大作业报告中要涵盖三方面的内容，如下所示：

1、设计说明

主要叙述，颜色的选取以及页面的布局情况。

2、制作步骤

1）背景的制作

2）logo的制作

3）导航的制作

4）其他板块的制作

5）结果图

UI用户界面设计课程设计报告 第3篇

互联网时代推动了产业的升级及转型,颠覆了用户对传统行业的认知,迸发出新鲜的活力与新颖的创造力。用户通过互联网获取信息比以往更便利,而转化信息语言的中介,就是我们常说的“界面”。

用户界面设计(User Interface Design,简称UI)是20世纪90年代以来现代艺术设计领域中出现的新设计门类,其集心理学、设计学、语言学等知识体系一体,而人机交互、操作逻辑、界面美观互动创意等都可以在教学设计中体现,具有实时性与独立性:实时性体现在于,信息化的快速迭代,知识时时更新,时时淘汰,UI设计课程的系统化、规范化有待探索,这对现在从事UI教学的教师,具有紧迫的使命感;独立性又体现在于,它有自身的思维体系,交互方式、视觉逻辑、认知与感知等,教授方式与传统艺术设计专业不同,而社会对于UI设计从业者更倾向于“全栈设计师”,即有自主性、参与项目进行跨界工作,这在现当代高校教育教学方向,具有现实意义的挑战。

二、教学现状

以本校为例,UI界面设计课程单纯以每周4节课时,72个学分一学期来授课,只能浅而薄,课程的安排一周一次,并无法深入开展课堂的项目实践。

第一,课时与学分的限制,使得课程单薄无力。对UI设计课程的概念理解缺失,教学方式就会停留在传统的教授软件的课程设计;之前的课程过于强调视觉设计能力,忽略前期策划、产品定位、原型设计、交互方式、用户体验等相关概念的导入。也有一方面原因是限制于课堂的人数多,学时少,上课频率的等等问题,少了课堂讨论及辅导的重要环节,对UI知识的理解只停留在表面;

第二,教学资源的选择与讲解,需紧跟随行业更新。作为新兴学科,该课程较少有科学、完整的教材,我认为理论认知、专业技能、项目设计应为一体,目前比较多如UI中国、36氪网站有新鲜的行业资讯,业界名博如腾讯、百度提供的项目经验具有参考价值,但缺点是多而杂。作为有企业项目实战经验的教师,才能更好将知识与项目经验结合,从而梳理脉络,循序渐进的引导学生建立团队,运用创业或创新的训练方式去实践创意。

三、教学改革与实践

创意与创新,是互联网时代的热门词。互联网+”行动计划由李克强总理提出:加快推动互联网与各领域深入融合和创新发展,要全面深化高校创新创业教育改革的目标要求。高校是“大众创业、万众创新”的主阵地,大学生是“互联网+”行动的领跑者,这对UI界面设计课程改革来说是一个很好的大环境前提,在教学改革中结合“互联网+”的趋势,融入广东省大学生创新创业的训练项目,课堂提供给设计专业的学生一个平台,他们历经团队建立、提案、设计、路演。中山大学南方学院自2015年秋季开始推行“学分制”的教育改革,其中“小班制”给在校学生提供更多开放学习机会,以UI界面设计课程改教为例,体现在以下几个方面:

优势之一:小班教学,自由度高、自主性强。学分制开放了整个设计专业学生的选课权利,学生自主选择想修的模块进入小班制教学,自主的学习态度让课程前期进入相对顺利。告别的传统的授课模式,现反转课堂,引导学生在设计APP的课堂过程中“发现问题——分析问题——提出解决方案”。教师在其中的角色是“穿针引线”,将理论知识“揉碎”渗入团队项目中去讲解,而设计思维始终贯穿整个项目,充分指导学生,学生在团队中的自由讨论、表达、疑问都能直接快速反馈,“小班制”的教学优势在此明显体现。

优势之二:UI模块集中训练,系统训练项目。本次教改重点是“以项目去驱动团队”的教学实践,学习方式从“被动吸收”转为“自主获取”,教学目标从“个人学习”扩大为“团队进取”。项目每6人为一团队,分别扮演产品经理、用户调研、交互设计师、视觉设计师,“小班制”的教学模式中,他们完成了课下市场调研,课上竞品分析;课下用户访谈,课上用户角色模拟;课上完善APP产品功能选择、信息架构图,课下完成原型设计。团队协作、思考与互相激发,通过模拟商业路演的形式进行项目汇报。

优势之三:引入“互联网+”的理念,启发创新创业新思维。每个学生都有创新的提议,甚至可能落地实现;而每个学生有自己的“工作角色”,二者结合便可充分调动学习的热情。比如在调研大学生记账行为中,有个团队了解到现在的记账软件中只有文字、图形记账,手动输入,通过用户人群分析大学生的痛点是对钱的概念薄弱、记账糊涂、分类混乱,在竞品分析之后确定创新设计的方向是:基于地理位置进行LBS记账、语音记账,扫码摄像记账,于是诞生了MOA地图记账APP,最后使用POP手机模拟实现操作,该项目被推荐为2016年广东省大学生创新创业国家级项目课题;另一团队在调研运动健身类APP,了解到现在的应用中社交方式比较少,于是策划游戏健身PK策略激励用户线上互相监督运动,诞生了RUNNER健身类APP,该项目被推荐为2016年广东省大学生创新创业项目省级项目课题。从2015年至今,在教学改革过程中已诞生7个省级的创新课题,1个国家级创新课题,成绩乐观。

UI设计中用户体验的研究 第4篇

关键词：UI设计；用户；体验；研究；完善

“用户体验”这个词出现在上世纪90年代，被一个叫作唐纳德·诺曼的设计师提出并且推广，他曾任苹果计算机公司先进技术部副总裁。苹果通过自己的产品把诺曼的“用户体验”思想推广到全世界。

从这里看来用户体验实际上最早来自于对于用户心理的揣摩。所以，我们是否可以这样认为：要做到最精致的用户体验，我们更应该把关注点放在用户体验背后的用户心理，而不是用户体验的方法论本身。

1 UI设计的现状

在“互联网+”时代带来的大发展时，部分企业就看出，一切以用户为王，依托互联网，完善发展模式是联系与用户之间关系的最好路径，而UI设计首当其选。就UI设计的发展特点来看，UI设计依托互联网技术，依据用户体验，不断改善界面整体美观度，一切以用户需求、习惯出发，来吸引用户对企业的关注度，从而为企业赢得更大的市场占有率。而另一方面，企业所需要的UI设计人才需大于求，社会根本无法满足企业的用人需求，从而也促使了UI设计水涨船高，薪资待遇、发展前景等优于其他技术岗位，越来越多的人也开始关注UI设计的发展，纷纷投身于UI设计领域。

无论是建筑领域的设计，还是互联网产品的UI设计，或者家居设计，他们最终的目的是让人们舒服，赶走污染眼睛的东西。所以很多程序员把UI设计的人直接认为成是美工，笔者认为极其荒唐，他们实际是一群把美丽的东西带到人类眼前的精灵，他们是帮助人们赶走视觉污染物的医生，除了美工，他们更懂心理、人性、艺术、逻辑和生活。

2 UI设计中用户体验的关键

在UI设计中，我们不断强调用户体验，但究竟用户体验要怎么实现？好的交互设计吗？好的视觉体验吗？不，这些远远不够！用户体验的本质就是用户需求得到满足。用户需求的满足是一个完整的过程，包含多个环节，对应的，每个环节都对应该环节的用户体验。产品交互体验，只是其中一部分（可能渗透在多个环节中）。不同环节的用户体验权重是不同的，核心环节的用户体验，决定了这个产品综合用户体验。一个好的产品，可能很多细节体验都很差，但只要核心体验有保障就会是一个成功的产品。用户体验这个事情，是有个体差异的，如果单独从某个用户的角度，用户体验往往没有绝对的好坏标准。

2.1 满足需求是保证优秀用户体验的第一步

没有哪个成功的产品是单靠用户体验而走向成功的，用户体验一定是附着于满足需求之上。很多人说网易云音乐听的产品体验很好，UI很好看，但有没有想过它为什么能在短短的时间内挤进主流音乐APP的市场。记得音视频的品质在12年之前是很少被人重视的，视频也远远没有普及720P、1080P的概念。但此时高保真，蓝光高清却作为一种小众需求存在着。直到近两年高品质的音视频才普及并进入了大众眼前，云音乐正是在借着这样的势，通过提供超全的曲库与高品质音乐，满足了那些追求高品质音乐与小众音乐的群体。在满足基本的高品质音乐与曲库的基础上，又通过与DJ合作录制电台节目，邀请音乐爱好者制作歌单，慢慢巩固自己的调性，形成自己的好体验。

2.2 用户需求是完整的服务体验过程

用户需求的满足是一个完整的过程，包含多个环节，对应的，每个环节都对应该环节的用户体验。产品交互体验，只是其中一部分。比如有公司做O2O社区平台，主要针对没有网购习惯的一群人，他们没有银行卡，网银、支付宝，甚至手机诺记功能机。针对目标用户在商品结算上，其解决方式是与社区物业或便利店合作，向该社区部署终端设备，该设备由社区合作人员经营，经营利润所得会与经营者进行“分账”。

通过社区让目标用户用电子商务的购物方式，让面对面交易现金成为可能。就这一点而言，我们对这群目标用户提供了比淘宝、京东更好的“体验”。但你知道，体验是全流程的体验，并不只在一个点上。拼物流，京东做的绝对够好够快；拼流畅，十多年的淘宝告诉你一气呵成的购物体验是什么。如果只有单点的体验好，是称不上多么好的用户体验的。

2.3 产品使用感觉与情感化设计

一个产品满足了你的需求，且易用，易学，使用流畅就是好体验了？想一想那些让你记住并喜欢上的产品，是否都有一个小小的点深深地让你感动了一下？那些一个个充满情怀的点，就是产品的情感化设计。只有当产品触及用户的内心时，使他产生情感的变化，那么产品便不再冷冰冰，他透过眼前的东西，看到的是设计师为了他的使用体验，对每一个魔鬼细节的用心琢磨，即便是批量生产也依然有量身定制的感觉。例如一款To do list产品，如果你把一天的待办事项都消除掉，在页面上会写上“忙了一天，现在休息一下吧”。这种传递情感的细节不仅可以增加用户对产品的好感度，更可以让产品更加深入人心，利于产品口碑的传播，有时候可能仅仅一句文案，一个动画，一个彩蛋都可以打动用户，使其与产品产生情感上的共鸣，这便是产品细节中的情感化设计的作用。

2.4 人机交互

人机交互是一个很大的课题，它不仅涉及计算机领域，还相关联到心理学、社会学等科学。所以，在设计产品的时候永远要记得，产品缔造者需要与用户沟通说话，所以UI才很重要；在宣传产品的时候，营销人员要与用户探讨生活与工作真实的麻烦，所以用心沟通很重要；在教育用户使用产品时，你就是一个老师，你要循序渐进指导，所以导航指南设计很关键。这一切统一起来，叫作我们常挂在嘴边的“人性化”。

3 结语

综上所述，在UI设计工作中，用户体验是一个重要的内容，这就需要我们充分地了解用户体验，多方面综合提高UI设计人性化和可操作性，推动UI设计的发展。

参考文献：

[1]屠秀栋.浅谈UI设计[J].电脑知识与技术，2010，07.

[2]冯奇辉.UI设计理念变革探索研究[D].东北师范大学，2014.

qt作业：设计简单的UI界面 第5篇

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.侧边栏隐藏：

UI界面设计需要遵循哪些规范？ 第6篇

无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致，这样得到的好处：

1：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解

2：降低培训、支持成本，支持人员不会行费力逐个指导。

3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加

做法：

项目组有经验人士，确立UI规范：

美工提供色调配色方案，提供整体配色表

界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范：

控件功能遵循行业标准，windows平台参见《Microsoft用户体验》(MSDN中有，中文已经翻译发行，项目组必须有一本)

控件样式在允许的范围内可以统一修改其样式、色调

参考其他软件先进操作，提取对本项目有用的功能，以使用，绝对不能盲从，漫无目的。

根据需要，设计特殊操作控件，准则为：简化操作、达到一定功能目的

界面实施人员与美工商榷控件可实现性,(如不实行此步骤，将会导致各自对对方工作不满意，也会产生不一致的混乱)。重复叠代上述工作。

建立合理化文档《UI标准》描述上述规范，

强行界面设计者理解之，并作为开发准则，

SQA人员进行监控开发人员是否遵循，及时告诫开发人员。

二：(Color)颜色使用恰当，遵循对比原则：

1：统一色调，针对软件类型以及用户工作环境选择恰当色调：

如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等

2：如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表

3：色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，?quot;!，?着重号，以及图标等

4：颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试

5：遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。6：整个界面色彩尽量少的使用类别不同的颜色

itop色表

具体标准参考美术学统计学术标准。色表的建设，对于美工在图案设计、包装设计上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。

三：(Resource)资源

一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、底图等。

1：也需要遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能的形成标准，参考itop的outlookbar图标设计标准

2：有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及图片风格

3：底图应该融于底图，使用浅色,低对比，尽量少的使用颜色。

4：图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出默认奇妙的图案。

5：鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个手的形状就有4钟不同的样子。

如：《如何创建XP图标》www.microsoft.com/china/msdn/library/dnwxp/html/winxpicons.asp

附件：Itopoutlookhowto.doc描述itop项目中，outlookxp风格图标的制作方法

四：(Font)字体

使用统一字体，字体标准的选择依据操作系统类型决定。

中文采用标准字体，“宋体”，英文采用标准MicrosoftSansSerif不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。

字体大小根据系统标准字体来，例如MSS字体8磅，宋体的小五号字(9磅)五号字(10.5磅)。

所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况

ITop采用BCB，所有控件默认使用parentfont，不允许修改，这样有利于统一调整。

系统大小字体属性改变的处理。

Windows系统有个桌面设置，设置大字体属性，很多界面设计者常常为这个恼火，如果设计时遵循微软的标准，全部使用相对大小作为控件的大小设置，当切换大小字体的时候，相对不会有什么特殊问题。

但是由于常常方便使用点阵作为窗口设计单位，导致改变大字体后，出现版面混乱的问题。

这个情况下，应该做相应处理：

1：写程序自动调节大小，点阵值乘以一个相应比例

2：全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多采用这种方法，但是必然结果是和系统不统一。

五：(Text)文字表达

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

1：口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字

2：断句逗号句号顿号分号的用法，提示信息比较多的话，应该分段，

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

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

5:根据用户不同采用相应的词语语气语调，如专用软件，可以出现很多专业属于，用户为儿童：这可以语气亲切和蔼，老年用户则应该成熟稳重。制定标准遵循之。

六：(STYLE)控件风格，不要使用错误控件，控件功能要专一

有设计好的同一风格的控件，如果没有能力设计出一套控件，则使用标准控件，绝对不能不伦不类，杂乱无章

不要错误使用控件，例如：

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

统一类型的控件操作方式相同，例如一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映

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

很多人为了写程序方便，喜欢把一个控件在不同情况下做不同功能用，这些对用户初次理解增加难度，只有用户熟悉后才能理解。例如

改变红色选项，左边的参数代表不同的设置，可能由于为了节省控件或者编程量，但是只有熟练用户才回使用，这种情况下解决方法：

1:分组，使用双份控件.

2：使用TABLE页，给用户很明显的视觉变化

七：(ALIGN)控件布局，窗口不拥挤，按功能组合控件

1：屏幕不能拥挤

拥挤的屏幕让人难以理解，因而难以使用，

试验结果(Mayhew,1992年)屏幕总体覆盖度不应该超过40%，而分组钟覆盖度不应该超过62%。

让人看上去，不能太拥挤，也不能太松散。

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

2：区域排列

一行控件，纵向中对齐,控件间距基本保持一致

行与行之间间距相同，靠窗体Border距离应大于行间间距(间距加边缘留空)。

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

3：数据对齐要适当

说明文字，中文版应使用中文全角冒号，纵向对齐时，并按冒号右对其，如图。纵向控件宽度尽量保持相通。并左对齐。

例如金额等字符穿应根据小数点对齐，或者右对齐

4：有效组合

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

例如：以下界面，选择搜索方式来判断号码范围是表示主叫号码范围还是被叫号码范围，和入帐方式无关，

则应该修改为：搜索方式和入帐方式调换位置。以免用户产生误解。

5：窗口缩放时，控件位置、布局：

为了使界面不出现跑版或者难看的局面，解决方法：

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

2：改变尺寸的窗口，在Onsize的时候做控件位置、大小的相应改变。

BCB/DELPHI的VCL中，大部分控件有布局属性：

某些控件拥有alignment属性，可以用来做布局调节：TcustomPanel，Tmemo等，考左靠右靠上靠下以及撑满(Client)属性，用来根据版面自动调节。

大部分控件有属性Anchors，里面上下左右akLeft,akTop等如果为true，则表示相对各个边缘的距离是否改变。这个可以进一步设计好排版工作。

八：(TABORDER)TAB顺序

习惯用法，阅读顺序，从从左到右，从上到下

窗体中控件的Tab按键激活顺序，TabOrder,.BCB/DELPHI中使用窗体设计右键菜单选择taborder设置，VC中窗体RES编辑区域使用ctrl+D

九：(ShortcutKey&Accelerator&PopMenu)快捷键、加速键和弹出菜单

快捷键：

1：全局快捷键菜单中加以描述CTRL+XXX并入帮助列表。

2：快捷键写入帮助，特殊说明，并在使用培训时强调使用

加速键：

1：使用非破坏性缺省按钮，回车、ESC键的正确使用一个窗体，有默认加速键，如回车表示激活当前窗口设置为default的按钮动作，esc表示关闭窗口。

在调用default按钮动作和关闭动作时候，不应该做有破坏性的操作，避免用户错误操作产生危害程度，例如不能把删除数据等功能的按钮作为缺省按钮。当用户要提交很多数据时，应该屏蔽esc，或者做退出提示，告诫用户是否保存提交。

2：可接收动作控件必须拥有加速键，统一加速键描述(&A)

为结合键盘使用，可操作控件都应该有加速键，加速键定义准则，为英文单词第一个字母，如果同一窗体重复则用第二个字母，以此类推，则加速方式为alt+这个加速键，用统一的方法标识在界面中，如XXX(A)或者wps的A.XXX英文可直接在字母下标识下划线Cancel，

对于无法像button一样显示快捷键的Edit等控件，则在Edit描述的Label中显示快捷键。

弹出菜单

辅助菜单必须在可视化界面上拥有对应的按钮或者菜单选项。

由于辅助菜单由用户点击鼠标左右键或者别的动作才能调出来显示给用户。无法清晰的显示给用户，所以对应选项应该可以通过别的途径得到,例如界面上有相应控件或弹出右键菜单的按钮等。

十：(ACTION)用户交互

1：disable而不是notvisible

要使一个功能有时允许有时不允许用户使用，则这个控件的不能随便隐藏，应该使用disable属性进行表示，以免用户发现控件失踪后措手无策

2：窗口弹出位置要明显

点击一个控件，弹出窗口或者菜单，应该给人明显提示，最低要求是覆盖刚才点击的位置，让用户轻松跳转到新的界面。

3：执行动作要提示

给用户一个视觉感受的同时，写程序的时候应该注意用户的交互感受，UI作为人机对话的工具，用户做了任何动作，应该给用户一个视觉或者听觉、触觉提示。而且这个提示应该行明显，但不应提示过长，可以有以下几种方法：

当用户点击按钮等动作进行一个工作时：

1：弹出交互对话框让用户点击确认。

2：改变UI中控件参数提示：(处理不用用户确认的提示，有一定延时，或者用户按键后自动清除。)

如：改变标题栏字符串，显示“信息：提交成功”,或者专门设置一个状态栏、TLable等用来进行提示。

3：听觉提示：

在确定有声卡，用户可以听到声音的时候，发出特殊声音提示。一般作为重要提示的辅助。声音不应过长，紧急错误提示应该短促，频率较高，成功提示应该舒缓，轻松。等等

十一：(HELP)联机帮助：

什么时候要帮助，什么时候不要帮助

1：系统默认、行业标准的控件操作不需要逐一描述，只需要对特殊控件加以描述2：特殊操作、特殊功能界面，在界面上加控件直接连接到对应的HELP文件中

3：特殊设置详细，应该在界面上用简洁明了的语句说明，或者是好用Tiptool，并由第二步帮助

帮助文档：

结构化，按功能模块划分

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

帮助文件是帮助用户更好的使用软件，措辞要恰当、简捷、通俗易懂,每一句话都应该有目的，帮用户解决问题

帮助文件不是广告、商业软件不允许打广告。描述公司信息目的是为了方便用户在没有办法的情况下找到售后支持，网址连接、信箱地址、电话号码绝对不允许无效。

十二：发行时阐明规则

对统一的东西进行逐一阐述，并加以典型描述，放入HELP和用户手册中，同时加有词汇表

附录：

美工何时参与进来：

美工作为界面美化的主要人员，不但拥有艺术设计、包装设计的才能，还应该穿插整个项目，给界面程序设计人员提出系统参考意见。

1：软件设计前期，美工参与需求了解，分析同类软件界面有缺点，提出主色调、典型界面风格、以及构思整个美术包装等。

2：界面原型设计过程中，与开发人员共同修改、商榷最终表现样式，以及确立UI标准。

3：程序开发过程中，提供标准风格的资源文件(icon,cur,bmp等)，并总结出统一风格的资源的设计过程，形成规范文档*.

材料设计在UI界面中的体现 第7篇

题 目：探析材料设计在UI界面中的体现

学 生： 王梦琦 学号： 201106010224

系 别： 设计艺术系 专业： 艺术设计 入学时间： 2011 年 9 月 13 指导教师： 王淼 职称： 讲师 完成日期： 2015 年 5 月 12 日

诚 信 承 诺

我谨在此承诺：本人所写的毕业论文《探析材料设计在UI界面中的体现》均系本人独立完成，没有抄袭行为，凡涉及其他作者的观点和材料，均作了注释，若有不实，后果由本人承担。

承诺人（签名）：

年 月 日

探析材料设计在UI界面中的体现

姓名：王梦琦

学号：201106010224

指导老师：王淼

摘要：随着UI设计的不断发展，近期出现了一种新的界面设计方向，它就是材料设计。论文以材料设计在UI界面中的体现为题，分析了材料设计的艺术特征，认为材料设计不仅有丰富的视觉空间，还有统一的视觉动效。进而着重从界面风格、布局、图标、按钮四个方面，探讨了材料设计在UI界面中的应用，为UI界面提供了新的设计思路，同时开拓了视觉设计视野。

关键词：材料设计、UI界面、系统动效、界面风格

Theory of material design in the UI

Name:WangMengqi Student Number:201106010224

Advisor:WangMiao

Abstract: With the continuous development of UI design, recently there is a new interface design direction, it is the material design.Thesis topic, reflected in the UI interface design are analyzed the art features of material design, think material design not only has the rich visual space, and unified visual effect.And emphatically from the interface style, layout, ICONS, buttons, four aspects, this paper discusses the application of material design in the UI interface, for UI interface provides a new design idea, develop the visual design view at the same time.Key word: Material design, UI interface, system dynamic effect, interface style

目 录

引言

1.材料设计与UI界面 1.1材料设计的含义 1.2 UI界面的含义 2．材料设计的艺术特征 2.1丰富的视觉空间 2.1.1大胆的色彩对比 2.1.2鲜明的视觉层级 2.2统一的视觉动效 2.2.1卡片式渐变 2.2.2交互性设计

3.材料设计在UI界面中的应用 3.1材料设计在界面风格中的体现 3.2材料设计在界面布局中的体现 3.3材料设计在界面图标中的体现 3.4材料设计在界面按钮中的体现 结语 参考文献

引 言

移动设备的崛起带来了用户界面设计的变革，材料设计是近期出现的一种新的界面设计方向。材料设计通过视觉空间和视觉动效来展现它的艺术魅力，其中的色彩搭配使得界面看起来非常的大胆，充满色彩感，凸显内容。微妙的动画、阴影也使得用户与材料设计的互动更加有趣。在UI界面中，材料设计的界面风格和布局都有了很大的改变，在图标和按钮上也进行了改进，有很多令人愉悦的小细节，给用户提供了一种新的体验模式。材料设计不仅仅是一种视觉风格的转变，而是一种设计语言和思维方式的演变，它将引领UI设计的潮流趋势。1.材料设计与UI界面 1.1 材料设计

Google今年推出了新的移动设计方向“Material Design”，我把它翻译成“材料设计”。“材料”是种隐喻，即空间的合理化及系统动效的统一。2014年, 扁平化设计是最流行的UI设计趋势，而它的“过于平”也引起了一番热论，但材料设计在扁平化上作了微妙的渐变，层次感和动画，保留了意义上的有形世界。所以，我们可以形象的理解材料设计是“向拟物回跳一下的扁平化设计”，但材料设计本身又是独立的。

材料设计的中心思想，便是把物理世界的体验带进屏幕。将现实世界中纸张的特性挪到电子屏幕里，在“纸”上呈现信息内容，给用户一种贴近真实的体验，让整个界面看起来简洁、直观，让人眼前一亮。当前，Android 7的WPS就是基于材料设计的全新设计，业内专家表明:材料设计或将成为将来ＵＩ界面设计的趋向，这类设计理念让安卓界面在体验上更加新颖和简洁。1.2 UI界面

UI的意思就是用户界面，用一句话概括就是人和工具之间的界面。在我们生活中，界面同样体现在某一些方面，比如看电视的时候遥控器和屏幕就相当于这个界面。它不仅仅是由用户与界面两个部分组成，同时还包含着用户与界面之间的交互关系。

JefRaskin在《人本界面，交互式系统设计》一书中指出“就消费而言，界面就是产品。”在这里，界面包括产品外观和产品的交互行为。一个美观而不失实用的界面会给人带来轻松舒适的视觉享受，它会吸引用户去探索，去发现有趣之处，拉近人与电子设备之间的距离，让用户乐于使用。界面设计并不是仅仅为了美观，他需要为用户而设计，需要考虑用户的使用环境与使用方式，它是考虑用户主观情感的科学性的艺术设计。2.材料设计的艺术特征

2.1 丰富的视觉空间 2.1.1 大胆的色彩对比

用户第一次看到一个UI界面时，会对色彩留下最深刻的映象，因此色彩是UI界面设计中不可缺少的视觉元素。如图1，材料设计崇尚多彩，但它并不使用那种很艳丽的颜色，大多采用清新靓丽的色彩，清爽的页面通常都离不开白色背景的映衬。为过于艳丽让人感觉到俗气。

在材料设计中，界面一般采用不同的色调来区分各个栏目的主题，而部分细节的处理则喜欢用靓丽分明的色条或色块。如图2，工具栏大块区域采用了蓝色为主色，而状态栏采用了比主色稍深的蓝色。如图

3、图4用靓丽的色条来强调标题，同时强调色可被用来当做按钮和控件或开关和滑块。

2.1.2 鲜明的视觉层级

假如某篇文章的标题比内容概述更重要，标题就应该有更多视觉主导力。主导元素是所叙述故事的起点，是用户接触设计的入口，能够将用户注意力第一时间吸引到设计师希望用户注意的地方。为了最快的吸引用户注意，可以通过对比、强调、图5

图6 图 2

图3

图4 图 1 同时将本来靓丽的色彩加入一点点的灰色，不但让图案变得生动起来，又不会因和相对的视觉重量建立主导地位元素。如图5,是材料设计在Feedly阅读器里的应用，图中的主导元素是顶部的图片，占据了最大的面积，深色图片底下大面积白色区域与图片形成对比，打造出鲜明的用户界面，吸引用户关注。图片上的“Food”字样可能是页面最重要的信息，清晰阐述此页面的主题。在一个设计中，首先突出主导元素，其次就应该强调焦点。如图6，此页面主导元素是人物图片，与周围的字体形成本质对比，而它的焦点是图上加粗的黄色字体“GIRL”，旁边 的播放按钮也是焦点之一，从而构建出视觉层级、视觉意义以及视觉聚焦。2.2 统一的视觉动效 2.2.1 卡片式渐变

在材料设计上，动效的理念有着相通的原理。动效连接于整个应用的程序流程，表达了设计的先后关系，尤其是关于产品的连续性来讲，用户根本没有中断的感觉，在材料设计中，使用了渐变的方式让界面流畅、舒适。UI界面的渐变是通过画面基本形象有序地、渐进地变动而形成如梦如幻的、似音乐旋律般的视觉效果，这样使画面具有极强的观赏性和秩序感。如图7，在主页浏览视图里包含一列卡片，当你点击一个卡片时，卡片将不再是一张卡片的大小，而是将延展到全屏幕。因此，“魔法纸片” 是材料设计中最重要的信息载体。纸片层叠、合并、分离，具有现实中的厚度、惯性和反馈，也具有液体的某些特性，可以自由伸展变形。如图8，它同时运用了材料和动效，卡片就是所谓的材料，当用户与其交互时，通过动效卡片延展来显示更多内容。这样给用户带来的视觉效果是连续的，告诉用户他们如何使用，如何让他们的操作影响到界面。

2.2.2 交互性设计

动效的快速反馈，可以让用户感到信任和快乐。当用户与应用交互时所反馈的动效不仅要实现美感，符合物理逻辑，而且能够给用户带来乐趣。反馈动态效果的设计必须深思熟虑且具有针对性，而不能随性设计，反馈动效应温和，不让用户分心，鼓励用户进一步探索应用。

材料设计具备快速反馈动态效果的特性，它让用户充满期待，触摸、语言、键盘及鼠标是首要考虑的输入模式。虽然UI元素是可见的，但是在物理上被限制在了设备屏幕之内。视觉线索和动态效果可以为用户和设备之间建立沟通的桥梁提供线索，让用户确认自己的输入有用，继而引导用户操作。动效的加入，让用户与应用之间的沟通真实、有效，将应用带到了新的高度。如图9和图10，是材料设计应用于Feedly阅读器。在Feedly阅读器中，最重要的转场是打开文章和关闭文章。过程当中，用户在文章的列表和文章内容中切换。如图9，当用 图7

图8

户点击文章预览时，应用会出现点击涟漪效应来提供即时反馈，然后整个效果会扩大充满整个文章预览元素。同样，当用户关闭文章时，这种效果也会在顶栏中出现。这是表面的反馈,涟漪效应使用户知道他的操作有用，给予用户带入感，让用户的注意力不分散，同时感受到小趣味，继而引导用户进行下一步操作。当用户在杂志视图中预览图片时，点击图片后，文章会在转场过程中逐渐放大，内容会渐显过来，而图片会用渐隐来过渡，它们会

图9 移动到相应的位置。有时在预览图中没有出现在第一屏，然后在转场时渐显文章的内容，缩略图也渐隐来过渡。整个切换过程流畅、自然，不会让用户感到突兀，提高了用户体验的整体美感。如图10，当用户点击了列表中的文章预览区域时，模块将会向上升起，形成属于这篇文章的一个新的平面，考虑到视觉上的连续性，这个新平面会被放大，它成为最主要的一个面，同时文章的内容也渐渐显现出来。整个移动过程有意义、有秩序，引导着用户的关注力，将最要的信息内容传递给用户。

3.材料设计在UI界面中的应用 3.1 材料设计在界面风格中的体现

图10 视觉设计风格是指界面所具有的特有的气质。后现代主义这种风格在UI界面的设计中占很大的比例，主要表现为波普风格和抽象风格。波普风格主要是以明朗亮眼的色彩、新奇的搭配图案和强烈的色彩对比来刺激用户的注意力。而抽象风格会给用户带来很大的联想的空

图11 间，通过点、线、色彩、面块、形体、构图来传达。材料设计的界面风格总的来

说是“鲜明、形象、深思熟虑”的。如图11，页面运用了留白，移除了所有可有可无的元素，搜索框吸引了用户全部的注意力，引导用户去搜索。留白是抽象风格中常见的一个运用手法，它们的存在并不是单独的，而是为了烘托主体元素，它们和主体元素是相互依托的关系。这样给用户一种简洁、明了、清新的感觉。而在颜色选择上材料设计的原则是“大胆、图形化、有意义”，提倡一种主色，一种互补色，运用巧妙的色彩搭配、点、线、面块等使得整个界面看起来非常大胆、充满色彩感，凸显内容。如图12，分别是具有波普风格的图画和材料设计的界面风格，从色彩上看，主要以红、黄、蓝三原色为主，色彩明快，色块层次分明，让人眼前一亮。而白色的适当点缀，又平衡了空间的色彩关系，给用户一种舒适的感觉。从搭配的图案上看，单色与拼接图案的结合，充满趣味，吸引用户眼球的同时，也治愈了用户的“审美疲劳”。

3.2 材料设计在界面布局中的体现

界面设计中的布局就是在有限的空间里对屏幕中的元素依据规律排列组合，而一个漂亮、易读的排版离不开基本骨骼系统。骨骼设计系统在界面排版中要遵循一些基本原则，其中包括对齐原则、比例适度、留白、秩序美等。从图13中可以看出，材料设计运用了“基线”对齐原则，同时利用骨骼线把文字、图形、线条按照一定的比例整体组合，使整个界面具有清晰明了的视觉秩序美，让用户得以快速阅

图13

图12 读信息，并有一种轻松、舒适的感觉。同时，视觉流程在界面布局中也尤为重要。当我们浏览界面时，用户首先会快速粗略地浏览页面，大致形成第一印象，接着视线就会从最吸引注意力的一点开始依次浏览，最后完成信息的传递。这就是视觉流程。如图14，用户第一眼会看到闹钟，接着视线会移到右侧，右侧卡片利用线条的分割、视觉元素的排列，带动用户根据设计的引导流程进行有效的视觉交互和信息传递。在材料设计中，布局上注意文字以及图片分量相当，在使用元素的同时注意元素在整个布局上面的呼应，在布局节奏感的把握上，注重疏密搭

配。界面的编排是为了突出主要信息为目标，让用户可以关注到重要的点，同时组织页面的设计元素，合理引导视觉。如图15，是材料设计对页面的编排，它将构成要素进行了巧妙合理的安排，是整个界面具有层次感和条理性。其中恰如其分的采用余白，使文字更加突出，具有更强烈的视觉感染力，使画面富有韵律。

3.3 材料设计在界面图标中的体现

图标是一种可视性很强的图像语言。它相对于UI界面就好像公共系统中的标志，虽然它只是界面中一个极小的点，却可以引导访问者最方便、快捷的方式浏览和使用整个界面。图标是具有标志意义的视觉符号，所以在材料设计中需要着重考虑图标的视觉感觉和视觉冲击力。如图16，图标具有很强的视觉表现力，有丰富的色彩和简单明了的几何图形组成，线条分明，和谐的明暗关系使图标立体起来，富有韵律感。同时色彩艳丽的图形由白

图16

图14

图15 色来衬托美丽，整体简洁大方，但又不失活泼跳跃，提高了整个“颜值”。

UI界面图标主要分为入口功能和操作功能，导航性图标具有入口功能，它是UI界面的方向标志，它能指引用户如何进入界面的不同区域，当你点击它时，就会出现一个子页面。如图17。而操作命令图标图标具有操作功能，它所指示的内容是各种交互功能、步骤等，界面工具条中包括的小图标都属于操作命令，它们可以帮助用户实现一些操作，引导用户去使用，如图18。操作功能的图标在完成点击操作之后，通常会转为对应的另一种形态。如“返回”与“菜单”，“收藏”与“已收藏”的状态之间切换，这样的设计里，在两种状态之间切换图标经常让用户感觉到生硬，而点击图标动画后用户会得到更佳强烈的反馈，使用户感到有趣，并且让界面生动，活泼起来。

图17

图18

3.4 材料设计在界面按钮中的体现

按钮能够提示观众，引起用户注意，好的按钮设计可以将界面主题化、形象化、生动化，引导更多是用户浏览页面、接受信息的传达。按钮一般较小，往往采用与背景对比较强烈的色彩以引起注意，同时与整个界面协调。

浮动按钮是材料设计中比较重要的一个体现，如图18，浮动按钮通过圆形元素与分割线、卡片、各种直线形成鲜明对比，并使用色彩设定中鲜艳的辅色，给用户带来更具突破性的视觉效果。浮动按钮的大小分为默认大小和迷你两种。当需要和屏幕上的其余元素产生视觉上的延续性时，一般使用迷你版的浮动按钮。如图19，Today是一款日历应用程序，是材料设计应用于其中的一个应用，美丽的悬浮响应按钮将日历和日程分开，灵动的同时又不失使用，色彩鲜艳的按钮，与背景颜色互补，吸引用户的眼球并引导用户去使用它。而且主题的颜色可以更改，用户通过点击相应的浮动按钮根据自己的喜好更换背景的颜色，使其保持新鲜感，满足个性化需求。

图18

图19

结 语

随着UI设计的日益发展，设计的重点从仅仅关注平面的表现，转移到了人与设计之间的交互。材料设计是对于这种潮流的适应，它的出现让用户眼前一跳。有设计师表明材料或将成为引领UI设计新的流行趋势，会给用户带来更多惊喜的东西。

参考文献

[1] 焦万鹏.新兴专业—“UI”设计初探[J].2007，8（2）：34-36.[2] Windy.什么是交互设计[J].2004，（11）：55-57.[3] 舒畅.浅析UI设计中的图形语言[J].2009,（17）：50-50.[4] 聂璐.论网页界面设计中的人性化因素[D].湖南师范大学.2010.[5] 李四达.交互设计的域与界.[J].装饰.第201期2010.01.[6] 孙娇、宗明明.网页设计中视觉流程筹划与应用.[J].2010,(7):169-171.[7] 程璐.网站的导航标—网页界面图标的设计研究.[J].2009,(2):182-182.[8] 汪大伟.现代主义风格的UI设计之兴起.[J].现代装饰.2012（09）：182-184.[9] 张涛.图标认知因素分析及其应用研究.[D].2007年

浅谈UI界面设计与应用 第8篇

UI是User Interface (用户界面) 的简略缩写, 主要是指对软件的人机交互、操作逻辑、界面美观的整体设计。如果从心理学的方面来分析的话, 界面可被分为感觉 (即视觉, 触觉以及听觉方面) 与情感两个层次。界面设计是一个包含着心理学, 设计学以及语言学的不同共同参与的工程。界面设计所应有的三大原则是:一直接免于用户的控制之下;二减少用户的记忆负担;三保持界面的一致性。通俗的来说就好像现在的电视上面的互动界面菜单, 我们只需要利用手中的遥控器就能快速选择自己喜爱的电视节目;再比银行的自动服务终端上的界面, 我们在上面进行业务操作短短的几个选择就解决了用户的需求。UI设计让这些软件的操作变得舒适简单自由, 同时体现软件的定为和特点, 让软件变得更人性化, 同时具有个性与品味。

二、UI设计的分类

UI设计 (界面设计包括硬件的界面设计与软件的界面设计) , 在这里我们主要讲的是软件的界面设计、包括用户研究、交互设计与界面设计三个部分。

1、用户研究

首先我们应该在产品的开发阶段, 通过各项调查, 来了解用户的工作性质、工作流程、工作环境、工作中的使用习惯, 来得到用户对产品的需求和希望, 使我们的设计提供有力的思考方向, 设计出用户所需的界面。用户研究不是站在设计者角度来的, 而是站在用户的角度去设计思考问题的。其最终目标使产品更容易被人接受使用, 提高其使用性。在最终被推向市场后, 还应收集用户反馈, 了解到用户的最终想法, 用此来检验界面与交互设计的合理性, 以此来积累更多的经验。

2、交互设计

交互设计是指人与机器之间的交互工程, 一般由软件工程师 (程序员) 来完成。交互设计师的工作内容就是设计软件的操作流程, 软件结构与操作规范等。一个软件产品在编码之前需要所做的就是交互设计, 并且确立交互模型, 交互规范。人机交互设计其目的就是使计算机真正的方便为人们服务, 更方便、更易学。

3、界面设计

目前来看, 绝大部分UI设计者都从事的这份工作。就是人们常常说的美工。美工其实并不单单像人们所理解的那样单纯的美术工作者, 而是软件产品的信息界面设计师, 其工作就是使产品界面利用软件的制作呈现在大家面前。

三、UI设计软件介绍

UI设计是伴随电子科技的发展而发展起来的, 其精美的制作离不开科技的发展, 没有强大的硬件设施与应用平台也就没有UI的发展。电脑等电子产品的普及与设计软件强大的功能赋予了其生命。

Photoshop, AI等是设计软件是最大的图像设计软件之一。Photoshop是由Adobe systems开发和发行的图像处理软件。对于多数人而言, 他仅仅代表着“图像编辑软件”。事实上Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具, 可以更有效的进行图片编辑工作。AI作为全球上最著名的矢量图形软件, 提供丰富的像素描绘功能以及顺畅灵活的矢量图编辑功能。由于最新的AI CS6使用Adobe Mercury支持, 更能高效的、精确地处理许多大型的图形及文件。其全新的追踪引擎可以更快速地流畅的设计图案。再加上其强大的性能系统提供各种颜色、形状复杂效果和丰富的排版, 更加舒适方便的使软件使用者做出自己创作理念和设计能力。

四、应用与现实结合的实例分析

在各种电子设备充斥着生活的现代社会中, 对于消费者而言有更多丰富的选择。如何抓住消费者眼球以及心则作为电子产品厂商所关注的重点。良好的界面设计以及操作系统再加上鲜明帅气外观则作为电子产品的先锋起到了至关重要的作用, 这同时体现出了一个与活力的积极企业的形象, 这对于产品的发展与销售有无形的推动作用。

随着3G时代互联网的发展, 手机等电子设备深受互联网等的影响它通过手机成了新的通讯媒介, 与此同时, UI设计也得到了突破性的发展。使用户界面更呈现出了窗口化、图标化, 菜单化、按键化。所以现在手机的UI设计也需考虑用户使用智能手机程序的便捷与稳定, 但也要同时兼顾人与人之间的使用习惯及差异。

作为这场互联网变革中最成功的苹果公司特别具有代表性。iphone的设计特点首先是拥有超大的触摸屏幕满足了人们对于3G时代对于手机的要求, 她的尺寸与外观则严格按照人体工学的要求来做, 是用户享受上网的同时带来更舒适手感。此外iphone的图标按钮等与机身外形一样, 拥有舒服的“倒角方形”的形态特点。这也是iphone与别的产品区别的地方。倒角方形其特点就是简单实用, 其倒角弧形的设计以弧形与直线的结合使视觉上产生柔和感, 再加上与其操作界面与机身配合, 使得严谨、大气而又不失时尚感的气质贯穿其中。在色彩上, 由于色彩是先于形态传达给人们信息视觉元素, 是最抽象的语言。色彩也能影响人们的情趣, iphone的黑色外观使得其显得更加理性, 白色则更加高贵时尚。而其界面上的图标却颜色丰富而又不显得乱, 这不仅使图标在黑色映衬下显得更有趣味也更活跃, 给iphone注入了强大的生命力。再加上其出色顶尖的营销, 使苹果公司跻身世界顶尖公司。

五、结论

在现在的时代UI设计越来越重要, 它能给用户带来更加直观的感受, 让人们认识到了科技离我们真的不远, 充斥着我们的生活。在“为人们的生活服务”传达模式下, 享受着UI带给我们的惊喜, 享受着UI设计师们利用各种先进软件并跟着时代的步伐设计出具有新思维新文化, 并能满足人们的心理需求沟通人们感情与思想的设计, 为各种电子设备增添情感, 更加人性化, 享受科技带给人带来的舒适。

摘要：界面设计, 在之前的软件的发展中始终没有得到它应有的待遇与重视, 设计师们很少关注这个貌似无关紧要的设计方向。但随着手机与平板电脑的开始流行, 它俨然。成为了产品设计的重要卖点之一, 一个操作简洁美观的界面会给人们带来视觉上的享受, 就是所谓的用着舒服。使人们对它爱不释手, 同样为商家们创造了卖点。也是人们认识到了界面设计所带来的魅力, 那就是视觉上的享受。Photoshop, 作为动画设计师们最常用的软件之一, 同样也作为界面设计最常用的软件之一。使界面设计的视觉体验上更加的丰富多彩。使用户将更好的真真正正的感受到设计的魅力。