網(wǎng)站UI視覺設(shè)計(jì)入門教程PPT精選

1、LOGO由NordriDesign提供Web設(shè)計(jì)中，什么最重要？毫無疑問，內(nèi)容！但是，能夠在一瞬間，抓住訪問者眼球的是什么？是外觀！web-視覺設(shè)計(jì)視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 2引言討論的主題： web的視覺設(shè)計(jì)問題討論目的： 有助于我們了解web設(shè)計(jì)中的視覺設(shè)計(jì)問題， 加強(qiáng)我們的學(xué)習(xí)交流，更好的運(yùn)用web中的視 -覺設(shè)計(jì)。 制作者： 第八組全體成員（陳閃閃 鄧成琳 夏子晴 黃河 陶麗帆）視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 3先來看看視覺設(shè)計(jì)與其它web設(shè)計(jì)的關(guān)系視覺設(shè)計(jì)視覺設(shè)計(jì)視覺設(shè)計(jì)的重要性！視覺設(shè)計(jì)的重要性！LOGOPage 4視覺設(shè)計(jì)的定義視覺設(shè)計(jì)是指：針對眼睛官能的主觀形式 的表

2、現(xiàn)手段和結(jié)果?！皭勖乐娜私杂兄?，在Web領(lǐng)域也不例外。無論網(wǎng)站界面采用什么樣的設(shè)計(jì)風(fēng)格，或簡約、明快，或復(fù)雜、精致， 大家都喜歡井然有序、外觀漂亮的網(wǎng)站。漂亮的外觀，首先給訪問者一個不錯的第一印象。 視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 5當(dāng)談到網(wǎng)站的視覺設(shè)計(jì)這個問題時，有兩種截然相反的觀點(diǎn)。一：可用性倡導(dǎo)者們，一直認(rèn)為，網(wǎng)站要便于使用，而非漂亮。 jakob nielsen認(rèn)為，幾乎所有為實(shí)現(xiàn)視覺效果而做的事情，都會對 可用性產(chǎn)生妨礙。 不過在過去幾年，可用性倡導(dǎo)者們的防線，以有松動。視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 6二：美觀性反對的觀點(diǎn)則將網(wǎng)站提升到“體驗(yàn)”的高度。因此網(wǎng)站應(yīng)該利用web

3、這種媒介的獨(dú)特性（它擴(kuò)大媒介的限制），刺激、吸引、迷惑、愉悅、迷住訪問者。出色的視覺設(shè)計(jì)，能夠賦予意義，提供語境，喚起情感。它可激起訪問者的興趣，并使其相信網(wǎng)站的專業(yè)性和可靠性。它可以確定焦點(diǎn)，設(shè)立重點(diǎn)，建立網(wǎng)站元素之間的關(guān)系，并指導(dǎo)用戶完成任務(wù)。但是，如果不能妥善處理，可能會交付一個華麗空虛的網(wǎng)站。視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 7對使用web的人來說，爭論雙方的觀點(diǎn)既非完全錯誤，也非完全正確。 事實(shí)上可用性與美觀性在web上是不沖突的。 我們能夠同時擁有美感與功能性。讓我們盡全力平衡形式與功能。 如果說，可用性因素使網(wǎng)站具有功能性，視覺設(shè)計(jì)使網(wǎng)站令人難忘，那么，我們的目標(biāo)是，二者兼具。

4、視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 8那么應(yīng)該怎樣做好web網(wǎng)站的視覺設(shè)計(jì)呢？視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 9視覺設(shè)計(jì)視覺設(shè)計(jì)傳播產(chǎn)品理念傳播產(chǎn)品理念視覺設(shè)計(jì)視覺設(shè)計(jì)干凈，簡潔，工具化干凈，簡潔，工具化視覺設(shè)計(jì)視覺設(shè)計(jì)重點(diǎn)突出重點(diǎn)突出視覺設(shè)計(jì)視覺設(shè)計(jì)防止不恰當(dāng)?shù)牡妄g化防止不恰當(dāng)?shù)牡妄g化視覺設(shè)計(jì)視覺設(shè)計(jì)制定規(guī)范，維持統(tǒng)一制定規(guī)范，維持統(tǒng)一視覺設(shè)計(jì)視覺設(shè)計(jì)從五個方面做好視覺設(shè)計(jì)從五個方面做好視覺設(shè)計(jì)LOGOPage 10 1、視覺設(shè)計(jì)傳播產(chǎn)品理念只有當(dāng)我們對產(chǎn)品抱有一個完美的理念和愿景的時候，我們才能做出優(yōu)美的設(shè)計(jì)來體現(xiàn)理念“QQ郵箱，常聯(lián)系”是騰訊的愿景。這個愿景需要完美的產(chǎn)品設(shè)計(jì)，優(yōu)秀的技術(shù)

