CurryCat

[currycatcat]

花枝 _(:3」∠)_

[currycatcat]

好久沒畫惹

可愛的花枝～

[currycatcat]

藪貓、卡邦 +%Z%

[currycatcat]

讀書筆記：設計的心理學

第一章：日常事務的精神病理學

- 產品設計的複雜性p30 - 複雜性導致無可避免地出錯（核電廠） - 人本設計的重要性：重視人類的「需求」、「能力」、「行為」 - 設計是好的溝通，對機器的溝通 - 說明書的舉例：工程師與使用者的思維p34 - 人本設計：p35 - 避免過早定義問題，利用重複漸進的方式來趨近問題 - 因為人不知道自己真正的需求，只能透過不斷的測試、觀察趨近問題 - 互動的基本原則： - 預設用途：物體與使用者的關係，椅子 -> 坐的功能，決定使用者能採取的行動。 - 指意：能夠提示預設用途，行動該怎麼發生 - 使用侷限：在於確保使用者操作正確，避免不必要的錯誤發生，因此減少多餘的選擇，來降低操作者操作上的負擔（防呆） - 對應性：利用「自然」（方向、空間）的相似性來引導直接了解 - 回饋：回饋必須立即、劣質的回饋p51 - 概念模型：簡化運作的解釋，不一定完整但是有用

第二章：日常行動的心理學

- 執行障礙、評估障礙p68 - 行動的七個階段 - 目標：形成目標 - 計畫：選擇行動 - 制定：決定動作順序 - 執行：付諸行動 - 感知：察覺狀態 - 解釋：對感知結果的理解 - 比較：評估結果與目標差異 - 四分之一英吋的鑽頭 > 洞 > 書架 - 人的下意識認知系統：情感、認知 - 本能層次：受到適應、古典制約影響，當時的情緒反應p80 - 行為層次：有意識地控制行動 - 反思層次：因果元素、情緒狀態影響p83 - 心理歷程的三個層次 - 七項基本設計原則

[currycatcat]

當畫到 ○○ 時，就會覺得：「○○」肯定是最難畫的地方了！

現在畫到鼻子，「鼻子」肯定是最難畫的地方了！

[currycatcat]

NOOB Javascript Beginner #19

關於 canvas animation： 1. 在起頭要清除目前的畫布內容 ctx.clearRect() 2. 在變形之前要先記錄一次當前畫布狀態 ctx.save() 3. 變形動畫的結尾要恢復到「變形之前的畫布狀態」ctx.restore() 4. 最後才是使用 requestAnimationFrame()

