一波交互稿

  • 经验类型规范/资料
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
13820 24 184 2016-12-22

发下 14 15 年所做的几个项目的交互线框图。

啰嗦下:14 年初看了搜狐新闻客户端 UED 团队的《设计之下》,收获最大的是他们交互展现形式,严格细致的版面,清晰的页面关系展示,详尽的交互细节说明,比那种满屏只有各种线连接页面的交互展现形式简直好太多,立马献上了膝盖。


1.《AppMaker 创建 / 管理平台》项目

由于项目很赶,没有时间出全部界面的详细说明文档,只做了小部分界面的详细说明。视觉稿可去此浏览:http://www.ui.cn/detail/94801.html

下面是大约50个交互稿的缩略图Image title

下面是几个交互细节说明文档:

Image title



Image title

Image title


2.《CleanMaster》项目

仿猎豹清理大师一款 App,居然还存在于 Google Play:https://play.google.com/store/apps/details?id=com.alinaapps.cleanmaster

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title


3.《iStat》项目

仿金山电池医生的一款 App,那时候刚看完《设计之下》,所以这是第一个拿来练习这种交互展现形式的项目。可惜程序也都做完了,AppStore 就开始打压这类应用了,最终没上线。

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title



全部评论:24条

  • 飞行燃料weed

    2018-09-11 11:24

    华为的设计稿也是这样的,差不多

  • 宇宇宇宇宇宇宇啊

    2017-01-18 12:40

    建议不要把线条拉入原型中

  • SiriusBlack

    2017-01-13 18:26

    @Jamie_杰米: 谢谢!

  • Jamie_杰米

    2017-01-13 17:08

    @SiriusBlack: 我那个是自己画的。 倒是可以试试这个,没怎么用过:https://github.com/mariuszostrowski/wireframingsketch

  • SiriusBlack

    2017-01-13 15:50

    @白胖子: 同想知道,求楼主解答~

  • 白胖子

    2017-01-11 16:53

    好想问一下那个蓝色的提示点和线是从哪里搞出来的,也是sketh里的吗?

  • sh_it王

    2017-01-05 16:27

    CleanMaster是猎豹的国际版,是我理解错误了吗?

  • 老狼老狼老狼

    2017-01-03 08:55

    交互原型画的够完美~

  • shenzhairen

    2016-12-30 17:27

    @Jamie_杰米: 有连接线的流程描述最好多分几个任务流,要不然会把前端/开发的同学搞崩溃

  • Jamie_杰米

    2016-12-30 11:01

    @抠图工的春天: 谢谢;)

  • Jamie_杰米

    2016-12-30 10:59

    @hahahahacom: 赞同相辅相成,还是得看项目具体需要,也没什么有必要没必要,我也并没有表达满屏线没必要的观点,展现形式嘛,我觉得形式服务内容,关键是让团队里大家更清晰的理解逻辑,理解交互细节,尽量避免后期反复,保证项目按照统一的意识有序进行。

  • Jamie_杰米

    2016-12-30 10:52

    @ZHANGXIN090: 累得不轻,工作量挺大的;),乐在其中……

  • ZHANGXIN090

    2016-12-29 19:11

    sketch画这个东西,累的不轻吧

  • LeoH

    2016-12-29 15:09

    @小彭友: 是sketch吧

  • _哈哈

    2016-12-29 13:34

    @裤头村老大: 看第一张图应该是sketch

  • _哈哈

    2016-12-29 13:32

    及时雨,谢谢

  • hahahahacom

    2016-12-29 11:40

    我觉得满屏只有各种线连接页面是有必要的,不是为了展现形式,算是梳理各页面的逻辑关系,你这种算是交互说明文档,我觉得两者可以相辅相成。

  • 小彭友

    2016-12-29 10:31

    请问注释说明的蓝色和红色的圆箭头是用什么软件做的啊?

  • 裤头村老大

    2016-12-29 10:02

    同问 这个交互设计图使用什么软件做的~?谢谢·~~~~

  • 抠图工的春天

    2016-12-29 09:23

    喜欢,赞一个

  • Cheesefoam

    2016-12-29 09:09

    麻烦问一下 这个交互设计图使用什么软件做的~?谢谢·~~~~

  • ZHIJUE807

    2016-12-28 23:11

    看完视觉稿回评的,手艺人 你很棒~

  • 三木心

    2016-12-28 22:59

    做的很详细,很精致,想请教下你一般会花多长时间做一个项目的交互原型呢

  • VanG

    2016-12-28 21:10

    正在找交互说明,谢谢。

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票