中小企業常犯的5個網頁設計錯誤

Posted in 其它 on 二月 3rd, 2012 by admin – Be the first to comment

客戶透過你的網頁來初步認識你的公司,不論是內容、圖片或是版面的畫面,都會影響客戶對於你的公司形象。所以企業的網頁十分的重要,只有製作出滿足客戶需求的網頁,企業才有可能取得客戶的初步信任,並且引發與您聯絡的契機。

只是,對於網路設計公司來說,設計網頁是天職;但是對於小企業來說,製作網頁可能是第一次經驗,因此我們可以簡單歸類出常見的中小企業網頁設計五大錯誤。

1. 差勁的瀏覽介面

這是一個網頁設計的細節項目,雖然初期製作時難以注意,但是不理想的瀏覽介面往往會讓使用者感到十分的挫折,並且產生對於企業的不良印象。

好的瀏覽介面,基本上必須能夠讓使用者願意長時間停留於網頁中找尋有用的資訊,這意味著網站必須具有易於閱讀的特性、充實的內容,以及導引客戶與公司聯繫的設計等,而這正是企業建立網站的主要目的。

好的瀏覽介面往往代表著易於使用度高,以及使用介面友善等眾多優點,這部份不妨可以參考許多成功的部落格以及企業網站,他們是如何安排瀏覽的介面,千萬不要設計出一個網站要令使用者思考該如何走到下一步,因為他們會考慮離開網站並找尋其他服務。

以下有幾個建議:
● 靈活的使用小圖示或圖案幫助導引,這可以參考馬路科技收集的免費圖片資源
● 善用階層式的設計,最重要的功能永遠放在畫面的最頂端,其次是內容置中,而最不重要的訊息如法律與使用者規範等放在最底部。
● 讓使用者知道自己身在何處,這一點可以用網站地圖呈現外,現在也有一種功能名為階層式選單的技術,這種普遍應用於網路論壇的層級技術,可以讓使用者很快的知道自己在哪。

2. 客戶積極聯絡的機制

很多中小企業製作好了網站,但是卻發現並沒有人透過網路與企業聯絡商務,我們看了一下原因之後,發現大部分的中小企業對於客戶聯絡機制製作得並不好,也沒有令客戶願意積極聯繫的動機設計,如此就會失去了客戶。

幾個簡單的設計,就能夠讓客戶很簡單的就與您聯繫。舉例來說:做一個「立即與我們聯絡」的按鈕是最基礎的,但也是十分搶眼的設計。如果再加強一點呢?例如「現在與我們聯絡,即享有優惠服務」,是不是看起來更為誘人呢?

以下有幾個建議:
● 利用不同的元素勾起客戶與你聯絡的動機,例如不同的文字顏色、圖案、文案等,都能夠讓客戶更有機會主動與你聯絡。
● 不要讓客戶猶豫點下去會發生什麼事情,因此設計聯絡的連結,文字務必清楚明白、圖片也需簡易好懂,過度抽象會引起客戶的焦慮。
● 不要使用過度,許多企業為了與客人聯繫,每個頁面都貼上了「與我聯絡」的圖案,這樣一來可能會讓客戶不認識你之前,就引發了反感。

3. 顏色與對比

大部分的企業不會把顏色與對比放在設計的重點,往往覺得只要看得順眼即可,不過我們的建議是應該要認真的看待對比這件事情。網路使用者閱讀文章的方式很多不同的因素與背景,其中有可能您的客戶年歲較大,對比度太低的文字對於他們來說閱讀十分的困難。

因此顏色與對比對於網頁設計來說,成為十分重要的設計元素,因為透過了這兩個設計,可以傳達您想給客戶的訊息,如:文字中的重點、產品的訊息、服務的優勢等等,都可以透過不同的對比呈現出來效果。

此外有幾個建議可以給您做個參考:
● 使用網路上提供的對比工具來協助您設計網頁
● 除了對比的工具以外,還有對比的情境設計網站,可以透過整體的畫面版型給您很好的建議
● 最簡單的顏色與對比的呈現方式,就是「讓重點看起來更不一樣」,例如不同的顏色、更大的尺寸、特殊的字體等等。

4. 貧乏的內容呈現

或許內容並非網頁設計所能控制的,但是內容與網頁設計卻是習習相關。因為大部分的中小企業不太熟悉如何將內容呈現在網路上,因此呈現的內容不是過多,就是過少,使得設計人員在版型的規劃上出現困難,進而使得讀者不易閱讀。

