ui外觀設(shè)計(jì)教程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　行高
 

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

　　內(nèi)容的層次
 

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

　　文字對(duì)比度
 

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

　　投影
 

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

　　圖標(biāo)和配圖

 

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

　　避免奇怪的布局
 

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

　　界面尺寸
 

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

　　內(nèi)容填充
 

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