尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎上，提煉出的十項交互設計原則。被廣泛運用于網頁、APP以及各種人機交互領域。
要注意的是，這10項原則是啟發式（heuristics）的、通用的經驗法則，而不是具體的規定。
系統應該通過在合理時間內的適當反饋，向用戶通知正在發生的事情或者當前的狀態。
不要蒙蔽用戶，溝通是所有關系的基礎，無論人還是設備。
當系統響應時間小于1秒時，通常正常反饋即可；
當響應時間長于1秒時，我們通常會通過加載動畫、分步加載、占位符加載等方式，減緩用戶等待的焦慮感；
如果超過10秒還沒有得到響應，那么通常會認為這次請求是失敗的，需要給予用戶失敗提示。例如：刷新提示、新頁面加載提示、支付提示、下載提示。
當然加載時間并沒有固定的規定，有個例子是這樣的：
某個APP的用戶反饋說他們的頁面加載太慢了，希望提高服務器反應速度……于是他們對此進行了優化，優化后用戶的反應：新版很給力，很快！
那這個團隊的優化方案是什么呢？
。
。
。
——他們把小菊花轉圈的速度提快了
對用戶操作的適當反饋是用戶界面設計的最基本準則。讓用戶了解當前狀態、位置、是否成功、進度如何，減少不確定性；并引導他們在正確的方向上交互，而不是浪費精力在重復操作上。反饋有：
·狀態反饋
用戶需要知道自己的操作是否被系統感知，所以用戶操作后，應該第一時間給出反饋。最常見的就是各種按鈕的不同狀態，比如未點擊、點擊、不可用狀態，以及選中、未選中狀態。
就拿小說類批量訂閱列表來說，起點通過明顯的線面和顏色區分選中和未選中的章節；而長佩我買的時候是需要反應一下：免費不可選中是淺灰色、未選中是深灰色，選中是綠色……但是初始狀態時深灰色看起來像是選中？？
·進度反饋
進度通常有頁面加載進度、下載進度、視頻播放進度等
比如下圖的invision網站，在閱讀文章時通過頂部進度條的反饋，讓用戶知道自己的閱讀進度。
·位置反饋
因為網絡空間中用戶無法像物理空間那樣感知到自己的位置，所以我們需要在視覺上進行提醒，以免用戶迷失。
比如標簽欄、導航欄通過選中狀態來定位當前所在頁面，閱讀、看視頻、聽音樂時系統會記錄當前的位置，下次打開后繼續。
·反饋方式多樣化
反饋可以通過元素的顏色位置、文字、聲音和震動，甚至動效去表達變化。
比如京東，通過產品圖縮小-加入購物車的動效來反饋“商品已加入購物車”，直觀形象。
使用用戶熟悉的語言，單詞、短語、圖形，而不是系統導向的術語；遵循現實世界的慣例來呈現信息。
這里的語言不僅僅包括文案層面的語言，還包括產品的設計語言（圖形、配色和風格）。
產品使用的語言應該使目標用戶能夠清晰理解的。如果用戶不能理解，他們會感到被忽視和受挫敗，許多人將選擇其他產品完成目標。
特別是現在很多公司選擇耕耘細分市場的產品來分一杯羹，比如針對中老年、青年、兒童的產品，抑或商務、娛樂的產品，都要分別使用符合自己的定位的語言。
比如bilibili的設計語言和每日優鮮的文案語言——
模仿現實世界的產品或者使用映射，能夠利用人們現有的知識，降低學習成本，使他們輕松快速的理解界面。
像早期擬物化的設計，以及MD的魔法卡片模擬了物理世界中的紙張。IOS的指南針也類似現實世界中的指南針，以便用戶輕松的使用。
熟悉是這些體驗讓用戶愉快的原因。
比如微信閱讀打開書的動效就像現實世界的打開一本書一樣、給medium文章進行標記就像我們現實中使用馬克筆一樣。
用戶經常會在使用時發生誤操作，所以產品需要一個非常明確的“緊急出口”幫助他們——即提供取消和重做的功能。
用戶在使用產品時可以自由進退，遵循從哪里來就可以返回哪里去的原則；比如常用的各種二三級頁面左上角必備的返回按鈕。
當用戶誤操作時要給用戶提供提供撤銷、取消、重做等相關功能，比如聊天類產品的信息都可以短時間內撤銷。
（突然發現這張圖暴露了我每天點外賣的事實 ヽ(。>д<)ｐ
不可逆的操作需要給用戶明顯的提示，以免對用戶產生嚴重的影響。比如刪除功能通常需要二次操作，重要操作會有彈框類提示。
設計者應遵循一致性原則，統一標準能確保用戶理解各個元素在設計中，并且知道去哪里尋找哪些功能。
移動市場成熟的今天，已經有很多約定俗成的慣例。和用戶的習慣一致，意味著用戶不再需要重新學習，各種應用的切換之間沒有學習成本。這也是我認為設計的趨同化未必不是一件好事情的原因。
比如常用的幾種操作手勢、下拉刷新功能、我的/地圖/購物車圖標等
在同一個產品中，同一層級的信息應該使用一致的設計語言。
比如導航、彈窗、按鈕、列表，這是我們推行設計組件和規范的一個原因。
除此以外，顏色、文字、圓角、陰影等也是需要注意一致性的。
△谷歌google visual guidelines-google ads
用戶經常分心于手頭的事情，因此需要通過提供建議、利用約束來防止無意識錯誤。
其實限制用戶的選擇并不是一個好主意，但是如果有明確的規則來定義可接受的選項，那么限制用戶可以輸入的類型是一個很好的策略。
比如訂房時，對可訂房日期進行限制，防止用戶選錯時間。
提供清晰的提示，也能防止用戶犯錯，提示包括標簽、文字、顏色、以及反饋狀態等。
比如IOS的鍵盤，選中的字母會放大，提示用戶；輸入文字光標會放大，防止用戶操作失誤。
比如負向操作通常為紅色，紅色是一種警示色，給用戶預警防止誤操作。
盡可能減少用戶的記憶負擔，向用戶顯示他們可以識別的內容，而不是自己記憶和填寫。
選擇和輸入的操作成本相差巨大。產品應該給用戶提供選項，讓用戶可以直接選擇，而不是自己輸入。比如淘寶填寫收貨地址
在用戶使用產品的過程中，會有產生一些需要記憶的內容、或者操作路徑，這個時候我們要避免用戶記憶，把信息直接提取出來，送到用戶手里。
比如自動讀取短信驗證碼，比如bilibili會提醒上次播放的位置
內容可預期，減少用戶操作路徑，防止來回跳轉。
比如起點章節付費時可以直接看到當前的余額、
比如京東金融首頁直接顯示了余額和代還金額（本來應該打個碼的，但是想想我三位數的資產打碼還不夠費勁呢(?_?)
好的產品需要同時兼顧新用戶和資深用戶的需求。
對新用戶來說，需要功能明確、清晰，對于老用戶需要快捷高效使用高頻功能。不可迎合某一種用戶，把不必要的信息占據重要部分。
在首頁放置常用功能，比如淘寶、支付寶、bilibili等等；或者提供自定義入口，比如猿題庫可以自定義科目
對用戶頻繁使用的功能，提供重復操作入口或者模板。比如美團外賣，可以直接選擇再來一單
通過提供系統默認選項，而減少用戶多余的操作。比如美團、攜程、每日優鮮等當地服務類產品，會默認選擇當前定位的城市；購物會選擇默認收貨地址等
不要包含不相關或低頻次的信息/操作。頁面中的每個額外信息都會降低主要內容的相對可見性。
能夠方便用戶無障礙的瀏覽信息，越重要的內容越突出。
通過顏色、大小、字體的字重、對比度、元素的間距、特殊造型、動效等來表現。
頁面中背景、裝飾元素視覺過重的話，就會干擾到用戶對于信息的閱讀。
比如以圖片為背景，我們要考慮圖片上文字的識別性；列表頁過重的分割線、頁面內過多的裝飾元素都會給干擾信息閱讀……
比如下廚房菜單推薦的卡片，字體識別度特別差；移動掌廳的這個模塊，字體色和背景色對比不清晰、以及字體太小，都會干擾用戶識別信息——我們需要做的是降低這些干擾
錯誤消息應以簡單的語言表示，準確指出問題，并提出解決方案。
當發生錯誤時，提示信息一定要直觀，視覺上能夠引起用戶注意，可視化處理，文案要簡單概要。比如賬號密碼錯誤、以及各種異常狀態
當用戶遇到錯誤時，不要只是報錯，盡可能提供詳盡的說明文字和指導方向，遇到了什么問題，以及如何解決等等。
幫助性內容有一次性提示、常駐提示和幫助文檔。
多用在用戶第一次使用，或者產品更新后，通常為氣泡形式，或者snakebar的形式呈現。
用于操作時必須注意到的內容，在頁面中以文本或者標簽形式呈現。
一般用于解釋規則或者熱點問題，通常以超鏈接的形式存在于頁面中；或者以集合形式位于設置頁中，此時需要注意要易于檢索。
本篇文章主要介紹了尼爾森的10大可用性原則，以及介紹了適用范圍和案例說明。最后我們再來復習一遍加深記憶吧~
一個個看起來精致的頁面也是由這些UI設計細節組成的。對于頁面細節的處理也往往可以體現UI設計師的專業和嚴謹度，本文分享的這些設計細節，不僅新人設計師常常會忽略，就連有經驗的設計師也時常會在這些細節上處理不當。
文字細節
A．文字行距
在做段落文本時，我們很少直接使用默認的文本行距，為了保證閱讀的可讀性和舒適性，必須設置比默認值更大的數值的行距。
具體的數值可以設置在字號的1.3～1.8倍之間，一般情況下，字號越小，需要的閱讀空間會略大一些，特別是在設計一些閱讀類需要閱讀大段文本的產品頁面時，一定要加大行距來提高文本的可讀性和閱讀舒適性。
B．文字對比度
在界面設計中，應該要保證任何文字的可閱讀性，它應該有足夠的對比度，即使是提示性文字也要保證在任何類型的顯示器上都可見易讀。
間距和邊距
A．去掉多余的邊框和分割線
用大量而明顯的分割線和邊框將模塊分開，是UI設計新手常常犯的錯誤，但在設計的同時，可以停下來好好思考：用分割線分開一定是最好的方法嗎？有必要嗎？
有時用1px的邊框和分割線確實是合理的，但也有其他的方法來進行信息的歸類和分割，比如利用陰影和更大的間距。
B．避免不均勻的邊距
在進行卡片式設計時要注意內容與卡片邊緣的邊距。如果你是以常用的從左上角到右下角的方式來布局內容，那就讓頂部的邊距比左側的邊距稍大一點，看起來會比四邊都相等的邊距更加舒適美觀。
投影
在物理現實中，物體的投影絕對不會是黑色的，物體的投影顏色始終會受到其所處在的環境的影響。
應用在界面設計中，物體或是卡片的投影顏色應考慮其背景和環境顏色來進行結合設計，即不應選擇純灰色，而是選擇帶有背景色彩傾向的灰色，同時設置適當的透明度和模糊值，來營造自然舒適的投影效果。
內容填充
重復和隨意的示例文本和圖片放在設計圖中看起來會很不專業，應該避免交付這樣的設計稿，它會讓人覺得你對自己的設計是不專業不用心不愿意花時間的，同時也反應了你對與自己的設計產出的重視程度。
此外，也已經有一部分插件可以自己自動選擇填充內容，為設計師節省了這些素材的填充時間，所以在交付設計稿時，讓自己的設計稿盡量完整專業，哪怕是為了演示效果，也應該放上相應的不同的內容標題、文本、圖片，讓整個設計看起來更加專業和完整。
以上提到的每一條規則都要結合具體的產品來進行具體分析和設計，但是可以適用在在大多數情況下，設計從來沒有一個標準答案，對于設計新手要訓練的是，如何找到那個最合適當前產品的設計方式，希望這篇分享能對你有幫助，感謝閱讀。
當我們拿到網頁設計需求時，首先要確定是不是要單獨開發移動版本。因為響應式布局兼顧了手機端適配問題，但是受加載速度、手機瀏覽器、柵格化系統的限制設計發揮的自由度、等的影響很大。
柵格化設計：是針對網頁設計師。主要是為了提高網頁的規范性。
柵格設計系統：（網格設計系統，標準尺寸系統、程序版面設計）是一種屏幕設計的方法和風格，運動固定的格子設計版面布局，其風格工整、整潔。
柵格化布局：針對前端開發人員，指前端攻城獅使用的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時出錯？如果連接速度太慢，是否會有加載指示器（例如微調器或進度條），或者在加載實際數據時是否會有一些占位符填充顯示塊？那么刷新應用程序的某些屏幕的可能性呢？什么時候（以及在哪種情況下）可能？
正如你所看到的，我不是在談論用戶所犯的錯誤（例如，在填寫表單時犯了錯誤），而是關于不受其控制但仍然發生的錯誤。在這種情況下，與開發人員交談，并了解不同屏幕上可能出現的問題，然后設計一種可以讓用戶輕松解決問題的方法，讓他們可以選擇稍后再試或者執行不同的操作。
無論如何，確定觸發每個錯誤的特定條件并為每個案例設計有用的錯誤消息是一個好主意。這些有用的消息將幫助用戶在每種情況下做出適當的響應，并知道下一步該做什么來解決問題。即使它有點麻煩，也不惜一切代價避免使用通用錯誤消息。
理解流程
界面包括許多元素，它們一起形成應用程序的整個布局。然而，當我們把重點放在用戶界面上的一個整體，我們往往忘記了一些元素也有較小的任務來執行的總體目標做出貢獻。
如果有一個觸發某種交互的按鈕或項目，那么請向前看并考慮下一步：在執行操作時是否會顯示加載狀態？它可以因某種原因被禁用嗎？如果用戶按住按鈕一段時間該怎么辦？會有任何反饋意見嗎？就像整個屏幕有不同的狀態一樣，同樣也適用于單個元素。
此外，請考慮產品的邏輯如何與用戶的心智模型相匹配，幫助他們準確有效地實現目標并以有意義和可預測的方式完成他們的任務。
我要做的就是解決所有這些問題，就是停止我正在做的事情，暫停，退后一步，查看整個多屏幕流程的大局，并了解一系列步驟和動作。我將尋找導致該點的多條路徑，以及遠離它的多條路徑。
你可以在使用原型時做同樣的事情，慢慢地，認真地，謹慎地執行動作。如果這對你來說太具有挑戰性，因為你之前可能已經多次這樣做了，現在它變成了一種自動化的任務，并問同事，朋友或活躍用戶看看設計或原型?？吹狡渌耸褂貌⑴c你的設計進行互動可能很有啟發性，因為我們往往過于接近并且過于熟悉它，因此可能會忽略一些事情。
為您的屏幕設計
當我在設計時，我通常會將手機放在我旁邊，以便我可以預覽我的工作并實時進行調整。
我認為這是一個很好的做法，但這種方式也很容易忘記所有其他手機與人們可能使用的手機不同。有很多不同的屏幕尺寸（特別是在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端產品相比，在諸多方面都有所不同。智能手機移動應用的使用環境更為復雜，用戶的注意力更難集中，影響操作感的因素更多多，分析、了解智能手機端上界面操作的特性對于設計出有良好體驗感的應用產品尤為重要。拋開技術因素，無論在交互還是視覺方面做出細節上設計的優化，來提升產品使用的連貫性和體驗感，讓用戶在心理層面上覺得移動產品使用起來很連貫、速度很快，這無疑是一種聰明的做法。從用戶選擇產品、發出操作命令、完成執行過程最后到接受操作結果，整個操作過程中的每個環節都值得設計師努力優化，減少甚至避免中斷的間隙從而提升體驗感。
藍藍設計的小編 http://www.syprn.cn