MiyaC

社群網站個人首頁的眼動研究情況

2012-02-02T00:05:00.003+08:00

EyeTrackShop 在2011/12/01 發佈一份分析報告，顯示各大社交網站中，個人資訊頁(Profile Page)被瀏覽時的熱點分佈情況。
研究對象：
Facebook，Google+，LinkedIn，Flickr，Youtube，Klout，Reddit，Digg，Tumblr，Twitter，StumbleUpon和Pinterest。

英文原文：http://mashable.com/2011/11/30/social-profile-eye-tracking/
繁體中文：http://www.find.org.tw/find/home.aspx?page=news&id=6414
簡體中文：http://www.yixieshi.com/it/9903.html

---------------------------------------------------------------------------------------------------------------------------------

【名詞解釋】

平均停留時間 average dwell time
首次注視時間 time to first fixation
停留率 percentage fixed

透過EyeTrackShop的研究結果有幾項發現：

產品圖、個人照片，特別吸引使用者的目光。
網站內容、介面的不同潛藏著不同的瀏覽習慣；
如google+的使用者，關注「內容」多於頭像與朋友，
Klout提供你評估自己網路影響力指標的網站，右下內容的小數字，關注度大於左上角的總體數字，瀏覽者更在乎影響力數據的「變動」。
如何將想傳遞的訊息放置在最合適的位置，創造最大的效益；
以文章內容來看，放置在越上方的內容越能吸引使用者的目光。

Usability research 社群網站個人首頁的眼動研究情況

View more presentations from Miya Chang.

生動漫畫方式講使用者經驗設計的投資報酬觀念

2011-10-21T23:57:00.000+08:00

這個名叫「UX is the science & art」的短片，用生動的漫畫方式講解使用者經驗設計的投資報酬觀念，讓人瞭解使用者經驗設計為何要在越前期參與。

中國網站設計模式

2011-06-28T15:01:00.003+08:00

昨天在網站企劃看到「中國網站設計模式 Chinese web design patterns: how and why they're different」，簡單加上自己的觀點、做個心得筆記，當然經過我的解讀不一定正確。

一般來說，大家對內地網站認知道的特點幾乎都是：

看起來很亂很複雜很難閱讀（must look complicated）
充斥著文字型連結（must have lots od links）
連結都用另開新視窗的方式開啟（links must open new windows）
愛用flash（must use flash）
感覺很忙-塞滿大量資訊（must look busy）

但其實，這些一直被認為是「大陸網站設計的恐怖模式定律」，其實不一定真的是要遵守這麼糟糕的定律...

看起來很亂很複雜很難閱讀：
- 中文字本身就是個美麗又複雜的產物，華人已經習慣中文的特色，並不會覺得難以閱讀。
- 因為中文的複雜，更需注意間距排版以利閱讀。
- 補充：其實各地域的人，版型偏好本身就不一樣，有興趣的可以參考這篇中、美、韓用戶眼動比較。
充斥著文字型連結：
- 過去被認為中文比較複雜難輸入，所以要列很多出來讓使用者點選，但其實內地是使用拼音輸入，如同英打般方便，甚至因為拼音字彙聯想的關係，整體輸入更為快速，也比台灣與香港普遍使用的倉頡、無蝦米、注音等輸入法快很多。
- 有時候因為太多資訊了，而更偏好使用搜尋的方式尋找內容。
- 內地網站很多文字連結，這是事實，但使用者其實並不喜歡。
- 補充：一個區塊使用全文字型連結另有一種「黃頁」感，局部適度使用是好的。
連結都用另開新視窗的方式開啟：
- 因為網路速度很慢、頻寬有限，而使用者會另開新視窗放在旁邊讓它loading，同時繼續瀏覽原先正在閱讀的頁面。然而，這幾年內地的網路速度已經大幅提昇，同時預計2013年會到100Mbps、甚至行動上網也希望在五年內達到一樣的網路速度。
- 過去的確必須這樣做，現況也如此，但是科技環境是會影響與改變使用者行為。
- 補充：除了網路速度的提昇之外，一方面過去幾年IE6先天限制沒有開分頁瀏覽的功能，一律使用新開視窗，而內地IE6的市占率居高不下；但根據這兩年的觀察，IE6的市占率已由超過七成降低到五成多，IE7開始已經具有分頁功能，內地使用IE8的比例在這一年增加不少。
愛用flash（其實應該要加上圖片）：

現在以及過去的習慣方式，flash多用在廣告上來吸引使用者的注意力、希望讓廣告更為生動而引起使用者注意。

但其實很多使用者不喜歡這些廣告干擾(相信閃動的很可怕的廣告你一定有見過)，而去加裝使用了阻擋廣告的軟體/擴充元件，反而讓這些廣告完全沒有曝光的機會。
受限於字型/字體選擇，為了使用不一樣的字型/字體大小而使用flash/圖片去製作。

網頁可以支援的中文字型實在少的可憐，而且還不是所有的字級大小都好看，有的尺寸用了還會破破的，通常簡體使用的是12px、15px，繁體是12px、13px、15px。
補充：台灣過去只有標楷體、(新)細明體，這兩年多了微軟正黑體，而內地主要為宋體、微軟雅黑體。

