網(wǎng)頁視覺規(guī)范（網(wǎng)頁視覺規(guī)范是什么）

大家好！今天讓小編來大家介紹下關(guān)于網(wǎng)頁視覺規(guī)范的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，相關(guān)業(yè)務(wù)請撥打電話：175-8598-2043，或添加微信：1454722008

文章目錄列表:

• 1、視覺設(shè)計（APP UI）規(guī)范文檔怎么寫？

• 2、網(wǎng)頁設(shè)計字體設(shè)計規(guī)范

• 3、PC客戶端UI設(shè)計有哪些規(guī)范

• 4、網(wǎng)頁設(shè)計主要指的是哪些方面

一、視覺設(shè)計（APP UI）規(guī)范文檔怎么寫？

在創(chuàng)業(yè)公司工作的這幾年中，很多工作都要涉及到視覺設(shè)計，但一般公司不會那么細(xì)，在我腦海中分為三種：

1.平面設(shè)計師： 限于2d廣告設(shè)計，比如名片、海報、宣傳畫冊、單頁等等，做出來的UI可執(zhí)行性很低，很多和原生系統(tǒng)相斥，工程師會很頭疼。無規(guī)范可言。

2.UI設(shè)計師：限于軟件UI的設(shè)計，一般的工程師拿到設(shè)計文件執(zhí)行起來沒有很大難度，但是做出來的平面沒有創(chuàng)意，從技術(shù)上來看一般，想要讓人眼前一亮或是加上營銷的想法很難。無規(guī)范可言。

3.視覺設(shè)計師：有很好的審美觀念，有平面設(shè)計大作，針對不同場所，不同功能的設(shè)計有自己獨特的見解與經(jīng)驗；有3D設(shè)計經(jīng)驗，一般都有家居、建筑設(shè)計經(jīng)驗；對于不同系統(tǒng)的軟件UI與UE都有研究，并針對不同功能的應(yīng)用規(guī)劃其功能流程讓UI的不僅美觀并且易于上手。 對于每一個公司或項目群都有其規(guī)范文檔。

然而我就遇到過第一種，請不起第二種和第三種，平面壓力很大導(dǎo)致辭職的較多，交接工作時我是來一個又要和他重新說一遍，一直覺得應(yīng)該出個文檔，看完之后能夠馬上上手的那種，現(xiàn)在才知道原來是叫做視覺設(shè)計規(guī)范文檔

注明使用版本、設(shè)計操作系統(tǒng)、與開發(fā)時要說明的

1.指導(dǎo)分工協(xié)作

2.避免重復(fù)工作

3.視覺統(tǒng)一 ，形象加分

4.讓思路更加清晰，工作更加高效

視覺設(shè)計師、平面設(shè)計師、交互設(shè)計師、產(chǎn)品經(jīng)理、程序員、市場運營人員、前端開發(fā)、軟件測試

色調(diào)：確認(rèn)主題色、組件色

字號：根據(jù)實際用途與場景適配，以實際效果良好為準(zhǔn)，確定一個適合值即可。

通用組件樣式：將整個UI設(shè)計中能夠通用的組件統(tǒng)一風(fēng)格，比如：對話框，提示框，確認(rèn)信息框等

不同狀態(tài)下組件樣式：不同狀態(tài)下的組件樣式一般為相同的，針對使用場景以實際效果為準(zhǔn)

間距：框架中的間距、元素與元素之間的間距

圖片規(guī)范：不同頁面、位置、圖片的尺寸、顏色等等參數(shù)要求

不同適用版本：平板、手機(jī)、電腦等不同版本

整體框架修飾：將整體框架固定，作為模板往里填，有利于掌控整體風(fēng)格

不同級別子頁面風(fēng)格：不同子界面的設(shè)計可以完全放給下個設(shè)計師，有需要也可以進(jìn)行限制

第一步確定清晰的流程與思路

第二步：

適配尺寸 ：android、ios不同系統(tǒng)、不同設(shè)備    表格或結(jié)構(gòu)圖表現(xiàn)

