Dribbbleで見つけたコンセプトデザインを実装/potatotips-56-concept-design

Transcript

1. Copyright © ZOZO Technologies, Inc. All Right Reserved. גࣜձࣾ;0;0ςΫϊϩδʔζ
   ։ൃ෦
   ͑ΜͲ͏

   %SJCCCMFͰݟ͚ͭͨ
   ίϯηϓτσβΠϯΛ࣮૷

2. Copyright © ZOZO Technologies, Inc. All Right Reserved. ίϯηϓτσβΠϯ ‣
   4NBSU
   IPNF
   DPOUSPM
   BQQ
   DPODFQU
   
   

   ‣
   4BN
   "UNPSF
   ,JXJ
   4BN
   
   ‣
   IUUQTESJCCCMFDPNTIPUT4NBSU IPNFDPOUSPMBQQDPODFQU

3. Copyright © ZOZO Technologies, Inc. All Right Reserved. Smart home

   control app concept by Sam Atmore (Kiwi Sam) https://dribbble.com/shots/5435750-Smart-home-control-app-concept ߏ੒ ‣εΫϩʔϧͱ߹Θͤͯͷ਺஋දࣔ
   ‣എܠ৭ͷάϥσʔγϣϯมԽ
   ‣೾໛༷ͷഎܠ

4. Copyright © ZOZO Technologies, Inc. All Right Reserved. Smart home

   control app concept by Sam Atmore (Kiwi Sam) https://dribbble.com/shots/5435750-Smart-home-control-app-concept ߏ੒ ‣εΫϩʔϧͱ߹Θͤͯͷ਺஋දࣔ
   ‣
   εΫϩʔϧ
   UPVDIFT.PWFE @XJUI
   ‣
   ਺஋
   6*$PMMFDUJPO7JFX
   ‣എܠ৭ͷάϥσʔγϣϯมԽ
   ‣
   άϥσʔγϣϯܭࢉ
   ‣೾໛༷ͷഎܠ
   ‣
   6*#F[JFS1BUI

5. Copyright © ZOZO Technologies, Inc. All Right Reserved. Smart home

   control app concept by Sam Atmore (Kiwi Sam) https://dribbble.com/shots/5435750-Smart-home-control-app-concept ߏ੒ ‣εΫϩʔϧͱ߹Θͤͯͷ਺஋දࣔ
   ‣
   εΫϩʔϧ
   UPVDIFT.PWFE @XJUI
   ‣
   ਺஋
   6*$PMMFDUJPO7JFX
   ‣എܠ৭ͷάϥσʔγϣϯมԽ
   ‣
   άϥσʔγϣϯܭࢉ
   ‣೾໛༷ͷഎܠ
   ‣
   6*#F[JFS1BUI

6. Copyright © ZOZO Technologies, Inc. All Right Reserved. άϥσʔγϣϯมԽ ‣
   ਺஋ʹ߹Θͤͯ੨͔Β੺ʹഎܠ৭Λม͑Δ

7. Copyright © ZOZO Technologies, Inc. All Right Reserved. Ͳ͏࣮૷͢Δ͔ʁ ‣
   εΫϩʔϧʹԠͯ͡ͷ਺஋ΛٻΊΔ
   

   ‣
   ਺஋Λ΋ͱʹઃఆ͢Δ৭Λܭࢉ͢Δ #4f8cf8 #da1428 ͜ͷ෦෼Λܭࢉ͢Δ

8. Copyright © ZOZO Technologies, Inc. All Right Reserved. άϥσʔγϣϯͷ৭Λܭࢉ͢Δ ‣
   ౳ൺܭࢉ
   

   ‣
   ҧ͏৭ʹมԽ͢Δࡍʹ༻͍Δܭࢉํ๏
   ‣
   ౳ࠩܭࢉ
   ‣
   ಉܥ৭ͰมԽΛग़͢ࡍʹ༻͍Δܭࢉํ๏

9. Copyright © ZOZO Technologies, Inc. All Right Reserved. άϥσʔγϣϯͷ৭Λܭࢉ͢Δ ‣
   ౳ൺܭࢉ
   

   ‣
   ҧ͏৭ʹมԽ͢Δࡍʹ༻͍Δܭࢉํ๏
   ‣
   ౳ࠩܭࢉ
   ‣
   ಉܥ৭ͰมԽΛग़͢ࡍʹ༻͍Δܭࢉํ๏

