文章來源：快資訊  作者：曼巴怡君

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

 

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

一款A(yù)PP最先呈現(xiàn)在用戶眼前往往是從引導(dǎo)頁開始，在這個(gè)情況下，一個(gè)APP設(shè)計(jì)的好壞、使用否能吸引用戶可以在引導(dǎo)頁的設(shè)計(jì)上有第一感知。想讓APP設(shè)計(jì)更加有趣，引導(dǎo)頁設(shè)計(jì)需要遵循以下幾點(diǎn)。

信息傳遞表現(xiàn)技巧

①文字信息的傳遞。文字是手機(jī)APP引導(dǎo)頁表現(xiàn)形式中最基礎(chǔ)的信息傳遞載體，也是最難把控的設(shè)計(jì)元素。簡短的文字更易于引導(dǎo)頁的信息傳遞，以文字信息的傳遞的為主的APP引導(dǎo)頁設(shè)計(jì)表現(xiàn)形式，需要對(duì)引導(dǎo)頁界面的文字進(jìn)行優(yōu)化，還可以通過文字字體的趣味形態(tài)和排列組合方式讓用戶眼前一亮。

②圖片信息的傳遞。AP引導(dǎo)頁設(shè)計(jì)的圖片信息，以全屏的人物圖片為主，在不同的圖片中，用戶對(duì)于人臉和具有動(dòng)感的圖片比較容易關(guān)注，而且通過圖片可以通過對(duì)用戶視覺的刺激使其很快的產(chǎn)生聯(lián)想并產(chǎn)生行為，給予用戶很好的代入感。

撞色搭配表現(xiàn)技巧

色彩是讓用戶與界面生交互的關(guān)鍵性設(shè)計(jì)元素，用戶會(huì)對(duì)引導(dǎo)頁的界面色彩留下很久的印象，是因?yàn)樯适且曈X傳遞情感的最直觀因素，也是用戶視覺中最敏感的部分。其中“撞色”搭配就是一種極其吸引用戶眼球的色彩運(yùn)用方案。

①互補(bǔ)色搭配的形式。互補(bǔ)色搭配又稱強(qiáng)度對(duì)比色搭配，也是一種絕對(duì)的色彩搭配，例如：互補(bǔ)色搭配中紅與綠、紫與黃、藍(lán)與橙，對(duì)這種很強(qiáng)分離性的色彩進(jìn)行搭配，很容易讓界面的色彩關(guān)系拉開距離，縮短用戶對(duì)APP引導(dǎo)頁視覺上選擇的時(shí)間，表現(xiàn)出一種獨(dú)特的視覺對(duì)比與平衡。

②對(duì)比色搭配的形式。對(duì)比色是人的視網(wǎng)膜對(duì)色彩平衡的作用，是人通過視覺感官而產(chǎn)生的一種基本的生理反應(yīng)。對(duì)比色的搭配不同于完全對(duì)立的互補(bǔ)色，同時(shí)處于相對(duì)對(duì)立的區(qū)域中兩大類色彩之間的搭配。對(duì)比色搭配在24色相環(huán)上120度至180度之間的兩種顏色之間的搭配。

界面構(gòu)成表現(xiàn)技巧

①規(guī)范式界面布局。規(guī)范式界面布局通常以大面積的留白為主，通過對(duì)界面的分割，讓信息元素成一種強(qiáng)烈的視覺聚焦，使用戶對(duì)界面產(chǎn)生參與感。

APP引導(dǎo)頁中的留白主要分為重度留白與輕度留白，重度留白傳遞的不是產(chǎn)品的基礎(chǔ)信息，而是概念、氣質(zhì)和態(tài)度；輕度留白傳遞的往往是直觀的傳達(dá)信息。

②自由式界面布局。自由式界面布局一般展示的內(nèi)容比較多，在多個(gè)界面的APP引導(dǎo)頁中闡述同一個(gè)訴求，每個(gè)界面的關(guān)系通常是并列的關(guān)系，確定界面文字、圖形元素的最大值和最小值，讓視覺聚焦在一個(gè)體塊中，再從這個(gè)體塊中對(duì)信息進(jìn)行排列組合，引導(dǎo)用戶的視覺流向。

③串聯(lián)式界面布局。串聯(lián)式界面布局要求引導(dǎo)頁展示的內(nèi)容要簡明扼要，界面中所有的元素都要按照一定的順序有機(jī)的排列，并且頁面之間要有一定的邏輯關(guān)系。

混搭表現(xiàn)技巧

①文字與界面的混搭。手機(jī)APP引導(dǎo)頁不單單是一個(gè)界面的設(shè)計(jì)，還包含了用戶與界面的互動(dòng)性體驗(yàn)。APP引導(dǎo)頁的界面屬于一個(gè)平面的空間，將引導(dǎo)頁界面再放置到引導(dǎo)頁中，并配以精簡的文字說明，讓用戶與界面展示的內(nèi)容之間產(chǎn)生交互，這種交互更直觀。 ②文字與插圖的混搭。文字為輔助元素，插圖為主要元素。插圖作為彰顯APP引導(dǎo)頁獨(dú)特的表現(xiàn)形式，在設(shè)計(jì)中插圖元素應(yīng)該盡量選取具體的、簡單易懂的，確保插圖元素傳遞給用戶的信息是明確并且易于識(shí)別的。運(yùn)用插圖元素，配以精簡的文字，設(shè)置相應(yīng)的情景氛圍。可以讓用戶更直觀、更迅速了解APP產(chǎn)品。

③靜態(tài)界面與動(dòng)態(tài)元素的混搭。用戶對(duì)于靜態(tài)界面的注意力是有限的，因此APP引導(dǎo)頁的設(shè)計(jì)中除了靜態(tài)的界面展示形式，還可以運(yùn)用一些生動(dòng)有趣的動(dòng)態(tài)元素。

動(dòng)態(tài)元素具備了動(dòng)態(tài)的畫面和音效，可以讓用戶眼前一亮，在引導(dǎo)頁界面之間切換時(shí)產(chǎn)生視覺上的觸動(dòng)、產(chǎn)生響應(yīng)，為原本靜態(tài)的界面增添了動(dòng)的點(diǎn)，減少了用戶對(duì)于初次使用引導(dǎo)頁的陌生感，這些動(dòng)態(tài)的元素可以闡述一整個(gè)完整的信息，也可以并列的闡述一些信息。

