描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787121414329丛书名: UI设计从业必读
为了增加读者的学习渠道,增强读者的学习兴趣,本书配有配套资源包。在配套资源包中提供了本书所有实例的相关素材和源文件,以及书中所有实例的教学视频,读者可以跟随本书提供的案例做出相应的效果,并能够快速应用到实际工作中。
本书主要讲解了iOS系统和Android系统两种移动设备系统界面的结构及设计规范,全面解析了移动端App界面的设计流程及技巧。本书还介绍了如何使用Adobe XD、Photoshop、PxCook和Cutterman等主流软件进行UI设计制作。
本书共6章。第1章主要讲解移动UI设计基础;第2章主要讲解iOS系统界面设计;第3章主要讲解Android系统界面设计;第4章主要讲解移动UI图标设计;第5章主要讲解iOS系统界面应用设计;第6章主要讲解Android系统界面应用设计。
本书将提供全部案例的素材、源文件和教学视频,读者可以结合书、练习文件和教学视频,提升移动端App界面设计的学习效率。
第1章 网页UI设计初体验
1.1 初识网页UI ···································1
1.2 网页UI的分类 ································2
1.3 网页UI设计的工作流程 ····················5
1.3.1 网页产品调研 ···············································.5
1.3.2 网页原型设计 ···············································.6
1.3.3 设计网页UI ··················································.7
1.3.4 网页UI 标注 ·················································.8
1.3.5 网页UI 切图输出 ·········································.8
1.4 深刻理解网页UI设计原则 ·················8
1.4.1 视觉美观 ·······················································.8
1.4.2 主题明确 ·······················································.9
1.4.3 内容与形式相统一 ·····································.10
1.4.4 整体性 ·························································.11
1.4.5 快速加载 ·····················································.11
1.4.6 为用户考虑 ·················································.12
1.5 网页UI的设计风格 ························13
1.5.1 拟物化风格 ·················································.13
1.5.2 扁平化风格 ·················································.13
1.5.3 极简化风格 ·················································.14
1.5.4 3D 风格 ·······················································.14
1.5.5 插画风格 ·····················································.15
1.5.6 低多边形风格 ·············································.15
1.5.7 无边框风格 ·················································.15
1.5.8 纵向分割风格 ·············································.16
1.5.9 超级头版风格 ·············································.17
1.6 设计网页UI的常用工具 ··················17
1.6.1 Axure RP 9 ···················································.17
1.6.2 Photoshop 和Illustrator·······························.18
1.6.3 Sketch 和Adobe XD ···································.21
1.6.4 PxCook 和Cutterman ·································.23
1.7 本章小结 ····································24
第2章 合理的网页版式与布局
2.1 了解网页布局 ······························25
2.1.1 网页布局的目的 ·········································.25
2.1.2 网页布局的操作流程 ·································.26
2.2 网页布局的基本方法 ·····················27
2.2.1 网页的布局设计 ·········································.27
2.2.2 网页布局的原则 ·········································.28
2.3 网页布局的常见类型 ·····················29
2.3.1 国字型 ·························································.30
2.3.2 拐角型 ·························································.30
2.3.3 标题正文型 ·················································.31
2.3.4 左右框架型 ·················································.31
2.3.5 上下框架型 ·················································.31
2.3.6 封面型 ·························································.32
2.3.7 变化型 ·························································.33
2.4 根据内容位置决定网页布局方式 ······33
2.4.1 满屏式网页布局 ·········································.33
2.4.2 一栏式网页布局 ·········································.34
实战练习01——设计并制作白酒网页 ···············.35
2.4.3 两栏式网页布局 ·········································.40
实战练习02——布局啤酒网站 ···························.42
2.4.4 三栏式网页布局 ·········································.45
2.4.5 水平和垂直居中的网页布局 ·····················.47
2.5 页面分割方向的布局方式 ···············48
2.5.1 纵向分割 ·····················································.48
2.5.2 横向分割 ·····················································.49
实战练习03——布局家居网站 ···························.49
2.5.3 纵向与横向复合型 ·····································.52
2.5.4 运用固定区域的设计 ·································.53
2.6 网页布局的特性 ···························53
2.7 PC端与移动端网页布局的区别 ········55
2.8 本章小结 ····································56
第3章 奠定基础的网页构成元素
3.1 网页中的线条 ······························57
3.1.1 点、线、面的关系 ·····································.57
3.1.2 网页中应用的线条风格 ·····························.58
3.1.3 线条在网页UI 中的作用 ···························.62
3.2 网页中的标志 ······························66
3.2.1 网页标志的尺寸 ·········································.66
3.2.2 网页标志的特点 ·········································.66
3.2.3 网页标志的设计规范 ·································.67
实战练习01——设计并制作网页标志 ···············.69
3.2.4 网页标志的表现形式 ·································.71
3.3 网页中的图标和按钮 ·····················73
3.3.1 网页图标的概念 ·········································.73
3.3.2 网页图标的设计原则 ·································.73
3.3.3 网页图标的应用 ·····································3
随着信息量的不断增加,人们的生活越来越离不开软件,提到软件就不得不说UI。UI是用户与各种机器和设备进行交互的界面,一个好的UI设计应该同时具备美观与易于操作两个特性。
本书主要通过理论知识与操作案例相结合的方式,介绍使用Photoshop CC 2019进行各种类型UI设计所需的能力和操作技巧。
本书内容安排
本书共8章,下面分别介绍各个章节的具体内容。
第1章 网页UI设计初体验:主要介绍与UI设计相关的理论知识,内容包括初识网页UI、网页UI的分类、网页UI设计的工作流程、深刻理解网页UI设计原则、网页UI的设计风格、设计网页UI的常用工具。这些知识可以帮助读者初步了解UI设计和一些设计软件,为更深入的学习建立良好的开端。
第2章 合理的网页版式与布局:主要介绍网页版式与布局的知识和相应的制作技巧,内容包括了解网页布局、网页布局的基本方法、网页布局的常见类型、根据内容位置决定网页布局方式、页面分割方向的布局方式、网页布局的特性和PC端与移动端网页布局的区别。希望通过本章的学习,读者能够掌握网页的版式与布局设计,这对以后的学习至关重要。
第3章 奠定基础的网页构成元素:主要介绍如何设计网页中的构成元素,内容包括网页中的线条、网页中的标志、网页中的图标和按钮、网页中的导航、网页中的文字、网页中的图片和网页中的富媒体。通过本章的学习,读者应该熟悉网页构成元素的设计要点。
第4章 美观的网页配色:主要介绍与网页配色相关的基础知识和操作技巧,内容包括配色的基础、网页配色的基本要素、网页元素的色彩搭配、根据色调进行网页配色、利用色彩对比进行网页配色和网页中的配色技巧。
第5章 iOS系统UI设计:主要介绍iOS系统UI的设计规范和设计原则,以及一些常用的操作技巧,内容包括iOS系统简介、iOS系统的元素设计、iOS系统的边距和间距设计、iOS系统的文字设计、iOS系统的图片设计、iOS系统的网页布局和iOS系统UI的设计原则。
第6章 Android系统UI设计:Android系统UI设计也是UI设计的重要组成部分,本章主要介绍Android系统UI设计需要注意的问题和所需的知识,内容包括Android系统简介、Android系统的元素设计、Android系统的文字设计、Android系统的图标设计和Android系统UI的设计原则。本章的重点内容是Android系统UI的设计原则。
第7章 适配输出网页UI设计:主要介绍如何适配输出各种网页,内容包括PC端网页的适配输出、iOS系统界面的适配输出和Android系统界面的适配输出。希望通过本章的学习,读者能够掌握网页的适配输出规范,并能够应用到工作中。
第8章 综合案例:主要介绍三个实战案例,分别是设计PC端的家居网页、设计iOS系统的旅游App界面和设计Android系统的家居App界面。希望读者通过案例分析、色彩分析和制作步骤的学习,可以对网页UI设计有更进一步的了解。
本书特点
本书采用理论知识与操作案例相结合的教学方式,详细介绍不同类型的UI设计的设计规范和设计原则。
通俗易懂的语言。
本书采用通俗易懂的语言介绍各种类型UI设计所需的基础知识和操作技巧,确保读者能够理解并掌握相应的功能与操作。
基础知识与实战案例相结合。
本书摒弃了传统教科书式的纯理论讲解模式,采用了少量基础知识和大量实战案例相结合的讲解模式。书中所使用的案例都具有很强的商业性和专业性,不仅能够帮助读者强化知识点,还对拓展思路和激发创造性有很大的帮助。
技巧和知识点的归纳总结。
本书在基础知识和实战案例的讲解过程中给出了大量的提示和技巧,这些信息都是结合作者长期的UI设计经验与教学经验归纳出来的,它们可以帮助读者更准确地理解和掌握相关的知识点和操作技巧。
配套资源包辅助学习。
为了增加读者的学习渠道,增强读者的学习兴趣,本书配有配套资源包。在配套资源包中提供了本书所有实例的相关素材和源文件,以及书中所有实例的教学视频,读者可以跟随本书提供的案例做出相应的效果,并能够快速应用到实际工作中。
本书适合UI设计爱好者、想进入UI设计领域的读者,以及设计专业的大、中专学生阅读,同时对专业设计人士也有很高的参考价值。希望读者通过学习本书,能够早日成为优秀的UI设计师。
编著者
评论
还没有评论。