感覺很忙-塞滿大量資訊（must look busy）
- 過去曾被認為內地網站不喜歡極簡風格。
- 簡報中也提到了一點：「中國人很愛面子，在乎別人對自己評斷的價值。」
  一般公司都盡量豐富網站能提供的訊息，如同請客的時候給客人很豐盛的饗宴。
- 其實不完全是這樣，像是搜尋(搜索)引擎、部落格(微博)，資訊並沒有爆炸的感覺。
- 像是淘寶這類典型感覺很忙、塞滿大量資訊的網站，
  相對於「這網站看起來跟呈現的感覺如何」，使用者更在乎「這個網站可以給我什麼」，有時候是被迫的使用，因為沒有同樣功能的網站、具有更好使用者體驗的選擇。
- 內地的使用者其實很在乎使用者體驗，也是設計師去改善設計的推力之一。

因此我們可以下個結論：其實內地人也不喜歡/不滿意現在的內地網站。

UX(使用者體驗)已經在內地崛起（其實內地飛起的很快），但尚未普遍知道使用者體驗的重要度；另一方面，設計其實薪資不高（台灣還不是一樣，很可憐的被當作美工），也理所當然的希望能夠快速產生，以量大增加收入，通常藉由複製模仿其他現有的網站、或是使用模板，當然就大家越來越像、越來越像，不過，這只是過渡時期。

ppt中也提到了一些中國人跟西方比較明顯不同的地方：

很重視分享與參與，在部落格、影片以及微博等等，提供的意見回饋遠多於西方社會。
很重視圖像式的表達，更偏好使用些icon、動態表情等等的。

文化習慣其實很難一篇文章解說的完或是一言以蔽之，但是也不用太放大這些文化差異、在地化的問題，因為社會文化習慣是會隨著時間而改變，時易勢移，包括使用者習慣也是會改變。

這跟上個月有參加「東吳心理系和實踐工設系合辦的使用者經驗研究與設計研討會」，大家分享的一些論點是不謀而合，改天勤勞的時候，我再把當時筆記的ppt整理share出來，有興趣的人可以看看其他人的心得筆記。

延伸閱讀：[簡報]HP19 Mobile Design: 為行動使用者設計

交互設計師要具備怎樣的能力？

2011-06-27T17:11:00.001+08:00

台灣到現在，對於「交互設計」普遍的瞭解度仍然很低，幾年前轉過一篇：什麼是交互設計(Interaction Design)，即使經過了幾年狀況有好些，有比較多相關文章介紹，也較多公司開始注意到，但其實現況還是很坎苛、挑戰仍舊很大。

而交互設計師要具備怎樣的能力呢？這篇我怎样做交互？用很可愛質覺的漫畫方式呈現，表達了做交互設計必須要的多才，根據她的分法，我加了些說明如下：

具備想像力 - 利用想像力，創造或是聯想配置、讓想像的互動具象化。
善於溝通 - 瞭解引導確認需求、說服&讓他人接受設計理念
軟件牛人 - 我認為稱作「電腦達人」更貼切点，除了
溝通確認以及呈現設計的時候，使用各種軟體工具去呈現表達之外，其實也需要對於各種系統的預設設計有基本的瞭解。

因應不同公司/專案，配合使用的軟體不盡相同，諸如細緻真實度很高的Axure、我個人偏好使用手繪風格的Balsamiq Mockups，簡單點的工具像是excel、word，搭配說明勉強也是能夠呈現作為溝通工具。
邏輯能力強 - 白話點就是頭腦要清楚有條理，另外對於流程需要有一定程度的瞭解。
主動性高 - 前期應用像是主動觀察使用者的狀況、發現與得到回饋，後期像是成效追蹤分析等等，主動出擊很重要。
各科背景 - 要做好交互設計，要具有認知心理學、視覺設計、前端開發的一些經驗，一專多才，除了可以有更全面的評估之外，規格書才能寫的更精準問題少，進一步加速整體效能。

不可全文轉貼、可部份引用，請以本文網址連結方式註明出處。

[賞圖] CSS3做的小叮噹

2010-05-31T11:09:00.001+08:00

友人傳給MiyaC這張圖，很可愛～

用css排的小叮噹

期待IE9對CSS 3 支援度能更高...

讓整個網頁包括圖片變成灰階(黑白哀悼版)grayscaling

2010-05-14T18:40:00.001+08:00

有時候，可能因為某些原因（通常是為了做哀悼版啦），
要讓整個網站短期間內變成黑白灰階版，
其實是有個很"瞬間"的方法！

在IE系列裡，可以從css裡面設定加一段：

elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';

就瞬間變成黑白，包括圖片也一起灰階了！

但是，ie以外的瀏覽器，就不支援這種濾鏡，必須採用程式手段...

可以看下面這個連結，介紹如何讓非IE的瀏覽器，呈現灰階黑白版的網頁

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

SEO搜尋引擎優化小結by 2009影響搜索引擎排名因素的調查報告

2010-01-11T11:02:00.001+08:00

