Will's Blog

Posted on Edited on

Sketch 进阶与技巧

一：App 设计标准

  1. Point (PT)
  • Point (PT) - 表示独立于设备的
    像素点 (在 Android 上叫 DP)
  1. Point (PT)和像素的关系
  • 像素点: 相同 Point 的按钮, 在 Retina 屏幕上的图片像素是非Retina屏幕的两倍
  • 通过 @2x 后缀标识

  1. iPhone 分辨率的终极指南

  2. iOS App 设计尺寸标准

Posted on Edited on

Sketch 界面设计入门和实战

极客学院的视频教程，地址点我。总体上算是入门了，有待熟练要多做几个练习。

一：Sketch 概述

Sketch 的优点

  • 1.矢量
  • 2.文件小
  • 3.画布无限大
  • 4.每个图层都支持多种填充模式
  • 5.Symbol 和 Style
  • 6.强大的文件导出工具
  • 7.自动保留所有历史版本

Sketch 的弱点

  • 位图处理能力弱

二：Sketch 界面功能布局

  • 1.软件布局
  • 2.画布
  • 3.检查器
  • 4.图形列表

三：Sketch 基础工具-图层

  • 1.添加图层

  • Shift 和 Option 的使用

  • 2.选择图层

  • 同时选择多个图层

  • 重叠图层

  • 3.移动图层

    • Shift、Alt、Cmd+D
    • 隐藏图层

  • 4.改变大小

    • Cmd+方向键
    • Cmd+Shift+方向键

  • 5.锁定图层

四：Sketch 基础工具-图形

  • 1.基本图形

  • 2.图形编辑

  • 点的控制手柄

  • 矢量工具

  • 封闭路径 VS 开发路径

  • Shift

    • 选中多个点

  • 添加锚点

  • 3.布尔运算

  • 4.变形工具

  • 5.蒙版

    • 限制蒙版
    • 图形蒙版
    • ALPHA 蒙版

  • 6.剪刀工具

  • 7.复制旋转

五：Sketch 基础工具-文本

  • 1.添加文本

  • 2.文本检查器

  • Text Style

  • 3.文本转换问轮廓

  • 渐变效果

  • 4.文本字体的技巧

  • Fonts：找了半天，原来

六：Sketch 基础工具-图片

  • 1.位图编辑

  • 高斯模糊

  • Color Adjust

  • 反选

  • 剪裁

  • 填充

  • 2.九宫格

七：App 登陆界面制作完整步骤

Imgur

Posted on Edited on

尚有一个 BUG，真机无法加载图片，模拟器可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
//
//  ViewController.m
//  Photo DEMO
//
//  Created by Will on 5/24/15.
//  Copyright (c) 2015 gewill.org. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UILabel *topLabel;
@property (weak, nonatomic) IBOutlet UILabel *descLabel;
@property (weak, nonatomic) IBOutlet UIButton *leftBtn;
@property (weak, nonatomic) IBOutlet UIButton *rightBtn;
@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@property (nonatomic, assign) int  index;
@property (nonatomic, strong) NSArray *imageDicts;

@end

@implementation ViewController

- (NSArray *)imageDicts{
    if (!_imageDicts) {
        _imageDicts = [NSArray arrayWithContentsOfFile:
        [[NSBundle mainBundle] pathForResource:@"imageDate.plist" ofType:nil]];
    }
    return _imageDicts;
}

- (IBAction)clickLeftBtn:(UIButton *)sender {
    self.index --;
    [self clickBtn];
}
- (IBAction)clickRightBtn:(UIButton *)sender {
    self.index ++;
    [self clickBtn];
}

