UI設計有哪些規範？

12-23

想了解一下UI設計有哪些基本規範？比如說自動定位功能，app如果定錯了用戶的當前位置，我們在右側添加了一個刷新按鈕可以重新定位，這樣一個按鈕，能用刷新icon嗎？

設計最有趣的地方在於它的通用性，不論是音樂、建築還是工業，設計的規則大同小異。
轉載一紐約妹子Melissa做的分享：總結了從建築到產品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設計的四個基本原則

理念上的規範有

形式追隨功能—路易斯·沙利文

這裡的功能不僅包括用戶需求，還包括產品需求、業務需求。

less is more—米斯·凡·德羅

把主要精力放到最核心的需求上

存在即合理—黑格爾

頁面上的每一個元素的存在都可以解釋，不要無緣無故增減元素

可用性規範——尼爾森十大可用性原則
一、狀態可見原則

用戶在網頁上的任何操作，不論是單擊、滾動還是按下鍵盤，頁面應即時給出反饋。「即時」是指，頁面響應時間小於用戶能忍受的等待時間。

二、環境貼切原則

網頁的一切表現和表述，應該儘可能貼近用戶所在的環境（年齡、學歷、文化、時代背景），而不要使用第二世界的語言。《iPhone人機交互指南》里提到的隱喻與擬物化是很好的實踐。此外，還應該使用易懂和約定俗成的表達。

三、撤銷重做原則

為了避免用戶的誤用和誤擊，網頁應提供撤銷和重做功能。

四、一致性原則

同一用語、功能、操作保持一致。

五、防錯原則

通過網頁的設計、重組或特別安排，防止用戶出錯。

六、易取原則

好記性不如爛筆頭。儘可能減少用戶回憶負擔，把需要記憶的內容擺上檯面。

七、靈活高效原則

中級用戶的數量遠高於初級和高級用戶數。為大多數用戶設計，不要低估，也不可輕視，保持靈活高效。

八、易掃原則

互聯網用戶瀏覽網頁的動作不是讀，不是看，而是掃。易掃，意味著突出重點，弱化和剔除無關信息。

九、容錯原則

幫助用戶從錯誤中恢復，將損失降到最低。如果無法自動挽回，則提供詳盡的說明文字和指導方向，而非代碼，比如404。

十、人性化幫助原則

幫助性提示最好的方式是：1、無需提示；2、一次性提示；3、常駐提示；4；幫助文檔。

界面排版規範——《格式塔原理》

相似原則
「有相似特徵元素比沒有相似特徵的元素被認為更為緊密相關」
接近原則

「更接近一起的對象比進一步分開的對象被認為更相關。」
連續定律
「在直線上或者曲線上的元素比不在直線或者曲線上的元素被認為更相關。」
對稱原則
「人們往往傾向於感知圍繞勻稱物體的中心對稱的形狀。」
閉合性原則
「當我們看到一些複雜排列的元素時，我們趨向於尋找一個更為單一可辨識的圖案模式。」
共同命運原則「在同一方向上的元素比固定元素或者是朝不同方向移動的元素更為緊密相關。」
主體與背景原則「我們的大腦將視覺區域分為主體和背景，主體包括一個場景中佔據我們主要注意力的所有元素，其餘則是背景。」

配色原則

協調配色

色相一致
明度一致
純度一致

強調配色

色相對比
明度對比
純度對比

設計規範輸出

多屏適配規範
字體規範
用色規範
布局規範
圖標控制項規範
提示反饋規範
動效規範

2017年度不容錯過的最佳UX設計工具及教程資源整理

作為設計達人的你，目前正在用哪些設計工具來工作呢？如果非要做選擇的話，你認為它們中，哪些是最適用於做原型、線框圖、信息架構、用戶測試或者活動管理的呢？事實上，我們中大多數人，應該是傾向於選擇便宜、又不需要進行安裝，同時能提供良好用戶體驗的工具。

隨著各類工具的湧現，要找到一款符合自己心意的工具並非易事。因此，我在這裡精心挑選了一些基於桌面端的原型工具，包括國內和國外的。同時，你也可以花幾分鐘快速瀏覽下面的UX設計教程，相信你會在閱讀後對UX有更深的了解。

（一）UX設計工具推薦

隨著時代變遷，越來越多的工具傾向於往桌面端發展。這類工具的好處之一，就是讓設計人員能夠獨立於PS、Illustrator等繪圖工具外工作。同時，它們包含有很多交互效果，無需掌握編碼或者編程知識。具體有哪些工具呢，我們一起來看看吧：

1. Axure — 這是一款功能齊全的原型和線框圖軟體，可用於創建、測試以及分享你的設計作品。從學習成本來看，Axure會是那些有複雜交互需求、同時有具備豐富設計經驗人士的最佳選擇。

2. Justinmind — 這也是一款強大的工具，用於高保真原型和線框圖的設計。對於大多數新手來說，掌握這款工具是要耗些時間和精力的。

3. Mockplus— 簡單、快捷的原型設計工具一枚，擁有200多個高度封裝的組件和3000多個圖標。此外，可視化的交互設置和全面的原型演示和分享方式，將會是你設計道路上的好幫手、好朋友。

4. Origami — 這是一款免費的工具，不僅適用於手機原型設計，而且還支持一些模擬功能，比如Facetime攝像頭和文本輸入。缺點之一，是它不支持評論功能。

5. OmniGraffle — 這款工具由Facebook團隊開發，有豐富的設置選項和模板。

6. Principle — 它很適合做有交互和動畫的用戶界面設計。它的界面有一根時間線，讓用戶可以通過移動來進行體驗。

（二）UX設計教程推薦

1. UX Is Not UI - By Nicolas Demange

