UI设计学习笔记（7-12）

UI学习笔记(7)——扁平化图标

认识扁平化

• Flat Design
• 抛弃传统的渐变、阴影、高光等拟真视觉效果，打造看上去更平的界面。（颜色、形状）

扁平化图标有什么优缺点

• 优点：
  • 简约不简单、有新鲜感
  • 降低移动设备的硬件需求、延长待机时间
  • 开发简单
• 缺点：
  • 需要一定学习成本，缺乏直观
  • 传达的感情不丰富，过于冰冷

扁平化的发展

• 提出：2008，谷歌提出
• 实现：微软，win8，彻底的扁平化风格
• 安卓2011年，Android 4.0实现扁平化
• 苹果2013年，IOS7开始扁平化

风格分类

• 纯平面
• 轻折叠：明显折痕
• 轻质感：轻渐变、轻投影
• 折纸风：折叠、投影、结构，立体感
• 长投影

扁平化图标三种绘制技法

1. 通过显示物品绘制
   • 观察现实参照物
   • 重新描绘图像
   • 去除多余元素
   • 将图形抽象化
   • 使用鲜艳色彩
   • 添加一些细节
2. 通过拟物化图标绘制
   • 观察拟物化图标
   • 绘制底部轮廓
   • 绘制主元素轮廓
   • 添加细节
3. 通过剪影图标绘制
   • 收集剪影图标
   • 绘制基础形状
   • 给形状填充颜色
   • 添加细节
   • 另一种方法

如何绘制好的扁平化图标

• 可识别性
• 差异性
• 一致性
• 突出品牌
• 色彩鲜活
• 慎用白色
• 多场景测试
• 高品质感

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)