當我們拿到網頁設計需求時，首先要確定是不是要單獨開發移動版本。因為響應式布局兼顧了手機端適配問題，但是受加載速度、手機瀏覽器、柵格化系統的限制設計發揮的自由度、等的影響很大。
柵格化設計：是針對網頁設計師。主要是為了提高網頁的規范性。
柵格設計系統：（網格設計系統，標準尺寸系統、程序版面設計）是一種屏幕設計的方法和風格，運動固定的格子設計版面布局，其風格工整、整潔。
柵格化布局：針對前端開發人員，指前端攻城獅使用的css框架，來實現頁面的響應式布局。
設計師使用縱向的柵格（列）讓頁面元素垂直方向上對齊，使用橫向的柵格（排）讓元素水平方向上對齊。設計師結合基準網格（8pt）和縱向柵格（12欄 16pt）進行設計。
基于設備的邏輯像素進行UI設計——設計開始前UI設計師要根據桌面和平板手機分辨率大小，考慮最大最小響應的屏幕，給出響應的策略設置斷點和次斷點。
斷點：(breakpoint)是頁面改變布局的臨界點，一個響應式網頁可能會有一個或者多個斷點。有時候網頁也會設置次斷點。
次斷點：(minor breakpoint)并未對頁面布局做很大的改動 只是對細節做了一些微調。
媒體查詢：（media queries）是實現斷點的一種方法，它提供了簡單的邏輯方法來根據不同的設備特征（寬度 高度 像素比）應用不同樣式，最常用的媒體查詢變量是min-width和max-width。）
設計師根據網頁的內容找到合適的斷點。設置多少個斷點由網站的內容決定，設置幾個斷點就需要設計幾套UI設計圖。設法避免列間空白太寬或太窄的情況。常見的設計尺寸1920PX（大屏電腦）、1440PX/1280PX（小屏電腦）、1024PX（橫屏Ipad）、768PX（手機和豎屏Ipad）。（這些是根據市場常見的機型分辨率來的。再根據網頁內容多少進行合理的增減。）
用chrome瀏覽器打開一個響應式網站，檢查元素，右上角會顯示視窗當前的分辨率，慢慢縮小視窗的寬度，找到頁面布局的變化點，就是我們上面說到的斷點或者次斷點。）
這個當然不是了。這個視網站中每個頁面的內容而定，甚至同一個頁面的不同內容模塊布局斷點設置也不盡相同。在我的實踐過程中，很多頁面只需要設計三套，當然比較復雜的頁面，在這五個分辨率上，都需要對布局做一些修改或者自動隱藏部分內容。
在UI設計中，很多設計師都苦惱于自己的界面設計“沒有設計感”，感覺看起來“不高級”，到底是為什么呢？其實就是在一些細節的處理上略缺火候，掌握下面這15個小技巧，能讓你的UI界面質感翻倍！
1、雙重陰影，突出立體感
設計師在設計時，為了突出里按鈕的立體感，往往會使用陰影效果。但其實在陰影效果上再疊加一層精細的邊框，可以讓陰影效果顯得更清晰，而不會與原本的按鈕混為一體。
2、只用一種字體，保持視覺一致性
為了讓設計更美觀，許多設計師會在一個界面使用多種字體，但實際上，一個界面里只使用一種字體更為美觀，可以幫助界面產生統一的設計效果。
3、一種字體，不同字重
如果選擇一種字體進行設計會稍顯單調，那可以根據內容的輕重優先級，來選擇不同的字重來做以區分。
4、適當留白
當內容豐富時，更需要適當的留白，才能讓設計具有呼吸感，更加舒適。
5、提高文本與背景的對比度
很多過深或過淺的背景圖上添加文本，總會讓人閱讀有困難，可以采取加粗、添加漸變等方式來處理文本，讓字體更清晰。
6、交互按鈕需要著重突出
為了增加用戶選擇交互按鈕的可能性，應該使用顏色對比、尺寸或標簽，來確保該按鈕突出。
7、字號越小，行距應該越寬
字號越小，閱讀起來障礙更明顯，增加行高留出空隙會讓它更易讀。
8、下載頁顯示進度提醒
如果下載頁的軟件或其他安裝包有一定的下載等待時間，建議給出進度提示，讓用戶可以隨時了解下載進度，不會中途取消下載。
9、同個界面，文本長度盡量一致
基于人的閱讀習慣，研究總結出，單列頁面里，45到75個字符是被廣泛認可的長度。
10、元素陰影不要太重
舒服的投影會增加你的設計的質感，和透氣感。太重的投影會顯得你畫面比較臟。
11、使用遞進分類加強對比度
加強對比度，可以明確突出所選元素。
12、標題的行高不要太高
與長格式正文文本（需要足夠的行高以提高可讀性）不同，標題通常要短得多，因此可以稍微縮小間距。標題的建議行高通常是文本大小的1到1.3倍。
13、大寫標題，提高字間距
當標題全部為大寫字母時，增加字母間距可以提高可讀性，同時又增強了一絲設計感。
14、增添頁面動態
可以在加載中添加一些提醒讓用戶理解當前運行狀態，例如添加“緩沖”符號。
15、不要在下拉列表放置重要操作
用戶需要采取的基本操作（例如，注冊或登錄），應該直接放在醒目位置，而非隱藏在菜單欄中。
一個個看起來精致的頁面也是由這些UI設計細節組成的。對于頁面細節的處理也往往可以體現UI設計師的專業和嚴謹度，本文分享的這些設計細節，不僅新人設計師常常會忽略，就連有經驗的設計師也時常會在這些細節上處理不當。
文字細節
A．文字行距
在做段落文本時，我們很少直接使用默認的文本行距，為了保證閱讀的可讀性和舒適性，必須設置比默認值更大的數值的行距。
具體的數值可以設置在字號的1.3～1.8倍之間，一般情況下，字號越小，需要的閱讀空間會略大一些，特別是在設計一些閱讀類需要閱讀大段文本的產品頁面時，一定要加大行距來提高文本的可讀性和閱讀舒適性。
B．文字對比度
在界面設計中，應該要保證任何文字的可閱讀性，它應該有足夠的對比度，即使是提示性文字也要保證在任何類型的顯示器上都可見易讀。
間距和邊距
A．去掉多余的邊框和分割線
用大量而明顯的分割線和邊框將模塊分開，是UI設計新手常常犯的錯誤，但在設計的同時，可以停下來好好思考：用分割線分開一定是最好的方法嗎？有必要嗎？
有時用1px的邊框和分割線確實是合理的，但也有其他的方法來進行信息的歸類和分割，比如利用陰影和更大的間距。
B．避免不均勻的邊距
在進行卡片式設計時要注意內容與卡片邊緣的邊距。如果你是以常用的從左上角到右下角的方式來布局內容，那就讓頂部的邊距比左側的邊距稍大一點，看起來會比四邊都相等的邊距更加舒適美觀。
投影
在物理現實中，物體的投影絕對不會是黑色的，物體的投影顏色始終會受到其所處在的環境的影響。
應用在界面設計中，物體或是卡片的投影顏色應考慮其背景和環境顏色來進行結合設計，即不應選擇純灰色，而是選擇帶有背景色彩傾向的灰色，同時設置適當的透明度和模糊值，來營造自然舒適的投影效果。
內容填充
重復和隨意的示例文本和圖片放在設計圖中看起來會很不專業，應該避免交付這樣的設計稿，它會讓人覺得你對自己的設計是不專業不用心不愿意花時間的，同時也反應了你對與自己的設計產出的重視程度。
此外，也已經有一部分插件可以自己自動選擇填充內容，為設計師節省了這些素材的填充時間，所以在交付設計稿時，讓自己的設計稿盡量完整專業，哪怕是為了演示效果，也應該放上相應的不同的內容標題、文本、圖片，讓整個設計看起來更加專業和完整。
以上提到的每一條規則都要結合具體的產品來進行具體分析和設計，但是可以適用在在大多數情況下，設計從來沒有一個標準答案，對于設計新手要訓練的是，如何找到那個最合適當前產品的設計方式，希望這篇分享能對你有幫助，感謝閱讀。
界面作為用戶與APP交互的唯一接口，對用戶的情緒和工作效率起著舉足輕重的作用。因此需對用戶界面設計一般原則進行探討。
2、富有吸引力。
用戶界面是由若干界面元素組成的，不是所有元素都一樣重要，要確保重要的元素盡快顯現給用戶。重要的或頻繁訪問的元素應當放在顯著的位置上，而不太重要的或使用頻率小的放到不太顯著的位置上。
一致的外觀可以在系統中創造一種和諧。如果界面元素缺乏一致性，很可能使界面看起來雜亂無章、沒有條理，甚至可能引起用戶對系統可靠性的懷疑，失去對系統應用的信心。
當然此處的“白”并非指白色，而是指界面中沒有被界面元素占用的空白區域。恰當地“留白”有助于突出界面元素和改善可用性，引導用戶在不知不覺中進入系統的思維框架，從而順利地、正確地應用這個系統。
6、保持界面簡單明了。
界面設計中最重要的原則就是使復雜的問題簡單化。如果用戶覺得界面很復雜，則可能會認為系統本身也很難，而望而卻步，所以與大而全的界面設計方案比較起來，簡單明快的界面設計往往更可取。
7、慎重使用顏色。
列表框類元素有一個共同的特點，都可以設置滾動條。使在一個小“框”中閱讀大文件成為可能。但也產生一個問題：如果閱讀一個行列均很多的文件，用戶就會反復拉動水平或垂直滾動條，給閱讀帶來諸多不便。設計時最好只使用一個方向的滾動條，即要么橫向夠寬，要么縱向夠長。
11、控件隱藏。
時我們傾向于將我們的設計視為藝術品。但如果我們用這種方式來思考它們，就意味著它們不會準備好面對“現實世界”的不確定條件。但是，設計一個可以隨時改變的界面也很美 - 而且，讓我們承認它，接口確實一直在變化。我最喜歡設計移動應用程序的一個方面是，從最初的概念到你對所有界面細節進行微調和拋光的時候，這是一個包含許多步驟的過程。
我們是視覺思考者，擁有訓練有素的眼睛。這就是為什么在開始一個新項目時有時會直接跳到可視化UI設計階段的原因，這也是我們可能對其他任務感到厭倦的原因之一。
這也意味著我們經常推遲工作流程的其他重要部分：定義用戶需求和目標，草擬任務流程，處理信息的所有細節和交互設計等。這些是同樣重要的是，它們更抽象，更難以讓人想象它們將如何成為最終產品的有形部分。
當我們正在進行視覺設計時，所謂的像素完美哲學可能是一個陷阱，使我們花費更多的時間來制作細節，直到最小的細節處于界面的“完美”位置。這導致一代設計師使用Dribbble和Behance主要顯示應用程序和網站的精美屏幕，并且更關注外觀而不是設計實際工作方式。在現實世界中，事情往往不如我們期望的那樣好。
就個人而言，我認為最好的設計（當談到用戶界面設計時）不僅外觀和感覺良好，而且還可以優雅地響應變化的條件甚至不可預測的情況。
在構建產品的漫長道路上，設計師需要更多的協作，而不是專注于視覺設計。這正是我為了這篇文章專注的地方。在接下來的幾段中，我將向你提供一些提示和技巧，說明如何將你正在進行的應用程序設計用于測試，并了解它是否已準備好發布到市場。
在不完美中尋找美
當我在大學學習平面設計時，他們教會了我們平衡，對齊，比例和張力的美感，以及如何在空間中定位元素，使它們和諧悅目。憑借這些知識，我的生活發生了變化，我開始以不同的眼光看世界。后來，我開始設計界面，我試圖將相同的原則付諸實踐，屏幕上的所有信息都應該形成一個非常令人滿意的視覺構圖。
如果你將這些原則應用于移動應用程序設計，那么我們發現必須顯示適量的信息。例如，如果一個屏幕必須列出人們的姓名，設計師通常會選擇一些短而普通的名字，并將它們完美地排列在一起，沒有留下任何可能破壞設計或使其在以后崩潰的意外長名稱的空間。
這種方法基于這樣的假設：在混亂和不完美中沒有美，盡管這兩個方面在現實世界中經常出現。但是視覺界面并不是一件值得欣賞的靜態藝術品; 它們是動態的，功能性的空間，可以改變和適應每個人使用它們。我們不應該屈服于純粹為美學設計的誘惑，因為我們永遠無法控制界面必須呈現給人們的一切。
相反，我們必須設計變革！這就是日本人所說的wabi-sabi，一個“以接受短暫和不完美為中心的世界觀”。
因此，以不同的方式思考和設計是很重要的：
● 嘗試以多種方式在你的設計中呈現數據;
● 盡可能使用真實數據。
當你嘗試以幾種方式呈現數據時，包括一些不可預測的數據，你將能夠測試界面是否已準備好處理超出設計“舒適區”的這些情況。此外，為極端情況做好準備。
如果你已經推出了該產品，這將更容易，因為你可以關注實際數據并將其用于你正在進行的設計過程中作為參考。但是如果你正在研究一些新的東西，那么你將不得不深入挖掘，做一些研究，并嘗試了解以后如何信息。你還可以與后端團隊的開發人員討論此問題，他們將能夠更好地向你解釋將存儲和呈現的數據類型。
我給你一個更具圖形的例子，我的開發者朋友稱之為“漂亮的朋友綜合癥”。當我們設計一個包含人物圖片的屏幕時，如用戶檔案，我們傾向于使用在設計中看起來很好并且很漂亮的人的照片。然而，當他看到這樣的設計時，我的朋友說：“我希望我有朋友這么帥?！?
因此，“完美”圖像的替代方案可能是使用不同膚色的人的更多隨機照片。這樣，你就可以測試重疊元素在不同背景下的外觀，讓你可以看到對比度和易讀性是否仍然完好無損。
不要過于樂觀
對于應用程序的工作方式，我們天生就是樂觀主義者。我們認為一切都會快速順利地進行，而且不會中斷，因為......為什么不呢？這就是為什么我們有時會忘記如何設計和處理用戶可能在以后遇到的一些可能不那么好的情況。
列舉幾例，如果突然互聯網連接中斷，會發生什么？或者，如果瀏覽器在執行任務時嘗試連接到API時出錯？如果連接速度太慢，是否會有加載指示器（例如微調器或進度條），或者在加載實際數據時是否會有一些占位符填充顯示塊？那么刷新應用程序的某些屏幕的可能性呢？什么時候（以及在哪種情況下）可能？
正如你所看到的，我不是在談論用戶所犯的錯誤（例如，在填寫表單時犯了錯誤），而是關于不受其控制但仍然發生的錯誤。在這種情況下，與開發人員交談，并了解不同屏幕上可能出現的問題，然后設計一種可以讓用戶輕松解決問題的方法，讓他們可以選擇稍后再試或者執行不同的操作。
無論如何，確定觸發每個錯誤的特定條件并為每個案例設計有用的錯誤消息是一個好主意。這些有用的消息將幫助用戶在每種情況下做出適當的響應，并知道下一步該做什么來解決問題。即使它有點麻煩，也不惜一切代價避免使用通用錯誤消息。
理解流程
界面包括許多元素，它們一起形成應用程序的整個布局。然而，當我們把重點放在用戶界面上的一個整體，我們往往忘記了一些元素也有較小的任務來執行的總體目標做出貢獻。
如果有一個觸發某種交互的按鈕或項目，那么請向前看并考慮下一步：在執行操作時是否會顯示加載狀態？它可以因某種原因被禁用嗎？如果用戶按住按鈕一段時間該怎么辦？會有任何反饋意見嗎？就像整個屏幕有不同的狀態一樣，同樣也適用于單個元素。
此外，請考慮產品的邏輯如何與用戶的心智模型相匹配，幫助他們準確有效地實現目標并以有意義和可預測的方式完成他們的任務。
我要做的就是解決所有這些問題，就是停止我正在做的事情，暫停，退后一步，查看整個多屏幕流程的大局，并了解一系列步驟和動作。我將尋找導致該點的多條路徑，以及遠離它的多條路徑。
你可以在使用原型時做同樣的事情，慢慢地，認真地，謹慎地執行動作。如果這對你來說太具有挑戰性，因為你之前可能已經多次這樣做了，現在它變成了一種自動化的任務，并問同事，朋友或活躍用戶看看設計或原型。看到其他人使用并與你的設計進行互動可能很有啟發性，因為我們往往過于接近并且過于熟悉它，因此可能會忽略一些事情。
為您的屏幕設計
當我在設計時，我通常會將手機放在我旁邊，以便我可以預覽我的工作并實時進行調整。
我認為這是一個很好的做法，但這種方式也很容易忘記所有其他手機與人們可能使用的手機不同。有很多不同的屏幕尺寸（特別是在Android平臺上）; 試著考慮所有可能的變化。
知道從哪里開始的一種方法是檢查你的實際用戶擁有哪種類型的設備。
在為各種屏幕尺寸和方向準備設計時，不僅僅是拉伸盒子和重新定位元素。仔細考慮如何充分利用每種情況，以及如何進行必要的調整，即使它意味著偏離原始設計。
在這些情況下，我們之前討論過的相同原則仍然適用：不可預測的情況，不同類型的內容，可變數量的信息，缺少數據等等。你必須針對各種可能的場景進行設計。不要陷入將屏幕設計為產品的單獨部分的陷阱，它們都是相互連接的。
這不僅對你有用，而且對開發人員也有幫助，他們需要了解許多可能的場景才能編寫代碼并準備界面來解決這些問題。
今天你需要什么，明天你可能需要
你可能已經注意到，本文中許多要點的目標是減少意外情況。即便如此，在很多情況下你也無法得到明確的答案。開發人員經常會問，“那么，如果我這樣做會發生什么呢？”指出你以前沒有考慮過的潛在結果。
如果發生這種情況，那么你只需要針對一個案例和一個屏幕來解決該特定問題。但總是嘗試全局思考，并考慮如何將該特定問題的答案設計為以靈活的方式工作，以便你以后可以重用它。
畢竟，這就是我們UI設計師所做的 - 我們設計和定義適應未預料到的狀態，條件和流程的靈活系統。將你的界面視為移動，更換智能部件的生動生態系統，而不是單個像素塊的集合。
在此過程的這一部分中，你需要與團隊中的開發人員密切合作，主要是為許多不同情況定義一組行為規則。但保持良好的平衡 - 盡量不要過度設計。用一點常識來設定自己的極限。你需要在功能和一致性之間取得良好的平衡。請記住，良好的設計系統是靈活的，并且在某些情況下為規則的某些例外做好準備。
另一方面，想一想你已經設計過的元素如何調整以適應新的情況。如果你創建一個設計組件庫，你將會看到更好的結果，因此，只需快速瀏覽一下庫，你就會知道是否需要從頭開始設計某些東西，或者你可以使用現成的東西。
結論
基于設計系統的優雅解決方案具有明確定義的問題將使我們工作中的視覺設計更加有趣，因為我們可以專注于界面的改進，拋光和愉悅，而無需無休止地迭代。當我們過早地跳到視覺效果時，我們必須同時解決問題并制作界面，這通常會導致沮喪和倦怠。
改變你的工作流程可能在一開始就具有挑戰性，但過了一段時間你會喜歡在限制范圍內工作。這也將改變你的思維方式，并希望幫助你擺脫對視覺細節的關注。你將成為一個更加完善和有能力的用戶體驗設計師，使用適當的可交付成果，而不僅僅是生成無窮無盡的視覺模型和組合。
設計師需要每天解決問題，找到合適的解決方案需要深入研究和精心策劃的測試。我們可能還沒有答案，但我們確實知道我們有時可以采取的某些捷徑。
“啟發式”是一種簡單而有效的規則，可以幫助我們形成判斷并做出決策。我們可以將它們視為UI最佳實踐的一般指導原則。
注意：這些規則有其時間和地點，并不能替代可用性測試。
我們今天要看看八大黃金法則，對設計會產生哪些影響。
1. 爭取一致性
設計“一致的接口”意味著對類似的情況使用相同的設計模式和相同的動作序列。這包括但不限于在用戶使用中在提示屏幕，命令和菜單中正確使用顏色，排版和術語。
請記?。阂恢碌慕缑鎸⑹鼓愕挠脩舾菀淄瓿伤麄兊娜蝿蘸湍繕恕?
2. 啟用常用快捷方式
說到使用UI規則作為快捷方式，你的用戶也將受益于快捷方式，特別是如果他們需要經常完成相同的任務。
專家用戶可能會發現以下功能有用：
· 縮略語
· 功能鍵
· 隱藏的命令
3. 提供信息反饋
你需要讓用戶隨時了解流程每個階段的情況。這種反饋需要有意義，相關，清晰，并符合上下文。
4. 設計對話以進一步溝通
動作序列需要有開頭，中間和結尾。任務完成后，如果是這種情況，請為他們的用戶提供信息反饋和下一步明確定義的選項。不要讓他們疑惑！
5. 提供簡單的錯誤處理
設計一個良好的界面，應該盡可能避免錯誤。但是當錯誤發生時，你的系統需要讓用戶輕松了解問題并知道如何解決問題。處理錯誤的簡單方法包括顯示清晰的錯誤通知以及描述性提示以解決問題。
6. 允許輕松撤銷動作
在發生錯誤后找到“撤消”選項可以立即解決。如果他們知道有一種簡單的方法可以解決任何事故，那么你的用戶就會感到不那么焦慮，更有可能探索各種選擇。
此規則可應用于任何操作，操作組或數據輸入。它可以從簡單的按鈕到整個操作歷史。
7. 支持內部控制點
定義：
“在人格心理學中，控制源是人們相信他們能夠控制事件結果的程度” - Julian Rotter
為用戶提供控制和自由非常重要，這樣他們才能感覺到他們負責系統，而不是相反。用戶應該是行動的發起者而不是響應者。
8. 減少短期內存過載
我們的注意力有限，我們可以做的任何事情都可以讓用戶的工作更輕松，更好。我們更容易識別信息而不是回憶信息。如果我們保持接口簡單和一致，遵守模式，標準和慣例，我們已經為更好的識別和易用性做出了貢獻。
我們可以添加一些功能，以幫助我們的用戶根據他們的目標。例如，在電子商務環境中，最近查看或購買的項目列表。
結論
雖然你應該始終采用基于啟發式的決策，但遵循一系列規則和指南將引導你朝著正確的方向前進，并允許你在設計過程的早期發現主要的可用性問題。這八個原則適用于大多數用戶界面。
你也可以使用它們作為靈感來創建自己的啟發式方法，或者結合現有的示例來解決你自己的設計問題。
每當我找到一個看起來不錯、干凈且優雅的界面時，我都會保存它！
現在我收集了一千多張UI界面，經過反復的學習、使用或簡單查看后，我認識到了一些共同點： 讓我心動的顏色。
因此，在這里，我想總結一下如何在UI界面設計中創建完美顏色。
顏色就像語言一樣強大。當你遇到一些設計、體驗及交互很棒的app時，回想一下，視覺外觀在很大程度上取決于顏色，顏色總是給用戶第一印象。
那么，什么樣的顏色用在實際產品上可以做什么呢？
顏色可以體現出品牌或產品的基本色調、心情、內涵、概念、品質、價值等作用。有研究表明，用戶僅花50秒就可以在線對你的產品有一個心理評價，并且用戶在最初的產品心理評價中有62％至90％的判斷是基于產品的配色方案。 （請看下圖）
正確的顏色選擇可以更好的支持信息可讀性。此外，它可以極大地提高可用性，例如增強號召性用語、增強導航、刺激直觀的交互，滿足審美需求和視覺解決方案。
總之，要創建一種清晰，和諧的顏色樣式來滿足用戶的需求。 （請看下圖，騰訊新聞利用顏色來做用戶引導及導航引導，利用顏色層級更利于用戶閱讀。）
產品的外觀是影響消費者購買決策的關鍵因素。研究表明，所有產品評估中的90％與顏色有關。
如今，許多公司將“顏色”（尤其是UI設計中的顏色）作為其營銷策略之一。 (請看下圖)
我們不能說一種顏色看起來“不好”，只有錯誤地使用顏色，顏色才可能看起來很糟糕。
假如麥當勞使用灰色和黑色而不是黃色和紅色，你是否還有胃口？用戶看到之后根本就沒有任何胃口了，更不可能達成交易。 （請看下圖）
女人在聚會上穿黑色連衣裙和黑色的唇膏，你是否覺得很奇怪？就不符合用戶對事物的認知顏色了，給用戶困惑。（請看下圖）
可口可樂不再使用紅色的標志改為藍色，你還會喝它嗎？喝進去你的心理上會覺得你是在喝漱口水。（請看下圖）
不同的顏色傳遞出了不同的含義和感覺
方法①：在什么時間用戶在使用你的產品，來確定你的產品顏色，比如晚上、早上、還是凌晨。再比如沉浸式體驗應用晚上都會有深色夜間模式。
方法②：根據你的用戶群體選擇正確的顏色，你的產品是面向那一類用戶，男人、女人、青年、幼兒、老年等這些人的對于顏色的認知是不一樣的，比如幼兒對于顏色的認知是五顏六色，顏色亮度飽和度都偏高的，就像路邊的喜洋洋1元搖擺車孩子都很喜歡。
方法③：根據產品的特性選擇正確的顏色目標。產品的特性及固有特性，比如黃金就是金色的，蔬菜黃瓜就是綠色，天空就是藍色我們不妨用產品的固有色來做設計及產品特性來做設計。
方法④：考慮顏色的心理屬性，色彩對人類情緒和行為的影響在心理學分支稱為色彩心理學。它指出我們的大腦對顏色有反應，而我們通常不會注意到它。當人眼感知到一種顏色時，我們的大腦就會向內分泌系統發出信號，釋放出負責情緒的激素，每種顏色在我們的思維中都有自己的影響力。
紅色：它象征著好和壞的感覺，包括愛，自信，熱情和憤怒。
橙色：充滿活力的溫暖色彩帶給你興奮的感覺。
黃色：這是幸福，陽光，喜悅和溫暖的顏色。
綠色：大自然的色彩帶來平靜和生機的感覺。
藍色：它通常代表一些公司形象。與安全、可靠、科技有關。
紫色：是神秘和魔術的顏色。
黑色：它伴隨著悲劇和死亡，象征著一個謎。同時，它可以是傳統的也可以是現代的。
白色：顏色意味著純凈和純真，以及完整性和清晰度。
為什么要談論藍色？
只需看看你最常用的Apps或網站、Facebook、Twitter、Microsoft，騰訊，菜鳥、新能源、智能設備、丁丁、旺旺、飛書、百度等，你會看到，它們都是基于藍色。
藍色是男人、女人、成人、孩子都喜歡的第一色，藍色就像無處不在，在自然界中我們對藍色的認知度最高，藍色絕對是可以培養用戶信任和接受的安全顏色，藍色是UI設計中顏色的典型示例，如果沒有更好的選擇，我們可以使用藍色。
我們在許多美觀的界面中注意到的一件事是，它們通常在特定主色顏色上具有更深和更淺的變化。 （請看下圖例子）
咱們來分析上面界面3個顏色色相、飽和度、明度的變化。就是我們ps軟件里面取色器的HSB，h是色相，s是飽和度，b是明度。
通過上面的顏色分析，我們可以看出主色色相數值不發生變化還是藍色，我們可以把主色降低明度和增加飽和度，可以使顏色變化更深。通過增加明度和降低飽和度，可以產生更明亮的色彩變化。
環顧我們四周環境空間的變化。每次掃視房間時，無疑會看到顏色飽和度和明度的變化，以及陰影和亮面的變化，作為設計師我們可以從現實中取色。 （舉個例子：看下圖）
總結上面的例子，我們以后在做設計的時候遇到這種純色界面就可以利用主色的深淺變化，設計我們的界面，這種顏色搭配更和諧更美觀更自然。
在進行UI界面設計時，你不能完全擺脫顏色組合。在UI設計中結合顏色很容易，但是如何避免混亂和過載呢？如何擺脫樸素并保持精致？
牢記以下兩個原則：
第一個原則：
60％+ 30％+ 10％的原則是達到色彩平衡的最佳比例。通過培養一個平衡的色彩搭配，整潔，和諧的界面為用戶帶來愉悅感，此比例可以完美地發揮作用。而且，它可以減輕用戶的視線，使其舒適地從一個點移動到另一點。 （舉個例子看下圖）
第二個原則：
這些規則與“黃金（6：3：1）規則”相匹配。這也是避免混亂并在配色方案中保持平衡的好方法。
1）基于“主色”，你可以在色環上創建許多變化的顏色。
有一個竅門：確定主色后，在主色的基礎上添加白色即可得到亮色，添加黑色則暗色。在這里，我建議新手使用單色系方案，很容易把控。 （舉個例子看下圖）
主色系的搭配更容易把控，也更簡潔，視覺信息容易聚焦
2）在令人難忘的時刻展示品牌主色，以增強你品牌的獨特風格。在添加顏色以增強品牌在界面上的效果時，請考慮添加主色的位置、占比、數量，增強你的品牌效應，讓用戶對你的品牌顏色認知度更高。（舉個例子看下圖）
支付寶的藍色大家應該都知道，這是支付寶首頁主色的占比，只要有人給你提起支付寶你肯定會想到藍色，這就是在界面設計里面主色的重要性
餓了么主色數量、占比、位置，增強了用戶對品牌色認知
如果一個元素比另一個元素更重要，則它應該具有更高的視覺重量。這使用戶易于快速瀏覽頁面并區分重要和次要信息。 （請看下圖）
汽車之家運用橘色色塊和藍色色塊來做到信息視覺重量，區分視覺層級，引導用戶重要信息
氧氣app的頂部導航部分，新婚蜜月&內衣知識做了顏色的特殊處理，就是為了在導航部分視覺加重，引導用戶點擊探索
雪球理財app，一鍵添加按鈕更加醒目，大膽的使用主色吸引用戶的眼睛，引導用戶添加自己喜歡的股票
在UI設計中巧妙地使用顏色可以創建漂亮的UI界面，但是創建漂亮的UI界面絕不是最終目標，實現出色的用戶體驗目標，使用戶的生活更快樂才是關鍵。
因此，從UI的顏色選擇和用法的角度來看，設計人員應始終記住該界面應高度可用且清晰，并以用戶為中心來做我們的設計！
1. 前言
隨著科學技術的快速發展和人們生活水平的急速提升，手持移動設備——智能手機、平板電腦等，已經在人們的日常生活中普及起來，特別是智能手機，已經成為幾乎人手必備的產品。人們早已不局限于守著電腦來滿足某項需求，通過智能手機中的APP移動應用，人們就可以獲取或者發布信息，實現聽音樂、購物、導航等功能需求。很明顯，移動應用的內容和互動方式越來越豐富和復雜，它的普及和流行也無疑改變了人們的生活習慣，為人們提供了新的生活方式，同時也促進了APP移動應用程序的流行和發展。然而，移動應用在實際使用過程中卻顯露出許多不足，究其原因在于，早期的移動應用中通常直接將較為成熟的桌面應用直接套用與移動終端上。不可否認，這樣做可以讓桌面應用的成熟用戶較為輕松、快速的使用移動應用。但缺陷在于，沒有考慮到移動應用特有的交互方式和交互環境，導致可用性不高。很顯然，智能手機上的移動應用和PC端的應用產品相比，有其特有的使用特性。只有充分了解移動端應用的使用特性，才能為移動應用的界面設計工作打好基礎。
2. 移動應用的使用特性
2.1 使用場景
與PC端的使用不同，智能手機的使用場景較為多變，幾乎不受限制。使用場所可以是室內或戶外也可以是私人空間或公共場所，例如家、辦公大樓、餐廳或地鐵等。還可以以站著、坐著或躺著等姿態使用。正因為這樣復雜、多變的使用場景，一些問題則不得不在我們的考慮范圍之內。例如用戶在公共場所使用移動應用時，私密性的保證；用戶的使用場景發生變化時，使用的便利性和使用過程中斷的可能性等。
2.2 硬件條件
近年來，為了滿足用戶的使用需求和提升體驗感，智能手機的屏幕逐漸變大，“大屏幕”已經成為現代智能手機的一大賣點。雖然智能手機屏幕有越來越大的發展趨勢，但與電腦屏幕相比，仍是相差甚遠。同時，在復雜多變的使用場景中用戶往往使用單手操作，與電腦的操作相比，控制精度較低，出現誤操作的可能性更大。所以如何在有限的尺寸內，將內容完整且準確的呈現給用戶，尋求功能和需求之間的平衡就成了需要反復思考的問題。
2.3 網絡環境
用戶使用智能手機移動應用的網絡環境目前分為2G、3G、4G、WIFI和無網絡五種。但用戶在使用移動應用時的網絡狀況和較為穩定的PC端網絡條件不同，移動端的網絡環境并不是單一不變的，時常會因為環境的變化而變化。例如，某用戶從家中出發，乘坐地鐵要到某大型商場。其本身使用的手機為3G網絡，但因為網絡在地鐵環境中信號不穩定，偶爾手機會變成無網絡的狀態。當用戶到達大型商場，用戶連接成功商場所提供的WIFI網絡，那么用戶使用移動應用則處于WIFI網絡條件下。所以對移動應用進行設計時應考慮到各種網絡環境的變化。
2.4 使用心態
移動應用作為一種用戶貼身使用的工具，用戶使用移動應用的初衷更多的是有定向和較為明確的需求點。用戶希望打開應用、發布命令后，移動應用能立刻開始運作，完成任務。當操作中斷或不斷失敗，由于智能手機移動應用的使用特性，用戶很難有別的解決出口，大部分情況下，用戶只能是除了等待還是等待。這樣用戶就極易失去耐性，最終放棄操作。很明顯，快速、有效的體驗過程才是用戶需要的。特別是移動應用特殊多變的使用場景和網絡環境，其操作的連貫性與WEB產品相比，顯得尤為重要。
2.5 使用界面
在PC端上操作界面時，可以同時打開多層界面，界面與界面之間的切換轉變顯得較為簡單方便，且PC端的顯示信息較為豐富、充分。而在移動終端上對應用界面的操控就顯然更吃力一些了。在有限的屏幕下，信息的展示更為局限，且實施多界面操作時較為不便，例如想實現從某一界面跳回到之前的某一界面，可能要經歷多重步驟。
3. 移動應用界面設計分析
上述智能手機移動應用的使用特性正是影響和指導智能手機移動應用界面設計的重要因素，由此對智能手機移動應用界面的設計分析可得出一些設計要點，主要包括視覺層面和交互層面的設計要素。
3.1 界面的視覺設計
（1）充分考慮移動端的多分辨率
現有智能手機市場有多種系統存在，例如IOS系統、Android系統等，且不同系統的界面風格和界面交互習慣不同。同時，不同款式的智能手機持有不同的分辨率，而一款移動應用的設計是需要在其在不同系統或不同分辨率下都能適用。這就要求在進行移動應用的界面設計時，要考慮到設計畫面中要表達的信息重點是否在任意分辨率下都能完整清晰的展示出來，設計的界面視覺風格是否與相應系統風格相符合。
（2）對控件的合理安排
由于智能手機的界面展示空間較小和人們對屏幕界面進行操控的精度有限，在常規控件的設計上，應考慮界面大小和用戶的可觸碰范圍以及該控件的重要程度等因素來對控件進行設計。要做到設計出來的控件或圖形易懂且易控。
3.2界面的交互設計
（1）合理精密的界面邏輯關系
智能手機的應用界面在使用時若出現邏輯上的不清晰或錯誤，從而需要退回至之前的某一頁面是十分困難的。其次，由于展示空間的限制，在有限界面上來回尋找某項功能會讓用戶處于十分焦慮的狀態，從而降低產品的體驗感。同時，隨著界面層級的加深，用戶的流失量也會逐漸增加。所以，應用界面的布局和界面的層級有較為合理的邏輯關系，且將用戶使用過程中出現中斷、方便用戶隨時退出、讓用戶對于當下所處的位置有較清晰的認識等方面考慮其中，能使用戶在使用應用時更為順暢，有較高滿意度。
（2）提升使用連貫性
當看見菊花轉或進度條的界面時，我們就知道，界面中的內容正在被加載，我們需要等待。很顯然在這樣的加載頁面前，用戶將下意識將注意力投放到觀察進度條的推進速度上。在復雜的使用環境下，網速變慢和信號變差是經常會出現的情況。當單調、枯燥的加載界面持續時間稍長，會給用戶一種壓迫感。因為用戶沒有辦法進行別的操作，只能傻傻盯著進度條等待，最后除了取消操作，別無選擇。在用戶的潛意識中會形成這款應用本身就是很慢，使用起來感覺不好的印象。而針對這樣的現象，近來很多應用開始有了新的嘗試。從用戶的心理層面出發，在一些細節上做出改善性的設計，提升移動應用的使用連貫性。例如，預加載、框架式加載、利用緩存、使用有趣的動畫效果等達到提升應用使用連貫性的目的。
4. 總結
可見，用戶在智能手機移動應用上的使用較PC端產品相比，在諸多方面都有所不同。智能手機移動應用的使用環境更為復雜，用戶的注意力更難集中，影響操作感的因素更多多，分析、了解智能手機端上界面操作的特性對于設計出有良好體驗感的應用產品尤為重要。拋開技術因素，無論在交互還是視覺方面做出細節上設計的優化，來提升產品使用的連貫性和體驗感，讓用戶在心理層面上覺得移動產品使用起來很連貫、速度很快，這無疑是一種聰明的做法。從用戶選擇產品、發出操作命令、完成執行過程最后到接受操作結果，整個操作過程中的每個環節都值得設計師努力優化，減少甚至避免中斷的間隙從而提升體驗感。
公平等級是用戶按重要性處理信息的順序。在界面設計中，就像任何其他形式的設計一樣，此概念對于在視覺上起作用是必要的。通過正確使用層次結構，頭腦可以對元素進行分組和優先級排序，以賦予它們特定的順序，從而有助于您理解要交流的內容和用戶的成就感。
界面設計中經常遇到的問題是過多地使用了分散在屏幕上的元素或組件，如果未按正確的層次放置這些元素或組件，則會導致混亂并增加導航的工作量。對這些元素進行優先級排序對于避免此問題很重要。
在此示例中，大小，形狀和顏色資源用于將視圖定向到特定元素
一般用戶傾向于“掃描”屏幕的整個內容。因此，重點應該清楚地說明網站或應用程序的內容。
這種優先次序不僅應被視為美學問題，而且應被視為用戶體驗的重要組成部分。其中包括的許多元素（尤其是在移動設備中）將與站點導航相關。盡管圖形設計中的層次結構已經存在多年，但恒定的交互因素已添加到UI設計中。用戶與元素交互的事實使設計直觀的界面更加相關。
創建正確的層次結構必須考慮七種資源：
元素越大，越會引起注意。人們首先看到較大的物體是事實，其中包括文本和圖像。使用大小層次結構背后的想法是為開始視覺之旅提供一個焦點。
在Google Arts and Culture應用程序的此快照中，標題“ Pawtraits：我們的不斷變化的……”的大小比副標題“我們的真實感受……”大得多。通過將這些分數分開，閱讀順序可以避免任何混亂。
如果從一個文本到另一個文本的跳躍較小，例如從32pt到24pt，則當同時發送兩條消息時，閱讀順序將變得更加困難。這可能不是一個大問題，但是您應該記住，這可能會創建效率較低的層次結構。
同樣重要的元素太大也沒有必要。造成不必要的失衡可能最終使其他設計黯然失色，并使其他信息在閱讀中丟失。像設計中的所有其他內容一樣，平衡是關鍵。
明亮的色彩比柔和的色調更為突出。顏色是一種強大的視覺資源，它的正確使用可以有效地將屏幕中的元素分開，以對它們進行優先排序或降低優先級。在界面設計中，通常最強的顏色是用于交互，因為用戶需要采取措施或從系統接收反饋。
在此Cabify應用截圖中，紫色的使用是主要顏色。行程路線和“繼續”按鈕均為第一層級，其次是地圖和汽車。色調和飽和度的諧波使用將這些元素與較不飽和且重要性較低的背景分開。
飽和色比灰色更突出。灰色及其標度總是傾向于飽和度高的顏色，這甚至給用戶帶來更親近的感覺。例如，在灰色背景上使用紅色。
明亮的顏色比深色的顏色突出，反之亦然。在深色背景上使用明亮的元素會立即建立層次結構，當我們擁有白色背景和一些深色元素時，這也適用。
重要的是要知道，濫用顏色會最終使用戶感到困惑，因為這會產生一種幻覺，即一切對構圖都很重要。另一方面，等級制度的思想始于將自己定位于最相關的事物而不是最不相關的事物。
彼此靠近的元素比遠處的元素吸引更多的注意力。創建閱讀順序時，使用距離進行分組是非常可行的資源。人的視覺傾向于對元素進行分類，因此，使這種粘合基本上有助于用戶的腦力勞動。
在Netflix主頁上，第一組包含電影的標題和簡介。第二組在最下面列出了六部電影。這些組之間的距離使視圖更容易從一組傳遞到另一組而沒有視覺噪音。同樣，它們各自組中的每個元素都有其自己的填充和邊距。
因此，鄰近度是設計中對象的分組，以創建連接和關聯。當事情接近時，通常意味著它們必須相關。如果事情離得更遠，則意味著它們可能不相關。簡而言之，接近會創建這些關系，并將組織和層次結構帶入信息。
在Airbnb住宿頁面上，標題，位置和名稱主人屬于一種排列，而對公寓的描述以及肖像則屬于另一種排列。一條看不見的直線的破裂在兩個層次上創建了層次結構。
元素的對齊對于在界面設計中創建視覺連貫性非常重要，因為它可以分配與屏幕上元素的相關性，還可以確定交互式或信息性特定元素的開頭和結尾。
人類的大腦喜歡模式，這就是為什么許多最好的網站都是對稱的。這使我們有機會打破該規則，從策略上將用戶的注意力吸引到特定點。用戶將能夠根據它們的對齊或未對齊來關聯這些元素。
重復的樣式給人以元素相關的印象。這種層次結構包括在接口中重用相同或相似的元素。重復還基于視覺模式提供了一些優勢。如果重復某件事，那是因為很重要。
在Uber網站的白色菜單中，圖標和標簽的類別分別放置了8次。它以較小的尺寸平衡，將菜單放在層次結構的第二位，緊隨主標題“進入駕駛員座位……”。重要的是要知道重復對于創建第二級或第三級信息非常有用。
在界面設計中，重復會在整個體驗過程中產生統一感和一致性。例如，在此“中型”文章中，字幕（h2）用重復的樣式標記，粗體的使用和較大的字體大小為用戶提供了基于重復的方向感和層次感。我們必須知道，人性會在熟悉中找到安慰。
元素周圍的空間越多，它產生的注意力就越多。負空間是顯示空白畫布的區域，不僅可以在同一元素的周圍而且可以在同一元素之間和內部找到。它不適用于單色，而是采用背景色來營造出空間感。
在“更好的網站設計”的此示例中，數字“ 01”和標題“運動的目的”都明顯被負空間包圍。盡管插圖由于其紋理的多樣性而具有更大的層次權重，但應用良好的負空間可以實現平衡，防止其他元素貶值。
盡管有些設計師可能認為更好是更好，但視覺感受卻大不相同。具有大量封閉元素的設計會導致界面飽和，并且沒有層次結構指示哪個元素更重要，從而給用戶帶來混亂和不知所措的感覺。
這個想法是，元素越重要，周圍的負空間就越大。將一個元素與另一個元素隔離不僅是創建層次結構的一種優雅資源，而且還可以為設計提供支持結構。也就是說，它創建了必要的空間，以便視圖可以以流暢的方式從一個元素傳遞到另一個元素，而沒有視覺噪音。
多樣而復雜的紋理比平坦的紋理更引人注目。墻壁的平坦表面將比人行道表面突出。這是因為復雜性總是比簡約性吸引更多的用戶注意。紋理的使用還結合了其他重要的設計元素，例如風格和氛圍。
UI設計中的照片可能是存在的按紋理分層的最佳示例。它們的形狀，顏色和漸變總是比平面元素傳達更多的感覺。在Masterclass應用程序的情況下，毫無疑問，講師的照片是第一級的，然后是白色的名稱，菜單中的紅色表示用戶的位置。
該資源應按一定劑量使用，因為紋理的濫用最終會分散注意力，而不是告知或可能導致不必要的壓縮。紋理往往會與其他分層資源（包括大?。┲丿B，因此在合并紋理化元素之前，您必須考慮整個合成以及用戶在設備屏幕上看到的所有內容。同樣，平衡是關鍵。
當設計沒有清晰的視覺層次時，用戶的導航將被迫進入其他形式的閱讀，例如F和Z模式。作為設計師，我們可以加強這些模式或破壞它們，以找到更多動態的交流形式。在UI設計中，沒有什么僅僅是美感，而視覺層次結構無疑是我們擁有的指導用戶體驗，重新設計標準并提供直接接口目標的最佳武器。
《一款APP設計的從0到1》這是一篇系列文章干貨，上次U妹講的是關于APP項目立項和預估時間篇，今天U妹來說一下，APP界面設計和iPad界面設計規范。
往期回顧：
這次U妹接著上次的茬繼續，繼續之前先來看看整個目錄（滿滿的干貨）
U妹列了一個小小的目錄：
一、項目立項
二、項目預估時間
三、界面設計
四、切圖標注
五、視覺還原
六、上線準備
界面設計篇
我是一名UI設計師，所以U妹這里說的都是從設計師的角度去闡述一款APP從無到有的一個過程中，設計師應該干的事。
目前在行業里，關于APP界面設計規范也是層次不齊，很多都還停留在6的設備和ios 9的系統之上，而現在最新的是iphone 7和iOS 10了（更新換代真的很快），我這里說的是最新的iOS 界面設計規范（Android設計規范，我們下次見）
一、關于設計工具
俗話說：工欲善其事必先利其器，好的工具可以讓我們的工作效率更高，做界面設計我們用的最多的就是PS和AI了，如果你是Mac用戶，可以嘗試一下sketch，軟件的版本當然是推薦高版本，因為功能更強大，作圖的速度也就更快。
我個人剛接觸ps是從8.0開始，8.0 - CS4 - CS 5 - CS 6 - CC - CC 2014 - CC 2015，一直到現在的最新的CC 2017，深刻體會，新的版本更好用。也可以根據個人習慣，選擇自己順手的工具就好。
二、設計稿尺寸
在看設計稿尺寸之前，我們先來了解一下APP界面設計構成
界面構成由：布局層、圖文排版層和圖標層。
在iPhone 6還沒出的時候，都是用640x1136 px來做設計稿的，自從6的發布，所有的設計稿尺寸以750x1334 px來做設計稿尺寸
U妹再帶大家來看看，到目前為止所有iPhone的尺寸（1-3代就不用考慮了）：
iPhone界面設計規范：
iPhone 界面尺寸：
以750x1334px作為設計稿標準尺寸的原由：
1. 從中間尺寸向上和向下適配的時候界面調整的幅度最小，最方便適配。
2. 大屏幕時代依然以小尺寸作為設計尺寸，會限制設計師的設計視角。
3. 設計安卓版本時只需做最小的設計調整，提升設計效率。
所以做設計稿事請以750x1334px來做設計稿
在文檔建立參考線是一個很好的習慣，我希望大家也可以養成這個習慣，上下很容易設置，左右我習慣設置24 px的距離，我通過對國內外很多APP就行了對比，總結是24 px更合理，這個是我的個人習慣，所以也不要當做是明文規則，你設置為30 px，也是可以的。
然后就可以開始你的設計了
這里U妹再給大家略過一下iPad的設計規范：
三、圖標設計
iPhone 圖標尺寸：
圖標設計請用柵格化系統進行設計
設計尺寸：1024x1024px，竟可能的采用黃金比例設計
四、關于設計字體
先來看一下字體的歷史演變過程：
iOS 9：英文字體為Helvetica Neue
iOS 9：中文字體由為冬青黑
↓↓↓
iOS 10：英文字體為San Francisco
iOS 10：中文字體為蘋方
關于字體大小的問題：
頂部操作欄文字大小 34-38px
標題文字大小 28-34px
正文文字大小 26-30px
輔助性文字大小 20-24px
Tab bar文字大小 20px
文字大小只是一個范圍，這要根據設計的視覺效果來決定，不要死記硬背，但是切記，字體大小要用偶數。
關于界面設計就說到這里了，好的工作方法才能讓自己事半功倍，你覺得對自己有幫助，那可以借鑒學習我的方法，在具體工作中也要靈活應用，有不足之處或問題也可給U妹留言，下期U妹帶你一起來看看界面切圖標注，我們下期再見！
藍藍設計的小編 http://www.syprn.cn