導航:首頁 > 萬維百科 > 網頁界面設計藝術教程

網頁界面設計藝術教程

發布時間:2020-08-30 19:18:28

1、電腦藝術設計課程是什麼

要課程有:三大構成 photoshop 3Dmax clourdraw 等等社會實踐:造型能力(素描、色彩、構成)、平面設計能力( 圖形、圖像、排版、專業及數字攝影、印刷基礎)、 三維動畫製作能力(廣告、視頻動畫的創意與製作)、多媒體編輯、 視頻後期編輯能力(數字攝像、數字與模擬信號轉換、實拍、動畫、 聲響數字化合成)、網路(網頁設計與站點訪問)、 廣告與電視片頭製作能力。 就業方向:適於在節目製作方向和其他影視製作單位、廣告公司、 事業或企業單位電視會議、網上交易技術員、 電腦和視頻娛樂產品開發公司、 電視台和報社從事相關工作電腦藝術設計專業一、學制:三年專科\ \\\\\\\四年本科 二、專業培養目標: 養為社會主義現代化建設服務的,德、智、體、美全面發展的, 具有一定專業素質的從事建築裝飾、裝潢、包裝、廣告、 平面設計的實用型專業人才。 三、專業基本要求: 掌握本專業必須的基礎理論和專業知識; 能夠運用專業設計的方法與技能,獨立從事建築裝飾、裝潢、包裝、 廣告、平面設計等工作;具有一定的藝術修養和審美能力。 四、專業技能要求: 培養具有電腦藝術設計專業所必須的基礎理論和專業知識, 具有一定的藝術修養和審美能力,能夠這用現代設計手段和方法, 獨立從事建築裝飾、裝潢、包裝、廣告、CI、展示、 網頁界面藝術設計等工作。 五、主要課程: 素描、色彩、制圖、裝飾材料、建築物理、表現技法、裝飾構造、 預算、裝飾施工、3DMAX效果圖、AUTOCAD施工圖繪制、 施工組織與管理、裝飾設計、裝飾電工、PHOTOSHOP、 平面構成、色彩構成、立體構成、標志設計、包裝裝潢設計、 書籍裝幀設計、廣告招貼設計、展示設計、廣告設計、 電腦平面動畫設計、字體設計、繪畫技法表達能力訓練、 電腦設計應用、視覺傳達藝術設計、參觀實習等。 六、畢業去向: 1、各大設計院(建築設計院、交通設計院、紡織設計院、 建築勘察設計院等)、各裝飾公司、廣告公司、出版社、報社等。 2、專升本 3、各大電視台、企事業單位的宣傳部門。 學會要多長時間把我給難住了!呵呵!學習是不可以著急的! 你要是不學的話你一輩子也學不會!要是認真學的話! 在校期間的時間足夠你用的了! -- 2008/08/17

2、怎樣製作一個屬於自己的網頁?

一:確定網站主題

做網站,首先必須要解決的就是網站內容問題,即確定網站的主題。美國《個人電腦》雜志(PC Magazine)評出了99年度排名前100位的全美知名網站的十類題材:第1類:網上求職;第2類:網上聊天/即時信息/ICQ;第3類:網上社區/討論/郵件列表;第4類:計算機技術;第5類:網頁/網站開發;第6類:娛樂網站;第7類:旅行;第8類:參考/資訊;第9類:家庭/教育;第10類:生活/時尚。我們可以參看上面的分類,繼續細分。如果自己在某些方面有興趣,或掌握的資料較多,也可以做一個自己感興趣的東西,一者,你可以有自己的見解,做出自己的特色;二者,在製作網站時不會覺得無聊或者力不從心。興趣是製作網站的動力,沒有創作熱情,很難設計製作出優秀的作品。

對於內容主題的選擇,要做到小而精,主題定位要小,內容要精。不要去試圖製作一個包羅萬象的站點,這往往會失去網站的特色,也會帶來高強度的勞動,給網站的及時更新帶來困難。記住:在互聯網上只有第一,沒有第二!

要領二:選擇好域名

域名是網站在互聯網上的名字。一個非產品推銷的純信息服務網站,其所有建設的價值,都凝結在其網站域名之上。失去這個域名,所有前期工作就將全部落空。

目前,做個人網站的很多都依賴免費個人空間,其域名也是依賴免費域名指向,如網易的虛擬域名服務,其實這對個人網站的推廣與發展很為不利,不光是它「適時」開啟的窗口妨礙了瀏覽者的視線和好感,讓人一看就知道是個人網站,而且也妨礙了網頁的傳輸速度。所以,就我個人觀點來說,首先花點錢去注冊一個域名,獨立的域名就是個人網站的第一筆財富,要把域名起得形象、簡單、易記。

要領三:掌握建網工具

網路技術的發展帶動了軟體業的發展,所以用於製作Web頁面的工具軟體也越來越豐富。從最基本的HTML編輯器到現在非常流行的Flash互動網頁製作工具,各種各樣的Web頁面製作工具,下面是幾款具有代表性的網頁製作器:

(1)HTML編輯器。雖然HTML代碼復雜,編輯和調試要花費大量的時間,但因HTML的穩定性、廣泛支持性及可創建復雜的頁面效果,仍受高級網頁製作人員的青睞。就目前來說,有眾多的編輯器供選擇,這些編輯器廣泛支持復雜頁面創建及高級HTML規范,使用較為普遍的有Hotdog等專業HTML編輯器。

(2)所見即所得的網頁編輯器。其中以Microsoft Frontpage為代表,它具有如Word一樣的操作界面,熟知Word功能的操作者,只要稍加培訓就能輕松編制網頁。而且,Frontpage還能解析網頁的HTML源代碼,並提供了預覽支持。但Frontpage的一些特殊顯示功能並不能在其它非IE瀏覽器下實現。所以Frontpage是一款非常適合初、中級網頁製作人員使用的工具軟體。