資訊來源：wowbox blog (網頁設計知識庫)

總排名因素：
‧24% 域名的權威性和信譽～類似生活中，店家牌子老、值不值得信賴
‧22% 頁面的外鏈數量和質量
‧20% 外部鏈接的錨文字
‧15% 頁面上關鍵字使用情況
‧7% 流量和點擊率
‧6% 網絡社交關係指標～所以大家都愛弄社群嗎? XD
‧5% 域名註冊和主機數據～慎選網址

5個對搜索引擎排名最重要的排名因素

‧1.73% 非常重要外部鏈接含有關鍵字的錨文字
‧2.71% 非常重要外部鏈接廣度(外部鏈接的數量和質量)
‧3.67% 非常重要外部鏈接源的多樣性(有很多來自不同域名的鏈接)
‧4.66% 非常重要在Title標籤中使用關鍵字
‧5.66% 非常重要基於從可信任域名到網站鏈接距離的可信賴度(比如: trustrank,domain moztrust,等等)

文字左右對齊方式css2的新方法~ text的direction

2009-12-22T17:01:00.002+08:00

資訊來源：W3school

我們呈現文字的時候都是預設的從左到右，
當想要從右至左，平常可以使用 p align="right"
或者 css寫著 text-align:right

CSS2有個屬性，提供了新的方法 direction

用法超簡單，只要寫
direction:rtl
就是右(right)到(to)左(left)

同樣的，左到右就是ltr啦～

還滿特別的～呵

不可全文轉貼、可部份引用，請以本文網址連結方式註明出處。

做簡體網頁遇到文字錯位問題的解決方法

2009-11-04T11:36:00.007+08:00

我們在繁體中文的介面，做簡體網頁，常常會發現網頁顯示的中文字上下不齊、文字錯位的感覺，心中不斷暗罵該死的IE，討厭的簡體...

內地都會使用"宋體"字型呈現簡體中文，但是...我們看得還是會錯位啊！

其實，這有解決方法的！
解決這問題，要從兩個地方下手，沒錯！就是html和css

首先，來解決一般簡體文字會上下亂跑偏掉的問題...

【css的部份】

當然字體部份要設定好Arial跟宋體顯示，MiyaC是習慣寫成：

font-family:Arial, Helvetica, sans-serif,"宋体", "新細明體";

但是但是，我們的介面是繁體，網頁不會乖乖顯示宋體，還是會用新細明體顯示，很機車吧?!

所以，網頁宣告就很重要了！ (之前有寫過meta的部份，可以點我去看看)
用上次那邊的 meta equiv="Content-Language" content="zh-CN" 這招是不夠的，怎樣他都還是不乖乖顯示宋體...
原來，要把網頁本身宣告就先加上語系，所以是要改這行：

html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"

加上紅色粗體的部份，嘖嘖... 文字終於齊了！好感動啊！！！

講完，以上～

> 延伸閱讀： http://3eye.ws/2008/11/19/simplified-and-traditional-chinese-web-page-problem/

不可全文轉貼、可部份引用，請以本文網址連結方式註明出處。

使用簡單js判斷，讓不同螢幕尺寸看到不同css表現的外貌

2009-10-04T14:38:00.001+08:00

這網站很炫喔
他加了簡單的js判斷
不同螢幕尺寸讀不同的css 表現不同的樣式

JS原始碼

function dynamicLayout(){
var browserWidth = getBrowserWidth();

// Narrow CSS rules
if (browserWidth < 640){ changeLayout("narrow"); } // Normal (default) CSS rules if ((browserWidth >= 640) && (browserWidth <= 960)){ changeLayout("default"); } // Wide CSS rules if (browserWidth > 960){
changeLayout("wide");
}
}

詳情請看原始出處～

資訊來源節錄自：網頁設計知識庫

不可全文轉貼、可部份引用，請以本文網址連結方式註明出處。

怎麼去除按鈕虛線和連結虛線? 兩種方法告訴你！

2009-06-03T15:06:00.005+08:00

常常我們會看到網頁上的按鈕、連結，點擊之後會出現虛線，有的人覺得很醜，有的人覺得有比較好，因此會有必須消除虛線的需求存在...

通常，我們會直接在連結or按鈕加上 onFocus="blur()"
例如：

< herf=" 連結連結 " onfocus="blur()"> 連結文字 < / a>

另外還有更高招的，使用CSS來解決！
利用 zoom、 outline 跟邊框透明的屬性來實現。
範例如下：

確定取消

原始檔：
樣式部份

. btns { zoom:1;}
. btns * {outline:0;zoom:1;}
. btns button::-moz-focus-inner{border-color:transparent!important;}

以上～～

不可全文轉貼、可部份引用，請以本文網址連結方式註明出處。

滑鼠手勢出不來怎麼辦?

2009-05-20T15:16:00.003+08:00

有時候我們在網頁切版的時候，
希望整個區塊點了就可以到另一頁，通常會使用a去包，
偏偏有時候，不同瀏覽器看，有的卻不會出現滑鼠手勢...
這樣別人就不知道那個可以點，就失去我們的用意。

