Design+Code 学习总结——Sketch技巧和排版

也用sketch有一段时间,再看Meng To(Dribbble, Blog) 的 Design+Code,仍会有很多收获。今天总结一下 Learn Sketch 3 这一部分还有设计的技巧。

Sketch Tricks

这一部分,首先讲述了Sketch 3中更新的几个部分,其实大家也都很熟悉了,毕竟3也出来有段时间。这里还是说一下:

  • Symbols,Text Styles真的很棒,可以提高工作效率,在保持界面元素一致性方面有很大帮助。
  • Quick Export to Multiple Resolutions 确实方便很多,可以同时导出0.5x,1x,2x,3x的图。
  • iOS 7 UI Kit,还自带这些模版。

一下是其他一些我从书中新掌握的方法:

  • Alt Tab Focusing:如果选择了一个元素,按住Alt + Tab,光标就会停留在第一个参数上,再按一下跳到第二个。方便修改参数而不用腾出手去点击鼠标或者触控板。
  • Flatten to Bitmap:有时候使用blur之类的会渲染的很慢,但是把图层转化成bitmap之后后好很多。
  • Vectorize Stroke:Layer - Paths - Vectorize Stroke。将轮廓转化为形状进行编辑。
  • Text on Path:Type - Text to Path。

以下是一些作者的经验:

  • Using the Layout Guides:优点是使设计有一致性,继承了标准;缺点是结构太过严谨。所以用或是不用看自己了,设计瞬息万变,自己看起来好就行。
  • Round your numbers:把位置高度宽度等等都弄整,方便记忆和应用。

Design Tips

在app界面的设计当中,一定要让文本具有更好的可读性。

  • 标题在50-100px之间;H2在30-50px之间;征文在26-40px之间。我之前设计的一个appconcept就没有弄的太好,看了书之后回去改了下,舒服很多。
  • Animations,Sounds and Gestures:其实这两点也是很重要的。我们不仅会去感受一款app的视觉效果,更重要的是使用时候的感受。有很好的反馈就会增加好感。推荐两个找好的声音的网站:OctaveFreesound
  • Design for touch:按钮在retina中要在60-120px,最佳高度是88px。有内部链接文本的button最好也是60px,这样才更舒服的点击。
  • Readability:在Retina中,字号最小是22px,最佳的阅读字号是32px,行高是120-140%。
  • Typography:24-36px时候用Regular;36-48px用Light;48-64px用Thin,64+用Ultra Thin。每行45-90个字符最佳。无衬线的字体最好。好的排版文章点这里

这里吗学习到的技巧我都在陆陆续续尝试去使用或者是从意识上开始留意了。感觉帮助很大。书的后两部分讲的是用swift来把app做出来,很有兴趣,会继续拜读。

2015-06-30 15:44123