ui設計規范
『壹』 手機UI設計的基本規范
目前移動設計在我們的工作中越來越重要，除了掌握基本的UI設計技能之外，我們也要對移動互聯網的特徵有所認識。為了能在交互設計和用戶體驗上做出比競品更優秀的移動APP產品，我們必須知道移動設計的基本原則。
之前25學堂有跟大家說到移動APP客戶端的UI設計原則及UI界面適配步驟，還有APP觸控操作設計原則之觸控目標的尺寸大小。
從移動互聯網特徵的角度來看，移動設計的基本八條原則
[圖片上傳中...(image-501af8-1523091320600-7)]
1、內容優先 ，合理的布局
對於手機而言，屏幕空間資源顯得非常珍貴，為了提升屏幕空間的利用率，界面布局應以內容為核心，而提供符合用戶期望的內容是移動應用獲得成功的關鍵。如何設計和組織內容，使用戶能快速理解移動應用所提供的內容，使內容真正有意義，這是非常關鍵的。
（1）充足內容，使內容符合移動的特徵。
（2）優先突出用戶需要的信息，而簡化頁面的導航。
（3）適時提升屏幕空間的利用率。
2、是為移動觸摸而設計
點擊操作是PC時代交互的基礎，在觸摸屏設備上基於手指的手勢操作已經代替了滑鼠的點擊操作。
（1）以信息架構為基礎，簡歷手勢交互規范。
（2）優先設計自然的手勢交互，而不是TAP點擊
（3）引導用戶在情境中學習手勢操作。
（4）特殊手勢不是必須的。
（5）可觸區域必須大於7×7mm,盡量大於9×9mm。
（6）手勢操作需要提供過程及反饋演示。
3、輸入方式的 轉換
文字輸入是移動端的軟肋之一，不管是手寫輸入還是鍵盤輸入，操作效率都相對較低。在行走或者單手操作時，輸入的出錯率也比較高。
（1）減少文本輸入，轉化輸入形式。
（2）簡化輸入選項，變填空為選擇。
（3）使用手機已有的感測器輸入。
4、操作流程必須確保流暢性
在移動產品的操作過程中會碰到多種多樣的情況——找不到目標、不知道該怎麼操作、操作後沒有及時反饋，等等，這都會對產品的流暢性造成影響。在移動產品的設計中主要從三個方面來考慮產品的流暢性：
（1）手指及手勢的操作流。
（2）用戶的注意流。
（3）轉場流暢或者自然，不能牽強！
『貳』 UI設計規范都有哪些
好的UI設計不僅是讓軟體變得有個性有品位，還要讓軟體的操作變得舒適簡單、自由，充分體現軟體的定位和特點。
1.簡易性
界面的簡潔是要讓用戶便於使用、便於了解產品，並能減少用戶發生錯誤選擇的可能性。
2.用戶語言
界面中要使用能反映用戶本身的語言，而不是游戲設計者的語言。
3.記憶負擔最小化
人腦不是電腦，在設計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶有限且極不穩定，24小時內存在約25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。
4.一致性
它是每一個優秀界面都具備的特點。界面的結構必須清晰且一致，風格必須與產品內容相一致。
5.清楚
在視覺效果上便於理解和使用。
6.用戶的熟悉程度
用戶可通過已掌握的知識來使用界面，但不應超出一般常識。
7.從用戶習慣考慮
想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。
通過比較兩個不同世界(真實與虛擬)的事物，完成更好的設計。如：書籍對比竹簡。
8.排列
一個有序的界面[1] 能讓用戶輕松的使用。
9.安全性
用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統的提示。
10.靈活性
簡單來說就是要讓用戶方便的使用，但不同於上述。即互動多重性，不局限於單一的工具(包括滑鼠、鍵盤或手柄、界面)。
11.人性化
高效率和用戶滿意度是人性化的體現。應具備專家級和初級玩家系統，即用戶可依據自己的習慣定製界面，並能保存設置。
12.顏色不一樣
UI設計師是隨著網路而興起的新興設計行業，從事對軟體的人機交互、操作邏輯、界面美觀的整體設計工作
涉及范圍包括商用平面設計、高級網頁設計、移動應用界面設計及跨媒介設計以人為本，以用戶體驗需求為基礎，發展多元化是目前中國信息產業中最為搶手的人才之一。
『叄』 UI設計規范說明書
高質量的規範文檔是一個優秀設計系統的代表物。我們詳實地描述每個 UI 組件的設計與代碼規范，來幫助設計師高效地作出決策，推動開發速度。編寫高質量的文檔需要前期規劃和一系列合理的流程來輔助，付出的成本相當高。
這個系列由六篇文章組成，致力於描述編寫組件規範文檔的過程。本篇我會從目標讀者、文檔內容、文檔結構開始。然後會涉及案例，設計與代碼指南。這些內容來自於我自己這些年的實踐經驗以及社區里大家所分享的知識。
那麼我以一個問題開始今天的主題：文檔的目標讀者是誰，他們需要什麼樣的內容，作為編寫者我們該怎樣組織文檔結構來作出清晰的表達？
文檔的目標讀者
首先：你要弄清楚誰是你的文檔的主要讀者。
工程師，設計師，還有公司里的所有人！
當一個設計系統包含了代碼指南，工程師們顯然會是讀者。那麼一個只包含了代碼指南的設計系統應該服務於設計師嗎？如果文檔里只包含了設計規范而沒有代碼（如 Material Design），工程師還是讀者嗎？
在我看來，兩個問題的答案都是肯定的。規範文檔是從不同的角度來服務於多種角色的。
除了設計與工程，它還服務於其他人嗎？很有可能，特別是當文檔所在的設計系統已經成為產品的基石時。簡短有效的介紹對於 PM（產品經理） 很有價值，QA（測試） 則比較關注案例部分…等等。
Morningstar Design System 在文檔頁面右側設計了一個兩級的定位導航欄
Takeaway：不論選擇哪種形式，最重要的是在整個系統中保持邏輯一致，符合讀者的預期與心理模型。
展示設計？展示代碼？還是都展示？
把設計和代碼融合，就會有讀者只對其中一個方面感興趣，他們會提出自己的意見：
設計負責人可能會問到：我能把這些代碼案例和指南隱藏掉嘛？
工程師可能會問：我能把這些和設計規范有關的文字隱藏掉嘛？
可以考慮加一個選項或按鈕來允許隱藏設計/代碼內容。比如：
Design Only：把代碼指南、代碼片段和屬性表等等都隱藏起來
Code Only：把視覺樣式指南和文案指南都隱藏，但還是要把一部分交互用法指南保留著，這對工程師們也有用。
『肆』 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中，推文和推文保持著相同的樣式，均勻的節奏，但是其中的「推薦用戶」一項有著不同的樣式，它插入到推文列表中，打破了整個信息流的節奏，凸顯出不同的層級，會很快抓住你的注意力。
『陸』 ui設計規範文檔怎麼寫
ui設計規范；ui設計規范有哪些？這個問題對於ui設計師來說應該是比較關心的吧，因為作為ui設計師，ui整理設計規范也是設計能力的一種體現。所以，無論是自己設計創作還是推動產品開發，你的設計規范是否完善，對產品的質量起著決定性的關鍵作用。那麼我們今天就來聊聊這個問題吧！
ui設計規范，ui設計規范有哪些？這個問題介紹到這里就介紹完了，現在你清楚ui設計了嗎？設計規范對整個項目的規范性推動很強大，但是需要花時間和耐心細心打磨，所以需要花費很多時間和精力去整理資料、編輯素材、分類整合，最後還要在設計軟體中將整個規范重新排列設計。如果你還有其他關於ui設計的問題歡迎持續關注易夏嵐或者與我進行交流~
『柒』 UI界面設計規范有哪些
一、字體
iOS的字體：
中文字體：蘋方 / PingFang SC
CSS：Font-Family：PingFang SC
英文、數字：Helvetial
Andioid的字體：
中文字體：思源黑體 / Noto Sans Han
英文、數字：Roboto
二、規范
1、iPhone界面尺寸
三：小結
iPhone的主流設計尺寸：750x1334 px
1242x2208 px
Andioid的主流設計尺寸：720x1280 px
1080x1920 px
『捌』 UI設計規范有什麼用給誰看
UI設計不僅是讓某個APP或軟體有個性有品位，吸引用戶，還有一個是操作舒適、簡單、突出軟體的定位和特點，藍湖的設計規范雲可以嘗試一下
『玖』 為什麼UI設計規范很重要
以下三點原因：
保證平台統一性
統一性是交互設計的一個基本原則，在一個長期迭版代多人合作的項權目中，不同的設計師會負責不同的模塊，每個人都有各自的思路，就有可能會對相同的元素做出了不同的方案，對於用戶來說容易造成困惑，對品牌整體形象的建設也沒有好處。所以對於較大型的產品，最好有設計規范來定義基本的元素，幫助眾多設計師一起做出有統一性的產品。
2.提升團隊工作效率
對於同一個基本元素，如果沒有設計規范，交互設計師需要設計一次交互方式，視覺設計師需要設計一次外形，UI開發同學需要開發一次，每個不同的設計師遇到這個元素時都可能重新設計一遍。但如果有了設計規范，只需設計一次，團隊中任何一個設計師需要用的時候直接拿來用就可以了，也不需要再進行視覺和開發，極大的提升了效率。
3.打磨細節體驗
在整理每個元素的規范時，設計師都需要對其場景、狀態考慮清楚。在整理的過程中，經常會發現一些以前沒注意到的問題，並進行優化。把一個小元素單獨拎出來仔細考量，寫成一篇完整規范的過程，其實就是在打磨細節的過程。
『拾』 UI設計網頁設計字體規范應該要注意什麼
可以參考常規字體的使用規范：
1、在每個項目設計中只使用1-2個字體樣式，而在品牌字有明確的規范的情況下，只需要一種字體貫穿全文，通過對字體放大來強調重點文案。字體用的太多，越顯得不夠專業。
2、不同的樣式的字體，形狀或系列最好相同，保證字體風格的一致性。
3、字體與背景的層次要分明,確保字體樣式與色調氣氛相匹配，等。
(10)ui設計規范擴展閱讀：
網頁設計
1、需要根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析，從而建立起營銷模型。
2、以業務目標為中心進行功能策劃，製作出欄目結構關系圖。
3、以滿足用戶體驗設計為目標，使用axure rp或同類軟體進行頁面策劃，製作出交互用例。
4、以頁面精美化設計為目標，使用PS、AI等軟體，調整，使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。
5、根據用戶反饋，進行頁面設計調整，以達到最優效果。