现在越来越多UI设计师都需要画一些交互的线框图,然而作为视觉专家,当然要把它画得靓靓的嘛,是不是?所以很多用户会使用《5款高效的原型设计工具》来绘制,或者直接手绘更有逼格。
今天达人手工整理一大波UI/UX的原型图,有手绘的、有用软件绘制的,分别来源于不同的设计师、交互设计师、产品经理之手,虽只是草图,但小编看后,已经有灵感了哦!来一起看看他们的杰作。
![](http://upload-images.jianshu.io/upload_images/1018399-1e3daeb96da8f8f3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
草图来源:wireflow,ux_ui_wireframes
1. 小编达人喜欢这个布局,所以直接放第一个截图,首先草图是Q版的,还加入了一些颜色,让草图生动起来。其次这是迷你草图,文字直接用「粗签字笔」来表示,能快速的记录临时的灵感想法。
![](http://upload-images.jianshu.io/upload_images/1018399-262758a74b4a15f0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2. 正规一点的草图,直接用电脑软件绘制
![](http://upload-images.jianshu.io/upload_images/1018399-750fe4e8f704e5b7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3 配色参考
![](http://upload-images.jianshu.io/upload_images/1018399-71ccf0689ee44e97.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
4 头脑风暴
![](http://upload-images.jianshu.io/upload_images/1018399-7f62d838ae76f07c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
5 灰度
![](http://upload-images.jianshu.io/upload_images/1018399-f72a0eb68195e9b7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
5.
![](http://upload-images.jianshu.io/upload_images/1018399-ac4281831308cac6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
6.
![](http://upload-images.jianshu.io/upload_images/1018399-3029234d6642ccbd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
7.
![](http://upload-images.jianshu.io/upload_images/1018399-f523bb84eec164b9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
8. 这个流程图好看
![](http://upload-images.jianshu.io/upload_images/1018399-9199ee73f49b550b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
9.
![](http://upload-images.jianshu.io/upload_images/1018399-b4bef9a6322f144b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
10. 原型就该用这些浅灰的配色
![](http://upload-images.jianshu.io/upload_images/1018399-d3a393be59ebab96.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
11. Wow…
![](http://upload-images.jianshu.io/upload_images/1018399-c81775fe5cabc317.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
12. 还有阴影也画了
![](http://upload-images.jianshu.io/upload_images/1018399-03335f33e41b3ef3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
13. 草图质量做到这样就很棒了
![](http://upload-images.jianshu.io/upload_images/1018399-dea50ea2b49c257d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
14
![](http://upload-images.jianshu.io/upload_images/1018399-fe54977fd619cc85.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
15
![](http://upload-images.jianshu.io/upload_images/1018399-4ac5c29203a7234b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
16
![](http://upload-images.jianshu.io/upload_images/1018399-030799466a713131.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
17
![](http://upload-images.jianshu.io/upload_images/1018399-6447c85c539cb5d6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
18. 全黑不好看,加点颜色~
![](http://upload-images.jianshu.io/upload_images/1018399-389c9344040ab8c9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
19. 打印出来,标记重点为
![](http://upload-images.jianshu.io/upload_images/1018399-483257716f27adef.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
20. Cool! 这个主意太好了,我之前为什么没想到呢,原来有颜色的地方表示链接(可点击),然后画引导线的时候就不需要从链接点开始画,这样简洁很多。
![](http://upload-images.jianshu.io/upload_images/1018399-74f587f6fc09026a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
21. 你看到的连线,使用的软件是 Adobe XD,根据设计达人网小编体验,感觉还是 Sketch 来做UI设计好一些,希望它快点出Windows版吧……
![](http://upload-images.jianshu.io/upload_images/1018399-f50cfaa5ee3b54a3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
22.UI设计专用的点点本?
![](http://upload-images.jianshu.io/upload_images/1018399-f29f98a108907d7d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
23. 网页原型
![](http://upload-images.jianshu.io/upload_images/1018399-5316ac1c251d8f75.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
24. 一个迷你版原型图,好Q~
![](http://upload-images.jianshu.io/upload_images/1018399-c44ddf135bffedcb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
25. UI比例控制很好,很整齐
![](http://upload-images.jianshu.io/upload_images/1018399-2d0a63982ac24d90.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
26. 临时想法
![](http://upload-images.jianshu.io/upload_images/1018399-abea08635fa294ac.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
27.
![](http://upload-images.jianshu.io/upload_images/1018399-e4fd876b6c0228cd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
28. 产品经理,还是用更快、更简单的原型设计工具Mockplus吧
![](http://upload-images.jianshu.io/upload_images/1018399-c9f1a7fe7b1ffd66.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
原型草图,大多是记录临时的想法,当进一点确定后,就会去使用软件画正规一点的原型或者直接出UI设计稿。
今天分享到这里,下次画线框图时不妨先看看这篇文章,里面的草图、笔记本、颜色笔、原型工具都是不错的。