现在越来越多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

交互原型画得丑?29个优秀UI/UX线框草图的更多相关文章

  1. 不容错过!2016年度优秀UI/UX设计文章

    本文整理了一些2016年度最受欢迎的文章,例如有关UI / UX设计的理论知识,书籍和工具,如何做出更好的设计的方法和建议,以及新的设计趋势. 1. 2017年用户体验设计趋势 我们期待着2017年用 ...

  2. 如何用Axure快速制作APP交互原型

    对于产品经理来说,熟练使用一些常用软件是一项十分必要的技能.其中,作为一个专业的快速原型设计工具,Axure RP无疑在产品人心中拥有一个难以撼动的地位.但就要PS一样,虽然足够专业,但同样也会存在使 ...

  3. 9款原型设计工具与Sketch的强强组合,轻松构建交互原型!

    原型设计的发展历史经历了纸上原型.静态线框设计.到现在的可交互式原型.作为设计过程中最初始的阶段,设计师们对原型设计的要求也越来越高.因此,如今的原型设计工具格局也发生了很大的变化. Sketch对于 ...

  4. [转]VUE优秀UI组件库合集

    原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.v ...

  5. Xamarin.Forms 学习系列之优秀UI收集

    1.各种优秀UI例子 https://github.com/jsuarezruiz/xamarin-forms-goodlooking-UI 输入框例子 https://github.com/enis ...

  6. 2019年达内云PS淘宝美工平面UI/UX/UE/UED影视后期交互设计师视频

    2019年达内云PS淘宝美工平面UI/UX/UE/UED影视后期交互设计师视频 百度网盘链接一 百度网盘链接二

  7. 交互原型设计软件axure rp学习之路(二)

    (二)Axure rp的线框图元件 l  图片 图片元件拖入编辑区后,可以通过双击选择本地磁盘中的图片,将图片载入到编辑区,axure会自动提示将大图片进行优化,以避免原型文件过大:选择图片时可以选择 ...

  8. 交互原型设计软件axure rp学习之路(一)

    开始学习之前,请一定要明白:Axure是个极其极其极其简单的软件.因为你所做的就是拖部件,打字,拖部件,打字,最多加个对齐.如果你能把axure当作word或者ppt来用,那你就学会了axure. A ...

  9. 交互原型设计软件axure rp学习之路(三)

    (三)Axure rp元件的触发事件 l  OnClick(点击时): 鼠标点击事件,除了动态面板的所有的其他元件的点击时触发.比如点击按钮. l  OnMouseEnter(鼠标移入时): 鼠标进入 ...

随机推荐

  1. .NET 命令行参数包含应用程序路径吗?

    如果你关注过命令行参数,也许发现有时你会在命令行参数的第一个参数中中看到应用程序的路径,有时又不会.那么什么情况下有路径呢? 其实是否有路径只是取决于获取命令行参数的时候用的是什么方法.而这是 Win ...

  2. MyBatis_Study_001(入门)

    1.话不多说,直接搞起; (源码地址https://github.com/carryLess/mbtsstd-001) 2.去官网https://github.com/mybatis下载文件 下载完成 ...

  3. iOS 基础类解析 - NSDate

    版权声明:本文为博主原创文章,未经博主同意不得转载.转载联系 QQ 30952589,加好友请注明来意. https://blog.csdn.net/sleks/article/details/248 ...

  4. TVS 选型

    TVS 选型 主要用于 IO 保护 TVS 的电压不要小于正常工作的电压,不然会影响正常工作. ESD 的电压很高,但是时间很短. TVS 有节电容,用于高速线路时要注意. 有双向的,也有单向的,还有 ...

  5. PHP 中的文本截取分析之效率

    PHP 中的文本截取分析之效率 在使用 ThinkPHP 或 Laravel 时都会有用到文本截取的帮助函数. 分别是 msubstr (ThinkPHP 3,ThinkPHP 5 没找到) mb_s ...

  6. curl查询公网出口IP

    liuzhizhi@lzz-rmbp|logs # curl ipinfo.io { "ip": "114.110.1.38", "hostname& ...

  7. 使用JS获取当前地理位置方法汇总(如用谷歌接口,会出再以上报错,必须申请密钥并设置接受服务器IP!!!)

    RefererNotAllowedMapError 错误 加载 Google Maps JavaScript API 的当前 URL 尚未添加到允许的引用站点列表中.请在 Google API Con ...

  8. new 运算符干了什么

    为了追本溯源, 我顺便研究了new运算符具体干了什么?发现其实很简单,就干了三件事情. var obj = {}; obj.__proto__ = F.prototype; F.call(obj); ...

  9. [译]作为一个web开发人员,哪些技术细节是在发布站点前你需要考虑到的

    前日在cnblogs上看到一遍文章<每个程序员都必读的12篇文章>,其中大多数是E文的. 先译其中一篇web相关的”每个程序员必知之WEB开发”. 原文: http://programme ...

  10. 2.ehcache.xml简介

    转自:https://www.cnblogs.com/crazylqy/p/4238148.html ehcache.xml文件是用来定义Ehcache的配置信息的,更准确的来说它是定义CacheMa ...