但是界面中的動(dòng)態(tài)元素不要加入太多，最好只有一處，過多的動(dòng)態(tài)元素會(huì)影響用戶的視覺中心，讓用戶不知道看哪里好。靜態(tài)界面與動(dòng)態(tài)元素的混搭可以讓用戶在接受靜態(tài)元素的同時(shí)，與界面產(chǎn)生互動(dòng)享受不一樣的視覺和聽覺的體驗(yàn)。 

文章來源：快資訊  作者：衍果設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

 

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

在互聯(lián)網(wǎng)產(chǎn)品日趨成熟的今天，APP同質(zhì)化越來越嚴(yán)重。

而一個(gè)設(shè)計(jì)精致APP不應(yīng)漏過任何一個(gè)細(xì)節(jié)，美觀、可用和高效的界面設(shè)計(jì)都需要花費(fèi)大量的時(shí)間從細(xì)節(jié)上去打磨，并從多方面鉆研并創(chuàng)造出打動(dòng)人心的UI/UE設(shè)計(jì)。

在這里，小易為大家總結(jié)了10個(gè)簡單直觀的提升設(shè)計(jì)感的小細(xì)節(jié)，一起來看看吧~

1、文本顏色構(gòu)建層次

文本單純使用字體大小對(duì)比，強(qiáng)調(diào)的感覺往往不夠濃烈，我們可以嘗試結(jié)合色彩來營造更好的對(duì)比效果。

通過使用顏色的深淺，為元素賦予不同的重要性，建立視覺上的層次結(jié)構(gòu)。

甚至可以采用兩到三種顏色來獲得對(duì)比效果：

主要內(nèi)容使用深灰色（諸如標(biāo)題，但是不要用純黑）；

次要內(nèi)容使用灰色（比如商品介紹）；

輔助性內(nèi)容采用淺灰色（比如發(fā)布日期）

2、統(tǒng)一色調(diào)

設(shè)計(jì)時(shí)避免用過多的顏色，選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來增加均衡。

如果項(xiàng)目允許，必須使用固定的色板，那么可以通過調(diào)整基礎(chǔ)色的飽和度和明度，利用這種簡單的方式為設(shè)計(jì)增加一致性。

3、干凈的陰影

陰影可以增加元素的深度，引起用戶的注意力，同時(shí)也能增強(qiáng)畫面的視覺層次感。

相比于采用大范圍的擴(kuò)散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，輕柔的陰影會(huì)讓畫面更精致。

如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會(huì)讓畫面更加扁平，讓視覺變得厚重，從而使設(shè)計(jì)變得不精致。

4、個(gè)性的圖標(biāo)設(shè)計(jì)

大多數(shù)App都是默認(rèn)灰色，選中填充品牌色，這樣的設(shè)計(jì)太普通，太常見了。

要想讓標(biāo)簽欄圖標(biāo)設(shè)計(jì)精致和富有個(gè)性，可以豐富每一個(gè)選中態(tài)圖標(biāo)的視覺表現(xiàn)，例如給圖標(biāo)加上背景和表情，也會(huì)增加用戶的體驗(yàn)感。

5、Tab的設(shè)計(jì)感

Tab是App設(shè)計(jì)中最常見的控件之一，它源自Material Design的設(shè)計(jì)規(guī)范。

Tab的設(shè)計(jì)較為簡單，通常是使用一組文字標(biāo)簽，通過顏色或在標(biāo)簽下加上小長條來區(qū)分兩者的狀態(tài)。

可正因?yàn)樗唵?，卻越難設(shè)計(jì)出彩，要發(fā)揮極大的設(shè)計(jì)想象力，跳脫出設(shè)計(jì)規(guī)范的限制，才能找到完美的方案。

例如蝦米音樂的Tab選中態(tài)是一段音頻波線，再配合文字的大小對(duì)比，一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來了。

6、統(tǒng)一設(shè)計(jì)元素

在App中的每一個(gè)界面都有許多元素，那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。

通常個(gè)人中心的標(biāo)簽欄圖標(biāo)是一個(gè)人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續(xù)使用。

7、符合產(chǎn)品氣質(zhì)的字體

選擇符合產(chǎn)品氣質(zhì)的字體，可以與產(chǎn)品的定位相吻合，傳遞給用戶正確的情感意識(shí)。

雖然默認(rèn)字體可以滿足大多數(shù)App 的設(shè)計(jì)需求，但系統(tǒng)字體并沒有什么特色，會(huì)喪失App的品類感。

例如在運(yùn)動(dòng)類App中更適合粗壯的斜體來傳遞力量、爆發(fā)力、速度的感覺，換成系統(tǒng)字體后，整體感覺在氣勢上就變?nèi)趿撕芏唷?

8、第三方圖標(biāo)風(fēng)格統(tǒng)一

第三方圖標(biāo)也是UI設(shè)計(jì)師最常忽略的內(nèi)容，往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置，沒有針對(duì)它們再設(shè)計(jì)。

一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過任何的細(xì)節(jié)，我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù)，對(duì)第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì)。

9、圖片中尋找色彩

App中優(yōu)美的圖文設(shè)計(jì)非常重要，能帶給用戶極佳的視覺享受。

我們經(jīng)?？吹轿淖织B加在圖片背景上的設(shè)計(jì)樣式，為了減少圖片背景對(duì)文字的干擾，通常會(huì)疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這種設(shè)計(jì)過于俗套。

我們可以從圖片中提取主色調(diào)用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級(jí)和富有設(shè)計(jì)感。

10、卡片式設(shè)計(jì)

現(xiàn)在的UI界面設(shè)計(jì)中，卡片式設(shè)計(jì)已經(jīng)是一種非常常見的設(shè)計(jì)形式。

它有利于信息分層和整合，劃分出更加清晰的組織結(jié)構(gòu)，實(shí)現(xiàn)復(fù)雜內(nèi)容的簡化處理，提高空間利用率。

文章來源：快資訊  作者：衍果設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

 

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

無論是設(shè)計(jì)網(wǎng)頁還是海報(bào)，背景圖片都是最常用、也最能體現(xiàn)當(dāng)下設(shè)計(jì)趨勢的一種設(shè)計(jì)元素。在設(shè)計(jì)APP 的時(shí)候同樣是如此。過去的10年當(dāng)中，用戶的品味發(fā)生了不小的變化，而現(xiàn)在，整個(gè)設(shè)計(jì)趨勢上，似乎正處在一個(gè)關(guān)鍵的轉(zhuǎn)折點(diǎn)上。