可參考  android尺寸等規(guī)范參考

要注意的是：

    anrdoid 要切圖，將圖標(biāo)和圖片元素切為hdpi、xhdpi、xxhdpi三套，放入三個文件夾中打包

    ios要切圖，將圖標(biāo)和圖片元素切為@2x,@3x兩套，放入兩個文件夾中打包

第三步：

  確認(rèn)主題色與元素色

在appstyle系統(tǒng)統(tǒng)一默認(rèn)配色中設(shè)置為主題色

在其他元素比如：分割線顏色、卡片陰影顏色深度、重要顏色文字深度等等

第四步：

文字

蘋果常用字體 點這里！

不同地方、用途中文字的字體、字號

第五步：

圖標(biāo)

統(tǒng)一的尺寸，特殊用途的注明、不同狀態(tài)的請附加

第六步：

按鈕

按鈕的樣式與不同狀態(tài)的樣式、尺寸

懸浮按鈕56dp，普通按鈕48dp

第七步：

公共控件

比如對話框

第八步：

模塊

確定某個模塊的風(fēng)格

第九步：

布局

確定大致布局風(fēng)格

一次性不能將規(guī)范全都覆蓋到位，可以不斷的添加并注明添加人和時間，經(jīng)過設(shè)計部審核才能生效發(fā)布。

二、網(wǎng)頁設(shè)計字體設(shè)計規(guī)范

網(wǎng)頁設(shè)計需要將圖片和文字相結(jié)合，達(dá)到融合的境界，當(dāng)然文字的設(shè)計也是有一定的規(guī)范的，下面是關(guān)于網(wǎng)頁設(shè)計字體設(shè)計規(guī)范，歡迎參考！

網(wǎng)頁設(shè)計常用字號

最好用偶數(shù)字號

1、Header導(dǎo)航文字12號或14號;

2、Menu導(dǎo)航文字14—18號;

3、Sidebar文字12號或14號，

4、一級菜單使用14號、二級菜單使用12號

或一級菜單使用12號加粗、二級菜單使用12號

5、Footer 文字12號或14號

6、正文：大標(biāo)題文字24—32號;標(biāo)題文字16或18號;正文文字12號或14號

7、標(biāo)題文字字號，18px，20px，24px，28px，32px， 盡可能使用雙數(shù)

8、按鈕文字：比如登錄、注冊頁面按鈕或其他按鈕，文字14—16號，可根據(jù)實際情況調(diào)整大小或加粗。

9、同一層級的字號搭配應(yīng)該保持一致。比如，同一層級的版塊中標(biāo)題文字和內(nèi)容文字大小的一致性

在蘋果官網(wǎng)中，產(chǎn)品展示文字以64號和32號搭配，文字內(nèi)容簡短有力，可讀性強(qiáng)，同時非常具有視覺沖擊力，突出顯示了品牌特征。

字體排版規(guī)范

一、最佳易讀性規(guī)范

1.行寬

傳統(tǒng)圖書排版每行最佳字符數(shù)是55—75，實際在網(wǎng)頁上每行字符75—85更流行。中文在14號字體時，建議35—45個文字

2.行高

網(wǎng)頁設(shè)計中，文字間距一般根據(jù)字體大小選1—1.5倍作為行間距，1.5—2倍作為段間距

比如12號字體，行間距是12px—18px，段落間距則是18px—24px。

另外，行高/段落之間的空白=0.754。行間距正好是段落間距的75%是非常常見的。

3.行對齊

通常情況下，建議在頁面上只使用一種文本對齊，盡量避免兩端對齊

4.文字留白

在排版文字時，在版面需要留出空余空間，留白面積從小到大應(yīng)該遵循的順序是：字間距、行間距、段間距。此外，在排版內(nèi)容區(qū)之前，需要根據(jù)頁面實際情況給頁面四周留出余白。

5、CRAP原則(carp)

