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