【讀書感想】新創業之道

在今年中秋節假期除了翻了『無印良品的設計』外，也在一天完食了『新創業之道』。兩本都是講有關產品理念跟公司哲學，對現在的我都充滿者啟發。無印是使用大量圖片穿插文字傳達他們的想法，而新創業之道則是用大量故事來敘說美則（Method）公司的執著。

圖片來源：博客來

在講心得之前，先來簡短地說說的我現在的工作。我在一家小保養品公司擔任『類產品經理』；加個 "類" 意思是因為除了管好產品之外，我還要做網管, 行銷和人事的工作。在這之前，是在網路公司擔任前端工程師。（為什麼變成這樣...就是個很長的故事了。人生啊～～～）

我每天都要為了公司產品，找很多資料，想很多路，選出一條以公司方針為原則的產品道路。我經驗嚴重不足，除了因對保養品不是說很熟外，也是個行銷大菜鳥。（對我來說，之前都是以工程師的邏輯思考來想事情，對行銷的無法預測真的束手無策 T_T ）

現在期間的我，變得很喜歡看商管書和雜誌來學習自己不足的部分，尤其是商業前輩們的勵志故事。可是，每一個企業的成功故事都不太一樣，那這適合套在我們公司嗎？背景是相似嗎？每次看完疑惑總是會浮上心頭。

『新創業之道』來得真的是時候！書裡沒有很多商管書會出現的飄無勵志言語，只有真實的經驗跟一步一腳印的故事，而且寫了滿滿一本！！
尤其，這本書是兩位創辦人自己寫的，他們把當時的背景跟心境都有描繪出來，讓我對他們為什麼會這樣選擇是有脈絡有感情的，跟很多是由第三者訪談後完成的教案書多了點溫度。最後，因為美則是主打清潔用品，跟我目前負責的保養品有很多相似之處，更可以感同身受～

---

美則創辦人 - Adam & Eric
圖片來源：美則官網

書分成兩大重點，前面是由兩位創業家的故事未開頭，說到兩人當時創立美則的出宗，跟如何跌跌撞撞的成就了美則。後面則詳細描寫美則的七大執著跟相關故事。


Adam 跟 Eric 的創立故事出發點倒是很平凡，兩位不想當朝九晚五的上班族，對於自己手邊的工作到底可以帶來些什麼產生疑惑。最後在發想跟聊天中跳出環保無毒概念的清潔劑，並且以充滿設計瓶身為賣點，開創了美則。當然一開始也不是那麼順利。正所謂，天才是99分的努力跟一分的靈感。曾經他們完全沒有錢到處借錢，女朋友分手，跟自己跳下來做所有公司的大小事。一開始受挫的程度，讓我覺得就算他們放棄大家也不會說什麼。只是，他們撐下來了！後來他們也是靠者自己對產品的信心，堅忍不拔的精神贏得 Target 的賞識，邁向漸漸成功的道路。

我特別印象特別深刻的是他們向 Target 推銷的過程。其實做這行的都知道，在鋪通路前首先要先跟採購知會。要讓採購喜歡你，你的產品才會讓公司其他人知道。他們一開始當然也是這樣做，只是，一開始 Target 採購覺得他們產品不適合 Target，婉拒了他們。假如是我，一定就會放棄 Target 這條路；因為通常大家習以為常的路失敗了，就會覺得這條通路就是失敗了。可是 Adam 跟 Eric 沒有放棄，他們還是覺得 Target 的風格跟他們美則的理念是相通的。

首先，他們用入股方式等條件讓世界知名的工業設計師 - Karim Rashid 幫美則重新設計瓶子，然後在讓 Eric 的行銷朋友繞過採購直接去找 Target 的行銷主管談通路。最後，Target 的行銷主管喜歡美則的概念和精美的瓶子！也讓採購主管點頭，讓他們鋪貨到 Target！不能很勵志，真的放棄啊～～（他們之後還遇到瓶子生產等問題，他們也都把經驗都依依的寫在書上了。只能說，創業真的沒有那麼順利啊，一定要有堅強的心和新鮮的肝！）

