冷色系給人以靜心，沉穩(wěn)，穩(wěn)重及品質(zhì)感的感覺，結(jié)合明亮的色系選擇，

讓用戶可以感受到穩(wěn)重有輕快，愉悅舒適，積極客觀的感受。

設(shè)計(jì)規(guī)范

突出搜索層級，便于用戶快捷搜索目標(biāo)內(nèi)容

大運(yùn)營廣告、卡片式圓角矩形更圓滑，左右滑動切換banner

增加精選課程，可根據(jù)不用用戶喜好推薦視頻

標(biāo)簽欄的icon設(shè)計(jì)，采用線性圖標(biāo)，更簡潔

統(tǒng)一的14px圓角卡片，用戶可點(diǎn)擊查看更多

首頁新增直播入口設(shè)計(jì)，向用戶展示每日各類視頻

mockup

UI設(shè)計(jì)師/UX設(shè)計(jì)師/App獨(dú)立開發(fā)者,快速生成UI界面的3D展示效果(MAC)

https://www.designcamera.app/download

場景類的模型，主要都是電子產(chǎn)品

鏈接地址：https://mockup.photos/

最新的模型，手機(jī)、電腦、名片、廣告、包裝

鏈接地址：https://themockup.club/

系統(tǒng)圖標(biāo)設(shè)計(jì)的6大原則

1.避免模糊像素

2.統(tǒng)一的柵格體系，保證視覺大小一致性

3.統(tǒng)一的視覺風(fēng)格:統(tǒng)一的視覺風(fēng)格有很多種元素，包含圓角,線面，線條粗細(xì)，

? ? ? ? ? ? ? ? 設(shè)計(jì)形式等。圓角的統(tǒng)一又分為統(tǒng)一的外圓角和統(tǒng)一的內(nèi)圓角，

? ? ? ? ? ? ? ? 例如外圓角為4px內(nèi)圓角為2px，那么所有涉及到圓角的圖標(biāo)都要保持統(tǒng)一。

4.統(tǒng)一的透視角度:透視角度, 正視圖，俯視圖 側(cè)視圖

5.獨(dú)特的設(shè)計(jì)形式

? ? ? ? 圖標(biāo)的特性分析：

? ? ? ? ? ? ? ? ? ? ? ? 斷點(diǎn)設(shè)計(jì)

? ? ? ? ? ? ? ? ? ? ? ? 雙色搭配

? ? ? ? ? ? ? ? ? ? ? ? 高光設(shè)置

? ? ? ? ? ? ? ? ? ? ? ? 填色錯(cuò)位

? ? ? ? 圖標(biāo)的特性分析：

? ? ? ? ? ? ? ? ? ? ? ? 漸變色使用

? ? ? ? ? ? ? ? ? ? ? ? 半透明裝飾

? ? ? ? ? ? ? ? ? ? ? ? 統(tǒng)一的陰影

6.保證圖標(biāo)都是矢量圖形

（2）文字大小

Web設(shè)計(jì) ：比較隨意，文章正文字體12px/14px；

? ? ? ? ? ? ? ? 頁面安全區(qū)域1080px～1280px為宜（一些展示頁面字體會做到16-20px或更大）

App設(shè)計(jì)：正文30-34px,最小可用28px;注釋及提示行文字20-24px，最小不小于20px。（具體

? ? ? ? ? ? ? ? 字?jǐn)?shù)根據(jù)24px-36px的字體大小，以及頁邊距來定～）

無襯線字體組合：Arial, Helvetica, sans-serif

襯線字體組合： Times New Roman, Times, serif

1.如何設(shè)計(jì)出好看的圖標(biāo)??

? ?面性圖標(biāo)：面性圖標(biāo)分為兩大類，一類是較規(guī)整的圖形，比如常用的圓、圓角矩形。另一類是異形圖標(biāo)。

