UI毕业论文

第一篇：UI毕业论文

日照职业技术学院

日照职业技术学院

毕业设计（论文）

题

目：

移动端图形界面设计

院

部：

电子信息工程学院

专

业：

计算机网络技术

学

号：

201315030241

学生姓名：

周丹丹

指导教师：

侯素玲

二O一六 年五月

第1页

日照职业技术学院

移动端图形界面设计

周丹丹

摘要„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„1 1 图形界面设计的基本原则„„„„„„„„„„„„„„„„„„„„„„„„1 1.1 图形界面设计的“黄金法则” „„„„„„„„„„„„„„„„„„„1 1.1.1 图形界面的一致性原则 „„„„„„„„„„„„„„„„„„„„1 1.1.2 图形界面的简洁性原则 „„„„„„„„„„„„„„„„„„„„2 1.1.3 易于检索 „„„„„„„„„„„„„„„„„„„„„„„„„„2 1.1.4 避免不必要的文本输入 „„„„„„„„„„„„„„„„„„„„2 1.1.5 软件信息的反馈原则 „„„„„„„„„„„„„„„„„„„„„2 1.2界面基本要素„„„„„„„„„„„„„„„„„„„„„„„„„„„2+ 1.3视觉设计效果„„„„„„„„„„„„„„„„„„„„„„„„„„„2+ 1.4必备品质„„„„„„„„„„„„„„„„„„„„„„„„„„„„„2+ 2 移动界面设计要素 „„„„„„„„„„„„„„„„„„„„„„„„„„2 2.1 菜单 „„„„„„„„„„„„„„„„„„„„„„„„„„„„„„2 2.2 按钮 „„„„„„„„„„„„„„„„„„„„„„„„„„„„„„3 2.3 多选列表 „„„„„„„„„„„„„„„„„„„„„„„„„„„„3 2.4 文字显示 „„„„„„„„„„„„„„„„„„„„„„„„„„„„3 3 图标与图像 „„„„„„„„„„„„„„„„„„„„„„„„„„„„„3 3.1 图形界面的最少记忆项目原则 „„„„„„„„„„„„„„„„„„„3 3.2 图形界面操作序列的完整性原则 „„„„„„„„„„„„„„„„„„3 结束语 „„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„3

第2页

日照职业技术学院

摘要

自从智能手机的兴起，极大的方便了我们的办公、娱乐等等，可以说移动智能手机的小巧玲珑更加受到人们所爱，手机上网超过了传统电脑的上网数量。手机界面人性化设计、友好性用户体验就显得非常重要。移动界面的设计是人机交互技术研究的一个重要方向。移动应用的界面设计符合人机交互设计的一般规律，可以利用人机交互界面的一般设计方法；由于移动设备的便携性、位置不固定性和计算能力有限性以及无线网络的低带宽高延迟等诸多的限制，移动界面设计又具有自己的特点。图形界面设计的基本原则

用户原则是图形界面设计最基本和最重要的设计原则。所谓用户原则，就是在软件界面设计中，要充分体现出“以人为本”、“用户友好”的基本要求，做到：易懂、易学、易用。

1.1 图形界面设计的“黄金法则”

用户原则是大原则，人们在长期的图形界面设计过程中，总结出了图形界面设计中一些有用的法则，这些原则被称作软件界面设计的“黄金法则”。这些法则进一步丰富了用户原则，使用户原则变得实在、可操作。1.1.1 图形界面的一致性原则

一致性原则是“黄金法则”中最重要的原则，也是界面开发人员最容易忽略和违反的一个原则。一致性原则有利于减少用户的学习量和记忆量，用户可以把局部的经验和知识推广到其他应用场合。一致的界面风格对用户来说很直观。应当检查每个布局和每个显示来保证其一致性。各种移动应用开发平台都提供某种形式的应用界面的风格指南，仔细研究这些指南对于移动应用的界面设计非常重要。

一致性原则要做到：

界面外观上的一致：具有相似的外观布局和信息显示格式。例如Office和Adobe软件。

操作次序上的一致：例如不同命令操作后的显示效果一致。

概念、语义、命令语法一致：例如同一功能的命令名称要一致，例如“复制”命令。不同软件开发商之间的界面设计要保持某种一致 1.1.2 图形界面的简洁性原则

简洁不仅是界面设计的美学原则，而且也是显示屏幕大小所要求的。要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。复杂化是界面设计的一大误区！

简洁性原则主要表现在： 内容归类合理、内容排列整齐一致 1.1.3 易于检索

用户希望能减少人机对话的次数以减轻操作的频率，快捷方式就是一个较好的办法。

第3页

