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

Donny 普通用户 6月前 2966


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


为什么要做元件库?


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


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


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


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


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


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

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


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


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



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



 本次就到这里,谢谢!!

axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (448)
  • 付小雪 普通用户 3小时前
    0 引用 449
    感谢分享
  • 冯啊怪 普通用户 15小时前
    0 引用 448
    感谢
  • 冯啊怪 普通用户 16小时前
    0 引用 447
    感谢分享
  • kingxh 普通用户 17小时前
    0 引用 446
    丰富
  • 猹_1594277666 普通用户 22小时前
    0 引用 445
    感谢
  • 宁宁0813 普通用户 1天前
    0 引用 444
    好像没有3704的版本奥
  • YingFengCK 普通用户 1天前
    0 引用 443
    谢谢
  • 闲聊 普通用户 1天前
    0 引用 442
    不错,感谢分享
  • 杨旭君 普通用户 2天前
    0 引用 441
    感谢分享
  • van_1577700845 普通用户 2天前
    0 引用 440
    谢谢分享
  • 艾安琪 普通用户 2天前
    0 引用 439
    感谢分享
  • ganglingtuntun 普通用户 2天前
    0 引用 438
    66
  • itcc 普通用户 4天前
    0 引用 437
    感谢分享
  • erzhuben 普通用户 5天前
    0 引用 436
    感谢分享
  • 廖佳俊 普通用户 6天前
    0 引用 435
    感谢分享 
  • 87零 普通用户 6天前
    0 引用 434
    感谢
  • 明☀ 普通用户 6天前
    0 引用 433
    谢谢
  • findertj 普通用户 6天前
    0 引用 432
    感谢分享
  • zsq5567 普通用户 8天前
    0 引用 431
    感谢楼主分享好东西
  • 1074885893 普通用户 9天前
    0 引用 430
    感谢分享
  • 陈大麦 普通用户 11天前
    0 引用 429
    6666
  • 古川酱酱 普通用户 11天前
    0 引用 428
    感谢分享
  • haiou_1593585518 普通用户 11天前
    0 引用 427
    感谢
  • suwec2020 普通用户 11天前
    0 引用 426
    非常实用,感谢分享
  • 小龙_1593482730 普通用户 13天前
    0 引用 425
    谢谢谢
  • As_1592357882 普通用户 13天前
    0 引用 424

    感谢

  • qwer334 普通用户 13天前
    0 引用 423
    感谢分享
  • 美男子 普通用户 14天前
    0 引用 422
    有没有状态栏
  • echo6543 普通用户 15天前
    0 引用 421
    感谢感谢
  • cfang 普通用户 15天前
    0 引用 420
    想看看
  • 普通用户 15天前
    0 引用 419
    真不错,感谢
  • Mr._1593246742 普通用户 15天前
    0 引用 418
    感谢分享
  • ²º²º王星 普通用户 15天前
    0 引用 417
    大佬真厉害!!非常感谢
  • 路明非 普通用户 16天前
    0 引用 416
    我爱你
  • 开坦克的Pikachuu 普通用户 19天前
    0 引用 415
    感谢楼主分享
  • tony_long 普通用户 19天前
    0 引用 414
    感谢楼主分享好东西,谢谢!
  • 沫沫201822021508 普通用户 19天前
    0 引用 413
    谢谢分享
  • 绚华 普通用户 19天前
    0 引用 412
    感谢分享
  • microwood 普通用户 20天前
    0 引用 411
    谢谢分享
  • bryanlin 普通用户 20天前
    0 引用 410
    感谢
  • 泥泥 普通用户 20天前
    0 引用 409
    谢谢
  • 安风 普通用户 20天前
    0 引用 408
    6
  • 银古 普通用户 20天前
    0 引用 407
    感谢分享
  • 八百 普通用户 21天前
    0 引用 406
    感谢分享
  • azerpym1 普通用户 23天前
    0 引用 405
    感谢楼主分享好东西
  • 普通用户 23天前
    0 引用 404
    超級需要 謝謝
  • 李拾柒- 普通用户 26天前
    0 引用 403
    感谢分享
  • 浮欢 普通用户 26天前
    0 引用 402
    大佬真厉害!!非常感谢
  • 古川酱酱 普通用户 26天前
    0 引用 401
    感谢
  • jshajs 普通用户 26天前
    0 引用 400
    666
  • zhenglijie 普通用户 27天前
    0 引用 399
    感谢
  • 颜志恒 普通用户 27天前
    0 引用 398
    感谢分享!
  • 陈喵喵 普通用户 1月前
    0 引用 397
    感谢提供
  • gezhe 普通用户 1月前
    0 引用 396
    11
  • idkarry 普通用户 1月前
    0 引用 395
    有心了
  • lancelph 普通用户 1月前
    0 引用 394
    棒哦
  • 大福 普通用户 1月前
    0 引用 393
    谢谢大佬
  • relly 普通用户 1月前
    0 引用 392
    试试看
  • zbcloading 普通用户 1月前
    0 引用 391
    3q
  • lin_1591429025 普通用户 1月前
    0 引用 390
    谢谢
  • 了了安之 普通用户 1月前
    0 引用 389
    谢谢
  • 18680734145 普通用户 1月前
    0 引用 388
    感谢
  • Dr.Fish 普通用户 1月前
    0 引用 387
    感谢分享~~
  • Antu 普通用户 1月前
    0 引用 386
    感谢分享
  • 大口吃肉 普通用户 1月前
    0 引用 385
    感谢
  • 银古 普通用户 1月前
    0 引用 384
    感谢分享
  • Asterris 普通用户 1月前
    0 引用 383
    感谢
  • Gogo11 普通用户 1月前
    0 引用 382
    感谢
  • 陈同学 普通用户 1月前
    0 引用 381
    非常感谢分享
  • huangni 普通用户 1月前
    0 引用 380
    感谢分享
  • 南哥 普通用户 1月前
    0 引用 379
    感谢分享
  • pauline2012 普通用户 1月前
    0 引用 378
    非常感谢
  • 禾小禾 普通用户 1月前
    0 引用 377
    感谢分享!非常实用!
  • sisi999 普通用户 1月前
    0 引用 376
    好东西,感谢
  • ingram 普通用户 1月前
    0 引用 375
    感谢分享
  • 小A_1581511491 普通用户 1月前
    0 引用 374
    感谢楼主
  • 鄒宇航.F 普通用户 1月前
    0 引用 373
    好棒谢谢
  • Zed7676777 普通用户 1月前
    0 引用 372
    多谢大佬分享
  • 张明建 普通用户 1月前
    0 引用 371
    谢谢!
  • Allen_1591282039 普通用户 1月前
    0 引用 370

    感谢分享

  • tgb12s 普通用户 1月前
    0 引用 369
    donny你真牛
  • 家长 普通用户 1月前
    0 引用 368
    感谢分享~
  • 暖暖_1591257452 普通用户 1月前
    0 引用 367
    感谢
  • #29 普通用户 1月前
    0 引用 366
    感谢分享!非常实用!
  • 竖锯先生 普通用户 1月前
    0 引用 365
    感谢分享
  • hjp 普通用户 1月前
    0 引用 364
    谢谢 
  • 惠惠  普通用户 1月前
    0 引用 363
    非常感谢!
  • sherry_8023 普通用户 1月前
    0 引用 362
    感谢分享
  • 仁剑震音扬 普通用户 1月前
    0 引用 361
    感谢
  • Victor Guo 普通用户 1月前
    0 引用 360

    感谢分享。。。

  • 粉粉 普通用户 1月前
    0 引用 359
    感谢分享
  • 费费 普通用户 1月前
    0 引用 358
    谢谢
  • PrMoir 普通用户 1月前
    0 引用 357
    感谢分享
  • 一只很酷的 普通用户 1月前
    0 引用 356
    谢谢
  • 徐先森 普通用户 1月前
    0 引用 355
    感谢分享
  • Lily_1578022126 普通用户 1月前
    0 引用 354
    1
  • Peter_Pan 普通用户 1月前
    0 引用 353
    谢谢
  • diaoyuan 普通用户 1月前
    0 引用 352
    感谢感谢
  • 阿维 普通用户 1月前
    0 引用 351
    感谢分享
  • 一指流沙 普通用户 1月前
    0 引用 350
    不过,谢谢分享,希望继续
返回
axure商城