圓形或圓角矩形圖標(biāo)多用在APP首頁的金剛區(qū)。作為整個(gè)產(chǎn)品流量分發(fā)的入口，選用此類風(fēng)格圖標(biāo)是最合適不過的了，占用面積大，視覺表現(xiàn)力強(qiáng)，具有很好的導(dǎo)流作用。并且可以做出豐富的視覺效果，如投影、漸變、背景紋理、折紙剪影等設(shè)計(jì)手法。

異性圖標(biāo)相較于圓形或圓角矩形圖標(biāo)，視覺表現(xiàn)力就稍弱，識別度略高于圓形或圓角矩形圖標(biāo)，但同樣可用于金剛區(qū)，或者個(gè)人中心。當(dāng)產(chǎn)品流量入口偏多，可以用兩者來區(qū)分層級關(guān)系，多應(yīng)用于體量較大的APP，如美團(tuán)（圖1-1）金剛區(qū)，業(yè)務(wù)層級更加重要的用了圓形圖標(biāo)，次要的用了異形圖標(biāo)。

線性圖標(biāo)

線性圖標(biāo)視覺表現(xiàn)力較弱，但識別度非常強(qiáng)。所以多用于功能按鈕和標(biāo)簽欄。

線性圖標(biāo)常見的有：圓角、直角、斷線，線面結(jié)合圖標(biāo)。

線性圓角圖標(biāo)多用于社交、母嬰、娛樂、直播類等產(chǎn)品中，表現(xiàn)出可愛年輕活潑，有親和力的基調(diào)。

線性直角圖標(biāo)風(fēng)格更加硬朗，充滿了力量感，例如男衣邦（圖1-3）的底部標(biāo)簽欄圖標(biāo)采用的全直角設(shè)計(jì)，彰顯男士硬朗的風(fēng)格。

斷線圖標(biāo)的斷線是一種設(shè)計(jì)形式，形成一種設(shè)計(jì)語言，斷線設(shè)計(jì)可以貫穿整個(gè)APP的圖標(biāo)，形成一致統(tǒng)一，和獨(dú)特的產(chǎn)品調(diào)性。

線面混合圖標(biāo)也是一種設(shè)計(jì)語言，線和面搭配，使形式感更加豐富，視覺層級性要比純線性要強(qiáng)，可以和純線性圖標(biāo)搭配，營造出不同的設(shè)計(jì)形式感，統(tǒng)一中有變化，又可以區(qū)分出層級。其風(fēng)格偏活潑，年輕化。例如美團(tuán)外賣圖

統(tǒng)一規(guī)范：? 圖標(biāo)網(wǎng)格圖? 面的統(tǒng)一 面的顏色統(tǒng)一 （金剛區(qū) 四色原則：根據(jù)業(yè)務(wù)屬性定義顏色，四種顏色，業(yè)務(wù)相關(guān)的其他四種作為鄰近色。且每一個(gè)顏色不能跨度太大，應(yīng)該保持他們的飽和度和明度統(tǒng)一）

線的統(tǒng)一

粗細(xì)統(tǒng)一

拒絕直接去素材網(wǎng)站下下來使用，會導(dǎo)致粗細(xì)不統(tǒng)一。線性圖標(biāo)粗細(xì)常見的有2px、3px、或者有更粗的5px、6px，根據(jù)自己的產(chǎn)品調(diào)性來決定，其中3px是最常見的，微信最新的7.0版本，標(biāo)簽欄從2px都加粗到3px，其他icon也都相應(yīng)加粗，所以3px已經(jīng)成為主流。細(xì)線顯得精致，粗線視覺面積大，顯得厚重敦實(shí)。

圓角統(tǒng)一

直角的風(fēng)格更加硬朗，充滿了力量感。圓角的圖標(biāo)顯得風(fēng)格溫潤爾雅，小圓角設(shè)計(jì)顯得整體風(fēng)格柔和，如果圓角非常大，會顯得圖標(biāo)偏卡通感覺。所以圓角的統(tǒng)一也是必要性的。

