網(wǎng)視覺設(shè)計原則

1、網(wǎng)頁視覺設(shè)計原那么網(wǎng)頁視覺設(shè)計原則關(guān)系到網(wǎng)站的用戶體驗。 然而對于網(wǎng)頁的設(shè)計原則， 需要網(wǎng)頁設(shè)計師充分了解 設(shè)計原 則才能設(shè)計出史好的網(wǎng)頁。這里網(wǎng) 站建設(shè)協(xié)策網(wǎng)絡(luò)給大家介紹一下網(wǎng)頁的視覺設(shè)計原則。A 1、通過字體表達(dá)產(chǎn)品風(fēng)格視覺設(shè)計中，字體的選擇對于產(chǎn)品風(fēng)格的表現(xiàn)是作用明顯的，同一段丈字，用不同字體寫出，感覺 確實 千差萬別。 2 必亠、通過配色展示產(chǎn)品定位通過配色來展示產(chǎn)品定位， 也是設(shè)計師必用的方法。 視覺設(shè)計前期調(diào)研階段， 常常通過情緒版提 煉適合 目標(biāo)用戶的顏色，形成一整套的配色方案。八紫色關(guān)鍵詞：優(yōu)雅.高貴.女性.莊重、神圣.成熟.深度. 神秘 . 時尚。紅色，關(guān)鍵詞：藝術(shù)、熱烈、開

2、放、激情、積極、活力、喜慶、生命、成熟。 藍(lán)色，關(guān)鍵詞：理智、知性、公正、商務(wù)、科技 .嚴(yán)格.細(xì)致、嚴(yán)謹(jǐn).公式化。必橙色，關(guān)鍵詞： 陽 光、輝煌.活動.溫吸、記憶.家庭.健康.快樂。a綠色，關(guān)鍵詞：成長、樸素、公益、生命、平安.新群. 和平 . 春天、大自然。心3、 營造統(tǒng)一的品牌形象 AA品牌形象是一個很大的領(lǐng)域，具體到某個產(chǎn)品的品牌感，更多的還是 通過 視覺形象來傳達(dá)。這就需要視覺設(shè)計師制定一套系統(tǒng)的視覺體系，讓用戶看一眼，就能淸晰 地識別。心4、造型讓產(chǎn)品史有沖擊力必 4 視覺設(shè)計中，夸張的造型對用戶的沖擊力非常大， 很 容易一下狐住用戶。5、重要內(nèi)容留在首屛4 這是視覺和交互設(shè)計師中都

3、要注意的，有時往往原型中放在了首屛?，視覺設(shè)計時由于一些原因 加摸塊或是加高頭圖又被擠到了下面，這點大家在視覺審核與測試中要格外注意。4 6 、讓頁面有展次有重點交互設(shè)計師完成頁面布局設(shè)計，突出頁面重點，方便用戶瀏覽信息、完成任務(wù)。視覺設(shè)計階段，好的設(shè)計稿對于延續(xù)前期交互理念，引導(dǎo)用戶操作是非常有幫助的。必必 7、模擬現(xiàn)實世界匹配 用戶心智 棧型 A 4 原型設(shè)計中常說，操作方式要符合用戶的心智模型，其實視覺設(shè)計也一樣。把一 些現(xiàn)實元素 拿來，模擬真實世界，會給用戶身臨其境的感覺。8、插圖讓產(chǎn)品更有情感插圖在文章頁面中很多，我這里只舉錯誤頁的例子。大家都有感觸，錯誤的體臉是非常不好的，但設(shè)計師

4、卻用一張張插圖，讓這種挫敗和焦躁的感覺律到了最低，化解了用戶的負(fù)面情緒，同時產(chǎn)品也史有味道了。亠9、巧用I con,頁面更梢彩aIcon 設(shè)計是視覺設(shè)計非常重要的一局部，很多晦澀難懂的內(nèi)容，配上 I con 圖形化解釋，會史容 易理 解。相反，如果圖標(biāo)的設(shè)計元素不適宜，或是將圖標(biāo)將背景亂用，也會干擾用戶理解 。 a A 10、柵格 化提升用戶體驗和開發(fā)本錢必亠柵格化在視覺設(shè)計中，越來越受重視，究其原來，主要 是三點：一是 可以統(tǒng)一頁面的布局，提升用戶的瀏覽操作體臉；二是將頁面模塊的尺寸標(biāo)準(zhǔn)化，降低開發(fā)和維護的本錢；最后，柵格化也是網(wǎng)頁設(shè)卄專業(yè)度的表達(dá)。必必至此，視覺設(shè)計原那么講完了。八 說了這

5、么多，我后簡單談?wù)勛鳛榻换ピO(shè)計師的我們該怎么做吧。思考這個問題 Z 前， 還請大家把以上的原那么再 復(fù)習(xí)一遍沁1. 通過字體表達(dá)產(chǎn)品風(fēng)格4 2. 通過配色展示產(chǎn)品定位4 3. 營造統(tǒng)一的品牌形象心 4? 造型讓產(chǎn)品更有沖擊力 A5? 重要內(nèi)容留在首屏亠6?讓頁面有層次有重點必必7.模擬現(xiàn)實世界匹配用戶心智模型 3亠?插圖讓產(chǎn)品史有情 感a 9?巧 用 I con 頁面史粘彩 13 必. 柵格化提升用戶體臉和開發(fā)本錢心總的來說，我們可以把這 10 個內(nèi)容歸成兩類，一個完全是視覺設(shè)計師的領(lǐng)域，以溝通為主： 另一 個，交互可以和視覺設(shè)計配合完成，溝通以外注重交付物的傳遞。第一類包括：通過字體表達(dá)產(chǎn)晶

