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
  • 产品经理是对一个产品负根本责任的管理者
    UI设计学习笔记(7-12)
  • 产品研发:
    • 初期:功能脑图
    • 原型图:Axure
    • 设计UI
    • 开发:代码实现
    • 测试
  • 三个思维:
    • 用户思维:美观
    • 产品思维:功能
    • 工程思维:实现
  • 产品经理的职责
    • 市场及用户的研究
      • 市场分析
      • 竞品分析
      • 用户研究
    • 产品规划及设计
      • 产品规划
      • 需求管理
      • 产品设计
      • 版本管理
    • 开发及项目管理
      • 需求确认
      • 项目跟踪
      • 产品测试
    • 产品运营
      • 流程制定
      • 协调沟通
      • 对外合作
      • 问题处理
      • 数据分析
      • 文档编写
      • 培训演示
    • 市场推广
      • 营销支持
      • 市场支持

备注

  • 学习平台:大鹏教育(www.dapengjiaoyu.com)
上一篇:26款能够吸引用户的 iPhone App 界面设计


下一篇:APP界面设计 大概总结