網(wǎng)站UI視覺(jué)設(shè)計(jì)入門(mén)教程@PPT精選.ppt

1、Web設(shè)計(jì)中，什么最重要？毫無(wú)疑問(wèn)，內(nèi)容！ 但是，能夠在一瞬間，抓住訪(fǎng)問(wèn)者眼球的是什么？是外觀！,web-視覺(jué)設(shè)計(jì),視覺(jué)設(shè)計(jì),引言,討論的主題： web的視覺(jué)設(shè)計(jì)問(wèn)題 討論目的： 有助于我們了解web設(shè)計(jì)中的視覺(jué)設(shè)計(jì)問(wèn)題， 加強(qiáng)我們的學(xué)習(xí)交流，更好的運(yùn)用web中的視 -覺(jué)設(shè)計(jì)。 制作者： 第八組全體成員（陳閃閃 鄧成琳 夏子晴 黃河 陶麗帆）,視覺(jué)設(shè)計(jì),先來(lái)看看視覺(jué)設(shè)計(jì)與其它web設(shè)計(jì)的關(guān)系,視覺(jué)設(shè)計(jì),視覺(jué)設(shè)計(jì)的重要性！,視覺(jué)設(shè)計(jì)的定義,視覺(jué)設(shè)計(jì)是指：針對(duì)眼睛官能的主觀形式 的表現(xiàn)手段和結(jié)果。 “愛(ài)美之心人皆有之”，在Web領(lǐng)域也不例外。 無(wú)論網(wǎng)站界面采用什么樣的設(shè)計(jì)風(fēng)格，或簡(jiǎn)約、明快，或復(fù)雜

2、、精致， 大家都喜歡井然有序、外觀漂亮的網(wǎng)站。 漂亮的外觀，首先給訪(fǎng)問(wèn)者一個(gè)不錯(cuò)的第一印象。,視覺(jué)設(shè)計(jì),當(dāng)談到網(wǎng)站的視覺(jué)設(shè)計(jì)這個(gè)問(wèn)題時(shí)，有兩種截然相反的觀點(diǎn)。 一：可用性倡導(dǎo)者們，一直認(rèn)為，網(wǎng)站要便于使用，而非漂亮。 jakob nielsen認(rèn)為，幾乎所有為實(shí)現(xiàn)視覺(jué)效果而做的事情，都會(huì)對(duì) 可用性產(chǎn)生妨礙。 不過(guò)在過(guò)去幾年，可用性倡導(dǎo)者們的防線(xiàn)，以有松動(dòng)。,視覺(jué)設(shè)計(jì),二：美觀性 反對(duì)的觀點(diǎn)則將網(wǎng)站提升到“體驗(yàn)”的高度。因此網(wǎng)站應(yīng)該利用web這種媒介的獨(dú)特性（它擴(kuò)大媒介的限制），刺激、吸引、迷惑、愉悅、迷住訪(fǎng)問(wèn)者。 出色的視覺(jué)設(shè)計(jì)，能夠賦予意義，提供語(yǔ)境，喚起情感。它可激起訪(fǎng)問(wèn)者的興趣，并使其相

3、信網(wǎng)站的專(zhuān)業(yè)性和可靠性。它可以確定焦點(diǎn)，設(shè)立重點(diǎn)，建立網(wǎng)站元素之間的關(guān)系，并指導(dǎo)用戶(hù)完成任務(wù)。但是，如果不能妥善處理，可能會(huì)交付一個(gè)華麗空虛的網(wǎng)站。,視覺(jué)設(shè)計(jì),對(duì)使用web的人來(lái)說(shuō)，爭(zhēng)論雙方的觀點(diǎn)既非完全錯(cuò)誤，也非完全正確。 事實(shí)上可用性與美觀性在web上是不沖突的。 我們能夠同時(shí)擁有美感與功能性。讓我們盡全力平衡形式與功能。 如果說(shuō)，可用性因素使網(wǎng)站具有功能性，視覺(jué)設(shè)計(jì)使網(wǎng)站令人難忘，那么，我們的目標(biāo)是，二者兼具。,視覺(jué)設(shè)計(jì),那么應(yīng)該怎樣做好 web網(wǎng)站的視覺(jué)設(shè)計(jì)呢？,視覺(jué)設(shè)計(jì),視覺(jué)設(shè)計(jì)傳播產(chǎn)品理念,01,視覺(jué)設(shè)計(jì)干凈，簡(jiǎn)潔，工具化,02,視覺(jué)設(shè)計(jì)重點(diǎn)突出,04,視覺(jué)設(shè)計(jì)防止不恰當(dāng)?shù)牡妄g化,

