高保真原型利器推荐—Principle,陆续吐血整理教程

如何更高效地展示产品的功能结构,信息展示,更好地传递产品的sense,像用户一样真实体验产品,高保真这时候需要登场了。最近在用principle制作高保真原型,配合sketch使用,可畏双剑合璧,高效好用,特此强烈推荐。同时会陆续整理相关的教程。

今天,就从打开app的第一步看到的欢迎页入手,来和大家一起看看如何用priciple制作欢迎页的翻页切换效果。这个部分同样适用于banner位轮播效果哦!那么就开始用8步制作高保准的app欢迎页吧。

1.将相关的素材在sketch中整理好,打开principle,点击import,将素材导入。以下是我导入的素材(图片素材来自dribble):


2.在页面画板中添加一个矩形,点击左上角矩形按钮,调整矩形大小为750*1334,将其颜色填充为紫色。再复制两个等大矩形,分别填充为黄色和蓝色,调整其位置均为(0,0)。


3.分别将scroll1,scroll2,scroll3合并为一个组。然后选择Horizontal的效果为page。这个时候,有一个关键点,我们需要拖动组的边界线至画板红框标注的位置(宽为750,与scroll1等高)。到这里,就实现了基础的翻页效果了,但离我们实际想要的翻页变化效果还有几小步哦。


4.页面的滑动切换自然少不了原点的指示,现在我们就来添加3个滑动指示原点吧。依旧选择在画板上添加矩形,principle没有提供其他图形的添加选择,在这里我们通过调整矩形的圆角度数来实现矩形的添加。调整其大小并将其填充为白色,透明度调整为30%。

5.接下来,需要再添加一个标识原点,填充色为100%白色,命名为r_selected,将其覆盖在r1上。

6.接下来,我们将使用到principle的Driver工具来实现滑动翻页变化的效果。点击位于上方的Drivers按钮展开Drivers控制面板,点击左侧画板控制器中的purple背景,这个时候你会看到purple出现在Drivers的面板上,点击其旁边的锚点然后选择Opacity,拖动控制线至x=750的位置,这时候我们点击锚点,0-750的锚点间会被线连接起来,说明对于purple这个元件,透明度的变化联系已经被建立,我们在750处的锚点处,将其透明度调成0%。同样的操作在yellow这个元件上重复一遍,这次,将锚点线建立在750-1500的位置上,x=750时,Opacity=100%, x=1500时,Opacity=0%。


7.最后一步,我们来控制标识原点r_selected的效果(随着页面切换,标识点指示当前位置)。我们选中r_selected,选择其锚点变换值为x轴位置。拖动控制线至750位置时,将r_selcted的x位置调整成r2的x轴位置(80)。再拖动控制线至1500,将r_selcted的x位置调整成r3的x轴位置(160)。




8.Finally, app 常见的欢迎页切换效果就搞定了。


我制作了动效gif上传至了网盘,大家有兴趣的阔以去下载哦。有问题可以随时私我。欢迎指教!

gif链接: https://pan.baidu.com/s/1bpNxfeZ 密码: baum








最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容