Skip to main content

手工作玩偶

· 2 min read

前陣子感到應該用一些方法來驗證現在數位與實體世界的距離是否已經越來越近。而且桌上也缺一些裝飾品,於是從 cubeecraft 下載了多摩君的剪紙,直接用印表機印出 A4 大小的紙來。

和 Designer 同事借了剪刀與美工刀後,照著紙上的指示割了起來。

多摩君的構成很簡單,基本就是一個紙盒。白色的地方是要割開的洞,將黑色區塊嵌進去後,不需要膠水就可以組裝成成立體的玩偶。

用中午休息不到 20 分鐘的時間,多摩君完成啦!

 完成後有了點信心,改天繼續挑戰了難度大一點的成步堂君

 在勞作過程中,發現剪紙時還是美工刀好用。這次的成步堂君剪開來還蠻多配件的。

 組裝好的樣子

 最後來個疊疊樂

手工藝成本:

兩張 A4 紙。

手作鋼鐵衣

· 2 min read

我相信現在數位與實體世界的距離已經越來越近,我觀察到某些例子,能讓我們常見的實體商品,透過數位方式加值,產生出相當不同的體驗。這邊舉 T-Shirt 為例。這是網上已經在銷售的商品。

其實整個想法很簡單。只是透過將手機放入胸前的袋子,就提供了旁觀者新穎的視覺體驗。在網上也能找到簡易的作法:

由於今年尾牙要求的 dress code 是 cosplay 電影動漫人物,於是我把腦筋動到鋼鐵衣上面。

1. 首先找一件不要的衣服(這件是 2011 年參加 Coscup 送的,穿到現在) 2. 在胸口適當的地方開個洞。

 

3. 為了手機容易拿取,黏一個袋子進去(剛好最近常常看醫生,就拿藥袋頂上)。袋子對應胸口的地方也要開洞。

4. 下載 Digital Dudz App, 選鋼鐵人裝扮

於是就完成有 Arc Reactor 的「We love Open」鋼鐵衣啦!

React Native

· 2 min read

在看 Facebook 發表的 React Native 介紹的時候,講者提到為什麼現在 Web 沒辦法提供如他們做的 Paper App 一樣順暢的體驗,主要是三點:

  1. Parallelize work 平行處理 在 Web 上雖然有 web worker,但能做的事很有限。
  2. Gesture Handling 在 Web 上沒有一個好的如何使用手勢操作的指引
  3. Access to Native Capabilities 在 Web 上沒有辦法使用所有在原生平台上可取用的 API。

於是 Facebook 發表了使用 React UI 來開發 iOS/Android App ,他們現在已用在了 Facebook Group App 上。React Native 不像 Cordova/Phonegap 用 WebView 來跑 HTML/JS/CSS,而是直接接上 Native UI widget。

雖然使用 JS 當 controller,但用 async 的方式和 Native UI 做互動。並且互動時是將 UI 各改動一次性完成(原本 React 的 Virtual DOM 特性),從而避免 JS 程式運行阻塞住 UI 而影響效能。

當然兩個平台的 Native UI 元件名稱或參數多有不同,所以不能像 Cordova/PhoneGap 那樣「寫一次,跨多個平台」 ,而是「學一次,跨多個平台」(Learn Once,Write anywhere)。

原始演講內容可以查看

Material Design(物質設計)是什麼?

· 5 min read

物質設計 (Material Design)

「物質設計」有人翻作材質設計,但我很容易把「材質」聯想到 3D 遊戲的材質貼圖去,這跟 Material Design 所想要表達的意涵差了十萬八千里。而從相關的英文詞彙聯想,「Material Girl」或譯為拜金女孩或物質女孩,那種對於追求「摸的到的實際東西」有所迷戀的意涵,似乎與 「Material Design」的內在涵義更為貼近,所以我更願意稱之為「物質設計」。

註:官方後來定名為「實感設計」。

物質設計(Material Design)是什麼?

簡而言之,Material Design(物質設計)是 Google 公佈的一套同時適用於 Android、iOS、Web 等各種平台,同時能適用於手機、平板、電視、電腦螢幕等不同裝置的跨平台 / 裝置的設計規則(仍需為各裝置設計,但鼓勵共用更多相同元素)。