5、實(shí)現(xiàn)，和優(yōu)質(zhì)運(yùn)營來達(dá)到“封面畫和選詞，呼應(yīng)郵件含義，淡雅而不張揚(yáng)”視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 11 傳播產(chǎn)品理念找對你的感覺。視覺設(shè)計(jì)首先要考慮的就是整體的感覺，即視覺設(shè)計(jì)的風(fēng)格。視覺設(shè)計(jì)的風(fēng)格是否準(zhǔn)確關(guān)系著設(shè)計(jì)的成敗。那么一個產(chǎn)品的視覺設(shè)計(jì)也同樣需要一個對的定位，最終以合適的視覺表現(xiàn)出來。我們不妨以幾種聊天軟件來做個的比較，從中窺視一點(diǎn)設(shè)計(jì)定位的視覺意 味?？聪旅嬉唤M圖：視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 12視覺設(shè)計(jì)視覺設(shè)計(jì) 傳播產(chǎn)品理念圖一： QQ 的視覺定位是以青少年為主的，所以它的視覺設(shè)計(jì)才采用了比較明亮活潑的色彩。圖二、圖三：msn 和TM 的視覺定位是以辦公室工作人員為定位，

6、所以它的視覺使用比較穩(wěn)定和平靜的色彩。LOGOPage 13品牌：塑造身份視覺設(shè)計(jì)的一個任務(wù)就是：確保網(wǎng)站具有視覺一致性。所有頁面看起來，就像是從一個模子里刻出來的一樣。它們必須有相同的logo,相同的配色方案，以及（對大部分而言）相同的布局。訪問者看到一個頁面，就應(yīng)該可以立即識別出其他的所有頁面。除此之外，這種一致的外觀和感覺，應(yīng)支持網(wǎng)站的“品牌”。什么叫品牌？ 它是一個產(chǎn)品或整個組織給人的整體映象。它包括logo、包裝、廣告、視覺呈現(xiàn)、當(dāng)然還有網(wǎng)站本身。令人映象深刻的品牌，具有一種身份，個性，以及自身的特色，具有能夠吸引目標(biāo)，與眾不同的外觀和感受。 更為重要的是品牌令人難以忘記。 傳播產(chǎn)品

7、理念視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 142、視覺設(shè)計(jì)干凈，簡潔，工具化“推廣”很重要，“簡潔”也很重要，因此舍“推廣”而取“簡潔” 語音郵箱放到郵箱登錄后的郵箱首頁右上角，但太重hardsell了，會影響一些速度和簡潔性不多用一個圖片 在好友Qzone文章的摘要前加頭像，感覺會破壞閱讀感（容易吸引眼球到頭像而非文章），而從關(guān)注好友的角度，頭像能突出好友。但給用戶2個圖片，用戶看哪個呢？工具化設(shè)計(jì)意味著清晰的邏輯和操作。不是內(nèi)容越多越好，是越簡單越好。視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 15干凈，簡潔，工具化視覺結(jié)構(gòu)和層級關(guān)系。頁面表現(xiàn)的層級關(guān)系和結(jié)構(gòu)是用視覺的形式表現(xiàn)出來的，比如包含關(guān)系及業(yè)務(wù)

8、的先后順序的表現(xiàn)。讓用戶通過視覺就能夠直接的明白應(yīng)該先看什么，后看什么，元素時間是什么關(guān)系等等。讓我們來看下面的兩張圖：視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 16wordpress 博客的后臺管理界面，我們可以看到清博客的后臺管理界面，我們可以看到清晰的從屬關(guān)系：管理晰的從屬關(guān)系：管理文章文章文章內(nèi)的修改區(qū)域。文章內(nèi)的修改區(qū)域。干凈，簡潔，工具化視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 17vista 系統(tǒng)的界面：三個區(qū)域的層級關(guān)系一目了然系統(tǒng)的界面：三個區(qū)域的層級關(guān)系一目了然 ，“1”區(qū)要高區(qū)要高出出“2”區(qū)域，區(qū)域，“2”區(qū)域要比區(qū)域要比“3”區(qū)域的顏色深，這樣整體的從屬區(qū)域的顏色深，這樣整體的從屬關(guān)

