###### tags: `前端設計工程師養成班`
# DD106 Web/APP前端設計工程師養成班

# wewbpack

- webpack 官網
https://www.webpackjs.com/concepts/

安裝套件

- github
https://github.com/sexfat/webpack_106

https://webpack.js.org/loaders/css-loader/

https://webpack.js.org/plugins/html-webpack-plugin/

 plugins: [
    //html 5 plugin
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]

打開瀏覽器

"open" :"webpack-dev-server --open"

- webpack 安裝

`npm i webpack webpack-cli -D`

- 指令
`npx webpack index.js`

# Git 安裝
https://git-scm.com/

# github 帳號註冊
https://github.com/

# Sourcetree 安裝
https://www.sourcetreeapp.com/

## 識別資料的建立
要登入遠端資料庫時，通常要有帳號密碼，所以要在本機端建立識別資料，以利遠端登入

git remote add origin https://github.com/sexfat/dd106test.git
git push -u origin master

# 分組名單

G1: 李昇翰, 柴道融, 樂憲均, 蘇韋竹, 張益豪, 林宛萱, 李杰奇


G2: 汪禹承, 林于暄, 張峯誠, 何京軒, 李凱鐘, 張紹逸, 林循安


G3: 廖奎舜, 陳玥妘, 施冠卉, 李昆峰, 曾立杰, 高健傑, 張彤心


# Scrollmagic

https://scrollmagic.io/

    <script src="node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js"></script>
    <script src="node_modules/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js"></script>
    <script src="node_modules/scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"></script>

https://scrollmagic.io/docs/index.html#usage

// 場景最上方
var controller = new ScrollMagic.Controller();

//左右場景
var controller = new ScrollMagic.Controller({vertical: false});


//動畫
let scroll =  TweenMax.to('.box_scoll' , 1,{


    x: 400
});



//觸發事件
new ScrollMagic.Scene({
     triggerElement : '#keypoint01',//觸發點
     triggerHook : 0.5, //觸發點位置 瀏覽器
     offset: 200, //觸發點位置  場景
     reverse: true, //返回
     duration :  300 //scroll 距離  平均分配動畫長度
   }).setTween(scroll).addIndicators().addTo(controller)

# 觸發 css 動畫

- html

 <section class="bg2">
            <div class="title animation_title">看不見我
            </div>
   
        </section>

- css

.bg2 {
    background-color: rgb(82, 73, 23);
    transition:  all 1s ease-in-out;
    .title {
        color: rgb(82, 73, 23);
        text-align: center;
        font-size: 80px;
        position: relative;
        top: 120px;
    }
    &.on{
        background-color: rgb(43, 5, 68);
    }
} 

- 場景二

let title_animation = TweenMax.fromTo('.animation_title', 1, {
    y: 0,
    opacity: 0
}, {
   y: 100 , 
   opacity: 1 
})


new ScrollMagic.Scene({
    triggerElement: '#keypoint02',
    triggerHook: 0.5,
}).setClassToggle('.bg2', 'on').setTween(title_animation).addIndicators().addTo(controller)

- 場景三

- html

 <div id="keypoint03"></div>
        <section class="bg3">
           <div class="box scrollstick_01"></div>
           <div class="box scrollstick_02"></div>
           <div class="box scrollstick_03"></div>
        </section>

- css

.box {
    background-color: rgba(255, 255, 0, 0.913);
    width: 100px;
    height: 50px;
}