在我們所能觀察到的諸多設(shè)計(jì)當(dāng)中，淺色的背景是當(dāng)之無愧的主流。淺色背景本身就不太可能喧賓奪主，讓視覺主體更加突出。而如今，我們逐漸發(fā)現(xiàn)，背景還具備補(bǔ)充主體的功能，并且這種補(bǔ)充是潛移默化的。背景的功能性其實(shí)還可以強(qiáng)化，這種思路可以在如今的APP 界面設(shè)計(jì)當(dāng)中應(yīng)用，讓整體設(shè)計(jì)更加平衡。

如今的UI設(shè)計(jì)師大都明白在背景中融入元素來吸引用戶的眼球，提升產(chǎn)品調(diào)性，提高內(nèi)容的可讀性。而這也促使圖片、插畫、色塊等元素在背景當(dāng)中發(fā)揮了更大的作用。

1、為創(chuàng)造戲劇感，使用色彩分割背景

分屏式設(shè)計(jì)并不新鮮，它是一個(gè)存在了很長時(shí)間的設(shè)計(jì)趨勢了。在桌面端的屏幕上，分屏式設(shè)計(jì)一直都很有效，寬廣的屏幕讓設(shè)計(jì)師有足夠的施展空間，但是在移動(dòng)端上則是個(gè)挑戰(zhàn)。

在 UI 設(shè)計(jì)師們找到了解決方案，對(duì)比色是增加視覺吸引力的最佳方式。

在 Tubik Studio 的這個(gè)設(shè)計(jì)案例當(dāng)中，設(shè)計(jì)師使用不均等分布的色塊來分割屏幕，同時(shí)使用白色背景區(qū)塊來承載主體內(nèi)容，避免被背景色彩干擾。設(shè)計(jì)師充分利用了對(duì)比色的對(duì)抗性，以及和白色之間的對(duì)比度，功能完善，但是有趣又漂亮。

2、為營造氛圍，在背景上疊加輔助性圖形元素

雖然在背景圖片中疊加各種圖形化的元素聽起來很奇怪，但是確實(shí)是逐漸流行起來的一種背景設(shè)計(jì)玩法。不過，這存在一種風(fēng)險(xiǎn)，就是如果疊加太多的圖形化元素，會(huì)讓整體看起來過于雜亂。盡量在豐富視覺和制造視覺污染之間找到平衡，最終的設(shè)計(jì)效果，能夠給你帶來意料之外的優(yōu)質(zhì)效果。

雖然手機(jī)越來越大，但是屏幕空間依然很寶貴。通過疊加一些特定的圖形元素來創(chuàng)造視覺深度，給用戶以空間感。

這種背景設(shè)計(jì)的另外一個(gè)好處在于，你可以讓整個(gè)UI顯得更加富有視覺吸引力。在設(shè)計(jì)的時(shí)候，需要注意的是，要保持元素之間的一致性，確保不同的元素在屏幕上呈現(xiàn)的時(shí)候，仍然保持協(xié)調(diào)。

3、為保持整體感，使用整圖作為背景

使用整張圖片作為背景，一直被UI/UX領(lǐng)域的設(shè)計(jì)師所爭論。對(duì)，你沒看錯(cuò)，這個(gè)事情一直存在爭議。有人非常喜歡使用圖片背景，有人則完全無法接受這種呈現(xiàn)方式。

但是撇開個(gè)人喜好，趨勢上，這種背景運(yùn)用方式還是越來越流行了。在APP的UI界面中，如果你能靈活自由地使用全屏背景的化，對(duì)于接下來的設(shè)計(jì)肯定是有所助益的。

圖片所呈現(xiàn)的信息量當(dāng)然是毋庸置疑的，更重要的是如何貼合品牌和氛圍，呈現(xiàn)出應(yīng)有的氣場。

當(dāng)然，最核心的技巧，是在于透明度的控制，和內(nèi)容框的設(shè)計(jì)。為了避免信息和背景之間的對(duì)比度不足，合理的方法是使用內(nèi)容框?qū)⑶熬暗脑爻休d起來。而為了避免背景圖片喧賓奪主，還可以借助透明度的控制，來確保背景圖片更加平滑自然，不會(huì)影響到閱讀和使用。

4、需要強(qiáng)化感受和情緒，使用漸變色背景

漸變色在幾年前回歸之后，在設(shè)計(jì)當(dāng)中的運(yùn)用范圍越來越廣。漸變色不僅賦予設(shè)計(jì)更加強(qiáng)烈的個(gè)性，而且能夠和用戶之間產(chǎn)生足夠的情感共鳴。

你可以使用漸變色來營造調(diào)性，創(chuàng)造對(duì)比，甚至還可以借助漸變色才來作為視覺線索和引導(dǎo)。比如當(dāng)你在背景中使用藍(lán)色的時(shí)候，可以通過深淺漸變來創(chuàng)造方向性，引導(dǎo)用戶向特定的地方瀏覽。

但是，漸變色背景流行起來最重要的原因還是它的情感共鳴的能力。許多 UI 設(shè)計(jì)師已經(jīng)意識(shí)到心理因素在移動(dòng)端設(shè)備中的巨大影響，能否喚醒用戶的情感是關(guān)鍵。

漸變色背景的設(shè)計(jì)玩法有很多，變化幅度的大小，方向，對(duì)比度和亮度的變化差異，都會(huì)帶來不同的影響。當(dāng)然，漸變背景同樣必須遵循一個(gè)原則，那就不能喧賓奪主。在設(shè)計(jì)的時(shí)候，同樣可以借助透明度的調(diào)整，來降低它和CTA按鈕之間的對(duì)比度。

5、為了強(qiáng)化故事性，使用插畫背景

插畫師可以根據(jù)需求更加自由地繪制足以滿足不同需求的插畫，獨(dú)特，個(gè)性，定制化。不過，想要?jiǎng)?chuàng)建足以代表企業(yè)、團(tuán)隊(duì)、產(chǎn)品或者用戶角色的插畫，并不能憑空創(chuàng)建，而是需要一個(gè)研究過程，通過調(diào)研和分析，才能提出需求，再做執(zhí)行。它是一個(gè)機(jī)器人，還是一個(gè)更加擬真的角色？又或者使用動(dòng)物擬人化的形象更合適？