9、系就很明顯。關(guān)系就很明顯。干凈，簡潔，工具化視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 18是什么就是什么，圖形達(dá)意盡量明確。什么樣子代表什么都有其特定的視覺暗示，如果不是游戲，我們應(yīng)該盡量避免和用戶捉迷藏。例如應(yīng)該用頁簽來表現(xiàn)的從屬 關(guān)系，我們不應(yīng)該簡單的做幾個鏈接，這樣會表達(dá)不清楚各部分關(guān)系。除此類的布局因素之外，圖標(biāo)的表達(dá)是視覺中的一大塊，好的圖形表達(dá)可以幫助用戶直觀 感受功能，縮短操作時間，提高效率；不過表達(dá)不好可就麻煩了，用戶可能要歪著腦袋想半天！干凈，簡潔，工具化視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 19箭頭所指之處為刷新圖標(biāo)，上面那個刷新圖為原來圖標(biāo)，假如是做成下面箭頭所指之處為刷新圖標(biāo)，上面

10、那個刷新圖為原來圖標(biāo)，假如是做成下面這個樣子就會和后退圖標(biāo)顯得太象了，意思區(qū)別不是太明確，會造成誤解。這個樣子就會和后退圖標(biāo)顯得太象了，意思區(qū)別不是太明確，會造成誤解。就準(zhǔn)確性而言，上面那個刷新圖標(biāo)更讓客戶容易接受。就準(zhǔn)確性而言，上面那個刷新圖標(biāo)更讓客戶容易接受。干凈，簡潔，工具化視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 20明確你的視覺狀態(tài)理想狀態(tài)是：用戶的每個操作行為都應(yīng)該有相 應(yīng)的視覺反饋，比如有沒有選中，操作有沒有成功等。僅按鼠標(biāo)操作的狀態(tài)分就有默認(rèn)、鼠標(biāo)指向、鼠標(biāo)按下、鼠標(biāo)點(diǎn)擊四種狀態(tài)，準(zhǔn)確的反饋可以讓用戶流暢的感 覺自己的操作；關(guān)于鼠標(biāo)和鍵盤的狀態(tài)，大家在操作系統(tǒng)的時候注意一下，就可以看到

11、各種操作的對應(yīng)關(guān)系，而我們平時是不太注意的，因?yàn)樗倪_(dá)到了設(shè)計(jì)的 目的。站在是否可用的角度分有：可用狀態(tài)、不可用狀態(tài).干凈，簡潔，工具化視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 21請用準(zhǔn)確的視覺來輔助信息反饋。我們用來對應(yīng)的視覺輔助圖要力求表現(xiàn)每種情況的準(zhǔn)確含義。當(dāng)然，為了增加趣味性，我們可以允許任意表現(xiàn)形式或表情的存在，前提是你的表達(dá)要準(zhǔn)確，不要有歧義，否則使用者的第一反映可能不是你要表現(xiàn)的，由于理解的歧義所帶來的損失和挫折感會讓用戶感到厭惡。通過下面幾張圖我們來對比一下：干凈，簡潔，工具化視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 22下面哪一個更能體現(xiàn)出“對不起，出錯啦！”干凈，簡潔，工具化視覺設(shè)計(jì)

12、視覺設(shè)計(jì)LOGOPage 23第二張圖的淘氣鬼臉圖，我以為我成功了；第三張圖的表 現(xiàn)讓我以為是在警告。第四張圖如果你犯錯的時候出現(xiàn)了，你會想到什么？只有第一張圖讓我意識到我失敗了，并且有趣味性。由此可見：趣味性和準(zhǔn)確性并不矛盾，我們在設(shè)計(jì)趣味性的同時，別忽略設(shè)計(jì)的準(zhǔn)確性。干凈，簡潔，工具化視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 243、視覺設(shè)計(jì)制定規(guī)范，維持統(tǒng)一文字使用要規(guī)范，語法，大小，顏色，大小寫都需要注意 能用一個詞表達(dá)的，不用一句話。能用一句話表達(dá)清楚的，不用兩句話 每個概念都只有唯一一種表達(dá)。如”VIP”的概念 能用一種字體顏色的，不多用一種顏色 能用一種字體大小的，不多用一種大小用標(biāo)準(zhǔn)組

