诺森UI界面设计与制作案例教程傅伟9787830028404北京希望出版社

章UI设计基础 1.1 了解UI设计 .............................................................................2 1.1.1 UI设计概念 ......................................................................2 1.1.2 UI设计原理 ......................................................................2 1.1.3 UI设计流程 ......................................................................5 1.1.4 UI设计常用软件 ...............................................................6 1.2 UI色彩设计 .............................................................................7 1.2.1 色彩的基本理论 ...............................................................7 1.2.2 色彩的搭配法则 ...............................................................8 1.3 UI常用字体规范 ...................................................................10 1.3.1 文字设计的要素 .............................................................10 1.3.2 常用字体的类型 ............................................................. 11 1.3.3 界面字体的规范 .............................................................12 1.4 界面的常见构图类型............................................................14 1.4.1 井字形构图 ....................................................................14 1.4.2 三角形构图 ....................................................................15 1.4.3 放形构图 ....................................................................15 1.4.4 折线形构图 ....................................................................16 1.4.5 直角形构图 ....................................................................16 1.5 界面布局的要素 ......................................................................17 1.5.1 页面的留白 ....................................................................17 1.5.2 页面的对齐方式 .............................................................17 1.5.3 界面的间距 ....................................................................19 1.5.4 界面的层次 ....................................................................20 第2章 网页UI设计 2.1 案例精讲：欧美音乐首页设计 ................................... 2.1.1 制作注册栏及导航栏 ...................................................... 2.1.2 制作Banner区域 ............................................................27 2.1.3 制作内容区域1 ..............................................................31 2.1.4 制作内容区域2 ..............................................................35 2.1.5 制作内容区域3 ..............................................................39 2.1.6 制作内容区域4 ..............................................................42 2.1.7 制作内容区域5 ..............................................................45 2.1.8 制作页脚区域 ................................................................48 2.2 网页UI设计基本概念 ...........................................................53 UI界面设计与制作 · I · 00 UI界面设计与制作_1-10.indd 1 2021/11/5 星期五 1:12:49 第3章 移动UI设计 3.1 案例精讲：健活APP界面 ..........................................64 3.1.1 制作闪屏页 ....................................................................64 3.1.2 制作登录页面 ................................................................66 3.1.3 制作首页1 .....................................................................71 3.1.4 制作首页2 .....................................................................81 3.1.5 制作首页3 .....................................................................90 3.2 iOS系统的设计原则 ............................................................99 3.2.1 统一化 ...........................................................................99 3.2.2 凸显内容 .....................................................................100 3.. 适应化 .........................................................................101 3.2.4 层级 ........................................................................101 3.2.5 易操作 ....................................................................10 . iOS界面尺寸与控件的设计规范 ......................................10 ..1 界面尺寸 .....................................................................10 ..2 控件规范 .....................................................................103 3.4 Android系统的设计原则..................................................103 3.4.1 核心视觉载体 ..............................................................103 3.4.2 层级空间 .....................................................................103 3.4.3 动画 ............................................................................104 3.4.4 颜色 ............................................................................104 3.5 Android界面尺寸与控件的设计规范 .............................105 3.5.1 界面尺寸 .....................................................................105 3.5.2 控件规范 .....................................................................105 3.6 常见的移动UI界面 .............................................................106 3.6.1 闪屏页 .........................................................................106 3.6.2 引导页与浮层引导页 ....................................................108 . 网页UI设计原则 ...................................................................53 ..1 以用户为中心 ................................................................43 ..2 视觉美观 .......................................................................54 .. 主题明确 .......................................................................54 ..4 内容与形式统一 .............................................................55 ..5 有机的整体 ....................................................................56 2.4 网页UI版式设计的形式美 ..................................................56 2.4.1 主次关系 .......................................................................56 2.4.2 虚实对比 .......................................................................57 2.4.3 比例尺度 .......................................................................58 2.4.4 对称与均衡 ....................................................................58 2.4.5 对比与调和 ....................................................................52..6节奏和韵律 ....................................................................60 2.4.7 量感与空间尺度感 .........................................................61 上手实操 61 UI界面设计与制作 · II · 00 UI界面设计与制作_1-10.indd 2 2021/11/5 星期五 1:12:4第章图标设计 4.1 案例精讲：潮流小图标 ..................................................... 11.1.1 毛玻璃便签图标设计 ..................................................... 11.1.2 拟物化相机图标设计 .....................................................127 4.2 图标的基础知识 ..................................................................135 4.2.1 图标的概念 ..................................................................135 4.2.2 图标的分类 ..................................................................136 4.. 图标的设计原则 ...........................................................137 4.3 图标的设计规范 ..................................................................13.3.1 图标的尺寸 ..................................................................13.3.2 图标的格式 ..................................................................142 4.4 图标的风格类型 ..................................................................142 4.4.1 拟物化 .........................................................................142 4.4.2 扁平化 .........................................................................143 4.4.3 MBE ............................................................................146 4.4.4 线条 ............................................................................146 4.4.5 毛玻璃 .........................................................................147 上手实操 147 第5章 软件界面设计 5.1 案例精讲：橙子书坊软件界面制作 .................................149 5.1.1 制作侧导航栏 ..............................................................149 5.1.2 制作导航栏 ..................................................................155 5.1.3 制作内容区 ..................................................................157 5.2 软件界面设计的基础知识 .................................................177 5.2.1 软件界面设计的概念 ....................................................177 5.2.2 软件界面设计的流程 ....................................................177 5.. 软件界面设计的原则 ....................................................179 5.3 软件界面设计的规范..........................................................180 5.3.1 软件界面设计的尺寸及单位 .........................................181 5.3.2 软件界面设计的界面结构 .............................................182 5.3.3 软件界面设计的布局 ....................................................18 .. 空白页 ......................................................................... 110 3.6.4 首页 ............................................................................ 110 3.6.5 个人中心页 .................................................................. 113 3.6.6 列表页 ......................................................................... 113 3.6.7 播放页 ......................................................................... 115 3.6.8 详情页 ......................................................................... 116 上手实操 117 · III · 目录CONTENTS 00 UI界面设计与制作_1-10.indd 3 2021/11/5 星期五 1:12:49 5.3.4 软件界面设计的字体 ....................................................183 5.3.5 软件界面设计的图标 ....................................................185 5.4 软件常用界面类型 ..............................................................186 上手实操 189 第6章 游戏界面设计 6.1 案例精讲：七巧板拼图游戏界面设计 .............................191 6.1.1 启动界面 .....................................................................191 6.1.2 主界面 .........................................................................199 6.1.3 游戏界面 ..................................................................... 211 6.2 游戏界面设计的基础知识 .................................................222 6.2.1 游戏界面设计的概念 ....................................................222 6.2.2 游戏界面设计的流程 ....................................................222 6.. 游戏界面设计的原则 ....................................................2 . 游戏界面设计的规范..........................................................225 6.3.1 游戏界面设计的尺寸及单位 .........................................225 6.3.2 游戏界面设计的界面结构 .............................................226 6.3.3 游戏界面设计的布局 ....................................................226 6.3.4 游戏界面设计的字体 .....

本书以“案例精讲→知识讲解→经验之谈→上手实操”为主线，对UI设计的基础知识及其设计应用进行了全面介绍。全书共分6章，章主要讲述UI设计的基础知识；第2～6章按照UI设计的各应用场景进行介绍，分别讲述网页UI设计、移动UI设计、图标设计、软件界面设计、游戏界面设计等内容。 本书结构合理，图文并茂，易教易学，适合作为UI设计与制作相关课程的教材，也可作为广大UI设计制作人员的参考用书。