尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎(chǔ)上，提煉出的十項交互設(shè)計原則。被廣泛運用于網(wǎng)頁、APP以及各種人機交互領(lǐng)域。
要注意的是，這10項原則是啟發(fā)式（heuristics）的、通用的經(jīng)驗法則，而不是具體的規(guī)定。
系統(tǒng)應(yīng)該通過在合理時間內(nèi)的適當(dāng)反饋，向用戶通知正在發(fā)生的事情或者當(dāng)前的狀態(tài)。
不要蒙蔽用戶，溝通是所有關(guān)系的基礎(chǔ)，無論人還是設(shè)備。
當(dāng)系統(tǒng)響應(yīng)時間小于1秒時，通常正常反饋即可；
當(dāng)響應(yīng)時間長于1秒時，我們通常會通過加載動畫、分步加載、占位符加載等方式，減緩用戶等待的焦慮感；
如果超過10秒還沒有得到響應(yīng)，那么通常會認為這次請求是失敗的，需要給予用戶失敗提示。例如：刷新提示、新頁面加載提示、支付提示、下載提示。
當(dāng)然加載時間并沒有固定的規(guī)定，有個例子是這樣的：
某個APP的用戶反饋說他們的頁面加載太慢了，希望提高服務(wù)器反應(yīng)速度……于是他們對此進行了優(yōu)化，優(yōu)化后用戶的反應(yīng)：新版很給力，很快！
那這個團隊的優(yōu)化方案是什么呢？
。
。
。
——他們把小菊花轉(zhuǎn)圈的速度提快了
對用戶操作的適當(dāng)反饋是用戶界面設(shè)計的最基本準則。讓用戶了解當(dāng)前狀態(tài)、位置、是否成功、進度如何，減少不確定性；并引導(dǎo)他們在正確的方向上交互，而不是浪費精力在重復(fù)操作上。反饋有：
·狀態(tài)反饋
用戶需要知道自己的操作是否被系統(tǒng)感知，所以用戶操作后，應(yīng)該第一時間給出反饋。最常見的就是各種按鈕的不同狀態(tài)，比如未點擊、點擊、不可用狀態(tài)，以及選中、未選中狀態(tài)。
就拿小說類批量訂閱列表來說，起點通過明顯的線面和顏色區(qū)分選中和未選中的章節(jié)；而長佩我買的時候是需要反應(yīng)一下：免費不可選中是淺灰色、未選中是深灰色，選中是綠色……但是初始狀態(tài)時深灰色看起來像是選中？？
·進度反饋
進度通常有頁面加載進度、下載進度、視頻播放進度等
比如下圖的invision網(wǎng)站，在閱讀文章時通過頂部進度條的反饋，讓用戶知道自己的閱讀進度。
·位置反饋
因為網(wǎng)絡(luò)空間中用戶無法像物理空間那樣感知到自己的位置，所以我們需要在視覺上進行提醒，以免用戶迷失。
比如標(biāo)簽欄、導(dǎo)航欄通過選中狀態(tài)來定位當(dāng)前所在頁面，閱讀、看視頻、聽音樂時系統(tǒng)會記錄當(dāng)前的位置，下次打開后繼續(xù)。
·反饋方式多樣化
反饋可以通過元素的顏色位置、文字、聲音和震動，甚至動效去表達變化。
比如京東，通過產(chǎn)品圖縮小-加入購物車的動效來反饋“商品已加入購物車”，直觀形象。
使用用戶熟悉的語言，單詞、短語、圖形，而不是系統(tǒng)導(dǎo)向的術(shù)語；遵循現(xiàn)實世界的慣例來呈現(xiàn)信息。
這里的語言不僅僅包括文案層面的語言，還包括產(chǎn)品的設(shè)計語言（圖形、配色和風(fēng)格）。
產(chǎn)品使用的語言應(yīng)該使目標(biāo)用戶能夠清晰理解的。如果用戶不能理解，他們會感到被忽視和受挫敗，許多人將選擇其他產(chǎn)品完成目標(biāo)。
特別是現(xiàn)在很多公司選擇耕耘細分市場的產(chǎn)品來分一杯羹，比如針對中老年、青年、兒童的產(chǎn)品，抑或商務(wù)、娛樂的產(chǎn)品，都要分別使用符合自己的定位的語言。
比如bilibili的設(shè)計語言和每日優(yōu)鮮的文案語言——
模仿現(xiàn)實世界的產(chǎn)品或者使用映射，能夠利用人們現(xiàn)有的知識，降低學(xué)習(xí)成本，使他們輕松快速的理解界面。
像早期擬物化的設(shè)計，以及MD的魔法卡片模擬了物理世界中的紙張。IOS的指南針也類似現(xiàn)實世界中的指南針，以便用戶輕松的使用。
熟悉是這些體驗讓用戶愉快的原因。
比如微信閱讀打開書的動效就像現(xiàn)實世界的打開一本書一樣、給medium文章進行標(biāo)記就像我們現(xiàn)實中使用馬克筆一樣。
用戶經(jīng)常會在使用時發(fā)生誤操作，所以產(chǎn)品需要一個非常明確的“緊急出口”幫助他們——即提供取消和重做的功能。
用戶在使用產(chǎn)品時可以自由進退，遵循從哪里來就可以返回哪里去的原則；比如常用的各種二三級頁面左上角必備的返回按鈕。
當(dāng)用戶誤操作時要給用戶提供提供撤銷、取消、重做等相關(guān)功能，比如聊天類產(chǎn)品的信息都可以短時間內(nèi)撤銷。
（突然發(fā)現(xiàn)這張圖暴露了我每天點外賣的事實 ヽ(。>д<)ｐ
不可逆的操作需要給用戶明顯的提示，以免對用戶產(chǎn)生嚴重的影響。比如刪除功能通常需要二次操作，重要操作會有彈框類提示。
設(shè)計者應(yīng)遵循一致性原則，統(tǒng)一標(biāo)準能確保用戶理解各個元素在設(shè)計中，并且知道去哪里尋找哪些功能。
移動市場成熟的今天，已經(jīng)有很多約定俗成的慣例。和用戶的習(xí)慣一致，意味著用戶不再需要重新學(xué)習(xí)，各種應(yīng)用的切換之間沒有學(xué)習(xí)成本。這也是我認為設(shè)計的趨同化未必不是一件好事情的原因。
比如常用的幾種操作手勢、下拉刷新功能、我的/地圖/購物車圖標(biāo)等
在同一個產(chǎn)品中，同一層級的信息應(yīng)該使用一致的設(shè)計語言。
比如導(dǎo)航、彈窗、按鈕、列表，這是我們推行設(shè)計組件和規(guī)范的一個原因。
除此以外，顏色、文字、圓角、陰影等也是需要注意一致性的。
△谷歌google visual guidelines-google ads
用戶經(jīng)常分心于手頭的事情，因此需要通過提供建議、利用約束來防止無意識錯誤。
其實限制用戶的選擇并不是一個好主意，但是如果有明確的規(guī)則來定義可接受的選項，那么限制用戶可以輸入的類型是一個很好的策略。
比如訂房時，對可訂房日期進行限制，防止用戶選錯時間。
提供清晰的提示，也能防止用戶犯錯，提示包括標(biāo)簽、文字、顏色、以及反饋狀態(tài)等。
比如IOS的鍵盤，選中的字母會放大，提示用戶；輸入文字光標(biāo)會放大，防止用戶操作失誤。
比如負向操作通常為紅色，紅色是一種警示色，給用戶預(yù)警防止誤操作。
盡可能減少用戶的記憶負擔(dān)，向用戶顯示他們可以識別的內(nèi)容，而不是自己記憶和填寫。
選擇和輸入的操作成本相差巨大。產(chǎn)品應(yīng)該給用戶提供選項，讓用戶可以直接選擇，而不是自己輸入。比如淘寶填寫收貨地址
在用戶使用產(chǎn)品的過程中，會有產(chǎn)生一些需要記憶的內(nèi)容、或者操作路徑，這個時候我們要避免用戶記憶，把信息直接提取出來，送到用戶手里。
比如自動讀取短信驗證碼，比如bilibili會提醒上次播放的位置
內(nèi)容可預(yù)期，減少用戶操作路徑，防止來回跳轉(zhuǎn)。
比如起點章節(jié)付費時可以直接看到當(dāng)前的余額、
比如京東金融首頁直接顯示了余額和代還金額（本來應(yīng)該打個碼的，但是想想我三位數(shù)的資產(chǎn)打碼還不夠費勁呢(?_?)
好的產(chǎn)品需要同時兼顧新用戶和資深用戶的需求。
對新用戶來說，需要功能明確、清晰，對于老用戶需要快捷高效使用高頻功能。不可迎合某一種用戶，把不必要的信息占據(jù)重要部分。
在首頁放置常用功能，比如淘寶、支付寶、bilibili等等；或者提供自定義入口，比如猿題庫可以自定義科目
對用戶頻繁使用的功能，提供重復(fù)操作入口或者模板。比如美團外賣，可以直接選擇再來一單
通過提供系統(tǒng)默認選項，而減少用戶多余的操作。比如美團、攜程、每日優(yōu)鮮等當(dāng)?shù)胤?wù)類產(chǎn)品，會默認選擇當(dāng)前定位的城市；購物會選擇默認收貨地址等
不要包含不相關(guān)或低頻次的信息/操作。頁面中的每個額外信息都會降低主要內(nèi)容的相對可見性。
能夠方便用戶無障礙的瀏覽信息，越重要的內(nèi)容越突出。
通過顏色、大小、字體的字重、對比度、元素的間距、特殊造型、動效等來表現(xiàn)。
頁面中背景、裝飾元素視覺過重的話，就會干擾到用戶對于信息的閱讀。
比如以圖片為背景，我們要考慮圖片上文字的識別性；列表頁過重的分割線、頁面內(nèi)過多的裝飾元素都會給干擾信息閱讀……
比如下廚房菜單推薦的卡片，字體識別度特別差；移動掌廳的這個模塊，字體色和背景色對比不清晰、以及字體太小，都會干擾用戶識別信息——我們需要做的是降低這些干擾
錯誤消息應(yīng)以簡單的語言表示，準確指出問題，并提出解決方案。
當(dāng)發(fā)生錯誤時，提示信息一定要直觀，視覺上能夠引起用戶注意，可視化處理，文案要簡單概要。比如賬號密碼錯誤、以及各種異常狀態(tài)
當(dāng)用戶遇到錯誤時，不要只是報錯，盡可能提供詳盡的說明文字和指導(dǎo)方向，遇到了什么問題，以及如何解決等等。
幫助性內(nèi)容有一次性提示、常駐提示和幫助文檔。
多用在用戶第一次使用，或者產(chǎn)品更新后，通常為氣泡形式，或者snakebar的形式呈現(xiàn)。
用于操作時必須注意到的內(nèi)容，在頁面中以文本或者標(biāo)簽形式呈現(xiàn)。
一般用于解釋規(guī)則或者熱點問題，通常以超鏈接的形式存在于頁面中；或者以集合形式位于設(shè)置頁中，此時需要注意要易于檢索。
本篇文章主要介紹了尼爾森的10大可用性原則，以及介紹了適用范圍和案例說明。最后我們再來復(fù)習(xí)一遍加深記憶吧~
一個個看起來精致的頁面也是由這些UI設(shè)計細節(jié)組成的。對于頁面細節(jié)的處理也往往可以體現(xiàn)UI設(shè)計師的專業(yè)和嚴謹度，本文分享的這些設(shè)計細節(jié)，不僅新人設(shè)計師常常會忽略，就連有經(jīng)驗的設(shè)計師也時常會在這些細節(jié)上處理不當(dāng)。
文字細節(jié)
A．文字行距
在做段落文本時，我們很少直接使用默認的文本行距，為了保證閱讀的可讀性和舒適性，必須設(shè)置比默認值更大的數(shù)值的行距。
具體的數(shù)值可以設(shè)置在字號的1.3～1.8倍之間，一般情況下，字號越小，需要的閱讀空間會略大一些，特別是在設(shè)計一些閱讀類需要閱讀大段文本的產(chǎn)品頁面時，一定要加大行距來提高文本的可讀性和閱讀舒適性。
B．文字對比度
在界面設(shè)計中，應(yīng)該要保證任何文字的可閱讀性，它應(yīng)該有足夠的對比度，即使是提示性文字也要保證在任何類型的顯示器上都可見易讀。
間距和邊距
A．去掉多余的邊框和分割線
用大量而明顯的分割線和邊框?qū)⒛K分開，是UI設(shè)計新手常常犯的錯誤，但在設(shè)計的同時，可以停下來好好思考：用分割線分開一定是最好的方法嗎？有必要嗎？
有時用1px的邊框和分割線確實是合理的，但也有其他的方法來進行信息的歸類和分割，比如利用陰影和更大的間距。
B．避免不均勻的邊距
在進行卡片式設(shè)計時要注意內(nèi)容與卡片邊緣的邊距。如果你是以常用的從左上角到右下角的方式來布局內(nèi)容，那就讓頂部的邊距比左側(cè)的邊距稍大一點，看起來會比四邊都相等的邊距更加舒適美觀。
投影
在物理現(xiàn)實中，物體的投影絕對不會是黑色的，物體的投影顏色始終會受到其所處在的環(huán)境的影響。
應(yīng)用在界面設(shè)計中，物體或是卡片的投影顏色應(yīng)考慮其背景和環(huán)境顏色來進行結(jié)合設(shè)計，即不應(yīng)選擇純灰色，而是選擇帶有背景色彩傾向的灰色，同時設(shè)置適當(dāng)?shù)耐该鞫群湍：?，來營造自然舒適的投影效果。
內(nèi)容填充
重復(fù)和隨意的示例文本和圖片放在設(shè)計圖中看起來會很不專業(yè)，應(yīng)該避免交付這樣的設(shè)計稿，它會讓人覺得你對自己的設(shè)計是不專業(yè)不用心不愿意花時間的，同時也反應(yīng)了你對與自己的設(shè)計產(chǎn)出的重視程度。
此外，也已經(jīng)有一部分插件可以自己自動選擇填充內(nèi)容，為設(shè)計師節(jié)省了這些素材的填充時間，所以在交付設(shè)計稿時，讓自己的設(shè)計稿盡量完整專業(yè)，哪怕是為了演示效果，也應(yīng)該放上相應(yīng)的不同的內(nèi)容標(biāo)題、文本、圖片，讓整個設(shè)計看起來更加專業(yè)和完整。
以上提到的每一條規(guī)則都要結(jié)合具體的產(chǎn)品來進行具體分析和設(shè)計，但是可以適用在在大多數(shù)情況下，設(shè)計從來沒有一個標(biāo)準答案，對于設(shè)計新手要訓(xùn)練的是，如何找到那個最合適當(dāng)前產(chǎn)品的設(shè)計方式，希望這篇分享能對你有幫助，感謝閱讀。
當(dāng)我們拿到網(wǎng)頁設(shè)計需求時，首先要確定是不是要單獨開發(fā)移動版本。因為響應(yīng)式布局兼顧了手機端適配問題，但是受加載速度、手機瀏覽器、柵格化系統(tǒng)的限制設(shè)計發(fā)揮的自由度、等的影響很大。
柵格化設(shè)計：是針對網(wǎng)頁設(shè)計師。主要是為了提高網(wǎng)頁的規(guī)范性。
柵格設(shè)計系統(tǒng)：（網(wǎng)格設(shè)計系統(tǒng)，標(biāo)準尺寸系統(tǒng)、程序版面設(shè)計）是一種屏幕設(shè)計的方法和風(fēng)格，運動固定的格子設(shè)計版面布局，其風(fēng)格工整、整潔。
柵格化布局：針對前端開發(fā)人員，指前端攻城獅使用的css框架，來實現(xiàn)頁面的響應(yīng)式布局。
設(shè)計師使用縱向的柵格（列）讓頁面元素垂直方向上對齊，使用橫向的柵格（排）讓元素水平方向上對齊。設(shè)計師結(jié)合基準網(wǎng)格（8pt）和縱向柵格（12欄 16pt）進行設(shè)計。
基于設(shè)備的邏輯像素進行UI設(shè)計——設(shè)計開始前UI設(shè)計師要根據(jù)桌面和平板手機分辨率大小，考慮最大最小響應(yīng)的屏幕，給出響應(yīng)的策略設(shè)置斷點和次斷點。
斷點：(breakpoint)是頁面改變布局的臨界點，一個響應(yīng)式網(wǎng)頁可能會有一個或者多個斷點。有時候網(wǎng)頁也會設(shè)置次斷點。
次斷點：(minor breakpoint)并未對頁面布局做很大的改動 只是對細節(jié)做了一些微調(diào)。
媒體查詢：（media queries）是實現(xiàn)斷點的一種方法，它提供了簡單的邏輯方法來根據(jù)不同的設(shè)備特征（寬度 高度 像素比）應(yīng)用不同樣式，最常用的媒體查詢變量是min-width和max-width。）
設(shè)計師根據(jù)網(wǎng)頁的內(nèi)容找到合適的斷點。設(shè)置多少個斷點由網(wǎng)站的內(nèi)容決定，設(shè)置幾個斷點就需要設(shè)計幾套UI設(shè)計圖。設(shè)法避免列間空白太寬或太窄的情況。常見的設(shè)計尺寸1920PX（大屏電腦）、1440PX/1280PX（小屏電腦）、1024PX（橫屏Ipad）、768PX（手機和豎屏Ipad）。（這些是根據(jù)市場常見的機型分辨率來的。再根據(jù)網(wǎng)頁內(nèi)容多少進行合理的增減。）
用chrome瀏覽器打開一個響應(yīng)式網(wǎng)站，檢查元素，右上角會顯示視窗當(dāng)前的分辨率，慢慢縮小視窗的寬度，找到頁面布局的變化點，就是我們上面說到的斷點或者次斷點。）
這個當(dāng)然不是了。這個視網(wǎng)站中每個頁面的內(nèi)容而定，甚至同一個頁面的不同內(nèi)容模塊布局斷點設(shè)置也不盡相同。在我的實踐過程中，很多頁面只需要設(shè)計三套，當(dāng)然比較復(fù)雜的頁面，在這五個分辨率上，都需要對布局做一些修改或者自動隱藏部分內(nèi)容。
在UI設(shè)計中，很多設(shè)計師都苦惱于自己的界面設(shè)計“沒有設(shè)計感”，感覺看起來“不高級”，到底是為什么呢？其實就是在一些細節(jié)的處理上略缺火候，掌握下面這15個小技巧，能讓你的UI界面質(zhì)感翻倍！
1、雙重陰影，突出立體感
設(shè)計師在設(shè)計時，為了突出里按鈕的立體感，往往會使用陰影效果。但其實在陰影效果上再疊加一層精細的邊框，可以讓陰影效果顯得更清晰，而不會與原本的按鈕混為一體。
2、只用一種字體，保持視覺一致性
為了讓設(shè)計更美觀，許多設(shè)計師會在一個界面使用多種字體，但實際上，一個界面里只使用一種字體更為美觀，可以幫助界面產(chǎn)生統(tǒng)一的設(shè)計效果。
3、一種字體，不同字重
如果選擇一種字體進行設(shè)計會稍顯單調(diào)，那可以根據(jù)內(nèi)容的輕重優(yōu)先級，來選擇不同的字重來做以區(qū)分。
4、適當(dāng)留白
當(dāng)內(nèi)容豐富時，更需要適當(dāng)?shù)牧舭?，才能讓設(shè)計具有呼吸感，更加舒適。
5、提高文本與背景的對比度
很多過深或過淺的背景圖上添加文本，總會讓人閱讀有困難，可以采取加粗、添加漸變等方式來處理文本，讓字體更清晰。
6、交互按鈕需要著重突出
為了增加用戶選擇交互按鈕的可能性，應(yīng)該使用顏色對比、尺寸或標(biāo)簽，來確保該按鈕突出。
7、字號越小，行距應(yīng)該越寬
字號越小，閱讀起來障礙更明顯，增加行高留出空隙會讓它更易讀。
8、下載頁顯示進度提醒
如果下載頁的軟件或其他安裝包有一定的下載等待時間，建議給出進度提示，讓用戶可以隨時了解下載進度，不會中途取消下載。
9、同個界面，文本長度盡量一致
基于人的閱讀習(xí)慣，研究總結(jié)出，單列頁面里，45到75個字符是被廣泛認可的長度。
10、元素陰影不要太重
舒服的投影會增加你的設(shè)計的質(zhì)感，和透氣感。太重的投影會顯得你畫面比較臟。
11、使用遞進分類加強對比度
加強對比度，可以明確突出所選元素。
12、標(biāo)題的行高不要太高
與長格式正文文本（需要足夠的行高以提高可讀性）不同，標(biāo)題通常要短得多，因此可以稍微縮小間距。標(biāo)題的建議行高通常是文本大小的1到1.3倍。
13、大寫標(biāo)題，提高字間距
當(dāng)標(biāo)題全部為大寫字母時，增加字母間距可以提高可讀性，同時又增強了一絲設(shè)計感。
14、增添頁面動態(tài)
可以在加載中添加一些提醒讓用戶理解當(dāng)前運行狀態(tài)，例如添加“緩沖”符號。
15、不要在下拉列表放置重要操作
用戶需要采取的基本操作（例如，注冊或登錄），應(yīng)該直接放在醒目位置，而非隱藏在菜單欄中。
一個個看起來精致的頁面也是由這些UI設(shè)計細節(jié)組成的。對于頁面細節(jié)的處理也往往可以體現(xiàn)UI設(shè)計師的專業(yè)和嚴謹度，本文分享的這些設(shè)計細節(jié)，不僅新人設(shè)計師常常會忽略，就連有經(jīng)驗的設(shè)計師也時常會在這些細節(jié)上處理不當(dāng)。
文字細節(jié)
A．文字行距
在做段落文本時，我們很少直接使用默認的文本行距，為了保證閱讀的可讀性和舒適性，必須設(shè)置比默認值更大的數(shù)值的行距。
具體的數(shù)值可以設(shè)置在字號的1.3～1.8倍之間，一般情況下，字號越小，需要的閱讀空間會略大一些，特別是在設(shè)計一些閱讀類需要閱讀大段文本的產(chǎn)品頁面時，一定要加大行距來提高文本的可讀性和閱讀舒適性。
B．文字對比度
在界面設(shè)計中，應(yīng)該要保證任何文字的可閱讀性，它應(yīng)該有足夠的對比度，即使是提示性文字也要保證在任何類型的顯示器上都可見易讀。
間距和邊距
A．去掉多余的邊框和分割線
用大量而明顯的分割線和邊框?qū)⒛K分開，是UI設(shè)計新手常常犯的錯誤，但在設(shè)計的同時，可以停下來好好思考：用分割線分開一定是最好的方法嗎？有必要嗎？
有時用1px的邊框和分割線確實是合理的，但也有其他的方法來進行信息的歸類和分割，比如利用陰影和更大的間距。
B．避免不均勻的邊距
在進行卡片式設(shè)計時要注意內(nèi)容與卡片邊緣的邊距。如果你是以常用的從左上角到右下角的方式來布局內(nèi)容，那就讓頂部的邊距比左側(cè)的邊距稍大一點，看起來會比四邊都相等的邊距更加舒適美觀。
投影
在物理現(xiàn)實中，物體的投影絕對不會是黑色的，物體的投影顏色始終會受到其所處在的環(huán)境的影響。
應(yīng)用在界面設(shè)計中，物體或是卡片的投影顏色應(yīng)考慮其背景和環(huán)境顏色來進行結(jié)合設(shè)計，即不應(yīng)選擇純灰色，而是選擇帶有背景色彩傾向的灰色，同時設(shè)置適當(dāng)?shù)耐该鞫群湍：?，來營造自然舒適的投影效果。
內(nèi)容填充
重復(fù)和隨意的示例文本和圖片放在設(shè)計圖中看起來會很不專業(yè)，應(yīng)該避免交付這樣的設(shè)計稿，它會讓人覺得你對自己的設(shè)計是不專業(yè)不用心不愿意花時間的，同時也反應(yīng)了你對與自己的設(shè)計產(chǎn)出的重視程度。
此外，也已經(jīng)有一部分插件可以自己自動選擇填充內(nèi)容，為設(shè)計師節(jié)省了這些素材的填充時間，所以在交付設(shè)計稿時，讓自己的設(shè)計稿盡量完整專業(yè)，哪怕是為了演示效果，也應(yīng)該放上相應(yīng)的不同的內(nèi)容標(biāo)題、文本、圖片，讓整個設(shè)計看起來更加專業(yè)和完整。
以上提到的每一條規(guī)則都要結(jié)合具體的產(chǎn)品來進行具體分析和設(shè)計，但是可以適用在在大多數(shù)情況下，設(shè)計從來沒有一個標(biāo)準答案，對于設(shè)計新手要訓(xùn)練的是，如何找到那個最合適當(dāng)前產(chǎn)品的設(shè)計方式，希望這篇分享能對你有幫助，感謝閱讀。
界面作為用戶與APP交互的唯一接口，對用戶的情緒和工作效率起著舉足輕重的作用。因此需對用戶界面設(shè)計一般原則進行探討。
2、富有吸引力。
用戶界面是由若干界面元素組成的，不是所有元素都一樣重要，要確保重要的元素盡快顯現(xiàn)給用戶。重要的或頻繁訪問的元素應(yīng)當(dāng)放在顯著的位置上，而不太重要的或使用頻率小的放到不太顯著的位置上。
一致的外觀可以在系統(tǒng)中創(chuàng)造一種和諧。如果界面元素缺乏一致性，很可能使界面看起來雜亂無章、沒有條理，甚至可能引起用戶對系統(tǒng)可靠性的懷疑，失去對系統(tǒng)應(yīng)用的信心。
當(dāng)然此處的“白”并非指白色，而是指界面中沒有被界面元素占用的空白區(qū)域。恰當(dāng)?shù)亍傲舭住庇兄谕怀鼋缑嬖睾透纳瓶捎眯裕龑?dǎo)用戶在不知不覺中進入系統(tǒng)的思維框架，從而順利地、正確地應(yīng)用這個系統(tǒng)。
6、保持界面簡單明了。
界面設(shè)計中最重要的原則就是使復(fù)雜的問題簡單化。如果用戶覺得界面很復(fù)雜，則可能會認為系統(tǒng)本身也很難，而望而卻步，所以與大而全的界面設(shè)計方案比較起來，簡單明快的界面設(shè)計往往更可取。
7、慎重使用顏色。
列表框類元素有一個共同的特點，都可以設(shè)置滾動條。使在一個小“框”中閱讀大文件成為可能。但也產(chǎn)生一個問題：如果閱讀一個行列均很多的文件，用戶就會反復(fù)拉動水平或垂直滾動條，給閱讀帶來諸多不便。設(shè)計時最好只使用一個方向的滾動條，即要么橫向夠?qū)挘纯v向夠長。
11、控件隱藏。
時我們傾向于將我們的設(shè)計視為藝術(shù)品。但如果我們用這種方式來思考它們，就意味著它們不會準備好面對“現(xiàn)實世界”的不確定條件。但是，設(shè)計一個可以隨時改變的界面也很美 - 而且，讓我們承認它，接口確實一直在變化。我最喜歡設(shè)計移動應(yīng)用程序的一個方面是，從最初的概念到你對所有界面細節(jié)進行微調(diào)和拋光的時候，這是一個包含許多步驟的過程。
我們是視覺思考者，擁有訓(xùn)練有素的眼睛。這就是為什么在開始一個新項目時有時會直接跳到可視化UI設(shè)計階段的原因，這也是我們可能對其他任務(wù)感到厭倦的原因之一。
這也意味著我們經(jīng)常推遲工作流程的其他重要部分：定義用戶需求和目標(biāo)，草擬任務(wù)流程，處理信息的所有細節(jié)和交互設(shè)計等。這些是同樣重要的是，它們更抽象，更難以讓人想象它們將如何成為最終產(chǎn)品的有形部分。
當(dāng)我們正在進行視覺設(shè)計時，所謂的像素完美哲學(xué)可能是一個陷阱，使我們花費更多的時間來制作細節(jié)，直到最小的細節(jié)處于界面的“完美”位置。這導(dǎo)致一代設(shè)計師使用Dribbble和Behance主要顯示應(yīng)用程序和網(wǎng)站的精美屏幕，并且更關(guān)注外觀而不是設(shè)計實際工作方式。在現(xiàn)實世界中，事情往往不如我們期望的那樣好。
就個人而言，我認為最好的設(shè)計（當(dāng)談到用戶界面設(shè)計時）不僅外觀和感覺良好，而且還可以優(yōu)雅地響應(yīng)變化的條件甚至不可預(yù)測的情況。
在構(gòu)建產(chǎn)品的漫長道路上，設(shè)計師需要更多的協(xié)作，而不是專注于視覺設(shè)計。這正是我為了這篇文章專注的地方。在接下來的幾段中，我將向你提供一些提示和技巧，說明如何將你正在進行的應(yīng)用程序設(shè)計用于測試，并了解它是否已準備好發(fā)布到市場。
在不完美中尋找美
當(dāng)我在大學(xué)學(xué)習(xí)平面設(shè)計時，他們教會了我們平衡，對齊，比例和張力的美感，以及如何在空間中定位元素，使它們和諧悅目。憑借這些知識，我的生活發(fā)生了變化，我開始以不同的眼光看世界。后來，我開始設(shè)計界面，我試圖將相同的原則付諸實踐，屏幕上的所有信息都應(yīng)該形成一個非常令人滿意的視覺構(gòu)圖。
如果你將這些原則應(yīng)用于移動應(yīng)用程序設(shè)計，那么我們發(fā)現(xiàn)必須顯示適量的信息。例如，如果一個屏幕必須列出人們的姓名，設(shè)計師通常會選擇一些短而普通的名字，并將它們完美地排列在一起，沒有留下任何可能破壞設(shè)計或使其在以后崩潰的意外長名稱的空間。
這種方法基于這樣的假設(shè)：在混亂和不完美中沒有美，盡管這兩個方面在現(xiàn)實世界中經(jīng)常出現(xiàn)。但是視覺界面并不是一件值得欣賞的靜態(tài)藝術(shù)品; 它們是動態(tài)的，功能性的空間，可以改變和適應(yīng)每個人使用它們。我們不應(yīng)該屈服于純粹為美學(xué)設(shè)計的誘惑，因為我們永遠無法控制界面必須呈現(xiàn)給人們的一切。
相反，我們必須設(shè)計變革！這就是日本人所說的wabi-sabi，一個“以接受短暫和不完美為中心的世界觀”。
因此，以不同的方式思考和設(shè)計是很重要的：
● 嘗試以多種方式在你的設(shè)計中呈現(xiàn)數(shù)據(jù);
● 盡可能使用真實數(shù)據(jù)。
當(dāng)你嘗試以幾種方式呈現(xiàn)數(shù)據(jù)時，包括一些不可預(yù)測的數(shù)據(jù)，你將能夠測試界面是否已準備好處理超出設(shè)計“舒適區(qū)”的這些情況。此外，為極端情況做好準備。
如果你已經(jīng)推出了該產(chǎn)品，這將更容易，因為你可以關(guān)注實際數(shù)據(jù)并將其用于你正在進行的設(shè)計過程中作為參考。但是如果你正在研究一些新的東西，那么你將不得不深入挖掘，做一些研究，并嘗試了解以后如何信息。你還可以與后端團隊的開發(fā)人員討論此問題，他們將能夠更好地向你解釋將存儲和呈現(xiàn)的數(shù)據(jù)類型。
我給你一個更具圖形的例子，我的開發(fā)者朋友稱之為“漂亮的朋友綜合癥”。當(dāng)我們設(shè)計一個包含人物圖片的屏幕時，如用戶檔案，我們傾向于使用在設(shè)計中看起來很好并且很漂亮的人的照片。然而，當(dāng)他看到這樣的設(shè)計時，我的朋友說：“我希望我有朋友這么帥?！?
因此，“完美”圖像的替代方案可能是使用不同膚色的人的更多隨機照片。這樣，你就可以測試重疊元素在不同背景下的外觀，讓你可以看到對比度和易讀性是否仍然完好無損。
不要過于樂觀
對于應(yīng)用程序的工作方式，我們天生就是樂觀主義者。我們認為一切都會快速順利地進行，而且不會中斷，因為......為什么不呢？這就是為什么我們有時會忘記如何設(shè)計和處理用戶可能在以后遇到的一些可能不那么好的情況。
列舉幾例，如果突然互聯(lián)網(wǎng)連接中斷，會發(fā)生什么？或者，如果瀏覽器在執(zhí)行任務(wù)時嘗試連接到API時出錯？如果連接速度太慢，是否會有加載指示器（例如微調(diào)器或進度條），或者在加載實際數(shù)據(jù)時是否會有一些占位符填充顯示塊？那么刷新應(yīng)用程序的某些屏幕的可能性呢？什么時候（以及在哪種情況下）可能？
正如你所看到的，我不是在談?wù)撚脩羲傅腻e誤（例如，在填寫表單時犯了錯誤），而是關(guān)于不受其控制但仍然發(fā)生的錯誤。在這種情況下，與開發(fā)人員交談，并了解不同屏幕上可能出現(xiàn)的問題，然后設(shè)計一種可以讓用戶輕松解決問題的方法，讓他們可以選擇稍后再試或者執(zhí)行不同的操作。
無論如何，確定觸發(fā)每個錯誤的特定條件并為每個案例設(shè)計有用的錯誤消息是一個好主意。這些有用的消息將幫助用戶在每種情況下做出適當(dāng)?shù)捻憫?yīng)，并知道下一步該做什么來解決問題。即使它有點麻煩，也不惜一切代價避免使用通用錯誤消息。
理解流程
界面包括許多元素，它們一起形成應(yīng)用程序的整個布局。然而，當(dāng)我們把重點放在用戶界面上的一個整體，我們往往忘記了一些元素也有較小的任務(wù)來執(zhí)行的總體目標(biāo)做出貢獻。
如果有一個觸發(fā)某種交互的按鈕或項目，那么請向前看并考慮下一步：在執(zhí)行操作時是否會顯示加載狀態(tài)？它可以因某種原因被禁用嗎？如果用戶按住按鈕一段時間該怎么辦？會有任何反饋意見嗎？就像整個屏幕有不同的狀態(tài)一樣，同樣也適用于單個元素。
此外，請考慮產(chǎn)品的邏輯如何與用戶的心智模型相匹配，幫助他們準確有效地實現(xiàn)目標(biāo)并以有意義和可預(yù)測的方式完成他們的任務(wù)。
我要做的就是解決所有這些問題，就是停止我正在做的事情，暫停，退后一步，查看整個多屏幕流程的大局，并了解一系列步驟和動作。我將尋找導(dǎo)致該點的多條路徑，以及遠離它的多條路徑。
你可以在使用原型時做同樣的事情，慢慢地，認真地，謹慎地執(zhí)行動作。如果這對你來說太具有挑戰(zhàn)性，因為你之前可能已經(jīng)多次這樣做了，現(xiàn)在它變成了一種自動化的任務(wù)，并問同事，朋友或活躍用戶看看設(shè)計或原型。看到其他人使用并與你的設(shè)計進行互動可能很有啟發(fā)性，因為我們往往過于接近并且過于熟悉它，因此可能會忽略一些事情。
為您的屏幕設(shè)計
當(dāng)我在設(shè)計時，我通常會將手機放在我旁邊，以便我可以預(yù)覽我的工作并實時進行調(diào)整。
我認為這是一個很好的做法，但這種方式也很容易忘記所有其他手機與人們可能使用的手機不同。有很多不同的屏幕尺寸（特別是在Android平臺上）; 試著考慮所有可能的變化。
知道從哪里開始的一種方法是檢查你的實際用戶擁有哪種類型的設(shè)備。
在為各種屏幕尺寸和方向準備設(shè)計時，不僅僅是拉伸盒子和重新定位元素。仔細考慮如何充分利用每種情況，以及如何進行必要的調(diào)整，即使它意味著偏離原始設(shè)計。
在這些情況下，我們之前討論過的相同原則仍然適用：不可預(yù)測的情況，不同類型的內(nèi)容，可變數(shù)量的信息，缺少數(shù)據(jù)等等。你必須針對各種可能的場景進行設(shè)計。不要陷入將屏幕設(shè)計為產(chǎn)品的單獨部分的陷阱，它們都是相互連接的。
這不僅對你有用，而且對開發(fā)人員也有幫助，他們需要了解許多可能的場景才能編寫代碼并準備界面來解決這些問題。
今天你需要什么，明天你可能需要
你可能已經(jīng)注意到，本文中許多要點的目標(biāo)是減少意外情況。即便如此，在很多情況下你也無法得到明確的答案。開發(fā)人員經(jīng)常會問，“那么，如果我這樣做會發(fā)生什么呢？”指出你以前沒有考慮過的潛在結(jié)果。
如果發(fā)生這種情況，那么你只需要針對一個案例和一個屏幕來解決該特定問題。但總是嘗試全局思考，并考慮如何將該特定問題的答案設(shè)計為以靈活的方式工作，以便你以后可以重用它。
畢竟，這就是我們UI設(shè)計師所做的 - 我們設(shè)計和定義適應(yīng)未預(yù)料到的狀態(tài)，條件和流程的靈活系統(tǒng)。將你的界面視為移動，更換智能部件的生動生態(tài)系統(tǒng)，而不是單個像素塊的集合。
在此過程的這一部分中，你需要與團隊中的開發(fā)人員密切合作，主要是為許多不同情況定義一組行為規(guī)則。但保持良好的平衡 - 盡量不要過度設(shè)計。用一點常識來設(shè)定自己的極限。你需要在功能和一致性之間取得良好的平衡。請記住，良好的設(shè)計系統(tǒng)是靈活的，并且在某些情況下為規(guī)則的某些例外做好準備。
另一方面，想一想你已經(jīng)設(shè)計過的元素如何調(diào)整以適應(yīng)新的情況。如果你創(chuàng)建一個設(shè)計組件庫，你將會看到更好的結(jié)果，因此，只需快速瀏覽一下庫，你就會知道是否需要從頭開始設(shè)計某些東西，或者你可以使用現(xiàn)成的東西。
結(jié)論
基于設(shè)計系統(tǒng)的優(yōu)雅解決方案具有明確定義的問題將使我們工作中的視覺設(shè)計更加有趣，因為我們可以專注于界面的改進，拋光和愉悅，而無需無休止地迭代。當(dāng)我們過早地跳到視覺效果時，我們必須同時解決問題并制作界面，這通常會導(dǎo)致沮喪和倦怠。
改變你的工作流程可能在一開始就具有挑戰(zhàn)性，但過了一段時間你會喜歡在限制范圍內(nèi)工作。這也將改變你的思維方式，并希望幫助你擺脫對視覺細節(jié)的關(guān)注。你將成為一個更加完善和有能力的用戶體驗設(shè)計師，使用適當(dāng)?shù)目山桓冻晒?，而不僅僅是生成無窮無盡的視覺模型和組合。
設(shè)計師需要每天解決問題，找到合適的解決方案需要深入研究和精心策劃的測試。我們可能還沒有答案，但我們確實知道我們有時可以采取的某些捷徑。
“啟發(fā)式”是一種簡單而有效的規(guī)則，可以幫助我們形成判斷并做出決策。我們可以將它們視為UI最佳實踐的一般指導(dǎo)原則。
注意：這些規(guī)則有其時間和地點，并不能替代可用性測試。
我們今天要看看八大黃金法則，對設(shè)計會產(chǎn)生哪些影響。
1. 爭取一致性
設(shè)計“一致的接口”意味著對類似的情況使用相同的設(shè)計模式和相同的動作序列。這包括但不限于在用戶使用中在提示屏幕，命令和菜單中正確使用顏色，排版和術(shù)語。
請記?。阂恢碌慕缑鎸⑹鼓愕挠脩舾菀淄瓿伤麄兊娜蝿?wù)和目標(biāo)。
2. 啟用常用快捷方式
說到使用UI規(guī)則作為快捷方式，你的用戶也將受益于快捷方式，特別是如果他們需要經(jīng)常完成相同的任務(wù)。
專家用戶可能會發(fā)現(xiàn)以下功能有用：
· 縮略語
· 功能鍵
· 隱藏的命令
3. 提供信息反饋
你需要讓用戶隨時了解流程每個階段的情況。這種反饋需要有意義，相關(guān)，清晰，并符合上下文。
4. 設(shè)計對話以進一步溝通
動作序列需要有開頭，中間和結(jié)尾。任務(wù)完成后，如果是這種情況，請為他們的用戶提供信息反饋和下一步明確定義的選項。不要讓他們疑惑！
5. 提供簡單的錯誤處理
設(shè)計一個良好的界面，應(yīng)該盡可能避免錯誤。但是當(dāng)錯誤發(fā)生時，你的系統(tǒng)需要讓用戶輕松了解問題并知道如何解決問題。處理錯誤的簡單方法包括顯示清晰的錯誤通知以及描述性提示以解決問題。
6. 允許輕松撤銷動作
在發(fā)生錯誤后找到“撤消”選項可以立即解決。如果他們知道有一種簡單的方法可以解決任何事故，那么你的用戶就會感到不那么焦慮，更有可能探索各種選擇。
此規(guī)則可應(yīng)用于任何操作，操作組或數(shù)據(jù)輸入。它可以從簡單的按鈕到整個操作歷史。
7. 支持內(nèi)部控制點
定義：
“在人格心理學(xué)中，控制源是人們相信他們能夠控制事件結(jié)果的程度” - Julian Rotter
為用戶提供控制和自由非常重要，這樣他們才能感覺到他們負責(zé)系統(tǒng)，而不是相反。用戶應(yīng)該是行動的發(fā)起者而不是響應(yīng)者。
8. 減少短期內(nèi)存過載
我們的注意力有限，我們可以做的任何事情都可以讓用戶的工作更輕松，更好。我們更容易識別信息而不是回憶信息。如果我們保持接口簡單和一致，遵守模式，標(biāo)準和慣例，我們已經(jīng)為更好的識別和易用性做出了貢獻。
我們可以添加一些功能，以幫助我們的用戶根據(jù)他們的目標(biāo)。例如，在電子商務(wù)環(huán)境中，最近查看或購買的項目列表。
結(jié)論
雖然你應(yīng)該始終采用基于啟發(fā)式的決策，但遵循一系列規(guī)則和指南將引導(dǎo)你朝著正確的方向前進，并允許你在設(shè)計過程的早期發(fā)現(xiàn)主要的可用性問題。這八個原則適用于大多數(shù)用戶界面。
你也可以使用它們作為靈感來創(chuàng)建自己的啟發(fā)式方法，或者結(jié)合現(xiàn)有的示例來解決你自己的設(shè)計問題。
每當(dāng)我找到一個看起來不錯、干凈且優(yōu)雅的界面時，我都會保存它！
現(xiàn)在我收集了一千多張UI界面，經(jīng)過反復(fù)的學(xué)習(xí)、使用或簡單查看后，我認識到了一些共同點： 讓我心動的顏色。
因此，在這里，我想總結(jié)一下如何在UI界面設(shè)計中創(chuàng)建完美顏色。
顏色就像語言一樣強大。當(dāng)你遇到一些設(shè)計、體驗及交互很棒的app時，回想一下，視覺外觀在很大程度上取決于顏色，顏色總是給用戶第一印象。
那么，什么樣的顏色用在實際產(chǎn)品上可以做什么呢？
顏色可以體現(xiàn)出品牌或產(chǎn)品的基本色調(diào)、心情、內(nèi)涵、概念、品質(zhì)、價值等作用。有研究表明，用戶僅花50秒就可以在線對你的產(chǎn)品有一個心理評價，并且用戶在最初的產(chǎn)品心理評價中有62％至90％的判斷是基于產(chǎn)品的配色方案。 （請看下圖）
正確的顏色選擇可以更好的支持信息可讀性。此外，它可以極大地提高可用性，例如增強號召性用語、增強導(dǎo)航、刺激直觀的交互，滿足審美需求和視覺解決方案。
總之，要創(chuàng)建一種清晰，和諧的顏色樣式來滿足用戶的需求。 （請看下圖，騰訊新聞利用顏色來做用戶引導(dǎo)及導(dǎo)航引導(dǎo)，利用顏色層級更利于用戶閱讀。）
產(chǎn)品的外觀是影響消費者購買決策的關(guān)鍵因素。研究表明，所有產(chǎn)品評估中的90％與顏色有關(guān)。
如今，許多公司將“顏色”（尤其是UI設(shè)計中的顏色）作為其營銷策略之一。 (請看下圖)
我們不能說一種顏色看起來“不好”，只有錯誤地使用顏色，顏色才可能看起來很糟糕。
假如麥當(dāng)勞使用灰色和黑色而不是黃色和紅色，你是否還有胃口？用戶看到之后根本就沒有任何胃口了，更不可能達成交易。 （請看下圖）
女人在聚會上穿黑色連衣裙和黑色的唇膏，你是否覺得很奇怪？就不符合用戶對事物的認知顏色了，給用戶困惑。（請看下圖）
可口可樂不再使用紅色的標(biāo)志改為藍色，你還會喝它嗎？喝進去你的心理上會覺得你是在喝漱口水。（請看下圖）
不同的顏色傳遞出了不同的含義和感覺
方法①：在什么時間用戶在使用你的產(chǎn)品，來確定你的產(chǎn)品顏色，比如晚上、早上、還是凌晨。再比如沉浸式體驗應(yīng)用晚上都會有深色夜間模式。
方法②：根據(jù)你的用戶群體選擇正確的顏色，你的產(chǎn)品是面向那一類用戶，男人、女人、青年、幼兒、老年等這些人的對于顏色的認知是不一樣的，比如幼兒對于顏色的認知是五顏六色，顏色亮度飽和度都偏高的，就像路邊的喜洋洋1元搖擺車孩子都很喜歡。
方法③：根據(jù)產(chǎn)品的特性選擇正確的顏色目標(biāo)。產(chǎn)品的特性及固有特性，比如黃金就是金色的，蔬菜黃瓜就是綠色，天空就是藍色我們不妨用產(chǎn)品的固有色來做設(shè)計及產(chǎn)品特性來做設(shè)計。
方法④：考慮顏色的心理屬性，色彩對人類情緒和行為的影響在心理學(xué)分支稱為色彩心理學(xué)。它指出我們的大腦對顏色有反應(yīng)，而我們通常不會注意到它。當(dāng)人眼感知到一種顏色時，我們的大腦就會向內(nèi)分泌系統(tǒng)發(fā)出信號，釋放出負責(zé)情緒的激素，每種顏色在我們的思維中都有自己的影響力。
紅色：它象征著好和壞的感覺，包括愛，自信，熱情和憤怒。
橙色：充滿活力的溫暖色彩帶給你興奮的感覺。
黃色：這是幸福，陽光，喜悅和溫暖的顏色。
綠色：大自然的色彩帶來平靜和生機的感覺。
藍色：它通常代表一些公司形象。與安全、可靠、科技有關(guān)。
紫色：是神秘和魔術(shù)的顏色。
黑色：它伴隨著悲劇和死亡，象征著一個謎。同時，它可以是傳統(tǒng)的也可以是現(xiàn)代的。
白色：顏色意味著純凈和純真，以及完整性和清晰度。
為什么要談?wù)撍{色？
只需看看你最常用的Apps或網(wǎng)站、Facebook、Twitter、Microsoft，騰訊，菜鳥、新能源、智能設(shè)備、丁丁、旺旺、飛書、百度等，你會看到，它們都是基于藍色。
藍色是男人、女人、成人、孩子都喜歡的第一色，藍色就像無處不在，在自然界中我們對藍色的認知度最高，藍色絕對是可以培養(yǎng)用戶信任和接受的安全顏色，藍色是UI設(shè)計中顏色的典型示例，如果沒有更好的選擇，我們可以使用藍色。
我們在許多美觀的界面中注意到的一件事是，它們通常在特定主色顏色上具有更深和更淺的變化。 （請看下圖例子）
咱們來分析上面界面3個顏色色相、飽和度、明度的變化。就是我們ps軟件里面取色器的HSB，h是色相，s是飽和度，b是明度。
通過上面的顏色分析，我們可以看出主色色相數(shù)值不發(fā)生變化還是藍色，我們可以把主色降低明度和增加飽和度，可以使顏色變化更深。通過增加明度和降低飽和度，可以產(chǎn)生更明亮的色彩變化。
環(huán)顧我們四周環(huán)境空間的變化。每次掃視房間時，無疑會看到顏色飽和度和明度的變化，以及陰影和亮面的變化，作為設(shè)計師我們可以從現(xiàn)實中取色。 （舉個例子：看下圖）
總結(jié)上面的例子，我們以后在做設(shè)計的時候遇到這種純色界面就可以利用主色的深淺變化，設(shè)計我們的界面，這種顏色搭配更和諧更美觀更自然。
在進行UI界面設(shè)計時，你不能完全擺脫顏色組合。在UI設(shè)計中結(jié)合顏色很容易，但是如何避免混亂和過載呢？如何擺脫樸素并保持精致？
牢記以下兩個原則：
第一個原則：
60％+ 30％+ 10％的原則是達到色彩平衡的最佳比例。通過培養(yǎng)一個平衡的色彩搭配，整潔，和諧的界面為用戶帶來愉悅感，此比例可以完美地發(fā)揮作用。而且，它可以減輕用戶的視線，使其舒適地從一個點移動到另一點。 （舉個例子看下圖）
第二個原則：
這些規(guī)則與“黃金（6：3：1）規(guī)則”相匹配。這也是避免混亂并在配色方案中保持平衡的好方法。
1）基于“主色”，你可以在色環(huán)上創(chuàng)建許多變化的顏色。
有一個竅門：確定主色后，在主色的基礎(chǔ)上添加白色即可得到亮色，添加黑色則暗色。在這里，我建議新手使用單色系方案，很容易把控。 （舉個例子看下圖）
主色系的搭配更容易把控，也更簡潔，視覺信息容易聚焦
2）在令人難忘的時刻展示品牌主色，以增強你品牌的獨特風(fēng)格。在添加顏色以增強品牌在界面上的效果時，請考慮添加主色的位置、占比、數(shù)量，增強你的品牌效應(yīng)，讓用戶對你的品牌顏色認知度更高。（舉個例子看下圖）
支付寶的藍色大家應(yīng)該都知道，這是支付寶首頁主色的占比，只要有人給你提起支付寶你肯定會想到藍色，這就是在界面設(shè)計里面主色的重要性
餓了么主色數(shù)量、占比、位置，增強了用戶對品牌色認知
如果一個元素比另一個元素更重要，則它應(yīng)該具有更高的視覺重量。這使用戶易于快速瀏覽頁面并區(qū)分重要和次要信息。 （請看下圖）
汽車之家運用橘色色塊和藍色色塊來做到信息視覺重量，區(qū)分視覺層級，引導(dǎo)用戶重要信息
氧氣app的頂部導(dǎo)航部分，新婚蜜月&內(nèi)衣知識做了顏色的特殊處理，就是為了在導(dǎo)航部分視覺加重，引導(dǎo)用戶點擊探索
雪球理財app，一鍵添加按鈕更加醒目，大膽的使用主色吸引用戶的眼睛，引導(dǎo)用戶添加自己喜歡的股票
在UI設(shè)計中巧妙地使用顏色可以創(chuàng)建漂亮的UI界面，但是創(chuàng)建漂亮的UI界面絕不是最終目標(biāo)，實現(xiàn)出色的用戶體驗?zāi)繕?biāo)，使用戶的生活更快樂才是關(guān)鍵。
因此，從UI的顏色選擇和用法的角度來看，設(shè)計人員應(yīng)始終記住該界面應(yīng)高度可用且清晰，并以用戶為中心來做我們的設(shè)計！
1. 前言
隨著科學(xué)技術(shù)的快速發(fā)展和人們生活水平的急速提升，手持移動設(shè)備——智能手機、平板電腦等，已經(jīng)在人們的日常生活中普及起來，特別是智能手機，已經(jīng)成為幾乎人手必備的產(chǎn)品。人們早已不局限于守著電腦來滿足某項需求，通過智能手機中的APP移動應(yīng)用，人們就可以獲取或者發(fā)布信息，實現(xiàn)聽音樂、購物、導(dǎo)航等功能需求。很明顯，移動應(yīng)用的內(nèi)容和互動方式越來越豐富和復(fù)雜，它的普及和流行也無疑改變了人們的生活習(xí)慣，為人們提供了新的生活方式，同時也促進了APP移動應(yīng)用程序的流行和發(fā)展。然而，移動應(yīng)用在實際使用過程中卻顯露出許多不足，究其原因在于，早期的移動應(yīng)用中通常直接將較為成熟的桌面應(yīng)用直接套用與移動終端上。不可否認，這樣做可以讓桌面應(yīng)用的成熟用戶較為輕松、快速的使用移動應(yīng)用。但缺陷在于，沒有考慮到移動應(yīng)用特有的交互方式和交互環(huán)境，導(dǎo)致可用性不高。很顯然，智能手機上的移動應(yīng)用和PC端的應(yīng)用產(chǎn)品相比，有其特有的使用特性。只有充分了解移動端應(yīng)用的使用特性，才能為移動應(yīng)用的界面設(shè)計工作打好基礎(chǔ)。
2. 移動應(yīng)用的使用特性
2.1 使用場景
與PC端的使用不同，智能手機的使用場景較為多變，幾乎不受限制。使用場所可以是室內(nèi)或戶外也可以是私人空間或公共場所，例如家、辦公大樓、餐廳或地鐵等。還可以以站著、坐著或躺著等姿態(tài)使用。正因為這樣復(fù)雜、多變的使用場景，一些問題則不得不在我們的考慮范圍之內(nèi)。例如用戶在公共場所使用移動應(yīng)用時，私密性的保證；用戶的使用場景發(fā)生變化時，使用的便利性和使用過程中斷的可能性等。
2.2 硬件條件
近年來，為了滿足用戶的使用需求和提升體驗感，智能手機的屏幕逐漸變大，“大屏幕”已經(jīng)成為現(xiàn)代智能手機的一大賣點。雖然智能手機屏幕有越來越大的發(fā)展趨勢，但與電腦屏幕相比，仍是相差甚遠。同時，在復(fù)雜多變的使用場景中用戶往往使用單手操作，與電腦的操作相比，控制精度較低，出現(xiàn)誤操作的可能性更大。所以如何在有限的尺寸內(nèi)，將內(nèi)容完整且準確的呈現(xiàn)給用戶，尋求功能和需求之間的平衡就成了需要反復(fù)思考的問題。
2.3 網(wǎng)絡(luò)環(huán)境
用戶使用智能手機移動應(yīng)用的網(wǎng)絡(luò)環(huán)境目前分為2G、3G、4G、WIFI和無網(wǎng)絡(luò)五種。但用戶在使用移動應(yīng)用時的網(wǎng)絡(luò)狀況和較為穩(wěn)定的PC端網(wǎng)絡(luò)條件不同，移動端的網(wǎng)絡(luò)環(huán)境并不是單一不變的，時常會因為環(huán)境的變化而變化。例如，某用戶從家中出發(fā)，乘坐地鐵要到某大型商場。其本身使用的手機為3G網(wǎng)絡(luò)，但因為網(wǎng)絡(luò)在地鐵環(huán)境中信號不穩(wěn)定，偶爾手機會變成無網(wǎng)絡(luò)的狀態(tài)。當(dāng)用戶到達大型商場，用戶連接成功商場所提供的WIFI網(wǎng)絡(luò)，那么用戶使用移動應(yīng)用則處于WIFI網(wǎng)絡(luò)條件下。所以對移動應(yīng)用進行設(shè)計時應(yīng)考慮到各種網(wǎng)絡(luò)環(huán)境的變化。
2.4 使用心態(tài)
移動應(yīng)用作為一種用戶貼身使用的工具，用戶使用移動應(yīng)用的初衷更多的是有定向和較為明確的需求點。用戶希望打開應(yīng)用、發(fā)布命令后，移動應(yīng)用能立刻開始運作，完成任務(wù)。當(dāng)操作中斷或不斷失敗，由于智能手機移動應(yīng)用的使用特性，用戶很難有別的解決出口，大部分情況下，用戶只能是除了等待還是等待。這樣用戶就極易失去耐性，最終放棄操作。很明顯，快速、有效的體驗過程才是用戶需要的。特別是移動應(yīng)用特殊多變的使用場景和網(wǎng)絡(luò)環(huán)境，其操作的連貫性與WEB產(chǎn)品相比，顯得尤為重要。
2.5 使用界面
在PC端上操作界面時，可以同時打開多層界面，界面與界面之間的切換轉(zhuǎn)變顯得較為簡單方便，且PC端的顯示信息較為豐富、充分。而在移動終端上對應(yīng)用界面的操控就顯然更吃力一些了。在有限的屏幕下，信息的展示更為局限，且實施多界面操作時較為不便，例如想實現(xiàn)從某一界面跳回到之前的某一界面，可能要經(jīng)歷多重步驟。
3. 移動應(yīng)用界面設(shè)計分析
上述智能手機移動應(yīng)用的使用特性正是影響和指導(dǎo)智能手機移動應(yīng)用界面設(shè)計的重要因素，由此對智能手機移動應(yīng)用界面的設(shè)計分析可得出一些設(shè)計要點，主要包括視覺層面和交互層面的設(shè)計要素。
3.1 界面的視覺設(shè)計
（1）充分考慮移動端的多分辨率
現(xiàn)有智能手機市場有多種系統(tǒng)存在，例如IOS系統(tǒng)、Android系統(tǒng)等，且不同系統(tǒng)的界面風(fēng)格和界面交互習(xí)慣不同。同時，不同款式的智能手機持有不同的分辨率，而一款移動應(yīng)用的設(shè)計是需要在其在不同系統(tǒng)或不同分辨率下都能適用。這就要求在進行移動應(yīng)用的界面設(shè)計時，要考慮到設(shè)計畫面中要表達的信息重點是否在任意分辨率下都能完整清晰的展示出來，設(shè)計的界面視覺風(fēng)格是否與相應(yīng)系統(tǒng)風(fēng)格相符合。
（2）對控件的合理安排
由于智能手機的界面展示空間較小和人們對屏幕界面進行操控的精度有限，在常規(guī)控件的設(shè)計上，應(yīng)考慮界面大小和用戶的可觸碰范圍以及該控件的重要程度等因素來對控件進行設(shè)計。要做到設(shè)計出來的控件或圖形易懂且易控。
3.2界面的交互設(shè)計
（1）合理精密的界面邏輯關(guān)系
智能手機的應(yīng)用界面在使用時若出現(xiàn)邏輯上的不清晰或錯誤，從而需要退回至之前的某一頁面是十分困難的。其次，由于展示空間的限制，在有限界面上來回尋找某項功能會讓用戶處于十分焦慮的狀態(tài)，從而降低產(chǎn)品的體驗感。同時，隨著界面層級的加深，用戶的流失量也會逐漸增加。所以，應(yīng)用界面的布局和界面的層級有較為合理的邏輯關(guān)系，且將用戶使用過程中出現(xiàn)中斷、方便用戶隨時退出、讓用戶對于當(dāng)下所處的位置有較清晰的認識等方面考慮其中，能使用戶在使用應(yīng)用時更為順暢，有較高滿意度。
（2）提升使用連貫性
當(dāng)看見菊花轉(zhuǎn)或進度條的界面時，我們就知道，界面中的內(nèi)容正在被加載，我們需要等待。很顯然在這樣的加載頁面前，用戶將下意識將注意力投放到觀察進度條的推進速度上。在復(fù)雜的使用環(huán)境下，網(wǎng)速變慢和信號變差是經(jīng)常會出現(xiàn)的情況。當(dāng)單調(diào)、枯燥的加載界面持續(xù)時間稍長，會給用戶一種壓迫感。因為用戶沒有辦法進行別的操作，只能傻傻盯著進度條等待，最后除了取消操作，別無選擇。在用戶的潛意識中會形成這款應(yīng)用本身就是很慢，使用起來感覺不好的印象。而針對這樣的現(xiàn)象，近來很多應(yīng)用開始有了新的嘗試。從用戶的心理層面出發(fā)，在一些細節(jié)上做出改善性的設(shè)計，提升移動應(yīng)用的使用連貫性。例如，預(yù)加載、框架式加載、利用緩存、使用有趣的動畫效果等達到提升應(yīng)用使用連貫性的目的。
4. 總結(jié)
可見，用戶在智能手機移動應(yīng)用上的使用較PC端產(chǎn)品相比，在諸多方面都有所不同。智能手機移動應(yīng)用的使用環(huán)境更為復(fù)雜，用戶的注意力更難集中，影響操作感的因素更多多，分析、了解智能手機端上界面操作的特性對于設(shè)計出有良好體驗感的應(yīng)用產(chǎn)品尤為重要。拋開技術(shù)因素，無論在交互還是視覺方面做出細節(jié)上設(shè)計的優(yōu)化，來提升產(chǎn)品使用的連貫性和體驗感，讓用戶在心理層面上覺得移動產(chǎn)品使用起來很連貫、速度很快，這無疑是一種聰明的做法。從用戶選擇產(chǎn)品、發(fā)出操作命令、完成執(zhí)行過程最后到接受操作結(jié)果，整個操作過程中的每個環(huán)節(jié)都值得設(shè)計師努力優(yōu)化，減少甚至避免中斷的間隙從而提升體驗感。
藍藍設(shè)計的小編 http://www.yvirxh.cn