(3)現在非常流行的 Macromedia公司出品的Flash互動網頁製作工具。這是是一款功能非常強大的互動式矢量多媒體網頁製作工具。能夠輕松輸出各種各樣的動畫網頁,它不需要特別繁雜的操作,也比JAVA小巧精悍!但它的動畫效果、互動效果、多媒體效果十分出色。而且還可以在Flash動畫中封裝Mp3音樂、填寫表單等;並且由於Flash編制的網頁文件比普通網頁文件要小得多,所以大大加快了瀏覽速度。這是一款十分適合動態Web製作的工具。

另外,個人網站製作者還需了解W3C的HTML4.0規范、CSS層疊樣式表的基本知識、javascript、VBScript的基本知識。對於常用的一些腳本程序如ASP、CGI、PHP也要有適當了解,還要熟練使用圖形處理工具和動畫製作工具以及矢量繪圖工具,並能部分了解多種圖形圖像動畫工具的基本用法,熟練使用FTP工具以及擁有相應的軟硬體和網路知識也是必備的。

當然,互聯網還是一個免費的資料庫。編制網頁需要多種多樣的按鈕、背景還有各種各樣圖形、圖片。如果這些都要靠自己完成,既浪費時間又浪費金錢,而且還需要強大的圖形、圖片製作技術。所以,為了省卻這些麻煩,網站製作者完全可以從網上下載各種精美實用的圖片、按鈕、背景等網頁素材。

要領四:確定網站界面

界面就是網站給瀏覽者的第一印象,往往決定著網站的可看性,在確定網站的界面時要注意以下三點:

①欄目與板塊編排

構建一個網站就好比寫一篇論文,首先要列出題綱,才能主題明確、層次清晰。網站建設初學者,最容易犯的錯誤就是:確定題材後立刻開始製作,沒有進行合理規劃。從而導致網站結構不清晰,目錄龐雜混亂,板塊編排混亂等。結果不但瀏覽者看得糊里糊塗,製作者自己在擴充和維護網站也相當困難。所以,我們在動手製作網頁前,一定要考慮好欄目和板塊的編排問題。
網站的題材確定後,就要將收集到的資料內容作一個合理的編排。比如,將一些最吸引人的內容放在最突出的位置或者在版面分布上占優勢地位。欄目的實質是一個網站的大綱索引,索引應該將網站的主體明確顯示出來。在制定欄目的時候,要仔細考慮,合理安排。在欄目編排時需要注意的是:

●盡可能刪除那些與主題無關的欄目;

●盡可能將網站內最有價值的內容列在欄目上;

●盡可能從訪問者角度來編排欄目以方便訪問者的瀏覽和查詢;輔助內容,如站點簡介、版權信息、個人信息等大可不必放在主欄目里,以免沖淡主題。

另外,板塊的編排設置也要合理安排與劃分。板塊比欄目的概念要大一些,每個板塊都有自己的欄目。舉個例子:ENET矽谷動力(www.enet.com.cn)的站點分新聞、產品、游戲、學院等板塊,每個板塊下面又各有自己的主欄目。一般來說,個人站點內容較少,只要分個欄目也就夠了,不需要設置板塊。如果有必要設置板塊的,應該注意:

●各板塊要有相對獨立性;

●各板塊要有相互關聯;

●各板塊的內容要圍繞站點主題;

②目錄結構與鏈接結構

網站的目錄是指建立網站時創建的目錄。例如:在用Frontpage建立網站時都默認建立了根目錄和Images子目錄。目錄的結構是一個容易忽略的問題,大多數站長都是未經規劃,隨意創建子目錄。目錄結構的好壞,對瀏覽者來說並沒有什麼太大的感覺,但是對於站點本身的維護,以後內容的擴充和移植有著重要的影響。所以建立目錄結構時也要仔細安排,比如:

●不要將所有文件都存放在根目錄下。有網站製作者為了方便,將所有文件都放在根目錄下。這樣就很容易造成:文件管理混亂,搞不清哪些文件需要編輯和更新,哪些無用的文件可以刪除,哪些是相關聯的文件,影響工作效率;上傳速度變慢,伺服器一般都會為根目錄建立一個文件索引,如果將所有文件都放在根目錄下,那麼即使只上傳更新一個文件,伺服器也需要將所有文件再檢索一遍,建立新的索引文件,很明顯,文件量越大,等待的時間也將越長。

●按欄目內容建立子目錄。子目錄的建立,首先按主欄目建立。友情連接內容較多,需要經常更新的可以建立獨立的子目錄。而一些相關性強,不需要經常更新的欄目,例如:網站簡介、站長情況等可以合並放在一個統一目錄下。所有程序一般都存放在特定目錄,例如:CGI程序放在cgi-bin目錄,所有提供下載的內容也最好放在一個目錄下,便於維護管理。

●在每個主目錄下都建立獨立的Images目錄。一般來說,一個站點根目錄下都有一個默認地Images目錄。將所有圖片都存放在這個目錄里很是不方便,比如在欄目刪除時,圖片的管理相當麻煩。所以為每個主欄目建立一個獨立的Images目錄是方便管理的。原因很簡單,就是方便維護與管理。
其它需要注意的還有:目錄的層次不要太深,不要超過3層;不要使用中文目錄,使用中文目錄可能對網址的正確顯示造成困難;不要使用過長的目錄,太長的目錄名不便於記憶;盡量使用意義明確的目錄,以便於記憶和管理。

網站的鏈接結構是指頁面之間相互鏈接的拓撲結構。它建立在目錄結構基礎之上,但可以跨越目錄。形象的說:每個頁面都是一個固定點,鏈接則是在兩個固定點之間的連線。一個點可以和一個點連接,也可以和多個點連接。更重要的是,這些點並不是分布在一個平面上,而是存在於一個立體的空間中。一般的,建立網站的鏈接結構有兩種基本方式:

