在任何网站或移动应用设计的过程中,线框图作为设计元素和功能的图示,它有助于帮助定义和更好地传达信息层次结构,让参与设计和开发的人员更好的理解设计师的思路和设计的功能点。

即使线框图设计是一个比较耗时的过程,但在推进设计项目进度之前,通过线框图了解项目的层次结构是非常有效的。那么摹客小编今天收集了一些优秀的iPhone线框PSD/PDF模板。希望对你有所帮助,也希望通过学习这些iPhone线框模板可以将您的设计推向一个新的水平。

iPhone 6 线框模板

1. iPhone 6 Plus and iPhone 6 Wireframe

设计师:Andrea Ripamonti

格式:AI

价格:免费

尽管iPhone 6已不是目前主流的iPhone机型,但仍旧在手机市场中占有很大一部分份额。所以设计师在设计应用程序时,仍需要考虑到适配iPhone6的设计模型。那么第一步就是需要一个iPhone6或iPhone 6 plus的线框图模板。

这个模板是纯线框设计,既可下载到原型设计工具中使用,也可以打印做手绘线框图模板,非常方便。

下载地址

2. iPhone outline Mockup

设计师:Dominik Rezek

格式:AI, PSD

价格:免费

如果你需要制作黑色背景的iPhone6 线框图,也可以下载这款模板。黑色背景搭配淡蓝色线条,优雅大方。这个模板提供AI和PSD两种格式,可以选择更加适合你的格式下载哦。

下载地址

3. iPhone 6 Wireframes

设计师:Oleg Sukhorukov

格式:PDF、PSD

价格:免费

这款iPhone6线框模板提供了两种格式文件供下载。模板中标注了顶部导航栏、底部导航栏以及键盘高度的位置。无论是打印或复制粘贴到原型工具中使用都非常方便。可以说设计师非常贴心了。图片下方设计师分别标注了iPhone6和iPhone6 plus适用的尺寸。

下载地址

4. iPhone6 Sketch Templates

设计师:Mike Warner

格式:PDF

价格:免费

这套iPhone 6的线框图提供了4种不同的网格背景,适配iPhone 6和iPhone 6 plus两种机型尺寸,分别有横向和纵向的模板,满足各种屏幕需求。

下载地址

iPhone 7 线框图模板

1. Free Printable iPhone 7 Templates

设计师:Matthew Stephens

格式:PDF

价格:免费

这是一款专门为iPhone 7 准备的线框图模板,设计师同样标注了顶部导航栏、底部导航栏以及键盘高度的位置,可以直接打印出来做手绘原型或线框图设计。点状背景便于设计中各种元素如按钮、线条等的勾勒,保证设计图的规范性。

下载地址

2. iPhone 7 wireframe

设计师:Oleg Sukhorukov

格式:PDF、PSD

价格:免费

摹客设计系统上线了!三大福利送不停!

领取福利

同样是一款iPhone 7的打印版线框图。在封面图中可以看到打印版线框图的正确用法。根据设计师制作的导航栏以及键盘的高度标记,使用者不必再花心思和时间测量项目高度以及各组件高度在线框图中应占的比例。

下载地址

3. iPhone 6/7 Printable Mockups

设计师: Bobby Kane

格式:Sketch、PDF

价格:免费

这款iPhone线框图设计模板同时适用于iPhone 6和iPhone 7。因为从项目尺寸来讲,iPhone 6和7没有什么区别。不同于上面所有的模板,这款线框图只有屏幕线框,没有手机外形线框,更方便线框手绘创作。

下载地址

4. iPhone 7 wireframe template

设计师:Mockplus

格式:-

价格:免费

这款iPhone线框模板是原型设计工具Mockplus中自带的线框模板,添加了顶部状态栏和底部home按钮。预览时更加形象化。网页原型项目中时常会用到手机线框,内置的模板为设计师们省去不少上网查找的时间。加快了设计进度。

下载地址

iPhone X 线框图模板

1. Free iPhone X wireframe template

设计师:Fedza Miralem

格式:Sketch

价格:免费

目前iPhone X 作为最新苹果机型,由于其特殊的刘海屏设计,市面上各类软件都必须为这个特殊的刘海让步,重新设计应用的界面布局。基于此,iPhone X的线框图模板可以说是时下炙手可热的设计素材。这款线框图素材加入了头部导航和底部导航。中间留白部分交给设计师自由发挥。