許多網路使用者看網站並非逐一看字,而是用快速掃描的方式瞄過一遍,然後再決定是否繼續閱讀,這表示第一眼的舒適度十分的重要。內容的層次設計就成為讓使用者觀看時,舒適與否的關鍵設計。

內容版型設計的部份可以注意以下的重點:
● 網頁留白的部份並非不重要,而可能是更重要的,原因在於人們不會花時間看空白的部份,進而會將焦點移到有文字與圖片的部份。
● 分段可以讓內容更容易閱讀,請利用重點標題、大標題、圖形文字等方式強調重點
● 排版可以使文字更容易閱讀,諸如字體的大小、行距、間距等設定都需要花費心思加以調整

5. 整體雜亂

最後提到雜論版的問題,大部分的中小企業並沒有十分完整的企業形象,也就是說素材十分的凌亂,不論是文字、文件檔案、照片、圖片都沒有一致的整體感,這樣的問題有時也會出現在網頁設計上。

此 外有些中小企業會安排使用多媒體的方式,如Flash動畫呈現企業的形象,不過好的Flash可以提昇企業的質感,但是不好的Flash動畫安排也可能會 毀了一個網站,這也是造成網站雜亂無章的問題。雜亂無章的網站會使觀看者快速的離開,過高的離開率會使得搜尋引擎認定網站品質不佳,會導致網站的排名日益 下滑。

如何克服雜亂的現象:
● 放上內容時,請務必先想想:這個東西有必要放在網站上嗎?如果放了該如何佈置會比較順眼?
● 將重點放在如何幫助客戶找到資料,而非一次把資料塞給客戶,因此可以想著將內容、廣告、促銷訊息區域加以區隔化。
● 將你的資料整理並且理出優先的順序,將最優先、第二優先的放至於明顯的版面,其餘的則斟酌安排之。

原文:

http://mashable.com/2011/04/10/5-web-design-mistakes/

主流網站正加速HTML5支援

Posted in 其它 on 二月 3rd, 2012 by admin – Be the first to comment

去年我們曾經提到了網路設計的趨勢中,Flash仍有很大的多媒體優勢,不過HTML 5的潮流,可能讓Flash原本擁有的市占率優勢帶來極大的衝擊。

首先是Flash的革新速度過慢,使得今年即將起飛的平板電腦、次世代智慧手機等裝置無法充分的發揮Flash的優點,甚至會帶來效能的延遲或是系統錯誤。原本Adobe承諾的手機版Flash軟體目前並沒有帶來太大的作用。即使在即將問世最新的Android 3.0智慧手機系統上,Flash的支援也遲遲尚未公佈讓用戶下載使用。

另外網站也察覺到這樣的趨勢,自然他們不可能將Flash的用戶排除在外。例如目前全球最大的影音網站Youtube早就提供了HTML 5影片的格式,如此不論是iphone或是ipad都能夠無阻的播放影片。這個趨勢連中國的影音網站都已經注意到了,例如土豆網也提供了HTML 5的影片服務,讓2011年的影音市場破除了Flash的限制。

原本2010年是Adobe Flash進軍手機產業的絕佳機會點,然而與Apple的爭議加上自身的變化不夠快,讓HTML 5有了機會。HTML 5未來除了是取代Flash成為多媒體網頁設計的主流標準外,從影音網站已經加速支援HTML 5的態勢分析,Flash要在行動上網市場取勝的機率可說是越來越小了。

3D視覺感的網頁設計

Posted in 其它 on 十一月 22nd, 2011 by admin – Be the first to comment

一般的網頁設計都是2D的元素,不過視覺設計師只要透過一些特殊的視覺技巧,就可以打造出多重層次、具有立體感覺的3D感網站。

從下面的範例可以看得出來,大部分的公司網站,只要充分的利用色彩學的原理,外加上一些簡易的點綴例如:陰影、漸層、色差…等方式,就能夠打造出十分多層次的網站出來。此外,利用了一些幾何向量圖形的方向、寬度、色澤,也能夠夠營造出3D視覺的幻覺。

立體的層次可以是單一物件的,也可以是整體的,表現的方式可以視企業的需求,與網頁設計師討論想要營造的風格,就有機會打造出十分具有質感的3D元素網站。然而如果使用不當,反而易使訪客的視覺感到不舒服,離開網站而減少了與客戶接觸的機會。