.bg3 {
    background-color: rgb(133, 141, 255);
  .box {
      margin-bottom: 10px;
      width: 300px;
  }

- js

let stick = new TimelineMax();


stick.to('.scrollstick_01' , 1 , {
    x: 300
}).to('.scrollstick_02' , 1 , {
    x: 400
}).to('.scrollstick_03' ,1 , {
   x: 500});

   new ScrollMagic.Scene({
    triggerElement: '#keypoint03',
    triggerHook: 0,
    duration: '300%'
}).setPin('.bg3').setTween(stick).addIndicators().addTo(controller)  

## 滾動視差

- html

 <div id="keypoint04"></div>
        <section class="bg4">
            <div class="box boxpallax1"></div>
            <div class="box boxpallax2"></div>
            <div class="box boxpallax3"></div>
        </section>

- css

.bg4 {
    background-color: rgb(204, 164, 255);
    background-image: url(https://placem.at/people);
    background-size: cover;
    .box {
        margin-bottom: 10px;
        width: 300px;
    }
    .boxpallax1 {
        position: relative;
        top: 300px;
        left: 600px;
    }

    .boxpallax2 {
        position: relative;
        top:300px;
        left: 700px;
    }

    .boxpallax3 {
        position: relative;
        top: 200px;
        left: 800px;
    }



}

//滾動視差


var tlp = new TimelineMax();

var parallax01 = TweenMax.to('.boxpallax1' ,1, {
    y: '-10%',
});

var parallax02 = TweenMax.to('.boxpallax2' ,1, {
    y: '100%',
});

var parallax03 = TweenMax.to('.boxpallax3' ,1, {
    y: '-220%',
});


tlp.add([parallax01 , parallax02 , parallax03]);

new ScrollMagic.Scene({
    triggerElement: '#keypoint04',
    // triggerHook: 0,
    duration: '100%'
}).setTween(tlp).addIndicators().addTo(controller)   

# nodejs 安裝11.15.0

https://nodejs.org/download/release/v11.15.0/

node-v11.15.0-x64.msi
node-v11.15.0-x86.msi

# sass 安裝

https://sass-lang.com/install

## 動畫套件 gsap
https://greensock.com/docs/v2

## npm 安裝
`npm i gsap@2.1.3`

## ease
https://greensock.com/docs/v2/Easing

## 參數集介紹 option

//位移跟大小
    scaleX:1.5,
    x: 140,
    y: 0,
    boxShadow: "0px 0px 20px red",//陰影
    scale:2, //放大
    delay: 2,//延遲幾秒
    repeat: 3,//重複幾次
    repeatDelay: 2,//重複延遲時間
    yoyo: true,//動畫順序1-2-2-1
    alpha:0,//透明度
    autoAlpha: 0 //透明度
    ease: Power3.easeInOut//動畫效果

//旋轉要件
    rotationY: 360, //旋轉
    rotationX: 360 , //旋轉
    transformOrigin : 'right top' //定位點
//透明度
    autoAlpha: 0 //自動消失
//修改classname
//增加一組class
   className: "+=box10"
//覆蓋掉本來的class
   className: "box10"

## bezier 貝茲曲線路徑

TweenMax.to('.box04', 4, {
    bezier: {
        curviness: 1.25,
        values: [{
                x: 100,
                y: 300
            },
            {
                x: 400,
                y: 300
            },
            {
                x: 600,
                y: 100
            },
            {
                  x: 1000,
                  y: 300
            }
        ]}
})

### vscode setting

"liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css/"
        }
    ],

# sass

### 變數 $

$fontSize : 14px;
$color : hsl(0, 0%, 75%);
$fontFamily: 'arial' san-serif;


body {
    font-size: $fontSize;
    font-family: $fontFamily;
    padding: 266px;
    color: $color;
}

div {
    font-size: $fontSize; 
}

h1 {
   font-size: $fontSize * 5;
}

h2 {

      font-size: $fontSize *4;
}

### Nesting

.wrappers {
    width: 1200px;
    background-color: rgb(255, 189, 67);
    margin: 0 auto;
    h1 {
        font-size: $fontSize * 5;
        span {
            font-size: $fontSize;
            font-weight: 300; 
            display: block;
            position: relative;
            left: 5px;
        }
    }
}

### mixin

 @mixin margins() {   
    margin: 20px;
}

@mixin marginAuto(){
    .marginAuto {
       margin: 0 auto; 
    }
}

@mixin paddings() {
    padding: 20px;
}

.box-10 {
    @include margins();
    @include paddings();
}

.box-all {
    @include paddings();
}

@include marginAuto();

### mixin 帶值

> 注意 變數有分 區域變數 跟 全域變數

@mixin h1title($fontSize) {
    h1 {
        font-size: $fontSize * 5;
        span {
            font-size: $fontSize * 2;
        } 
    }
}



@mixin h2title($fontSize) {
    h2 {
        font-size: $fontSize * 5;
        span {
            font-size: $fontSize * 2;
        } 
    }
}

@include h1title(20px);
@include h2title(15px);
    

### 帶多值

