2013年8月9日 星期五

顏色的基礎知識

顏色的基礎知識

常用Photoshop的人應該都對於一些色彩相關用詞不陌生才是,顏色有三個屬性

色相:色彩的外相,比方紅、藍、黃、綠這樣的表現方式。
明度:就是顏色的亮度。
彩度:顏色的鮮豔度,彩度越高越鮮豔。


而色調,就是以明度跟彩度的組合來表示,通常只要掌握度色調的統一,即便用了多色相,也不至於讓顏色混亂不協調。只不過,高彩度的色調使用上要特別謹慎,顏色太重且太多的話,容易失焦。

就像黑白對比強烈一般,利用互補色,經常可以達到很好的視覺效果,而互補色在色表上以16進位來呈現時,恰巧可以發現實用的特性:比方 #00ffff #ff0000就是視覺對比強烈的互補色,#0080ff #ff8f00也是一對互補色。


在配色上,通常除非是天才,不然,通常會遵照一些範本或規範。通常有主要的基準色(目的鮮明,比方跟水有關的網站,可能會用藍色當基準),以及一些輔助色。

2013年8月7日 星期三

版面設計的基礎知識

版面設計的基礎知識:

網頁是用來呈現資訊的,資訊的量通常不小,要讓來看網頁的人能有好的吸收能力才行,要傳達的資訊有視覺元素與文字元素兩大類,將資訊做好分類、群組之後,藉由底下的技巧,達成良好吸收的目的。

1.      讓關連性高的元素靠在一起。藉由改變形狀、顏色差異、加入區隔線、對齊等等方法來區分各個不同群組。
2.      除非精心設計過,否則不建議使用置中對齊,會造成視覺流程障礙,多半使用靠左對齊為佳。
3.      利用字體大小、影像形狀的大反差,來做出對比,做出強調,引導使用者的視覺
4.      相同的呈現理念,就可以反覆的一致的應用在同樣的元素上,讓使用者習慣並很快的吸收變成經驗,看到這種呈現,就知道會是甚麼類型的資訊。
5.      版面大小有兩種設計:
l   一種是固定寬度設計,內容版面的位置不會因為拉大縮小視窗而改變,但是,當使用者的螢幕(解析度)太大或大小或瀏覽器視窗拉大拉小,會導致周圍的空白太多而顯眼,或者是導致橫向捲軸出現,這兩種狀況都可能讓使用者不愉快。
l   另外一種則是動態寬度設計,會隨著螢幕(解析度)或瀏覽器視窗拉大拉小而改變整個版面寬度,但設計上內容元素如果也是要動態寬度高度才比較適合,但,這會限制某些設計的發揮,因為長寬無法固定,比例也無法固定,某些圖文的比例會失控。
6.      首頁的任務:大多數人都知道,首頁是跟其他內容頁面有絕大的不同,他是使用者第一眼見到的頁面,要強調網站的風格、種類就必須在這邊呈現出明確、鮮明的目的,比方有些網站是以提供大量資訊為目的,就會一次呈現大量的分類資訊,比方Yahoo,而有的是萬分明確的告訴你目的,畫面元素簡單到不行,比方Google,其他比方有企業常用的設計方式,鮮明企業形象的視覺元素,透過導覽列來逐一挑選使用者想看的內容,通常注重在衝擊力的設計。比方ASUSAcer
7.      導覽列的任務:導覽列肩負著引導使用者方向的重要功能,所以在可用性的注重上,會高過外觀的設計。導覽列設計上大至有分四種:
l   圖像化項目分類型:圖像化有比較好的視覺效果,但是一旦日後需要增加項目,則可能造成版型設計困難崩壞。
l   文字連結型:通常會在入口網站、購物網站使用,由於每天或經常性的更新內容,所以文字連結來當導覽項目較為容易修改。
l   收納型:就是列出大項目,滑鼠滑過去之後會列出第二層項目的設計方式。對於項目眾多,變動性不高的網頁,很適合這種作法,因為設計耗時。
l   麵包屑分層指引型:這個算是一種輔助的類型,在項目有多層之下,麵包屑指的是網頁上會有地方列出目前所在位置,通常用這種方式來表示:「首頁>產品>主機板」。

