2013年7月31日星期三

如果何選擇網頁寄存(Web Hosting)公司

網頁寄存(Web Hosting),現在有不少人需要這類的服務,同樣的,這類的公司也越來越多,選擇時一定要考慮清楚。 如果知道一間網頁寄存公司是否可靠? 簡單的說,最起碼也要有個商業登記,因為連商業登記也沒有,可能你連最後追究的可能也失去。 如何知道一間網頁寄存公司是否有商業登記? 一般公司也是註冊.com或者.com.hk,.com則人人可以註冊,.hk也是如此 唯獨.com.hk,是必須向有關組織提供[商業登記證],才能申請的,所以也可說明,如果該網頁寄存公司是使用.com.hk的話,最起碼他們已經是一家合法並且有商業登記的公司。 還有其他要注意嗎? 一般新公司或者小型公司,也會將客戶的網站和自己公司網站放在同一部機,這當然是合情合理的,因為本身一台主機就不會只放一個網站。 所以客戶也可以瀏覽網頁寄存公司網站,得知該公司網頁速度如何。 就算不是放在同一部機,一般中小型網頁寄存公司,也只租一間數據中心的機房,大致速度也知道,當然很可能他們公司網站會放在比較快的主機,這一層用戶則需要向網頁寄存公司索取測試速度的方法,或者取得其ip,作簡單的速度測試。 比較有規模小小的 網頁寄存(Web Hosting)公司也會願意提供客戶試用的機會。 不過最後一提,香港普通網絡也算發達,速度也不會太差,所以租用網頁寄存服務的朋友不用太擔心速度上的問題,如果要連出海外,速度也是無法強求的,除非願意出一大筆費用

FTP軟件推介 - FileZilla

不管是網頁寄存服務的使用者還是程式開發員,甚至論壇管理員,管理自己的論壇空間,都需要使用FTP軟件。 在此,我推薦一個免費軟件,FileZilla,這軟件更有中文界面,可以讓你更輕易的管理你的ftp。 香港亦有不少web hosting公司推薦客戶使用這個軟件,因為畢竟這是個真真正正的免費軟件,網頁寄存商不需要被冠上【推薦使用翻版軟件】的惡名 下載 FileZilla: 前往官方網:http://filezilla-project.org/ 點擊下載 FileZilla Client 。 安裝FileZilla: 第2還是第3,4個步驟時,會問你安裝什麼套件,這時一定要保留Language files, 這樣才能安裝中文語言包。 中文化FileZilla: Edit->Settings->Language-> 選擇Chinese(zh_TW) 這樣就能完安裝並完成中文化的界面,大力建議使用網頁寄存服務的網友,使用這個軟件。

FTP是什麼?

FTP是什麼? 好像就算不是IT界的朋友也會常常說出這個字。 FTP是指File Transfer Protocol,是網絡上比較常見的檔案傳輸協定之一。 一般什麼人用到? 或者能做什麼? FTP一般會被網頁寄存(即Web Hosting)公司使用,讓客戶經由FTP軟件,登入FTP伺服器,將檔案傳送到網頁寄存公司。 又或者會有人在自己的電腦中可以建議FTP伺服器,將檔案分享給朋友。

Type of Web Hosting

Web hosting services, and any other medical Sungu Intasuteneittohosabisu, Web please see the server. To send an even number, many large companies do not need a computer is always connected to the network, Internet service providers, e-mail, documents and other websites. They are also more interested in products and services, use the computer as a host website. It can also order them online. Free Web hosting services: to various companies, advertising can support, to provide limited services is limited compared to paid hosting often. Shared Web hosting: other sites, many sites on the same server as one of the hundreds or thousands of people. In general, all areas of memory and CPU is such a common pool of server resources. This type of services can be very extensive. I hosted a common website. Institutions. Hosutingumachanto site: My client is a virtual host can have. Ability in a particular area businessmen, who, according to their other distributors, managed, and any combination of these listed types. Trader's account, a server in the same can be significantly different in size, its own virtual private server. Many dealers offer shared hosting plans, provide technical support themselves, is substantially the same services. Virtual Private Server: Virtual Private Server (VPS) is known as server resources into a virtual server, the method does not directly reflect the underlying hardware resources can be allocated is. VPS resource allocation is based on a single server often involves a number of virtual manufacturing system, virtualization, vehicle location system to do for many reasons, including the ability to move betweenservers in a container is. Root user can get their own virtual space. He is responsible for the repair and maintenance of your server's time. Dedicated Web hosting service: the user (Windows to Linux, / root privileges management authority) website, as well as their own, and gain complete control of the server, users often do not own the server. Specifies whether another type of self-management of the dedicated hosting management. This is usually the most expensive individual plans. Others, responsible for the safety of customers, it has full administrative rights is in the box to keep his privacy.

What's the Dedicated hosting service

There is a dedicated hosting service, dedicated server or managed web hosting service is a type of Internet hosting customers, including the leasing of an entire server not shared with anyone. Flexible than shared hosting, complete control of the organization’s server (s), including operating systems, hardware, server management options can usually be provided for an additional service accommodation. In some cases, a dedicated server can offer less overhead and greater return on investment. Dedicated server is usually installed in the data center, hosting such facilities, providing redundant power and air conditioning systems. On the contrary, hosting, server hardware vendors, in some cases, you will provide the operating system or application support.

2013年7月30日星期二

Web Design常用Web圖像格式簡述:bmp/jpg/gif

一、BMP 圖像檔 BMP圖像檔最早應用於網頁設計Windows作業系統,是Windows作業系統中的標準圖像檔格式,是最簡單的圖像格式。 BMP圖像格式非常簡單,僅具有最基本的圖像資料存儲功能,能存儲每個圖元1位元、4位元、8位和24位的點陣圖。雖然它提供的資訊過於簡單,但是由於 Windows系統的普及以及BMP本身具有格式簡單、標準、透明的特點,BMP圖像檔格式得到了推廣,它一般應用於Windows系統下的網站建設螢幕顯示以及一些簡單圖像系統中。 這種格式的特點是包含的圖像資訊較豐富,幾乎不壓縮,但由此導致了它與生俱生來的缺點--佔用磁碟空間過大。現在很少會在網頁中使用。 一張24位的800×600的bmp格式圖形檔大小: 800×600×3byte=1440000byte≈1440byte≈1.44M 二、GIF 圖像檔 GIF格式的特點是壓縮比高,磁碟空間佔用較少,所以網頁寄存這種圖像在網頁中運用很多。 GIF的兩種版本: GIF87a:只是簡單地用來存儲單幅靜止圖像。 GIF89a:可以同時存儲若干幅靜止圖像進而形成連續的動畫,使之成為支持 2D動畫的格式。可指定透明區域,使圖像具有非同一般的顯示效果,這更使GIF風光十足。目前Internet上大量採用的彩色動畫檔多為這種格式的檔。圖元畫。QQ秀,QQ空間等N多QQ的東西。 GIF圖像格式還增加了漸顯方式,也就是說,在圖像傳輸過程中,用戶可以先看到圖像的CMS大致輪廓,然後隨著傳輸 過程的繼續而逐步看清圖像中的細節部分,從而適應了用戶的 "從朦朧到清楚"的觀賞心理。 由於8位元存儲格式的限制,使其不能存儲超過256色的圖像,適合在圖片顏色總數少於256色的使用。 讓GIF格式達到最佳顯示效果的方法: 如果色系較少,顏色少於256,調色板可以電郵服務選擇為“精確”。 不要選“失真”。 一般情況,調色板選擇“最合適”,最大顏色數選擇“256”。如果色彩稍多於256色,可將抖動設為“100%”。 為防止邊緣出現鋸齒,不需要透明的時候,儘量不透明。 一個小技巧: 如需將網頁切片導出成gif格式的時候,如果色彩較豐富,不宜一起導出,而應該將切片一個一個的導出。如下圖的按鈕: 三、JPEG 圖像檔 JPEG文件的副檔名為.jpg或.jpeg,其壓縮技術十分先進,它用有損壓縮方式去電子商務除冗餘的圖像和彩色資料,獲取得極高的壓縮率的同時能展現十分豐富生動的圖像,換句話說,就是可以用最少的磁碟空間得到較好的圖像品質。 JPEG 2000同樣是由JPEG 組織負責制定的,與JPEG相比,它具備更高壓縮率以及更多新功能的新一代靜態影像壓縮技術。 JPEG2000 作為JPEG的網站排名升級版,其壓縮率比JPEG高約30%左右。與JPEG不同的是,JPEG2000 同時支持有損和無損壓縮,而JPEG只能支援有損壓縮。無損壓縮對保存一些重要圖片是十分有用的。 JPEG2000的一個極其重要的特徵在於它能實現漸進傳輸,這一點與GIF的“漸顯”有異曲同工之妙,即先傳輸圖像的輪廓,然後逐步傳輸資料,不斷提高圖像品質,讓圖像由朦朧到清晰顯示。 此外,JPEG2000還支援所謂的"感興趣區域"特性,你可以任意指定影像上你感興趣區域的網頁設計公司壓縮品質,還可以選擇指定的部份先解壓縮。 使用jpg圖像的注意點:在圖像品質和檔尺寸之間找到平衡點。一般80%的壓縮率是比較合適在網頁中使用的。

網頁設計配色應用實例剖析——藍色系

