创意UI:Photoshop玩转App设计(第2版)
上QQ阅读APP看书,第一时间看更新

1.1 移初动识UAIp中p基

先让我们来认识一下什么是App、手机App与平面UI的区别、常见智能手机的操作系统、App的设计要点以及常见App设计的经典案例。通过讲解让读者初步走入App的世界中。

1.1.1 什么是App

App即Application的简写,因此被称为应用程序。由于iPhone智能手机的流行,现在的App多指第三方智能手机的应用程序。目前比较著名的App商店有Apple的iTunes商店里面的App Store和Android的Google Market。

iTunes商店里面的App Store

Google Market

安卓下载界面

小编分享

自从iPhone系列改变了整个世界对于手机系统的看法后,手机应用的发展就被众多开发商所聚焦,各种个人或者企业级App涌向应用市场,这也使得App应用竞争颇为激烈。然而用户们更喜欢轻便、简洁的应用,因此更多有远见的开发商便开始往轻应用方向发展。

1.1.2 手机App与平面UI的区别

无论你是手机软件开发人员,还是用户界面体验设计师,或者手机App客户经理、项目经理,掌握手机App与平面UI的区别都是必要的。在这里给大家分享一下手机App客户端UI设计方面的内容,努力让用户拥有更好的界面体验感。

小编分享

