2011年11月27日 星期日

android,序

Google在2005併購android,當時的android才成立22個月。google在07發表android第一個版本,當時還沒有非常受到矚目。現在好像已經出到4.多了吧?! 而且每個版本都是用甜點命名。
android,droid是機器人的意思,an一個,android中文就是"機器人",android他本身就是個作業系統,以Linux為核心,主要的陣營非常多,像台灣的HTC就是android其中的一個陣營,LG. 三星也都是。簡單來講,現在最為人知的兩大智慧型手機作業平台,一個就是iphone的,另一個就是google的android,兩者的差異就在於,iphone的開發應該算是封閉式的,而android完全免費而且開放,即便如此,iphone在全世界的市占率,仍然很高。


由智慧型手機的崛起,軟體的開發與創新逐漸變成主流。大家會發現,其實呢智慧型手機的外觀設計,各家廠商的設計其實沒有差多少,消費者的重點雖然還是會注重手機本身的設計,但是其實購買手機的重心與欲望越來越越往手機本身的作業平台為選擇目標。 重點不在於手機的外觀設計,而是手機所使用的作業平台,使用者介面設計的好壞。

這麼說來,台灣應該更注重設計人才的培養,我所指的設計是泛指所有種類的設計師...。台灣的教育習慣將藝術與科技分開,這樣的走向若要培養了解視覺設計和軟體的工程師是很困難的,若一直代工下去.....,似乎沒有多大的好處.....,所以我們要改變。



chapter 1 .2  筆記 :
android的主流開發環境是 eclipse + ADT + android SDK 
在電腦要開發android: JDK+Eclipse+Android sdk+ ADT
(看起來很複雜,沒錯!我也看不懂xd)



main.java 是android應用程式的主程序檔,相當於web程式的主頁面
main.xml在layout子選單裡,是一個XML的佈局檔,這個檔案指定了程式中顯示的元件還有相關的資訊。通常我們在手機裡看到的按鈕,就是一種元件,所以說...要加入按鈕,就必須打開main.xml進行配置
(ps: xml檔案中的標籤指定id時必須是這樣的格式: @+id/somestringvalue (somestringvalue表示id的值,以數字表是),而@+語法表示如果ID值在R.id類別中不存在,則新產生一個與ID同名的變數


android開發的資源全放在apk檔案裡,
在一個專案的子目錄中,我們會看到res這個子目錄
res裡又包含了drawable. layout. values
這三個子資料夾又包含icons.png main.xml. string.xml
由icons.png暗示著我們drawable這個資料夾是來放圖片的(影像檔)
而layout從字面上就可以知道這個資料夾是用來設定佈局,有點像是在配置畫面
values資料夾裡的xml檔可見是用來保存字串資源的(這個我也沒看懂xddd )



上面已經得知了三種資源,複習一下分別是res子資料夾drawable. layout.values
重點是,資源,不只這些。總之,不管是甚麼樣的資源檔案,都會被放到res這個子資料夾中
(注意,在drawable不能放同名的影像檔,就連apple.jpg與apple.png這樣就不行。這是因為在生成ID的時候本來的設計就沒有考慮到附檔名的問題)




android有四種元件 :
1.活動元件(activity)
2.服務元件(service)
 3.廣播接收者(Broadcast receivers)
4.內容提供者(content providers)

活動元件(activity) 這是android最核心的類別,全名android.app.Activity 
Activity相當於表單(form)或是web程式頁面 每個activity提供一個視覺化的區域,在這個區域可以放任何的android元件,像是button~ 所以才說~activity真的是開發android最核心的類別!
一個具備介面的android可以是由好幾個或一個的activity組成,比方說,我們最常的看的典型設計,就是用一個activity做為主activity(相當於首頁(主表單))經由這個actovity夠過功能表或是按鈕轉到其他的activity,每個activity都有一個小視窗,通常都是布滿整個螢幕的





2011年11月25日 星期五

Note:互動設計筆記


來源:
書名 | 互動設計概論  作者:葉謹睿 藝術家書版社



1.互動設計在近幾年引起討論,因為許多業者發現大部分的3C產品的失敗主因,並不是因為產品的外觀與功能的不完整,而是互動介面設計的錯誤。
2.interaction design,設計一種互動的模式,如何幫助和照顧使用系統或產品的"人"。
3.介面(interface).使用者介面(user).人機介面(human-computer interface),都算是互動設計的具體呈現。
4.介面的基本定義是"使用者user"與"系統system"的接觸面。
5.互動設計的最終目的在於創造科技與人類之間的完美連結。
6.IDEO公司Duane Bay曾經將互動設計歸納為三類: A.透過螢幕的體驗 B.互動產品 C.服務
7.在美國業界,通常以IXD做為互動設計的簡稱,IXD(Interaction Design Association,互動設計協會)
8.作者評估互動設計作品最好的方式是3e指標。effective有效. easy簡便. enjoyable享受。一件互動設計最重要的四個指標就是要幫使用者減少以下四個工作: 1.記憶性工作 2.肢體性工作 3.視覺性 4.理解性
互動設計的方法
1.量化評估(Quantitative Measurement)
2.問卷調查
3.集團焦點
4.面談
5.實境調查(contextual inquiry):親身到產品使用的現場,觀察和記錄真實狀態
6.文化探測
 介面線框(wireframes)p.109其實就在寫類似iphone界面的那種設計,所謂介面線框就是要刻意忽略視覺設計的部分,規劃頁面的結構.資訊的組織,還有功能.內容。還記得形隨機能這句話吧?! 在框線設計的過程就是在強調這件事,因應"機能"規畫出合理有效的介面,"好不好看"是毫無建設性的思考..。拿掉多餘的裝飾。
而介面框線設計的好處在於
A.沒有技術性的包袱,好更改
B.讓使用者專注在介面的互動性 ,而不是底層視覺設計
C.節省人力和時間成本


網頁動線的重要安排: 認知-->興趣-->慾望-->行動
相關連結:
http://www.books.com.tw/exep/prod/booksfile.php?item=0010487380 書名 | 互動設計概論  
http://www.ixda.org/  互動設計協會 
http://www.adobe.com/tw/devnet/fireworks/articles/rapid_prototyping.html   Fireworks CS3 中的快速原型製作
http://www.showireframe.com/   showireframe
http://inspire.twgg.org/  

2011年11月5日 星期六

ui -practice
























最近因為打工的關係有點不小心迷上了UI設計的那種質感處理,稍微提及ui設計的書,早在2006年就有摟,我們都盲目的只想借新書,殊不知舊書也是很好用的。總之,只是我自己覺得ps是值得砍掉重練的一塊........不過我真正學ps也只有大一那幾周而已= = 。不看點工具書還真的不知道秘訣在哪耶,難怪我一直想說為甚麼用photoshop做幾百次的漸層也是一樣,百思不得其解的好問題,就是這種關鍵時刻發現自己photoshop爛的可以,太丟人了(窩到棉被裡)。今天就玩了一下國王撿珠珠,但,ipad跟iphone的素材是借網路的,我想表現的只是背景的質感紋理而已。 應該可以再磨練得更好,但是沒有實際應用,通常都點到為止,就沒再繼續了,xd~

如果我能自己處理這種flash遊戲就好了,只是不知道怎麼處理撿珠珠的計分方式,還有繪圖的問題,就先這樣吧~GN!

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...