恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
「旧文-Sketch杂谈」搭建你的流程
0.0°
2016-04-15 原创文章 经验/观点 举报 3579 3 3 0

我在博客里曾写到过这几个观点:

1.学习软件,官方的教程或例子绝对是上路的第一步。

2.使用软件的几个层次:用功能,用好功能,效率地用好功能。

3.技巧是用以提高效率的,提高效率的前提是已经熟悉软件的操作。

接下来讲讲与sketch相关联的工作流程。


###学习sketch


同1理,最佳的上手途径必然是官网。来直接看看官网导航栏中的learning的内容。

- 文档

功能的说明文档,有国内翻译的中文版

- 视频教程

用视频讲述四个功能:像素级编辑、布尔运算、输出和蒙版。

- 课程

提供了6个课程,包括付费和非付费的:Udemy、design+code、treehouse和levelup等。

- 文章

再下方提供了5篇文章,分别关于贝塞尔曲线、iOS设计、原型设计、输出和插件。

- 下载

提供了4个文件预览和下载,预览功能同时也是sketch本身可以生成的本地网络预览功能。

你说不会英语,没有时间看视频,有没有那种3分钟看完的中文教程就能马上变得很厉害的方法,我只能呵呵。


###


就算是粗略看完了官方的教程,也能基本达到用功能的水平了。

接下来看一些各种技巧的文章就有意义了,比如快捷展开所有图层,插件的使用,这些都能提高自身的效率。

同时,保持良好的习惯,比如对文件和图层规范的编组。

在使用软件的过程中,总会出现某些情况,是所谓的基础和技巧无法解决的。比如symbol的问题。

Image title


假设卡片是一个symbol,但是每张卡片上的的红色字体各不相同,这种就是一个UI设计中常遇到的问题:怎么快速建立起这一堆卡片并且更改辅助信息(图中用红色文字突出)?这是一个很有趣的问题。

最快的方法是:建立好一张卡片的元素并编组card - 组转换symbol - grid(4*2)- 组去除symbol - 修改每组的辅助信息

这样的方法的一大缺点是在所有卡片完成以后,一旦需要修改卡片的共通内容时没有办法同时修改。在网络上查找及和其他人讨论过后对于这个问题均无完美的应对方法,毕竟这不是软件的问题。

比较好的解决方法是:建立一张卡片的共通元素并编组为CardContent - 组转换symbol - 建立辅助信息并和CardContent编组为Card组 - grid(4*2)- 修改每组的辅助信息

symbol的作用和Axure中的组件的作用相似,刚好找到一篇文章关于axure中这种情况的应对方法,大致与上述的一样。

从结果上看,两种方法最后形成的都是一样的效果,但是一但需要修改,就不是同样的工作量了。这就是工作经验。


###软件之外


软件间是会互相影响的,一个软件会影响到你选择另外的软件,并且必须要考虑到别人协作时的交流产物。使用sketch也一样,必须建立起以sketch为中心的工作流程。而幸好,sketch的插件,解决了不少其他软件的工作。以我的工作来说,常用的工具有:

xmind(理清需求和设计思路)

deskset、keynote(可用于会议中展示思路)

sketch(界面设计)/photoshop(mockup的生成,gif输出)

axure/floid/pixate/pricinple(简单的动画和页面的交互,其中一些能直接导入sketch文件)

c4d(MG动画和3D建模)


故就有了以下的工作流程:

界面相关:xmind -> sketch -> jpg 或 sketch -> measure/zeplin/marketch -> jpg/html

mockup:jpg/avi/mov -> photoshop -> jpg/gif(ps的智能对象实在太好用了)

单界面动画:sketch -> floid/pixate/pricinple -> avi/gif

多页面交互:Axure/pricinple -> html/实时演示/gif

其他动画:c4d -> avi


最后,强烈推荐medium上Marc Andrew的sketch入门的5篇文章(Angela K将其中的四篇翻译成了中文)。这是我看到的最好的sketch的入门文章。


4.14补充:炸炸炸!sketch 3.7的更新了symbol的功能,上面举例说到的问题完全灰飞烟灭。真是爆炸级产品。噢,对了,还有symbol的嵌套功能,也是炸。

更新:2016-04-15

收藏

3人已收藏

Bluepikachu

设计本身,就是一种反抗

  • 36

    作品

  • 66

    粉丝

  • 16

    关注

  • MasterGo 官网大赛作品
  • C4D试水
  • Dashboard练习「1p」
  • 登录页面「1p」
相关标签
设计分享经验

    猜你喜欢

      2016-04-15 原创文章 经验/观点 举报 3579 3 3 0

      「旧文-Sketch杂谈」搭建你的流程

      0.0°

      你确定要举报「旧文-Sketch杂谈」搭建你的流程

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年04月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      3
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录