13、件 能用標(biāo)準(zhǔn)控件的，不自己畫控件 能用文字的，不用圖片（加圖片是要申請的） 保持盡可能少的格式式樣維持統(tǒng)一 就算字體和行間距等小細(xì)節(jié)都應(yīng)該關(guān)注到視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 254、視覺設(shè)計(jì)重點(diǎn)突出每個頁面（板塊）只有一塊視覺重點(diǎn)。并且，突出重點(diǎn)，不讓用戶去找。左邊的設(shè)計(jì)排版不對，有一橫條的壓著的情況黃色塊就不能加框，視覺會很繁雜看著不舒服，句號也是多余的原來方案 目前方案視覺設(shè)計(jì)視覺設(shè)計(jì)Pony：在設(shè)置了獨(dú)立密碼的情況下, 當(dāng)?shù)顷懙叫枰斎氇?dú)立密碼時, 總是先出來輸入框, 此時已可輸入, 我經(jīng)常是立刻輸入, 但打了幾個字母后上面, 才瞬間出現(xiàn)上面的黃色提醒請輸入獨(dú)立保護(hù)密碼, 而會導(dǎo)致輸

14、入框位置立刻下壓, 比較影響輸入. 最好能改一改html里的結(jié)構(gòu), 能夠快速讓人立刻輸入(越快越好)的基礎(chǔ)上,其他顯示的可以慢些load到但不應(yīng)影響其他部件的改變.LOGOPage 265、視覺設(shè)計(jì)防止不恰當(dāng)?shù)牡妄g化在追求“簡單”的過程中，QQMail不知不覺的變得“中性”、“成熟”化。當(dāng)我們更加理性和嚴(yán)謹(jǐn)?shù)卦O(shè)計(jì)產(chǎn)品的時候，自然會遠(yuǎn)離“低齡”傾向?！俺墒臁痹醋院侠淼脑O(shè)計(jì)，“低齡”源自不合常理的設(shè)計(jì)。視覺設(shè)計(jì)視覺設(shè)計(jì)不恰當(dāng)?shù)牡妄g化LOGOPage 27小結(jié)傳播產(chǎn)品理念大氣成熟，干凈整潔，工具化規(guī)范與統(tǒng)一重點(diǎn)突出防止不恰當(dāng)?shù)牡妄g化視覺設(shè)計(jì)視覺設(shè)計(jì)LOGOPage 28案例分析http:/ 29不同

15、點(diǎn)頁面導(dǎo)航頁面導(dǎo)航n飯桶網(wǎng)：無導(dǎo)航條，有標(biāo)簽飯桶網(wǎng)：無導(dǎo)航條，有標(biāo)簽n大眾點(diǎn)評網(wǎng)：有導(dǎo)航條，有標(biāo)簽大眾點(diǎn)評網(wǎng)：有導(dǎo)航條，有標(biāo)簽視覺設(shè)計(jì)視覺設(shè)計(jì)大眾點(diǎn)評網(wǎng)大眾點(diǎn)評網(wǎng)飯桶網(wǎng)飯桶網(wǎng)LOGOPage 30廣告廣告n大眾點(diǎn)評網(wǎng)：有廣告，但廣告能大眾點(diǎn)評網(wǎng)：有廣告，但廣告能避免干擾視線，避免喧賓奪主，避免干擾視線，避免喧賓奪主，廣告圖片符合整體風(fēng)格廣告圖片符合整體風(fēng)格 n飯桶網(wǎng)：有廣告，且廣告干擾視飯桶網(wǎng)：有廣告，且廣告干擾視線，喧賓奪主線，喧賓奪主 視覺設(shè)計(jì)視覺設(shè)計(jì)大眾點(diǎn)評網(wǎng)大眾點(diǎn)評網(wǎng)飯桶網(wǎng)飯桶網(wǎng)不同點(diǎn)LOGOPage 31網(wǎng)站地圖網(wǎng)站地圖 飯桶網(wǎng)：為用戶提供清晰的網(wǎng)站指引。飯桶網(wǎng)：為用戶提供清晰的網(wǎng)站

