美文网首页产品经理
Axure学习之解锁一个披着图片皮囊的文本

Axure学习之解锁一个披着图片皮囊的文本

作者: 小阿拉 | 来源:发表于2019-07-15 20:36 被阅读7次

    从今天起,阿拉正式在开展新产品规划中慢慢get 画Axure原型图的技能了。作为一个画原型的小白,看看阿拉陆续都遇到了些什么问题。

    同组里的有着丰富产品经验的产品经理小姐姐把她搭的原型框架发给我后(嗯?Surprise!居然画个原型也要搭框架??),我开心地打开小姐姐的原型文件,感觉有点不对劲。


    小姐姐电脑里的原型图 我的为什么口口口?

    第一反应是我没有这些口口口的图片元件库导致的,但总觉得没那么简单。截图给小姐姐后,她给我发了一个命名大致为FontAwesome 元件库(文章最后提供)。


    导入元件库
    导入成功

    满心期待导入FontAwesome 元件库后,发现口口口的图片还是非正常显示。小姐姐沉默了几分钟,给我又扔来了一个压缩包文件(文章最后提供),让我解压安装,这波操作后,图片正常显示了。


    解压打开fonts文件夹
    双击打开FontAwesome.otf字体
    闭眼就是点击安装
    最后来科普一下FontAwesome相关知识。FontAwesome 本质是一个文本,但是它是披着图片皮囊的文本。什么意思呢?
    举个例子,用搜狗输入法打“可爱”二字,可以看到6和7两个表情图片,但实质上它和1-5都一样是文本。(这个例子会不会很牵强、不形象......相信你们都能明白我的意思!囧,不然请你们忘记这个例子!)
    n(*≧▽≦*)n 不是图片!通通都是可以变色变大小的文本!
    看看,我是FontAwsome字体,傲娇
    我变变变

    这样的好处之一是有了这种披着图片皮囊的文本,当原型图整体风格颜色替换的时候,我们就可以自力更生,坚决不给美工大佬们添麻烦改色了(绝对不是因为自己不懂P图又叫不动美工)。第二个好处是,既然图片也是文本,那么它肯定也是可以跟文字放同一个文本框里啦!You see see,深蓝色底被选中的是一个文本框,里面有两个“图标”和一个“企业管理”词儿。


    想不到吧!一个文本框

    好啦,今天的文章就写到这了。

    参考:
    (一)FontAwesome元件库
    链接:https://pan.baidu.com/s/1m79Hu4r9QXnHGocCaCcoXQ
    提取码:9a1w
    (二)FontAwesome字体安装压缩包
    链接:https://pan.baidu.com/s/1ve9fGX7I5M2tjZ2bkBNaRw
    提取码:527m
    (三)https://www.axure.com.cn/3284/

    相关文章

      网友评论

        本文标题:Axure学习之解锁一个披着图片皮囊的文本

        本文链接:https://www.haomeiwen.com/subject/uaeokctx.html