Web Design藍色是色彩中比較沉靜的顏色。象徵著永恆與深邃、高遠與博大、壯闊與浩渺,是令人心境暢快的顏色。   藍色的樸實、穩重、內向性格,襯托那些性格活躍、具有較強擴張力的色彩,運用對比手法,同時也活躍頁面。另一方面又有消極、冷淡、保守等意味。藍色與紅、黃等色運用得當,能構成和諧的對比調和關係。   藍色是冷色調最典型的代表色,是網站設計中運用得最多的顏色,也是許多人鍾愛的顏色。    藍色表達著深遠、永恆、沉靜、無限、理智、誠實、寒冷的多種感覺。藍色會給人很強烈的安穩感,同時藍色還能夠表現出和平、淡雅、潔淨、可靠等。   下面我們根據藍色系不同屬性的同類色、鄰近色、高純度對比、相對對比色等色彩搭配做不同的網站建設舉例分析。   藍色系分析:(高純度對比:藍色+玫瑰色)    藍色的HSB數值H色相為240度時是正藍色。上圖的HSB模式S數值顯示,所有主要配色的飽和度都是100%。從主色調、輔色調HSB模式的數值可看出,這兩種顏色在明度上有較大的區別,色相上稍有輕度變化,飽和度相同。RGB模式上看,主色調與輔色調R數值都為0,G綠色的數值和B藍色數值分量的變化,得到了不同藍色的兩結果。點睛色僅是R紅色與B藍色兩色調和而得沒有摻雜其他顏色,因此飽和度呈最高值100%。整個頁面配色的飽和度都為100%,頁面整體配色看起來視覺衝擊力異常強烈。   輔助色白色讓頁面上的顏色的特性發揮到極致,是不可缺少的輔助配色。   結論:響亮、強烈刺激的詞語似乎都適用於上圖頁面,源于高純度烘托、微妙的冷暖變化配色上,體現出現代都市張揚時尚的氣息。白色塊面的線型使得這種高純度高強度的配色變得響亮卻也緩和。    輔色調藍色的運用透露出設計師的大膽與魄力,玫瑰色在色輪表裏算是網頁寄存冷色系,但是與藍色廣義上的對比來說是暖色,在這裏與藍色搭配算是絕配了。整個頁面無不體現出特色和個性。   藍色系分析: (同類色:淺藍色)    主色調HSB數值H顯示200度,色輪度稍向綠色方位傾斜,但是由於從180度到270度基本上給人的視覺呈現還是藍色範疇,因此與視覺上廣義的藍色差別不大。   該頁面中間色較多,主要是在藍色範疇內做明度的變化,所以色度差非常緩和,以致於頁面的色彩呈現非常柔和,甚至稍有些發灰的感覺,好在該頁面還有些較大色塊的淺藍色及白色,拉大了頁面的色階,使得這種灰的感覺減弱不少。   點睛色的HSB數值是258,色輪趨勢是向暖色紫色(相對冷暖色)傾向,變化微妙,是本頁面最溫暖的顏色。藍紫色在色相環中位於藍色和紫色之間,所以它也蘊含著紫色的一些神秘感,加上淺藍色的雅致,所以亮度較高的藍紫色顯得非常高雅。在網頁中,藍紫色通常與CMS藍色一起搭配使用。   結論:    淺藍色給人一種很寧靜安靜的心理感受。淺藍色系有淡雅、清新、浪漫、高級的特質,常用於化妝品、女性、服裝網站。它是最具涼爽,清新特徵的色彩。和白色混合時,能體現柔順,淡雅,浪漫的氣氛。   主色調選擇明亮的藍色,配以白色的背景和灰亮的輔助色,可以使站點乾淨而整潔,給人莊重、充實的印象。   該頁面基本上屬於同類色系,也是最保守穩妥且調和的配色方案。但該種配色看久了容易呈現出平淡乏味的感受。   藍色系分析:(深藍色)    HSB數值顯示主色調和輔色調的H色相接近,飽和度為最高,都為100%,兩者只在明度上有區別,分別是35%和65%。三維厚重的設計風格,用調和法之一的漸變手法,把主色調和輔色調進行了緩緩的過渡,增強了層次感,體現個性魅力,符合該頁面電郵服務視音頻風格網站的主題。   雖然是被譽為點睛色,但從整個頁面來看由於面積關係,點睛色在這裏所起的作用不大,僅僅就蜻蜓點水而已。相反的輔助色在這裏卻起到了較為突顯的作用——讓整個沉悶的本只起烘托作用的深藍色得到充分的展示。另一輔色調灰色令白色與深藍色反差不易過大,起到調和的目的。白色增強了整個頁面的視覺感,使之更醒目。   結論:    深藍色是沉穩的且較常用的色調。能給人穩重、冷靜、嚴謹、冷漠、深沉、成熟的心理感受。它主要用於營造安穩、可靠、略帶有神秘色彩的氛圍。   深藍色明度偏暗,基於上面對深藍色的特質描述,在常規網站設計裏,可能不適合做太大面積的使用。但根據不同網站主題的設計需要可以做些不同的嘗試。   藍色系分析:(純度對比)    從HSB模式上的數值顯示情況進行分析,全頁基本上是屬於高純度配色,各顏色特性相互輝映、相互交融,把整個頁面環境渲染得異常鮮亮和熱鬧。   冷暖色系之間跨度很大:藍色、綠色、黃色、橙黃色、朱紅色、土橙黃色、墨綠色,幾乎按照電子商務色輪表上的軌跡進行。也由於面積有多有少的原因,因此頁面看起來較明快調和。其中土橙黃色和墨綠色是頁面明度最重的顏色,從RGB色值上可看出,都分別的混合了其他顏色,因此飽和度相對較低,略呈灰色狀態,另一種意義上來說這種灰色狀態是調和色的一種很好的方式。   由於有大面積的主色調和背景色做掌控,加之以上因素綜合分析,無論頁面再多再細再耀眼的顏色都能很好的統一在同一個頁面之中。   結論:    非常明快活潑、跳躍的富有趣味性的配色。使人勾起了無限愉悅的童趣。   高純度的藍色主色調配合的其他高純度冷暖色調對比,會營造出一種整潔輕快的印象。   根據色輪表的緩和過渡及使用面積多少,判斷分析出頁面調和程度。   藍色系分析:(藍色鄰近配色:藍色+綠色)    從HBS模式的S飽和度數值100%上看,不少朋友會有疑惑的感覺,認為看起來較為柔和的顏色,飽和度或許會低,刺眼的顏色通常飽和度較高,其實不然,每個顏色有每個顏色的不同屬性特性。高純度的色彩,明度的降低是協調視覺的一個因素網站排名,容易給人造成低純度的錯覺。   不同塊面的鄰近色交錯排列,增強本頁面視覺動感。   輔色調淺藍色是背景色白色和主色調藍色的中間色,它形成了頁面配色的中間色階,色彩層次感增強以外,還使整個頁面的顏色更為和諧。   另一輔色調青色,是藍色和綠色的結合體,包括在標誌文字、文字標題上的運用,無疑活躍了整個頁面的配色環境。   兩個點睛色都略調高了明度,另一意義上是該頁面配色的中間色階。兩點睛色都是在主色調藍色、輔色調青色的基礎上衍生出來的顏色,這裏“點睛”的作用不大,都屬於和諧色系。   結論:    很多站點都在使用藍色與青綠色的搭配效果。藍色、青綠色、白色的搭配可以使頁面看起來非常乾淨清澈,在我們的現實生活中運用的範圍很廣,可以說是隨處可見的。   主顏色選擇明亮的藍色,配以白色的背景和灰亮的輔助色,加上中間色階的運用,可以使頁面有乾淨整潔,給人莊重、充實的印象。   這是一組非常愉悅和諧的鄰近色系配色。中間色適度面積的運用及背景白色讓這組顏色特徵發揮到了極致。   藍色系強對比:藍色+紅色    藍色是冷色系的最典型的代表了,而紅色是暖色系裏最典型的代表,兩冷暖色系對比下讓全頁的色彩對比異常強烈且興奮,很容易感染帶動流覽者的激昂情緒。紅色把文字圖片框起來,在藍色背景對比下,很好的突出主題,又好似模仿投影螢屏的感覺,讓人迅速的網頁設計公司聚焦於視頻中心,達到網站背後的最終目的。   輔色調是紅色,從數值上看接近於正紅色,紅色對視覺傳遞的資訊是很快的,屬於高昂響亮的顏色。   點睛色分別是黃色、黃綠色。大家知道,黃色是明度最高的顏色,也較響亮、刺目,在這裏的運用能強烈的突現標題。從大的來看,點睛色黃綠色與輔助色紅色是對比色,雖然面積不太大,只小範圍的對比,但是已經足以達到了迅速傳遞資訊的效果,讓人印象深刻,促成再訪點擊。   結論:    冷暖色系的對比碰撞,充滿激情,能傳遞熾熱情感、強烈刺激主題的目的。   該頁面運用了冷暖、紅綠兩種比較鮮明的對比色,配色積極大膽,視覺衝擊力很強。

網頁設計配色應用實例剖析——綠色系

