Axure怎么制作上传列表的原型？
上传文件是用户的常用操作，也是系统的必备功能之一。上传列表是系统的必要页面。您可以上传文件到系统中。在上传列表中可以查看和处理上传、上传成功和上传失败的状态。那么，使用Axure制作这样的原型效果，怎么做呢？接下来我们一起来学习吧~自学Axure，就上！精选Axure自学视频课为不同阶段朋友提供精准专业对点学习！无论0基础还是有一定基础，都可以获取专业的课程学习~Axure制作上传列表的原型方法：一、制作完成后应具备以下效果可以真实选择电脑里的本地文件；选择本地文件后，获取已选中文件的名称信息；模拟正在上传的等待效果；可以删除已上传的文件；上传失败后，点击上传失败文字，可以重新上传。二、制作材料准备1.中继器内材料这个原型主要用中继器制作，所以我们需要新建一个中继器，中继器内材料包括：文件图片——文件图标；蓝色矩形——用于制作等待效果的横条，圆角设置为最大值；浅蓝色矩形——用于loading效果的背景横条，圆角设置为最大值；文件名称——显示文件名，用文本标签制作即可；上传状态——默认蓝色文字，默认内容为正在上传；删除按钮——删除当前文件的图标按钮；背景矩形——白色矩形，外部阴影为浅蓝色；垂直线——用于分隔和美化原型。如下所示摆放：中继器表格设置，表格内共三列：no——用于排序使用，按12345678顺序填写即可；text——对应文本名称的文本；state——上传状态包括上传成功、上传失败和正在上传。2.上传按钮组合因为要实现本地上传文件、记录文件路径、获取文件名称、中继器添加行的效果，所以上传按钮不仅仅是一个按钮，它由以下4个部分组合。1）蓝色按钮——命名为upload，至于顶层，在按钮组里只看到该元件，样式可以设置美观。2）输入框——命名为file，这里我们需要利用Axure里面输入框的系统元件输入框，将输入框的输入类型设置为文本，这样鼠标点击输入框的时候，就可以弹出文件的系统弹窗了。我们把这个输入框缩小，用蓝色按钮遮挡。3）文本标签——命名为text，用于记录选择文件的路径，默认隐藏，可直接用蓝色按钮遮挡。4）文本标签——命名为click，用于上传文件后触发中继器添加行事件。三、交互设置1.中继器载入时交互添加排序——对中继器按钮no列的内容按升序的方式排列。这样做是为了后续添加新文件的时候，新文件可以排在首行的位置。2.中继器每项加载时交互设置文本——设置文件名称元件的文本值等于Item.text，即中继器内text列的值。然后我们需要分三种状态来设置，不同交互。1）如果state列的值为正在上传设置文本——设置上传状态元件的文本值等于Item.text，即中继器内text列的值，这里我们用富文本的形式，这样就可以选择设置文本的颜色为蓝色。设置尺寸——设置蓝色矩形（上传横条）的尺寸，高于它原来的高度，宽等于1。因为是正在上传，所以将蓝色横条设置为最小准备制作loading的效果。设置尺寸——再次设置蓝色矩形（loading横条）的尺寸，高于它原来的高度，宽等于灰色矩形（背景横条）的宽度，这里注意我们需要加一个动画时间案例中为2000ms，这样就实现了上传loading的效果。等待——这里我们需要等待上面蓝色矩形动画时间结束，一般等待比它的时间稍长一点，案例中我们设置等待2500ms。更新行——更新当前行state列的文字，更新为上传成功。这样就顺利完成上传loading的效果了。2）如果state列的值为上传成功设置文本——设置上传状态元件的文本值等于Item.text，即中继器内text列的值，这里我们用富文本的形式，这样就可以选择设置文本的颜色为绿色。设置尺寸——设置蓝色矩形（loading横条）的尺寸，高于它原来的高度，宽等于灰色矩形（背景横条）的宽度，这里注意不需要加动画时间，因为动画在正在上传的时候已经完成了，这里主要是默认的列表需要这样设置。3）如果state列的值为上传失败设置文本——设置上传状态元件的文本值等于Item.text，即中继器内text列的值，这里我们用富文本的形式，这样就可以选择设置文本的颜色为红色。3.上传状态文字鼠标单击时上传状态分为上传成功、正在上传和上传失败，前两者不需要处理，如果上传失败，我们想实现点击文字就重新上传的效果。更新行——更新当前行，state列的值，更新为正在上传。因为前面我们在中继器每项加载时写了正在上传的事件，所以更新行之后就会实现重新上传的效果。4.关闭按钮鼠标点击时删除行——删除当前行的文件。5.upload按钮鼠标单击时事件这部分内容涉及一些js的代码，如果没有相关基础的话，可能理解起来会有一定的难度，下面我简单讲解一下思路。首先是鼠标单击这个按钮的时候，我们click的代码触发file元件点击，这样相当于我们在点击蓝色上传按钮的时候，同时点击了file的元件，这样就可以弹出本地文件选择的弹窗。选择本地文件后，我们要执行两端的代码：将选择的文件路径名设置到text的元件里；再次用click的代码，触发原型里click文本标签点击的事件。后续我们会在click文本标签内添加交互，将已选择的文件名添加到中继器内。6.click元件鼠标单击时事件上面说到选择文件后会触发该元件鼠标单击时，那在鼠标单击时我们要执行一下交互。1）标记行——标记所有行。2）更新行——更新已标记的行，即更新所有行，更新no列，将他们的值改为TargetItem.no+1。这里的意思是将他们的no序号改成他们原来的值+1，这样原来是12345678的，就会变成23456789。这样做的目的就是后续我们新增行的时候，可以将最新的一行的no设为1，因为前面我们在中继器载入时设置了排序按照no的升序，所以新上传的文件就能排在第一行的位置。3）添加行——更新no列的值为1，state列的值为正在上传，text列的值为LVAR1.slice((LVAR1.lastIndexOf(‘’))+1。这里需要展开说明一下，因为我们选择文件以后，在text元件上获取到的是文件的路径，例如：C:fakepath微信截图_20211014105011.png，所以我们还要对text元件进行加工，LVAR1对应的就是text元件。通过观察，我们可以发现，文件问就是最后一个符号后面的内容，所以我们可以用lastIndexOf函数找到最后一个符号所在的位置，然后用slice从该位置+1起到最后的文本，这样就取出了文件名称。这样我们就完成了整个元件了，将它组合在一起，以后就可以直接复制或者从元件库用拖出来使用了，是不是非常好用呢？好啦，以上的内容就是“Axure怎么制作上传列表的原型？”的相关分享了，希望对你的Axure学习操作有一定的作用哦！学习Axure，一篇就学会是不大可能的，而几篇几十篇几百篇Axure文章就不一样了。学习更多Axure，Axure相关文章、问答、视频教程综合助力~axure很强大，甚至可以用他做个简单的游戏，但是假如没有思路这个工具就没用，所以思路最重要！来，专业学习Axure原型思路，快速独立上手原型制作~以上就是本文的全部内容，希望对大家的学习有所帮助，。-->
如何使用axure进行原型设计？
用axure进行原型设计需要先从整体的布局考虑，再来细化每个功能点。整体的布局就是在设计的过程中注意色彩的对比、对每个模块的布局进行深入探讨以保证样式美观、方便操作；细化每个功能点就要考虑弹出和跳转的正确设置，每个跳转链接都可以准确的到达指定区域，减少繁琐的进行多次跳转。1.确定风格每个原型设计都需要先确定好风格，保证后续的设计风格一致，符合使用者的整体形象。其次是颜色运用的合适，可以唤醒使用者的视觉美感，给予视觉上的冲击，人们往往都愿意相信自己第一眼便喜爱的东西，所以原型的设计上，一定要优先抓住客户眼球，让他们接受这个样式，这样设计者也可以少走弯路，达到事半功倍的效果。加强使用者的第一印象，使其在使用中易接受，提高使用效率。2.注重实用在原型的设计上，美观是一方面，但也不能减少对实用性的注重。进行原型设计的时候，一定要多方考虑，把使用者看中的、常用的、主要的功能排在页面最上方或是最显眼的地方，不能因为强调设计上的炫酷，就让使用者为了打开一个页面或功能要点很多下。实用又不缺乏美观的原型才更能凸出设计者的专业能力。3.细化功能Axure的功能非常强大，可以通过将元件库中的原件直接拖拽到主操作界面中进行排版，操作非常简单且十分快捷，但如果需要显示相应效果，则需要对各相关元件进行交互设置，从而能够显示出想要的效果。如滑动显示效果，用来显示和隐藏动作进行展现；在动态面板中，通过Tab标签切换的功能呈现单击不同的Tab标签可以切换显示不同的Tab内容页，且选中的标签标题产生变红色或加黑效果等。以上所述仅仅是Axure中的一小部分，进行Axure原型设计时还需要考虑到一定逻辑性，比如在做滑动效果时，如果逻辑不清晰，就会导致效果无法显示。Axure原型设计需要持续不断地增加新内容来满足更多使用者的需求，所以要不断的了解和学习其中的功能以及效果展示方法，并将学到的技巧和方法积累沉淀下来，扎实自己所学，扩充自身的知识储备。
怎么理解交互设计,是否会画原型图
交互设计是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。（百度百科）
交互设计师是以人的需求为导向，理解用户的期望和需求的同时，理解商业、技术以及行业内的机会和制约。基于以上的理解，创造出形式、内容、行为有用易用，令用户满意且技术可行，具有商业利益的产品【摘要】
怎么理解交互设计,是否会画原型图【提问】
交互设计是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。（百度百科）
交互设计师是以人的需求为导向，理解用户的期望和需求的同时，理解商业、技术以及行业内的机会和制约。基于以上的理解，创造出形式、内容、行为有用易用，令用户满意且技术可行，具有商业利益的产品【回答】
交互设计是对行为的设计。
比如，吃一个苹果，行为怎么设计？
解法：拿起苹果 — 放到嘴里 — 吃，这就是吃苹果的行为。
这个问题非常简单根本不需要设计行为，人们下意识都知道怎么吃。
现实生活中实际情况要比这个复杂。比如这个苹果要两个人分吃，那怎么来设计这个行为？
解法一：拿起苹果 — 第一个人吃一半 — 第二个人吃完（第二个人能接受？）
解法二：拿起苹果 — 分成两半 — 分别给两个人吃（这样就合适点）
如果问题再进一步复杂，行为设计的解法就有更多种，那就需要交互设计来研究更多行为设计的解法并找出最优解。【回答】
就是相互交流相互促进【回答】
产品交互原型用什么做
国内外很多制作产品交互原型的软件，下面我分享几个比较常用的制作原型软件，希望对你有帮助~Axure：发展较早的一款原型设计软件，因而名声较大。无限画布，适合做低保真到中保真度的原型。功能很多，也让学习起来有点难度，网上有很多axure教程就不多说了。本地型软件，可以下载html文档预览，手机预览不方便。墨刀：国产的一款原型设计协作工具，比起axure来非常容易学会，内置组件很多，创建页面跳转也比axure简单太多。因为是一款在线工具，可以云端保存工作，这点确实很便捷。另外，通过分享链接就可以分享原型给别人看了，如果涉及到跟同事对接什么的，选择在线的工具更方便。支持sketch文稿导入和自动标注。个人认为性价比最高。Invision: 可以说目前是国外发展最大的在线原型设计工具，主打“交互原型”和“协作”，支持sketch和ps设计稿导入做交互。近来出的 Invision studio 对标sketch，想满足更惊喜的设计需要。国外一些大牛公司像airbnb和amazon都在用。不过对于国内用户来说会有服务器速度的问题，而且，贵。（土豪公司无视）Marvel: Marvel 也是海外知名度较高的一款原型设计协作工具，支持PS和sketch设计稿导入做交互原型，本身也支持中度保真程度的设计。也有自动标注功能。图片库对接unsplash，这样来自unsplash的很多精美的免费图片可以直接用。价格比Invision稍便宜。POP（Prototyping on Paper）：这款比较另类，是给拍照的手画草图直接做交互。操作轻巧简单：先用手机拍下草图原型(存到POP app内)；然后开始编辑图片的哪个区域（按钮）链接到什么页面，添加跳转链接热区，就可以在手机上给小伙伴们演示了。内嵌的交互动作 如侧滑、展开、消失等，即可满足一般的动态演示需要。但功能较为简单，对更深的需求无法满足。Proto.io：也是国外的一款手机原型开发平台。支持在大多数的浏览器运行，共享和协作操作方便，可以直接在真实的移动设备上对原型进行测试。拥有较为丰富的UI组件，支持自定义。另外它有不错的用户测试功能，支持视频录制。并且在移动组件时，能够实时在画布看到组件之间的距离。另外由于服务器的原因，有国内用户反应速度有点慢；收费较高，性价比一般吧。有疑问可以追问，满意请采纳，谢谢~
