網(wǎng)頁設(shè)計UI規(guī)范

時間：2023-09-30 09:30:01 | 來源：網(wǎng)站運營

時間：2023-09-30 09:30:01 來源：網(wǎng)站運營

網(wǎng)頁設(shè)計UI規(guī)范： 最近在進(jìn)行項目驗收工作，因此具體了解了一下UI設(shè)計規(guī)范。

在網(wǎng)絡(luò)日漸深入我們生活的當(dāng)下，可謂無處部網(wǎng)絡(luò)。大家也會對一些網(wǎng)站、微店、app等進(jìn)行各種吐槽。好的UI視覺效果讓實際使用的用戶體驗非常舒適，原因經(jīng)常、長期的使用這個網(wǎng)站或應(yīng)用。反之，一個不重視UI視覺效果的應(yīng)用被推出后自然會遭到吐槽，嚴(yán)重的可能會被用戶啟用，例如某金網(wǎng)站、某票網(wǎng)站等等。

那么我們就來說說什么是網(wǎng)站UI視覺規(guī)范吧。

【規(guī)范介紹】


1.什么是網(wǎng)頁視覺規(guī)范；
適用于WEB產(chǎn)品線的人機(jī)交互界面的設(shè)計，貫穿于以用戶為中心的設(shè)計指導(dǎo)方向。根據(jù)WEB產(chǎn)品的特點制定出的一套規(guī)范，以達(dá)到提升用戶體驗，控制產(chǎn)品設(shè)計質(zhì)量，提高設(shè)計效率的目的。


2.視覺規(guī)范的對象是誰；
適合界面設(shè)計師，用戶體驗設(shè)計師，前臺設(shè)計工程師，發(fā)布支持人員，運營編輯人員等。

【規(guī)范意義】

1.統(tǒng)一識別：

規(guī)范能使頁面相同屬性單元識別統(tǒng)一，防止混亂，甚至出現(xiàn)嚴(yán)重錯誤，避免用戶在瀏覽時理解困難；


2.節(jié)約資源：

除活動推廣等個性頁面外，設(shè)計其它頁面使用規(guī)范標(biāo)準(zhǔn)能極大的減少設(shè)計時間，達(dá)到節(jié)約資源的目的。


3.重復(fù)利用：

相同屬性單元，頁面新建時可以執(zhí)行此標(biāo)準(zhǔn)重復(fù)使用，減少無關(guān)信息，就是減少對主體信息傳達(dá)干擾，利于閱讀與信息傳遞。


4.上手簡單：

在招收、加入新設(shè)計師或前段時間，查看標(biāo)準(zhǔn)能使工作上手時間更快，減少出錯率。


【指導(dǎo)標(biāo)準(zhǔn)】

1.網(wǎng)頁寬度：


2.顏色：


3.字體字號：


4.頁面布局：


5.網(wǎng)頁柵格：


6.產(chǎn)品柵格：


7.表單：


8.Bar：


9.通用樣式Tab：


10. 留白：


11.Button：


12.陰影：




13.容器：


14.圖文：





15.圖標(biāo)：


16.命名：


17.圖片輸出：


18.Banner：

注：未完待續(xù)（細(xì)節(jié)內(nèi)容稍后補充）；