阅读 136

从零实现一个单词对战游戏 (三) 设计篇: UI设计应用安利

关于设计,笔者使用的软件为sketch(mac端),win10端可以在win10的应用商店搜索sketch,有类似的软件。本篇主要安利一下mac端sketch的一些插件,还有一些找素材的网站推荐。

具体sketch教程右转B站搜索,本篇跳过更香...

sketch相关

插件推荐

安装好sketch之后,使用sketch的一些插件,可以提高不少效率

  • Dapollo:一站式设计开发工作台,常用功能包含快速使用iconFont图标,部分小程序组件引入(支付宝小程序)
  • Kitchen:常用数据填充,比如填充头像数据、邮箱文本信息等
  • 蓝湖:设计完成后,使用蓝湖上传至Web,可以在线量距,下载切图等

常用快捷键

  • R:选择矩形绘制工具 (绘制的时候,按住shift可以绘制正方形)
  • O:选择(椭)圆形绘制工具 (绘制的时候,按住shift可以绘制圆形)
  • S:快速切图
  • 空格键:按住空格,拖拉画板
  • option:按住option拖拉一个控件,可以快速复制
  • Shift:按住Shift在画板可以多选控件
  • Command + R:重命名
  • Commmad + G:分组

其他

  • 小程序设计,画板宽度推荐750px
  • 切图如果去不了背景,需要在图片图层底部加一层矩形

更多推荐

素材相关

  • 阿里巴巴矢量图标库:www.iconfont.cn/,推荐在sketch中通过插件使用,切图后上传至蓝湖,一键下载切图,很香
  • 创客贴:www.chuangkit.com,在线做图(轮播图、logo、海报等)
  • 花瓣网:huaban.com/,找素材、找灵感等
  • 截图套壳:Snapmod,宣传直接发截图不如套个手机壳

单词天天斗设计图

本书是一个实战系列的分享,会持续更新、修正,感谢同学们来一起学习 ~

项目开源

由于本项目参加了大学的比赛,所以暂时不做开源,比赛结束在微信公众号:Join-FE进行开源(代码 + 设计图),关注不要错过哦 ~

公众号

同系列文章,可以到老包同学的掘金主页食用