破譯webui網頁ui設計規范

1、ui設計規範文檔怎麼寫

ui設計規范；ui設計規范有哪些？這個問題對於ui設計師來說應該是比較關心的吧，因為作為ui設計師，ui整理設計規范也是設計能力的一種體現。所以，無論是自己設計創作還是推動產品開發，你的設計規范是否完善，對產品的質量起著決定性的關鍵作用。那麼我們今天就來聊聊這個問題吧！

ui設計規范有幾大分類組成：

1、Logo

品牌印象的直接感受，根據頁面不同背景所使用的Logo圖也不同。將產品中所使用到的Logo統一分類，以下引用Moby』s Petshop UI Style Guide的Logo資源例舉說明。

Moby』s Petshop UI 的Logo由圖形和文字組合而成，而品牌色為藍色，Logo的使用也需要考慮到Footer黑色背景下的Logo。所以用Logo的橫豎向排版和單個Logo圖形來分類更好。

分類裡面則展現品牌色的Logo、品牌色背景的Logo、Footer黑色背景的Logo。

2、標准色

顏色是設計最重要的部分，沒有之一。細節決定品質，所以對顏色的運用格外細致，顏色的搭配直接決定產品的品質感。顏色大致可分為品牌色、文本顏色、背景色、線框色等。給顏色添加關鍵詞，明確用於什麼界面。

以下引用real-pixels UI Style Guide的顏色規范，可以借鑒的是每個顏色不僅標注了顏色值，而且右側給出了顏色使用的場景，值得借鑒的是按鈕Normal狀態和Hover狀態的顏色值放在一起，這樣，對不同狀態顯示的顏色感受更直觀。

對顏色值統一規范命名變數，提高開發效率的同時更好的維護設計規范。

在前端開發中，對顏色值進行編號，這樣對代碼也有著極大的優化。定義一個設計規范的CSS樣式庫，開發過程中就不用重復修改CSS參數值，直接引用定義好的變數名就可以，這樣修改設計規范的成本大大降低。

3、字體

字體是設計中必不可少的考慮因素，不同的字體氣質不一樣，並且不同場景下帶給人的感受也不一樣。所以需要在設計的時候考慮到字體的設計效果，然後在設計規范中註明。

以下引用的是Retail Banking Service UI Style Guide中的字體規范，在定義字體名稱的同時也定義了字體的風格，並且添加了不同字體風格的預覽效果，常見的字體風格有：Light、Regular、Italic、Semibold、Bold。

4、段落設置

在實際的產品設計中，段落有很多種樣式，不同場景下的段落要求也不一樣。比如：閱讀內容的段落要求文本可閱讀性強，所以對字體、字型大小、顏色、行間距等要求簡單易讀。而帶有裝飾性的段落文本則不需要那麼嚴謹，裝飾性強就可以。

需要注意的是：在定義段落默認字體的時候還需要定義一個後備字體，即默認字體不能正常顯示情況下顯示的字體。設計的水平層次就在於對細節的打磨，這也就是段落規范在設計中存在的意義。

5、圖標

圖標是重要的軟體標識，在設計資源中是最重要的模塊之一。在軟體產品中甚至可能每個頁面都存在圖標，圖標除了美化的作用以外，還有著明確指代含義的計算機圖形。

具體分為以下三個作用：

圖標是與其它網站鏈接以及讓其它網站鏈接的標志和門戶。圖標是網站形象的重要體現。圖標能使受眾便於選擇。根據圖標大小和使用用途進行分類整理設計規范，這樣才更清晰明了。

6、圖片

圖片也是屬於設計規范最重要的部分之一，按照用途分類整理圖片資源，設計風格系統化。

7、度量

在設計的過程中，我們經常會使用一套規范的度量標准，來保持產品的一致性，分別為圓角值、間距、大小。

對度量解釋最好的是設計中經常使用到的柵格系統（Grid Systems），運用固定的格子設計版面布局，其風格工整簡潔。這就是我們在網頁和APP設計的過程中經常使用到柵格系統的原因。

8、陰影