對比(Contrast)、重復(fù)(Repetition)、對齊(Alignment)、親密性(Proximity)

字體選擇

字體：中文：宋體，微軟雅黑，方正系列(無狀態(tài))

字號：網(wǎng)頁中正文/導(dǎo)航字號在12px-18px之間

英文可以偏小一些 10px-16px

再小識別性就不是特別好了

中規(guī)中矩，經(jīng)典通用

中易宋體

Win最常見的'字體，小字體點陣，大字體TrueType，但是大字體并不好看，所以最好別做標(biāo)題。

微軟雅黑

大段的微軟雅黑字體排列略顯厚重，如果是在網(wǎng)頁上長時間瀏覽，會讓人的眼睛產(chǎn)生不適。相比而言，襯線字體裝飾性強(qiáng)，具有易讀性，所以宋體更適合知乎網(wǎng)站這種大段文字網(wǎng)站

微軟雅黑給人的感受包括平和、干凈、簡單、平靜、專業(yè)

華文細(xì)黑

Mac下的默認(rèn)中文。

英文

Helvetica:

被評為設(shè)計師最愛的字體，Realist風(fēng)格，簡潔現(xiàn)代的線條，非常受到追捧。在Mac下面被認(rèn)為是最佳的網(wǎng)頁字體，在Windows下由于Hinting的原因顯示很糟糕。

Arial:

Helvetica的「克隆」，和Helvetica非常像，細(xì)節(jié)上比如R和G有小小差別。如果字號太小，文字太多，看起來會有些累眼。Win和Mac顯示都正常

Lucida Family:

Lucida Grande是Mac OS UI的標(biāo)準(zhǔn)字體，屬于humanist風(fēng)格，稍微活潑一點。Mac下的顯示要比Win下好。

Verdana:

專門為了屏顯而設(shè)計的字體，humanist風(fēng)格，在小字號下仍可以清楚顯示，但是字體細(xì)節(jié)缺失嚴(yán)重，最好別做標(biāo)題。

Tahoma:

也是humanist風(fēng)格，字體和Verdana有點像，但是略窄一些，counter略小，曾經(jīng)是Windows的標(biāo)準(zhǔn)字體，Mac 10.5之后默認(rèn)也有安裝。

Verdana：

是一套無襯線字體，由于它在小字上仍有結(jié)構(gòu)清晰端整、閱讀辨識容易等高品質(zhì)的表現(xiàn)，因而在1996年推出后即迅速成為許多領(lǐng)域所愛用的標(biāo)準(zhǔn)字型之一。

Georgia:

基本上適合正文屏顯的襯線字體，非Georgia莫屬了。筆畫粗重，襯線明線，輪廓較大，小字體顯示也很清晰，同時細(xì)節(jié)還算OK。

有些偏藝術(shù)類的網(wǎng)站的大字會使用lobster。更藝術(shù)的網(wǎng)站就搜索free font，或者font freebie吧

Trebuchet、Georgia、Times New Roman、Arial、Lucida等字體在26px或更大像素時效果是比較好的，非常適合作為正文的標(biāo)題。

網(wǎng)頁banner字體

網(wǎng)頁banner的字體選用方法是要根據(jù)banner的主題，去挑選字體，因為字體本身也是有性格的

第一類，穩(wěn)定型(協(xié)調(diào)，齊全，穩(wěn)定，高質(zhì))

微軟雅黑、冬青黑體、宋體、華文細(xì)黑、方正正中黑、方正蘭亭系列

第二類，剛硬，銳利，清晰，強(qiáng)烈

造字工坊力黑體、造字工坊版黑體、造字工坊勁黑體、銳字逼格銳線體簡、張海山銳線體、華康儷金黑、蒙納超剛黑體

(更適用大氣，熱烈，權(quán)威，聲明等主題)

第三類，輕松，手寫，可愛，童趣，親切

方正經(jīng)黑、華康海報、漢儀小麥、方正稚藝、新蒂下午茶、漢儀歪歪體、新蒂小丸子

