網頁設計經驗之:5個優秀的網頁設計理念

• 1、用更具吸引力的方式呈現內容

    有很多網站都想表現的與眾不同。作為設計師，你可以用一些新鮮的概念和布局來吸引用戶訪問。但是，你卻不一定能保證用戶會真正的花時間去了解網站內容。當遇到這一問題時，可以考慮在設計方案中加入互動元素，比如以一種動態的方式，將信息呈現給用戶，以此來贏得用戶更多的關注，而不是僅僅顯示一個枯燥的文本內容。這樣，用戶在欣賞網站美觀的設計時，還將會有心情消化這些呈現給他們的網站信息。

•  2、改善所有普通元素的設計   任何一個具有創意的網站設計方案，都會把目光聚焦在布局和色彩搭配上。而這也意味著，網頁上有很多元素，都沒有得到它們應得的關注。例如，站點地圖通常以一種丑陋的格式掛在頁面上。你可能不理解，為什么要關心這些元素的設計呢?原因很簡單：你的任何一份設計，都應該以不落窠臼的方式展現出來。因此，好好思考一下如何為站點地圖的設計添加動態元素吧，

• 
  

•  3、鼓勵用戶的操作

      任何一個網站都有一個終極目標，那就是鼓勵用戶去點擊、去操作。這些操作行為包括注冊或者查詢內容等。現在假設作為設計師的你，要去預測用戶的下一步操作，你該怎么辦?方法有很多，但最重要的是思考如何吸引用戶的目光。同時，這也需要動態的設計。

  
  

  

•  4、激勵用戶進一步操作

      對于特定類型的網站，應該有一份特定的設計方案。例如，當你訪問一個購物網站時，能看到一堆的產品等著被商家銷售。對于這類網站，把用戶導向任何特定選項的設計都是愚蠢的。因為用戶可能沒有耐心，而又不得不忍著痛苦去對比類似的產品。因此，正確的做法是，給用戶提供一個尋找貨物的簡易方法，這樣，他們會真正參與到購物中來。同時，也增加了用戶操作的幾率。

  

•   5、在網站設計中添加交互性元素

      在網站設計中加入動態交互元素，可以為網站贏得不少贊譽。但是，這樣一來，開發周期就會加長。很多用戶可能根本沒耐心等這么長時間。不過，天無絕人之路。在類似于Raptivity Web Expert軟件的幫助下，開發者可以快速搭建一個交互性出色的網站。因此，大家可以放心大膽的在設計方案中添加交互性元素。

  

• 
  

...

配色學會了，別忘了還有設計構圖……

▼特殊視角
大家對攝影構圖比較在意，而許多設計師都習慣的把精力放在視覺元素的效果上，而忽視了視覺元素之間的位置關系。如果對設計的構圖沒有了解，即便是精彩的畫面效果也發揮不了作用，甚至會誤解了傳播的信息。

設計構圖的作用

構圖過程是設計師從混亂的視覺元素中找到條理性，幫助觀者在各個視覺元素之間建立聯系，從而有助于他們閱讀。設計的構圖的作用是為了加強視覺的張力增加設計的趣味性，吸引并引導著觀者的注意力。

視覺焦點

當我們改變視覺元素位置/大小等變化的時候，觀者會在設計的畫面中游離與尋找，尋找視覺要所要傳遞的信息。而構圖混合的設計，會分散顧客的注意力，而構圖就是為引導顧客的注意力。比如下面的雕塑作品，第一張有許多的雕塑的作品，沒有大小區分，沒有視線的引導，使用我們看的時候很難找到視覺的焦點。而第二張把其中一個雕塑有意的放大，并讓天花板上的線條聚焦在主題對象中，這樣視覺中心就會顯得非常突出。

不同視角構圖

構圖的角度不同所表現的中心與所表達的意境都會有所差異，比如下面三張不同視角的Low polygon（來自C4D超極班陳杰的作品）。

1、平行視角
平行視角是常見視角，給人常見/平靜的感覺

2、俯視視角
俯視的視角給人廣闊/渺小的感覺