10. Copyright © ZOZO Technologies, Inc. All Right Reserved. ౳ൺܭࢉͷࣜ ։࢝৭ɿʮ33B

    
    ((B
    ##Bʯ
    ໨త৭ɿʮ33C
    ((C
    ##Cʯ
    9
    
    ਐ௙཰
    3 9
    
    3C
    
    3B
    
    9
    
    3B
    ( 9
    
    (C
    
    (B
    
    9
    
    (B
    # 9
    
    #C
    
    #B
    
    9
    
    #B
    ˞
    9
    
    d ੔਺

11. Copyright © ZOZO Technologies, Inc. All Right Reserved. ࣮૷ ‣
    ։࢝৭
    GDG
    

    ‣
    ໨త৭
    EB
    ‣
    ࠷େ਺஋
    
    ‣
    ݱࡏͷ਺஋
    εΫϩʔϧʹԠͯ͡มԽ͢Δ

12. Copyright © ZOZO Technologies, Inc. All Right Reserved. εΫϩʔϧʹԠͯ͡ͷ਺஋ var

    currentPointY: CGFloat = 0.0 // Ͳͷ͘Β͍εΫϩʔϧ͍ͯ͠Δ͔ͷҐஔ override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) { guard let touch = touches.first else { return } let diff = touch.previousLocation(in: view).y - touch.location(in: view).y currentPointY += diff let temperature = Int(currentPointY / (view.frame.height / CGFloat(max))) } ‣։࢝৭
    GDG
    ‣໨త৭
    EB
    ‣࠷େ਺஋
    

13. Copyright © ZOZO Technologies, Inc. All Right Reserved. άϥσʔγϣϯܭࢉ extension

    UIColor { var red: CGFloat { return cgColor.components?[0] ?? 0.0 } var green: CGFloat { return cgColor.components?[1] ?? 0.0 } var blue: CGFloat { return cgColor.components?[2] ?? 0.0 } } ‣։࢝৭
    GDG
    ‣໨త৭
    EB
    ‣࠷େ਺஋
    

14. Copyright © ZOZO Technologies, Inc. All Right Reserved. άϥσʔγϣϯܭࢉ let

    max = 60 let ratio = (temperature * 100 / max) let startColor = UIColor(red: 79/255, green: 140/255, blue: 248/255, alpha: 1.0) let endColor = UIColor(red: 218/255, green: 20/255, blue: 40/255, alpha: 1.0) // R(X) = (Rb - Ra) * X/100 + Ra let r = (endColor.red - startColor.red) * CGFloat(ratio) / 100 + startColor.red let g = (endColor.green - startColor.green) * CGFloat(ratio) / 100 + startColor.green let b = (endColor.blue - startColor.blue) * CGFloat(ratio) / 100 + startColor.blue view.backgroundColor = UIColor(red: r, green: g, blue: b, alpha: 1.0) ‣։࢝৭
    GDG
    ‣໨త৭
    EB
    ‣࠷େ਺஋
    

15. Copyright © ZOZO Technologies, Inc. All Right Reserved. var currentPointY:

    CGFloat = 0.0 override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) { guard let touch = touches.first else { return } let diff = touch.previousLocation(in: view).y - touch.location(in: view).y currentPointY += diff let max = 60 let temperature = Int(currentPointY / (view.frame.height / CGFloat(max))) let ratio = (temperature * 100 / max) let startColor = UIColor(red: 79/255, green: 140/255, blue: 248/255, alpha: 1.0) let endColor = UIColor(red: 218/255, green: 20/255, blue: 40/255, alpha: 1.0) // R(X) = (Rb - Ra) * X/100 + Ra let r = (endColor.red - startColor.red) * CGFloat(ratio) / 100 + startColor.red let g = (endColor.green - startColor.green) * CGFloat(ratio) / 100 + startColor.green let b = (endColor.blue - startColor.blue) * CGFloat(ratio) / 100 + startColor.blue view.backgroundColor = UIColor(red: r, green: g, blue: b, alpha: 1.0) }

16. Copyright © ZOZO Technologies, Inc. All Right Reserved. IUUQTHJUIVCDPN&OEPV.BSJ $PODFQU%FTJHO)PNF$POUSPM"QQ

17. Copyright © ZOZO Technologies, Inc. All Right Reserved. ͋Γ͕ͱ͏͍͟͝·ͨ͠