(適用于，游戲娛樂活動海報，h5廣告頁面，兒童/女性主題)

第四類，靈動，清新，秀雅，精致，古韻

方正清刻本悅宋簡體、方正宋刻本秀楷體、方正宋刻本、秀楷體、漢儀全唐詩、簡康熙字典體、祥南行書體、造字工房、刻宋

(適用于復(fù)古，典雅，傳統(tǒng)，品質(zhì)，靈動等主題)

三、PC客戶端UI設(shè)計有哪些規(guī)范

1、簡易性

界面的簡潔是要讓用戶便于使用、便于了解產(chǎn)品，并能減少用戶發(fā)生錯誤選擇的可能性。

2、用戶語言

界面中要使用能反映用戶本身的語言，而不是游戲設(shè)計者的語言。

3、記憶負(fù)擔(dān)最小化

人腦不是電腦，在設(shè)計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶有限且極不穩(wěn)定，24小時內(nèi)存在約25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。

4、一致性

它是每一個優(yōu)秀界面都具備的特點。界面的結(jié)構(gòu)必須清晰且一致，風(fēng)格必須與產(chǎn)品內(nèi)容相一致。軟件中往往存在多個組成部分（組件、元素）。不同組成部分之間的交互設(shè)計目標(biāo)需要一致。交互元素的外觀往往影響用戶的交互效果。同一個（類）軟件采用一致風(fēng)格的外觀，對于保持用戶焦點，改進(jìn)交互效果有很大幫助。

5、清楚

在視覺效果上便于理解和使用。軟件要為用戶使用，用戶必須可以理解軟件各元素對應(yīng)的功能。如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過對該元素的操作，理解其對應(yīng)的功能。

6、用戶的熟悉程度

用戶可通過已掌握的知識來使用界面，但不應(yīng)超出一般常識。

7、從用戶習(xí)慣考慮

想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。

通過比較兩個不同世界(真實與虛擬)的事物，完成更好的設(shè)計。如：書籍對比竹簡。

8、排列

一個有序的界面能讓用戶輕松的使用。軟件的交互流程，用戶可以控制。功能的執(zhí)行流程，用戶可以控制。

9、安全性

用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統(tǒng)的提示。

10、靈活性

簡單來說就是要讓用戶方便的使用，但不同于上述。即互動多重性，不局限于單一的工具(包括鼠標(biāo)、鍵盤或手柄、界面)。

11、人性化

高效率和用戶滿意度是人性化的體現(xiàn)。應(yīng)具備專家級和初級玩家系統(tǒng)，即用戶可依據(jù)自己的習(xí)慣定制界面，并能保存設(shè)置。

四、網(wǎng)頁設(shè)計主要指的是哪些方面

一、 明確建立網(wǎng)站的目標(biāo)和用戶需求

Web站點的設(shè)計是展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務(wù)、體現(xiàn)企業(yè)發(fā)展戰(zhàn)略的重要途徑，因此我們必須明確設(shè)計站點的目的和用戶需求，從而做出切實可行的設(shè)計計劃。我們會根據(jù)消費者的需求、市場的狀況、企業(yè)自身的情況等進(jìn)行綜合分析，以“消費者（customer)”為中心，而不是以“美術(shù)”為中心進(jìn)行設(shè)計規(guī)劃。 在設(shè)計規(guī)劃時我們會考慮： 建設(shè)網(wǎng)站的目的是什么？ 為誰提供服務(wù)和產(chǎn)品？ 企業(yè)能提供什么樣的產(chǎn)品和服務(wù)？ 網(wǎng)站的目的消費者和受眾的特點是什么？ 企業(yè)產(chǎn)品和服務(wù)適合什么樣的表現(xiàn)方式（風(fēng)格）？

二、網(wǎng)頁設(shè)計總體方案主題鮮明

