1-線上圖片的四大類別
2-線上圖片常見的五種處理方式
3-線上圖片使用的五大要點
4-總結(jié)
在頁面中單獨存在的圖片，以圖片為主要元素傳達給用戶有效信息。
例如好好住APP，它在“看圖板塊”中就使用了信息圖片，重點表現(xiàn)圖片的信息，周圍無任何干擾元素或輔助信息元素。
背景圖片可以用于單個元素，也可以用于整體畫面，主要作用于營造氛圍。
單個元素：例如嘀嗒出行的“優(yōu)惠券板塊”，把插畫圖片應用在單個卡片中。
整體畫面：例如網(wǎng)易云音樂的“聽歌頁面”，它就把歌曲封面的圖片作為頁面整體的背景。（圖片進行了模糊處理）
作為導航入口，引導用戶點擊進入詳情頁面，在各應用都普遍使用。
Banner圖作為最常見的圖片使用形式之一，大家再熟悉不過了，它可以出現(xiàn)在APP中的各個界面中，如：首頁、個人中心、運營活動頁等等，造作新家APP的首頁就用到了banner圖。
作為文字的輔助元素，圖片的含義需要和文字相符合才能更好地輔助傳達文字的意思，反之會讓用戶覺得困惑。
圖片與文字之間加黑色到透明度（10-60%）的遮罩，保證文字內(nèi)容區(qū)域在黑色區(qū)域，目的是為了能讓用戶看清文字。
根據(jù)圖片整體的色調(diào)，在圖片上加與圖片色調(diào)統(tǒng)一的顏色遮照，保證文字的可識別性，不影響圖片的正常顯示。 
圖片與文字之間加透明度的漸變遮罩，讓文字顯得更加清晰，使畫面過度更加協(xié)調(diào)。
在很多場景下我們都會采用到封面圖模糊處理后作為背景圖的方案，為保證信息能夠清晰顯示會在背景上加一個深色半透明蒙層。半透明層可以取黑色、深灰色、背景顏色（深），透明度為（25%-40%），它們呈現(xiàn)出來的效果都各有不同，我們可以根據(jù)不同的場景選擇不同的方案。
圖片圓角的使用也是十分有講究，根據(jù)不同的產(chǎn)品屬性去設定氣質(zhì)相符的圓角設計。
小圓角或直角：視覺印象是硬朗、高冷、具有攻擊性的，多用于時尚、高端、沖突感強烈的設計中；
大圓角：視覺映像是有親和力，柔軟，安全的，多用于母嬰產(chǎn)品、二次元產(chǎn)品、娛樂性強的設計中。
在設計banner圖時我們?nèi)绻皇窃诳蚩蚶镒鲈O計，有時候未免顯得太呆板，我們可以突破畫框讓內(nèi)容溢出，營造更大的氛圍，近而使整個畫面更具有沖擊力。
圖片投影的方式一共分為7大類別，分別為：普通投影、等高線投影、矢量投影、圖層模糊投影、多層投影、移軸模糊投影、手動投影。（投影制作步驟可查看我之前發(fā)布的文章《七種投影詳細解析》）。而在線上運用的最多的就是：普通投影、等高線投影、圖片模糊投影，效果如下：
對于位圖，我們在線上場景中最常使用的文件格式無非是PNG與JPEG（在特殊情況下會用到動畫GIF）。
無損文件格式，我們UI設計師出圖的首選，不會輕易造成細節(jié)像素模糊或輸出文件變色的情況，并且支持alpha通道（透明度）。所以對于高質(zhì)量圖像文件建議輸出為PNG格式，不過正因為像素無損，所以PNG文件大小相對較大，在特定情況下可以選擇8位處理的做法來減小文件大小，在保證盡可能縮小文件大小的同時，也不會降低圖像質(zhì)量。
JPEG格式會損失掉圖片中的一些像素細節(jié)，所以輸出JPEG通常會比輸出PNG的文件大小更小，適用于對于圖片質(zhì)量要求不過高的場景。并且JPEG格式支持對文件質(zhì)量進行二次壓縮，我們可以選擇使用JPEG格式質(zhì)量壓縮的方式，在文件大小和圖像質(zhì)量之間找到平衡。
UI界面中常用的圖片比例是1:1、3:2、4:3、16:9。
1:1是傳統(tǒng)的120膠片畫幅，也叫大畫幅，因為相機結(jié)構(gòu)和其他一些原因?qū)е铝四z片是方形的，此比例更容易將構(gòu)圖規(guī)整的簡單，能突出主體圖片，通常用于頭像、電商圖片等。
3:2這個尺寸源于135膠卷的比例，采用這一比例并不是因為它是黃金比例，而是由相機的像場大小決定的，這個尺寸運用到線上時適用于以內(nèi)容為主的應用。
4:3是隨著攝影的發(fā)展，微單的出現(xiàn)而誕生的，3:2尺寸與4:3尺寸極為相似，在做設計時很容易混淆，不過在同屏顯示中，4:3的圖片內(nèi)容顯示略大于3:2，所以4:3尺寸更適用于以圖片為主或圖片與內(nèi)容比重相同的應用。
16:9是根據(jù)人體工程學的研究，發(fā)現(xiàn)人的兩只眼睛視野范圍是一個長寬比例為16:9的長方形，所以電視、顯示器行業(yè)根據(jù)這個的黃金比例尺寸設計產(chǎn)品。這個尺寸的圖片在線上運用于視頻播放的圖片顯示。
柵格系統(tǒng)以規(guī)則的網(wǎng)絡陣列來指導和規(guī)范版面布局以及信息分布，而UI設計里常用的柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展起來，柵格系統(tǒng)有時候也稱為網(wǎng)格系統(tǒng)。
柵格系統(tǒng)在圖片的排版布局、尺寸設定方面給了設計者直觀的參考，它讓圖片變得有規(guī)律，從而減少了設計決策成本，使整個畫面更加具有條理，讓內(nèi)容的可讀性變高。
移動端常用的柵格系統(tǒng)最小單位為4px（@1x）或3px（@1x），那么我們來看看airbnb是如何用3px（@1x）的柵格系統(tǒng)來確認banner的尺寸大?。╯ketch軟件-顯示-布局，就可以打開柵格系統(tǒng)布局面板）：
如上圖，airbnb的柵格系統(tǒng)布局設置總寬為328px（總寬為中間6列+4個間距寬度），偏置為24px（左側(cè)初始偏置像素），列數(shù)為6（一共分為6列），列寬45px（列數(shù)的寬度），間距寬度為12px（當不能除正數(shù)時，會自動把間距縮小1px，所以會看到有些間距為11px，有些間距為12px）
當設定好柵格系統(tǒng)后，我們就可以很好的得出圖片的寬度：158px（45+11+45+12+45）。再根據(jù)圖片比例的尺寸3:2，我們就可以算出圖片的高度為：106px（158*3x2），所以圖片的像素為：158px X 106px。根據(jù)相同的方法，我們可以用柵格系統(tǒng)+尺寸比例得出更多的尺寸大小。（注：不管是3px或4px柵格，都會出現(xiàn)除不整的情況，如上圖中的11px，這個不用擔心，不影響大局。）
在對banner圖進行輸出時要考慮倍率的大小，每個產(chǎn)品會根據(jù)產(chǎn)品的特性來決策輸出的倍率，有些產(chǎn)品用二倍圖輸出，有些產(chǎn)品用3倍圖輸出，各有利弊。
標準分辨率的顯示器具有1：1的像素密度（即@1x），其中一個像素占位一個點。高分辨率顯示器具有更高的像素密度， 2倍或3倍的比例系數(shù)（即@2x、@3x）。當1倍的位圖放在2倍或3倍的尺寸下時，就會出現(xiàn)圖片損傷現(xiàn)象（失真），那么我們到底該用幾倍圖去制作banner圖呢？
優(yōu)點：導出文件比@3x小，可平衡圖片質(zhì)量和線上文件大小的一個優(yōu)質(zhì)方案。
缺點：雖然@2x可向下適配@1x，但適配@3x放大后圖片會微微模糊，所以我們?nèi)绻聾2x導出圖片，那么banner內(nèi)的文字不能過小或過于密集、粗曠，畫面中也不能出現(xiàn)過多的效果，不然會看出明顯的模糊痕跡（如下圖的頂部文字與按鈕文字放大后就有明顯的模糊痕跡）
優(yōu)點：@3x可向下適配@1x與@2x，能夠很好的保證不同尺寸下的圖片質(zhì)量，對視覺要求高的項目就必須用3倍圖來設計。
缺點：輸出的文件相對較大。
圖片的適配類型非常多，對于不同的布局適配場景我們選擇的適配方案也不同，圖片適配一共分為3大類：智能適配、設計師制圖適配、用戶裁剪適配。
簡單來說智能適配是指通過后臺代碼的約束對上傳的圖片進行智能匹配，匹配內(nèi)容包含圖片大小、圖片尺寸以及圖片的展現(xiàn)方式。
圖片大?。嚎梢韵拗粕蟼鲌D片的最大尺寸。
圖片尺寸：可以限制圖片的長（寬）最小值，也可以限制圖片的精準尺寸。
圖片展現(xiàn)方式：可以設定圖片在容器中的呈現(xiàn)方式，下面是最常見的8個圖片呈現(xiàn)方式。
當你無法保證用戶發(fā)幾張圖片，無法預估圖片的比例時，我們就可以去設定它相應的規(guī)則使之適配。
*1、單張布局：
不管用戶上傳幾張圖片，F(xiàn)eed流中以一張大圖進行展現(xiàn)，使用大圖布局的圖片適配方式一般有兩種，一種是給予圖片一個容器大小，讓其內(nèi)容全部展示；另一種是按照圖片的上傳比例而變化。
*1-1給予容器大小
我們可以給予圖片一個容器尺寸（如：300X300px），無論圖片有多大都不能超過此容器，為了讓圖片內(nèi)容全部展示出來且不變形，我們可以讓圖片保持正比例縮放，使長邊能完全顯示出來（左上或中心區(qū)域）。這一類的適配更偏向于以內(nèi)容為主的產(chǎn)品，下面是常用的兩種適配方案：
*1-2隨圖片比例而變化
如果你想保證圖片最佳的大圖預覽效果，那么就可以采用隨圖片比例而變化的方案，當用戶上傳不同比例的圖片時，圖片展示的高度與寬度會根據(jù)我們提供比例縮放。采用該適配方式能將圖片信息表達完善，圖片占用空間大，適合圖片質(zhì)量高，這一類的適配更偏向于以圖片為主的應用。
要做這類適配時我們首先要設定裁切的比例，裁剪比例一般設置為常用的圖片比例 1:1、4:3、3:2、16:9。我們上傳的圖片可以根據(jù)圖片的比例進行自行匹配。當圖片越接近正方形則選擇1:1，當圖片長寬比例越大則選擇16:9。
用戶上傳的很多圖片并不是標準比例，如果存在多余像素，那么可以采用保持圖片正比縮放，從圖片中心區(qū)域展示，根據(jù)比例一共可以分為7種展現(xiàn)方式：
我們可以看到上圖，根據(jù)不同比例的尺寸展現(xiàn)出來的頁面占比也是不同的，如果產(chǎn)品對頁面承載信息量有較高要求，那么可以去除16:9、3:2、4:3的縱向尺寸。
瀑布流的圖片適配方法需要規(guī)定圖片比例，并且每個比例的容器大小是固定的，呈現(xiàn)方式也是保持圖片正比縮放，從圖片中心區(qū)域展示。
*3、宮格：
宮格式布局簡單來說就是有規(guī)律的方形布局(1:1尺寸)，宮格布局的形式多種多樣可以是九宮格、四宮格、三宮格，下面以較為復雜的九宮格的適配為例，當然最好的參考或者最常見的就是微信朋友圈。
對于特殊頁面的圖片展示，我們?yōu)榱顺尸F(xiàn)最好的視覺效果，需要設計師對圖片進行單獨尺寸的適配設計，并且輸出多個尺寸的圖片進行上傳。
例如在適配開屏頁時就對其進行了單獨的制圖適配，想要讓二倍圖適配三倍圖，最簡單的方法就是把畫面的上下區(qū)域留出更多的空間，中心畫面放大10%，可操作按鈕放置畫面安全區(qū)域：
如果設計師不進行制圖適配，把適配交給程序處理，那么最終呈現(xiàn)的圖片就會顯得非常糟糕。如下圖1的強行適配，使得整個banner比例非常不協(xié)調(diào)，讓人看了后覺得十分廉價；下圖2則稍微好一點，雖然保證了畫面的視覺中心，但是整體畫面看起來過于飽滿，沒有任何呼吸感，并且“點擊參與”按鈕過于靠下，容易與home指示器造成誤操作。
當用戶想要呈現(xiàn)某些重要信息或識別性信息時，就可以把主動權(quán)交給用戶，讓用戶進行自行裁剪，如頭像、身份證信息。用戶上傳圖片后，我們可以給用戶設定一個默認裁剪區(qū)域，當用戶不想進行繁瑣時可以直接默認系統(tǒng)裁剪，如上傳頭像，我們可以把默認區(qū)域設置為圖片的中心區(qū)域。
小紅書在選擇頭像時默認裁剪區(qū)域是圖片的中心區(qū)域1:1圓形，并且圖片是短邊顯示，無論什么比例的圖片都能全部展示在選區(qū)內(nèi)，當你想要把圖片脫離到選區(qū)外，系統(tǒng)會自動使圖片彈回。未選擇狀態(tài)是選區(qū)內(nèi)圖片高清，選區(qū)外圖片模糊，選擇狀態(tài)則是選區(qū)內(nèi)圖片高清，選區(qū)外圖片黑色不透明遮罩（高透明度）。
微信在選擇頭像時默認裁剪區(qū)域是圖片的中心區(qū)域1:1正方形，圖片一樣是短邊顯示，也不能讓圖片脫離到選區(qū)外，但是能拖動并放大縮小選區(qū)框。未選擇狀態(tài)是選區(qū)內(nèi)圖片高清，選區(qū)外圖片有黑色不透明遮罩，選擇狀態(tài)則是圖片內(nèi)容全部高清呈現(xiàn)。
作者：黑獅力 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
通常我們理解圖標設計的含義，是將某個概念轉(zhuǎn)換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。隨著扁平化設計風格的普及，圖標的風格越來越簡約，看似簡單的圖形，實際要準確的表達含義，也是需要注意很多細節(jié)的，在如今大同小異的圖標中，如何讓你設計出的圖標具有說服力也是一門學問，今天就給大家全面的剖析一下圖標的知識，讓你做出的圖標有理有據(jù)。
1、圖標的定義及分類
2、圖標的設計規(guī)范
3、圖標的性格走向
4、圖標的評判標準
5、總結(jié)
圖標是具有高度概括性的、用于視覺信息傳達的圖像。圖標常常可以傳達出豐富的信息，并且常常和詞匯、文本搭配相互搭配使用，兩者互相支撐，或隱晦或直白地共同傳遞出其中所包含的意義、特征、內(nèi)容和信息。
在數(shù)字設計領域，圖標作為網(wǎng)頁或者UI界面中的象形圖和表意文字而存在，是確保界面可用性的基礎設施，也是達成人機交互這一目標的有效途徑。
釋意性圖標是用來解釋和闡明特定功能或者內(nèi)容類別的視覺標記。它并不是一定被點擊可交互的UI元素，在很多時候只是有輔助解釋其含義的文案。在不搭配文本的情況下用戶會借助這些圖標來獲取信息。不過有時候圖標表達的含義可能還不夠完整或者清晰，所以會將圖標和文案搭配起來一起使用，這樣可以大大降低誤讀的可能性，釋意性圖標一共可以分為以下三類：
2-1-1純圖標：
例如火球買手APP中的店家“特定標簽”，以及圖文展示下的“觀看數(shù)量圖標”與“收藏圖標”，它們并不需要用文字去解釋，用戶也知道它表達的是什么。
2-1-2圖文結(jié)合：
例如造作APP中的“購物車圖標”與“收貨地址圖標”，為了讓用戶能夠很好的明白圖標的意圖，所以在圖標下方會配有文字提示，這樣就能大大的降低誤讀的可能性。
2-1-3純圖標（圖標內(nèi)含文字）：
例如開眼APP中視頻封面左上角“開眼精選圖標”，它把圖標與重要文字結(jié)合在一起展示給用戶，看起來不僅十分具有個性，而且用戶對其理解性也非常強。
交互圖標的最大意義在于可以引導用戶進行交互行為，是在產(chǎn)品中不可或缺的組成部分。它們可以在用戶不同的操作手勢下幫助用戶執(zhí)行不同的交互過程，這種類型圖標也是APP中最常見的，常見的交互性圖標如：搜索、底部標簽、返回、點贊、收藏、掃一掃等。
裝飾性圖標僅僅是用來提升整個界面的視覺體驗，它并不具備任何功能性。這類圖標往往是為了迎合用戶的偏好與期望，通過豐富視覺體驗的方法來增加內(nèi)容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個用戶體驗更加積極，最為大家所熟悉的就是滴滴出行APP中的“小車圖標”。
圖標基于基礎樣式（線、面、線面結(jié)合）+表現(xiàn)手法（顏色、透明度、投影、疊加...）劃分，一共可以分為20種類型，每種類型的展示方式也都各有不同。
線性圖標通過線來塑造輪廓，在界面中App的圖標尺寸并不大，所以如果線過于復雜，在小面積中過多的線會對識別性產(chǎn)生較大的困擾。在圖標設計中使用的線有粗細之分，常用的App圖標設計線的粗細一般有2PX或者3PX，不同的線條粗細所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。
面性圖標是通過面來塑造形體的圖標，采用了剪影的設計形式，通過線或者面去切割基礎輪廓面，通過分型來塑造圖標的體積感。不同的切割手法造成了面性圖標設計感的差別。
線面結(jié)合圖標相較單一的線性圖標或單一的面性圖標樣式更加豐富、也更富有趣味性。從設計的角度上說，由于元素的多樣化，設計更容易獲得好的效果。相反，如果運用不當會顯得圖標非常雜亂，如何有效的把控好兩者之間的過度是關鍵。
這類圖標的特點是通過細節(jié)和光影還原現(xiàn)實物品的造型和質(zhì)感，能給用戶極強的代入感，用戶可通過對現(xiàn)實事物的聯(lián)想，快速領會圖標表達的意圖。但是隨著 ICON 的發(fā)展，擬物圖標也帶來了一些問題，因為用戶關注的核心永遠都是信息本身，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾，所以現(xiàn)在擬物化的圖標很少運用在APP界面之內(nèi)。
相較于擬物風格不會有太多復雜的視覺元素，層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設計，這類圖標具有一定的立體感，能給人輕盈、簡潔、精致的感覺，在界面設計中，一般在面積比較大的區(qū)域我們會使用加入輕質(zhì)感的圖標。
合理的遵循圖標規(guī)范可以有利于設計師之間合作使用，指導設計師如何規(guī)范的去設計圖標，以確保企業(yè)所有產(chǎn)品圖標風格的一致性和可用性達到統(tǒng)一，同時也是為了后續(xù)產(chǎn)品更新迭代有可參考的地方。
為了保證圖標的尺寸大小一致性，我們往往會建立基礎的網(wǎng)格尺寸來進行繪制圖標，常用的網(wǎng)格繪制尺寸為：16、24、36、48、64、128、512、1024。這些尺寸并不是固定的，在設計中也會存在特殊的尺寸，例如谷歌在臺式機上設計圖標，當鼠標和鍵盤是主要輸入方法時，就會使用密集布局，基礎網(wǎng)格就會縮小到20。
下面就以常用的24x24為大家展示：
網(wǎng)格包含2px出血位。這樣可以確保圖標在導出時將保留其所需的比例和周圍的空白區(qū)域，同時還能夠很好的平衡圖標的視覺重心。
*在使用常規(guī)圖標時避免一部分在出血位。
*在使用多個元素的圖標時，避免圖標擁擠我們可以讓其部分出現(xiàn)在出血位，確保它們之間有足夠的空間。
keyline由圓形，正方形，矩形，正交，三角形和對角線組成。它可以為您提供圖標集中基本形狀或比例的一致大小。這使創(chuàng)建視覺上的穩(wěn)定變得更加容易，并有助于在設計相似比例的圖標時有共同的參考準則。
在24尺寸下的keyline構(gòu)成如下（24尺寸下的出血區(qū)域為2）：
當把圖標畫在網(wǎng)格上時可以很好的規(guī)范圖標，讓它們從整體的視覺上看著統(tǒng)一規(guī)范。
在設計一整套系統(tǒng)化的圖標時，我們一定要注意圖標的像素大小，要運用相同的網(wǎng)格尺寸設計相同線條粗細的圖標，包括曲線，角度以及內(nèi)部和外部筆劃。這樣圖標看起來才更統(tǒng)一，也有利于后期圖標的迭代更新。
當然，描邊像素的粗細并不是絕對的，如果我們要做一些密集型的圖標時，可以考慮適當?shù)目s小線的像素大小。如下，我們設定的系統(tǒng)圖標線條粗細為3px，當你用3px作用于指紋圖標上時就會顯得非常擁擠，并且在視覺上比其余圖標更重，這時我們就可以把它的線條像素降級，設定為2px。
我們在用矢量工具繪制圖標時，要仔細看好圖標的網(wǎng)格尺寸和圖標結(jié)構(gòu)尺寸，避免產(chǎn)生小數(shù)位。
曲率簡單來講就是圖標中帶有圓角的邊角度數(shù)，只要是帶有圓角的矩形就都會有一定的曲率。在圖標中曲率的呈現(xiàn)方式有兩種：外曲、內(nèi)曲。
外曲與內(nèi)曲并不一定同時存在，在特定情況下內(nèi)部結(jié)構(gòu)可以是直角（無曲率）。如下圖：當內(nèi)部結(jié)構(gòu)都是圓角時會發(fā)現(xiàn)整個圖標稍顯臃腫，這時我們可以把部分內(nèi)部圓角直接變?yōu)橹苯牵ㄒ部梢愿淖兦蚀笮。?，改變后就會發(fā)現(xiàn)圖標的整體結(jié)構(gòu)會顯得更加協(xié)調(diào)。需要注意的是如果一個圖標做了這樣的處理，在同等情況下的圖標都要做一樣的處理，不然圖標會顯得非常雜亂，不統(tǒng)一。
根據(jù)像素的網(wǎng)格線來設置兩條對角線，會讓你的圖標看起來更清晰。在傾斜的角度選擇上，不要出現(xiàn)7.8°、14.2°這樣的奇怪數(shù)值。我們可以將15°的增量用于傾斜角度（也可以采用其他有規(guī)律的角度方案），這樣會使得整體的圖形變化顯得更加規(guī)律，也能夠滿足不同圖形的角度需求。
在做很多圖標時都會用斷點的缺口來打破“全包邊圖標”的沉悶感，使圖標具有透氣性，如果想給圖標添加斷點，那么要保證斷點的形態(tài)保持一致。
確保圖標內(nèi)每個細節(jié)和元素都有足夠的空間，圖標的相鄰元素之間的空間在整個圖標中不應太小，我們可以定義最小間隙以避免輪廓“粘住”，在24px尺寸下的間距不得小于1px。
如果在做圖標時牽涉到了透視需求，那么就一定要保證圖標的透視角度一致。
非中心對稱圖形物理對齊時視覺上會有偏離感，多個不同形狀的圖標視覺重心并不在一條水平線上，需要微調(diào)才能保證平衡感。
在圖形的處理上，不要留有多余的節(jié)點，干掉多余的節(jié)點，保持圖形的整潔。
ICON命名要求較為嚴格，涉及到我們切圖給開發(fā)，所以我們命名爭取做對，且需嚴格遵守規(guī)則，正確的命名原則：類型_位置_功能_狀態(tài)_大小
每個App應該有自己獨特的產(chǎn)品氣質(zhì)，同樣圖標性格也應當與產(chǎn)品氣質(zhì)保持一致。圖標性格一共分為了4個走向：粗曠（粗直）、活潑（粗圓）、商務（細直）、精致（細圓）。
圖標結(jié)構(gòu)特點：線條較粗（或面性圖標、線面結(jié)合圖標）、拐角為直角。
粗曠類圖標讓人看起來非常飽滿、剛正，它更多適用于男性、潮流、有格調(diào)類型等產(chǎn)品中。例如VSCO，它的底部標簽欄圖標全部采用了粗線條的直角設計。
圖標結(jié)構(gòu)特點：線條較粗（或面性圖標、線面結(jié)合圖標）、拐角為圓角。
活潑類圖標讓人看起來十分容易接近，能讓人感受到溫暖、舒適，它更多適用于電商、社交、母嬰、二次元、娛樂、直播、美食等產(chǎn)品中。例如閑魚，不管是在LOGO字體的處理還是APP內(nèi)部的圖標處理，都是采用了線條較粗的圓角設計。
圖標結(jié)構(gòu)特點：線條較細、拐角為直角。
商務類圖標讓人看起來十分規(guī)矩、嚴謹、值得信賴，它更多適用于新聞、政府、商務、工具等產(chǎn)品中。例如工具類的思維導圖APP，它的可操作按鈕都是商務類的圖標。因為這類圖標的特性，所以目前我們很少在移動端上看到它，它更多適用于PC端的后臺界面中。
圖標結(jié)構(gòu)特點：線條較細、拐角為圓角。
精致類圖標讓人看起來非常干凈、柔和、顯得高級感，它更多適用于旅游、奢侈品、藝術、領域垂直等產(chǎn)品中。例如airbnb，在APP應用中大部分都采用了精致類圖標。
當圖標設計完后，我們應該如何去評判一個圖標的好壞？很多設計師并沒有完整的評判體系，其實我們可以從這五個維度對圖標進行評判：識別性、圖標氣質(zhì)、協(xié)調(diào)性、一致性、品牌調(diào)性。
圖標最主要的用途就是輔助用戶理解信息，特別是對于當圖標單獨存在時，一定不能讓用戶產(chǎn)生疑慮。要想圖標達到高識別，我們可以從這2個方向入手：大眾認知隱喻、真實世界映射。
在互聯(lián)網(wǎng)普及的今天，許多界面的隱喻圖標已被廣大用戶熟知認可，對于這類隱喻圖標用戶不用思考身體就已做出反應，我們在設計圖標時可以從隱喻圖標中添加修改部分元素，從而形成新的圖標，這樣既能保證圖標的識別性，也能做出差異化。
選擇真實世界中的物品映射，能使人下意識對圖標的作用有近似預期，降低學習成本，提高識別度。
每個App應該有自己獨特的產(chǎn)品氣質(zhì)，而我們所做的圖標就是要跟隨產(chǎn)品的氣質(zhì)。例如當你要做一款二次元產(chǎn)品，你的圖標氣質(zhì)就應該偏活潑、可愛、萌、青春，而不是剛硬、嚴謹、規(guī)矩。
一致性是圖標的基礎，我們在繪制整套圖標時要確保它們的基礎屬性全部一致，細節(jié)統(tǒng)一，圖標內(nèi)容的統(tǒng)一在視覺上也更加和諧美觀。圖標是否具有一致性，就要從以下七個方向去評判：尺寸大小、圖形角度、拐角（曲率）、描邊、間距、透視、顏色。
3-1 尺寸大?。壕W(wǎng)格大小是否統(tǒng)一、是否遵守圖標的keyline規(guī)則。
3-2 圖形角度：是否遵循設定的角度規(guī)范（15°的增量用于傾斜角度）
3-3 拐角（曲率）：拐角的曲率是否統(tǒng)一，如果圖形太多且復雜，那么我們可以根據(jù)圖標的特性去設定曲率的規(guī)則，例如可以設定當邊角像素在1-2px時內(nèi)外曲率為2px；當邊角像素在3px時內(nèi)外曲為2px，內(nèi)曲為1px；當邊角像素大于或等于4px時，外曲為2px，內(nèi)部則為直角。
3-4 描邊：描邊大小是否一致。
3-5 間距：是否遵守間距規(guī)范。
3-6 透視：透視是否一致，避免在同一套圖標中出現(xiàn)正視圖/側(cè)視圖混雜的情況。
3-7顏色：在圖標的配色上要保持一致的規(guī)律，采用相同的顏色是比較常見的配色方式。如果采用不同色相的配色方式。也需要保持整體的配色協(xié)調(diào)，避免出現(xiàn)飽和度、明度反差過大的配色。
一致性代表的是圖標的基礎，而協(xié)調(diào)性則代表圖標的整體狀態(tài)，協(xié)調(diào)性的呈現(xiàn)狀態(tài)是驗證一致性是否合理的標準，當協(xié)調(diào)性存在問題時，我們就要反過來查看一致性存在的誤區(qū)并給予修改。在圖標的協(xié)調(diào)性上我們主要審視這三點：視覺大小、飽滿度、透析感。
視覺大小對標的是一致性的尺寸大小與描邊大小，當你發(fā)現(xiàn)圖標視覺大小不對等時，你就要回過去查看你的網(wǎng)格與keyline是否運用正確，確保正確后再查看你的圖標是否按照keyline的規(guī)范繪制以及描邊大小是否一致。（同樣尺寸下的圖標，從光感上來看描邊粗的圖標視覺偏大）
飽滿度對標的一致性的間距，當你發(fā)現(xiàn)圖標不夠飽滿時，你就要去查看你設定的間距值是否偏大，是否合理。
透析感簡單來說就是留白區(qū)域。透析感對標的也是一致性的間距，當元素的描邊過大時，我們就要合理的設定間距的最小值，不然整個圖標就顯得非常臃腫。
品牌調(diào)性是我們經(jīng)常提到的緯度，我們打開很多APP都會發(fā)現(xiàn)他們的圖標設計都非常普通，沒有任何特色，過于大眾化，雖然都做了一些形式上的改變，但總是與品牌缺乏聯(lián)動性。其實我們可以結(jié)合品牌調(diào)性，在圖標上做更多的聯(lián)動、創(chuàng)新。
色彩是圖標設計中重要的構(gòu)成元素之一，我們可以直接提取品牌色作為圖標設計視覺元素。例如站酷，站酷的品牌色是黃色，標簽欄的圖標（選中狀態(tài)）就提取了品牌的黃色，讓其與品牌調(diào)性高度一致。
當然品牌顏色除了可以直接用外，還可以在提取時適當調(diào)整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎上做了些許調(diào)整，圖標采用黃色透明漸變的處理方式，在與品牌顏色呼應的同時，使得整個圖標更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標一般運用在APP首頁標簽。因為首頁是APP中最重要的頁面，也是進入APP默認的頁面，把首頁圖標替換成品牌LOGO，能反復加強了用戶對App的logo印象，這樣不但使App內(nèi)外形成了視覺聯(lián)系，同時也二次傳遞了品牌形象。例如大眾點評，它的首頁標簽就用了品牌LOGO。
我們可以在品牌中提取它識別性較強的局部元素作為圖標。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標。
品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內(nèi)容強相關的元素。例如QQ音樂，就把音符作為首頁圖標。
如果你的品牌還不為大眾所熟知，那么為了強化用戶對品牌名稱的認知，可以把品牌名稱直接放入標簽欄中。例如MONO，就把它的名稱分為四個字母分別放在了4個標簽內(nèi)，需要注意的是這類圖標不能單獨出現(xiàn)，因為它本身不具備引導含義，必須配合文字一起出現(xiàn)，這樣才能讓用戶能易理解。
圖標風格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標，會讓人記憶猶新。例如：每日故宮，它的圖標就非常具有特色，結(jié)合了品牌的性格以及定位，加入了眾多的古代中國元素，整體看起來有股濃濃的古韻之風。
如果品牌中含有吉祥物，我們可以提取吉祥物的外形，把它用于產(chǎn)品的圖標中。例如盒馬，它就把盒馬的吉祥物做了風格化的處理，放于APP的首頁標簽。
設計師對自己做出的所有設計都必須要有理論支撐，圖標也不例外，一套優(yōu)秀的圖標是設計師不斷沉淀的結(jié)果?？赐瓯疚恼潞?，如果大家想要去練習圖標，建議找大廠的圖標放在keyline里臨摹，真的會讓你收獲不少。
資料提?。?/strong>
最后給大家整理了一些資料，包含30個輕質(zhì)感圖標（臨摹參考）、Ant Design的sketch插件、IBM的圖標、keyline矢量文件（AI與Sketch）。
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系
作者：黑獅力 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
提到輪播首先可能想到的是廣告，我們經(jīng)常在移動端首頁或網(wǎng)站首頁會看到各式各樣的輪播banner，不管在移動端還是網(wǎng)頁上通常點擊數(shù)據(jù)都是非常差的，本篇文章帶你深入了解banner輪播。
如果需要設計一個輪播，我們應該考慮哪些因素？如何讓輪播更具有價值？如何讓輪播的體驗更好？如何避免輪播常見的問題。
本篇文章通過以下幾點探索輪播的特性，預計閱讀20分鐘
1、用戶真的使用輪播嗎
2、輪播的輪換形式
3、輪播的進度展示
4、輪播定位
5、輪播的切換
6、對輪播進行分類
7、使用縮略圖進行預知
8、輪播異形化
9、輪播時間
10、總結(jié)
用戶是否對輪播有感知，這個則需要根據(jù)不同的場景進行判斷，包括每個產(chǎn)品中的每個輪播對用戶用戶的定位也不相同，常見的應用場景品牌曝光、活動營銷、產(chǎn)品展示，每個場景下相關的數(shù)據(jù)也不相同。
促銷輪播banner
品牌推廣輪播banner
產(chǎn)品介紹輪播banner
同時還有個關鍵因素，輪播的占比，這里以pc端為例若是產(chǎn)品是以品牌效應吸引用戶的，大多輪播是以大的屏幕占比為主通常會占首屏的50%，如果是以營銷、內(nèi)容為主的產(chǎn)品，輪播通常以16:9、7:4的常規(guī)比例進行展示。
用戶在使用產(chǎn)品時會默認忽略輪播區(qū)域，一般輪播都會有自動輪換機制，一定時間后自動輪放下一張banner，那么每當頁面上進行輪播時便會吸引用戶進行關注，效果上會有一定的提升，所以在輪播中第二張第三張的效果往往會比第一張輪播的效果更有效一些。
還有一種用戶比較喜歡關注輪播過去的banner以此來滿足好奇心。
如果banner是作為內(nèi)容傳播希望用戶通過banner了解內(nèi)容，那么則要避免放在最后一位置，對于用戶而言最后一張輪播路徑過于長，并且用戶很少會手動滑動banner。
國外一家公司在針對輪播中進行了相關的研究測試，隨著頁數(shù)的增加用戶的點擊逐步下降。
那么如果想讓產(chǎn)品中的輪播更具有效果，則需要根據(jù)不同的場景設定策略達到目的。
不管在移動端還是手機端，輪播都有各種交互形式和尺寸，以pc為例在交互上會多樣化一些，常見的幾種則是通過滾輪滑動、通過點擊切換兩種。
如下圖某藝術網(wǎng)站，它則是通過鼠標滾輪進行切換輪播banner，并且banner的占比也是鋪滿首屏，這種輪播形式適合一些品牌、產(chǎn)品宣傳等相關的網(wǎng)站以此來突出產(chǎn)品的亮點，同時也符合用戶目標。
在看下面這個醫(yī)美網(wǎng)站它的切換方式則是通過鼠標點擊進行切換，并且占比也是鋪滿首屏，在醫(yī)美領域用戶更關注美感，而輪播形態(tài)也是符合用戶的心理預期更加沉浸美觀。
而在移動端輪播的形式就比較統(tǒng)一，大多都是自動播放+手指滑動進行切換。
在網(wǎng)頁中輪播都會有當前的定位點，許多用戶的習慣是點擊進度條進行切換banner這樣能夠更快的達到目標，不用一張一張切換，但是在有些產(chǎn)品中會忽略這一點，設計中會做的非常小導致用戶在點擊上可用性不太友好，如下圖中的banenr進度點設計上過于小導致點擊上有些阻礙。
如以下網(wǎng)站去除進度定位的方式，通過縮略圖預覽來告知用戶下一個banner的內(nèi)容，空白區(qū)域也可以添加縮略圖引導介紹等關鍵信息，幫助用戶提前預知在體驗上相對較好。
以下國外某網(wǎng)站在進度定位的設計上采用了標簽文案方式進行設計，能夠幫助用戶更加全局的了解banner內(nèi)容
定位主要是用來指示當前輪播的進度，像上圖中講的便于用戶更加全局的觀看banner的張數(shù)和當前進度。
以下網(wǎng)站的設計中則把定位與進度相結(jié)合，進度條展示該banner預計多久會切換下一張，對于自動切換的產(chǎn)品輪播這個更直觀的進度展示體驗上相對較好。
以下是某個國外網(wǎng)站，不管是pc還是移動端都在輪播底部添加了水平條，告知用戶當前位置
隨著市場上產(chǎn)品同質(zhì)化嚴重，產(chǎn)品的競爭力也更依賴體驗，在下圖中的數(shù)據(jù)可視化的網(wǎng)站上，在進度條上就利用了產(chǎn)品的特性以餅狀圖的形式進行展示。
在剛才上面舉的例子中很多優(yōu)秀的網(wǎng)站在設計上都很有創(chuàng)新性，但是需要注意一個點，在輪播中不只有自動播放，還需要考慮用戶手動切換，因為在實際用戶瀏覽中可能會對產(chǎn)品的播放時間達不到預期，此時則會使用手動切換，除去可點擊的進度點，還需要上一張和下一張的入口切換。
在此基礎上需要注意，在處于最后一張banner時，下一張切換還能不能點擊，第一張時上一張切換還能不能切換，這個取決于產(chǎn)品特性和輪播張數(shù)，如果輪播張數(shù)過小的話則需要進行循環(huán)播放，如果過多的頁數(shù)則第一步和最后一步不可點擊。
上一張和下一張的距離遠近取決于banner的大小，如果輪播banner占比較大時則需要考慮用戶的操作時長，距離越短時間越快，為了避免用戶操作失誤在相對較近的切換按鈕則需要在視覺上做的比較突出，便于用戶尋找。
如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大，保持視覺平衡，因為小區(qū)域banner用戶能夠更加全局的觀看，在使用上不會猶豫。
反觀移動端在輪播中除了展示banner進度外很少展示切換按鈕，移動端更加依賴手勢交互。
當輪播banner過多時利用標簽進行分類，用戶通過點擊標簽進行查看相關的輪播組合。
此方式更適合一些電商平臺、新聞網(wǎng)站這種內(nèi)容過多的產(chǎn)品
如下圖國外社交媒體網(wǎng)站則使用了標簽進行分類，此處提一句輪播不僅限于首屏banner。他的用處可落地在各個場景。
在banner首屏中，顯示的內(nèi)容越多，越能激發(fā)用戶進行點擊，像上面講過的農(nóng)業(yè)產(chǎn)品網(wǎng)站就使用下一張預覽圖的形式進行展示，當然不僅局限于這種形式，如下圖中的餐飲網(wǎng)站把所有的輪播banner展示給用戶觀看。
相對于縮放圖，圖標展示效果上也較好，空間占用更少，使用這種方式需要謹慎，對圖標的識別性要求較高，我印象中能夠使用的這種方法的網(wǎng)站是蘋果官網(wǎng)，讓產(chǎn)品抽象化展示。
在移動端也存在這種設計手法，但是基于分辨率原因移動端的縮略圖展示過少，最常見的如下圖中的馬蜂窩和企鵝電競。
輪播最大的缺陷則是像剛開始講的用戶會默認為廣告，對此可以使用個性化設計突破用戶心理障礙，使輪播banner更具備親和力。
如下圖中的數(shù)碼科技網(wǎng)站，利用產(chǎn)品與背景的結(jié)合營造出一種功能性的展示。
再例如下圖中蘋果官網(wǎng)入口，結(jié)合百度的定制化功能在大搜中進行個性化處理，把常規(guī)的banner輪播以功能卡片形式進行展示，同時卡片承載產(chǎn)品動畫引導用戶進行點擊。
蘋果官網(wǎng)進入后隨意點擊產(chǎn)品介紹頁后會發(fā)現(xiàn)，蘋果把輪播結(jié)合鼠標滾輪營造沉浸式觀看，每個屏效內(nèi)都展示產(chǎn)品一個功能特點，打破傳統(tǒng)banner的展現(xiàn)形式。
自動播放的輪播會根據(jù)用戶的耐心和用戶的訴求進行調(diào)整優(yōu)先級，如我們平常使用產(chǎn)品時會忽略banner廣告，我們會更加關注移動中的東西，特別是在移動端上通常是banner進行輪播時才會關注。
谷歌設計團隊曾對banner輪播的時間進行測試，測試結(jié)果得出5s-7s的輪播時間最佳，在這個時間內(nèi)用戶有足夠的時間對輪播banner上的產(chǎn)品內(nèi)容進行了解。
如下圖谷歌商店的輪播時間設定在6s。
同時還需要注意，在自動播放的過程中如果用戶鼠標hover上去后，則需要判定播放暫定，避免用戶錯過感興趣的內(nèi)容。
本文從輪播的樣式、特性、用戶對輪播的認知等多方面的介紹，在實際產(chǎn)品中輪播有很多可用性上的問題存在，我們在設計中則需要根據(jù)自己產(chǎn)品的特性、用戶群體特點等多維度去思考適合什么樣的輪播形式。
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系
作者：愛吃貓的魚____ 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
因為文章實在太長，所以會分為上下兩篇發(fā)布，本篇為下篇，主要內(nèi)容為：
- 02. 字體字號
- 03. 圖標大小
- 04. 組件尺寸
本小節(jié)要開始介紹前面沒有說的文字了，文字的尺寸至關重要，但首先理解了前面所講的控件之后，再去思考文字尺寸的用法，會相對更容易一些，它們之間也有一些有趣的聯(lián)系。
而在對控件和文字都掌握熟練以后，才能進入后面的組件設計，這是我認為的一個比較合理的學習過程。
首先我們知道，安卓和 iOS 應用的中英文字體各不相同，蘋果是用蘋方和 San Francisco，安卓使用思源黑體和 Roboto。
?
如果不知道該去哪里下載這些字的同學，可以在我公眾號里回復“字體”下載對應的字體源文件。
在后面我們主要以 iOS 作為說明的對象，安卓則同理，可以直接參照 iOS 的字體尺寸設置。
一、英文的字號
在蘋果的官方建議中，有羅列出比較完整的文字字號建議，但大家一定要謹記，那些就是建議，并不需要在非官方的組件中應用那些字號。下圖是蘋果默認字體尺寸，詳見我們翻譯的 iOS 規(guī)范第 124 頁 (公眾號中回復“iOS”可獲得下載鏈接)。
首先我們要先劃分出一個文字字號的取用范圍，之后所有字體的字號設置就在那里面挑選。
在 UI 中，最小字號的依據(jù)一般有兩個，一個是人眼的可見度，另一個是屏幕的顯示極限，綜合兩者最小的字號應該在 9pt 。而最大的字號，以 iOS11 的標題字號 34pt 為準即可。
?
從 9-34，理論上其中每一個整數(shù)都可以使用，但我還是建議要應用一定的習慣。下面，就是我在英文應用設計中會使用的字體字號列表，為了便于記憶，我就只拆分成三種類型，初學者在使用時直接套用就可以。
? 標題：34、28、24、22、20
? 閱讀：18、16、14、12
? 注釋：11、10、9
注：單位均為pt
在英文應用中，我們應用的字號大小隨項目復雜度決定，通常，尺寸會在五種以上，兩種標題、兩種正文、一種注釋類字號，當然，我們還會通過字重和色彩進一步劃分，不過那不在這里的討論范圍中。例如下面我使用五種字號尺寸設計出來的原型案例：
另外，在 iOS 中，字號小于 20pt 使用 SF Pro Text，大于等于 20pt 時則使用 SF Pro Display 字體，這點大家需要牢記。
?
數(shù)字字體則可以等同于英文，但如果有需要展示數(shù)據(jù)的需求，那么最大尺寸就要靠自己的判斷了。
二、中文字體
中文字體和英文字體的最大差異在于筆畫數(shù)，很多中文的筆畫和結(jié)構(gòu)都異常復雜，如 “嚷”、“饕”、“餐”等，所以，最小的尺寸不可能和英文相等。建議最小中文字號使用 11pt。
至于最大的中文，因為蘋方并沒有 SF pro 字體那么豐富的字重，字號過大會有正負形失衡的違和感，所以，最大字號的尺寸也應比英文小。
下面是我在中文應用中建議使用的字號：
? 標題：28、24、22、20
? 正文：18、16、14
? 注釋：12、11
注：單位均為pt
前面做過的原型，應用的就是這些字號。
?
中文的字號選擇范圍是比英文小的，并且，中文字重數(shù)遠少于英文，我們在做中文應用的排版遠遠比英文應用的容易。很多新手誤以為英文更容易設計，那都是源自對英文的陌生，只是將字符純粹的當成有節(jié)奏變化的幾何形狀而不是用來閱讀的文本，而如果涉及到需要閱讀的英文文本設計時，字體、字號、字間距以及行高的選擇就會變得異常復雜。
三、文字的邊距
講完了字號的選擇范圍，這里我們就要再來討論下一個問題，就是如何更細化地去選擇字號。
首先，合理的字號是和環(huán)境息息相關的，而這種聯(lián)系最多的體現(xiàn)在文本區(qū)域的邊距上。能被合理閱讀的文本段落，是需要留白的，過于擁擠的文字排列只會造成閱讀的不適。
因為前面我們已經(jīng)說過控件的尺寸如何設置，所以當我們在設置文字時，很多時候是根據(jù)所定義的控件的高度，結(jié)合邊距來選擇文字的字號，下面通過一些控件來舉例。
例如我們定義了一個 40pt 高的按鈕，在設置文字時，嘗試將多種文字字號置入，過多的間距和過小的間距都會讓按鈕看起來不精致。合適的字體大小應該是 16pt。
?
而如果設置了一個 24pt 按鈕，那么得到的結(jié)論應該是 12pt。
?
輸入框的文字應用和按鈕相同，也以上下間距作為主要參考。
?
字號的選擇，除了本身的定位（如標題或正文）以外，是可以通過比較的方式得出最優(yōu)結(jié)果的。只要稍微花一點點時間，像上方案例演示的一樣將設計元素復制排列出來，就可以很快選出最適合的數(shù)值。
最后，前面說到的關于文字字號的設定，結(jié)合控件的尺寸規(guī)范，就能在下面決定組件的設計尺寸，缺一不可。
多做針對性練習，以提升對控件和文字的掌握熟練度是很有必要的。建議多做一些簡單界面的臨摹，并套用前面提到的元素尺寸，這樣很快就能適應這種高效規(guī)范的方式了。
這一節(jié)要講講關于圖標的尺寸，應該是最容易的地方，因為前面的內(nèi)容中，我們已經(jīng)規(guī)范并習慣了使用 4 的倍數(shù)作為尺寸的最小量度，那么在圖標中只需要同樣遵循這樣的原則。從相關的圖標素材下載網(wǎng)站就可以發(fā)現(xiàn)這種規(guī)律，如 iconfont、iconsearch 等等。
一、圖標的權(quán)重
在設置具體的尺寸前，我們還是要談談權(quán)重的問題。正常的 APP，通常會包含大量的圖標，而這些圖標，大小并不會完全一樣。如下面的案例：
之所以這些圖標的大小不一樣，和它們代表的功能和權(quán)重分不開關系。我們可以簡單將應用內(nèi)會出現(xiàn)的圖標分成 3 類，代表不同級別的權(quán)重。
最高：頁面中重要的功能入口
?
中等：底部導航欄用的圖標
?
最低：一般的工具類圖標
當然，這是我簡化過的邏輯，類似淘寶、京東、攜程這類大型應用，就還可以劃分出更細致的權(quán)重類型。而不同的權(quán)重實際上就對應了不同尺寸的圖標，如果有 3 種權(quán)重，那么我們在設計的過程里就會設計三種尺寸的圖標。
二、圖標的尺寸
首先劃重點：圖標的尺寸，主要指的是圖標在應用中占據(jù)的矩形區(qū)域，而不是圖標本身圖形的區(qū)域。
我們在設計具體圖形前，是先通過確定矩形區(qū)域的尺寸，再制作參考線然后進行設計的。而不是隨意設計了圖標再對應縮放到指定的位置。
例如，設計快速入口時，一開始我們定義出的這個組件為分割成兩行四列的矩形塊，即每個入口的實際大小。
所以，下面就是我對矩形尺寸定義的建議：
? 最大：64、56、48
? 中等：44、36、32
? 最小：28、24、20
注：單位均為pt
根據(jù)圖標所處區(qū)域的上下間距，從上方挑選合理尺寸即可，過程與字號設置是一樣的，這里就不多做演示了。
還需要注意，在一套 App 中，圖標出現(xiàn)的尺寸數(shù)盡可能減少，尤其對于新手，只需要應用 2-4 套不同的尺寸即可，否則也會對視覺體驗帶來明顯的破壞。
最后，就要說說組件的尺寸是怎么設置了。
首先我們要知道組件是什么，它是一個包含了控件、文字、圖標的功能合集?？梢允且粋€獨立的信息展示單元，也可以完成一個復雜的操作流，是學習 App 設計中最重要的環(huán)節(jié)。
?
一、組件的尺寸原則
定義組件的長和寬，方式有兩種，一種是根據(jù)外部環(huán)境制定，一種是根據(jù)內(nèi)容調(diào)節(jié)。
第一種，即通過外部的元素來確定組件的尺寸。例如我們要設計一個頭部的 banner 輪播圖組件，以左右可以滾動的形式展現(xiàn)。那么首先要確定我們希望輪播圖在屏幕中占多少比例，再確定高度。例如我們覺得大致要有屏幕 1/3 高，那么可以設定高度為 220pt（664/3），而根據(jù)上下對齊的原則，左右就由屏幕寬減去左右內(nèi)邊距 16pt 即可。
?
第二種，是根據(jù)我們里面添加的內(nèi)容元素來確定寬和高。例如在首頁輪播圖下方，添加左右滾動的卡片，那么我們先設定里面的控件和文字尺寸，然后再通過添加內(nèi)邊距的形式確定組件的尺寸。
當然，也有混合的定義方式，如一開始定好寬，根據(jù)內(nèi)容設定高，像花瓣瀑布流的卡片，或者定義好高來調(diào)節(jié)寬。具體使用什么形式，就要因地制宜了。
下面會通過幾個常見的組件案例，來演示如何定義它們的尺寸。
二、動態(tài)卡片
動態(tài)卡片是很常用的組件，通常以卡片的形式展現(xiàn)。每條動態(tài)通常占據(jù)內(nèi)容區(qū)域的整列，即左右減去制定好的內(nèi)邊距 16pt，那么就是 375-32 = 343 pt 的寬。而高度，就要根據(jù)里面所包含的元素了，如下圖所示。
三、設置列表
設置列表中，由高度相同的列表項組成，它們的高和寬應該是根據(jù)設計的風格一開始就制定好，如比較緊湊的風格我們采用 48pt 的高，比較寬松的風格就采用 64pt 的高。然后我們再排列內(nèi)部的元素，進行垂直居中。
四、班次信息
常見的班次信息，我們在定義它尺寸時，也是根據(jù)內(nèi)容來考慮的。首先確認它是一個撐滿屏幕的組件即 375pt 寬，再填入對應的字段內(nèi)容。
這時候可以將上下的內(nèi)容拆分成3個不同的子模塊：班次、時間、更多操作，班次和更多操作采用固定高度 44pt 的方式，時間則根據(jù)內(nèi)容設置邊距的方式，最后得到的高度的和，就是班次信息組件的高度。
?
五、瓷片區(qū)
主流的瓷片區(qū)，其實也由若干子模塊組合而成，而如淘寶這類會有很多瓷片區(qū)并列的狀態(tài)，我們優(yōu)先要考慮的，是每個瓷片區(qū)在屏幕中的占比，也就是先定義好瓷片區(qū)的高度，再拆分內(nèi)容的子模塊。
例如劃分為兩行的瓷片區(qū)，總高度為 280pt，上方的模塊高度為 180pt，下方的模塊高度為 100pt，里面的元素，再根據(jù)這個內(nèi)容區(qū)域進行排版。
完成一個完整的組件，是根據(jù)它的內(nèi)容和周圍的環(huán)境決定，我們只要感覺前面幾個部分所說的參數(shù)設置進行分解，就可以很輕松的定義出組件的實際尺寸。而無論任何組件，它們都沒有固定的尺寸值，需要大家不斷的練習掌握制定的思路。之后再設計完整的頁面，或整套應用時，就能大大提升效率和設計質(zhì)量。
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系
作者：酸梅干超人。 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
- 00.基礎原則
- 01.控件尺寸
一、官方規(guī)范
對于剛開始思考 UI 元素尺寸的新人，通常第一反應都是去看官方規(guī)范，新人都以為官方設計規(guī)范的作用就是告訴你們元素的大小和怎么設置，只要看完了就能懂得如何設計 iOS 或 Android 應用。而實際上，這些規(guī)范并不能幫助你們解決這個問題，因為設計規(guī)范涵蓋的內(nèi)容遠遠比這些復雜，比如我們之前翻譯過的 iOS 規(guī)范。
超人的電話亭獨家譯制 iOS 系統(tǒng)規(guī)范
規(guī)范鏈接：https://pan.baidu.com/share/init?surl=j0dtln14kKdUEfp19jewKQ
密碼：vpkj
我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸，最好的方法就是去下載它們的官方 UI-Kits，如下圖的安卓組件庫所示。
官方并不會提供一個列表，逐一羅列每個元素的長寬和其它參數(shù)，所以想要弄明白參數(shù)的問題，要自己在這兩套素材庫中選中元素才能查看其尺寸。如下圖左側(cè)這個按鈕，我們就能看見它的各項屬性：寬 359pt、高 57pt、圓角 14pt；右側(cè)的 Alert 提示框則寬 270pt、高 230pt、圓角 14pt。
因為 iOS 組件庫下載下來的都是 dmg 格式的文件，很多 windows 用戶不知道該怎么打開它，這里只需要百度搜索「DMG 提取器/查看器」就能下載到專門的解壓工具了。
在初期，我們想要設計出符合官方規(guī)范的界面，就可以嚴格照搬官方的元素設置。但是，即使官方的源文件所包含的元素及字體已經(jīng)非常多了，在實際設計過程中，還是會出現(xiàn)它們無法覆蓋的元素類型，需要依靠我們自己去給出尺寸。
還有如字體的應用，官方源文件使用的語言是英文，光是官方應用的兩種 SF 字體，就包含了十幾種字重，所以我們可以看見文字應用面板中密密麻麻的字體類型。在真實的中文設計場景下，我們是不可能照搬這種規(guī)范的！
所以每一個學習UI設計的新手，都必須要明白，官方的規(guī)范終究只是一種建議，我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內(nèi)容，我們是無法設計出有趣個性化的界面的，比如下面這幾款已經(jīng)看不到 “ iOS 設計 ”的應用。
官方的參數(shù)決定我們設計的下限，當你不知道該怎么做，或者設計的目標就是以系統(tǒng)原生的體驗和視覺為準，那么照搬就行了！后面文章要說的，就是脫離開這些束縛之后，該怎么自定義 UI 元素的尺寸。
二、尺寸設置原則
UI 和平面不一樣的地方，就是極其關注元素屬性的具體數(shù)值。平面的排版無論是海報或畫冊，使用百分比、目測的形式就足以讓我們做出很多優(yōu)秀的作品，無需緊盯著其中出現(xiàn)的每個元素的長寬高的數(shù)值。而 UI 的設計中，無論字體、圖標還是按鈕，都需要我們嚴謹?shù)囟x它們的長寬高，如下圖設計一個按鈕的操作：拖拉出矩形之后，我們依然需要到屬性設置的對話框中去輸入精確到1pt的數(shù)值。
這么做是因為在電子屏幕中，圖像的呈現(xiàn)是由屏幕中的像素點來完成的，像素點是最小的顯示單位，一個像素只能顯示一個顏色，所以如果設置了帶有小數(shù)點的數(shù)值，那么這個元素的邊緣就會虛化。所以為了避免這種情況的出現(xiàn)，我們就得用整數(shù)來定義元素的長和寬。
這當中還涉及到不少比較復雜的屏幕顯示原理問題，尤其是和像素倍率相關的基礎知識，我會在另外的文章里分享。
需要注意的是，文章中出現(xiàn)的所有尺寸數(shù)值的單位，默認以 iOS 官方規(guī)定的邏輯像素單位「pt」為準，即 XD 和 Sketch 默認畫布的單位，若在 PS 中設計需要在這個基礎上乘以 2。
只有分隔線，是唯一可以不使用整數(shù)的特例。因為 1pt 的分隔線看起來會非常粗，一點也不精致，感興趣的同學可以自己在 Sketch 或 XD 中畫個列表然后用 1pt 的線條做分隔，再導出到手機里觀看效果。即使是官方應用，也主要使用 0.5pt 的線條做分隔。
無論是在 iOS 還是在 Android 的規(guī)范中，都提到過使用 8 x 8 的網(wǎng)格做輔助，這導致網(wǎng)上有很多片面的文章會反復強調(diào)對元素的尺寸使用 8 的倍數(shù)。
iOS: 使用 8px 網(wǎng)格系統(tǒng)：網(wǎng)格系統(tǒng)可以讓線條和圖像內(nèi)容在所有尺寸上保持清晰，無需太多的修飾和銳化。將圖形邊界對齊到網(wǎng)格上，減少按比例縮小圖像時出現(xiàn)的半像素和內(nèi)容模糊的情況。
Android：所有組件都與間隔為 8dp 的基準網(wǎng)格對齊。排版/文字與間隔為 4dp 的基準網(wǎng)格對齊。在工具中的圖標同樣與間隔為 4dp 的基準網(wǎng)格對齊。
實際上，我們在真實的設計環(huán)境中，建議大家使用 4 的倍數(shù)作為一般元素的尺寸倍率即可，如 8、12、16、20、24……等，它的好處我會在后面的文章中做說明。如果發(fā)現(xiàn) 4 的倍數(shù)無法滿足某些特定的需要，如：多 4pt 太大，少 4pt 太小，那么我們就可以使用一般的偶數(shù)如18、22、26 等。
以上就是我們一開始要建立的元素尺寸原則，精簡完即：
使用整數(shù)，只有分隔線可以使用 0.5 的小數(shù)
使用 4 的倍數(shù)，根據(jù)實際情況可以切換成一般偶數(shù)。
有了這樣的原則，并養(yǎng)成習慣，我們就能在每次設計前對元素尺寸有個大致判斷，然后再根據(jù)需要按 4 的倍數(shù)調(diào)整，如下面設計注冊登錄頁面的輸入框作為案例。
開始我使用 280pt 寬，44pt 高的尺寸，但是覺得有點僵硬，太正式了！這時候反思認為應該是輸入框太矮導致的，所以高度上改成 44+(4x2)=52pt 。這時候又覺得太高了，實際輸入內(nèi)容也沒那么寬，于是再對高減 4，寬減 40，獲取最終結(jié)果。
所以，因為這樣的操作原則，決定了 UI 元素的尺寸不是憑感覺用鼠標拖拽出來的（拖動效率太低），而是在元素的屬性欄中填入它們的數(shù)值。UI 的設計過程就是一個不停鍵入?yún)?shù)和調(diào)整參數(shù)的過程。
這里要聲明，在我的描述體系中，控件指的是：界面中最基本的交互單位，如按鈕、滑塊、開關、分頁控件等，更復雜的如動態(tài)卡片，功能快速入口等，就歸入組件中，便于我們理解。
下面，我會根據(jù)前面定義的基礎原則，分別講解控件應該使用的尺寸范圍。
一、按鈕 ( Buttons )
按鈕是界面交互操作中使用最頻繁的控件了，當然按鈕呈現(xiàn)的形式也多種多樣，比如可以是文字、圖片、圖標、卡通形象等等。在這里，我們只聚焦于矩形的基礎按鈕。
在進入具體參數(shù)的講解前，要先理解一點，按鈕實際上是所有控件中最復雜的一個。并不是因為在設計樣式上復雜，而是因為按鈕承載了最多的產(chǎn)品訴求，權(quán)重差異極大，例如看下面的案例。
在上圖里，可以點擊的東西不少，我們只說外觀是標準樣式的按鈕，就有 9 個。而這里面，權(quán)重最高的必然是 “加入購物車”。權(quán)重最低的，則是前往新品頁。
要定義按鈕尺寸，我們首先需要整理清楚不同的按鈕在界面或整個應用中的權(quán)重。尺寸和權(quán)重是成正比關系的。當然，顏色也是對重要性表現(xiàn)的關鍵因素，不過不在這里展開。
按鈕高度
當我們設計按鈕時，優(yōu)先從高度入手，再去定義寬。為了便于新手理解，我首先從高度上來匹配權(quán)重，分成高、中、低三類：
- 高權(quán)重：40-56pt
- 中權(quán)重：24-40pt
- 底權(quán)重：12-24pt
高權(quán)重的按鈕，類似登錄頁的注冊、登錄，購物詳情頁的購買，流程頁中的下一步，它們的最小高度應該從 40pt 開始遞增。低于這個數(shù)值，那么按鈕就很難在頁面中起到視覺支撐的作用，因為會感覺到它太細了。
中權(quán)重的按鈕，類似個人主頁的關注、點贊、評論按鈕等。這個層級的按鈕依舊有比較高的交互頻次，所以我們必須得保證它易于點擊。24pt 是在我經(jīng)驗中便于點擊得最小尺寸了。這種按鈕通常是組件中的一部分，不像層級最高的按鈕常常是處于一個孤立的空間，所以高度如果超出 40pt，就會對當前模塊產(chǎn)生直觀的破壞。
低權(quán)重的按鈕，就類似查看更多、標簽、詳情等類型，相對于交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見，又不需要太顯眼。尺寸不大于 24pt，能容納內(nèi)部文字或圖形元素即可。
按鈕寬度
主流的按鈕都是橫向的長方形，正方形的也有，但就是不能變成縱向的矩形。
按鈕的寬度主要和內(nèi)容掛鉤，內(nèi)容數(shù)量越多，按鈕自然也就越寬。唯一的例外，只有高權(quán)重的按鈕，可以無視內(nèi)容的長度。因為它們需要更多的區(qū)域，往往都是撐滿屏幕內(nèi)容區(qū)域或橫跨屏幕的，可以特殊處理。
普通按鈕，左右邊界與內(nèi)容的距離過大，就會讓按鈕看起來非常的不協(xié)調(diào)。所以我們要根據(jù)內(nèi)容的長度來設置按鈕的寬。左右間距的大小，應該小于或等于上下間距的 2 倍。
按鈕圓角
最后，按鈕尺寸還有一個屬性，就是按鈕的圓角。矩形的四角有三種類型，即直角、圓角和半圓。
為矩形設置圓角，是為了讓按鈕看起來有一定的圓潤感不會顯得太尖銳鋒利，這種圓角的數(shù)值要給得更加謹慎，只要超出了一定的范疇，就會對視覺的和諧產(chǎn)生影響，我習慣稱呼為——半圓不圓，如下圖右側(cè)的錯誤案例。
所以，我們在設計圓角的過程中，一定要仔細感受圓角在畫面中的和諧性。而圓角的設置范圍，小于等于高度的 1/4。例如，一個 24pt 的圓角矩形，圓角的尺寸就應該不大于 6pt。
以上就是按鈕相關尺寸定義的說明，當然，在真實的設計需求中可能遇到很多無法滿足的情況，這就需要大家多做嘗試了。
二、輸入框 ( Text Fields )
輸入框也是比較常用的控件之一，它和按鈕有非常接近的外形。最常見的就是登錄頁賬號密碼輸入框，以及首頁上方的搜索欄了。
輸入框的高度，常規(guī)在 36-56pt 之間。低于 36pt 時則輸入框看起來會非常擁擠，比如我用下面學生的案例做個演示。
三、步進器 ( Steppers )
常見的步進器，就是輸入框和按鈕的結(jié)合。左右有兩個用來增加數(shù)量的按鈕，中間是允許我們直接鍵入數(shù)字的輸入框。在尺寸上，它也介于兩者之間，高度在 28-40pt 之間。下面我再用學員的作業(yè)做次演示，當?shù)陀?28pt 以后，就會發(fā)現(xiàn)在屏幕中的占比實在太小了。
步進器中常見的錯誤，是在我們在繪制左右兩個按鈕，設置外框的圓角時，并沒有合理的去掉內(nèi)側(cè)的圓角，這是絕對不應該忽略的細節(jié)。
四、下拉菜單 ( Dropdown Menus )
下拉菜單要注意它具有多種狀態(tài)，默認、展開和選中。默認狀態(tài)與輸入框類似，主流的高度也使用 36-56pt。但是，當菜單展開后，下方多出來的選項菜單，就值得注意了。
菜單的寬度正常情況下與默認狀態(tài)相同，而高度根據(jù)里面包含的選項數(shù)量決定。單行選項的高度，不大于默認的選項框。但也不能過小，新手很容易在彈出菜單中設定過小的高度，使個控件看起來會非常的別扭。
五、開關 ( Switches )
開關也是按鈕的一種形式，通常出現(xiàn)在設置頁的列表中，上方就是它主流的幾種樣式。在設計開關的時候，要先確定一個矩形區(qū)域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那么寬大致可以使用 56pt，之后再將其他細節(jié)填入。
六、滑塊 ( Sliders )
滑塊形式接近開關，通常在中間有一個操作節(jié)點，下面有一個用來表示區(qū)間的線條。實際上我們該做的就是分別決定它們的尺寸。
節(jié)點如果做的太小，不僅會顯得難看，而且會讓人覺得很難操作。它的直徑應該在 16-28pt 之間。而下方的橫線，寬度由所在內(nèi)容區(qū)域的寬決定，高度一般在1-4pt 之間。
七、頁面指示器 ( Page Controls )
指示器用來展示元素序列，雖然在 APP 中沒有太重要的作用，但既然我們加進去，就要讓它看起來和諧。大多數(shù)人在定義指示器時，不是太大，就是太小。可以只從后面提供的尺寸中選擇，就能保證指示器的尺寸不會出錯。
指示器主要是圓形和矩形兩種形式：
- 圓形：8、10、12pt ( 直徑 )
- 矩形：14×2 pt、16×2 pt、20×3 pt
八、提示紅點 ( Badges )
提示紅點也是大多數(shù)應用會使用的一個控件，它的大小應該在 24-32 pt 之間。作為一個圓形，這個控件設計起來很容易，但設計師往往忽略一件事，那就是如果中間的數(shù)值超過 10 變成 2 位以后，要怎么處理。
在設計這樣的元素時，我們要用一個矩形元素來表現(xiàn)，即畫一個正方形，然后將圓角設成最大，那它看上去就是一個圓形。那么每增加一位字符，我們就需要為這個矩形增加該字符的寬度，可以用左右間距判斷。
因為相同字號下，不同英文、數(shù)字的寬度都是不一樣的，所以我們要根據(jù)實際輸入的字段長度去決定圓角矩形的寬度。
九、分頁控件 ( Tabs )
后一個控件，就是分頁控件了，安卓中的 Tabs。這個元素在設計時也受到排版空間的影響。較為寬松的排版風格，高度就比較大，若擁擠則反之。下面是高度的取值：
- 高權(quán)重：40-48pt
- 低權(quán)重：28-36pt
分頁控件主要應用在頭部和頁面中部的組件中，如下方的案例：
雖然很多時候分頁器沒有背景色，但是背景的矩形框是必須畫出來的，即隱藏填充和描邊，這樣我們就可以通過垂直居中的方式，來確定中間文字的位置。
一個完整的分頁控件，里面會包含兩個或以上的選項，所以定義每個選項的寬是必要的。通常，我們有兩種定義方法，一種是選項少時，直接進行均分顯示，另一種是選項較多，采取定寬模式，寬度最小建議在 64pt以上，才不會顯得過度擁擠。
分頁控件選項處于選中狀態(tài)時，有的設計是修改背景色，有的是修改文字屬性，但今天最常見的就是加入下劃線。這個元素如果定義得不好，會讓整個控件看起來非常粗糙，它需要在樣式中能起到畫龍點睛的作用。
下劃線分為兩種，一種是貼在控件底部的，另一種是在文字下方懸浮的。兩種方式線條應該使用的高度都不應該大于 2pt。寬度的話，前者和每個選項背景區(qū)域相等，后者則可以在 8-16pt 間（小于文字總寬）。下面是正確設計效果：
十、尾聲
前面說到了不少控件的尺寸，那么真實應用的效果會如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁面中去。
可以看到，模塊大小很均衡，看上去不會覺得哪些地方太大或太小，只要稍加填充樣式，那么就可以變成完整的設計稿了。
這些參數(shù)雖然不能覆蓋所有特殊的狀況和需求，但至少可以保證這些控件不會被設計得很奇怪。當設計師沒有對于特殊化風格設計的控制能力時，就先學會正確的使用上面的這些參數(shù)吧。
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
“ 增長是現(xiàn)在業(yè)務的硬指標，大環(huán)境下設計師也免不了要背這樣的KPI。 ”
設想一下這樣的畫面，如果在你的Feeds列表里面推薦的是一些機械鍵盤和游戲裝備，那作為用戶，會心想“暈，這些東西又不能讓我變瘦變美，跟我啥關系？往下翻翻再看看有沒有什么可買的東西”。
2. 商戶信息：品牌標簽（比方說品牌、優(yōu)質(zhì)商家等）。商戶信息的透出，對追求品牌的用戶來說是個有利的促進因素。如下圖中商戶的“品牌”標簽。
光有這樣的利益點也還不夠，設計師需要做的就是將這些信息進行表達，怎樣表達？設計方案將卡片進行結(jié)構(gòu)化和組件化。什么是結(jié)構(gòu)化和組件化？如之前的圖（某平臺的商品卡片結(jié)構(gòu)）
三、興趣點的試探
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在今天的 UI 設計領域，由扁平化設計風格占據(jù)主導地位，已經(jīng)是無可辯駁的事實了。扁平化應用除了提升用戶獲取信息的效率外，對設計師而言就是設計的難度大大降低了。
一個界面的 UI 視覺元素，僅僅只需要圖片素材、矢量圖標、幾何、文字，UI 設計師的工作僅僅是對內(nèi)容進行組織和排版，涉及到原創(chuàng)的也僅僅只有少量的圖標（大多數(shù)人還畫不好）。
這種狀態(tài)持續(xù)了很多年，看起來歲月一片靜好。
但是，這兩年市場發(fā)出了一些不同的聲音，那就是打破純扁平風格的 UI 風格、元素開始越來越盛行了。
比如新擬態(tài)風格在年初炒了一波熱度，各大平臺和公眾號都鋪天蓋地的發(fā)文和介紹，介紹它的設計理念和設計方法。
還有就是以餓了么、美團為首的國民級應用在主頁顯眼的位置里使用極具識別性的擬物圖標，引起設計圈的熱議。
首先講講新擬態(tài)設計，之所以之前只字不提，是因為我對這個風格實在沒什么好感，有種對純擬物借尸還魂的味道，且它的樣式對于信息密度高的應用是完全不適用的，只能活在飛機稿里。
而國內(nèi)大型應用開始在實際項目中上線擬物圖標，意義就不一樣了，證明這樣的設計是經(jīng)過幾個大廠團隊認可，且有共識的。
當然，這并不因為大廠用了就無腦推崇。而是純扁平的設計已經(jīng)越來越難滿足部分需要強視覺效果的頁面設計了。
今天的互聯(lián)網(wǎng)和過去不一樣，用戶的增長留存不再是過去一樣通過裂變和口碑完成，一個產(chǎn)品只要認真打磨體驗、功能就能獲得用戶的青睞和駐留。用戶的精力時間是固定的，而互聯(lián)網(wǎng)產(chǎn)品又層出不窮，佛系的等待用戶臨幸是沒有出路，這種現(xiàn)狀也被稱為互聯(lián)網(wǎng)的下半場。
佛系不行，當舔狗更不行（成本太高），所以今天大型產(chǎn)品都在對待用戶的態(tài)度都選擇更具更具侵略性的霸道總裁人設。不僅是用色飽和度越來越高，運營活動越來越密集，廣告和強提示也越來越多。比如剛打開了三個應用，進入的首頁大家自己意會……
有點扯遠了，回到話題上。在這種掠奪用戶注意力的思路指引下，再做所謂的性冷淡、大留白、極簡風就不會合適。當對扁平的視覺效果已經(jīng)開發(fā)到極限以后，那么進一步在一些細節(jié)處應用擬物就成為必然的選擇。
而擬物的應用并不可能鋪設到整個應用中去，因為完全擬物化的設計降低信息瀏覽效率是必然的，所以它只適合做局部的視覺強化，來加強用戶對特定區(qū)域的感知。
最常見的需要被凸出的要素，就是首頁中應用的快速入口圖標、分類圖標和底部導航欄圖標了。這些區(qū)域長期受運營活動支配，相信大家已經(jīng)很習慣了。
只是，這些圖標開始在脫離運營活動的狀態(tài)下，也開始使用非扁平模式，那就不再是運營設計師的工作職責，而是 UI 設計師們繞不過去的檻了（知識盲區(qū)）！
且除了 APP 外，其它領域?qū)τ跀M物設計的需求也會開始逐漸提升，尤其是目前越來越復（fu）雜（kua）的大屏數(shù)據(jù)展示、車載界面、定制系統(tǒng)等等。
作為新世代的 UI 設計師，多數(shù)人對擬物的設計可以說是完全空白的狀態(tài)，所以是時候要重拾擬物設計這個傳統(tǒng)藝能了。
前面我有提到，擬物主要應用在關鍵的圖標上，但應用的擬物風格并不是過去我們追求的那種極其真實、復雜的擬物，而是經(jīng)過一定簡化、抽象后的擬物 —— 輕擬物。我們要先來明確一下輕擬物到底是什么。
首先我們看看，過去優(yōu)秀的擬物圖標和設計案例，它不僅表現(xiàn)元素本身的光影、透視、構(gòu)造，甚至會非常完整的表現(xiàn)物體表面的材質(zhì)和肌理。
這種圖標單看起來確實很好看、細致。但是，把它丟進我們當前的頁面中是非常違和的，因為它們細節(jié)實在太多了，而且畫起來非常耗時間，不利于項目整體的推進。
所以為了符合畫面的質(zhì)感，又要考慮項目效率，輕擬物這個概念開始被提出和應用，作為一個折中的解決方案。
它和純擬物設計的共同點在于，也表現(xiàn)光影、結(jié)構(gòu)、透視，但它盡可能精簡了輪廓的復雜度、肌理和層級，呈現(xiàn)出更概念化、理想化、易于辨識的擬物圖形。
所以，我們主要去學習的內(nèi)容是輕擬物的設計方法，而不是徒手畫照片（這個可以緩緩）！
而輕擬物雖然 “輕”，但它依舊也還具備擬物的基本特征，是有實體質(zhì)感的。但是扁平從插畫到圖標設計經(jīng)過多年的改版，有各種嘆（hua）為（li）觀（hu）止（shao）的設計，應用大量的漸變、投影、模糊的效果，比如下圖案例。
這在我們之前圖標的系列干貨中有提過，這類設計是面性圖標的進階版，它們依舊屬于扁平風格的范疇之內(nèi)，不能和輕擬物劃上等號。
對于這幾年才開始學習 UI 設計的新手來講，擬物已經(jīng)變成一個很陌生的事物，這對行業(yè)來說是比較悲哀的一件事。
因為擬物的設計不僅僅是畫圖標而已，對它的學習可以全方位的提升設計師的基礎素養(yǎng)，不僅包括對傳統(tǒng)美術（結(jié)構(gòu)、光影、色彩、透視）知識點的剖析，還包含對 PS 使用的深入探索。
可以說，自從擬物不成為必修題材以后，九成以上的UI設計師是不會用 PS 的，這極大的限制了他們自身的可能性和作品的多樣性。
輕擬物本身也是擬物，所以它的核心基礎和擬物設計師一致的，只是省略了更多復雜的細節(jié)。而對于整個擬物的體系來講，最重要的東西實際上只有2個，形體、光影。
形體的表現(xiàn)，就是對圖形外輪廓的樣式的呈現(xiàn)。在過去我們寫的圖標分享中，有寫過面性圖標進階的設計中，可以包含更多的細節(jié)、內(nèi)部元素，而不是僅僅只有外輪廓。
輕擬物的形體設計就要處于進階面性圖標或者更難的水平之上，即你要把這個圖形的內(nèi)容有明確的示意并畫出來，而不是用抽象的圖形做填充而已。
比如大眾點評的快速入口圖標，雖然看起來很復雜，但是那是配色上的復雜，而不是形體輪廓上的具象化。
換句話說，擬物插畫的圖形基底，類似扁平插畫風格圖標，不能表現(xiàn)得太抽象，也不能增加過多的細節(jié)，需要一種恰到好處的平衡（玄學），這就非常考驗設計師的判斷和經(jīng)驗了。
并且，在描繪輪廓的時候，新手盡可能的采取正視圖來進行繪制，而不要通過俯視圖、側(cè)視圖、斜視圖等方法來呈現(xiàn)圖形的多個面，這樣難度會大幅度上升，比如下面這種情況。
除了形體外，光影就是整個擬物的靈魂了。
當一個完整的圖形完成填充色時，它是扁平圖案，如果完成光影呈現(xiàn)的時候，它就是三維空間的立體圖形，比如下面這個圓的案例：
在擬物的設計中，我們對光影的定義是至關重要的，所以首先就是針對該圖形確定光源的方向，是上方、前方、左上還右上，這對后續(xù)的設計有一連串的影響。
如果對光影沒有正確的解釋，那么在制作細節(jié)的漸變角度、投影的使用上，就會產(chǎn)生錯誤的設計，造成光影視覺沖突和矛盾。
在創(chuàng)建了光源以后，物體受到光線的影響就會產(chǎn)生明暗面和投影，可以簡單劃分成4個部分，高光、亮部、暗部、投影。
這和我們學習的素描有一定的差異，美術中對光影的表現(xiàn)害會包含明暗交界、反光面，這對于輕擬物的來說負擔太重，所以我們要去掉它們，接下來重點講講高光和暗部。
高光是物體作為受光物對光源的直接反映，比如人像攝影中人眼眸中的高光就是對閃光燈的鏡像表現(xiàn)，再或者一拳超人中男主光頭上長期存在的高光配飾（多數(shù)動畫的光頭角色都有）……
高光可以非常有效的增加畫面的層次和對比性，讓物體看上去更有沖擊力和觀賞性。
而暗部，則完全是為了正常表現(xiàn)物體結(jié)構(gòu)和弧度增加的示意，因為不在受光面，所以顏色會變暗。在實際操作過程中，我們可以通過漸變的方式開控制明暗的表達，但盡量不要直接手動設置一個漸變色出來，而是為它疊加暗部或亮部的黑白透明度漸變。
了解這幾個特性以后，下面，我們就通過一個實例來講解一下輕擬物設計的過程吧。
作為輕擬物的演示，直接畫個圖標講一遍怎么操作是沒什么用的，我們要從實際場景出發(fā)，用它來解決一些真實的問題。比如看看下面的 KFC 官方 APP 首頁：
總結(jié)它的問題，不難發(fā)現(xiàn)首頁頂部業(yè)務功能太多了，頂部圖標就包含30個（加滑動的），雖然每個模塊圖標單看都沒有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級和對比性。
我們要做的，就是通過輕擬物的方式，調(diào)整快速入口最大的三個圖標，凸顯它們的重要性以及和其它圖標的視覺差異性。先從第一個圖標開始，講解一下如何完成輕擬物化設計的升級。
第一步：確認輪廓造型
第一個操作，即確定圖標本身的輪廓。根據(jù)原有圖標的樣式我做了一些改動，包括加粗車頭，減少高度，增加車燈等。并對每一個模塊進行純色的填充，定義它們的色彩和做出區(qū)分。
形體的重要性在于要對圖形本身有比較合理的呈現(xiàn)，不要讓比例失調(diào)和圖不達意。
第二步：完善圖形細節(jié)
這一步，就要在原有基礎上，進行下一步的深入。包括對一些細節(jié)交代得更清楚一點，增加一些有趣的小元素等等，完善它的具體樣式。
第三步：增加基礎的暗部表現(xiàn)
在這里，我們就要開始為圖標增加高光了，高光從右上角打下來，那么有疊加關系的元素就會產(chǎn)生一個向下的投影。并且反向暗部的表現(xiàn)，讓整體的立體感稍強。
這一步在軟件中主要使用蒙版功能，通過蒙版在背景上方創(chuàng)建一個圖層，然后添加深色的透明度漸變，就可以表現(xiàn)出對暗部和投影的效果。
第四步：增加高光效果
接著，就是最后一步，將高光添加到畫面中來，講整個圖標的質(zhì)感進行拉升，
通過上面的演示，我們可以將整個擬物設計流程精簡成：
1.確定圖形基本輪廓、外形比例、模塊色彩
2.豐富細節(jié)樣式增加趣味性和適當?shù)臄M真感
3.通過蒙版添加暗部來完善表現(xiàn)的明暗和層級關系
4.添加高光元素作為圖形的亮點，拉升層次感
然后，通過這樣的步驟，再來完成后續(xù)的兩個圖形，拆解完的效果如下。
然后，再用這三個修改后圖標套用進原來的頁面，并做出對應的修改，再來看看前后對比：
通過這個對比，我們就可以看出在這個復雜的首頁頭部中，輕擬物風格可以從一眾平面中被凸顯出來，且不會顯得太突兀和復雜。
而這就是輕擬物在項目設計中的實際作用，當畫面元素已經(jīng)開始超負荷，且容易導致同質(zhì)化的審美疲勞和主次不清時，就是輕擬物登場的時候了。
最后的總結(jié)，學習輕擬物就是增加我們完成界面視覺輸出的可能性，為視覺創(chuàng)意增加一些儲備彈藥，以應對越來越復雜的互聯(lián)網(wǎng)產(chǎn)品和職業(yè)要求。
我們只在這篇羅列了制作的順序和思路，并沒有把軟件的操作完全放出來，一方面是因為時間上來不及（偷懶），另一方面是希望大家不會被軟件的使用框柱。只要概念清楚了，那么使用 PS、AI、Skecth、Figma 還是 Affinity 等軟件都可以做出來。
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
從平面到屏幕，CMYK 到 RGB，墨點到像素，色彩越來越豐富，形式越來越復雜。而 UI 的發(fā)展從擬物的繁瑣細節(jié)中掙脫出來，卻在色彩的展現(xiàn)中放飛了自我。
零售業(yè)有個有趣的研究成果 —— “七秒鐘定律”：人們在挑選商品和服務時 ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內(nèi)，色彩的作用占到了 67%。
要在小小的手機屏幕中加入這么多顏色，并保持其中的聯(lián)系和邏輯，著實不易。如果你還對配色一無所知，完全不知道配色應該怎么入手，那么你需要了解一下，我?guī)啄杲?jīng)驗總結(jié)的配色思路。
無論我們用 PS、AI，還是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我們來看看這些案例：
雖然是不同的應用，但是這個拾色器的用法大同小異，但是，很多新人并沒有搞懂拾色器的正確應用邏輯。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的選色原理遵循的是 HSB 模式的邏輯，也就是色相（H）、飽和度（S）、明度（B）。
HSB 是色彩科學中對所有顏色屬性的理論劃分，是種概念上的定義，可以用來解釋任何色彩，也就是說可以和 RGB 和 CMYK 相互轉(zhuǎn)化，且 HSB 的選色邏輯更清晰、簡潔、干練。
因為一個正確的選色過程，是先確定出色相，然后再在這個色相維度下選出明度和飽和度，所以我們首先要關注色相選擇條。
細心的同學應該已經(jīng)發(fā)現(xiàn)了，它們的首尾都是紅色，那是因為色相的序列是一個首尾相接的環(huán)形模式，所以它實際上就是色環(huán)的柱狀展示圖，應用起來和色環(huán)沒有實際區(qū)別。
接下來就要說到重點，飽和度和明度選擇區(qū)，我自己使用的習慣，是將這個選擇區(qū)通過黃金三分法的方式切割成等比的 9 個區(qū)域，然后明確它們在 UI 中的對應情緒和應用場景。
在過去的大量分析中，互聯(lián)網(wǎng)產(chǎn)品的主色和重要輔助色都會往右上角聚集，一些次要、不可點的色彩聚集在中上方，而文字背景色則聚集在左側(cè)，無人區(qū)則是我們重點避開的對象。
下面我們分析幾個案例，看看它們在這個選擇區(qū)中的色彩分布情況：
大家也可以自己拿一些主流的應用做截圖，然后把它們的 UI 元素色彩排列到拾色面板中，就會得到基本一致的結(jié)果。牢記這 9 個區(qū)域的場景劃分，可以幫助我們非常高效、安全地完成 UI 配色。
在眾多的 UI 設計規(guī)范中，色彩部分的介紹，都必然包含三種類型，分別是：
主色：應用的核心色彩，品牌色
輔色：豐富頁面視覺和傳達效果的次要顏色
中性：沒有色相的文字、背景用色
主色是一個應用的最核心的色彩，品牌的象征色，比如想到餓了么的藍色、微信的綠色、京東的紅色、淘寶的橙色。
確定主色，并沒有大家想象的那么復雜，它的要點在于 —— 你想讓用戶感受到哪種情緒，然后通過情緒關聯(lián)一個大致的色彩范圍，再進行微調(diào)。
在今天的互聯(lián)網(wǎng)產(chǎn)品中，主色的應用選擇范圍在拾色器區(qū)域的右上角，前面已經(jīng)有解釋了。這和平面設計中的用色有非常大的不同。
移動端產(chǎn)品要在一個方寸大的空間中爭奪用戶的注意力，引起用戶的興趣，那么低飽和清淡的色調(diào)是無法實現(xiàn)這個目標的，所以今天主色飽和度越來越極致，比如我們之前整理的，發(fā)在站酷的一篇總結(jié)：
再加上屏幕的 RGB 顯示特性，高對比度，高動態(tài)范圍的特質(zhì)能給用戶提供更好的觀感。所以選擇主色最安全的做法，就是在確定色相類型后，在右上方區(qū)域選出合適的色值。
輔助色是豐富應用中的次要色彩，它會包含一到若干個和主色不同的色彩，除了品牌傳達外，具有更強的實用性。
前面我們提到過色環(huán)，這里就要派上用場了。我們知道色環(huán)是個色彩序列首尾相連的環(huán)形模型，它蘊含一個最樸素的原則，即兩個顏色在這個環(huán)形中角度越大，那么視覺差異性越大，對比越強，比如下圖的展示：
這些配色的模式是不能閉著眼隨便挑的，它們僅僅作為一個色彩對比度的判斷標準。而真正輔助色的選擇，是根據(jù)實際場景的功能決定的。
比如通知、提醒、取消用大紅色，確認、同意用綠色或者藍色，收藏、打分、評價用橙黃色。都是已經(jīng)在用戶心智中建立了標準的用色類型，跟著常規(guī)方法來做，是沒有其它思路的情況下最簡單、最安全的輔助色選擇方式。
沒有標準元素用色的情況下，再考慮應用色環(huán)的 “角度原則”，越需要被突出的顏色，可以在色環(huán)中離主色越遠，越不需要被突出的則越近。
比如下方攜程的案例，主色在藍色的情況下，支付、保險金標簽這些需要被重點突出的色彩，使用了主色的互補色， 讓我們一眼就能看見并產(chǎn)生強烈的操作欲望。
中性色，是頁面中文字、背景用到的顏色，它們承擔起最基本的層次表現(xiàn)、便于閱讀的重任。多數(shù)新手覺得中性色無關緊要，實際情況恰恰相反。
主色輔助色決定了界面視覺是否出彩，而中性色的應用直接決定了頁面能不能正常使用。如果看過比較多的原型案例，就應該明白，即使只有黑白灰的狀態(tài)下，我們理解這些頁面和進行使用也不會有絲毫的障礙。
中性色的配置，就是制定一個由深到淺的灰度階梯，應用在對應權(quán)重的元素上，色彩輕重的主要判斷依據(jù)是 HSB 中的 B（明度） 值。
中性色雖然指的是無個性，但并不是只能用純灰色，常見的一種做法，就是為中性色添加適量的藍色飽和度，提升觀看體驗（滿足 RGB 的某種特性）。
這種做法，顏色越淺的時候飽和度應用色值就越低，將這個規(guī)律在拾色器中進行表現(xiàn)，那么我們就可以得到一個 L 型曲線，我稱它為 “中性曲線”。
掌握對于主色、輔助色、中性色的選擇方法，那么對于 UI 配色的奧義來說，你已經(jīng)掌握了一半，接下來就要了解更具體的實踐思路了。
配色并不是只有色彩的色值本身，大家一直在研究各種色彩心理學和理論，卻很少關心它們應用如何應用，如何配置。
所以，我根據(jù)主色和輔助色應用總結(jié)了一個配色的四象限表格，在分別看看它們對應的案例：
主色會作為頂部標題欄或其它重要模塊中的背景色，進行大面積應用，加深用戶對品牌的認知和辨識度。而產(chǎn)品中又包含了大量功能和服務，需要用豐富的色彩來進行暗示，吸引用戶關注。
這類配色中，主色的應用占比也大，出現(xiàn)頻率高，鮮有其它顏色出現(xiàn)。比較適用于圖片內(nèi)容豐富的題材中，或者是相對正式、品牌感強的應用。
這是多數(shù)主流應用的趨勢，降低主色占比，留出更多的空間給內(nèi)容模塊的展示上，突出自身帶有的服務和功能。
通常，會應用這種方式是因為產(chǎn)品的服務是相對單一，但也需要用戶投入注意力的應用，設計師就會盡力避免給予用戶過多的干擾。
每次在進行配色的時候，我們都需要對自己要應用哪種配色應用方式做出規(guī)劃，然后再動手執(zhí)行。有了這個目標，后面在整個項目的設計中的配色步驟就是水到渠成的事情了。
在實踐前，我們要簡單講講一個應用或者界面的標準配色的流程了，流程順序如下：
具體應該怎么使用這套流程，我們用一個圖蟲 APP 改版的案例來做演示，首先從四象限中的第一個主色占比高、色彩豐富度高的類型做起。
原型是 UI 設計的基本藝能了，在開始具體設計、配色前，搭建頁面的框架原型是一個必備的條件，下面，是我們已經(jīng)準備好的原型案例。
然后，我們確定以橙色作為應用主色，并在拾色器中進行確認。
有了主色，就可以對頁面進行色彩填充和圖片填充了。既然我們主色是占比大的，那么首先可以用到的就是頂部標題欄的背景色了，以及底部 Tabbar 中的選中色，大按鈕色等。
接著，我們開始整理中性色的使用，選擇新的顏色來填充文字和背景，清晰的表現(xiàn)模塊層級，文字信息的權(quán)重。
最后，就是添加輔助色和其它色彩的元素了，這個步驟建議都是放在最后一步操作。因為色彩越豐富，越難控制，容易讓整個畫面顯得雜亂無序，所以先完成基礎搭建，可以更好的幫助我們判斷彩色的使用是否合理。
下面，我們使用彩色的金剛區(qū)圖標，然后將用戶關注、認證用戶、標簽等元素使用其它色彩，來豐富頁面的色彩內(nèi)容。
根據(jù)第一個方案，我們可以再用這個原型來實現(xiàn)其余的三個方案的配色。
比如下面的主色占比大，但是色彩豐富度低的。因為已經(jīng)不太應用其它輔助色，所以主色填充上我們不再填充頂部導航欄的背景，而是將更多元素應用主色，減少輔助色數(shù)量。
然后是主色占比小，色彩豐富度高的方案，進一步降低主色應用的比例，然后在金剛區(qū)、標簽等處使用較為豐富的配色。
最后，就是主色占比小，色彩豐富性也低的方案，那么使用中性色的元素就開始增多，只保留最核心的一些元素使用主色，和極少的輔助色。
根據(jù)四種不同的配色方案，我們就可以得到四種不同的配色結(jié)果和風格，在每次設計開始實施前，我們都可以根據(jù)這種做法來做嘗試，并選出自己滿意的方案。
要再次強調(diào)，UI 配色是極其強調(diào)形式的應用科學，最后做的往往會和一開始想的效果有極大出入，所以需要我們有幾個備選方案，可以隨時進行調(diào)整，并選出合理的那個。
以上是我們關于配色有關知識點的分享，希望可以幫助大家提升對 UI 配色的認識。
最后放一張阿瑪尼的配色格言，我們下一篇再賤！
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
01、騰訊視頻，色覺障礙優(yōu)化
騰訊視頻在播放視頻時可以通過輔助功能調(diào)節(jié)色覺障礙優(yōu)化，針對色覺障礙的用戶提供了相應色彩畫面的選擇。通過優(yōu)化視頻色彩來提高畫面辨識度，更加人性化的照顧更多用戶群體。
代代 摘錄
02、騰訊視頻，重回后繼續(xù)播放的小細節(jié)
當用戶觀影過程中需要暫停退出當前窗口，當重新切換回來時，視頻播放進度會自動調(diào)節(jié)到暫停前 3-5 秒。這樣的處理可以讓用戶可以更好的對劇情進行重新銜接，延續(xù)離開時的記憶，非常人性化的細節(jié)處理。
代代 摘錄
03、高德地圖十一期間不一樣
高德地圖節(jié)日期間在左上角新增了“景區(qū)隨身聽”服務，打造千人千面的全新語音導覽體驗，首批覆蓋全國逾500個熱門景區(qū)，為高德用戶帶來不一樣的十一假期體驗。
黑馬青年 摘錄
04、剪映，拖動試聽音樂有助于選擇
剪映在添加音樂時，可以通過拖動音頻來快速試聽該音樂，快速跳過緩慢的前奏部分，直接試聽音樂高潮部分。根據(jù)當前素材選擇最適合的高潮部分配音，可以節(jié)省用戶選擇配音的時間。
Liaju 摘錄
05、高德地圖，截圖生成長圖
搜索好目的地之后如果選擇公交地鐵出行，為了防止可能由于網(wǎng)絡不佳等因素不能及時查看交通信息，可通過截圖功能，保存完整的路線指引圖。保存圖片后可在相冊中查看長圖，也方便分享給好友，非常人性化。
疏晶晶 摘錄
06、企鵝 FM，左滑到底直接刪除收聽記錄
企鵝 FM 最近收聽記錄中，不僅可以左滑配合點擊刪除，還可以左滑到底直接刪除當前操作內(nèi)容。
許文娟 摘錄
07、攜程旅行語音導覽
在攜程旅行 APP 中，針對部分景點介紹有設置語音導覽的功能，初次體驗你可以選擇該旅游景區(qū)的三個景點進行試聽。對于很多游客來說只是看風景，如果不了解景點背后的故事，是很難有代入感的，這個功能可以讓你對景點有個初步認知。
黑馬青年 摘錄
08、微信讀書，想看啥搖一搖
微信讀書，搖一搖！它會根據(jù)用戶的閱讀記錄推薦類似的書籍。當用戶不知道看什么書的時候就搖一搖，以有趣的交互解決用戶選擇困難癥。
代代 摘錄
09、bilibili 漫畫跨頁拼貼閱讀
一般的漫畫都是在一頁之中進行分鏡，在手機上閱讀時不會有什么障礙，但是當出現(xiàn)一些比較大的跨頁插畫時，手機上的觀看體驗就不是那么友好。而當出現(xiàn)跨頁時，bilibili 漫畫可以通過向下滑動來進行拼頁，將跨頁拼成一頁來進行觀看，優(yōu)化了閱讀體驗。
住住 摘錄
10、叮咚買菜購物車領券激活用戶購買欲
隨著生活方式的不斷變化，現(xiàn)在買菜這樣的家常小事都可以服務到家。
最近在體驗叮咚買菜 App 的時候，發(fā)現(xiàn)購物車頂部會有領券提示，通過滿減、優(yōu)惠券等形式可以更快的激活用戶購買欲。空狀態(tài)的購物車可以激活用戶進行商品添加，已選擇商品后會看到滿減提示，激活用戶選擇更多的商品達到滿減權(quán)限，一舉多得。
黑馬青年 摘錄
11、微博動漫，不一樣的性別設置
點擊右上角的男生/女生頭像便可直接替換角色，區(qū)別于常見的輸入形式，簡化用戶操作步驟，并且推送內(nèi)容會根據(jù)用戶性別進行差異化推送。
Cherry 摘錄
12、記賬城市，游戲化記賬玩法
對于我們這一代的年輕人來說能堅持記賬的估計相對較少，一些互聯(lián)產(chǎn)品的引入相對可以激活這一部分人群。最近體驗的記賬城市讓我影響深刻，將游戲化的場景引入產(chǎn)品設計中，你記錄一次就相當于為自己的虛擬城市進行一次基建，帶入了幾分趣味性。
也可以點擊拍攝圖標進行照片記錄，調(diào)整好需要展示的城市場景，點擊拍攝時模擬了類似拍立得形式的照片打印。整個體驗不僅年輕化、游戲化，也結(jié)合了趣味性，在細節(jié)的處理上面也非常到位。
黑馬青年 摘錄
13、美圖秀秀以營銷思路引導登錄
通常訪問個人中心都需要用戶登錄賬戶，如何引導用戶創(chuàng)建賬戶是產(chǎn)品不斷思考的問題。美圖秀秀以紅包微動效替換默認頭像，以登錄領紅包引導用戶創(chuàng)建賬戶，也算是一種不錯的以營銷思路作為引導的方式。
黑馬青年 摘錄
14、骨骼，繪畫人的熱愛
很喜歡這款解析人體結(jié)構(gòu)的 App，設計很大膽，有個性。點擊右上角“顯示插針”會顯示插針在某個部位，點擊插針還能出現(xiàn)對這個部位的解釋。還能對骨骼進行360旋轉(zhuǎn)，深入解剖每個部位。
功能操作控件放在上下左右四個角，內(nèi)容的布局打破常規(guī)設計，左下角的“滑輪”操作，當你滑動時就會在“顯示界面”跟“隱藏界面”之間切換。
Liaju 摘錄
15、Keep 不一樣的任務設置
Keep 的任務設置采用 H5 的形式，區(qū)別于其他大眾的常規(guī)任務形式。沒人喜歡做任務，用講故事的方式去設置任務關卡，會增加用戶的參與度。
“卡路里工廠”在取名上就增加了不少趣味性與點擊欲望，進入“卡路里工廠”界面用星球、星空等元素設計，畫面具有神秘感，讓用戶覺得是在探索星球中完成任務。結(jié)合游戲化的形式更有趣味性，因而提升用戶參與度。
Liaju 摘錄
16、音兔，音樂智能推薦
音兔 App 在進行圖片和視頻編輯時，音樂的類型會根據(jù)圖片和視頻的內(nèi)容進行推薦，如發(fā)的風景照就會推薦旅行相關的音樂，發(fā)的貓咪照片就會推薦貓奴的音樂，方便用戶在進行圖片和視頻編輯時更快捷的選到適合的音樂。
Xindy 摘錄
17、微信讀書滑到頭還能無限場
卡片式滑動翻頁現(xiàn)在非常普及，起點通常是無法滑動的，但是微信讀書打破了你的思維局限。在開始時允許你向右滑動，此時便可進入無限場，帶給你不一樣的互動體驗。
黑馬青年 摘錄
18、招商銀行雙重刷新相結(jié)合
招商銀行 App 進入社區(qū)狀態(tài)下 icon 變?yōu)樗⑿聵邮剑梢允謩菹吕M行刷新，也可以點擊 icon 進行刷新，操作更加便捷。
Cherry 摘錄
19、網(wǎng)易云音樂，生日祝福
生日那天，網(wǎng)易云音樂的每日推薦圖標會變成一個蛋糕圖形，每日推薦的第一首歌是「祝你生日快樂」。這些小細節(jié)是不是很暖心呢，反正我是被俘獲了。（Android Version 6.3.2）
無休 摘錄
20、Space FM 通過音樂交友
Space FM 模擬宇宙太空，把每個用戶比作一個宇航員，宇航員添加喜歡的歌曲，形成自己的音樂星球；宇航員可以帶著自己的星球在太空漫游，每隔30秒匹配新的宇航員，如果雙方都停留下來，可以聽對方的歌曲，還可以打招呼、聊天，聊得來可以收聽對方的音樂，即可私聊。
以太空星辰為動態(tài)背景，播放著自己喜歡的歌，營造了一個輕松的氛圍。在與陌生人打招呼，有了音樂為話題引子，不會顯得唐突尷尬。
無休 摘錄
21、貓耳 FM 的閃屏啟動音
貓耳 FM 增加啟動音的設置，區(qū)別于傳統(tǒng) App 閃屏啟動，加入聲音的閃屏啟動音更增趣味性。推薦的啟動音也非常符合產(chǎn)品二次元的調(diào)性，讓用戶在進入 App 時有聲優(yōu)體驗的沉浸感受，每一次的打開都是一次驚喜的體驗。
“歡迎回來，主人”、“早安，大小姐”…等聲音錄制來自不同動漫的經(jīng)典重現(xiàn)，能抓住一部分特定用戶人群的喜愛，也是非常棒的運營策略。
老白 摘錄
22、京東商城添加活動日歷功能
京東商城在首頁添加了活動日歷的功能，用戶可以了解到未來一周的優(yōu)惠促銷活動?？商砑踊顒犹嵝?，這樣用戶就不會錯過好的優(yōu)惠活動，同時也提高了平臺的轉(zhuǎn)化率。
逆光 摘錄
23、騰訊視頻，播放短視頻中推薦正片
觀看短視頻的時候，播放大概 5 秒左右，視頻下方標題欄會變成正片內(nèi)容導航，避免用戶找影視名字的繁瑣，既能滿足用戶需要，又能增加產(chǎn)品需求。
皓月長歌 摘錄
24、酷狗音樂，透視立體翻頁設計
酷狗音樂歌單頁，頭部推薦歌單采用透視立體翻頁效果呈現(xiàn)，增強視覺畫面感，主體內(nèi)容更突出，也區(qū)別于平鋪卡片形式。頭部的背景顏色也融合當前卡片的色調(diào)，整體更協(xié)調(diào)。類似這種呈現(xiàn)簡單立體翻頁效果的表現(xiàn)手法，在 UI 應用場景中也越來越常見。
Liaju 摘錄
25、途家民宿，未完成訂單的設計呈現(xiàn)
當用戶有未完成的任務訂單，在“首頁”和“我的”以顯著位置提示用戶完成訂單。多個訂單“首頁”以輪播形式進行展示，“我的”以上下滑動形式展示并提示用戶。
皓月長歌 摘錄
26、QQ 夜間模式下的 icon 設計
切換 QQ 夜間模式，底部標簽欄消息選中模式下的 icon 結(jié)合睡覺打呼的情景設計，符合夜間場景。貼合場景的細節(jié)設計，帶給用戶更好的體驗。
Liaju 摘錄
27、馬蜂窩旅游，詳情頁照片展示處理
馬蜂窩旅游在文章詳情頁展示作者拍攝的景點照片時，不會對照片進行裁切等處理，而是以寬度固定高度自定義的方式進行呈現(xiàn)。展示出照片本身的原始狀態(tài)，不僅方便作者拍攝不同比例的照片，也方便用戶從不同的視角觀看景點。
黑馬青年 摘錄
28、毒湯日歷，點贊也要扎心
一款毒雞湯產(chǎn)品，覺得很喪就打開看看，說不定喪喪就好了。點贊 icon 設計也是帶“扎”的，恰好符合產(chǎn)品屬性；當你想翻過明天的時候，會提示“明天，怎么翻也翻不過去”。
Liaju 摘錄
29、百度翻譯，通過引導互動完成信息采集
引導頁在產(chǎn)品中比較常見，從靜態(tài)、動態(tài)、視頻等不斷演變到互動式新形式引導設計。
在百度翻譯 APP 中，通過引導頁和用戶進行互動，來了解用戶群信息。通過這樣的互動形式可以更好的被用戶所接受，并進行相應信息的選擇。
疏晶晶 摘錄
30、抖音，背景圖編輯預覽更人性化
在抖音設置個人主頁背景圖，更換圖片來自個人相冊，在進行圖片編輯時，可以預覽基于布局結(jié)構(gòu)上的呈現(xiàn)效果，便于用戶截取需要的圖片顯示區(qū)域。
疏晶晶 摘錄
31、編輯微信朋友圈動態(tài)試試長按照片
編輯微信朋友圈動態(tài)過程中，如果選錯圖片通常大家都是點擊圖片預覽時刪除。還有一種長按拖拽刪除可能容易被你忽略，不妨試試看，通過長按拖拽刪除照片更能方便用戶操作。
疏晶晶 摘錄
32、酷狗音樂，30 秒副歌播放
通過 30 秒的副歌播放，為你快速篩選是否喜歡這首歌，30 秒縮短了用戶試聽歌曲的時間成本。也會提示用戶下一步操作，如果 30 秒不夠可以增加 30 秒。
Matilda 摘錄
33、QQ 音樂制作視頻歌詞海報
喜歡的歌詞可以制作成動態(tài)海報，還可以自定義拍攝視頻，符合當下流行的小視頻。將喜歡的歌詞歌曲同時賦予視頻的記憶，聽覺+視覺體驗結(jié)合，給人更加豐富的情感體驗。
Matilda 摘錄
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系
作者：黑馬青年 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一、什么是大標題設計風格？
大標題導航欄是從iOS11發(fā)布后，開始在中國的UI設計師中急速流行的一種設計風格。其實這種風格最早在2016年就在硅谷盛行了起來，源自一位叫Michael Horton的設計師發(fā)表的一篇《Complexion Reduction: A New Trend In Mobile Design 》的文章，這篇文章提到的Complexion Reduction這種設計風格(下文簡稱CR)就是大標題導航欄的起源，即大、黑、粗的標題。
CR這種風格有四個明顯的特征：
1.刪除多余的顏色；
2.又大、又黑、又粗的標題；
3.簡單、可識別的圖標，也不要使用顏色(常用黑灰色)；
4.留白留白留白，更多的留白。
下圖是比較典型的使用CR風格的APP（分別是愛彼迎、ENJOY、火球買手、MOO音樂），大家可以結(jié)合CR風格的4大特征感受一下：
不知道小伙伴們有沒有發(fā)現(xiàn)，這幾個APP的功能會比較單一或是某一垂直領域，且視覺上都給人一種高品質(zhì)，超極簡的感覺，人們會更多的關注界面中內(nèi)容本身，對內(nèi)容的要求也會更高。
二、中西方的差異
那么問題來了，為什么這種CR風格鮮少出現(xiàn)在中國特有的淘寶類電商APP中呢？
國外的APP大都是小而精致的，一般一個APP只能做一件事，功能比較單一，而國內(nèi)的淘寶類電商APP，攜程類的綜合旅游APP所包含的業(yè)務與功能都非常廣泛，在狹小的手機屏幕上展示更多的商品就顯得尤其重要，CR風格提倡的大標題大留白無疑不是在挑戰(zhàn)老板的底線。
實際上即便使用大標題風格也不要盲目采用iOS11官方的大標題導航，其原因在于中英文的差異。
英文大標題一個單詞有大小寫的變化，富有一定的層級變化，而中文如果使用iOS11給定的68px（二倍圖下）的字號，那真是大到閃瞎我的眼。中文一個詞語每一個字都是差不多的大小，沒有層級上的變化，太大的字體在整個界面中看起來會很奇怪，如下圖：
三、合理使用大標題
雖說iOS11那么大的標題不適合大部分的APP，但并不是說大標題風格就不適合大部分APP了，實際上目前大多數(shù)的APP依然使用了大標題的風格，不過進行了一定的改良。
以下參考尺寸均是二倍圖下的尺寸
1.大標題導航欄
大標題導航欄大致有兩種樣式，一種是延用iOS11的大標題導航欄，一種是稍微改良使用的大標題導航欄。
1）iOS11大大大標題導航欄
iOS11的大標題導航欄標題字號約為68px、欄高192px(二倍圖)，大標題對齊導航欄左邊，頁面滑動時轉(zhuǎn)換為常規(guī)的導航欄。
國內(nèi)使用這種大大大標題的APP比較少，標題文字實在太大，若只作為導航標題占位，會極其浪費屏幕空間。
使用這種大大大標題時，導航標題一般都有一定的意義，如下圖:
餓了么的訂單頁詳情頁使用了這種大大大標題，但是標題賦予了訂單狀態(tài)的意義，比起單純的“訂單詳情”，這樣有一定意義的標題文字則可考慮使用iOS11的大大大標題。
2）改良大標題導航欄
某些APP在使用大標題導航欄時，在iOS11的大標題導航欄上進行了一定的改良，最常見的就是一定程度縮小了標題的字號，如下圖:
這三個APP的標題字號都沒有到68px，常用40px~48px的字號，陌陌與天貓是固定在頂部導航欄的，而Kepp會隨頁面上滑變?yōu)槌Ｒ?guī)標題導航。
一般這種固定的較大標題都會隱去導航欄的分割線，顯得導航欄更高，更有呼吸感。像是天貓的大標題導航欄使用的色塊，與下方模塊又比較近，就顯得很擁擠。
2.Tab欄大標題
Tab欄的文字標題切換樣式最常見的就是顏色變化，加小短線等，隨著大標題風格的流行，Tab欄的切換樣式也出現(xiàn)了大標題的選中樣式，選中字號通常采用40~48px（甚至更大，如蝦米音樂的72px），而非選中標題通常則是采用的28~32px，如下圖：
使用這樣的Tab欄，能夠迅速幫助用戶辨識自己所在的位置，就差指著自己說“這兒”了。需要注意的是一個屏幕內(nèi)盡量只在一級Tab使用大標題切換，與二級Tab做出區(qū)分。
3.模塊化大標題
大標題的風格除了應用在界面頂部導航，在模塊化標題上應用的也非常多，有些APP即便頂部導航不使用大標題，卻會在模塊化標題上使用較大的字號，如下圖：
這種模塊化大標題常配合留白分割的界面使用(這也符合了CR風格的特征)，模塊化大標題在留白分割的界面上能夠更好地幫助上下模塊做到層級區(qū)分的作用。
4.文字變大變粗變黑
拋開大標題不談，不知大家有沒有發(fā)現(xiàn)，現(xiàn)在越來越多的APP的內(nèi)容標題、正文內(nèi)容的字體也在逐漸變得更黑更粗，甚至更大，畢竟我們的手機變得越來越大了。如下圖：
即便是擁有復雜業(yè)務的淘寶與飛豬，在某些內(nèi)容標題上也變得更粗更黑，一眼看過去用戶能更容易找到自己想看的內(nèi)容。
四、劃重點
· 大標題設計風格源自Complexion Reduction這種設計風格，CR這種風格的特征就在于顏色少、標題大黑粗、圖標通用簡單、大留白；
· 由于中英文字體的差異，中文使用超大字號沒有英文富有變化；
· 合理使用大標題，做一些適當?shù)母牧?。常見用于導航欄、一級Tab選中標題、模塊化大標題以及內(nèi)容標題。
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系
作者：人類君 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://sillybuy.com