許多設(shè)計(jì)師更加傾向于在APP中使用自定義插畫，因?yàn)檫@樣更加自由輕松地達(dá)成各種目標(biāo)，從新用戶引導(dǎo)，到提供教程。

6、基礎(chǔ)但通用，使用幾何圖形來構(gòu)建背景

幾何圖形本身是非?；A(chǔ)的元素，它們的含義和感覺非?；A(chǔ)，也具有普世性。雖然它們很簡單，但是在UI 設(shè)計(jì)中非常強(qiáng)大。單一的幾何形狀是簡單的，但是結(jié)合不同的效果、不同的組合，即使使用簡單的幾何形狀，也能夠發(fā)揮出多樣的變化。

當(dāng)然，具體怎么運(yùn)用幾何圖形，還要看你的UI界面上，有哪些東西，作為背景的幾何圖形和 UI 中的主體元素之間，空間關(guān)系要怎么控制，怎樣保持優(yōu)雅簡潔，確保品牌信息的傳達(dá)。

結(jié)語

就像 UI 界面中其他的元素一樣，背景同樣值得關(guān)注和規(guī)劃。最重要的是，你想表達(dá)什么，傳達(dá)什么樣的信息，想借助整個(gè)UI 界面來實(shí)現(xiàn)什么樣的功能，規(guī)劃好了才能更好地呈現(xiàn)內(nèi)容。

背景的選取之所以會(huì)成為UI設(shè)計(jì)趨勢的關(guān)注點(diǎn)，很大程度是因?yàn)閁I 和UX 設(shè)計(jì)的關(guān)注點(diǎn)開始越來也深入到設(shè)計(jì)的方方面面，大家考慮問題也需要越來越細(xì)致。

文章來源：快資訊 作者：衍果設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

 

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

前言

「招聘管理系統(tǒng)」是 打造以應(yīng)聘者為中心的先進(jìn)招聘體系，定制化招聘解決方案，提升企業(yè)人才獲取競爭力的產(chǎn)品。主要功能包括招聘需求及職位管理、人才資源運(yùn)營、招聘過程管理、應(yīng)聘者錄用管理、招聘數(shù)據(jù)分析，同時(shí)基于SaaS模式，招聘系統(tǒng)覆蓋全流程的功能支撐與PaaS平臺(tái)強(qiáng)大的應(yīng)用拓展和集成，實(shí)現(xiàn)個(gè)性化功能模塊的快速配置與開發(fā)。

在 ToB 領(lǐng)域，面對(duì) 業(yè)務(wù)門檻高、 產(chǎn)品邏輯復(fù)雜、客戶決策鏈長等重重困難和挑戰(zhàn)，通過該項(xiàng)目改版升級(jí)的設(shè)計(jì)實(shí)踐，我總結(jié)了 這次改版的設(shè)計(jì)流程和方法，希望能為 ToB 領(lǐng)域的設(shè)計(jì)同行提供參考，共同探索交流。

設(shè)計(jì)流程

一、理解業(yè)務(wù)

理解業(yè)務(wù)，主要是理解業(yè)務(wù)邏輯、用戶角色、使用場景；

1、業(yè)務(wù)流程圖

通過客戶現(xiàn)場訪談、問卷調(diào)查、用戶行為數(shù)據(jù)分析、競品分析、查閱行業(yè)報(bào)告等方式，梳理業(yè)務(wù)流程的關(guān)鍵節(jié)點(diǎn)，這些節(jié)點(diǎn)也就是我們后續(xù)設(shè)計(jì)的關(guān)鍵步驟。

2、用戶角色

梳理出業(yè)務(wù)流程之后，從業(yè)務(wù)流程中可以找到對(duì)應(yīng)的用戶角色。招聘平臺(tái)的用戶角色包括招聘專員、招聘經(jīng)理、部門主管、面試官、應(yīng)聘者、獵頭、企業(yè)員工等，最主要的用戶角色是招聘專員。

通過角色畫像，減少我們在設(shè)計(jì)過程中的盲目設(shè)計(jì)和閉門造車，時(shí)刻以用戶的視角和感受來設(shè)計(jì)。

下圖是“招聘專員”的用戶畫像

2、場景分析/用戶故事

場景化設(shè)計(jì)的定義：根據(jù)特定時(shí)間、使用情景、及用戶的特性，進(jìn)行定制化的設(shè)計(jì)，使用戶按照產(chǎn)品設(shè)定的路線快速完成目標(biāo)盡可能的給予用戶驚喜與感動(dòng)。

可以應(yīng)用“體驗(yàn)設(shè)計(jì)畫布”來幫助我們更好的梳理場景。

場景化分析的好處在于通過對(duì)用戶使用場景進(jìn)行分析，有利于幫助我們了解到當(dāng)前場景下用戶的需求和痛點(diǎn)，并通過設(shè)計(jì)手段進(jìn)行優(yōu)化，以更好滿足用戶體驗(yàn)?zāi)繕?biāo)和產(chǎn)品商業(yè)目標(biāo)。

二、尋找機(jī)會(huì)

1. 「操作流程」是否高效

   去除冗余：去掉哪一步驟仍能跑通流程；預(yù)判操作：下一步驟是否可預(yù)判，提前幫用戶完成；自定義操作：高頻操作是否允許用戶自定義從而減少操作步驟；

2.「內(nèi)容反饋」是否合適

符合預(yù)期：每一個(gè)操作后呈現(xiàn)的頁面或信息內(nèi)容是不是用戶想要的；

一致性：不同界面同一個(gè)操作或樣式，操作后是否呈現(xiàn)一致的內(nèi)容？

輕量化：采用更輕量的內(nèi)容呈現(xiàn)方式，是否依然符合場景，減輕操作成本；

3.「信息傳達(dá)」是否清晰

邊界清晰：能夠明顯區(qū)分各模塊或信息，遵循格式塔原理；

易獲?。?/strong>主要模塊或信息放置在容器邊界的左上部分，因?yàn)橛脩糸喿x習(xí)慣從左到右、從上到下；

結(jié)構(gòu)簡潔：同一層級(jí)信息數(shù)量遵循7±2原則，若超過則考慮重新整合信息結(jié)構(gòu)，或是提供更高效的信息獲取方式；

4.「視覺表達(dá)」是否明確

減少認(rèn)知負(fù)擔(dān)：是否有信息內(nèi)容可用視覺元素代替或輔助，規(guī)避用戶閱讀文字加重認(rèn)知負(fù)擔(dān)；