- (void)clickBtn{
    self.topLabel.text = [NSString stringWithFormat:@"%d/%d", self.index+1, self.imageDicts.count];
    self.descLabel.text = self.imageDicts[self.index][@"description"];
    self.imageView.image = [UIImage imageNamed:self.imageDicts[self.index][@"name"]];
    
    self.leftBtn.enabled = (self.index != 0);
    self.rightBtn.enabled = (self.index != 4);
    
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

Posted on Edited on

重新使用番茄学习法，Flat Tomato 设计非常简洁优雅。

使用计时器感觉时间过得飞快，也是平日里浪费时间习惯了。一晃一下午就过去了，什么都没做，就听歌看新闻了，关键是没有总结和互动，往往一个耳朵进一个耳朵出。

希望以后能够珍惜时间，做正确的事。

Imgur

Posted on Edited on

极客学院充值月度 VIP，学习 iOS 视频，感觉他们的知识体系图和实战路径图很不错，按照一个大纲去学习的。

今天按照视频指导：制作汤姆猫小游戏，完成以下 DEMO。

其中发现我写代码中遇到很多小问题，google 就有答案的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
//
//  ViewController.m
//  Tomcat Game DEMO
//
//  Created by Will on 5/24/15.
//  Copyright (c) 2015 gewill.org. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *tomImageView;

@end

@implementation ViewController



- (IBAction)touchHeadOnHead:(UIButton *)sender {
    [self tomAnimateWith:@"knockout" imageCount:81];
    
    
}
- (IBAction)touchEat:(UIButton *)sender {
    [self tomAnimateWith:@"eat" imageCount:40];
}
- (IBAction)touchPie:(UIButton *)sender {
    [self tomAnimateWith:@"pie" imageCount:24];
}
- (IBAction)touchScratch:(UIButton *)sender {
    [self tomAnimateWith:@"scratch" imageCount:56];
}
- (IBAction)TouchDrink:(UIButton *)sender {
    [self tomAnimateWith:@"drink" imageCount:81];
}
- (IBAction)touchCymbal:(UIButton *)sender {
    [self tomAnimateWith:@"symbal" imageCount:13];
}
- (IBAction)touchStomach:(UIButton *)sender {
    [self tomAnimateWith:@"stomach" imageCount:34];
    
}
- (IBAction)touchFootLeft:(UIButton *)sender {
    [self tomAnimateWith:@"footLeft" imageCount:30];
}
- (IBAction)touchFootRight:(UIButton *)sender {
    [self tomAnimateWith:@"footRight" imageCount:30];
}
- (IBAction)touchAngry:(UIButton *)sender {
    [self tomAnimateWith:@"angry" imageCount:26];
}

#pragma mark - 动画执行方法
- (void)tomAnimateWith:(NSString *)fileName imageCount:(NSInteger)imageCount{
    // 0. 判断是否正在执行动画
    if (self.tomImageView.isAnimating) {
        return;
    }
    
    // 1. 创建图片数组
    NSMutableArray *tomImages = [NSMutableArray array];
    
    for (int i = 0; i < imageCount; i++) {
        NSString *imageName = [NSString stringWithFormat:@"%@_%02d.jpg", fileName, i];
        NSString *path =[[NSBundle mainBundle] pathForResource:imageName ofType:nil];
        UIImage *image = [UIImage imageWithContentsOfFile:path];
        [tomImages addObject:image ];
    }
   
    // 2. 设置动画过程
    [self.tomImageView setAnimationImages:tomImages];
    [self.tomImageView setAnimationDuration:self.tomImageView.animationImages.count * 0.1];
    [self.tomImageView setAnimationRepeatCount:1];
    [self.tomImageView startAnimating];
    
}



- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

Posted on Edited on

一个简单地计算器，可以加减乘除，除法还有问题，待解决。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
//
//  ViewController.swift
//  Simple Calculator
//
//  Created by Will on 5/24/15.
//  Copyright (c) 2015 gewill.org. All rights reserved.
//

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var text1: UITextField!
    
    
    @IBOutlet weak var text2: UITextField!
    @IBOutlet weak var result: UITextField!
    
    @IBAction func BeZero(sender: AnyObject) {
        self.result.text = "0"
        self.text1.text = " "
        self.text2.text = " "
        
    }
    @IBAction func plus(sender: AnyObject) {
        // 三目运算符简洁，但是没有 if 逻辑清晰。
        var num1 = self.text1.text.isEmpty ? 0 : self.text1.text.toInt()
        var num2 = self.text2.text.isEmpty ? 0 : self.text2.text.toInt()
        
        
        var resultNum:Double = Double(num1!) + Double(num2!)
        println(resultNum)
        
        self.result.text = "\(resultNum)"
        
        self.text1.resignFirstResponder()
        self.text2.resignFirstResponder()
        
        
    }
    @IBAction func minus(sender: AnyObject) {
        // 三目运算符简洁，但是没有 if 逻辑清晰。
        var num1 = self.text1.text.isEmpty ? 0 : self.text1.text.toInt()
        var num2 = self.text2.text.isEmpty ? 0 : self.text2.text.toInt()
        
        
        var resultNum = num1! - num2!
        
        self.result.text = "\(resultNum)"
        
        self.text1.resignFirstResponder()
        self.text2.resignFirstResponder()
        
    }
    @IBAction func multiply(sender: AnyObject) {
        // 三目运算符简洁，但是没有 if 逻辑清晰。
        var num1 = self.text1.text.isEmpty ? 0 : self.text1.text.toInt()
        var num2 = self.text2.text.isEmpty ? 0 : self.text2.text.toInt()
        
        
        var resultNum = num1! * num2!
        
        self.result.text = "\(resultNum)"
        
        self.text1.resignFirstResponder()
        self.text2.resignFirstResponder()
        
    }
    @IBAction func division(sender: AnyObject) {
        // 三目运算符简洁，但是没有 if 逻辑清晰。
        var num1 = self.text1.text.isEmpty ? 0 : self.text1.text.toInt()
        var num2 = self.text2.text.isEmpty ? 0 : self.text2.text.toInt()
        
        
        var resultNum = num1! / num2!
        
        self.result.text = "\(resultNum)"
        
        self.text1.resignFirstResponder()
        self.text2.resignFirstResponder()
        
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    
}



Imgur
Imgur

Posted on Edited on

如何成为一名优秀的设计师：罗子雄
@TEDx Chongqing

##入门

##提高

  • 看 v2.0

  • 做 v2.0：模仿、参赛

    • 借鉴
    • 改进
    • 组合

  • 想 v2.0

虽然目录已经整理很好，但是为了多说话，我就讲讲的感受。 最近接触 iOS 开发需要做 logo 和 UI 设计，才开始接触设计方面，发现是一门创造美的过程。罗子雄说的方法很平白，也易于操作。但于我这般没有自律和执行力的人，报班学习最好，定闹钟次之，

Posted on Edited on

自动打开我的网站 gewill.org 的 app。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//
//  ViewController.swift
//  Open gewill.org
//
//  Created by Will on 5/21/15.
//  Copyright (c) 2015 gewill.org. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        UIApplication.sharedApplication().openURL(NSURL(string: "http://gewill.org")!)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}


Posted on Edited on
0%