---

美則創辦人的故事讓我思考處理事情不能輕易放棄。中秋節前，我們公司其實一直有想要跟一個日本公司接洽，因為他們賣的東西我們分析可跟我們產品達到相輔相成的功效。只是，寄日文 Email 給他們公司完全沒有回應，打電話過去因我們不會日文，他們不會英文，就馬上結束話題了。本來，我們是採取半放棄狀態，想說這條路應該就沒了。

可是美則的故事勵志讓我想說是不是要再試試，就在中秋連假比較放鬆的時候靈機一動想說，乾脆寄我們公司的目錄跟用紙本快遞給他們試試好了！（其實這方法非常簡單，只是平日習慣數位生活，還真沒想到用傳統紙本的方式處理）
結果，他們回應了！！原因是因為他們看了我們的目錄跟附上的日文書信，想說我們應該是認真的，就請他們公司唯一的中國人打回來直接跟我們接洽，互相交換了彼此的私人信箱，有開始在密切聯絡了～

真的，不要放棄！假如暫時想不到，保持正面想法。放鬆一下可能就會想到了喔 :-)

---

回到讀書心得。書的後半都在講美則的七大執著，配上各種經驗故事。

Adam 跟 Eric 詳細的述說他們遇到的種種故事。他們曾經因偏離產品軌道賠錢，過度擴張而非得要裁員。他們誠實的說者一些公司方針和執著是他們“學習”其他他們覺得超棒的新創公司，參考內化變成美則的自己的美學。
他們注重環境、使用者體驗、設計，那些當初的創立時的初衷。他們把執著寫在牆壁上，讓公司的員工都更『美則』，做事方式很『美則』，也提醒他們莫忘初衷。

我這邊就不列出他們的七大執著是什麼了，強烈歡迎有興趣的朋友一定要自己去翻翻書。因為看完我就變成他們的信徒之一，也讓我對目前正在著手的保養品有更多想法。有時候錢很重要，但不是最重要的。有時候聰明的員工很重要，可是適合的更重要。有時候做錯事情是可原諒的，只是要記取教訓，讓失敗成為成功中間的一個推力。

成功跟失敗不是兩條路，而是同一條路，不要輕易放棄。
-  by 忘記哪裡看到的圖

【讀書感想】無印良品的設計

禮拜五經過誠品的『舊書拍賣會』現場。

本來家裡已經推了一堆書，抱者看看就好的我，還是忍不住挑了七本書回家～

（紅標商品任三本 500 元，一本 200 元）

挑書的重點是把之前在書店看到喜歡，可是主要是講理念跟設計的書帶回家。

之前逛書店會馬上買的書，幾乎都是看起來可以解決我最近的煩惱或是可學習些什麼的書。

（勝率大概是買 4 本內有一本超棒的書，兩本普通的書，一本翻前面後就進二手箱的書）

我參考一本書值不值得買的順序是，封面設計 -> 書名 -> 書背後簡介 -> 前言（很重要，因為可知道作者想要傳遞的是什麼）

假如還是很不確定是否想買的書，就會拍照起來。

最近有想要在網路買書，會把之前想看的書拿來湊運費。

或是，假如在逛書店的時候又把那本書拿起來第二次，就會思考這本書好像真的蠻吸引我的，就會認真考慮當場買下。

話題扯遠了...來紀錄一下在『舊書拍買會』購買的『無印良品的設計』心得吧！

--------------------

圖片來源：天下文化

從以前我就很愛『無印良品』的東西，覺得他們的東西樸實又耐用。說實在的，在台灣無印的價錢對我來說還是有點貴。可是每次經過還是忍不住會逛一逛，看到他們的衣服還是會想要摸一摸。腦中記錄下來，趁去日本的時候大買他們家的產品。

