ui外觀設計教程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　排版設計：在一個項目中不應該使用2種以上的字體，以及它們的多種風格樣式。
 

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

　　文字粗細：在使用細體和極細體字體的時候要格外注意。中細體字可以用，但要看具體的字體細到啥程度。如果你做的產(chǎn)品最終會被用戶在屏幕上看到，那么最好不要使用細體和極細字體，因為它們非常難閱讀，在某些屏幕上甚至會造成半像素模糊的效果。
 

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

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

　　行高
 

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

　　內容的層次
 

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

　　文字對比度
 

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

　　投影
 

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

　　圖標和配圖

 

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

　　避免奇怪的布局
 

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

　　界面尺寸
 

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

　　內容填充
 

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