Axure教程:移动端元件库 获赏10金币

Donny 普通用户 2019-12-17 7058


今天给大家讲一下如何制作元件库,同时也给大家分享一个 Axure 移动端元件库。该组件库是我平时收集众多元件库之后,挑选出比较实用的部分所元件的一个组件库。目前我所在的产品团队里面也在使用我这个元件库。


为什么要做元件库?


作为一名交互设计师,画原型是日常工作中比较重要的部分,对于一些复杂的界面原型或者一些使用比较频繁的元件还一直重复地画,这是最让人头大的,所以这个时候针对一个系统定制化地做一个元件库就显得重要了!!我们可以在工作中,针对一个系统的原型做出一个元件库,完成之后分享给其他产品线的产品经理或者交互设计师。这样能够在保证原型的一致性,还能够节省大量的工作时间,提高工作效率。


明确产品目标、规范、目的


制作元件库之前,先明确一下对元件库的要求是怎样的,是方便产品、交互的工作效率还是要做高保真之类的。前者的话只要自己做好各个元件,颜色统一黑白灰风格就可以了;后者需要找设计拿设计规范,根据每一个元件的宽度、高度、颜色、字体大小…跟设计的相似度很高。目前因后者需要花大量的工作,所以还是做前者的比较多。


区分元件库的使用场景和区别


做的时候需要区别一些该元件库是用在什么场景下,例如: Web 端元件库、Pad 端元件库、移动端元件库,移动端有区分 iOS 元件库、Android 端元件库。


Web 端元件库页面会比较详细且复杂,但更新迭代的频率跟移动端相比会低一点,所以元件库的样式是比较固定。元件之类的东西会比较多,只要做的细一点,到时在原型时使用这个元件库就可以直接拖出来使用了。

移动端的元件库因为尺寸和操作方式的原因相对来说还是比较简单的,但就是更新频率比较快,移动端细节的东西一般都不需要做,只要做一些比较常见的 字体、搜索框、按钮、顶部栏/底部栏这些基础的元件即可。还有如果要做的细致的话,就需要区分 iOS 和 Android 的区别了。


这里就不细讲在 Axure 里面如何制作元件库了,大家可以百度一下或者在各大平台看一下操作流程。


该元件库都有哪些内容,可以先来看下:



元件库里面有很多是我做了动效的,耐心的小伙伴可以看看 ~



 本次就到这里,谢谢!!