function draw() { var ctx = document.getElementById('basic').getContext('2d'); // clear canvas ctx.clearRect(0, 0, 300, 300); // 圖形樣式 ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; // 記錄變形之前的畫布 ctx.save(); // 移動變形的中心點 ctx.translate(150, 150); // 用 Date() 得到一組數字 var time = new Date(), rotate = ((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds() ctx.rotate(rotate); ctx.translate(10, 0); ctx.fillRect(0, -12, 50, 24); // 恢復到變形之前的畫布 ctx.restore(); window.requestAnimationFrame(draw); }

若是少了 restore 的動作，會發現第二幀的 fillRect 依然會吃到先前設定的 rotate 與 translate，造成這兩個動作疊加，動畫就會失敗。

[currycatcat]

NOOB Javascript Beginner #18

 關於三角函數： Math.sin(x) x 為弧線長度，以 30deg 來說： 1. 圓周長為 2* PI *r 2. 十二分之一 (30deg) 圓弧長為 2* PI *r / 12 3. 去掉 r，則能夠得到 60deg 對應的弧長應該是 2*PI / 6 4. Math.sin( 2* Math.PI / 12) 會得到 0.499999999 5. 數學上 sin30° = 1/2 = 0.5 因此，sin30° 的表示方式是 Math.sin(2*Math.PI / 12)。

[currycatcat]

NOOB Javascript Beginner #17

使用建構式時，把其他物件或函式當作其屬性帶入，以便之後更方便的使用。 在 todolist 的實作練習步驟分為：

1. todoList 整體架構的建構式 2. todoChild 子項目的建構式 在實作 remove 功能的時候，做了兩個小動作： 1. 將每個建構出來的 todoChild push 到 todoList.array 2. 建立 todoChild 的時候，添加 todoChild.father = todoList 如此一來，控制 todoChild 的按鈕添加 remove 功能的步驟就變成： 1. 找到 this.father.array 也就是 todoList.array 2. 獲取 this.id 因此 this.father.array[this.id] 就能夠找到要動作的 todoChild，再作 remove() 就行。

function TodoList() {  this.$elem = this.buildElem()  this.todoArray = []  this.bindEvents() } TodoList.prototype.buildElem = function() {  //建構出 TodoList 該有的 HTML tags ... } TodoList.prototype.bindEvents = function() {  var button = this.$elem.querySelector('button')   //執行 onCreatTodo，建構出 todoChild button.addEventListener('click', this.onCreateTodo.bind(this)) } TodoList.prototype.onCreateTodo = function() { // 把 input 的內容轉成 todoChild 要用的參數 ... // 將新 TodoChild 推到 todoArray 陣列  this.todoArray.push(newTodo) // 增加新屬性 father，這個 this 是 TodoList  newTodo.father = this } // General general = {  globalID: 0 } function TodoChild(title) { //todoChild 的 ID  var id = general.globalID ++  this.id    = id  this.$elem = this.buildElem(id, title)  this.bindEvents()  return this } TodoChild.prototype.buildElem = function(id, title) {  // 建構出 todoChild 該有的 HTML tags    ... } TodoChild.prototype.bindEvents = function() {  var button = this.$elem.querySelector('button')  //執行 onRemoveTodo  button.addEventListener('click', this.onRemoveTodo.bind(this)) } TodoChild.prototype.onRemoveTodo = function() { //找到 todoArray  var todoArray = this.father.todos,      todoId    = this.id   todoArray[todoId].$elem.remove() }

[currycatcat]

NOOB Javascript Beginner #16

理解 this 在哪裡：

1. prototype:  nameEvents 的 this.name2 不存在於 otherNameEvents this.name =“Name1” 存在於 nameEvents 和 otherNameEvents this.name2 和 this.name3 存在於 WhatIsThis 中

   function WhatIsThis() {      this.name = 'Name1'    }    WhatIsThis.prototype.nameEvents = function() {      this.name2 = 'Name2'    }    WhatIsThis.prototype.otherNameEvents = function() {      this.name3 = 'Name3'    }

2. bind: bind 使 this 傳遞。 狀況一點擊時，console 結果是 <button> 這個元素 狀況二點擊時，console 結果是 WhatIsThis() 這個函式本身

function WhatIsThis() {  this.$elem = document.createElement('button')  this.bindEvents() } WhatIsThis.prototype.bindEvents = function() {   狀況一： this.$elem.addEventListener('click', this.otherEvents) 狀況二：  this.$elem.addEventListener('click', this.otherEvents.bind(this)) } WhatIsThis.prototype.otherEvents = function() {  console.log(this) }

補充應用： bind 替換掉 this 後，就能夠在 otherEvents 裡面抓到 this.name2

function WhatIsThis() { this.name = ‘Name1′  this.$elem = document.createElement('button')  this.bindEvents() } WhatIsThis.prototype.bindEvents = function() {  this.name2 = ‘Name2’  this.$elem.addEventListener('click', this.otherEvents.bind(this)) } WhatIsThis.prototype.otherEvents = function() {  console.log(this.name2) }

[currycatcat]

F2E & RGBA 四月號

第一位講者： 專案流程 flowchart、wireframe 重要性

定義可重複使用元件

UI 會有六個狀態 https://blog.akanelee.me/posts/384307-sixth-state-of-the-page-maximum-state/

狀態命名

狀態切換條件

flow chart

畫 flow chart 圖匡線，不同的視覺代表不同的意義

把 UI 和 RD 的領域區分（甚至也能把 function map 畫在一起）

用邏輯判斷（是、否）去區分畫面

依照流程能夠更容易做成 API

wireframe

低保真

低保真應該要簡潔，避免影響 visual 的設計

低保真需要加上敘述與目的

低保真可以做成 prototype 讓 user 測試

低保真節省時間成本

RD 能夠靠低保真先做頁面，和視覺同步進行作業

高保真

高保真成本太高

面對老闆可能會需要作高保真

「高保真非成品」這很重要

名稱 / 使用時機 / 值(文案) / 狀態(hover, focus) 

第二位講者：Designer M 接案自我管理經驗分享

一人工作的自律方式，一人擔任多角

業務：安排行程、面洽、時間表

PM：時程控管、Asana，會議記錄很重要！

財務：成本、收款、報稅

設計：檔案管理、資源管理、依專案分目錄

報價控管：

建立客戶 magic number

金額優先考量

依照工作時間（年薪計）計算

窗口複雜，溝通成本高

挑選客戶：

實驗接受度

金額

溝通流暢程度

[currycatcat]

讀書筆記：觀看的方式

藝術的意涵 藝術讓不平等顯得高貴誘人，讓階級制度看起來激勵人心。藝術的權威與保護藝術的特定權威（國家、富人）密不可分，後來藝術演變成一種社會性的保護（文化）。 現代攝影的出現影像藝術的權威性，藝術變得可複製非獨特。

女性的意涵 傳統藝術女性是由審視者與被審視者兩種身份來建立。 1.身為審視者，女性看待自己所扮演的角色。 2.扮演被審視者，女性希望如何被看待。 因此女性會有所表現，在被審視的過程中取得支配權。

赤裸的概念 赤裸的概念是由觀看者而生，畫中的赤裸者通常是羞於面段觀看者，而不是其他畫中人物，畫家會暗示有觀眾的存在。赤裸並不是要傳達畫中女性的情感，而是傳達「順服」於擁有者 / 觀看者，並展現情慾（傳統藝術預設觀看者為男性）。

油畫的意義 歷史畫與神話（宗教）畫，強化了油畫的神聖性，擁有油畫就代表了一定的社會位階與彰顯道德。後來衍伸出中產階級擁有廉價畫作企圖拉抬自身氣息的動作。 作畫的構圖與元素亦能彰顯畫中人物的高貴性，像是人物的視角、昂貴的裝飾品。 建物、動物、食物、靜物油畫彰顯的是擁有者的身份與財富，這類的畫作已不是要給觀看者視覺上的衝擊，而是為了要讓擁有者確立自己擁有的一切。

廣告與油畫 廣告與油畫極其相似，兩者同樣在於向「尚未擁有者」創造出某種魅力，表現得越高冷，越能樹立其魅力假象，都能讓觀看者產生想要擁有的慾望。 差別在於，油畫是為了向觀看者展示「當時」所擁有的權力或財富，廣告則是著眼於「未來」，讓觀看者嚮往自己能成為有魅力的人。

另外，廣告有助於掩飾或補償社會中的不民主現象。用消費能力 / 金錢的不足來合理化不民主或是不平等。

從「觀看的方式」這本書去理解藝術對社會的意義，在古代不外乎就是象徵權勢財產，對於現在社會來說亦是如此，藝術的地位因為宗教、歷史、國家保護而有其高貴的意義。 觀看這些藝術作品時，不能單看其構圖視覺，觀看者也是作品的一部份（畫作內的角色與觀看者的互動）。

「女性」在傳統藝術中也是屬於某種展示（炫耀），因為傳統女性只能被男性評價，要彰顯自己的價值必須在被評價時有所表現，展示美貌、情慾、赤裸，這樣的展示被大量用在傳統美術。

廣告運用了油畫的特性，為了引起觀看者想要「擁有」的慾望，就像油畫在當代象徵著高貴，讓中產階級也想入門。 廣告要傳達的是「我們每個人要購買更多東西來改變我們自己或我們的生活，買得越多，我們就越富有。」但是實際上我們在花錢之後會變得更窮。

[currycatcat]

NOOB Javascript Beginner #15

學習 vue.js 的第一天： 1. data 與 {{object}} 的用法。 2. v-if / v-else 的用法。 3. v-model 的 real-time 用法。 4. v-on:click=“function” 與 mothed 的用法。 5. v-on:submit 可以寫成 @submit。

[currycatcat]

NOOB Javascript Beginner #14

Prototype 原型繼承應用： 1. 為建構式添加屬性

function Person(name, gender) {  this.name = name;  this.gender = gender; } Person.prototype.jump = function() {  console.log(this.name + ' is jumping.') } var p = new Person('Peter','boy') p.jump() >Peter is jumping.

2. 繼承建構式

function Child(name, gender, age, IQ) {  Person.call(this, name, gender)  this.age = age;  this.IQ = IQ; } var c = new Child('Charile', 'boy', 5, 120) c > Child {name: "Charile", gender: "boy", age: 5, IQ: 120} Child.prototype.bite = function() {  console.log(this.name + ' bite me!') } c.bite() > Charile bite me!

3. hasOwnProperty 判斷是否具有屬性。 Person.hasOwnProperty(’name’) > true 4. call(this, parameters...) 調用其他函式的 this 和引數。 5. obj.constructor 看 obj 來自於哪隻建構式。

[currycatcat]

NOOB Javascript Beginner #13

快速建立大量物件的好朋友：建構式

1. 建構式名稱第一字母通常都大寫 function MakePerson(arguments) { ... } 2. new 是一個運算符 3. new 的運作模式：   a. new 會先建立空的物件   b. new 將 this 設定為指向新物件   c. 叫用建構式時，將引數傳入 this 指向的屬性的值 4. 建構式不需要回傳的動作，this 會自動被回傳 5. instanceof 判斷是否屬於出自某建構式 6. 內建物件：Object, RegExp, Math, Error

[currycatcat]

F2E & RGBA 二月號

第一位講者：Elvis Lin 主題是 Design Sprint 產品設計的閱讀心得： 產品設計的重點： 1. 釐清問題（白板釐清、街頭訪問、批鬥大會） 2. 分析 > 設計 > 實作 > 測試 > 分析... 3. 用 prototype 測試*Sprint 流程

Design Sprint 的重點： 參考：https://designtongue.me/google-design-sprint-method/ 1. 把想法在有限的時間畫出來 2. 主事者 Sprint Master 要負責整理出脈絡 3. 五幕試訪談   a. 友善地歡迎受訪顧客，開個好頭   b. 藉由連串的開放式、一般背景問題了解顧客   c. 介紹原型   d. 一些具體操作，藉此了解顧客對原型的反應   e. 快速的總結討論，藉此記錄顧客的整體想法和印象 4. 一週工作五天，一天五次訪談，五次訪談足夠發現問題 第二位講者：Augus 簡報：https://speakerdeck.com/augus/eagle-zheng-li-ling-gan-bian-de-chao-jian-dan Eagle 開發心得分享： 1. 傳統資料夾不易於管理與搜尋 2. Pintrest 受限於網路 3. 簡而言之就是坊間的做的不夠好，功能不夠多

靈感收集的重點： 1. 團隊共享靈感 2. 成員對於靈感的反饋 3. 會議的快速展示 4. 透過 Pattern 分類 5. thumbnail 或 CC0 假圖收集

[currycatcat]

NOOB Javascript Beginner #12

讀到深入淺出的第 11 章，這章的主題圍繞在匿名函式、作用域、閉包上。

從 jQuery 學回 JS 其實就很好理解匿名函式的意義，如果想要讓程式好好的被維護，盡量少用吧（除非這隻程式小到不行）。

函式內的變數作用域僅限於該函式內，若該函式又被當成引數放到其他函式內的話，則就是進入封包的概念了。

function setTimer(doneMessage, n) { setTimeout(function() { alert(doneMessage); }, n}; doneMessage = “OUCH!” } setTimer(”Cookies are done!”, 1000) -> “OUCH!”

從上面的實作可以看出 doneMessage 在 1000 毫秒之前就被改成 OUCH 了。

但是函式在被叫用時，其變數的作用域還不太理解，需要另外釐清 - -

[currycatcat]

https://glennjong.github.io/ 用多出來的一天假，解決煩惱已久的效能問題，總算又完成了一件未盡之事。 之後再補上 wil-change 與 position fixed 渲染的心得文。