SILK ROUTE » interface http://www.silkrt.com/v01 W.E. Linked Sat, 28 Jan 2012 00:36:41 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 iPhone兩點哲學 http://www.silkrt.com/v01/2009/06/19/iphone%e5%85%a9%e9%bb%9e%e5%93%b2%e5%ad%b8/ http://www.silkrt.com/v01/2009/06/19/iphone%e5%85%a9%e9%bb%9e%e5%93%b2%e5%ad%b8/#comments Fri, 19 Jun 2009 06:24:32 +0000 Marc http://www.silkrt.com/v01/?p=2385

“兩點”（圖: google search:”Yeah 手勢“)

今天一過12點,跟流行的馬上升級了我的iPhone到 3.0,把玩一下新功能

iPhone 先知先覺的構想,讓我用金屬背板的 iPhone 一代, 都不會有退流行的感覺,在這邊真的是很想為Apple Design Team 起立致敬.

一升級,首先測試的就是 copy / paste. 用兩隻手指頭一按, 就出現了選取範圍, 真是簡單又直覺.

後來又發現錄音程式也可以用所兩點控制來 trim sound. （我沒有 auto focus video, 不過我想也是一樣的用法)

這樣直覺的設計,讓我再度的想要起立並且拍手為 iPhone 設計團隊,在人類的兩隻手指頭上下的用心感到欽佩.

現在很多界面設計師都喜歡在兩隻手指頭(或是更多手指）上來作文章,不過怎麼玩都好像只在旋轉/放大圖片,實在是讓人很膩.

兩點之間能玩得不外乎是:兩點長度,跟兩點之間跟水平的角度.長度與角度的哲學,應用可以很廣.

iPhone這次把兩點之間的視覺長度,推廣到控制字/時間的長度就是一個很好的轉換.

兩點之間不只是實際上的視覺長度,在之前的 iPhone,可以是放大縮小的倍率,現在也可以是時間的或是字串的長度,其實還有很多地方可以應用. 長度跟角度, 可以想成是一個”量”,只要跟量有關的東西,其實轉化以後都可以利用兩隻手指來控制.

長度: 日曆兩點之間的長度(schedule),

大小: 音量大小, 亮度大小,資訊大小:兩點之間小就指出現頭條,大的話出現越來越多的內容.

位置: A群組對B群組連連看（像是地圖兩點之間的選擇,用於 google map）,兩點之間在選單上的多選 （例如一次殺掉某區段的 items),或是一點不動,另一點的動量控制微調…,

旋轉: 開啟電話的旋轉 combination 密碼鎖…等等

最後別忘了,台灣拍照,兩隻手指是個 YA~ , 是否也可以這個方向想想, 說不定會有有趣的東西: iPhone 發聲”YA~” 手指越開越大聲….

]]> http://www.silkrt.com/v01/2009/06/19/iphone%e5%85%a9%e9%bb%9e%e5%93%b2%e5%ad%b8/feed/ 1 比手畫腳的音樂互動 http://www.silkrt.com/v01/2009/05/27/%e6%af%94%e6%89%8b%e7%95%ab%e8%85%b3%e7%9a%84%e9%9f%b3%e6%a8%82%e4%ba%92%e5%8b%95/ http://www.silkrt.com/v01/2009/05/27/%e6%af%94%e6%89%8b%e7%95%ab%e8%85%b3%e7%9a%84%e9%9f%b3%e6%a8%82%e4%ba%92%e5%8b%95/#comments Wed, 27 May 2009 05:59:26 +0000 Marc http://www.silkrt.com/v01/?p=2237 Click here to view the embedded video.

這招很多人都變過,不過還是很多人在做

]]> http://www.silkrt.com/v01/2009/05/27/%e6%af%94%e6%89%8b%e7%95%ab%e8%85%b3%e7%9a%84%e9%9f%b3%e6%a8%82%e4%ba%92%e5%8b%95/feed/ 0 my2¢ – 檔案瀏覽改良 – ML view http://www.silkrt.com/v01/2009/05/07/my2%c2%a2-%e5%8e%b2%e5%ae%b3%e7%9a%84column%e6%aa%94%e6%a1%88%e7%ae%a1%e7%90%86%e6%96%b9%e5%bc%8f/ http://www.silkrt.com/v01/2009/05/07/my2%c2%a2-%e5%8e%b2%e5%ae%b3%e7%9a%84column%e6%aa%94%e6%a1%88%e7%ae%a1%e7%90%86%e6%96%b9%e5%bc%8f/#comments Fri, 08 May 2009 04:06:29 +0000 Marc http://www.silkrt.com/v01/?p=2036 Ladies and Gentelman, let me introduce “my2¢” series in silkrt.com.