其實只要在CSS中，將那個連結滑過時的樣式，指定有滑鼠手勢即可。

例如：

a:hover{cursor:pointer;}

不可全文轉貼、可部份引用，請以本文網址連結方式註明出處。

最近火狐firefox更新後，圖片會出現莫名邊框？

2009-05-05T10:08:00.003+08:00

有沒有發現最近火狐firefox更新後，圖片會出現莫名邊框？
原來是圖片有連結，出現邊框的關係...

頁面這麼多，總不可能一頁頁網頁、一張張圖去設定 border=0

只要在css設定一開始加上

a img{border:0;}

即可

目前使用版本：
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10

9個永不過時的CSS 3欄佈局技巧

2009-02-25T22:35:00.003+08:00

資訊來源：wowbox blog (網頁設計知識庫)

Noupe發表一篇文章，收集了9個號稱永不過時的三欄佈局設計技巧(9 Timeless 3 Column Layout Techniques)

首先，任何一個佈局通常都有headers, navigation bars, content containers, sidebars以及 footers. 我們在設計三欄主題的時候，最重要的目的就是發揮其最大的靈活性和自適應高度，這樣才會看上去更加美觀。下面9個三欄CSS佈局將從多個方面來實現最好的佈局方法，並都兼容IE和FF。

兩個固定欄和一個可變欄

1、3 Columns, The Holy Grail - 一個精緻的3欄佈局技巧示例

程序代碼

#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
}
#centercontent {
margin-left: 199px;
margin-right:199px;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}
#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
}

2、3 Column Fluid CSS Layout - 使用100%高度

程序代碼

#left { float: left; width: 155px; padding: 5px; position: relative; /*** IE needs this ***/ }
#right { float: right; width: 110px; padding: 5px; position: relative; /*** IE needs this ***/ margin-right: -120px; /** This negative margin-right value is the same as the right column width (width + padding). ***/ position: relative; /*** IE needs this ***/ }
#content { float: right; margin-right: -165px; /*** Same length as .outer padding-left but with negative value ***/ width: 100%; position: relative; /*** IE needs this ***/ }

3、3-col Layout Via CSS
不需要表格，不需要定位，不需要Hack，就能實現自適應的相同高度。呃，需要一張小小的GIF圖片。

程序代碼

#left { float:left; width:150px; margin:0; padding:0; background:url("corner.gif") top right no-repeat; font-size:80%; }
#right { float:right; width:150px; margin:0; padding:0; background:url("corner.gif") top right no-repeat; font-size:80%; }
#middle { margin:0 150px; background:yellow; font-size:80%; }

4、3 Columns - Flanking Menus
這是另外一個強大的3欄佈局技巧

三欄都固定

5、Multi-Column Layouts Climb Out of the Box

程序代碼

#container{ background-color:#0ff; float:left; width:500px; border-left:150px solid #0f0; ? /* The width and color of the left rail */ border-right:200px solid #f00; ? /* The width and color of the right rail */ }
#leftRail{ float:left; width:150px; margin-left:-150px; position:relative; }
#center{ float:left; width:500px; margin-right:-500px; }
#rightRail{ float:right; width:200px; margin-right:-200px; position:relative; }

6、LayoutGala』s 3 Fixed Columns

程序代碼

div#container {width:700px;margin:0 auto}
div#wrapper {float:left;width:100%}
div#content {margin-right: 300px}
div#navigation {float:left;width:150px;margin-left:-150px}
div#extra {float:left;width:150px;margin-left:-300px}

7、 3 Col Fixed SEO

程序代碼

#page_margins {width: 980px; min-width: 980px; max-width:none }
#main { float:left; width: 100%; background-color: transparent; background-image: url(../../images/bg_pattern.png); background-repeat:repeat-y; background-position:left; }
#col1 { width: 480px; float:left; margin-left: 240px; }
#col2 { width: 240px; float:left; margin-left: -720px; }
#col3 { margin-left: -5px; margin-right: 0; width: 240px; float:right;}

可變－百分比寬度

8、One True Layout

程序代碼

#block_1 { float: left; width: 34%; margin-left: 33%; }
#block_2 { float: left; width: 33%; margin-left: -67%; }
#block_3 { float: left; width: 33%; }

9、Max Design- Liquid insanity
A very good liquid example, could be used as a Newspaper like layout.

相關CSS佈局資源

CSS Layouts - 950 pixels - 簡化你的CSS佈局設計，輕鬆點擊即可生成

ThreeColumnLayouts - 這同樣是一個快速生成CSS佈局的網站服務，可以生成可變寬度和固定寬度的佈局

Little Boxes - 16個CSS佈局演示

Layout Gala - 40個CSS佈局分享。

教程和一些優秀的練習

The Perfect 3 Column Liquid Layout - 不需要CSS hacks. 友好的SEO . 不需要圖片。不需要JavaScript. 支持各大瀏覽器甚至兼容iPhone.

Position Is Everything - 提供一些有趣的CSS設計技巧和相關理論

Creating a CSS layout from scratch - 一步一步的教你學會CSS，總共12個頁面，簡單，直觀，強烈推薦給那些想學CSS的朋友。

