
相信大部分读者对用户界面都不陌生,随着各种高档电子产品的普及化,很多用户开始对用户界面提出了更高的要求。用户界面是帮助用户与机器设备进行交互的平台,一款优秀的用户界面应该是美观适用,并易于操作和学习的。 本书以Photoshop UI界面交互设计为基础,重点讲解了线下最为热门的手机APP界面设计,如安卓手机与苹果手机常用的APP界面,帮助读者在最短的时间内成为APP界面设计高手。 本书共7章:APP用户界面基础、APP基本图形元素、APP控件设计、APP显示区设计、拟物的图标制作、扁平风格的图标制作、APP常用效果设计实例,读者学习后可以融会贯通、举一反三,制作出更多精彩、漂亮的界面效果。 本书适合大部分Photoshop UI设计爱好者与设计专业的学生和成人阅读,本书的知识点安排合理,内容全面完善,操作案例精美实用、讲解详尽。配套的多媒体光盘中包括本书所拥有的实例源文件和元素素材,方便读者学习和参考。
近几年,有一个新兴的词在设计领域诞生,这个词就是“UI”。 在短短的几年时间里UI设计师越来越多,设立UI部门的企业越来越普遍,各大院校也出现了和UI相关的专业, UI 设计的组织和网站层出不穷。这一切都预示着一个“UI”大时代已经到来。 所谓的UI包含UI交互、 UI界面 和UI图标三个部分。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。所以作为一个手机界面的设计师应该具备勇敢、坚持的“画上帝”精神,把最新的趋势和思想带给团队和领导层,要明白手机的产品设计已经步入一个界面时代,准确地说,是应用体验和用户需求的时代。 综上所述,一个好的手机界面设计师应该具备以下几个要点: 1.第一眼体验。当用户打开界面的时候,我们应该让用户有一种赏心悦目的感觉,让人一看界面就知道自己要做什么,该做什么,这样才能吸引用户,从而让用户对我们的产品感兴趣。 2.便捷的输入方式。有时候我们应该考虑到用户也有不方便的时候,所以一个便捷的输入方式能给用户一种轻松的感受,让用户更加离不开我们的产品。 3.呈现用户需要的。有的时候用户外出需要地图、天气预报、快速回复邮件等,因此需让他们在短时间内就能达到自己的目的,来换取更多的时间做自己喜欢的事,应提升应用表现,改变UI,让用户所需结果的呈现变得更快。这样也能使我们的产品更畅销。 4.适当选择横向呈现方式。我们知道手机的屏幕是长方形的,有的时候用户需要使用手机观看视频,这时候使用横屏能达到更好的效果,所以选择横向呈现方式能让用户更加喜欢我们的产品。 5.让你的应用更为独特。任何东西都不是一成不变的,你能想到的别人不一定想不到,所以让你的应用更为独特是你的产品能否继续发展的前提。这需要我们有很好的创新精神。 6.不忽视任何细节。俗话说得好:“细节决定一切。”细节方面也是十分重要的,一个精美的图标也会让你的应用显得鹤立鸡群,让人流连忘返。 本书主要采用基础知识和应用案例相结合的方法,向读者系统地介绍使用Photoshop CC对各种手机UI 界面进行设计和制作的操作方法及常用技巧。 界面设计是APP开发中最重要的方面,并涉及整个开发队伍。 对于应用软件来说,一个基本现实就是:用户界面是面向用户的。用户需要的是开发者开发的应用软件满足其需求,并且易于使用。用户界面走到今天也是经历千锤百炼的,要做到易用就更不容易了。 现在,我们将为您奉献一本APP界面设计图书,它采用完全适合自学的“基础理论”和“完全案例”两种形式编写,兼具技术和应用技巧参考的特点,书中所有案例的源文件和素材文件均可在电子出版社的网站下载。希望通过本书能够帮助您解决学习中遇到的难题,提高技术水平,快速学会手机UI界面设计,成为设计高手。
01 APP用户界面基础 1.1 手机界面设计的基础 1.1.1 什么是手机界面设计 2 1.1.2 界面构成的基本区域 3 1.1.3 手机界面效果的规范性 4 1.1.4 手机界面效果的个性化 4 1.1.5 手机UI设计基本流程 5 1.2 安卓与苹果手机系统组件介绍 1.2.1 安卓系统基础组件 6 1.2.2 苹果系统基础组件 6 1.2.3 登录界面设计中几种常见的设计思路 7 1.2.4 导航设计常见的4种制作风格 8 1.2.5 手机界面设计常用的5种布局 8 1.3 手机界面设计尺寸标准 1.3.1 英寸(Inch) 9 1.3.2 分辨率(Resolution) 9 1.3.3 网点密度(DPI) 10 1.3.4 屏幕密度(Screen Densities) 10 1.3.5 图标尺寸大小与格式 11 1.3.6 iPad UI设计的尺寸规范 12 1.4 手机界面的色彩搭配与视觉效果 1.4.1 色彩的重要性 14 1.4.2 色彩的分类 15 1.4.3 色彩搭配方法 15 1.4.4 简约明快型 16 1.4.5 趣味与独创型 16 1.4.6 高贵华丽型 16 1.5 UI的设计流程及方法 1.5.1 定位指南图 17 1.5.2 核心功能确认 17 1.5.3 ADS 17 1.5.4 画草图 17 1.5.5 低保真原型与高保真原型 18 1.5.6 视觉设计 19 1.5.7 交付 20 02 APP基本图形元素 2.1 APP基本图形制作 2.1.1 图形制作 22 2.2 实例——图形制作 2.2.1 圆形 23 2.2.2 正方形、长方形 31 2.2.3 正方形、长方形延展 36 2.2.4 圆角 43 2.2.5 组合形状 48 03 APP控件设计 3.1 APP常用控件制作 3.2 实例——常见控件制作 3.2.1 按钮 57 3.2.2 单选框 65 3.2.3 选项框 72 3.2.4 滑动条 80 3.2.5 登录按钮 87 3.2.6 TAB切换 93 3.2.7 锁屏 100 04 常见的显示区制作 4.1 常见的显示区制作 4.2 实例——常见显示区的制作 4.2.1 搜索框 107 4.2.2 搜索框延展1 112 4.2.3 搜索框延展2 118 4.2.4 主屏显示区 123 05 APP中的图标制作 5.1 APP中图标制作的基本知识 5.2 实例——一般的图标制作效果 5.2.1 现实感的图标 129 5.2.2 简笔画风格的图标 135 5.2.3 卡通图标 146 5.2.4 应用线条的图标 153 06 扁平风格的图标制作 6.1 扁平设计风格的特点 6.2 实例——扁平风格的图标效果 6.2.1 纯平面 161 6.2.2 轻折叠 168 6.2.3 轻质感 175 6.2.4 折纸风 183 6.2.5 有明显投影 190 6.2.6 有厚度感 194 07 APP常用效果制作 7.1 APP常用效果制作基础知 7.2 实例——APP常用效果制作 7.2.1 梦幻效果 204 7.2.2 透明效果 208 7.2.3 边框效果 214 7.2.4 色块效果 218 7.2.5 照片效果 222 7.2.6 像素效果 229 7.2.7 清新效果 237 7.2.8 单色效果 241 7.2.9 英伦风效果 246 7.2.10 可爱效果 253