Web Design綠色在黃色和藍色(冷暖)之間,屬於較中庸的顏色,這樣使得綠色的性格最為平和、安穩、大度、寬容。是一種柔順、恬靜、滿足、優美、受歡迎之色。也是網頁中使用最為廣泛的顏色之一。   綠色與人類息息相關,是永恆的欣欣向榮是的自然之色,代表了生命與希望,也充滿了青春活力,綠色象徵著和平與安全、發展與生機、舒適與安寧、鬆弛與休息,有緩解眼部疲勞的作用。    它本身具有一定的與自然、健康相關的感覺,所以也經常用於與自然、健康相關的站點。綠色還經常用於一些公司的公關站點或教育站點。   綠色能使我們的心情變得格外明朗。黃綠色代表清新、平靜、安逸、和平、柔和、春天、青春、升級的心理感受。   下面我們根據綠色系不同屬性鄰近色、同類色的高純度低純度、對比色等色彩搭配做不同的網站建設舉例分析。   綠色系分析:    從上圖的主色調、輔色調HSB模式的數值可看出,這兩中顏色只是在明度上有區別,其顯示的色相與飽和度是一樣的。正綠色是120度,這兩種顏色從RGB數值上看,都不同程度的混合了其他少許顏色,因此離正綠色稍有些偏差。由於綠色本身的特性,所以整個網頁看起來很安穩舒適。   輔助色只在明度上降低,讓頁面多了些層次感、空間感。   白色塊面使得綠色的特性發揮到最好的狀態並增強了視覺節奏感。   點睛色恰到好處的體現出了 "點睛"這一妙筆,極盡誘惑力,整個頁面頓時生動提神起來,增強了頁面主題的表達力。   結論:    主、輔色調是屬於同類色綠色系,通過不同明度的變化,能較遞增緩和變化同時卻也較明顯的體現出頁面的色彩層次感來。如果不是通過數值來分析判斷,可能會有些朋友憑經驗判斷,容易誤認為這兩種顏色除了明度外有可能純度會有所不同,這時候適當的網頁寄存使用數值模式會很容易得到正確的結論的。   整個頁面配色很少:最大色塊的翠綠,第二面積的白色,第三面積的深綠色,但得到的效果卻是強烈的、顯眼的,達到充分展現產品主題的目的。   深綠色給人茂盛、健康、成熟、穩重、生命、開闊的心理感受。   綠色系分析: (高純度配色:綠色+對比色組合)    HSB數值H顯示60度為正黃色,該主、輔色調只向綠色傾斜了一丁點--H為75度。大面積明度稍低的黃綠色為主要色調,飽和度卻非常高,達到了100%,輔助色使用了提高明度的嫩綠色和白色,這兩種輔色除了增加頁面的層次感的同時,還能讓整個頁面配色有透亮的感覺,增強了綠色的特性。背景深褐色無疑把前景的所有純色烘托得都耀眼於舞臺上。   該頁面有兩組小小的對比色,一組是黃綠與橙紅色,一組是橙黃色與天藍色,這兩組配色嚴格的來說不算對比色,因為色彩多少有些偏差。雖然它們的飽和度降低,但在這個頁面中足以構成了最響亮的色調,把整個頁面烘托得非常活躍、鮮明。   結論:    主、輔色調黃綠色大面積使用並不刺目,反而使得頁面看起來很有朝氣、活力。   適當運用不同純度的不是相當嚴格意義上的對比色系組合時,通常能起到的主要作用是網頁設計模板主次關係明確。不 "標準"的對比色系對比特性雖然減弱,頁面色彩看起來容易協調、柔和,但一樣能突出主題。   綠色系分析:(同類色淺綠色)    主色調綠色屬性是明度很高的淺綠色,前面提到過,通常情況下明度高飽和度就降低,飽和度低頁面色彩度就降低,除非顏色本身有自己的特性,加上大面積的輔助色白色,整個頁面看起來很清淡、柔和、寧靜,甚至有溫馨的感覺。   頁面中使用了漸變的CMS淺綠色,使得整個頁面視覺上更加柔和舒適。   儘管點睛色只在主要標誌上出現,按鈕也只有少許一點,但也給整個頁面的色彩帶來些亮筆。尤其是紅色的HSB模式的H數值顯示顏色接近於正紅色,飽和度達到最高值。另一個點睛色中黃色,在頁面視覺上呈綠色與紅色這一組對比色起到緩和視覺的作用。因為在色輪表上,黃色正是在綠色和紅色之間的過渡色。   結論:    淺綠色系有優雅、休息、安全、和睦、寧靜、柔和的感覺。   漸變的效果更能加深這種印象。但頁面配色上淺色過多時,整個頁面容易呈現發 "灰"的感受,這就需要適量的添加純度稍高的顏色例如左下角的輔助色綠色塊,適當的鮮豔的點睛都能很好的解決這一問題。   綠色系分析:(黃綠色+弱對比)    從HSB模式的數值上看,主色調是接近於黃色的基礎上加入了少許綠色在裏面,飽和度和明度電郵服務降低,色彩看起來較柔和。輔色調墨綠色的綠色的傾向稍高,飽和度也較高,只是明度降低,該色看起來踏實沉穩。   點睛色紅色H數值為零度,呈正紅色,但是該顏色飽和度和明度降低,而紅色本身的色度比黃綠色要暗不少,因此顏色穩重。另一點睛色藍綠色,明度飽和度都很低,在頁面配色裏似乎沒有點睛感覺,更多的是呈輔助狀態。   結論:    主色調是相對比較鮮亮的顏色,而輔助色和點睛色是屬於比較沉穩的顏色,頁面通過大小色塊的對比提高視覺的反差力度,增強頁面的感染力。   由於整個頁面的飽和度整體稍微降低,因此該頁面配色較協調、緩和。   綠色系分析:(綠色配色:同類綠色+多種點睛色)    主要色調HSB模式H數值顯示75度,依舊是色輪表裏傾向於黃色區域方位邊緣的綠色,呈現出的黃綠色調。輔色調在明度上有些提亮,與主色調形成較強的對比。   點睛色裏所使用的對比色組合有兩組,紅色與綠色,藍色與橙黃色,其中黃色是介於暖色(橙黃、紅色)和冷色(綠色、藍色)的過渡色也是調和色。   結論:    通過上面的分析大家可以看到,該網頁的配色不少,而且電子商務還有兩組對比色在內,但是頁面配色也很協調。原因之一,從下面抽取的色塊可以看出來,是一個過渡柔和的色輪表:以黃色為中界一邊是較淺的黃綠到綠色再到藍色,另一邊是橙黃再到紅色。原因之二,點睛色畢竟是扮演著點睛色的角色,有主色調和輔色調大面積的控制,即便再多些點睛色也不至於很快干擾到頁面的整體配色。   整個頁面保證了協調、不淩亂的步調,但是又能把商業網站的熱鬧氛圍體現得很好的渲染。此種配色方法值得我們學習借鑒。   綠色系分析:(鄰近色配色:綠色+藍色)    全頁使用的主要色調基本上是屬於明度較高飽和度較低的顏色,其中還使用了漸變色緩和的過渡,因此頁面看起來舒服協調。   主色調是飽和度較高的翠綠色運用於背景色,幾乎是調節於整個頁面的網頁設計公司關鍵色。如果沒有這一背景色塊,整個頁面容易發灰。還有右邊的粉綠大塊面積稍多,有些灰的感覺,好在前景的文章使用了色度明度稍深的藍色壓住,稍顯好些,關鍵還是有白色的箭頭很好的把粉綠和藍色文字的色階拉開了距離。左邊的照片清晰且純度較高也對整個頁面配色起到一定的調節作用。   點睛色主要是標誌的顏色,如果可以忽略不計,頁面配色更趨於平淡。   結論:    明度較高飽和度較低的顏色,如果沒有明度較深飽和度較高的顏色進行勾勒或者點綴,這個頁面配色看起來容易發灰。

網頁設計配色應用實例剖析——紫色系

Web Design紫色是一種在自然界中比較少見的顏色。象徵著女性化,代表著高貴和奢華、優雅與魅力,也象徵著神秘與莊重、神聖和浪漫。另一方面又有孤獨等意味。紫色在西方宗教世界中是一種代表尊貴的顏色,大主教身穿的教袍便採用了紫色。   紫色的明度在有彩色的色度中是最低的。紫色的低明度給人一種沉悶、神秘的感覺。在紫色中紅的成份較多時,顯得華麗和諧。紫色中加入少量的黑,沉重、傷感、恐怖、莊嚴的感覺。紫色中加入白,變得優雅、嬌氣,並充滿女性的魅力。   紫色通常用於以女性為物件或以藝術作品介紹為主的站點,但很多大公司的站點中也喜歡使用網站建設包含神秘色彩的紫色,但都很少做大面積使用。   不同色調的紫色可以營造非常濃郁的女性化氣息,在白色的背景色和灰色的突出顏色的襯托下,紫色可以顯示出更大的魅力。   下面我們根據紫色系不同屬性的鄰近色、高純度低純度配色、相對對比色等色彩搭配做不同的舉例分析。   紫色系分析:(高純度對比:同類紫色+同類對比色)    紫色的HSB數值H色相為300度時是正紫色。上圖的HSB模式S數值顯示,上組顏色飽和度基本都比較高,加上部分較高的明度組合,使該頁面異常奢華豔麗。   輔色調之一的黃色是紫色強度最高的對比色,主、輔色面積的大小不同是形成視覺衝擊力最大的主要原因。值得一提的是右下腳的淺藍色的運用,它在整個頁面配色上是很謙遜的角色,但卻既突出上面的文字內容,又不張揚的壓抑住其他顏色的配色,屬於豐富於頁面的輔助作用。如果把它試換成別的顏色似乎還是沒有這個淺藍色效果好。   另一輔助色淺紫紅色又稱粉紅色,粉紅色主要用於包含少女在內的女性站點。因為從明亮到淺白色調的粉紅色能夠表現出網頁寄存可愛、乖巧的感覺,這裏只做少量運用。   其他點睛色使用得雖多但面積很小,主要是主色調紫色附近的過渡色,例如群青、青蓮、玫瑰、紅色等點綴,閃亮耀眼,增強頁面的視覺感染力,有渲染出華麗凸顯現代氣息的作用。   結論:    紫色結合紅色的紫紅色是非常女性化的顏色,它給人的感覺通常都是浪漫、柔和、華麗、高貴優雅,特別是粉紅色可以說是女性化的代表顏色。高彩度的紫紅色可以表現出超凡的華麗,而低彩度的粉紅色可以表現出高雅的氣質。   紫紅色並不能隨意在所有的站點中使用,但使用恰當的紫紅色會給人留下深刻的印象。高彩度的紫色和粉紅色之間的搭配通常都能得到較好的效果。   該頁面具有非常強烈的現代奢華感。時尚張揚的配色組合,符合該頁面主題所要表達的環境,讓人容易記住它。   紫色系分析:(淺紫色)    該頁面使用特性最高的紫色提亮為100%高明度的主色調,很容易抓住人們的CMS視線成為聚焦點,是非常大膽又時尚的配色。   輔色調則是使用冷色系代表的深藍色,明度較低。主要是為了烘托左邊導航菜單,凸顯上面的內容資訊,由於人們對網頁已然形成了視覺慣性,也起到了很好的視覺引導作用。   主、輔色的搭配運用構成了較強烈的視覺對比效果。   另一輔色調淺藍色,在主色調淺紫色的烘托下呈現稚嫩的感受,裏面的白色塊起到淺紫的背景和淺藍色調和、明快的作用。   點睛色的使用實際有不少,這裏只選幾種起到主要作用的顏色做舉例分析。中黃色運用得很珍貴,只在左上區域出現,旨在突出主題文字的效果。其他配色主要是根據左下文字字母而來,紅和綠色出現在頁面的淺紫色較為寬敞的位置,小範圍的做色彩對比效果。其他點睛色則極少的零星分佈,既調和呼應又起到活躍於頁面的角色作用,以上這些都是點綴和渲染頁面氣氛不可缺少的配色元素。   結論:    在紫色中加入白色,可使紫色略顯沉悶的特徵消失,變得清秀、優雅、嬌氣,並充滿女性的魅力。   白色、粉紫色、天藍色的顏色搭配,是比較稚嫩的配色,同時也是最受少女歡迎的配色方案,這裏運用也較得體。   使用高明度高飽和的主色調非常個性,讓人很容易記住它,但是色彩都有兩面性,此種顏色略顯驕躁感過於刺激視覺,不易於長時間的注目流覽。   紫色系分析:(深紫色)    以略有漸變色為背景主色調,漸變色是調和方法之一電郵服務,起到增加層次感空間感柔和視覺的作用。背景色左上最亮處的特殊處理,主要起到突出了標誌的作用。   從HSB模式H色相數值上看到輔助色依舊以主色調延伸而成,僅在明度上做了些變化,屬於同類色的調和色系。   點睛色皆選用了色彩色系中明度最高的黃色及相近色黃綠、玫瑰紅。黃色和黃綠色真就點睛之筆——黃色是紫色的對比色,深紫色背景上的高明度黃色被襯托得異常跳躍。黃綠色既和諧又增添了頁面配色的高強度節奏。玫瑰紅在這裏是最溫暖的顏色,協調且增強了頁面配色的層次感。根據各顏色的特質,在視覺上成功做了先後次序的引導。白色雖是非色彩,但也起到拉大色彩之間色階層次的作用,增強了頁面空間感,也使以上配色更調和。   結論:       深紫色給人華貴、深遠、神秘、孤寂、珍貴的心理感受。較暗色調的紫色可以表現出成熟沉穩的感覺,創造、謎、忠誠、神秘、稀有。   整個頁面配色尤其是點睛色的妙用,使得整個頁面非常新穎別致,極賦現代都市氣息。   根據面積的大小對比,適當的對比色能讓頁面有活躍、明快的氣氛。   紫色系分析:(紫色配色:紫色+綠色)    綠色被譽為紫色的絕配色。主色調是飽和度降低明度較低的紫色,輔色調是色彩明度較高的電子商務草綠色及沉穩的深藍色。   點睛色雖然被稱為點睛色,但在整個頁面中使用的面積極小,與其他色系所占的比重來看,這兩種點睛色小到幾乎給忽略。儘管從HSB模式數值上看到,橙黃色為高純度高明度色,只在主題文字上有些體現。另一藍綠色所處的位置在顯眼的網站名稱後方,謙遜程度幾乎不為人們注意到,儘管它才是網站背後所要表達的真正主題。   草綠色和深藍色把大面積的白色框起來,襯托起前景,但也許由於白色面積使用過大,為了不至於讓它太突出,在白色的背景上點綴較淺的紋樣來降低這種感覺。   背景色紫色由於色彩特質明度較低的緣故,與明度較高的輔助色草綠色形成較明快的效果。   結論:   點睛色根據頁面所占的面積因素,也有的僅起到輔助的作用。相反草綠色或許由於色彩特質的原因,這裏起到比較強調的強勢目的,在該頁面配色裏起到非常關鍵的作用。   紫色系分析:(紫色鄰近色配色:紫色+紫紅色)    嚴格來說,該頁面配色的色組和紫色關聯上稍有些偏移,之所以做為案例選擇,是因為整體配色上依舊給人有紫色系配色的錯覺。    HSB的H色相數值上顯示的260來看,正紫色數值網站排名為300,主色調整個往藍色系稍偏移,構成較有視覺感染力的藍紫色。藍紫色在色相環中位於藍色和紫色之間,所以它也蘊含著紫色的一些神秘感。儘管飽和度不是很高60%,但明度達到最高狀態為100%,使得該色彩豔度很強,較高亮度的藍紫色顯得非常高雅,契合網站主題。   輔色調HSB的H色相數值為270,已經稍往紫色偏移,紫色特徵較明顯,明度較高且較明快的感覺。另一輔助色粉紅色H色相數值為331,稍往紅色系偏移,明度極高為100%,更增添了明快的氣息。   點睛色在這裏起到了不可忽視的作用,由於淺紫紅較有女性氣質特徵,增添了該頁面的女性溫柔細膩的美感。另一點睛色深藍色網頁設計公司由於色彩特質所致,這裏只是輔助性的做些點綴。   結論: 淺紫色系給人嫵媚、優雅、嬌氣、清秀、夢幻,充滿女性魅力。   上面的配色除了點睛色深藍色明度較低,其他的色彩組合都在不同的程度上提高了明度,增強了頁面所要表達的主題效果。