以下是一些網站設計師,所設計出來的3D元素視覺網站:

Design Shard
創意設計

http://www.designshard.com/

Gioseppo
服飾鞋業

http://www.gioseppo.com/

Meomi
娛樂創作

http://www.meomi.com/

WorkAwesome
商業創意

http://workawesome.com/

East Valley Bible Church
宗教團體

http://evbc.org/

Monterrey Fashion
流行時尚產業

http://www.monterreyfashion.com/

轉載請註明出處或鏈接

百種網頁設計小圖免費下載

Posted in 網頁設計概念 on 九月 8th, 2011 by admin – Be the first to comment

想要讓自己的網站看起來更時尚?或是讓商業簡報更具有個性?您一定很需要各式各樣的圖片。圖片雖然都是簡單的構圖,但是任何熟悉3C或是網路產業的人,對於以下的圖示一定都不陌生。

這裡我們找尋了百種世界上頂尖的商業設計公司,所提供的免費圖片可以供您使用,不論是網路巨擎Google、時下最流行的Facebook或是各類商務相關的圖示,都可以找到,相信對於您的設計工作會更有幫助。
Kaching – Exclusive Free eCommerce Icons | Webdesigner Depot

60 Exclusive Free Icons: “Childish” | Webdesigner Depot

“Buddycons” – Vector Social Media Icons | Webdesigner Depot

馬路科技會不定時收集各類網頁設計的元素與情報與各位分享,歡迎隨時回來注意我們最新的訊息。

網頁設計師下的404錯誤

Posted in 其它 on 七月 28th, 2011 by admin – Be the first to comment

自從1990年Internet推出了WWW到今天以來,網頁的錯誤總是十分的難免。其中又以404(找不到網頁)這樣的訊息最為常見。不過大部分的網頁只會出現制式的錯誤訊息,稍後我們會分享一些,世界頂級企業所設計的網頁中,所看到的不同錯誤訊息畫面。

雖然出現了網頁錯誤,是一個網站服務不穩定、或是設計不當的一個警訊,不僅對於瀏覽者會覺得不悅,搜尋引擎也會認為網站欠缺維護而會降低網站的分數,間接 會使搜尋的排名降低,但有時只要設計者的一些巧思,至少可以讓瀏覽者看到了錯誤畫面時,覺得企業是有歉意的,如此一來也可以使雙方的關係較為緩和。

以下是我節自一些國際知名的網站所設計的404錯誤畫面,有些大秀美女圖、有些則是採用視覺印象派的照片、更有企業的招牌掉了一半,且大方承認自己設計出 包了,請大家多多包涵…等訊息,不論哪一個看了之後都會讓人覺得火氣消了一半,真是相當的幽默,因此推薦大家可以參考看看,用在自己的網站設計上。

不用Flash的幻燈片軟體Visual Lightbox

Posted in 網站設計知識 on 六月 16th, 2011 by admin – Be the first to comment

大部分的設計師,想要設計一個相片幻燈片的網頁,可能第一個想到的工具就是Flash,不過對於不熟悉Flash的一般人來說,製作相片幻燈片就是較為高深的工作,然而如今有一套不錯的軟體,能夠幫您做到客製化的相片幻燈片效果:Visual Lightbox。

Visual Lightbox這一套軟體的最大優點,就是使用JQuery的技術,製作出相片幻燈片,操作的介面十分的簡易,只要透過幾個簡單的動作,就能夠完成相片 的播放數量、控制排列、整理版面、播放順序…等都不是問題,比起許多網路相簿內建的幻燈片功能都更為豐富。

使用Visual Lightbox還有一個優點,那就是相容於更多平台,例如不支援Flash的iphone手機與ipad平板電腦。這一點對於日益普及的行動裝置來說,顯得十分的重要。此外也有加入相片文字註解的功能,也就是說這樣的相簿對於網路搜尋優化會更有幫助。

幻燈片可以具有多種效果:旋轉、放大、自動播放等功能一應俱全,設計好後也可以預覽成果。此外如果您不熟悉HTML語法,軟體也可以幫你自動的安插在網頁的檔案中,接著只要上傳到自己的FTP之後,就能夠看網頁多了幻燈片的效果,十分的便利

