2008/12/29

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





柵格系統的形成
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看會破掉怎麼辦?

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

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


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

在css加

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

即可


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


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

2008/11/30

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

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

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



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

2008/10/24

網頁header中的META標籤功用

很多人對meta標籤一知半解,大概知道要加什麼,平常會用,緊急又想不起來怎麼使用,在這邊就整理出meta常用的功能。


【01 格式跟語言】

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


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

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



常用語法:

藍色部分是告訴搜尋引擎,網頁是繁體語言在台灣的,當有地域搜尋時更能提前。






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

2008/02/02

廣告體驗你注意到了嗎?

文章整理轉貼自: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.把廣告整合成網站功能模塊的類似部分來欺騙用戶點擊--
大忌!!!降低網站用戶操作路徑,對用戶習慣的培養非常不好,可能導致後期網站功能模塊的使用率降低和內容輸入質量的降低。


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

2008/01/27

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

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

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

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

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

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

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


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


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


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

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

2008/01/15

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

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

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

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

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

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

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

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

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

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

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


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

2008/01/07

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


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

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

2008/01/06

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

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


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

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

2008/01/03

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

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



Capture the Valley


Beautifully designed single page site.

screenshot

Squawk Design


Impressive design by a graphic arts student, Dominik Lenk.

screenshot

Holiday To Go


Love the red color applied on the tinted background.

screenshot

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.

screenshot

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.

screenshot

Alex Buga


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

screenshot

Burnett Dairy


Very cooperative, yet friendly.

screenshot

Variable


Another artsy site.

screenshot

Pixelmator


A Mac application site with nice icons and layout structure.

screenshot

Jon Tan


Good use of web typography and grid layout.

screenshot

Scrapblog


A beautiful web-app frontpage.

screenshot

Marius Roosendaal


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

screenshot

Trale


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

screenshot

Sarah Hyland


Very well-done on the header design.

screenshot

Eye Candy


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

screenshot

RealaSponse


Nice 2-column homepage.

screenshot

Flame Digital


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

screenshot

Tickerville


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

screenshot

Webstock


New Zealand’s web conference website.

screenshot

Cabedge


Simple, clean, and comfortable layout.

screenshot

I Love Typography


A blog by John dedicated to typography.

screenshot

Shylands


Simple, large bold font, great color contrast…

screenshot

Superawesome


Very unique illustration style and color theme.

screenshot

Happy Cog


A classic beautiful site.

screenshot

Free People


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

screenshot

Wish Tree


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

screenshot

Biola Undergrad


Another artsy design.

screenshot

Viget Labs


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

screenshot

Svenigson


Very clean and boxy layout.

screenshot

Stuff and Nonsense


Site of Andy Clarke.

screenshot

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.

screenshot

Explore Cascadia


One word, beautiful.

screenshot

Yellow Stone Park


A very nice design within the box.

screenshot

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).

screenshot

Freelance Switch


Good design and great content (freelance related).

screenshot

Knoxville


Retro style in collage form.

screenshot

Electric Pulp


I’m loving the watercolor effects.

screenshot

Vivabit


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

screenshot

Surfgarden


Nice and clean 2-column blog design.

screenshot

Tanya Merone


Another great example of single-page site.

screenshot

Matt Brett


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

screenshot

Larissa Meek


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

screenshot

Noodle Box


Nice use of color contrast.

screenshot

Kineda


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

screenshot

Pod3.tv


Another nice design blog.

screenshot

Kev Adamson


Another sketchy design.

screenshot

Eleven3


Another retro/collage approach.

screenshot

Turbo Milk


Nice icon.

screenshot

Veerle’s Blog


Another classic beautiful blog.

screenshot

31three


Blog and design portfolio of Jesse Bennett-Chamberlain.

screenshot