超实用教程,教你用墨刀做出小红书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.视频嵌入

目前

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

已经在墨刀官网上线

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

原文地址:https://www.cnblogs.com/productcompass/p/9853169.html

时间: 2024-10-16 06:16:57

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

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

对页面信息进行简单抓取: 需要注意的问题 : auth-sign 和 auth 都是有一定的时效性,还有url原url是https这里要改为http请求. 这参数的问题需要通过mitmdump去获取请求的具体参数并将之取出,不用手动去截获分析http请求和响应,写好请求和相应的处理逻辑,通过python实现二次操作. 后期通过appium模拟人为操作去滑动请求刷新界面,得到相应再做处理. import requests def main(): headers = { "charset"

html5仿小红书的图片标签功能

最近做了这样的一个功能,在wap网页上实现类似小红书app里的图片标签功能,很是蛋疼. 上传页示例如下图: 可以看到最上面的①是展示区域,也是编辑标签的操作区域:中间②是可滑动的缩略图,在此选择要编辑的图片:最下面③是"添加图片"和"添加标签"两个按钮. 废话不多说,下面介绍具体实现思路. 首先就是要有"选择图片"的按钮. 1 <input type="file" name="fileToUpload"

干货分享:清法网络分析小红书内容运营那点事儿

有人说小红书是"一夜爆红",其实不然.事实上,任何平台的火爆都少不了长期的SEO优化.搜索公关专家清法认为,虽然小红书的成功大部分归功于内容营销,但是小红书中的内容运营策略与SEO优化密不可分.一.用户定位用户定位是SEO优化过程中必不可少的步骤.我们建一个网站,要考虑用户有哪些需求,再对用户的需求进行分析,想出对应的方法来满足用户的需求.通过百度指数的人群画像分析,我们会发现小红书 APP 里面集中了大量购买力强.追求精致的年轻女性用户,针对这样的用户群体,小红书的内容定位是为爱美的

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

微信公众平台开放JS-SDK(微信内网页开发工具包),说明文档已经有相关使用方法和示例了,很多同学觉得不是很直观,为此微信公开课发布微信官方教程:教你用好微信JS-SDK接口. 1.分享类接口:支持获取“分享到朋友圈”.“发送给朋友”.“分享到QQ”和“分享到微博”按钮的用户点击状态,同时支持自定义分享内容. 小编解读:说起分享接口应用,最常见的莫过于公众号文章分享.通过分享按钮,用户可以将自己喜欢的文章分享给微信好友,也可分享到微信朋友圈.通过此次开放的分享接口,开发者获得了新的能力:可以在用

类似小红书标签效果(补间动画)

昨天老大给布置个任务,为我们的app做下调研,app中有标签的存在,类似小红书和nice的添加标签模式,于是我就试着做出那个一闪一闪的标注点~   仔细看了看小红书的闪闪的标签,得出一个结论: 它是个动画   好吧,这简直是废话. 其实一开始我的思路是拿来主义,去网上找了找类似的“小红书标签效果”等等,然后我发现他们用自定义控件完成了一个这样的动画..就这样,我华丽丽的跑偏了呃呃呃..   自定义控件我不熟啊!! 学. 花了半个下午研究自定义控件,好不容易写出了动画效果. 这个效果的原理是这个样

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

背景 项目上需要做UWP的自动安装包,在以前的公司接触的是TFS来做自动build. 公司要求用Jenkins来做,别笑话我,之前还真不晓得这个东西. 会的同学请看一下支持错误,不会的同学请先自行脑补,我们一步一步的来. 首先我们准备2个安装包,Jenkins,NuGet 都下载最新的好了. 1. 安装Jenkins,下一步下一步.安装好了会自动浏览器跳转到http://localhost:8080/ 如下图 按照提示去C:\Program Files (x86)\Jenkins\secrets

手把手教你从零开始做一个好看的 APP

前言 从零开始,手把手带你实现一个「专注睡前的 APP」.睡觉之前如果能有一个 APP,能让我们写一写这一天的见闻或者心得,同时又能看一会段子.瞄一会好看的妹子,放松一下疲惫的身心那该多好,这也是我完成这个 APP 的原因.APP 的全部代码我已经分享到?Github?上了,需要的直接 点击这里,如果喜欢的话,麻烦给个 star,谢谢啦. 本文为这一系列文章的总述,如果觉得篇幅过长,请点击下面的连接 手把手教你从零开始做一个好看的 APP - Day one 手把手教你从零开始做一个好看的 AP

两年半开发经验,从360离职后,拿到钉钉、抖音、小红书、美团等8家公司的offer

前言 去年年底,我提交了从360提交了辞呈.原因很简单,公司业绩不行了! 我们公司2019年的及格线是38亿元,但是上半年仅仅完成了16.09亿元. 屋漏偏逢连夜雨,王思聪玩砸了的熊猫直播,我们360也算是个大股东,持股近20%.熊猫直播破产,360保守估计要损失5个亿. 今年年初面试了以下几个公司(不是面试顺序): 阿里(钉钉):拿到 offer 头条(抖音.火山):拿到 offer 美团(美团平台):拿到 offer 腾讯(腾讯音乐):二面挂 小红书:拿到 offer bilibili:拿到

小红书完成新一轮3亿美元融资领投的阿里看上了哪些独特优势?

据相关报道,社区电商小红书近日刚完成了新一轮由阿里领投多家知名投资机构跟投超过3亿美元的融资,目前小红书估值30亿美元.今天我们不妨一起来复盘下小红书的融资历程.成立于2013年的小红书当年10月,就获得真格基金的数百万人民币天使轮投资:2014年6月,获金沙江创投和真格基金的数百万美元A轮投资:2015年6月,获纪源资本和金沙江创投的千万美元B轮投资2016年3月,获由腾讯领投,Genesis资本和天图资本参投的1亿美元C轮融资:今年5月底,获阿里领投的超3亿美元的D轮融资. 从融资历程来看,