@mixin rect($width , $height, $bgc) {
    width: $width;
    height: $height;
    background-color: $bgc;
}
.box{
  @include rect(100px, 30px , #fff)
} 

### 空值

@mixin borderline($width, $borderColor:null) {
    width: $width;
    height: $width * 0.5;
    border: 1px solid $borderColor;
}

.borderline {
    @include borderline(100px);
}

### 預設值

@mixin rect($width:400px, $height:300px, $bgc:#fff) {
    width: $width;
    height: $height;
    background-color: $bgc;
    border: 1px solid $bgc;
}

### 運算

//運算

.section {
  width: 10rem + 10rem ;
  height: 10px - 100  ;
  font-size:  10 * 10px ;
  font:  (100 / 20) + em;
}

$fontSize : 14px;

h1 {
        font-size: round($fontSize * 5.3);//四捨五入
    }

    h2 {
        font-size: floor($fontSize * 4.2);//無條件捨去
    }

    h3 {
        font-size: ceil($fontSize * 3.7);//無條件進位
    }

    h4 {
        font-size: $fontSize * 1.8;
    }

    h5 {
        font-size: $fontSize * 1;
    }

### 判斷式

$num : 110;

@if $num <= 100 {
    .num {
        width: 100px;
    }
}@else if $num == 80 {
    .num {
        width: 80px;
    }
 }@else {
        .num {
            width: 0px;
        }
    }

### 判斷式運用

@mixin marginAuto() {
        margin: 0 auto;
}

@mixin layout-full($width:100) {
    @if $width==100 {
        width: 100%;
        display: block;
    }
    @else {
        width: $width + px;
        @include marginAuto();
    }
}

### 偽類

@mixin mode(){
    &::before , &::after{
       content: '';
       @content 
    }
}


.nav {
    ul {
        li {
            width: 100px;
            margin: 10px;
            display: inline-block;

            a {
                color: red;

                &:hover {
                    color: blue;
                }

                &:active {
                    color: green;
                }

    @include mode(){
      padding: 10px
      //屬性
    };
            }

        }
    }


}

### 跳脫符號 #{變數}

@mixin btn( $class, $w, $p, $bgc, $fontSize) {
    #{$class}{
        width: $w;
        padding: $p;
        text-align: center;
        background-color: $bgc;
        font-size: $fontSize;
        cursor: pointer;
        margin: 2px;
        display: inline-block;
        transition: all 1s;
        &:hover{
            // background: darken($bgc, 20);
            background: lighten($bgc, 30);
        }
    }
}

@include btn('.btn', 100px, 10px, rgb(247, 252, 0), $fontSize);

## @for 迴圈

`@for $var from <start> through <end>`
`@for $var from <start> to <end-1>`

//through 跟 to 的差異
@mixin boxs($num) {
    @for $i from 1 through $num {
        .box_#{$i} {
          width:  $i * 1px;
        }
    }
}

@include boxs(10);

## Grid

@mixin grid($num) {
    @for $i from 1 through $num {
        .col-md-#{$i} {
          width: ($i / $num) * 100%;
          @content
        }
      }
    
}

@include grid(12){
    display: inline-block;
    background-color: rgb(255, 241, 49);
    height: 20px;
};

## @each

@each  $var  in  a1 , a2 , a3 {
  .img_#{$var} {
      background-image: url('./img/#{$var}.jpg');
  }
}

@mixin imgUrl($val) {
    @each $var in $val {k
        .img_#{$var} {
            background-image: url('./img/#{$var}.jpg');
        }
    }
}

@include imgUrl(a1  a2  a3 b2);

@mixin imgUrl($file , $link) {
    @if $file==jpg {
        @each $var in $link {
            .img_#{$var} {
                background-image: url('./img/#{$var}.jpg');
                @content
            }
        }
    }

    @else if $file==png {
        @each $var in $link {
            .img_#{$var} {
                background-image: url('./img/#{$var}.png');
                @content
            }
        }
    }
};

 @include imgUrl(jpg , a1 b1 img2 );
 
 .wrapper {
    @include imgUrl(jpg , a1 b1 img2 );
}


.wrapper-about {
    @include imgUrl(png , a12 b12 img3 ){
      width: 100%;
    };
}

## @extend