日照职业技术学院

避免嵌套过深的多级菜单，缩减不必要的功能。以满足用户的目标需要为准，尽量减少用户进行信息访问时所要采取的步骤。同时尽可能创建多种信息访问途径。1.1.4 避免不必要的文本输入

尽量使用户避免不必要的文本信息的输入，而采用选择列表或模糊查询，即输入一部分查询关键词就可以获得检索目标或包含目标的列表可供用户选择，这样可以降低对于用户进行关键字文字输入的麻烦。1.1.5 软件信息的反馈原则

软件界面对用户的每个操作都应当提供及时的信息反馈，尤其是简明的错误处理和帮助功能是软件界面的重要反馈信息。预测用户可能出现的错误，提供相应的机制尽可能避免。

例如光手机信息发送成功失败提示等等；如果用户要输入日期，可以采用格式化输入的方法，检查用户输入是否全部是数字，而且代表日期、月份以及年份的数字的取值范围是否在合法的范围内。1.2 界面基本要素

(1).手机界面层级：待机界面 –主菜单–二级菜单 –三级菜单 界面除了包括图标和文字外，比较重要的还有呼叫，发送信息等以及计算器，日历界面等

(2).明确意义的图标，风格鲜明的版面设计是手机界面设计的重要工作，目前较为流行的是欧洲简单风格，以及韩国的时尚绚丽的风格。

(3).在更新颖的交互操作和与手机设计的整体结合上，韩系手机作的比较好，而在可用性和体验难度上，欧系手机则比较优秀。1.3视觉设计效果：

一款手机应用或系统首先是通过界面将整体性格传递给用户，体现了界面上风格营造的氛围，属于产品的一种性格。视觉设计的姿态决定了用户对产品的观点、兴趣，乃至后面的使用情况。手机界面的视觉设计可以帮助产品的感性部分找到更多的共性，或者规避一些用户的可能抵触点。

(1).风格确定

根据界面的总体风格的策划思路，结合界面其他元素的需要，对手机界面的整体风格进行考虑，以保证图标和整体效果的融合。风格鲜明的设计是手机界面设计的重要工作。目前，无论是引领风尚的iphone，还是市场新宠samsung，都推崇极简扁平化风格。

(2).图标设计

图标功能：在图形设计之前，图标非常重要，图标的功能是我们进行图标造型设计的标准和依托。设计图标的目的是实用和美观，同时要考虑图标的隐喻性，它代表的意思必须是用户可知的、熟知的。

图标造型：图标一般先用illustrator进行绘制，然后photoshop做图标设计的后期效果处理。所有界面上同级、同类的图标要保证表现形式的统一，避免用户视觉上的紊乱。

第4页

日照职业技术学院

(3).色彩调配

由于手机本身的限制，在色彩的还原程度上有一定限制，因此在选用色彩时要根据使用的屏幕进行调节，方法就是将设计好的效果图导入相应的手机中，用该手机自带的图片浏览软件进行全屏效果查看或者请求开发人员帮助。1.4必备品质

1.清晰

清晰是用户界面设计必须要具备的一条品质，如果说你的界面设计的很模糊，用户就无法在其中体验到较好的使用体验，这样会影响用户的整体印象。

2.简洁

UI设计除了清晰还不够，还需要简洁，看上去一目了然。如果界面上充斥着太多的东西，会让用户在查找内容的时候比较困难和乏味，而简洁的画面就能很好的解决这个问题。

3.熟悉

这里说的熟悉是指在设计UI的时候，要遵守一定的设计规范，就如有下划线的字符是有超链接的、叉号就是要退出或者删除，这样用户在使用的时候不但有熟悉的感觉，而且便于操控。

4.响应

良好的用户界面设计一定要响应迅速，不能让用户产生一种响应较慢的感受。而且界面应该有提醒的功能，让用户了解到一些反馈信息。

5.一致

在设计UI时，保持界面风格的一致性也是整个应用设计中很重要的环节，一致的风格不会让用户有错愕感。

6.美观

美好的事物总会让人有种愉悦之感，在页面设计的时候也要注重美观度的加强。移动界面设计要素

界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够，直到最近网页制作的兴起，才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。

移动界面也包含很多种类的设计要素，主要界面设计元素有： 菜单 按钮 多选列表 文字显示 数据输入 图标与图像

第5页

日照职业技术学院

报警提示 移动多媒体 2.1 菜单

主要目的用于提供项目选择。

设计移动界面可用性好的菜单应遵守的规则。

供选择的项目应根据需要进行逻辑分类，如果没有逻辑顺序，可以按优先级分类，将被选择频率最高的项目放在列表的最顶端。