表意清晰：通過視覺元素能夠快速了解信息大意，而不產(chǎn)生歧義；

降低疲勞：界面視覺是否容易加速用戶的疲勞感；

5.「情感關(guān)懷」體現(xiàn)溫度

正向情感：文案是否傳達(dá)了正向情緒，避開負(fù)面情緒；

貼近日常：信息呈現(xiàn)貼近日常習(xí)慣，非必要不使用專業(yè)術(shù)語；

積極提供方案：當(dāng)出現(xiàn)異常情況時(shí)，是否有解決方案替代異常提示；

三、制定策略

1.「操作流程」優(yōu)化操作路徑

2.「內(nèi)容反饋」更加人性

3.「信息傳達(dá)」信息整合，清晰高效

4.「視覺表達(dá)」一致、易獲取、動(dòng)線合理

5.「情感關(guān)懷」體現(xiàn)溫度

四、原型設(shè)計(jì)

經(jīng)過前面的理解業(yè)務(wù)、尋找機(jī)會(huì)、制定策略之后就可以進(jìn)行原型設(shè)計(jì)了，考驗(yàn)大家設(shè)計(jì)功底的時(shí)候到了，這里不再贅述。

五、效果驗(yàn)證

1.驗(yàn)證維度

2.驗(yàn)證方式

我們主要通過系統(tǒng)功能埋點(diǎn)、系統(tǒng)NPS信息收集、客戶現(xiàn)場和電話回訪、內(nèi)部客戶外部客戶問卷調(diào)查等方式來收集用戶反饋信息。

3.驗(yàn)證結(jié)果

六、總結(jié)回顧

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：站酷   作者：ZZiUP

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

年少時(shí)，經(jīng)常聽到身邊的同事聊一些名詞概念，羨慕之余猶豫羞于提問，導(dǎo)致我經(jīng)常會(huì)陷入其中無法自拔，痛苦不已；過了這么多年，大多數(shù)概念都隨著工作的原因慢慢被理解和消化，或逐漸消失或不再提及。但唯獨(dú)，“設(shè)計(jì)系統(tǒng)”這個(gè)詞陰魂不散，反反復(fù)復(fù)的出現(xiàn)在我的面前，特別是在面試這個(gè)場景下，幾乎每一場都會(huì)有這個(gè)詞被提到。

也可能是每個(gè)候選人的認(rèn)知不同，對(duì)設(shè)計(jì)系統(tǒng)的理解略有不同，有的朋友會(huì)認(rèn)為設(shè)計(jì)系統(tǒng)是玄學(xué)，大話一套套的，根本沒卵用；也有的朋友會(huì)把設(shè)計(jì)系統(tǒng)和設(shè)計(jì)規(guī)范劃了等號(hào)。其實(shí)怎么理解跟輸出環(huán)境有很大的關(guān)系，不同的產(chǎn)品在不同的階段一定程度上對(duì)設(shè)計(jì)系統(tǒng)的依賴是有一定偏向性的，這就會(huì)導(dǎo)致設(shè)計(jì)師的認(rèn)知偏差；

也源于最近做B端稍微多一些，不如今天就以toB產(chǎn)品為例來嘮嘮我認(rèn)知下的設(shè)計(jì)系統(tǒng)是什么以及如何幫助設(shè)計(jì)落地執(zhí)行的。

理論上來講，設(shè)計(jì)系統(tǒng)分為兩個(gè)大部分，一部分是指導(dǎo)思想，另一部分是實(shí)際產(chǎn)出；前者去指導(dǎo)后者執(zhí)行，二者的關(guān)系像極了競技運(yùn)動(dòng)中的教練安排的“戰(zhàn)術(shù)”和球員場上的“執(zhí)行動(dòng)作”，如果用一張圖來表示，大概就是這么個(gè)事：

通過上面這張圖不難發(fā)現(xiàn)其實(shí)設(shè)計(jì)規(guī)范也就僅僅是系統(tǒng)中的一部分而已， 核心在設(shè)計(jì)語言的定義上，這是一個(gè)復(fù)雜的推理過程，需要對(duì)業(yè)務(wù)和設(shè)計(jì)同時(shí)有很深的理解，牽扯到很多虛虛實(shí)實(shí)結(jié)合的部分，我試圖總結(jié)了一些平時(shí)的思考來重點(diǎn)說一說這幾個(gè)模塊。

1. 語言構(gòu)成

需要強(qiáng)調(diào)的是，要設(shè)計(jì)一套“設(shè)計(jì)語言”，首先需要聚焦到“語言”這個(gè)詞上，通常我們認(rèn)知里的語言無非是一套溝通方式，因?yàn)槲覀儗?duì)他習(xí)以為常，所以并沒有更進(jìn)一步的了解，我試圖去查了下語言的來源，以及為什么世界上會(huì)出現(xiàn)這么多語言之類的問題，搜過出來的結(jié)果很多很復(fù)雜，但概括來說就是支撐一套語言的核心分為“語言特性”以及“語言構(gòu)成”這兩大部分。

第一塊，詞匯：ta的作用是讓你表達(dá)出想法，就好比如果你跟我一樣English is not good的情況下，還嘚嘚瑟瑟的出國游玩，一定也經(jīng)歷過用“蹦單詞+比劃”的方式去問路、點(diǎn)菜吧，典型的通過word的方式傳遞信息。

另一趴，語法，ta會(huì)讓你更順暢的表達(dá)出自己的想法，通過對(duì)詞匯的重組和編排，信息傳遞的有效性被大大增加，你可以通過“主動(dòng)賓”來陳述觀點(diǎn)或表達(dá)疑問，盡可能的豐富此刻你的所思所想。就像上面的例子，按照語法規(guī)則稍微調(diào)整一下，看起來就順暢多的多了~

那么如果映射到設(shè)計(jì)上，顯而易見，組件庫對(duì)應(yīng)詞匯，交互流程對(duì)應(yīng)語法；所以你會(huì)發(fā)現(xiàn)當(dāng)我們不斷迭代產(chǎn)品的時(shí)候，我們無非就是想把產(chǎn)品當(dāng)做一件事情講清楚罷了。

