網(wǎng)站UI視覺設(shè)計入門教程@PPT精選ppt課件.ppt

Web設(shè)計中 什么最重要 毫無疑問 內(nèi)容 但是 能夠在一瞬間 抓住訪問者眼球的是什么 是外觀 web 視覺設(shè)計 視覺設(shè)計 引言 討論的主題 web的視覺設(shè)計問題討論目的 有助于我們了解web設(shè)計中的視覺設(shè)計問題 加強我們的學(xué)習(xí)交流 更好的運用web中的視 覺設(shè)計 制作者 第八組全體成員 陳閃閃鄧成琳夏子晴黃河陶麗帆 視覺設(shè)計 先來看看視覺設(shè)計與其它web設(shè)計的關(guān)系 視覺設(shè)計 視覺設(shè)計的重要性 視覺設(shè)計的定義 視覺設(shè)計是指 針對眼睛官能的主觀形式的表現(xiàn)手段和結(jié)果 愛美之心人皆有之 在Web領(lǐng)域也不例外 無論網(wǎng)站界面采用什么樣的設(shè)計風(fēng)格 或簡約 明快 或復(fù)雜 精致 大家都喜歡井然有序 外觀漂亮的網(wǎng)站 漂亮的外觀 首先給訪問者一個不錯的第一印象 視覺設(shè)計 當談到網(wǎng)站的視覺設(shè)計這個問題時 有兩種截然相反的觀點 一 可用性倡導(dǎo)者們 一直認為 網(wǎng)站要便于使用 而非漂亮 jakobnielsen認為 幾乎所有為實現(xiàn)視覺效果而做的事情 都會對可用性產(chǎn)生妨礙 不過在過去幾年 可用性倡導(dǎo)者們的防線 以有松動 視覺設(shè)計 二 美觀性反對的觀點則將網(wǎng)站提升到 體驗 的高度 因此網(wǎng)站應(yīng)該利用web這種媒介的獨特性 它擴大媒介的限制 刺激 吸引 迷惑 愉悅 迷住訪問者 出色的視覺設(shè)計 能夠賦予意義 提供語境 喚起情感 它可激起訪問者的興趣 并使其相信網(wǎng)站的專業(yè)性和可靠性 它可以確定焦點 設(shè)立重點 建立網(wǎng)站元素之間的關(guān)系 并指導(dǎo)用戶完成任務(wù) 但是 如果不能妥善處理 可能會交付一個華麗空虛的網(wǎng)站 視覺設(shè)計 對使用web的人來說 爭論雙方的觀點既非完全錯誤 也非完全正確 事實上可用性與美觀性在web上是不沖突的 我們能夠同時擁有美感與功能性 讓我們盡全力平衡形式與功能 如果說 可用性因素使網(wǎng)站具有功能性 視覺設(shè)計使網(wǎng)站令人難忘 那么 我們的目標是 二者兼具 視覺設(shè)計 那么應(yīng)該怎樣做好web網(wǎng)站的視覺設(shè)計呢 視覺設(shè)計 視覺設(shè)計 傳播產(chǎn)品理念 01 視覺設(shè)計 干凈 簡潔 工具化 02 視覺設(shè)計 重點突出 04 視覺設(shè)計 防止不恰當?shù)牡妄g化 05 06 視覺設(shè)計 制定規(guī)范 維持統(tǒng)一 03 視覺設(shè)計 從五個方面做好視覺設(shè)計 1 視覺設(shè)計 傳播產(chǎn)品理念 只有當我們對產(chǎn)品抱有一個完美的理念和愿景的時候 我們才能做出優(yōu)美的設(shè)計來體現(xiàn)理念 QQ郵箱 常聯(lián)系 是騰訊的愿景 這個愿景需要完美的產(chǎn)品設(shè)計 優(yōu)秀的技術(shù)實現(xiàn) 和優(yōu)質(zhì)運營來達到 封面畫和選詞 呼應(yīng)郵件含義 淡雅而不張揚 視覺設(shè)計 傳播產(chǎn)品理念 找對你的感覺 視覺設(shè)計首先要考慮的就是整體的感覺 即視覺設(shè)計的風(fēng)格 視覺設(shè)計的風(fēng)格是否準確關(guān)系著設(shè)計的成敗 那么一個產(chǎn)品的視覺設(shè)計也同樣需要一個對的定位 最終以合適的視覺表現(xiàn)出來 我們不妨以幾種聊天軟件來做個的比較 從中窺視一點設(shè)計定位的視覺意味 看下面一組圖 視覺設(shè)計 視覺設(shè)計 傳播產(chǎn)品理念 圖一 QQ的視覺定位是以青少年為主的 所以它的視覺設(shè)計才采用了比較明亮活潑的色彩 圖二 圖三 msn和TM的視覺定位是以辦公室工作人員為定位 所以它的視覺使用比較穩(wěn)定和平靜的色彩 品牌 塑造身份視覺設(shè)計的一個任務(wù)就是 確保網(wǎng)站具有視覺一致性 所有頁面看起來 就像是從一個模子里刻出來的一樣 它們必須有相同的logo 相同的配色方案 以及 對大部分而言 相同的布局 訪問者看到一個頁面 就應(yīng)該可以立即識別出其他的所有頁面 除此之外 這種一致的外觀和感覺 應(yīng)支持網(wǎng)站的 品牌 什么叫品牌 它是一個產(chǎn)品或整個組織給人的整體映象 它包括logo 包裝 廣告 視覺呈現(xiàn) 當然還有網(wǎng)站本身 令人映象深刻的品牌 具有一種身份 個性 以及自身的特色 具有能夠吸引目標 與眾不同的外觀和感受 更為重要的是品牌令人難以忘記 傳播產(chǎn)品理念 視覺設(shè)計 2 視覺設(shè)計 干凈 簡潔 工具化 推廣 很重要 簡潔 也很重要 因此舍 推廣 而取 簡潔 語音郵箱放到郵箱登錄后的郵箱首頁右上角 但太重hardsell了 會影響一些速度和簡潔性不多用一個圖片在好友Qzone文章的摘要前加頭像 感覺會破壞閱讀感 容易吸引眼球到頭像而非文章 而從關(guān)注好友的角度 頭像能突出好友 但給用戶2個圖片 用戶看哪個呢 工具化設(shè)計意味著清晰的邏輯和操作 不是內(nèi)容越多越好 是越簡單越好 視覺設(shè)計 干凈 簡潔 工具化 視覺結(jié)構(gòu)和層級關(guān)系 頁面表現(xiàn)的層級關(guān)系和結(jié)構(gòu)是用視覺的形式表現(xiàn)出來的 比如包含關(guān)系及業(yè)務(wù)的先后順序的表現(xiàn) 讓用戶通過視覺就能夠直接的明白應(yīng)該先看什么 后看什么 元素時間是什么關(guān)系等等 讓我們來看下面的兩張圖 視覺設(shè)計 wordpress博客的后臺管理界面 我們可以看到清晰的從屬關(guān)系 管理 文章 文章內(nèi)的修改區(qū)域 干凈 簡潔 工具化 視覺設(shè)計 vista系統(tǒng)的界面 三個區(qū)域的層級關(guān)系一目了然 1 區(qū)要高出 2 區(qū)域 2 區(qū)域要比 3 區(qū)域的顏色深 這樣整體的從屬關(guān)系就很明顯 干凈 簡潔 工具化 視覺設(shè)計 是什么就是什么 圖形達意盡量明確 什么樣子代表什么都有其特定的視覺暗示 如果不是游戲 我們應(yīng)該盡量避免和用戶捉迷藏 例如應(yīng)該用頁簽來表現(xiàn)的從屬關(guān)系 我們不應(yīng)該簡單的做幾個鏈接 這樣會表達不清楚各部分關(guān)系 除此類的布局因素之外 圖標的表達是視覺中的一大塊 好的圖形表達可以幫助用戶直觀感受功能 縮短操作時間 提高效率 不過表達不好可就麻煩了 用戶可能要歪著腦袋想半天 干凈 簡潔 工具化 視覺設(shè)計 箭頭所指之處為刷新圖標 上面那個刷新圖為原來圖標 假如是做成下面這個樣子就會和后退圖標顯得太象了 意思區(qū)別不是太明確 會造成誤解 就準確性而言 上面那個刷新圖標更讓客戶容易接受 干凈 簡潔 工具化 視覺設(shè)計 明確你的視覺狀態(tài)理想狀態(tài)是 用戶的每個操作行為都應(yīng)該有相應(yīng)的視覺反饋 比如有沒有選中 操作有沒有成功等 僅按鼠標操作的狀態(tài)分就有默認 鼠標指向 鼠標按下 鼠標點擊四種狀態(tài) 準確的反饋可以讓用戶流暢的感覺自己的操作 關(guān)于鼠標和鍵盤的狀態(tài) 大家在操作系統(tǒng)的時候注意一下 就可以看到各種操作的對應(yīng)關(guān)系 而我們平時是不太注意的 因為它默默的達到了設(shè)計的目的 站在是否可用的角度分有 可用狀態(tài) 不可用狀態(tài) 干凈 簡潔 工具化 視覺設(shè)計 請用準確的視覺來輔助信息反饋 我們用來對應(yīng)的視覺輔助圖要力求表現(xiàn)每種情況的準確含義 當然 為了增加趣味性 我們可以允許任意表現(xiàn)形式或表情的存在 前提是你的表達要準確 不要有歧義 否則使用者的第一反映可能不是你要表現(xiàn)的 由于理解的歧義所帶來的損失和挫折感會讓用戶感到厭惡 通過下面幾張圖我們來對比一下 干凈 簡潔 工具化 視覺設(shè)計 下面哪一個更能體現(xiàn)出 對不起 出錯啦 干凈 簡潔 工具化 視覺設(shè)計 第二張圖的淘氣鬼臉圖 我以為我成功了 第三張圖的表現(xiàn)讓我以為是在警告 第四張圖如果你犯錯的時候出現(xiàn)了 你會想到什么 只有第一張圖讓我意識到我失敗了 并且有趣味性 由此可見 趣味性和準確性并不矛盾 我們在設(shè)計趣味性的同時 別忽略設(shè)計的準確性 干凈 簡潔 工具化 視覺設(shè)計 3 視覺設(shè)計 制定規(guī)范 維持統(tǒng)一 文字使用要規(guī)范 語法 大小 顏色 大小寫都需要注意能用一個詞表達的 不用一句話 能用一句話表達清楚的 不用兩句話每個概念都只有唯一一種表達 如 VIP 的概念能用一種字體顏色的 不多用一種顏色能用一種字體大小的 不多用一種大小用標準組件能用標準控件的 不自己畫控件能用文字的 不用圖片 加圖片是要申請的 保持盡可能少的格式式樣維持統(tǒng)一就算字體和行間距等小細節(jié)都應(yīng)該關(guān)注到 視覺設(shè)計 4 視覺設(shè)計 重點突出 每個頁面 板塊 只有一塊視覺重點 并且 突出重點 不讓用戶去找 左邊的設(shè)計排版不對 有一橫條的壓著的情況黃色塊就不能加框 視覺會很繁雜看著不舒服 句號也是多余的原來方案目前方案 視覺設(shè)計 Pony 在設(shè)置了獨立密碼的情況下 當?shù)顷懙叫枰斎氇毩⒚艽a時 總是先出來輸入框 此時已可輸入 我經(jīng)常是立刻輸入 但打了幾個字母后上面 才瞬間出現(xiàn)上面的黃色提醒 請輸入獨立保護密碼 而會導(dǎo)致輸入框位置立刻下壓 比較影響輸入 最好能改一改html里的結(jié)構(gòu) 能夠快速讓人立刻輸入 越快越好 的基礎(chǔ)上 其他顯示的可以慢些load到但不應(yīng)影響其他部件的改變 5 視覺設(shè)計 防止不恰當?shù)牡妄g化 在追求 簡單 的過程中 QQMail不知不覺的變得 中性 成熟 化 當我們更加理性和嚴謹?shù)卦O(shè)計產(chǎn)品的時候 自然會遠離 低齡 傾向 成熟 源自合理的設(shè)計 低齡 源自不合常理的設(shè)計 視覺設(shè)計 不恰當?shù)牡妄g化 小結(jié) 傳播產(chǎn)品理念大氣成熟 干凈整潔 工具化規(guī)范與統(tǒng)一重點突出防止不恰當?shù)牡妄g化 視覺設(shè)計 案例分析 視覺設(shè)計 我們的案例是從整體視覺這塊來分析 不同點 頁面導(dǎo)航 飯桶網(wǎng) 無導(dǎo)航條 有標簽大眾點評網(wǎng) 有導(dǎo)航條 有標簽 視覺設(shè)計 大眾點評網(wǎng) 飯桶網(wǎng) 廣告 大眾點評網(wǎng) 有廣告 但廣告能避免干擾視線 避免喧賓奪主 廣告圖片符合整體風(fēng)格飯桶網(wǎng) 有廣告 且廣告干擾視線 喧賓奪主 視覺設(shè)計 大眾點評網(wǎng) 飯桶網(wǎng) 不同點 網(wǎng)站地圖 飯桶網(wǎng) 為用戶提供清晰的網(wǎng)站指引 大眾點評網(wǎng) 地圖更加具體 視覺設(shè)計 大眾點評網(wǎng) 飯桶網(wǎng) 不同點 新開窗口 盡量減少新開的窗口 以避免開過多的無效窗口 設(shè)置彈出窗口的關(guān)閉功能 顯然大眾點評網(wǎng)就比飯桶網(wǎng)做的好 視覺設(shè)計 大眾點評網(wǎng) 飯桶網(wǎng) 不同點 欄目的層級 飯桶網(wǎng) 導(dǎo)航不清晰 欄目沒超過3層 大眾點評網(wǎng) 導(dǎo)航清晰 欄目超過3層 視覺設(shè)計 不同點 內(nèi)容的原創(chuàng)性 公司介紹 飯桶網(wǎng) 有小部分內(nèi)容為轉(zhuǎn)載的資訊大眾點評網(wǎng) 盡量多采用原創(chuàng)性內(nèi)容 以確保內(nèi)容的可讀性 飯桶網(wǎng) 除了以下的信息都有以外還有視頻介紹 大眾點評網(wǎng) 真實可靠的信息發(fā)布 包括公司規(guī)模 發(fā)展狀況 公司資質(zhì)等 好友推薦 飯桶網(wǎng) 未提供大眾點評網(wǎng) 提供郵件推薦功能 無論用戶瀏覽到哪一個層級 哪一個頁面 都可以清楚知道看到該頁面的路徑 視覺設(shè)計 設(shè)計風(fēng)格 符合用戶的審美習(xí)慣 并具有一定的引導(dǎo)性 確保logo的保護空間 確保品牌的清晰展示而又不占據(jù)過分空間 網(wǎng)站LOGO 頁面速度 重點突出 主次分