前一陣子,接到一個app切圖製作載入圓形進度條的任務,看到那個小進度條轉啊轉的,我若有所思同時,一個做印象派製作間控制項設計的同學最近做了 改版,那個控制項登陸需要一些時間,看到他對loading載入條進行了優化,然後就一起交流了一下。作為一個剛畢業入行不久的新人,請允許我分享一下關於 討論loading載入後的一些心得…
這是一個浮躁的年代,長聽到這樣的抱怨好慢!”“等到死!,每次看到那個轉啊轉的圈圈,或者是那個“loading…”後面那三個點不停滴閃動,心裡總是有莫名的焦躁,彼時的心情就好像下面這張圖片一樣,不知您是否有同感

有人統計,用戶能夠忍受的最長等待時間大約在 68秒之間。8秒是一個臨界值,如果網頁載入時間在8秒以上,很有可能大部分訪問者最終都會離開該頁面。除非他一定要打開那個頁面。


以上三種是常見的loading方式,如果是我,我更希望看到第三種的進度條,因為我實在不知道第一個圈圈要轉多久才能算載入成功,也不知道第二個點點點要點到猴年馬月。


但是如果這個時候,介面除了看到載入以 外的東西,是否就能轉移用戶的注意力呢?比如我們在銀行排隊的時候,如果我們無時不刻看著自己手中的號碼 牌和叫號板,雖然知道自己大概什麼時候會輪到,但是依舊會無聊和煩躁。這時候銀行裡的一些宣傳單起到了很好的作用:比如各種銀行的理財產品,如果你不小心 還看到了適合自己投資的,肯定會激動不已,覺得這個等待時間給自己帶來的意外的收穫,即使沒有得到自己想要的資訊,也不會覺得那麼無聊了。又比如視頻在緩 沖的過程中,總是會放一段廣告,我一直弱弱滴認為這個好雞肋,捨不得放棄看那個視頻,但又要忍耐這個載入時候的廣告。但是如果廣告做得很棒,就一點都不煩 躁了,甚至還在評論裡看到求載入廣告的地址。網頁的loading就承擔了宣傳單跟載入廣告的作用。

ace 發表在 痞客邦 留言(1) 人氣()

Youzee

我們已經瞭解很多關於HTML5的技術了,很多人也開始在自己的專案中應用各種HTML5技術。這裡,Design Art Wall收 集了15個採用HTML5實現的網站,當然它們還有非常贊的介面設計,這些網站不僅在coding上,更在設計上能給我們更多的參考,當然,國內很多網站 僅僅是使用了HTML5的doctype而沒有真正的採用HTML5的語義化標籤和更多高級特性。嗯,是時候做更多的嘗試了。

當然,如果你做了或者見到了很棒的採用HTML5技術實現的中文網站,歡迎通過評論回饋給我們,多謝~~

Youzee

Brasserie Gerard

Web Designer Wall

ace 發表在 痞客邦 留言(0) 人氣()


jQuery UI.Layout Plug-in
jQuery UI.Layout Plug-in對於前端網頁的操作非常有幫助,對於不是很懂CSS的人,很適合用來做後端的操作介面!
jQuery UI.Layout Plug-in 有幾點不錯的功能,比較好的部分整理如下:
collapsable:讓pane可以自由收合,也可以加上喜歡的jQuery特效
resizable:每pane都可以自由的縮放,當然也可以限制縮放的大小

ace 發表在 痞客邦 留言(0) 人氣()

譯自:Smashing Magazine

中文:Zen Coding: 一種快速編寫HTML/CSS代碼的方法

請尊重版權,轉載請注明來源!

在本文中我們將展示一種新的使用仿CSS選擇器的語法來快速開發HTML和CSS的方法。它由Sergey Chikuyonok開發。

你在寫HTML代碼(包括所有標籤、屬性、引用、大括弧等)上花費多少時間?如果你的編輯器有代碼提示功能,你編寫的時候就會容易些,但即便如此你還是要手動敲入很多代碼。

ace 發表在 痞客邦 留言(0) 人氣()

程序代碼

提供一個 HTML 語法小技巧,若您有以前設計的舊網頁在 IE8 顯示上有不正常的情況時,或者是為了考慮各瀏覽器相容性問題時,其實您可以使用 Expression Web 開啟網頁,切換到網頁的 <head> 與 <head> 之間,輸入下述 meta 標籤語法,即可讓使用 IE8 瀏覽器瀏覽網頁時,自動預設以 IE7 解析模式運行,語法為:

