逼自己思考:嘗試再次思考 UI 設計

2014年10月27日星期一
雖然自己從小喜愛設計,殘害過不少紙筆和滑鼠,但也因為懶惰和時間有限,長大後開始比較少開始動手自己做一些設計。所以,除了突然有一些想法和點子之外,多數時候都會把『設計』這件事推給『設計師』來做,講好聽點叫術業有專攻,講不好聽點就是有想法卻不行動的懶惰派。

如許多人所知,我這幾年一直都在做 JavaScript OS 的開發,嘗試把 JavaScript 應用在各種大大小小的硬體和裝置之中,使嵌入式應用的開發工作更有效率和彈性。又由於這一年來物聯網(IoT)的風潮大爆發,也因此有更多人使用 JavaScript 為基礎的開發,或是形形色色的跨界需求,讓我需要更多時間和金錢去投入這些發展。

不過人總是視覺化的動物,任各種應用發展再多,眼睛看得到的 UI 仍不能缺少。開發的過程中,難免會有一些『有螢幕』的應用。這也是為什麼這幾個月 HanGee 國民機一直在做『OwaNEXT』這樣的 UI 設計工具,而我最近也時常去思考一些 UI 的設計。

如下面展示影片,就是最近這幾周所嘗試開發出來的一個 UI 選單介面概念原型,雖然說是概念原型,但實際上是可以使用的程式,不是一個純展示動畫(畢竟我仍然是一個程式開發者 :-D)。這個 UI 因為是設計給大尺寸螢幕所用,所以是用『Everywhere』為出發點,讓人可以在任何一個地方憑空叫出選單,效果和使用方法都是以一個手掌可掌控為目標:



話說,我一直都不是個走純 Web 路線的開發者,過去有好幾年完不碰 Web 開發,只因為當時 JavaScript 和瀏覽器的效能和效果讓我很不滿意,然後也發現因為太依賴瀏覽器,讓自己的視野窄了許多。也許是因為這樣,這些年許多從前端所發起的各種 UI 設計討論,我沒有接觸太多,也沒有被同化成一份子。

所以,大家在前端很熟悉的 UI 切版、排版等等平常再不過的工作,對我來說反而都是可以再思考和需要再質疑的東西,也仍然保留著強烈的好奇心和探索的意圖。所以最近一直在思考設計 UI 時,一直在想『跳脫出 2D 排版的思維』這個議題。

不知道是因為工具的關係,還是設計方法的關係,現今的 UI 設計,總跳脫不出平面排版的框框,這個東西擺左邊一點、擺高一點、放大一點等等修改,一直是現今許多 UI 設計的討論重點。很少聽到在討論,這個速度要慢一點、緩一點、從哪開始、又從哪定位。

是的,因為討論到這些東西,就會開始討論到動畫,討論到動畫,就會開始討論到分鏡,討論到分鏡,甚至還得討論到電影學。你會發現,這將會變成一條非常難走的道路,於是,現今主流的 UI 設計,大多仍然停留在平面上。但你也會發現,像 Apple 這樣只要多用心一點點跳出常規平面設計,UI 就讓人覺得美得冒泡或更善體人意。

事實上,過去我一直覺得是工具不夠進步,讓我們設計總是無法讓人像電影中那樣讓人震撼或感動。這或許是個原因,但當自己投入下去做且開發工具時才發現,有更多的原因是自己素養不夠。像是當我要思考物件之間的關係,前後順序的意義表達時,我發現,自己沒有很好的分鏡技能,甚至可能是素描技能、說故事的能力。

因為技能不足,於是,我需要花更多時間在調整細節,並用毫無標準的本能去感受微調結果。過程中發現,工具或許可以幫助我們減短微調的時間,但無法減少微調或打掉重練的次數。這就像是一些專業或天才的音樂家可以在腦中譜曲後(甚至是多部同時、以不同樂器同時譜曲),到一定程度再寫下來或演奏出來;而半路出家或比較沒天份的音樂創作者,只能用哼唱出來或利用樂器演奏完後,才能確定旋律好壞。