我們不做沒有品質的Web Design

其實,我們要做的並不多,就可以使得我們的行業更良性發展,企業得到良好效益,客戶得到更大價值,我們得到更大的尊重。 "最近因為細化和求證博導前程網路行銷培訓系列教材中我負責的第二本《網路行銷導向的網站策劃與網站建設》的體系的實用性,調研了一些經驗豐富的專業人事和一些專業公司,也使得我對網站建設公司的生存和市場狀況有了更直接的體會。對於這種狀況自己本來也是清楚的,但是當再次比較深入地體驗還是再一次地被嚴重衝擊。 "做網站的,不如賣白菜的。"這是我聽到的最生動的描述。仔細分析確實有道理: 1、從價格來看,如果白菜的價格低於採購成本+相關稅費+人力成本+預期利潤人家就不賣了。可是網站呢? 功能變數名稱+空間總得要300元吧; 網站開發過程的直接人力成本總得要500元吧(這是最簡單的網頁設計,當然可以照著某範本改、找著網上某網站抄襲,當然這種抄襲效率特別高,只需要拷貝、替換); 一般還是需要一年免費維護的,也總得500元吧; 營業稅加企業所得稅總得140元吧; 房租、水電、辦公等成本總得攤進200吧,如果單子不多還攤不到這麼少呢; 業務人員接單子的成本總得300元吧,雖然有許多公司是給業務人員極低的工資,搞人海戰術(這種戰術的破壞性影響後面分析); 而我的這個計算可能會有節省的就是維護成本和開發成本。維護成本的節省一定是以客戶並不關注網站,甚至建好後,一年都不上去看為前提的。從這一點講,網站建設公司是沒有動力教育客戶關注他的網站的,因為教他越懂,維護的事就越多,自己成本就會越高。長此下來,客戶不像客戶、服務商不像服務商,客戶抱怨網站建設沒有用,服務商抱怨客戶不花成本還想要效果。全死! 開發成本節約有道,網路資源確實太多了,免費的建站系統、免費網頁設計模板、直接拷貝(下載)別人網站都是3-5次點擊滑鼠即可完成。自己抽屜裏還有一堆客戶網站的程式、網頁,自然也是資源。記得在企業網站建設規範發起會議上馮英健講,許多網站看著類似,一調查發現是一個服務商做的。馮博士講的比較客氣,沒有把蓋子完全掀開。其實,在網上看,多少類似啊,簡直普遍了,甚至都有改完發佈後都沒有修改標籤和頁面關鍵字的!網路的快速、低成本特性被發揮的淋漓盡致了,任何事情、做法都可以被迅速放大、蔓延。 2、從投資心理來看,如果白菜不好賣,客戶接受不了,人家會少採購些賣,而且如果天氣不太適合白菜保管,人家就改賣蘿蔔了。而網站呢? 高科技的東東啊,一定有機會的,無論什麼代價,只要我手上有50家客戶的時候,光功能變數名稱空間續費就可以維護3個月公司的運營啊;(天知道客戶有多忠誠,天知道什麼作用沒有客戶會傻到第二年還積極續費?!) 投資的時候總想著,這個項目成本多低啊,2個人,2台電腦,技術開發搞定。業務員的成本好說,低工資、高提成,給公司的經營壓力並不大啊,只要把他們的積極性和情緒轟起來就行;(天知道,都叫網站,有的值千萬元,有的值千元,咱哪2人能扛多少,什麼行銷優化,想都不想,只要網站能打開、功能可以實現就ok;天知道,其實低工資的業務員會在第幾個月也這麼想,然後自己也開個建站公司,還帶走你的客戶,因為創業成本低啊,客戶又搞不懂千萬和千元網站的區別,手上又有客戶,這麼好的機會誰不想試試啊,於是市場上又多了一家猛將,許多這樣的投資、許多這樣的公司都是成了黃埔軍校,培養出來打自己的猛將。) 3、從CMS行業秩序上看,如果同一個菜市場,那家白菜賣得特別低價,甚至低於成本,不用大家群毆、不用行業協會出面、不用工商局管理,市場會有所選擇,當然似乎沒有誰會這麼傻。不為市場秩序著想、不為行業良性發展著想,就為今天要吃飯、穿衣生活的一家老小著想,人家也不會這麼幹。而網站呢? 同一個項目、同一個網站,800-8000-80000都有人報價。用戶一定傻了,這是什麼行業啊! 同一種業務,同一種方式,用戶一天能接到十幾通推銷電話(因為大家電話號碼的來源差不多),人家還辦公不了! 4、從業務能力來看,賣白菜的一定能說清白菜的產地、品質,適合青炒還是適合做湯,甚至會建議那種的哪個部分適合做酸辣白菜、哪個部分適合和豆腐燉湯。而網站呢? 所謂的專業公司,有幾個的開發人員能特別清楚網站對客戶的目標、作用和如何圍繞這些進行開發,有幾個業務人員能給客戶說清什麼是網路行銷、根據客戶的行業特點和企業現狀給出一些有用的建議。 寫此文,不想抨擊誰、也不想醜化誰。只是心急如焚,只是擔心這樣下去這個行業就可能完了,要是崩潰的哪一天果真來了,再要讓其恢復活力,太難了,也太艱巨了。哪時候我們可能不會以自己是互聯網企業而自豪,代替的是感到的是慚愧、羞恥。就像2000年以後,泡沫破滅了,許多曾經自豪得挺胸說我是網站公司的紛紛改口"我們是軟體公司"。 通過此文,想告訴: 已經和正在投資的投資人,要好好思考、認真分析、這個行業已經到了規範的前夜,什麼事情都有可能發生; 希望我們的行業能規範,至少比白菜市場規範;希望我們從業人員都理性,至少比白菜商販理性。 其實,我們要做的並不多,就可以使得我們的行業更良性發展,企業得到良好效益,客戶得到更大價值,我們得到更大的尊重。

2013年7月29日星期一

網頁設計配色應用實例剖析——黑色系

