现在越来越多UI设计师都需要画一些交互的线框图,然而作为视觉专家,当然要把它画得靓靓的嘛,是不是?所以很多用户会使用《5款高效的原型设计工具》来绘制,或者直接手绘更有逼格。
今天达人手工整理一大波UI/UX的原型图,有手绘的、有用软件绘制的,分别来源于不同的设计师、交互设计师、产品经理之手,虽只是草图,但小编看后,已经有灵感了哦!来一起看看他们的杰作。
![](https://i-blog.csdnimg.cn/blog_migrate/6bfb50602cf7a3b0bcd1279b00d525c3.webp?x-image-process=image/format,png)
草图来源:wireflow,ux_ui_wireframes
1. 小编达人喜欢这个布局,所以直接放第一个截图,首先草图是Q版的,还加入了一些颜色,让草图生动起来。其次这是迷你草图,文字直接用「粗签字笔」来表示,能快速的记录临时的灵感想法。
![](https://i-blog.csdnimg.cn/blog_migrate/b2434fab6539950a8873200ad3a308f0.webp?x-image-process=image/format,png)
2. 正规一点的草图,直接用电脑软件绘制
![](https://i-blog.csdnimg.cn/blog_migrate/f928eb35e50afdd44fe5fb390f4c48ae.webp?x-image-process=image/format,png)
3 配色参考
![](https://i-blog.csdnimg.cn/blog_migrate/b1c43c821e7cf6e8ee12c844665731bd.webp?x-image-process=image/format,png)
4 头脑风暴
![](https://i-blog.csdnimg.cn/blog_migrate/7bff6ea0b6bce57d0daa35af8436355e.webp?x-image-process=image/format,png)
5 灰度
![](https://i-blog.csdnimg.cn/blog_migrate/adad0bb1722938b4a6994bafc099fa97.webp?x-image-process=image/format,png)
5.
![](https://i-blog.csdnimg.cn/blog_migrate/e9f9c4748acc1317660b167cd761c0d8.webp?x-image-process=image/format,png)
6.
![](https://i-blog.csdnimg.cn/blog_migrate/fb049dfa29486a6e4e1a86375499347f.webp?x-image-process=image/format,png)
7.
![](https://i-blog.csdnimg.cn/blog_migrate/a29b7f494c314c58446ea94fbb08e042.webp?x-image-process=image/format,png)
8. 这个流程图好看
![](https://i-blog.csdnimg.cn/blog_migrate/ab023939629516d20fc0404b448b203b.webp?x-image-process=image/format,png)
9.
![](https://i-blog.csdnimg.cn/blog_migrate/52a7b515ceb1e4d6d5610b11298e1d72.webp?x-image-process=image/format,png)
10. 原型就该用这些浅灰的配色
![](https://i-blog.csdnimg.cn/blog_migrate/3abcf8ea555bb006c8df046a90bea92d.webp?x-image-process=image/format,png)
11. Wow…
![](https://i-blog.csdnimg.cn/blog_migrate/f0a4b5b78c0a80213e6dda2881ea3dc1.webp?x-image-process=image/format,png)
12. 还有阴影也画了
![](https://i-blog.csdnimg.cn/blog_migrate/38c4503b9b061fde010bbb65b4105bab.webp?x-image-process=image/format,png)
13. 草图质量做到这样就很棒了
![](https://i-blog.csdnimg.cn/blog_migrate/7349306ac3cab8d90ec69f43c88fa853.webp?x-image-process=image/format,png)
14
![](https://i-blog.csdnimg.cn/blog_migrate/db845223dd2da1137501ca39e03a2486.webp?x-image-process=image/format,png)
15
![](https://i-blog.csdnimg.cn/blog_migrate/91d5b6487802df6f201e56bd52e42f37.webp?x-image-process=image/format,png)
16
![](https://i-blog.csdnimg.cn/blog_migrate/a4d7fb681eecee44978d670e849b16bf.webp?x-image-process=image/format,png)
17
![](https://i-blog.csdnimg.cn/blog_migrate/8b0f24267dac2094f488d9fed48f292f.webp?x-image-process=image/format,png)
18. 全黑不好看,加点颜色~
![](https://i-blog.csdnimg.cn/blog_migrate/4f91999f198bc2a289fd8f300fe2df9e.webp?x-image-process=image/format,png)
19. 打印出来,标记重点为
![](https://i-blog.csdnimg.cn/blog_migrate/8581acbf497066315fb6efee9513e74d.webp?x-image-process=image/format,png)
20. Cool! 这个主意太好了,我之前为什么没想到呢,原来有颜色的地方表示链接(可点击),然后画引导线的时候就不需要从链接点开始画,这样简洁很多。
![](https://i-blog.csdnimg.cn/blog_migrate/99caee56e650fa321a4b99552ce97330.webp?x-image-process=image/format,png)
21. 你看到的连线,使用的软件是 Adobe XD,根据设计达人网小编体验,感觉还是 Sketch 来做UI设计好一些,希望它快点出Windows版吧……
![](https://i-blog.csdnimg.cn/blog_migrate/546b118fa678c8db556291847585effb.webp?x-image-process=image/format,png)
22.UI设计专用的点点本?
![](https://i-blog.csdnimg.cn/blog_migrate/b6e44a756583b6648e4801a87e850548.webp?x-image-process=image/format,png)
23. 网页原型
![](https://i-blog.csdnimg.cn/blog_migrate/21e9582379ca08f37d29dcb3f3bd49e2.webp?x-image-process=image/format,png)
24. 一个迷你版原型图,好Q~
![](https://i-blog.csdnimg.cn/blog_migrate/daa5c4f36d3c83ed13b0258038464e96.webp?x-image-process=image/format,png)
25. UI比例控制很好,很整齐
![](https://i-blog.csdnimg.cn/blog_migrate/a2af4aab9f4a3db1ea44a69a4bfa4f51.webp?x-image-process=image/format,png)
26. 临时想法
![](https://i-blog.csdnimg.cn/blog_migrate/22b5a6566d1c67a562cc603c294b0cd6.webp?x-image-process=image/format,png)
27.
![](https://i-blog.csdnimg.cn/blog_migrate/fffa48c77ecc5bf7cacd02d64810789d.webp?x-image-process=image/format,png)
28. 产品经理,还是用更快、更简单的原型设计工具Mockplus吧
![](https://i-blog.csdnimg.cn/blog_migrate/725b513cbb215b299be72657ee52fd68.webp?x-image-process=image/format,png)
原型草图,大多是记录临时的想法,当进一点确定后,就会去使用软件画正规一点的原型或者直接出UI设计稿。
今天分享到这里,下次画线框图时不妨先看看这篇文章,里面的草图、笔记本、颜色笔、原型工具都是不错的。