3、仰視視角
仰視給人高大，積極向上的感覺。比如下面這張仰視的構圖主體對象（小狐貍），就相比平視角顯的更為突出，縱深的線條，微微向上的額頭，仿佛指引著我們看著遠方的夢想。
常規視角與特殊視角


常規視角就是我們平視看物體對象的樣子，這樣的方式會給我們熟悉與平靜的感覺。但是這樣的角度會顯的無聊而單調。比如下圖我們平常看到的大海，和一個不常見俯視的角度看的大海。以常規的視角看的物體，我們會習以為常，而設計的主張是與眾不同，這樣的設計作品才有新意，才能引起消費者的注意力。

NO1、低視角仰視構圖 特殊視角在設計中的應用案例

A以人的視角仰視構圖
?以人的對象角度俯視構圖的時候，它會使主題對象顯的更強大/更威嚴的感覺。而觀者感受會讓自己顯的更渺小/更無力的感覺。

?同樣以人視角仰視天空，蝙蝠俠海報周圍建筑縱深的線條匯集成一個蝙蝠俠圖形。而WWF公益海報周圍縱深的樹匯集成一個中國地圖的圖形，這種創意的表現非常有意境。


B以第三視角仰視構圖
?鈴木汽車的廣告案例
以人的視角仰視比自己高大的物體來說是很普通，也是很常見的，然而以比人小的物體去仰視會帶來意想不到的視覺效果。比如下面鈴木汽車的廣告設計，大象與長頸鹿都是極低的視角觀看，四條腿部傾斜線匯集在中間點，視覺效果突出，且趣味性十足。

?同樣是以比人物小的視角去觀看物體，比如下面的鞋子的廣告，就顯的非常引人注目。

?加能防水相機廣告
以水中的角度仰視人物，體現佳能D10的防水性能，來表達水中的世界更精彩。

?捕食者的海洋
以海底生物的視角觀看，仰視著捕魚者人物表情在水紋的折射下顯的非常猙獰恐怖的表情。來突出海洋生物被人類捕殺，恐懼的氛圍。

NO2、高視角俯視構圖 特殊視角在設計中的應用案例

?以高視角俯視構圖的時候，主題對象會從視覺上變的渺小。這時候我們更注重元素擺放的位置與組合的形狀，使復雜的元素關系簡單化。

?需要注意的是俯視構圖，如果是看比人小的俯視物體，我們會習以為常。比如下面的畫冊排版，就是我們常見的俯視類型。
?以高視角俯視地面，而俯視的角度會給我們一覽眾山小的感覺。這時候我們更注重俯視角度組合的形狀，BMW把地面組合成了大提琴/吉他的視覺形象，體現寶馬汽車的優雅大氣。

?拖鞋廣告，把夏天的游泳池組成巨大的拖鞋形狀，把沙灘組成巨大鞋子的造型。

NO3、以第一視角構圖 特殊視角在設計中的應用案例

以第一視角構圖，有強烈的視覺沖擊，引人入勝，帶入其中。

NO4、傾斜構圖 特殊視角在設計中的應用案例

?傾斜構圖的作用是打破平衡感與穩定感，比如下面站立的人物與傾斜的建筑形成鮮明的對比。

?傾斜構圖會比平真構圖更加動感

NO5、近距離視覺構圖 特殊視角在設計中的應用案例

近距離的視覺會讓人的注意力劇中在視覺的主題對象上，減少了其它不必要的視覺干擾





NO6、反轉構圖 特殊視角在設計中的應用案例

反轉視角就是倒立過來看物體對象，這樣的構圖讓圖片失去現實的重力現象，會變的非常有趣。

...

學會這13招，設計出高點擊率的Banner很容易

雖然互聯網發展迅速，但是利用Banner來推廣產品，依然是王道。
很多公司都采用這種形式進行宣傳，優點多多：便宜、效果可監測、行之有效。

現在呢，假設有客戶讓你幫忙設計個Banner廣告，你要怎么設計呢？要怎么提高廣告的點擊率呢？