不過還好,UI 設計所需要的技能,可以靠後天補足,這是我們值得慶幸的。我也仍然會不時去創作和發想一些 UI 的點子,並實作出來。:-)

Hankathon 黑客松專用倒數計時器!

2014年9月23日星期二
不用覺得奇怪,Hankathon 沒有拼錯,這是取自 HanGee + Hackathon 的命名。是這次為了 9/20 - 9/21 兩天的 HanGee Hackathon 活動,設計的一個騷包倒數計時器,也是我在邊辦活動邊做的成果之一,用來提醒眾參加者們,時間正在毫不留情的流逝!




Source Code: https://github.com/HanGee/Hankathon

如果你的黑客松、活動需要用到這個倒數計時器,歡迎取用!也歡迎修改成你想要的功能!只是,如果可以的話,麻煩留下蕃薯的小圖,協助讓 HanGee 亮點像吧!:-)

後記

這次的黑客松活動,就在經歷過兩天美好的夜景、日出景色,最後經歷颱風大雨的情境下落幕。雖然中間出了一些烏龍,仍有一些朋友們沒有被好好照顧到,但都在歡樂的氣氛下和滿滿的產出中結束。下我們肯定會再次舉辦,讓更多無論有沒有資身技術背景的朋友,都能夠共同參與並學到東西和經驗回家。:-D

此外,如果有社群或企業想要一同舉行下次的 Hackathon,歡迎連絡我們!

【萌典 x HanGee x DOITT x 黑客松】睡不著嗎?那就不要睡了!

2014年9月3日星期三
熱血的開發馬拉松活動(Hackathon)來囉!讓我們吃吃喝喝、不眠不休地設計應用吧!一群素不相識的設計人,無論是程式設計師、視覺設計師、UI/UX設計師,還是任何一種從事『設計』和『開發』工作的人們,在短短有限的時間內組隊並相互合作,一起投入設計同一個專案,與不同隊伍相互較勁!

這次萌點、DOITT 和 HanGee 合作,將於 9/20 - 9/21 兩天,聯合舉辦 80 人不中斷黑客松活動,熱血的朋友們,快來報名並幫忙宣傳吧!如果你願意贊助,也歡迎聯絡!

報名網址:
http://han-gee.kktix.cc/events/hangeehackathon201409

讓我們回歸原點,什麼是黑客松呢?

由於這幾年國內舉辦過很多大大小小的黑客松活動,大多數人對於黑客松早就耳熟能詳。不過,除了由技術背景的單位和社群自發性舉辦的活動外,許多黑客松活動,比較像是純粹的比賽,讓許多團隊來展示自己研發已久的專案或產品,慢慢脫離了開發馬拉松的原意。所以,因此不免也有許多人對黑客松產生誤解,覺得就只是個普通的比賽活動。

事實上,和時下流行的路跑活動一樣,黑客松並也不是個普通的比賽活動,而是一個讓設計人在閒暇時間,參與的開發運動。解放自己,做自己想做的設計和開發,挑戰自己,在有限時間內做出東西來,才是黑客松活動的原始目的。

我能參加嗎?

對開放社群的朋友們來說,『黑客松』已經是一個再熟悉不過的名詞了,但對普通人來說,只要看到『黑客』兩個字,就覺得是一個敬而遠之的東西。不只如此,很多技術人員和設計師也對這活動有所誤解,覺得一定要非常有實力才能參加黑客松活動。

其實,黑客松和路跑活動一樣,並非只有專業選手才能參加。只要你有興趣、想實際參與多人設計和開發,無論你是學生、普通程式人員、還是新手設計師、初級自造者,都歡迎帶著學習、共樂的心前來參加!

你可以來找人一起完成自己天馬行空的想法,也可以和別人一起完成其他人的鬼點子,亦或是在這找到同伴共同想出新點子!

我能得到什麼?