黑色是暗色,是純度、色相、明度最低的非彩色。象徵著力量,有時感覺沉默、虛空,有時感覺莊嚴肅穆,有時又意味著不吉祥和罪惡。自古以來,世界各族都公認黑色代表死亡、悲哀黑色具有能吸收光線的特性,別有一種變幻無常的感覺。    黑色能和許多色彩構成良的對比調和Web Design關係,運用範圍很廣。   黑色給人深沉、神秘、寂靜、悲哀、壓抑的感受。   黑色是最有力的搭配色。   黑色也常用來表示英俊的男人。   下面我們根據黑色系搭配不同的顏色所表現出的特性做不同的舉例分析。   黑色系分析:(明度對比:黑色+白色)    從RGB和HBS模式可以看出,三組數位顯示沒有摻雜任何的數位,都統一到最高級0到255,即純黑和純白。   黑色白色屬於沒有色相和飽和度、只在明度兩極的非色彩。兩種極端強烈對比網站建設的只在明度上有區別的顏色,與前面我們所說的三原色、對比色的對比還是有較大區別的。   該頁面只有兩種非色彩搭配,即黑色白色,襯映得該頁面的設計元素也非常乾淨簡練,旁邊點綴大小得當的文字元素減小該頁面有可能因此產生的單調感覺。      結論:   黑白純色在明度上反差非常大,視覺衝擊強烈,主次分明,全站的貫穿運用,構成特色鮮明的設計風格,散發迷人的高品位的貴族氣息。   黑白兩種顏色的搭配使用通常可以表現出都市化的感覺,常用於現代派頁面設計中。   黑色系分析:(非色彩系:黑白深灰色)    該頁面與上頁配色類似,只是多了一組輔助色——灰色,黑、灰、白這三種非色彩在該頁面裏都運用到了。大家從該頁整體可以看到,多了輔助色灰色,令該頁面層次感更豐富,過渡更柔和,空間感覺增強。左上部點睛色白色塊面的網頁寄存運用,使得這種空間感差距拉大,增強視覺層次感,同時突出標誌品牌、主題思想。另一作用在於突出文字的功能運用。   背景深灰色明度非常低,接近於黑色,稍不留心有可能會被忽略。結合輔助色灰色再整體上看該色配色,主要起到豐富視覺層次感,緩和主色調黑色有可能帶來的僵硬感。     結論:   黑白灰非色彩色調所構成的頁面較具特色,尤其灰色的加入更增添層次感。   結合黑白圖形,營造出一段古典的故事場景。契合該網站所體現的內容思想。   黑色系分析:黑色背景    背景黑色下,除了白色,還有其他三種顏色綠色、紫色、紅色分佈在不同的位置。其中網頁設計模板綠色和紫色雖然被稱之為輔助色,但它們使用的面積仍然不多,只是相對於點睛色紅色來說。綠色主要是用於文字方面,紫色用於圖形方面,所指向的分工明確。從RGB模式RGB三個數值上看到紫色混合數值上較接近,因此純度降低,相對於綠色紅色來說為中間色,色彩性能上呈低調緩和狀態。    HSB模式S數值來看,綠色雖然純度上比紅色稍低些,也許是因為使用面積較多的原因,看起來似乎比紅色醒目些。紅色在這裏主要起到的是點明目前所屬的狀態這一功能性作用,在黑色的背景下儘管使用面積非常小,但依舊容易被流覽者注意到。      結論:   黑色的背景下所使用的顏色面積雖然不多,但由於黑色這一襯托放大的特性,其他顏色較容易引起流覽者的注意,充分發揮其設計意圖。   黑色系分析:(黑白淺灰)    從RGB數值都是234來上看可知,255為白色,網上商店背景色234只是在明度上稍做變化得到的淺灰色。背景的淺灰色把前景的白黑對視覺的刺激力變得柔和協調很多。雖為背景灰色,實際在整個頁面配色作用上起到了點睛之筆,使得頁面煥發出另外一種神秘且特殊的氣息。   該頁面無論從設計上還是配色上都非常簡潔,主要是以黑白文字為重點,背後的白黑色塊面粗、白色邊框線條無不是為了突出前景文字的作用。      結論:   該頁面設計風格極其簡約,除了方形塊面邊框,沒有多餘的圖形修飾,主要是以文字的大小粗細、疏密間距排版為設計元素。   淺灰色的加入讓本來具強烈衝突色的黑白變得素雅些了,也頗具高層次格調許多。   黑色系分析:黑色+少量彩色    該頁面基本上還是以黑色為主色調,雖然似乎多了不少顏色的加入,但是由於使用面積都CMS較少,除了少許修飾外主要運用於功能文字方面的強調。   輔助色藍色正藍色的HSB模式的H應該是240,目前這顯示的是215可看出色相上稍向綠色靠近,S93%B43%來看純度和明度都不高,因此該藍色在黑色上顯示不明顯。   這裏的點睛色主要都運用在文字功能上,紅色幾乎是正紅,由於降低了純度和明度,該顏色不明顯。綠色H數值為149,正綠色為120,色相上稍向藍色傾斜,純度和明度不高,因此該顏色也不明顯。      結論:   低純度低飽和度的色彩在黑色背景下,較易使整體色彩達到統一的目的,顏色變得柔和而含蓄。   黑色系分析:(黑色配色:黑色+橙色)    橙色的HSB模式H色值顯示是25,而正橙色是30可以知道,該橙色色相電郵服務上稍往黃色傾斜。我們通過前面的學習可以知道橙色適用於視覺要求較高的時尚網站,運用於該網站主題設計再適合不過了。另一點睛橙色在色相上稍偏橙紅色,是基於橙色的一個過渡或者說是增加視覺節奏感的一個小方法。右邊文字在不同程度上也使用了橙色做為點睛,稍平衡了左右視覺,起到色彩左右呼應的作用。   輔色調白色使得黑色和橙色的搭配上不至於太生硬,增強頁面視覺的愉悅感。      結論:   橙色在黑色的背景上顯得很鮮亮,它的特性得到了最大化的發揮。   黑色系分析:(黑色配色:黑色+紅色)    輔助色紅色從HBS模式上的H為0度看出,該紅色為正紅色且純度明度都為最高值100%,在黑色這一背景的襯托下,高純度高明度的正紅色遇到黑色搭配結合而得的特性簡直發揮到了極致。因此該頁面色彩配色具有極強的視覺衝擊力。   點睛色白色是讓這兩種顏色配合起來更透亮,緩和對人視覺不適的壓迫力。   儘管頁面的設計元素為噪音效果,顏色在不同面積分配上也參差不齊的感覺,但是電子商務由於黑色主色調為背景,牢牢掌控了全局,頁面設計及配色上也能達到統一的目的。   結論:    紅色和黑色的搭配被譽為商業的成功色。一是因為紅色是一種對人刺激性很強的顏色,是最鮮明生動的、最熱烈的顏色。在黑色的反襯下鮮明紅色極容易吸引人們的目光。紅色相對於其他顏色,視覺傳遞速度最快。   紅黑這兩種配色也被廣泛的運用於較能體現個性的時尚類網站,讓人印象強烈的深刻。   本部分小節:       ● 黑色是最暗的顏色,是純度、色相、明度最低的非彩色。因此網站排名它較容易起到襯托和發揮起其他顏色的特性,是最有力的搭配色。    ● 黑白色的搭配較充滿個性,合理運用能散發出另外一種迷人的高品位高格調的貴族氣質。黑色與橙色搭配較容易營造視覺要求較高的時尚網站。黑色與紅色的搭配被譽為是商業的成功色,具有極強的視覺衝擊力。    ● 無論頁面上使用或者色相跨度大的多種顏色、或是高純度低純度、或者高對比的顏色,只要有黑色這一最得力的色彩為主色調掌控著,頁面設計配色上能得到和諧統一的效果。

巧妙用文字給你設計的Web Design“注入情感”

Google的運氣不錯按鈕,據Google一VP講它很重要,可以增加Google搜索機器的一點網頁設計“人”情味兒。   不過,我已經忘記了自己有沒有點過。我來搜這個相關的資訊,您這麼牛,趕緊幫我找出最相關的那些來就,誰要賭什麼手氣啊,難道手氣就能搜到,手氣不就搜不到? 百度:   百度沒有這麼幹,但他們把“搜索”按鈕改成了“百度一下”,不稀奇?   用戶會想:這百度一下幹什麼的啊?點一下會怎樣?點了之後,用戶看到了網站建設搜索結果,找到了答案。哦!不知道的問題,百度一下,就知道了。。百度一下,你就知道,這正是百度的標語(Slogan)。百度的這一設計,巧妙的將品牌因素注入了用戶真實的交互體驗中。讓他們親身體驗去呼應出百度的品牌標語。 Flickr:   但是今天的題目是關於情感化設計的,Google並沒有喚起我有某種賭運氣的熱情,百度了,似乎也平平淡淡,無所謂情感呼籲。但是,Flickr卻一直在嘗試用文字去表現其個性:   每次Flickr都會變著花招的跟登錄進去的用戶打招呼。這次用的是荷蘭語網頁寄存,嘿嘿,還帶了點教育成分,現在你知道怎麼用荷蘭話打招呼了吧(Now you know how to “hi” in Dutch!)。這個沒什麼意思吧似乎?放在本地的中文網站,搞這套自然沒有大意思。可別忘記了context是Flickr的國際化,每天來自世界各地的用戶互相流覽對方的圖片,語言正是一個溝通重要因數~現在Flickr每天就像個可愛的鸚鵡一樣,你逗我來,我逗你。   面對Flickr的八國語言問,也許CMS你會淺淺一笑,也沒有太多什麼情感體現啊。但下面這個頁面出來時,我真的樂了:   每天關心Feed訂閱量的blogger們,有一天再次打開Feedburner這個統計網站,原本只有“我的Feeds”的標籤,突然赫然網頁設計模板寫了一句:我的Feeds是無敵的!我都不意思了,這簡直就是拍馬屁嘛,不過,這個這個,我還真的希望自己的Feeds萬眾愛戴,這馬屁我還真喜歡。   再登錄一次,發現上面換了一句:我的Feeds訂閱量正在雨後春筍般的增長!哈哈,雖然知道這只是美的願望而已,但還是覺得樂了~每次登錄,都有一個耀眼的鼓勵讓你繼續努力,讓My Feeds更~ 用一句話,為你的用戶製造一個美的夢想,激勵他們為了夢想電子商務堅持努力,善莫大焉。   設法讓用戶happy吧~只要你的設計讓用戶樂了,產品的個性就得到了一次彰顯,而用戶對網站的情感就會獲得一次昇華。