下载地址

2. New Freebie: Printable iPhone X Templates

设计师:Matthew Stephens

格式:PDF

价格:免费

示例图非常形象的展示了这是一款用于打印手绘的iPhone X 尺寸的线框图模板。按惯例,图稿中标注了刘海屏以及头部信号栏,还有常规的各类导航相应的位置。文件中有横屏和竖屏的模板,可根据项目自由选择。

下载地址

3. iPhone X Wireframe with iOS 11 Guides

设计师:Riomar McCartney

格式:PDF、Sketch

价格:免费

这款设计适用于快速的iPhone X线框和原型设计。设计师在项目简介中加入了一些简单的iOS 11 UI指南,用于在纸上绘制一些想法。

在Sketch文件中,包含四种模板:

  • 带引导的纯线框
  • 带引导和设备轮廓
  • 带导向和设备遮罩
  • 带引导和设备轮廓

同样也可以用B4和A4纸张尺寸打印,用于素描。

下载地址

4. iPhone X Wireframe & Mockup

设计师:Valentin Ciobanu

格式:PSD

价格:免费

这款设计模板中包含了一个可供A4打印格式的线框图和一个PSD格式的线框文档。模板中绘制的大格子定位非常方便。

下载地址

5. iPhone X Wireframe Kit Sketch Resources

设计师:Zeeshan Javaid

格式:Sketch

价格:免费

这款iPhone X 线框模板在Sketchappsources达到了7K+的下载量。足以见得目前iPhone X的受欢迎程度以及iPhone X应用的巨大市场潜力。

下载地址

iPhone线框图实例鉴赏

1. iPhone Wireframe Template Sketch Resource

设计师:Edwin Delgado

格式:Sketch

价格:免费

这里的例子是一个名为Dynabike的应用程序。设计师的初衷是设计一些可以供大家使用的例子。所以制作了这个可以用于iPhone 6/7演示的线框图案例。它带有一些基本的线条,按钮和框架。它有两个页面,一个用于Assets,另一个用于作为示例。

下载地址

2.iPhone Wireframes Sketch Resource

设计师:Cristian Pelaez

格式:Sketch

价格:免费

这是一个无机壳手机线框图,包含了许多元素,如:标题,按钮,输入,警报,键盘等...导入Sketch中就可以直接用起来啦!通过对真实案例的学习,你也可以创建快速的iPhone线框。成长最快的学习方式就是临摹。相信你学完之后一定会有所收获!

下载地址

3.UIXO iOS 11 Wireframe Kit for iPhone X

设计师:Designmodo

格式:Sketch PSD

价格:$36

这是一款iPhone X的线框案例,包含100+页面和20种常见页面的设计,完整的展示了一个真实的手机应用程序所需要具有的页面。对于初学者来说,这个项目可以说非常友好,省时省力。但最好是能从中学习到设计的技巧和思路。这对于一个设计师来说,才是最宝贵的财富。

下载地址

那么,如何正确地利用以上列举的iPhone线框模板呢?

在上网查线框图的时候,往往也会看到另一个名词:原型图。那关于线框图设计、原型设计,二者有什么区别呢?

相关阅读:你真的搞懂什么是线框图,什么是原型图了吗?

你应该知道的线框图设计的规则和禁忌

线框模板已经准备好了,那么怎样才算是正确的使用方法呢?别急,往下看。

大多数的线框图模板都支持Sketch,PSD, 以及PDF格式,便于导入相应的设计软件中使用,例如Sketch,Mockplus等都能很好的支持模板导入。另外,在Mockplus官网中,他们提供了大量的App线框图设计案例,结合上面的各种苹果机型的线框模板,再参照案例,相信你也能设计出让人惊叹的案例,成为知名设计师!