每一屏中不宜设计过多的选项，如果一个菜单上的选择项目太多，应该建立一个“更多”链接，将菜单扩展到多个屏幕。

菜单上的每一选项一般应当简明扼要。2.2 按钮

一般移动界面中的按钮不经常使用图标。在按钮属性的设置上根据所显示的应用类型和信息类型，使用风格和标注一致的标签。汉字标签则一般需要注意字数的控制。

常见的通用按钮

OK（确定）：可用于菜单项的选择或表示对某一操作的认可，如确认删除。Done（完成）：可用于结束当前操作，并返回到上一层任务。Back（返回）：使用户回到前一个操作屏幕。2.3 多选列表

在移动应用中使用多选列表，可以最大限度地减少文本输入。2.4 文字显示

文字显示控件主要用于显示较多数量的文字信息。文字显示的一般可用性建议： 每一屏幕显示内容不宜过多，如果信息较多，应定义一个链接。一般情况下文字信息应当使用换行方式进行显示。屏幕布局

一般来说，手机屏幕是从上往下布局的，重要的信息会放在上方。但是在操作上，大部分人都是单手拿手机，常用的操作，要放在界面的下方。

另外还有一个原则，最小的触摸单位，一般是44个像素。如果再小，你的拇指难以触碰，或者容易引发误操作。同时，也不要让界面太拥挤。

大家熟悉的，比如iOS的桌面，最主要的操作是在最下面，常用的四个钮，上面的内容可以来回滑动去选择。微信的操作也是在下面，重要的信息——我们的聊天内容放在上方。图标与图像

图像、图标可以增强显示信息的效果。3.1 图形界面的最少记忆项目原则

好的图形界面应该尽量减少用户的记忆量，用户必须记住的任何信息应该是和当前操

第6页

日照职业技术学院

作有关的，而不是和计算机相关。

为减少记忆量，应该通过菜单设计及联机帮助等形式帮助用户记忆，一般地说，用户的短期记忆不要超过7个项目。3.2 图形界面操作序列的完整性原则

界面中每个操作序列都应该清楚地标明开始和结结束，其余的操作应插在中间。操作序列的结尾应该给用户完成的感觉，并指示下一个任务的开始。想象一下发送手机信息的整个操作过程。

结束语

通过图形界面设计的基本原则及就是UI的总体的设计从图形界面设计的“黄金法则”、界面基本要素、两方面阐述。从移动界面设计要素具体的介绍了移动的独特性。分别从菜单、按钮、多选列表、文字显示讲述。图像显示视为终点独立一节讲述,图形界面的最少记忆项目原则、图形界面操作序列的完整性原则。分析以上就是最近研究的结果，当然有很多不足之处。给予批评指正。

参考文献：

[1].赵亮《电脑知识与技术》.安徽科技情报协会.2009.(8183-8185)[2].孟小华.《Android图形系统的分析与移植》.电信科学;2011（2）[3].http://news.mydrivers.com/1/344/344159.htm.2016年4月27日访问

第7页

第二篇：UI总结

Root 窗口

1、标题栏：位于窗口的顶部，是应用程序的名称。

2、控制按钮区：控制窗口关闭，最大，最小操作的一个集合区域。包括最大化、最小化、关闭按钮。

3、菜单栏：就是各种操作命令构成的菜单项，在当前状态下能够使用的命令类别，包含了文件、编辑、视图等共九项菜单。包括“下拉式菜单”“快捷菜单”。

4、工具栏：就是菜单中的一些常用命令的图标，即常用菜单的图标显示方式。包括：⑴常用工具栏；⑵格式工具栏；⑶绘图工具栏。

5、任务栏（状态栏）：用来显示编辑文档程序当前状态的信息。包括“开始”按钮；快速启动区域；窗口显示区域；输入法；时间区域和消息区域。

6、边框：表示本窗口的范围。

7、工作区（内容区）：应用程序用来显示接受信息和输出信息的区域。【“文件磁盘区”在“我的电脑”】

8、垂直滚动条（钮）：查看上下内容。

9、水平滚动条（钮）：查看左右内容。Sub 子窗口

1、窗口大小、位置，窗口标题，窗口状态栏，控制按钮区（最大、最小、关闭）

2、子窗口与主窗口的关系，是嵌套在主窗口里面，还是单独显示

3、包含的界面元素（类型，位置，大小，字体颜色，背景颜色，默认值，Tab 顺序，快捷键)

a)文本区（字数限制，字符限制）

b)文本域

(字数限制，字符限制）

c)列表框 list box（显示数据列的标题，列排序，列宽，列显示数据量）

d)垂直滚动条（查看上下内容）

