精华内容
下载资源
问答
  • 一直以来,Axure是产品经理的...在网上也看到很多产品新人的心声:“领导说什么功能就怎么画,完全没有了想法”“原型画得十分粗糙,和开发沟通相当困难”“已经改了十几版了,还是满足不了甲方爸爸”可以看出,由于...
    52986d41789e53bdbfedbae9c55199cc.gif

    一直以来,Axure是产品经理的必备软件之一。

    85991f49a4cf1b99dce1dc8745b6b7e6.png

    专业的快速原型设计工具

    近几年,产品经理这个岗位越来越吃香,很多程序员、设计师、甚至工程师都转行去当产品经理,但新人产品经理往往因为不熟悉Axure,不清楚原型规范,导致原型制作效率低。

    在网上也看到很多产品新人的心声:

    “领导说什么功能就怎么画,完全没有了想法”

    “原型画得十分粗糙,和开发沟通相当困难”

    “已经改了十几版了,还是满足不了甲方爸爸”

    可以看出,由于初期项目经历较少,在实际的工作中难免会遇到各种问题。

    那产品新人想要更快地做出规范原型,该如何实现呢?优秀的做法是:熟练掌握原型工具Axure,在设计原型图的过程中根据需求进行设计;提升产品知识体系,知道如何正确的表达产品设计思想。

    说一百遍不如实际做一遍,画原型图的实战案例,数艺君已经给大家整理好了,跟着教程一起来画一画。

    综合实战案例:后台管理系统

    本案例是制作软件后台管理系统或企业管理系统,操作终端为电脑端,直接按照管理系统的常规布局,使用Axure RP自带的元件库自己设计页面,制作交互效果。

    页面框架

    图为管理系统的主流布局方式,顶部显示系统名称和登录信息,左侧为导航菜单,右侧为数据区域。本节内容为搭建好页面框架,制作头像快捷入口和手风琴导航 菜单两部分的交互效果。

    53e5a94425928c15bb8167f324de5759.png

    头像快捷入口

    案例描述:

    鼠标移入头像区域,显示下拉菜单;鼠标移出头像区域,隐藏下拉菜单,如图所示。

    3eeddc46fa887b244cefb2c652da0c5c.png

    案例思路:

    如果是移入/移出某个文本区域显示/隐藏下拉菜单,可以直接使用“水平菜单”元件,非常简单,但头像是一张图片,此方法行不通。

    读者可能已经想到了制作此效果的方法,那就是直接给头像的“鼠标移入时事件”和“鼠标移出时事件”添加显示和隐藏的动作。但这个思路只对了一半,使用这种方法,鼠标移入头像区域显示下拉菜单是没有问题的,但当鼠标准备单击下拉菜单时,鼠标只要刚刚移出头像区域,下拉菜单就直接隐藏了,根本无法单击。

    改进上述思路,使用动态面板的两种状态制作默认时、鼠标移出时的头像区域(只有头像)和鼠标移入时的头像区域(包含头像和下拉菜单)。

    案例技术:

    动态面板、鼠标移入时事件、鼠标移出时事件。

    制作步骤:

    (1)拖入“矩形2”元件至设计区域,尺寸为800像素 ×60像素,位置为(0,0),填充颜色为#1DAAE0,修改其文本为“公司业务管理系统”,在样式面板中修改其文本对齐方式为居左,左侧内填充距离为30,如图所示。

    6d4e07f549a40e3fba42dba928e070ae.png

    (2)拖入“文本标签”元件至设计区域,位置为(745,21),字体颜色为 #FFFFFF,修改其文本为“李明”。

    (3)拖入“图片”元件至设计区域,导入默认头像,尺寸为30像素×30像素,位置为(700,15),圆角半径为15像素,执行右键菜单命令【转换为动态面板】。

    (4)双击该动态面板,打开“面板状态管理”对话框,复制State1,此时动态面板有State1和State2两个状态,如图所示。

    75f28c6ea8191145857adefd6b23269e.png

    (5)进入动态面板的State2,拖入3个“矩形 1”元件至设计区域,尺寸均为 100 像素×35像素,位置分别为(0,40)、(0,75)和(0,110),边框颜色均为#CCCCCC,修改文本分别为“个人中心”“密码修改”“退出系统”。

    (6)分别修改“个人中心”矩形和“退出系统”矩形的上圆角半径和下圆角半径为6像素,如图所示。

    62a614486fdf9fea9f9fc439e2bebad0.png
    7c7e788b7354bee28659ef46022f4ff0.png

    (7)鼠标移入头像区域时,显示下拉菜单,如图所示。

    ①关闭动态面板的 State2,选中动态面板,双击属性面板中的“鼠标移入时”事件,打开用例编辑器。

    ②选择【添加动作 > 元件 > 设置面板状态】。

    ③在右侧的配置动作区域勾选“当前元件”。

    ④选择状态为 State2。

    6d66069d3ff284d59ab14e11401679df.png

    (8)鼠标移出头像区域时,收起下拉菜单,如图所示。

    ①选中动态面板,双击属性面板中的“鼠标移出时”事件,打开用例编辑器。

    ②选择【添加动作 > 元件 > 设置面板状态】。

    ③在右侧的配置动作区域勾选“当前元件”。

    ④选择状态为 State1。

    8234a4502c03f99b71a3a331282f2c5e.png

    (9)设置完成后,按F5键在浏览器中预览效果,如图所示。

    0ff21f756f7d7e164d47ac4286323551.png

    手风琴导航菜单

    案例描述:

    单击一级菜单,对应的二级菜单向下展开,再次单击该一级菜单,对应的二级菜单收起。

    案例思路述

    直接使用动态面板记录一级菜单的收起状态和一级菜单展开后显示二级菜单的状态。切换动态面板状态,来实现收起 / 展开的效果切换,并配合推拉元件效果。

    案例技术:

    动态面板、鼠标单击时事件、条件用例、显示 / 隐藏时的推拉元件效果。

    制作步骤:

    首先布局左侧导航菜单。

    (1)拖入动态面板至设计区域并设置为两个状态,State1 代表一级菜单收起时的状 态,State2代表一级菜单展开并显示二级菜单的状态,在两个状态中分别按照“10.1.2 手风琴导航菜单 1”中的样式制作“人员管理”“任务管理”“数据统计”3 组一、二级菜单,其中“人员管理”的一、二级菜单如图所示。

    6f4176684ab52fa4c3da648cdb39f7f2.png

    (2)3组菜单即3个动态面板,分别命名为personnel、task 和 count。

    (3)把3组菜单纵向排列,每组菜单(动态面板)之间要紧紧贴合,且不要有交叉重叠的部分,如图所示。

    cb7425c6e88206f0fb40420c63410e49.png

    接下来制作菜单的展开和收起效果。

    (1)当“人员管理”一级菜单为收起状态时,单击后变为展开状态,展开其二级菜单,如图所示。

    ①进入 personnel 的 State1,选中“人员管理”的矩形,双击属性面板中的“鼠标单击时”事件,打开用例编辑器。

    ②选择【添加动作 > 元件 > 设置面板状态】。

    ③在右侧的配置动作区域勾选 personnel。

    ④选择状态为 State2。

    ⑤勾选“推动 / 拉动元件”,方向为“下方”。

    e5b05fa9c294e3d8ef10ce6d2e2b501f.png

    (2)当“人员管理”一级菜单为展开状态时,单击后变为收起状态,收起其二级菜单,如图所示。

    ①进入 personnel 的 State2,选中“人员管理”的矩形,双击属性面板中的“鼠标单击时”事件,打开用例编辑器。

    ②选择【添加动作 > 元件 > 设置面板状态】。

    ③在右侧的配置动作区域勾选 personnel。

    ④选择状态为 State1。

    ⑤勾选“推动 / 拉动元件”,方向为“下方”。

    33ea31bdcb907d4ecc3b4dc7d665f69b.png

    (3)用同样的方法给“任务管理”和“数据统计”两组菜单制作展开和收起效果。

    (4)设置完成后,按F5键在浏览器中预览效果,如图所示。

    25a9add5f9bb0ed00af80a2cbc5aef85.png

    提示:无论是手风琴导航菜单1还是手风琴导航菜单2,都需要配合使用“内联框架”元件来显示管理系统页面中的数据区域,也就是说当单击左侧手风琴菜单后,只需要在“内联框架”中切换页面即可。本节内容为了清晰地说明如何利用动态面板制作手风琴菜单,将3组菜单布局样式都制作出来之后才开始制作收起 / 展开的交互效果,并且每组菜单(即每个动态面板)中的交互动作都是一个一个按部就班添加的。在实战项目中,后台管理系统一定不止是3组菜单,有的菜单数量可能多达十几个,这时如果还是采取这种方法就会有些费时。可以先把一组菜单的布局样式和交互效果(不仅包括收起 /展开效果,还可以包括诸如二级菜单的选中、鼠标悬停交互样式的设置等)都制作完成,然后直接复制这组菜单(菜单的交互效果是可以同步复制的),接着修改这些菜单的文字内容和图标样式、修改菜单(动态面板)的命名,这样会简单许多。

    思考:

    本小节制作的手风琴导航菜单中,如何做到单击某个一级导航菜单展开对应二级导航菜单的同时,收起其他的二级导航菜单呢?读者可以按照下面的思路尝试一下。第1种思路,单击某个一级菜单(即鼠标单击时事件),把该动态面板设置为 State2 的同时,把其他动态面板设置为State1。但这种方法在菜单数量很多时操作起来会很麻烦,并且可维护性较差。

    第2种思路,把一级菜单(State1中的矩形)的“选中时”和“取消选中时”代表展开和收起状态。单击一级菜单(State1中的矩形)时,设置当前元件为选中状态。当一级菜单(State1中的矩形)被选中时,设置动态面板为State2;取消选中时,设置动态面板为 State1,利用“同一选项组内的元件在同一时间只能有一个被选中”这个属性,就可以做到同一时间只能有一个动态面板的状态是 State2(展开状态),即展开某个一级菜单时,收起其他二级菜单。

    数据查询与编辑页面

    管理系统的大多数页面一般都是对数据列表的查询与编辑,查询操作少不了多个下拉列表的联合查询(联动下拉菜单)。编辑数据时如果涉及批量操作,进度条又是必不可少的,本节就来制作这两部分的交互效果。

    进度条

    案例描述

    单击“上传数据”按钮,显示进度条区域(包括百分比),进度条逐渐填充完整,百分比显示为0% ~ 100%,如图所示。

    21d2d9df9cc4c30acb737679dc999d03.png

    案例思路:

    进度条的填充物为矩形,初始宽度为1,单击“上传数据”按钮后,设置矩形的尺寸为逐渐变宽即可。进度条百分比的算法为填充物(矩形)的宽度占总体宽度的百分比。

    如何不断地更新进度条百分比?因为百分比默认是隐藏的,当单击“上传数据” 按钮显示出来时,给其“显示时事件”添加“设置文本”动作,接着把它隐藏再显示,形成递归效果。

    案例技术:

    鼠标单击时事件、显示时事件、局部变量、Math.floor函数、width 函数。

    制作步骤:

    (1)使用矩形和水平线制作“导入数据”悬浮框,悬浮框中包含标题、“上传数据”按钮、进度条和“关闭”按钮,如图所示。图中蓝色部分为填充完整的进度条,命名为fill,尺寸为400像素×20像素,即当进度为 100%时进度条的宽度为400像素。灰色部分为进度条的边框底色,命名为border,其作用仅仅是为了美观,右侧的百分比命名为 percent。

    0135cc748e35cd2027cd8826a34cbc5f.png

    (2)调整好样式后,把进度条fill的尺寸修改为1像素×20像素,也就是初始状态,把fill、border 和 percent设置为隐藏,如图所示。

    a59bb1199c593d25eb0b10092ed37316.png

    (3)将悬浮框中的所有元件组合起来,命名为 input 并设置为隐藏。注意步骤

    (2)中设置了3个元件为隐藏,此步骤再次设置整个组合为隐藏。

    (4)拖入“按钮”元件至设计区域,尺寸为70像素×30 像素,位置为(220,80),填充颜色为#F 2F2F2,边框颜色为 #CCCCCC,修改其文本为“批量导入”。(5)单击“批量导入”按钮,弹出“导入数据”悬浮框,如图所示。

    ①选中“批量导入”按钮,双击属性面板中的“鼠标单击时”事件,打开用例编辑器。

    ②选择【添加动作 > 元件 > 显示 / 隐藏 > 显示】。③在右侧的配置动作区域勾选 input。

    ④动画为“向下滑动”,时间为 500 毫秒。

    ⑤ 更多选项为“ 灯箱效果”,背景色为#CCCCCC,不透明度为60%。

    c46fb6647a4b3ffe75748e9c3d490182.png

    (6)单击“上传数据”按钮,显示进度条,并逐渐填充完整,如图所示。

    ①选中“上传数据”按钮,双击属性面板中的“鼠标单击时”事件,打开用例编辑器。

    ②添加“显示”动作,显示percent、fill 和border。③选择【添加动作 > 设置尺寸】。

    ④在右侧的配置动作区域勾选 fill。

    ⑤设置宽为400像素,高为20像素。

    ⑥选择锚点为“左侧”,动画为“线性”,时间为2000毫秒。

    c7785cca61f689980fd4106f11f517f4.png

    (7)进度条逐渐填充完整的同时,百分比动态变化,如图所示。

    ①选中 percent,单击属性面板中的“更多事件 > 显示时”事件,打开用例编辑器。

    ②选择【添加动作 > 元件 > 设置文本】。

    ③在右侧的配置动作区域勾选“当前元件”。

    ④设置文本为“值”,单击fx按钮,打开“编辑文本”对话框。

    ⑤添加局部变量为 tc、元件和 fill。

    ⑥输入 [[Math.floor(tc.width/400*100)]]%。

    ⑦添加“等待”动作,等待 0 毫秒。

    ⑧添加“隐藏”动作,隐藏当前元件。

    ⑨添加“显示”动作,显示当前元件。

    dc1ea76c0be8df616b337094f6f83c93.png

    (8)为了让页面看起来更加美观、完整,可以自行使用中继器制作数据列表,详细步骤不再赘述。

    (9)设置完成后,按F5键在浏览器中预览效果,如图所示。

    21d2d9df9cc4c30acb737679dc999d03.png
    展开全文
  • (阅读时间:5分钟)设计师小伙伴们肯定都知道,在网站或者应用开发的前期,是需要设计原型图然后给开发和客户展示的。原型图的目的:第一是给自己看,方便规划整个设计并持续下一步的完成度;第二是给开发看的,...
    (阅读时间: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

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


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


    展开全文
  • [color=#FF0000]把原型图做成静态页都怎么做的?有没有什么捷径?[/color]
  • 管理后台Axure原型图

    热门讨论 2015-06-13 20:08:10
    管理后台Axure原型图,该原型图包含一些web页面常用的页面交互及panel切换。非常适合供别人参照来学习怎么使用axure产品原型
  • 这一次分享一波健身社交原型设计、生鲜电商原型、以及地图组件,用起来~ 健身社交原型 健身行业随着「全民健身」、「全民运动」这样的口号,迅速崛起。健身早已成为了一种新的生活方式,马甲线、八块腹肌成为了新的...

    在这里插入图片描述
    这一次分享一波健身社交原型设计、生鲜电商原型、以及地图组件,用起来~

    健身社交原型

    健身行业随着「全民健身」、「全民运动」这样的口号,迅速崛起。健身早已成为了一种新的生活方式,马甲线、八块腹肌成为了新的审美。

    但如今,线下健身房价格昂贵,并且大多未恢复营业,线上健身就成为了一种新的选择和趋势。

    对于健身的人士而言,单打独斗不如好友互相打卡监督、交流健身知识。所以,线上健身跟社交密不可分。

    那在原型设计上应该有什么侧重点呢?不如看看本期的「健身社交」原型吧。

    在这里插入图片描述

    区别于一般的健身产品,这个原型主要以社交为重点。抓住了好友互动的点,比如:只需连接你的健身设备,就可以与好友进行一次减脂的线上“PK”。

    在这里插入图片描述

    除此之外,原型包含了一键匹配、我的圈子、我的设备、排行榜、个人中心等核心页面。

    虽然设计较为单一,整体交互完整,大家可根据自己的想法进行二次加工,以便使用。

    在这里插入图片描述

    最后给大家介绍一下作者:明杰,95年互联网小油条,从业产品2年,擅长原型交互设计。

    对他感兴趣的刀友,可以去素材广场找他一起交流产品原型设计想法。

    生鲜电商原型

    从2015年起至今,生鲜电商市场规模从497亿元到现在,超过了2000亿元,一直保持着高速的增长。

    其中最典型的生鲜电商软件,就是「盒马鲜生」。本次分享的原型,很大一部分参考了参考了生鲜领域的top产品,以此来跟大家分享一个生鲜电商的原型,应该如何制作。

    作为电商软件,商品搜索及详情页是最基础的。

    在这里插入图片描述

    其次,购物车、订单提交、查看评论等核心页面也囊括在其中。

    在这里插入图片描述

    整体设计简单,配色统一,适合电商类产品的小伙伴们进行复用。

    地图组件

    不管是打车、社交软件,还是外卖点餐软件,都收到未知的限制,在使用中都需要通过定位授权。在制作这类原型时,地图组件当然必不可少。

    现目前已上线了5个标记图标;2个说明图标、定位图标及切换图标。除了图标外,还准备了缩小放大组件、地图样例。

    在这里插入图片描述

    展开全文
  • 1.dribbble上的原型图看不出逻辑dribbble上面大多都是视觉设计师,他们有些原型作品并不是用来体现交互逻辑的,是完全按照视觉表现出来的原型图(怎么怎么画,怎么有逼格怎么画)纯展示性质,实用性并不高,当然...

    1.dribbble上的原型图看不出逻辑

    dribbble上面大多都是视觉设计师,他们有些原型作品并不是用来体现交互逻辑的,是完全按照视觉表现做出来的原型图(怎么美怎么画,怎么有逼格怎么画)纯展示性质,实用性并不高,当然dribbble的那种小图也看不清楚你想要了解的“逻辑”。

    例如下图:

    图片来自dribbble

    虽然上图的原型图确实很好看,原型与原型之间的线也似乎把逻辑表达的很清晰,但是这样的交互原型图是好的吗?显然并不好。因为原型连接线错综复杂稍不留意就容易看错,使之看起来很复杂(里面也有大量的曲线,其实调节曲线也会花掉许多功夫)。整个交互文档显得过于庞大,一个画面里面要交代的事情过多,这使之你的文档的体验变得极差,虽然他看起来很美很规范的样子,但是他并不好用。并不能清晰的展现出交互逻辑。当然如果你想让你做出来的原型图美观一些,给看你稿子的人以愉悦感,让他们通过视觉感官认知到你的专业,也是给可以自己的稿子加分的,那么这样的话,当然是可以借鉴学习一下dribbble上的原型作品,但是切记不能为了美观而美观(花费大量时间和心思为了美观),保持基本的整洁大方,排版正确已经足够咯~

    另外导致原型连接错综复杂的原因就是可能是一个页面跳转流程图里包含了不同的几个功能,在一个流程里塞入不同的功能,确实会让文档变得复杂不清晰。

    2.以下是我在工作中采用的方式 仅供参考

    例如我们要用原型来表达一个任务流程

    首先我们会先有一个主流程(happy path)

    主流程中一般不要出现报错、判断、与主流程不相关的特殊跳转、特殊的情况等。这个主流程的目的是为了让文档的使用者先了解此流程的主线,了解一个正确流程的流转路径。

    好了,主流程咱们表达完了,接下来我们就要对主流程作一个补充。

    我们再把一些特殊的情况以及主流程的一些分支流程分开来写,这样的话就让你的交互文档主次清晰,更容易表达我们的交互逻辑。切记不要在一个流程中过多的表现与之不相关的流程,一次只说清楚一件事情。

    如上图从视觉上看流程是从左到右依次排开往后面走的,但不是绝对是这样的,有时候分支流程里其实也会有一些小的分支流程的情况,这时候可以根据实际情况用线直接连接出小的分支流程,切记避免杂乱,如果分支流程过于复杂,请拉出来单独画出。

    如上图从视觉上看流程是从左到右依次排开往后面走的,但不是绝对是这样的,有时候分支流程里其实也会有一些小的分支流程的情况,这时候可以根据实际情况用线直接连接出小的分支流程,切记避免杂乱,如果分支流程过于复杂,请拉出来单独画出。

    其实以前也有跟楼主一样的烦恼,自己的交互文档总是乱七八糟,这期间尝试了不同的做法。也许以后做法也可能改变,但是有一条不能变:那就是用自己的文档来清晰的表达出自己的设计想法,让使用自己文档的人有最好的体验【我们就是做用户体验的嘛 : ) 】

    最后希望能帮助到楼主和看我回答的人 若有表达不对的 请提出 多多赐教 共勉 : )

    ----------------------------------------------------------------------------------------------

    2017年2月21日补充更新

    其实我上面主要说的是【场景流程图】每一个场景都是从左到右,有始有终,很清晰,每次直说一件事。让交互设计师的上下游都能够清晰的明白用户通过这个流程能够达到什么样的目的。但是开发同学用起来就缺了很多跳转逻辑,判断逻辑。

    另外【页面流程图】就是以上我吐槽的dribbble上的图,这种图其实能够清晰的表达出页面跳转逻辑,适合跟开发同学进行沟通。但是缺点也是显而易见的,绘制的过程中容易让其过于复杂,可读性降低。

    【场景流程图】和【页面流程图】两者都有优缺点,所以我们在做稿子的时候尽量把两个结合,让两者进行互补,合理运用让交互设计产出物更加的清晰明了。

    这些都是我答完题之后又进行的一些总结思考,以前的答案略有偏激。

    好了,希望大家都能给出最好的设计产出!

    展开全文
  • 这张图片里面点击选择的地方颜色为红色而没有选择的地方颜色就不是这种颜色了,这也是为了让用户明白了选择了那一个如果选择的颜色都不是很亮颜色几根没有选择的地方颜色相差不大那怎么可能让用户知道他选择了没有呢...
  • 原型图的设计

    千次阅读 2016-10-20 12:50:24
    原型图的设计 1.原型的重点是提供交互性导览,在投入资源进行开发之前预判产品的可行性,所以原型控件样式也就没有那么重要。 2.如果要作高保真原型的话,可以自己贴图放到axure里面。 3.手画原型,这样最能呈现我...
  • 这里笔者介绍一种很灵活很实用的分析方法--四色原型图,也叫彩色UML。(图片引自JDON的BANQ大师之手)四个元素的介绍:moment-interval:粉红色的时刻—时段:一个时刻或一个时段,您需要追踪它或某事,通俗地说...
  • 原型图设计大全

    千次阅读 2017-12-13 10:47:53
    新手必读 一步步带你玩转墨刀https://modao.cc/posts/6113 墨刀操作手册(可工具书查阅):https://annhanhan.gitbooks.io/mockingbot/content/ ... ...xxx效果怎么制作? 定时轮播:https://modao.c
  • 用软件可以什么?1、生成链接2、生成HTML文件3、另存为图片我们之前已经介绍了前两种方法。如果不确定,可以查看我们以前的文章。本文介绍了将axure原型图像导出为图像格式的方法,仅供参考。打开axureRP软件,并...
  • 如何把原型保存为图片?

    千次阅读 2020-01-19 18:12:29
    正常情况下,利用Axure RP制作的原型图文件无法使用其他软件打开,你想将做好的原型给其他同事、领导或者客户查看的话,而刚好对方又没有安装axure这个软件的话,可以怎么做呢? 1、生成链接 2、生成HTML文件 3...
  • 原型图设计经验(1)

    2020-11-29 20:53:36
    3、功能以人为本,你先梳理梳理用户的核心需求是什么,怎么样才能方便他们,在实现功能前提下尽可能想到一些方便他们操作的功能 4、建议你之前要先把各个底层数据流转和业务流程梳理出来 5、在整体设计前找相关...
  • 新手必读 ...墨刀操作手册(可工具书查阅):https://annhanhan.gitbooks.io/mockingbot/content/(设计师必读)sketch插件使用方法:https://modao.cc/posts/6474 ...xxx效果怎么制作? ...
  • Adobe XD软件是一款专为...设计师可以用它来高保真设计,产品经理可以做原型设计,运营管理人员可以流程。(原型界面)从一开始被大家质疑鸡肋,到现在的真香,XD受到了相当一部分人群的追捧,简洁易懂的...
  • 流程怎么做? 2. 流程、活动、时序 3. 动手画 – 钉钉直播流程 4. 动手画 – 新人报道活动 5. 动手画 – 极客时间Push活动 6. 动手画 – 钉钉直播时序 7. 动手画 – 极客时间 Push 时序...
  • 有一天一个朋友拿着一个公仔机器人的项目过来找我,说200套外壳,问我如何省成本用最少的钱做好产品。类似一下图片的机器人一样。组装起来高200mm左右,内外配件总共是62个。我当时看到产品小估算重量也很轻,就跟...
  • 这个网红布丁小兔子,很可爱吧,是怎么做出来的呢? 首先调好布丁原料,然后拿出模具,将原料倒入,等待成型之后,轻轻的取出来,最后将成型的兔子的耳朵和鼻子上红色,眼睛涂上黑色,就大功告成啦。这个时候就...
  • 首先给动态面板添加一个背景图片 ...但是完成之后的效果是以左上角的顶点为中心放大 那我们想以图片的中心为中心点进行放大怎么做?需要用到动态面板嵌套 首先将面板右键单击再次转化为动态面板 右下角就会显示...
  • 怎么做产品?

    万次阅读 2018-02-05 08:49:58
    招一个产品经理,帮你把想法和需求整理成产品文档,画出产品原型图。这个过程能够很好的帮助你梳理自己的思路, 有什么想法应该在这个阶段探讨,确定。在这个阶段多花点时间值得,对于后面的工作是非常重要的一个...
  • 关于用axure轮播的教程有很多,不过条条大道通罗马。崇尚简单快速的朋友不妨看看本文介绍的方案。前段时间一个开放平台的原型。大家讨论完需求就希望,快点出原型(第二天)。而且要求“高保真”。于是在“快速...
  • 原来如此...漏皮的补皮每日一皮:客户说想要增加一个新功能,你看我的如何?2020-05-28 每日一皮:程序员穿着解析2020-05-27 每日一皮:雷神索尔的锤子为什么这么重?2...
  • 我们最近完成了最新的“只是为了好玩”的原型项目:一个由一块塑料制成的放大镜。因为我们的许多客户项目都受到保密协议的保护,所以我们花了一部分空闲时间来创造综合创造性设计和工程的产品,并允许我们提升我们...
  • 我们常说服装设计需要灵感,可是灵感这个东西哪能说来就来,甚至找了大半天、大半个月、大半年,都没找到...传说中的灵感,就像我的爱情,找...我不知道她是用什么手段将这些衣服都找到对应的风景照片做原型,这一定...
  • 一、前言 大公司制作的软件都非常好看,比如“360安全大师”、“QQ音乐”等。使用同样的开发平台,为啥人家的软件那么好看,而自己开发的软件总是呈现一股“怀旧风格”。...哪懂什么原型图设计、UI设计图绘制。因...
  • 大家都知道,每次在填写问卷调查结束,为了能够留存客户的停留时间或是某个活动要准备时,可能都要进行一次转盘的抽奖活动,那么我们怎么原型制作呢。下面就是如何使用axure制作转盘抽奖的交互原型,想要登录...
  • web端界面测试 界面测试就是指,布局... 但是如果碰到公司没有原型图,没有UI效果图怎么破? 毕竟同是天涯沦落人的情况太多了~~ 那么我们可以参考市场上同类型的成熟产品来界面比对,且考虑以下几个方面: 1、导航

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 234
精华内容 93
关键字:

原型图怎么做