基本上，發展一個故事跟使用者體驗有著相似的元素－規劃、研究及內容創建。且故事不僅僅只適用於使用者，在內部溝通協調的時候更是一個非常好的工具，讓成員對於這共同的目標有著相同的理解。
有看過一個網站的SA/SD文件的人，應該能理解如果要從SA/SD文件中看出一個網站的核心架構/價值是一件多麼不容易的事情。SA/SD文件的存在有其必要，但如果能夠有一個完整的故事來讓所有成員了解他們所在做的產品是什麼，對於最終的使用者體驗及產品的情感傳遞會有更大的幫助。以下描述一些說故事在UX下的用途及其優勢。
[UX] 這一切都要從故事說起 (下)
以故事來增加使用者體驗
基本上，發展一個故事跟使用者體驗有著相似的元素－規劃、研究及內容創建。且故事不僅僅只適用於使用者，在內部溝通協調的時候更是一個非常好的工具，讓成員對於這共同的目標有著相同的理解。
基本上，發展一個故事跟使用者體驗有著相似的元素－規劃、研究及內容創建。且故事不僅僅只適用於使用者，在內部溝通協調的時候更是一個非常好的工具，讓成員對於這共同的目標有著相同的理解。
[UX] 這一切都要從故事說起 (上)
從史前時代的壁畫、史書，到現代的影集電影，或是小時候的床邊故事、漫畫書。說故事已經是我們與生俱來的本能，人類透過故事來傳遞經驗、教導或是娛樂。而現今由於科技與媒體的大幅進步，資訊可以透過各種不同的管道被傳遞，但同時資訊也變得瑣碎、重複，容易傳遞的同時也降低了資訊的品質及情感的參與度。
故事是個很強大的資訊容器，讓人們更容易(情感上的)參與其中，使用得當的話可以讓人與人(或物件)建立深層且正面的聯結，也因此優秀的UX裡，多多少少都會值入一些故事。
故事是可以被設計出來的
不管故事是不是被刻意設計製造出來的，吸引人的故事都有一些共通點，也因此我們可以照著相似的樣式去設計一個故事。(見下圖)
情感的力量
當我們在述說一個故事的時候，其實就是在講一個情感上的歷程，因為透過故事我們的目的是傳遞經驗、教導或是娛樂。當我們說一台新的智慧手機有什麼配備，何時發行時，這是單純資訊的傳遞；而當我們說自己的手機用起來如何，可以怎麼樣用，哪裡用不順，我們就把自己的經驗包裝成一個希望他人能理解的故事了。
那麼經驗是如何形成的？在Emotional Design: Why We Love (or Hate) Everyday Things一書中，將經驗分成三個成型的程序：
參考資料：
Better User Experience with Storytelling
故事是個很強大的資訊容器，讓人們更容易(情感上的)參與其中，使用得當的話可以讓人與人(或物件)建立深層且正面的聯結，也因此優秀的UX裡，多多少少都會值入一些故事。
故事是可以被設計出來的
不管故事是不是被刻意設計製造出來的，吸引人的故事都有一些共通點，也因此我們可以照著相似的樣式去設計一個故事。(見下圖)
如圖，情緒的參與程度(tension)在一開始最低，隨著故事的發展(一個個轉折點)逐漸升高，到達頂點(climax)之後收尾結束。回想一下你記憶最深刻的電影/小說/遊戲甚至你的身經歷，是否照著這樣的模式走？這裡對於故事的結構有更詳細的解說。
舉例來說：星巴克賣的不僅僅是咖啡，而是與咖啡有關的故事氛圍－環境、味道、感受，而顯然很多人喜歡這個故事。
當我們在述說一個故事的時候，其實就是在講一個情感上的歷程，因為透過故事我們的目的是傳遞經驗、教導或是娛樂。當我們說一台新的智慧手機有什麼配備，何時發行時，這是單純資訊的傳遞；而當我們說自己的手機用起來如何，可以怎麼樣用，哪裡用不順，我們就把自己的經驗包裝成一個希望他人能理解的故事了。
那麼經驗是如何形成的？在Emotional Design: Why We Love (or Hate) Everyday Things一書中，將經驗分成三個成型的程序：
- 直覺：對於物件本身的最直接的本能性的反應。
- 行為：物件使用起來的感覺，易用性等等。
- 思考：使用後的感覺，與生活的連結，物件本身的價值等。
參考資料：
Better User Experience with Storytelling
我們該是工人還是發想者？ Workers or Thinkers?
今天上了一堂管理相關的課程，在講師講到行人生財研總資管，講到如何提升部屬的效率的時候，我想的卻是這樣的管理方式適不適合一個軟體公司？更精確的來說，適不適合一個需要一些新思維來造成突破性發展的公司？
依我來看，人才應該要分為兩種，工人(worker)以及發想者(thinker)。
要成為一個好的工人，你要學會如何有效的使用既有的工具，並創造最大的產出。你的好壞完全取決於產出的多寡，穩定的品質。而要成為一個好的發想者，著重的卻是在改變既有的工作流程，以建立突破性的產出，或是改革性的產品。
工人看的是準點率、完成度，通常達到目標會給他們獎勵，重複著近乎機械式的動作，製造出一個又一個產物。發想者看的是思考聯通事物的能力，永遠需要跳脫現在的框架去想出改善的方法，而這些方法沒有一定的專業基礎是沒辦法做到的。
工人主產出，發想者主改善。本身其實沒有優劣之分，但以進入門檻來看，發想者明顯的需要工人的能力再加上更多的技能。如果以公司來比喻的話，鴻海是工人，蘋果是發想者。
軟體業其實是個有趣的行業，因為寫程式本身就是一個極端要求邏輯思維的工作，因此任何一位合格的程式設計師都具有一定水平的邏輯能力，這代表著只要再進一步去訓練，就有可能為成一個好的發想者。那麼既然有了那麼多潛在的發想者，如果只是專注於做著工人該做的事情，好像就有點浪費了，印度跟大陸有一批員工很便宜的~
當然，從管理的角度來看，公司的目標就是賺錢，因此我們還是需要基本的工人來提供穩定的收入。只是說，在三餐溫飽的狀態下總會起淫慾，阿不是啦，是會開始思考如何把事情做的更快更好，而這樣的一個流程，以傳統的管理學來做基本上是沒有什麼幫助。首先，會思考要改善這件事情本身就需要對工作有強烈的熱情及動力；再者，發想有可能有結果，也有可能什麼都沒有，但總會留下一些思考的蛛絲馬跡。也因此管理方式也有著根本上的不同，問題就在於，如果同時是工人又是發想者，到底要怎麼管理？
我不討厭KPI、專案管理這類方法，但畢竟這些都是給一些固定流程，可以量化的工作使用的；如果講到創新，我想應該要有更有彈性的管理方式，也許是像3M的自由時間，也許是更多的腦力激盪，也許是更多的經驗分享，但很重要的一點，確認員工對他們工作是有熱情的，並且能從中得到成就感。
其實現在這個時代，無論是產品本身還是流程、甚至管理的方式，都漸漸的變成以人為中心，考量到人的情緒及觀感才有可能成功。而既然需要以人為中心，那麼在過程中自身的投入程度，相形之下就顯得很重要了，畢竟有沒有心，很容易就能感受得出來。
標籤：
心得
iPad3 介面範本
由於iPad3與iPhone4相同，使用retina display，因此在GUI解析度上會需要做調整，這個網站提供了免費的PSD template： (如果有用的話就幫他們+1吧~要感恩~)
iPad GUI Design Template
iPad GUI Design Template
標籤：
Design
什麼是使用者體驗(User Experience)？
最近開始亂寫東西之後，最常被問到的是這個名詞－使用者體驗。
開宗明義，先來個定義文：
The creation and synchronization of the elements that affect users’ experience
with a particular company, with the intent of influencing their perceptions and
behavior.
中譯：
針對特定公司(可代換為品牌、產品、個人等等)建立或是連結的元素，目的是為了影響使用者對該公司的觀感及行為。
這些元素廣泛的包含了使用者看得到聽得到甚至聞得到摸得到的，不單僅僅是物質面的(ex. 產品的介面、網站等等)，還包含了人與人的互動(ex. 售後服務、購買經驗、社群觀感)。使用者體驗這個名詞在1990年代就被提出，直到近幾年開始慢慢的被重視。而近幾年由於技術的發展，使用者體驗可以透過更多不同技術來加強，如觸控式螢幕、社群網站、即時的線上互動等。
這裡主要講到的使用者體驗主體還是網站，但我們必須注意更多東西，如：使用者會在什麼狀況下使用？用什麼裝置來看我們的網站？通常網站的目的是讓我們能賣出產品(或概念等)，整個購買的流程是否是一個美好的經驗？想像一個狀況：使用者已經在網站上看到一個他非~~~~~買不可的產品，卻發現，他不知道要去哪裡買，或是客服電話沒人接，這算是一個好的使用者體驗嗎？因此，再看使用者體驗這件事情的時候我們應該用一個比較整體性的觀點，才不至於對某些環節有所遺漏。
那麼，使用者體驗設計師(User Experience Designer, UXD)又是幹嘛的？
以下是支付寶首席設計師對UXD的定義：
以使用者為中心的設計原則，採用焦點小組、訪談、可用(優使)性試驗、使用者測試等易用性研究方法，對使用者在使用產品過程中的體驗感受進行正確準確的評估、充分認識使用者的真實期望和目的、對使用者操作流程的預設設計進行修正和有效的改進，保證產品核心功能及使用者任務需求的平衡，促進人機介面的協調工作，提高產品易用性，減少產品BUG。
簡單的說，UXD主要就是建立一個能引導使用者完成其目標(或是潛藏著我們設定給使用者的目標)的架構。UXD是人與機器中間的最重要的橋梁，他們必須要把機器做的事情，用人的方法來呈現，並且盡可能的做到越容易了解越好。
參考資料：
CSS before, after
前陣子同事給我看了這個：Pure CSS GUI icons
裡面結合了CSS的before & after及許多語法，畫出各種不同的icon。但由於畫icon這個技巧太困難了，所以本篇只能就before & after這兩個比較少人會用到的功能介紹一下(虛弱)。
首先，先來介紹一下before & after的用法：
在目標元素的最前方/最後方放置額外的CSS元素。要注意的是最前方/最後方的意思，就直接用程式碼來看一下這是什麼意思吧。我們的CSS長的這樣：
And HTML:
而before, after裡面一定要有一個叫做content的屬性，可以是文字(如前例)，也可以是圖像、超連結：
TIPS:
裡面結合了CSS的before & after及許多語法，畫出各種不同的icon。但由於畫icon這個技巧太困難了，所以本篇只能就before & after這兩個比較少人會用到的功能介紹一下(虛弱)。
首先，先來介紹一下before & after的用法：
在目標元素的最前方/最後方放置額外的CSS元素。要注意的是最前方/最後方的意思，就直接用程式碼來看一下這是什麼意思吧。我們的CSS長的這樣：
p.box {
width: 300px;
border: solid 1px blue;
padding: 20px;
}
p.box:before {
content: "before";
border: solid 1px blue;
padding: 2px;
margin: 0 10px 0 0;
}
And HTML:
<div class="box">原始元素</div>
原始元素
有注意到其實before產生出來的元素，還是被包在<p>中間嗎？也因此你會看到box這個class的背景屬性一樣套用到:before元素之內。他們仍然都是屬於同一個元素，只是產生在元素內的最前方/最後方。這些產生出來的元素一樣可以套用各式各樣的CSS。而before, after裡面一定要有一個叫做content的屬性，可以是文字(如前例)，也可以是圖像、超連結：
p:before {
content: url(image.jpg);
}
a:after {
content: attr(href);
}PS: attr(href)是取得選取元素的href屬性，在本例就是取得a的href屬性，詳細用法可以見此。瀏覽器支援：
Before, after這兩個是CSS2.1中就有的功能，因此在瀏覽器的支援上算是滿廣泛的- Chrome 2+,
- Firefox 3.5+ (3.0 部分支援),
- Safari 1.3+,
- Opera 9.2+,
- IE8+ (也算部份，有點小問題),
- 大部分行動裝置瀏覽器
TIPS:
- 由於before, after是屬於pseudo-element，他本身不屬於DOM，因此在瀏覽器的DOM檢視中是看不到的 (不過firebug在1.8中已加入對pseudo-element的支援)。他們可以提供一些額外的效果，但是如果大量使用的話有可能造成debug上的問題，這點要多加注意。
- 這裡有非常多的應用，有不少實用的效果。
標籤：
CSS
針對多種螢幕解析度做網頁排版
想像一下十年前上網的樣子：坐在電腦前，一隻手拿著滑鼠，眼睛死盯著螢幕上開著的瀏覽器。而現在，幾乎只要有連線能力的裝置都有辦法上網，電視可以上網、遊樂器可以上網、手機可以上網，操控工具也從原來的鍵盤變成了電視遙控器、搖桿或是你的手指。瀏覽網頁的方式變得多元化之後，網頁也必須要做得更有彈性，讓使用者無論在哪種裝置上都能有良好的使用體驗。
本文就是要針對CSS3的新功能Media Queries(註1)所發展出的Responsive Web Design(註2，找到的翻譯都很怪，自己來亂翻一下－自調式設計模式)來做個介紹。其概念很簡單，既然解析度百百種，我們就先設計好幾種CSS模板(ex. 手機看的、平板看的(直式)、平板看的(橫式)、一般螢幕看的、高解析螢幕看的)，然透過Media Queries先取得瀏覽器/裝置的資訊(主要是螢幕解析度以及視窗解析度)之後，決定我們要使用哪種CSS模板來套用至網頁的排版。網頁內容不會改變，只是在不同環境下的呈現方式不同而已。
實作上來說，需要多兩個工作：1. 設計不同情境下使用的CSS，2. 利用Media Queries套用至不同瀏覽環境。喔其實還有第三點，針對不支援原生Media Queries的瀏覽器做設計，詳見後文。
第一點就不多說了，當我們把情況簡化成：手機看的、平板看的(直式)、平板看的(橫式)、一般螢幕看的、高解析螢幕看的，那麼CSS的排版就跟原本一樣，不用考慮太多。
2. 利用Media Queries套用至不同瀏覽環境，這又有兩種方式可完成：
A. 在引入CSS時做判斷
<link href="shetland.css" media="screen and (max-device-width: 480px)" rel="stylesheet" type="text/css"></link>
B. 在CSS檔案內做判斷
@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}TIPS：
- 在舊的或不支援的瀏覽器(想也知道是IE...)上要怎麼辦？
a. 現有的Javascript library：JQuery Media Queries、css3-mediaqueries-js
b. 當效果還是不良時，就沿用舊有的設計方式吧 CSS layout patterns - 針對iphone4專用的css(retina display)
- 直式橫式套用不同CSS
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel=""stylesheet" media="all and (orientation:landscape)" href="landscape.css" />
附註：
標籤：
CSS
在小地方提昇使用者體驗
1. 空白的力量：利用接近法則－當物品被擺放在一起時，會被認為是一個群組。如果你有一排功能按鈕，可以把相似的放在一起，較沒關聯性的就利用空白把他們分開吧。如下圖，看起來就會了解Airlines相較於前面的按鈕是較為不同的。
2. 圓角與直角：圓角不僅僅是好看，也會讓人認為這是物件的邊界，而直角雖然也是邊界，但旁邊有可能接著相同類似的物件，或是表格的下一個表格，見上圖。
3. 以顏色傳遞訊息：通常可以以紅色代表緊急、警告或是破壞性的資訊(錯誤訊息、刪除等)；綠色可代表儲存、更新等動作；而藍色代表一些基本功能；讓使用者可以輕易的以顏色來區別功能，。不一定要照著這樣的色調，但在整個網站內必須一致，才不會造成混淆。
4. 提示資訊：當我們有重要的或是新的資訊需要讓使用者注意的時候，可以利用動畫的效果－比起靜態圖文，人眼更容易被動作中的物件吸引。也可以直接把資訊顯示在使用者聚焦的地方(前提：你知道使用者聚焦在哪，比如輸入帳號密碼錯誤直接顯示在密碼欄位下方)。又或者以非常顯眼的方式顯示在頁面上(大字、高對比、紅色等)。
5. 幫助聚焦：如果需要跳出對話框給使用者時，最好把背景淡化，讓使用者聚焦在對話框上。一次完成一件事情，對吧？當然，前提是你的對話框提供足夠的資訊，不需要再從背景取得資訊。
6. 強化你的超連結：比起簡單的文字超連結，利用按鈕或是區塊來達成同樣的功能，對於使用者是比較友善的。原因？可以點擊的區域比較寬廣，並且比較明顯。
7. 強調重要的功能：假設你有一個對話框，目的是訂購一間旅館，那麼重要的是"完成訂購"的功能還是"取消"功能？我們可以把完成訂購設計成一個完整個按鈕，而取消只需要設定為一個簡單的超連結。
8. 多用動詞：按鈕上的文字，如果放的是"是"、"否"，往往使用者需要回頭再看一次動作內容才有辦法執行動作。但如果是"取消"、"完成"、"存檔"這些比較明確的動作，則可幫助使用者快速確認他們正在執行的動作。
9. Auto-focus/Re-focus：幫使用者把游標放至頁面中最有可能使用的功能上，ex:當你提示表單時，自動幫使用者把游標放到地一個欄位是個好方法；又或者是當帳號密碼填寫錯誤時，把游標移至錯誤欄位。
10. 表單欄位提示資訊：可以把資訊直接顯示在文字輸入欄位中，直接告訴使用者這個欄位在幹嘛。當然，當游標移到資訊上的時候記得把提示資訊移除，不要製造使用者的麻煩。(HTML5的input物件有個placeholder屬性就是提供這樣的功能)
11. 使用圖示：圖示的好處是簡單且不占空間，但注意沒有文字輔助的圖示有時候不一定會提供足夠的資訊(不同使用者對相同圖示的認知並不一定相同，由其是國際化網站更須注意這問題)。只要圖示能明確的顯示出代表的功能，那麼對介面簡潔度的提升會有很好的效果。
12. 不要讓使用者瞎等： 當有任何功能需要讓使用者等後一段時間時，記得用一個progress bar告訴他們進度如何，儘管他們無法改變等後時間，但使用者不喜歡無法掌控的等候，這會讓他們更快(而且快很多)的失去耐心。
13. 復原功能：第一，重要物件要被刪除時永遠要提示；第二，絕對不要真的幫使用者把物件刪除，至少保留一段時間，並提供他們即時復原的功能。我們永遠都會有做錯事的時候，讓使用者有個回頭的機會。
2. 圓角與直角：圓角不僅僅是好看，也會讓人認為這是物件的邊界，而直角雖然也是邊界，但旁邊有可能接著相同類似的物件，或是表格的下一個表格，見上圖。
3. 以顏色傳遞訊息：通常可以以紅色代表緊急、警告或是破壞性的資訊(錯誤訊息、刪除等)；綠色可代表儲存、更新等動作；而藍色代表一些基本功能；讓使用者可以輕易的以顏色來區別功能，。不一定要照著這樣的色調，但在整個網站內必須一致，才不會造成混淆。
4. 提示資訊：當我們有重要的或是新的資訊需要讓使用者注意的時候，可以利用動畫的效果－比起靜態圖文，人眼更容易被動作中的物件吸引。也可以直接把資訊顯示在使用者聚焦的地方(前提：你知道使用者聚焦在哪，比如輸入帳號密碼錯誤直接顯示在密碼欄位下方)。又或者以非常顯眼的方式顯示在頁面上(大字、高對比、紅色等)。
5. 幫助聚焦：如果需要跳出對話框給使用者時，最好把背景淡化，讓使用者聚焦在對話框上。一次完成一件事情，對吧？當然，前提是你的對話框提供足夠的資訊，不需要再從背景取得資訊。
6. 強化你的超連結：比起簡單的文字超連結，利用按鈕或是區塊來達成同樣的功能，對於使用者是比較友善的。原因？可以點擊的區域比較寬廣，並且比較明顯。
7. 強調重要的功能：假設你有一個對話框，目的是訂購一間旅館，那麼重要的是"完成訂購"的功能還是"取消"功能？我們可以把完成訂購設計成一個完整個按鈕，而取消只需要設定為一個簡單的超連結。
8. 多用動詞：按鈕上的文字，如果放的是"是"、"否"，往往使用者需要回頭再看一次動作內容才有辦法執行動作。但如果是"取消"、"完成"、"存檔"這些比較明確的動作，則可幫助使用者快速確認他們正在執行的動作。
9. Auto-focus/Re-focus：幫使用者把游標放至頁面中最有可能使用的功能上，ex:當你提示表單時，自動幫使用者把游標放到地一個欄位是個好方法；又或者是當帳號密碼填寫錯誤時，把游標移至錯誤欄位。
10. 表單欄位提示資訊：可以把資訊直接顯示在文字輸入欄位中，直接告訴使用者這個欄位在幹嘛。當然，當游標移到資訊上的時候記得把提示資訊移除，不要製造使用者的麻煩。(HTML5的input物件有個placeholder屬性就是提供這樣的功能)
11. 使用圖示：圖示的好處是簡單且不占空間，但注意沒有文字輔助的圖示有時候不一定會提供足夠的資訊(不同使用者對相同圖示的認知並不一定相同，由其是國際化網站更須注意這問題)。只要圖示能明確的顯示出代表的功能，那麼對介面簡潔度的提升會有很好的效果。
12. 不要讓使用者瞎等： 當有任何功能需要讓使用者等後一段時間時，記得用一個progress bar告訴他們進度如何，儘管他們無法改變等後時間，但使用者不喜歡無法掌控的等候，這會讓他們更快(而且快很多)的失去耐心。
13. 復原功能：第一，重要物件要被刪除時永遠要提示；第二，絕對不要真的幫使用者把物件刪除，至少保留一段時間，並提供他們即時復原的功能。我們永遠都會有做錯事的時候，讓使用者有個回頭的機會。
Work smart, work passionate － 《Rework》 讀後心得 下
接續上篇
11. Good enough is fine：沒有什麼東西是完美的，同樣的你的產品也是。一但你覺得夠好了，夠用了，就把他放在陽光下讓大家檢視吧。一方面避免閉門造車的窘境，一方面能快速得到使用者回饋，也才能做出更完善的產品。當然，我們要先確保"Good Enough"。
12. Go to sleep：過度的工作引起的後果不僅只是睡眠不足而已，效率下降、頭腦不清楚導致的錯誤決策、長期的身心靈壓力失衡、靈感貧乏，其實對你的工作品質沒有一樣是好的。不過像本篇作者昨天文章寫一半就放棄跑去睡應該不屬於這種範疇就是，只是單純的懶惰。
13. Don't copy：最近網路上看到一篇"做事的十個順序"，其中有一點是－先仿造，再創造。而本書卻又說不要仿造，其實兩者是先後的順序，彼此並不衝突。剛開始的時候我們什麼都不懂，一定是看著別人學習，慢慢自己摸索站起來，等能夠自己站起來之後，就應該走自己的路而不是別人往哪走就跟著往哪走。重點是，就算我們是仿造，也要搞清楚整個仿造的流程，為什麼要這麼做，先把基礎打好才有創造的空間及力量。
14. Pour into your product：簡單的說，就是放感情。也就是上一篇文末所提到的，對你的工作/作品/產品投入你的感情。如果你自己都不愛自己做出來的東西，憑什麼覺得別人會喜歡呢？而且你會發現使用者對於這種情感的連結很敏感，他們已經受夠了機械式冷冰冰的產品。
15. Focus on you instead of they：在商場上競爭，要知己知彼，但絕對不是被牽著鼻子走。要有自己的目標、信念，不要因為對手做了什麼事情就輕易的更改，堅持自己的立場。
16. Say no：我們是社交動物，也因此多數人討厭拒絕以及被拒絕，因此常常在呈現一種表面上和平的假像。但實際上就做自己該做的、能做的，對於其他自己做不到的事情，就讓其他更有能力的人/競爭者去完成吧。
17. Don't confuse enthusiasm with priority：對事物有熱情很好，但情緒會影響我們的判斷力，試著別在對一件事情過度投入的時候採取太大的行動，先冷靜下來檢視全盤計劃，別打亂了真正的優先順序。
18. 沒有人喜歡虛假，不完美沒關係：產品也好，人也好，我們都不喜歡在別人面前展現出自己的缺點，但缺點有時候更顯現出這是個真實存在的物品。所以不要怕，以最真誠的心去做你自己吧。(寫到這有點想要念佛號了)
19. Build a rockstar environment：良好的工作環境對於工作品質的提升比想像中的大很多，也能激發更多的靈感。同時，員工們也會認為這是公司對他們的一種尊敬，進而彼此產生的互相尊重的正向情感。
20. Sound like you：做自己，好自在。我們已經不是在工業時代了，所有東西都是工業化下的產物。我們所在的是一個充滿了情感連結的世界，所以就儘管的把"你"展現出來吧。
標籤：
讀書心得
Work smart, work passionate － 《Rework》 讀後心得 上
Rework (中譯：工作大解放) 是一本由知名軟體公司Signal37所發行的書，在書中提出了他們對於工作、公司以及產品獨特的看法。跟Signal37本身一樣，書內的論點許多非常的跳脫框架，也許這就是他們之所以能夠與其他人不同卻又那麼成功的地方。心得都寫了就來說一下幾個比較有感受的主題吧。
1. 別再叫創業家，改叫發動者吧(Starter翻成開創者會不會比較好)：你只需要一個理念、一份自信，以及開始的動力，就可以開始你自己的事業。為了自己的喜好而開始的一連串活動，解決遇到的問題也許只是個順手，但有很有可能創造意外的收穫。
2. Draw a line in the sand(表明立場)：幾天前的發文裡頭也有講到類似的概念，表明自己的立場其實對自己是有好處的，你有自己的信念、堅持，自然會吸引到相同特質的客戶，也會強化這樣的連結。有明確的原則也會簡化許多決策的複雜度。
3. 外來資金少碰為妙：第一，花別人的錢很容易不手軟；第二，掌控權在誰那？；第三：開始專注於金錢上的問題而非產品本身的問題。這三個問題加起來結論就是－錢總是會被花在非當初預定的目標之上。
4. You need a commitment strategy, not an exit strategy：創投總愛問退場機制是什麼，因為他們擔心自己的錢無法回收。但試想，有一天你追到一個心儀已久的對象，你會先問退場機制是什麼嗎？退場機制是給害怕失去的人的，而實踐承諾的計畫才是真正能產出實物的道路。
5. Less is a good thing：沒有時間、沒有錢、人，這些限制其實都是激發創意的因子，如果什麼都有了，我們需要創造什麼呢？我們應該要謹慎的檢視這些限制，並且在限制內去發揮我們的創意。
6. You're better off with a kick-ass half than a half-assed whole：一次好好的做完一件事吧!多不是不好，但那是資源足夠的人才能玩的遊戲，對於小公司(由其新創公司)，專注專注再專注吧!
7. 從核心開始，忘掉細節：你要做的是什麼，最核心的最無法取代的是什麼，先把核心確定好才開始發展出架構，架構才發展出細節。有人是先決定磁磚要什麼，然後才決定要蓋什麼樣的房子的嗎？
8. Focus on what won't change：專注於解決人的基本需求，而非最新的趨勢跟技術。要記得技術是拿來解決基本需求的，而基本需求是數十年不會變的，這才是應該專注的地方。
9. Get real：用實際的東西來討論，遠比抽像憑空的對談來的有效。
10. 干擾是大敵：溝通討論是好的，但我們也需要專心的把工作完成，思緒的轉換是需要時間的。應該規定不被打擾的時間好讓大家能專心工作。
儘管說想法跳脫框架，但有一點是很重要的：對你的工作/作品/產品投入你的感情。如果你自己都不愛自己做出來的東西，憑什麼覺得別人會喜歡呢？
才寫了十條就累了，改天再繼續寫吧，看來我對這種東西沒啥熱情阿(菸)
1. 別再叫創業家，改叫發動者吧(Starter翻成開創者會不會比較好)：你只需要一個理念、一份自信，以及開始的動力，就可以開始你自己的事業。為了自己的喜好而開始的一連串活動，解決遇到的問題也許只是個順手，但有很有可能創造意外的收穫。
2. Draw a line in the sand(表明立場)：幾天前的發文裡頭也有講到類似的概念，表明自己的立場其實對自己是有好處的，你有自己的信念、堅持，自然會吸引到相同特質的客戶，也會強化這樣的連結。有明確的原則也會簡化許多決策的複雜度。
3. 外來資金少碰為妙：第一，花別人的錢很容易不手軟；第二，掌控權在誰那？；第三：開始專注於金錢上的問題而非產品本身的問題。這三個問題加起來結論就是－錢總是會被花在非當初預定的目標之上。
4. You need a commitment strategy, not an exit strategy：創投總愛問退場機制是什麼，因為他們擔心自己的錢無法回收。但試想，有一天你追到一個心儀已久的對象，你會先問退場機制是什麼嗎？退場機制是給害怕失去的人的，而實踐承諾的計畫才是真正能產出實物的道路。
5. Less is a good thing：沒有時間、沒有錢、人，這些限制其實都是激發創意的因子，如果什麼都有了，我們需要創造什麼呢？我們應該要謹慎的檢視這些限制，並且在限制內去發揮我們的創意。
6. You're better off with a kick-ass half than a half-assed whole：一次好好的做完一件事吧!多不是不好，但那是資源足夠的人才能玩的遊戲，對於小公司(由其新創公司)，專注專注再專注吧!
7. 從核心開始，忘掉細節：你要做的是什麼，最核心的最無法取代的是什麼，先把核心確定好才開始發展出架構，架構才發展出細節。有人是先決定磁磚要什麼，然後才決定要蓋什麼樣的房子的嗎？
8. Focus on what won't change：專注於解決人的基本需求，而非最新的趨勢跟技術。要記得技術是拿來解決基本需求的，而基本需求是數十年不會變的，這才是應該專注的地方。
9. Get real：用實際的東西來討論，遠比抽像憑空的對談來的有效。
10. 干擾是大敵：溝通討論是好的，但我們也需要專心的把工作完成，思緒的轉換是需要時間的。應該規定不被打擾的時間好讓大家能專心工作。
儘管說想法跳脫框架，但有一點是很重要的：對你的工作/作品/產品投入你的感情。如果你自己都不愛自己做出來的東西，憑什麼覺得別人會喜歡呢？
才寫了十條就累了，改天再繼續寫吧，看來我對這種東西沒啥熱情阿(菸)
標籤：
讀書心得
完形法則
來講一個介面設計上很重要的概念，完形(Gestalt)：這是二十世紀初由德國心理學家所提出，用以說明人類視覺是如何去解釋所看到的，並轉化為認知的物件的法則。主要有六大概念：
1. 接近 (Proximity)
當物品被擺放在一起時，會被認為是一個群組。
看看以下兩張圖，哪張的方塊會讓你覺得是一體的?
例圖A:
例圖B:
2. 相似 (Similarity)
相似的物件會被看做一個群組或是一種規律，見下圖：
前三個人型圖案會被認為是一起的，而第四個人型則跳脫了這個規律(這也有個專有名詞叫做anomally)。規律會讓人認為這些物件是相似的，而規律中的不規律的則會有凸顯、強調的效果。
tips: 在介面設計上我們經常把接近與相似這個兩種法則一起使用：我們會把相關的功能按鈕排列在一起、或是表單的選項放在彼此旁邊，這時他們不但相近，外觀也很相似。在基本概念上這不僅僅是方便使用者操作，更可以明確的告訴使用者：hey~這些功能/選項是互相有關聯性的。
3. 連續 (Continuity)
我們的視覺傾向連續/延續物件的特性，如下圖：
你的視覺是不是延著中間的曲線，往楓葉看呢?
tips: 可以藉由物件的移動方向、指向，轉移使用者的注目焦點。
4. 閉合 (Closure)
如果物件之間彼此能組合(接續)成一圖型，儘管中間沒有接續關係，我們仍然會傾向於看成一個整體圖型。如下圖，你看到的是三個英文字母還是一堆藍色長方型？
再看另一張圖：
這個非封閉性的圖像，看起來是不是像個熊貓？
tips: 有時候只需要揭露部分資訊(圖片/文字)，使用者就會自行把他補完，如果揭露的資訊不足，則可以引導使用者取得更詳盡的資訊。
5. 對稱 (Symmetry)
如果兩個(或多個)物件，以中心點互相對稱的話，則會被認為是同一個物件。
紅色與藍色的曲線組合成了一個圖型
看到的是六個括號，如果以接近法則來說應該是1+2+2+1(兩邊單獨，中間兩對)個括號，但實際上?
6. 圖型-背景 (Figure-Ground)
圖型對我們來說有著前景跟背景之分，比如說你現在看的字，對你來說就是前景。但很多時後前景會依照我們所關注的點不同而有不同的效果
這是一個G加上幾個點，還是一個腳印呢?
tips: 設計的時候應盡量讓前景/背景明顯的區分，例如跳出對話框時會把背景淡化，否則會混淆使用者的關注目標。
在設計介面時，應該注意盡量避免違反這些概念，ex:對某物件的操作功能散落各處(違反接近概念)、每個操作功能長的不一樣(違反相似概念)，這樣會大大的影響使用上的流暢度。反之如果能夠把這些概念落實到介面上，則能夠提升使用流暢度，加強使用者體驗，達成一個較易學習使用的介面。
參考資料
a. http://en.wikipedia.org/wiki/Gestalt_psychology
b. http://she520.pixnet.net/blog/post/21525026-%E7%94%9F%E6%B4%BB%E7%BE%8E%E5%AD%B8%E6%A6%82%E8%AB%96
c. http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
d. Designing with Mind in Mind
1. 接近 (Proximity)
當物品被擺放在一起時，會被認為是一個群組。
看看以下兩張圖，哪張的方塊會讓你覺得是一體的?
例圖A:
例圖B:
2. 相似 (Similarity)
相似的物件會被看做一個群組或是一種規律，見下圖：
前三個人型圖案會被認為是一起的，而第四個人型則跳脫了這個規律(這也有個專有名詞叫做anomally)。規律會讓人認為這些物件是相似的，而規律中的不規律的則會有凸顯、強調的效果。
tips: 在介面設計上我們經常把接近與相似這個兩種法則一起使用：我們會把相關的功能按鈕排列在一起、或是表單的選項放在彼此旁邊，這時他們不但相近，外觀也很相似。在基本概念上這不僅僅是方便使用者操作，更可以明確的告訴使用者：hey~這些功能/選項是互相有關聯性的。
3. 連續 (Continuity)
我們的視覺傾向連續/延續物件的特性，如下圖：
你的視覺是不是延著中間的曲線，往楓葉看呢?
tips: 可以藉由物件的移動方向、指向，轉移使用者的注目焦點。
4. 閉合 (Closure)
如果物件之間彼此能組合(接續)成一圖型，儘管中間沒有接續關係，我們仍然會傾向於看成一個整體圖型。如下圖，你看到的是三個英文字母還是一堆藍色長方型？
再看另一張圖：
這個非封閉性的圖像，看起來是不是像個熊貓？
tips: 有時候只需要揭露部分資訊(圖片/文字)，使用者就會自行把他補完，如果揭露的資訊不足，則可以引導使用者取得更詳盡的資訊。
5. 對稱 (Symmetry)
如果兩個(或多個)物件，以中心點互相對稱的話，則會被認為是同一個物件。
紅色與藍色的曲線組合成了一個圖型
看到的是六個括號，如果以接近法則來說應該是1+2+2+1(兩邊單獨，中間兩對)個括號，但實際上?
6. 圖型-背景 (Figure-Ground)
圖型對我們來說有著前景跟背景之分，比如說你現在看的字，對你來說就是前景。但很多時後前景會依照我們所關注的點不同而有不同的效果
這是一個G加上幾個點，還是一個腳印呢?
tips: 設計的時候應盡量讓前景/背景明顯的區分，例如跳出對話框時會把背景淡化，否則會混淆使用者的關注目標。
在設計介面時，應該注意盡量避免違反這些概念，ex:對某物件的操作功能散落各處(違反接近概念)、每個操作功能長的不一樣(違反相似概念)，這樣會大大的影響使用上的流暢度。反之如果能夠把這些概念落實到介面上，則能夠提升使用流暢度，加強使用者體驗，達成一個較易學習使用的介面。
參考資料
a. http://en.wikipedia.org/wiki/Gestalt_psychology
b. http://she520.pixnet.net/blog/post/21525026-%E7%94%9F%E6%B4%BB%E7%BE%8E%E5%AD%B8%E6%A6%82%E8%AB%96
c. http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
d. Designing with Mind in Mind