@mixin rectbox() {
    width: 100px;
    height: 30px;
    margin-bottom: 10px;
}

%rectbox {
    width: 100px;
    height: 30px;
    margin-bottom: 10px;
}

.box-red {
  @extend %rectbox;

   background-color: #f70000;

}
.box-blue {
    @extend %rectbox;
  background-color:  #0004ff;
}



// .box-red {
//     width: 100px;
//     height: 30px;
//     margin-bottom: 10px;
//     background-color: #f70000;
// }

// .box-blue {
//     width: 100px;
//     height: 30px;
//     margin-bottom: 10px;
//     background-color:  #0004ff;
// }

## @extend

%attr {
    display: inline-block;
    background-color: rgb(255, 241, 49);
    height: 30px;
}


@include grid(12) {
    @extend %attr;
    // display: inline-block;
    // background-color: rgb(255, 241, 49);
    // height: 20px;
}

## RWD

@mixin rwd($breakpoint) {
    @if $breakpoint== desktop {
        @media all and (min-width: $desktop) {
            @content;
        }
    }

    @else if $breakpoint==medium {
        @media all and (min-width: $medium) {
            @content;
        }
    }

    @else if $breakpoint== small {
        @media all and (min-width: $small) {
            @content;
        }
    }
}


@include rwd(medium) {
    //平板
    /* 平板 */
    .wrappers {
        font: 100px;
    }
}

## @map

$maps:
(
  h1 : 40px,
  h2 : 30px,
  h3:  20px,
  h4:  18px,
  h5 : 14px
);



@each $key, $value in $maps {
  #{$key}{
     font-size:$value; 
  }
}

## each RWD

$breakpoint-rwd :(moblie : 721px,
    medium : 996px,
    desktop : 1200px,
    xl-desktop : 2000px
);


@mixin rwd-each($a) {
    @each $viewpoint,$num in $breakpoint-rwd {
        @if $a==$viewpoint {
            @media all and (min-width : $num) {
                @content
            }
        }
    }
};


@include rwd-each(desktop){

body {
   font-size: 30px; 
  }
}

$list : 10px 20px 30px 40px 50px;


.boxlist {
    width: length($list);
    height: nth($list, 2)
}

@mixin margin-auto($val...) {
    @if length($val)==0 {
        margin: 0 auto;
    }
    @else if length($val)==1 {
        margin: $val auto;
    }
    @else {
        margin: nth($val, 1) auto nth($val, 2);
    }

}





.box-auto {
    width: 100px;
    @include margin-auto(10px , 20px);
}

# Gulp

- gulpfile.js

var gulp = require('gulp');


gulp.task('concatjs' , function() {
    gulp.src('js/*').pipe(gulp.dest('assets/js'));
})

gulp.task('concatcss' , function() {
    gulp.src('css/*').pipe(gulp.dest('assets/css'));
})

var cleanCSS = require('gulp-clean-css');


gulp.task('minicss', function () {
    gulp.src('css/*.css')
    .pipe(cleanCSS({
        compatibility: 'ie8'
    }))
    .pipe(gulp.dest('css/mini/'));
});

# gulp-sass

`npm install node-sass gulp-sass --save-dev`

https://www.npmjs.com/package/gulp-sass

var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('sass/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('css/'))
});

## minicss + sass