8.      版面配置並沒有一定制式的規定,但是,通常有一些常用的型,從「上方導覽型」、到「上方加左方導覽型」、到「三欄式」都是最常見的。也有一些充滿設計感的自由版型,通常越自由,就越考驗著設計師的功力就是了。

2013年8月6日 星期二

Javascript 處理鍵盤事件,Enter, ESC ......

事件註冊的方式,跟一般 Click 差不多

$('.Input_Group_InputName').keypress( function (event)
{
               // 處理
} );


也可以針對某些按鈕才做不同的處理方式


$('.Input_Group_InputName').keypress( function (event)
{
if ( event.which == 13 || event.keyCode == 13 )
{
// 處理
}
} );


幾個比較特別的按鈕
Enter按鈕 的 KeyCode 是13,ESC按鈕是27
ESC 按鈕只能被 KeyUp 抓到,無法在 KeyPress 抓到(限定瀏覽器)
有些瀏覽器沒有 event.keyCode,只有event.which,所以兩個都要寫。

2013年6月13日 星期四

讓畫面中某個區塊或圖形固定在整個瀏覽器視窗的某個位置,不隨著捲軸而移動

如何讓畫面中某個區塊或圖形固定在整個瀏覽器視窗的某個位置,不隨著捲軸而移動?

這個有幾種作法,其中一種,最簡單的,就是利用CSS的Potision屬性,有一個設定值為fixed,這樣,設定的TOP跟LEFT就會讓那個物件固定在該位置,不會因為捲軸捲動或放大縮小,聽起來一切都很完美,只有一點小瑕疵,就是當使用瀏覽器的放大縮小的時候,這個圖形或區塊的大小不會變,但是,這物件裡頭的物件(比方Label)或文字則會跟著放大,這樣,我現在的老闆不能接受,因為他會放大到400%倍,然後說內容都亂了(大囧)


沒辦法,只好用另外一種方法,就是自己寫Script來控制,這個也不難,就是把該物件,比方DIV,設定Potision為absolute,然後取得瀏覽視窗高跟寬,以視窗的高來減去物件高度加上ScrollY以及用視窗的寬減去物件寬度加上ScrollX(備註一)。把上述的這個計算公式寫在Resize()跟Window.Scroll()事件中,隨時把位置固定。




備註一:由於各家瀏覽器不同,所以取得視窗高度、寬度的方式有所不同。取得捲軸位置也有所不同。



//取得瀏覽器視窗高度
function getBrowserHeight() 
{
    if ($.browser.msie) 
{
        return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
    } 
else 
{
        return self.innerHeight;
    }
}




//取得瀏覽器捲軸位置X
function getBrowserScrollX() 
{
    if ($.browser.msie) 
{
        return document.body.parentNode.scrollLeft;
    } 
else 
{
        return window.scrollX;
    }
}

JS的Alert要謹慎使用

Alert本身就是個畫面不優,很陽春的秀訊息對話框,最好僅拿來DEBUG的時候用,因為除了畫面之外,他還是個會卡畫面的Modal Dialog,這會讓處於同一個Session的頁面的JavaScript都會停止,比方說HTML5的Audio元件,我想Video元件也會,但,如果是Script無法執行,那應該連控制個畫面都會無法進行。這個沒有測試過,就不敢確定了

2013年4月2日 星期二

top跟margin-top,left跟margin-left,這些位置控制碼的不同之處

首先:

如果你設定的position是absolute
那麼元件就會脫離排列流「layout flow」
那麼,上述就沒有差別。

如果你設定的position是relative
那麼上述兩種作法就會有不同的效果

設定top, left.....就會讓物件從原本該出現的位置偏移
但是其他的(relative)物件不受到影響還是會在原本的位置

但設定了margin-top, margin-left的話,會影響到排列流「layout flow」,會讓後續所有的(relative)物件跟著偏移。