（攝影—宋子凡）
在全世界引起轟動的即時通訊軟體LINE，以其可愛的貼圖設計與親切的使用者介面，讓使用者為之瘋狂。《Wired》特別趁LINE的UI設計經理橋本建吾訪問台灣之際，抓住他忙碌行程中的片刻空檔，請他跟台灣讀者分享未來的UI設計趨勢。
2012年10月29日 星期一
Mobile App設計工作坊_筆記
照片來源：Mobile App設計工作坊(悠識)提供
2011年11月12日參加了由悠識數位主辦的「Mobile App 設計企劃實戰工作坊」，講師為過去耳聞已久的Mr. PM。本課程講述內容大致上和網站上所述流程相似，經個人判斷應歸納為：
- Mobile App.介紹
- Mobile App.基礎介面設計
- 部分的「脈絡設計」(脈絡訪查+資料詮釋+親和圖表)[備註1]
課程進行中並配合四個段落的分組練習，最後變成結束前的主題報告。透過主題式的分組討論實作，讓課程結束後有了印象深刻的理論與實務搭配經驗，增加了課程所帶來的具體效益[備註2]。
課程內容細分大主題後，以個人觀點來看大致從以下幾點進行說明：(1)Web與Mobile的相似與差異，(2) Mobile Apps開發流程，(3)使用者需求訪查，(4)領域知識的重要性，(5) Mobile Usability，(6) Mobile Design Pattern，以下分述：
2012年10月25日 星期四
2012年10月24日 星期三
.png)
2012年8月30日 星期四
2012年8月21日 星期二
iPad CSS範例
基本的ipad 兩個方向：
在橫式模式下，有兩列佈局，其主要內容在左邊和右邊分為三列放置。
在直式模式下，主要內容填滿螢幕寬度和三個區塊內容區域水平放置。
兩個方向中，在頂部有一個標題和頁腳底部。
這些都改變寬度1024px，寬768px，在演示頁 裡更詳細的示意圖像素尺寸。
下面是在iPad演示佈局模擬器截圖：
在直式模式下，主要內容填滿螢幕寬度和三個區塊內容區域水平放置。
兩個方向中，在頂部有一個標題和頁腳底部。
這些都改變寬度1024px，寬768px，在演示頁 裡更詳細的示意圖像素尺寸。
下面是在iPad演示佈局模擬器截圖：
如何工作的呢？
第一件事情是鎖定佈局，使每個像素與iPad的屏幕的像素以1:1的比例，做下面的META標籤：
<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />
鎖定佈局以1:1的比例防止變焦和滿分，這通常發生當iPad是旋轉（正常，橫向模式是縮小跨越1024個像素的寬度的網頁被顯示的，因為，相對於直式模式下，寬度只有768px）。
接下來，在直式和橫式模式，用CSS規則改變佈局，通常覆蓋其中的一些在底部的CSS文件時，該設備是在肖像模式下使用@ media規則。
這裡是一個精簡版的CSS：
接下來，在直式和橫式模式，用CSS規則改變佈局，通常覆蓋其中的一些在底部的CSS文件時，該設備是在肖像模式下使用@ media規則。
這裡是一個精簡版的CSS：
/*normal styles here */
#wrap {
width:1024px;
}
@media only screen and (orientation:portrait){
/* portrait styles here */
#wrap {
width:768px;
}
}
iPad的設計資源
模擬器
iPad
測試您的網頁瀏覽器在iPad模擬器。點擊旋轉的頂部iPad的邊界。
LIVEVIEW iPhone和iPad
實時查看是一家專門從事遠程屏幕查看應用程序，旨在作為一種工具來幫助設計人員創建移動應用程序的圖形
2012年8月20日 星期一
2012年8月17日 星期五
2012年8月16日 星期四
2012年8月15日 星期三
攝影部落客參考
攝影部落客參考 :
飛機 ／運動 solomon的無限空間 http://chenshilun.pixnet.net/blog
鐵道 ／交通 新南極轉運站 http://ice2006.pixnet.net/blog
旅遊 拈花惹草 Morris http://yuminghui.pixnet.net/blog
風景／婚禮 馬克的攝影部落 http://album.blog.yam.com/markliang
風景 DJ http://djphoto.pixnet.net/album
風景 Mike http://www.mike.idv.tw/category/landscape
飛機 ／運動 solomon的無限空間 http://chenshilun.pixnet.net/blog
鐵道 ／交通 新南極轉運站 http://ice2006.pixnet.net/blog
旅遊 拈花惹草 Morris http://yuminghui.pixnet.net/blog
風景／婚禮 馬克的攝影部落 http://album.blog.yam.com/markliang
風景 DJ http://djphoto.pixnet.net/album
風景 Mike http://www.mike.idv.tw/category/landscape
解決IE6~8 不支援 CSS3的Hack方法
CSS3 的特性讓開發者都很方便, 可以省去很多沒用的 HTML,
也可以省掉不少切圖的工.
問題是, 現在最多人使用的瀏覽器(IE6~IE8)都還不支援 CSS3.
詳見: CSS Compatibility and Internet Explorer
註: IE8 部份支援 CSS3
也可以省掉不少切圖的工.
問題是, 現在最多人使用的瀏覽器(IE6~IE8)都還不支援 CSS3.
詳見: CSS Compatibility and Internet Explorer
註: IE8 部份支援 CSS3
2012年8月14日 星期二
2012年8月13日 星期一
訂閱：
文章 (Atom)