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

时间:2022-12-21 20:52:24

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

一个新手怎么用1小时快速学会APP原型设计?

1小时很短,这意味着学习时必须把握APP原型设计中的重点、难点,而非面面俱到。

要在短时间内理解、掌握一个工具的使用,最有效的方式莫过于临摹

看实例视频教程,并跟着教程在实例素材上操作。

基于这2个点,我们精心挑选了一个在原型效果实现中具有典型性的APP——小红书APP作为案例,结合视频+原型素材+配套教程文档的方式做了一套流程完整、让新手能快速学会APP原型设计的教程!

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

下面咱们来了解一下这套视频教程有什么吧!

一 基础设置

1.项目类型、尺寸设置

要设计原型,我们首先会碰到2个问题:

要做什么类型的原型,iPhone、Android还是iPAD?

如果是Android的话,要设置成什么尺寸?

2.APP图标、启动页设置

每个APP都有自定义的图标和启动页。

二 引导页

3.APP引导页设计

通常一个APP在初次下载打开的时候都会有3-5个页面的引导页。

三 页面设置

4.页面设置

在开始设计页面时,我们会遇到另外几个问题:

APP的顶栏、底栏怎么固定?

怎么更改页面背景色、背景图?

怎么做长页面,并让长页面可以滚动?

这里我们将会结合小红书APP的首页进行设置讲解。

5.组件固定设置

在APP页面中,按钮悬浮也是一种较为常见的设计。我们怎么实现按钮悬浮(固定)?

这里我们将会结合小红书APP的悬浮购物车按钮进行设置讲解。

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

四 交互跳转

6.页面跳转设置

交互跳转、返回是可交互原型的一个重要部分。

五 产品导航

APP原型设计过程中,会涉及到一些常用的产品导航,且这些导航的原型设计操作相对复杂。因为这些导航小红书APP刚好都用到了,所以这里我们将会结合它的几个页面重点讲解一下这些导航如何设计。

7.底部、顶部导航设计

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

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

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

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

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

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

10.抽屉导航设计

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

六 其它页面元素

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

11.轮播图、滚动消息设计

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

12.点击弹窗设计

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

13.定时弹窗设计

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

14.视频嵌入

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

目前

全套“小红书”实例教学视频

已经在墨刀官网上线

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

我们快去【墨刀官网】—>【教程】—> 【实例视频教程】观看吧!