但需要注意的是，設(shè)計(jì)師喜歡用更多的組件去表達(dá)想法這個(gè)事本無可厚非，但千萬別過于執(zhí)著，因?yàn)楹芏唷敖M件”針對(duì)性極強(qiáng)，通用和復(fù)用的價(jià)值不高，這就像我們經(jīng)常聽到的網(wǎng)絡(luò)詞匯一樣，一旦過了生命周期，這些詞就像成了過眼云煙，大概率不會(huì)再有用處。所以針對(duì)這種情況（之前的文章也有提到過），我建議要在組件的分類上下功夫，建立不同類型的分類幫助你應(yīng)對(duì)不同的場景，也可以有效的避免組件庫的肥胖癥：

再就是當(dāng)一套組件被創(chuàng)造出來，ta需要遵循一定的規(guī)則形成一個(gè)完整的頁面，跟我們造句幾乎一模一樣；所以這個(gè)時(shí)候充當(dāng)語法的交互流程就至關(guān)重要?，F(xiàn)實(shí)情況下，往往交互形態(tài)是千變?nèi)f化的，經(jīng)常性的會(huì)因?yàn)闃I(yè)務(wù)場景的不同創(chuàng)造一些流程出來；但如果是基于語言的背景下，我們需要盡可能的抽練一些標(biāo)準(zhǔn)化的規(guī)則形成語法，我們稱之為“設(shè)計(jì)模式”：

這段鬼話理解起來太麻煩了，我試著翻一下大概就是：“為了避免重復(fù)造輪子，就搞了幾個(gè)通用的流程，以保證產(chǎn)品開發(fā)流程的效能問題”，嗯，就這么個(gè)意思...

以material design為例，官方給出了給出了很多規(guī)則，我仔細(xì)看了看，重新編組和分類了下：

我從中挑了搜索這個(gè)比較通用的模式來簡單講下；拋開組件的“點(diǎn)”思維，需要我們定義的是“信息交互”的“線性”流程，我試著把其中的每個(gè)環(huán)節(jié)提煉了出來，抽練了一個(gè)流程出來：

通過上圖也許你會(huì)發(fā)現(xiàn)“模式”注重的是流程節(jié)點(diǎn)的體驗(yàn)感知（用戶跟產(chǎn)品交互的一來一往），并注重封裝成標(biāo)準(zhǔn)化方案。另外有一點(diǎn)，我把整個(gè)搜索的過程分為了2個(gè)個(gè)小線程——輸入行為和消費(fèi)行為，這是為了以后團(tuán)隊(duì)協(xié)作更好的理解這條模式的運(yùn)作方式，以及之后的拓展，舉個(gè)例子：產(chǎn)品經(jīng)理決定加一個(gè)歷史搜索（就是顯示用戶過往的搜索結(jié)果），這個(gè)時(shí)候設(shè)計(jì)師就可以把這個(gè)功能當(dāng)做一個(gè)拓展包，直接扔到這個(gè)主干里來：

綜上， 模式最重要的起點(diǎn)和終點(diǎn)（可以理解成為目標(biāo)和結(jié)果），那么中間的過程就是可以被隨意定制和改變的，這也是模式的靈活性。

另外，toB CRM鼻祖salesforce在自己的設(shè)計(jì)網(wǎng)站上公布了他們的設(shè)計(jì)模式，給出了一些特定的場景下的解決方案，不過寫的相對(duì)更偏組件流程一些：

總的來說呢， 設(shè)計(jì)模式在互聯(lián)網(wǎng)設(shè)計(jì)的發(fā)展上，一定程度把交互設(shè)計(jì)師的價(jià)值充分利用了，因?yàn)閠a的存在，讓設(shè)計(jì)系統(tǒng)不再是UI設(shè)計(jì)師的專屬，更不是幾個(gè)顏色和字號(hào)就可以被定調(diào)的，ta的作用一直都是幫助一款產(chǎn)品在成為優(yōu)秀產(chǎn)品的道路上，傳遞出更“別具一格”且“優(yōu)雅”的信息；

PS . 插個(gè)有的沒的的小話題，一個(gè)很好玩的事，如果你細(xì)心琢磨的話，也許會(huì)發(fā)現(xiàn)其實(shí)組件本身也是帶有一定的潛在交互，這種交互不需要你特意安插，天生就有，就好比一個(gè)按鈕擺在那，在沒有任何引導(dǎo)的情況下，正常人也知道點(diǎn)一點(diǎn)。所以映射到語言里，語法貌似并不是必要的（當(dāng)然ta的存在是為了設(shè)計(jì)系統(tǒng)更完整，產(chǎn)品更好），比如這個(gè)爛大街的梗：

這種現(xiàn)象是著名的“貝葉斯理論”，利用相關(guān)信息總結(jié)出未知信息，也就是說我們的大腦是可以通過殘缺的信息來補(bǔ)足未知的信息的，人類的大腦真的是奇奇妙妙啊~

2. 語言特性

相比構(gòu)成，特性這個(gè)就好理解多了，相當(dāng)于設(shè)計(jì)原則這類的，我們需要通過一定的規(guī)則約束對(duì)語言有一個(gè)明確的指向；比如現(xiàn)代漢語就具備適應(yīng)性、開放性兩大特征。

同樣的，設(shè)計(jì)系統(tǒng)在被不斷使用和執(zhí)行的路上需要有明確的引導(dǎo)，一方面幫助現(xiàn)有產(chǎn)品應(yīng)對(duì)迭代的需求，另一方面保證組件、模式的不斷擴(kuò)容滿足各種適應(yīng)性場景，與之匹配的就是“設(shè)計(jì)原則”了。

但不得不說，作為面試官我個(gè)人不是很喜歡作品集里描述設(shè)計(jì)原則的時(shí)候就3個(gè)詞：“簡潔”“高效”“清晰”。并不是討厭這三個(gè)詞，而是當(dāng)我追問候選人為什么是這三個(gè)的時(shí)候，我得到的回復(fù)基本是Material Design（或其他大廠的設(shè)計(jì)系統(tǒng)）就是這么寫的亦或是其他很蒼白的回答，這無疑是暴露了對(duì)設(shè)計(jì)系統(tǒng)的認(rèn)知?dú)埲?，是一個(gè)非常掉分的互動(dòng)過程。其實(shí)，當(dāng)google、IBM、salesforce在對(duì)外宣講他們的設(shè)計(jì)原則的時(shí)候，也許就只有兩個(gè)字“清晰”，但背后或許有非常多的思考，甚至超乎你我的想象。