陰影風格及參數也是設計規范中的一部分，在整理設計規范的時候，需要注意的是陰影的參數值是網頁中控制陰影的參數值，而不是設計軟體中的參數值。

舉個例子：網頁中陰影對應的參數值為：box-shadow: type:Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 ，不透明度：10%，這才是程序員需要的陰影參數值，否則最終開發出來的陰影會出現不一致的情況，無法達到規范的目的。

9、組件

常用的UI組件（Component）：Button控制項、下拉框、選擇框（單選復選框）、時間選擇器、輸入框、搜索框、進度條、分頁器、提示框、警告框、表格、彈出面板、數字步進器、選項卡等。

Button控制項

按鈕是最常見的組件之一，按鈕有5個狀態：Normal、Hover、Active、Disabled 、Loading。

需要在規范中分別羅列出這五個狀態，標註上對應的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值。如果是圖標按鈕的話，除了上述參數值以外還需要標注icon和按鈕文本之間的間距和icon圖標的大小。

10、下拉框

下拉框是為用戶提供多個選擇的單選組件，優點是用最簡單的界面布局方式收納了很多的選項，需要注意定義下拉選擇框彈出的時候，滑鼠移動上去的Normal、Hover、Active狀態。

11、選擇框（單選復選框）

顧名思義，單選框是眾多選擇裡面選一個，而復選框是眾多選擇裡面可以無限制選擇。單選框和復選框都需要三個狀態，即未選中狀態、選中狀態和不可點擊狀態。

時間選擇器：

時間選擇器是選擇年月日的組件，分別對應年月日星期的信息，在設計的時候需要考慮到4個狀態，分別是：Select、Not_Select、Hover和Disable，並且寫進設計規范。

輸入框：

輸入文本框是我們軟體產品設計必不可少的組件，文本輸入框有4個狀態：Normal、Active、Disable和Error。

搜索框：

和輸入框相同的地方是都需要聚焦然後輸入內容完成操作，應該有為Normal、Active、搜索下拉狀態、Error狀態。

進度條：

這個需要在規范中註明上傳進度條的整個交互操作流程，對Normal狀態、點擊上傳/拖拽上傳狀態、上傳中、上傳成功、上傳失敗，整個流程狀態的整理。在上傳過程中，任何用戶操作都應該有及時響應的動作，這樣用戶在使用的過程中才不會迷茫。

分頁器：

分頁器是用於切換內容頁面的復合組件，常規的分頁器有上下頁操作按鈕、分頁頁碼按鈕、輸入頁碼手動查找的搜索框，以及分頁器的4個狀態：Normal、Hover 、Active、Disabled。

提示框：

提示框是一個事件觸發彈出面板顯示的組件，經常使用提示框的地方是，刪除按鈕、疑難問題點、提示類彈出信息等。這個風格設計就比較多了，設計風格各不相同，定義底板樣式、文字樣式和陰影參數。

警告框：

頁面報錯時的顯示樣式，常用的警告類信息是：操作成功、提醒用戶注意、警告用戶注意等。

表格：

表格類信息居多，應重點整理表格樣式以及文本顏色大小。

彈出面板：

彈出面板主要由4個部分組成，分別是面板內的文本信息、按鈕、面板大小樣式、蒙版顏色和透明度。

數字步進器：

數字步進器屬於復合類型的組件，可以理解為按鈕和輸入框聯動的組件，所以輸入框和按鈕擁有的屬性狀態，步進器都有。

選項卡：

切換選項卡即切換內容，和下拉選擇框不同的是，選項卡是將多個選項都排列出來的單選組件，需要考慮4個狀態：Normal 、Hover 、Active 、Disabled 。

 ui設計規范，ui設計規范有哪些？這個問題介紹到這里就介紹完了，現在你清楚ui設計了嗎？設計規范對整個項目的規范性推動很強大，但是需要花時間和耐心細心打磨，所以需要花費很多時間和精力去整理資料、編輯素材、分類整合，最後還要在設計軟體中將整個規范重新排列設計。如果你還有其他關於ui設計的問題歡迎持續關注易夏嵐或者與我進行交流~