在目標(biāo)明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計方案。對網(wǎng)站的整體風(fēng)格和特色作出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。 Web站點應(yīng)針對所服務(wù)對象（機(jī)構(gòu)或人）的不同而具有不同的形式。有些站點只提供簡潔文本信息；有些則采用多媒體表現(xiàn)手法，提供華麗的圖像、閃爍的燈光、復(fù)雜的頁面布置，甚至可以下載聲音和錄像片段。好的Web站點把圖形表現(xiàn)手法和有效的組織與通信結(jié)合起來。 為了做到主題鮮明突出，要點明確，我們將按照客戶的要求，以簡單明確的語言和畫面體現(xiàn)站點的主題；調(diào)動一切手段充分表現(xiàn)網(wǎng)站點的個性和情趣，辦出網(wǎng)站的特點。 Web站點主頁應(yīng)具備的基本成分包括： 頁頭：準(zhǔn)確無誤地標(biāo)識你的站點和企業(yè)標(biāo)志； Email地址：用來接收用戶垂詢； 聯(lián)系信息：如普通郵件地址或電話； 版權(quán)信息：聲明版權(quán)所有者等。 充分利用已有信息，如客戶手冊．公共關(guān)系文檔．技術(shù)手冊和數(shù)據(jù)庫等。

三、網(wǎng)站的版式設(shè)計

網(wǎng)頁設(shè)計作為一種視覺語言，特別講究編排和布局，雖然主頁的設(shè)計不等同于平面設(shè)計，但它們有許多相近之處。 版式設(shè)計通過文字圖形的空間組合，表達(dá)出和諧與美。 多頁面站點頁面的編排設(shè)計要求把頁面之間的有機(jī)聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。為了達(dá)到最佳的視覺表現(xiàn)效果，我們將反復(fù)推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。

四、色彩在網(wǎng)頁設(shè)計中的作用

色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁設(shè)計中，我們的設(shè)計師根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進(jìn)行組合．搭配來構(gòu)成美麗的頁面。 根據(jù)色彩對人們心理的影響，合理地加以運用。如果您的企業(yè)有CIS（企業(yè)形象識別系統(tǒng)），我們將按照其中的VI進(jìn)行色彩運用。

五、網(wǎng)頁設(shè)計形式與內(nèi)容相統(tǒng)一

為了將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。 靈活運用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對稱原則在頁面設(shè)計中， 它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會達(dá)到比較好的效果。 點、線、面作為視覺語言中的基本元素，巧妙地互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果，充分表達(dá)完美的設(shè)計意境。

六、三維空間的構(gòu)成和虛擬現(xiàn)實

網(wǎng)絡(luò)上的三維空間是一個假想空間，這種空間關(guān)系需借助動靜變化．圖像的比例關(guān)系等空間因素表現(xiàn)出來。 在頁面中，圖片、文字位置前后疊壓，或頁面位置變化所產(chǎn)生的視覺效果都各不相同。通過圖片、文字前后疊壓所構(gòu)成的空間層次不太適合網(wǎng)頁設(shè)計，根據(jù)現(xiàn)有瀏覽器的特點，網(wǎng)頁設(shè)計適合比較規(guī)范、簡明的頁面，盡管這種疊壓排列能產(chǎn)生強(qiáng)節(jié)奏的空間層次，視覺效果強(qiáng)烈。 網(wǎng)頁上常見的是頁面上、下、左、右、中位置所產(chǎn)生的空間關(guān)系，以及疏密的位置關(guān)系所產(chǎn)生的空間層次，這兩種位置關(guān)系使產(chǎn)生的空間層次富有彈性，同時也讓人產(chǎn)生輕松或緊迫的心理感受。 現(xiàn)在，人們已不滿足于HTML語言編制的二維Web頁面，三維世界的誘惑開始吸引更多的人，虛擬現(xiàn)實要在Web網(wǎng)上展示其迷人的風(fēng)采，于是VRML語言出現(xiàn)了。VRML是一種面向?qū)ο蟮恼Z言，它類似Web超級鏈接所使用的HTML語言，也是一種基于文本的語言，并可以運行在多種平臺之上，只不過能夠更多地為虛擬現(xiàn)實環(huán)境服務(wù)。