3設(shè)計(jì)技巧

面性圖標(biāo)

漸變

漸變分為同色系漸變和跨色系漸變。同色系漸變在色相保持不變的情況下，通過飽和度和明度調(diào)節(jié)亮暗關(guān)系，調(diào)暗技巧：明度調(diào)低的同時(shí)飽和度調(diào)高一點(diǎn)，以免顏色過臟。同色系漸變在保證和諧的情況下，又有活潑跳躍的感覺。角度通常斜45度。

跨色度漸變，視覺更加豐富，年輕時(shí)尚活潑。多用于直播、社交、視頻、游戲類。需要注意的是，顏色跨度多為近似色。

投影

投影的加入，使得圖標(biāo)帶有略微的立體感，需要注意的是，投影切忌使用黑白灰色，會顯得過臟。正確的做法是，吸取背景色，然后做加深處理，投影參數(shù)沒有固定數(shù)值，依視覺而定，略微帶點(diǎn)投影就行，不能做得太厚實(shí)，也不能做得太彌散。投影通常下移4-6px距離。

折紙剪影

折紙剪影的效果略像之前的微寫實(shí)，加入更多細(xì)節(jié)，視覺更加豐富，使用非常頻繁。在做折紙剪影效果的時(shí)候，需要先對圖標(biāo)進(jìn)行分型，把圖標(biāo)按結(jié)構(gòu)分成幾個(gè)塊面，就像“肌肉的線條”使用“折紙?jiān)怼崩斫馄浣Y(jié)構(gòu)。然后對需要“折紙”的部分做一個(gè)白色至深色漸變。“折紙”部分不宜過多，通常在圖標(biāo)的10%左右。

線性圖標(biāo)

斷線

在做斷線風(fēng)格的時(shí)候，就像小時(shí)候畫的一筆畫，注意斷線結(jié)構(gòu)，避免生硬的斷線，且造型簡單，不要過于復(fù)雜。一般在圖標(biāo)右下角斷。在斷線的基礎(chǔ)上可以做一些獨(dú)特的設(shè)計(jì)語言，斷線的邊緣可以是一個(gè)曲線。

顏色

雙色的使用使圖標(biāo)視覺更加豐富，一個(gè)主色和一個(gè)輔助色搭配，兩種顏色可以互為補(bǔ)色，也可以是類似色。輔助色占比30%左右。

線面混合

線面混合也是常用的一種設(shè)計(jì)手法。面的顏色通常為APP的主色調(diào)。填充手法通常分為兩種：一種是投影填充，另一種是線框內(nèi)尋找一個(gè)面填充。填充比例不宜過多，30%-50%、且線條顏色通常為黑色。

融入品牌基因

品牌設(shè)計(jì)越來越重要。應(yīng)用越來越廣泛，將自己的設(shè)計(jì)語言（logo、輔助圖形）融入到海報(bào)、banner、界面、圖標(biāo)等。越來越多的產(chǎn)品在圖標(biāo)中用到了自己的logo

還有些產(chǎn)品logo不太好運(yùn)用，但是從logo里面提出符合產(chǎn)品氣質(zhì)的輔助圖形，加以運(yùn)用。如圖尖叫設(shè)計(jì)（1-19）logo是偏斜的線條，營造出一種傾斜美感，標(biāo)簽欄圖標(biāo)從logo提取出這一設(shè)計(jì)語言，頓時(shí)使圖標(biāo)具有獨(dú)特的設(shè)計(jì)感

移動設(shè)計(jì)中的8px柵格

8px柵格就是界面設(shè)計(jì)中的所有元素和間距，都要遵循8或者8的倍數(shù)。為什么是8的倍數(shù)呢，因?yàn)?針對移動端設(shè)計(jì)更有優(yōu)勢，可以縮成1倍圖，而沒有虛邊，移動端主流尺寸都是8的倍數(shù)。除此之外，我們在做其它設(shè)計(jì)時(shí)也可以將不同的留白設(shè)計(jì)成有倍數(shù)關(guān)系的數(shù)字，比如10px、20px、30px等，讓設(shè)計(jì)內(nèi)部更有邏輯性。

