Q：
Cookie與中文亂碼的問題？
A：
中文字的編碼與Cookie預設的編碼方式不同，因此必須先行在URL傳輸過程中經過一道編碼、解碼的程序，才不會發生中文字在Cookie中讀取出來為亂碼的情況。
編碼
HttpCookie cookie_name = new HttpCookie("name");
cookie_name.Value = HttpUtility.UrlEncode(txtUsername.Text);
Response.AppendCookie(cookie_name);
解碼
String Username = HttpUtility.UrlDecode(Request.Cookies["name"].Value.ToString());
Q：
讓firefox支援text-overflow: ellipsis
A：
萬萬沒想到ie有一個css的屬性text-overflow，設定後可以讓文字產下截字效果，超出的文字用省略符號(…)來代替；而更萬萬沒想到firefox居然完全不支援此一屬性…
https://bugzilla.mozilla.org/show_bug.cgi?id=312156
網路上有人分享了很多解決方案，不過以這篇
溢出文本顯示省略號,關於text-overflow:ellipsis的那些事 - Leeiio Chaos Made.
http://leeiio.me/text-overflow-ellipsis/
的第二種方法利用jQuery完美地解決這個問題，不過奇怪的是，請注意必須將有應用到解決方案的網頁跟這個.js和.css(包括jquery-1.4.2.js)等檔案都放在同一個資料夾才會有作用!!
http://plugins.jquery.com/project/textOverflow
Q：
在GridView控制項中以DropDownList分頁
A：
參考http://www.dotblogs.com.tw/poto/archive/2009/01/14/6798.aspx
然後在後製程式碼中加入…
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
GridView1.DataBind(); //為了自訂分頁數字按鈕的繫結
}
}
Q：
ASP.NET如何用Button打開新視窗?
A：
可以參考這個網址的程式寫法：http://yukisan.pixnet.net/blog/post/26796800
或者也可以使用ASP.NET AJAX Control Toolkit ModalPopup，這就像是以前JavaScript用的showModalDialog。
不過如果有參數要傳值到後置程式碼(Code Behide)的話，這個方法就不行了，必須還是使用傳統的方法!!
參考範例：
.aspx
.cs
閱讀全文...
根據WIKI，Android是基於Linux核心的軟體平台，是Google在2007年11月5日公佈的行動電話系統平台，早期由Google開發，後由開放手機聯盟（Open Handset Alliance）開發，這個組織是Google和其他幾十個手機公司為了推廣此技術所成立的。它採用了軟體堆疊（software stack）的架構，主要分為三部分：
- 低層以Linux核心為基礎，只提供基本功能。
- 其他的應用軟體則由各公司自行開發。
- 以Java作為編寫程式的一部分。
Android應用程式是用JAVA程式語言來編寫，並且運作在一個虛擬機器(VM)中，其中VM不等於JVM，而是Dalvik Virtual Machine。除此之外，還包括Android SDK、APT(Android Development Tools)、Eclipse IDE和JDK。因此要開發Android應用程式，最好是在Linux環境之下，尤其是Ubuntu，當然如果要在Windows環境下開發也可以。
如果要移植Android至Embedded System的產品開發，就必須理解Android系統內部的函式庫、Android執行環境與Linux核心的細節。而就最重要的是開發者不用花費到一毛錢，便可以建構一個很完整且便利的Android應用程式開發環境，並 發展屬於自己的應用程式
Android內建的網頁瀏覽器(Web Browser)的名稱叫做Google Chrome Lite，與iOS當中內建的Safari網頁瀏覽器一樣是採用Webkit網頁引擎(Web browser engine)。Webkit是目前最多知名智慧型手機作業系統採用的網頁引擎。這些作業系統包括了Symbian OS、iOS、Palm webOD與Android等。
Webkit可以讓正常網頁(非手機版本)自動調整成頁寬(auto fit page)的方式完整縮小呈現在手機的小螢幕中，如此可以方便使用者立即在手機上看到正常網頁的全觀，如果要近看某區塊之內容時，只要將該區塊放大即可。
另外Android內建了SQLite的關聯式資料庫引擎(Relational database engine)式的設定資料或者上一次遊戲關卡的資料等。在應用程式當中，如果使用了SQLite，則手機用戶可將相關資料儲存在手機儲存設備中，無需再以網路連線方式存取遠端的資料庫。
Android在未公開之前大多傳聞認為Google開發的是自己的手機電話產品，而不是一套軟體平台。到了2010年1月，Google開始發表自家品牌手機電話的Nexus One。
對於使用者而言，只要先申請一個免費的Google帳戶，當想換一台手機時，就可以在不同廠牌，同樣使用Android作業系統平台的手機之間選擇，簡單地將如聯絡簿等個人資料轉換到新手機上。
Android Market是一個由Google為Android所創建的線上應用程式服務，允許用戶瀏覽和下載一些由第三方開發商為Android開發的應用程式。用戶可以購買或免費試用，讓該應用程式直接下載到Android的手機中。上傳應用程式到Android Market需要20元美金的帳號註冊費，而下載付費軟體需1元美金。
目前應用程式的數量已經突破10萬組以上，不過整體僅為蘋果App Store約1/3的比例，而且Google線上評審似乎顯得「寬鬆」許多，也因此不少應用程式的品質參差不齊，甚至還有人刻意透過撰寫 Android應用程式竊取使用者個人資訊。不過隨著目前Android平台市占率逐漸提昇，數量和品質是後勢看漲！
閱讀全文...
剛接觸嵌入式系統時，直覺聯想到20年前接觸的「單晶片微電腦」(Single-Chip Microcomputer)。同樣是把中央處理器、記憶體、定時/計數器（Timer/Counter）、各種輸出入介面等都整合在一塊積體電路晶片上的微型電腦。當時所用的開發工具是Z84C01微電腦電路模擬板，開發的語言是Z80組合語言。
當時的Z80與Intel 8080、Motorola 6800等都屬於8位元微處理器，而之所以會選擇Z80是因為I/O中斷控制和抗雜訊的能力很強，因此適用於工廠、電梯等工控系統。
Z80是由Zilog公司於1976年製造，後來由Intel公司於1981年製造的8051也是8位元單晶片微電腦，屬於MCS-51單晶片的一種。近年來由於功能不斷加強，價格愈加便宜，傳統的8051已經成為學校的教材。開發的語言除了8051組合語言之外，也可以搭配C語言來縮短開發的時程。
另外美國Microchip公司於1989年開發的PIC(Peripheral Interface Controller)，也是8位元微處理器。PIC由於採用RISC架構，快速的運算、簡單易用、價格便宜、低耗電，高速，高輸出驅動電流、豐富多樣化的週邊界面提供選擇等優點，目前廣為業界採用，尤其是大量應用在消耗性電子裝置、家電、玩具等產品上。
其實4位元微處理器多用於冰箱、洗衣機、微波爐等家電控制中；8位元、16位元微處理器主要用於一般的控制領域，一般不使用作業系統；32位元則用於網路操作、多媒體處理等複雜處理的場合，一般要使用嵌入式作業系統。
所謂的嵌入式系統簡而言之是一種『執行部份特定功能』的系統實作上並不限定技術範疇，只要能將特定的功能(function）『嵌入』 到目標裝置（target device）裡，包含這些功能的整體系統（或平臺）即是『嵌入式系統』。
常見的嵌入式系統有：DOS、Windows CE、Palm、EPOC、Linux等，而Embedded Linux其實並不是一個作業系統，而是代表應用Linux系統於embedded system 的名詞。Embedded Linux是Linux for devices 的意思。
根據「Building Embedded Linux Systems」ㄧ書指出，近來以8051微控制器開發新設計的經濟效益似乎已經不高了，其中所隱含的小筆額外費用，已經能擁有整個Linux系統的所有能力。…當然，微波爐中並不需要使用32位元的微處理器，但如果使用它沒有比較貴，而且可以有一個內建的Web伺服器，使其能夠到遠端更新自己的功能，何樂不為呢?
用 Linux 來發展嵌入式系統有以下的優點：
• 開放原始碼、模組化設計
• 穩定性夠
• 網路功能強大
• 跨平台
• 應用軟體眾多
• 選擇多樣
一般用來開發嵌入式系統的 CPU 有：X86、ARM、MIPS、PowerPC等，例如Samsung S3C6410 BOARD。
閱讀全文...
客戶的這台Aspire 8930G有2顆320G的硬碟，所以將原來的系統碟拆下來保留不動，利用另一顆硬碟來做Vista和XP的多重開機。
- 利用SPFDISK分割為2個磁區。
- 將Vista還原光碟(有3片DVD)安裝到第一個磁區(C:)。
- 再利用SPFDISK將第2個磁區設定為開機磁區。
- 安裝Windows XP到第2個磁區。
- 安裝XP的驅動程式。
- 最後利用SPFDISK製作多重開機。
說明：
- 利用SPFDISK分割磁區，可以分割2個磁區分別給不同的作業系統，或者也可以再多分割1個以上的邏輯磁區做為資料碟。
- Acer的還原光碟會進行磁區分割並還原至C磁碟，但不會產生隱藏磁區，所以還原後開機時無法以Alt+F10呼叫還原程式，更不用說想備份還原光碟。
- 因此可以將整個C磁碟以Ghost將整個磁碟備份下來存成image檔，如此就可以將原來的系統碟重新磁區分割製作多重開機了，而當想回復到出廠預設的環境就不用花800元送回維修中心重灌。
- 接下來安裝XP時，因為Aspire 8930G是Intel(R) ICH9M-E/M SATA AHCI Controller，所以一開始要先按F6去進行SATA驅動程式的安裝，而此時就必須要有一台軟式磁碟機（USB介面）將剛才的SATA驅動程式安裝進來，否則XP會找不到硬碟而出現藍底白字的畫面。
要不然就要到BIOS將AHCI模式改成IDE模式囉，不過如此一來，以後進入XP之前都要先設定IDE模式了!! - 如果沒有軟式磁碟機的話，可以利用nLite(http://www.nliteos.com/download.html)將下載的SATA驅動程式整合到XP安裝程式並製作新的安裝光碟，當安裝XP時不用按F6就會自動安裝此SATA驅動程式了。
- 再來就是安裝XP的驅動程式，以下連接可找到大部分的驅動程式：http://komku.blogspot.com/2008/11/acer-aspire-8930-windows-xp-drivers.html
其中如果讀卡機有問題，可以試試下載下列連接點來安裝看看：http://www.downv.com/Windows/install-Z01-cardreader-XP-Vista-v351whql-rar-10180701.htm
閱讀全文...
Q：
如何用GMAIL來發信？
A：
假設GMAIL的帳號是account，密碼是password
Q：
如何用超連接傳送變數？
A：
如在任一頁中建超連接:< a href=Edit.aspx?fbid=23>點擊< /a>
在Edit.aspx頁中取值：String str=Request.QueryString["fbid"];
Q：
承上題，當從電子信箱點擊帳號開通信件的網址時，出現「剖析器錯誤訊息 無法辨認的屬性 'type'。」錯誤訊息。
A：
將IIS中ASP.NET版本的組態設定從1.1改成2.0即可。
Q：
如何在SQL語法處理變數？
A：
(a).SQL修改『某紀錄』語法
Update 1a set name = ‘jack’, chi = 90 where id_no=’90001’
(b).當有變數時的SQL修改語法（C＃）
”Update 1a set name = '" + textBoxName.Text + "', chi = " + Int32.Parse(textBoxChi.Text) + " where id_no=' " + textBoxNo.Text + "'";
注意：什麼時候要用單引號『’』，什麼時候不用加呢？
字串：字串前後要加上 ‘ 單引號
Values('" & txt_5_PrjCode.Text & "')”
數值：數值前後要不用加，但是所引用的textbox.text要先用Int32.Parse轉換成數值格式
Values(" & Int32.Parse (txt_5_Period.Text) & "')”
日期：字串前後要加上 ‘ 單引號，所引用的textbox.text要先用DateTime.Parse轉換成日期格式
Values('" & DateTime.Parse(txt_5_BeginDay.Text) & "')”
Q：
網頁之間如何傳接值？
A：
1. 使用QueryString變量
QueryString是一種非常簡單的傳值方式，他可以將傳送的值顯示在瀏覽器的地址欄中。如果是傳遞一個或多個安全性要求不高或是結構簡單的數值時，可以使用這個方法。但是對於傳遞數組或對象的話，就不能用這個方法了。下面是一個例子：
a.aspx的C#代碼
private void Button1_Click(object sender, System.EventArgs e)
{
string s_url;
s_url = "b.aspx?name=" + Label1.Text;
Response.Redirect(s_url);
}
b.aspx中C#代碼
private void Page_Load(object sender, EventArgs e)
{
Label2.Text = Request.QueryString["name"];
}
2. 使用Application 對象變量
Application對象的作用範圍是整個全局，也就是說對所有用戶都有效。其常用的方法用Lock和UnLock。
a.aspx的C#代碼
private void Button1_Click(object sender, System.EventArgs e)
{
Application["name"] = Label1.Text;
Server.Transfer("b.aspx");
}
b.aspx中C#代碼
private void Page_Load(object sender, EventArgs e)
{
string name;
Application.Lock();
name = Application["name"].ToString();
Application.UnLock();
}
3. 使用Session變量
想必這個肯定是大家使用中最常見的用法了，其操作與Application類似，作用於用戶個人，所以，過量的存儲會導致服務器內存資源的耗盡。
a.aspx的C#代碼
private void Button1_Click(object sender, System.EventArgs e)
{
Session["name"] = Label.Text;
}
b.aspx中C#代碼
private void Page_Load(object sender, EventArgs e)
{
string name;
name = Session["name"].ToString();
}
4. 使用Cookie對象變量
這個也是大家常使用的方法，與Session一樣，但Cookie是存放在客戶端，而session是存放在服務器端。而且Cookie的使用要配合ASP.NET內置對象Request來使用。
a.aspx的C#代碼
private void Button1_Click(object sender, System.EventArgs e)
{
HttpCookie cookie_name = new HttpCookie("name");
cookie_name.Value = Label1.Text;
Response.AppendCookie(cookie_name);
Server.Transfer("b.aspx");
}
b.aspx中C#代碼
private void Page_Load(object sender, EventArgs e)
{
string name;
name = Request.Cookies["name"].Value.ToString();
}
5. 使用Server.Transfer方法
這個才可以說是面象對象開發所使用的方法，其使用Server.Transfer方法把流程從當前頁面引導到另一個頁面中，新的頁面使用前一個頁面的應答流，所以這個方法是完全面象對象的，簡潔有效。
a.aspx的C#代碼
public string Name
{
get{ return Label1.Text;}
}
private void Button1_Click(object sender, System.EventArgs e)
{
Server.Transfer("b.aspx");
}
b.aspx中C#代碼
private void Page_Load(object sender, EventArgs e)
{
a newWeb; //實例a窗體
newWeb = (source)Context.Handler;
string name;
name = newWeb.Name;
}
Q：
在.NET 3.0下Web Form如何與Dynamic實體網站結合？
A：
必須先建立Dynamic實體網站，然後再將做好的Web Form程式從「我的電腦」拖拉到Visual Studio的「方案總管」，唯專案名稱要ㄧ樣，同時Web.config的SQL連接字串設定要注意，不要覆蓋到Dynamic實體網站的Web.config，例如：
另外注意當SQL的資料表、某資料表的欄位，或者其他有新增、刪除等異動時，只要從"實體資料模型"中按右鍵執行"從資料庫更新模型"即可！
閱讀全文...
微軟正黑體是Vista之後版本的字型，或者若已經安裝了Office 2007或Visual Studio 2008等微軟軟體的話也會有正黑體。因此Windows XP的使用者，或者沒有安裝提供微軟正黑體的軟體，勢必繼續忍受細明體的"醜"。
當在設計網頁時，為了美化版面，會在CSS設定一些預設字型，微軟正黑體就是首選，然後才是為了以防萬一的新細明體或細明體。因此若沒有微軟正黑體的使用者，將看不到視覺設計師的用心良苦，以下就提供微軟正黑體的下載點：
微軟正黑體下載點
下載後，安裝即可馬上感受到微軟新的改變。不過，對於某些液晶顯示器等的使用者，會發現這個字體卻變得模糊不清，越看越不舒服，其實這要到控制台去設定Clear Type Tuning，提高文字的清晰度。如果控制台沒有Clear Type Tuning工具的話，可以到這個地方下載：
Clear Type Tuning工具
下載完安裝後會直接進入設定步驟，也可以由「開始→設定→控制台→ClearType Tuning」進入，勾選 Introduction 標籤中的「Turn On ClearType」後，點選「Start Wizard」一步一步依序點選最喜歡的顯示字體即可。
安裝以後，工具會協助調整 ClearType 顯示以達到最佳效果，讓使用者更輕鬆舒暢的閱讀螢幕上的文字。另外，安裝後，系統控制面板中會增加一項 ClearType Tuning 配置面板。如果用不習慣亦可從新增移除將之移除。
閱讀全文...
一個Ajax互動過程是從一個被稱為XMLHttpRequest的JavaScript物件開始的，再透過JavaScript使用者端腳本，以非同步互動的方式來執行HTTP請求，並對伺服器回應的XML資料進行解析，然後轉換為HTML格式並輔以CSS來呈現在使用者端瀏覽器中。Spry組件(widget)：這是一些預設的常用使用者介面元件，可以使用CSS來自訂這些組件，然後將其新增到網頁中。使用Dreamweaver CS4就可以將多個Spry組件新增到頁面中，而這些組件包括XML驅動的清單和表格、折疊式組件、索引標籤式介面，以及具有驗證功能的表單元素。
在Ajax互動過程中，主要包含以下這幾個處理步驟：
- 使用者透過使用者端瀏覽器在網頁上執行某個操作，例如單擊按鈕、移動滑鼠或從鍵盤上按下某個按鍵等。
- 由於使用者的操作，網頁上發生相對應的DHTML事件。
- 透過回應這個DHTML事件，執行相對應的使用者端JavaScript函數，在執行過程中建立一個XMLHttpRequest物件實體，並註冊一個回呼函數，再透過使用XMLHttpRequest物件，以非同步的方式向伺服器端發送HTTP請求，此時可以透過Web頁面繼續與使用者的介面互動，而避免瀏覽器暫停並等待伺服器的回應。
- 當伺服器端收到XMLHttpRequest物件的請求時，便可透過ASP、JSP、PHP、ASP.NET等伺服器端技術，對使用者端請求的參數進行解析，然後執行適當的應用邏輯並將回應序列化到XML資料中。
- Web伺服器會以標準的XML格式，將回應的資料傳遞給Ajax。
- 當伺服器之回應到達使用者端時，JavaScript的回呼函數會被呼叫，並對XML資料進行解析和處理，再透過CSS和DOM實現頁面的局部更新。
- 使用者將透過使用者端瀏覽器看到頁面更新。
流行的Ajax框架
JavaScript是Ajax技術的一個主要組成部分，在開發Ajax應用程式的過程中，往往需要編寫大量的JavaScript程式碼。為了減少JavaScript編碼量，並簡化Ajax應用程式的開發任務，目前出現了許多出色的Ajax開發框架。
1.Dojo框架
Dojo是麻省理工學院(Massachusetts institute of Technology，MIT)許可下的一個開發原始碼專案，由Alex Russell和Dylan Schiemann等人在2004年發起，其設計目標是解決DHTML開發中長期困擾人們的一些問題。Dojo是一個JavaScript使用者介面開發工具包，使得編寫JavaScript程式碼更容易，構建大型介面更快速，部署動態的使用者介面更方便。Dojo的基礎是一個小型的函式庫檔案，該檔案包括了Ajax、事件處理、頁面特效及語言工具等。在這個基礎上，在Dojo核心中還新增了一些高品質的工具，例如拖放工具、Ajax擴展表單工具、I/O工具、Json-RPC、國際化及回呼方法等。
可以從http://www.dojotoolkit.org/下載
2.Prototype框架
Prototype是一個基礎性的Ajax開發框架，其檔案尺寸小，但功能很實用，適合用於開發中小型Web應用程式。Prototype提供了跨瀏覽器的相容性支援，對一些JavaScript內建物件進行了擴展，還新增了許多自訂物件，Ajax支援功能也是自訂物件中實現的。
可以從http://www.prototypejs.org/下載
3.script.aculo.us框架
script.aculo.us也是麻省理工學院許可下的一個開發原始碼專案，構建於Prototype框架之上的JavaScript函式庫。script.aculo.us框架的設計目標是幫助開發人員快速建立可展示和操作頁面的各種特效。該框架擁有強大的動畫功能，並且支援各種DOM操作和拖放操作，也提供了一些控制項和小元件，例如自動完成、滑動方塊和原地編輯等。
由於script.aculo.us是一個基於Prototype的框架，因此，使用script.aculo.us框架之前，必須先導入Prototype框架的JavaScript函式庫，然後再導入script.aculo.us的JavaScript函式庫。
可以從http://script.aculo.us/downloads/下載
4.Spry框架
Spry框架是Adobe公司開發，該框架實際上是一個JavaScript和CSS函式庫，可用來建構向網站存取者提供更豐富體驗的Ajax網頁。使用Spry框架就可以顯示XML資料，並建立用來顯示動態資料的互動式頁面元素，而無需更新整個頁面。只要有了Spry框架，就可以使用HTML、CSS和極少量的JavaScript程式碼，把XML資料合併到HTML文件中，也可以建立組件(例如折疊組件和選單欄位)或者在各種頁面元素中新增不同種類的效果。
Spry在設計上與其他的Ajax框架不同，Spry框架的標籤非常簡單，便於那些具有HTML、CSS和JavaScript基礎知識的使用者使用，而且也可以為設計人員和開發人員使用，因為實際上它有99%的部份都是HTML。更為可喜的是，在Dreamweaver CS3之後就提供了對Spry框架的支援。透過Dreamweaver CS3/CS4，就可以使用Spry框架進行動態使用者介面的視覺化設計、開發和部署。
Spry框架主要是透過以下這三種方式來提供對Ajax技術的支援。
- Spry資料：Spry資料集是透過JavaScript建立的一個物件。只需要在網頁中編寫幾行程式碼，就可以建立一個Spry資料集物件並從指定的資料來源(例如XML文件、HTML表格及JSON物件等)非同步載入資料，然後在網頁上透過Spry區域來顯示資料。
- Spry組件(widget)：這是一些預設的常用使用者介面元件，可以使用CSS來自訂這些組件，然後將其新增到網頁中。使用Dreamweaver CS4就可以將多個Spry組件新增到頁面中，而這些組件包括XML驅動的清單和表格、折疊式組件、索引標籤式介面，以及具有驗證功能的表單元素。
- Spry效果：這是一種提高網站外觀吸引力的簡單方法，這種效果幾乎可以套用於HTML頁面上的所有元素。透過新增Spry效果就可以放大、縮小、漸隱和反白顯示元素，並在一段時間內已可視方式更改頁面元素，以及執行更多的操作。
5.ASP.NET Ajax框架
ASP.NET Ajax框架是由Microsoft公司所開發，其主要設計目標是對現有的ASP.NET伺服器端模型進行擴展，讓它可以產生實現豐富使用者端的JavaScript程式碼，並透過對ASP.NET增加使用者端程式設計模型來簡化使用者端程式設計。
可以從http://www.asp.net/ajax/downloads/下載。
閱讀全文...
當開發ASP.NET專案要配合資料庫，除非是自行架設網站，否則在選擇虛擬主機時，一般都是預設Access。如果要使用MSSQL的話，以智邦為例，就必須選擇MSSQL虛擬主機服務，不過如此一來，就將從年費4,000元飆到12,000元。
因此就考慮改使用MySQL資料庫，後來查了一下有幾家支援MySQL，有的還支援Ajax等功能。如果考量價錢的話，可以選擇國外的主機代管商。
一般Visual Studio是微軟公司為.NET程式設計師所提供的IDE軟體，其還隨附SQL Server Express資料庫伺服器。因此要使用MySQL資料庫的話，可以到MySQL官方網站(
http://dev.mysql.com/downloads/)下載MySQL Community Server和MySQL Connector/Net，其步驟如下：
1.安裝MySQL Community Server
目前最新版本是mysql-5-1.47-win32.msi，而安裝時因考慮到以後中文資料輸入的問題，所以一開始先設定「Custom」安裝，然後在「Please select the default character set.」步驟的「Manual Selected Default Character Set/Collation」中從預設的「Latin1」改為「utf8」。
如果之前安裝沒有設定到的話，可以到My.ini設定如下：
[mysql]
default-character-set=utf8
…
# The default character set that will be used when a new schema or table is
# created and no character set is defined
default-character-set=utf8
2.安裝Connector/Net
下載Connector/Net組件，將mysql-connector-net-6.2.3.zip解壓縮後，執行mysql.data.msi程式即可。
3.Visual Studio連接MySQL
開啟「檢視/伺服器總管」，在「資料連接」上按一下滑鼠右鍵執行「加入資料連接…」，然後執行「變更資料來源」為「MySQL Database」。
Server name：localhost
User name：root
Password：XXX
Database name：test
4. C#程式碼
using MySql.Data.MySqlClient;
SqlClient相關語法前面加上My
MySqlDataAdapter
//SqlCommand
MySqlCommand
//連線字串設定如下
string conString = ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString;
MySqlConnection conn = new MySqlConnection(conString);
在Web.config檔要有以下內容：
範例：登入檢查帳號是否存在與權限判斷
如果要運用到MySQL的預存程序，例如查詢某個帳號是否已經存在資料庫的話，首先在MySQL執行下列語法：
DROP PROCEDURE IF EXISTS CheckUserName;
CREATE PROCEDURE CheckUserName( User_Name VARCHAR(50) )
BEGIN
SELECT COUNT(*) FROM member WHERE Username = User_Name;
END;
C#程式碼
使用jquery用戶端檢查帳號是否已經有人註冊
參考：[MySQL] 如何接收 Store Procedure 的傳回值
閱讀全文...
自從蘋果執行長Steve Jobs表示Flash會耗用大量CPU資源，因此iPad不支援Flash，而支援HTML5後，Flash與HTML5的效能就成了大家關注的焦點。
事實經過分別在Mac與Windows系統上，測試Safari、Chrome、 Firefox、IE等主要瀏覽器透過Flash Player與HTML5播放YouTube影片時，各自的CPU負載之測試後的結果是：如果沒有硬體加速的話，Flash的CPU負載的確不低；但是在Windows系統上，支援使用顯示卡硬體加速的Flash Player 10.1可大幅降低CPU負載，表現比HTML5還好。
而今年的Google I/O大會上，重點就放在HTML5技術的應用：Google I/O大會報導。
話說到HTML5，在10年前，負責制定WWW網頁格式標準的W3C協會（World Wide Web Consortium）以為4.0版就可以滿足未來各種網頁內容的需求，再也不需要修改HTML格式標準，頂多進行細部規格的調整。但是隨著網路應用程式的發達，W3C協會發現，有越來越多的網站應用程式需求已超出HTML格式所能支援的範疇，甚至使用者需為特定功能額外安裝擴充元件，例如YouTube 採用了Flash格式來播放影音內容。
為了讓HTML語法更容易用來開發各種應用程式，W3C協會從2004年開始制定新的網頁格式標準，也就是HTML 5。在這個新版本中，W3C的制定工作小組大幅增修了多項網頁元素和控制器，於2008年釋出第一個HTML 5草案版本，預定2010年完成功能制定，不再增加新的語法元素，發布2年後若無嚴重問題，2012年再由W3C協會正式發布。
HTML 5旨在提高HTML的交互行，支持當前多樣的，複雜的Web內容。同時，它也會解決HTML 4 Web應用功能上的欠缺，例如：
- 一些幫助我們描述內容的新標籤
- 改進的Web Forms 2.0，為開發提供許多新選項和新功能，以更簡單更有效地處理表單的輸入與發佈。
- 為Web開發提供API，，如音頻和 視頻標籤可以讓開發者不借助第三方工具直接播放 Web 視頻和音頻。
- 標籤將允許直接在上面用腳本繪圖：
- 用戶可以編輯網頁的部分內容並實現同網頁的交互，，contenteditable屬性允許你設定網頁的哪一部分可以編輯。
不過，在HTML 5也移除了部分原本在HTML 4中的語法，例如Font、Center，開發者必須改用CSS指令來進行這類字體或排版功能的效果。
至於提到CSS，其最重要的目標是將文件的內容與它的顯示分隔開來。在CSS出現前，幾乎所有的HTML文件內都包含文件顯示的信息，比如字體的顏色、背景應該是怎樣的、如何排列、邊緣、連線等等都必須一一在HTML文件內列出，有時重複列出。CSS使作者可以將這些信息中的大部分隔離出來，簡化HTML文件，這些信 息被放在一個輔助的，用CSS語言寫的文件中。HTML文件中只包含結構和內容的信息，CSS文件中只包含樣式的信息。
CSS 3語法中終於直接支援圓角、漸層、陰影等效果，不過很多效果在不同瀏覽器的語法與產生的效果卻不同。
從 HTML & CSS3 Readiness這份圖表可以很容易看出一些關鍵，它把 HTML5 與 CSS3 從 2008 年到 2010 年各個主流瀏覽器的支援情形以扇形區色塊圖的方式呈現，每個瀏覽器及渲染引擎都有自己的色系。
- 目前支援度最高的新特性為 Drag and Drop / @font-face / contenteditable 。
- 目前支援度最佳的瀏覽器為 Chrome 與 Safari。
- 目前支援度最差的瀏覽器為 IE 系列。
綜合來說，微軟還提供了一個網頁:Internet Explorer 9 Platform Demos讓我們體驗Web的未來趨勢。雖然這是微軟為了測試IE9所設計的網頁，但利用Firefox 3.6, Opera 10.1去看，也是玩的很愉快。畢竟Firefox, Opera瀏覽器跟隨HTML/CSS標準的起步，比IE9要早太多了。
對於一般人來說，可以在該網頁上看看未來的Web應用軟體的UI設計趨勢；對於網頁開發者，可以透過檢視網頁原始碼的功能，把那些新功能全都學起來。
由於各家瀏覽器全面支援還需一段時間，因此HTML 5的影響力得等到2011年後才會充分發酵。
http://www.w3.org/TR/html5/
http://www.w3.org/Style/CSS/
閱讀全文...
2010年5月6日台灣微軟上市發表了Visual Studio 2010，主軸放在「三螢一雲」(3 screens and 1 cloud)的開發應用，也就是協助你以熟悉的工具及技術，快速開發–電腦、手機與智慧型裝置上的軟體及雲端服務。
Microsoft Visual Studio 2010英文版已於4月13日正式推出，而中文版預計於6月1日該週開放下載。
ASP.NET的發展
ASP.NET 1.0透過Code-behind技術一舉推翻了過去ASP開發時代HTML與程式碼夾雜的狀況，同時把物件導向程式設計的精神與事件驅動(Event-Driven)帶入了Web應用程式開發的世界；ASP.NET 2.0則透過新的資料庫存取技術，讓Web資料庫應用程式的開發大幅簡化，並且透過新增的控制項有效地提高開發人員的產能。
緊接著ASP.NET 3.5則伴隨著.NET 3.5的推出，將微軟重要的查找技術LINQ以及LinqToSql加入了ASP.NET當中，並且把ASP.NET AJAX正式納入成為產品中重要的一環；而ASP.NET 3.5 SP1則宣示了透過Dynamic Data技術，建構高延展性的Web資料庫作業程式，並同時帶著ASP.NET MVC Framework 1.0打下高階商用Web應用程式的基礎。
而ASP.NET 4.0帶來了什麼樣的技術呢?
更完整的Web Forms技術
從ASP.NET誕生到現在接近10年的焠鍊，讓ASP.NET Web Forms各方面均已經相當成熟而穩定，如今在這方面，當取得Visual Studio 2010後，將發現有更豐富的專案範本，增加了Page.MetaKeywords以及Page.MetaDescription這2個搜尋引擎最佳化的屬性，讓開發人員可以輕鬆的在網頁中加入可供搜尋引擎檢索的訊息，另外針對Cache技術，除了可將Cache資料儲存在記憶體中，也可以針對不同情境下的需求，將Cache資料存放在不同的位置(例如硬碟、或資料庫)。
更聰明的方法製作動態網頁jQuery及Ajax
Visual Studio 2010對jQuery已全面支援，jQuery是一套跨平台的JavaScript函式庫，再加上ASP.NET Ajax Library與Ajax Control Toolkit的整併，並直接在CodePlex提供下載，可以想見未來在Client-Side技術上，開發人員將擁有更豐盛的資源，可更快速的開發出便捷好用的Web應用程式，同時也可兼顧用戶端UI呈現的即時性與精緻度。
MVC 2為大型開發案奠定基礎
對於一個ASP.NET開發人員，要同時熟悉HTML、CSS、JavaScript、SQL、VB或C#等，才能夠完成一個可上線的程式。因此越是在大型的Web應用程式開發案，或者在User Interface與Business Rule常常改變的網站，就越需要MVC這樣的架構，然後網頁的操作介面和程式可以分開由不同並學有專長的人負責開發。
然而這樣的開發方式對於過去ASP.NET應用程式的開發相當直覺，習慣於Web Forms的開發人員，一時之間要進入MVC世界，所需面對的挑戰和開發方式的改變，確實是令人感到有些困擾，因此新版ASP.NET MVC 2提供了讓開發更便利的擴充，例如Model Validation就是在ASP.NET MVC 2新加入的功能。
把Dynamic Data整合到Web Forms
Dynamic Data技術從.NET 3.5時代出現之後，其中DataAnnotations機制及相關的概念，也擴展應用到了MVC及Silverlight應用程式開發中，讓前端使用者介面與後端資料庫徹底隔離。最新的ASP.NET 4.0，Dynamic Data技術甚至可直接整合到傳統Web Forms中，對於需要設計大型資料庫應用系統的開發人員來說，將會有相當大的助益。
閱讀全文...
在製作網頁時，一般都會思考目標使用者是誰、這個網頁主要是給誰看的。「思考使用者」這件事可說就是在選擇網站上所要公開的內容種類。也就是說，如果是給不特定多數的使用者看的，最優先考量的就是內容要單純、確實、好操作等特點。如果針對的對象是對流行時尚有興趣的女性，就要優先考量高級品味、令人印象深刻等特點。目標對象不同，網頁樣式也就隨之不同。千萬記住網頁對象可說是決定網站設計方向的舵手。整合主題、目的、瀏覽對象、需要的功能等，就等於是在進行設計了。
選擇網站建構技巧
想做出不同樣式的網頁，有時候就必須選擇網頁建構技巧。本書當中將樣式設計與製作技巧完全切割開來，因此並不說明各種技巧。但是，了解網站的用途和技巧的選擇大有相關。例如像流行時尚的網頁和以最新話題為主的網站，就會需要大量運用視覺效果，如提供影片等嶄新的表現方式。這時，Flash這類聲光效果豐富的內容(rich contents)就會比較適合。此外，要讓任何人都能方便瀏覽操作的公眾網站，則需要以XHTML或XML來建構所要提供的資訊。在進行網站製作時，至少在主題、使用者、建構技巧這三項上必須要選對。
不要陷入形式化的設計模式
確立好上述三項後，網站樣式就能分出屬於那種題材。公眾網站就會做得像公眾網站、企業網站就做得像企業網站。但是要特別注意，在實際製作網頁時，一直想著要做出該主題的典型樣式，反而容易造成忽略使用者的觀點，落入千篇一律的巢臼。
地方政府單位、教育相關網站的設計
公眾性高的網站，重視使用方便性
公眾性高的網站首重資訊的結構、連結的方便性，最後才來講究樣式。「連結的方便性」對使用者最重要，對連接使用者與網站的瀏覽器等瀏覽工具也很重要。這種網站在建構時要確認標準語法(例如XHML等)，要求該加的標籤(tag)是否都正確加上去了、是否有多餘的裝飾會影響使用者操作等。這些都做到了，再來強調清楚易懂，讓網站更平易近人。
必須要有連結性(access ability)的網站
地方市政府、教育相關單位必須要讓使用者能連結取得公共資訊服務，這樣的考量是很重要的。現在越來越多各級縣市政府開設網站來介紹市政建設，與接受民眾諮詢，因此特別重視網站連結性。
Design Samples
http://www.pref.niigata.lg.jp/
新瀉縣
要連結到災害資訊中心，與使用搜尋工具都非常簡單容易。
http://www.pref.kumamoto.jp/
熊本縣
最新消息放在中間，優先順位很清楚。
http://www.jpo.go.jp/indexj.htm
特許廳
提供了相當清楚的全區導覽。
醫療、生活資訊網站的設計
簡單、一目瞭然最重要
談到疾病或醫療等總讓人覺得高深困難，但我們可以透過設計讓網站看起來單純、簡易，以改變這樣的印象。網頁內容較為困難時，可以適時加入圖片，這樣不但有助於理解，還能緩和文字給人的壓迫感。內容越是困難，就越需要大量使用簡單的圖像，或清楚易懂的插圖來解說。
MEDINE
MEDINE(MEDIars on LINE)是醫療資訊搜尋網站中全球知名的資料庫，由美國National Library of Medicine管理，裡面可以查到世界70個國家出版的最新醫學期刊，包括文章與重點集結。雖然幾乎都是英文，但長久以來一直都吸引很多人來瀏覽查詢。
Design Samples
http://www.ihealth.co.jp/index.html
ihealth☆健康線上網站
插圖與裝飾讓畫面更平易近人。
http://us.pampers.com/globalsplash/languagejump.jsp
pampers.com
採用品牌顏色，讓畫面呈現一種值得信賴的感覺。
http://www.bbc.co.uk/health/
BBC Health
用動脈和靜脈的配色將資訊分組。
一般企業網站的設計
定型化的設計能有效傳遞資訊
多數的企業網站都運用相同架構的設計，一般都是在網站LOGO及全區導覽的標頭下方，依序放入與該企業產品相關的關鍵影像，和最新資訊的主題區塊。這樣的樣式讓企業類型網站的操作性具有一慣性，使用者也可說相當熟悉。因此，只要在關鍵影像或網站LOGO、導覽樣式的設計上呈現自己的風格，就能輕易和其他公司做出區隔。
全區導覽的位置要放右邊
全區導覽一直以來總是被放在畫面左邊，現在有人開始反向操作，換到右邊來了。畫面左側在使用最小的瀏覽器時，由於能讓畫面左側的資訊完整呈現，一直以來都被視為是選單顯示的最佳位置。但顯示完整範圍的800×600像素顯示器，畫面右側幾乎不管出現資訊被切斷的情形，也許就是基於這樣的理由，他們覺得放在右邊(常用的捲軸都在右邊)會更好。另外，左側本來就有瀏覽器原有的操作功能，為了避免搞混，放在右邊才是更好的選擇。
Design Samples
http://www.lego.com/en-US/default.aspx
The Official Web Site of LEGO
關鍵影像下方有各個導覽詳細內容介紹。
http://canon.jp/
Canon
關鍵影像和小標題區分開，是很典型的樣式。
http://www.ford.com/
Ford Motor Company
這個設計樣式中導覽結構單純、且很有穩定感。
IT相關企業的網站設計
利用視覺元素轉變印象
提供IT服務或產品的網站，其中的內容大多都可分為針對法人與針對個人兩種。針對法人的網站，內容大多包含技術性等難度較高的資訊內容，及企業本身的公司資訊等。針對個人使用者的網站內容，則應該要稍微簡單易懂些。可是由於各個資訊的入口太多只有一個，所以要儘量用門檻較低的呈現方式，讓網站有自己的個性表情，打出企業的品牌印象。尤其如果能適當加入關建影像，會讓網站更具親和力。
表格設計已經過時了？
表格標籤本來是用來製作表格的，但是卻用網頁編排設計之用，但是這種情形聽說不久的將來就會消失，因為今後主要的網頁建構法，將是用CSS和XHTML來將資訊與樣式的定義分開。從重視資訊架構型態的網路架構來看，使用表格就好像是用麻將牌來蓋房子一樣，雖然沒有什麼做不到的，但就是沒什麼意義，因為別的方法更有效！看來，重新思考標籤本來用途的時期已經到來。
Design Samples
http://cybozu.co.jp/
Cybozu
一貫重視幽默的網站風格，已經昇華為品牌力量。
http://welcome.hp.com/country/jp/ja/cs/home.html
日本惠普株式會社
印表機和影像的質感完全統一。
http://www.siemens.com/entry/cc/en/
Siemens AG
該公司經營的產品項目雖多，卻不會給人繁雜的印象。
介紹產品的網站設計
重視樣式的高層次設計已成為主流
有特定主打商品的企業網站、或介紹新產品的商品活動網站，這類以傳達商品資訊為主要目的的網站，要求的重點不只要有資訊、還要有創意。商品能否讓瀏覽者印象深刻，決定了這個網站是否成功。在這種情況下，Web也被要求設計得要有CM或雜誌廣告等促銷活動的效果，所以這種網站的最優先課題就是保持視覺資訊的質感。不只要有質感愈高級愈好的產品照片，還要有不影響照片品質的文字設計。
Affordance
網站建構的技巧當中，對於滑鼠碰到選項按鈕時而引發的動作我們稱為Affordance。這是將研究生態心理學的James Jerome Gibson提出來的概念再重新給予詮釋的名詞。這個詞一般意指環境會影響人類的行為、行動的方向。下雨了就躲到石頭下，這種人類因自然現象發生的變化而採取的行動，才是原本Affordance的真意。
Design Samples
http://www.peugeot.co.jp/index.html
Peugeot Japan
網站風格統一為「和消費者談車」，相當簡單。
http://www.symantec.com/ja/jp/index.jsp
symantec
全部設定為企業形象的色彩，算是刺激性較強的設計。
http://www.fritzhansen.com/en/fritz-hansen.aspx
Fritz Hansen
整體的設計樣式，能讓人感受到產品的性能。
展出作品集的網站設計
做個讓作品看起來更具效果的網站
網站有時也會用來發表自己的照片或插圖、或是介紹創作者、製作公司的作品及工作。有的網站會用Flash將整個網站化成作品的展示間，有的則是以縮小的照片來陳列作品，方向可以有很多種。最近有些網站則是運用部落格的功能讓瀏覽者觀看之外，還能讓人閱讀文字內容。樣式種類雖然很多，但他們共通的特點就是主題性很強。製作東西本身的行為本來就需要有個主題，不然就無法進行下去。
部落格會對網站造成什麼改變？
現在大受歡迎的部落格不用軟體工具就能更新，其中又以管理容易、能及時提供新資訊給使用者的RSS技術最受矚目。RSS主要透過RSS READER軟體來將最新資訊提供給使用者，但是這個工具和技術其實有可能會改變網站的使用方式。過去，使用者都是從入口網站直接跳到其他網站，但有了RSS就可以直接跳到部落格。入門網站週邊的廣告可想而知，效益會越來越低，因此部落格可能會成為改變金錢流向的要素之一。
Design Samples
http://www.hi-res.net/
Hi-Res!
結構雖簡單，但是還是能讓人感覺到這是個作品集網站。
http://www.joshuadavis.com/
Joshua davis
呈現製作的介面(interface)。
流行時尚相關的網站
加入尖端的發想
要讓網頁呈現出流行感，就是不斷將發明的創意化為有形，表現方式往往都要著眼於未來性。這樣說來，好像流行時尚的網站就沒有樣式可言了，不過懷疑Web的既定常理，是不管什麼網站都是共通的。使用性、連結性、SEO等評量一個好網站的標準，都是因為使用者有這類的需求。在流行的領域所追求的是超越使用性、能刺激視覺與聽覺的要素。這種網站的企劃要展現出重視先進與自由的感受。
什麼是使用性？
方便使用的網站就稱為使用性好的網站，但使用性好不好還需要檢查操作步驟才知道。具代表性的評量方法為「專家評量(Heuristic evalutation)」以及「優使形測試(Usability Test)」兩種。前者是由學者專家評估，後者是由使用者實際使用過後寫下意見。沒有經過這些是無法定論使用性佳不佳的。所以這還真不是件簡單的事呢！
Design Samples
http://www.theapt.com/
The Apartment
強調理性和都會生活這樣的訴求。
http://nikerunning.nike.com/nikeos/p/nikeplus/language_tunnel/
Nike Free
商品的質感從照片和圖形之中就可感受到。
http://www.ikea.com/
IKEA
這個網站的發想是要顯現模特兒立體旋轉的空間。
食物相關的網站設計
傳達樂趣的顏色與形狀
以食物為主題的網站有食品業者、食譜網站等。即使是以資訊傳達為主的企業網站，也必須創造值得放心、很有樂趣的印象。這時可以大幅採用令人聯想到食物的顏色，以及讓人感覺很開心的插圖。這樣的樣式會受小細節影響，例如有的時候文字內容陳述很多，不如用簡單、但四個角落很穩的表現方法來呈現會更美，所以在處理時要儘量小心這些小細節的部份。
影像解析度
顯示器上看影像的最佳解析度為72~96 dpi。「dpi」是指一英吋內有幾個點的單位數。列印黑白影像或傳單只要144dpi，商業用的就要300dpi。有時候影像解析度很高，可是顯示器上顯示的大小可能較小；有時候即使只有72dpi，但是畫面大小高達1200像素，這樣還是可以列印出不錯的品質，所以不能光用看的來判斷解析度大小。
Design Samples
http://allrecipes.com/
All Resipes
畫面很平易近人，令人很安心。
http://www.marthastewart.com/
Matha Stewart Living
感覺這家餐廳有點知性，不喜歡和別人一樣。
http://www.betterhome.jp/index.php
Betterhome的料理教室
內容多但卻看起來很簡單，讓人感覺到行家在料理的世界裡自在遊走，游刃有餘。
design note
設計與品牌
企業或商品要用某種既定的圖形或顏色來表現，以擴大其圖形認知度，甚至要讓人們從該圖形輕鬆就能聯想到企業或商品。這一連串的行為就稱為「品牌戰略」。在品牌戰略中，Web或適合促銷的印刷媒體所被賦予的角色功能就很大。這些是除了商品本身以外，讓品牌直接讓客人看到的機會。當然這些成果一定得要能展現品牌印象才行。
那麼有方法能讓品牌反映在設計上嗎？有。不用說，基本上沿襲企業形象色彩或標誌即可。品牌戰略就是向企業形象這樣，先定下所有媒體都要呈現的元素，再來談及其他的。所以只要將這些元素反映出來，就可展現一貫的品牌印象。但如果以為這樣就可以放心的話，那又太早了些。Web網站的設計，有時候是很難如己願地呈現品牌印象的。即使是徹底遵照企業形象手冊來建構網站也一樣。原因就是樣式的持續時間不夠。也就是說，網站設計大幅更新，既定的印象也會隨之重新改變。
光是企業形象並不代表品牌印象。網頁設計整體給人的印象，有時是會超越企業形象等「零件」功能的。設計格式包含功能或品牌印象等看得見的要素，及需要操作的要素等所有要素。這在介面設計(interface design)用語中就稱為「外觀與感覺(look and feel)」。而這個外觀與感覺也是品牌印象。蘋果電腦從2000年到2006年，Web網站上的外觀與感覺都還沒改過。持續使用相同的設計及持續相同設計格式的開發，對品牌戰略而言實為重要。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
圖像設計(Graphic Design)的製作門檻高，需要兼具創意和製作技巧。不過在Web上除了從頭自己製作圖像之外，也可以將既有的影像直接放在網頁上。前者需要技術，後者則需要編修能力。尤其是近年來網頁設計者有豐富的圖庫可以運用，因此，取而代之的是圖像選擇與編修的能力就很重要。所以不會製作圖像沒關係，有優異的編修能力就行了。
圖像傳達抽象內容
能夠傳達服務內容氛圍的影像處理法
圖像和文字一樣都是視覺資訊的一種。其中以拍下某一瞬間的影像更能賦予網頁主題具體的印象。圖像比起需要慢慢細讀的文字，更能及時傳達內容概要，所以在進行處理時不是只要把有主題性的影像排在一起就好，而要讓影像具有抓住瀏覽者的眼與心的特質。在Web上主要是將影像與影像互相結合以強調意境，或是將影像適當裁切，以傳達某件事實或概念。
剪裁可以將焦點放在不同的主題上
「剪裁」是指重新定義影像的顯示範圍。全身影像可以改成大頭照、位於畫面旁邊的人可以移到中間等，讓我們可以只取得所需部分。這樣的加工動作不只是在修正影像，也有改變影像主題的作用。
著作權
圖庫是在製作時間與經費有限時的好幫手，您可以買圖庫光碟，或是從網路下載來使用。由於很多圖庫光碟都沒有著作權，沒有使用期間、次數、目的地限制，買了就可以自由使用。但也因取得容易，如果當競爭者的網站也使用到相同的圖片，那可就糗大了！！而要解決這樣的問題，您可以簽訂有著作權管理的圖像獨占使用合約。採用這種方式時，每幅影像的使用都要依照使用目的、區域、期間、大小等付費。這種合約條款複雜，比較不方便，但比起大費周章地自己拍攝，倒不失為一個值得考慮的選項。
Design Samples
http://www.billyharveymusic.com/
Billy Harvey Music
故意使用不很精緻的半身照，自己動手貼貼黏黏的感覺憑添一些去趣味。
http://www.au.kddi.com/au_design_project/index.html
KDDI au：au design project
呈現出由近而遠的深度的商品影像，架構頗有創意。
http://www.imperialhotel.co.jp/j/
東京帝國飯店
優雅的主題LOGO搭配上相得益彰的美圖影像。
商品影像的有效呈現方法
圖片的位置與大小
跟實體商店的商品陳列一樣，以商品介紹為主的網站商店等給人的印象，也受到商品影像的影響。商品的呈現方式會大大地影響集客量，所以除了單純排列各個產品影像外，還需要再花些心思。建議可以努力的方向有三種，包括在影像外框上做有特色的加工、在影像的背景加上顏色或漸層效果，以及將數張影像合成為一個影像等。這三種手法都是在拍完後的影像上後置處理加上去的，所以一般與攝影無關的製作公司也做得到。
向攝影名家學習
各個時代都有當代的優秀攝影家，我們也要對這些影響現代廣告表現方式甚鉅的名家多家接觸。例如攝影作品故事性濃厚的Elliott Erwitt、以固定的美學意識控制攝影對象的Bruce Weber、建立時尚攝影風格基礎的Pennlrvin，以及Robert Mapplethorpe等人的作品，至今仍給世人莫大的驚奇。
Design Samples
http://www.asahibeer.co.jp/hon-nama/
Asahi本生
層疊的設計架構和影像的風格有種統一感
http://www.barberosgerby.com/
Barber Osgerby
拍攝物體的構圖好像圖畫一樣，很有趣。
文字與圖形
在圖像中加入文字
企業品牌網站中，很多會使用傳達企業印象的關鍵影像。一般而言，關鍵影像都會搭配文字標題，也就是結合文字與圖像。文字放的位置不能放在影響圖像畫面的地方，要找個和圖像取得平衡的位置。如果找不到，就要進行影像的加工處理，安排出一個能放文字的地方。此外，為了要和影像取得平衡，在選擇影像時，就要選擇能安排文字進去的圖片，或是剪裁圖像來調整圖像要素(主要指拍攝對象)的位置。
JPEG中容易掉落的陷阱
顯示器的顯示效果各不相同。即使使用相同的作業系統，不同的顯示器顯示出來的影像也會不一樣。尤其以紅色、橘色、黃色等暖色系的顏色差異更大，其中對比強烈的暗色系暖色調，顏色差異更是大到以為看到的是不同的網站。若我們使用Flash的話，則因顯示器不同而產生的色差狀況比較不嚴重，但若使用的是JPEG格式，則產生色彩偏移的情況會比較多。一般說來，在網頁中使用JPEG格式的情況比GIF格式多，但若不注意配色的話，結果可能是難以愈想的。
Design Samples
http://www.subaru.com/
SUBARU All-Wheel Drive
大膽的文字配置，更襯托出圖像有強有弱的效果。
http://www.sum41.com/
sum41
文字風格和手繪風格的文字搭配在一起，很具相乘效果。
提高設計性的去背影像
使用的地方及其效果
影像去背是在雜誌設計上常見的技巧。包含背景的影像形狀通常是四角形，所以當幾張影像排在一起後的畫面，看起來就像是疊箱子似地會出現很多直線，實在不太好看。如果影像都已去背，則在設計上就可以自由運用。此外，影像的背景可能會有和所要設計網頁無關的雜物，所以必須將背景去掉。去掉影像上無關緊要的資訊，並讓編排設計時更好運用，而這正是去背景最大的兩個好處。
製作去背影像
一般做法都是以Photoshop來進行去背作業。先用筆刷做出遮色片(Mask)，再用向量工具在要去背的拍攝對象周圍畫出路徑，再予以分離。外面也有些業者專門負責幫人做去背路徑。用Photoshop則可以用簡單設定輕鬆完成去背工作；如果是高解析度影像需要去背去得很完美，也可以去買Photoshop專門的外掛程式來用。例如Corel公司的knockOut 2這軟體就是去背高手，不管是水滴還是頭髮都可以輕鬆地完成去背工作。
Design Samples
http://www.scope.ne.jp/
scope(スコープ) - インテリア家具・雑貨のオンラインショップ
徹底去背的影像用於商品介紹上，感覺很乾淨、清爽
http://jp.sun.com/
Sun Microsystems
Linktext配上去背影像當小圖示，網頁內容一目瞭然
由數張影像合成的影像
確定傳達的主題，選擇合適的種類
用圖像、文字、顏色來傳達網站內容或印象的關鍵影像，可以用影像或圖形加以合成來製作。合成手法大致可分兩種，一種是將數張影像重疊；另一種是將數張影像並排。前者可以用圖層的方式表現豐富的顏色，給人耳目一新的印象，但是由於使用影像素材數較多，製作時要更精緻細膩，所以難度較高；後者的類型則是在正正方方形狀下呈現出一種知性的氛圍，讓照片上的訊息更容易傳達給瀏覽者。
影像與隱喻(metaphor)
沒有隱喻的功能，影像就不可能乘載訊息。以顏色為例，人們常以青色代表冷靜、紅色代表熱情。以圓形為例，圓形代表圓融、方形代表知性，這些都是一種隱喻。設計者常常要做從言語的印象畫出圖形的訓練。但是，在正式設計時，就要注意不要侷限於毫無新意的隱喻。常說的俗語、諺語、歇後語等老生常談的東西已經算是「死喻」。設計者要多培養生動、且能獲得眾人共鳴的隱喻能力才好。
Design Samples
http://www.microsoft.com/en/us/default.aspx
Microsoft
雖然影像不大，單靠顏色和架構還是傳達了訊息和架構。
http://www.diesel.com/
diesel
影像呈現的力道和LOGO設計的質感難分上下、平分秋色，產生一種力感。
將文字資訊轉換成視覺資訊
便於資訊搜尋的網頁設計
Web網頁上使用的影像不只是裝飾，更被視為幫助理解文字的重要視覺資訊。尤其是現在的Web使用者幾乎都只瀏覽自己需要的資訊。因此影像可成為幫助使用者找到所需資訊的指引，也可以增加網頁易讀的效果。只要想想，如果有一點空間時間，你會看全是文字的雜誌，還是適度放些照片的雜誌？答案不就很明白了嗎？
國外的圖庫
照片是製作Web時不可或缺的要素。尤其是要表現人物或生活各面向的印象時，會需要使用國外拍到的照片。例如想使用人物表情的照片，但由於國人的表情太容易突顯個人特色，而不適合使用；又例如想使用商業街道的照片，可是又想找張一般人不知道在哪裡拍的照片時，就會需要用到國外的圖庫。在此介紹兩家您不可不知的國外圖庫廠商「Getty Images」和「Photodisc」。尤其在Getty Images收購了Photonica公司後，現在更提供了許多色彩感覺獨特、和國內風情大異其趣的照片。
Design Samples
http://dma.ucla.edu/
UCLA Design | Media Arts
快拍照片在傳達媒體藝術的氛圍的同時，也傳達了訊息。
http://www.nttchiba.com/
NTT 東日本 千葉分行
用有趣的圖片介紹網頁內容，讓網頁更活潑。
使用插圖的網頁設計
插圖會影響意境的傳達，該如何選擇？
網頁設計要使用人物時，插圖會比照片更好用。如果是照片的話，人物的五官、服裝、表情等都必須與設計主題一致才行。且攝影時很難控制和攝影無關的其他條件，而且還要花成本。而插圖就是這種情況下的替代方案。此外，有個性的插圖還可有效地突顯所要表現的主題。不管是「萌」系卡通漫畫人物的表現手法、或是具藝術氣息的簡約手繪風格等，都可以讓人從插圖中推想網站內容，也是一種不同的設計手法。
日本的圖畫文字(pictogram)
以前日本的識字率並不高，所以就有一種以圖畫文字傳達的「南部文盲曆」，岩手縣很流行製作這種文盲農民曆。在那個時代，常常用12支來表示日期或時間，所以常用動物的插圖來表現。驅邪避兇的日子就用鬼在哭的圖案來表現，朔日(農曆的初一為朔日，這一天整晚均看不到月亮)則用把東西藏起來的圖案來表現，非常有趣。
Design Samples
http://www.hybridworks.jp/
HYBRIDWORKS
精緻的插圖呈現精緻的風格，成為網站最吸引人的招牌。
http://www.themeatrix.com/
The Meatrix
老少咸宜，任誰看了都會露出會心一笑。
http://www.manneken.co.jp/index.html
Manneken比利時插畫
網站的介面和插圖風格相契。
以圖表方式傳達數據資訊
用心設計圖表以清楚傳達資訊
能夠視覺傳達數值差異大小的圖就是圖表。圖表的種類很多，例如各項資料獨立的直條圖、直條中又有各項資料的堆疊直條圖、資料明細很清楚的圓形圖、數據變化一目瞭然的曲線圖，也可以並用曲線和直條圖。想顯示的數值方式不同，可選擇的圖形也不同。數據的正確性當然很重要，但是能有助呈現效果的方法，或以不同顏色顯示不同資料等配色方式，也要懂得善加運用才好。
設計與畫草圖
很多專家都投入於將數據依時變化的情形，予於視覺化的資訊圖形領域上。這些專家們首先要做的就是用鉛筆在紙上打草稿。在必須思考圖與數據關聯性時，必須先直接用手將想法畫在紙上，還沒思考整理好的東西，先不要用電腦操作為宜。
內容參考網站：
Apple’s Tipping Point：Macs for the Masses(Nixlog)
http://www.nixing.com/apple/sketches.php
Design Samples
https://www.blogger.com/start
Blogger
一看就知道要怎麼做，充分發揮「圖解」的精神。
http://jvsc.jst.go.jp/earth/guide/
地球導覽
數量以箭號的大小粗細來表現，所以不看數字也能理解其中的關係。
http://www.mitsue.co.jp/product/
Mitsue-Links
將公司服務的特色以雷達圖呈現，令人印象深刻。
流程圖
有助清楚說明處理程序的內容
能將整段文句的內容用圖來表現，資訊會更容易理解，瀏覽者也會對內容更有興趣。對Web而言，「是否清楚易懂」幾乎可左右Web本身的價值。說明性質的內容最好可以儘量清楚、短時間內就能了解為宜。流程圖能夠因應這樣需求，最好能夠多加運用。這樣的方式對於分成好幾個項目的服務內容、辦理手續的方法、產品優點等都很能發揮優點。
以圖代文
流程圖除了可以用來整理所要公開的資訊內容，也可以直接用來製作Web網頁。您可以用類似組織圖的流程圖的方式來製作。登入成功時與登入失敗時的面如果用圖形來表示，網站的架構看起來就會更簡單。本流程圖的格式也可用於中小規模的網站建議，建議大家都能精通這種作法。
內容參考網站：
資訊建築(information architecture)、互動設計(Interaction design)用的視覺詞彙
http://www.concentinc.jp/ja/visvocab
Design Samples
http://jp.sun.com/solutions/infra/software/webinfra/
Sun Microsystems
不管使用者是否具專業知識，都能感受到複雜產品的優點。
粗糙的背景呈現真實觸感
低真實性(low-fidelity)設計的重點
用Flash設計圖像配置自由度高的網站時，可以讓效果帶點粗糙、隨性的氣氛。如果要表現觸感，可以設定為低真實性(low-fidelity)，再做出有點髒髒的、不乾淨的感覺即可。不過這樣的表現方式只是一種效果而已，所以要適度運用，不要讓想傳達的資訊被效果吃掉了。另外，要表現「髒」也要善加控制，不要讓人覺得看起來很不舒服才好。
Point：自由配置組成要素有一點要注意，就是組成要素要能在畫面上形成一個三角形。將醒目顯眼的要素先安排做為三角形的頂點，注意不要某邊重、某邊輕，之後再放上其他要素。就算進行位置的微幅調整，也要注意這三者要保持平衡，這樣整個畫面會比較容易安排。
肌理(材質)
在知覺心理學中，肌理比覆蓋物品表面那層皮的定義還更深、更廣，例如樹木就是山的肌理、山又是山岳地帶的肌理。推到最後，整個土地就是地球的肌理。肌理似乎有著左右構造物順序的力量。而在設計上，也要認為肌理的概念，善加利用一小部分對整體的影響力量。
Design Samples
http://www.richapplefool.com/
Richapplefool
有墊布(mat)感的畫降低網頁的數位感
http://www.fmm.jp/
馬莉亞傳教士法蘭西斯可傳道會
不整齊、好像用手撕過的紙，讓主題更能傳達溫暖與溫和感。
使用小圖示讓內容更容易清楚呈現
以充分表現功能或內容的小圖示建構一個好用、順手的網站
Web網站用的小圖示可分為「表示操作後發生結果」與「表示內容種類」兩種。小圖示可表示登入、列印、寄信、開啟新視窗、連結到外部網站、確認購物卡等等。資料則可分為需要密碼的資料、聲音、動畫、文字、PDF等。FLASH比HTML格式的Web網頁操作方法變化更多，使用FLASH建構的網頁，會有更多使用小圖示的機會。
什麼是小圖示(icon)
在電腦的世界當中，圖像或繪畫符號等小圖示肩負著請使用者進行某些操作的使命。然而，小圖示的意義並不只如此。ICON這個詞原本是指宗教崇拜的偶像或聖像，後來成為一種象徵的意義。也就是說，任何人共通的感覺以圖像呈現的東西都統稱為「圖示」，意思頗深。
Design Samples
http://www.a-blog.jp/
a-blog
左邊選項的部分加上表示選項內容的小圖示，馬上就能看出內容不同。
http://www.whatdoiknow.org/
What Do I Know
本例全區導覽的小圖示配置得不著痕跡但又效果十足。
http://www.city.nagoya.jp/
名古屋市
各選項都有顯示內容為何的小圖示，讓人一目瞭然。
design note
傳達設計與照片
廣告宣傳等傳達設計上，照片往往是最重要的要素。不只是因為模特兒或風景引人注目，照片還有清楚傳達主題的「資訊」功能。瀏覽者看到照片傳達的訊息覺得很有興趣，再被附屬的文字資訊吸引。像這樣想讓消費者對特定主題有興趣的企業或團體所辦的活動，英文就稱為「campaign」，中文譯為「活動」。
說到最有名的「活動」，1994年起開始進行至今的「Got Milk」牛奶促銷活動可說是當仁不讓。這個活動的做法是拍下各界名人在嘴上留下牛奶鬍鬚的照片，登在上大做廣告，另外也做成高畫質的海報，展現名人個性的各個背景與牛奶鬍鬚的對比煞是有趣。直到現在還是有很多明星繼續代言這樣的平面廣告。這個活動可說是美國廣告界的名作，但是應要注意的還是視覺效果的品質。
臉上沾到牛奶雖是個讓人印象深刻的樣子，但若照片拍下的人物表情、選擇的背景情況、照明等沒有配合，還是很難傳達產品訊息。這個例子充分說明了視覺表現的力量。在Web上常常只將照片視為網頁素材而已，然而高品質的照片卻有可能是最有利的武器。同時也希望能有更多免費提供的照片可供使用。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
電腦上可取得的資訊主要都是文字。文字是有形體的語言，所以本身已有其樣式(style)。當網站設計中用到文字時，文字的樣式就變得很重要。對網頁這樣以文字為重要資訊的媒體而言，字型並非只是裝飾而已，它最重要的使命就是傳達資訊內容，並要讓品質較低的顯示器也能清楚呈現。不了解這一點，就很難有效運用文字樣式。
字型、行距、字距、文字大小、文字顏色等相關設定都是樣式。一點小小的設定，就能時而展現歡樂的氣氛、時而呈現流行感。不過對一般網頁而言，最應優先處理的是「可讀性」。
一目瞭然的開頭
網頁標題適用的文字樣式
網頁標題的字體都會比較大，所以用的字型要像招牌一樣工整一點、穩一點。電腦分中、日文的全形字以及英數、符號的半形字兩種。在設計標題文字時就要注意這其中之不同，思考全形和半形字如何搭配。此外，中、日文字型和西歐字型不同，能否搭配得宜會影響標題效果。
設計性高的西歐字型
網頁設計上，光是標準西歐字型就非常好用了。如果您還是希望標題字再更有個姓一點，這時您可以買一些對設計很有用的西歐字型，而其中又以migre Font公司的字型以深具個性而聞名。此外，FontFont公司的字型產品、LucasFonts、T26等公司也很值得向各位推薦。至於你要問我哪種字型一定非有不可，那就是Linotype系列了。
Design Sample
http://www.kokuyo.co.jp/
KOKUYO
文字和上下保持夠寬的距離，看起來相當醒目。
http://www.inwei.jp/
廣方圓
從要素之間的間距、配色、設計架構等都要有其特色。
標題和內文的配置要注意不要頭重腳輕或腳重頭輕
掌握躍動率，就掌握了設計質感
在設計當中，影響文字可讀性的並非大小或粗細等單個文字樣式設定。對人而言，東西看起來如何，本來就是要有相對比較的對象才能決定。例如，小標字體雖小，但是和內文之間只要有足夠的間距，看起來還是醒目。運用這種相對比較對象的不同，感受隨即不同的特點，就能讓設計樣式更豐富多變。
何謂躍動率？
指內文字體大小、小標字體大小或是字體高度不同。內文字體大小12pt配小標字體大小16pt的躍動率很低。如果是內文字體12pt配小標字體26pt，躍動率就會很高。可見面積大的印刷品比較適合較高的躍動率，進而產生較好的對比效果。尤其是報紙的運動版更是需要有較高的躍動率。躍動率高除了給人強烈的印象外，也可以讓人便於從標題當中找到所要的內容。躍動率的概念不只可用於文字，也可用於圖片或視覺要素。
Design Sample
http://www.frogdesign.com/
Frog design
躍動率低，可是小標題字體夠粗、間距夠寬，整體設計不會造成瀏覽的負擔。
內文部份要能輕鬆瀏覽
配色和間距設定都要設定好
網頁中功能操作與文字內容常常會並列在一起。在追求網頁易讀性的同時，還要配合網頁目的來營造出包括設計風格等在內的整體樣式。尤其是提供新聞、生活資訊的網頁更要注意可讀性。設計重點在於配色要讓文字內容明顯，以及內文區塊和其他要素之間的距離，要設定得恰到好處。換句話說，最大的課題就是要讓文字與其他要素分清楚。
將視線集中於內文
如果想要強調內文部份與導覽部分間的反差對比，首先可以運用配色的技巧。內文部份的顏色如果想要設為黑色或深灰色，與背景成對比，以求畫面可讀性的話，附近的網頁組成要素的彩度就不宜太高，這樣可以避免搶過內文或畫面混亂的情形。如果再如之前所述在導覽部分與內文部份設定足夠的間距，畫面看起來就會更清爽。
文字安排要有足夠的空間
以下是要在800×600像素標準顯示器顯示時，設定三欄式樣式之各欄寬幅大小的標準數值。中間的文字資訊空間如果有左右兩欄的兩倍，瀏覽起來會比較沒有負擔。標準設定一般都是中間內文字體設為12pt(px)，每一行32個字左右，這樣會比較好看。
網站設計的死角
中文報紙都是由上到下，由右而左的編排方式，從讀者的視線移動方式我們可以推斷右上、左下的空間會形成死角。因為讀者看報會先從右上看起、看到中間再看到左下角。那麼網站又是如何呢？這就要看標題和導覽的位置而定了。在顯示範圍中，只要有一個醒目的標題，這個標題對角線上的空間就會相對地變得比較不醒目。如果設計的樣式是將導覽部分放在左邊，右下角就會形成死角；相反的，導覽部分安排在畫面上方，下面的內容再採兩欄的方式，就比較不會形成死角。
Design Sample
http://jvsc.jst.go.jp/universe/luna/
Japan Science and Technology Corporation! Return to the moon
以文字要素的易讀性為優先，採簡單的兩欄式設計。
網站LOGO設計樣式豐富多變
用堆積木的方式，架構重心很穩的網站
網站LOGO就像網站的招牌一樣，具有很大的存在意義。很多企業網站乾脆就用他們公司的LOGO來當網站LOGO，但有時也會碰到需要有網站本身標誌的情形，所以大致了解LOGO製作的秘訣還是很重要的。首先要注意的就是，幾乎所有用的徒刑都不出圓形、三角形、四角形這三種。對於這點，喜歡用圓形文字等做小圖的人要特別注意了。如何讓LOGO整體能穩穩地「頂天立地」，才是設計者該考量的重點。
「長體」和「平體」
在一定的空間範圍內，如果文字數多，就要把字體調窄調長，這種手法稱為「長體」，其祕訣就是將字型調得稍微窄一點，但是又不會太明顯。如果調得太窄，字體看起來太長，就會破壞字體本身的形式。如果是由上而下讀來，字體會看起來比較長。將字型調寬的這種技巧稱為「平體」。由左而右讀起來時，文字上方的空間較大，文字下方也會比較穩的感覺。
Design Sample
http://www.mediathatmattersfest.org/mtm04/
MEDIA THAT MATTERS 4
LOGO字型很穩，下方再加一行平體的副標題，感覺就很協調。
http://www.aromatiqueltd.com/
Aromatique
手寫字型和裝飾影像搭配得很協調，畫面感覺很乾淨。
有效運用各種字型效果
突顯大標題或小標題的基本技巧
改變文字樣式以呈現出文章重要性是大家都很熟悉的設計方式。現在我們再進一步將不同字體大小的字放在一起。為了讓人對內容的印象更為深刻，我們可加強大標題或小標題的質感。看看我們週遭的書籍或商品包裝，您一定不難發現很多商品名稱都是不同字型的組合。只要慎選合於網頁主題的字型，再注意大小設定，就可以呈現出文字的萬種風情。
全形字型呈現的風格差異
Gothic字型呈現的風格是簡單而又現代。它有個特點就是雖然字小，還是很容易辦認得，因此常用於內文或導覽標籤、圖片說明等。字體調粗時看起來就會很有力度，要強調的部分也會很清楚，調細時又給人中性的感受，不管和什麼網頁組成要素一起用，都很協調。比平面媒體更重機能性的Web網站上常常都會使用Gothic字型。
明體的字型在筆劃的結尾做了些像鬍子一樣的裝飾。正式且具知性的這種字型適合用於公文、報導等，例如平面媒體中就常使用這種字型。不過這種字型有個缺點，就是字體小一點時不易辦識，使用時要特別注意大小。另外，這種字型也不適合用在網站導覽文字。
西歐字型呈現的風格差異
Sans-serif字型相當於日文字型中的Gothic，由於沒有裝飾看起來很清爽，任何內容文字都可使用。
Serif字型相當於明體，和明體一樣給人正襟危坐的感覺。另外，明體古典的感覺也跟具現代感的serif系列字型不同。這種字型在英文報紙上很常見。
Script是指手寫字型。取自筆記書寫方式，又給人很正式的感覺，另外還有草寫的字型。
Design Sample
http://www.nttdata.co.jp/
NTT DATA-At the Forfront
分別使用了日文字型和西歐字型，感覺和印刷品一樣很有質感。
http://www.aoyagisikkiten.co.jp/
青柳漆器店
網站LOGO的手寫字型，和稍微拉長的標題明體搭配得可說是天衣無縫。
內容文字直寫
中文和英文直書的呈現法
在網路上有時候也需要表現中文情懷。而在進行這種網頁設計時，就會需要直書方式來呈現內容。電腦的世界一般都是以橫書為主，工具列的文字編排功能也是以橫書為設計基準，因此，除了改變方向外，也會需要做細微的調整，甚至還可以用適合直書的字型。了解了這些，就可以做出精緻、和影像相當協調的網頁設計。
不同的基準線設定
在電腦中輸入文字時都會有基準線來對齊文字，沒有特別設定的話那就是位於文字下方。這是根據西歐文字的特色而做的設定，只是中文也得套用一樣的設定。在直書時，如果完全不做任何調整，基準線會在文字左邊，整個文字看起來就會像是重心往左傾。如果直書的文字當中有英文或符號，基準線就會不同，這點要特別注意，看是要調整設定，或是將整段文字設定成對齊中間直線(置中對齊)。
英文的直書方式
如果是點綴性質的話，文字部分在畫面左邊時就由下而上，在畫面右邊時則是由上到下，這樣看起來比較自然。
Design Sample
http://www.busho-aichi.jp/japanese/index.html
武將的故鄉─愛知
扁長的內文和字型讓人想起古早的日本報紙。
清單選項方式的選單架構
有效運用設計空間的選單配置
畫面兩邊縱向的分區導覽，採列出數項連結文字(link text)的清單選項方式。清單的形式就是一條一條列出來，清單的區塊由標題、項目符號（如●◇★等）或數字、以及每項的文字三個要素所組成。只要依設計目的，調整這些要素的位置關係或邊距，就能有效運用設計空間。
三角形項目符號清單
標題的第一個字和三角形項目符號置左對齊。標題下方行距設為文字大小的1.5倍，三角形符號的大小要以標題首字的橫向中央位置為準。項目符號和文字之間要空一個字大小的空間。
圓形項目符號清單
如果是圓形項目符號，與項目文字之間的距離就可以比三角形項目符號和文字之間的距離窄一點。
Design Sample
http://www.hayonstudio.com/home.php
Hayon studio
上下都取很大的間距，感覺很簡單、無壓迫感。
http://www.intel.co.jp/
Intel
不同的選單用不同的項目符號，讓整體設計的外觀和感覺都很統一。
導覽的標籤和字型
兼顧網站樣式和操作簡易度的字型
Web的導覽也可以使用文字表示。導覽用的文字我們稱之為標籤(label)，標籤設計會影響到網站整體的設計質感。導覽按鈕(Navigation button)上的標籤位置稍微有點移動、或按鈕整體樣式和標籤樣式不協調等，都會降低網站設計的品質。此外，字型也會大大影響標籤醒目與否。在設計時要避開不易瀏覽、不醒目的表現方式。
標籤字小時
網路上可讀之最小文字大小為10pt，若要以此為導覽標籤文字時，那麼用對比色較強的Gothic字型比較不會受其影響。相反的，如果對比色不明顯，又使用明體字型，就會造成瀏覽上的負擔，也不好操作。
一般的標籤
若使用12pt大小的設定，則不管是使用Gothic、或明體都可以一目暸然。10pt的粗體Gothic還是很難讀，12pt的話就好讀多了。
適用明體的按鈕樣式
使用漸層或纖細的中間色時，就很適合使用明體。這時文字可以設大一點，以避免不易瀏覽的問題，並給人知性的印象。使用漸層的按鈕顏色較與眾不同，也能給人清爽的印象。
字型的種類
可以設定文字樣式的字型資料大致分為TrueType、NewCID和OpenType三種。TrueType是Windows系統用的字型，一般而言電腦中都會內建。NewCID則是專業人士使用的字型，多用於設計工作。而OpenType的使用者也有越來越多的趨勢。本來使用者需要配合作業系統購買的字型，可是OpenType在Windows、Mac兩種系統通用，並能安裝在伺服器上，不管在哪種作業系統環境下都可使用，因此漸受歡迎。
Design Sample
http://www.locksoflove.org/
Locks of Love
標籤文字和網站可愛的風格搭配得宜到好處。
http://www.uogashi-meicha.co.jp/
日文和英文並列，具知性美。
http://www.amazon.com/
Amazon
這裡用的字型很細，但卻不妨礙閱讀。
圖像與說明文字
有助理解圖片的設計要素
平面媒體上每個圖片一定都有其說明文字(caption)，以助瀏覽者了解該圖內容。雖然其屬輔助性質，但現在已經有越來越多使用者，會先透過圖片和其說明文字大致掌握訊息內容，再來閱讀內文以補充所需資訊。因為Web的設計空間有限，因此安排說明文字位置和採用的方法，都需要用點心思來設計。此外，像Flash這類設計自由度高的軟體，可以讓人做出和印刷品並無二致的說明文字設計，您不妨試試。
Web與Unicode
在做印刷品時，常需要自己造字(這些情況幾乎都是發生在人名上)，或是購買字型來使用。可是在網路上人名的顯示卻很容易發生問題，例如SMAP的「草彅剛」等就是很好的例子。由於這樣的字一般的文字碼無法顯示，所以常常都會用假名表示。可是，現在這個問題已獲得解決，因為Unicode這種字碼可以顯示全世界的文字。
Design Sample
http://www.manneken.co.jp/menu/stand.html
Manneken比利時鬆餅
包圍住文字的元件其大小關係保持絕佳的平衡。
http://www.toraya-group.co.jp/
虎屋株式會社
說明文字的位置關係呈現一種平面設計的協調。
http://jvsc.jst.go.jp/earth/guide/
地球導覽
箭號的樣式等說明文字以外的網頁元件雖然小，但是看得很清楚。
種類眾多的表格樣式
表格的樣式種類
一件事情可分成好幾項的這種資訊，很適合用表格的方式呈現。表格名稱或分類條件可分別寫在行或列的儲存格上，再以顏色或框線來區別。這個樣式非常簡單，可是儲存格內各項對齊等需要注意的地方很多。這種樣式如果都是直線，看起來會很沒意思，所以不管是有色儲存格，或是表格中的內容都需要取足夠的間距，不要讓畫面看起來擠在一起。
XHTML和表格
現在製作Web網站的標準程式語言是XHTML。使用XHTML時，由於裝飾性的要素並不包含在標籤碼(tag code)裡，而要用CSS來指定。HTML將複雜的設計全部用table標籤來做，但是XHTML則是禁止在表格以外的部分使用table功能，而是先用標籤做出表格，再以CSS設定顏色或文字的位置。
Design Sample
http://www.thebodyshop.com.tw/
THE BODYSHOP
表格的設定讓商品看起來很美觀。
http://hmv.com/hmvweb/home.do
HMV UK
清楚區別開每一行，讓資訊更清楚易懂也更優美。
魅力無比的文字設計
運用文字獨特的外形，架構出整個畫面的方法
以字型的外型或位置配置引人注意的設計我們稱之為字型藝術(typography)。本來這個字的意思是包含文字本身的設計，但廣義而言，文字為主的設計樣式也可算在字型藝術的範疇。文字比圓形或方形等圖形要素的外形更複雜，且文字當中又有其意義，相當適合用來做知性的表現。不過，光是排列文字是無法表現出什麼風格出來的。因此我們就從「深度的表現方式」切入，說明如何用文字來做設計。
文字藝術
電腦問世之後，字型的表現更多樣了，但在此之前就有很多將文字外形提升到藝術層次的作品。尤其是20世紀前半的作品到現在仍很具影響力。俄羅斯結構主義藝術家Aleksandr Rodchenko以像建築物一樣，從紙面上立起的字型藝術給圖像設計界嶄新的衝擊。另外Bauhaus的Paul Klee也以TYPEFACE為主要結構的油彩畫，將文字的可能性更推廣了一步。這兩位都是大家需要認識的藝術家。
Design Sample
http://www.toraya-group.co.jp/history/his02_001_02.html
虎屋株式會社
嚴謹的格線架構讓僅有導覽部分的網頁設計很有力。
http://www.adametrope.com/
Adam et Rope
故意將設計放斜，讓四四方方的格線設計展現獨特的個性。
如何讓文字資訊的顏色和設計保持融洽的關係
對文字資訊而言，灰色比黑色更具功能性
有人說灰色是人類唯一不覺得刺激的顏色。內文字型顏色使用灰色最大的好處，就是較不易引起讀者眼睛疲勞吧！另外，對比的強弱也會影響可讀性。強烈的對比很醒目，清楚易讀；較弱的對比則較不醒目，不易閱讀。黑色很適合用來提供文字資訊之用，但和其他顏色仍差很多，也可能讓讀者眼睛疲累。所以在這裡，我們就來介紹如何發揮並利用灰色的優點。
Point1：在背景色明度高、彩度低的版本，可以加強文字的對比以讓整體有強弱變化。背景色、文字顏色的對比色若都很高，則整個畫面會感覺好像沒有整理好、很複雜的感覺。
Point2：中間灰色文字呈現的感覺。眼睛不易疲累的灰色最適合用來顯示文字。文字大小設為14pt，比黑色但設為12pt還更容易瀏覽。另外，以灰色為內文，以黑色的標題時，標題自然會更為明顯。
Point3：內文文字如為10pt，顏色設為黑色，行距空大一點，就會很清楚易懂。字體很小又使用灰色的話，文章整體看起來就會好像是配角一樣，這點要多加注意。
冷色系的配色與內文顏色
青色或綠色等冷色系的顏色會讓人覺得很遠、很深。背景為冷色系時內文就很適合用灰色。灰色也是讓人感到距離較遠、深度較深的顏色，所以背景和內文就會呈現一定的距離感，而這樣的距離感會讓設計很有一體感、很穩的感覺。和內文為黑色字型的版本相比，更為一目暸然。
暖色系的配色與內文顏色
背景顏色為暖色系時，內文顏色就很適合搭配用黑色字型。如果搭配灰色，看起來會很像被吸到裡面去，感覺很不協調。這時要用和暖色系一樣用很明顯的黑色，才會感覺平衡。
灰階70%是最易閱讀的文字顏色
物體存在的知覺是靠該物體及其背景亮度之差來識別。關於亮度的差或對比的區別能力，60歲的人只有20多歲的人的一半左右，所以不管哪個網站都需要很小心考量文字內容的可讀性。
亮度差在顯示器上就會變成是明度的差，所以可說文字和背景色的對比越高，便越適於所有人來瀏覽。亮度差最大的顏色搭配是文字為原色的綠(G)色、背景為黑色。這個灰度的差為了配合Web設計的目的將其轉為灰階，並將文字顏色與背景顏色反轉後，文字就變成70%的灰色。所以背景為白色的網頁搭配70%的灰色是最適合瀏覽的。
Design Sample
http://en.red-dot.org/
Red dot design
灰階設定在50%到60%的網站，灰階顏色差異不大，很易於瀏覽。
http://www.illums.co.jp/about/
ILLUMS Japan
內文部份為灰階50%、10pt的明體。整個架構看起來很舒適、很高雅。
http://www.misawa.co.jp/otikaku/index.html
MISAWA
灰階80%、亮度差恰到好處，易於閱讀。
design note
Web與字型
字型不光只是用來讀而已，還可以用形狀來表現。字體較粗的字型比字體較細的字型更醒目，感覺也較有份量。字型設計在電腦成為設計工具的90年代初期開始發展，有越來越多設計者投入數位字型的製作，字型可能的呈現方式更受到矚目。其中Neville Brody更是將字型可能性大為拓展的一位設計師，他追求的文字設計是不只要能讀，還要能讓人眼光久久不忍離去。在Neville Brody出現後，日本甚至還出現一種只有漫畫台詞的海報，只有字型樣式的表現方式蔚為流行。
然而，時序進入2000年，隨著資訊流通型態的Web網站和手機使用率增加，文字和文字表現開始被切割，原因也許是因為網路還可以有聲音、動作等過去平面影像所沒有的要素可以運用，所以很多人就朝著那些方向挑戰去了。於是，文字資訊的功能就只重視資訊取得的效率性和易讀性而已。過去有好幾度說要開發在HTML也可自由使用各種字型的技術，可是似乎又沒有使用明體(正式)或Gothic(休閒)以外字型的需求。重視字型的設計性而將部份標題影像化的做法又有很多人覺得不方便。不過，現在已經有一種可以讓文字兼具使用便利性與設計性的技術－sIFR(或是Scalable Inman Flash Replacement)問世了，樣式與功能再也不是魚與熊掌不可兼得的難題了。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
網頁的基本結構可大致分為三類，一是跳到各小項目首頁的全區導覽列(global navigation)，二是在各個小項目中移動的區域導覽列(local navigation)，三是各個小項目中的文字、圖案等內容。這些全部清楚區分後，再依各個區塊設計不同的樣式，就完成了最基本的架構。
介紹完基本畫面結構之後，就要設計網頁的內部組成要素，我們稱之為「標誌系統設計」。將網頁中各種按鈕、清單、標籤的樣式，以及字體與擺放的位置，做統一的設計，是掌握網站設計的基礎，如此才能讓整個網站的設計愈有整體感。
在設計網頁時，從整體版面的結構規劃，到細部組成的製作與排列，都有許多重要的技巧。只要牢記這些原則，並時時注意細節與整體的一致性，就能設計出好的網頁版面。
倒L字型的版面設計類型
所有網站都適用的設計基本型
導覽的部分位於畫面上方以及左方，將資訊有效地索引化的這種形式，是最多人採用的設計基本型。由於這種方式可以容納很多連結按鈕，因此很適合用於設計滑鼠按鈕次數少的網站，只要將設計性的重點運用在網站LOGO、全區導覽、或是左邊的導覽部分，就可以拉大和其他網站的差距。此外，這種設計的L字型大小設定，也會影響到網站的樣式。
標準倒L字型：倒L字型的畫面結構是將網站整體共用的全區導覽放在上方，從全區導覽選擇之各選單的子導覽放在畫面的左邊，子導覽和內容會隨網頁更動。這種類型適合提供分類項目多、內容豐富的網站。
分類項目少、實體內容較少的網站適合的類型：從首頁點選全區導覽時會出現各個小項目的這種選單類型，就很適合分類項目少或實體內容較少的網站。左邊這欄出現的是展開資訊各層內容的導覽。
另外，在同一個階層內的導覽則安排放在實體內容的上方。如果要提供的資訊內容較少，也可以將網站整個資訊用此結構來呈現於畫面上。
更簡單的倒L字型：直向導覽的結構，一次所能列出的選單比橫向導覽的更多。例如流行服飾用品等網站，提供的就是一個商品項目的網站。而整體選項較少的網站，就可以將選項統一在畫面左右兩邊，這種導覽方式使用起來會比較方便。
小心!!不要塞太多資訊
像入口網站等專門提供資訊的網站，就要儘量減少使用者一層層找到資料的點擊次數。減少點擊次數一般認為是可以透過導覽或網站設計來解決的。
此外，一般企業的網站則會希望一次提供的資訊少一點，改成讓瀏覽者一層一層地找到自己所需的資訊。因此，設計的主流也從「資訊量大型」慢慢變成「資訊量少型」。在思考設計架構時，希望可以先考慮到如上的現狀，再決定是否要採用倒L字型這種可以加入很多介紹內容的樣式。
Design Sample
http://www.fmworld.net/fmv/
富士通FMWORLD.NET
全區導覽和分類導覽的關係一目了然的樣式。
http://cweb.canon.jp/co-profile/company/index.html
Canon網站
網站LOGO和分類瀏覽列都有的標準型。
上方選單型的版面設計類型
公司網站最常見的瀏覽架構
上方選單型適合可將資訊單純地依項目分類的網站。所有的網頁共同使用的選單稱為全區導覽(Global Navigation)。首頁只有全區導覽，可以將操作性能最簡化，而各網頁的首頁則是安排用以連結到各小項目的子選單(區域導覽：Local Navigation)。這種方式充分考量到顯示器可顯示的範圍。全區導覽顯示出提供哪些資訊，並利用關鍵影像(key visual)打造企業的形象，這樣的網站設計方式可加深瀏覽者對企業的印象。
Above-the-fold(可顯示範圍)
指網站的目標顯示器(target monitor)一次可顯示的最大範圍。這本來是報紙或標題呈現方式的用詞。報紙在送到家家戶戶時一般都是折成四分之一大小，重要的頭版消息的排版，都要安排得讓讀者很快就能看到標題或掌握其中內容。而這個折成四折的一面就是above-the-fold。不管是報紙或網站，版面編排或設計都要注意，讓閱覽者在閱覽的瞬間，就能掌握到最重要的資訊。
Design Sample
http://nagafuji.jp/
長藤寬和設計室
讓版面呈現「破格」的效果，故意要讓讀者大吃一驚。
善用格線系統
所有版面設計都可運用的基本技巧
「格線系統」(grid system)是用來調整本文區和圖片位置的基本排版技巧。除了處理文字外，也可以運用於安排圖像素材的平面結構，可說是設計技巧的「王道」。基本的做法是在整個畫面上拉出導引線，沿著線安排各個素材，但格線的基準值會影響到畫面整體的平衡感，因此開始設計前必須要先訂出這個基準，而如果設計的是網站，基準則是網站LOGO的大小。
拿掉格線吧!
格線系統可以讓網頁設計的各個要項正確對齊，整體印象讓人感覺次序井然，然而這樣也可能會陷入單調、無趣的窼臼。所以會用格線法進行設計後，也要學習不拘泥於格線，以做出更具豐富變化的設計。
Design Sample
http://www.folietto.at/
folietto
一看即知是直向拉出格線的設計法，整個格線架構相當嚴謹。
http://www.cci.co.jp/
Cyber Communication
這種做法是將格線直接運用在網頁當中。
http://www.aiga.org/
AIGA Design Forum
這種格線架構讓網站LOGO的設計更為醒目。
快速分割版面設計空間
以黃金分割為基準，漂亮地進行空間分配
「黃金分割」是指建築物、繪畫等，在造型上進行空間分配時，常常用來做為基準的矩形比例，在我們日常生活中常用運用到黃金分割比的矩形做設計，如撲克牌、名片等。這個比例聽說是人類視覺認知覺得最美的形狀。做網頁設計時如果您用格線系統來進行畫面分割，就可以使用此比例來設定基準網格的大小，以便讓畫面看起來更具整體感。就算只是畫面中的某個部分採用這個比率，也能夠讓您的設計呈現出極佳的均衡感，可說是極佳的矩形比例。
1:1.618
憑直覺做設計就不用網格嗎?
街頭的海報等的廣告媒體中，有些看來好像只是將這些插圖隨意安排而已。這種憑直覺的設計樣式，是不是和使用網格的設計手法不同？其實不然。這些乍看之下毫無章法的設計，有不少都還是有其格線架構的。並不是使用網格，成品看起來就一定會很網格風。網格並非完成一板一眼、方方正正的設計的方程式，而是讓人有所依據的工具。
Design Sample
http://www.wedgwood.jp/
Wedgwood官方網站
以直向長方形為基準，用網格架構出整個畫面的實例。
http://www.design-museum.de/vitra/
Vitra Design Museum
畫面中有些部分分為矩形、有些非矩形，視覺上看起來比較開闊。
http://www.pdk.pl/index_f.html
Powszechny Dom Dredytowy we Wroc_awiu S.A.
中間的主要畫面雖然是相同比例的矩形，可是卻故意放斜的，感覺趣味橫生。
碎形(fractal)網頁設計
避免畫面雜亂的設計原則
「碎形(fractal)」是指局部的結構與整體的結構很相似的意思。網頁設計方法中也有一種方式是讓區塊的形狀與整體相同，或是同時使用幾個相似的形狀，以讓畫面呈現規則性。例如，全區導覽等五個主要的功能構成的畫面中，全區導覽的選擇有五個，分類導覽的選擇也有五個。這樣的做法主要的訴求是畫面簡單，易懂。採用這種法則，可以做出相當簡單的網頁設計。
讓瀏覽者印象深刻
網站很重視好用、易懂等功能性，但企業的網站還得同時顧及企業的品牌訴求、發揮廣告媒體的功能。電視廣告等媒體都是以讓觀眾記得廣告內容為第一目的，所以網站也是一樣，採取的樣式也要讓人印象深刻。又要顧及搜尋的便利性、Web標準，又要顧及可用性，真的很辛苦的工作，但希望大家身為設計者，還是能找到網路設計表現的新出口。
Design Sample
http://hochouki.com/
日本助聽器工業會
用了很多矩形讓整體感覺很方正。
http://www.dankimo.com/
男用和服協會
中間Flash部分的功能有三個，選單群也只有三個，感覺很有律動感。
將整理好的資料反映在版面設計上
將資料群組化再運用版面設計進行連結
當文字、圖像，以及導覽等內容資訊集中在一個畫面時，要將各個內容材料一體化，就必須要用位置關係或顏色來做連結，利用位置關係將素材予於群組化，就要善用邊界的效果，而邊界寬窄的安排所造成的客觀視覺感受，正是設計師要培養的能力。在設定邊界有困難、或在有限的範圍內，必須區分操作性等功能時，則可用配色來進行相關連結設定。
安排的位置不同，相關的程度也不同
安排的位置與關聯性的印象有關。如果每個地方的邊界都一樣，就會給人「統一」的印象，有的地方邊界較寬，那會像是分成兩組或三組；如果邊界很大，佔各項要素的二分之一左右，就會給人「擴散」的印象。而「擴散」會給人各內容並無相關的印象。
安排的位置和顏色在關聯性尚有何不同
安排的位置再加上顏色後，變化就更多了。「統一」中再用顏色加以區分的話，就可以給人「條件相同，但內容有所不同」的印象。分成兩組或三組的話，顏色則有表現優先順序的意思，在「擴散」當中，則讓人感覺在眾多不同的項目當中仍具有相關性。
您真的知道嗎?
位置相近的圖，比位置較遠的圖看起來更有相關性。您一定會覺得這種事是基本常識，不用說也知道。可是世界上卻有很多設計根本就沒有想到這些基本的事情。實際上越是覺得理所當然的事情，就越難以有形或無形的方式表現出來。認知科學當中，把腦中所想的事情以有形的方式表現出來，或是告訴他人，就稱為「外化」。任何感覺如果不能外化，就無以判斷真假。整天都埋頭苦幹的設計師們，更要特別注意這點。
Design Sample
http://www.epicurious.com/
epicurious
右邊的設計看起來像全區導覽的延長，可以看出操作上的相關性。
http://www.misawa.co.jp/
MISAWA
這個網站不是用位置來呈現相關性，而是用其他方法來表現不同的屬性。
http://tec.taiko.co.jp/
大興物產WEB目錄
只以配色來區分內容屬性，以畫面的整體感為重。
容易一眼找出所需資訊的設計
魔術數字7與設計
「魔術數字7加減2(MAGICAL NUMBER OF SEVEN PLUS MINUS 2)」是1956年George A.Miller發表的心理學法則，點明人一次能處理的資訊數上限。「人一次能掌握的事情約為7個」。這個法則應用在日常生活上很多地方，例如，報紙一個版面除了廣告的地方外，會登的報導大約是7個，而電氣化產品的操作性能大約是7項。而這點也可以運用在網站上。
內容架構上要去蕪存菁
如果網站內容分區多於7個時，就算整個畫面可以容納得下，還是會有缺點，就是很難一眼就找到要找的主題內容。不只如此，也無法讓閱覽者很快看出這個網站的主題為何。尤其像是要建立公司品牌這種目標越是明確的網站，內容結構就要越單純。
培養「比」的感覺
所有設計中，構成設計本身的各項主題要素之間要安排在什麼位置、要設定多大多小等，都要與周圍主題要素相比較來決定。簡單來說，在一個小的圖的旁邊放個更小的圖，原本的那個圖就變成比較大的圖了。在設計的世界裡並沒有絕對的單位，總是會隨與周圍事物的關係而產生新的狀態。掌握住「大的東西」為什麼看起來比較大、「小的東西」為什麼看起來比較小的這種「比」的概念，在設計上是非常重要的。
Design Sample
http://gap.co.jp/
GAP Japan
善用LOGO標誌的知名度，將架構盡可能地簡化
畫面有秩序，瀏覽更容易
各組成要素位置關係的統一及其效果
在公共設施或醫院這樣的建築物中，都有讓人潮往來更順暢的「標誌系統設計」，這些設計除了要統一樣式外，就連放置的高度或大小等也都會予於統一。具有一定操作性的網站設計也一樣，確定好設計要素的配置可以降低操作的困難。設計的秩序不只會影響使用性，也會影響美觀。定出組成要素的位置關係，在網站設計而言可說是相當基本的一個概念。
閱讀引導標誌的統一
閱讀引導標誌的設計室最容易統一的。要統一時，不只要注意形狀要統一，還有閱讀引導標誌和文字之間邊界的比例也要遵守法則，這樣才會協調。
按鈕樣式
在「執行」或「送出」這些操作按鈕的樣式已經統一的網站，表示「上一頁」、「下一頁」等表示移動的操作按鈕上用像圖一樣的小標誌或小圖樣(icon)，就可以讓整個設計看起來層次提升很多。按鈕的顏色要和連結文字(link text)的顏色統一，讓顏色也有表現相關性的功能。
緊急出口的設計
緊急出口的標誌是一個人急著跑向一個出口。其實這個標誌是世界統一的，設計者是日本設計師太田幸夫。聽說綠色和白色的配色，是因為人在吸入煙時，會將這樣的顏色看成黃色，所以設計者才做這樣的顏色安排。
Design Sample
http://www.dsp.co.jp/
Digital Scape
整個網站都用統一的箭號標誌
http://www.k10k.net/
Kaliber10000
按鈕和小圖示的樣式都有固定規格，設計水準相當高。
http://download.com/
Download.com
可以點選的文字字型都予以統一
有效配置方塊或文字
運用網格設計完成畫面結構
要讓設計樣式不會鬆散，可以從文字、圖片到細節部份，都運用網格法來配置。雖然實際在進行時，主要只是在畫面上設定導引線而已，不過，該對齊的地方是否好好對齊，卻是這種設計能否成功的關鍵。因此在進行設計時，最重要的就是兼顧細部的調整和畫面整體的協調性。所以在設計時要時而近看、時而遠看自己設計的感覺。
無表格設計(No table design)
要在網路上顯示複雜的表格時常會用「設計表格」(Layout table)的手法，可是這個方法卻有讓HTML程式碼(source)複雜化的缺點。於是，後來的人就用CSS來控制各組成要素的位置，而這種流派就稱為「無表格設計」(No table design)。採用這個方法，強調的就是能夠因應Web標準技術。
Design Sample
http://8011web.com/
8011web.com
此網頁中以左邊長條狀為基準來切割畫面空間。
http://www.alistapart.com/
A List Apart
網站LOGO影響整個畫面的空間劃分。
運用留白技巧的設計法
如何運用留白
所謂留白，是為了讓想要強調的影像等要素有更佳的呈現效果，而在其周圍留下空白空間。有人會認為網站的目的是提供資訊，留白等於就是「浪費空間」；可是這樣的設計效果具有相當清楚分明的感覺，所以在此還是想將這種手法當成一種設計技巧來介紹。像LOGO或商品影像這樣，想與其他部分或樣式做區別時，這種方法就相當好用，而且就像使用大量展示面積的家具用品展示店給人的高級感一樣，留白的空間也會給人一種很有型的感覺。(留白不一定是白色的，而是指一塊空白的區域。)
畫面上方留多點空間的重點
瀏覽器的發展日新月異，近年來更是很多人關注的焦點。分頁式瀏覽器(Tab Browser)讓使用者不用新開瀏覽器，在同一個瀏覽器中就可以開很多個不同的頁次來瀏覽網頁，很方便。各個網站可用自己設計的按鈕來操作，可是有時候碰到上方選單型設計時，常常就會不小心按到瀏覽器的按鈕，尤其是網站的按鈕和瀏覽器的按鈕接近時更是如此。所以希望讀者們在設計時，可以留個10像素左右的距離為宜。
Design Sample
http://amana.jp/
Amana
大小設定較小的網站LOGO也可透過留白的效果而看起來醒目。
http://swanq.co.jp/
swanq
此為影像直向貫穿畫面的結構，資訊內容變化的地方，也因為有留白而讓畫面轉換感覺起來更自然。
http://www.ckr.se/
CLAESSON KOIVISTO RUNE
這個設計實例特別強調網站LOGO，樣式簡單且高雅的LOGO可強調出高級感。
內容豐富的網站設計重視緊湊感
善用液態設計(liquid design)的網站設計法
入門網站等資訊量多的網站，就要運用左右寬度可調整的液態設計(liquid design)。用這種手法完成的網站效果有兩種，一種是顯示畫面大小變更時，整個設計整體畫面給人的印象不變；另一種則是縮小時覺得很擠，放大時又變得畫面很閒散。產生這種區別的重點就在於標題所設的邊界大小。要讓顯示範圍變更時設計也不會亂掉的祕訣，就在於這個部分的處理。
Point1：顯示畫面大小變更，但設計感仍舊不變的網站大多是因為在網站LOGO下方設定了距離較大的邊界。只要執行這樣的設定，就能免於在顯示畫面縮小時，整個設計得擠成一團的窘況了。
Point2：各區塊不用方框框住。各區塊標題用顏色長條(在此為灰色)，區塊間就自然可以區隔開來。也因此，各個區塊項目沒有必要畫框線。看得到框線反而會讓人覺得整個畫面都是線，而給人複雜、俗套的印象。
Point3：搜尋的部分有支撐標題部份的功能。這個地方與畫面中央的內容部分不同，要用線框住以強調與左側設計之間的左右對稱性，這樣看起來結構就會很緊湊。
液態設計的基本重點
畫面左右安排寬度大小固定的導覽要素、字體設定成與中間本文部分相對應的大小，這也是很多人愛用的手法，優點是，在設定顯示完整畫面時一次可顯示的資訊量增加，可以慢慢閱覽。一般而言較少使用在首頁的設計，而會常用在一次要提供完整資訊的情況(如新聞)上。
瀏覽器也有工具列
Web網頁設計的最大寬度，一般是由顯示器的大小來決定的，不過也不要忘了瀏覽器也有工具列。工具列是畫面左邊出現的書籤(bookmark)或顯示已瀏覽網頁的功能，現在還有即時通訊的RSS顯示功能，所以有不少人會將工具列開著不關掉。在這種情況下，解析度為1280像素的17吋標準顯示器，可設計的最大寬幅也會只剩970像素而已。
Design Sample
http://www.gettyimages.com/creativeimages?country=usa
getty image
將網站LOGO儘量設小一點，以和其他部分產生足夠的間距。
http://www.goo.ne.jp/
goo新聞
長條廣告外的空間，讓瀏覽者面對那麼多資訊可以喘口氣。
以影像為中心之設計架構
中心構成
如果設計的網頁是要以視覺方式來傳達某機關單位或品牌的印象，就要夠靈活、夠有創意才能勝任。如果能夠掌握這種網站的設計類型，就能確實降低設計上的困難。在設計時首先要先決定，是要讓影像充滿整個畫面，還是要讓色塊包圍住影像，還好之後再來決定整體的結構。如果想要展現影像的精美，可以採前者；如果想要展現影像處理的效果，則可採後者。
塞尚的畫面結構哲學
南法艾克斯安普羅旺斯的畫家，保羅塞尚(Paul Czanne)對二十世紀的美術影響甚鉅，他認為三維的大自然界的物體都可以利用球體、圓柱、圓錐的三種方式入畫。想必是他不斷想要設計難以在平面上展現的光與影而得到的結論吧。將事情過度簡單化的確很危險，但對於畫面結構有自己的一套想法，對版面設計而言卻是相當重要。
Design Sample
http://asia.swarovski.com/taiwan/
Swarovski Crystal
商品的硬度和設計樣式的發想有著共通點。
http://www.stylewars.com/
Style Wars
本例以繪畫的手法，充分揮灑影像設計的能力，水準相當高。
分段式的設計類型
用區塊標出網頁重點
平面印刷品中，分段式版面編排方式，可以避免換行時未出現過多空白的情形。在網頁上，這種方式可以盡量減少視線大幅移動，有助充分運用空間。網頁和雜誌等不同，畫面出現的文字量較難控制，所以可以先做一個基本段落區塊，確定好瀏覽者視線集中的重點，再加入其他內容，這樣就會具有平衡感。
網頁分成兩欄
將網頁畫面分成兩欄，左邊的導覽部分全部設為靠右對齊，讓畫面看起來像是文字都向中間的分隔線對齊。用這種「左邊區塊向右對齊」的方法，文字內容很多的網站看起來也會很穩。
由上而下分割網頁空間
網頁的分段式設計基本上都是由左往右排，不過也可以由上而下排。這個結構是將網頁空間分成主題、圖片式全區導覽和文字三大部分，每一部分的內容都少少的，看起來不會塞在一起。
網頁設計的重心
報紙的重心在於發行報社名稱以及各版的重要標題，而網頁也是一樣，網站LOGO和周圍是網頁看起來穩不穩、是否有頭重腳輕、腳重頭輕問題的關鍵。所以網頁設計時就要在網頁上方的頁緣和網站LOGO設定足夠的間距，在瀏覽器的介面和網站LOGO間留白，以集中瀏覽者的視線。
考慮到Web標準相容性的設計方式
考慮網頁資訊結構的畫面架構
現在所謂的網頁設計標準，是指套用CSS樣式的XHTML語法而言。XHTML是從包含樣式與資訊定義的HTML語法中抽出樣式設定的部份，因此光靠XHTML是無法完成網頁設計的。分離樣式與結構，是為了便於設計與維護網頁，因此學會實用性的Web標準網頁設計技巧，實為當務之急。
內容架構的基本
在XHTML語法中，一頁裏可設定的最上層標題h1只有一個。h1主要是用於網頁ID的標籤，而下層資訊則是每一則都用h2來設定。
混用
在Web標準普及之前，網站設計主要都是用table標籤來做表格設計。然而這個手法不只會讓標籤流於繁雜，而且不易標明優先順序等內容結構。雖然如此，要讓能將XHTML和CSS分別解譯處理的瀏覽器正常顯示出網頁內容，還是有很多地方要用到table(表格)，所以就有人採取大致分割網頁設計空間時就用table，要做細部設計時就用CSS來控制的這種方法。這種方法就稱為「混用」以與其他方式區別。
Design Sample
http://9rules.com/
9rules Network
各個區塊的資訊整理情形會反映在樣式上。
http://mightygoods.com/
mightygoods
內容結構包括導覽的部分都很層次井然。
沿用首頁的風格
導覽設計(navigation design)也要沿用首頁的特色
如果網站設計是要傳達品牌印象的話，就要讓網站整體有一致性。像企業品牌這樣大的主題，就要讓瀏覽者從一點點小印象中慢慢堆疊出一個完整的印象，所以不管是影像或顏色都要沿著相同的主題來選擇。就網站而言，呈現效果的一致性也會連帶影響操作使用上的一致性。尤其是包含操作性在內的設計，其整體感在介面設計的領域中更被稱為「look and feel」而備受設計者重視。
不一定從首頁瀏覽起
網站要看起來很有主題首尾一致的效果，就必須要使用者是從首頁連結進來才行。使用者能按照網站設計者、資訊提供者所想，使用網站所設的導覽來逛逛這個網站的話，才會起「Look and Feel」之效果。可是，由於近年來搜尋系統的功能提升，使用者很多都不是從首頁點進網站，對這樣的使用者而言，網站的整體感或氣氛就很難感受得到。網站設計的效果有時也得要看使用者使用方式而定，希望設計者們都能先有這個概念。
Design Sample
http://www.h-kotobuki.co.jp/about/
壽屋商務飯店
導覽設計與使用的影像統一，呈現出高雅的感覺。
http://dma.ucla.edu/info/index.php
UCLA Design Media Arts
矩形擷取部分關鍵影像，與首頁風格一脈相承。
http://www.g-gravity.com/
G-gravity
用有光澤的背景呈現出令人驚艷質感，而此質感也是整個網站的共同特色。
design note
依重力概念而行
設計領域中，稱設計物的上方與下方為「天地」。做平面設計的人一般也都是說「天地」而不說「上下」。多數的設計者都能顧名思義，注意到上面代表的是「天」，下面代表的是「地」。尤其是在固定的顯示範圍內，天地的感覺就顯得相當重要。要把紙面想成是個自然環境，設計時要依重力法則來構思。
舉例來說，好看、好懂的這種設計樣式，我們會說「設計流暢」。這個「流暢」就是指畫面上風順暢地吹拂而去的感覺。一般而言，風都是和地面平行的，所以要有天和地，也才能達到「流暢」的效果。畫面上方比較空，畫面下方則要多些份量，所要呈現的東西就安排在下方，各項主體之間要有適當的距離讓空氣流通。每個設計者所說、所想的某個顏色或某個形狀可能都不一樣，但是「天地」之間的重力法則形成畫面骨架這點卻是不變。
除了上、下、左、右這樣的位置法則之外，大小、重量也會自然地呈現輕重的效果。所以大的東西放在畫面下方比較自然，而畫面上方如果是一些小東西的集合，看起來會很有整體感。在有個大圖形的畫面結構中，如果可以在附近放幾個小一點的圖形以讓大圖形與小圖形平衡，整個畫面看起來就會很穩。這種設計技巧其實正反映了自然環境的重力法則。
重量和大小會隨配色而改變，且條件越多，就越難讓樣式統一。不過不管是怎麼樣的設計，「天地」的概念一定都會是設計者的重要依據。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