●樹狀鏈接結構(一對一),這類似DOS的目錄結構,首頁鏈接指向一級頁面,一級頁面鏈接指向二級頁面。這樣的鏈接結構瀏覽時,一級級進入,一級級退出,條理比較清晰,訪問者明確知道自己在什麼位置,不會「不知身在何處」,但是瀏覽效率低,一個欄目下的子頁面到另一個欄目下的子頁面,必須回到首頁再進行。

●星狀鏈接結構(一對多),類似網路伺服器的鏈接,每個頁面相互之間都建立有鏈接。這樣瀏覽比較方便,隨時可以到達自己喜歡的頁面。但是由於鏈接太多,容易使瀏覽者迷路,搞不清自己在什麼位置,看了多少內容。

因此,在實際的網站設計中,總是將這兩種結構混合起來使用。網站希望瀏覽者既可以方便快速地達到自己需要的頁面,又可以清晰地知道自己的位置。所以,最好的辦法是:首頁和一級頁面之間用星狀鏈接結構,一級和二級頁面之間用樹狀鏈接結構。關於鏈接結構的設計,在實際的網頁製作中是非常重要一環,採用什麼樣的鏈接結構直接影響到版面的布局。

③進行形象設計

網站的設計可以從以下幾點出發:

●設計網站標志(LOGO)。LOGO是指網站的標志,標志可以是中文、英文字母,也可以是符號、圖案等。標志的設計創意應當來自網站的名稱和內容。比如:網站內有代表性的人物、動物、植物,可以用它們作為設計的藍本,加以卡通化或者藝術化;專業網站可以以本專業有代表的物品作為標志。最常用和最簡單的方式是用自己網站的英文名稱作標志,採用不同的字體、字母的變形、字母的組合可以很容易製作好自己的標志。

●設計網站色彩。網站給人的第一印象來自視覺沖擊,不同的色彩搭配產生不同的效果,並可能影響到訪問者的情緒。「標准色彩」是指能體現網站型象和延伸內涵的色彩,要用於網站的標志,標題,主菜單和主色塊。給人以整體統一的感覺。至於其它色彩也可以使用,但應當只是作為點綴和襯托,絕不能喧賓奪主。一般來說,一個網站的標准色彩不超過3種,太多則讓人眼花繚亂。適合於網頁標准色的顏色有:藍色,黃/橙色,黑/灰/白色三大系列色。

●設計網站字體。和標准色彩一樣,標准字體是指用於標志,標題,主菜單的特有字體。一般網頁默認的字體是宋體。為了體現站點的「與眾不同」和特有風格,可以根據需要選擇一些特別字體。製作者可以根據自己網站所表達的內涵,選擇更貼切的字體。需要說明的是:使用非默認字體只能用圖片的形式,因為很可能瀏覽者的計算機里沒有安裝特別字體,那麼辛苦設計製作便可能付之東流了。

●設計網站宣傳語。也可以說是網站的精神、主題與中心,或者是網站的目標,用一句話或者一個詞來高度概括。用富有氣勢的話或詞語來概括網站,進行對外宣傳,可以收到比較好的結果。

要領五:確定網站風格

「風格」是抽象的,是指站點的整體形象給瀏覽者的綜合感受。這個「整體形象」包括站點的CI(標志,色彩,字體,標語)、版面布局、瀏覽方式、交互性、文字、語氣、內容價值等等諸多因素,網站可以是平易近人的、生動活潑的也可以是專業嚴肅的。不管是色彩、技術、文字、布局,還是交互方式,只要你能由此讓瀏覽者明確分辨出這是你網站獨有的,這就形成了網站的「風格」。

風格是有人性的,通過網站的色彩、技術、文字、布局、交互方式可以概括出一個站點的個性:是粗獷豪放的,還是清新秀麗的;是溫文儒雅的,還是執著熱情的;是活潑易變的,還是墨守成規的。

總之,有風格的網站與普通網站的區別在於:在普通網站上你看到的只是堆砌在一起的信息,你只能用理性的感受來描述,比如信息量多少,瀏覽速度快慢等;在有風格的網站上你可以獲得除內容之外的更感性的認識,比如站點的品位,對瀏覽者的態度等。

在明確自己想給人以怎樣的印象後,要找出網站中最有特色的東西,就是最能體現網站風格的東西。並以它作為網站的特色加以重點強化、宣傳。總之,風格的形成不是一次定位的,你可以在實踐中不斷強化、調整、改進。

要領六:有創意的內容選擇

好的內容選擇需要有好的創意,作為網頁設計製作者,最苦惱的就是沒有好的內容創意。網路上的最多的創意即是來自於虛擬同現實的結合。創意的目的是為了更好的宣傳與推廣網站,如果創意很好,卻對網站發展毫無意義,那麼,網站設計製作者也應當放棄這個創意。另外,主頁內容是網站的根本之所在,如果內容空洞,即使頁面製作地再怎樣精美,仍然不會有多少用戶。從根本上說,網站內容仍然左右著網站流量,內容為王(Content Is King)依然是個人網站成功的關鍵。

要領七:推廣自己的網站

網站的營銷推廣在個人網站的運行中也占著重要的地位,在推廣個人網站之前,請確保已經做好了以下內容:網站信息內容豐富、准確、及時;網站技術具有一定專業水準,網站的交互性能良好。一般來說,網站的推廣有以下幾種方式:

(1)搜索引擎注冊與搜索目錄登錄技巧

注冊著名的搜索引擎站點是在技術上推廣網站的第一步。注冊搜索引擎有一定的技巧,像AltaVista、搜索客這樣的搜索引擎,它自動收錄提交的網址。另外,注意Meta的使用,不要提交分欄Frame頁面,大部分搜索引擎不識別Frame,所以一定要提交有內容的Main頁面。