.2對比原則

對比原則應(yīng)用廣泛，可運(yùn)用于各個(gè)設(shè)計(jì)中，如網(wǎng)頁設(shè)計(jì)、平面設(shè)計(jì)等。對比可以讓畫面層次感更加豐富。在移動設(shè)計(jì)中，使用對比手法，可以突出主體信息，弱化次要信息，讓界面視覺有強(qiáng)有弱。更有節(jié)奏感?？梢院芎玫囊龑?dǎo)用戶使用產(chǎn)品，從而提升用戶體驗(yàn)。

顏色對比

界面設(shè)計(jì)中的顏色對比，多用于產(chǎn)品標(biāo)簽或交互按鈕上。如圖美團(tuán)卡片推薦（2-3）促銷信息、評分還有商家屬性的標(biāo)簽都做了不同顏色的區(qū)分。促銷信息用了紅色刺激購買欲，外賣標(biāo)簽用了美團(tuán)外賣的產(chǎn)品色黃色，更具有品牌標(biāo)識。并與促銷信息區(qū)分開來

文字對比

界面設(shè)計(jì)中文字排版影響整個(gè)界面的呼吸節(jié)奏感，文字對比尤其重要。產(chǎn)品中的列表、卡片各個(gè)模塊都會運(yùn)用到文字的對比。文字對比主要從三個(gè)維度進(jìn)行對比：大小、粗細(xì)、顏色。如圖知乎（2-4）信息流卡片的文字用了三個(gè)信息層級。標(biāo)題>正文>評論點(diǎn)贊。通過字體的大小、粗細(xì)、顏色對比，讓信息層級清晰可見。

2.3親密原則

根據(jù)信息關(guān)聯(lián)性來排版。信息關(guān)聯(lián)大，則間距小，信息關(guān)聯(lián)小，則間距大。幫助用戶能夠快速獲得信息。使閱讀起來更加清晰明了。

豆瓣內(nèi)容推薦如圖（2-5）卡片信息，主要分為三個(gè)層級：用戶信息區(qū)、內(nèi)容區(qū)、點(diǎn)贊評論區(qū)。所以這三個(gè)區(qū)域之間的間距是最大的，都是統(tǒng)一的30px，內(nèi)容區(qū)依次是標(biāo)題、文案和圖片，關(guān)聯(lián)性強(qiáng)于三大區(qū)，所以間距用了24px；然后用戶信息區(qū)的頭像和用戶名信息關(guān)聯(lián)較大，所以用了16px間距。三張圖片關(guān)聯(lián)性是最大的，所以用了8px最小間距。

2.4重復(fù)相似原則

如果相同的內(nèi)容（如標(biāo)題等）屬于同一個(gè)邏輯，可使它們的顏色、字體、大小、留白保持相同。這樣可以增加條理性和加強(qiáng)設(shè)計(jì)的統(tǒng)一性。這就是重復(fù)原則。重復(fù)中又有變化，如果一味的重復(fù)，會讓人枯燥無味，產(chǎn)生疲勞感，多樣的變化突破了版面的單調(diào)、死板。這就是相似原則。如圖今日頭條瀑布流（2-6）在保證了統(tǒng)一的排版樣式的同時(shí)，圖片排版做了一些變化，豐富了界面的視覺。

2.5簡單原則

從ios11開始，app設(shè)計(jì)趨勢越來越遵循簡單原則，大而簡的設(shè)計(jì)語言。去掉不必要的視覺元素，減少干擾。做減法，用留白去塑造簡單。用戶喜歡看規(guī)整的界面，而不是毫無規(guī)則的界面。

字體規(guī)則簡單

