UI设计入门

• UI设计师指对软件人机交互、操作逻辑、界面美观整体设计，工资高
  • 界面设计与规范
  • 原型绘制设计
  • 产品设计思维
  • 交互/操作设计
  • 项目开发流程
• 美工指对平面、色彩、基调、创意等进行设计，工资低

需求分析

• 商业需求文档BRD（Business Requirement Document）
  • 市场分析，销售策略，盈利预测等，通常不包含产品细节，一般针对老板、CEO、项目总负责人
  • 一句话简介，用户痛点，用户需求，解决方案
  • 市场分析
    • 市场背景、市场前景（数据图表）
    • 市场竞争、竞品分析
  • 发展计划
    • 产品规划
    • 运营计划（营销推广策略等）
    • 发展计划……
  • 风险与对策
    • SWOT分析或其他类分析等……
  • 收益与成本
    • 盈利模式、收益分析
    • 预估所需资源（含资金使用计划）
• 市场需求文档MRD（Mraket Requirement Document）
  • 细化了市场分析、竞品分析和产品概述，给产品、运营、研发等业务线上的人看，MRD指出什么样的新产品、方案和服务可以更好的开拓市场。
  • 市场分析
  • 用户分析
    • 用户群体（划分依据：年龄、收入、地区等）
    • 用户标签（共同点及非共同点）
    • 用户需求（建立各种类别的虚拟角色及其使用场景、用户动机等）
  • 竞品分析
  • 产品概述
    • 产品定位（对用户来说是什么？）
    • 产品核心目标（达到何种目的？）
    • 产品研发计划
    • 产品功能性需求（一般画流程图对程序猿更直观些）、产品非功能性需求（安全性、性能等）、产品布局等
• 产品需求文档PRD（ Product Requirement Document）
  • 线框草图
  • 产品结构图
  • 流程图

产品初期的结构图，用于梳理频道、页面，到页面版块、元素的结构，帮助我们了解产品频道、页面结构以及逻辑关系。
产品结构图将根据产品需求的不断梳理，反复修改优化，并最终形成

线框图（wireframe）和流程图绘制

通过基本线框构成的产品设计图/文档，完成速度快，便于团队快速交流、修正；相比原型，原型更加接近最终产品，具备一定交互、操作功能，而线框图更加简单。
P.S. 用脑图构思出关键字，然后根据脑图勾勒wireframe

规范制定，图标设计

• 产品设计规范全局说明
  • 产品标准色规范
  • 控件、页面元素（包括图标、按钮等）间距、尺寸、交互规范
  • 文本字号、颜色规范
• 标准色规范
  • 产品标准色可分为主色、辅助色、点缀色
  • 主色：主视觉，重点突出的颜色，决定产品的色调
  • 辅助色：与主色搭配的颜色，使产品颜色搭配更完美协调
  • 点缀色：点亮画面，起到强调、引导浏览作用

界面设计

• 启动引导页
  • 引导新用户，展示APP亮点功能或者使用指南；仅针对第一次打开APP的用户
• 界面标注
  • 便于前端更准确的实现效果图，标注项如下：
    • 文本样式（字号与样式、颜色代码等）
    • 元素与元素（内部）间距及控件尺寸、颜色代码
    • 区域尺寸
• 切图