gulp.task('sass', function () {
    gulp.src('sass/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('css/'))
});

gulp.task('minicss',['sass'], function () {
    gulp.src('css/*.css')
        //壓縮
        .pipe(cleanCSS({
            compatibility: 'ie8'
        }))
        //完成搬家
        .pipe(gulp.dest('css/mini/'));
});

# gulp file include
https://www.npmjs.com/package/gulp-file-include

`npm install --save-dev gulp-file-include`

# 講義
https://bryant-huang.gitbook.io/-1/

# 專案樣板下載
https://github.com/sexfat/dd105g4/tree/master/dev/sass

# html 測驗

https://docs.google.com/forms/d/e/1FAIpQLSelZV549JOKFjKIhv8LumENb3kAzSKi-ZDX2Ourr_lJqpnTRA/viewform

# caniuse
https://caniuse.com/

# 上課檔案
https://github.com/sexfat/dd106

# html講義
https://cookies.gitbook.io/dev-something/

# 動畫原理
https://hackmd.io/llIBNZDFR7qMTrQQGUCuCw

# ui 資源分享
http://collectui.com/designs

https://www.pinterest.com/

https://bm.s5-style.com/

https://dribbble.com/

- 學姊ppt 參考
http://140.115.236.71/demo-personal/DD103/web/%e7%b0%a1%e5%a0%b1PDF/T1900826%ef%bc%bf%e8%b3%b4%e6%80%a1%e5%ae%89%ef%bc%bf%e8%8a%b1%e7%b3%b8.pdf

- design system
https://designsystemsrepo.com/design-systems/

https://uxmovement.com/products/flow-patterns-make-site-flows-in-fine-visual-detail/?fbclid=IwAR3xO7KCzEmxdGqu-Bpj5wDJMbtkF13MTEFZjX89M8oCCmIAf-fUwg5VtE0

# chrome plugin

- 網站技術分析 https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=zh-TW

- grid 尺規 https://chrome.google.com/webstore/detail/grid-ruler/joadogiaiabhmggdifljlpkclnpfncmj

- colorpick https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

- 同文堂 https://chrome.google.com/webstore/detail/new-tong-wen-tang/ldmgbgaoglmaiblpnphffibpbfchjaeg?hl=zh-TW

- 字體
https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh

- rwd grid
https://chrome.google.com/webstore/detail/design-grid-overlay/kmaadknbpdklpcommafmcboghdlopmbi

- 結構
https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh

# 網站資源分享

1. https://ogdesign.tw/resources#?category=web-desgin
2. https://trello.com/b/aBDsBWHg/%E5%A5%BD%E7%AB%99%E8%B3%87%E6%BA%90%E5%88%86%E4%BA%AB

- https://www.cssawards.net/
- https://dribbble.com/
- https://www.awwwards.com/
- http://nipponcolors.com/#tonoko
- https://www.behance.net/
- http://4db.cc/
- https://codemyui.com/
- https://tympanus.net/codrops/

# icon 分享
https://www.flaticon.com/
https://www.iconfinder.com/

# 用戶與伺服器
- 連接到網路的電腦稱為用戶端（client）與伺服器端（server）。彼此的連結原理如圖所示：


# 網頁溝通流程
- 網路連線：讓你可以在網路傳送與接收資料。

- TCP/IP：傳輸控制協定和網際網路協定（Transmission Control Protocol and Internet Protocol）是定義資料如何在網路通行的通訊協定。這就像是方便你去商店買東西的交通工具。

- DNS：網域名稱系統（Domain Name Servers）就像是網站的電話簿。當你在瀏覽器輸入網址時，瀏覽器會在取得網站前，先去看 DNS 以查到網站的真實地址。瀏覽器需要找到哪個伺服器在託管指定的網站、這樣才能把 HTTP 訊息傳送到對的地方。

- HTTP超文本傳輸協定（Hypertext Transfer Protocol）是定義用戶端語言，和伺服器如何對話的應用協議。可以想成你買東西時會用來溝通的語言。

- Component files：網站由許多不同的文件組成
程式檔：網站主要是由 HTML、CSS、JavaScript 建立
其他檔案 ： 這是構成網站其他內容的集體名稱，裡面可能包含圖像、音樂、影片、Word、PDF ……


# 編輯器安裝

1. https://code.visualstudio.com/

2. https://www.sublimetext.com/

3. http://brackets.io/

4. https://atom.io/

# vscode 工作區域


# 各家瀏覽器佔有率
https://gs.statcounter.com/

# html架構

<!--註釋文字 -->
<!-- 第1行為代碼註釋標籤，代碼註釋的作用是幫助程序員標註代碼的用途，不會直接呈現在網頁上，我們會通過這樣的方式讓大家來了解一個網頁 -->
<!--<!DOCTYPE> 不是html標籤，但它會告訴瀏覽器html的版本，下面這個寫法就是html5啦 -->
<!DOCTYPE html>
<html>
<!-- 文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等、Meta以及css等外部鏈接的引入-->
<head lang="en">
<!-- meta標籤定義了網頁的一些信息，比如charset是編碼格式，http-equiv向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，viewport，則定義頁面的寬度與打開頁面的屏幕寬度的關係等,keywords和description則是SEO的關鍵，大家可以去研究一下大網站的頭部信息 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<!-- 網頁的title標籤會在瀏覽器中的標題欄上顯示（包括微信瀏覽器）用於告訴用戶和搜索引擎這個網頁的主要內容是什麼。搜索引擎可以通過網頁標題，迅速的判斷出網頁的主題，所以它也是SEO幾乎最為關鍵的信息。
每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。 -->
<title>HackWork官方網站</title>
<!--link 標籤通常會引入css或者icon小圖標，css樣式引入有三種寫法，這是其中之一 -->
<link href="css/style.css" rel="stylesheet">
<!--script 標籤會引入javasript文件，通常情況下，這個會放在網站的尾部 -->
<script src="js/index.js"></script>
<!--style標籤是網站的css樣式，css樣式引入有三種寫法，這是其中之一 -->
<style></style>
</head>
<!-- 在<body>和</body>標籤之間的內容是網頁的主要內容，在網頁上要展示出來的頁面內容一定要放在body標籤中。 -->
<body>
<!-- 這是一段註釋，以後大部分的代碼都會寫在body標籤裡面 -->
要寫Hello，World麼？會不會太簡單。
</body>
</html>

# table

- css

table, th, td {
    border: 1px solid black;
     }
  th, td {
     padding: 0 15px;
     text-align: center;
    } 


# 何謂 UI

UI（User Interface）使用者介面，主要專業是設計頁面上的功能、顧及使用的便利性與整個設計的美學，網站的美觀性和他息息相關

# 何謂 UX
UX（User Experience）使用者體驗，則是根據使用者的習慣，安排整個網站頁面的內容規劃，像是哪些區塊的內容要先在網站上出現，行動呼籲按鈕（Call to Action, CTA）的位置應該擺在哪裡。

# 最終

終端使用者與公司網站的互動行為的總和，而此行為的目的是要達成一個目標（取得資訊、下訂單、連絡公司等等）就對了

# 產品故事

1. **選定主題**
（假設）資訊分享平台

(* 當選定主題後，開始分析研究)
2. **產品介紹**
- 我們的產品主要是做什麼服務的，能夠你們有效的完成哪些事
- 我們整理許多主題讓分享更輕鬆，因此您可以專注於真正重要的事情，讓客戶過上更好的生活。我們正在與您一起努力，體驗的未來。

3. **產品目標**

- 關於這個產品提供哪些服務，主要是解決哪類的問題

4. **使用主族群**

- 應用產業 ：科技業
- 目標用戶 ：工程師

5. **案例研究**
- 電商研究

6. **需求列表**

- list log更動列表
- 注意事項

7. **開始專案**

- sitemap

- wireframe

- ui flow
- prototype
- mockup

8. 開發階段

## UI 設計流程
- ### 1. 格線系統
- ### 2. UI Kit ( psd or ai etc... )
- ### 3. 產品組成
- 產品的組成大約可以拆分成 頁面 > 元件 > 元素 > 圖（影片）、文字、icon、表單、互動 等。
- 各元素都可能需要制定 色彩、透明度、尺寸、間距、檔案格式、品質、風格 等。互動包含 手勢操作、過場動畫、特效、音效、震動 等。

## 網頁介面組成


### 選單元件


<br>
<br>
範例網址：http://demo.smartaddons.com/templates/html/market/intro-new/

#### Header要注意的

- [x] logo不能置頂 貼邊
- [x] 選單要標示所在位址
- [x] 是否有 會員登入/註冊 的標示
- [x] 購物網站是否有購物車 的標示
- [x] 功能列，主選單，次選單層級 是否清楚
- [x] 選單是否有對齊

### Hero product
<br>
<br>

### Ecommerce

- 電商的ui kit
https://dlex.design/e-commerce-ui-kit/
<br>
- Nike
https://www.nike.com/gb/hurley
<br>
- 受歡迎電商大全
https://themeforest.net/popular_item/by_category?category=ecommerce

- collection UI 靈感牆
http://collectui.com/designs

工具
https://zeplin.io/

# RWD

1. https://sexfat.github.io/rwd/index.html
2. https://sexfat.github.io/rwd/index2.html
3. https://sexfat.github.io/rwd/index3.html
4. https://sexfat.github.io/rwd/index4.html
5. https://sexfat.github.io/rwd/index5.html