我的兩毛 (my two cents) 系列是關於一些在現有設計上的建議/改善/奇想. 這些創意不一跟自己的從事/專長有關,所以放在腦子裡也是浪費,不如與大家分享.

願以貢獻棉薄之想像力,
為人類創意盡咫尺改良.

歡迎大家一起參與~

Mac OS X 特有的 column 檔案瀏覽方式想必是某些人最順手的方式.

phpqJHQj9

但是今天使用,發現當檔案很少的時候,其實很浪費空間,而且他只能在同一枝幹下做檔按的搬移存取.應該有更好的方式.

以下是 My 2 cents:

multiple-folder-opened

我簡單的用 photoshop 做了一張示意圖,應該一看就清楚明瞭了吧 (menu開啟關閉用 toggle 的方式,太長可以scroll, 上層的目錄會隨相對關係上下移動.)

因為是我想到的,所以我把他命名叫做 ML View(Multiple Lanes or Marc Lin… 哈哈) 多線道瀏覽模式

自己是認為很不錯啦,希望老賈能看到～

以下是寫給老賈看的

Dear Steve Jobs,

I have an idea about the file management system for Mac OS N.

I would like to call it “ML” view. (Multiple Lane, ps: my name is Marc Lin… haha… )
As the simple illustration I provided, you definitely smart enough to understand how it works. But please allow me to do further explain as following points:

  • It is easy to understand and very helpful to move files in different branch(es) of tree-system-like folders.
  • menu open/close using “toggle” user interaction – click -> open -> click -> close -> click -> open ….
  • if too many folder opened in the same lane, the scroll bar shows.
  • if opened folders’ parent folders are two close, the below one will move down to associated y position (see image “icons” folder is right next to the “FLVPlayback skins”)
  • using different highlight color to show the opened folders (this can be better than my simple photoshop sketch)

It might bring you another billion dollars. Please share some with me or hire me and I can tell you more cool ideas~
(I know you are a creative, honest good man. Peace, Love and Good luck.)

Feel better, Cheers,

Marc Lin

]]> http://www.silkrt.com/v01/2009/05/07/my2%c2%a2-%e5%8e%b2%e5%ae%b3%e7%9a%84column%e6%aa%94%e6%a1%88%e7%ae%a1%e7%90%86%e6%96%b9%e5%bc%8f/feed/ 2 關鍵任務-成功/失敗 http://www.silkrt.com/v01/2008/11/16/%e9%97%9c%e9%8d%b5%e4%bb%bb%e5%8b%99-%e6%88%90%e5%8a%9f%e5%a4%b1%e6%95%97/ http://www.silkrt.com/v01/2008/11/16/%e9%97%9c%e9%8d%b5%e4%bb%bb%e5%8b%99-%e6%88%90%e5%8a%9f%e5%a4%b1%e6%95%97/#comments Mon, 17 Nov 2008 03:58:22 +0000 Marc http://www.silkrt.com/v01/?p=1280 Click here to view the embedded video.

自從好幾年前湯哥的一部電影”關鍵任務”之後,許多從事互動的好手,都把實現電影中的互動展示界面當作使命,這個 Video 也不例外.

雖然當初(幾年前）,許多人提出互動概念的原型,那或許是從創意的角度提出來的一個可能性,然而後來大家紛紛把可能性變成可能之後,反而應該反思一下, 究竟這樣的界面真的有比較好嗎?

以下我的淺見:

Click here to view the embedded video.

Click here to view the embedded video.

如果直接用手操作比較好的話, 那為何我們現在寫字需要用筆,而不是在指尖上套個能有墨水的東西呢?

藉助器物當然是有道理的,手握鉛筆, 能讓人控制更微小的動作,用滑鼠也是一樣的道理.

用手套操作,萬一想要抓頭怎麼辦?

直覺的反應或許很好,但是這樣一來無心的動作可能造成決策的錯亂, 就像試想歸想,做歸做,如果想的事情直接就會發生,那麼沮喪的人可能全自殺光了. 藉助器物(起碼也要個觸摸面),可以有思考跟行動的分野,我想也可以用這種角度來看吧.

]]> http://www.silkrt.com/v01/2008/11/16/%e9%97%9c%e9%8d%b5%e4%bb%bb%e5%8b%99-%e6%88%90%e5%8a%9f%e5%a4%b1%e6%95%97/feed/ 3 PicLens http://www.silkrt.com/v01/2008/07/02/piclens/ http://www.silkrt.com/v01/2008/07/02/piclens/#comments Wed, 02 Jul 2008 22:08:49 +0000 Marc http://www.silkrt.com/v01/?p=492 Click here to view the embedded video.