4、05,06,視覺(jué)設(shè)計(jì)制定規(guī)范，維持統(tǒng)一,03,視覺(jué)設(shè)計(jì),從五個(gè)方面做好視覺(jué)設(shè)計(jì),1、視覺(jué)設(shè)計(jì)傳播產(chǎn)品理念,只有當(dāng)我們對(duì)產(chǎn)品抱有一個(gè)完美的理念和愿景的時(shí)候，我們才能做出優(yōu)美的設(shè)計(jì)來(lái)體現(xiàn)理念 “QQ郵箱，常聯(lián)系”是騰訊的愿景。這個(gè)愿景需要完美的產(chǎn)品設(shè)計(jì)，優(yōu)秀的技術(shù)實(shí)現(xiàn)，和優(yōu)質(zhì)運(yùn)營(yíng)來(lái)達(dá)到 “封面畫(huà)和選詞，呼應(yīng)郵件含義，淡雅而不張揚(yáng)”,視覺(jué)設(shè)計(jì),傳播產(chǎn)品理念,找對(duì)你的感覺(jué)。 視覺(jué)設(shè)計(jì)首先要考慮的就是整體的感覺(jué)，即視覺(jué)設(shè)計(jì)的風(fēng)格。視覺(jué)設(shè)計(jì)的風(fēng)格是否準(zhǔn)確關(guān)系著設(shè)計(jì)的成敗。 那么一個(gè)產(chǎn)品的視覺(jué)設(shè)計(jì)也同樣需要一個(gè)對(duì)的定位，最終以合適的視覺(jué)表現(xiàn)出來(lái)。 我們不妨以幾種聊天軟件來(lái)做個(gè)的比較，從中窺視一點(diǎn)設(shè)計(jì)定位的視

5、覺(jué)意 味。 看下面一組圖：,視覺(jué)設(shè)計(jì),視覺(jué)設(shè)計(jì),傳播產(chǎn)品理念,圖一： QQ 的視覺(jué)定位是以青少年為主的，所以它的視覺(jué)設(shè)計(jì)才采用了比較明亮活潑的色彩。 圖二、圖三：msn 和TM 的視覺(jué)定位是以辦公室工作人員為定位，所以它的視覺(jué)使用比較穩(wěn)定和平靜的色彩。,品牌：塑造身份 視覺(jué)設(shè)計(jì)的一個(gè)任務(wù)就是：確保網(wǎng)站具有視覺(jué)一致性。所有頁(yè)面看起來(lái)，就像是從一個(gè)模子里刻出來(lái)的一樣。它們必須有相同的logo,相同的配色方案，以及（對(duì)大部分而言）相同的布局。訪(fǎng)問(wèn)者看到一個(gè)頁(yè)面，就應(yīng)該可以立即識(shí)別出其他的所有頁(yè)面。除此之外，這種一致的外觀和感覺(jué)，應(yīng)支持網(wǎng)站的“品牌”。 什么叫品牌？ 它是一個(gè)產(chǎn)品或整個(gè)組織給人的整體映

6、象。 它包括logo、包裝、廣告、視覺(jué)呈現(xiàn)、當(dāng)然還有網(wǎng)站本身。 令人映象深刻的品牌，具有一種身份，個(gè)性，以及自身的特色，具有能夠吸引目標(biāo)，與眾不同的外觀和感受。 更為重要的是品牌令人難以忘記。,傳播產(chǎn)品理念,視覺(jué)設(shè)計(jì),2、視覺(jué)設(shè)計(jì)干凈，簡(jiǎn)潔，工具化,“推廣”很重要，“簡(jiǎn)潔”也很重要，因此舍“推廣”而取“簡(jiǎn)潔” 語(yǔ)音郵箱放到郵箱登錄后的郵箱首頁(yè)右上角，但太重hardsell了，會(huì)影響一些速度和簡(jiǎn)潔性 不多用一個(gè)圖片 在好友Qzone文章的摘要前加頭像，感覺(jué)會(huì)破壞閱讀感（容易吸引眼球到頭像而非文章），而從關(guān)注好友的角度，頭像能突出好友。但給用戶(hù)2個(gè)圖片，用戶(hù)看哪個(gè)呢？ 工具化設(shè)計(jì)意味著清晰的邏輯和

