銳3.1.0滑塊替代皮膚

2010年4月6日,6:03上午由傑夫康尼夫|在設計開發 | 1條評論

作者簡介:傑夫·康尼夫是交互設計師,prototyper,視覺設計師工作自2005年以來,雅虎在雅虎HotJobs和小型商業團體。 傑夫有一個度,從聖何塞州立大學平面設計工作自1983年以來,許多公司在設計軟件的用戶體驗。 傑夫使用YUI的平台,每天在他的原型設計工作,愛乾淨的語法和偉大的能力。

我們決定採取銳3滑塊部件外觀了銳3.1.0視覺缺口。 這些都是我們的目標:

  1. 改善整體視覺鮮味和3-D外觀
  2. 提供範圍更廣的拇指和鐵路皮膚
  3. 提供兩套皮膚,以及光的頁面背景為暗
  4. 垂直以及水平的使用提供一套完整的拇指和鐵路
  5. 使更容易地混合和匹配不同的軌道風格大拇指
  6. 提供Photoshop的資產,以幫助開發者在修改滑塊圖像匹配任何背景顏色

比較下面的YUI 3的銳2滑塊皮膚。 一套新的具有多品種,應該成為廣泛的網頁和樣式。

YUI的2滑塊外觀:

YUI的2滑塊皮膚

YUI的3個滑塊外觀:

YUI的3滑塊皮膚

我們沒有限制矩形和45度角的大拇指。 這提出了與抗鋸齒一些挑戰。 銳2大拇指納入拇指圖像的陰影,所以他們是一個堅實的灰色。 我們已經提高了一層陰影對象是拇指圖像分開。 陰影opacity: 0.15 這意味著它看起來自然的陰影落在鐵路和刻度。

我們將提供包含鐵路和拇指圖像的原始Photoshop文件。 這將為開發者提供源,從中輕鬆地自定義圖像,讓他們看看他們的最好放在你的網站有什麼顏色的背景時。

銳3的基礎部件達到遺傳地位上週釋放銳3.1.0 我們還不本地銳3部件有充分的板岩,我們還沒有定義一套全球性的皮膚。 然而,我們所做的測試滑塊組件的可視化資產的工作,應使其更加有用,在短期內,我們將進行所有這些視覺選項作為替代主題或例子銳3基線主題一次到位。

有看看這些工作代碼示例新的滑塊。 結算幕後的詳細運作的皮膚圖像和CSS。

我們希望這些新的滑塊,將是一個很好的視覺除了你的錦囊。

共享和擴展: 書籤del.icio.us Digg它! | reddit!

1條評論

  1. 出色的工作,傑夫。 感謝有益的貢獻,並詳細解釋。 好東西。

    評論內特Koechley - 2010年4月6日,

很抱歉,評論已被封閉,在這個時候。

主辦雅虎

©2006-2012雅虎公司所有權利保留。 隱私政策 - 服務條款

支持WordPress的關於雅虎 虛擬主機