七、網(wǎng)頁設(shè)計中多媒體功能的利用

網(wǎng)絡(luò)資源的優(yōu)勢之一是多媒體功能。要吸引瀏覽者注意力，網(wǎng)頁的內(nèi)容可以用三維動畫、FLASH等來表現(xiàn)。但要由于網(wǎng)絡(luò)寬帶的限制，在使用多媒體的形式表現(xiàn)網(wǎng)頁的內(nèi)容時不得不考慮客戶端的傳輸速度。

八、結(jié)構(gòu)清晰并且便于使用

如果人們看不懂或很難看懂您的網(wǎng)站，那么，他如何了解你的企業(yè)和服務(wù)呢？使用一些醒目的標(biāo)題或文字來突出您的產(chǎn)品與服務(wù)。并且即使您擁有最棒的產(chǎn)品，如果客戶從您的網(wǎng)站上不清楚您在介紹什么或不清楚如何受益的話，他們是不會喜歡您的網(wǎng)站的，這就是網(wǎng)頁設(shè)計的失敗。

九。導(dǎo)向清晰

網(wǎng)頁設(shè)計中導(dǎo)航使用超文本鏈接或圖片鏈接，使人們能夠在您的網(wǎng)站上自由前進(jìn)或后退，而不會讓他們使用瀏覽器上的前進(jìn)或后退。我們在所有的圖片上使用“ALT”標(biāo)識符注明圖片名稱或解釋，以便那些不愿意自動加載圖片的觀眾能夠了解圖片的含義。

十、快速的下載時間

很多的瀏覽者不會進(jìn)入需要等待5分鐘下載時間才能進(jìn)入的網(wǎng)站，在互聯(lián)網(wǎng)上30秒的等待時間與我們平常10分鐘等待時間的感覺相同。因此，我們會建議您在網(wǎng)頁設(shè)計中盡量避免使用過多的圖片及體積過大的圖片。我們通常會與客戶合作，將主要頁面的容量控制在50K以內(nèi)，平均30K左右，確保普通瀏覽者頁面等待時間不超過10秒。

十一、非圖形的內(nèi)容

我們在必要時適當(dāng)使用動態(tài)“Gif”圖片，為減少動畫容量，應(yīng)用巧妙設(shè)計的Java動畫可以用很小的容量使圖形或文字產(chǎn)生動態(tài)的效果。但是，由于在互聯(lián)網(wǎng)瀏覽的大多是一些尋找信息的人們，我們?nèi)匀唤ㄗh您要確定您的網(wǎng)站將為他們提供的是有價值的內(nèi)容，而不是過度的裝飾。

十二、方便的反饋及訂購程序

讓客戶明確您所能提供的產(chǎn)品或服務(wù)并讓他們非常方便地訂購是您獲得成功的重要因素。如果客戶在您的網(wǎng)站上產(chǎn)生了購買產(chǎn)品或服務(wù)的欲望，您是否能夠讓他們盡快實現(xiàn)嗎？是在線還是離線？

十三、網(wǎng)站測試和改進(jìn)

測試實際上是模擬用戶詢問網(wǎng)站的過程，用以發(fā)現(xiàn)問題并改進(jìn)網(wǎng)頁設(shè)計。我們通常與用戶共同安排網(wǎng)站測試。

以上就是小編對于網(wǎng)頁視覺規(guī)范問題和相關(guān)問題的解答了，如有疑問，可撥打網(wǎng)站上的電話，或添加微信。

推薦閱讀：

為什么網(wǎng)頁加載總是卡在最后

網(wǎng)頁的基本組成（網(wǎng)頁的基本組成元素有哪些）

3d網(wǎng)頁游戲排行榜2013（3d網(wǎng)頁游戲排行榜2012）

醫(yī)院掃碼點餐系統(tǒng)

城市小型suv排行榜（城市小型suv排行榜最新）