但...異乎尋常的是，AntDesign 的設(shè)計(jì)原則寫的很"深?yuàn)W"，憑我的功力真的看不出背后的東西，也不知道如何指導(dǎo)設(shè)計(jì)（也許他們是在探索設(shè)計(jì)哲學(xué)吧哈哈哈哈）：

在我設(shè)計(jì)過B端產(chǎn)品里，我更希望盡可能的把 設(shè)計(jì)原則按照不同角色視角的方式去劃分，舉個(gè)例子：

假設(shè)現(xiàn)在我們正在為一款工具類SaaS系統(tǒng)做設(shè)計(jì)（0-1階段），這個(gè)時(shí)候最好確定一個(gè)方向來綜合考慮業(yè)務(wù)訴求、產(chǎn)品訴求、設(shè)計(jì)訴求和最重要的用戶訴求（這基本包含了從生產(chǎn)到實(shí)用這條流程線上的所有角色），ta們分別承載著不同角色的不同期望，互相成就又彼此制約；所以需要從4個(gè)角色的不同角度分別提取訴求：

當(dāng)我們對(duì)上述各方訴求梳理清楚后，首先要精準(zhǔn)的概括和整理這些內(nèi)容的權(quán)重和占比（需要注意的是，雖然允許多個(gè)原則存在，但也要有一定的側(cè)重和比例，這種做法在順暢的環(huán)節(jié)上不會(huì)有所建樹，但在多個(gè)原則沖突的情況下為了保全大局，順應(yīng)占比最大的原則是相對(duì)穩(wěn)妥的選擇，一定程度上可以幫助設(shè)計(jì)師規(guī)避掉不必要的糾結(jié)或撕逼的過程）；再然后基于當(dāng)下的情況產(chǎn)出相應(yīng)的原則，形成整套設(shè)計(jì)系統(tǒng)的王炸：

但在實(shí)際操作中，高度整合后的設(shè)計(jì)原則雖然指明了方向，但缺失了可衡量性，這就會(huì)導(dǎo)致“認(rèn)知偏差”的情況，因?yàn)槊總€(gè)人對(duì)圖例中的“高效”或“靈活”理解不同，會(huì)對(duì)同一個(gè)事物有不同的理解，就跟“小馬過河”這個(gè)典故一樣，小松鼠覺著水很深，小馬卻覺著也就那樣；也正是基于此，需要設(shè)計(jì)師們在此基礎(chǔ)上拆分明確的細(xì)則，幫助整個(gè)團(tuán)隊(duì)建立統(tǒng)一認(rèn)知：

到這一步基本上設(shè)計(jì)系統(tǒng)就被定了調(diào)了，我們可以明確對(duì)一個(gè)設(shè)計(jì)進(jìn)行評(píng)判和衡量，以“清晰”為例，我們有個(gè)B端產(chǎn)品里面有個(gè)表單填寫的頁面，需要用戶提供一些個(gè)信息，前兩天，團(tuán)隊(duì)一個(gè)設(shè)計(jì)師做了個(gè)方案是把表單新開tab，但產(chǎn)品覺著不夠清晰，反而覺著蒙版的形式更清晰。他就很疑惑，明明信息獲得了更好的展示咋就不清晰了？

說到底，是我們在做設(shè)計(jì)定義的時(shí)候，對(duì)“清晰”的認(rèn)知就是偏薄的，這個(gè)案例里面顯然第一個(gè)方案對(duì)信息的展示更加充分明了，但在這個(gè)場景下“清晰”并不僅僅指的是信息呈現(xiàn)，產(chǎn)品經(jīng)理希望用戶透過浮層能確認(rèn)當(dāng)前處在哪一步（或哪個(gè)頁面）也同樣是一個(gè)維度；從這個(gè)case里，你會(huì)發(fā)現(xiàn)，定義一個(gè)原則真的不僅僅是搬運(yùn)一個(gè)名詞這么簡單，所有的原則和特性必須遵循易于操作且合理，這樣才是一條合格且優(yōu)秀的原則。

ps . Salesforce的Lightning設(shè)計(jì)系統(tǒng)是我最喜歡的design system之一，原因很多，其中很重要的一條是因?yàn)樗麄冋娴氖?strong style="outline:0px;margin:0px;padding:0px;">把“美”作為一個(gè)很重要的原則：

嗯~nice，非常符合設(shè)計(jì)師的三觀，也很真實(shí)，很實(shí)在哈哈哈哈~

唉媽...啰嗦了一大頓，終于講到了設(shè)計(jì)規(guī)范了，作為設(shè)計(jì)系統(tǒng)的中樞，設(shè)計(jì)規(guī)范承接了指導(dǎo)思想和設(shè)計(jì)落地兩者，更像一本說明書，我挑了個(gè)點(diǎn)重點(diǎn)說一下（前面費(fèi)了太多口舌了，實(shí)在是沒有力氣再寫下去了哈哈哈哈）；

色彩體系的定制往往是重災(zāi)區(qū)，最常見的做法是把顏色用色塊的方式一字排開，一排叫做品牌色，一排叫做輔助色，還有一排是灰度：

這種定義存在很大的風(fēng)險(xiǎn)，就跟菜譜只告訴你需要哪些食材，不告訴你配比一樣，做出來的菜大概率是一塌糊涂，難以下咽。所以如果你正在建設(shè)一套團(tuán)隊(duì)協(xié)作級(jí)別的設(shè)計(jì)規(guī)范，務(wù)必要把“協(xié)作”當(dāng)做最重要的事，用比例的方式來告訴你的隊(duì)友他們應(yīng)該怎么做：

同理，其他的模塊，比如字號(hào)，間距，圖標(biāo)，我都建議盡可能的“場景化”，讓設(shè)計(jì)規(guī)范有一定的代入感，這樣會(huì)大大提高設(shè)計(jì)的效能和品質(zhì)。

拋出這個(gè)問題，是因?yàn)榻?jīng)常在不同的場合聽到“設(shè)計(jì)系統(tǒng)是扼殺設(shè)計(jì)師的創(chuàng)造力”之類的觀點(diǎn)；我個(gè)人是很難以認(rèn)同這個(gè)的，對(duì)design system的最大誤解就是限制設(shè)計(jì)師的想象力。首先設(shè)計(jì)系統(tǒng)本身就是一個(gè)龐大且復(fù)雜的設(shè)計(jì)觀集合，需要調(diào)動(dòng)整個(gè)團(tuán)隊(duì)的想象力和創(chuàng)造力，最終達(dá)到一個(gè)統(tǒng)一共識(shí)才有可能被實(shí)施和執(zhí)行；其次，創(chuàng)造力并不全是設(shè)計(jì)個(gè)btn或者彈窗，真正能展示創(chuàng)造力的是像樂高一樣，通過零件（組件）拼裝成各種各樣的令人嘆為觀止的創(chuàng)意，那才是我理解的創(chuàng)造力：

