超实用教程,教你用墨刀做出小红书app原型


一个新手怎么用1小时快速学会APP原型设计?
1小时很短,这意味着学习时必须把握APP原型设计中的重点、难点,而非面面俱到。
要在短时间内理解、掌握一个工具的使用,最有效的方式莫过于临摹:
看实例视频教程,并跟着教程在实例素材上操作。
基于这2个点,我们精心挑选了一个在原型效果实现中具有典型性的APP——小红书APP作为案例,结合视频+原型素材+配套教程文档的方式做了一套流程完整、让新手能快速学会APP原型设计的教程!

下面咱们来了解一下这套视频教程有什么吧!
一 基础设置
1.项目类型、尺寸设置
要设计原型,我们首先会碰到2个问题:
要做什么类型的原型,iPhone、Android还是iPAD?
如果是Android的话,要设置成什么尺寸?
2.APP图标、启动页设置
每个APP都有自定义的图标和启动页。
二 引导页
3.APP引导页设计
通常一个APP在初次下载打开的时候都会有3-5个页面的引导页。
三 页面设置
4.页面设置
在开始设计页面时,我们会遇到另外几个问题:
APP的顶栏、底栏怎么固定?
怎么更改页面背景色、背景图?
怎么做长页面,并让长页面可以滚动?
这里我们将会结合小红书APP的首页进行设置讲解。
5.组件固定设置
在APP页面中,按钮悬浮也是一种较为常见的设计。我们怎么实现按钮悬浮(固定)?
这里我们将会结合小红书APP的悬浮购物车按钮进行设置讲解。

四 交互跳转
6.页面跳转设置
交互跳转、返回是可交互原型的一个重要部分。
五 产品导航
APP原型设计过程中,会涉及到一些常用的产品导航,且这些导航的原型设计操作相对复杂。因为这些导航小红书APP刚好都用到了,所以这里我们将会结合它的几个页面重点讲解一下这些导航如何设计。
7.底部、顶部导航设计


8.侧边滚动(分类)导航设计

9.顶部滚动(分类)导航设计

10.抽屉导航设计

六 其它页面元素
除了导航以外,APP中一般还会有轮播图、滚动消息、弹窗以及视频这些常见页面元素,这里我们同样会结合小红书APP的相关元素进行设计讲解。
11.轮播图、滚动消息设计

12.点击弹窗设计

13.定时弹窗设计

14.视频嵌入

目前
全套“小红书”实例教学视频
已经在墨刀官网上线

