Sketch进阶教程-原型设计入门

Sketch for Mac是一款运行在Mac平台上的专业矢量绘图软件，sketch mac 中文破解版提供了丰富的矢量绘图和文字工具，你可使用sketch mac 破解版来设计界面、网站、图标等，很是的实用。Sketch做为工具已经足够优秀，可是玩转Sketch系列不只仅是工具教程，咱们还想借着Sketch教程讲解一些不同的东西，例如交互设计思考、最一线的项目实操经验、提升工做效率可行办法等等。这次小编就带你们了解下Sketch作原型设计。sketch永久激活版获取方式在文章尾部。

一、虚拟项目说明
为方便教程的讲解，后续教程中会加入一个虚拟的短视频项目，同时，咱们为这个项目取了一个好听的名字：夜视。

二、在了解这些以前不要打开Sketch
在使用Sketch进行原型设计以前，咱们首先须要了解原型设计的三要素，分别是目标、黑白、真实。

（1）目标
原型须要达到什么样的目标？验证咱们的想法？是，但不够细化。临摹原型？是，学习专用，但缺少思考。原型设计的目标必定是具体的，细化的而且目标明确的。例现在天咱们所学习的夜视项目首页设计，目标就是经过首页探讨具体的框架定位，实现首页浏览短视频、搜索短视频的需求。

（2）黑白
原型黑白就好，不要埋没了视觉设计师的创意。并且，黑白的原型可让咱们排除颜色的干扰项，专一于核心业务功能的实现。

（3）真实
原型必定要真实反映最终产品的样子，按钮是按钮的形状，而不是五角星；真实的文字内容可能出现换行，而不是设计稿规定的一样的四、5个字；用户自发上传的图片可能很丑，达不到设计稿的精美图片要求。

三、夜视首页原型设计

（1）首页功能分析
浏览短视频：做为短视频应用，浏览感兴趣的短视频是最优先须要知足的需求，视频展现包含两大模块：精选（banner）以及push流。push流视频的信息又应该包括最起码的视频标题、发布时间、上传者、以及视频长度。
搜索短视频：在海量内容中查找感兴趣的视频内容，标准配置。
APP导航：在原型设计时，导航设计通常在首页就体现出来，夜视使用的是标准的底部tab导航，分为四个菜单：首页、夜里、关注、个人。

（2）夜视短视频首页设计
作好功能分析以后，咱们就能够利用Sketch来进行首页的原型设计了。为了“节约开发资源”，咱们先开发IOS版本，因此，在设计中，咱们先采用IOS的设计标准。

第一步：框架搭建
还记得第四期中的Artboard（画布）吗？它能够很方便的知道iPhone7的尺寸。操做路径为插入Artboard，在检查器中选择“Apple Device”-“iPhone7”便可看到原型尺寸为“375*667”。

因为咱们不建议使用单独的Artboard建立单独的页面，因此咱们能够先新建一个较大尺寸的Artboard，再在Artboard上面画一个375*667的矩形，就初步完成咱们的框架。

第二步：添加状态栏和菜单栏
第二步就是添加状态栏（20px）和菜单栏（49px），在Sketch中添加这二者将变得很是简单，彻底能够不用去网上搜索iOS设计规范，只须要在Sketch菜单栏中选择“File”-“New From Template”-“IOS UI Design”便可看到Sketch自带的IOS组件库，再从中选择状态栏(status bar)、主菜单栏(Tab bars)便可，真正的傻瓜式操做。

另外，咱们能够适当增长定位线来进行定位，规范咱们的设计。

第三步：设计运营banner
短视频做为内容输出产品，首先须要考虑是为用户减小决策范围；另外，在有限的空间内在首屏为用户呈现更多的内容，没有比轮播运营banner更好的方式了。还记得咱们的原型设计三要素吗？使用真实的图片、真实的文字吧。

第四步：设计短视频push流
即首页除了轮播运营banner外，其余须要提供给用户的内容。展现的方式见仁见智：能够采用九宫格的方式，在有限的空间内展现更多的内容，常见于大型视频APP，例如腾讯视频；能够采用富有冲击力的列表展现方式，每一行展现一个内容，例如开眼。夜视采用的是相似开眼的展现方式，以推荐精品应用为主。展现内容包括：视频预览图、视频标题、视频做者、视频长度、发布日期等。
注意：短视频应用，展现视频长度是必须的，它能让用户心理对短视频的长度有一个预期，合理安排碎片化时间。

第五步：添加搜索
不要漏了搜索，搜索对于内容应用来讲相当重要，搜索的入口，既要实现对用户浏览视频不形成困扰，又要放在显眼的位置，方便用户调用，在首页顶部的位置放置搜索按钮是较好的选择。

以上就是小编为你们带来Sketch进阶教程-原型设计入门介绍，还有更多详细、实用的功能以及相关软件sketch和其余Mac软件获取，你们快来Macdown.com自行探索一番吧。