SEO的keyword(關鍵字)新知

2009-01-07T11:05:00.001+08:00

一段時間以來, meta標籤中的keyword，它都被視為SEO重要關鍵之一

90年代中後期, meta 標籤的 keyword 被濫用, 來欺騙搜尋引擎, 吸引流量

98年搜尋引擎開始解決此問題, 直接檢視網頁實際內容, 而非meta 標籤的 keyword來作為搜尋依據

今天, 所有主要的搜尋引擎都有相關措施, 使meta 標籤的 keyword失效

可以省略它, 而不必擔心有損網站排名

如何用欄格來幫助網頁佈局設計?

2008-12-29T17:20:00.004+08:00

資訊來源：Taobao.com UED Team 网页的栅格系统设计 by 青云

柵格系統的形成
1692年，新登基的法國國王路易十四感到法國的印刷水平強差人意，因此命令成立一個管理印刷的皇家特別委員會。他們的首要任務是設計出科學的、合理的，重視功能性的新字體。委員會由數學家尼古拉斯加宗（Nicolas Jaugeon）擔任領導，他們以羅馬體爲基礎，采用方格爲設計依據，每個字體方格分爲64個基本方各單位，每個方各單位再分成36個小格，這樣，一個印刷版面就有 2304個小格組成，在這個嚴謹的幾何網格網絡中設計字體的形狀，版面的編排，試驗傳達功能的效能，這是是世界上最早對字體和版面進行科學實驗的活動，也是柵格系統最早的雛形。
柵格系統英文爲“grid systems”，也有人翻譯爲“網格系統”，其實是一回事。不過從定義上說，柵格更爲准確些，從維基百科查到柵格的定義爲：柵格設計系統（又稱網格設計系統、標准尺寸系統、程序版面設計、瑞士平面設計風格、國際主義平面設計風格），是一種平面設計的方法與風格。運用固定的格子設計版面布局，其風格工整簡潔，在二戰後大受歡迎，已成爲今日出版物設計的主流風格之一。

網頁設計中的柵格系統
我給網頁柵格系統下的定義爲：以規則的網格陣列來指導和規範網頁中的版面布局以及信息分布。
網頁柵格系統是從平面柵格系統中發展而來。對于網頁設計來說，柵格系統的使用，不僅可以讓網頁的信息呈現更加美觀易讀，更具可用性。而且，對于前端開發來說，網頁將更加的靈活與規範。

柵格系統在現在的網頁設計中應用越來越多，從網絡上搜羅了一篇關于柵格系統應用的文章：30個最頂尖的基于柵格系統的博客網站設計。
柵格系統的設計原理及應用
那麽如何設計一個柵格系統？接下來我們將通過實例，詳細的介紹一下網頁柵格系統的原理與應用：

在網頁設計中，我們把寬度爲“W”的頁面分割成n個網格單元“a”，每個單元與單元之間的間隙設爲“i”,此時我們把“a+i”定義“A”。他們之間的關系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) - i = W
這個公式表述了網頁的布局與網頁“背後”的柵格系統之間的某種關系。我們拿yahoo作例，來看一下柵格系統的應用：

yahoo的網站頁面寬度爲W=950px，每個區塊與區塊的間隔爲i=10px；如果應用上面的公式，可以推出A=40px，既yahoo首頁橫向版式設計采用的柵格系統爲：
（40×n）- 10 = W
下面我們列出當n等于不同數值時W變化的數值表格：

從表格可以看出：yahoo首頁的布局完全是按照柵格系統進行設計的，每個區塊的寬度對應的n值分別爲：4，11，9。在這裏我們看到一個很有意思的事情：只要保證一個橫向維度的各個區塊的n值相加等于24，則即可保證頁面的寬度一定是950px。然而，950px的寬度也恰好就是當n=24的時候，W的寬度值。由此我們得出以下的應用模式：

在柵格系統中，設計師根據需要制定不同的版式或者劃分區塊，他們的依據將是上面的那張對應表進行設計。這樣，一個柵格系統的應用就從此開始了。我們看到，使用柵格系統的網頁設計，非常的有條理性；看上去也很舒服。最重要的是，它給整個網站的頁面結構定義了一個標准。對于視覺設計師來說，他們不用再爲設計一個網站每個頁面都要想一個寬度或高度而煩惱了。對于前端開發工程師來說，頁面的布局設計將完全是規範的和可重用的，這將大大節約了開發成本。對于內容編輯或廣告銷售來說，所有的廣告都是規則的，通用的，他們再也不用做出一套N張不同尺寸的廣告圖了……
當然只要你願意，我們可以衍生出任何一種柵格系統，只要改變A和i的值，這個根據網站的實際情況來制定。那麽如何選擇合適柵格系統，主要通過“構成要素與程序、限制與選擇、構成要素的比例、組合、虛空間與組合、四邊聯系與軸的聯系、三的法則、圓與構成、水平構成這些設計元素規劃，來實現比例和諧的平面設計”。比較深奧，我們在這裏就不詳細闡述了。
呵呵，說了一堆柵格系統的優點。大家可能會問：難道柵格系統真的是完美的麽？答案是否定的：對于內容信息不確定導致高度不確定的頁面，在高度層面上就無法做到柵格了。當然，具體的情況還需具體的分析與解決，這就需要設計師們在實際的應用中不斷的總結經驗，不斷實踐了。