16款值得一用的iPhone线框图模板 (PSD & Sketch)的更多相关文章

  1. 16款最受关注的智能手表 苹果iWatch领衔

    智能手表逐渐成为科技行业的新宠,而传闻中的苹果iWatch以及已经确认即将推出的三星Galaxy Gear,显然让这股热潮达到了顶峰,也预示着大牌厂商将逐渐进入该领域,推出更多成熟的产品.以下便是16 ...

  2. 精美的 ( Android, iPhone, iPad ) 手机界面设计素材和线框图设计工具

    在制作界面原型的时候,如果有现成的界面基础元素可以使用的话,设计师就可以非常快速的完成原型的制作,能够节省大量的时间和精力.在这篇文章, 我向大家分享45套非常有用的 UI 和 Wireframe 套 ...

  3. 十六款值得关注的NoSQL与NewSQL数据库--转载

    原文地址:http://tech.it168.com/a2014/0929/1670/000001670840_all.shtml [IT168 评论]传统关系型数据库在诞生之时并未考虑到如今如火如荼 ...

  4. 赶快收藏!16款最流行的 JavaScript 框架

    下面为大家介绍 16款最流行的 JavaScript 框架,赶快收藏! 1. jQuery – Javascript框架 jQuery 是最流行的 JavaScript 框架,它简化了HTML 文档遍 ...

  5. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  6. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  7. 八款值得尝试的精美的 Linux 发行版(2017 版)

    八款值得尝试的精美的 Linux 发行版(2017 版) 2017年10月18日 • Linux • 295 views • 暂无评论 在这篇文章中,将会列出让一些令 Linux 用户印象最深刻且精美 ...

  8. iOS设计 - 一款APP从设计稿到切图过程概述

    这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我 ...

  9. 一款APP从设计稿到切图过程全方位揭秘 Mark

    纯干货!一款APP从设计稿到切图过程全方位揭秘   @BAT_LCK:我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不 ...

随机推荐

  1. 关于 百度 Ueditor (在chrome浏览器) 上传图片时 打开文件夹的延迟问题

    在使用 ueditor 开发时, 作为一个web文本编辑器使用时. 当点击上传图片时, 文件夹要延迟好久才能打开. 解决: 针对多图片上传, 将/ueditor/dialogs/image/image ...

  2. SVN的使用----经历

    一,使用SVN down文件到本机 svn co path1 path2 co是checkout的简写 path1是源文件路径 path2是目标文件存放目录 比如::下面的方式是下载到当前目录. ++ ...

  3. HTML5 ES6 语法基础

    // 解构赋值 let [a, b, c, [s,e],d] = ["aa", "bb", "cc", [12, 23], "dd ...

  4. chrome浏览器控制台 console不打印信息问题解决办法。

    转自:https://blog.csdn.net/wang17866603359/article/details/79083776 最近换了安装chrome,想按F12调试下代码,发现控制台什么信息都 ...

  5. Centos LVM 创建 删除 扩大 缩小

    新建LVM的过程1.使用fdisk 新建分区 修改ID为8e3.使用 pvcreate 创建 PV 4.使用 vgcreate 创建 VG 5.使用 lvcreate 创建 LV 6.格式化LV7.挂 ...

  6. 使用Eclipse对FFmpeg进行调试

    在研究代码的过程中,调试运行是一种非常有效的方法.我们常用的Visual Studio建立的工程可以很方便地对程序进行调试运行.但是对于FFMpeg这样的工程,想要进行单步调试就没这么容易了.如果一定 ...

  7. 10 并发编程-(线程)-GIL全局解释器锁&死锁与递归锁

    一.GIL全局解释器锁 1.引子 在Cpython解释器中,同一个进程下开启的多线程,同一时刻只能有一个线程执行,无法利用多核优势 首先需要明确的一点是GIL并不是Python的特性,它是在实现Pyt ...

  8. windows下的java项目打jar分别编写在windows与linux下运行的脚本( 本人亲测可用!)

    前言: 最近公司做了一个工具,要将这个工具打包成一个可运行的程序,编写start.bat和start.sh在windows和linux下都可以运行. 在网上找了很多资料,最后终于找到一个可靠的资料,记 ...

  9. DB分布式 跨库分页

    DB分布式-两种方式 1. JDBC扩展     sharding-jdbc: 直接封装JDBC,代码迁移成本低,适用于任何连接池及ORM框架,JAR包提供服务,未使用中间层,不用额外部署,DBA无需 ...

  10. 代码报错记录-MAVEN

    报错: COMPILATION ERROR : 程序包不存在. 说是找不到程序包,我的JUNIT是父项目中的,子项目是从JAVA项目转为MAVEN项目的,难道在转成MAVEN项目时对POM文件的修改有 ...