而像Yahoo、搜狐等搜索目錄網站採用手工方式收錄網址,以保證收錄網站的質量,在分類查詢時獲得的信息相關性比搜索引擎站點(靠Spider自動搜索的)更強。由於搜索目錄網站收錄網站的人為因素相對較多,因此在提交網站時要注意遵守規則。如Yahoo要求注冊站點描述不超過25個單詞。在此要注意:將網址提交到最合適的目錄下面,要認真詳細的介紹網站,千萬不要有虛假、誇張的成分。

(2)廣告交換技巧

很多個人站點在相互廣告交換時都提出了幾個條件:第一,訪問量相當;第二,首頁交換。顯而易見,這種做法是為了充分利用廣告交換。以很多個人網站的經驗,當與一個個人站點交換鏈接時,對方把網站的LOGO放到了友情連接一頁,而不是首頁時,很少有訪客會來自那裡。通常在首頁,廣告交換才會有很好的效果。

(3)目標電子郵件推廣

使用電子郵件宣傳網址時,主要有如下技巧:可以使用免費郵件列表來進行,只要你申請了免費郵件列表服務,你就可以利用郵件列表來推廣你的網站;可以通過收集的特定郵件地址,來發送信息到特定的網路群體,在特定網路群體中推廣自己的網站;發送HTML格式的郵件,即使其內容與接收者關系不大,也不會被被當作垃圾信件馬上刪掉,人們至少會留意一下發送者的地址。不過,在進行郵件推廣的時候要注意網路道德。

要領八:支撐網站日常運行

當個人網站做到某一程度,就必須把賺錢提到議事日程上來,通常來說,個人網站獲取資金通常有以下兩個渠道:

(1)銷售網站的廣告位

要銷售網站的廣告位,一般來說,每日的流量少於1萬人次的網站在目前是不會吸引廣告主的。網站的專業性及商用性,以往的廣告經驗,技術以及設計要求等也會影響到廣告的銷售。

一般來說,WEB廣告的收費有三種方式:

①CPM (Cost Per Million/Thousand)

放一個廣告,它按每1,000人次來訪問站點收費。這方法對網站經營者最為合適,只要有人瀏覽該網頁,就得錢,不管訪問者對廣告有無反應——是否會看或點擊該廣告。

②點透(Click-through)

通過Banner廣告點到了廣告商的站點,這才算數,廣告商青睞這個,他只為對自己廣告感興趣的人「套錢「。網站經營者就不合適了,據一些調查資料表明,只有3%的訪問者會去「CLICK」廣告。

③提成 (Commission)

根據訪問者點擊位於你站點上廣告所帶來的銷售收入,從中跟做廣告的廠商分成,這種方法對於網站的經營者來說,比上面兩個都更加冒險。

通常的,個人網站的廣告收費方法往往是第一、第二種方法的結合,站點和廣告商都可少冒點險。

(2)與大型網站合作

另外,通過與大型網站合作,獲取經費,也可以維持個人網站的日常運行。不過,個人網站很容易會成為商業網站的附屬品。

有時間和充沛的體力,再加上對新技術和技巧的學習和應用,你就能為自己在網上建一個家了。

3、求游戲UI界面圖標設計視頻教程全套

兄弟你的教程都挺棒的,求分享,哈哈,我最近在環球網校那裡也找了不少資源。沒有基礎的話建議你從零開始了解,學習。直接入手的話比較盲目,有人指導會更好。學UI美術功底的,還有審美啥的肯定是要提升的了

4、ui設計整個過程一般分為哪些步驟?

UI設計的工作流程會根據公司性質、規模、項目性質、項目規模、UI職能要求等的不同有所區別。
UI設計參與完成的流程大致為:
1. 參與需求評審,理解PRD
2. 用戶調研、情緒板梳理(主要針對一些對體驗、視覺要求很高的產品,需要更加多關注人的設計,不是必要流程)
3. 交互設計
4. 視覺設計
5. 視覺評審(視覺稿確定過後)
6. UI走查、驗收(開發提測後,發布前)
在工作過程中,可能會組織團隊成員對設計方案、項目進行復盤,這樣細致的分工會把每個環節都打磨得非常到位。

5、UI設計的學習內容主要有哪些?

UI設計既是界面設計。當然隨著智能手機以及互聯網的飛速發展,是目前以及未來比較吃香的設計專業,學習主要分為以下十個階段:
階段一:傳統繪畫基礎
教學內容:素描基礎,素描石膏幾何體,素描靜物,素描石膏像,人物速寫。 教學目的:掌握繪畫過程中,構圖概念、結構、比例能夠獨立完成空間感結構圖,獨立完成明暗與刻畫細節。

階段二:PS平面設計基礎
教學內容:平面設計理論,色彩構成、平面構成。PS平面設計,PS軟體基礎、平面設計案例。PS手繪基礎。 教學目標:掌握PS平面基本技法,掌握基本UI設計基礎,熟悉電腦手繪。

階段三:色彩基本學
教學內容:了解UI風格色彩設計 教學目的:通過不同風格的命題,來講解不同元素的把控,並與之前的部分知識點進行結合,剝取與分析不同元素,再與UI布局進行搭配,塑造不同風格的GUI設計。

階段四:CG原畫設計
教學內容:了解CG圖製作方式,游戲相關繪制設定與技巧,風格把控。 教學目的:掌握繪畫過程中,構圖概念、結構、比例能夠獨立完成空間感結構圖,獨立完成明暗與刻畫細節。

階段五:UI基礎設計
教學內容: UI控制項、icon等基礎,臨摹掌握製作要領。 教學目的:通過學習按鈕的製作和基礎框架的製作,掌握PS的使用方法,以及草圖框架繪制技巧。並且在課程中還會學習點線面搭配知識以及基礎設計應用技巧。

階段六:PC游戲精品設計
教學內容:游戲界面構成原理與布局,掌握設計方法。 教學目的:通過學習游戲UI設計界面邊框、台頭、頁腳、轉角以及血條的設計和製作,熟練掌握市面熱門游戲界面布局技巧,以及關於用戶體驗與交互設計的搭建。

