展开全部

主编推荐语

本书详解Sketch网页界面设计,涵盖移动、PC端UI设计规范及交互动效。

内容简介

本书通过大量的案例制作,详细地向用户介绍了Sketch在设计网页界面时的使用方法。分别针对Sketch绘制线框原型、设计图标、Android界面设计、iOS界面设计、PC端网站UI和UI的输出与交互进行了讲解。通过学习读者应该熟悉移动UI设计和PC端UI设计的规范和设计要点。同时掌握网页界面的输出以及交互动效的添加方法。

目录

  • 内容提要
  • 前言
  • 第1章 网页UI设计入门
  • 1.1 UI设计发展史
  • 1.1.1 早期UI设计的风格
  • 1.1.2 中期UI设计的兴起
  • 1.1.3 后期UI设计的发展
  • 知识点讲解——iOS系统
  • 知识点讲解——Android系统
  • 知识点讲解——Windows系统
  • 知识点讲解——拟物化风格设计
  • 知识点讲解——扁平化风格设计
  • 1.2 网页UI设计的制作流程
  • 1.2.1 产品调研阶段
  • 1.2.2 UI视觉设计
  • 1.2.3 产品技术开发
  • 1.2.4 BUG测试
  • 1.2.5 产品上线
  • 1.2.6 产品迭代
  • 1.3 UI设计的注意事项
  • 1.3.1 图稿一致性原则
  • 知识点讲解——字体
  • 知识点讲解——表单录入
  • 知识点讲解——鼠标手势
  • 1.3.2 图稿准确性原则
  • 1.3.3 布局合理化原则
  • 1.3.4 操作合理性原则
  • 1.3.5 系统响应时间原则
  • 1.4 配色对于UI设计的影响
  • 1.4.1 网页配色基本概念
  • 知识点讲解——网页主色
  • 知识点讲解——网页背景色
  • 知识点讲解——网页辅色
  • 知识点讲解——网页点缀色
  • 1.4.2 网页配色基本方法
  • 知识点讲解——根据产品内容确定网页主色
  • 知识点讲解——根据网页主色确定配色方案
  • 1.4.3 网页色彩搭配技巧
  • 知识点讲解——同色系
  • 知识点讲解——邻近色
  • 知识点讲解——对比色
  • 知识点讲解——互补色
  • 1.5 本章小结
  • 第2章 初识Sketch
  • 2.1 绘制iOS照片分享界面
  • 2.1.1 Sketch的安装与启动
  • 操作案例——安装与启动Sketch
  • 2.1.2 了解Sketch界面
  • 知识点讲解——Sketch的主界面
  • 知识点讲解——菜单栏
  • 知识点讲解——工具栏
  • 操作案例——自定义工具栏
  • 2.1.3 设置Sketch的快捷键
  • 知识点讲解——Sketch的快捷键
  • 操作案例——自定义快捷键
  • 2.1.4 添加图片、形状
  • 知识点讲解——Sketch插入面板
  • 知识点讲解——插入图片
  • 知识点讲解——插入形状
  • 2.1.5 添加文本
  • 知识点讲解——插入文本
  • 2.2 绘制手机登录页
  • 2.2.1 新建和保存Sketch文件
  • 知识点讲解——文件的新建和保存
  • 操作案例——设置Sketch的标尺
  • 2.2.2 使用Sketch画板
  • 知识点讲解——画板预设
  • 知识点讲解——画板检查器
  • 2.2.3 使用Sketch模板
  • 知识点讲解——“iOS用户界面设计”模板
  • 2.3 本章小结
  • 第3章 绘制线框原型
  • 3.1 绘制手机信息界面线框图
  • 3.1.1 线框原型的基本概念
  • 知识点讲解——线框原型概念
  • 知识点讲解——线框原型视觉特性
  • 3.1.2 绘制线框原型的注意事项
  • 知识点讲解——巧用明暗对比
  • 知识点讲解——不使用截图和颜色
  • 知识点讲解——标记第一屏高度
  • 知识点讲解——合理的布局和间距
  • 3.2 绘制注册页面线框图
  • 3.2.1 图层面板
  • 知识点讲解——图层面板简述
  • 操作案例——添加和编辑图层
  • 知识点讲解——选择图层
  • 操作案例——移动图层
  • 3.2.2 图层类型
  • 知识点讲解——图层类型详解
  • 操作案例——变换大小
  • 3.2.3 图层的调整
  • 操作案例——新建、重命名、复制和删除页面
  • 知识点讲解——复制、剪切和粘贴图层
  • 知识点讲解——图层组的检查器
  • 3.3 绘制完整的线框原型图
  • 3.3.1 计步App线框图的绘制01
  • 3.3.2 计步App线框图的绘制02
  • 3.4 本章小结
  • 第4章 使用Sketch绘制图标
  • 4.1 绘制iOS 11提醒事项图标
  • 4.1.1 矢量工具
  • 知识点讲解——矢量图形(形状)
  • 知识点讲解——点模式
  • 知识点讲解——编辑矢量图形
  • 操作案例——矢量工具绘制箭头图标
  • 4.1.2 路径的使用
  • 知识点讲解——路径
  • 4.2 绘制Android照相机图标
  • 4.2.1 使用“形状”绘制图标
  • 操作案例——使用布尔运算绘制照相机图标
  • 知识点讲解——布尔运算
  • 4.2.2 使用“蒙板”绘制图标
  • 知识点讲解——蒙板命令
  • 操作案例——使用透明度蒙板制作简易图标
  • 4.2.3 添加阴影效果为图标添加质感
  • 知识点讲解——图标基本属性
  • 4.3 绘制极简化的Android图标
  • 4.3.1 Android图标设计准则
  • 知识点讲解——图标设计准则
  • 4.3.2 图标设计的三大原则
  • 知识点讲解——三大原则
  • 4.3.3 极简化设计
  • 知识点讲解——极简化设计风格
  • 操作案例——绘制记事本图标
  • 4.4 本章小结
  • 第5章 Android UI设计
  • 5.1 绘制Android音乐播放器界面
  • 5.1.1 组件的编辑及使用
  • 知识点讲解——创建组件
  • 知识点讲解——更换文本
  • 知识点讲解——管理组件
  • 操作案例——使用组件工具绘制导航栏
  • 5.1.2 应用软件UI设计
  • 知识点讲解——什么是应用软件UI设计
  • 知识点讲解——应用软件UI设计规范
  • 知识点讲解——软件启动UI设计
  • 5.1.3 移动App UI设计
  • 知识点讲解——什么是App
  • 知识点讲解——移动UI的设计趋势
  • 知识点讲解——移动UI和平面UI的区别
  • 5.1.4 Android系统UI设计
  • 知识点讲解——Android系统文字规范设计
  • 操作案例——绘制返回或菜单按钮
  • 知识点讲解——Android系统UI设计特色
  • 5.2 绘制Android信息界面
  • 5.2.1 “文本”命令
  • 知识点讲解——添加文本
  • 知识点讲解——文本框
  • 5.2.2 “文本”检查器
  • 知识点讲解——文本的编辑
  • 知识点讲解——共享样式
  • 操作案例——使用共享样式绘制界面
  • 5.2.3 “文本”选项
  • 知识点讲解——文本路径
  • 知识点讲解——文本转换轮廓
  • 操作案例——转化为轮廓绘制界面元素
  • 知识点讲解——导出文字
  • 知识点讲解——应用样式
  • 知识点讲解——混合模式
  • 5.3 本章小结
  • 第6章 iOS UI设计
  • 6.1 绘制iPhone X App界面
  • 6.1.1 iOS系统UI用户元素
  • 知识点讲解——顶部导航栏
  • 知识点讲解——标签栏和搜索栏
  • 操作案例——绘制iPhone X启动界面
  • 知识点讲解——表格视图
  • 6.1.2 iOS系统UI设计要求
  • 知识点讲解——确保程序可行
  • 知识点讲解——确保App可以在iPhone和iPad中通用
  • 知识点讲解——基于Web网页重新设计
  • 6.1.3 iOS系统UI设计原则
  • 知识点讲解——美观性
  • 知识点讲解——一致性
  • 知识点讲解——控制可行性
  • 知识点讲解——及时性
  • 知识点讲解——暗喻性
  • 知识点讲解——自主性
  • 6.1.4 iPhone X的App UI设计
  • 知识点讲解——编辑位图
  • 知识点讲解——iPhone X的屏幕尺寸
  • 知识点讲解——iPhone X的布局
  • 6.2 绘制iPhone 8 App界面
  • 6.2.1 iOS App UI设计模板
  • 知识点讲解——iPhone 8的组件
  • 操作案例——绘制iPhone系统视频播放界面
  • 知识点讲解——iPhone X的组件
  • 6.2.2 iOS UI设计规范
  • 知识点讲解——界面尺寸
  • 知识点讲解——图标尺寸
  • 知识点讲解——内部设计
  • 6.2.3 移动App设计过程中的要点
  • 知识点讲解——App UI设计流程
  • 操作案例——绘制系统发生错误界面
  • 知识点讲解——App UI配色原则
  • 6.3 本章小结
  • 第7章 PC端UI设计
  • 7.1 绘制网站登录界面
  • 7.1.1 PC端和移动端UI设计的区别
  • 知识点讲解——网页设计PC端和移动端的区别
  • 7.1.2 铅笔工具和剪刀工具
  • 知识点讲解——铅笔工具
  • 知识点讲解——剪刀工具
  • 操作案例——设计制作设置按钮①
  • 知识点讲解——旋转复制
  • 操作案例——设计制作设置按钮②
  • 知识点讲解——变形工具
  • 7.2 绘制医学网站首页
  • 7.2.1 PC端UI设计原则
  • 知识点讲解——以用户为中心
  • 知识点讲解——视觉美观
  • 知识点讲解——主题明确
  • 知识点讲解——内容与形式统一
  • 知识点讲解——有机整体
  • 操作案例——绘制“休闲空间”启动页①
  • 7.2.2 PC端UI设计要点
  • 知识点讲解——设计与技术相结合
  • 知识点讲解——视觉导向性
  • 7.2.3 PC端UI设计风格
  • 知识点讲解——大众化设计风格
  • 知识点讲解——个性化设计风格
  • 操作案例——绘制“休闲空间”启动页②
  • 7.3 本章小结
  • 第8章 UI的输出与交互设计
  • 8.1 UI图像的输出
  • 8.1.1 图标的输出
  • 知识点讲解——适配设备
  • 知识点讲解——导出图层
  • 知识点讲解——导出和切片
  • 8.1.2 界面的输出
  • 知识点讲解——切片工具
  • 操作案例——为切片重命名
  • 8.2 UI设计的交互
  • 知识点讲解——了解移动设备的手势
  • 知识点讲解——移动交互动效设计的注意事项
  • 知识点讲解——使用Xcode模拟交互效果
  • 8.3 Sketch插件的安装与使用
  • 知识点讲解——实用的插件
  • 8.4 本章小结
展开全部

评分及书评

尚无评分
目前还没人评分

出版方

人民邮电出版社

人民邮电出版社是工业和信息化部主管的大型专业出版社,成立于1953年10月1日。人民邮电出版社坚持“立足信息产业、面向现代社会、传播科学知识、服务科教兴国”,致力于通信、计算机、电子技术、教材、少儿、经管、摄影、集邮、旅游、心理学等领域的专业图书出版。