http://www.piclens.com/

今天發現了這個 Firefox 的 Add-on, 他提供 flickr, youtube 等等web2.0網站新的介面.相當利害,對介面設計有興趣的人,一定要裝來試試看.

]]> http://www.silkrt.com/v01/2008/07/02/piclens/feed/ 0 InfoVis之大道使用-WarpPlayer http://www.silkrt.com/v01/2008/03/02/iv-%e5%a4%a7%e9%81%93%e4%bd%bf%e7%94%a8-youtube-warp/ http://www.silkrt.com/v01/2008/03/02/iv-%e5%a4%a7%e9%81%93%e4%bd%bf%e7%94%a8-youtube-warp/#comments Sun, 02 Mar 2008 08:35:28 +0000 Marc http://www.silkrt.com/v01/2008/03/02/iv-%e5%a4%a7%e9%81%93%e4%bd%bf%e7%94%a8-youtube-warp/ phpSvBLR1

information visualization 一直是一些作互動設計喜歡implement的設計環節,不過之前為止都還是在一些設計未到重的網站才會看到,今天再看youtube的時候,在全螢幕mode發現多一個按鈕(warp),發現原來YouTube已經把這種秀出關聯性及瀏覽順序資訊的information visualization設計放進來了,想必將來會有越來越多的”大道網站”啟用這種設計味十足的介面.

]]> http://www.silkrt.com/v01/2008/03/02/iv-%e5%a4%a7%e9%81%93%e4%bd%bf%e7%94%a8-youtube-warp/feed/ 0 Design and the Elastic Mind http://www.silkrt.com/v01/2008/03/01/design-and-the-elastic-mind/ http://www.silkrt.com/v01/2008/03/01/design-and-the-elastic-mind/#comments Sun, 02 Mar 2008 02:50:00 +0000 Aileen http://www.silkrt.com/v01/2008/03/01/design-and-the-elastic-mind/

It could be an important exhibition for showing the past digital works in the digital era.
The web site was done by Yugo~

ElasticMind
pdf

]]> http://www.silkrt.com/v01/2008/03/01/design-and-the-elastic-mind/feed/ 1 Useful Sites for learning AJAX http://www.silkrt.com/v01/2008/02/07/useful-sites-for-learning-ajax/ http://www.silkrt.com/v01/2008/02/07/useful-sites-for-learning-ajax/#comments Fri, 08 Feb 2008 03:25:49 +0000 Roger http://www.silkrt.com/v01/2008/02/07/useful-sites-for-learning-ajax/ ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

%%%%% AJAX學習園區 %%%%%

PART I 先看點有趣的：

MIT的實驗藝術創作：

http://tiny.media.mit.edu/

tiny_art.png

再來一個：放心，你的電腦沒壞(有心臟問題的朋友勿點)：

http://asdfg.jodi.org/——————————-/——————————-/——————————-/——————————-/———————–331wj400/rttyd.html

點下方繼續閱讀…

PART II 想動手做做看嗎？先來上點課吧！

1. 有名的w3school:

http://www.w3schools.com/ajax/ajax_example.asp

2.常用的 “Canvas” Library

http://developer.mozilla.org/en/docs/Canvas_tutorial

3. 動手hack Google Map!

http://code.google.com/apis/maps/documentation/reference.html

待續…

]]> http://www.silkrt.com/v01/2008/02/07/useful-sites-for-learning-ajax/feed/ 2 del.icio.us + 6pli http://www.silkrt.com/v01/2008/02/06/delicious-6pli/ http://www.silkrt.com/v01/2008/02/06/delicious-6pli/#comments Wed, 06 Feb 2008 17:17:31 +0000 Marc http://www.silkrt.com/v01/2008/02/06/delicious-6pli/ delicious 6pli

6pli 把del.icio.us的資料視覺化. 並沒有很大搜尋整理的幫助,可是看起來非常的炫
login here

]]> http://www.silkrt.com/v01/2008/02/06/delicious-6pli/feed/ 0 駭phone http://www.silkrt.com/v01/2008/02/01/%e9%a7%adphone/ http://www.silkrt.com/v01/2008/02/01/%e9%a7%adphone/#comments Fri, 01 Feb 2008 21:20:37 +0000 Marc http://www.silkrt.com/v01/2008/02/01/%e9%a7%adphone/ max/msp+iphonecracked iphone

