导航:首页 > 万维百科 > 网页版app交互图设计

网页版app交互图设计

发布时间:2021-03-08 15:07:35

1、目前UI交互设计常用的软件有哪些?UI处理软件有哪些?

目前市面上确实蛮多的,建议学好一个,够用就好——学多而不精其实就是浪费时间!
1. Adobe After Effects
AE这个软件我想大家都知道,火得一塌糊涂,如果没猜错的话,它目前属于设计师学动效的首选。
它的特点就是强大且牛逼,基本上要的功能都有。UI交互设计其实只是用到了这个软件很小的一部分功能而已,要知道很多美国大片都是通过它来进行后期合成制作的,配合PS和AI等自家软件来说,更是得心应手。dribbble上炒鸡多的大神都是用这个软件在show哦,毕竟这个软件做demo那是很厉害的~
但是有些效果程序猿不见得能够帮你实现出来, 因为实际的项目产品受太多的制约,木有那么多程序猿会没事给你做动效的!
2. Adobe Photoshop
可能很多人都认为ps只用来作图和处理图像的,并不知道ps可以做gif~然而当AE没有火起来的时候,我们这些老ui设计师们都是用ps做gif,用flash做demo(过去我们只需要做PC桌面的动效)。如果没记错的话,ps从cs6之后开始进一步加强了动效的模块,现在的版本能够实现很多相对复杂的动效~
而笔者喜欢用ps来制作简单的表情动画,逐帧动画用得居多。
3. Adobe Flash
Flash可以说是过去的王者,也是由于时代的发展原因,现在基本被淘汰了,这里不多做解释,具体可以百度——据说特别耗费cpu和占用内存,软件里面有都爆卡~不淘汰才怪,现在很多很low的网页游戏还在用这种技术~
4. Pixate
这个软件被大牛Google收购了,然而被收购一年后,Pixate Studio宣布于10月31号被停止更新了~凄凄惨惨戚戚。
Pixate是图层类交互原型软件,优点是可交互,共享性强,和Sketch结合相对高,同时对Google Material Design的支持比较好,有许多MD相关预设;缺点是没有时间线,层级管理不是很明确,图层一多就会非常的繁杂。
5. Origami
这个软件可以用一句话来形容——超强大的高难度原型工具,要是没点代码知识做压惊~~建议远处观望就好~
6. Hype 3
hype 3也算是火了一小段时间的,号称无代码动效神器,像AE一样使用时间轴就做可互动的动画。PC、手机、pad端都可以直接访问(以web的形式),也可以导出视频或者GIF。3.0版还有物理特性和弹性曲线,可以发挥更强大的动画效果。对中国人来讲,它原生支持中文这一点也非常棒!配合sketch效果也是杠杠的!
7. Flinto
界面跟Sketch很像,如果会用sketch那么上手很快。它能够快速实现各种滚动、转场、点击反馈效果,手机和电脑端的预览都非常的流畅,貌似现在用的人不少~
8. Principle
这个软件的和上面的flinto有点类似,界面和sketch类似,同时配合sketch也是非常方便。它主要是做2个页面间过渡专场特效,元素切换,细节动效的工具。优点很明显,效率高,质感好,缺点就是不能做整套原型。
9. CINEMA 4D
说到C4D或者大家第一反应是它是三维软件啊~没错!但是它做起动效来也是帅破天际的~~下面是网络上用C4d做的一些demo。
10. keynote
keynote相当于windows的powerpoint,是个幻灯片软件。但是!或许你并不知道,据说苹果的UI交互设计师都是用keynote做交互演示的......只要能够熟练掌握这个软件,目前app里的绝大多数动效都是可以做出来的~但是相对复杂一点的动效实现起来就有点不够.......但是已经很屌了好吧~~笔者经常为了省事直接都是用它做个简单demo给程序猿看的,快捷方便啊~要知道时间就是金钱啊!
好啦~由于笔者也并不是全部了解目前市面上的动效软件,按照自己的理解基本上一些相对主流的动效制作软件就是上面这些,如有漏或者不对的地方还请指正~
总结:
1、AE属首选。
2、PS制作简单动效比较方便。
3、Flash被ADOBE爸爸抛弃了。
4、Pixate优点是可交互,共享性强,和Sketch结合相对高;缺点是没有时间线,层级管理不是很明确,图层一多就会非常的繁杂。
5、Origami,使用此软件还是有点代码知识为好。
6、Hype3配合sketch效果很好。最近也比较火
7、Flinto界面跟Sketch很像,能够快速实现各种滚动、转场、点击反馈效果。
8、Principle,优点很明显,效率高,质感好,缺点就是不能做整套原型。
9、C4D攻可三维,受可动效。
10、keynote相当于windows的PPT,相对复杂一点的动效实现起来就有点不够。