到底是什麼樣的堅持跟美學會讓『無印良品』那麼的吸引人呢？

身邊有一個不太熟的設計師朋友，常常在自己的 FB 上 PO 無印良品開箱文，並且說明此 傢俱/家電 的美感跟大力稱讚無印的簡約設計。

在日本的弟弟，傢俱跟生活用品幾乎都在無印良品購買。明明衣架跟垃圾桶等在百元商店跟在無印購買的『功能性』是一樣，可是卻讓人想多花一點在品質良好的無印商品上。（前提是...無印良品在日本價格真的比較親民！！）

『無印良品』在男生女生老中青世界各國都各自有市場，且風格從不走歪。（至少在 10 年間我的觀察是這樣），真的是非常讓人感到佩服的。

最近的我，正為了尋找適合新的產品瓶身感到困惑。找了很多不同的瓶身一直被打槍，顧問說：『要有品牌一定的風格，不可以走偏』。可是我很想吶喊，我還不知道我們的風格是什麼啊！！！！衝者怎麼定義風格這點，這本書在我買回來的第二天就消化完成了。

此書承襲了無印的一貫風格  -『簡約』。

書裡面，圖片跟文字的排版可說恰到好處。滿滿的都是重點，也是不用依照順序隨便翻都可開始看的好書。

無印良品為什麼可以從不偏離軌道，跟此書介紹的顧問團隊有者密切的關係。無印顧問團隊是從創始以來就一直給予顧問協助的團隊。來自不同領域，不同背景，可以卻都有想把無印精神發揚光大的精神。

由於是不同背景的人聚在一起，會給予一直在同一家公司工作的設計師和團隊刺激。由於是傳達的無印精神，不是為了『銷售』或『主打某個設計師』而計畫著產品，所以每個產品都是經過很多討論跟實驗而誕生的。

無印的厲害點是在『感染力』，他們的精神是『這樣就好』。在 1980 年草創時期，就一直主打『空無』的概念。沒有一樣產品是主打商品，可是每樣產品卻都很有無印的風格。用不變的態度，不追隨流行的風格，一直走下去。

無印良品海報 - 地平線

書中介紹了很多代表無印精神的海報設計，其中我最喜歡在 2003 年發表的『地平線』。傳達精神是無印的『空無』。不大力宣傳他們的產品是『嚴選素材』或『強調環保』等手段，用什麼都不說的視覺畫面跟顧客交流。

-----------------------------------------

此書除了滿滿的設計重點外，有個地方讓我思考很久：

- 平面設計師 - 原研哉 的文章

文章裡除了聊無印的設計美學外，還有在一小部分提到了他對行銷設計的看法。

『企業跟產品形容為樹，而土壤的品質就是生活者的慾望品質。土壤的養分是否充足，端看生活者的慾望層次有多高；樹木是否健康茁壯，則取決於土壤品質。以這個角度思考，就表示世上有歐盟的土壤、中國的土壤、日本的土壤等：而所謂的行銷，就是為土壤施肥的行為。設計的終極目的是慾望教育，發揮改變這些土壤的影響力。』

這句話讓我這菜鳥行銷思考了很久。

行銷很重要，為什麼重要，是因為要導銷售，有銷售我們公司才可以賺錢，有賺錢公司才可以走得久。

可是 原研哉 此文跳脫了賺錢為目的導向，改由施肥的想法來傳達給顧客公司的理念，教育淺在顧客成為真正的顧客，進而吸引了更多顧客前來上門。這是正向良性循環。

這讓我想到之前在雜誌上讀到（忘了哪本雜誌..），所謂的『品牌行銷』，『教育顧客』是很重要的一個環節。最近我被業績壓力弄得有點喘不過氣了，導致目前公司策略幾乎都是以『銷售』為主軸。（打折、滿多少送贈品等等等）重要的 品牌形象 跟 產品理念 都是在最後才想起來，也不是說很在意。

