ui網頁設計字體大小規范

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

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

2、UI設計的規范標准有哪些

UI即User Interface(用戶界面)的簡稱，UI設計是指對軟體的人機交互、操作邏輯、界面美觀的整體設計，好的UI設計不僅是讓軟體變得有個性有品位，還要讓軟體的操作變得舒適簡單、自由，充分體現軟體的定位和特點。

在飛速發展的電子產品中，界面設計工作一點點的被重視起來，做界面設計的「美工」也隨之被稱之為「UI設計師」或「UI工程師」，其實軟體界面設計就像工業產品中的工業造型設計一樣，是產品的重要賣點，一個產品擁有美觀的界面會給人帶來舒適的視覺享受，拉近人與商品的距離，是建立在科學性之上的藝術設計，那麼，UI設計的規范標准有哪些呢？

一、軸

軸在UI設計中是最基本、最常見的概念，也是用來組織界面結構的重要核心。

簡單說來，軸是在設計的時候組織一系列元素的假象線，在下面的設計圖中，軸以虛線的方式被標注出來。

1、對齊

軸最常見於對稱元素的使用，當元素被布置成軸對稱的布局的時候，會給人有序感。就像生活中絕大多數的事情一樣，我們更傾向於享受有序的的東西，它們令人感覺平穩、舒適、平易近人。

最簡單的一個例子就是iTunes程序中的專輯列表的設計，所有的專輯列表在界面的左側保持對齊，圍繞虛線軸軸對稱。

2、強化

雖然軸是一條假想的線，但是如果周圍的元素的邊緣控製得足夠整齊，這跳線會在視覺中變得更加「明顯」的。

最好的例子是城市中的路燈構成了道路兩旁建築物之間的軸，如果一邊有建築一邊沒有，那麼這種軸線的感覺不會那麼強烈。

從產品設計的角度上來看，Twitter的時間線設計就是一個很好的案例，左側的頭像和右側的推文共同塑造出縫隙中軸線的感覺。

3、運動

當我們碰到某先線條的時候，視覺會很自然地沿著這些方向運動，就如同我們站在街上，會自覺地沿著街道的兩頭走動。兩個端點決定了線，界定了開始和結束的地方，線或者說軸線的存在會引導和提示運動的方向。

SoundCloud中，音軌沿著一條既定的水平軸線運動，隨著音樂的播放，音軌自然地自左向右勻速運動（具體可查看馬海祥博客《如何利用動效設計吸引訪客的注意力》的相關介紹）。

4、連續性

如果終點是不確定的，那麼你通常會沿著軸線的方向瀏覽/運動，直到你找到感興趣的東西，或者感到厭倦並關閉應用。

在建築學中，未清楚界定的終點非常少見，因為建築的修建通常沒法永遠持續下去，但是UI設計則不一樣，無限地滾動下去是無比受歡迎的設計手法。

Pinterest的APP中就是這樣做的，持續不斷的圖片沿著中軸線的方向持續不斷地滾動下去，只要你有興趣一直觀看下去。

二、對稱

當元素被均勻地放置在軸線的兩側之時，他們構成了對稱的關系。當元素被精準地在軸線兩側一一對應之時，它們就形成了完美對稱。

1、平衡

對稱令整個設計更加平衡，當元素與控制項在軸線兩側處於相同位置之時，會給人以協調和諧的設計感。

當我們在規劃街道兩側的房屋建設的時候，如果左右兩側都是5間大小一致的房子，當你走在街上的時候這種平衡的設計會令人非常舒適，這是平衡給人的感受。

Rdio的APP設計就遵循著這樣的設計規則，屏幕兩側的控制項是相同的規格，這類布局很適宜閱讀，用戶會自覺地自上到下，從左向右查看。

2、不對稱

如果軸線兩側的控制項布置不再是一一對應尺寸相近，那就是不對稱的設計，不對稱的設計會給人明顯的失衡感，可能會令人不舒服，但是也能造就殘缺美，當然這要看你具體怎麼做。

雖然Pinteret的APP設計在整體上是沿著中軸線對稱的(寬度一致)，但是兩邊的界面控制項並非是對稱的，它們的高度並不一致，位置也是錯落的，稍微一點的落差都會被眼睛捕捉到，而這樣的差異讓用戶無法准確地左右順序閱讀，不對稱設計打破了設計的平衡性和舒適性，但是也可以緩解了規律性設計帶來的視覺疲勞。

三、層級

當某個元素出現在比其他元素更重要的位置的時候，層級就出現了。

1、尺寸

