夜雨原创玩转Sketch第五期:原型设计入门

Sketch作为工具已经足够优秀,但是玩转Sketch系列不仅仅是工具教程,我们还想借着Sketch教程讲解一些不一样的东西,例如交互设计思考、最一线的项目实操经验、提高工作效率可行办法等等。

注:玩转Sketch系列教程适用于Sketch44或者更高级的版本。

1.虚拟项目说明

为方便教程的讲解,后续教程中会加入一个虚拟的短视频项目,同时,我们为这个项目取了一个好听的名字:夜视。

夜雨原创玩转Sketch第五期:原型设计入门_第1张图片

2.在了解这些之前不要打开Sketch

在使用Sketch进行原型设计之前,我们首先需要了解原型设计的三要素,分别是目标、黑白、真实。

(1)目标

原型需要达到什么样的目标?验证我们的想法?是,但不够细化。临摹原型?是,学习专用,但缺乏思考。原型设计的目标一定是具体的,细化的并且目标明确的。例如今天我们所学习的夜视项目首页设计,目标就是通过首页探讨具体的框架定位,实现首页浏览短视频、搜索短视频的需求。

(2)黑白

原型黑白就好,不要埋没了视觉设计师的创意。而且,黑白的原型可以让我们排除颜色的干扰项,专注于核心业务功能的实现。

(3)真实

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

夜雨原创玩转Sketch第五期:原型设计入门_第2张图片

3.夜视首页原型设计

(1)首页功能分析

浏览短视频:作为短视频应用,浏览感兴趣的短视频是最优先需要满足的需求,视频展示包含两大模块:精选(banner)以及push流。push流视频的信息又应该包括最起码的视频标题、发布时间、上传者、以及视频长度。

搜索短视频:在海量内容中查找感兴趣的视频内容,标准配置。

APP导航:在原型设计时,导航设计一般在首页就体现出来,夜视使用的是标准的底部tab导航,分为四个菜单:首页、夜里、关注、我的。

(2)夜视短视频首页设计

做好功能分析之后,我们就可以利用Sketch来进行首页的原型设计了。为了“节约开发资源”,我们先开发IOS版本,所以,在设计中,我们先采用IOS的设计标准。

第一步:框架搭建

还记得第四期中的Artboard(画布)吗?它可以很方便的知道iPhone7的尺寸。操作路径为插入Artboard,在检查器中选择“Apple Device”-“iPhone7”即可看到原型尺寸为“375*667”。

夜雨原创玩转Sketch第五期:原型设计入门_第3张图片

由于我们不建议使用单独的Artboard创建单独的页面,所以我们可以先新建一个较大尺寸的Artboard,再在Artboard上面画一个375*667的矩形,就初步完成我们的框架。

夜雨原创玩转Sketch第五期:原型设计入门_第4张图片

第二步:添加状态栏和菜单栏

第二步就是添加状态栏(20px)和菜单栏(49px),在Sketch中添加这两者将变得非常简单,完全可以不用去网上搜索iOS设计规范,只需要在Sketch菜单栏中选择“File”-“New From Template”-“IOS UI Design”即可看到Sketch自带的IOS组件库,再从中选择状态栏(status bar)、主菜单栏(Tab bars)即可,真正的傻瓜式操作。

夜雨原创玩转Sketch第五期:原型设计入门_第5张图片

另外,我们可以适当增加定位线来进行定位,规范我们的设计。

夜雨原创玩转Sketch第五期:原型设计入门_第6张图片

第三步:设计运营banner

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

夜雨原创玩转Sketch第五期:原型设计入门_第7张图片

第四步:设计短视频push流

即首页除了轮播运营banner外,其他需要提供给用户的内容。展示的方式见仁见智:可以采用九宫格的方式,在有限的空间内展示更多的内容,常见于大型视频APP,例如腾讯视频;可以采用富有冲击力的列表展示方式,每一行展示一个内容,例如开眼。夜视采用的是类似开眼的展示方式,以推荐精品应用为主。展示内容包括:视频预览图、视频标题、视频作者、视频长度、发布日期等。

注意:短视频应用,展示视频长度是必须的,它能让用户心理对短视频的长度有一个预期,合理安排碎片化时间。

夜雨原创玩转Sketch第五期:原型设计入门_第8张图片

第五步:添加搜索

不要漏了搜索,搜索对于内容应用来说至关重要,搜索的入口,既要实现对用户浏览视频不造成困扰,又要放在显眼的位置,方便用户调用,在首页顶部的位置放置搜索按钮是较好的选择。

夜雨原创玩转Sketch第五期:原型设计入门_第9张图片

你可能感兴趣的:(夜雨原创玩转Sketch第五期:原型设计入门)