2、UI設計規范有哪些

太多了。主要有ios android以及web端。
UI設計是指對軟體的人機交互、操作邏輯、界面美觀的整體設計，也叫界面設計。

3、PC端UI設計尺寸規范?

<

4、UI設計的規范

快速標注尺寸和PS切圖

快速換算單位

快速繪制不同需求參考線

多個矢量圖形圓角轉換

水平、垂直或按指定間隔復制圖層

可以使用藍湖

5、web端的ui是指的網頁設計嗎

WebUI是不是就是網頁設計，如果非得摳細節的話，WebUI跟網頁設計不一樣，前者需要懂一些基礎的技術知識，方便溝通，比如出一個自適應網頁，UI會先考慮一下柵格系統設計，各種布局，還有各種切換的動態效果在技術上是否可行；而且有時候技術會要求WebUI幫忙寫一些簡單的東西，比如布局什麼的；而網頁設計，說白了就是只出設計效果圖，不考慮是否可行，也不幫忙寫一些簡答的頁面。

我覺得你問這個問題，很可能是找工作是或者是現在對於這類職位有一些疑問。如果是這樣的話，那麼我的建議是：
1.首先明白自己能做什麼？（設計部分就不說了）
*懂代碼
*懂一點點基礎的代碼，看得懂，能在別人的基礎上做一些修改
*完全不懂

2.弄明白用人單位需要什麼
*找工作第一條：你要極度自信，人無完人！而且永遠要相信你是去給公司創造價值的，不是去領工資的。工資是公司對於你所創造的價值的回報，是回報！

*大膽地跟用人單位說清楚你懂什麼，你會什麼，你學過什麼，學到了哪種程度，讓他們去做判斷。網上很多的招聘廣告裡面寫的要求，相信我，有不少HR根本不知道自己在說什麼，有時候某些要求並不是一定要的，只是能懂更好，誰都想招到一個更全面的員工來公司幫忙。

找工作跟結婚一樣，雙方一定要知根知底，只有在雙方都了解明白了對方需要什麼，自己是否能夠滿足的情況，才能比較好的在一起，不然肯定出問題。

6、手機網頁UI設計尺寸是多少

這個不同手機尺寸不一樣，比如
iphone3 320*480 iphone4 640 * 960
android 240*320 320* 480 480* 854 這些比較常用，還有一些其他解析度
看你具體是針對什麼手機做的了！

7、網頁設計規范的要求有哪些？

1、網頁設計規范的要求——學習網頁設計規范要注意四點:

(1)布局。

(2)顏色匹配。對於初學者，建議在主色調上設置一些“亮度梯度”或“相似的顏色”。

(3)圖像。絲網設計的兩個基本要求是:不變形。這意味著當你尋找圖像作為素材時，你會發現一個稍微大一點的“剪切”，而不是一個小的拉伸。不能是空的。這個要求和之前的要求一樣，不要找小圖片來放大。

(4)文本。定義要求;字體要求;間距;藝術字。

2、網頁設計規范的要求——網頁設計課程:

計算機藝術，圖像處理，HTML(鍵)，CSS+ DIV, JavaScript

3、網頁設計規范的要求——網頁分類:

根據位置的不同，可以分為首頁和內頁;

根據表單可以分為動態網頁和靜態網頁。兩者的區別在於是否有資料庫、網頁後綴和地址欄。

4、網頁設計規范的要求——平面構成和布局結構是網頁設計規范所要求的

構成:點、線、面。

布局結構:3。梯形，開放式，對稱，彈出式布局

5、網頁設計規范的要求——顏色的基本分類

有冷色和暖色，彩色和無色。

色彩屬性包括色調、亮度和純度

以上就是《對於ui設計師們來說，為何都要熟練掌握網頁設計規范的要求?》的主要內容，如果你想了解ui設計的基本知識，並且將他們運用到您的作品中，那麼本文一定會給你有效的幫助。如果你想學習更多關於ui設計的知識或資訊等，可以點擊本文其他文章進行學習。

