App 开发中的UI 设计技术

毕程程 宋璐明 杨赛超

（1、防灾科技学院，吉林 梅河口135000 2、防灾科技学院，河北 邯郸057150 3、大连工业大学，河北 邯郸057150）

进入新时代以来，信息技术发展速度不断加快，我国手机用户已超过14 亿，手机APP 的应用也越来越广泛，对于当人们来说利用APP 进行交易、阅读、学习已经成了生活中不可缺少的一部分。竞争如此激烈的行业，想要在初始阶段吸引用户的兴趣，第一印象是最重要的，也就是指的是用户界面。试想一下，一个很有内容的、运用大量技术层面的一个应用程序，但是没有美观整洁的用户界面，哪怕开发者说的再天花乱坠，用户也不会想了解那么深层的东西。所以，让人耳目一新的界面，也就是用户交互体验，才能更好的让用户再人机交互中得到最大程度的人性化。因此在大学时光app 中不仅实现了美轮美奂的界面，还实现了大学生可以使用手机观看各科的卷子、例题等“题库”功能。本软件通过在Android Studio 开发环境下集成并使用Java 语言编程，测试结果使用Oracle 数据库保存。并运用photoshop、Adobe Illustrator 等软件进行UI 设计的实现。

1 UI 设计需要的技术

1.1 图像处理

在网络上拥有琳琅满目的资源，这些对于我们在做UI 设计过程中可以说是无价之宝。很多时候无从下手，这些资源都可以给我们灵光一现的感觉。在我们可以进行综合运用情况下怎么样进行图片的处理就变得尤为关键。例如，图像的大小、文字搭配是否美观等等问题的处理。针对于图片的处理，基本运用photoshop 软件或者是网络上一些比较快捷的网站，像一些想要快速的进行P 图和抠图的实现，运用Photoshop 软件中太过于繁琐，，这时候运用网络上的快捷处理图片的网站就会比较快速的出成果图。但对于细节的处理，还是运用Photoshop 更好，Photoshop 主要处理以像素所构成的数字图像。它拥有众多的编修与绘图工具，可以专业地进行图片处理工作。

1.2 Logo 设计

Logo 设计可以说是整个APP 的灵魂，它代表着一个象征。这个象征要具有特色、要与众不同的魅力。客户可能因为你的logo 就一概而论，所以logo 设计尤为重要。而我们想要做好logo设计，就要把APP 的应用功能具体化，找到APP 主要想展现什么有什么特点，把这些特点和内容陈列出来，然后进行最后的组装。这里一定要注意，即使想表达特性也不要同时表现太多个，那样显得过于繁琐。而大学时光App 作为面向大学生的一款APP 自然选择了“学生”这个特性，经过不断的修改最终得出最后的logo。

1.3 图标的设计

图标设计主要是标签栏中具体功能的明确表现，目的是用图形的方式引导用户快速寻找想要找到的功能。而图标样式分为面形图标、线形图标、线形和面型图标的结合、节日图标。像“发现”就和放大镜有关等等很多都是生活中我们惯用的东西，结合实际加以想象就可做出好的图标设计。

1.4 主页面的设计

主页面的设计还是要运用Photoshop 软件，多去看看成功的例子，然后养成自己的惯性思维，知道什么地方放图标好看，什么地方放文字好看，形状是什么样子的顺眼，颜色是什么和主题比较搭等等的问题都需要自己反复的实验与尝试。

2 设计的模块

引导页：APP 开始动图展示，以黄色为背景，中间是APP 的logo，下面是大学时光APP 的名称。用户登录：登陆APP，通过用户名和密码进行登录，登录后还可以绑定学校教务处。交易界面：用户发布想要交易的物品，如图1 交易界面所示。知章界面：分为资讯、问答和题库三个小功能，用户可以在此模块进行浏览工作人员发布的学习内容，如图2 知章界面所示。发布界面：用户可以在此界面发交易、知章/问答和时光，用户点击发布或者发送按钮后跳转相应的时光、交易和知章界面。时光界面：可以看到自己发送的时光消息和别人发布的时光消息，如图3 时光界面所示。我的界面：里面有课程表、时光积分、我的时光、我的知章、我的收藏、我的交易和系统设置功能，还可以修改个人信息，如图4 我的界面所示。这些功能，我们都设计为启动画面，热区的运用，淡入淡出，左右滑动，弹出和单击等交互效果。

图1 交易界面

图2 知章界面

图3 时光界面

图4 我的界面

3 具体实现的内容

3.1 logo 模块的设计过程

大学时光APP 主要面向的是大学生的一些交友、学习、交易等功能。然而这些功能肯定不能同时都在logo 上展现出来，那么就要对这些特性进行筛选，选出最想表达的，所以最终我们定下了大学生这个特性。特性选择完之后进行初稿的设计、我们选择了一个正在看书的小女孩，但经过多方的调查，反响都不是很好，最终定下来一个小女孩的侧面作为主要的元素。主要元素定下来之后，进行了手绘，把我们的想法变成实际的东西展现出来。再把纸上的东西用Adobe Illustrator 进行绘制，运用选择工具、矩形工具、钢笔工具等工具进行绘制，先画出大体的模样，然后进行细节的改变，经过多次的实验和修改，定下来背景为黑色，然后又加上了APP 的名字和英文单词、还是觉得少了什么点什么，多次实验后，加了一束光，这束可以说是点睛之笔，整个图标变得活了起来，这才定下来最终的logo 图标，如图5 所示。

图5 大学时光APP 应用程序的logo

3.2 引导界面的设计过程

大学时光APP 引导界面，工作人员主要想以整洁、简单为主。所以引导界面上，并没有展现太多的元素，在设计初期，本想以灰色背景为主、然后加上白色字体的励志言语，以竖列的座右铭形式展现出来，最终因为这种形式太过于大众化而取消，工作人员都统一认为用APP 的名称用以装饰即可，即简明扼要又通俗易懂。又因灰色背景的颜色和logo 过于相近，使这个格调显得暗沉，所以把背景改成和主页面一样的设计风格变为黄色，文字也因背景的调整进行了相应的调整，整体显得更加的和谐和美观。

3.3 登录界面的设计过程

登录界面主要想要实现的就是用户名的输入，密码的输入和登录按钮。用户名的输入和密码的输入都需要相应的文本框，文本框起初用photoshop 中矩形工具下拉栏中的圆角矩形工具来进行文本框背景、大小、边框粗细来进行调整，后来对页面进行了优化，改为一条横线。用户名、密码常规用文字来进行装饰，但我们却选用小图标的方式代替了文字描述。登录按钮采用白色背景和黑色汉字和无边的圆角矩形进行修饰。记住密码、立即注册即记住密码等等的文字则用Photoshop 中横排文字工具。

4 结论

在大学时光APP 开发过程中，美观的界面吸引了不少用户，给APP 整体增加了不少的光彩。本文讲述了大学时光APP 运用Photoshop 和Adobe Illustrator 等辅助软件进行了用户各个界面和logo 设计的过程、设计初期遇到的问题和最后整合后的方案。

大学生创新创业项目: 防灾科技学院大学生创新创业项目“大学时光APP”(201911775093)。