讀者也可以透過觀看 Google I/O 2014 - Keynote(從 14:18 分開始,由 Matias Duarte 介紹 Material Design)https://www.youtube.com/watch?v=wtLJPvx7-ys  可以得到對於 Material Design 最精巧的介紹。

我不是設計師,僅從開發者角度分享一些個人想法,如果還有興趣請繼續看下去。

從擬物化、扁平化、到物質化的 App 設計

自從 2007 年 iOS 重新發明手機之後,「擬物」化(Skeuomorphism)一直是 iOS App 的設計原則。「擬物」化的設計,讓新接觸「智慧手機」、「智慧平板」的使用者得以沿用過去實物的使用經驗,愉悅地使用新的數位化工具。

但是這幾年智慧手機 / 平板實在太成功,軟體 App 漸漸吞噬了實體世界的各種工具,造成原本「擬物」所參照的物品已紛紛變成老古董,要年輕人畫出電話的形狀,可能畫的卻是手機的模樣... 總而言之,許多擬物的參照物已經漸漸被時間淘汰了。

微軟的設計師們很早看出這個趨勢,在 2010 年推出的 Window Phone 中使用了極端「扁平」化(Flat)的設計風格。 經過幾年來的大膽嘗試,最後也由市占極高的 iOS/Android 定調了使用者界面「扁平」化的發展潮流。「扁平」化的設計,讓使用者得以減少在使用 App 過程中,辨識「擬物」化界面所產生的認知疲勞。

不管是「擬物」化或者「扁平」化,在每個平台的設計指南中,都明確指出設計的 App 要提供最佳的使用者經驗,必須要符合該平台的風格。iOS 還分別為手機與平板提供不同的設計指南,並指出手機與平板是不同的設備,App 設計必須要符合該設備的使用情境。

其實平台們的意思很簡單:現在開發者必需要對應每個平台,針對平台不同的風格提出相符的設計。對於同平台的不同裝置,也請分開處理。

於是現在開發者(或提出 Material Design 的 Google,別忘了他們得支援多少種平台與裝置)要面對的,是針對不同裝置、多重平台開發設計 App 時所需面對的各種問題。

「物質設計」(Material Design)就是 Google 整理出的新跨平台、跨裝置適用 (For every screen, and for all devices) 的設計指南。並將首先套用到 Android 的最新版本「L」上。

物質化的 App 設計

「物質設計」是以「扁平」化的 App 設計為基礎,加上紙質分層的概念(即以「Google Now」為代表的卡片式設計),整理出字體、色彩、圖標等設計模式,並加入佈局(Layout)、圖像,與動畫效果(effect)等設計模式。紙質分層與「動畫效果」產生出的設計模式,就我所知,是在之前的各種介面設計中所未特別強調的。

想進一步了解 Material Design 上的動畫效果,可由 Google I/O 2014 - Keynote(從 18.25 分開始,由 Matias Duarte 介紹 Material Design Animation)https://www.youtube.com/watch?v=wtLJPvx7-ys  查看。

物質設計(Material Design)工具

看完這些大片的色彩、轉場、動畫效果,不知道身為開發者的你臉綠不綠,反正我綠了。 這樣該如何應用於 app 開發哩?整個開發成本還了得?

還好 Google 還提供了一些配套工具 (但卻不是出現在 Android L)。(未完待續)

參考資料

Code Flower of Gaia - The firefox OS front end

· 3 min read

There are several source code visualization tools available for choose. I've tried Code Swarm long time ago and this time I'd like to try something that can be done on web directly. So, here's the Gaia source code visulization rendered by CodeFlower via D3.js.

The prosperity of blossom denotes different

Orange is the settings app flower. The upperside are modulized setting panels. We can see good order of them. The downside crowds are things that not that modularized.

The purple sparkled flower is gaia web components. The main part is gaia-header, the top left part is gaia-grid.

The system app is a flower with a more concrete shape.

The calendar app (in yellow) looks like a pretty Dandelion.

 What about others? go Gaia source code visulization and check by yourself. (The repo is a digest from 2015/1/7 master)

And you can make your own by forking CodeFlower from github.