UI網頁設計探討:雅虎韓國站點設計

最近在做Yahoo!某專案,抽空比較系統的遍曆了Yahoo!全球網站。   Yahoo!韓國是亞洲設計最的門戶之一,曾經對Yahoo!同事和外邊朋友都提過,他們也基本上表示認同。至於哪些方面,最近和瀟瀟、老葉又分別討論了一次網站建設,歸納部分個人觀點。(看不懂韓文?沒關係,網路無國界,UI更無國界。)   氣質   極簡風格的處,在於能最大化的呈現有用資訊給用戶。弊端也很明顯,不能良的引導用戶。所以一味極簡的後果就是發白,白開水一樣的白。   典型如Auto, Vod之類視覺導向很明確的風格,可以通過三眼原則簡單判斷是否網頁寄存優秀,也可以嘗試把頁面縮小到40%,看整體效果,試試還能否分辨出模組。   色彩   韓國網站用色一向以大膽奔放著稱,但作品往往讓用戶感覺不到它的花哨和刺眼,因為這些色彩已經完美融合到了介面裏,讓用戶在享受服務的同時,也能感受到一絲溫暖。   比如Travel這個頁面色彩很豐富,但一點都不亂,反而有良層次感和Web Design秩序感。   圖形   高水準插畫是前提,關鍵,還需要把插畫恰如其分的呈現在頁面上,小到Icon,大到模組,甚至整個頁面,可不是容易的事情。   看到Happy Photo的第一感覺是到了遊樂園,仔細看看,CMS園內的小朋友們都在進行拍照,再結合標題,於是我明白了這個頁面所表達的主題。從插畫到照片,還有三個按鈕,都屬精品。   動畫   Yahoo!韓國的Logo像一直都是flash動畫,雖然沒按套路出牌,但我覺得也蠻符合他們的設計理念,而且這些動畫都很精美,成為一道獨特的風景線。   全站使用量偏大,品質不需要再吹捧,網站排名水準普遍較高。   可用性   主要是呈現方面的可用性。   比較有代表性的Finance, Fortune, Gugi三個頁面導航,網頁設計公司雖然視覺不同,但呈現邏輯統一,給用戶的位置感很,注意細節處理:陰影層次感、色彩高亮對比、文字大小對比。   總的來說Yahoo!韓國的各頻道首頁設計都很優秀,對國內做相關主題的專業網站來說,也是很的參考和示範,比如汽車Auto,旅遊Ttravel、影視Vod等。

淺議Web Design Form表單設計技巧

“輸入框( Input )應當符合邏輯地劃分為小組,網頁設計這樣大腦就可以很的處理大堆區域間的關係。” ——《HTML權威指南》 Web 應用程式總是利用表單來處理資料錄入和配置,但並不是所有的表單都保持一致。輸入區域的對齊方式,各自的標籤(label),操作方式,以及周圍的視覺元素都會或多或少影響用戶的行為。 表單佈局 考慮到用戶完成表單填寫的時間應當盡可能的短,並且收集的資料都是用戶所熟悉的網頁寄存(比如姓名、位址、付費資訊等),垂直對齊的標籤和輸入框可以說是最佳的。每對標籤和輸入框垂直對齊給人一種兩者接近的感覺,並且一致的左對齊減少了眼睛移動和處理時間。用戶只需要往一個方向移動:下。 在這種佈局中,推薦使用加粗的標籤,這可以增加它們視覺比重,提高其顯著性。如果不加粗的話,從用戶的角度講,標籤和輸入框的文字幾乎就一樣了。 如果一個表單上的資料並不為人熟悉或者在邏輯上分組有困難(比如一個位址的多個組成部分),左對齊的網站建設標籤可以很容易的通覽表單的資訊。用戶只需要上下看看左側一欄標籤就可以了,而不會被輸入框打斷思路。但這樣一來,標籤與其對應的輸入框之間的距離通常會被更長的標籤拉長,可能會影響填寫表單的時間。用戶必須左右來回的跳轉目光來找到兩個對應的標籤和輸入框。 於是產生了一種替代的方案,標籤右對齊佈局,使得標籤和輸入框之間的聯繫更緊密。然而結果是左邊參差不齊的空白和標籤讓用戶很難快速檢索表單要填寫的內容。在西方國家,人們習慣于從左至右的書寫,所以這種右對齊的佈局就給網頁設計模板用戶造成了閱讀障礙。 借助視覺化元素 由於網頁設計公司“標籤左對齊佈局”的優點(方便檢索並且減少垂直高度),嘗試糾正它的主要缺點(標籤和輸入框的分離)就很誘惑人。 一個方案就是增加背景色和分割線,不同的背景色產生了一列垂直的標籤和一列垂直的輸入框,每一組標籤和輸入框利用清晰的水平線分開。雖然這聽上去不錯,但是還是會存在問題。 對比之前的形態(用戶主觀的視覺區分),這增加了15個視覺元素:CMS中間線、一個個有背景色的單格以及一條條的水平線。這些元素會轉移用戶的視線,讓用戶難以聚焦到一些重要的元素上,比如標籤和輸入框。 正如 Edward Tufte 指出的:“資訊本身存在差異,必然產生感官上的不同。”換句話說,任何對佈局無用的視覺元素都會不斷地擾亂佈局。當你試著流覽左側的標籤就可以發現,你的視線總是被打斷,停下來想那些水平線、單格和背景顏色。 當然這並不意味著放棄背景色和線條。它們對於電子商務劃分相關區域資訊還是很有效的。比如一條細水平線或者一個淺淺的背景色,都可以從視覺上組合相關資料。背景色和線條對於區分表單的主要操作按鈕尤其有效。 主次操作 一個表單的主要操作(通常是“提交”或“保存”)需要一個比較強的視覺比重(在上面的例子裏用了亮色調、粗字體、背景色等等)。這相當於給用戶一個提示:您已/即將完成填寫表單。 當一個表單有多個操作,比如“繼續”和“返回”,那有必要減輕次要操作的網站排名視覺重量。這可以最小化用戶潛在的操作錯誤的風險。 雖然以上內容可以更的讓你設計表單,但是組合佈局、視覺化元素以及內容,仍然需要經過用戶的測試以及資料分析(完成度評估、錯誤報告等)。

Web Design常用Web圖像格式簡述:png/svg

PNG是一種可攜式網路網頁設計圖像格式。PNG一開始便結合GIF及JPG兩家之長,打算一舉取代這兩種格式。1996年10月1日由PNG向國際網路聯盟提出並得到推薦認可標準,並且大部分繪圖軟體和流覽器開始支援PNG圖像流覽,從此PNG圖像格式生機煥發。 IE流覽器從4.0版本開始支援png圖像流覽。 特點1:兼有gif和jpg的色彩模式。 我們知道gif格式圖像採用了256色以下的index color色彩模式,jpg採用的網站建設是24位元真彩模式。png不僅能儲存256色以下的index color圖像,還能儲存24位元真彩圖像,甚至能最高可儲存至48位元超強色彩圖像。 特點2:png能把圖像檔壓縮到極限以利於網路傳輸,但又能保留所有與圖像品質有關的資訊。 如果你的圖像是以文字、形狀及線條為主,png會用類似gif的壓縮方法來得到較的壓縮率,而且不破壞原始圖像的任何細節。據國際網路網頁寄存聯盟測算,八位元的png圖像比同位元的gif圖像就小10%到30%。 而對於相片品質一類的壓縮,png則採用類似jpg的壓縮演算法。但是jpg壓縮程度越大、影像的品質越差。因為它的壓縮是採用的是破壞性壓縮法、每次壓縮的同時便多多少少漏掉一些圖元。 png不同於jpg的地方在於:它處理相片類圖像亦是CMS採用非破壞性壓縮,圖像壓縮後能保持與壓縮前圖像品質一樣,沒有一點失真。 特點3:更優化的傳輸顯示。 熟悉gif格式的圖像處理者知道,gif圖像有兩種模式——normal(普通)模式和interlaced(交錯)模式。interlaced模式更適用於網路傳輸。在傳送圖像過程中,流覽者先看到圖像一個大略的輪廓然後再慢慢清晰。png也採取了interlaced模式,使圖像得以水準及垂直方式顯像電郵服務在螢幕上,加快了下載的速度。 特點4:支援圖像透明顯示。 gif格式雖然也支援透明顯示,採用gif格式透明圖像過於刻板,因為gif透明圖像只有1與0的透明資訊、只有透明或不透明兩種選擇,沒有層次;而png提供了α頻段0至255的透明資訊,可以使圖像的透明區域出現深度不同的層次。 png圖像就可以讓圖像覆蓋在任何背景上電子商務都看不到接縫,改善gif透明圖像描邊不佳的問題。 特點5:相容性較。 png被設計成可以通過網路傳送到任何機種及作業系統上讀取。 文字資料(如作者、出處)、儲存遮罩(MASK)、伽瑪值、色彩校正碼等資訊均可參雜在 png圖像中一起傳輸。 幾個發現: 不透明和索引色透明的圖片, png8比gif更加具有優勢。 Alpha透明的圖片,png8比gif顯示效果,但檔更大。 png24沒有透明效果:包括索引色網站排名透明和Alpha透明。 不同的流覽器,顯示效果不一樣。 Firefox:支援png8的索引色透明度, png8 和png32的alpha透明度。 IE:支援png8的索引色透明度,但不支持png8和png32的alpha透明度。(可用Js+css濾鏡解決) 網頁中使用的照片類圖片,jpg檔一般比png24要小很多。但不排除特殊情況。 SVG 圖像格式 SVG是種一種可縮放的向量圖形。它是基於XML,由W3C聯盟進行開發的。嚴格來說應該是一種開放標準的向量圖形語言,可讓你設計激動人心的、高解析度的Web圖形頁面。 用戶可以直接用代碼來描繪圖像,可以用任何文字處理工具打開SVG圖像,通過改變網頁設計公司部分代碼來使圖像具有交互功能,並可以隨時插入到HTML中通過流覽器來觀看。 SVG提供了目前網路流行格式GIF和JPEG無法具備了優勢:可以任意放大圖形顯示,但絕不會以犧牲圖像品質為代價; 文字在SVG圖像中保留可編輯和可搜尋的狀態;平均來講,SVG檔比JPG和GIF格式的檔要小很多,因而下載也很快。