8、網頁是如何實現的，Web UI設計理論入門教程

一、學習HTML5和CSS3基礎
隨著這移動互聯網快速發展的時代，尤其是4G時代，HTML5+CSS3已然成為新一代的web前端技術。
隨著HTML5的發展和普及，了解 HTML5 也將成為 Web開發人員的必修課。涉及到網頁外觀時，就需要學習 CSS 了，它可以幫你把網頁做得更美觀。
利用 HTML5 和 CSS3 模擬一些你所見過的網站的排版和布局(色彩，圖片，文字樣式等等)。
當然，遠標Web前端開發課程第一階段還會學習 PS設計工具使用和互聯網UI設計理論。
二、學習Java，了解DOM
Java 是一種能讓你的網頁更加生動活潑的程序語言。學習 Java 的基本語法，學會用 Java 操作網頁中 DOM 元素。
Web前端開發課程第二階段完全可以實現大家平常喜歡玩的 2048 游戲。(是不是感覺挺有意思)
接著學習使用一些 Java 庫，比如 Jquery 是大部分 Web開發人員都喜歡用的，通過 Jquery 可以有效的提高 Java 的開發效率。
三、學習Web前端核心
學習 Jquery 之後，大家就要學習 HTML5 高級階段(HTML5 Canvas 繪圖、HTML5 SVG、音頻和視頻處理、表單處理、表單驗證...等)
四、學習HTTP協議及Server端技術
伺服器端腳本編程(後台開發)也是Web開發人員的基本功之一。
要構建動態頁面通常會使用到資料庫，通常PHP使用Oracle、MySQL資料庫。
對於Web伺服器來說，Apache 一個就已經是了。那麼Apache、php、資料庫，該怎麼理解它們的關系?
1、Apache是伺服器基礎，php和資料庫都需要Apache來協調工作
2、php是腳本解釋，如果不用php，那麼Apache出來的東西就只是靜態的，而不能在伺服器實現功能
3、資料庫完全可以單獨使用，但是和Apache、php一起，則是由php代碼調用資料庫介面，而apache就負責解釋php代碼，讓他能真正地實現對資料庫的調用
五、學習Web前端高級技術
當你掌握了HTML5，CSS3，Java等技術之後，就應該找一個Web框架加快你的Web開發速度，使用框架可以節約你很多時間。
學習的Bootstrap是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVA 的，它簡潔靈活，使得 Web 開發更加快捷，是web前端開發者最喜歡，也是現在企業里最常用的前端框架。
Angular JS是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVC編程、模塊化、控制器、路由、事件綁定等等。
AngularJS通過為開發者呈現一個更高層次的抽象來簡化應用的開發。如同其他的抽象技術一樣，這也會損失一部分靈活性。換句話說，並不是所有的應用都適合用AngularJS來做。AngularJS主要考慮的是構建CRUD應用。幸運的是，至少90%的WEB應用都是CRUD應用。但是要了解什麼適合用AngularJS構建，就得了解什麼不適合用AngularJS構建。

9、七個網頁界面ui設計細節你掌握了嗎

素馬主張任何高大上的產品概念設計最終落地都化解為版式與圖片。隨著用戶對產品使用的體驗要求越來越高，新銳的版式加上精美的圖片，還需要加上獨特的動效設計（前端製作工藝）才行。那麼，除了網頁設計三大塊版式、圖片、動效外，我們這些看似搬磚，每天做細節設計的ui設計師，是否有大的研究和作為呢。今天分享的這篇文章，主要是針對ui界面中非常細小的設計技巧進行講解。

01

-

使用色彩和字重來創造層次結構，而不是單純的大小對比

在對UI 文本進行樣式控制的時候，最常見的錯誤莫過於過度依賴字體大小差異來營造對比。

「這段文字重要嗎？那麼讓它更大一些吧。」

「這段文字是比較次要嗎？那麼讓它變小一點吧。」

單純使用字體大小對比，所營造的對比並不夠，嘗試結合色彩和字重來營造更好的對比效果。

「這段文字重要嗎？我們讓它色彩更加大膽一些吧。」