如果一個設計元素在尺寸上比其他的控制項更大，就會區分出層級。毫無疑問，我們查看某個設計的時候，通常會被最大的元素吸引到。如果一個建築物有5個出窗戶，其中一個是其他四個的兩倍大，我們的注意力自然而然會被吸引過去。

通過尺寸來區分文章列表層級的典型就是稍後讀應用Pocket，頂部的輪播文章擁有更大的圖片，它的位置和尺寸會令我們一眼注意到（具體可查看馬海祥博客《詳解移動端設備頁面尺寸設計原理》的相關介紹）。

2、形狀

如果一個控制項在形狀和形態上同其他的不一樣，也可以讓它獨立出一個層級，不規則的設計同樣會令人側目，建築物的正面擁有五個相同的窗戶和一閃大門，你會立刻注意到門的獨特之處。

在Instagram的個人信息頁中，圓形的個人頭像在方形的圖片中別具一格，非常抓人眼球。它會讓人意識到，這個獨特的東西，更為重要。

3、位置

位置的存在同樣能彰顯層級的不一樣，在圓圈之內，中心位置的東西比邊緣部分的看起來更重要，位於軸線頂端的控制項會顯得比其他部分的優先順序更高。

以設計應用Path的設計為例，時間軸頂點處的用戶頭像就明顯比時間軸上的其他部分更重要，而這個地方正好展示的也是用戶頭像。

四、韻律

UI設計和建築設計同樣有著韻律之美，重復的模式會營造出獨特的節奏之美。

1、模式

理解韻律最直接的方式就是聽歌，音樂擁有節奏感，絕大多數的音樂遵循著相同的節拍，節拍就是音樂模式的一部分。

這方面最典型的APP是Airbnb，APP列表中每一間房子都占據一個模塊，模塊中有著大小相同的圖片，價格、位置和房東信息和圖片的相對位置一定，且排版勻稱舒服，兩個模塊之間的間距也相同，當你瀏覽的時候，熟悉的節奏會讓你清楚地知道上哪看關鍵信息。

2、間斷

當節奏被間隔打斷的時候，會形成不同的層級，聽歌的時候，均勻的節奏被其他的音樂元素打斷的時候，你會意識到這是比較特別的部分。

在Twitter的APP中，推文和推文保持著相同的樣式，均勻的節奏，但是其中的「推薦用戶」一項有著不同的樣式，它插入到推文列表中，打破了整個信息流的節奏，凸顯出不同的層級，會很快抓住你的注意力。

3、UI設計網頁設計字體規范應該要注意什麼

可以參考常規字體的使用規范：

1、在每個項目設計中只使用1-2個字體樣式，而在品牌字有明確的規范的情況下，只需要一種字體貫穿全文，通過對字體放大來強調重點文案。字體用的太多，越顯得不夠專業。

2、不同的樣式的字體，形狀或系列最好相同，保證字體風格的一致性。

3、字體與背景的層次要分明,確保字體樣式與色調氣氛相匹配，等。

(3)ui網頁設計字體大小規范擴展資料：

網頁設計

1、需要根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析，從而建立起營銷模型。

2、以業務目標為中心進行功能策劃，製作出欄目結構關系圖。

3、以滿足用戶體驗設計為目標，使用axure rp或同類軟體進行頁面策劃，製作出交互用例。

4、以頁面精美化設計為目標，使用PS、AI等軟體，調整，使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。

5、根據用戶反饋，進行頁面設計調整，以達到最優效果。

4、UI界面設計尺寸應該是多少？

01、界面設計尺寸及欄高度

（1）我們用Photoshop做設計新建畫布應該設置多版大呢？另外，iOS應用中的欄，權包括狀態欄、導航欄、標簽欄、工具欄等，它們的高度又分別是多少呢？（注意：iOS嚴格規定了各個欄的高度，這個是必須遵守的）通過下面的表格和圖示來為你解答上面的問題。

（2）目前主流的iOS設備iPhone 6s/7/8 Plus和iPhone X採用的是3倍率的解析度，其他都是採用的2倍率的解析度，無論是欄高度還是應用圖標，設計師提供給開發人員的切片大小，前者始終是後者的1.5倍，並分別以@3x和@2x在文件名結尾命名，程序再根據不同解析度自動載入@3x或者@2x的切片。

（3）注意：在進行iphone x設計的時候我們依然可以採用熟悉的iphone 7的設計尺寸作為模板，只是高度增加了290px，設計尺寸為750*1624（@2x）。注意狀態欄的高度由原來的40px變成了88px，另外底部要預留68px的主頁指示器的位置。