http://visuallightbox.com/

Pantone 2011年的代表色

Posted in 其它 on 四月 7th, 2011 by admin – Be the first to comment

只要對於色彩十分講究的視覺設計師,一定都會有一本Pantone公司所推出的色彩參考書籍。也由於 Pantone對於顏色的詮釋十分的精準,因此許多產業指定使用Pantone所推薦的色彩,舉例來說,在日本就有Pantone色彩手機,而美國則有 Pantone的服飾,可見應用於日常生活之廣泛。

每年,Pantone也會推出年度的代表顏色,例如2010年的色彩是15-5519(海洋藍),視覺上的呈現就是碧海藍天的舒暢宜人感受。2009年的顏色則是14-0848(Mimosa,黃色的含羞草)。

2011年Pantone的代表色號為18-2120(金銀花),所代表的意義為:慶賀、自信、活力、勇於挑戰新世界。單純的精神,讓您迎接每一日的挑戰!

雖然我們不知道Pantone每年如何挑選顏色成為年度色彩,也不像時代雜誌挑選每年風雲人物那麼重大,相信大家過了新年之後就會忘記了Pantone,但對於設計師來說,多認識一個嶄新的特殊顏色,就能多為客戶提供設計上的選擇呢!

網頁設計概念-安德森生活館

Posted in 網站設計知識, 網頁設計概念, 設計大觀園 on 四月 1st, 2011 by admin – Be the first to comment

安德森生活館本身是排汗休閒服飾,所以他的網頁設計概念是以舒適、樂活為設計理念並以大地色系為色彩基調,佐以飽和度較高的暖色系為輔,為視覺感受創造出舒適與溫度.

20個特殊的CSS技術和實例介紹

Posted in 網站設計知識, 網頁設計客戶迴響, 網頁設計概念, 設計大觀園 on 三月 3rd, 2011 by admin – Be the first to comment

在廣大的網海中,有著成千上萬許許多多的網站,優秀的網頁設計也是 多倒數不清。此篇以CSS樣式表為主,找尋其中 20個優秀的CSS技術和實例來介紹 ,這些網站優秀展示了CSS的能力和穩健性。 您會看到各種不同的 技術,如照片畫廊,陰影,可伸縮的按鈕,選單和更多種CSS技術,所有的實例只用CSS和HTML。開始往下欣賞CSS的魅力吧!

01. Hoverbox Image Gallery

一個純CSS的圖片畫廊 ; 移動至圖像處會放大。

02. Advanced CSS Menu

有創造性的和複雜的導覽列。

03. Sliding Photograph Galleries

一個像手風琴展開的效果 ; 移動至圖像處可擴展。

04. Drop shadow on an image

下落式陰影的圖像效果。

05.  Cross Browser Multi-Page Photograph Gallery

移動至標籤導覽列更換圖像列,移動至圖像處會放大。

06.  Sticky Footer

此技術靜態頁腳用很少的XHTML要求。

07.  whatever: hover

一個階層式的導覽選單。

08.  CSS-Only Accordion Effect

一個手風琴展開的效果。

09.  Scalable CSS Buttons Using PNG and Background Colors

一種變換圖片及背景顏色的按鈕效果。

10.  Pushbutton Links

無需使用圖像,讓連結的樣式看起來像按鈕。

11.  PNG Overlay

圓角,並添加邊框及陰影。

12.  Simple Rounded Corner CSS Boxes

另一種圓角效果。

13. Curved corners 2

另一種圓角效果角。

14.  Creating a graph using percentage background images

使用列表項 <li> 風格變成條形圖。

15.  CSS Bar Graphs: Examples

可用來計算使用的長條圖技術。

16.  Animated Rollover Arrow

使用箭頭往下及沿著整個的導覽列選單,沒有使用JavaScript或gif動畫的。

17.  A CSS-based Form Template

表單空格的變化。

18.  CSS Image Text Wrap

用空的間隔分區,讓該網頁的文字環繞效果並模仿周圍的背景圖像。

19.  Before your very eyes – a fade-in image

使圖片漸入在文字之上。

20.  CSS Gradient Text Effect

CSS漸變文字效果。

視覺錯視概念分享

Posted in 其它, 網頁設計概念 on 二月 22nd, 2011 by admin – Be the first to comment

設計學當中有提到 一種視覺錯視的藝術,今天要和大家分享的就是關於視覺錯視的一些基本的概念 與欣賞