16、指引。 大眾點(diǎn)評網(wǎng)：地圖更加具體。大眾點(diǎn)評網(wǎng)：地圖更加具體。 視覺設(shè)計(jì)視覺設(shè)計(jì)大眾點(diǎn)評網(wǎng)大眾點(diǎn)評網(wǎng)飯桶網(wǎng)飯桶網(wǎng)不同點(diǎn)LOGOPage 32新開窗口新開窗口 n盡量減少新開的窗口，以避免開盡量減少新開的窗口，以避免開過多的無效窗口，設(shè)置彈出窗口過多的無效窗口，設(shè)置彈出窗口的關(guān)閉功能。的關(guān)閉功能。n顯然大眾點(diǎn)評網(wǎng)就比飯桶網(wǎng)做的顯然大眾點(diǎn)評網(wǎng)就比飯桶網(wǎng)做的好。好。視覺設(shè)計(jì)視覺設(shè)計(jì)大眾點(diǎn)評網(wǎng)大眾點(diǎn)評網(wǎng)飯桶網(wǎng)飯桶網(wǎng)不同點(diǎn)LOGOPage 33欄目的層級欄目的層級 n飯桶網(wǎng)：導(dǎo)航不清晰飯桶網(wǎng)：導(dǎo)航不清晰 ，欄目沒超欄目沒超過過3層。層。 n大眾點(diǎn)評網(wǎng)：導(dǎo)航清晰、欄目超大眾點(diǎn)評網(wǎng)：導(dǎo)航清晰、欄目超過過3層。

17、層。 視覺設(shè)計(jì)視覺設(shè)計(jì)不同點(diǎn)內(nèi)容的原創(chuàng)性內(nèi)容的原創(chuàng)性 公司介紹公司介紹 n飯桶網(wǎng)：有小部分內(nèi)容為轉(zhuǎn)載的飯桶網(wǎng)：有小部分內(nèi)容為轉(zhuǎn)載的 資訊資訊 n大眾點(diǎn)評網(wǎng)：盡量多采用原創(chuàng)性大眾點(diǎn)評網(wǎng)：盡量多采用原創(chuàng)性內(nèi)容，以確保內(nèi)容的可讀性內(nèi)容，以確保內(nèi)容的可讀性 飯桶網(wǎng)：除了以下的信息都有以外還有飯桶網(wǎng)：除了以下的信息都有以外還有 視頻介紹。視頻介紹。大眾點(diǎn)評網(wǎng)：真實(shí)可靠的信息發(fā)布，包大眾點(diǎn)評網(wǎng)：真實(shí)可靠的信息發(fā)布，包 括公司規(guī)模、發(fā)展?fàn)顩r、括公司規(guī)模、發(fā)展?fàn)顩r、 公司資質(zhì)等公司資質(zhì)等 好友推薦好友推薦n飯桶網(wǎng)：未提供飯桶網(wǎng)：未提供n大眾點(diǎn)評網(wǎng)：提供郵件推薦功能大眾點(diǎn)評網(wǎng)：提供郵件推薦功能 LOGOPage

18、 34 無論用戶瀏覽到哪一個層級，哪一個頁無論用戶瀏覽到哪一個層級，哪一個頁面，都可以清楚知道看到該頁面的路徑。面，都可以清楚知道看到該頁面的路徑。 視覺設(shè)計(jì)視覺設(shè)計(jì)設(shè)計(jì)風(fēng)格設(shè)計(jì)風(fēng)格符合用戶的審美習(xí)慣，并具有一定的引導(dǎo)性。符合用戶的審美習(xí)慣，并具有一定的引導(dǎo)性。 確保確保logo的保護(hù)空間，確保品牌的清晰展示的保護(hù)空間，確保品牌的清晰展示而又不占據(jù)過分空間。而又不占據(jù)過分空間。 網(wǎng)站網(wǎng)站LOGO頁面速度頁面速度重點(diǎn)突出，主次分明，圖文并茂。與企重點(diǎn)突出，主次分明，圖文并茂。與企業(yè)的營銷目標(biāo)相結(jié)合，將用戶最感興趣的，業(yè)的營銷目標(biāo)相結(jié)合，將用戶最感興趣的，最具有銷售力的信息放置在最重要的位置。最具有銷售力的信息放置在最重要的