ui外觀設(shè)計教程

　　當(dāng)設(shè)計師在 UI 系統(tǒng)中嘗試傳遞品牌信息和組織信息架構(gòu)時，他們通常會采用熟悉的顏色、排版和圖像系統(tǒng)。無論是按鈕，還是卡片、文本字段、菜單和懸浮操作按鈕，每個界面元素都避不開形狀的存在。那么該如何利用UI外觀設(shè)計形狀來強化品牌形象，提升品牌關(guān)注度，還能支持各種互動操作呢?
 

　　在 Material 中使用自定義形狀，形狀可以強化您的品牌，在 UI 設(shè)計中如果涉及到形狀，請通盤考慮這個形狀在整個應(yīng)用中的品牌表達能力。形象較為有機或友好的品牌可能會選擇圓潤的形狀，而具有幾何風(fēng)格或希望進行精確表達的品牌則可能會選擇更有棱角的形狀。例如，Shrine 會在其 UI 中使用尖銳的切割線來暗合其棱角分明的鉆石型 Logo。
 

　　強化層次結(jié)構(gòu)，您可以明確地使用形狀的強烈差異來引導(dǎo)用戶的注意力。例如，如果UI設(shè)計主要采用圓形形狀，這時采用銳利的菱形按鈕就可以引起用戶對該組件的關(guān)注。事實上，在 Material Design 中，位于矩形卡片上方的圓形 FAB 這種組合本身就是一個 "引起用戶注意" 的例子。當(dāng)然，也可以進行反向思維——如果您在視覺層次結(jié)構(gòu)中使用更加和諧的形狀組合，就可以在不同的元素之間形成關(guān)系，例如通過相似但圓角程度不同的矩形的疊加來闡述相關(guān)性——Backdrop 組件的設(shè)計正是使用了這一方法。Backdrop 組件，矩形的實色背景和前景中的圓角矩形暗示了前后兩層結(jié)構(gòu)的相關(guān)性。
 

　　暗示互動操作，還有一種更為策略性地使用形狀的方法——用于暗示交互操作。使用不同的圓角半徑以說明控件的狀態(tài)，這種技巧可以配合其他元素的動畫來使用，比如使用圖標(biāo)、更改透明度或更改尺寸本身——例如，在沒顯示完整的控件頂部使用兩個圓角，會意味著這個控件可以繼續(xù)向上拉起，而方角則說明所有內(nèi)容均已在當(dāng)前屏幕顯示完畢。但要注意，不要僅僅依靠形狀來傳達交互涵義，因為這個視覺語言體系還不夠標(biāo)準(zhǔn)化，需要配合其他視覺元素的動畫來進行設(shè)計。
 

　　創(chuàng)造出獨屬于您的形狀，考慮您的品牌屬性。哪些核心形狀體現(xiàn)了您品牌的個性，以此為起點，開發(fā)一系列互補的形狀。您的核心形狀是偏向圓潤的嗎，請嘗試將圓角卡片與引人注目的膠囊形狀的擴展 FAB 配對。在整個應(yīng)用中始終如一地使用這些形狀，這樣您對形狀的選擇對您的用戶才有意義。如果您對形狀的使用不一致，則可能讓用戶感到困惑。同時也不要濫用UI設(shè)計形狀，過度使用會削弱您的品牌表達。此外，請確保純粹的裝飾性形狀看起來不具有功能性或互動性，并且用于傳達意義的形狀是明確而沒有歧義的。
 

　　在設(shè)計中的未來，與現(xiàn)有的設(shè)計系統(tǒng)不同，形狀在UI設(shè)計中的應(yīng)用沒有明確定義的規(guī)則，這也是本文中反復(fù)強調(diào) "不要單獨利用形狀傳達交互意圖" 的原因。我們希望大家都能在實踐中活用形狀，并與更成熟的 UI 設(shè)計模式結(jié)合使用，從而找到與用戶進行溝通的最有效方法。
 

　　現(xiàn)今，軟件應(yīng)用大都選用圖表設(shè)計來可視化各類軟件數(shù)據(jù)，成功簡化界面設(shè)計的同時，也大幅提升其用戶體驗。試想，如若市場上的各種監(jiān)控、金融、保健以及旅游類軟件應(yīng)用，不再使用此類直觀吸睛的圖表設(shè)計，整個軟件應(yīng)用的用戶體驗該很糟糕，更別說，此類圖表設(shè)計, 為設(shè)計師們提供了更多隨心創(chuàng)造和自我表達的空間， 其聯(lián)動動效和交互設(shè)計，也為UI設(shè)計師們提供了更多界面提升和優(yōu)化的可能性，設(shè)計師們也確實鐘愛于在其實際的設(shè)計中，添加各類圖表設(shè)計。
 