「這段文字是比較次要嗎？我們讓它的色彩更淺一些吧。」

如果可以的話，你甚至可以採用兩到三種顏色：

・主要內容採用深色（諸如標題，但是不要用純黑）

・次要內容採用灰色（比如文章發表日期）

・輔助性內容採用淺灰色（比如頁腳中的版權聲明）

類似的，在UI設計的時候，通常兩種不同的字重足以營造出優秀的層次感：

・大多數的文本採用正常的字重（400到500，具體取決於字體）

・對於需要強調的文字採用較重的字重（600到700，具體取決於字體）

應當盡量不要讓正文部分字重低於400，因為這一部分字體本身尺寸已經較小，低於400會使得可讀性不佳。如果你依然需要降低字重，那麼不妨讓字體色彩更淺一點，或者替換成其他識別度較強、字重相對較小的字體。

02

-

不要在有色背景上使用灰色的文本

在白色背景下，將黑色的文本改成灰色，是不錯的淡化其視覺效果的做法，但是在彩色背景下這么做，則是另外一回事。

實際上，讓白色背景下文本由黑變灰實際上是達到降低對比度的效果。

但是在彩色背景下，想要降低對比度是應該讓文本逐步接近背景色，而不是改為灰色。

想要降低和背景色之間的對比，通常有兩種方法：

1、降低白色文本的不透明度

降低不透明度，能夠讓背景的顏色透過來一些，以一種不沖突的方式降低前景文字和背景之間的對比度。

2、基於背景色手工挑選文本的顏色

當背景是圖像或者圖案的時候，半透明的文本會影響可讀性，這個時候最好是基於背景主色調來挑選相應的文本色。

03

-

陰影設計

相比於採用大范圍的擴散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特徵，光線從上往下照下來所營造的陰影效果。

如果你對此有興趣，Material Design Guideline 非常清晰地給你講明白了這樣的陰影的製作細節。

04

-

盡量少使用 Borders

盒子模型是網頁前端最常用到的工具。當你需要在兩個元素之間創建分隔的時候，盡量避免使用兩者的邊界直接接觸。

雖然 Border 是分隔兩個元素的好辦法，但是它不是唯一的方法，使用過多會讓整個布局的設計感降低，甚至會造成混亂。

所以你可以嘗試下面的辦法來規避：

1、使用 box shadow

box shadow 同樣可以營造出邊界感，而且更加微妙，並不會顯得突兀，不會分散用戶的注意力。

2、使用不同的背景色來區分

通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分。所以，你所需要做的就是在不同的區塊採用不同的背景色，並且嘗試刪除邊框，因為你根本不需要它。

3、增加額外的留白

創建元素之間的分離效果，並不一定要通過線框來表現，只要增加留白，讓它們分隔開就行了。通過留白和間距來實現元素分組是UI設計中的常用手法。

05

-

不要讓小圖標無端地放大

當你在設計著陸頁的時候，可能會突出產品的功能，這個時候你需要一些大圖標來作為視覺錨點，這個時候你可能會去 Font Awesome 或者 Zondicons 這樣的網站找幾個免費的矢量圖標，然後放大到符合你需求的尺寸。

它們都是矢量圖標，照說是可以無損放大的。但是一個通常只有16×16 的圖標放大三四倍，它固然無損，但是在視覺上就顯得頗為不專業了：缺乏細節，總感覺過於矮胖。

可是，如果這些小圖標是你唯一能夠搞得到的素材的話，那麼不妨試著將它置於另外一個帶有顏色的圖形當中：

這樣的設計不僅能夠讓圖標達到預期的視覺體積，而且看起來要比單純放大，看起來細節會更多一些。當然，如果你手頭不是那麼緊的話，最好還是買幾個大尺寸的高素質圖標，比如 Heroicons 或 Iconic。

06

-

增加帶有顏色的單邊邊框提升個性

當然，你可能並不是一個對於平面設計有著足夠經驗的設計師，但是依然可以讓你設計的界面有足夠的視覺吸引力。

