Sketch进阶教程-原型设计入门
发布时间:2023-01-16 07:19:31
Sketch for Mac是一款运行在Mac平台上的专业矢量绘图软件,sketch mac 中文破解版提供了丰富的矢量绘图和文字工具,你可以使用sketch mac 破解版来设计界面、网站、图标等,非常的实用。Sketch作为工具已经足够优秀,但是玩转Sketch系列不仅仅是工具教程,我们还想借着Sketch教程讲解一些不一样的东西,例如交互设计思考、最一线的项目实操经验、提高工作效率可行办法等等。此次小编就带大家了解下Sketch做原型设计。
1、虚拟项目说明
为方便教程的讲解,后续教程中会加入一个虚拟的短视频项目,同时,我们为这个项目取了一个好听的名字:夜视。
2、在了解这些之前不要打开Sketch
在使用Sketch进行原型设计之前,我们首先需要了解原型设计的三要素,分别是目标、黑白、真实。
(1)目标
原型需要达到什么样的目标?验证我们的想法?是,但不够细化。临摹原型?是,学习专用,但缺乏思考。原型设计的目标一定是具体的,细化的并且目标明确的。例如今天我们所学习的夜视项目首页设计,目标就是通过首页探讨具体的框架定位,实现首页浏览短视频、搜索短视频的需求。
(2)黑白
原型黑白就好,不要埋没了视觉设计师的创意。而且,黑白的原型可以让我们排除颜色的干扰项,专注于核心业务功能的实现。
(3)真实
原型一定要真实反映最终产品的样子,按钮是按钮的形状,而不是五角星;真实的文字内容可能出现换行,而不是设计稿规定的同样的4、5个字;用户自发上传的图片可能很丑,达不到设计稿的精美图片要求。
3、夜视首页原型设计
(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,例如腾讯视频;可以采用富有冲击力的列表展示方式,每一行展示一个内容,例如开眼。夜视采用的是类似开眼的展示方式,以推荐精品应用为主。展示内容包括:视频预览图、视频标题、视频作者、视频长度、发布日期等。
注意:短视频应用,展示视频长度是必须的,它能让用户心理对短视频的长度有一个预期,合理安排碎片化时间。
第五步:添加搜索
不要漏了搜索,搜索对于内容应用来说至关重要,搜索的入口,既要实现对用户浏览视频不造成困扰,又要放在显眼的位置,方便用户调用,在首页顶部的位置放置搜索按钮是较好的选择。
猜你喜欢
- excel怎么使用vba创建一个预设格式的工作表?想要通过vba预设一个固定格式的工作表,该怎么设置呢?下面我们就来看看详细的设置教程,需要
- PPT怎么绘制标签图标?ppt中想要绘制标签图标,该怎么绘制标签呢?下面我们就来看看ppt设计商品标签的教程,需要的朋友可以参考下ppt中想
- Excel集成工具箱是著名微软办公软件EXCEL(Microsoft Office for EXCEL)增强型插件。包括190个菜单功能和1
- 在excel中,排序是经常用到的操作。通常情况下,我们在做完表格数据后,会通过菜单中的“数据”→“排序”进行升序或降序排序。但有时候在需要不
- Word有很多实用的技巧,学会了可以节省大量的时间在编辑上。今天就给大家分享下怎么删除图片背景这个小技能。1.删除图片背景首先需要将图片更改
- 第1步,打开Word2013文档窗口,切换到“页面布局”功能区。在“页面背景”分组中单击“水印”按钮,并在打开的水印面板中选择“自定义水印”
- 有时需要对一些文件进行重命名,例如重命名一组旅游照片。如果手头没有批量重命名软件,用Windows自带的功能也可以快速对大量文件进行重命名。
- 我的电脑是高频点击的对象,那么新版的win10我的电脑不见了该怎么办。按照本教程来查找回来就可以的,如果你有被这个问题困扰,可以参照教程来操
- 各人好, 咱们在 建造文档或 进修,写稿子的 时分, 常常 需求在文档中 增加 讲明,即不让灵感和 进修感悟 丧失,又 能够在 当前传输给
- SUM函数是Excel中最常用也是最基本的求和函数,它有两个衍生函数,分别是SUMIF和SUMIFS。他们三者直接有何区别呢?我们通过下面的
- wps是一款很强大的办公软件,想要使用该软件,首先得知道它的安装方法,下面就让小编告诉大家怎样安装wps。安装wps的方法打开下载器。从下载
- 如何在没有互联网连接的情况下随时写信?想在船,飞机或火车上调整您的作品?小编为您推荐几款博客编辑软件您可以试试哦!Gridea for Ma
- 【情况一】Excel2013
- RSS 的全称是 Really Simple Syndication(简易信息聚合),它是一种消息来源的格式规范,网络用户可以在客户端借助于
- 下面我们将介绍VLOOKUP函数。顾名思义,这是一个查找函数,处理垂直列表中的项目。其它函数可能会更好地从表中提取数据,但VLOOKUP函数
- 最近有很多用户在安装了win10 9月更新的KN5005565补丁后出现了打印机各种问题?如连接不上、连接错误等等,收到错误代码 0x000
- 工作中写报告,经常需要将EXCEL表格复制到WORD中,那么在excel做好的表格复制到word后表格线不显示怎么办?下面小编就为大家详细介
- wps文档在排版过程中有时候为了美观需要对段落格式进行一定的设置调整,最常用就是首行缩进和首字下沉两个功能了,下面小编马上就告诉大家wps首
- 我们在编辑文档的时候,经常需要在其中添加索引和目录,那么,我们可以通过在wps文字中操作来实现,下面就让小编告诉你 在wps文字中怎样添加索
- 或许有些朋友刚接触到Excel,并不太会使用Excel里面的功能,而复制表格公式是在Excel中较为常用的,这个具体该如何操作实现呢?下面是