小摩·文章36

怎样使用原型设计中的组件样式功能

237人已阅

怎样使用原型设计中的组件样式功能

小摩·文章36·粉丝5 +关注

“样式”是一个集中管理你整个项目的页面和部件的外观和感受的解决方案。可以把它理解为微软Office Word中的样式,或修饰HTML的CSS样式。

当更新项目的视觉设计时,使用样式可以节省你很多时间。他们还可以帮助标准化或统一化多个团队成员对项目文档的编辑风格。一致的风格也可以帮助定义和加强你的品牌的外观和感受,增加线框图和原型的专业性。

何时会使用到样式呢?这几种情况下样式可以派上用场。

•大型项目:当你有一个大项目并且可交付物需要有一致的外观和感受时。

•多人协作:当你和团队其他成员协作,并需要保持每个人的编辑风格保持一致的时候。

•长期项目:当你计划在整个项目周期长期维护和更新你的文档时,样式可以帮你节省很多时间。

也有一些时候你不需要考虑使用样式,比如当你在做一个快速的原型时,你知道这个原型的寿命不长。但对于要使用一段时间的项目文档,最好尽早使用样式。你会很快知道这么做的好处,并且不需要在项目变得庞大时再去费力更新里面的内容。

这样看来,可以说样式是很重要的功能,能大大地帮助我们提高原型制作的效率。作为当今两大网红原型工具,Axure和Mockplus都支持样式功能。那么下面就来讲讲Axure和Mockplus组件样式功能上的具体用法:

Axure

在应用界面左上方点击“project”(项目),在下拉菜单中选择“widget style editor”(元件样式编辑器),即可弹出样式编辑器。


或者在界面右侧“Inspector”(监视器)下“STYLE”(样式)处点击“Manage Widget Styles”(管理原件样式),即可弹出样式编辑器。


在样式编辑器上端可以"add"(添加样式)、“duplicate”(复制样式)、“delete”(删除样式)、“move widget up/down”(上下移动样式)。左侧为样式清单,右侧为选中的样式的属性,在右侧即可编辑样式。这样能清楚地以文字形式展现样式库、罗列样式,易于管理;但是看不到样式具体的样子,改起属性来比较抽象。


样式的属性显示在界面上端第三栏和界面右侧“Inspector”(监视器)下“STYLE”(样式)处。


Mockplus

Mockplus中样式功能展示在应用界面的右上方。

保存样式:选中组件,设置好该组件的外观后,点击图中的加号,即可把组件当前的外观属性保存起来。


应用样式:应用时,选中某个类型的组件后,右侧即会加载该类型组件的样式,点击对应的样式,即可把该样式设置到选中的组件上;


还可以同时选中多个同类型的组件进行样式设置。但部分简单的组件是不支持样式的,如静态分类下的组件。


删除样式:删除时,只需要把鼠标移动到该样式上,就会显示一个红色的删除按钮,点击即可删除;需要注意的是:只能删除自己添加的样式。


添加样式库:需要输入样式库名称及描述;名称会显示到下拉框的位置;描述用于对库进行一个简短说明,在管理样式库的时候可以看到。


管理样式库:名称前的圆点表示库的同步状态;右侧按钮,分别表示:编辑样式库信息、同步该样式库、分享样式库、删除样式库;列表各项其它信息为:作者、分享人数、备注。


分享样式库:可以添加或删除分享成员,成员来源为企业内部添加的成员账号。企业版的成员用户还可以编辑共享的组件样式。




打赏后可加作者微信进行下一步沟通
0人已打赏
0 0
237人已阅读

微信扫一扫

关注该公众账号

全部评价:0

相关文章推荐

  • SCARP-视觉设计师应该拥有的体验思维——收藏夹升级阶段性思考心得

    面对纯工具型产品时,作为一名视觉设计师很容易陷入两种境地——脱离产品、用户本身做天马行空的视觉设计进入一种自我陶醉的状态,从而产出过于形式化不符合工具类产品特征的设计;或从产品中难以寻找到视觉价值以至于郁郁寡欢,犹如置身于悬崖边,找不到突破方向。这时就需要设计师积极转型,更深层次的理解自己设计的产品,拥有全面的体验思维。从功能与形式中寻找到一个合适的域值,并通过不同角色间的深入交流,从中提炼设计方法,不断成长; 我从收藏夹的两次迭代升级项目中,更清晰的认识到作为产品设计师拥有全面体验思维的重要性,从一名“修饰化妆师”逐步拥有了“基因改造者”思维。接下来本文将从以上五个方面分享“SCARP”模型在收藏夹中的运用。1、SPLIT——“拆”分业务形态,清晰认知业务 作为一名视觉,在刚拿到需求的时候很容易马上进入“战斗“状态,迫不及待的着手设计;然而,当面临的是一个纯产品页面时,最先需要更多
  • 如何用视觉表现建立信息层级

    作为视觉设计师,我们的作用除了最基本的满足用户审美需求,还会有品牌传达,信息传达,功能传达等,其中想要信息有效的传达给用户,需要我们建立信息层级,而不是一股脑的丢给用户自己理解,要做到这点有哪些视觉方法,这些方法的背后是否有理论更多
    设计小讲堂 · 2年前 ·
    206人已阅读
  • 2016年网页设计趋势分析,抓准方向,让设计更高效

    ▧可用性设计▧2016年,设计的大方向将继续向着用户倾斜。用户体验在整个设计中的权重将继续加大。如果你的设计在可用性上不足的话,再炫酷也不会有人问津。如果不能专注地做好用户体验设计,在即将到来的2016年,你是无法持久地吸引用户的。无论是谷更多
    设计小讲堂 · 2年前 · icon设计
    206人已阅读