最簡單的方法，就是在界面的邊框中的一邊添加上單色甚至漸變的邊框，這能讓平淡無奇的界面一下子變得鮮活起來。

比如在警告彈出框的側面：

或者在導航欄的底部，以示觸發：

或者在整個頁面的頂部：

這並不需要什麼平面設計的經驗，但是會明顯強化設計感。

退一萬步講，你不知道選取什麼顏色，簡單，上Dribbble 的色彩搜索中隨便找幾個看著漂亮的顏色，其實也就夠用了。

07

-

並非每個按鈕都需要顏色

很多時候，按鈕本身所處的語境和按鈕上的文本內容會讓人感到迷惑。像BootStrap 這樣的框架就讓設計師按照語境和語義來進行選擇：

「這是一個積極的操作？讓這個按鈕是綠色的吧。」

「這是否是要刪除數據？那麼將按鈕設置為紅色的吧。」

的確，語義和按鈕本身的設計息息相關，但是還有更重要的維度被忽略了，那就是層次結構。

網頁上每個操作其實都位於整個交互金字塔的某個位置。絕大多數的頁面其實只有一個主要操作，搭配一些不太重要的次要操作，以及為數不多的幾個三級操作。

在設計這些交互的時候，通過層次結構來呈現這些交互的重要性是很重要的設計環節。

・主要操作應該很明顯。採用實色、高對比度的按鈕是很有必要的。

・次要操作應該明顯，但是不突出，採用幽靈按鈕或者和背景對比度較低的色彩是比較合理的。

・三級操作應該是可被發現，但是不明顯的，他們最好被設計為鏈接。

「破壞性的交互所涉及的按鈕難道不應該是紅色的么？」

沒必要！如果破壞性的交互所涉及到的按鈕不是主要操作的話，讓它按照次要操作甚至三級操作的按鈕來設計就好了。

如果這樣的操作是主要操作的話，可以讓它是大號的、紅色的帶有加粗文本的按鈕：

小結

-

以上總結的七個ui界面設計小細節處理技巧，都是大量的項目實戰工作中總結出來的，容易理解也容易執行。有人可能說，連一個像素都在磕，又不是搞科學研究火箭發射，有必要嗎？我只能說，這是一個工作的專業度問題和態度問題。也許一像素並不影響ui界面的美觀問題，但是卻是一位大師和普通工人的區別。

10、ui設計、網頁設計和web前端的區別是什麼？

首先，什麼是Web前端開發呢？通俗來講，當你打開某個網站時，往往第一時間被那些炫酷的動態網頁設計所吸引。但是，如果沒有Web前端工程師，這些圖片是不會動的。這樣一個動態網頁是怎麼實現的呢？首先，需要UI設計師按照市場部要求進行每張圖片製作；然後WEB前端工程師通過技術手段實現滾動效果。通俗點說web前端工程師就是用HTML5、CSS3、Java、jQuery、Ajax等技術把UI設計的頁面效果做成網頁，結合Bootstrap、AngularJS等最新的JS框架和後台開發工程師搭線，最終實現讓大家看到的電商平台上那些動人的精美頁面。

那麼什麼是UI設計呢？UI即UserInterface(用戶界面)的簡稱。UI設計是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。通常包括平面設計，網頁設計以及移動界面設計。

其中，網頁設計和移動設計這一崗位方向，需要學習Web界面設計、PC客戶端軟體界面設計、HTML5語言、CSS樣式表、布局技巧與瀏覽器兼容等技術。因此從這一點來說，web前端開發與UI設計之間是互通的，也就是說，通過系統UI培訓後，你將來有可能會成為一名web前端工程師！

二者最大的區別就是：WEB前端工程師是要寫代碼的，而UI設計師重點在設計上。因此，對於廣大學員到底學UI設計好還是WEB前端開發好這一疑問，海文國際建議，學哪一個都不錯，但最重要的是看你自己的興趣所在。然而，對於初學者來說，無論是UI設計好還是WEB前端開發，盡可能通過系統培訓多涉獵一些相關知識，這對於將來職場發展會更有幫助，可以在以後職場中更好的相互協作和支持。