　　所以，圖表的設(shè)計也不應(yīng)該僅僅停留于視覺展示，其功能性和實用性也需要考慮在內(nèi)。盡管，各類圖表大多是度量衡、條件、規(guī)則以及相關(guān)運算結(jié)果的集合和呈現(xiàn)。但是，移動端和Web端軟件應(yīng)用的圖表設(shè)計要求卻大不相同。導(dǎo)致這些不同的核心因素就是常見的屏幕尺寸、設(shè)備數(shù)據(jù)處理能力以及相關(guān)技術(shù)性限制等等。
 

　　在部分設(shè)計情境里，相較于復(fù)雜多變的圖表呈現(xiàn)，直接數(shù)字展示，更能有效的減少界面干擾，吸引和留住用戶。所以，具體的案例設(shè)計過程中，UI設(shè)計師需要注意考慮實際設(shè)計情境，是否真正需要圖表進行數(shù)據(jù)展示，以有效避免華而不實的情況出現(xiàn)。
 

　　圖表設(shè)計中，不同數(shù)據(jù)的色彩搭配，也需要設(shè)計師謹慎選擇。例如，紅色并不適合搭配增長勢頭良好的數(shù)據(jù)。而為更加直觀展示數(shù)據(jù)增長進度和梯度變化，搭配漸變色會更加適合。
 

　　每個圖表設(shè)計的目的都是通過更加直觀清晰的視覺形式向用戶展示各類數(shù)據(jù)。為確保這一目的順利實現(xiàn)，設(shè)計交付時，設(shè)計師需要向開發(fā)人員提供對應(yīng)圖表的信息、實現(xiàn)條件以及設(shè)計限制等細節(jié)，例如各類數(shù)據(jù)對應(yīng)的名稱、時間區(qū)間、圖表數(shù)據(jù)計算公式等，從而保證圖表設(shè)計得到完美實現(xiàn)和還原。
 

　　一般來說，UI設(shè)計師可事先為圖表添加一個空白狀態(tài)的設(shè)計。而它可以是一個沒有任何數(shù)據(jù)的空白圖表設(shè)計，也可以是帶有特殊占位符的圖表設(shè)計?？傊?，設(shè)計師可以根據(jù)需要進行選擇。圖表數(shù)據(jù)也可動態(tài)展示。比如，柱形圖，一次展示一條。餅形圖，一次展示一部分，以增加界面趣味性和靈動性。用戶可自由選擇需要顯示或突出展示的圖表信息。
 

　　從產(chǎn)品角度考慮圖表設(shè)計是否符合產(chǎn)品特色、風(fēng)格以及品牌形象，從用戶角度考慮用戶是否能夠輕松獲取和理解圖表呈現(xiàn)的相關(guān)數(shù)據(jù)，從開發(fā)角度考慮圖表設(shè)計是否能夠完美的實現(xiàn)和還原。從設(shè)計中刪除不必要的元素或內(nèi)容，不僅能夠簡化設(shè)計本身，還能夠有效提升其用戶體驗。
 

　　UI設(shè)計師面向的是產(chǎn)品使用者(用戶)，由于用戶的留存會決定產(chǎn)品的生死，所以他們要聽的是用戶的話。即使上層領(lǐng)導(dǎo)與你的審美有很大差別，但也決不敢拿產(chǎn)品的命運打賭。用戶留存數(shù)據(jù)、內(nèi)測用戶的反饋等是你做產(chǎn)品迭代的原因所在。甚至有時候，漂亮、充滿創(chuàng)意的界面產(chǎn)生的效果反而比較差。在開展設(shè)計產(chǎn)品UI之前，我們應(yīng)當(dāng)根據(jù)功能的優(yōu)先級或者相關(guān)調(diào)研數(shù)據(jù)，結(jié)合常規(guī)設(shè)計原則來建立應(yīng)用的界面交互框架，即交互線框圖。
 

　　UI設(shè)計比美工更加符合互聯(lián)網(wǎng)環(huán)境下的設(shè)計需求，既能夠勝任最基礎(chǔ)的平面設(shè)計，也可以勝任交互設(shè)計，而且還可以做用戶測試/研究，更加符合現(xiàn)代化公司的用人需求。并且涉足范圍廣闊、企業(yè)需求量多，這也是UI設(shè)計相比較美工的一大優(yōu)勢。
 

　　其次UI設(shè)計師還要考慮到以下幾點：
 

　　排版設(shè)計：在一個項目中不應(yīng)該使用2種以上的字體，以及它們的多種風(fēng)格樣式。
 

　　文字間距：使用完全由大寫字母組成的文字時，不要忘記設(shè)置字母間距。這樣可以防止字符之間的粘連，也會讓文字有更好的可讀性。
 

