iOS开发中的UI/UE设计技术

朱丽进

摘要：该文主要介绍UI/UE技术在iOS开发中起到决定性的核心作用，同时就高职学生的特点，开设UI/UE相关技术课程，利用辅助设计工具Photoshop、Sketch以及Xcode等，以完整案例欢乐颂为例，带领学生如何完成UI/UE设计过程。

关键词：UI/UE；图标；界面；交互式；欢乐颂

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）03-0070-02

1 iOS应用开发UI/UE设计概述

智能手机发展到今天已经十余年载，风靡全球，苹果的iphone手机更是独占鳌头，当然这也与苹果iphone手机的UI界面美观和很好的用户体验分不开的。试想一下，一个看起来不美观的应用程序，是很难引起用户的点击和继续探索的欲望的。更何况在竞争如此激烈的APP市场中，出众的UI设计才能完胜。

在iOS应用开发中，作为手机人机交互的纽带——UI，它将成为手机市场的新卖点，同时也是手机的发展动力。苹果iphone手机基于iOS 系统，有很多传感器应用在手机上，如：运动，加速传感器、环境光传感器、距离传感器、磁力计传感器、陀螺仪等等，让操作界面更是酷炫无比，脱离了传统手机应用的单调和刻板。本文主要结合iphone本身的特点以及手机用户的视觉，触感等方面入手，阐述在iOS 开发中如何把UI设计的让用户操作习惯，审美特征，视觉感受，功能期望等等做到更好，让用户在人机交互中体验最大程度人性化。本文以课堂教学案例校园欢乐送APP UI设计为例。

2 iOS 开发中UI/UE设计基础

1） 图片的处理

对于网络上丰富的图片资源，我们在做设计的时候都可以进行综合运用，不但提高视觉效果也提高了设计的效率。例如应用程序启动画面通常都是有若干张图片轮播滑动产生的效果，这时我们就需要图片素材了。但是网络上的图片往往不符合要求，我们需要进一步处理。例如，图像大小应针对具体的设备来进行裁剪；图片中的冗余信息我们也要去掉；另外還要针对图像的格式进行恰当选择，位图和矢量图如何取舍，更多的时候我们选择PNG格式的图片。

要想把照片处理达到我们想要的预期效果，更多时候我们选择Photoshop软件。

美国 Adobe 公司研究和推出的 Photoshop软件在全球范围内广泛使用，通过融入平面广告设计、图像合成、包装设计等多方面功能来完成新的融合，在多个领域均有涉猎和拓展，从用户使用和处理效果来说，Photoshop已经成为了平面图像处理的标准之一。Photoshop本着以人性化、实用化为目标，通过其简介的操作界面，快速有效地完成各种设计，提高的设计的效率，收到广大设计者的信赖。

2） APP图标及按钮的设计

APP图标一般放置在主屏幕上的，用户通过点击图标来启动应用程序，它就类似于你手机APP产品的LOGO，用户看到图标的时候就对你的APP产生了第一印象，甚至有可能以此来判断你的APP品质，作用以及可靠性等，因此图标设计的好坏关系到你APP的存亡，它是APP UI设计中非常重要的工作。

如何做好APP图标设计，我们先要将APP的应用功能具体化，然后通过联想找到对应图形，紧接着将抽象图形。例如天气预报APP，我们联想到太阳，云都是跟天气有关，因此iphone中的APP用太阳和云朵抽象组合，图标来源与生活，让用户也倍感亲切。

但值得注意的是，抽象图形不能过于抽象，否则很难分辨，从而降低了图标的识别度，从而适得其反。

有时候相同功能的APP可能存在一定的相似之处，如微信和米聊，都是聊天通信应用程序，他们都是有气泡组成的，因此在做设计之前最好还是要做好调研工作，看看同行设计的样子，然后通过分析调整设计，做到区别而又新颖独特。

Sketch是一款使用与所有设计师的矢量绘图应用，而矢量图也正是目前网页、图标和界面设计最好的方式。同时Sketch除了矢量编辑的功能外，还添加了一些基本位图工具，如模糊和色彩校正等。目前越来越多的设计师开始使用Sketch去做UI界面设计，原因很多，一方面它足够轻巧，对系统配置要求不高；另一方面，内置了大量提高工作效率的特性，使用起来很方便；还有救是他的朵花瓣工作模式，让设计师在同一个界面可以将交互过程串联起来非常方便。

