精华内容
下载资源
问答
  • 文章目录目标题目实操步骤模板实操【抖音】APP的视频发布功能页面流程绘制页面流程图合格标准绘制页面原型图合格标准 目标 新入行的产品经理都对原型抱有向往的心境,但是有经验的产品经理不会一上来就画原型,而是...

    目标

    新入行的产品经理都对原型抱有向往的心境,但是有经验的产品经理不会一上来就画原型,而是先画页面流程再来画原型。通过学习,你将学会如何用页面流程图规划用户行为路径、如何借助原型识别问题、减少风险、有效沟通。

    题目

    任意选择一款你喜欢的产品,体验某个功能,下载并梳理此功能至少5个以上的页面流程跳转点(后面会解释),还原2 - 3个主要界面的低保真原型图。

    实操步骤

    • 可使用手绘以及Processon、Visio等工具绘制页面流程图&原型图

    模板

    实操【抖音】APP的视频发布功能

    页面流程

    抖音首页–视频拍摄/上传页面–视频编辑页面——视频发布页面——视频发布成功页面

    绘制页面流程图

    合格标准

    • 页面流程图中要体现的元素:页面、操作或状态、链接线
    • 页面流程图的流程合理且完整
    • 页面流程不是页面,不要贴页面上来
      在这里插入图片描述

    绘制页面原型图

    合格标准

    • 还原你选择的页面的所有要素,要求元素必须完整,图片可以使用占位符。
    • 在原型中要标注交互信息(即页面跳转的逻辑),若有数据信息也一并梳理出来。
    • 不要遗漏异常情况的提示/引导。
      在这里插入图片描述
      什么是页面流程图???
      好多人把页面流程图画成了“业务流程图”或者是“功能流程图”,这三种是有本质区别的,建议大家在画之前看看这两篇文章:
      http://www.woshipm.com/pmd/663549.html
      http://www.woshipm.com/rp/651734.html
    展开全文
  • 那么,今天我就来给大家讲解一下原型图设计的绘制,因为一个项目中界面多的原因,我主要拿主页示范。 二、了解网站的布局 首先我们要想清楚我们要的是什么样的网页样式,也就是先来了解一下各个网页的界面展示:

    一、前言

    在我制作个人项目的时候,经常会要自己独立去完成一个界面原型设计图。因为原型设计图在项目中起到一个先导作用,所以画好原型设计图还是很重要的。那么,今天我就来给大家讲解一下原型图设计的绘制,因为一个项目中界面多的原因,我主要拿主页做示范。

    二、了解网站的布局

    首先我们要想清楚我们要的是什么样的网页样式,也就是先来了解一下各个网页的界面展示:

    名称解释简图理解网站示例
    “T”字形页面顶部为横条广告+广告条,下方左面为主菜单,右面显示内容为布局。因为菜单条背景颜色深,整体效果类似英文字母“T”,所以称之为T字形布局。有妖气漫画:https://www.u17.com/.在这里插入图片描述
    "口"字形页面一般上下各有一个广告条,左面是主菜单,右面放友情链接等,中间是主要内容。苏宁易购:https://www.suning.com/.在这里插入图片描述
    “同”字形就是整个布局类似“同”字,页面顶部是主导航栏,下面左右两侧是二级导航条、登陆区、搜索区,中间是主内容区。当当网: http://www.dangdang.com/.在这里插入图片描述
    “三”字形采用简单的图形和线条代替拥挤的文字,给浏览者以强烈的视觉冲突。快看漫画:https://www.kuaikanmanhua.com/.在这里插入图片描述
    “川”字形整个页面在垂直方向分为三列,网站的内容按栏目分布在这三列中,最大限度突出主页的所引功能,一般适合栏目比较多的网站。聚划算:https://ju.taobao.com/.在这里插入图片描述

    三、前端界面绘制(主页)

    那么既然了解了这些类型,那我就按照这个类型来绘制主页图吧。
    我的演示项目是一个看漫画网站
    我使用的软件是电脑自带的画图

    步骤:

    1、了解排版的各个位置放什么
    2、按照由上到下、由里到外的顺序插入文字和图片
    

    1、“T”字形

    首先我们知道“T”字形的排版大概是这个亚子的:
    在这里插入图片描述
    首先我先放上我最开始的一个最简单的设计图:
    在这里插入图片描述
    在这个里面,它有一个顶部登录显示、轮播图、分类目录、主内容显示、榜单显示。当然一个网站所具备的东西不仅仅这么点,只是个人项目的话,需要考虑到各个学习阶段人群学习的程度。也就是说:

    在做原型图设计的时候,我们加入的版块一定要是我们最终可以用代码做出来的。
    

    那么了解我们需要什么功能之后,就可以开始放模块了。
    顶部登录显示、轮播图、分类目录、主内容显示、榜单显示这些东西我们要如何放呢?
    步骤如下:
    在这里插入图片描述
    在这里插入图片描述
    类似这种的:
    在这里插入图片描述
    然后继续放东西:
    在这里插入图片描述
    在这里插入图片描述
    然后自己根据需求加东西就可以了。“T”字形排版完成!!!

    2、“口”字形

    “口”字形的排版大概是这个亚子的:
    在这里插入图片描述
    一样的,同一个漫画网站燥起来。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    然后自己根据需求加东西就可以了。“口”字形排版完成!!!

    3、“同”字形

    “同”字形的排版大概是这个亚子的:
    在这里插入图片描述
    步骤如下:
    在这里插入图片描述
    然后自己根据需求加东西就可以了。“同”字形排版完成!!!

    4、“三”字形

    “三”字形的排版大概是这个亚子的:
    在这里插入图片描述
    “三”字形布局步骤演示如下:
    在这里插入图片描述
    然后自己根据需求加东西就可以了。“三”字形排版完成!!!

    5、“川”字形

    “川”字形的排版大概是这个亚子的:
    在这里插入图片描述
    最后就是讲到“川”字形的界界面排版了,步骤如下:
    在这里插入图片描述
    然后自己根据需求加东西就可以了。“川”字形排版完成!!!

    四、总结

    一、版型图大纲
    在这里插入图片描述
    二、知识点

    • 设计步骤:
    1、了解排版的各个位置放什么
    2、按照由上到下、由里到外的顺序插入文字和图片
    
    • 考虑程度:
    在做原型图设计的时候,我们加入的版块一定要是我们最终可以用代码做出来的。
    
    • 拓展考虑
    在能力允许的情况下,可以在往界面下框加东西,比如网商项目里面的年度好货、新品上市之类的。
    

    我是南橙,一个逐渐秃头的橙子Orange。
    在这里插入图片描述

    展开全文
  • 后台原型图设计

    千次阅读 2019-05-08 20:26:01
    后台原型图需要注意以下几点: 一、 清晰的信息结构设计 信心结构设计是整个后台设计的灵魂,一个好的后台系统可以没有漂亮的页面,但一定要有清晰的框架结构,这不仅关系到后续添加功能时是否有清晰的逻辑,更...

    撰写人:黄文政 创建时间:5月3日
    做后台原型图需要注意以下几点:
    一、 清晰的信息结构设计
    信心结构设计是整个后台设计的灵魂,一个好的后台系统可以没有漂亮的页面,但一定要有清晰的框架结构,这不仅关系到后续添加功能时是否有清晰的逻辑,更关系到每一位使用者的体验。所以产品设计者需要高度熟悉业务逻辑和功能模块,将它们根据用户的使用流程和习惯来进行清晰的结构设计,将每个模块按照一定的逻辑进行划分,让用了解到自己需要寻找哪个功能时,知道该去哪里寻找。
    二、恰到好处的文字说明
    后台系统中很多功能在特定的环境会有不同的含义,或者说不同的规则,用户可能并不能完全理解这些词汇所代表的意思,这个时候就需要一些恰到好处的文字说明来进行解释,帮助用户更好的理解和使用这个功能,减轻用户的心理压力和减低他们的学习成本。
    三、统一的页面布局
    在分析好信息结构之后,我们还需要根据产品特性和功能来统一整站的页面布局框架。一般分为主菜单、二级菜单、页面主体和功能事件等主要结构。
    首先,先想好做一个什么样的后台网站。其次,再去想这个后台网站有哪些功能。接着再根据你想的功能做出每一个功能的二级页面。最后再想每个二级页面该怎么排版需要什么模块。
    下面的几张图片就是我做的5张婚姻后台原型图
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 亿图原型图制作

    2014-10-27 22:50:02
    里是“EDraw最大”的一些主要特点: · EDraw是一个基于矢量的图表制作软件,它创建流程,组织结构和网络迅速。...·支持基本的流程,组织结构,商业图表,人力资源,工作流,软件,UML,地图和网络
  • 一组优美的弧线原型图、流程图的箭头、连接线素材,可以用来绘制好看的原型。sketch版本。
  • 设计师小伙伴们肯定都知道,在网站或者应用开发的前期,是需要设计原型图然后给开发和客户展示的。 原型图的目的: 第一是给自己看,方便规划整个设计并持续下一步的完成度; 第二是给开发看的,可以更好的说服,...

    (阅读时间:5分钟)

    我们应该理清到底什么工具配合制作什么样的原型给谁看?

     

    设计师小伙伴们肯定都知道,在网站或者应用开发的前期,是需要设计原型图然后给开发和客户展示的。

    原型图的目的:

    第一是给自己看,方便规划整个设计并持续下一步的完成度;

    第二是给开发看的,可以更好的说服,并且更佳的完善软件;

    第三个目的是给客户看的,更高质量的原型图可以推动合作并让客户更满意。

    但是在实际操作中,很多UI初学者对原型度的界限不是非常清晰,拿着给客户看的原型图去给开发,有的被拒绝,有的事效率低下,严重的沟通问题产生。有的拿着给开发看的原型去给客户看,导致客户不清楚并不满意,谈判过程较艰难。更甚者拿着自己看的原型图去给开发/客户看的话,后果不堪设想。

    所以接下来我们就来理清到底什么工具配合制作什么样的原型给谁看。

     

    1.给自己看的原型图

    重点:草图

    工具:UX流程图卡、白板、纸笔、Balsamiq、Xmind

    给自己看的原型图可以略简单一些,可以不需要太多花里胡哨的东西,但是UX流程图卡兼备了花里胡哨和实用,强大的网站结构规划工具,专业的网站建设者,涵盖54种常用UX模板,让设计师能够快速搭建专业的用户体验流程图,节省大量时间且架构清晰。帮助设计师和产品经理把握产品全貌,思考用户体验,聚焦重要环节。

    UX流程图卡

    官网:https://www.uxdock.com/

    这款卡牌可以配合白纸板和笔的直接交互,这样可以省下用笔画出又线又框的时间,UX流程图卡任你搭出无数想法

    原型讲解,需求可视化

    流程卡是非常有效的将需求转化为具体设计稿的思考工具。

    方案探讨,随时修改纠错

    修改、移动、自定义都很容易,大大节省创建修改的时间成本。

    头脑风暴,快速搭建思维模型

    操作简单,帮助设计师和产品经理快速记录思路。

     

    Balsamiq Mockups   

    网址:https://www.macbl.com/app/graphics-design/balsamiq-mockups

    可以更有效的整理线框图,这款工具虽然没有交互设置,但是素描风格也是很不错的灵感来源了,虽然组件不是非常多,但也是够满足原型图的要求了。

     

    Xmind

    官网:https://www.xmind.cn/xmind8-pro/

    这是一款帮助你整理属于你自己的思维导图,更佳的完善所有流程步骤,简单易用、美观、功能强大,拥有高效的可视化思维模式,具备可扩展、跨平台、稳定性和性能,真正帮助用户提高生产率,促进有效沟通及协作。

     

     

    2、给开发人员看的原型图

    重点:交互

    工具:UX流程图卡、Axure RP、Mockplus

    每个人看每件事物都是不一样的,所以为了更好的和开发人员达成一致,我们该尽心尽力的去使用工具制作更直观的原型图,来减少误解,提高效率加快节奏。

    这里UX流程图卡又派上用场了,它并不仅是为了给设计师自己看,还可以拿出卡牌和开发人员一起探讨跳转的交互,随时修改纠错。

    再来进阶版的是AxureRP和Mockplus这两款工具,敏捷开发的团队中,时间是宝贵的,我们想要的还是创造出更快、更好的效果来表达出最接近客户想法的设计,然后更好的与开发沟通探讨。

    AxureRP

    网址:https://www.macbl.com/app/business/axure-rp-pro

    是一款专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。

     

    Mockplus

    官网:https://www.mockplus.cn/product/mockplus

    是一款简洁、快速、免费的原型图工具,适合软件团队、个人在软件开发的设计阶段使用。该工具具有低保真、无需学习、快速上手等功能特点,可以帮助用户轻松的做出专业化的原型设计。

     

    3、给客户看的原型图

    重点:精致度

    工具:Origami Studio、Framer

    对于不是非常了解软件设计的客户,他们需要的是一个99.99%接近应用的原型。

    这个时候就请使用Origami Studio、Framer这两款工具,为什么这种不仅可以保证精致度,还可以保证高保真的工具我到这个时候才拿出来?原因很简单,这两款的工具步骤相对复杂,后者基本依靠代码。这两款工具无论是画面效果还是交互动效都可以与真正的App相媲美,做到以假乱真的效果。不过由于要求高,时间成本高,不建议日常使用,可以留到最后以应防不测。

    Origami Studio

    网址:https://www.macbl.com/app/graphics-design/origami-studio

    这款由 Facebook 推出,在 iOS 与 Android 设计风格基础之上采用 Facebook 设计语言的原型开发工具,这款工具提供了必要的设计要素、动画效果以及各种库,可以让产品设计师更快更方便地进行原型开发。

     

    Framer

    网址:https://www.macbl.com/app/graphics-design/framer

    它是一款屏幕设计和交互式原型制作的最佳工具。让你从简单的代码开始你的设计生活。

     

    以上就是对三种情况下的基础说明了。还有很多比较优秀的工具这里没有提到,希望大家还是能够根据自己的实际情况,合理选择工具,更好的沟通,更敏捷的开发做更好的设计。

     

    展开全文
  • 原型图、交互设计、UI图,到底啥关系

    万次阅读 多人点赞 2017-04-18 22:05:39
    其实一直以来都纳闷,产品经理要做原型图,然后UI设计师要画UI 图,这两个之间貌似有许多重复的地方,而且还是大多时候还是并行进行,实在不知道二者之间的关系是什么,通过查阅资料,一下总结。 原型是表达自己...
  • 之前为公司的全国分校开发的校区管理系统,绘制的原型图。但不是很完善。有需要的可以参考
  • Axure管理后台原型图

    2020-10-15 09:58:24
    此模板只有一个页面,由动态面板制作,并非内联分页制作,内联分页制作无法达到高保真交互。 预览加载的时候有些慢,登陆界面点击登陆直接进入后台主页面
  • Axure PR Pro 6.5 原型图最好的工具 有注册机,汉化包,和安装程序
  • 原型图APP尺寸大小

    万次阅读 2018-10-31 16:04:05
    这样一来,即使新来的交互设计师没什么基础,也可以根据这一份规范,做出大致标准的原型图。 因为Ui设计稿是先iPhone6的,方便向上适配iPhone6Plus,也方便向下适配iPhone5和iPhone4的尺寸。所以,交互设计稿的...
  • 管理后台Axure原型图

    热门讨论 2015-06-13 20:08:10
    管理后台Axure原型图,该原型图包含一些web页面常用的页面交互及panel切换。非常适合供别人参照来学习怎么使用axure产品原型
  • Photoshop画小项目原型图设计一、前言二、网站的布局三、前端界面绘制...那么,今天我就来给大家讲解一下使用photo画原型图设计的绘制,因为一个项目中界面多的原因,我主要拿主页示范。 二、网站的布局 首先我
  • 原型图的一些技巧

    千次阅读 热门讨论 2019-04-28 21:24:42
    这一周与我打交道最多的莫过于原型图了,起初一起审原型图,后来也加入了开发原型的队伍当中。 对于原型图这个概念,最开始接触在大约一年前在师姐分享实习经验的时候,那个时候连原型图是什么都不知道,感觉很...
  • 为什么要UE原型图

    千次阅读 2018-06-14 08:51:21
    1.程序员一旦陷入代码逻辑考虑...在制作原型的时候可以有效的根据原型图结合数据库结构把程序跑一边。4.你能保证你的UE一点点瑕疵都没有,一边通过吗?如果不能的话你写代码同样也是,也代码要付出的代价要更多。...
  • 有一段时间没有原型图了,现在因为项目需要,得一套完整的原型图,由于时间关系,考虑制作低保真的原型,虽然低保,还是得抓一把细节,嘻嘻,在这里记录下登录注册页面纯原生做法的全过程。 工具:Axure RP ...
  • 这是UML课程设计的作品,利用AXure8原型工具制作,界面设计也很清新,简单,fashion。交互性强,生成的Html文件运行起来就真的站点一样。同时也适合Axure8入门者学习交流。我觉得你会喜欢。
  • 一个高保真原型,供参考。类似于威客网的平台网站。 在你类似的原型之前,进行大量的参考是快速成功的关键。
  • : 这张图片里面点击选择的地方颜色为红色而没有选择的地方颜色就不是这种颜色了,这也是为了让用户明白了选择了那一个如果选择的颜色都不是很亮颜色几根没有选择的地方颜色相差不大那怎么可能让用户知道他选择...
  • 什么是原型图

    2021-07-22 08:09:31
    原型图 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术: PS/原型图 作者:弈白尘 撰写时间:2021年7月18日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
  • 编者按:《从零开始设计App》系列到这篇已经是...》《从零开始设计一款APP之如何做原型图》 Hi-fi 输出 上篇文章提到,在Hi-fi阶段大概可以分为前期、中期和后期三个阶段。这篇文章就是对Hi-fi阶段的详细解说。 前期
  • 交互设计:iOS原型尺寸规范

    千次阅读 2018-03-25 17:18:53
    这样一来,即使新来的交互设计师没什么基础,也可以根据这一份规范,做出大致标准的原型图。因为Ui设计稿是先iPhone6的,方便向上适配iPhone6Plus,也方便向下适配iPhone5和iPhone4的尺寸。所以,交互设计稿的尺寸...
  • axure原型图手机界面尺寸

    千次阅读 2020-02-01 23:12:42
    使用axure原型图手机界面尺寸制作的原型,如果你没有设置自适应视图的话它是不会自动适应任何设备的。若要解释清楚这个问题需要的篇幅比较长,请大家自行参考 Point/Pixel/PPI/DPI 的意思和它们之间的关系。这里不再...
  • Photoshop设计网站原型图

    千次阅读 2019-04-08 08:00:52
    但是要如何去设计,这是个问题,于是我在脑海中想了想该如何设计,想我的网站是什么的,我最后就想一个甜品网站,于是我就在我的脑海中想到了一些关于这个网站的后台管理,并且把原型图设计了出来。如下: 这...
  • @Sophia的玲珑阁 :这个系列的文章把整个设计过程的经验总结成文,逐点分享,上期是概述+立项,这期聊聊低保真和高保真原型图的作用、处理工具和文件要求等。 Low-fi,即低保真原型图,整个APP设计阶段,设计师真正...
  • MockPlus原型图软件

    2018-01-08 15:14:37
    MockPlus,需要的都知道是什么的,原型图绘制软件。
  • 4,亲和 (4.Affinity Diagrams:) Another enabling teamwork feature; this helps all the members gather their thoughts and ideas in one place quickly in real-time. 另一个使团队合作的功能; 这可以帮助...
  • 产品经理原型图工具 从入门到精通 你值得拥有 安装包/视频/文档 还有产品经理修炼视频 千万不要错过 物超所值
  • Axure原型绘制.xmind

    2021-08-03 09:23:12
    主要提供给是想要学习Axure绘制原型图的伙伴,免费的。
  • 我们为什么不画高保真原型图

    万次阅读 2018-04-21 21:12:55
    今天给大家分享一下,修真院官网PM任务5,深刻思考其中的知识点——我们为什么不画高保真原型图,希望能够给大家带来一些收获。目录1.原型图分类2.为什么我们不画高保真原型3.高保真原型的应用场景4.更多讨论5.参考...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 157,077
精华内容 62,830
关键字:

原型图怎么做