階段七:手游精品設計
教學內容:游戲UI移動端的布局規范,設計規劃 教學目的:重點學習手機、Pad等移動端設備中游戲的圖標的設計與製作,了解移動端中UI的布局規范以及設計表現技巧,並學習如何通過圖像設計強化交互功能。

階段八:應用資源設計
教學內容:網路游戲平台LOGO製作UI美化、圖片優化,資源優化等 教學目的:學習網路游戲、網頁游戲等平台中游戲圖片優化,節省資源空間。了解多平台UI的布局規范以及設計表現技巧,並學習如何通過圖像設計強化交互功能。

階段九:UI實戰設計
教學內容:UI具體明細實戰訓練,熟練操作各種工具進行不同種設計 教學目的:通過學習可獨立完成游戲UI中的系統界面的設計與製作,熟練掌握圖像簡化與歸納技巧,字元設計技巧,以及圖標交互型設計技巧。充分了解行業製作規范。

階段十:畢業作品
教學內容:製作不同類別策劃方案中的UI作業 教學目的:學員將和其他同學組成項目小組,開始製作不同類型策劃方案中的游戲UI,設計製作自己的畢業作品。並由行業內精英組合而成的專家隊伍對學員進行輔導,以保證作品達到業界標准以上。

6、人的視覺正常是先關注近的東西還是先關注遠的東西

