終於開始PO自己的東西了。
2014年7月30日 星期三
2014年7月17日 星期四
什麼是使用者導向設計？
「簡單易用或許是無形的，但沒有它卻是萬萬不行。」─IBM
我發現大家，尤其是開發者的圈子裡，對使用性最普遍的迷思是：使用性是一種主觀的感覺。這些人認為使用性可以依照他們的主觀判定，與使用者無關，而且最好直接跟著大老闆的風向球走，有誰在乎紅配綠會影響閱讀興這類的事情呢？所以，當你試著在團體或企業裡導入使用者導向設計時，你可能會遭受一些阻礙與挑戰。
或許你覺得自己是團體裡唯一在乎使用者經驗的人，每次你跟同事們談起良好的介面設計有多重要時，他們總是不當一回事。的確，這是一條漫長又寂寞的路，但還是有些方法可以為你的理念發聲並降低批評的聲浪。其中之一就是教育你的團隊或組織這樣的設計方式有什麼價值。要這樣做，你就得了解甚麼是使用者導向設計，更重要的是：甚麼不是使用者導向設計。
使用者導向設計(UCD)不等於使用性(Usability)
我知道把這兩個名詞混在一起會造成你們的困擾。使用性一開始屬於人因學(humman factors)的範疇，研究人與產品之間的互動關係。實務上，使用性可以應用到各種產品，無論是烤麵包機、大門手把，甚至是它的包裝。
人機互動(Human computer interaction，HCI)源自於使用性，但聚焦在人與電子產品之間的互動關係。
使用者導向設計(User-centered design，UCD)則是從人機互動衍生而來的設計方法。基本上，它可以幫忙開發者和設計者們做出符合使用者需求的應用程式。
我們可以這麼說：實踐使用者導向設計可以確保你的應用程式擁有良好的使用性，因為這本來就是一體的！把使用者放在開發流程裡，自然就可以免除許多設計上的不確定性，並擄獲使用者的心。
另一個主題是使用者經驗(User experience，UX)，通常是指產品整體的使用體驗。除了功能面之外，還包括使用起來愉悅的程度和令人著迷的感受，因此使用經驗一詞所涵蓋的範圍會比較軟體本身還要大。落實使用者導向設計也可以提升應用程式的使用體驗。
UCD不是主觀的
使用性及其所有的基礎理論都是由科學所建構而成。它基於人因學、心理學、人類學等各領域的知識，絕對不是主觀認定或自由心證的。
使用者導向設計必須證明其設計決策是有效的，任何設計決策都應該來自觀察和傾聽，而非一時興起的念頭或個人偏好，這點與主觀認定的看法正好相反。使用者導向設計一但做得好，使用者自然就會對應用程式產生好感。
我們常聽到：「數字會說話」。使用者導向設計是依據數據和資料來支持設計決策的。其中一個方法就是使用性測試(詳見第9章)。另外，藉由直接觀察使用者並做出統計，也是可以避免主觀假設的偏誤。這些資訊都提供了更可靠的基礎，作為軟體開發的參考。
UCD不只是美學設計
這可能使人們對使用者導向設計最常見的迷思了。這些人(大部分是我們開發者)認為使用者導向設計就是美學設計。當然，應用程式的視覺設計也是很重要，但並不是一切。
使用者導向的思維不僅是思考如何讓東西看起來好看而已，也不只是做出絢麗的動畫及流暢的轉場效果；使用者導向設主要是要確保應用程式能滿足使用者的需求。一個外型好看的產品，搞不好實際使用起來是一場夢靨。
但是反過來說，良好的視覺設計的確是使用者導向設計重要的一環。使用性測試可以幫助我們揪出那些不合理的使用介面(UI)。也就是說，要讓產品成功，使用者介面是很重要的，但並不是一切。
UCD不會白費金錢和時間
執行使用，者導向設計步是一件容易的事，因此需要花費大量的時間反思和觀察。老實講，如果你用開發的時間去思考設計問題，你可能會覺得開發進度毫無進展；甚至當你從使用性研究中發現了設計上的問題，因此得放棄先前的程式碼，這時候更是會讓人感覺進度在倒退！
使用者導向設計就是要了解使用者對產品有什麼意見。有時候我們不想聽到他們的批評，或自認為早就知道使用者在想想什麼。接受回饋也意味著接受抱怨，沒有人樂意聽到別人說自己的產品有多麼糟糕。當某人在給予建議時，可能會說出「這個應用程式沒有什麼價值」之類的話。
為了躲避這些批評，開發者經常對使用者視而不見，不讓他們發表意見；於是我們只專注在寫程式，希望與程式不相干的事情可以船到橋頭自然直。
以上這些想法我都能理解。身為開發者，我們必須熟悉的工具及知識越來越多，因應時代而改變的新技術、新軟體架構如雨後春筍出現。這一分鐘才剛弄懂一套複雜的API(應用程式介面)，下一分鐘可能有看到部落格文章說這個技術已死，將會有一個全新的API取代它。
每個程式開發者都知道，在這一行必須不斷學習新知，並投許多時間和資源，才能跟上日新月異的技術。這些外在的挑戰使得開發者被迫沉淨再技術的世界，隔絕那些讓他們分新的事務，像是使用性測試。
使用性價值的推廣者Billy Hollis認為這一層隔閡對開發者帶來很大的挑戰。他暗示開發者設全再使用性領域失去了領導地位，因為他們無法再學習新技術和了解使用者之間取得平衡，最後只能選擇其中一種。所以，大部分的開發者都只能得到程式碼，他們只想把時間花在學習新的API上，Hollis說：
開發者圈子裡面的人都非常熱愛專研程式技術，以致對於其他的事情不感興趣。我想這也是造成開發和設計之間隔閡的原因之一。
使用者導向並不是非A即B的概念，你可以一方面追尋新技術，另一方面又將使用者的回饋納入流程中，不是只有使用者經驗的專家才能運用這些實用的設計準則。
Hollis用學習滑雪做比喻：
當你去滑雪的時候，我想你不會期待自己學習奧運選手的滑雪動作。你只能學著如何安全抵達上底，不要跌到就很好了。
我們必須要打破「不寫程式就表示進度停滯」的心態，接受「花心思在使用者身上」本來就是開發流程的一部分，就如同吸引新技術或寫程式一樣必須且重要。有一些開發者花很多時間決定要使用那一種軟體架構，卻不花時間思考如何提供使用者更有價值的東西；他們似乎假設他們點子的價值是無庸置疑的。
事實上，如果好好地執行使用者導向設計，是可以節省時間的。如果能夠確認使用者的需求，就不會白費成本或走冤枉路。請注意，如果無法滿足使用者的期待而必須重新開發應用程式，其實反而更浪費時間。
我認為暫時跳脫程式，可以幫助你思考新的道路。先放鍵盤和滑鼠，休息一下，做個使用者調查或使用性測試，你將會用不同的角度來看待問題。當你在度回來寫程式時，會更有想法，並更清楚需要改進的方向。
你也許想做使用者研究，但經費上不允許。畢竟，時間就是金錢，把時間花在寫程式以外的事情乍聽之下是不符合經濟效益的。
本書討論範圍並不包含使用者導向設計投資報酬率(ROI)的驗證，但是我鼓裡你們把使用者導向設計當作避免「浪費」金錢的方法。修復產品的錯誤和支援使用者克服操作上的困難，一樣要耗費不少成本。
Arnold Lund在interactives雜誌上曾提到：
把使用性測試當作軟體品質管理的一部分，並且證明他可以降低將來程式錯誤所造成的成本花費。這些成本包含軟體導入的支援成本，以及導入的維修成本。
如果你無法說服主管擁抱使用者設計所大來的效益，可以考慮用另一種財務的角度來看，例如使用者導向設計可以避免其他的花費。
UCD不是程式錯誤報告
你可能認為你早就在做使用者導向設計了，因此你做了程式錯誤的回饋機制。
這的確值得讚許，並且應該持續下去，但千萬別把錯誤報告誤當使用者研究。你可以持續關注使用者回報的錯誤訊息，但這無法讓你得到他們最根本的需求。
假設使用者回報一筆功能無法正常運作的問題，你可能馬上就一頭栽進程式碼、尋找修復的方法，企圖盡快地解決他。
如果你沒有試著問使用者：「發生這個問題時，他想要完成目標是什麼？」那麼你就沒有辦法獲得有意義的啟發，進而從根本上改善你的程式。
探索並詢問使用者一些非關程式錯誤的問題，可能會發現使用者想要用你原本沒想過的方式來使用軟體。這時候你就可以思考如何改良功能，讓操作流程更清楚、更好用，甚至可以激發出新的點子，讓你的應用程式更多價值。
以我的例子來講，我曾經自作聰明設計一個自動化的錯誤回報信件，信件裡面包含了錯誤發生時的一切技術細節及錯誤訊息。每當使用者發生程式錯誤時，這封信件就會自動產生，並寄到我信箱，我完全不用浪費任何時間根使用者溝通。現在想起來，真是一個天大的錯誤！
有一個使用者每天都要送出紀錄，程式就會發生錯誤。我收到錯誤回報後，花了好幾個小時檢查程式碼，試著找出與法或成是邏輯上的問題。我看遍了所有資料庫的連結，甚至還檢查資料庫本身。後來實在束手無策，於是只好打點話給那位使用者，問她做了什麼操作以致造成錯誤，結果真像終於大白；原來她在填寫某一表單的欄位時，輸入了無效字元。
的確，這不應該發生的事。當使用者可能會輸入這些特殊字元時，我應該要從程式上做出一些限制，但真正令我感到驚訝的是：她竟然想用一般的意見欄位，填寫重要的醫療資料。
跟她溝通後，我才知道要建立更多的輸入欄位，才能滿足使用者的需求。由此看來，自動產生的錯誤報告並不能夠完整表達出問題的全貌，如果只單純把錯誤修復了，而錯失了與使用者對化的機會，我無法察覺這個新的使用者需求，使用者恐怕繼續使用一般的意見欄填寫重要的醫藥資訊。
因此，完整的使用者回饋不應該只是錯誤訊息的回報。錯誤報告應該被是為設計策略的其種輔助資訊而已。
UCD不會模糊焦點
你是否曾在聽取使用者需求時，馬上就神游到技術方案裡？
- 該做成網頁好呢？還是直接連結資料？
- 這個系統可以建立在公司的入口網站上嗎？
- 該使用那一種程式語言呢？
- 應該可以在產品上建立一些模組吧？
- 有機會把它做成行動裝置的應用程式嗎？
這些技術性的思考都沒有錯，但其切入點和客戶需求無關，因為我們還不了解他們的需求！使用者導向設計始終關注客戶最核心的需求，讓開發者獲得最有義意的資訊，避免為了技術而使用技術。
就算真的有技術上的障礙要克服，開發者也一定能夠在一開始就找到真正合適的技術解決方案。使用者導向設計先從需求出發，在尋ˋ襖技術解決方案。這種目的導向的方式可以幫助我們依循正確的程序完成開發任務。我們會在第4章詳細探討。
現在我們知道關注使用性並不是多餘的工作。事實上，他反而能夠幫助我們聚焦在正確的問題上，避免做白工。使用者導向設計的流程會讓你保持正確的心態，問對的問題，並挑戰任何先入為主的觀念。
以下是幾個非技術面的問題，提供你作為一開始思考的線索：
- 使用者需求為何？這是一個技術可以解決的問題嗎？還是一個程序或政治問題？又或者是工作流程、教育訓練等其他的問題？
- 為什麼使用者對這個訊息感到困惑？使用者如何詮釋此訊息？我應該用不同的方式解釋它嗎？
- 為什麼使用者會在這兩個畫面之間迷路？
- 為什麼使用者沒有看到這個警告？只是因為忽略了嗎？如果是，為什麼？
- 為什麼使用者會用錯誤的方法完成操作？有更好的介面設計讓操作更順利嗎？
使用者研究最基本的課題就是問為什麼。使用者導向設計讓我們開始關心使用者及他們的行為；這樣的開發架構可以協助我們找出對使用者需求最有效的回應方式。
結合使用性、使用者導向設計及使用者經驗，你將以一個更完整的程序來開發應用程式。這需要專注、決心、甚至一點點的犧牲；然而今日市場競爭如此激烈，如果忽略這些做法的話，對你及你的使用者來說都是一種傷害。
2014年7月16日 星期三
什麼是Node.js
Node.js是一個開放原始碼(Open Source)的應用程式框架(Application Framework)，採用了效能極佳的Google V8 Javascript引擎(Google/Chromium瀏覽器內建的javaScript引擎)。自2009年公開發表以來，Node.js即備受世界各地軟體開發者矚目，才短短幾年的發展，一躍成為當今最紅的新星技術之一，在2011年12月更一度榮登Github關注排行的第一名，超過了Rubyon on rails，潛力不容小覷。
Node.js之所以這麼紅，並非空穴來風，主要雲因是Node.js選擇了有許多開發人員的JavaScript語言為基礎。要知道，拜網際網路World Wide Web的盛行所賜，無論軟體業界、非軟體業、業餘開發者亦是學生，在今天多多少少都懂得如何使用javaScript，全世界的使用者數量相當可觀且難以估計。這也是為什麼，有這麼多人在關注Node.js這項新技術。你也可以看到各家國際知名公司，如谷歌(Google)、微軟(Mircosoft)和雅虎(Yahoo)，都投入Node.js的發展。
另一個走紅原因，就是JavaScript的事件驅動(Event-driven)特性，意外的能在網站後端應用產生極大的效益和功用，不但簡化了即時應用(如：聊天室、資料即時更新、社群訊息推送等)的實作，效能更是相當優異。這讓全世界掀起社群風的各類網站服務，無論原本用什麼語言開發，紛紛採用和研究Node.js，甚至視Node.js為最佳解決方案。
在過去，JavaScript只不過是一個跑在瀏覽器上的腳本語言(Script Language)，能力相當有限，頂多是制一些網頁上的元素、簡單的邏輯、設計使用者介面、動化和瀏覽動線。更由於瀏覽器的安全保護因素，JavaScript語言幾乎完全沒有機會與系統接軌，操作低階的系統功能(如：檔案存取I/O)，更不用說進行硬體控制。因此，一直許多人戲稱JavaScript是個玩具語言，若不是近年來前端使用者介面設計議題抬頭，JavaScript可能至今都不會有太多人重視。
不過，Node.js提供了JavaScript使用者新的機會，讓JavaScript程式不再綁手綁腳的只能跑在瀏覽器上或只能開發前端應用程式，而是可以獨立執行，並開發伺服器上的後端應用，更進一步運行於桌面系統和崁入式系統。
簡單來說，Node.js除了讓JavaScript引擎獨立，不在需要已靠瀏覽器運行外，也設計了一系列機制和APIs，擴充了許多JavaScript語言沒有的強大功能，諸如模組機制(Module)、檔案系統存取(File System)、網路存取(Socket)和程序控制(Process)等。Node.js讓javaScript從此脫胎換骨，令開發者完全可以開始運用JavaScript開發各類用途的應用程式。
節錄自：不一樣的Node.js
2014年7月15日 星期二
電子商務網站的設計技術分析 - 圖像原則
圖像原則
1. 圖像性質風格前後要一致。
2. 陰影方像表現方式要一致。
3.同樣指示圖片大小要一致。
4. 圖像的排列順利要有秩序。
5. 謹慎使用濾鏡和動態效果。
天貓網站圖像型與CSS的關係，應符合幾項呢？
同樣的分類方式，好像用一個板切出來，相同中有不同，不同中又有相同，比較不會單調。
參考資料：http://vr.theatre.ntu.edu.tw/fineart/chap16/chap16-04.htm
七月十五日 - Google Material Design
有點扁平外加一點擬真設計，是目前流行的介面設計。
有一定的規則可尋，可以檢視看看！
網址：http://www.ui.cn/Material/index.html
:last 與 :last-child 的差別
: fisrt / :last 是從整組元素取出最初與最後的元素；
: fisrt-child / :last-child 是以父元素為基準，分別每個父元素下層的最初與最後的子元素。
換句話說，只要同時存在多個父元素，就會取出同等數量的最初/最後的子元素。
一定學會jQuery的36堂關鍵課程 第二章
利用階層指定元素的選擇器
(1) 取出某個元素底下的元素
$('#eva a').css(...);
(2) 取得某個元素最親近一層的元素
$('#eva > a').css(...);
(3) 取得某一個元素的下一個元素
$('#eva + li').css(...);
(4) 取得某個元素之後的所有元素
$('#eva ~ li').css(...);
依照出現順序取得目標元素
(1) 取出最初/最後的元素
$('#eva > li:first').css(...);
$('#eva > li:last').css(...);
(2) 取出偶數編號或奇數編號元素
$('#eva li:even').css(...);
$('#eva li:odd').css(...);
(3) 取出第n個元素
$('#eva > li:eq(2)').css(...);
(4) 取出第n個元素之前/之後的元素
$('#eva > li:lt(2)').css(...);
$('#eva > li:gt(2)').css(...);
利用子元素與字元作為篩選元素的條件
(1) 取出下層裡含有特定字元的元素
$('li:contains("xml")').css(...);
(2) 篩選擁有/空白內容的元素
$('td:empty').css(...);
(3) 以吻合特定選擇器的子元素作為篩選目標元素的條件
$('p:has(cite)).css(...);
專門取得子元素的篩選器
(1) 取得開頭或結尾的子元素
$('ul li:first-child').css(...);
$('ul li:last-child').css(...);
(2) 每隔n個取出子元素
$('ul > li:nth-child(3n)').css(...);
(3) 取得唯一的子元素
$('p img:only-child').css(...);
利用屬性值篩選目標元素
(1) 以擁有特定屬性為條件篩選目標元素
$('a[target]').css(...);
(2) 以特定屬性是否等於/不等於某值為篩選元素條件
$('a[target="_blank"]').css(...);
(3) 篩選屬性值部分一致的元素
a. 以屬性值開頭符合某字串為條件篩選目標元素(開頭一致)
$('[屬性名稱^=值]').css(...);
b. 以屬性值開頭符合某字串為條件篩選目標元素(結尾一致)
$('[屬性名稱$=值]').css(...);
c. 以屬性值含有某字串為條件篩選目標元素(部分一致)
$('[屬性名稱*=值]').css(...);
(4) 同時使用多個屬性篩選器
$('a[target^="http:/"][target]').css(...);
其他篩選器
(1) 只篩選標題的篩選器
$(':header').css(...);
$('a:not([target])').css(...);
(3) 取出特定的表單
a. 所有的表單元素(<input>、<textarea>、<button>、<select>元素)
$(':input').css(...);
b. 文字框
$(':text').css(...);
c. 密碼輸入框
$(':password').css(...);
d. 單選按鈕
$(':radio').css(...);
e. 勾選框
$(':checkbox').css(...);
f. 檔案勾選框
$(':file').css(...);
g. 送出按鈕
$(':submit').css(...);
h. 圖片按鈕
$(':image').css(...);
i. 重設按鈕
$(':reset').css(...);
j. 所有的按鈕(<button>、<input type="button">元素)
$(':button').css(...);
k. 隱藏的欄位以及未顯示於螢幕上的元素
$(':hidden').css(...);
(4) 篩選出應存取的元素
a. 表單元素呈現有效的的狀態下
$(':enabled').css(...);
b. 表單元素呈現無效的狀態下
$(':disabled').css(...);
c. 選單按鈕或勾選框被勾選的狀態下
$(':checked').css(...);
d. 選取框被選取的狀態下
$(':selected').css(...);
e. 元素處於隱藏的狀態下
$(':hidden').css(...);
f. 元素處於顯示的狀態下
$(':visible').css(...);
g. 元素位於動態之中的狀態下
$(':animated').css(...);
2014年7月14日 星期一
電子商務網站的設計技術分析 - 文字原則
文字原則
1. 一個畫面，文字種類字型不要超過三種。
2. 一段文字，要注意字距與行距的字體大小和空白比例。
- 字句每一行最好25到35個中文字。
- 字型大小一般為12px，不要寫於10px。
- 行距的大小以1.5倍行距較佳。
3. 重點字形樣式必須一致，以增加好的可讀性。
4. 文字的超連結互動，必須符合一致性。
5. 大小寫必須有分別，也注意是否方便閱讀。
6. 初學者先撇開具有意義的歷史文字。
7. 網頁字形工具：google font & adobe font。
天貓網站字型與CSS的關係，應符合幾項呢？
1. body設定字型大小與字型類別為font:12px/1.5 tahoma,arial。
2. font-family：除了基本字型Arial，天貓再每一層樓置入不一樣的天貓自家的字型，這一些字型屬於CSS3的用法，不同於一般網站的基本字型。
3. font-size：字型大小方面，使用12~18px的字級。
4. 多以文字代替圖片，以增加下載的速度。
5. 英文字型和中文字型大小差了一點級數，天貓網站讓英文字型大一點，使得和中文字型看起來是一樣的，算是一般的做法。
6. line-height：字體行距多為1.5倍行距，較多的空白增加可讀性。
一定學會jQuery的36堂關鍵課程 第一章
替超連結設計進階的樣式
虛擬類別
link(尚未連結)
visited(已連結)
hover(滑鼠移入)
active(已點選)
* 請務必以 link -> visited -> hover -> active的順序指定，
一旦順序有誤就無法正確套用樣式。
提供常用數學功能的Math物件
abs(計算絕對值)
pow(計算次方值)
ceil(進行小數點的四捨五入計算)
floor(進行小數點的無條件捨去計算)
sqrt(計算平方根)
2014年7月11日 星期五
2014年7月10日 星期四
七月十日-驚人的hover
會互動的hover，太驚人了，可以想像未來繽紛的世界。
出處：http://tholman.com/giflinks/?utm_content=buffercf9a5&utm_medium=social&utm_source=plus.google.com&utm_campaign=buffer
2014年7月9日 星期三
訂閱：
意見 (Atom)