用户登录界面设计代码html_嘿！2018年Sketch UI界面设计套件前十了解下！

Sketch近几年凭着大量的插件和免费教程迅速发展，而Sketch的忠实粉丝们也乐于将他们的免费模型分享出来。这也意味着你会在网上找到更多的免费Sketch素材，从完整的模型到内容详实的UI套件。

为帮助初学者们早日踏入设计之门，在这篇文章中，摹客君将和大家分享前10个最好的Sketch UI界面设计套件，从Android/iOS UI 界面设计，到线框UI设计到网页设计，总有一款UI界面设计套件你会用到！

Sketch Android UI界面设计套件

1. Android 8.0 Oreo Kit Sketch Resource

设计师：Steph Kelly

价格：免费

标签：#Android #material #kit

特点：

• Google Material Design UI风格
• 全套App界面设计
• Material Design配色
• 27个安卓屏幕

地址：

https://www.sketchappsources.com/free-source/3038-...

2017年8月22日，谷歌正式发布了Android 8.0的正式版，正式名称为：Android Oreo（奥利奥）。目前关于奥利奥系统的设计模板并不多，此款界面设计工具包为广大安卓界面设计师朋友提供了非常细节化的体验和参考。经典的谷歌悬浮按钮设计和Material Design风格的配色设计、导航栏设计都让人眼前一亮。

2. Material Design UI Kit Boilerplate Sketch Resource

设计师：Joe Toscano

价格：免费

标签：#Android #material #kit

特点：

• Material Design设计风格
• 色彩设计
• 按钮设计
• 免费谷歌字体

地址：

https://www.sketchappsources.com/free-source/1661-...

该套件将为设计师们提供了原子设计的所需要的原子以创造任何想要实现的效果。在这个UI设计套件中，所有的原子都变成了符号，而做为初学者的你所要做的就是复制并运用到你的Sketch设计中。

3. Android TV UI Sketch Resource

设计师：Qi Qu

价格：免费

标签：#Android #UI

特点：

• 基于Material Design
• 网格视图
• 浏览车道（折叠/展开视图)
• 大屏幕体验设计

地址：

https://sketchrepo.com/free-sketch/android-tv-ui-kit-for-sketch-freebie/

这款Android TV用户界面设计为大屏幕应用程序提供了体验模板。通过对这款特别的UI界面设计的学习，你可以了解大屏幕应用在主界面中的呈现方式以及应用将如何帮助用户快速获取所需内容。这对提升Android TV的用户体验非常重要。最重要的一点，此类应用程序必须满足特定的设计要求才能在Google Play上成为Android TV应用。

Sketch iOS UI界面设计套件

1. iOS 11 UI Kit for iPhone X Sketch Resource

设计师：Meng To

价格：免费

标签：#iOS #iPhone #kit

特点：

• 基于苹果人机交互指南
• 扁平化设计
• 渐变色应用
• 可定制的iOS 11本地组件

地址：https://dribbble.com/shots/4109024-Design-Code-iOS...

这款设计是由Design + Code团队为Sketch创建的最全面的iOS 11 UI套件。 所有组件，布局和印刷都是根据Apple的人机界面指南制定的。所有元素都可以轻松调整到任何宽度或高度，适用于不同尺寸的屏幕。大多数符号都是在定制的基础上创建的，你可以随时覆盖符号标签，图标或状态。

2. W1 UI Kit for watch Apps

设计师：Yuriy_Kondratkov

价格：51美元

标签：#iOS #UI #kit

特点：

• 200+屏幕设计
• 渐变色应用
• 可定制的UI设计元素
• 轻量级交互

地址：https://themeforest.net/item/w1-ui-kit-for-watch-a...

W1 UI Kit - Apple Watch应用程序的最大UI套件。W1包含200多个屏幕，可满足你在设计过程中可能遇到的任何需求。每个屏幕都可以完全自定义，也易于导入Sketch进行再次创作。W1 UI Kit是为Apple Watch设计自定义应用程序的最佳方式。

