關於互動設計的概念文章

http://www.inside.com.tw/2013/05/21/transitional-interface


說明了怎樣的小細節對於使用者觀感有多重要

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

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

這個有幾種作法，其中一種，最簡單的，就是利用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無法執行，那應該連控制個畫面都會無法進行。這個沒有測試過，就不敢確定了

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

首先：

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

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

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

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

HTML如何控制文字的換行、斷行後不顯示等等

基本上文字容器我慣用的是<label>
這個label的css控制碼當中，如果你不設定寬、高或任何其他控制碼，
那就是有多少文字，他就秀多少文字直到超過父親容器的寬度就換行。


如果你設定了寬度，那麼超過寬度的部分就會換行，一直換行到所有文字都呈現完畢為止。


如果你再設定了高度，那麼超過寬度換行下來，超過高度之後，還是都有顯示，並不會截斷。


所以我們知道單純的高度設定，是控制不了文字的。


我們先把高度去掉，我們只設定寬度，然後加上一個white-space: nowrap;這樣會怎樣呢？你會看到畫面上只顯示一行文字，而且一直往右，超過父親容器（比方body）的話，父親會出現捲軸（除非父親有設定不要捲軸）。


接著，我們再加上overflow:hidden;你會發現，超過寬度的部分，被截斷了，終於不會把所有文字都呈現了。


再來，我們再加上text-overflow:ellipsis;之後，會發現，被截斷的文字，顯示方式是在最後會出現「 ... 」三個逗號當結尾，可以讓使用者知道這文字沒有全部顯示，這應該是比較適當、常用的一種用法。
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;

最後我在跟各位分享一種組合，但是，我個人覺得不好看


設定寬度、設定高度、設定overflow:hidden;這樣就可以讓文字鎖定在範圍內，但是，此時text-overflow:ellipsis;無法作用，就會讓使用者看到被截斷的文字，不是很好看。

AJAX簡單說

介紹一下最簡單的AJAX模式，看前端如何跟後端溝通，然後讓前端只更新部分畫面，而不會重刷（Reflash），作法很簡單，請先下載範例程式。從client.html中可以看到裡面很簡單，有個按鈕，會觸發JS的function，去做AJAX，而那個JS的function可以從client.js當中看出來，他有一個JQuery提供的,ajax特定格式跟語法。知道了之後，就非常簡單。

利用JQuery提供的,ajax()函式，寫好url : ，告訴程式要呼叫後端哪個PHP，error : 當Ajax失敗，則執行這個函式，看要怎麼顯示給使用者都可以。success : 則是當數值傳回來時要怎麼運作，比方這裡是把#msg那個DIV所包含的子元件替換成PHP回傳的數值：Hello Ajax字串。這樣就不會整頁重刷，而只是更新某些元件，也就即時的更新整個頁面的某一小塊罷了。

還能透過JQuery所提供的 fade in 跟 fade out特效，來達成更完美的更新。

如何在Server端的PHP第一次執行時就讓JS依照PHP的不同數值而產生不同的介面

老觀念再度重複，HTML是網頁的基本主體，CSS用來述說這些主體的長相（長、寬、高、顏色等等），Javascript則功能很多：
1.可以用來讓HTML主體中可以有一些邏輯判斷，來動態的控制長相，或是產生不同的HTML主體。
2.可以作資料的判斷控制，讓資料傳送到SERVER之前，能被判斷過，有效的才會傳送到SERVER，以免浪費網路跟使用者時間。
3.還有更多的可以


這裡介紹一種前端Javascript取得後端PHP變數的用法（其實這時候沒有前後端，而是都還在後端，讓你可以在網頁第一次被載入的時候，就依照PHP的某個值（也許來自資料庫，也許經過某些邏輯判斷），來決定你的排版。


有三個程式檔（點我下載），Example-TestPhpTransParas-Main.php, Example-TestPhpTransParas.js, Example-TestPhpTransParas.css組合起來就可以讓後端的PHP的變數傳遞到Javascript檔案中，進而可以控制.css，來讓排版不同，比方某些HTML主體不顯示、顯示、變顏色、改長寬。底下的重點就在於紅色的部分，他透過PHP語法，把參數用ECHO方式吐到HTML的JavaScript片段裡然後讓JavaScript變數承接這個吐出的數值就行。

（這個範例需要RUN在Web Server上，否則沒法看到PHP的執行效果），而實際應用上，前端的JAVA跟後端的PHP的資料傳遞是透過POST跟GET的，而後期，這技術更演變成網頁上很強又很知名的技術：AJAX。相關文章在這裡。


----------------------Example-TestPhpTransParas-Main.php-----------------------------


<script language='JavaScript' type='text/JavaScript'>
isShowLabel = <?php echo $DB_Data ?>;
</script>





----------------------Example-TestPhpTransParas.js-----------------------------

$(document).ready(function ()
{
if ( 1 == isShowLabel )
{
$('.Lbl_PHP_Show').css("visibility", "visible");
}
});

----------------------Example-TestPhpTransParas.css-----------------------------
無需特別注意之處