下面將詳細講述Banner設計的14條建議。

1. 選擇最有效的Banner尺寸

根據谷歌廣告，效果最好的Banner尺寸為：

336×280
300×250
728×90
160×600


理想情況下，如果客戶不限空間，那么Banner可以按照以上的尺寸進行設計。

2. 層級分明

公司Logo:Canon 賣點：特價、新品首發

Banner設計首先要了解的、也是最重要的便是：設計的目的是為了提升品牌知名度，提高網站流量。一般Banner由3部分組成：

1.公司 logo: Logo設計必須能夠提升品牌知名度。在視覺上，要讓Logo在Banner眾多元素中脫穎而出。
2. 價值主導: 通俗的講，通過產品/服務的賣點來吸引用戶消費，“賣點"便是"價值主導”。是主打質量？還是主打"折扣"？是主打"限時特供"？還是主打"買一送一"？這一部分一般占據了Banner的大部分空間，而且要引起用戶的注意。
3. 行為召喚: 一般由文本或者按鈕構成，比如"點我"、“了解更多”、“現在注冊”、“現在觀看”。行為召喚是Banner廣告中的視覺焦點，支持瀏覽者點擊深入

3.務求簡約

設計越簡約，內容越清晰，用戶便能更迅速的看到Banner廣告。

4. 恰當利用按鈕

按鈕能夠提高點擊率，有效的引起因為召喚。一般在右下角，采用對照感比較強烈的色彩。

5. 清晰的邊框
從左到右: Android, Netflix, Bing

人眼會自然的觀察框架中的物體。因此，Banner廣告的邊緣最好有清晰的邊框。如果廣告是白色，那么建議使用灰色1px邊框。如果不是白色，那么可以使用黑色。這個小技巧能讓你的Banner醒目一點。

6. 文本要清晰可見

Citibank, Starbucks, Citibank, Canon, Sprint的Banners

該做: 標題和正文使用不同的字體尺寸，盡量4行以內

不該做: 使用非主流字體、潦草的字體、過于纖細的字體、全大寫字體、小于10pt的字體。

7. 正確的文件格式
.JPG, .PNG, .GIF, 或者 Adobe Flash格式都可以，能夠讓你的廣告有效的傳遞。如果是Flash Banner，記得要轉換成.GIF格式，這樣就能獲取全設備支持，也便會有更多的人瀏覽Banner。

8. 文件要盡可能的小

越小越好，最好小于150kb，因為用戶一般登陸一個網站會直接向下翻動，因此，如果能夠迅速載入，便能"趕得上"，便有機會讓用戶看到Banner廣告。

9. 妙用圖片，但不要過度依賴

從左到右: Victoria’s Secret, New York Life, Ally

選擇相關的圖像、照片可以提高信息的傳達能力。

沒有過于抽樣的概念，沒有過多的文字敘述，一圖勝千言。
不過總的來說，圖片也不是時刻有效，有的時候字體設計也很影響廣告效果。

10. 打造一種緊迫感

通過使用粗重、對照分明的字體，打造一種視覺上的緊迫感。讓用戶迫不及待的購買、點擊。不過這招偶爾試一下還行，不能總用。

11. 合適的色彩


從左到右:Tyroweb Book Publishing, Samsung, Apple, Google, Chase, Weight Watchers

談到色彩，不妨多看看優設網的一些文章，這里就不詳談了。用色正確，方為王道。

還有，設計Banner時要用RGB色彩模式，因為一般都是在屏幕上看廣告的。

12. 嘗試一下動效

動態廣告總比靜態廣告更醒目，但一定要確保動效設計清晰、直接、不偏題。

不超過15s、簡約的動效最好，一般不要重復播放超過10次。還有，動效要能有效的引起行為召喚。

13. 與網站協調搭配，同時又能脫穎而出
Dos Equis 在 ESPN上的廣告

如果你的廣告和網站的風格相符，完美搭配，那么用戶會對這則廣告產生信息感。與此同時，還要努力的讓廣告脫穎而出，這就看各位功力了。

