2012年4月10日
2012年4月8日
QT開發環境－自動提示指令／指令（程式碼）補完
簡介：
在一些開發環境中，具有非常簡便的功能，他能夠幫助使用者在不需打完程式或指令的情形下，自動提供給可能的選項給使用者選擇完整的指令，亦或是直接補齊，而QT的開發環境中也有此種方便的功能，但是，他在哪設定呢？
開啟流程：
選擇Tools->option，會開出一個視窗，再點選enviroment->keyboard，最後於搜尋欄中打入"completeThis"，就會塞選出「TextEditor.CompleteThis」，如下圖：
此後只要在撰寫程式的過程中，按下你所設定的快捷建，就可以跳出了來選項了。
實際成效：
在一些開發環境中，具有非常簡便的功能，他能夠幫助使用者在不需打完程式或指令的情形下，自動提供給可能的選項給使用者選擇完整的指令，亦或是直接補齊，而QT的開發環境中也有此種方便的功能，但是，他在哪設定呢？
開啟流程：
選擇Tools->option，會開出一個視窗，再點選enviroment->keyboard，最後於搜尋欄中打入"completeThis"，就會塞選出「TextEditor.CompleteThis」，如下圖：
此後只要在撰寫程式的過程中，按下你所設定的快捷建，就可以跳出了來選項了。
實際成效：
2012年4月5日
jQuery iPicture Plugin
插件需求 : jQuery & jQuery UI
相容性 : All Modern Browsers
官方網站 : http://ipicture.justmybit.com/
下載點 : http://ipicture.justmybit.com/download.php
簡介
jQuery iPicture 是一款讓我們能夠在網頁圖片上標註anchor或tooltip的插件，當滑鼠移過去就會顯示一些說明的文字，這個插件最厲害之處在它可以切換編輯模式(modify mode)，這樣可省去動手算圖的座標的動作。說麼多或許很難理解，馬上觀看下面兩個範例吧!!正常模式
DEMO網址 : http://ipicture.justmybit.com/index.php
編輯模式
DEMO網址 : http://ipicture.justmybit.com/options/modify.php
程式碼
$( "#iPicture" ).iPicture({
animation: true,
animationBg: "bgblack",
animationType: "ltr-slide",
pictures: ["picture1"],
button: "moreblack",
moreInfos:{"picture1":[{"id":"tooltip1","descr":"語文學習中心","top":"119px","left":"428px"},..}]},
// 開啟/關閉編輯模式
//modify: true,
initialize: false
});
這種ToolTip在網站的導覽以及商品買賣的網站上會十分的有用處，這種臨場感是經典方格子拍賣無法呈現的。
如果你有更好的應用，歡迎在下面留言討論
產品圖示規範化的意義與過程
一、問題引發思考
現在隨著互聯網企業的發展與業務的拓展，隨著時間的推移，一個公司的產品可能將越來越豐富多樣，同樣每一個產品隨不斷的功能完善和擴展，隨著一個產品的「長大」產品內所需要用到的圖標也必然會越來越多，這時候眾多產品形象的呈現、產品內圖標等視覺原素的表現，如何能與整個產品或公司的戰略計劃相適應，這時候在圖形語言的視覺呈現，語義表達、識別性等層面就需要作一個全面細緻的考慮了。
我們來看幾個典型的例子，回顧一下 Adobe 產品系列的成長過程， 從2005年 Adobe 收購了原最大的競爭對手Macromedia公司後，它的產品線得到了極大豐富， 而後在2002年Adobe確立了 Creative Suite概念後，後續的新產品持續推出，龐大的產品線以一種什麼樣的展現方式呈現在用戶面前便成為了一項非常重要的課題。下圖中我大致的列了一下Adobe產品logo的一個進化轉變過程：
產品陣容強大的Adobe帝國在CreativeSuite 3發佈的時候為旗下全部產品Logo進行一個色環劃分圖，很好的呈現出各產品logo的色彩關係和一個完整的用色體系。
我們再看一個例子，Apple公司在2010年和2011年先後將itunes與App store的Logo作出了比較重大的調整，到Max OS Lion版本時，兩大平台級的產品新形象同時展現在用戶Mac的Dock上。雖無準確的官方答案，但從一個是整個Apple產品資源應用來源和一個是娛樂內容來源的的兩個具有類似性質的商業平台產品來看，它們顯然是被Apple寄予相當大期望，在感觀上看來，它們在被賦予更厚重、大氣的形象這一改變，能夠很好的服務於其公司的商業戰略。
另外itunes 10的發布後側欄的圖標全部變成了單色，這一變化我認為是為了突出Store的資源核心區域，強調產品的平台性，和上述的分析一樣，這個視覺表現層面的調整同樣是為了整個產品的資源商業戰略服務的。
那現在回到我們自己的產品，現在「我的阿里」作為一個網商用戶的得力助手，用戶的家，「我的阿里」內容與應用在日益的增長，系統越來越龐大，同樣網站的視覺的圖形語言的整理，解決原來積累已久的視覺表現「亂象」也日益的緊迫。
在「我的阿里」視覺元素整理的第一步，眾多應用圖標是頭一個切入點，我們從圖標的含義，分類，尺寸規格、設計規則，風格表現等幾個方面進行一個整體方向的規劃，總結一套設計指南。
如果你想要查看更多的細節與內容，請至原文出處查看
本文章簡短節錄於 - 有一點 - 阿里巴巴交互設計部
原文網址 : http://www.aliued.cn/2012/03/05/%E4%BA%A7%E5%93%81%E4%B8%AD%E5%9B%BE%E5%BD%A2%E8%AF%AD%E8%A8%80%E8%A7%84%E8%8C%83%E5%8C%96%E6%84%8F%E4%B9%89%E4%B8%8E%E8%BF%87%E7%A8%8B.htm
2012年4月4日
把OpenCV的IpLImage資料放置QT的QImage
簡介：
某些時候，我們會希望能夠在QT的開發環境中使用openCV來處理影像，可是openCV的保存影像內容的資料結構是IpLImage；QT保存影像內容的方式是透過類別QImage保存，那麼這時候該如何做這之間的影像搬移呢？
2012年4月3日
用戶界面設計中「狀態」和「動作」的表達
簡介
一、問題引發思考
前陣子與同事探討一個小需求時又遇到了按鈕表示「動作」和表示「狀態」間矛盾問題。想想這個問題多年前已經開始討論了，所以在此整理一下思路，與大家共享。
具體案例是這樣的：如上圖所示，在「啟用」和「停用」搜索定製功能時，這個按鈕到底是表示「狀態」還是表示「動作」呢？簡單的說，上圖中 1表示當前是停用狀態，還是表示點擊後為停用操作呢？答案顯然是不清晰的。
怎樣能夠清晰的表達兩者的差異，減少用戶的誤解呢？我們首先要從「動作」、「狀態」的定義和兩者的關係入手。
二、什麼是動作，什麼是狀態
動作是指具有一定動機和目的並指向一定對象的運動。
狀態指人或事物表現出來的形態。
狀態指人或事物表現出來的形態。
結合來講，動作是促使人或事物改變某一狀態的運動，而狀態是動作造成的結果表現。因此兩者經常是緊密關聯的，有時甚至是互為條件的。
比如「操作收音機」這件事，我需要扭動旋鈕或按鍵等「打開」的動作來打開收音機，當動作完成後收音機的狀態是「打開的」。而「關閉」收音機這個動作的前提，是一個「打開的」狀態的收音機。
」聽起來好複雜阿！「很多人都會這麼認為。為什麼我們在生活中天天面對類似的事卻很少有這樣的感覺呢？
」聽起來好複雜阿！「很多人都會這麼認為。為什麼我們在生活中天天面對類似的事卻很少有這樣的感覺呢？
下面來看看生活中的例子我們或許就能理解了。
三、生活中的例子
1、電燈開關
如果你想要查看更多的細節與內容，請至原文出處查看
本文章簡短節錄於 - 有一點 - 阿里巴巴交互設計部
原文網址 : http://www.aliued.cn/2010/11/07/expression-of-state-and-action-in-ui-design.html
Sonic html5 canvas loader
簡介
Sonic是一款極小的js類(JavaScript Class)，它可以使用來創建客製化的讀取標誌動畫(custom loading animations)，它執行一個不中斷的迴圈，就好像一條蛇不斷追著自己的尾巴。Sonic使用HTML5的Canvas API來完成的，它在很短的間格中部段的繪製圖形到畫面上，而這個圖形決定於你定義給它的path，首先看一下官方的DEMO
http://padolsey.net/p/Sonic/repo/demo/demo.html
範例一 - 正方形
<!doctype html>
<meta charset="utf-8" />
<title>Sonic</title>
<style>
</style>
<body>
<script src="../src/sonic.js"></script>
<script>
var square = new Sonic({
width: 100,
height: 100,
fillColor: '#000',
path: [
['line', 10, 10, 90, 10],
['line', 90, 10, 90, 90],
['line', 90, 90, 10, 90],
['line', 10, 90, 10, 10]
]
});
square.play();
document.body.appendChild(square.canvas);
</script>
</body>
在這個範例中，我們創建了一個Sonic類別，並給予高度、寬度、顏色以及最重要的路徑屬性，path是一個二微陣列，我們將要移動的路近以這樣的格式寫入
['line', startX, startY, endX, endY]
詳細模式可以參考HTML5相關解說了解
http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/
創建完畢後，我們將Sonic放置到我們的畫面上，並且啟動(play)。
範例二 - 繞圓圈
在Canvas中，如果要畫曲線(橢圓、圓、拋物線等)，使用的是arc這個屬性，下面範例中會產生一個不斷繞著圓圈的讀取標示
var circle = new Sonic({
width: 50,
height: 50,
padding: 50,
strokeColor: '#000',
pointDistance: .01,
stepsPerFrame: 3,
trailLength: .7,
step: 'fader',
setup: function() {
this._.lineWidth = 5;
},
path: [
['arc', 25, 25, 25, 0, 360]
]
});
circle.play();
document.body.appendChild(circle.canvas);
附註 : 額外參數說明
Path 參數
['line', startX, startY, endX, endY]
['bezier', startX, startY, endX, endY, cp1x, cp1y, cp2x, cp2y]
['arc', cx, cy, radius, startDegree, endDegree] (degrees, not radians!)
Create 參數
Options that you can pass to new Sonic({...}) include:
path:
An array which defines the path taken by sonic. Look at the square example above. Each array item is an array with the format [methodName, arguments...], with the available methods specified above (line, bezier and arc).
width:
The pixel width of the canvas (note: not including padding)
height:
The pixel height of the canvas (note: not including padding)
padding (default: 0): The pixel padding.
fillColor:
The canvas' context's fill color (e.g. red, rgb(255,0,0), #F00)
strokeColor:
The canvas' context's stroke color (e.g. green, rgb(0,255,0), #0F0)
fps (default: 25):
How many frames per second. More fps means smoother animation and sonic will progress through the specified path quicker. Less frames means the opposite. There shouldn't be much need to change this.
stepsPerFrame (default: 1):
This integer specifies how many steps of an animation should occur on each frame.
pointDistance (default: .05):
The distance between points (0..1) in each path (that is, each sub-path under the main path). If you draw a line, and set the pointDistance to 0.1, then there will be ten steps in the animation (ten points).
trailLength (default: 1):
The length of sonic's trail (0..1). A length of one means that it's like a snake trying to eat its own tail.
step (default: "square"):
A function OR a name of a function found in Sonic.stepMethods. This function will be called on every step of the animation. See below (under "more control") for more info on this function.
domClass (default: "sonic"):
A class to be applied to the element.
訂閱：
文章 (Atom)