7、操作。不是內(nèi)容越多越好，是越簡(jiǎn)單越好。,視覺(jué)設(shè)計(jì),干凈，簡(jiǎn)潔，工具化,視覺(jué)結(jié)構(gòu)和層級(jí)關(guān)系。 頁(yè)面表現(xiàn)的層級(jí)關(guān)系和結(jié)構(gòu)是用視覺(jué)的形式表現(xiàn)出來(lái)的，比如包含關(guān)系及業(yè)務(wù)的先后順序的表現(xiàn)。 讓用戶(hù)通過(guò)視覺(jué)就能夠直接的明白應(yīng)該先看什么，后看什么，元素時(shí)間是什么關(guān)系等等。 讓我們來(lái)看下面的兩張圖：,視覺(jué)設(shè)計(jì),wordpress 博客的后臺(tái)管理界面，我們可以看到清晰的從屬關(guān)系：管理文章文章內(nèi)的修改區(qū)域。,干凈，簡(jiǎn)潔，工具化,視覺(jué)設(shè)計(jì),vista 系統(tǒng)的界面：三個(gè)區(qū)域的層級(jí)關(guān)系一目了然 ，“1”區(qū)要高出“2”區(qū)域，“2”區(qū)域要比“3”區(qū)域的顏色深，這樣整體的從屬關(guān)系就很明顯。,干凈，簡(jiǎn)潔，工具化,視覺(jué)設(shè)計(jì),是什

8、么就是什么，圖形達(dá)意盡量明確。 什么樣子代表什么都有其特定的視覺(jué)暗示，如果不是游戲，我們應(yīng)該盡量避免和用戶(hù)捉迷藏。例如應(yīng)該用頁(yè)簽來(lái)表現(xiàn)的從屬 關(guān)系，我們不應(yīng)該簡(jiǎn)單的做幾個(gè)鏈接，這樣會(huì)表達(dá)不清楚各部分關(guān)系。除此類(lèi)的布局因素之外，圖標(biāo)的表達(dá)是視覺(jué)中的一大塊，好的圖形表達(dá)可以幫助用戶(hù)直觀 感受功能，縮短操作時(shí)間，提高效率；不過(guò)表達(dá)不好可就麻煩了，用戶(hù)可能要歪著腦袋想半天！,干凈，簡(jiǎn)潔，工具化,視覺(jué)設(shè)計(jì),箭頭所指之處為刷新圖標(biāo)，上面那個(gè)刷新圖為原來(lái)圖標(biāo)，假如是做成下面這個(gè)樣子就會(huì)和后退圖標(biāo)顯得太象了，意思區(qū)別不是太明確，會(huì)造成誤解。 就準(zhǔn)確性而言，上面那個(gè)刷新圖標(biāo)更讓客戶(hù)容易接受。,干凈，簡(jiǎn)潔，工具化

9、,視覺(jué)設(shè)計(jì),明確你的視覺(jué)狀態(tài) 理想狀態(tài)是：用戶(hù)的每個(gè)操作行為都應(yīng)該有相 應(yīng)的視覺(jué)反饋，比如有沒(méi)有選中，操作有沒(méi)有成功等。僅按鼠標(biāo)操作的狀態(tài)分就有默認(rèn)、鼠標(biāo)指向、鼠標(biāo)按下、鼠標(biāo)點(diǎn)擊四種狀態(tài)，準(zhǔn)確的反饋可以讓用戶(hù)流暢的感 覺(jué)自己的操作；關(guān)于鼠標(biāo)和鍵盤(pán)的狀態(tài)，大家在操作系統(tǒng)的時(shí)候注意一下，就可以看到各種操作的對(duì)應(yīng)關(guān)系，而我們平時(shí)是不太注意的，因?yàn)樗倪_(dá)到了設(shè)計(jì)的 目的。站在是否可用的角度分有：可用狀態(tài)、不可用狀態(tài).,干凈，簡(jiǎn)潔，工具化,視覺(jué)設(shè)計(jì),請(qǐng)用準(zhǔn)確的視覺(jué)來(lái)輔助信息反饋。 我們用來(lái)對(duì)應(yīng)的視覺(jué)輔助圖要力求表現(xiàn)每種情況的準(zhǔn)確含義。當(dāng)然，為了增加趣味性，我們可以允許任意表現(xiàn)形式或表情的存在，前提是