字號不宜使用過多。一個(gè)卡片信息，保持在三種以內(nèi)字號，即大中小。相差值在4-6px左右。

分割線原則

很多產(chǎn)品開始去線化設(shè)計(jì)了，以達(dá)到簡潔清晰的視覺效果。盡量使用留白分割模塊，如果要使用分割線，分割線要淡。

產(chǎn)品去線框化

許多app的產(chǎn)品從最開始的邊框設(shè)計(jì)，到現(xiàn)在越來越多的用淺灰背景來代替，去除線框的視覺復(fù)雜冗沉，灰色色塊更加簡潔。

排版規(guī)則簡單

在處理排版的時(shí)候，各個(gè)元素之間的間距組合不宜過多。一般3-4種組合即可。過多會導(dǎo)致界面比較散、零碎。沒有主次之分。

app設(shè)計(jì)中的板式設(shè)計(jì)還有很多深究的地方，如視覺層次、閱讀節(jié)奏感等。由于篇幅有限就不再一一敘述。上面講到的是比較基礎(chǔ)，但又非常實(shí)用的要點(diǎn)，在工作中完全夠用。下面進(jìn)入app設(shè)計(jì)的第三個(gè)要素：

3.色彩其實(shí)很簡單

講色彩之前，我們必須要掌握色彩的一些基本知識。如色彩屬性：藍(lán)色代表安全、黃色代表活潑、紅色代表熱情等。色彩的構(gòu)成：色相、飽和度、明度，要清楚三者之間的關(guān)系。色環(huán)上的一些色彩變化：如類似色、近似色、中差色、對比色等。由于篇幅有限，不對這一部分進(jìn)行講解。大家可以自行下去查閱資料學(xué)習(xí)。

3.1色彩運(yùn)用

一個(gè)產(chǎn)品的色彩構(gòu)成一般以主色、輔助色和點(diǎn)綴色構(gòu)成。用色比例為主色60%，輔助色30%，點(diǎn)綴色10%。主色一般用在主要按鈕交互，和導(dǎo)航欄和個(gè)人中心背景。輔助色起到調(diào)和作用，豐富視覺，在一些按鈕上面和主色形成區(qū)分。點(diǎn)綴色用得很少，多用在一些小按鈕或者標(biāo)簽、角標(biāo)，結(jié)合運(yùn)營設(shè)計(jì)去使用。用來點(diǎn)綴界面。

3.2單色系搭配

單色系搭配運(yùn)用比較廣泛，視覺統(tǒng)一和諧。但缺點(diǎn)是顯得過于呆板、沉悶。如湖藍(lán)色、玫紅色偏女性，偏娛樂化。紫色系偏格調(diào)類較多。如圖（3-1）藍(lán)色單色搭配，給人感覺和諧統(tǒng)一安全。

3.3互補(bǔ)色搭配

互補(bǔ)色搭配視覺非常強(qiáng)烈。多用在年輕個(gè)性潮流的產(chǎn)品上。常見的互補(bǔ)色搭配有紅綠、紫黃、藍(lán)黃、紫橙等。需要注意的是兩者用色比例，遵循大自然色彩規(guī)律，暖色調(diào)小面積? 冷色調(diào)大面積。如大綠小紅，大紫小黃。如圖（3-2）藍(lán)橙互補(bǔ)，視覺強(qiáng)烈，且藍(lán)色大面積使用，橙色小面積使用。

3.4近似色搭配

近似色搭配相對于單色系單配，既和諧統(tǒng)一，又不會顯得那么呆板沉悶。常見的近似色搭配有：紅黃搭配適用于電商、女性。紅和玫紅搭配適用于直播、時(shí)尚、女性。 紫紅搭配適用于科技、娛樂、炫酷。藍(lán)紫搭配適用于科技、夢幻。近似色的顏色多使用在按鈕、標(biāo)簽、圖片的狀態(tài)上。如圖淘寶（3-3）使用了黃橙近似色。

