为了账号安全,请及时绑定邮箱和手机立即绑定

UI设计入门

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

需求分析

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

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

线框图(wireframe)和流程图绘制

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

规范制定,图标设计

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

图片描述
图片描述
图片描述

界面设计

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

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
PHP开发工程师
手记
粉丝
1.6万
获赞与收藏
1807

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消