作為視覺設計師,我們的作用除了最基本的滿足用戶審美需求,還會有品牌傳達,信息傳達,功能傳達等,其中想要信息有效的傳達給用戶,需要我們建立信息層級,而不是一股腦的丟給用戶自己理解,要做到這點有哪些視覺方法,這些方法的背後是否有理論依據,是本文的主題。 首先看下面兩張圖,左圖為相機拍攝的效果,右圖為人眼不時看到的效果,可以發現人眼對信息的獲取並不是一次性完成的,它不能同時產生多個焦點從而把視線停留在更多的地方,設計師需要考慮的是讓用戶通過眼球,按照一定的順序獲取信息,幫助獲取和理解的過程高效自然。 這個設計方法希望解決的主要是兩個問題: 1、用戶獲取和理解信息的效率 建立良好的信息層級,能讓用戶在有限的時間里,快速獲取和理解有用、感興趣的信息,並產生下一步行為; 2、設計師的專業性 設計師有意識的信息優先順序,了解哪些視覺表現手法可以建立信息層級及每一種方法背後的理論依據,不僅僅憑感覺做設計。 一、前期了解& 在開始設計前,除了對項目本身的背景目標有所了解外,視覺設計師針對具體的頁面也需要了解一些內容以幫助後面的設計有指導方向,包括頁面定位、氛圍營造、信息優先順序和用戶核心行為。 1.1、頁面定位是幫助頁面信息優先順序、核心行為的前提 通常有: 用戶是誰 用戶來自哪裡,即從什麼渠道來到該頁面 頁面內容定位,提供什麼、不提供什麼 頁面作用 舉個例子: 我們在設計采購直達場新首頁時,交互通過對頁面的用戶對服務的熟知度進行,確定首頁的最核心目標用戶是新家;頁面內容定位是展示場的價值點,用戶產生的數據讓新家對采購直達形成品牌的認知; 1.2、了解頁面需要營造的氛圍,能幫助我們判斷哪些元素能幫助達到目標,氛圍可以是內容本身,也可以通過視覺元素設計來營造,但必須注意氛圍營造不應強過用戶關注的內容本身 氛圍可能有: 新年主題大促 低折扣 信息鮮活 用戶活躍等等 以下是大促活動正式頁面,左圖延續了預熱期嘉年華的氛圍,但到活動開始階段氛圍已經不是重點,用戶更關心商品及折扣本身,右圖為調整後將氛圍的營造和類目圖片相結合,很好的解決了氛圍和內容的關系問題。 1.3、信息優先順序 1)一級信息吸引用戶:假設用戶只會在這個頁面停留3-5秒,最能夠吸引用戶繼續瀏覽的是頁面的核心點,是一級信息,它必須少而精,在設計上要重點展示 2)二級信息幫助理解:有了一級信息的吸引,用戶進一步了解內容而可能停留3-5分鍾,這時展示二級信息即提煉的精華內容,幫助用戶在盡量短時間內理解信息 3)三級信息詳細了解:前兩類信息基本上能幫助用戶獲取足夠的信息,用戶如果繼續停留更長的時間去詳細了解,這類信息量會更多,在設計上視覺層級會靠後,或通過交互方式展示、提供入口跳轉 1.4、用戶核心行為 不同類型用戶會在不同階段產生行為,我們要判斷這些行為最終導向是什麼? 比如商品詳情頁面,有些用戶在決定購之前,會查看用戶評價、歷史交易等內容,但這些查看的行為,最終是幫助用戶判斷是否購這個商品,所以核心行為是最終導向的購。 有了這些,交互產出物文檔中會給予大模塊的信息優先順序和用戶行為優先順序,如下圖: 視覺在進行細節設計前,需要對每個模塊內的具體內容進行優先順序的並產出如下示意圖並和交互和業務方確認,這些都是幫助視覺設計過程不偏離方向的重要產出物。 二、建立信息層級的視覺方法 視覺表現手法主要有以下幾種元素,實際設計中為了讓效果拉開主次,可能會同時使用多種方法以達到更好的效果: 位置 大小 距離 內容形式 色彩 2.1、位置 位置是在設計開始就會考慮的元素,人眼觀看事物時,總會遵循一些特定的規律,設計上遵循這些規律,能幫助用戶更容易、更快捷地看到或理解眼前的事物。其中有兩條規律和位置設計元素有關: 1)當眼睛偏離視中心時,在偏離距離相等的情況下,人眼對左上的觀察最優,依次為右上,左下,而右下最差。因此,左上部和上中部被稱為&lo;最佳視域&ro;。例如,logo、商品名、主題等重要信息,一般放在最佳視域內。當然,這種劃分也受文化因素的影響,比如伯文字是從右向左書寫的,這時最佳視域就是右上部。 下圖是摘自摘自張帆 羅琦 宮曉東的《網頁界面設計藝術教程》對一個屏幕劃分後,用戶對不同位置不同的關注度差別: 2)第二條規律是眼睛沿水平方向運動比沿垂直方向運動快而且不易疲勞,一般先看到水平方向的物體,後看到垂直方向的物體。如下圖所示,左右的關注度差別要小於上下關注度差別,如想要體現並列的關系,左右排列會更合適;而如果要拉開差距,僅通過位置來實現,上下排列更容易達到目標。 舉個例子:如下圖時代周刊首頁,左側大圖是當天的焦點新聞,在信息層級上為一級信息,視覺表現上不僅大、內容形式用大圖,位置也放在優勢區域,可能98%的用戶會先關注到這個區域; 假如對設計稿的位置做調整如下,如果焦點新聞圖片是第一優先順序的信息,雖然它是大圖的形式,占的也夠大,但由於位置不在最佳視域,會被&lo;Latest Headlines&ro;分散一部分視線,可能只有60%的用戶先看到右側了;如果信息有主次,就要讓視覺表現上拉開差距,而不是一個接近均等的局面。 3)用戶優先關註上部,在網頁設計中有首屏的概念,首屏的信息比通過用戶拖動滾動條出現的第二、三屏層級要高。 由於用戶使用的屏幕解析度不同造成首屏的高度會有差別,根據我們的數據,目前解析度高度為佔多數,所以設計時會以高度為基準,去掉瀏覽器本身的菜單等佔用的高度,實際展示給用戶的第一屏平均為px,這個數據會根據以後目標用戶的解析度變化做相應的調整,我們在設計時可用這個數值作為首屏的參考線。 2.2、大小 在確定了模塊的位置後,我們會考慮給這模塊多大的地盤,大小會很直觀反映信息的重要等級。 有個體育海報設計的案例,涉及到四種球類運動包括足球、高爾夫球、棒球、籃球,如果按照實際大小設計會讓籃球和足球顯得更重要,為了體現體育的平等性,設計上將球的大小做了調整。 Giles Colborne的《簡約至上》書中的結論可以指導我們通過大小拉開差距: 1)重要的元素要大一些,即使比例失調也可以考慮 2)要想辦法表現出差距;如果一個元素的重要性是2,那就把它的大小做成4 還是以時代周刊首頁為例,目前的設計左側的焦點新聞圖占的和中間新聞圖對比拉開了差距,使得用戶容易先關注到一級信息而且不容易被周邊干擾; 我們對兩個新聞圖片的進行對比可以看到差距有4倍左右; 假如對界面調整如下:焦點新聞圖縮小兩倍後,可以看出視覺層級的區分就不明顯了。 除了元素本身所佔的會影響視覺層級,元素的細節放大程度也同樣起到作用,細節放大後,人眼會感受到元素更清晰,離眼睛更近而容易先去關注,當然前提是保證信息可被理解,如果局部細節放大但用戶不能理解信息是什麼就不能起到吸引用戶的作用; 下圖是一個模特的,首頁上隨機出現模特的照片包括面部和半身照片,放大臉部特徵後的照片保證了用戶能理解這是一個模特的形象,使得用戶會優先關注細節放大的照片。 2.3、距離 前面講到的將元素的細節放大,眼睛會感受離它更近而被優先注意到,雖然信息展現的媒介是個平面,但是通過視覺手段能體現出三維的效果,除了大小,還有其他視覺手法如下: 1)拉遠三維距離 想要達到距離被拉遠的效果,下面列舉的方法是讓信息變得不清晰,眼睛看起來無法對焦到信息上面,包括: 模糊元素: 圖背景的人物被模糊後,使它和兩個行動點以及右側的圖標不在一個平面上,離眼睛更遠,用戶在進行行動點和文字識別時也不會被模糊的背景所干擾 降低透明度也同樣可以起到作用,當有些背景圖模糊後比較難被整體感知,選擇降低透明度也能拉遠距離 增加半透明圖層,在界面色彩或元素比較多的情況下,僅降低透明度也可能無法拉開距離,如下圖希望突出T購時,其他四個模塊降低透明度後由於本身色彩比較豐富而沒有明顯拉開差距,通過加上灰色的半透明圖層後,T購以外的模塊自然的退到視線後面了。 2)拉近三維距離 增加投影是最常用到的讓元素看起來和其他內容不在同面的視覺手法,通常像彈出框、滑鼠移上後出現的浮層等由於要壓在其他信息之上,增加投影能幫助用戶聚焦在帶投影的模塊而不受下面信息的干擾 3)除了三維,二維距離對視覺層級也有影響,根據格式塔心理學接近性定律,距離較短或互相接近的部分容易組成整體;人眼對距離臨近的信息更容易先去關注,在視覺手法應用上,元素距離上一個焦點近的,視覺層級高。如下圖,第一層級的新聞焦點圖和右側的小圖片比較臨近,視線容易往右上角運動; 對距離做了調整後,雖然中間的小圖片本身比文字更吸引人,但由於焦點圖下方的標題距離更近而形成整體,視線容易先往下運動。 2.4、內容形式 確定了模塊的位置、大小和距離關系後,我們會繼續考慮內容的形式包括視頻、圖片、文字等,這里主要講我們經常使用的圖形和文字;相比起文字,圖片在抓住用戶眼球這一點上是功不可沒的,同時還能使用戶在短時間內形成形象記憶,從視覺層級上,人眼一般會先關注圖後關注文字。但僅僅這點還不夠,通過圖片抓取用戶眼球後引導視線到下一個關注點,是設計上更多會考慮的點,概括有以下表現手法: 1)方向性引導 圖片中的形象有些具有明顯的方向性,如人眼注視的方向、手勢所指的方向、物體運動方向、光照方向等,這些特徵會引導人眼視線朝著設定的方向運動,從而達到視覺層級有主有次。 下圖假設中間的人物首先吸引了人的視線,為第一層級的信息,由於人眼注視方向為右側,使得用戶關注的下一個目標會轉向&lo;coder&ro;文字,為第二層級的信息。 下圖WHAT WE DO位置在左上角容易先被關注,同時右側的人物形象占的篇幅較大也會搶視線,但由於人物運動的方向下沒有其他信息,圖片沒有充分發揮引導的作用,用戶瀏覽起來會不太順暢 經過調整後的效果,雖然&lo;WHAT WE DO&ro;位置上並不在優勢區域,但通過圖片方向的引導很自然的讓人眼落在文字信息上。 2)符引導 除了圖片,一些符本身帶有順序和方向性,也能有效引導視線根據符來瀏覽,包括伯數字、字母順序、時間順序、箭頭等。 下圖的排行榜前三名,雖然用戶更習慣從左到右閱讀,但由於數字的引導,視線也會被影響而按照1>2>3的順序閱讀,如果希望這樣的順序更加明顯,可以再通過放大1的圖片大小,拉開差距,結合多種視覺方法達到效果。 時間軸在界面中應用也很廣泛,人眼會受時間順序的影響去瀏覽信息,甚至會打破常規的如從左到右的瀏覽習慣,如下圖雖然2的位置更容易引導用戶優先瀏覽,但時間軸對信息的影響更明顯,一般用戶會優先查看模塊1,再根據時間先後從右向左關注模塊2。 2.5、色彩 色彩是影響用戶對界面第一印象的重要因素,色彩的應用對視覺層級的影響也能起到立竿見影的效果,總結起來人眼對色彩的關注度差別主要是以下兩點: 1)先暖色後冷色 色彩的不同色相,對人眼的及產生的反映目前沒有找到絕對的先後順序,但是冷色類和暖色類色彩,是有明顯的層次差別的,如下圖,人眼一般會優先看到左側的圖片,這和我們人眼對不同波長的反映有一定關系; 從生理學上講,人眼晶狀體的調節,對於距離的變化是非常精密和靈敏的,我們能判斷出物體離我們的遠近,但是它有一定的限度,對於波長微小的差異就無確調節。眼睛在同一距離觀察不同波長的色彩時,波長長的暖色如紅、橙等色,在視網膜上形成內側映像;波長短的冷色如藍、紫色等,則在視網膜上形成外側映像。因此,暖色好象在前進,冷色好象在後退。 美國數字營銷Hubspot曾經做過一場A/B Test,用於測試不同顏色對於用戶點擊轉化造成的差異。 在圖中,左右兩個測試頁面在內容上完全一致,唯一不同的是按鈕的顏色,在超過人次的樣本測試中,最終紅色方案的點擊率超過綠色方案的點擊率足足21%。而在測試之前,大部分的研究員都猜測綠色方案會獲得更高的點擊,因為就直覺而言,綠色代表著通行、准許通過的意思,而紅色則更傾向於警告、阻止意味。 這個測試從一定程度上反映了暖色對用戶關注度和行動力的影響,當然並不是說為了提高點擊率就要用暖色,具體的色彩風格還是要根據產品定位來設計。 2)先高反差後低反差 除了冷暖色對眼睛的不同,色彩的反差是最容易造成關注度差別的因素,在自然界動物為了生存,運用的保護色就是和反差相關,如圖中的貓頭鷹,和它生活的環境相關,毛色都進化成類似的色彩,以起到隱藏保護的作用;相反,顏色反差大就特別容易引起注視,如下黃色鬱金香中獨特的紅色。 前面講到的大小、遠近都是體現能反差的視覺手段,色彩上的反差主要通過以下方法達到效果: 色相反差,下圖中主色調為藍色,藍色行動點和整體顏色一致,層級相對較弱,而綠色行動點和藍色在色相上的反差使得層級變高 但顏色有很多種,如何確定反差的大小?我們可以通過色相環來查看,如下圖所示,色相反差強弱取決於色相環上的距離,距離越大對比越強,反之則越弱。 飽和度反差和明度反差比較容易理解,而且他們有數值可以控制,兩個顏色之間飽和度或明度數值相差越大,反差也就越大,反之亦然,看看具體的實例:如以下導航圖,當前的人物icon明度較高,和低明度黑色背景形成高反差而容易先被注視 以下環狀餅圖,已完成的百分比飽和度高,和總體低飽和度形成對比,相同色相通過飽和度進行對比不僅能拉開差距形成視覺層級,同時視覺效果具有整體性 總結一下上面講到的視覺表現手法,形成表格方便大家記憶如下: 三、審視頁面視覺流 運用視覺表現手法建立信息層級後,需要設計師不斷審視用戶的瀏覽順序是否真如我們期望的層級1到2到3…,包括頁面大模塊和模塊內的瀏覽,這些瀏覽順序會在頁面上形成視覺流; 審視頁面視覺流能幫助我們判斷用戶瀏覽頁面是否順暢,瀏覽的順序是否有規律可循;如果我們的設計不能有效引導用戶的視線,用戶的瀏覽更趨向於隨機性,就難以將希望表達的信息快速傳到到位。 下面的內容主要是介紹比較典型的視覺流及每種類型的特徵,包括: 線性視覺流 導向性視覺流 跳動性視覺流 放射性視覺流 1)線性視覺流 橫向視覺流引導用戶視線從左到右或從右到左視覺流動,是最符合用戶視覺習慣的瀏覽方式,給人穩定可信之感。 如digg首頁,整體頁面和單個模塊都是典型的橫向視覺流,用戶從左到右瀏覽到邊界後,視線回掃到下一行繼續從左到右閱讀;這里會有一個橫向瀏覽最佳區域的數值,如digg選用的頁面寬度為px左右,每行展示3個item,用戶屏幕的解析度變大後,這兩個數值是否應該繼續增加,增加到什麼程度,是人眼獲取信息效率最高的?這個疑問我還沒有找到相應的理論或實驗支撐,後續再查找資料。 縱向視覺流引導用戶視線從上到下瀏覽,由於眼睛縱向的運動方式需要瞳孔不斷對焦,當縱向掃視頁面模塊時效率和橫向瀏覽相差不大,但閱讀細節時效率會變低,如縱向排列的文字,更適用於需要逐字閱讀的古詩古文; 下圖是將原來橫向視覺流的digg首頁的排版調整後,變成了縱向視覺流,除了大圖,用戶會選擇三欄的其中一列縱向瀏覽直到找到某一目標信息後,橫向瀏覽細節。 網頁界面的縱向高度限制比橫向小,因為用戶習慣上下滾動來瀏覽更多信息,當用戶還處於確定目標信息時,縱向視覺流能幫助用戶在不需要回掃的情況下獲取更多信息;如下圖facebook日歷界面,時間軸橫向排列時,由於寬度受限,需要橫向切換或滾動條來查看更多日期: 將時間軸方向調整為縱向,使得用戶能通過上下滾動更高效查看當月所有日期。 斜線視覺流能營造運動感和速度感,但由於角度傾斜使文字認知上會有一定困難,大量文字信息排列不適合這種視覺流,常用於設計中的點綴或本身信息量比較少的界面,如下圖的健身俱樂部海報; 還有網頁界面上小范圍的斜線視覺流,來體現運動感。 曲線視覺流,用戶視線會形成個性化的曲線,具有律動和活潑感,這種類型由於眼動幅度較大,長時間大量的運用會產生視覺疲勞,所以不適合大段文字使用,一般會結合圖形做曲線視覺流,讓用戶的視線在圖像區域稍作停留; 如下圖在曲線視覺流中配上圖片,讓視線在圖片這個節點上稍作停留並瀏覽這個節點的內容,然後繼續延曲線瀏覽。 2)導向性視覺流 如下圖所示,導向性視覺流會設計一個誘導元素吸引用戶注意,再通過誘導元素注意到目標信息;常見的誘導元素可以分為線條、形象包括人物或物品、指示符如箭頭字母等。這種視覺流要把握好誘導元素與目標信息的主次關系,純誘導元素不宜太強,否則會削弱目標信息的傳播力度;如果能在誘導元素中包含部分目標信息,可以增加信息傳達的有效性。 如下圖管子里的紅色液體是運動的,吸引用戶沿著它運動的方向到達目標消息 前面講到的內容形式,從圖片或符引導到下一個視覺焦點,從視覺流角度也是導向性類型,下面這兩個例子就是在頁面局部使用了導向性視覺流 3)跳動性視覺流 在性質相同或相似的信息中,選擇突出或感興趣的信息之間跳動瀏覽, 給人一種自主選擇的權利,但設計上也可以通過調整元素的強弱,不露痕跡的傳遞主次。 如前面提過的模特界面,模特的照片都是同等性質的信息,用戶瀏覽具有一定的隨機性,但通過放大和縮小人像同樣也傳遞了主次。 4)放射性視覺流 視線開端在頁面中部,使中間的元素沖擊感最強,信息傳達最明確,再形成由中部發散出去的視覺運動。 比如很多汽車,中間的主圖最能體現信息的核心,通過主圖再發散到上方的導航或下方的其他服務入口。 以上介紹的四種視覺流類型是比較典型的,但不代表全部,我們也可以設計出更富創意的視覺流,無論是那種路徑,用戶瀏覽是否順暢,信息是否按照主次傳遞到位,是我們要一直堅守的目標。 總結一下: 1.項目前期我們需要了解頁面營造的氛圍,內容定位;和交互一起信息的優先順序,用戶的核心行為;前期的准備能幫助視覺設計過程不偏離方向 2. 通過位置、大小、距離、內容形式、色彩這些視覺表現方法來建立信息層級 3. 設計過程和結束都要不斷審視頁面視覺流,看看用戶瀏覽是否順暢。 我們有意識的用戶關注的信息優先順序,並通過視覺表現出來,是視覺設計師這個崗位很重要的職責,希望梳理的這些方法能幫助我們將這份職責做的更好,我也樂在其中,與大家共勉!