據報導iphone會成為2008年全世界駭客的焦點,同時,傳說中的Google Phone也轉成變成功能強大的android程式開發,再功能及見面上打算與Apple一較長短.

反正也要被hack,所以Apple也將release SDK讓大家開發.要駭就駭個夠…

雖說是”駭”,主要的精隨還是在於”手機能幹麻”的出發點,

可以拿來變魔術?

Click here to view the embedded video.

還是拿來照明?

Click here to view the embedded video.

或者是??
這邊有來自日本的創意:
http://www.iamas.ac.jp/~aka/iphone/

]]> http://www.silkrt.com/v01/2008/02/01/%e9%a7%adphone/feed/ 2 掘糖果 digg eye candy http://www.silkrt.com/v01/2008/01/19/digglabs/ http://www.silkrt.com/v01/2008/01/19/digglabs/#comments Sat, 19 Jan 2008 23:35:11 +0000 Marc http://www.silkrt.com/v01/2008/01/19/%e6%8e%98%e7%b3%96%e6%9e%9c-diggs-informational-eye-candy/ php7OAz4k

digg labs 推出了一個相當漂亮的視覺資訊介面.

整套介面呈現的是同一件事,也就是各地人們對所有加入digg對草根媒體的即時評論與票選統計.

可能很多人對digg還不熟悉,不過相信大家多多少少還是曾經看過 diggdigg icon 或是phpma0fWY etc…

先簡短的說明一下digg好了,由於現在網路上的blog多如繁星,大家都在發佈新知及看法,並且很多人看過之後都會有所回應,但是有時候我們除了常去的blog以外,要怎麼知道其他相關的blog呢? digg 就因此而產生,讓有趣的新聞流傳的更快.
他的運作基本上就是讓人從原來的blog上,連到digg上留言,這樣可以digg it or bury it,並加以統計分類,也可以從這邊連去其他相關的篇幅.
連到digg有好有壞,好處是你可以用投票的方式,幫助你喜歡的資訊流傳更快,對於你認為不對的說法,也可以再digg上大肆討伐而不怕被版主殺掉(不過版主可以殺掉原文就是了),另外你可以透過這邊連到其他相關有加入digg的blog.

這個digg介面分為五種,照片pics / 大間諜bigspy / 群集swarm / 堆積stack / 弧arc 相信以後會推出更多不同的樣式.

在設計information mapping的圖形介面時,最基本也最重要的就是軸線.這些project強調的是即時,所以有些有時間軸,有些則是以真正時間的演變來做視覺上的替代,另外的幾個軸現則是人氣,主題,以及(相對關係).

以下是這些圖表的軸線說明

Digg Pics tracks the activity of images on the site.Images slide in from the left as people Digg and submit them.

橫條的是同一主題,按下去會出現內容及綱要

digg labs pics

Digg Arc displays stories, topics, and containers wrapped around a sphere. Arcs trail people as they Digg stories across topics.Stories with more Diggs make thicker arcs.

弧形的粗系代表很多人digg,弧長代表人們跨主題digg(這很酷可是我看不懂)

digg labs arc

Digg BigSpy places stories at the top of the screen as they are dugg.As new stories are dugg, older stories move down the list.Bigger stories have more Diggs.

新的在上面,舊的在下面,字越大越多人digg

digg labs bigspy

Digg Stack shows diggs occurring in real time on up to 100 stories at once.Diggers fall from above and stack up on popular stories.Brightly colored stories have more Diggs.

從右到左是時間先後,堆越高越亮的代表越受歡迎的主題,相對應的下方是文章的標題.

digg labs stack

Digg Swarm draws a circle for stories as they’re dugg.Diggers swarm around stories, and make them grow.Brightly colored stories have more Diggs.

越亮的越受歡迎,digger圍繞在主題周圍.

digg labs swarm

這些做的很酷的介面中,有些(pics,bigspy,stack)真的有幫助,有些對我而言只是好看而已.

在互動設計的範疇,有很多類似的作品,資訊在圖形中,很直覺的由認知上獲得意思的傳達. 但是有些卻淪為不實用的eye candy,複雜但是好看…

]]> http://www.silkrt.com/v01/2008/01/19/digglabs/feed/ 0