table排主圖，在firefox看會破掉怎麼辦?

2008-12-29T09:30:00.004+08:00

我們常常製作網頁、活動企劃頁，把主圖會切圖切好用table排，
在ie看都很正常，卻在ff會破掉，整個很沮喪...

只要把主圖的那個tabel設個class，就可以解決這個問題了～

例如：
主圖那個table設定為 class="mainimg"

在css加

.mainimg td{line-height:0;margin:0;padding:0;}

即可

原因：firefox會自己把行高弄高一點、而且他預設的一個字母比ie又大顆，就會變成有間距了

不可全文轉貼、可部份引用，請以本文網址連結方式註明出處。

photoshop CS3 如何變更轉存網頁的設定?

2008-11-30T11:37:00.000+08:00

前幾天發現，原來ps CS3也可以變更存網頁的設定

1. 點選預設集右邊的箭頭，展開設定選項。
2. 點選編輯輸出設定
3. 通常我們會修改的就是網頁的編碼了，其他下方的註記之類的，就看個人偏好啦～

不可全文轉貼、可部份引用，請以本文網址連結方式註明出處。

網頁header中的META標籤功用

2008-10-24T10:43:00.001+08:00

很多人應該跟MiyaC一樣，對meta標籤一知半解，大概知道要加什麼，平常會用，緊急又想不起來怎麼使用，在這邊就整理出meta常用的功能。
(有些功能的解說是Miya自己的解釋，不一定是正確的喲...)

【01 格式跟語言】

Content-Type==>文件內容格式
CONTENT==>要作的每件事" "，以半形的分號區隔
text/html==>純文字/超文字
charset==>網頁編碼，如用iso-2022-jp是指日文、utf-8是萬國碼、big5是繁體中文，編碼很重要，沒有設定的話，網頁會變成亂碼的。

【02 關鍵字-讓搜尋引擎容易找到】
< meta name = " keywords " content=" 關鍵字,關鍵字,關鍵關鍵字 ">

每個關鍵字用半形的逗點區隔，太多會被搜尋引擎認為是作弊，最好在10~20個中文字左右。

...未完待續...

不可全文轉貼、可部份引用，請以本文網址連結方式註明出處。

廣告體驗你注意到了嗎?

2008-02-02T10:23:00.000+08:00

文章整理轉貼自：www.yangsu.cn

當我們把所有的注意力都放在了網站的體驗設計、流程設計、交互設計、視覺介面設計、文字設計等，這些比較明顯與突出的網站操作功能的時候，很多時候我們卻忽略了網站最影響體驗的一個部分---網站整體的廣告體驗。

在<網站優化--通過提高Web可用性構建用戶滿意的網站>這本書中，作者詳細的列舉了yahoo2004年做出的光站廣告體驗問卷的詳細比例，裏面針對用戶最討厭的廣告形式做了一個問卷調查，其結果如下：

1.最令人憎惡的廣告技術，設計元素回答是“非常負面”或“負面”的：
　 a.在你的窗口前彈出一個新窗口 95%
　 b.頁面加載緩慢 94%
　 c.試圖欺騙你去點擊它 94%
　 d.沒有“關閉”按鈕 93%
　 e.擋住你想看到的東西 93%
　 f.沒有說出它是用于什麽的 92%
　 g.將內容在屏幕上移來移去 92%
　 h.占據了頁面的大部分空間 90%
　 i.閃爍 87%
　 j.在螢幕上漂移 79%
　 k.自動播放聲音 79%

2.劣質的廣告吸引方式：
a.用美女和圖片去欺騙點擊--
早期效果很好，檔次不是很高，降低網站整體檔次
　　b.用跳躍突出，色彩對比鮮豔的文字來誘惑點擊--
效果一般，有可能造成網站內容重要性被降低
　　c.用閃動的圖片來吸引眼球--
破壞網站整體性
　　d.用類似即時通訊消息彈出窗來欺騙點擊--
早期效果很好，永遠的一次性點擊，靠誤點來賺取眼球
　　e.把廣告整合成網站功能模塊的類似部分來欺騙用戶點擊--
大忌！！！降低網站用戶操作路徑，對用戶習慣的培養非常不好，可能導致後期網站功能模塊的使用率降低和內容輸入質量的降低。

不可全文轉貼、可部份引用、須註明本文網址與作者，請以連結方式註明出處。

什麼是交互設計(Interaction Design)?

2008-01-27T10:58:00.001+08:00

文章整理節錄自：http://www.chouyu.com.cn/?p=64

之所以會出現“交互設計”這個詞，很大程度上是alan cooper想區別以往的界面視覺效果設計。簡單不準確的概況一下這個概念：交互設計=界面設計+行爲設計。

什麼是網頁上的行爲？
看到一個鏈接->左鍵點了一下->打開一個新頁面。

