交互原型画得丑?29个优秀UI/UX线框草图
现在越来越多UI设计师都需要画一些交互的线框图,然而作为视觉专家,当然要把它画得靓靓的嘛,是不是?所以很多用户会使用《5款高效的原型设计工具》来绘制,或者直接手绘更有逼格。
今天达人手工整理一大波UI/UX的原型图,有手绘的、有用软件绘制的,分别来源于不同的设计师、交互设计师、产品经理之手,虽只是草图,但小编看后,已经有灵感了哦!来一起看看他们的杰作。

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

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

3 配色参考

4 头脑风暴

5 灰度

5.

6.

7.

8. 这个流程图好看

9.

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

11. Wow…

12. 还有阴影也画了

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

14

15

16

17

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

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

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

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

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

23. 网页原型

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

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

26. 临时想法

27.

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

原型草图,大多是记录临时的想法,当进一点确定后,就会去使用软件画正规一点的原型或者直接出UI设计稿。
今天分享到这里,下次画线框图时不妨先看看这篇文章,里面的草图、笔记本、颜色笔、原型工具都是不错的。
原文链接:http://www.shejidaren.com/ui-and-ux-wireframes.html
交互原型画得丑?29个优秀UI/UX线框草图的更多相关文章
- 不容错过!2016年度优秀UI/UX设计文章
本文整理了一些2016年度最受欢迎的文章,例如有关UI / UX设计的理论知识,书籍和工具,如何做出更好的设计的方法和建议,以及新的设计趋势. 1. 2017年用户体验设计趋势 我们期待着2017年用 ...
- 如何用Axure快速制作APP交互原型
对于产品经理来说,熟练使用一些常用软件是一项十分必要的技能.其中,作为一个专业的快速原型设计工具,Axure RP无疑在产品人心中拥有一个难以撼动的地位.但就要PS一样,虽然足够专业,但同样也会存在使 ...
- 9款原型设计工具与Sketch的强强组合,轻松构建交互原型!
原型设计的发展历史经历了纸上原型.静态线框设计.到现在的可交互式原型.作为设计过程中最初始的阶段,设计师们对原型设计的要求也越来越高.因此,如今的原型设计工具格局也发生了很大的变化. Sketch对于 ...
- [转]VUE优秀UI组件库合集
原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.v ...
- Xamarin.Forms 学习系列之优秀UI收集
1.各种优秀UI例子 https://github.com/jsuarezruiz/xamarin-forms-goodlooking-UI 输入框例子 https://github.com/enis ...
- 2019年达内云PS淘宝美工平面UI/UX/UE/UED影视后期交互设计师视频
2019年达内云PS淘宝美工平面UI/UX/UE/UED影视后期交互设计师视频 百度网盘链接一 百度网盘链接二
- 交互原型设计软件axure rp学习之路(二)
(二)Axure rp的线框图元件 l 图片 图片元件拖入编辑区后,可以通过双击选择本地磁盘中的图片,将图片载入到编辑区,axure会自动提示将大图片进行优化,以避免原型文件过大:选择图片时可以选择 ...
- 交互原型设计软件axure rp学习之路(一)
开始学习之前,请一定要明白:Axure是个极其极其极其简单的软件.因为你所做的就是拖部件,打字,拖部件,打字,最多加个对齐.如果你能把axure当作word或者ppt来用,那你就学会了axure. A ...
- 交互原型设计软件axure rp学习之路(三)
(三)Axure rp元件的触发事件 l OnClick(点击时): 鼠标点击事件,除了动态面板的所有的其他元件的点击时触发.比如点击按钮. l OnMouseEnter(鼠标移入时): 鼠标进入 ...
随机推荐
- Ext.js 之MVC
Ext.js 4.0之MVC
- [BZOJ2727][HNOI2012]双十字
bzoj luogu sol 先预处理从每个点出发向上/下/左/右能延伸多长. 考虑怎么计算答案.我们只要枚举中轴线,再枚举上方的十字交点,枚举下方的十字交点,然后算答案即可. 考虑一个左右宽的最小值 ...
- 【转】MFC消息处理(一)
原文网址:http://blog.csdn.net/hyhnoproblem/article/details/6182120 1.MFC窗口如何与AfxWndProc建立联系. 当一个新的CWnd派生 ...
- [NOI2018]归程(可持久化并查集,Kruskal重构树)
解法一: 1.首先想到离线做法:将边和询问从大到小排序,并查集维护连通块以及每个连通块中所有点到1号点的最短距离.$O(n\log n)$ 配合暴力等可以拿到75分. 2.很容易想到在线做法,使用可持 ...
- 注解反射原理(IOC框架)
IOC(Inversion of Control):控制反转.采用配置文件和注解的方式,将成员变量通过反射注入,舍弃new的方式,降低了耦合度. 反射:JAVA反射机制是在运行状态中,对于任意一个类, ...
- kernel_task high cpu usage
# Find the model $ system_profiler -detailLevel mini | grep "Model Identifier:" Model Iden ...
- Django ORM-01
What is ORM Django ? ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. ...
- Loadrunner11在新建Microsoft Word 报告时提示指定的转换无效
HP Loadrunner11中文教程的学习基本已经结束,最后困扰我的就是这个在创建Microsoft Word 报告时不停的提示“指定的转换无效”的问题.在网上搜索了好长时间,好多朋友回答说没有生成 ...
- Redux 处理异步 Action
redux-promise-utils What redux-promise-utils 是一个基于 redux-thunk 和 redux-actions 的工具,符合 FSA 规范,方便开发者处理 ...
- ES6系列_13之Proxy进行预处理(简单学习)
1.理解什么是预处理? 当我们在操作一个对象或者方法时会有几种动作,比如:在运行函数前初始化一些数据,在改变对象值后做一些善后处理.这些都算钩子函数,Proxy的存在就可以让我们给函数加上这样的钩子函 ...