2013年7月28日星期日

用戶介面討論:網頁設計中超鏈結的下劃線

關於Web Design超鏈結中的下劃線這個及細節的問題,想必大家都有過討論和思考,最重要的原則即:讓使用者清楚的區分超鏈結文本和其他文本形式,並潛意識知道可以點擊。但對於是否可以潛意識知道可以點擊,還是有爭議的,不同的人,不同的環境會有不同的見解。   不妨分幾個場景討論一下:   1. 導航區域,潛意識網頁寄存我會去點擊。   即便有下劃線也是個“古老形式”的擺設,所以一般沒有下劃線;好的設計不僅滿足點擊,還滿足視覺的層級關係。   2. 整頁全是鏈結,下劃線成了可有可無的網頁建設表現。   象新浪、搜狐首頁都是可以點擊的,所以下劃線的有無意義也就不大,貓撲在首頁設計中就去掉了可有可無的下劃線。(下圖自上而下依次為:新浪、搜狐、貓撲。)   3. 可以點擊嗎?別讓我去猜!   看下面的設計抓圖,只有Google和百度的設計我沒有疑惑,其他兩個CMS的設計我要自己去猜。   4. 在超鏈結和文本混排的情況下,下劃線更容易讓我們去點擊。   5. 獨立超鏈結,不加下劃線不足以“明示”。   6. 需要特別突出顯示的鏈結,必要的時候網頁設計公司使用“偽按鈕”。   關於偽按鈕的問題,臭魚在其接受偽按鈕已闡述的比較明確,在此不再贅述。   說明:大家根據具體的環境而定,目的是讓超鏈結更容易被潛意識的點擊,避免過多的嘗試和思考而浪費流覽者更多的時間。   附:超鏈結的作用    囉嗦一下基本概念,所謂的超鏈結是指從一個網頁指向一個目標的連接關係,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置,還可以是一個圖片,一個電子郵件位址,一個檔,甚至是一個應用程式。而在一個網頁中用來超鏈結的物件,可以是一段文本或者是一個網站排名圖片。當流覽者單擊已經鏈結的文字或圖片後,鏈結目標將顯示在流覽器上,並且根據目標的類型來打開或運行。   超鏈結的基本分類:   按照鏈結路徑的不同,網頁中超鏈結一般分為以下3種類型: 內部鏈結,錨點鏈結和外部鏈結。   如果按照使用物件的不同,網頁中的鏈結又可以分為:文本超鏈結,圖像超鏈結,E-mail鏈結,錨點鏈結,多媒體檔鏈結,空鏈結等。

視覺Web Design方法與過程討論:用理性說話

想像一下這樣的場景:你參與了一個新產品的網頁設計,並提交了一系列的視覺設計方案。在評審會上,每個人的眼光都轉向坐在房間另一頭的某位領導,“我不喜歡橙色。”這位領導突然抬起頭來說,於是整個評審會突然就亂了章法,過了一會兒,你痛苦地發現大家正在熱烈討論的,居然是“介面中的方塊太死板了,能不能用圓形代替?”這類本不應該討論的問題。   如果你就是這樣的一個視覺設計師,你一定也有過類似的痛苦經歷。但是為什麼一群看起來頭腦清楚的成年人總是無法在視覺評審會上保持同樣的理性呢?答案很簡單,由於缺乏對視覺方案產生的前因後果的瞭解,大部分與會者只能憑著自己的主觀直覺而不是客觀分析來評估它們。   為什麼這個過程中存在這樣的主觀性呢?視覺傳達,是一門很微妙的語言,甚至超過了網站建設文字語言。即使在最簡單的應用中也存在著語氣和風格的豐富變化。就像有句話說的,一幅畫勝過千言萬語,而這正是問題的起源。千言萬語──尤其當它們都是不對的時候──就有可能造成一場災難。   視覺設計過程基本上由一系列決定構成,這些決定最後產生了一個策略,然後再由此定義出一個視覺系統,這個視覺系統通過提升細節和清晰的程度來最大化地滿足這個策略。依賴主觀判斷來做出這些設計決定是災難性的,同時也會導致這個被團隊集體通過的設計方案難以得到用戶的認同。   用研究和人物角色來強化視覺設計過程   正確的設計流程,能使你將主觀性和猜測的網頁寄存影響降到最小。客觀代替主觀的第一步是從“研究”開始的。這通常由交互設計師主導一些研究,從用戶行為方面來瞭解商業和用戶的目標,視覺設計師可能不會被邀請去參加與相關人員的談話和研究用戶的課題。可無論如何,視覺設計師都適當地參與這些研究,將有助於成功地用這些知識來武裝自己。   與相關人員的溝通   作為視覺設計師,你在專案會議期間的主要任務是理解公司的傳播目標、品牌策略,以及在整個競爭環境中的地位。同時,理解關鍵決策人對於這種產品的審美期望也是很必要的。最後,你還需要知道哪些成員將要參加你的視覺評審會。   理解公司目標和品牌策略,可以從市場或品牌傳達部門去瞭解公司網頁設計模板歷史和現狀。你同時也需要去發掘公司的未來的目標和它在行業中應該得到的位置,這將為你提供一個設計視覺系統的主體方向。   閱讀品牌指南、風格指南和近期的市場行銷資料,對於建立一個更綜合的市場目標和公司立場的概念是非常有用的(記住要弄清楚這些指南是否是最新和最相關的,因為你拿到手的很可能是一份過期,或是與現在的情況不一致的文檔)。   與相關人員多溝通,比如產品或市場經理,去理解他們的觀點、瞭解能幫助你成功地搭建起項目框架的網上商店因素。另一件需要做的事情是去理庥Ω貿氏指沒У慕緱嬤凶釵丶氖泳醺拍瞟ぉび繞涫欽飫銼籆ooper稱為experience keywords(本文後面會提到)的概念。在這個期間,你的目標是從各個相關部門收集關鍵字,以幫助你確定設計模式。   下面是你可以提出的一些問題:   如果這個介面是一個人的話,他或她看上去是什麼樣的?   當用戶第一次看到這個CMS產品時,你希望他有什麼樣的反應?   這個產品和競爭對手的產品有什麼不同?   這個產品和哪個著名人物(或汽車、電影等等)最相像?最不像?為什麼?   這些問題應該在溝通時及時提出,並鼓勵你的談話物件從情感方面講述她對這個產品的一些觀點。在探討這些問題之前記得觀察對方的反應,因為大部分人可能不太感興趣,或者缺乏恰當辭彙去描述這些觀點。比如,如果一個負責架構設計的人只對資料庫系統和產品的技術結構感興趣的話,你去問他這個介面應該長成什麼樣就純屬浪費時間。   不久前,我們設計了一個醫用設備,這個設備能幫助老年病人在自己的家中監測自己的健康狀況。我們從相關人員處獲悉,如果它和上門服務的護士有相似的特徵時,用戶更容易接受這個產品。於是我們根據瞭解到的知識,把這個設備的語氣和風格設計成一種體貼、有責任心和可信任的感覺。   與相關人員溝通的最後一件事是確定團隊中的哪個成員將參加電子商務視覺評審會。詢問團隊負責人將安排哪些人去參加這些會議。太多的人參加會議將很難管理(我們建議6個人或更少)。最好是幾個關鍵的成員參加,比如專案經理和產品經理,以及來自市場或品牌團隊的員工。如果有一位與用戶有過密切接觸的代表,比如一名銷售或培訓師來參加評審會則會更好。你應該邀請一位來自開發團隊的員工,作為技術代表來評估這些設計方案的技術可行性。記住讓團隊的其餘成員保持資訊的同步。   研究用戶   用戶訪談提供了一次驗證團隊成員假設的機會,通過用戶訪談你還可以瞭解更多關於用戶和公司以及其產品之間的情感上的聯繫。另外,訪談也提供了一個造訪用戶所處環境的機會,可以直接瞭解當用戶在和你的產品進行交互時,有可能遇到的挑戰。這是一次非常有價值的Web 3.0實踐,照片或任何第二手資料都無法代替。眼見為實。   交互設計師和視覺設計師在用戶研究階段所尋找的是不同的模式,理解這一點是非常重要的。舉例來說,交互設計師想找出的是工作流程、心智模型、任務的優先順序別和頻率、障礙點等等,而這時候,視覺設計師應該尋找以下模式:   用戶特徵(比如,身體缺陷,尤其是視力);    環境因素(燈光、用戶和介面之間的距離、顯示器上的保護膜);   品牌中有可能引起用戶共鳴的因素;   用戶對體驗的期望。   將影響你的設計的兩個最常見的網站排名用戶特徵,是視覺和身體上的缺陷。比如,供糖尿病人(通常也有一些視力上的問題)使用的血糖儀,常常出現文字的尺寸太小、圖示不夠清晰等設計,這使得病人飽受其苦。如果你曾經看到一個老年用戶在努力辨認網頁上12個圖元的Verdana文字的話,那麼他很容易就會忽略在書本上出現的7個圖元的文字。而針對行動困難的人士的產品,他們的身體缺陷對設計的影響就更大了,因為這意味著他們的產品上的按鈕需要更大的距離和尺寸。   當設計用戶介面時,用戶的應用環境也是考慮因素之一。照明環境或產品的位置,都可能對介面的設計方案有著戲劇性的影響,尤其是尺寸和對比度。在一個外科手術室中,我們發現顯示器離用戶有六英尺遠,同時還覆蓋了一層塑膠布。很明顯我們需要設計一個字體很大對比度很高的介面。相反地,另一些介面,比如手機,是那種既可能在戶內也可能在戶外使用的設備,則需要一種在完全不同的照明環境中都可用的靈活設計。   通過一些人體測量學的資料的幫助(比如The Measure of Man and Woman: Human Factors in Design by Alvin R. Tilley, Henry Dreyfuss Associates),你可體驗到獨特的用戶和環境因素,這有助於設計出一個適用於不同身材的Flash製作產品。   就之前提到的家用醫學設備而言,我們造訪了一些用戶的家庭,並做了訪談。我們發現病人的年紀一般都比較大,同時大部分都在客廳都放了一把舒服的椅子,它緊挨著用來放置類似設備的桌子。用戶的身體都不太好,同時還有視力和聽力的問題。他們通常把設備放在一伸胳膊就能夠著的地方。我們的設計方案把這些環境因素都納入了考慮之中,包括足夠大和高對比度文字的視覺風格,以及可選擇的聲音提示。   除了理解用戶和環境因素之外,花一些時間去討論品牌和個性是很重要的。你應該詢問用戶,關於他們與你的公司或競爭對手的過往經歷(如果你能分享這些資訊的話),這樣你可以評估這些資訊和團隊中的假設是否一致。你可以詢問用戶類似這樣的問題:   X公司與其他同類型的公司有什麼不同?    你為什麼覺得這個產品或公司很特殊?   你希望X公司有什麼不同?   你也應該花一些時間理解介面應該具有的個性。在The Media Equation,Byron Reeves和Clifford Nass寫了一篇文章,提出一個觀點:“人們實際上是像對待真正的人類一樣對待電腦的,所以需要用人類的個性特徵來考慮電腦的回答。”就像與同事的溝通一樣,你可以問用戶一些類似這樣的問題:   如果介面是一個人的話,它會像是什麼樣的人?    你會如何向朋友描述這個產品?   這個產品與競爭對手的產品有什麼不一樣?   再次強調,這些問題本身並不能提供給你所有的搜索引擎排名答案,但是它們使你能夠得到一個與用戶有關的、關於視覺設計方面的綜合結論。不要僅僅問:“什麼樣的視覺方案更好一點?”因為與你的同事相比,用戶更難用有效的辭彙來描述他們在外觀上的想法。相反地,你可以提供一些例子作為引導,比如:“如果我的電話是一個人的話,我希望它是有禮貌、聰明和友好的。”與用戶進行視覺設計和品牌的交談可能有一定的挑戰性,但是它能提高你的視覺方案的成功率,因為你更多的是基於與用戶有關的故事來設計,而更少依賴於專案中某些專家的意見。   以那個家用醫學監視器的例子來講,我們詢問了病人關於“一個好護士應該是怎樣的?”問題,並收集到一些像這樣的特徵:幽默、關注、善於聆聽、落落大方、親切、能幹、自信、可靠,以及樂觀等等。這些辭彙在稍後的視覺設計流程中將用於建立設計策略。   形成視覺策略   一旦你完成了上面這些研究工作,你就可以分析這些結果並確定模式了。在這裏,你將得到關於用戶的資訊、他們的環境、潛在的experience keywords以及品牌需求等。   首先,將你從研究中得到的結論應用到人物角色上,以確定所有情感或行為上的模式。交互設計師會專注于特定的人物角色的目標、背景和觀點,而視覺設計師則應該注重於情感化,以及用戶和環境的因素等方面。   在最近的一個“富消息應用”的專案中,我們基於用戶研究創建了一個人物角色,她對於不認識的人發送的郵件具有很強的警惕性,因為她聽說過很多關於電腦病毒的報導。這種情緒會直接影響到介面的設計,因為為了滿足這類人物角色對於“安全感”的需求,介面必須在web site design第一眼就讓人感覺專業和可信任。   Experience keywords(體驗關鍵字)   當人物角色被創建出來以後,列出從相關設計人員和用戶訪談中得到的所有描述性的辭彙或概念,並將其分組。這些辭彙組合正是形成一套“體驗關鍵字”的基礎,將用於確定和管理視覺策略。   這些在研究期間收集的辭彙幫助我們確定了“體驗關鍵字”的核心,我們可以用來驅動整體的視覺策略。我們通常把這些辭彙列表統一成3個或5個概念組合,然後最終發展成一套“體驗關鍵字”。   “體驗關鍵字”描述的是這個人物角色在看到介面時,“最初五秒鐘”的情感反應。考慮這種最初反應有兩個好處。首先,通過提供一種積極的第一印象和持續的情感體驗,它可以強化公司的品牌。其次,對於用戶是否接受這個產品和忍受某些不足,它具有重大的意義。研究表明,具有美感的設計被認為比很少有美感的設計更有用(這被稱為美感可用性效應)。同時,當人們喜歡使用它們的時候,介面就會變成更可用(見Donald Norman在《Attractive Things Work Better》中的報告;或更好的方式,聽聽關於新上市的iPhone的新聞)。   保證這些“體驗關鍵字”同樣也適用於你的團隊和一些關鍵成員。可信任和從視覺上描述的關鍵字有助於推動視覺策略的討論。選擇你將用於描述某個人的“體驗關鍵字”;這樣的方式能讓你的觀眾容易接受。你最終確定的那套“體驗關鍵字”看上去應該像下面這個圖:   在上面這個例子中,有四個體驗關鍵字:體貼、謙虛、有責任心和善於引導。其他的關鍵字都是在闡述它們的含義。用圖片或其他形象的支援方式也同樣有效。   一旦團隊達成共識,體驗關鍵字將為視覺設計指出一個明確的方向。“體貼”直接反映在介面上可能就成為柔和的色彩和形狀,而“善於引導”則描述了一個對比度更強和線條更明確的介面。   現在你擁有了客觀武器:人物角色、體驗關鍵字、品牌需求等標準,網頁設計公司這也意味著你得到了一個用於決定視覺設計的堅實基礎。你現在可以提供一個更加深思熟慮的視覺設計方案了,它能得到更切合實際的回饋。現在,當產品經理抱怨橙色的時候,你就可以提醒他這個設計是基於某個人物角色的最佳體驗關鍵字做出的,而這些關鍵字早就得到了大家的首肯,從而讓他遠離自己的主觀臆斷。   另外,擁有相關成員和用戶訪談中的上下文資訊,將有助於你更集中、更適宜地針對那些將使用你的產品的人確定最初的設計概念。