在這活動中,參加者將帶著愉快的心情前來,一邊吃吃喝喝交朋友,一邊與從未合作過的朋友和高手們組隊,做出作品!然後你會發現,因為只有短短的一兩天,大家將使出混身解數,在短時間內做出出乎意料的驚人成果。最重要的是,也能從其他高手身上學會不少東西!兩天所獲得的東西,絕對物超所值!

此外,黑客松就像微創業,有限的時間、有限的資源、三五好友聚在一起,然後打造出產品,上台公開發表。這是找回自信心和工作效率,以及想體驗創業的最佳途徑!

活動上有什麼?

有高手大大、帥哥與美女人才們,有電有網路、有吃的有喝的,既然台灣的夏天嚴熱,當然還有附上空調視野絕佳的舒適環境,讓大家安心動手做設計、做開發!挑戰自我!

歡迎更多合作單位聯名加入!找人才?重視人才?快來吧!

HanGee 將會持續不定期舉辦黑客松活動,歡迎各界加入並可以以任何形式共同合作。舉辦一個黑客松活動需要食物、人力、場地等各種資源,歡迎您的參與和協助!

如果您是公司行號,這樣的活動,非常值得重視人才的您長期贊助。此外,這也將是你挖掘頂尖人才的最佳場合,履歷和面試怎麼也比不上近距離接觸觀察,實際與人才們合作從頭完成專案,才是最好的方法!

有興趣嗎?請務必與 HanGee 聯絡!

也想要辦黑客松(Hackathon)嗎?也請務必與 HanGee 聯絡!

聯絡方式:hackathon@han-gee.com


嘴炮不再!MDS 加密檔案系統釋出!

台灣的電玩機臺一直是一個很少人探討的遊戲產業,他們外銷機台到國際各大賭場,除了一直在設計讓人願意掏錢的有趣遊戲機外,也真真實實用到很多資訊科技。在多年前一次南部的經驗,有幸接觸到這樣神秘的產業,也幫他們開發過一些東西。而其中一項專案,就是一個加密檔案系統,讓他們可以保護他們的遊戲程式,避免被對手輕易偷走自家的程式。

於是就有了這個 MDS 檔案系統(Middle Stone Filesystem),採用 blowfish 演算法加密,支援 384-bit key 和同時多組 key 的存取。由於作業系統本身會很容易破解修改,要保留可以將解密工作和 key 放在額外的硬體鎖或晶片上,甚至是多組 key 可跨多個硬體晶片存放,增加破解的難度。所以因此也設計了一些單獨的讀取工具範例,讓硬體鎖的開發人員,可以參考做法,寫在其硬體韌體(Firmware)中。不過,更近一步和硬體整合的版本,礙於敏感,這次就沒有釋出了。

專案網址:
https://github.com/cfsghost/mdsfs

其實,這專案多年來一直對周圍的朋友嘴炮說要開放出來,可是一直沒負諸行動(當然也是因為懶惰)。而今天看到 iCloud 被破解的新聞,受到一點資料安全問題的刺激,於是想起這個專案,所以就花點時間挖出來整理一下文件並往 Github 上丟。由於,這個基礎版本很久沒維護了,安全性如何我不能保證,但拿來做學習 FUSE 和加密演算法應用,倒是有點參考價值。如果有人想要接著開發,也非常歡迎!

另外,有些人反應不知道能拿來幹麻。關於這件事,其實把 MDS 當做一個簡單的加密打包工具,也是可以的。

後記

看到 iCloud 被破解的新聞,不由得讓人重新思考雲端和未來物聯網時代,資料安全的重要性。稍為瞭解真象的人通常都會跟你說,千萬不要相信任何人,將東西和隱私放在雲端。而通常你第一個要害怕的是雲端系統管理人員和系統設計人員的操守,他們是不需要經過任何破解手段,即可全權存取你資料的人。再來,我們要擔心的是系統的安全性,設計者和管理者能否真有能力去保護使用這的資料?這從使用者手上的 App、作業系統、瀏覽器,一直到雲端上的一切系統,都是必需要考量的範圍。也因為這樣種種的複雜情境,使用者實在難以得到真正安全的保護。