另外從系統(tǒng)性思維上講，如果在不考慮資源的情況下，我倒是挺支持每一位設(shè)計(jì)師都自己去設(shè)計(jì)一套設(shè)計(jì)系統(tǒng)，因?yàn)樵谖覀兤綍r(shí)看來，2/3年經(jīng)驗(yàn)的設(shè)計(jì)師和10年的設(shè)計(jì)師他們的產(chǎn)出物或許不會(huì)差太多，但對(duì)設(shè)計(jì)觀架構(gòu)的能力千差萬別，前者依賴感覺和直覺素養(yǎng)做事，后者更靠縝密的邏輯和推理來做事；我更喜歡后者多一些，并不是因?yàn)樗麄冎v起自己作品的時(shí)候聽起來多么高大上，而是因?yàn)橐罁?jù)推理方法可以時(shí)刻保持輸出的穩(wěn)定性。

如果你了解NBA的話，你一定知道美職籃里天賦最高的運(yùn)動(dòng)員 - 麥迪，他有過35秒13分驚為天人之作，把心理素質(zhì)和身體極限展示的淋漓盡致，但就整個(gè)職業(yè)生涯來說，并不算特別突出，對(duì)比同時(shí)代的科比來說，他的個(gè)人/團(tuán)隊(duì)成就都還顯得差點(diǎn)意思；天賦不算頂級(jí)的科比通過不斷的自我訓(xùn)練和戰(zhàn)術(shù)研究能夠保持20年的穩(wěn)定輸出，贏得了5個(gè)總冠軍戒指，成為了我們這一代球迷心目中的“神”。

我無意詆毀這兩大巨星，也無意內(nèi)卷，只是想說，做事，終究不能托付給“天賦”和“靈感”，勤奮和努力在一定程度上也許可以幫你飛到更高。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：站酷   作者：負(fù)能量補(bǔ)給站

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

一、簡介

PM2是node進(jìn)程管理工具，可以利用它來簡化很多node應(yīng)用管理的繁瑣任務(wù)，如性能監(jiān)控、自動(dòng)重啟、負(fù)載均衡等，而且使用非常簡單。

二、前期必備

1. node 環(huán)境
2. npm

三、安裝

全局安裝

npm install -g pm2

四、入門教程

挑express應(yīng)用來舉例。一般我們都是通過npm start啟動(dòng)應(yīng)用，其實(shí)就是調(diào)用node ./bin/www。那么，換成pm2就是

注意，這里用了–watch參數(shù)，意味著當(dāng)你的express應(yīng)用代碼發(fā)生變化時(shí)，pm2會(huì)幫你重啟服務(wù)(長時(shí)間監(jiān)測有可能會(huì)出現(xiàn)問題，這時(shí)需要重啟項(xiàng)目)

pm2 start ./bin/www –watch

五、常用命令

啟動(dòng)

參數(shù)說明：
–watch：監(jiān)聽?wèi)?yīng)用目錄的變化，一旦發(fā)生變化，自動(dòng)重啟。如果要精確監(jiān)聽、不見聽的目錄，最好通過配置文件。

-i –instances：啟用多少個(gè)實(shí)例，可用于負(fù)載均衡。如果-i 0或者-i max，則根據(jù)當(dāng)前機(jī)器核數(shù)確定實(shí)例數(shù)目。

–ignore-watch：排除監(jiān)聽的目錄/文件，可以是特定的文件名，也可以是正則。比如–ignore-watch=”test node_modules “some scripts”“

-n –name：應(yīng)用的名稱。查看應(yīng)用信息的時(shí)候可以用到。

-o –output ：標(biāo)準(zhǔn)輸出日志文件的路徑。

-e –error ：錯(cuò)誤輸出日志文件的路徑。

–interpreter ：the interpreter pm2 should use for executing app (bash, python…)。比如你用的coffee script來編寫應(yīng)用。
完整命令行參數(shù)列表：地址

pm2 start app.js –watch -i 2

重啟

pm2 restart app.js

停止

停止特定的應(yīng)用?？梢韵韧ㄟ^pm2 list獲取應(yīng)用的名字（–name指定的）或者進(jìn)程id。

pm2 stop app_name|app_id

如果要停止所有應(yīng)用，可以

pm2 stop all

刪除

pm2 stop app_name|app_id
pm2 stop all

查看進(jìn)程狀態(tài)

pm2 list

自動(dòng)重啟

pm2 start app.js –watch

*這里是監(jiān)控整個(gè)項(xiàng)目的文件

日志查看

除了可以打開日志文件查看日志外，還可以通過pm2 logs來查看實(shí)時(shí)日志。

pm2 logs

更新pm2

pm2 save # 記得保存進(jìn)程狀態(tài)
npm install pm2 -g
pm2 update

 

附pm2命令：

$ npm install pm2 -g # 命令行安裝 pm2  $ pm2 start app.js -i 4 # 后臺(tái)運(yùn)行pm2，啟動(dòng)4個(gè)app.js  # 也可以把'max' 參數(shù)傳遞給 start # 正確的進(jìn)程數(shù)目依賴于Cpu的核心數(shù)目 $ pm2 start app.js --name my-api # 命名進(jìn)程 $ pm2 list # 顯示所有進(jìn)程狀態(tài) $ pm2 monit # 監(jiān)視所有進(jìn)程 $ pm2 logs # 顯示所有進(jìn)程日志 $ pm2 stop all # 停止所有進(jìn)程 $ pm2 restart all # 重啟所有進(jìn)程 $ pm2 reload all # 0 秒停機(jī)重載進(jìn)程 (用于 NETWORKED 進(jìn)程) $ pm2 stop 0 # 停止指定的進(jìn)程 $ pm2 restart 0 # 重啟指定的進(jìn)程 $ pm2 startup # 產(chǎn)生 init 腳本 保持進(jìn)程活著 $ pm2 web # 運(yùn)行健壯的 computer API endpoint (http://localhost:9615) $ pm2 delete 0 # 殺死指定的進(jìn)程 $ pm2 delete all # 殺死全部進(jìn)程

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)