Sketch 线框UI界面设计套件

1. Mobile UI Wireframe Kit Sketch Resource

设计师：Ray Macari

价格: 免费

标签：#iOS #Android #kit #wireframe

特点：

• 56移动线框拼贴
• 基本的UI元素
• 标注和注释图标
• 手势图标

地址：https://gumroad.com/l/wireflows

使用现成的线框图模型将会大大提升用户体验设计工作流程和效率。你可以使用Mockplus等原型工具导入Sketch文件，利用已有的手势图标和注释元素以及用于快速更改样式的符号，只需添加交互便可快速完成设计。对于初学者来说，这是一款很好的学习基本的页面布局，应用程序架构，内容和用户界面流程的线框设计。

2. WeDot - Wireframe UI Kit

设计师：Marko Jotic

价格：免费

标签：#wireframe #ui #kit

特点：

• 170+即可使用布局
• 100+素描符号
• 100％响应式矢量布局
• 适用于Sketch，XD等多种格式

地址：https://ui8.net/products/wedot-wireframe-ui-kit

借助这个UI套件，仅需2分钟即可创建或设计任何类型的网站或应用程序，与Sketch，Photoshop，Adobe Xd等兼容。该设计中所有布局和模板都基于12列Bootstrap网格，并且很容易组合在一起，是一个完全可编辑的和基于矢量的响应式线框UI套件。

Sketch 网页UI界面设计套件

1. Simple Portfolio Template PSD-Sketch

设计师：Mehmet Zinnur Öcal

价格：免费

标签：#portfolio #web #sketch

特点：

• 谷歌字体
• Bootstrap
• 支持PSD Sketch＆Html下载

地址：

https://www.behance.net/gallery/63901069/Barts-Fre...

网页设计作品集对于大多数想要推销自己的设计师来说，是个非常重要的展示渠道。这款UI界面设计套件满足了，字体、文字、图片等网页设计所需要的元素。兼容Sketch和PSD。

2. 4ocal Web UI Kit for Sketch

设计师：4ebstudio

价格：免费

标签：#web #ui #kit

特点：

• 基于网格
• 完全可定制
• 矢量形状
• Google字体
• 10+着陆页设计

地址：https://elements.envato.com/4ocal-web-ui-kit-for-s...

4ocal是一个专业的网络用户界面工具包，可用于商务演示和推广。此套件中每个模板都是完全可定制的，易于使用，完全的Sketch文件。里面的图片都是完全可替换的。

3. Portland UI Kit

设计师：getCraftwork

价格：免费

标签：#UI #kit

特点：

• 免费谷歌字体
• 大量基本设计元素
• 完美的图层组织
• 基于网格

地址：https://elements.envato.com/portland-ui-kit-4ZGTEN

这是一款完美，优雅和明亮的用户界面工具包。它结合了美观和可用性，绝对是您值得收藏的模板！免费字体，大量的设计元素，满足你各种网页设计需求。基于矢量的组件完全兼容和可编辑.

以上10个Sktech UI设计套件是摹客君个人最喜欢的，也希望能为各位带来灵感碰撞出更多更优秀的设计和理念。当然，基于摹客家支持Sketch插件导入的特点，以上设计都可以通过插件导入到Mockplus软件中进行自定义设计或二次创作。

更多Sketch UI界面设计套件资源：

1. Sketchappsource

2. Envato

3. Dribbble

4. Behance

5. UI8

6. ThemeForest

7. Uipixels

---

【主页菌文末福利】领取Mockplus个人版限时体验！

Mockplus目前已支持发布到iDoc，原型接入产品工作流，增加了原型标注、评论、对比设计稿、全貌呈现等功能，我们准备了Mockplus个人版给大家体验！数量有限，先到先得！

• 专属激活码：Mock2019；
• 激活数量：限量150个；
• 有效期：2019年9月30日

激活地址：https://www.mockplus.cn/user/upgrade （登录/注册后输入激活码即可）
Plus，发布Mockplus原型到iDoc，还有更多惊喜等你抱走！