6、風(fēng)格、通過配色展示產(chǎn)品定位、營造統(tǒng)一的品牌形象、造型讓產(chǎn)品更有沖擊力.模擬現(xiàn)實世界匹配用戶心智模型。必了解這些內(nèi)容，了解視覺設(shè)計師能做哪些提升體臉的爭情，才能史好地和他們溝通。讓視覺設(shè)計師提早了解需求，獲得對等的產(chǎn)品信息，才能更好地發(fā)揮設(shè)計的力量。亠第二類包括：重要內(nèi)容留在首屏、讓頁面有展次有重點、插圖讓產(chǎn)品史有情感、巧用 I c on 頁面更 精彩. 柵格化提升用戶體驗和開發(fā)本錢。 A 4這類原則，除了和視覺設(shè)計師有效溝通，我 好在自己的交 付物原型以及講解中有所表達(dá)。比方原型中通過不同灰度色塊表現(xiàn)設(shè)計重點、 注重各個組件的柵 格化.為重點內(nèi)容設(shè)置插圖和 I con 的占位符等等。通過這種對

7、視覺設(shè)計的理 解、交付物形式的傳遞， 配合視覺設(shè)計師做出史符合產(chǎn)品需求以及用戶體臉的產(chǎn)品。做設(shè)計也有一段時間了， 雖然設(shè)計原那么不離其宗， 但經(jīng)驗下來的心得告訴自己， 設(shè)計媒介的變 化帶來很 多媒介自身的特殊性，下面總結(jié)下網(wǎng)站視覺設(shè)計的一些要點，有他人經(jīng)驗，也有自己的心得： 1 4、log0：根本I ogo特征，符合I Og O設(shè)計根底平面設(shè)計通用顯示器效 果：清晰度，最小尺寸因顯示 器分辨率而帶來的，等同線下平面設(shè)計的印刷效果 42、文字：內(nèi)容等級決定字體、字號大小、粗細(xì)；狀態(tài)決定顏色默認(rèn)或者根據(jù)網(wǎng)站特殊統(tǒng)一丄3廣告：內(nèi)容圖片：尺寸樣式的定位，同一頁面的和諧性，圖片的優(yōu)化，位置的節(jié)奏，大小比

8、照。4、icon :品牌性，表達(dá)準(zhǔn)確合理，設(shè)計手法依據(jù)品牌性 ，一致性，作用：吸引，醒目，方便識別、理解、操作、記憶。a a 5 可點擊but ton :區(qū)別不可點擊，根據(jù) 人的生活經(jīng)驗：厚度， 可按，質(zhì)感實體聯(lián)想，邑彩品牌性、統(tǒng)一性、比照性；統(tǒng)一的樣式 大小依據(jù)里面文字的內(nèi)邊 距統(tǒng)一 八 6、背景圖片： 氣國效果營造， 同產(chǎn)品的統(tǒng) 一性，優(yōu)化品質(zhì)大小， 色彩信息， 實現(xiàn)方案 ， 47、圖文排版：主圖次文，圖文節(jié)奏，空隙，模塊化。48、當(dāng)前狀態(tài)：放大形狀，變邑反色、比照色、明度純度區(qū)別色 . 鏈進(jìn)鏈出后指定內(nèi) 容提 示。9、交互控件：樣式合理準(zhǔn)確性人對系統(tǒng)默認(rèn)的認(rèn)知和生活常規(guī)認(rèn)知，狀態(tài)視覺表現(xiàn)

9、樣式和動作過程優(yōu)化，創(chuàng)意。10、I oadi ng:內(nèi)容關(guān)聯(lián)性loadi n g前后的內(nèi)容關(guān)聯(lián)，無聊等待的樂趣？體積、面枳優(yōu)化，創(chuàng)意。心11 用戶反應(yīng)成功 .出錯、提示、無結(jié)果：文案明確、合理、人性化、創(chuàng)意，圖 形明確、醒 目、色彩的心理認(rèn)知準(zhǔn)確皮。八 12、動畫效果：過程合理模擬真網(wǎng)視覺設(shè)計原那么實環(huán)境的合理化人 連續(xù)，節(jié)奏感，用戶日常動作表現(xiàn)，音效配合，創(chuàng)意13、首尾設(shè)計：首品牌宣傳、自身特點、明確內(nèi)容、氣氣表達(dá)、創(chuàng)意。尾: 照應(yīng)、節(jié)奏與首，創(chuàng)意。14、適應(yīng)屏設(shè)計全屏設(shè)計：最大罠小屏幕的考慮文字、圖片的位置、折行效果4 A1 5. 固定尺寸的柵格設(shè)計：合理的單元格考慮黃金分割，單元格面積節(jié)奏，邊距統(tǒng)一性41 6、demo 設(shè)計樣稿：對內(nèi)容最多靈少的考慮。八 17 、頁面：品牌性，基調(diào)元素一致性，復(fù)用性，節(jié)奏感、面積感，視覺第一吸引，引導(dǎo)瀏覽，點線面關(guān)系，素描原 理運 用素描的根本規(guī)律來做頁面。? 18 、閱讀：背景對閱讀視力的舒適度，內(nèi)容與背景的比