2、web app与原生app有哪些交互设计区别

1、页面跳转更加费力,不稳定感更强
思考点:如何减少跳转(扁平结构、页面布局技巧),增加数据及展示的流畅流程及稳定性(技术)
2、更小的页面空间(由于浏览器的导航本身占用一部分屏幕空间),更大的信息记忆负担
移动设备的屏幕要小得多。这种如同透过门缝进行的阅读增加了认知的负担。人脑的短期记忆是不稳定的,用户在滚动屏幕的过程中需要临时记忆的信息越多,他们的表现就会越差。
思考点:排版更清晰、信息更简练 (可在原生APP基础上去掉一些丰富、复杂的视觉表现)
3、导航不明显,原有底部导航消失,有效的导航遇到挑战
思考点:如何有效的提供导航?有哪些形式?
4、交互动态效果收到限制,影响一些页面场景、逻辑的理解。
思考点:比如登录注册流程的弹出、完成及异常退出,做好文字提示。
针对以上困境,解决方法总结如下:
首先,从APP到WAP版,在产品上,最明显且核心的:
1、精简功能,只将核心的任务实现,非核心的枝节可考虑删减。
2、做好新的Web App导航.
3、补充从Web App 对 下载原生APP 的引导。转载,仅供参考。

3、一款优秀 APP 的交互设计,怎样学习和借鉴

新手交互设计师需要关注几个点:App本身的规范,熟读并能够看出来App本身哪里有没有不符合规范的地方。拆解掉这个优秀App所有的功能及体验流程,思考每一步,及为什么。最好是找这个App的设计师,邮件请教他这里是如何思考的。1.界面截图or录屏。把App整体的玩一遍,过程中截图留档。如果是对手势支持较多或者动效较多的会录屏留档。2.页面SitemapApp里不宜层级过深,把截图整理后「同页面不同状态可以合并」还原一下Sitemap。看看别人如何组织自己的结构。3.流程重现还是利用前面的截图,在画图工具里自己串一下。这里就可以发现这些优秀apps对于自己设计规范的定义。比如对于某操作,什么时候使用浮层,什么时候使用页面。4.竞品分析有对比才能看出设计差异和设计理念。找到同类型的优秀应用。看看每一个产品、设计上的不同处理。你就会发现其中真正的差异。5.保持使用如果你觉得他真的不错,记得要时常用一下。因为我们不可能在一次使用中就能发现其中的每一个设计环节。如果是社交类的应用,最好找几个有同样兴趣的同学平常一起来做测试。

4、WEBAPP与原生APP有哪些交互设计区别

从使用场景上,Web App用户面临比原生APP用户更严峻的问题:
1、 页面跳转更加费力,不稳定感更强
2、 更小的页面空间(由于浏览器的导航本身占用一部分屏幕空间),更大的信息记忆负担移动设备的屏幕要小得多。这种如同透过门缝进行的阅读增加了认知的负担。人脑的短期记忆是不稳定的,用户在滚动屏幕的过程中需要临时记忆的信息越多,他们的表现就会越差。
3、 导航不明显,原有底部导航消失,有效的导航遇到挑战
4、 交互动态效果收到限制,影响一些页面场景、逻辑的理解。

5、什么软件可以设计动态app页面交互

你可以试试应用之星网站,可以设置动画效果来控制,交互可以用交互控件来设置

6、什么是app交互设计

