UI学习笔记(7)——扁平化图标
认识扁平化
- Flat Design
- 抛弃传统的渐变、阴影、高光等拟真视觉效果，打造看上去更平的界面。（颜色、形状）
扁平化图标有什么优缺点
- 优点：
- 简约不简单、有新鲜感
- 降低移动设备的硬件需求、延长待机时间
- 开发简单
- 缺点：
- 需要一定学习成本，缺乏直观
- 传达的感情不丰富，过于冰冷
扁平化的发展
- 提出：2008，谷歌提出
- 实现：微软，win8，彻底的扁平化风格
- 安卓2011年，Android 4.0实现扁平化
- 苹果2013年，IOS7开始扁平化
风格分类
- 纯平面
- 轻折叠：明显折痕
- 轻质感：轻渐变、轻投影
- 折纸风：折叠、投影、结构，立体感
- 长投影
扁平化图标三种绘制技法
- 通过显示物品绘制
- 观察现实参照物
- 重新描绘图像
- 去除多余元素
- 将图形抽象化
- 使用鲜艳色彩
- 添加一些细节
- 通过拟物化图标绘制
- 观察拟物化图标
- 绘制底部轮廓
- 绘制主元素轮廓
- 添加细节
- 通过剪影图标绘制
- 收集剪影图标
- 绘制基础形状
- 给形状填充颜色
- 添加细节
- 另一种方法
如何绘制好的扁平化图标
- 可识别性
- 差异性
- 一致性
- 突出品牌
- 色彩鲜活
- 慎用白色
- 多场景测试
- 高品质感
UI学习笔记(8)——功能图标分类大法
认识功能图标
- 在屏幕中具有功能意义的图形
设计原则
- 注释
- 图文一致
- 功能 > 美观
分类
- 按照属性来分：
- 栏图标：导航栏、标签栏
- 小图标
- 按照表现形式：
- 线性图标
- 面性图标
- 线面结合
- 按下态：线面结合，非按下态：线性
UI设计学习笔记(9)——功能图标之设计技法
绘制技法
- 线
- 单色
- 多色
- 渐变
- 断点
- 加元素-拟人
- 面
- 单色
- 多色
- 渐变
- 加背板
- 加光影
- 透明度
- 加高光
- 加气泡
- 线面结合
- 普通
- MBE
注意事项
- 定义准确
- 造型完整简明
- 符合用户行为习惯
UI学习笔记(10)——启动页+引导页特效
启动页定义
- 什么是启动页：又称闪屏，应用程序打开时，用户所看到的过渡页面。
- 为什么要启动页？
- 提高用户体验，减少用户焦虑
- 传递品牌效应或产品的人文情怀
- 商业需求
启动页种类
- 快速启动类
- 品牌类
- 情感共鸣类
- 节日类
- 广告类
如何设计启动页
- 竞品分析
- 确定启动页种类
- 了解产品的特点
- 定位
- 特点
- 品牌色
- 特点具象化
- 排版整合
引导页定义
- 出现在加载启动画面之后，进入界面首页之前用户所见到的一系列画面。往往是第一次打开应用时出现的画面且仅一次。
- 作用：提前告知用户主要功能和特点
引导页的元素
- 图形、图片、文案、关闭或跳过、分页点（最后一页由进入按钮替代分页点）、数量合理，一般3-4页左右
展示形式（动态/静态）
- 文字与界面组合
- 优点：较为直接地传达产品的主要功能
- 缺点：过于模式化，千篇一律
- 文字与插图组合
- 优点：活泼生动吸引眼球
- 缺点：设计耗时长，费脑
- 动态效果与视频
- 优点：直观生动，氛围活泼
- 缺点：设计成本高，占用内存大，可能引起卡顿
UI学习笔记(11)——XMIND & Axure
认识XMind
- 商业思维导图软件
XMIND功能介绍
- 中心主题
- 位于中心不可移动
- *主题
- 双击鼠标左键
- 分支主题
- 选中中心主题，按下Tab键
- 选中分支主题，按下Enter键
- 子主题
- 选中分支主题，按下Tab键
- 选中子主题，按下Enter键
- 超链接
- 选中-右键-插入-超链接
- 图标
- 工具栏
- 外框
- 框选-工具栏外框
- 联系
- 选中一个主题，点击工具栏联系，点击另一个主题
- 概要（注释）
- 选中，工具栏概要
- 外框
- 右侧栏
- 大纲
- 格式
- 图标
- 风格
- 备注
- 快捷键
- Tab添加子主题
- Enter添加兄弟主题
- /收缩所有主题
- *展开所有主题
认识Axure
- 原型图设计工具
- 原型图目的
- 沟通最初的产品设想
- 不是视觉设计
- 产品经理、交互设计师：原型图一般是产品经理、交互设计师来绘制
- UI设计师：需要具备快速准确阅读原型图的能力
- 开发人员：了解用户如何与产品进行交互
Axure功能介绍
- 罗列一级功能点
- 右键-添加
- 添加二级功能点
- 制作原型图
UI学习笔记(12)——做一次产品经理
产品经理是什么
- PM,Product Manager
- 产品经理是对一个产品负根本责任的管理者
- 产品研发：
- 初期：功能脑图
- 原型图：Axure
- 设计UI
- 开发：代码实现
- 测试
- 三个思维：
- 用户思维：美观
- 产品思维：功能
- 工程思维：实现
- 产品经理的职责
- 市场及用户的研究
- 市场分析
- 竞品分析
- 用户研究
- 产品规划及设计
- 产品规划
- 需求管理
- 产品设计
- 版本管理
- 开发及项目管理
- 需求确认
- 项目跟踪
- 产品测试
- 产品运营
- 流程制定
- 协调沟通
- 对外合作
- 问题处理
- 数据分析
- 文档编写
- 培训演示
- 市场推广
- 营销支持
- 市场支持
- 市场及用户的研究
备注
- 学习平台：大鹏教育(www.dapengjiaoyu.com)