5、UI設計規范都有哪些

UI 設計規范包含顏色、文本樣式、圖層樣式、圖標、組件、品牌等規范，團隊沒有設計規范的話，建議在藍湖搭建。

6、網頁設計合適的頁面尺寸是多少

網頁設計選用的解析度是72像素，使用的畫布尺寸1920px*1080px。但是並不意味著在整個畫布上進行設計，一般採用全屏展示和兩側留白的方式。
全屏展示，是整個網站看起來大氣一些，但是布局要合理安排，不然看起來有些傻大的感覺。
兩側留白是為了適配不同電腦屏幕的尺寸，能夠確保網站只是電腦站的時候一些筆記本電腦也能顯示全面網站的內容區域，內容限時區域在好控制在1000px-1200px。

7、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設計的問題歡迎持續關注易夏嵐或者與我進行交流~

8、UI界面設計規范有哪些？

用戶界面設計包含為機器和軟體創建的所有界面設計，例如網站和移動應用程序的外觀，以及它們的方向和易用性。GUI設計在用戶與應用程序或網站的交互方式中起著至關重要的作用，這意味著唯一良好的UI設計是實現簡化和無縫體驗的設計。

用戶界面設計要遵循哪些原則？
1、明確。
對任何界面而言，「明確」是首要的也是最重要的一點。設計師們在設計的時候，要去關心人們為何會使用這個應用，去了解什麼樣的界面是能幫助他們與之互動的，去預測人們在使用時的行為並能夠成功地反饋給他們。

2、交互。
界面的存在是為了讓人和我們的世界產生互動。它的功用和效果是可以被測量的。但是它們不是功利性的。優秀的界面不但能夠讓我們做事有效率，還能夠激發、喚起和加強我們與這個世界的聯系。

3、直觀操作。
要抓住直觀操作這個最初的目標，界面設計要盡可能的簡潔，更多的可識別的慣用自然手勢。理想情況下，界面會變得非常細微，用戶在會有直觀操作的感覺。

4、讓用戶掌控一切。
人們會在自己能掌控的環境中感覺最舒心、最放鬆。通過定期的梳理系統狀態，描述因果關系，並且在每一步操作都給出提示，讓用戶感覺每一步操作都在他的掌控中。

5、遵循用戶行為。
人總是對符合期望的行為最感舒適。因此，設計出來的元素，看起來應該像它們本身特徵一樣。在具體操作中，這意味著用戶只要看到這個界面元素，就應該能猜測出這個元素是做什麼的。

6、前後一致。
為了保持一致性，新手設計師通常在會把相同的視覺處理(重用代碼)方式用在，應該用不同的視覺處理方式的元素上。

7、視覺層次。
強烈的視覺層次會讓畫面有清晰的瀏覽次序。如果要在畫面中添加一個視覺強烈的元素時，設計者應該要重新調整頁面上所有元素的重量分配，來達到強烈視覺層次的效果。
了解用戶界面設計原則是你做出優秀作品的必要條件，而掌握UI設計師必備的技能才是你決勝高薪的關鍵。

9、網頁設計中,最小的字型大小應該是多少

網頁設計中的字體一般設置成12px，如果網頁的東西相對比較少，也可以設置成14px,關於導航和其他的一般是用ps處理出好的效果，如果是文本一般為14以上並且帶加粗。

字體沒有特別規定但是有常規的用法：

常規文字 12px；標題，頁頭 14px、16px；大標題，橫幅等 18px。

(9)ui網頁設計字體大小規范擴展資料：

網頁設計，是根據企業希望向瀏覽者傳遞的信息(包括產品、服務、理念、文化)，進行網站功能策劃，然後進行的頁面設計美化工作。作為企業對外宣傳物料的其中一種，精美的網頁設計，對於提升企業的互聯網品牌形象至關重要。

網頁設計一般分為三種大類:功能型網頁設計(服務網站&B/S軟體用戶端)、形象型網頁設計(品牌形象站)、信息型網頁設計(門戶站)。設計網頁的目的不同，應選擇不同的網頁策劃與設計方案。

網頁設計的工作目標，是通過使用更合理的顏色、字體、圖片、樣式進行頁面設計美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗。高級的網頁設計甚至會考慮到通過聲光、交互等來實現更好的視聽感受。

網頁設計主要以Adobe產品為主，常見的工具包括FW、PS、FL、DW、CDR、AI等，其中DW是代碼工具，其他是圖形圖像和FL動畫工具。還有最近幾年Adobe新出的EdgeReflow、EdgeCode、Muse。