　　文字粗細：在使用細體和極細體字體的時候要格外注意。中細體字可以用，但要看具體的字體細到啥程度。如果你做的產(chǎn)品最終會被用戶在屏幕上看到，那么最好不要使用細體和極細字體，因為它們非常難閱讀，在某些屏幕上甚至?xí)斐砂胂袼啬：男Ч?br />  

　　標(biāo)題和正文字體大?。簶?biāo)題的級別有6個(h1-h6)。首先你應(yīng)該確保你的項目中的標(biāo)題級別不超過四個，并控制好它們的邏輯和一致性。一個網(wǎng)站或著陸頁的最大標(biāo)題(可能出現(xiàn)在主頁面的第一塊)可以隨心所欲：目前的趨勢是鼓勵有表現(xiàn)力的排版。但是，確保你的標(biāo)題的其余部分不要太大，因為太大的文字和太小的文字一樣難以閱讀。
 

　　瀏覽器的默認設(shè)置(以Chrome瀏覽器為參照)，會以16px大小顯示每個文字。這個大小閱讀起來是相當(dāng)舒服的，要避免近似的尺寸，不要在同一段中使用16px和17px，這樣會給產(chǎn)品的外觀帶來混亂和視覺上的不協(xié)調(diào)，可能會讓人誤以為是錯誤。
 

　　行高
 

　　很少可以直接利用默認行高。通常情況下，必須比默認值稍大一些來提高可讀性。這對于大的文本塊尤其如此：博客、文章、網(wǎng)站或移動應(yīng)用的信息塊。同樣的方法也適用于標(biāo)題：確保字母上下不會互相碰觸
 

　　內(nèi)容的層次
 

　　應(yīng)使用加粗來突出顯示文本的重要部分，包括標(biāo)題、鏈接和按鈕，有時也包括文本中被強調(diào)的部分。但如果所有文本內(nèi)容都被加粗，就會變得不清楚該看哪里，分不清哪些部分更重要。內(nèi)容需要有一定的層次性。
 

　　文字對比度
 

　　在UI設(shè)計中要特別注意文字的顏色。它應(yīng)該有足夠的對比度，這樣文字在任何類型的顯示器上都可以易讀。這對于經(jīng)常使用淺灰色的輸入字段中的占位符尤其重要。圖片、圖標(biāo)和背景決定了產(chǎn)品的基調(diào)。圖片應(yīng)該準(zhǔn)確地展示公司、APP或網(wǎng)站所提供的東西。
 

　　投影
 

　　物體的投影絕對不應(yīng)該是黑色的。投影的顏色永遠都需要結(jié)合環(huán)境的顏色。物體通常有幾個投影：一個是小而亮的，直接在它的正下方(如果是站著或躺著的東西)，第二個是比較模糊、透明的投影。避免項目中臟的、不自然的投影。
 

　　圖標(biāo)和配圖

 

　　凡是可以矢量的東西都應(yīng)該矢量。所有的圖標(biāo)，箭頭和logo都應(yīng)該以SVG格式(iOS開發(fā)的PDF格式)交給開發(fā)者。PNG圖標(biāo)邊緣模糊，看起來很糟糕，尤其是在視網(wǎng)膜顯示器上。
 

　　避免奇怪的布局
 

　　避免在沒有充分理由的情況下，在屏幕/頁面/卡片上實驗性地定位元素。否則用戶可能會感到困惑而離開你的網(wǎng)站或應(yīng)用。請記住，UI設(shè)計師和藝術(shù)家是不同的職業(yè)。在設(shè)計中，我們是為人創(chuàng)造產(chǎn)品，這意味著你的個人創(chuàng)意沖動只能應(yīng)用在不會干擾用戶體驗的地方。
 

　　界面尺寸
 

　　在開始UI設(shè)計一個手機APP之前，一定要先向開發(fā)者詢問一下屏幕尺寸。通常情況下，iOS的屏幕尺寸為320px，Android的屏幕尺寸為360px。雖然在移動APP上或多或少都會有明確的預(yù)期，但網(wǎng)站設(shè)計可能會有一定的挑戰(zhàn)性，因為它將在多種設(shè)備上展示。下面這種情況在我自己做前端開發(fā)的經(jīng)驗中非常常見：提供的布局是為巨大的顯示器做的。塊之間有400-600像素的邊距，巨大的字體大小，奇怪的網(wǎng)格。
 

　　內(nèi)容填充
 

　　重復(fù)的示例文本放在設(shè)計中看起來會很廉價，不專業(yè)，所以應(yīng)當(dāng)避免使用。它只會讓人覺得你懶得得去做一些像樣的內(nèi)容。此外，現(xiàn)在不再需要自己創(chuàng)建，有一堆Sketch和Figma的插件可以自動填充內(nèi)容。UI設(shè)計時內(nèi)容盡量不要重復(fù)，哪怕只是為了演示的目的。放上不同的圖片、標(biāo)題和不同長度的預(yù)覽文本，效果看起來會更好。