超实用教程,教你用墨刀做出小红书app原型的更多相关文章

  1. 使用Vue2完成“小红书” app

    小红书项目说明 整体页面格调.功能和原版 app 无限接近.具体页面细节可以下载 “小红书” app查看. 图片素材:https://pan.baidu.com/s/1qYOcx7e 整体要求: · ...

  2. 6.简单提取小红书app数据(简单初步试采集与分析)-1

    采集小红书数据爬虫:1.本来是要通过app端的接口去直接采集数据,但是app接口手机端设置本地代理这边开启抓包后就不能正常访问数据.所以就采用了微信小程序里的小红书app接口去采集数据. 2.通过 f ...

  3. 6.简单提取小红书app数据保存txt-2

    对页面信息进行简单抓取: 需要注意的问题 : auth-sign 和 auth 都是有一定的时效性,还有url原url是https这里要改为http请求. 这参数的问题需要通过mitmdump去获取请 ...

  4. 微信公开课发布微信官方教程:教你用好微信JS-SDK接口

    微信公众平台开放JS-SDK(微信内网页开发工具包),说明文档已经有相关使用方法和示例了,很多同学觉得不是很直观,为此微信公开课发布微信官方教程:教你用好微信JS-SDK接口. 1.分享类接口:支持获 ...

  5. [Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现

    [Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现 今天做Android项目的时候要用到图片选择,要实现拍照获取图片和从相册获取图片,并且要求在获取完之后可以裁剪,试了很多方法之 ...

  6. UWP Jenkins + NuGet + MSBuild 手把手教你做自动UWP Build 和 App store包

    背景 项目上需要做UWP的自动安装包,在以前的公司接触的是TFS来做自动build. 公司要求用Jenkins来做,别笑话我,之前还真不晓得这个东西. 会的同学请看一下指出错误,不会的同学请先自行脑补 ...

  7. WPF系列教程——(一)仿TIM QQ界面 - 简书

    原文:WPF系列教程--(一)仿TIM QQ界面 - 简书 TIM QQ 我们先来看一下TIM QQ长什么样,整体可以将界面分为三个部分 TIM QQ 1. 准备 阅读本文假设你已经有XAML布局的基 ...

  8. 从字节跳动离职后,拿到探探、趣头条、爱奇艺、小红书、15家公司的 offer【转】

    前言 博主目前从事Android开发3年,前两年一直在抖音工作.我这篇文章并不是简单的描述一些面试中的题,或者总结一些Android的知识,而是想记录我整个的想法和准备的过程,以及一些心得体会,让大家 ...

  9. 教程Xcode 4下编译发布与提交App到AppStore

    地址:http://www.cocoachina.com/bbs/simple/?t55825.html 教程Xcode 4下编译发布与提交App到AppStore 先说一下这个是我在网上看到的一个帖 ...

随机推荐

  1. LIS检验系统,简介及主要特点

    简介 主要实现实验室设备的联机管理和信息传输以及发布,其联机共享范围小到单机版,大到医院之间或区域互联,都可以任意选择,按需升级.   主要特点 打报告不用输入姓名,报告处理轻松.高效.无差错 检查项 ...

  2. linux下proc里关于磁盘性能的参数

    我 们在磁盘写操作持续繁忙的服务器上曾经碰到一个特殊的性能问题.每隔 30 秒,服务器就会遇到磁盘写活动高峰,导致请求处理延迟非常大(超过3秒).后来上网查了一下资料,通过调整内核参数,将写活动的高峰 ...

  3. Server-Side UI Automation Provider - WinForm Sample

    Server-Side UI Automation Provider - WinForm Sample 2014-09-14 源代码  目录 引用程序集提供程序接口公开服务器端 UI 自动化提供程序从 ...

  4. mac osx 10.9安装配置macvim

    如果你已经安装了macvim,升级后又不能用了,建议你可以看看http://kodira.de/2013/10/macvim-osx-10-9-mavericks/这篇文章,如果你还没有安装,下面由我 ...

  5. OC中Foundation框架之NSArray、NSMutableArray

    NSArray概述 NSArray是OC中的数组类 NSArray特点 )只能存放任意OC对象,并且是有顺序的 )不能存放非OC对象,比如int/float/double/char/enum/stru ...

  6. nodeJS中的包

    前面的话 Node组织了自身的核心模块,也使得第三方文件模块可以有序地编写和使用.但是在第三方模块中,模块与模块之间仍然是散列在各地的,相互之间不能直接引用.而在模块之外,包和NPM则是将模块联系起来 ...

  7. 【Django】模型层说明

    [Django模型层] 之前大概介绍Django的文章居然写了两篇..这篇是重点关注了Django的模型层来进行学习. ■ 模型定义 众所周知,Django中的模型定义就是定义一个类,其基本结构是这样 ...

  8. python全栈学习--day2

    一.in的使用 说明:in有相当多的用处,比如判断,循环for 等. 实例一:in 操作符用于判断关键字是否存在于变量中 s = '男人john' print('男孩' in s) print('男孩 ...

  9. Win7 Eclipse Hadoop2.4插件配置

    准备工作: 1.下载hadoop2x-eclipse-plugin-master.zip Github地址:https://github.com/winghc/hadoop2x-eclipse-plu ...

  10. Oracle 安装步骤、安装中错误处理、完整卸载

    /*************************************************以下ORACLE服务端安装************************************* ...