打造高品质Axure组件库,就是这么简单!
本文介绍的关于如何打造高品质Axure组件的思路,希望能够给大家带来一些新的思路拓展和知识补给。
提高效率是节约时间成本的唯一途径,产品组件库地打造可以有效的帮助我们解决一部分问题。
为什么要建立组件库?
减少重复性工作,让产品整体风格更统一,提高原型效率。
组件概念由来已久,我们生活中的许多事物都应用了组件/模块的概念。如乐高积木的概念,基础小积木的多次组合,构建出完全不一样的整体。不管是产品、设计、开发,在我们的工作中,如果合理运用了“组件库”我们的工作将会事半功倍。
基础元件
最终组合
最终效果:http://www.uedart.com/demo.html
实施目标
那只针对产品而言,如何构建一套适合产品设计的组件库呢?本文通过web前端的组件打造的实际案例向各位介绍如何进行“组件库”的搭建。
我们起初都会有很多计划,立很多Flag,真正能做到的确是少之又少,如何保证自己的执行力,是我们收获成功的重要手段。
不妨将产品常用的项目管理职能运用到本次的组件制作中,推动本次Web端的组件构建。
具体实施
1. 组件结构打造——基础夯实
根据目标导向对6大模块进行结构,细分如下:
2. 组件框架构建——外壳确定
确定好细分结构内容后,可以开始着手制作组件的框架,用以展示组件方便查看与制作,我会根据以下几方面着重考虑 。
(1)适用性
浏览的适用性:支持笔记本1366*768、大屏1920*1080的显示屏浏览。
结构的适用性:此结构具有通用性,不仅满足本组件的展示,作为一个展示类的框架可以适用于很多场景,如:简单官网的展示、文章浏览的展示。如果大家需要构建自己的组件,也可以活用此框架来构建自己全新的组件库。
(2)便捷性
好的交互组件除了其内容,更主要的其易用便捷性,故此才有了此组件框架的构建,目的就是为了可以更加便捷的查看与查找,我按照大模块进行了频道切换,各自细节拆分的板块也能看进行快速的切换查看。
这样整体的交互切换就十分便捷,能够快速的找到对应的板块进行效果查看进行复制使用。为了更加方便的使用,后期迭代版本2.0正在考虑rplib的组件格式的整理输出,更加方便大家的使用。
(3)拓展性
除了能够适用于此六大模块内容的展示外,如有新的模块加入也能够很好的拓展其内容,我在框架里加入了模块这一频道,为的就是后期的迭代版本拥有更多的可能性,拓展一些常用的流程性组件,如:登入/注册、支付、设置、发布、列表流等常用组件流。
3. 组件设计规范——筋脉打通
确定好了组件框架,接下来就是内容的整合制作,在制作过程前可以优先确立设计的规范,这有助于我们统一各组件页面的风格,让整体组件更具品牌性。
(1)设计规范——色彩定调
定义色彩:确定主色、辅助色、点缀色、背景色。
字体颜色:深、中、浅。
如有需要还可以设定暗色模式的色彩风格,现在mac新系统的暗色模式十分流行,大家也可以尝试一下,我这边为了通用性,在设计颜色时就已经考虑到了暗色模式,字体颜色做了一些修改,主色、辅助色、点缀色可以兼容。
(2)设计规范——字体大小
在设计规范中,字体大小也是不能忽视的,大小的定义可以区分信息,让内容排版更有层级,提高组件整体的可阅读性。
(3)设计规范——元素定义
元素的定义,可能起初大家对这个不大明白,我这边简单描述下,所谓的元素即组件中的最小单元,很多组件大多是由这些最小单元组合而成的,一旦这些元素定义完成之后,后面的组件制作就相当容易。所以,在我们制作中,我们可以优先把这部分的元素制作完善细化,以方便后面复杂组件的组合。
4. 组件内容制作——肉体塑造
第1阶段:低保真组件内容制作
按照组件结构为指导,初期制作低保真组件,丰富每个模块的元件内容,这个阶段不需要过度重视动效与颜色。
第2阶段:确立组件规范
进行规划的确立,用于指导后期高保真组件优化的方向,有的同学会问:“什么时候进行规划确立最为合适?”
我的回答:
这要依据起初项目团队的成员,以及各个成员的特点而定。
如果本身制作低保真的成员本身就有一套比较完善的低保真制作流程,这个高保真的规范确立大可在低保真进行到一大半的时候确立,用于指导后期高保真优化的方向。
如果制作低保真的成员本身就很疑惑不知道如何下手保证统一性,这个规范可以在起初几个页面制作完毕时进行制定,指导低保真同学的设计制作。
本项目的团队属于第一种情况,本身OMINI.BASS的制作水平很高,这样我在后期的优化工作也减轻了不少负担,更多的是色调统一、小细节处理、动效优化、排版优化的工作
第3阶段:依据规划进行组件优化
既然已经制定了规划,所有的细节处理就必须按照既定的规范去实行,确保细节的统一,组件的品牌性。
本次高保真优化大家依然可以分几个步骤去实行(这样的分步处理方式可能是我做任何工作都喜欢采用的方式)把目标确立后,细化工作内容,拆分每个内容分配具体完成的时间,可以高效的预估完成任务的时长,这样也能够很顺利的推动项目进展。
- 第1轮优化:颜色、字体、大小基础定义规划的调整;
- 第2轮优化:交互细节优化处理;
- 第3轮优化:这个阶段我放在了排版的过程中。
第4阶段:按照排版进行组件内容的重排版
当高保真第2轮优化进行完毕后,我就可以我的排版整合工作,这个过程主要干两件事:查缺补漏、细节终审。
- 查验有没有落掉的组件以及计划初期定好的页面内容;
- 浏览一次所有的生成页面的跳转交互,确保细节的完整性。
内容梳理说明
1. 排版布局
我们在制作的过程中的流程是优先制作低保真,制作低保真的时候没有太过注重排版性,这是基于时间效率的考量,后期高保真优化过程必然是需要重新调整相关的细节尺寸,这时候再进行更改细分板块的内容排版更为合理,在时间效率上也不会造成时间的重复浪费。
本次排版主要是考虑到左右的阅读格式,左侧导航切换板块,右侧进行内容浏览。
2. 交互制作
(1)悬停交互
背景颜色变化的悬停效果:
字体颜色变化的悬停效果:
(2)弹窗交互
弹窗交互的动作统一,我的弹窗的交互参数基本保持一致,动画模式:逐渐 时间:300ms。
(3)加载动效
加载动效分为两类:一类背景层不受影响,这时候我们可以输出带背景的gif格式。
一类背景层受影响,这时候我们必须输出透明背景的gif格式。
展示效果
最终展示效果浏览查看网址:http://www.uedart.com/demo.html
打造高品质Axure组件库,就是这么简单!相关推荐
- pure android axure组件,Axure组件库
这是Axure组件库下载,最全的AXURE组件库,分类很多比较全面,包括各种AXURE组件,具体包括以下方面:菜单导航类.图标窗体类.按钮窗口类.日历及文本模板类.页面布局及控制条类.表格及手机类等. ...
- WeUI - 微信官方推出的免费开源 UI 组件库,上手简单,风格简约,在微信生态开发轻量项目的绝佳选择
微信早年发布的 UI 框架,对想要创建让微信用户感到熟悉的应用来说,是一个好选择. 关于 WeUI WeUI 一款由腾讯微信团队开发的 UI 组件库,是一套同微信原生视觉体验一致的基础样式库,由微信官 ...
- 前端可视化组件库-Apache ECharts简单介绍vue框架使用eCharts例子
eCharts是一个基于 JavaScript 的开源可视化图表库. 实现集成了前端可视化的多种手段. 官网链接:ECharts官网 初学者建议去官网看看起步的内容,另外博主也是今天刚学的噢,写得不好 ...
- elementUI 源码-打造自己的组件库,系列五:Scrollbar组件
先上车 来吧继续阅读组件源码,Scrollbar 滚动条组件安排上 不知道elementUI官方文档上为何没有这个组件,一起来看看这个被雪藏的组件吧 先说感受:对不起,是我肤浅了,滚动条组件又秀到我了 ...
- axure 组件_技巧分享 | Axure后台组件制作的全过程
点击上方蓝字,+关注行设视觉 黑马家族成员原创发布于行设视觉,转载请注明出处. 作者 | 时光若刻 http://www.woshipm.com/rp/2527010.html 大家好,前一段时间我刚 ...
- 可视化大屏原型图解决方案附axure可视化组件库
现在越来越多的数据展示方式采用了可视化大屏的策略,对数据项进行图表或者动态的展示.在没有产品原型的情况下,怎么制作一个简易的原型呢? 这里提供三种方式制作简易demo: 第一种:原生html+js实现 ...
- LuLu UI - 腾讯阅文集团出品的“半封装” 开源 Web UI 组件库,特点是面向设计、简单灵活、支持 Vue
阅文集团前端大神张鑫旭的团队出品的面向设计的前端 UI 组件库,上手简单,定制性强. 关于 LuLu UI LuLu UI 是一款面向桌面端和移动端网页开发的组件库,由阅文集团前端团队出品.阅文集团由 ...
- OnsenUI - 专为混合开发/手机 web 应用打造的开源移动端 UI 组件库
具有原生应用外观的组件库,性能表现也非常不错,适合用来开发 App,值得关注和学习使用. 关于 Onsen UI Onsen UI 是一套专为移动应用设计的丰富的 UI 组件库,使用前端开发者熟悉的j ...
- vue统计组件库和ui框架
element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 ...
- 尤大都推荐的组件库是如何开发出来的?
> 注意:为了让篇幅尽可能简洁一丢丢,在有些地方贴源码时,我尽可能贴最能反映要讲解内容的源码,其他重复性的代码就略去了,所以如果你自己尝试去阅读源码时,可能会发现和文章里的代码有出入.文章跑通 ...
最新文章
- 邮件内容会留在服务器吗,outlook的邮件最长可以保存多久,去
- 2. sed执行的流程
- 用route命令解决Wifi和网卡不能同时上内外网问题
- shanghai hongqiao railway station
- spring bean 基于xml的4中初始化方法
- [密码学基础][每个信息安全博士生应该知道的52件事][Bristol Cryptography][第34篇]描述攻击离散对数问题的baby-step/Giant-step方法
- 终于找到了:NuGet 修改包路径
- 静态网页托管_视频教程:如何在IPFS上托管网站!
- TCP/IP中的传输层协议TCP、UDP
- iceberg对接flinksql测试
- linqto 多个关键字模糊查询_查询函数Choose、Lookup、Hlookup、Vlookup应用技巧解读
- Python3.x中数据随机重排基本方法
- Python: PIL基本代码
- python数字图像处理(13):基本形态学滤波
- 用C语言写一个查单词的小demo
- 卡巴斯基提供升级包 解决病毒库升级
- 5.2 Photoshop复制图层的几种方式 [原创Ps教程]
- 《MATLAB语音信号分析与合成(第二版)》:第5章 带噪语音和预处理
- 很经典的十五句话,从别人的blog上看来的!
- loadrunner是什么