ui網頁頁面的設計規范

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

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

2、UI設計的規范

快速標注尺寸和PS切圖

快速換算單位

快速繪制不同需求參考線

多個矢量圖形圓角轉換

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

可以使用藍湖

3、優秀界面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中，推文和推文保持著相同的樣式，均勻的節奏，但是其中的「推薦用戶」一項有著不同的樣式，它插入到推文列表中，打破了整個信息流的節奏，凸顯出不同的層級，會很快抓住你的注意力。

4、到底什麼是UI設計規范

UI設計不僅是讓某個APP或軟體有個性有品位，吸引用戶，還有一個是操作舒適、簡單、突出軟體的定位和特點，藍湖的設計規范雲可以嘗試一下。

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

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

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

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

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

(5)ui網頁頁面的設計規范擴展資料：

網頁設計

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

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

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

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

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

6、如何建立一套完整的UI 設計規范

前幾個月都在陸陸續續做這件事，中間做著做著就焦頭爛額了，遇到很多一時想不清楚的問題，直到最近才產出一份初具雛形的文檔，不過在規範文檔沒有產出之前就已經在印象筆記中邊設計邊梳理所有的元素以保證界面的一致性，這二天正好在知乎上看到這個話題，就順道來吐吐撰寫設計規范過程中的一些想法~

首先需要想清楚這份規範文檔是給誰使用，偏視覺和偏前端的規范並不一樣，本來自己做之前是考慮給設計師查閱，但編寫的過程中又覺得應該讓前端工程師也能使用，可那樣就意味著得包含相關樣式的代碼，且是網頁格式，思考再三還是決定先專注於視覺設計師這個角色，讓團隊中不同的設計師能夠產出設計語言一致的界面方案為先。而類似於JJ Ying分享的Lonely Planet或Purple: A UI kit for Heroku's web interfaces這種偏前端的樣式庫我認為可以讓前端工程師去建立。

然後我也認為一套細致的設計規范對於更新迭代快速的互聯網產品來說性價比不高，很可能好不容易完成了但又要面臨新版本迭代，我的解決方案是出一份像Material Design 中文版式的Style Guide+UI Kit+標注圖搭配使用，這也是受到台灣UI設計師Akane Lee的啟發，可參考她的博文 UI 設計師應該要會寫的文件

下面分別說下這三種產出物的作用

Style Guide
pdf格式，主要作用是指南。用於說明色相、字體、字型大小、分隔線、間距等這些影響到風格形式的元素如何使用，如何建立層級，為了直觀，需要適當的配上標注圖，並說明界面中各組件的作用和使用場景。組件無需標注，從UI Kit的psd文件中提取即可。

UI Kit
psd格式，主要作用是提取。設計師可直接拖拽至PS中使用。

標注圖
png格式，主要作用是參考。Style Guide中不會包含方方面面場景的情況，如果設計師捉摸不定邏輯上的一致性和合適的層級設定，可以參考更多以前交付給前端工程師的頁面標注圖，我向設計師傳達的一個原則是：除非有更好的方案進行全局替代，否則應盡量使用之前已應用的方案，避免每次迭代都出現新的方案造成不一致問題的放大。

以上便是我目前在使用的方案，且仍在完善中，供各位知友酌情參考，最後附上幾張Style Guide文檔和Web UI Kit的的截圖。

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

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

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

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

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

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

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

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

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

8、UI界面設計規范的常見遺漏有哪些

1、文本格式
設計師常過分專注於畫圖，而忘記了文字也應該有所規范。例如，日期可能的格式有很多，例如「YYYY年MM月DD日」、「YYYY年M月D日」、「YYYY/MM/DD」等等。再比如說單位，是用「大小：100M」、「大小：100兆」還是「大小（M）：100」呢？
這些文本格式定義起來並不花時間，可是如果沒有規范的話，可能同一個東西在每個頁面的展示方式都不一樣，對用戶來說也挺煩的。
2、特殊狀態
做設計和做規范的區別是，做設計時，只有在知道某個東西有某個狀態時，才會去設計那個狀態；做規范時，通常要假定所有數據和操作都有狀態，不同東西在不同地方的同類狀態最好能夠統一。
所有操作都可能失效，不管是按鈕、鏈接、輸入框、下拉菜單……什麼情況在失效時顯示失效狀態，什麼時候完全隱藏該操作，這些都是可以統一考慮設計的東西。
3、多級多選和過量
一個靈活的界面規范能夠應對大部分的內容變化。例如導航和菜單的項目數量和級數通常是不確定的，下拉選框也不一定只能勾選一項內容。更靈活的情況還有，一篇文章可能長達數十屏，這時該自動識別文章內的標題並生成目錄，還是分頁展示？
4、使用指南
使用指南是設計過程中通常被拖到最後才想起來的東西，在規范里也常被忽視。其中最重要的是用戶首次使用時看到的操作指南，這種操作指南可能不只在首頁出現，並且未來可能隨著設計的變更而變更，所以這種首次使用的操作指南是很有必要做成規范的。

9、PC客戶端UI設計有哪些規范

1、簡易性

界面的簡潔是要讓用戶便於使用、便於了解產品，並能減少用戶發生錯誤選擇的可能性。

2、用戶語言

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

3、記憶負擔最小化

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

4、一致性

它是每一個優秀界面都具備的特點。界面的結構必須清晰且一致，風格必須與產品內容相一致。軟體中往往存在多個組成部分（組件、元素）。不同組成部分之間的交互設計目標需要一致。交互元素的外觀往往影響用戶的交互效果。同一個（類）軟體採用一致風格的外觀，對於保持用戶焦點，改進交互效果有很大幫助。

5、清楚

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

6、用戶的熟悉程度

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

7、從用戶習慣考慮

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

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

8、排列

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

9、安全性

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

10、靈活性

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

11、人性化

高效率和用戶滿意度是人性化的體現。應具備專家級和初級玩家系統，即用戶可依據自己的習慣定製界面，並能保存設置。

10、app ui 設計 需要做多少頁面

誠築說： 1.看app的功能復雜程度 ，功能多的比如像支付寶或者淘寶
上千上萬頁面也是有的，
2.一般的沒太多功能的也就50+，還是應該根據功能來定，並不是頁面