Nicolas Demange，是國外知名的軟體工程師和FLEX專家。這篇文章中，他用一種簡單且直觀的方式介紹了UX和UI之間的差異。

2. How to Teach UX Design - By Christina Wodtke

教如何學習UX設計，可能對大多數人來講是件很乏味的事情。但是，作者卻用一種不複雜的方法，向我們親身示範如何指導和分享UX設計學習，純乾貨。

3. Learn Web Design Basics - By Paul Boag

這個視頻教程，會對那些正在學習網頁設計基礎知識的人有幫助。你可以從中了解到什麼是好的網頁設計，以及如何成為一個設計專家。此外，一些設計技巧及原則，像板式、色彩、品牌、顏色、布局、行動號召等，相信都會對你有所幫助。

4. UX Design Myths - By Evan Samek

如果你是一名嚴肅的網頁設計師，那麼你的宿命便是給用戶提供最好的體驗。儘管市面上流行著各種所謂的「設計機密」，但從這裡你能得到真正實在的東西，純乾貨。

5. The Three Ways That Good Design Makes You Happy - By Don Norman

這是Don Norman的一段TED演講視頻，他是Design of Everyday Things的作者。在這段」設計使人快樂的三種方式」視頻中，他談到反射、行為以及視覺設計將如何影響我們的情緒。正如作者所說，最成功的設計往往也是最能觸動人心的。

6. Beginner』s Guide to Interactive Prototyping - By Igor Ovsyannykov

交互設計是UX設計中的一個重要部分，而這篇教程結合分步驟的指導以及詳細的截圖，向我們展示如何利用三款流行的原型工具做快速交互。其中，這些工具包括Axure，Mockplus 以及Justinmind。教程由兩部分組成，即交互的設置和交互的實際運用。通篇內容簡單易懂。

7. What Is UX - By Géraud de Laval

最後，強烈推薦你讀一讀這篇教程，特別是當你仍然對未來的職業發展道路感到不確定的時候。這篇文章比較有趣的一點，就是筆者通過把UX跟汽車進行比較，將往常複雜的概念簡單化了。正如所說，世上沒有好車和壞車之分，只是使用的人不一樣罷了。

（三）結尾語

用戶體驗，毫無爭議已成為衡量一個設計好壞的重要標準。選擇一款合適的工具，往往只是做出一個成功產品的第一步，而閱讀UX或UI相關教程，將會成為我們日常工作生活中的靈感來源。希望你能從這篇文章中受益，歡迎補充和討論！

第一步，進入：http://www.seeseed.com

第二步，抑制住彷彿老鼠掉進米缸一樣的小狂喜，把你的目光聚焦到左側：設計-規範

第三步，請自由地......學習。

先佔個坑，過段時間怒答^o^

謝邀！

關於具體的UI規範您可以搜索一下安卓跟IOS兩個平台的UI規範來熟悉。

但是您問題中提到的：能用刷新icon嗎？

這樣的問題，UI規範只會給出建議，但不會強制要求某一處「必須」用什麼類型或者風格的設計。

平台的規範只是一個方向，具體是走路，跑步還是坐飛機看設計師個人所好。

您這個問題，更多的是體驗範疇的東西，如果刷新按鈕比其他按鈕能讓用戶更容易去理解，明白，就是好的，如果容易產生歧義，照樣可以上架，只是用戶體驗可能沒那麼好。

我也是個新人，歡迎交流，一起進步。

祝好！

設計規範有哪些，我從三個角度來劃分這個問題。

? 平台

? 視覺

? 交互

平台規範就是指各個平台或系統從視覺上交互上所具備的特定規範性。

視覺規範是設計師在制定規範時所能產出的最直觀的設計規範。包括了VI、色彩、形狀、圖標、控制項、字體、布局、圖片等等。可鏈接到如何制定一套設計規範。

交互規範也就是一些基本的設計原則，是不可直接數據化的，更多的是意識形態，是指導視覺與平台規範的基礎。

對UI有興趣或追求提升的同學來關注下
關於UI設計師自學小分隊

說道規範咋能不提這兩個呢
[ISUX轉譯]iOS 8人機界面指南（一）：UI設計基礎
Material Design中文版_Material Design中文教程_Material Design開發中文手冊[PDF]下載

第一條，標準的界面設計規範。
第二條，客戶要求。
第三條，當第二條和第一條發生衝突時，以第二條為主。

UI設計有哪些規範？ - 南方南 - 知乎專欄這裡有

交互和UI（界面）是兩個體系。UI設計師師本不需要代碼的，但是很多公司為了節省人力成本要求設計師這麼做，設計界面的時候每個icon、列表間距之類的都是設計師標註的，一般都有設計規範，移動端的根據安卓和適配，web端根據各公司自己的柵格來。的體系很複雜，他需要大量的時間來研究需求、分析競品以及勾畫框架和原型，在大公司里和團隊成員多向溝通，小公司一般是由PM（產品經理）兼任的。

要注意很多規範性的東西，最好多做練習自然就熟了

Style Guide pdf格式，主要作用是指南。用於說明色相、字體、字型大小、分隔線、間距等這些影響到風格形式的元素如何使用，如何建立層級，為了直觀，需要適當的配上標註圖，並說明界面中各組件的作用和使用場景。組件無需標註，從UI Kit的psd文件中提取即可。 UI Kit psd格式，主要作用是提取。設計師可直接拖拽至PS中使用。標註圖 png格式，主要作用是參考。Style Guide中不會包含方方面面場景的情況，如果設計師捉摸不定邏輯上的一致性和合適的層級設定，可以參考更多以前交付給前端工程師的頁面標註圖，我向設計師傳達的一個原則是：除非有更好的方案進行全局替代，否則應盡量使用之前已應用的方案，避免每次迭代都出現新的方案造成不一致問題的放大。