交互原型画得丑?29个优秀UI/UX线框草图

现在越来越多UI设计师都需要画一些交互的线框图,然而作为视觉专家,当然要把它画得靓靓的嘛,是不是?所以很多用户会使用《5款高效的原型设计工具》来绘制,或者直接手绘更有逼格。

今天达人手工整理一大波UI/UX的原型图,有手绘的、有用软件绘制的,分别来源于不同的设计师、交互设计师、产品经理之手,虽只是草图,但小编看后,已经有灵感了哦!来一起看看他们的杰作。

交互原型画得丑?29个优秀UI/UX线框草图_第1张图片

草图来源:wireflow,ux_ui_wireframes

1. 小编达人喜欢这个布局,所以直接放第一个截图,首先草图是Q版的,还加入了一些颜色,让草图生动起来。其次这是迷你草图,文字直接用「粗签字笔」来表示,能快速的记录临时的灵感想法。

交互原型画得丑?29个优秀UI/UX线框草图_第2张图片

2. 正规一点的草图,直接用电脑软件绘制

交互原型画得丑?29个优秀UI/UX线框草图_第3张图片

3 配色参考

交互原型画得丑?29个优秀UI/UX线框草图_第4张图片

4 头脑风暴

交互原型画得丑?29个优秀UI/UX线框草图_第5张图片

5 灰度

交互原型画得丑?29个优秀UI/UX线框草图_第6张图片

5.

交互原型画得丑?29个优秀UI/UX线框草图_第7张图片

6.

交互原型画得丑?29个优秀UI/UX线框草图_第8张图片

7.

交互原型画得丑?29个优秀UI/UX线框草图_第9张图片

8. 这个流程图好看

交互原型画得丑?29个优秀UI/UX线框草图_第10张图片

9.

交互原型画得丑?29个优秀UI/UX线框草图_第11张图片

10. 原型就该用这些浅灰的配色

交互原型画得丑?29个优秀UI/UX线框草图_第12张图片

11. Wow…

交互原型画得丑?29个优秀UI/UX线框草图_第13张图片

12. 还有阴影也画了

交互原型画得丑?29个优秀UI/UX线框草图_第14张图片

13. 草图质量做到这样就很棒了

交互原型画得丑?29个优秀UI/UX线框草图_第15张图片

14

交互原型画得丑?29个优秀UI/UX线框草图_第16张图片

15

交互原型画得丑?29个优秀UI/UX线框草图_第17张图片

16

交互原型画得丑?29个优秀UI/UX线框草图_第18张图片

17

交互原型画得丑?29个优秀UI/UX线框草图_第19张图片

18. 全黑不好看,加点颜色~

交互原型画得丑?29个优秀UI/UX线框草图_第20张图片

19. 打印出来,标记重点为

交互原型画得丑?29个优秀UI/UX线框草图_第21张图片

20. Cool! 这个主意太好了,我之前为什么没想到呢,原来有颜色的地方表示链接(可点击),然后画引导线的时候就不需要从链接点开始画,这样简洁很多。

交互原型画得丑?29个优秀UI/UX线框草图_第22张图片

21. 你看到的连线,使用的软件是 Adobe XD,根据设计达人网小编体验,感觉还是 Sketch 来做UI设计好一些,希望它快点出Windows版吧……

交互原型画得丑?29个优秀UI/UX线框草图_第23张图片

22.UI设计专用的点点本?

交互原型画得丑?29个优秀UI/UX线框草图_第24张图片

23. 网页原型

交互原型画得丑?29个优秀UI/UX线框草图_第25张图片

24. 一个迷你版原型图,好Q~

交互原型画得丑?29个优秀UI/UX线框草图_第26张图片

25. UI比例控制很好,很整齐

交互原型画得丑?29个优秀UI/UX线框草图_第27张图片

26. 临时想法

交互原型画得丑?29个优秀UI/UX线框草图_第28张图片

27.

交互原型画得丑?29个优秀UI/UX线框草图_第29张图片

28. 产品经理,还是用更快、更简单的原型设计工具Mockplus吧

交互原型画得丑?29个优秀UI/UX线框草图_第30张图片

原型草图,大多是记录临时的想法,当进一点确定后,就会去使用软件画正规一点的原型或者直接出UI设计稿。

今天分享到这里,下次画线框图时不妨先看看这篇文章,里面的草图、笔记本、颜色笔、原型工具都是不错的。


原文链接:http://www.shejidaren.com/ui-and-ux-wireframes.html

你可能感兴趣的:(移动开发,web前端,架构设计,UI,产品经理)