UI的概念一般理解为界面美化设计——用户界面(user's interface),但重点在于研究客户,如果客户能够感受到网站的友好、简洁、舒适、易用,那么这就是成功的界面设计。

手机UI的平台主要是手机的App客户端。平面UI的范围非常广,包括了绝大部分UI的领域。手机UI的独特性,比如尺寸要求、控件和组件类型,需要平面设计师重新调整审美基础。手机的界面设计可以做到完美,但需要无数设计师的共同努力和创新。很多设计师存在的问题是不能够合理布局,不能够合理地将网站设计的构架理念转化到手机界面的设计上。他们常常会觉得手机界面限制非常多,觉得创意性发挥空间太小,表达的方式也非常有限,甚至觉得很死板。但真实的情况并不是这样的,了解手机的空间有多少,然后合理创意,便可创造出具有独特风格的手机App。

下面我们来欣赏手机App与平面UI,看看它们之间的区别。

手机App

小编分享

App可以在已有的基础模式上升级产品,甚至创造产品。界面设计师的思维需要转变,主要表现在两个方面:一是从自身出发提出好的设计理念,而不是从外在的环境中模仿;二是提升设计基本功,一个设计师的眼界、内心、生活都需要不断扩展和提升,作品会反映出设计师的生活。

1 平板平面UI设计

2 手机UI设计平面图

3 一整套的网页UI设计平面图

4 扁平化风格UI设计

小编分享

手机App的制作要点:可以利用Photoshop制作出各种智能手机UI常用元素,包括常用图形、控件、启动图标以及图片特殊处理等。

1.1.3 两大智能手机的操作系统

下面是两大主流智能手机的操作系统介绍。

Google Android:谷歌与开放手机联盟合作开发了Android,这个联盟由包括中国移动、摩托罗拉、高通、宏达和T-Mobile在内的30 多家技术和无线应用的领军企业组成。优点:具备高级图形显示和上网功能,界面强大,可以说是一种融入全部Web应用的单一平台。

Google Android

小编分享

Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导与开发。Android操作系统最初由Andy Rubin开发,主要支持手机。

iOS 10:美国苹果公司开发的手机和平板电脑操作系统。在重新思考iOS的设计时,设计师更希望围绕iOS中深受人们喜爱的元素,打造一种更加简单实用而又妙趣横生的用户体验。最终,设计者优化了iOS的工作方式,并以此为基础重新设计了iOS的外观。之所以这样做,是因为能够服务于体验的设计才是出色的设计。

iOS 10

1.1.4 App的设计要点

App应用程序无处不在,然而很多App应用软件在设计方面做得并不够。应用商店里面大多数App应用设计没有多大改动,几乎都是一个模板做出来的。然而,在智能手机时代,App应用开发已经成为发展动向,那么,怎样才算是好的App设计呢?

1.要拥有自己的App应用设计理念。由于移动设备空间较小,App设计应尽量保持简洁,若非必要就不要放上华丽的图形或其他信息去吸引用户,App设计需要让信息一目了然,不隐晦,不误导。

简洁的App图标

2.在App的设计中,首先得确定你的App设计创意是独一无二的,在网络上没有跟你的设计相类似的。如果有类似的App设计,那就要多多考虑,争取超越并且要有一些独特的优化设计。用户都喜欢用新的东西,如果你设计的App应用过于陈旧,很难让用户对你的设计留下印象。因此,如何设计出有特色的、与众不同的App,是App的设计要点之二。创意成为App设计中的方向所在。

形形色色的苹果App设计

随着苹果公司手机的销量日益增大,苹果公司手机创意十足的Logo也被人们所关注。正是这个“被咬了一口”的苹果,经过了数十年的发展,成为街知巷闻的国际品牌,并以越来越多的广告形式逐步发展更多不同的App造型。但自始至终,无论怎么设计延展,这个“被咬了一口”的苹果仍保持着它原有的基本造型。

3.把握好你的App应用需求,确认核心功能,模拟出设计初稿。通过移动设备的人机界面指南图来定位自己的App应用软件,将提出的各种需求进行汇总讨论,设计ADS(对应用定义的一段陈述)并根据前面所整理的资料,开始进行产品的各个基本功能的设计,包含移动中使用场景、按钮、显示文字等。

App的不同应用需求

4.通过低保真原型和高保真原型两步操作,完成视觉设计,最终确认App设计工作。“低保真原型”是指利用原型制作工具,将草图搬上电脑,尽量使用黑白、粗糙的线条来进行设计,不用纠结于细节。“高保真原型”是指在低保真原型基础上进行细节修改,当高保真原型完成后,就可以进行视觉设计。App应用设计提倡有质感、有仿真度的图形界面,让App设计的界面尽量接近用户熟悉或者喜欢的风格,可以在配色和图标上下功夫。

App配色和图标绘制

经过上面四个步骤,设计一个好的App应用软件界面就不是很难了。

设计师应经常举行关于App设计的交流会议,目的是让大家不要过于沉浸在自己设计里面。App应用设计效果如何,更多的是由用户的体验效果决定的。一个优秀的App设计者,应该多从用户的角度去考虑和设计,这样,效果才会让大家满意。

1.1.5 常见App设计的经典案例

App设计的风格各异,种类繁多,但作为一个优秀的App标志设计,其设计风格必须符合其内容要求,能更好地表现App设计的目的。市面上经典的App设计比较多,下面我们来看看有哪些经典案例值得大家学习。

iOS 10系列的App图标

苹果手机系统iOS系列一直都在引领智能手机系统潮流,第一代iOS面世让无数的机友们惊叹,原来手机可以这么玩,随着iOS的换代更新,吸引的果粉越来越多。

相较于iOS9来说,iOS10的美工设计比iOS9更加讨喜,虽说和iOS7沿袭下来的主题风格一样,但是在iOS10中苹果采用了大量的圆角来取代之前的直角,并在配色上更加丰富,多了一些活泼的气氛。这样的设计元素对大众用户来说显然比iOS9更好看,也在一定程度上成为升级的理由。iOS10控制中心也进行了一点小的调整,音频播放界面单独出了一页,可以通过滑动控制中心看到,并且可操作内容也丰富了。iOS10的锁屏界面发生了很大的变化,新的锁屏界面现在被分成了三部分,默认首屏还是跟以前一样,显示时间日期和通知消息。而向右滑动是进入Widget插件界面,向左滑动则是进入相机。iOS10中取消了“滑动解锁”,新的解锁方式改成了按压Home键,必须按下去而不是触摸。iOS10现在支持抬起手机自动亮屏,不过需要iPhone 6以上的机型才支持。iOS10的通知系统继承了iOS9的快速处理功能,但是增加了扩展视图,也相较于iOS9多了一些步骤。在iOS10中,iMessage已经完全变成了一个现代的聊天工具,而且玩法丰富多彩,。在iOS10中原生地图也加入了一些新的功能,第一个比较明显的就是现在地图上会显示当当前位置的天气状况,包括气候、温度和空气质量。闹钟方面,现在“时钟”应用在原有的基础上增加了一个“就寝”选项,这是通过你的起床时间和预设的睡眠时间来倒推就寝的时间,并给予闹铃提醒。如果想要停止闹铃,就必须回答问题。

全新设计的iOS 10界面

库克不止一次强调iOS10是世界上最先进的移动操作系统,iOS10带来了比以往任何一代iOS系统更大幅度的革新。iOS10带来了许多新功能和新特性,并且稳定性和流畅性有不错的保证,不过总体而言iOS10更多是在原有功能的细节上入手,对部分功能进行重新分区和展示设计,使之变得人性化。而3D Touch利用率的增加以及地图、Siri等原生应用SDK开放可以看作是苹果借第三方之手来丰富和完善iOS系统的体验。