這就是全部，要注意，Banner設計是一種功能大于形式的設計，好看沒有用，即便再丑，但是點擊率高就足夠了，這才是Banner設計的精要所在。
...

剛開始學設計，配色應該從哪里學起？

今天我們來聊聊設計師的經典話題：配色！很多自學設計的同學沒有接受過系統的色彩訓練，在配色方面始終不能隨心發揮。網絡上的配色技巧很多，但大多不夠全面，今天優設從國外翻譯了整個系列的配色指南，即使是毫無經驗的新手，學習完也能對色彩有比較深刻的認識。

設計原則101——色彩理論

第一印象決定一切！大家都可以從各自的外表上大概看出一個人的性格。同樣的，這個理論也可以延伸到設計工作里。但是影響設計工作的因素有很多，但是第一時間被關注到的應該是顏色。顏色反映了設計的整體感覺，有時候單憑顏色就可以調度起一個人的情緒、情感甚至回憶。如果沒有掌握色彩理論的基礎知識，你會發現在日常工作和生活中，你忽略掉了很多細節。

找出哪些顏色配搭在一起很美膩并不是一件偶然的事兒，這其實是一項很科學道理的工作。不同的顏色組合適合不同的作品，而且這種類似固定搭配的組合規則并不能輕易被打破。讓我們從最基礎的部分開始了解色彩理論吧！

原色

所有顏色的源頭被稱為三原色，三原色指的是紅色、黃色和藍色。如果我們談論的是屏幕的顯示顏色，比如顯示器，三原色則分別是紅色、綠色和藍色，也就是我們熟悉的RGB。

間色
如果將紅色和黃色、黃色和藍色、藍色和紅色均勻混合，就會創建三種間色：綠色、橙色和紫色。將這些顏色應用進項目中，可以提供很強烈的對比。

三級顏色


三次色來源于間色與原色的混合，主要有：紅紫色、藍紫色、藍綠色、黃綠色、橙紅色和橙黃色。現在，你應該了解了顏色到底都是怎么衍生出來的，也可以了解色輪上的顏色組合都是從何而來。理解了色彩的原則將有助于在項目中選擇顏色。為自己的設計選擇一個合適的調性，并創建適量的對比度，讓設計工作更好地展開吧！

接下來我們聊聊基于色輪我們可以得到的基本色彩組合。

互補色


相似色

三角色

三角色也是一組顏色。是通過在色環上創建一個等邊三角形來取出的一組顏色，可以讓作品的顏色很豐富。在上面的例子中，藍紫色和黃綠色就可以形成十分強烈的對比。

分散的互補色

分散的互補色和互補色的區別在于分散的互補色并不是取目標顏色正對面的顏色。拿上面的圖做例子來說吧，黃色的互補色應該是紫色，但是我們取紫色旁邊的兩個顏色——紫紅色和藍紫色。這樣子不僅可以有一個強烈的對比度，而且還可以讓顏色更豐富。

四方色
四方色是在色輪上畫一個正方形，取四個角的顏色。在上面的例子中是：紫紅色、橙黃色、黃綠色和藍紫色。這個顏色真的超棒的，不信可以自己用用感受一下，尤其是使用其中一個顏色作為主色，其他的三個顏色作為輔助色的時候。

四方補色
四方補色和四方色的差別在于四方補色采用的是一個矩形。通過一組互補色兩旁的顏色建立的色彩組合。如上圖中的互補色橙色和藍色，分別選用他們兩旁的顏色來建立矩形，最終取得橙紅色、橙黃色、藍綠色和藍紫色。

明暗
暖色
冷色

冷色也有其獨特的含義，通常會讓人聯想起涼爽的氣候、冬季、死亡、悲傷、冰、夜晚和水這些事物。冷色可以給人平靜、安寧、新人、干凈的感覺。紫色與尊貴經常聯系在一起，看起來十分內斂。

顏色的意義

紅色