10、你的表達(dá)要準(zhǔn)確，不要有歧義，否則使用者的第一反映可能不是你要表現(xiàn)的，由于理解的歧義所帶來(lái)的損失和挫折感會(huì)讓用戶(hù)感到厭惡。 通過(guò)下面幾張圖我們來(lái)對(duì)比一下：,干凈，簡(jiǎn)潔，工具化,視覺(jué)設(shè)計(jì),下面哪一個(gè)更能體現(xiàn)出“對(duì)不起，出錯(cuò)啦！”,干凈，簡(jiǎn)潔，工具化,視覺(jué)設(shè)計(jì),第二張圖的淘氣鬼臉圖，我以為我成功了； 第三張圖的表 現(xiàn)讓我以為是在警告。 第四張圖如果你犯錯(cuò)的時(shí)候出現(xiàn)了，你會(huì)想到什么？ 只有第一張圖讓我意識(shí)到我失敗了，并且有趣味性。 由此可見(jiàn)： 趣味性和準(zhǔn)確性并不矛盾， 我們?cè)谠O(shè)計(jì)趣味性的同時(shí)，別忽略設(shè)計(jì)的準(zhǔn)確性。,干凈，簡(jiǎn)潔，工具化,視覺(jué)設(shè)計(jì),3、視覺(jué)設(shè)計(jì)制定規(guī)范，維持統(tǒng)一,文字使用要規(guī)范，語(yǔ)法，大小

11、，顏色，大小寫(xiě)都需要注意 能用一個(gè)詞表達(dá)的，不用一句話(huà)。能用一句話(huà)表達(dá)清楚的，不用兩句話(huà) 每個(gè)概念都只有唯一一種表達(dá)。如”VIP”的概念 能用一種字體顏色的，不多用一種顏色 能用一種字體大小的，不多用一種大小 用標(biāo)準(zhǔn)組件 能用標(biāo)準(zhǔn)控件的，不自己畫(huà)控件 能用文字的，不用圖片（加圖片是要申請(qǐng)的） 保持盡可能少的格式式樣 維持統(tǒng)一 就算字體和行間距等小細(xì)節(jié)都應(yīng)該關(guān)注到,視覺(jué)設(shè)計(jì),4、視覺(jué)設(shè)計(jì)重點(diǎn)突出,每個(gè)頁(yè)面（板塊）只有一塊視覺(jué)重點(diǎn)。并且，突出重點(diǎn)，不讓用戶(hù)去找。左邊的設(shè)計(jì)排版不對(duì)，有一橫條的壓著的情況黃色塊就不能加框，視覺(jué)會(huì)很繁雜看著不舒服，句號(hào)也是多余的 原來(lái)方案 目前方案,視覺(jué)設(shè)計(jì),Pony：

12、在設(shè)置了獨(dú)立密碼的情況下, 當(dāng)?shù)顷懙叫枰斎氇?dú)立密碼時(shí), 總是先出來(lái)輸入框, 此時(shí)已可輸入, 我經(jīng)常是立刻輸入, 但打了幾個(gè)字母后上面, 才瞬間出現(xiàn)上面的黃色提醒請(qǐng)輸入獨(dú)立保護(hù)密碼, 而會(huì)導(dǎo)致輸入框位置立刻下壓, 比較影響輸入. 最好能改一改html里的結(jié)構(gòu), 能夠快速讓人立刻輸入(越快越好)的基礎(chǔ)上,其他顯示的可以慢些load到但不應(yīng)影響其他部件的改變.,5、視覺(jué)設(shè)計(jì)防止不恰當(dāng)?shù)牡妄g化,在追求“簡(jiǎn)單”的過(guò)程中，QQMail不知不覺(jué)的變得“中性”、“成熟”化。 當(dāng)我們更加理性和嚴(yán)謹(jǐn)?shù)卦O(shè)計(jì)產(chǎn)品的時(shí)候，自然會(huì)遠(yuǎn)離“低齡”傾向?！俺墒臁痹醋院侠淼脑O(shè)計(jì)，“低齡”源自不合常理的設(shè)計(jì)。,視覺(jué)設(shè)計(jì),不恰當(dāng)?shù)?/p>