網頁設計配色應用實例剖析——灰色系

灰色介於灰色和白色之間,中性色、中等明度、無色彩、極低色彩的顏色。灰色能夠吸收其他色彩的活力,削弱色彩的對立面,而製造出融合的Web Design作用。 灰色是一種中立色,具有中庸、平凡、溫和、謙讓、中立和高雅的心理感受,也被稱為高級灰,是經久不衰、最經看的顏色。 任何色彩加入灰色都能顯得含蓄而柔和。但是灰色在給人高品味網站建設、含蓄、精緻、雅致耐人尋味的同時,也容易給人頹廢、蒼涼、消極、沮喪、沉悶的感受,如果搭配不好頁面容易顯得灰暗、髒。 從色彩學上來說,灰色調又泛指所有含灰色度的複合色,而複合色又是三種以上顏色的調和色。色彩可以有紅灰、黃灰、藍灰等上萬種彩色灰,這都是灰色調,而並不單指純正的灰色。 下面我們根據灰色搭配不同的顏色所表現出的視覺特性,做一些不同的舉例分析網頁寄存。 灰色系分析:(明度淺灰色) 從頁面所呈現的明度色調來看,整個頁面偏淺灰色調,柔美高雅的灰調子。 主色調及背景色是接近於明度白色且非常淺的灰調,輔色調的灰調子明度上較主色調稍深些,另一輔色調為白色。 RGB模式顯示點睛色紅色R217及G9來看不是正紅色,在如此灰調子的CMS頁面來看,如果不參考RGB模式肉眼幾乎看不出來。如果沒有點睛色的加入整個頁面呈毫無生氣的灰色系,略有些髒的感覺,平淡且乏味,沒能使大家對它產生過多的印象。紅色的特性把以上的這些平淡的感受打破了,讓人願意細品灰色所帶來的悠長韻味。 HSB模式的B也能看出淺灰色在明度上較高,部分漸變的深灰色在頁面上所佔用的面積也不少,另一點睛色黑色的作用就是使明度色階跨度加深、明確,整個頁面呈現灰濛濛的感覺得以減弱。 結論: 該頁面整個看起來也可以說只有兩種色彩搭配,即非色彩系黑白灰和色彩系紅色,頁面顯得非常簡潔而含蓄。點睛色的加入減少了非色調淺灰色有可能產生的單調感覺。 灰色系分析:(同類灰色系:灰色+橙色) 該頁面主要以大面積的灰色系列為主,網頁設計模板主色調為背景色非常明確。部分灰色只在明度上加深了,增強灰色的空間感。 從RGB所呈現的均衡數值及HSB模式的HS都為零來看,主色調的淺灰色屬於非常純淨的非色彩,沒有摻雜其他色系進去。而輔色調的兩個模式上就有些差異,HSB模式的H顯示180度色相上偏青藍色,有及其微弱的飽和度,明度也較低。點睛色壬獺SB顯示為正桔紅色且飽和度和明度都為100%,應該是及其耀眼的顏色,然而在大面積背景主色調下,此種耀眼的顏色得到緩解,這正是與灰色的配色後顯示出灰色最強烈的特性--削弱緩和刺激耀眼的顏色。 點睛色橙色和白色點綴下打破了平面平淡的配色格局,眼前頓時一亮的感覺。 結論: 灰色調非色彩所構成的頁面頗具有獨特的魅力,整個頁面呈現出平穩緩和的氣質。兩個點睛色橙色和網上商店白色起到調動配色頁面的作用。 灰色系分析:(同類灰色+多種顏色) 這是一個灰色階變化較多的頁面,形成較有節奏塊面分明的韻律美感。這一變化改善了灰色容易形成的呆板單調特性。 從HSB模式數值來看,主色調輔色調都是非色彩的正灰色,沒有摻雜其他色彩進去。點睛色黃色、綠色H數值上顯示有些色相偏移都略向暖色色環靠近,這兩顏色的特性是屬於較顯眼的顏色。另外兩點睛色粉紅和粉藍色電子商務在色相上已經較接近於正色系,明度較高飽和度降低。這四種顏色儘管所使用的面積非常少,但結合了面積上相對使用較多的非色彩白色,讓整個頁面配色雅致的同時不乏生動活躍。 結論: 不同灰色背景的變化,前景使用面積較少的純淨色點綴,這幾種顏色還同樣出現在右上角產生平衡色彩的呼應作用,整個頁面產生雅致和諧的視覺美感。