7、做網頁設計師要學什麼??

首先第一步,你要學PS 不用太深,只要能把一個網站的樣子在PS裡面做出來就行了。前期可以隨便打開個網站照著做。
其次,你要會寫代碼,可以運用DW(DreamWeaver)輔助。代碼這東西其實很簡單,雖然是英文,但用到的單詞絕對不超過200個。基於SEO原則,你必須會DIV+CSS式的排版。你可以用火狐瀏覽器隨便打開一個簡單的網站點查看源文件,然後參照別人寫的HTML和CSS樣式來寫,或者上一些網站下載教程,查看資料,如果每天投入8小時來練,那麼頂多15天你就能寫出一個網站的前台了。要堅持天天練,練到你能把一個門戶類網站(如淘寶)的前台寫出來(當然是靜態的),那麼恭喜你,你代碼學科畢業了,期間你可以穿插認識一下JAVASCRIPT等特效,能做一定的修改和應用。

再次,這個時候你可以轉型學習網 絡 推 廣,基於自己的H T M L知識你會發現網路 推廣的知識你一看就懂。
或者你可以學習一門語言(如P HP),從而更深層次的去認識網站。
自己能做一些特效,

補充:在學的過程當中一定要培養自己的美 感,特別是顏色的搭配。你要記住,藝術家設計網站的時代已經不在了,你要站在用 戶的角度去體驗一個網站,分辨好壞,你自己覺得很好看的,別人不一定這么認為,其中的關鍵就在於顏色的搭配了。

與網頁界面設計藝術教程相關的知識