学习UI设计笔记(一)

本文仅作为个人学习记录使用,也欢迎在许可协议范围内转载或使用,请尊重版权并且保留原文链接,谢谢您的理解合作。如果您觉得本站对您能有帮助,您可以使用RSS方式订阅本站,这样您将能在第一时间获取本站信息.

开篇扯淡

那啥, 我知道NSDate的坑没有搞定。缓缓,缓缓。我在开个新坑来着。恩恩这个坑就是记录一下怎么学习Sketch 这个软件的。

首先,我买了本更优秀的APP-31个APP用户界面设计经典案例。 高手勿喷,这种图文并茂,手把手的交比较适合我这种菜鸟。

这本书的唯一好处是他的例子是Ai的。而Sketch也是矢量图。所以我以为会有些类似的操作。(其实根本是两个软件啊!!!!)

然后我准备把他说的31个例子都用Sketch来模仿一边。恩,先把Sketch的大部分功能运用熟练再说(就是花了小几百不想让他吃灰而已)

Sketch资料

官网

Sketch的资料其实并不是很多,原因之一是能熟练使用Adobe一套的大家(除了我)都能很快的入手。所以像我这样完全没有用过Photoshop的人在贵圈是一种奇葩。

所以中文资料就特别特别不多,不多的意思是图灵社区的某个大神把操作手册翻译了一下

Sketch中文手册

在没有发布的时候我就知道了,我满怀憧憬的等待这本书的上线。结果,嗯嗯很不错的一本使用手册。

洋文资料最多的就是MengTo大神的

大神blog

而且大神最近在预发售一本design+code。现在购买打5折哦。(免费为大神打个广告)

官方视频都在Vimeo上自带神器

iOS Design using Sketch. Part one: iOS Navigation Bar

iOS Design using Sketch. Part two: iOS Toolbar

对了,据可靠小道消息,这货的3.0要发布了。又是一次交钱的时刻。穷死了。

Github地址

咱程序员就要有程序员的范,每次的Sketch我都会丢到这个地址上,如果需要下源文件研究一下的同学知道去哪里找了把。

learn-ui-design

鉴于最近的网络情况,自带神器。

大幅大幅的贴图

0

0

恩,按照教程,我手绘了一张图片,然后用手机拍照了放到Sketch里面。

1

1

拖了一个椭圆,然后选中铅笔工具,描绘了一下那个小尾巴。

2

2

选中他们两个,进行Union操作。

3

3

拖一个正方形出来

4

4

正方形旋转45度

5

5

在正方形上双击会出现可以编辑的关键点

6

6

删除掉最右边的关键点,变成一个三角形

7

7

把气泡弄出来看一下整体效果

8

8

随便上个颜色试试

9

9

最终版本,我尽力了。

总结

恩,2014年的一个要努力的目标就是把自己的品味搞上去。恩呢,加油。

Author

Ewan Xiao

Posted on

March 25th 2014

Updated on

September 28th 2023

Licensed under

Comments