原因其實很簡單,當檔案自你手邊的機器準備發出去的一刻開始,你的資料便以明碼的方式在程式、網路和機器間處理,或許你手上的 App 很安全,沒有後門;或許你的網路傳輸很安全,有加密所以不會被人監聽;或許雲端伺服器也很安全,經過重重保護。但是,只要有人在過程中找到漏洞,或在其中找到缺口並進入了資料庫,你的秘密就赤裸裸的躺在哪。

包括我自己,總不認為自己運氣會這麼差,不會有人這麼有空或有能力去破解取得自己放在雲端上的資料。畢竟,這些意圖不軌的駭客,要對抗的是像 Apple、Google 這類比哥吉拉還可怕的大公司。我們也總是想,真要是被人看光光了,就當隱私賣給了別人,自己可以向這些大公司求償噱一筆。

就是這樣自我安慰的想法,讓我們從來就不真正在乎資料的安全性。那些所有信件和檔案都要用 GPG Key 先加密過再傳送的人,在我們的眼中,總覺得他們是個怪咖。但,可能隨時我們的報應就會來了呀。就算他們的檔案被偷光,沒有他們的 Key,那些檔案資料根本就是一堆沒意義的亂碼垃圾;而我們,就是什麼都被人看光光。

【Node.js 小密技】使用 crypto 模組亂數產生字串

2014年6月26日星期四
已非常熟悉 Node.js 的人都知道,crypto 模組是一個無中生有的神器。我們可以用它的 API 加工加密資料,也可以解開加密後的包裹。既然和密碼處理相關,當然也有亂數產生器,可供開發者產生一大堆的亂數資料。

如果你需要一個 32Bytes 長度的亂數資料,可以直接呼叫 crypto.randomBytes() 並帶入長度後生成:
var crypto = require('crypto');
var buf = crypto.randomBytes(32);
註:回傳的結果 buf ,是一個 binary buffer,而每一個 Bytes 都會是範圍在 0 ~ 255 (0x00 ~ 0xff)的數字。

不過,在多數應用中,我們更常需要一個亂數字串,而非二進位的亂數資料,這時就需要做一些進一步的加工處理。方法其實不只一種,如建表、取代不可見字元碼等方式都可以,沒有標準做法。但懶惰的開發者們,多半是直接利用 Buffer 內建的 API 來將資料轉換成字串,並指定編碼方式來達成。

下面兩種方法都可行:
buf.toString('hex');
buf.toString('base64');

只是,使用十六進位(hex),會讓你的最後的字串單純只有 0-9 和 a-f 的字元存在,所以使用 base64 是比較好的選擇,讓字串多變並複雜些。

註:base64 編碼是以 6 bits 為單位來進行處理,而 1 Byte 有 8bits。如果你的資料長度非 6 bits 的整數倍長度,base64 會在結尾補上『=』。有些人覺得多了一些『=』符號很醜,就會用 replace() 替代掉或者是一開始就取 6 bits 整數倍長度的亂數資料(如:3 bytes、6 bytes 等等)。

有些情況,我們需要特定長度的亂數字串,也可以搭配使用 substr(),只是要確定生成的字串長度,比我們想要的字串長度還要長。下面的範例,就是取八個字元長度的字串:
buf.toString('base64').substr(0, 8);

當然,若你想要一次搞定,也可以將之前所說的,全部串在一起寫:
var randomString = crypto.randomBytes(32).toString('base64').substr(0, 8);

後記

最近在開發的 Project 中,一直在處理 Token 以及密碼相關的東西,常用到亂數字串。之前用過不少方法,每次要寫不少 code 相當讓人煩燥。所以記錄下來,以後自己直接 copy & paste 即可,也讓有相同需求的人可以直接參考使用。
Copyright @ 2013 Fred's blog. Designed by Templateism | MyBloggerLab
載入中…

誰在追蹤 Fred

您可以贊助 Fred 持續寫作

廣告與公益


Blog Archive