欢乐送app主图标作为一个app的灵魂，必须要充分反映此款app的主题，首先底部选择一个圆角矩形作为背景，因为此款app使用对象是大学生，主要是用于大学生代拿快递的app。现在大部分大学生性格急躁做事情急于求成，使用圆角矩形寓意让学生做事情学会圆润，做事情不能急躁。然后图标背景色是灰白渐变色，如果单独选用白色会显得单调。翅膀有两重含义，一种是代表了我国快递业迅速发展；另一种则代表使用欢乐送app可以让学生更快的拿到快递。翅膀的色彩也选用紫蓝色的渐变色。代表了大学生充满了活力，给人一种生机勃勃的感觉。此款图标给人一种简答大方明了的感觉。

3 iOS应用交互式UI设计

1） APP高保真原型设计

产品原型设计是整个产品面世之前的一个框架设计，将页面的模块，元素、人机交互的形势，利用设计工具对产品进行生动的表达。设计软件原型，它并不是可以作为最终使用的软件，而是利用设计工具勾勒软件的整体结构，并添加一些交互效果，甚至可以模拟软件的功能操作。根据项目的大小、类型、工期以及用户需求的不同可以选择采用草图原型。低保真原型或者高保真原型。

作为计算机专业学生，我们选择Axure RP帮助我们根据需求设计功能和界面，可以快速地创建应用软件的线条图、流程图、原型和规格说明文档，同时支持多人协作和版本控制管理，是一款非常专业的快速原型设计软件。

实际设计过程中，我们利用Axure RP丰富的部件库来搭建每一个页面，结合母版的设计从而减少重复工作量。然后充分利用Axure RP的动态面板，变量，链接行为，部件行为等制作丰富的交互效果。同时还可以利用中继器模拟数据库的增删改查操作，从而达到高保真原型设计的要求。

我们以校园欢乐送APP设计为例，在实际教学过程中，让学生在校园里跟潜在学生用户进行需求沟通和市场调研，然后进行项目评估，做好之后，让学生在课堂上针对这个项目完成APP原型设计。

这款欢乐送APP，主要是用户发布自己的快递信息，包括送达时间，快递公司，取货号码，备注，赏金工作人员可以及时掌握，然后申请抢单，将快递给用户送上门，然后用户通过APP支付佣金。主要功能包括：

引导页：App开始动图展示。点击GO进入。

用户登录：登陆App，通过学号和身份证后六位登录。

动态界面：用户发布快递信息的动态，工作人员可以在此界面接单。

发布界面：用户可以在此界面发布快递信息（送达时间，快递公司，取货号码，备注，赏金）点击确认发布跳转到订单界面。

订单界面：包括我的订单，我的跑腿。

我的界面：里面有自己账户的金额，签到记录，积分管理，实名认证，收货地址，设置，分享赚积分。

这些功能，我们基本都设计为启动画面，Tab的切换，热区的运用，淡入淡出，左右滑动，上下滑动，弹出面板，回弹效果，单击等等交互效果。

2） Xcode的引入，让设计师知其所以然，提高设计效果

Xcode本身提供了很多便捷化的图形化设计工具，几乎不用编码，就可以完成一个简单的APP设计。因此引入Xcode的安装和项目结构，以及简单Demo的制作：如使用故事版创建交互效果，利用Tab Bar完成交互效果，页面滚动效果和导航效果等等。让学生在这些内容的学习过程中，能够对软件的基本开发原理，像素等有所了解，在设计过程中，可以严格按照要求，会搭配编码工程师完成相应的UI设计，大大提高设计的效率和效果。

4 总结

在iOS 开发过程中引入UI/UE设计知识，给整个教学提高了很大的效果，很多大学程序设计类课程都是重技术轻设计，忽略了软件的前期策划和创意设计部分，但实际过程中，APP的原型制作恰恰是对软件的功能和用户体验起决定性作用。同时，对于高职类的学生来说，他们的专业基础知识相对比较薄弱，一开始就学习生硬的编码，难度大，进而失去对专业的学习兴趣，因此引入UI/UE设计，能提高学生学习的积极性，更增加了他们的创造力。课堂上，他们可以暂时抛掉枯燥乏味的后台开发，编码，投身并不断尝试新的想法和设计，反复研究交互效果，多样化的作品，让学生更有学习的成就感。

参考文献：

[1] 赵晓影.Android应用开发中的UI[J].设计劳动保障世界，2013（12）.

[2] 王东.Photoshop平面广告创意技巧及应用[J].电子出版，2003（4）：51-54.

[3] 静电.Sketch+Xcode双剑合璧移动UI设计师快速上手指南[M].北京：电子工业出版社，2015.

[4] 何健宁.基于Axure的APP原型设计在教学中的应用[J].电脑开发与应用，2014（8）.

[5] 林晓亮.智能手機UI主题界面交互设计[D].南昌：南昌大学，2016.