上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (661)
  • 18763645208 普通用户 18天前
    0 引用 662
    感谢,好人一生平安
  • Alisa_Axure 普通用户 18天前
    0 引用 661
    感恩分享
  • zxt050127 普通用户 20天前
    0 引用 660
    感谢
  • 13419138498 普通用户 1月前
    0 引用 659
    感谢分享
  • sunxs 普通用户 1月前
    0 引用 658
    感谢分享
  • yklinga 普通用户 2月前
    0 引用 657
    感谢分享

  • 小z同学 普通用户 2月前
    0 引用 656
    感谢
  • yuanyuan123458 普通用户 2023-5-25
    0 引用 655
    感谢分享
  • 繁华 普通用户 2023-3-8
    0 引用 654
    感谢分享
  • 818181888 普通用户 2022-6-27
    0 引用 653
    感谢分享
  • xinjincp 普通用户 2022-5-2
    0 引用 652
    感谢分享
  • 曾经 普通用户 2021-12-9
    0 引用 651
    谢谢分享
  • Panpankkk 普通用户 2021-12-7
    0 引用 650
    66666666666
  • juanrui1 普通用户 2021-12-7
    0 引用 649
    感谢大佬
  • 梨子111 普通用户 2021-12-7
    0 引用 648
    感谢
  • vevina 普通用户 2021-11-23
    0 引用 647
    感谢分享
  • 随意闹心 普通用户 2021-11-4
    0 引用 646
    感谢分享
  • tjyjjj 普通用户 2021-11-2
    0 引用 645
    111
  • yuer 普通用户 2021-10-29
    0 引用 644
    感谢分享
  • yulina 普通用户 2021-10-28
    0 引用 643
    66
  • 啊qiu 普通用户 2021-10-27
    0 引用 642
    66
  • 15767581335 普通用户 2021-10-26
    0 引用 641
    谢谢分享 
  • chaoyinyin 普通用户 2021-7-7
    0 引用 640
    感谢分享
  • Q清88888 普通用户 2021-5-14
    0 引用 639
    感谢分享
  • shiyu_29 普通用户 2021-5-13
    0 引用 638
    666
  • LGTR 普通用户 2021-5-12
    0 引用 637
    谢谢大佬
  • axuremoon 普通用户 2021-5-12
    0 引用 636
    感谢分享
  • q406571252 普通用户 2021-5-11
    0 引用 635
    感谢分享
  • hunnyxu 普通用户 2021-4-19
    0 引用 634
    感谢分享!
  • 十一的一天 普通用户 2021-4-19
    0 引用 633
    1
  • 程小蛋 普通用户 2021-3-29
    0 引用 632
    666
  • 闻人未见 普通用户 2021-3-16
    0 引用 631
    感谢分享
  • 溪风丨微雨轻尘 普通用户 2021-3-16
    0 引用 630
    感谢分享
  • azurezhouzhou 普通用户 2021-3-12
    0 引用 629
    感谢
  • ArivsZ 普通用户 2021-3-5
    0 引用 628
    666
  • 胖胖乎乎姐 普通用户 2021-3-5
    0 引用 627
    感谢
  • 悲画扇 普通用户 2021-3-4
    0 引用 626
    感谢分享
  • maple233 普通用户 2021-3-3
    0 引用 625
    感谢分享
  • 菜菜527 普通用户 2021-3-3
    0 引用 624
    感谢
  • liteyais 普通用户 2021-2-20
    0 引用 623
    感谢分享
  • Heyfox 普通用户 2021-2-20
    0 引用 622
    感谢分享
  • ECHO_HE 普通用户 2021-2-20
    0 引用 621
    感谢分享
  • 默默默默 普通用户 2021-2-18
    0 引用 620
    感谢分享
  • 哈迪斯00 普通用户 2021-2-18
    0 引用 619
    666
  • ccoo 普通用户 2021-2-5
    0 引用 618
    非常棒
  • superderek 普通用户 2020-12-23
    0 引用 617
    分享不错!
  • hushidashen 普通用户 2020-11-25
    0 引用 616
    感谢分享
  • dida 普通用户 2020-11-25
    0 引用 615
    感谢
  • wqsmg 普通用户 2020-11-25
    0 引用 614
    感谢分享
  • 临渊01 普通用户 2020-11-14
    0 引用 613
    感谢分享
  • 王球球 普通用户 2020-11-14
    0 引用 612
    感谢分享
  • 然_1605287180 普通用户 2020-11-14
    0 引用 611
    感谢
  • hchchc6016 普通用户 2020-11-14
    0 引用 610
    感谢分享
  • sally117 普通用户 2020-11-12
    0 引用 609
    感谢分享
  • 神经蛙_1605065520 普通用户 2020-11-12
    0 引用 608
    感谢分享
  • JaRa 普通用户 2020-11-12
    0 引用 607
    感谢分享~
  • 胡汉三三三 普通用户 2020-11-6
    0 引用 606
    蟹蟹
  • Hedgehogm 普通用户 2020-11-6
    0 引用 605
    感谢分享
  • Flos 普通用户 2020-11-6
    0 引用 604
    太厉害了
  • 晨聚-李颖杰 普通用户 2020-11-6
    0 引用 603
    感谢
  • 自然数 普通用户 2020-11-3
    0 引用 602
    66
  • 咕咕不咕 普通用户 2020-11-2
    0 引用 601
    感谢分享
  • likun(13517914391) 普通用户 2020-11-2
    0 引用 600
    感谢分享
  • qmxle 普通用户 2020-10-31
    0 引用 599
    谢谢分享
  • 棟軒 普通用户 2020-10-30
    0 引用 598
    多谢
  • 铅笔头 普通用户 2020-10-28
    0 引用 597
    不错的原件,谢谢
  • A 我站会 普通用户 2020-10-28
    0 引用 596
    1
  • aZoie. 普通用户 2020-10-27
    0 引用 595
    感谢分享
  • Pin.Zhao 普通用户 2020-10-25
    0 引用 594
    感谢分享,感谢分享
  • chaoleo 普通用户 2020-10-25
    0 引用 593
    感谢分享
  • 乐小乐 普通用户 2020-10-21
    0 引用 592
    感谢分享
  • mzxx83 普通用户 2020-10-21
    0 引用 591
    感谢
  • nan_1603167921 普通用户 2020-10-20
    0 引用 590
    感谢
  • 单小厨 普通用户 2020-10-20
    0 引用 589
    感谢
  • Crush_1603162666 普通用户 2020-10-20
    0 引用 588
    感谢分享
  • zsmj 普通用户 2020-10-19
    0 引用 587
    感谢
  • z飝 普通用户 2020-10-19
    0 引用 586
    感谢分享
  • 孔小坏 普通用户 2020-10-19
    0 引用 585
    感谢分享!
  • 刘高冷1994 普通用户 2020-10-19
    0 引用 584
    非常感谢
  • Rango 普通用户 2020-9-28
    0 引用 583
    感谢
  • 汪富贵儿 普通用户 2020-9-28
    0 引用 582
    感谢分享
  • 何所冬暖 普通用户 2020-9-27
    0 引用 581
    感谢分享
  • 溺水蒲公英 普通用户 2020-9-25
    0 引用 580
    感谢分享
  • babo 普通用户 2020-9-25
    0 引用 579
    感觉找到了神奇的网站
  • jinxintong 普通用户 2020-9-24
    0 引用 578
    感谢分享大佬
  • a1324256 普通用户 2020-9-24
    0 引用 577
    感谢分享
  • 王三三三三 普通用户 2020-9-24
    0 引用 576
    感谢
  • laigtt 普通用户 2020-9-24
    0 引用 575
    感谢分析
  • Elaine Jiang 普通用户 2020-9-24
    0 引用 574
    感谢分享
  • CJ_1600918868 普通用户 2020-9-24
    0 引用 573
    谢谢
  • vividon28 普通用户 2020-9-24
    0 引用 572
    YHX
  • mlcs 普通用户 2020-9-24
    0 引用 571
    谢谢
  • Gooson 普通用户 2020-9-22
    0 引用 570
    qq
  • yjzmedia 普通用户 2020-9-22
    0 引用 569
    感谢楼主分享
  • antante 普通用户 2020-9-22
    0 引用 568
    谢谢分享!
  • 菲FigaroG 普通用户 2020-9-21
    0 引用 567
    感谢分享
  • 奔跑的刚刚 普通用户 2020-9-21
    0 引用 566
    感谢分享
  • 熊孩子丶 普通用户 2020-9-21
    0 引用 565
    感谢分享
  • 熊孩子丶 普通用户 2020-9-21
    0 引用 564
    感谢分享
  • 子非 普通用户 2020-9-21
    0 引用 563
    感谢分享
返回