3.5如何創(chuàng)建色彩

通過各類app采集色彩

體驗(yàn)不同領(lǐng)域的APP，建立不同領(lǐng)域?qū)PP色彩組合的選擇，為后期項(xiàng)目設(shè)計(jì)奠定基礎(chǔ)。根據(jù)主色進(jìn)行分類，如紅色系列：網(wǎng)易云音樂、京東、網(wǎng)易嚴(yán)選、網(wǎng)易考拉等等；也可以根據(jù)產(chǎn)品氣質(zhì)分類，如文藝、時(shí)尚、科技、可愛等等。如圖（3-4）

4.圖片選擇很重要

圖片在APP有著舉足輕重的地位，新手往往忽視了圖片的重要性，在做界面的時(shí)候，隨意配圖，導(dǎo)致整個(gè)界面凌亂不堪。圖片的展現(xiàn)形式和圖片的質(zhì)量都影響著用戶對產(chǎn)品的感官體驗(yàn)。

4.1圖片比例

1:1的圖片比例是app中常見的一種圖片比例，規(guī)整簡單，易排布，能夠突出主體。常用于產(chǎn)品展示，電商類app用得較多。如圖網(wǎng)易嚴(yán)選（4-1）

4:3的圖片比例可以使圖像更緊湊，更易構(gòu)圖。多用于左右排版的文章列表，和旅游租房民宿類的產(chǎn)品圖。如圖自如

16:9的圖片比例視野開闊，適合橫向構(gòu)圖。也是app設(shè)計(jì)中常用的一種尺寸。在視頻影音娛樂類的產(chǎn)品中經(jīng)常使用。如圖騰訊視頻

.2二次處理

許多時(shí)候我們在網(wǎng)上找的圖都不是非常如意的，這個(gè)時(shí)候我們就要對圖片進(jìn)行二次處理。

調(diào)色：我們找到一張圖片時(shí)，可以對圖片進(jìn)行對比度的增強(qiáng)，調(diào)整色階曲線，這樣會增加圖片質(zhì)感。如果色調(diào)不符合產(chǎn)品調(diào)性，可以用正片疊底的方法加一個(gè)顏色遮罩，然后調(diào)整透明度。以達(dá)到色調(diào)的統(tǒng)一。

圖片的構(gòu)圖比例也必須要一致，在做同一板塊的時(shí)候要保持圖片構(gòu)圖比例一致性。如在做在人物展示的設(shè)計(jì)中，如果并列出現(xiàn)多個(gè)人物形象，為了保持視覺平衡我們需要調(diào)整并列圖片的大小比例，就像所有角色都是在相同焦距下拍攝的。在人物上下位置的調(diào)整上面我們要盡量控制視平線的方向，讓他們的眼睛處于相同的位置左右。如圖（4-5）

4.3產(chǎn)品調(diào)性

app設(shè)計(jì)中圖片的使用，能直接決定產(chǎn)品的整體調(diào)性。從圖片質(zhì)量和圖片規(guī)范上來進(jìn)行講解。

圖片質(zhì)量

越來越多的產(chǎn)品對圖片質(zhì)量開始加以重視，圖片的質(zhì)量影響著整個(gè)界面的格調(diào)。如圖（4-6）

圖片規(guī)范

圖片規(guī)范就是保持整個(gè)產(chǎn)品的圖片構(gòu)圖一致、背景一致。多用于電商產(chǎn)品中，例如網(wǎng)易考拉，在改版前后，對商品圖做了一個(gè)規(guī)范性設(shè)計(jì)。網(wǎng)易考拉在整體品牌傳達(dá)上使用的模特照片應(yīng)是排除大面積的純色或復(fù)雜的背景元素的簡潔的圖片。應(yīng)避免使用擁有過分復(fù)雜的背景、夸張的造型、花哨的道具等妨礙品牌本質(zhì)的元素的模特以及商品照片。如圖網(wǎng)易嚴(yán)選