我们快去【墨刀官网】—>【教程】—> 【实例视频教程】观看吧!
超实用教程,教你用墨刀做出小红书app原型的更多相关文章
- 使用Vue2完成“小红书” app
小红书项目说明 整体页面格调.功能和原版 app 无限接近.具体页面细节可以下载 “小红书” app查看. 图片素材:https://pan.baidu.com/s/1qYOcx7e 整体要求: · ...
- 6.简单提取小红书app数据(简单初步试采集与分析)-1
采集小红书数据爬虫:1.本来是要通过app端的接口去直接采集数据,但是app接口手机端设置本地代理这边开启抓包后就不能正常访问数据.所以就采用了微信小程序里的小红书app接口去采集数据. 2.通过 f ...
- 6.简单提取小红书app数据保存txt-2
对页面信息进行简单抓取: 需要注意的问题 : auth-sign 和 auth 都是有一定的时效性,还有url原url是https这里要改为http请求. 这参数的问题需要通过mitmdump去获取请 ...
- 小红书携手HMS Core,畅玩高清视界,种草美好生活
在相同流量消耗的情况下,540p可秒变1080p?这不是魔法,通过视频超分辨率技术(简称视频超分),就能让视频变得更清晰. 7月20日,在小红书最新版本7.48的App中,用户就能体验到这项技术带来的 ...
- 微信公开课发布微信官方教程:教你用好微信JS-SDK接口
微信公众平台开放JS-SDK(微信内网页开发工具包),说明文档已经有相关使用方法和示例了,很多同学觉得不是很直观,为此微信公开课发布微信官方教程:教你用好微信JS-SDK接口. 1.分享类接口:支持获 ...
- [Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现
[Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现 今天做Android项目的时候要用到图片选择,要实现拍照获取图片和从相册获取图片,并且要求在获取完之后可以裁剪,试了很多方法之 ...
- UWP Jenkins + NuGet + MSBuild 手把手教你做自动UWP Build 和 App store包
背景 项目上需要做UWP的自动安装包,在以前的公司接触的是TFS来做自动build. 公司要求用Jenkins来做,别笑话我,之前还真不晓得这个东西. 会的同学请看一下指出错误,不会的同学请先自行脑补 ...
- WPF系列教程——(一)仿TIM QQ界面 - 简书
原文:WPF系列教程--(一)仿TIM QQ界面 - 简书 TIM QQ 我们先来看一下TIM QQ长什么样,整体可以将界面分为三个部分 TIM QQ 1. 准备 阅读本文假设你已经有XAML布局的基 ...
- 从字节跳动离职后,拿到探探、趣头条、爱奇艺、小红书、15家公司的 offer【转】
前言 博主目前从事Android开发3年,前两年一直在抖音工作.我这篇文章并不是简单的描述一些面试中的题,或者总结一些Android的知识,而是想记录我整个的想法和准备的过程,以及一些心得体会,让大家 ...
随机推荐
- [转] - spark推荐 - 从50多分钟到3分钟的优化
原文地址 从50多分钟到3分钟的优化 某推荐系统需要基于Spark用ALS算法对近一天的数据进行实时训练, 然后进行推荐. 输入的数据有114G, 但训练时间加上预测的时间需要50多分钟, 而业务的要 ...
- ABP之展现层(Datatables分页)
在前面的随笔中,已经介绍了ABP的增删改查的操作,但是对于查询的数据并没有进行分页,只是进行粗糙的展示,今天的随笔中将摸索进行分页展示.这里打算使用的分页插件是DataTables,这是一款比较强大的 ...
- Oracle的字符连接函数 concat 和 || 的区别
总结:concat 只能连接两个字符串,|| 可以连接多个
- Lucene.net(4.8.0) 学习问题记录一:分词器Analyzer的构造和内部成员ReuseStategy
前言:目前自己在做使用Lucene.net和PanGu分词实现全文检索的工作,不过自己是把别人做好的项目进行迁移.因为项目整体要迁移到ASP.NET Core 2.0版本,而Lucene使用的版本是3 ...
- TOP100summit2017:Riot Games 李仁杰——大数据落地要找到数据和经验的平衡点
壹佰案例:李仁杰老师您好,很荣幸您能参加第六届TOP100全球软件案例研究峰会,您在大数据和人工智能领域有非常丰富的经验,在这次大会上您将分享什么内容? 李仁杰:这次我主要分享的有两个方面. 一个 ...
- /usr/bin/ld: 找不到 -lmsc----解决方案
系统的默认搜索依赖库路径为,/usr/local/lib 在camkelists.txt文件中对可执行文件链接libmsc.so add_executable(iat_publish src/iat_ ...
- JDBC---Mysql(1)
使用MySQL需要导mysql-connector-java-5.1.7-bin.jar包 所有的java.sql.Driver实现类,都提供了static块,块内的代码就是把自己注册到DriverM ...
- Coding 小技巧
</pre>//格式化字符串的传递<p></p><p>#define FSKILL_LOG(format ,...) DREAMLAND_RUNI ...
- RMAN.DBMS_RCVCAT 版本错误处理
登录新装的catalog库准备注册数据库时报版本问题 rman target / catalog rman11g/rman2010#@rman Recovery Manager:Release 11. ...
- 使用U盘为虚拟机安装系统
前提:使用虚拟机安装WIN8系统时,由于WIN8镜像文件大于4G无法使用虚拟安装,所以使用U盘安装. 1.装有U盘启动的WINPe系统 (1)下载 老毛桃U盘启动盘制作工具 (2)U盘清空 2.虚拟机 ...