文档章节

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

jongde
 jongde
发布于 2017/09/11 15:56
字数 624
阅读 8
收藏 0
点赞 0
评论 1

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

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

草图来源:wireflowux_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

© 著作权归作者所有

共有 人打赏支持
jongde
粉丝 8
博文 260
码字总数 323940
作品 0
成都
加载中

评论(1)

cindy21
cindy21
Mockplus做原型的确非常棒啊,快速,简单。
UI/UX设计师,你的薪资跟上了吗?

互联网普及化的今天,IT行业已经成为一个高薪行业,也是世界行业发展的趋势。社会快速发展,对人才的需求水涨船高。互联网大环境下衍生出的对职业技能的要求也是不断的up up up。想要在IT行业...

jongde ⋅ 2016/11/15 ⋅ 0

24 款线框图相关工具及资源大放送

线框是一个非常有用的网页开发工具,正确使用有助于帮助Web开发者节省时间和精力!下面介绍一些常见的线框工具,希望对Web设计师有帮助。 1. 960.gs Templates for Inkscape 960个Inkscape模...

红薯 ⋅ 2011/11/07 ⋅ 2

设计师的日常--你要知道的25个UI/UX设计网站

如果你像我一样,总是花很多时间试图找到一个最好的模式,最好用的工具和最漂亮的颜色。当然,每位设计师的需求不同,所谓“完美”的标准也不一样。但是如果能有一份资源包含几乎所有你需要的...

jongde ⋅ 2016/11/23 ⋅ 0

4款最受欢迎的Mac原型工具

原型工具中Wireframe, Mockup和prototype之间的有什么不同? 无论你是一名刚入行的UX/UI设计师,还是入行多年的老手,在制作原型的过程中一定接触或听说过其中很重要的三个原型术语:“wiref...

jongde ⋅ 01/15 ⋅ 0

纸上原型设计 VS 桌面原型工具设计,你更喜欢谁?

纸上原型设计,作为传统的原型设计方式,简单快速,成本低廉,为大部分设计师所喜爱。而桌面原型工具设计,作为伴随电脑科技发展而出现的原型设计方式,快速全面,高效保真,动效灵敏,专业优...

mo311 ⋅ 02/26 ⋅ 0

一个老菜鸟所理解的UX及产品流

从事前端开发到目前为止已经有4年多的时间了,从一个小菜鸟一路依靠自学,到目前总算一个老菜鸟了。当然了,从事前端的工作,是免不了要对产品以及用户体验有些许了解的。最近谈论起这方面的...

葡萄城控件技术团队 ⋅ 2015/08/18 ⋅ 0

10个完全免费的网页原型(线框图)工具

网页的线框图是非常直观、但是也没什么技术上难点的东西。只需要你大概描出页面上需要的一些元素,比如头部、导航、页脚等等,最多再就是一些交互、内容区域什么的。 但这对于任何网络应用的...

华宰 ⋅ 2011/03/24 ⋅ 2

一个老菜鸟所理解的UX及产品流

事前端开发到目前为止已经有4年多的时间了,从一个小菜鸟一路依靠自学,到目前总算一个老菜鸟了。当然了,从事前端的工作,是免不了要对产品以及用户体验有些许了解的。最近谈论起这方面的内...

乐搏学院 ⋅ 2016/12/28 ⋅ 0

十款 UX 设计应用工具,总有一款你需要

目前市场上有很多好的多功能设计工具,但即使你已经尽量缩小关键词去搜索,可是仍很难找到合心意的。你需要寻找最适合自己的,在做出选择之前你需要问自己几个问题。这样做可以帮助你最快的找...

oschina ⋅ 2016/04/25 ⋅ 7

10 个用于设计网页线框图的优秀工具

线框图是一个可视化的导图,可以用其来诠释出一个网站的龙骨,同时也可以称其为一个页面的示意图或屏幕的蓝图。线框图非常容易创建和进行有必要的修改。帮助设计师以低成本且高效率来进行迭代...

oschina ⋅ 2012/08/27 ⋅ 8

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 28分钟前 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 47分钟前 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 55分钟前 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

到底会改名吗?微软GVFS 改名之争

微软去年透露了 Git Virtual File System(GVFS)项目,GVFS 是 Git 版本控制系统的一个开源插件,允许 Git 处理 TB 规模的代码库,比如 270 GB 的 Windows 代码库。该项目公布之初就引发了争...

linux-tao ⋅ 今天 ⋅ 0

笔试题之Java基础部分【简】【二】

1.静态变量和实例变量的区别 在语法定义上的区别:静态变量前要加static关键字,而实例变量前则不加。在程序运行时的区别:实例变量属于某个对象的属性,必须创建了实例对象,其中的实例变...

anlve ⋅ 今天 ⋅ 0

Lombok简单介绍及使用

官网 通过简单注解来精简代码达到消除冗长代码的目的 优点 提高编程效率 使代码更简洁 消除冗长代码 避免修改字段名字时忘记修改方法名 4.idea中安装lombnok pom.xml引入 <dependency> <grou...

to_ln ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部