e）水平滚动条（查看左右内容）

f）单选框（选 or 不选）

g）多选框（选 or 不选，与Ctrl 和Shift key 有没有联合）

h）按钮

i）标签

第三篇：《UI设计》课程标准

《UI设计》学习领域课程标准

执笔：甄珍

审核：

时间： 2013-5-

5一、学习领域定位

“UI”热是近几年来兴起的潮流，近几年国内很多从事手机，软件，网站，增值服务等企业和公司都设立了这个部门。还有很多专门从事UI设计的公司也应运而生。

正是鉴于目前UI行业的发展状况，本专业第一次开设计《UI设计》课程。

《UI设计》是所有与网络通信软件相关专业课程，该课程既可以巩固前期所学的设计基础理论知识和设计软件应用知识，还重在给学生开拓新的专业知识面，认知一个新的设计领域，从而拓展职业能力和就业选择面。

二、职业分析

目前UI即用户界面设计行业刚刚在全球软件业兴起，属于高新技术设计产业，与国外在同步发展水平。其次国内外众多大型IT企业(例如：百度、腾讯、Yahoo、中国移动、Nokia、联想、网易、微软、盛大、淘宝等众多企业)均已成立专业的UI设计部门，但专业人才稀缺，人才资源争夺激烈。但目前全国UI设计专业的系统教学极其稀少。UI设计师的待遇和地位也逐渐上升。

三、学习目标

知识目标：使学生能熟悉UI设计的流程和设计方法，并能使用制作有创意的，充满视觉冲击力的UI设计作品。

技能目标：使学生学会系统规划和全局思维，能够完成一整套UI系统的设计。

素养目标：使学生具备能从事UI系统的开发与设计能力，培养学生团队合作、及独立思考能力。

四、学习内容

四、学习领域课程设计思路

（一）设计理念

五、考核方式

学生成绩的评定，以学生平时表现和任务完成情况及最终考核来核定。评分细则如下表：

其中，平时成绩包括平时上课的表现和各任务的完成情况，占总成绩的30％；最终考核成绩所用考核方式为机试，占总成绩的70％。

第四篇：UI培训心得体会

UI培训心得最近参加了公司组织的UI培训，颇有收获，总结了一下自己在UI设计方面存在的误区，和大家共勉。

1、界面并非“炫”了就好一个设计成功的界面都是简单大方、容易识别的，毕竟界面是供用户操作完成工作，而非拿来娱乐休闲的，尤其是我们这种管理系统界面。一个色彩绚丽、让人眼花缭乱的界面不仅不能增加美感，更会给用户的操作带来不便，降低效率。

2、界面布局不要盲目追求“越满越好”良好的界面布局是吸引客户的一个亮点，是客户评估应用软件的一个重要指标。好的布局不仅给人耳目一新的良好视觉享受，更可以帮助用户快速的熟悉软件，间接的成为用户的操作指南。界面布局要在逻辑合理、便于用户操作的基础上尽量的美观，无需堆砌内容。有时候我们为了使界面看起来比较充实，不显得空旷，硬生生的把一些不相关的功能拼凑到一起，其结果是用户操作时像走迷宫一样，这样的界面只能增加不必要的复杂度，让用户眩晕，碰到个脾气暴躁的人，估计要拍桌子了吧。

3、界面设计不要完全依靠“经验主义”目前很多项目都存在着这样一个现象：开发和设计人员并不能跟用户直接沟通，所有的需求都是来自二手材料。这种情况下，开发和设计人员并不能详细的了解用户的操作习惯等重要信息，只能根据自己的经验来进行设计和开发。等产品出来客户验收时，往往发现我们生产出来的东西和客户的原始需求有一定的误差，造成返工，增加了项目成本。课上老师曾经说过这样一句话让我记忆深刻：“把自己变成用户”。在做设计和开发时，我们大多数是把自己当成设计开发人员，而不是用户。如果把自己变成用户，站在用户的角度来进行设计开发，我想我们的产品对用户需求的符合度一定会大大提升。如果有条件的话，能够去用户的工作环境去体验一下相信对我们的设计开发一定会大有裨益的。