視覺錯視藝術 錯視藝術約於80年代面世,但當中所運用的技巧卻源自中世紀時期,即使Leonardo da Vinci(達芬奇)亦是使用這種繪畫技巧。」
錯視藝術(Optical Illusion Art) 大概是以平面圖的明暗、色彩變化、色彩對比及或透視效果令觀眾產生一種視覺上錯覺的效果,包括點線面體上的錯覺

口語化一點來說,就是一種視覺被騙的知覺反應!

一般來說 這類的設計藝術較為廣泛的應用於平面藝術 與現代街頭藝術 較少應用於網頁設計當中,因為我想客戶應該不願意自己的產品或形象 是這樣用猜的型態來設計 ,從事網頁設計的十幾年經驗中至今也從未遇過有客戶願意有這樣大膽的嘗試。

那麼現在就和大家一起分享一些經典的錯視作品 ,來測驗一下自己的眼睛吧~GO。

1.不可能存在的盒子
埃斯切爾的不可能的盒子:比利時藝術家馬瑟·黑梅克,從荷蘭平面造型藝術家M.C.的一幅畫中吸取靈感,創造了一個不可能存在的盒子的實物模型。

2.你相信你的眼睛嗎?
米勒·萊爾幻覺:哪條紅線更長?
【解析】信不信由你,兩條紅線完全等長。透視的運用大大地增強了傳統的米
勒·萊爾幻覺版本的效果。相形之下,傳統的米勒· 萊爾版本遜色不少

3.你看到什麼?
節約時間的暗示:
奇妙的圖形/背景幻覺圖形,由斯坦福心理學家羅杰·謝潑德創作。

4.一閃一閃亮晶晶
爍的網格:當你的眼睛環顧圖像時,連接處的圓片將會一閃一閃。
【解析】德國視覺科學家邁克爾·施若夫和E.R.威斯特於1997年發現勒索閃爍的網格幻覺。這種幻覺產生的原因目前還不十分清楚

5.沒有辦法到中心點的軌跡
“ 弗雷澤螺旋”是最有影響的幻覺圖形之一。你所看到的好像是個螺旋,但其實它是一系列完好的同心圓!這幅圖形如此巧妙,以至於會促使你的手指沿著錯誤的方向追尋它的軌跡。
【解析】每一個小圓的“纏繞感”通過大圓傳遞出去產生了螺旋效應。遮住插圖的一半,幻覺將不再起作用。

6.哪邊比較白
共時對照幻覺:交叉部分的白點是不是顯得比白色方格更白更亮?
【解析】白色方格看起來更白一點,盡管二者並沒有區別。小白格看起來好像位於黑色背景上,這強化了每一個小方
格和它背景之間的亮度對比。

7.眼花了嗎
“飄浮的黑白點” – 你能看清楚圓圈內的黑白點嗎?

8.集中你的注意力
“消失的色彩”- 請用雙眼注視正中央的黑點三十秒。

9.誰比較大
同化與對比錯視(illusions of assimilation & contrast)
同化與對比錯視 , 主要是比較兩組同心園其內外圓大小的錯視效果。

10.什麼是圖地反轉, 多義圖形 ?什麼是圖地反轉, 多義圖形 ?
圖與地(Figure-Ground)
所謂圖,是在畫面上看到向前突出的主要形象,所謂地,則為退後的背景。 從生活上來比喻,事情都有賓主之分,「主」就是主題,是被注目的焦點, 而「賓」是背景,是陪襯的。
首先關心這種「圖形」與「背景」分化的是丹麥心理學家魯賓(E.Rubin.1886~1951) ,他把這種當作視覺對象來看的物體,稱為「圖」(Figure),而把包圍「圖」的空間 稱為「地」(Ground)。
圖與地本為心理學上的問題,目前並未完全了解人類如何在平面圖形上來區別圖與地, 不過在圖與地之間仍有一些特徵當作我們判斷的依據。
「圖與地」關係的曖昧而造成的反轉,即稱為「圖地反轉」。由於圖地反轉會造成多重圖像意義,因此有二個意義以上的圖形稱為多義圖形(ambiguous figure) 許多藝術家利用這種視覺效果,製造令人驚奇的效果。

在圖與地的錯視問題中, 以魯賓(Rubin)之杯最有名氣。

欣賞經典名作