紅色是代表愛情和激情的顏色。情人節的禮物通常都有一個紅色的盒子，或者是粉紅色，也就是添加一些白色的紅色。紅色也代表憤怒和血液。在火焰中可以同時找到紅色、橙色和黃色。紅色也表示危險，所以很多表示停止的標識牌都是紅色的，因為紅色可以很好地吸引人們的注意。紅色是很強勢的顏色，當它和其他顏色相遇時，比如搭配黑色，可以創建非常強勢的感覺。紅色可以搭配一些嚴肅的語氣和強硬的命令。


橙色

橙色代表了溫暖，但是并不像紅色那樣咄咄逼人。橙色能夠創建一個有趣的氛圍，因為它充滿了活力，而且橙色創造出的活躍氣氛并沒有危險的感覺。橙色可以與一些健康產品搭上關系，比如維生素C，畢竟橙子里也有很多維生素C。


黃色

提到黃色，經常可以聯想到太陽和溫暖。使用橙色的時候，可以創造出一種夏天的好玩的感覺，黃色則帶給人口渴的感覺，所以經常可以在賣飲料的地方看到黃色的裝飾。黃色也可以和懦弱與恐懼聯系起來，這個則是因為以前“yellow”這個詞也代表著這個意思。當黃色與黑色搭配在一起時，十分吸引人的注意力，一個絕佳的例子就是很多國家的出租車都采用這種配色。


綠色

在西方國家，綠色是錢的顏色，這與他們的文化和財富有關。因為大多數植物都是綠色的。綠色也代表著經濟增長和健康。綠色經常用作一些保健食品的LOGO，因為看起來就十分貼近自然。綠色還意味著利潤和收益。如果搭配上藍色，通常會給人健康、清潔、生活和自然的感覺。


藍色

藍色是一個神奇的顏色，因為不同明度的藍色會給人不同的感受、想法和情緒。如下圖中所示，深藍色可以給人一種悲傷的感覺，讓人聯想起傷心時怎么聽都不夠的藍調音樂。而淺藍色則通常會讓人聯想起天空和水，給人以提神、自由和平靜的感覺。藍天永遠都是平靜的，水流可以沖走泥土，清洗傷口，所以藍色也代表著新鮮和更新。藍色給人冷靜的感覺，會幫助人放松下來。


紫色

紫色總是讓人不禁想起皇室成員的長袍。紫色可以更多地與浪漫、親密、柔軟舒適的質感產生聯系。紫色給人一種奢華的感覺，也有一種神秘感。下面這個葡萄酒網站就是極好的例子。


白色

白色通常與醫院聯系在一起，因為醫生們都是穿著白大褂的，而且醫院內部的裝修通常也是白色的。此外，宗教繪畫有時候也是沒有色彩的，白色也代表著圣潔。白色通常給人干凈的感覺，比如白色的床單和衣服都讓人感覺很干凈。也可以代表棉花和柔軟的云朵。心理健康相關的事物也可以選用白色，白色也同樣適用于衛生、清潔相關的設計。比如下面這個網站，就很好地利用了白色。


黑色

黑色通常與死亡有關，尤其是在美國。它可以代表腐壞，因為很多食物腐壞變質以后就是黑色的。黑色也代表邪惡，因為是白色的對立顏色，而白色通常代表著純潔美好善良。黑暗和未知也會給人焦慮的感覺。很多圖像中，黑色表達了抑郁、絕望和孤獨。雖然黑色有很多負面的含義，但是黑色也是一個萬能色彩，當黑色遇上其他顏色的時候會產生其他的意義。比如當黑色邂逅金黃色，就可以給人一種奢華、高檔的感覺；當黑色偶遇銀灰色，則會給人一種成熟穩重的感覺。下面的網站就完美詮釋了這一點。

總結

作為一名設計師，了解色彩是一件必不可少的事兒。在設計的時候應該慎重地考慮和選用顏色。通過不同的顏色，可以創造出不同感覺的圖像。合適的組合可以獲得關注，通過視覺傳達設計師所想，進一步拉近設計師與觀眾的距離，讓圖像更具力量。如果之前并不仔細考慮用色，現在開始，應該培養對于色彩的感覺。

...

關于海報設計怎么表現才好看？

...