app交互设计分为以下5种:
1. 树形结构,做产品交互的逻辑关系就要像自然生长的大树,树干、树枝和树叶越往内部交互就要越少,不能在树叶上长了颗大树。
通常情况下很容易理解,交互设计与功能复杂度相联系,就像大树一样,界面展示一开始的时候是树根 树干 树枝和一片小树叶,功能点一点点变小,减弱。但是有时候我们在用app的时候会在一个很不明显的地方有一个大功能,就像发现新大陆一样,我不说这个对还是错,如果这个新大陆是一个很重要的功能点,那么做交互就要有新手引导,指引用户用这个功能,不然只有20%的用户会发现此功能,埋藏越深责用户点击率会越低。如果这个功能不是很重要那么可不可以换一种形式展现,减少功能点从一棵树变成一片树叶。
2. 大众交互,为了追求不一样而硬要改变的同时要做好新手引导。
交互的复杂多变会让用户摸不着头脑,一半用户学会这个功能需要交“学费”,要做到市面上最普遍的形式,不要因为不一样而变的不一样,如果非得要变就要把它变好,要好新手指引,不然改变了用户习惯,给那些“小白”用户造成困惑,甚至是流失很多潜在付费用户。
3. 错觉交互,利用人性的弱点扩大产品收入。
错觉交互是利用人们最正常的用户习惯来做一些用户不想做的事情,达到研发商的目的,通常利用这种情况最多的是付费,无意间骗取用户钱财,很多用户不会在意1元两元的费用打电话投诉或索要,就造成了很多研发商一款上线的产品会有大几百万的流水。
4. 深度交互
深度交互就是人机器界面又增加了机器的交互,比如:很多唱歌的app,当你录制歌曲的时候利用自带的耳机录制音乐效果会很差,不会让歌手发挥更好就自己研究了一款麦克风,用手机这款app要配合一款外接一款机器才能达到最理想的效果
5. 本质交互
“顾客是上帝”一定要分析用户。每个项目的实用性和交互性不是在给某一个老板或者哪个制作人用,不能按照他们的想法做出他们喜欢的东西,是给用户用。老板们用多年来的经验和阅历为依据在做事情,请不要忘记你的思想掌控不了用户,用户的思想你要研究甚至成为你的用户,不然总认为自己是金字塔上最高的人,指挥跟你混的人民战斗,不深入了解用户你指挥的永远是外走内不走,行尸走肉一般

7、如何使用ppt实现APP交互设计

其实还是能做到的,我这么干过,步骤
1.安装2013版office
2.熟悉操作,尤其是基本动画设计和合并形状(推荐秋叶PPT三分钟教程,有免费电子版哦,认真做完每一期三分钟就差不多了)
以上两点就够了

8、做交互设计(App方面)需要具备那些知识

需要一个制作交互原型图的软件;Axure之类的,你要手绘额,也是可以的
然后就是APP交互版设权计的规范了,这个就需要自己去一些做交互的网站自己发掘,我这里讲不完的。
http://www.woshipm.com/
http://jumpui.com/
http://www.ui.cn/

9、APP交互原型图 怎么画?

Low-fi,即低保真原型图,整个APP设计阶段,设计师真正开始上手的环节。待PM制作好PRD文档和逻辑流程图之后,交互设计师开始依据已有的结论,画出Low-fi。
Low-fi的作用
1. 方便团队进行方案的讨论和统一。
就像使用场景Scenario和用户画像Personas,团队每个成员脑海中所理解的都会有所不同,但通过PRD,咱们可以进行至少是大体上的统一。而在这基础上,APP的具体画面和流程,每个人都有自己想象的视觉效果。Low-fi就在此时起了相同的作用。
当然统一的进一步促进效果是,进行后面核心功能的深入探讨,将概念落实到实施方案,并验证逻辑上是否能跑通,以及主页面元素的确定。
2. 方便开发人员进行整体架构的布置,开始着手一些基础元素的部署。
3. 做出demo进行内部尝试、小范围的用户调查,一般会有一些更改,不会影响项目主方向,大多是功能上的调整
Low-fi 的处理工具与文件要求
作为交互设计师,在Low-fi阶段多使用的是sketch,PS更侧重于用来做图片的处理。出发点还是更多的从效率上进行考虑,sketch运行速度非常快,文档小,测量距离方便,可复用的图层组(symbol),做好图之后导出多倍图也十分方便。所以在此阶段做草图,sketch是不二之选。
然而,对Low-fi的文件处理也有一些要求,主要分为视觉效果和文件名整理。
视觉效果上倾向于使用黑白灰无色彩感的设计方案,目的是为了降低视觉上的干扰,让设计师和团队其他成员,将精力重点放到APP本身的功能完善和逻辑完整上面。
而文件名的整理主要表现在图层命名需要规范。统一的控件用symbol进行管理,symbol的命名建议使用驼峰式,即每个单词间没有空格,每个单词首字母大写(这里说的是大驼峰式,即第一个单词的首字母也大写了)。

与网页版app交互图设计相关的知识