此文讓我認真的思考...到底，我們產品要帶給人的是什麼呢？看來我要好好繼續去思考新品牌的瓶器要帶給人的感覺是什麼了。

-------

回到讀書心得～

此書是會更深入暸解無印精神的好書。看完後再逛無印的時候，一定會改觀。

會微笑的想說，『啊，這邊這個設計當初的構想應該是這樣啊！』

Gulp 介紹 - 更多應用 （二）

上一篇 [Gulp 介紹 - 更多應用] 介紹一些好用的 gulp 套件，這篇主要介紹如何撰寫出更好的 gulp 檔案。

1. 一定要記得 return gulp.src stream

剛開始學習的時候，網路上的教材有兩種寫法。

第一種：無 return

gulp.task("taskName", function() {
   gulp.src("檔案")...
}

第二種：有 return

gulp.task("taskName", function() {
   // 加了 return 在 gulp src 前面
   return gulp.src("檔案")...
}

第一種跟第二種的差別在於，有 return 的我們會知道 tasks 已經結束的時機，而前面沒加 return 的我們不會知道。

gulp 很聰明。在還沒到 concurrency 上限前，預設會同時跑所有需要的 tasks，並且不等待任何返回值。
（簡單來說。By default, gulp task is asynchronous task）

這時，當我們需要有順序的跑 tasks 時，就會因為完成順序不如預期出現錯誤。

範例，我們希望在跑 minify css 之前，先做 scss 編譯。

var sass = require('gulp-ruby-sass');
var minifyCSS = require('gulp-minify-css');

gulp.task('scss', function() {
    // syntax change gulp-ruby-sass starting from 1.0.0-alpha
   sass('./scss', { style: 'expanded' })
        .pipe(gulp.dest('./css/'));
});
// 期望 scss 跑完在跑 minify css, 
// ['scss'] 是指定 dependency，styles task 會在 scss 跑完後再跑
gulp.task('styles', ['scss'], function () {
    gulp.src('./css/**/*.css')
        .pipe(minifyCSS())
        .pipe(gulp.dest('./dist/css/'));
});

terminal 結果：

myBook:gulp-test yvonne$ gulp styles
[21:30:25] Using gulpfile ~/work/gulp-test/gulpfile.js
[21:30:25] Starting 'scss'...
[21:30:25] Finished 'scss' after 5.99 ms // 跑完 scss...
[21:30:25] Starting 'styles'...          // 開始跑 styles...
[21:30:25] Finished 'styles' after 4.11 ms 
[21:30:26] directory ./
[21:30:26] write ./main.css // 這裏才是 scss 真正編譯完成

雖然結果顯示 styles 是等 scss 跑完後才跑的。
可是後面的 log 卻寫說編譯的 css 是等全部結束後才寫入，結果根本非預期想的那樣。

解法非常簡單，只要加 return 回傳 stream 提示 tasks 結束即可。

var sass = require('gulp-ruby-sass');
var minifyCSS = require('gulp-minify-css');

gulp.task('scss', function() {
   return sass('./scss', { style: 'expanded' })
        .pipe(gulp.dest('./css/'));
});

// 期望 scss 跑完在跑 minify css, 
// ['scss'] 是指定 dependency，styles task 會在 scss 跑完後再跑
gulp.task('styles', ['scss'], function () {
    return gulp.src('./css/**/*.css')
        .pipe(minifyCSS())
        .pipe(gulp.dest('./dist/css/'));
});

myBook:gulp-test yvonne$ gulp styles
[21:39:02] Using gulpfile ~/work/gulp-test/gulpfile.js
[21:39:02] Starting 'scss'...
[21:39:02] directory ./
[21:39:02] write ./main.css // scss 編譯完成！
[21:39:03] Finished 'scss' after 249 ms
[21:39:03] Starting 'styles'... // styles 才開始跑
[21:39:03] Finished 'styles' after 24 ms

為了避免類似的問題再發生，建議是 return 所有的 gulp stream。
只要沒有特定指定 dependency 的情況下， gulp tasks 都會是採非同步的方式跑。一樣效能很好！
ref:
http://stackoverflow.com/questions/21699146/gulp-js-task-return-on-src

2. 使用外部的 config 管理變數（like grunt)

在 gulp.js 的 github recipes 上有一則如何使用 json 管理 gulp 變數，維持 tasks DRY(Don't Repeat Yourself)。教學

用法是把變數寫入在外部的 json 檔案，然後 tasks 可呼叫相同變數。開發者只需要維護 json 裡的變數即可，而不用維護分佈在不同 tasks 的變數。
雖然用 json 維護很方便，可是我個人喜歡用 node 產生 config module，讓變數可有繼承關係。

新增 gulp.config.js

module.exports = function () {
    var client = 'root/',
        dist = client + 'dist/';

    return {
        // root
        client: client,
        scss: {
            files: client + '/scss/**/*.scss',
            css: {
                distPath: dist + 'css/',
                name: 'main.css'
            }
        }
    };
};

在 gulpfile.js 記得把 config.js require 進來

var gulp = require('gulp'),
    // 需要啟用 config module 的 function 
    config = require('./gulp.config')();

// print 'root/'
console.log('client path:', config.client);

3. del 取代 rimraf

跟本次『撰寫出更好 gulp』主題無關，增加這點只因我們原本都使用 rimraf 套件去刪檔案。可是最近發現 rimraf 已經被 del 取代了。（Orz... 也太晚發現了）所以就私心的把這發現寫在第三點，然後順便介紹 del 的用法～（rimraf github issue 說明）

刪除檔案在 gulp task 是很常見的動作。最常使用方式是當我們需要重新編譯檔案時，先把原先編譯完的舊檔案刪除，避免發生未知的錯誤...
（例如，其實重新編譯的檔案沒有成功，可是因為舊的檔案存在，所以一直以為有成功。然後就 debug 一陣子...）
（或是例如有些套件有 cache 的問題...）

常見用法如下：（scripts 前先清除之前的 js 檔案 ）

var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');

// pass callback argument 非常重要！！
gulp.task('clean:js', function (cb) {
    // 刪除在 js folder 下面全部的檔案
    del(['dist/js/**.*'], cb);
});

gulp.task('scripts', ['clean:js'], function() {
    gulp.src('./js/**/*.js')
        .pipe(uglify())
        .pipe(concat('all.min.js'))
        .pipe(gulp.dest('./dist/js/'))
});

del 用法很簡單，就是把想要刪除的 path array 放在第一個 argument 即可。（支援 globbing patterns）
然後別忘了要 pass callback，原因跟上面介紹的第一點『 return steam 』原理一樣。當有 dependency 的時候，我們需要讓 task 知道刪除結束的時間點。del 套件在刪除檔案時會呼叫 callback，通知 task dependency 已經結束了～ 這樣才不會刪除跟編譯同時進行喔！

Gulp 介紹 - 更多應用

去年接觸 Gulp.js 後，覺得實在是太好用了，大大的節省前端建置環境的時間跟效能。

所以在公司跟同事分享了初心者如何上手 gulp 跟一些簡單應用。

簡報：

CP 值很高的 Gulp from Yvonne Yu


之後，手頭專案裡的 gulp task 簡單完成後，gulpfile.js 就被我們塵封在專案裡。
除非有另外 task 或 bug，否則很久都沒去維護。
想想有點可惜，gulp 套件那麼多，一定還有好用的套件等我們去發掘。
所以週末就找時間自行摸索了一些網路上其他大家推薦的 gulp 套件~

小朋友的勞作 - 糖霜餅乾

這禮拜趁放假研究了笑想很久的糖霜餅乾，覺得色彩繽紛的餅乾感覺可愛又美味，書上介紹糖霜餅乾都是三兩步驟就完成了。