可彎曲的超薄平版會在未來 5-10 年內面市嗎?

可彎曲的超薄平版會在未來 5-10 年內面市嗎?

很多人對微軟新任 CEO Satya Nadella 有所期待,認為他將有機會改變一些過去微軟不願意正視的問題,像是網路化對桌面軟體的衝擊,像是對行動設備反應慢半拍,像是 OFFICE 的封閉,像是與 LINUX 社群間的關係等等…但從他上任後的一些做為,像是願意面對 Windows Phone 在行動設備表現不佳的事實,轉而將原本專屬於 Windows Phone 平台的 OFFICE 釋放給更多的平台使用,讓具有市場優勢的 OFFICE 進入對手的領域 (iOS、Android),或者是收購頗受好評且支援跨平台的行事曆 Sunrise,這位可愛的印度人,正在用一個開放的方式改變大家過去對微軟的既定印象。

設計的素材不足時該怎麼辦?

設計的素材不足時該怎麼辦?

記得以前讀復興商工的時候,有一門課程叫基礎造型。課程內容是透過尺規作圖的方式處理一些點、線、面的造型變化;像是先畫一條一公釐寬的線段,然後再畫兩公釐、三公釐、四公釐…依此類推,直線畫完改畫折線,折線畫完改曲線,或者是畫一個方形漸變到圓形、由大到小、由遠到近、由亮到暗、區分強弱,練習對一個造型的平塗、漸層、明濁等等。由於當時還未電腦化,所有的動作都要透過尺規、廣告顏料、平塗筆及鴨嘴筆一筆一畫完成,最後學期末就是要透過這些基本造型繪製一幅表板尺寸的圖像。由於這門課程的李美惠老師非常嚴格,繳交的作業如果未達李老師的標準,常常會當面撕毀,加上學長姐的種種傳說,所以對這門課的印象非常深刻。當時年幼,大多數的時間裡都無法體會這門課的趣味及重要性,只覺得平塗一個造型實在非常枯燥乏味,遠比不上可以大筆揮毫的水彩、油畫來的痛快有趣,同學們也多半苦不堪言。

Hover.css

CSS3 寫的 Hover 效果,內容涵蓋 2D、背景、Icon、邊框、陰影和光暈、各種方向的對話框及折角的轉換,部分效果需要使用新式的瀏覽器才能支援,以 MIT 的方式對外授權釋出,可以自由應用在各式連結、按鈕、Icon上。如果要加上 Icon 的效果,請另外下載 FontAwesome (如何使用 FontAwesome),支援 less 及 scss。

水波紋的按鈕回饋

水波紋的按鈕回饋

在 UI & UX 的設計上,按鈕的回饋在設計上是一個需要反覆推敲的重點。目的是要提醒使用者目前的動作是什麼。一般常見的回饋方式有改變顏色、置換 ICON、轉換按鈕造型等等多種方式。其中,水波紋的效果因為 Google 的 Material Design 的採用,也開始被大家所接受。Subtle Click Feedback Effects 提供了 22 種各式水波紋的回饋效果,而且包含相關的原始碼,讓你可以藉由線上讀範例,馬上將各種水波紋彙整到需要的網站裡。(完)

PS. IE 10 不支援這個效果。

Transformicons:為 Icon 增加動態效果

Transformicons:為 Icon 增加動態效果

目前一般的網頁 Iocn 都是靜態的,頂多用 Gif 表現一些簡單的效果,如果要像 Flash 可以有一個平滑的動畫效果,往往還需要借助程式設計師為這些動畫編寫相關的程式碼。這對視覺設計師來說,會產生一個問題,那就是對畫面失去部分的掌握,往往需要等到程式設計師處理完後,再由視覺設計師做最後的潤飾,在案件急迫或客戶預算有限的形況下,很容易產生執行上的困難。因此,對視覺設計師來說會希望有一個簡單的工具來幫助他處理類似的問題。

對於這個問題 Transformicons 顯然注意到了。它提供一系列由 SVG 及 CSS 組成的動態 Icon,像是常用的選單、網格、新增、刪除、寄信、載入等等動態效果,而且你只要透過點選 Builder 的按鈕,然後勾選你需要的動態效果,就可以直接在線上產生相關的程式碼。讓視覺設計師在製作網頁的時候能夠直接複製貼上,不用為這些可以添加畫面趣味的小動畫傷腦筋。(完)

讓網頁設計師會心一笑的 CSS 雙關語

任職於澳洲墨爾本 SEO 公司的 Saijo George,因為工作的關係時常需要蒐集各類型的資訊,他在 reddit 看到一篇關於 CSS 雙關語的討論,內容由歷史、天文、政治、商業、建築、小說、懸疑事件等等所組成,並透過標準的 CSS 來呈現這些事件,讓人乍看之下以為只是一般的 CSS,但仔細檢視內容後,又發現這些 CSS 別有洞天。Saijo George 覺得十分有趣,將這些由網頁設計師們提供出來的 CSS 笑話收錄分享到 CSS Puns & CSS Jokes 裡。

is.js 小秘書,輕巧的檢查函式庫

在做網頁互動的時候,我們會希望對一些使用者提供的資訊或是環境參數進行檢查,例如,一份給使用者填寫的表單在送出之前會希望先對表單的內容做一些簡單的檢查,以免使用者填入一些錯誤的資訊 (不管有意或無意),增加 Server 檢查的負擔,像是電子郵件或網址的格式是否正確、信用卡的數值是否符合相關的規範、使用什麼類型的設備等等…

SVG 做的載入動畫

SVG 做的載入動畫

載入動畫是網路上很常見的小功能,主要是用來提醒瀏覽者網頁目前正處於下載的階段,目前大多會使用常見的 Gif 來製作這樣的效果,像是知名的線上工具 Ajaxload。雖然這些 Gif 的確很方便,但還是有一些點陣檔普遍的缺點無法克服,像是不行自由縮放、檔案大小會與動畫的複雜度成正比、不是那麼完美的去背等等。而這些問題正是 SVG 的優點;Sam 是一位住在紐約布魯克林區的設計師,他在常見的 Gif 點陣檔之外,另外提供了一組向量 SVG 做的載入動畫,更重要的是,你可以免費下載,有需要的人趕快來玩看看吧。 (完)

用 chart.js 畫圖表,十分鐘就上手

用 chart.js 畫圖表,十分鐘就上手

有人說未來是一個數據化的時代,特別是即將到來的物連網,會讓生活中的每樣東西都連上網路,當這些設備連上網後會隨者消費者的使用而產生一連串的原生數據;這些原生的數據在未經整理的情況下,對一般人來說會很難理解,往往需要經過專門的單位把數據轉換成有意義的文字或圖像,才能方便理解這些數據背後的意義。舉例來說,如果你有經營網站,一定會使用到 Google Analytics 這套圖像化的工具來幫你紀錄一些訪客資訊,像是瀏覽器的種類、停留的時間、使用那些關鍵字等等。讓你可以透過 Google Analytics 提供的圖表訊息,進一步調整你的網站。

3 of 6
123456