4、同一系统界面切忌“百花齐放”界面风格是产品的形象标识，是产品的脸面。成功的界面设计都有自己的独特风格，或清新活力，或时尚优雅。当前出现频率较多的一个词就是“创新”，创新是企业的生命力，于是在界面风格方面也出现了大刀阔斧的改革。但是界面设计的创新却切忌一个系统出现多种界面风格，尤其在维护旧有的产品时。有些产品使用已久，完全推翻旧有的风格不仅人力不足，成本也太大，不太划得来，但是旧有的风格又不能满足需要，于是出现了这样一种现象：甲在维护时将自己维护的界面改成了风格甲，乙维护时将新增功能界面改成了风格乙。随着维护的增加，原来的系统已面目全非，界面风格是“百花齐放”，用户操作时如同进了迷魂阵中。所以，保持系统风格的一致性非常重要，不能为了赶时髦，而将自己的系统变成了“杂牌军”。成功的界面设计是以用户为中心的界面设计，用户对界面的满意度是评价界面的主要标尺，只有把自己变成用户，才能设计出更加符合用户需要的界面。

第五篇：ei ei ui教案

ai ei ui教案

一、复习检查

我们在拼音王国中遨游，认识了不少拼音朋友，你还记得我们在第一课学习过的拼音吗？这有六个字母卡片，我抽取任意一张，谁会请举手站起来读。指名认读a o e i u ü

二.谈话过渡 导入新课

六个单韵母的本领可大呢，它们也可以和声母组成音节。除此以外，两个单韵母就可以组成新的韵母，叫做复韵母。今天我们就学习：复韵母ai ei ui。

三．

（一）学习ai

1.出示图画，问：图上画了谁和谁？他们在干什么？

生回答

师总结：小女孩在扎篱笆，把小树苗围起来，这两棵小树苗一棵高一棵高，再看看男孩子正在拿着一把草逗小羊，嘴里发出ei ei的声音，不让小羊去啃树苗。

下面跟老师学习语境歌：扎篱笆，围树苗，一棵矮来一棵高。ei ei 小羊羔，快快过来吃青草。师过渡：

（小结）两棵小树苗，一棵高，一棵矮。“矮”就是我们今天要学的第一个拼音。“矮”是第几声？

那第一声又该怎么读呢？跟我读：ai。谁已经会读了？指名读。

2、示范，跟读，提醒学生观察老师口形。提示：先将嘴巴张大发a音，声音响亮，慢慢地向i滑行，i发音轻、短，合起来一口气读成ai。

3、开火车练读――――个别读

4、谁有好办法记住它？（编顺口溜）（一棵矮树，aiaiai）

四、ei：

1、小朋友，小男孩用青草逗小羊羔时嘴里发出什么声音？ 生回答，ei ei就是我们今天要学习的第二个复韵母。

2、ei是由哪两个单韵母组成的？谁已经会读了？指名读。

示范，提示：读ei的时候先摆好e的口形,由e慢慢滑向i，读的时候口形要有变化，注意读得短一些。

跟读，指名读，开火车读。

3、师生合作游戏：师读词，生喊口号，短、连续三声，拔萝卜呀（eieiei）用点劲呀（eieiei）齐心协力（eieiei）

4、学生互相练读

五、ui

1、小女孩围树苗的“围”变成第一声就是今天学的第三个复韵母ui 拓展：你接电话第一句讲的是什么啊？------ui

2、ui是由u和I组成的，你能读一读吗？（指名读---齐读）

3、口型指导，怎么变化。

六、巩固

1、刚才我们已经学习了aieiui这三个复韵母，谁能响亮地把ai ei ui 读一读？指名读，齐读。

2、仔细观察，你又有什么发现？

（小结）对，它们都由两个字母组成，是复韵母。而且这三个复韵母都含有一个“i”，七、教四声调

1、小朋友，外面的阳光可强烈了，不单单单韵母爱戴帽子，连复韵母也爱上了那四顶拼音帽子，可是复韵母由两个字组成，声调标在谁的头上呢？为了这个问题，六兄弟开了个会，最后约定：六兄弟中老大a嘴巴最大，老大在老大戴---------生接下去：老大不在老二o戴，老二不在老三e戴，老四老五排队来，谁在后面给谁戴。

2、师引导学生把ai标调-------提示ei、ui的标调

3、学生自己帮ei、ui戴帽子-----请两个学生出来标四声调-------评

4、师指黑板说：你会读吗？

5、请小老师带读四声调

6、学生练读-------开火车读

总结：今天这节课，小朋友们收获真大，我们认识了三个复韵母，还学会了给他们戴帽子，你愿意和他们做朋友吗？那时间也不早了，还有两个复韵母宝宝我们还没送他们回家呢！让我们一起来找找他们的家吧！

八、指导书写

1、这三个复韵母小朋友读得这么好，那你们会不会写呢？

2、在书上描红，指导，注意每个拼音的位置；复韵母是一个整体，不能把它们分开。

3、学生描红（强调写字姿势：头正两肩平，头离本子一尺高）

4、学生互评写得怎样--------师用事物投影评一两个学生的书写