13、低齡化,小結(jié),傳播產(chǎn)品理念 大氣成熟，干凈整潔，工具化 規(guī)范與統(tǒng)一 重點(diǎn)突出 防止不恰當(dāng)?shù)牡妄g化,視覺(jué)設(shè)計(jì),案例分析, ,視覺(jué)設(shè)計(jì),我們的案例是從整體視覺(jué)這塊來(lái)分析,不同點(diǎn),頁(yè)面導(dǎo)航,飯桶網(wǎng)：無(wú)導(dǎo)航條，有標(biāo)簽 大眾點(diǎn)評(píng)網(wǎng)：有導(dǎo)航條，有標(biāo)簽,視覺(jué)設(shè)計(jì),大眾點(diǎn)評(píng)網(wǎng),飯桶網(wǎng),廣告,大眾點(diǎn)評(píng)網(wǎng)：有廣告，但廣告能避免干擾視線(xiàn)，避免喧賓奪主，廣告圖片符合整體風(fēng)格 飯桶網(wǎng)：有廣告，且廣告干擾視線(xiàn)，喧賓奪主,視覺(jué)設(shè)計(jì),大眾點(diǎn)評(píng)網(wǎng),飯桶網(wǎng),不同點(diǎn),網(wǎng)站地圖,飯桶網(wǎng)：為用戶(hù)提供清晰的網(wǎng)站指引。 大眾點(diǎn)評(píng)網(wǎng)：地圖更加具體。,視覺(jué)設(shè)計(jì),大眾點(diǎn)評(píng)網(wǎng),飯桶網(wǎng),不同點(diǎn),新開(kāi)窗口,盡量減少新開(kāi)的窗口，以避免開(kāi)過(guò)多的無(wú)效窗口，

14、設(shè)置彈出窗口的關(guān)閉功能。 顯然大眾點(diǎn)評(píng)網(wǎng)就比飯桶網(wǎng)做的好。,視覺(jué)設(shè)計(jì),大眾點(diǎn)評(píng)網(wǎng),飯桶網(wǎng),不同點(diǎn),欄目的層級(jí),飯桶網(wǎng)：導(dǎo)航不清晰 ，欄目沒(méi)超過(guò)3層。 大眾點(diǎn)評(píng)網(wǎng)：導(dǎo)航清晰、欄目超過(guò)3層。,視覺(jué)設(shè)計(jì),不同點(diǎn),內(nèi)容的原創(chuàng)性,公司介紹,飯桶網(wǎng)：有小部分內(nèi)容為轉(zhuǎn)載的 資訊 大眾點(diǎn)評(píng)網(wǎng)：盡量多采用原創(chuàng)性?xún)?nèi)容，以確保內(nèi)容的可讀性,飯桶網(wǎng)：除了以下的信息都有以外還有 視頻介紹。 大眾點(diǎn)評(píng)網(wǎng)：真實(shí)可靠的信息發(fā)布，包 括公司規(guī)模、發(fā)展?fàn)顩r、 公司資質(zhì)等,好友推薦,飯桶網(wǎng)：未提供 大眾點(diǎn)評(píng)網(wǎng)：提供郵件推薦功能,無(wú)論用戶(hù)瀏覽到哪一個(gè)層級(jí)，哪一個(gè)頁(yè)面，都可以清楚知道看到該頁(yè)面的路徑。,視覺(jué)設(shè)計(jì),設(shè)計(jì)風(fēng)格,符合用戶(hù)的審美習(xí)慣，并具有一定的引導(dǎo)性。,確保logo的保護(hù)空間，確保品牌的清晰展示 而又不占據(jù)過(guò)分空間。,網(wǎng)站LOGO,頁(yè)面速度,重點(diǎn)突出，主次分明，圖