當然行爲也有更複雜的:
填寫、提交一份注冊資料；
刪除部落格中的垃圾回應；
打開一個影片，調整音量，全螢幕觀看…

關于這些行爲，我們可以分爲三個步驟，並對每個步驟提出相應的準則：

第一步，操作前--操作可識別，結果可預知。
是說按鈕應該象按鈕，鏈接應該象鏈接。《麥當勞兩則》中的第一則提到了“鏈接應該看上去象鏈接”。第二則提到了操作應該給用戶明確的提示。操作可識別是爲了保證用戶觸發操作的有可能性。如果看不出那是個連結，恐怕就沒人去點了。
“結果可預知”是說，未進行一個操作之前，應該讓用戶大致能猜測到操作後會是什麽樣的結果。或者說，操作的設計應該和用戶的期望相同。那些只寫成“返回”“上一步”“下一步”的鏈接，如果可能，最好還是寫清楚些爲好。比如寫成：“下一步進入購物車”、“返回首頁”…還有些時候，讓結果變的不可預知是因爲觀念上的問題。

第二步，操作時--操作有回饋。
進行了一個操作後，需要頁面上有反應。例如"按鈕"也算的上是一種回饋，點擊一個按鈕時，按鈕會動一下，告知使用者：“您點了一下。”
當然這個回饋還不足夠，還需要執行這個按鈕應該有的功能。

第三步，操作後--操作可撤銷。
執行一個操作後，應當允許撤銷，允許用戶反悔。操作執行前的提示、二次確認並不能完全解決問題。

>>延伸閱讀：
。什麼是交互設計?
。為什麼要進行交互設計?

不可全文轉貼、可部份引用，請以本文網址連結方式註明出處。

網路使用者習慣分析與網站設計建議

2008-01-15T23:41:00.001+08:00

天氣好冷，MiyaC在看網路上寫哪裡賣的湯圓好吃時，無意間看到這篇文章的標題很吸引我，就點進去看... [論文翻譯]-網上使用者行為分析

結論大致如下：
會瀏覽很多種類(屬性型態)網站的人，相對的也會瀏覽同一個種類很多的網站，看的同一個網站的頁面數量會比較多，每個網頁停留的時間比較短（瀏覽網頁的速度比較快?）。
很愛用搜尋引擎的人，則不會去逛很多種類的網站，即使在同一種類下，也不會太逛很多網站，同樣的，在同一個網站下，也不會逛很多的頁面。

例如
第一種是：
MiyaC常會去看購物、流行、美妝保養、健康、網頁設計、電腦、攝影、流行音樂...等好多類型的網站，然後會瀏覽很多很多個網頁設計相關網站，大部分的網頁瀏覽速度很快，不喜歡看一個網站沒什麼在維護更新。

第二種是：
MiyaC喜歡使用搜尋引擎，找什麼都用google、yahoo、wiki，看完想要找的資訊後，八成就會離開那個網站，比較不會想把那個網站大幅瀏覽。

翻譯的文章中提到一段話，讓MiyaC也感到很有趣的：

多網站都希望能夠在許多知名搜尋引擎下把自己排得很前面，希望能藉此衝高流量，但是大部分從搜尋引擎來的人，卻不會去花時間逛網站的其他頁面，因此高排名是否能給網站一些助益，似乎還有可以商榷的地方

最近半年來，不論是電視、網路廣告，狂打關鍵字廣告的實在看到有點煩，好像不打關鍵字廣告都不行一樣。

沒錯，中小型公司的網站(網頁)適合使用關鍵字行銷，讓自己在最短的時間作最有經濟效益的曝光，同時提昇品牌形象知名度。
但是對於大型公司網站而言，使用者搜尋到某個產品頁面，看完搜尋的資料後，如何在被搜尋到的頁面，增加其他有可能會吸引使用者進一步瀏覽本網站其他資訊，這是更重要的事情。

目前其實也不難看到很多大型網站有這樣的設計，例如Yahoo!奇摩的新聞，一些購物網站的便宜一起加購買，或是各大論壇旁邊有個欄位顯示最被關注的文章、推薦文章等等的；今年改版網站的版面設計上，勢必是要多增加這種功能欄位，如同在超市、便利商店的結帳櫃台旁，永遠會擺放著一些想要引起消費者順便一起買的商品。

如何不突兀的提供其他選擇產品(文章)又吸引使用者，MiyaC想這是最困難的地方。

不可全文轉貼、可部份引用、須註明本文網址與作者，請以連結方式註明出處。

英文字型下載網站推薦：showfont.net

2008-01-07T00:36:00.000+08:00

http://www.showfont.net/ 是一個免費的英文字型下載網站，根據字型名稱的字母分類，可以在網站上看到字型的預覽圖片，喜歡再下載。

不可全文轉貼、可部份引用、須註明本文網址與作者，請以連結方式註明出處。

推薦：ConeceptArt --蒐集手繪感歐美風的網站

2008-01-06T20:02:00.000+08:00

推薦一個蒐集許多好站的酷站：ConeceptArt

給MiyaC的感覺很歐美、很漫畫，有點點血腥恐怖的感覺...不知道啦！自己這麼覺得而已...