程序代碼
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

ace 發表在 痞客邦 留言(0) 人氣()




目 前用手機上網的人越來越多了!總不能為了手機專門設置一個網站吧!?最好的方式是知道使用者使用何種裝置上網,自動切換到適合網頁去!其實這需要透過 Server端的程式來作一點小判斷,就可以作到自動的切換,這邊整理一下手邊的資料, 分別針對PHP與ASPX作介紹。

PHP版本判斷:

ace 發表在 痞客邦 留言(1) 人氣()


網 頁自動切換合適的網頁後,接下來就是要開始來製作手機版的網頁囉!手機或是電腦的網頁看起來是相同,只要電腦版能正常運作,在手機上應該都可正常預覽,如 果要專門讓手機來瀏覽時,這時就有點不太相同了,除了版面要另外設計外,還有一個相當重要的東西,那就是HTML檔頭的宣告,一般在設計網頁時,上面所宣 告的是給電腦版使用,目前大多使用XHTML的設定,若用此宣告放到手機版時,則會發現到怎網頁的版面都縮小,這是由於手機內建的瀏覽器,當網頁為電腦版 就會把版面撐到980像素,所以當要開始製作手機版網頁時,首先要做就是檔頭的宣告,這樣網頁在手機下,才能正常顯示手機版的尺寸大小。
宣告的部分有二種方式,一種是加在html上,另一種是加在<head>~</head>之間,二者取其一就行了,若要二邊都加的話也可以。
第一種方法、加在<html>上方:

ace 發表在 痞客邦 留言(0) 人氣()

程序代碼

PPT:Taming CSS Selectors
作者:Nicole Sullivan
CSS 文件的大小和所引起的 HTTP 的請求數
是 CSS 性能的最關鍵因素
回流(reflow)和渲染時間

ace 發表在 痞客邦 留言(0) 人氣()


工作中,網頁設計師經常會遇見這些狀況:時間這麼短又要出彩、又是要大氣要有氣氛、風格不明確很難把握、欄目這麼多頁面又這麼長……
突然覺得束手無策,腦袋裡一片空白,沒想法了,怎麼辦?
下面簡淺的歸納了幾個快速讓頁面出彩的小技巧:
1.旋轉法 – 將頁面的主體或局部進行旋轉
我們一般的頁面版式都是方方正正,四平八穩,有點呆板。如果將局部或整體適當的旋轉,打破穩定的構圖,畫面就會動感有趣一些。

ace 發表在 痞客邦 留言(0) 人氣()


下面是CSS模板清單,將幫助您減少手酸,煩惱,節省您在寫CSS的時間了,希望你會發現它很有用。無論你是一個有經驗的Web開發者,或剛開始使用CSS的初學者,都值得一試。



CSS Reset (CSS固定樣板)

ace 發表在 痞客邦 留言(0) 人氣()

Windows 8 終於發佈了,雖然現在可用的只是開發者預覽版,好消息是,IE 10 也隨著發了,雖然現在還只有Windows 8可用。我們來看下IE10都有哪些新特性吧。
IE開發者中心給到了一份詳細的針對前端開發者的文檔,列出了IE10支持的HTML5和CSS3新特性。嗯,它終於跟上了:
CSS3

ace 發表在 痞客邦 留言(0) 人氣()

直接在圖片元素上直接應用CSS3 inset box-shadow border-radius時,流覽器並不能完美的渲染它們。不過,如果把這個圖片用作背景圖,你就可以可以給它添加任何樣式了,流覽器也會很好地渲染。Darcy Clarke和我做了一個簡單的教程,講解如何使用jQuery來動態地製作完美的圓角圖片。今天我將重溫這個主題然後向你展示使用background-image的方法可以實現多少效果。我將向你展示如何使用box-shadowborder-radius transition 來創作不同的圖片風格。

先看下demo

問題 ( demo)

看一下demo,請注意在第一行的圖片中使用了border-radiusinset box-shadowFirefox會直接在圖片元素上渲染border-radius,但不會渲染inset box-shadowchrome/safari則兩者都不渲染。

解決方案

ace 發表在 痞客邦 留言(0) 人氣()

1 2 3 4
Blog Stats
⚠️

成人內容提醒

本部落格內容僅限年滿十八歲者瀏覽。
若您未滿十八歲,請立即離開。

已滿十八歲者,亦請勿將內容提供給未成年人士。