不可全文轉貼、可部份引用、須註明本文網址與作者，請以連結方式註明出處。

以CSS為設計基礎的2007年最佳網站 Best of CSS Design 2007

2008-01-03T01:18:00.001+08:00

以CSS為設計基礎的2007年最佳網站，MiyaC比較喜歡2006年的風格

Capture the Valley

Beautifully designed single page site.

Squawk Design

Impressive design by a graphic arts student, Dominik Lenk.

Holiday To Go

Love the red color applied on the tinted background.

Team Green

The torn paper and grunge effects are nicely put together. If you like my previous artistic design collection, you will like this site.

Radiant Plumbing

How can a plumbing website be so artistic (check out the header artwork)? If the contrast on the text area is higher, it would be a perfect design.

Alex Buga

Love the semi-transparent effects applied on the wood texture.

Burnett Dairy

Very cooperative, yet friendly.

Variable

Another artsy site.

Pixelmator

A Mac application site with nice icons and layout structure.

Jon Tan

Good use of web typography and grid layout.

Scrapblog

A beautiful web-app frontpage.

Marius Roosendaal

Single page portfolio site of Marius Roosendaal. Don’t forget to check out both "Day" and "Night" theme.

Trale

I particularly like the details spent on the typography of Trale.

Sarah Hyland

Very well-done on the header design.

Eye Candy

Mmm yummy… both the design and chocolate bars. Another good design site powered by WordPress.

RealaSponse

Nice 2-column homepage.

Flame Digital

Very unique layout structure and nice background images throughout the site.

Tickerville

I like the design a lot, but I’m not sure if this design/style work for a financial related site.

Webstock

New Zealand’s web conference website.

Cabedge

Simple, clean, and comfortable layout.

I Love Typography

A blog by John dedicated to typography.

Shylands

Simple, large bold font, great color contrast…

Superawesome

Very unique illustration style and color theme.

Happy Cog

A classic beautiful site.

Free People

One of my favorite ecommerce sites. The amount of details spent on this site is incredible.

Wish Tree

The wish/tag cloud in the background is simply creative!

Biola Undergrad

Another artsy design.

Viget Labs

Nice use of Javascript and CSS (I mean the scrolling effects).

Svenigson

Very clean and boxy layout.

Stuff and Nonsense

Site of Andy Clarke.

J R Velasco

Designed by Miguel Ripoll (one of my favorite designers). He has great sense of web typography. The layout looks very chaotic, yet the content is organized.

Explore Cascadia

One word, beautiful.

Yellow Stone Park

A very nice design within the box.

Elliot Jay Stocks

A design blog by Elliot Jay Stocks. He is a very talented designer with great personality (based on my personal conversations with him).

Freelance Switch

Good design and great content (freelance related).

Knoxville

Retro style in collage form.

Electric Pulp

I’m loving the watercolor effects.

Vivabit

I’m not a big fan of liquid design, but this is a good one.

Surfgarden

Nice and clean 2-column blog design.

Tanya Merone

Another great example of single-page site.

Matt Brett

A nice design blog by Matt Brett, he is a designer gamer.

Larissa Meek

A beautiful blog design by Larissa Meek, formerly a model, now she is an art director at AgencyNet.

Noodle Box

Nice use of color contrast.

Kineda

A blog by Terry and Tami Ng (celebrity and entertainment news).

Pod3.tv

Another nice design blog.

Kev Adamson

Another sketchy design.

Eleven3

Another retro/collage approach.

Turbo Milk

Nice icon.

Veerle’s Blog

Another classic beautiful blog.

31three

Blog and design portfolio of Jesse Bennett-Chamberlain.

MiyaC

社群網站 個人首頁的眼動研究情況

生動漫畫方式講使用者經驗設計的投資報酬觀念

中國網站設計模式

交互設計師要具備怎樣的能力？

[賞圖] CSS3做的小叮噹

讓整個網頁包括圖片變成灰階(黑白哀悼版)grayscaling

SEO搜尋引擎優化小結by 2009影響搜索引擎排名因素的調查報告

文字左右對齊方式css2的新方法~ text的direction

做簡體網頁遇到文字錯位問題的解決方法

使用簡單js判斷，讓不同螢幕尺寸看到不同css表現的外貌

怎麼去除按鈕虛線和連結虛線? 兩種方法告訴你！

滑鼠手勢出不來怎麼辦?

最近火狐firefox更新後，圖片會出現莫名邊框？

9個永不過時的CSS 3欄佈局技巧

SEO的keyword(關鍵字)新知

如何用欄格來幫助網頁佈局設計?

table排主圖，在firefox看會破掉怎麼辦?

photoshop CS3 如何變更轉存網頁的設定?

網頁header中的META標籤功用

廣告體驗你注意到了嗎?

什麼是交互設計(Interaction Design)?

網路使用者習慣分析與網站設計建議

英文字型下載網站推薦：showfont.net

推薦：ConeceptArt --蒐集手繪感歐美風的網站

以CSS為設計基礎的2007年最佳網站 Best of CSS Design 2007

社群網站個人首頁的眼動研究情況